/* ============================================================
   ΓΛΩΣΣΟΚΑΣΤΡΟ — Στυλ (θέμα: μελάνι, βιβλία, γράμματα)
   Λειτουργεί 100% offline (γραμματοσειρές συστήματος).
   ============================================================ */

:root{
  --parchment:#fff8ec;        /* περγαμηνή */
  --parchment-2:#f6ead1;
  --ink:#1f2a44;              /* βαθύ μπλε μελάνι */
  --ink-soft:#41507a;
  --teal:#0f7d7d;            /* πράσινο-μπλε */
  --teal-dark:#0a5c5c;
  --gold:#e8a838;            /* χρυσό */
  --gold-dark:#c9871d;
  --terracotta:#d9694a;      /* κεραμιδί */
  --leaf:#5fa34a;            /* πράσινο σωστού */
  --leaf-dark:#3f7e2e;
  --rose:#d9534f;            /* λάθος (απαλό, χωρίς τιμωρία) */
  --paper-line:#e7d9bd;
  --shadow: 0 8px 22px rgba(31,42,68,.16);
  --shadow-lg: 0 16px 40px rgba(31,42,68,.22);
  --radius: 18px;
  --radius-sm: 12px;
  --font: "Baloo 2","Quicksand","Segoe UI","Helvetica Neue",-apple-system,
          "Noto Sans Greek","DejaVu Sans",system-ui,sans-serif;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #fffdf6 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #fdeccd 0%, transparent 55%),
    var(--parchment);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Διακοσμητικό φόντο με γράμματα ---------- */
.bg-decor{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.bg-decor .float{
  position:absolute; font-weight:800; color:var(--ink);
  opacity:.05; font-size:8vmax; user-select:none;
  animation: bob 9s ease-in-out infinite;
}
.f1{ left:6%;  top:14%; } .f2{ left:84%; top:10%; animation-delay:.6s; }
.f3{ left:18%; top:70%; animation-delay:1.2s; } .f4{ left:72%; top:64%; animation-delay:1.8s; }
.f5{ left:46%; top:8%;  animation-delay:2.4s; } .f6{ left:90%; top:46%; animation-delay:3s; }
.f7{ left:30%; top:40%; animation-delay:3.6s; } .f8{ left:60%; top:84%; animation-delay:4.2s; }
.f9{ left:10%; top:46%; animation-delay:4.8s; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-18px) rotate(4deg);} }

/* ---------- Top bar (HUD) ---------- */
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 16px;
  background:linear-gradient(180deg,var(--ink),#27325a);
  color:var(--parchment); box-shadow:var(--shadow);
}
.topbar-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.avatar-chip{ font-size:1.6rem; background:rgba(255,255,255,.14); border-radius:50%;
  width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; }
.hud-name{ font-weight:700; font-size:1.05rem; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:38vw; }
.topbar-right{ display:flex; align-items:center; gap:8px; }
.hud-stat{ background:rgba(255,255,255,.12); padding:6px 10px; border-radius:999px;
  font-size:.95rem; white-space:nowrap; }
.hud-stat b{ font-size:1.05rem; }
.icon-btn{ border:none; cursor:pointer; background:rgba(255,255,255,.16);
  color:#fff; width:42px; height:42px; border-radius:12px; font-size:1.2rem;
  transition:transform .12s, background .15s; }
.icon-btn:hover{ background:rgba(255,255,255,.28); transform:translateY(-2px); }
.icon-btn:active{ transform:scale(.92); }

/* ---------- Layout κεντρικό ---------- */
#app{ position:relative; z-index:1; flex:1; width:100%;
  max-width:920px; margin:0 auto; padding:22px 18px 40px; }

.screen{ animation: fadeUp .35s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

/* ---------- Κάρτες ---------- */
.card{
  background:var(--parchment);
  border:2px solid var(--paper-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
}

/* ---------- Τίτλοι ---------- */
.logo{ text-align:center; margin:6px 0 18px; }
.logo h1{ font-size:clamp(2rem,7vw,3.2rem); margin:0; color:var(--ink);
  letter-spacing:.5px; text-shadow:2px 2px 0 var(--gold); }
.logo .quill{ font-size:clamp(2.4rem,9vw,3.6rem); display:block; }
.logo p{ margin:6px 0 0; color:var(--teal-dark); font-weight:600; }

h2.screen-title{ font-size:clamp(1.4rem,5vw,2rem); margin:0 0 4px; }
.muted{ color:#6b6353; }

/* ---------- Φόρμα έναρξης ---------- */
.field-label{ font-weight:700; margin:14px 0 8px; display:block; }
.text-input{
  width:100%; font-family:var(--font); font-size:1.15rem;
  padding:14px 16px; border-radius:var(--radius-sm);
  border:2px solid var(--paper-line); background:#fffdf7; color:var(--ink);
}
.text-input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(15,125,125,.15); }

.avatar-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr));
  gap:10px; margin-top:8px; }
.avatar-opt{ font-size:2rem; background:#fffdf7; border:2px solid var(--paper-line);
  border-radius:14px; padding:10px 0; cursor:pointer; transition:transform .12s, border-color .15s, background .15s; }
.avatar-opt:hover{ transform:translateY(-3px); }
.avatar-opt.selected{ border-color:var(--gold); background:#fff3d8; transform:translateY(-3px) scale(1.04); box-shadow:var(--shadow); }

/* ---------- Κουμπιά ---------- */
.btn{
  font-family:var(--font); font-weight:800; font-size:1.1rem; cursor:pointer;
  border:none; border-radius:14px; padding:14px 22px; color:#fff;
  background:linear-gradient(180deg,var(--teal),var(--teal-dark));
  box-shadow:0 5px 0 var(--teal-dark), var(--shadow);
  transition:transform .1s, box-shadow .1s, filter .15s;
}
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--teal-dark); }
.btn.gold{ background:linear-gradient(180deg,var(--gold),var(--gold-dark)); box-shadow:0 5px 0 var(--gold-dark), var(--shadow); }
.btn.gold:active{ box-shadow:0 1px 0 var(--gold-dark); }
.btn.ghost{ background:transparent; color:var(--ink); border:2px solid var(--ink);
  box-shadow:none; }
.btn.ghost:active{ transform:translateY(2px); }
.btn.block{ display:block; width:100%; margin-top:18px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

.link-btn{ background:none; border:none; color:var(--ink); cursor:pointer;
  font-family:var(--font); font-size:.95rem; text-decoration:underline; opacity:.8; }
.link-btn:hover{ opacity:1; }

/* ---------- Επιλογή δυσκολίας ---------- */
.diff-row{ display:flex; gap:12px; margin-top:8px; }
.diff-opt{ flex:1; text-align:center; padding:14px; border-radius:14px; cursor:pointer;
  background:#fffdf7; border:2px solid var(--paper-line); font-weight:700; transition:.15s; }
.diff-opt .big{ font-size:1.6rem; display:block; }
.diff-opt.selected{ border-color:var(--teal); background:#e7f5f5; }

/* ---------- Μενού κόσμων ---------- */
.worlds-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px; margin-top:18px; }
.world-card{ position:relative; cursor:pointer; text-align:left;
  background:var(--parchment); border:2px solid var(--paper-line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); transition:transform .14s, box-shadow .14s, border-color .14s;
  overflow:hidden; }
.world-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--gold); }
.world-card .wc-emoji{ font-size:2.6rem; }
.world-card h3{ margin:8px 0 2px; font-size:1.2rem; }
.world-card .wc-sub{ color:#6b6353; font-size:.92rem; min-height:2.4em; }
.world-card .wc-bar{ height:10px; background:var(--parchment-2); border-radius:999px; margin-top:12px; overflow:hidden; }
.world-card .wc-bar > i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold),var(--terracotta)); border-radius:999px; transition:width .6s; }
.world-card .wc-meta{ display:flex; justify-content:space-between; font-size:.85rem; margin-top:6px; color:var(--teal-dark); font-weight:700; }
.world-card .wc-badge{ position:absolute; top:10px; right:10px; font-size:1.4rem;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.2)); }

/* ---------- Παιχνίδι: μπάρα προόδου ---------- */
.play-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.play-head .pill{ background:#fff3d8; border:2px solid var(--gold); color:var(--gold-dark);
  font-weight:800; border-radius:999px; padding:6px 14px; }
.streak-pill{ background:#ffe9e2; border-color:var(--terracotta); color:var(--terracotta); }
.progressbar{ flex:1; min-width:140px; height:14px; background:var(--parchment-2);
  border-radius:999px; overflow:hidden; border:2px solid var(--paper-line); }
.progressbar > i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--teal),var(--leaf)); transition:width .4s; }

.q-card{ background:var(--parchment); border:2px solid var(--paper-line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; }
.q-instruction{ color:var(--teal-dark); font-weight:700; margin:0 0 6px; }
.q-text{ font-size:clamp(1.3rem,4.5vw,1.7rem); font-weight:800; margin:6px 0 18px; line-height:1.35; }
.q-text .blank{ color:var(--terracotta); }

/* ---------- Επιλογές (multiple choice) ---------- */
.options{ display:grid; gap:12px; }
.opt{
  font-family:var(--font); font-size:1.15rem; font-weight:700; text-align:left;
  background:#fffdf7; border:2px solid var(--paper-line); color:var(--ink);
  border-radius:14px; padding:15px 18px; cursor:pointer;
  transition:transform .1s, border-color .15s, background .15s;
}
.opt:hover:not(:disabled){ transform:translateY(-2px); border-color:var(--teal); }
.opt:active:not(:disabled){ transform:scale(.98); }
.opt.correct{ background:#e6f6df; border-color:var(--leaf); color:var(--leaf-dark); }
.opt.wrong{ background:#fdeaea; border-color:var(--rose); color:var(--rose); }
.opt.faded{ opacity:.35; }
.opt:disabled{ cursor:default; }

/* ---------- Categorize (κατηγορίες) ---------- */
.cat-word{ text-align:center; font-size:clamp(2rem,8vw,3rem); font-weight:800;
  background:#fff3d8; border:3px dashed var(--gold); border-radius:16px;
  padding:18px; margin:6px 0 18px; cursor:grab; user-select:none; }
.cat-word.dragging{ opacity:.5; }
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.cat-box{ background:#fffdf7; border:2px solid var(--paper-line); border-radius:14px;
  padding:16px 12px; text-align:center; font-weight:800; cursor:pointer; transition:.15s; }
.cat-box:hover{ border-color:var(--teal); transform:translateY(-2px); }
.cat-box.dragover{ border-color:var(--gold); background:#fff3d8; }
.cat-box.correct{ background:#e6f6df; border-color:var(--leaf); color:var(--leaf-dark); }
.cat-box.wrong{ background:#fdeaea; border-color:var(--rose); color:var(--rose); }

/* ---------- Match (ταίριασμα) ---------- */
.match-kind{ text-align:center; font-weight:800; color:var(--terracotta); margin-bottom:12px; font-size:1.2rem; }
.match-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.match-col{ display:grid; gap:10px; }
.match-item{ font-family:var(--font); font-size:1.1rem; font-weight:700;
  background:#fffdf7; border:2px solid var(--paper-line); border-radius:12px;
  padding:14px; cursor:pointer; transition:.12s; text-align:center; }
.match-item:hover:not(.done){ border-color:var(--teal); transform:translateY(-2px); }
.match-item.selected{ border-color:var(--gold); background:#fff3d8; }
.match-item.done{ background:#e6f6df; border-color:var(--leaf); color:var(--leaf-dark);
  cursor:default; opacity:.85; }
.match-item.flash-wrong{ animation: shake .4s; border-color:var(--rose); background:#fdeaea; }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-7px);} 75%{transform:translateX(7px);} }

/* ---------- Order (σειρά λέξεων) ---------- */
.order-slot{ min-height:64px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  background:#fffdf7; border:2px dashed var(--teal); border-radius:14px; padding:12px; margin-bottom:14px; }
.order-slot:empty::before{ content:"Πάτησε τις λέξεις με τη σειρά…"; color:#9c917c; font-weight:600; }
.order-bank{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:6px; }
.word-tile{ font-family:var(--font); font-size:1.15rem; font-weight:800;
  background:#fff3d8; border:2px solid var(--gold); color:var(--ink);
  border-radius:12px; padding:10px 16px; cursor:pointer; transition:transform .1s; }
.word-tile:hover{ transform:translateY(-2px); }
.word-tile:active{ transform:scale(.95); }
.word-tile.placed{ background:#e7f5f5; border-color:var(--teal); }

/* ---------- Hint & feedback ---------- */
.action-row{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.feedback{ margin-top:16px; border-radius:14px; padding:16px; font-weight:600; display:none; animation:fadeUp .25s both; }
.feedback.show{ display:block; }
.feedback.good{ background:#e6f6df; border:2px solid var(--leaf); color:var(--leaf-dark); }
.feedback.bad{ background:#fff3ea; border:2px solid var(--terracotta); color:#a8442b; }
.feedback .fb-title{ font-weight:800; font-size:1.1rem; display:block; margin-bottom:4px; }

/* ---------- Γιορτή νίκης ---------- */
.win-card{ text-align:center; }
.win-card .trophy{ font-size:4.5rem; animation: pop .5s ease; }
@keyframes pop{ 0%{transform:scale(0) rotate(-20deg);} 70%{transform:scale(1.2);} 100%{transform:scale(1);} }
.win-stars{ font-size:2.4rem; letter-spacing:6px; margin:6px 0; }
.badge-won{ display:inline-block; background:#fff3d8; border:2px solid var(--gold);
  color:var(--gold-dark); font-weight:800; border-radius:999px; padding:8px 16px; margin:8px 4px; }

/* ---------- Confetti ---------- */
.confetti{ position:fixed; top:-12px; width:12px; height:18px; z-index:50; pointer-events:none;
  animation: fall linear forwards; }
@keyframes fall{ to{ transform:translateY(105vh) rotate(720deg); opacity:.9; } }

/* ---------- Πίνακας παρασήμων ---------- */
.badge-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:14px; }
.badge-cell{ text-align:center; padding:14px; border-radius:14px; border:2px solid var(--paper-line); background:#fffdf7; }
.badge-cell.locked{ opacity:.45; filter:grayscale(.6); }
.badge-cell .be{ font-size:2.4rem; display:block; }
.badge-cell .bn{ font-weight:800; font-size:.92rem; margin-top:4px; }

/* ---------- Footer ---------- */
.credits{ position:relative; z-index:1; text-align:center; padding:14px;
  color:#7a715e; font-size:.88rem; }
.credits .sep{ margin:0 8px; }

/* ---------- Toast (μηδενισμός κ.λπ.) ---------- */
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:999px;
  box-shadow:var(--shadow-lg); opacity:0; transition:.3s; z-index:60; font-weight:700; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width:560px){
  #app{ padding:16px 12px 32px; }
  .card,.q-card{ padding:18px; }
  .match-wrap{ gap:10px; }
  .hud-name{ max-width:30vw; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; transition-duration:.05s !important; }
}