/* MultiplicaT — every style for the client, extracted from index.html. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sky: #7ec8f0;
  --ocean: #1a8cd8;
  --ocean-deep: #0e5f8a;
  --grass: #2d8a4e;
  --sand: #f4d58d;
  --correct: #27ae60;
  --wrong: #e74c3c;
  --star-gold: #f1c40f;
  --jewel: #8e44ad;
  --locked: #95a5a6;
  --text-dark: #2c3e50;
  --bg-light: #eaf4fd;
  --brand: #1e3d8f;
  --brand-blue: #2f6fed;
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: linear-gradient(180deg, #bfe6ff 0%, var(--sky) 40%, var(--ocean) 100%);
  min-height: 100vh;
  color: var(--text-dark);
  overflow-x: hidden;
}

h1, h2, h3, .game-title { font-family: 'Fredoka One', cursive; }

.screen { display: none; min-height: 100vh; padding: 20px; }
.screen.active { display: flex; flex-direction: column; align-items: center; animation: fadeIn 0.3s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  max-width: 600px;
  width: 100%;
}

.btn {
  display: inline-block;
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-family: 'Fredoka One', cursive;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { background: var(--locked) !important; cursor: not-allowed; filter: grayscale(0.4) opacity(0.7); }

.btn-primary { background: var(--grass); color: white; }
.btn-warning { background: var(--star-gold); color: var(--text-dark); }
.btn-danger  { background: var(--wrong); color: white; }
.btn-ocean   { background: var(--ocean); color: white; }

label { display:block; text-align:left; font-weight:600; margin: 14px 0 6px; color: var(--text-dark); }

input[type="text"], input[type="password"] {
  padding: 13px 16px;
  border: 3px solid #ddd;
  border-radius: 12px;
  font-size: 20px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
}
input:focus { border-color: var(--ocean); }

.game-title { font-size: 44px; color: white; text-shadow: 3px 3px 0 var(--ocean-deep); margin: 16px 0; letter-spacing: 1px; }
.game-title .x { color: var(--brand-blue); }

.error-msg { color: var(--wrong); font-family:'Fredoka One',cursive; min-height: 22px; margin-top: 12px; }

/* Login mascot circle */
.login-mascot {
  width: 150px; height: 150px; margin: 8px auto 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff 0%, #d6ecff 70%, #a9d6ff 100%);
  display:flex; align-items:center; justify-content:center;
  font-size: 84px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  border: 5px solid white;
}

/* ---- Top status bar (stars / jewels / thumbs) ---- */
.topbar {
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background: rgba(255,255,255,0.9);
  border-radius: 14px; padding: 10px 18px; margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-width: 600px; width: 100%;
}
.topbar .who { font-family:'Fredoka One',cursive; font-size: 20px; }
.topbar .who small { display:block; font-family:'Segoe UI',sans-serif; font-weight:400; font-size:12px; color:#777; }
.topbar .counter { font-size: 18px; font-family:'Fredoka One',cursive; }
.topbar .spacer { margin-left:auto; }

/* ---- Numpad (calculator style) ---- */
.answer-display {
  font-family:'Fredoka One',cursive; font-size: 40px;
  min-height: 60px; line-height: 60px;
  background: #f4f7fb; border: 3px solid #dbe6f3; border-radius: 12px;
  text-align:center; margin: 0 auto 14px; max-width: 260px;
  letter-spacing: 3px;
}
.numpad {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  max-width: 260px; margin: 0 auto;
}
.numpad button {
  font-family:'Fredoka One',cursive; font-size: 26px;
  padding: 16px 0; border: none; border-radius: 12px; cursor: pointer;
  background: #eaf1fa; color: var(--text-dark);
  box-shadow: 0 3px 0 #c7d6ea; transition: transform 0.05s, box-shadow 0.05s;
}
.numpad button:active { transform: translateY(3px); box-shadow: 0 0 0 #c7d6ea; }
.numpad button.key-c  { background: #ffe0dd; box-shadow: 0 3px 0 #f3b7b0; }
.numpad button.key-ok { background: var(--grass); color:#fff; box-shadow: 0 3px 0 #1f6b3b; }
.numpad button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Time bar ---- */
.timebar-wrap {
  max-width: 320px; margin: 0 auto 8px; width: 100%;
}
.timebar-track {
  height: 20px; background: #e6ecf3; border-radius: 10px; overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.timebar-fill {
  height: 100%; width: 100%; border-radius: 10px;
  background: var(--correct); transition: background 0.2s;
}
.timebar-label { text-align:center; font-family:'Fredoka One',cursive; margin-top: 4px; font-size: 15px; color:#555; }

/* ---- Feedback + animations ---- */
.feedback { text-align:center; font-size: 22px; font-family:'Fredoka One',cursive; min-height: 34px; margin: 12px 0; }
.feedback.correct { color: var(--correct); }
.feedback.wrong { color: var(--wrong); }

@keyframes shake {
  0%,100%{transform:translateX(0);} 20%{transform:translateX(-10px);} 40%{transform:translateX(10px);}
  60%{transform:translateX(-6px);} 80%{transform:translateX(6px);}
}
.shake { animation: shake 0.4s; }
@keyframes bounce { 0%{transform:scale(1);} 50%{transform:scale(1.15);} 100%{transform:scale(1);} }
.bounce { animation: bounce 0.3s; }

.exercise-display { font-family:'Fredoka One',cursive; font-size: 48px; text-align:center; margin: 16px 0; min-height: 60px; }

.note {
  background: #fff8e1; border: 2px dashed #e0c86a; border-radius: 12px;
  padding: 14px 18px; color: #7a6413; font-size: 14px; margin-top: 16px;
}

.row-center { text-align:center; }
.mt16 { margin-top: 16px; }

/* ============================================================ */
/* Numeria map (phase 4 — placeholder landscape art)           */
/* ============================================================ */
.numeria-map {
  position: relative; width: 100%; max-width: 720px; height: 540px;
  margin: 0 auto;
}
.map-controls {
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top: 14px;
}

/* Surrounding zone cards */
.zone {
  position: absolute; width: 150px; height: 132px; border-radius: 16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25); overflow:hidden;
  transition: transform 0.2s, filter 0.2s;
}
.zone:not(.locked):hover { transform: translateY(-3px) scale(1.03); }
.zone.locked { filter: grayscale(0.65) brightness(0.82); }
.zone.complete { outline: 3px solid var(--star-gold); }
.zone .zone-num {
  position:absolute; top:0; right:10px; font-family:'Fredoka One',cursive;
  font-size:58px; opacity:0.25; line-height:1;
}
.zone .zone-emoji { font-size: 36px; line-height:1; }
.zone .zone-name { font-family:'Fredoka One',cursive; font-size:12.5px; margin-top:3px; text-align:center; padding:0 6px; }
.zone .zone-stars { font-size:14px; margin-top:2px; color:var(--star-gold); }
.zone-btn {
  font-family:'Fredoka One',cursive; font-size:12px; padding:5px 14px; margin-top:6px;
  border:none; border-radius:9px; background:var(--grass); color:#fff; cursor:pointer;
  box-shadow:0 3px 0 #1f6b3b;
}
.zone-btn:active:not(:disabled) { transform: translateY(3px); box-shadow:0 0 0 #1f6b3b; }
.zone-btn:disabled { background:var(--locked); box-shadow:0 3px 0 #7f8c8d; cursor:not-allowed; }

/* Central cluster: fields of five (decorative) + the two towers */
.fields-ring {
  position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);
  width:300px; height:250px; border-radius:50%; z-index:2;
  background: radial-gradient(circle at 50% 40%, #a9e08a 0%, #6fbf5a 55%, #3f9d3f 100%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2), inset 0 0 40px rgba(0,0,0,0.12);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom: 14px; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,0.4);
}
.fields-ring .fields-emoji { position:absolute; top:22px; left:34px; font-size:26px; opacity:.9; }
.fields-ring .fields-emoji.b { left:auto; right:34px; top:40px; }
.fields-ring .fields-num { position:absolute; top:16px; right:18px; font-family:'Fredoka One',cursive; font-size:44px; opacity:.35; }
.fields-ring .fields-label { font-family:'Fredoka One',cursive; font-size:12px; }

.towers-cluster {
  position:absolute; left:50%; top:41%; transform:translate(-50%,-50%);
  z-index:5; display:flex; gap:16px; align-items:flex-end; justify-content:center;
}
.tower {
  width:64px; height:120px; border-radius:6px 6px 0 0; position:relative; cursor:pointer;
  background:linear-gradient(180deg,#d8c8ab 0%,#a89476 100%);
  box-shadow:0 6px 14px rgba(0,0,0,0.3);
  display:flex; align-items:flex-end; justify-content:center;
}
.tower::before {
  content:''; position:absolute; top:-9px; left:0; right:0; height:9px;
  background:repeating-linear-gradient(90deg,#a89476 0 11px, transparent 11px 19px);
}
.tower .tower-num { position:absolute; top:34px; font-family:'Fredoka One',cursive; font-size:34px; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,0.5); }
.tower.left { background:linear-gradient(180deg,#f3e4b0 0%,#d8b45a 100%); }
.tower.left .tower-trophy { position:absolute; top:30px; font-size:30px; }
.tower.right .zone-btn { position:absolute; bottom:10px; margin:0; }
.avatar-onmap {
  position:absolute; bottom:-6px; right:-34px; width:92px; height:auto; z-index:6;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
  pointer-events: none; /* let clicks pass through to the tower button underneath */
}
.towers-caption {
  position:absolute; bottom:-40px; left:50%; transform:translateX(-50%);
  white-space:nowrap; text-align:center; font-family:'Fredoka One',cursive; font-size:12px;
  color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,0.6);
}
.towers-caption .cap-stars { color:var(--star-gold); }

/* Golden table — the reward altar with 8 jewel sockets */
.golden-slab {
  margin:22px auto 0; max-width:460px; padding:24px 20px 28px;
  background:linear-gradient(180deg,#f9e79f 0%,#e6b93e 100%);
  border-radius:16px;
  box-shadow:0 12px 26px rgba(0,0,0,0.35), inset 0 2px 10px rgba(255,255,255,0.55);
  position:relative;
}
.golden-slab::before, .golden-slab::after {
  content:''; position:absolute; bottom:-16px; width:16px; height:18px;
  background:linear-gradient(180deg,#e6b93e,#b8891f); border-radius:0 0 4px 4px;
}
.golden-slab::before { left:26px; } .golden-slab::after { right:26px; }
.jewel-socket-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px 10px; }
.jewel-socket { display:flex; flex-direction:column; align-items:center; gap:5px; }
.jewel-gem {
  width:46px; height:46px; border-radius:50%;
  background:#8a7534; box-shadow:inset 0 3px 7px rgba(0,0,0,0.55);
}
.jewel-gem.filled { box-shadow:0 0 12px 2px currentColor, inset 0 2px 5px rgba(255,255,255,0.7); }
.jewel-label { font-family:'Fredoka One',cursive; font-size:15px; color:#7a5f1a; }
.jewel-label.dim { opacity:0.5; }

/* All-tables overview (chalkboard cards) */
.tables-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.table-card {
  background:#2d5016; border:6px solid #8B4513; border-radius:10px; padding:12px 10px;
  color:#f0e68c; font-family:'Patrick Hand',cursive;
  box-shadow:inset 0 0 24px rgba(0,0,0,0.35);
}
.table-card h3 { font-family:'Fredoka One',cursive; font-size:19px; color:#fff; text-align:center; margin-bottom:6px; }
.table-card .fact { font-size:17px; padding:1px 4px; }

/* Zone hub — themed room (tower chamber, forest, …) */
.chamber {
  max-width:620px; width:100%; border-radius:18px; padding:24px;
  color:#fff; box-shadow:0 8px 32px rgba(0,0,0,0.22); position:relative; overflow:hidden;
}
.chamber h2 { text-shadow:1px 1px 3px rgba(0,0,0,0.55); }
.chamber > p { text-shadow:1px 1px 2px rgba(0,0,0,0.55); margin-top:4px; }
.chamber-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.chamber-stars { font-size:24px; color:var(--star-gold); text-shadow:1px 1px 2px rgba(0,0,0,0.6); letter-spacing:2px; }
.chamber-avatar { width:96px; float:right; margin:-4px 0 6px 12px; filter:drop-shadow(0 4px 6px rgba(0,0,0,0.4)); }
.chamber-cards { display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.chamber-card {
  display:flex; align-items:center; gap:16px; padding:20px; border-radius:12px;
  background:var(--bg-light); border:3px solid transparent;
  cursor:pointer; transition:transform 0.15s, box-shadow 0.15s;
}
.chamber-card:hover:not(.disabled) { transform:translateX(5px); box-shadow:0 6px 16px rgba(0,0,0,0.2); }
.chamber-card.disabled { opacity:0.55; cursor:not-allowed; }
.chamber-card .ch-icon { font-size:34px; }
.chamber-card .ch-info h3 { font-size:18px; }
.chamber-card .ch-info p { font-size:13px; color:#666; }
.chamber-card .ch-badge { margin-left:auto; font-size:13px; color:#777; font-family:'Fredoka One',cursive; white-space:nowrap; }

/* Training Room */
.tr-fact-list { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:6px; }
.tr-fact-btn {
  font-family:'Fredoka One',cursive; font-size:20px; padding:12px 18px; border:none;
  border-radius:12px; background:#eaf1fa; color:var(--text-dark); cursor:pointer;
  box-shadow:0 3px 0 #c7d6ea; transition:transform 0.05s, box-shadow 0.05s;
}
.tr-fact-btn:hover { background:#dceafb; }
.tr-fact-btn:active { transform:translateY(3px); box-shadow:0 0 0 #c7d6ea; }
.tr-avatar { width:90px; filter:drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.tr-instruction { font-family:'Fredoka One',cursive; font-size:18px; color:var(--brand); margin:8px 0; }

@media (max-width: 720px) {
  .numeria-map { height: 470px; }
  .zone { width: 120px; height: 112px; }
  .zone .zone-num { font-size:44px; }
  .zone .zone-emoji { font-size:28px; }
  .fields-ring { width:230px; height:200px; }
  .towers-cluster { gap:10px; }
  .tower { width:52px; height:100px; }
  .avatar-onmap { width:70px; right:-26px; }
}