/* ============================================================
   MIGO1 – Die ABC-Insel · Lernspiele (Migo, der Pirat)
   Portrait-first: fürs Smartphone gebaut, am Desktop als
   zentrierte App-Spalte (max. 520px).
   ============================================================ */
:root{
  --himmel:#cfe9f8;
  --himmel-hell:#e8f5fc;
  --meer:#56b6e5;
  --meer-tief:#2f9ad1;
  --sand:#f9e7d3;
  --sand-dunkel:#efd9bd;
  --navy:#1e4e79;
  --pink:#db2e87;
  --migorot:#d94f43;
  --vokalrot:#e02b2b;
  --konsblau:#1660aa;
  --gold:#f2c64b;
  --gruen:#5aa832;
  --karte:#eaf5fc;
  --karte-rand:#bcdcef;
  --umlaut-bg:#fdf7dd;
  --schrift:#233042;
  --radius:16px;
  --schatten:0 3px 10px rgba(30,78,121,.18);
  --spalte:520px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{
  margin:0;
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  color:var(--schrift);
  background:linear-gradient(180deg,var(--himmel) 0%,var(--himmel-hell) 45%,var(--sand) 100%);
  min-height:100vh;
  display:flex;flex-direction:column;
}
h1,h2,h3,.tile-name,.topbar-title,.letter-card,.btn{font-family:"Baloo 2",cursive}
h1{font-size:1.55rem;margin:.2em 0;color:var(--navy)}
h2{font-size:1.35rem;color:var(--navy);margin:.2em 0}
h3{font-size:1.12rem;color:var(--navy);margin:.8em 0 .3em}
main{flex:1;width:100%;max-width:var(--spalte);margin:0 auto;padding:12px 12px 40px}
img{max-width:100%}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--meer);
  box-shadow:0 2px 8px rgba(30,78,121,.3);
}
.topbar-inner{
  max-width:var(--spalte);margin:0 auto;
  display:flex;align-items:center;gap:10px;
  padding:6px 12px;
}
.topbar-home{background:none;border:none;padding:0;line-height:0}
.topbar-badge{width:48px;height:48px;border-radius:50%;box-shadow:var(--schatten);transition:transform .15s}
.topbar-home:active .topbar-badge{transform:scale(.92)}
.topbar-title{display:flex;flex-direction:column;line-height:1.1;flex:1;color:#fff}
.topbar-migo{font-size:1.1rem;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.topbar-insel{font-size:.82rem;font-weight:600;opacity:.95}
.coin-box{
  background:#fff;border-radius:999px;padding:5px 13px 5px 9px;
  font-weight:700;font-size:1.05rem;color:var(--navy);
  box-shadow:var(--schatten);display:flex;align-items:center;gap:5px;
}
.coin{font-size:1.15rem}
.topbar-gear{background:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:1.25rem;box-shadow:var(--schatten);display:flex;align-items:center;justify-content:center;padding:0;flex:none}
.topbar-gear:active{transform:scale(.92)}
.topbar-title{min-width:0}

/* ---------- Migo-Bilder ---------- */
.spielbild{
  display:block;
  width:100%;
  max-width:280px;
  height:auto;
  aspect-ratio:2/3;
  object-fit:contain;
  object-position:center top;
  border-radius:var(--radius);
  box-shadow:var(--schatten);
  margin:0 auto 12px;
}
.mini-migo{
  width:42px;height:42px;flex:none;
  border-radius:50%;object-fit:cover;
  border:2px solid #fff;box-shadow:var(--schatten);
}
.result-migo{
  display:block;
  width:min(100%,220px);
  height:auto;
  aspect-ratio:2/3;
  object-fit:contain;
  object-position:center top;
  border-radius:var(--radius);
  box-shadow:var(--schatten);
  margin:0 auto 8px;
}

/* ---------- Hub ---------- */
.hero{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--schatten);margin:12px 0;
}
.hero-img{display:block;width:100%;height:auto}
.hero-text{padding:12px 16px 16px}
.hero-text p{margin:.4em 0 .8em}
.hub-h2{margin-top:20px}
.tiles{display:grid;gap:10px;grid-template-columns:1fr}
.tile{
  display:flex;flex-direction:row;align-items:center;gap:12px;
  background:#fff;border:2px solid var(--karte-rand);border-radius:var(--radius);
  padding:10px 12px;text-align:left;box-shadow:var(--schatten);
  transition:transform .12s;
}
.tile:active{transform:scale(.97)}
.tile-thumb{
  width:62px;height:62px;flex:none;
  border-radius:14px;object-fit:cover;
  box-shadow:0 2px 5px rgba(30,78,121,.2);
}
.tile-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.tile-name{font-size:1.1rem;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px}
.tile-sub{font-size:.84rem;color:#5b6b7d}
.tile-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:27px;height:27px;border-radius:50%;color:#fff;
  font-weight:800;font-size:.95rem;flex:none;
}
.c1{background:#e02b2b}.c2{background:#4aa32a}.c3{background:#2ea8c9}
.c4{background:#d94f43}.c5{background:#8c4a9e}.c6{background:#f0932b}
.c7{background:#7d6ff0}.c8{background:#8a5a2b}.cw{background:var(--pink)}
.tile-wissen{background:var(--umlaut-bg)}
.hub-truhe{
  margin:22px 0 8px;display:flex;align-items:center;gap:14px;
  background:#fff;border-radius:var(--radius);box-shadow:var(--schatten);padding:12px 14px;
}
.hub-truhe img{width:86px;height:86px;object-fit:cover;border-radius:14px;flex:none;box-shadow:var(--schatten)}
.hub-truhe p{margin:.2em 0}
.hub-truhe h3{margin-top:0}

/* ---------- Buttons ---------- */
.btn{
  background:var(--meer);color:#fff;border:none;border-radius:999px;
  padding:11px 18px;font-size:1rem;font-weight:700;
  box-shadow:0 2px 0 var(--meer-tief);
  transition:transform .1s;
}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn-big{background:var(--migorot);box-shadow:0 3px 0 #a83a30;font-size:1.15rem;padding:13px 26px}
.btn-back{background:#fff;color:var(--navy);box-shadow:0 2px 0 var(--karte-rand)}
.btn-help{background:var(--gold);color:var(--navy);box-shadow:0 2px 0 #c89b28;width:42px;padding:11px 0}
.btn-speak{background:var(--pink);box-shadow:0 2px 0 #a5215f}
.btn-choice{background:#fff;color:var(--navy);border:2px solid var(--karte-rand);box-shadow:none}
.btn-choice.sel{border-color:var(--pink);background:#fdeef6}
.choice-row{
  display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 4px;
  justify-content:center;
}

/* ---------- Spiel-Layout ---------- */
.screen[hidden]{display:none}
.game-head{display:flex;align-items:center;gap:8px;margin:10px 0}
.game-head h2{flex:1;display:flex;align-items:center;gap:8px}
.help-box{
  background:#fff;border-left:6px solid var(--gold);border-radius:8px;
  padding:10px 14px;margin:8px 0;box-shadow:var(--schatten);
}
.game-setup,.game-area{
  background:rgba(255,255,255,.75);border-radius:var(--radius);
  padding:12px;margin:10px 0;box-shadow:var(--schatten);
}
.game-setup{text-align:center}
.game-setup h3{text-align:center}
.setup-note{color:#5b6b7d;font-size:.9rem;text-align:center}
.check-label{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;font-size:.95rem}
.check-label input{width:22px;height:22px}
.game-status{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:12px;font-weight:700;color:var(--navy);font-size:1.02rem;
}
.timer{font-variant-numeric:tabular-nums;font-size:1.25rem}
.next-hint{background:var(--gold);border-radius:999px;padding:4px 14px}
.game-result{
  background:#fff;border-radius:var(--radius);box-shadow:var(--schatten);
  padding:18px;margin:14px 0;text-align:center;
}
.game-result h3{font-size:1.35rem}
.game-result .coins-won{font-size:1.5rem;margin:.3em 0}

/* ---------- Buchstabenkarten (Design wie im PDF) ---------- */
.letter-card{
  position:relative;
  aspect-ratio:1/1.05;
  background:linear-gradient(180deg,#fff 0%,var(--karte) 100%);
  border:2px solid var(--karte-rand);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  color:var(--konsblau);
  box-shadow:0 2px 5px rgba(30,78,121,.15);
  user-select:none;
  transition:transform .12s;
  overflow:hidden;
}
.letter-card.vokal{color:var(--vokalrot)}
.letter-card.umlaut{color:var(--vokalrot);background:linear-gradient(180deg,#fff 0%,var(--umlaut-bg) 100%);border-color:#e8d98f}
.letter-card::after{
  content:"ABC Insel";
  position:absolute;top:3px;right:6px;
  font-family:"Atkinson Hyperlegible",sans-serif;
  font-size:.48rem;font-weight:400;color:var(--meer-tief);
}
.letter-card.big{width:100px;font-size:3.3rem;flex:none}
.letter-card.done{opacity:.25;pointer-events:none}
.letter-card.correct{animation:hop .45s}
.letter-card.wrong{animation:shake .4s}
@keyframes hop{
  0%{transform:translateY(0)}
  35%{transform:translateY(-16px) scale(1.08)}
  70%{transform:translateY(0)}
  85%{transform:translateY(-5px)}
  100%{transform:translateY(0)}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-7px)}
  50%{transform:translateX(7px)}
  75%{transform:translateX(-4px)}
}
.cards-grid{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
.cards-grid .letter-card{font-size:2rem;cursor:pointer}
.grid-hop{grid-template-columns:repeat(5,1fr);gap:7px}
.grid-hop .letter-card{font-size:1.7rem}
.grid-blind{grid-template-columns:repeat(7,1fr);gap:6px}
.grid-blind .letter-card{font-size:1.4rem}
.grid-versenken{grid-template-columns:repeat(5,1fr);gap:7px}
.grid-versenken .letter-card{font-size:1.7rem}
.grid-memory{grid-template-columns:repeat(4,1fr)}
.grid-salat{grid-template-columns:repeat(4,1fr)}
.grid-salat .letter-card{font-size:2rem}

/* Kartenrückseite (Papagei wie im PDF) */
.card-back{
  background:#fff url('../assets/papagei.png') center/78% no-repeat;
  border:2px solid #e79cc3;border-radius:12px;
  aspect-ratio:1/1.05;cursor:pointer;
  box-shadow:0 2px 5px rgba(30,78,121,.15);
  transition:transform .12s;
}

/* Memory Flip */
.mem-card{perspective:600px;aspect-ratio:1/1.05;cursor:pointer;position:relative}
.mem-inner{position:absolute;inset:0;transition:transform .35s;transform-style:preserve-3d}
.mem-card.open .mem-inner{transform:rotateY(180deg)}
.mem-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:12px;
}
.mem-front{transform:rotateY(180deg)}
.mem-front .letter-card{position:absolute;inset:0;aspect-ratio:auto;font-size:1.9rem}
.mem-back{background:#fff url('../assets/papagei.png') center/78% no-repeat;border:2px solid #e79cc3;border-radius:12px}
.mem-card.found{opacity:.35;pointer-events:none}

/* Wortsalat */
.word-slots{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  min-height:70px;margin-bottom:14px;padding:10px;
  background:var(--sand);border-radius:12px;border:2px dashed var(--sand-dunkel);
}
.word-slots .slot{
  width:44px;height:52px;border-radius:10px;
  background:rgba(255,255,255,.6);border:2px dashed var(--sand-dunkel);
  display:flex;align-items:center;justify-content:center;
  font-family:"Baloo 2",cursive;font-size:1.6rem;font-weight:800;
}
.word-slots .slot.filled{border-style:solid;background:#fff;animation:hop .4s}
.word-slots .slot.vokal{color:var(--vokalrot)}
.word-slots .slot.kons{color:var(--konsblau)}

/* Blindflug */
.blind-current{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:12px;font-weight:700;color:var(--navy);
}
.blind-current .letter-card.big{width:76px;font-size:2.6rem}

/* Zieh mich raus */
.draw-zone{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:10px 0}
.draw-q{font-size:1.15rem;font-weight:700;color:var(--navy);flex:1;min-width:170px}
#s6answers .btn{font-size:1.5rem;min-width:62px;flex:1}
.schwarzer-migo-card{width:150px;border-radius:12px;box-shadow:var(--schatten);animation:hop .6s}

/* Würfel */
.dice-zone{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.dice{
  width:110px;height:110px;border-radius:18px;flex:none;
  background:var(--pink);color:#fff;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:"Baloo 2",cursive;font-weight:700;font-size:.92rem;line-height:1.15;
  box-shadow:0 5px 0 #a5215f, inset 0 -4px 8px rgba(0,0,0,.12);
  padding:8px;
}
.dice.rolling{animation:roll .55s ease}
@keyframes roll{
  0%{transform:rotate(0) scale(1)}
  40%{transform:rotate(200deg) scale(.8)}
  80%{transform:rotate(345deg) scale(1.06)}
  100%{transform:rotate(360deg) scale(1)}
}
.task-box{background:#fff;border-radius:12px;padding:12px;box-shadow:var(--schatten)}
.task-box p{margin:.3em 0}
#s7inputs input{
  display:block;width:100%;margin:8px 0;
  padding:11px 14px;font-size:1.1rem;border:2px solid var(--karte-rand);border-radius:10px;
  font-family:inherit;
}
#s7inputs input.ok{border-color:var(--gruen);background:#f2fbec}
#s7inputs input.bad{border-color:var(--vokalrot);background:#fdf0f0}
#s7feedback{font-weight:700}

/* Versenken */
.versenken-migo{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.versenken-migo img{width:92px;border-radius:12px;flex:none;box-shadow:var(--schatten)}
.speech{
  position:relative;background:#fff;border-radius:12px;padding:10px 12px;
  box-shadow:var(--schatten);font-weight:700;color:var(--navy);flex:1;font-size:.95rem;
}
.speech::before{
  content:"";position:absolute;left:-8px;top:24px;
  border:8px solid transparent;border-right-color:#fff;border-left:0;
}
.grid-versenken .letter-card.sunk-you{opacity:.3;text-decoration:line-through}
.grid-versenken .letter-card.sunk-flash{background:#333;color:#fff;border-color:#111}

/* Wissen */
.wissen-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--schatten);
  padding:14px;margin:10px 0;
}
.wissen-card h3 small{font-weight:400;color:#5b6b7d;font-size:.8em}
.abc-rows{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}
.abc-rows .letter-card{width:48px;font-size:1.4rem;cursor:pointer}
.abc-rows .letter-card.zwielaut-card{width:auto;min-width:62px;padding:0 10px;aspect-ratio:auto;height:54px;font-size:1.25rem}
.rot{color:var(--vokalrot);font-weight:700}
.blau{color:var(--konsblau);font-weight:700}
.wissen-tipp{
  display:flex;gap:12px;align-items:center;background:var(--sand);
  border-radius:12px;padding:10px 12px;margin-top:16px;
}
.wissen-tipp img{width:58px;flex:none}

/* Eigene Wörter */
.own-words{margin-top:14px;background:#fff;border-radius:10px;padding:10px 14px}
.own-words textarea{
  width:100%;display:block;margin:8px 0;
  border:2px solid var(--karte-rand);border-radius:10px;padding:8px;font:inherit;
}

/* Overlay (Schwarzer Migo, Feiern) */
.overlay{
  position:fixed;inset:0;background:rgba(30,78,121,.55);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.overlay[hidden]{display:none}
.overlay-inner{
  background:#fff;border-radius:18px;padding:20px;max-width:380px;text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,.3);animation:hop .5s;
}
.overlay-inner img{width:150px;border-radius:12px;margin-bottom:8px}
.overlay-inner h3{font-size:1.4rem;margin:.2em 0}

/* Münzen-Flug */
#coinFly{
  position:fixed;z-index:200;font-size:1.8rem;pointer-events:none;
  transition:transform .7s cubic-bezier(.4,-0.2,.6,1), opacity .7s;
}

/* Footer */
.site-footer{
  background:var(--navy);color:#cfe0ef;text-align:center;
  padding:14px 16px;font-size:.82rem;
}
.site-footer a{color:#fff}
.site-footer p{margin:.25em 0;max-width:var(--spalte);margin-left:auto;margin-right:auto}

/* ---------- Sehr kleine Telefone ---------- */
@media (max-width:380px){
  html{font-size:15px}
  .topbar-badge{width:42px;height:42px}
  .spielbild{max-width:220px}
  .letter-card.big{width:84px;font-size:2.7rem}
  .dice{width:96px;height:96px}
}
/* ---------- Desktop: Hover-Feinheiten ---------- */
@media (hover:hover){
  .tile:hover{transform:translateY(-3px)}
  .cards-grid .letter-card:hover{transform:translateY(-2px)}
  .card-back:hover{transform:translateY(-2px)}
}

/* ---------- Einstellungen / Offline (nachgerüstet 2026-08-30) ---------- */
.btn:disabled{opacity:.45;pointer-events:none}
.hub-link{text-align:center;font-size:.9rem;color:#5b6b7d}
.hub-link a{color:var(--navy);font-weight:700}
.settings-card{background:#fff;border-radius:var(--radius);box-shadow:var(--schatten);padding:14px 16px;margin:12px 0}
.settings-card h3{margin-top:0}
.settings-card p{margin:.5em 0}
.off-status{font-weight:700;color:var(--navy)}
.off-status.ok{color:var(--gruen)}
.off-bar{height:14px;background:var(--karte);border-radius:999px;overflow:hidden;border:1px solid var(--karte-rand);margin:8px 0}
.off-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--meer),var(--gruen));transition:width .2s}
.install-box{margin-top:14px;padding-top:12px;border-top:1px dashed var(--karte-rand)}
.install-hint{background:var(--umlaut-bg);border-radius:10px;padding:8px 12px;font-size:.92rem}