/* =====================================================================
   «Μικροί Εξερευνητές» — Γεωγραφία της Ελλάδας
   Θέμα: χάρτης / εξερεύνηση / πυξίδα
   Παλέτα: γαλάζιο θάλασσας, πράσινο στεριάς, άμμος, ξύλο/χαρτί
   ===================================================================== */

:root{
  --sea:        #aee3f2;
  --sea-deep:   #6db6d6;
  --sea-line:   #3d7e9a;
  --land:       #8fc06b;
  --land-2:     #7bb15a;
  --land-line:  #4f7d3a;
  --sand:       #f4e4c1;
  --sand-2:     #ead7ab;
  --paper:      #fff8ec;
  --ink:        #3a2f1d;
  --wood:       #b07d4b;
  --gold:       #f2b134;
  --gold-deep:  #d99216;
  --red:        #e76f51;
  --green-ok:   #4caf6e;
  --shadow:     rgba(58,47,29,.18);
  --locked:     #c9cdbf;
  --font: "Comic Sans MS", "Segoe UI Rounded", "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; height:100%; }

body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 15%, #d7f0fa 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, #cdeecb 0%, transparent 45%),
    repeating-linear-gradient(45deg, #eef6f9 0 22px, #e9f3f7 22px 44px);
  -webkit-tap-highlight-color:transparent;
}

/* compass watermark — ως div (το body::before κρύβεται από το shared/ui.css) */
.geo-compass{
  position:fixed; right:-30px; bottom:-30px;
  font-size:240px; opacity:.06; pointer-events:none; z-index:0;
  animation: compass-spin 90s linear infinite;
  transform-origin: center center;
  user-select:none;
}
@keyframes compass-spin{ to{ transform:rotate(360deg); } }

.wrap{
  position:relative; z-index:1;
  max-width:1080px; margin:0 auto; padding:14px;
}

/* ---------- Κοινά ---------- */
.hidden{ display:none !important; }

button{ font-family:var(--font); cursor:pointer; }

.btn{
  border:none; border-radius:16px; padding:14px 24px;
  font-size:1.1rem; font-weight:bold; color:#fff;
  background:linear-gradient(#ffce5c,var(--gold-deep));
  box-shadow:0 4px 0 #b3760f, 0 6px 12px var(--shadow);
  transition:transform .08s, box-shadow .08s;
}
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #b3760f; }
.btn.secondary{ background:linear-gradient(#9fd3ef,#5ba3c7); box-shadow:0 4px 0 #3d7e9a,0 6px 12px var(--shadow); }
.btn.ghost{ background:transparent; color:var(--ink); box-shadow:none; border:2px dashed var(--wood); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Επικεφαλίδα / πυξίδα ---------- */
.topbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:linear-gradient(var(--paper),var(--sand));
  border:3px solid var(--wood); border-radius:20px;
  padding:10px 16px; margin-bottom:14px;
  box-shadow:0 6px 0 #946537, 0 10px 18px var(--shadow);
}
.topbar h1{ font-size:1.4rem; margin:0; color:#7a4f1d; letter-spacing:.5px; }
.topbar .spacer{ flex:1; }
.badge-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:2px solid var(--gold);
  border-radius:999px; padding:4px 12px; font-weight:bold; font-size:.95rem;
}
.icon-btn{
  border:2px solid var(--wood); background:#fff; border-radius:12px;
  width:44px; height:44px; font-size:1.3rem; line-height:1;
}

/* ---------- Οθόνη έναρξης ---------- */
.start-card{
  background:linear-gradient(var(--paper),var(--sand));
  border:4px solid var(--wood); border-radius:28px;
  padding:28px; max-width:640px; margin:24px auto;
  text-align:center; box-shadow:0 10px 0 #946537,0 16px 30px var(--shadow);
}
.start-card h2{ font-size:2rem; margin:.2em 0; color:#7a4f1d; }
.start-card p{ font-size:1.05rem; }
.start-card input[type=text]{
  font-family:var(--font); font-size:1.2rem; text-align:center;
  padding:12px 16px; border-radius:14px; border:3px solid var(--sea-line);
  width:80%; max-width:340px; background:#fff;
}
.avatars{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:16px 0; }
.avatar{
  font-size:2.2rem; width:74px; height:74px; border-radius:50%;
  border:3px solid var(--sand-2); background:#fff; display:grid; place-items:center;
  transition:transform .1s;
}
.avatar:hover{ transform:scale(1.08); }
.avatar.sel{ border-color:var(--gold); box-shadow:0 0 0 4px #ffe7a8; transform:scale(1.1); }

/* ---------- Μενού αποστολών ---------- */
.progress-strip{
  background:var(--paper); border:2px solid var(--paper-line,#e7d9bd); border-radius:16px;
  padding:12px 16px; margin:0 0 14px; box-shadow:var(--edu-shadow,0 8px 22px rgba(31,42,68,.16));
}
.progress-strip .bar{
  height:12px; background:#f6ead1; border-radius:999px; overflow:hidden; margin-top:6px;
}
.progress-strip .bar > span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));
  transition:width .6s ease;
}

.missions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.mission{
  background:linear-gradient(var(--paper),#fff);
  border:3px solid var(--sea-deep); border-radius:20px; padding:18px;
  text-align:center; box-shadow:0 5px 0 var(--sea-line),0 8px 16px var(--shadow);
  transition:transform .1s;
}
.mission:hover{ transform:translateY(-4px); }
.mission .emoji{ font-size:2.6rem; }
.mission h3{ margin:.4em 0 .2em; color:#2c6079; }
.mission p{ font-size:.9rem; margin:.2em 0 .8em; min-height:2.4em; }

/* ---------- Διάταξη παιχνιδιού ---------- */
.game-area{ display:grid; grid-template-columns:1.2fr .8fr; gap:16px; align-items:start; }
@media (max-width:820px){ .game-area{ grid-template-columns:1fr; } }

.map-panel, .quiz-panel{
  background:var(--paper); border:3px solid var(--wood); border-radius:22px;
  padding:14px; box-shadow:0 6px 0 #946537,0 10px 18px var(--shadow);
}

/* ---------- Χάρτης SVG ---------- */
.map-panel svg{ width:100%; height:auto; display:block; touch-action:manipulation; }
/* Στο μενού ο χάρτης είναι πλέον πλήρους πλάτους — περιόρισέ τον & κεντράρισε */
#menu-map{ max-width:460px; margin:0 auto; }
.region{
  /* το fill ορίζεται ανά διαμέρισμα από το JS (attribute) */
  stroke:var(--land-line); stroke-width:2.5;
  transition:opacity .15s, filter .15s; transform-origin:center;
  cursor:pointer;
}
.region:hover{ filter:brightness(1.07); }
.region.explored{ stroke:#3c6a28; stroke-width:3; }
.region.locked{ opacity:.5; cursor:default; }   /* όχι ακόμη εξερευνημένο: χρωματιστό αλλά πιο αχνό */
.region.clickable:hover{ filter:brightness(1.12); }
.region.hint{ fill:#ffe08a !important; stroke:var(--gold-deep); animation:pulse 1s ease-in-out infinite; }
.region.correct{ fill:var(--green-ok); }
.region.wrong{ fill:var(--red); }
.region.target{ animation:pulse 1.2s ease-in-out infinite; }

.region-label{
  font-size:15px; font-weight:bold; fill:#2c4a13; pointer-events:none;
  text-anchor:middle; paint-order:stroke; stroke:#ffffffaa; stroke-width:3px;
}
.sea-label{ font-size:14px; fill:var(--sea-line); font-style:italic; text-anchor:middle; pointer-events:none; }
.map-bg{ fill:var(--sea); }
.poi{ cursor:pointer; }
.poi circle{ fill:var(--red); stroke:#fff; stroke-width:2; }
.poi.placed circle{ fill:var(--green-ok); }
.poi text{ font-size:13px; fill:var(--ink); paint-order:stroke; stroke:#fff; stroke-width:3px; text-anchor:middle; }
.poi-ghost circle{ fill:var(--gold); stroke:#fff; stroke-width:2; animation:pulse 1s infinite; }

@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

/* ---------- Πίνακας ερωτήσεων ---------- */
.quiz-panel h3{ margin-top:0; color:#7a4f1d; }
.prompt{
  background:linear-gradient(#fff,#fff8ea); border:2px solid var(--sand-2);
  border-radius:14px; padding:14px; font-size:1.15rem; margin-bottom:12px;
}
.options{ display:grid; gap:10px; }
.option{
  text-align:left; border:2px solid var(--sea-deep); background:#fff;
  border-radius:14px; padding:12px 14px; font-size:1.05rem; color:var(--ink);
  transition:transform .08s, background .1s;
}
.option:hover{ background:#eaf6fb; transform:translateX(3px); }
.option.correct{ background:#d6f5e0; border-color:var(--green-ok); }
.option.wrong{ background:#fbdcd4; border-color:var(--red); }

.match-cols{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.match-col h4{ text-align:center; margin:.2em 0; color:#2c6079; }
.chip{
  display:block; width:100%; margin:6px 0; padding:11px;
  border:2px solid var(--wood); border-radius:12px; background:#fff;
  font-size:1rem; color:var(--ink); transition:transform .08s;
}
.chip:hover{ transform:scale(1.03); }
.chip.sel{ background:#ffe7a8; border-color:var(--gold-deep); }
.chip.done{ background:#d6f5e0; border-color:var(--green-ok); color:#2f6b43; cursor:default; }
.chip.wrong{ background:#fbdcd4; border-color:var(--red); animation:shake .35s; }

@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* ---------- Πληροφορία μετά την απάντηση ---------- */
.feedback{
  margin-top:12px; border-radius:14px; padding:12px 14px; font-size:1rem;
  border:2px solid; animation:popin .25s;
}
.feedback.ok{ background:#e7f8ee; border-color:var(--green-ok); }
.feedback.no{ background:#fdeae3; border-color:var(--red); }
.feedback .did-you-know{ font-weight:bold; }
@keyframes popin{ from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }

.hud{ display:flex; gap:10px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
.hud .score{ font-weight:bold; background:#fff; border:2px solid var(--gold); border-radius:999px; padding:4px 12px; }
.hud .qcount{ color:#666; }

/* ---------- Παράσημα ---------- */
.badges-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.badge-item{
  display:flex; flex-direction:column; align-items:center; width:96px;
  background:#fff; border:2px solid var(--sand-2); border-radius:14px; padding:8px; font-size:.75rem; text-align:center;
}
.badge-item.locked{ filter:grayscale(1); opacity:.45; }
.badge-item .b-emoji{ font-size:1.8rem; }

/* ---------- Γιορτή νίκης ---------- */
.celebrate{
  position:fixed; inset:0; background:rgba(20,40,55,.55); z-index:50;
  display:grid; place-items:center;
}
.celebrate .card{
  background:linear-gradient(var(--paper),var(--sand)); border:4px solid var(--gold);
  border-radius:28px; padding:30px 36px; text-align:center; max-width:420px;
  box-shadow:0 14px 40px rgba(0,0,0,.4); animation:popin .4s;
}
.celebrate .big{ font-size:3.4rem; }
.confetti{ position:fixed; top:-20px; width:12px; height:18px; z-index:60; border-radius:3px; animation:fall linear forwards; }
@keyframes fall{ to{ transform:translateY(108vh) rotate(540deg); opacity:.9; } }

/* ---------- Responsive ---------- */
@media (max-width:560px){
  .topbar h1{ font-size:1.1rem; }
  .start-card{ padding:18px; }
  .start-card h2{ font-size:1.5rem; }
  .btn{ padding:12px 18px; font-size:1rem; }
}