:root{
  /* Fallback-VH (wird per JS aktualisiert) */
  --vh: 1vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body { margin:0; padding:0; overflow:hidden; font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:#f0f0f0; }
a { color:inherit; }

/* Topbar: Flag + Learn more */
#topbar {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  padding:calc(8px + var(--safe-top)) 12px 8px; background:#333; color:#fff;
}
#langBtn, .start-btn, .sound-btn, select, input[type="text"] {
  min-height:44px; /* Touch-Ziele */
}
#langBtn {
  appearance:none; border:none; background:#333; color:#fff;
  padding:8px 12px; border-radius:12px; font-size:18px; cursor:pointer;
  line-height:1; transition:transform .05s ease-in-out;
  touch-action:manipulation;
}
#langBtn:active { transform:scale(0.98); }
.learn-more {
  font-size:14px; opacity:.9; text-decoration:none; padding:6px 10px; border-radius:10px; transition:background .15s ease, opacity .15s ease;
}
.learn-more:hover { background:#1f2937; opacity:1; text-decoration:underline; }

.trial-btn{
  min-height:44px; padding:8px 12px; border-radius:12px; border:0; cursor:pointer;
  background:#222; color:#fff; font-size:14px; touch-action:manipulation;
}
.trial-btn:hover{ background:#1f2937; }
.trial-btn.active{ background:#16a34a; } /* aktiv = grün */
.trial-count{ margin-left:8px; font-size:13px; opacity:.9; }

/* Lang menu */
#langMenu {
  position:absolute; top:56px; left:12px; z-index:60;
  background:#fff; color:#111; border:1px solid #ddd; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.15);
  display:none; min-width:200px; overflow:hidden;
}
#langMenu button {
  width:100%; text-align:left; display:flex; align-items:center; gap:8px;
  border:0; background:#fff; padding:12px; cursor:pointer; font-size:16px;
}
#langMenu button:hover { background:#f3f4f6; }

/* Header (score/lives/medals) */
#header {
  display:flex; justify-content:space-between; align-items:center;
  background:#333; color:white; padding:10px; font-size:18px; box-sizing:border-box;
}
#header .stats { display:flex; flex-direction:column; align-items:flex-start; }

/* Großes Emblem in der Dropdown-Zeile (statt im Medaillen-Display) */
#mixEmblem {
  margin-left: 14px;
  font-size: clamp(48px, 10vw, 112px);
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
  line-height: 1;
  display: none;                /* JS schaltet auf flex */
  align-items: center;
}
.menu-block.buttons {           /* Host: sorgt für schöne Ausrichtung */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Stabilize widths to prevent layout jank */
#scoreDisplay, #levelDisplay {
  width: 12ch; display:inline-block; font-variant-numeric: tabular-nums; text-align:left;
  color:white; visibility:visible;
}
#medalSummary { flex:1; text-align:center; font-size:18px; white-space:nowrap; }
#medalSummary .medal { display:inline-block; margin:0 8px; }
#medalSummary .count { margin-left:4px; font-weight:600; }
#mixBadge { display: none !important; }

#lives { width:140px; text-align:right; margin-right:10px; font-size:32px; white-space:nowrap; min-height:1em; }
.life-emoji { display:inline-block; line-height:1; }
.life-emoji.bounce { animation:lifeBounce 0.4s ease; }
@keyframes lifeBounce { 0%{transform:scale(1)}30%{transform:scale(1.3)}50%{transform:scale(.9)}70%{transform:scale(1.1)}100%{transform:scale(1)} }

/* Menu */
#startMenu { margin-top:8px; text-align:center; }
#startMenu h1 { margin:8px 0 12px; }
/* alten Start-Button im Menü verstecken (wir haben ja den Overlay-Start im Spielfeld) */
#startMenu .start-btn { display: none !important; }


/* Responsive Grid */
.menu-grid{
  display:grid; gap:16px; align-items:stretch; max-width:980px; margin:0 auto; padding:0 12px;
  grid-template-columns: 1fr;
}
@media (min-width:600px){
  .menu-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width:900px){
  .menu-grid{ grid-template-columns: 1fr 1fr 1fr; }
}

.menu-block{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
label { font-size:14px; color:#111; text-align:left; }
select, input[type="text"] {
  width:100%; max-width:420px; padding:10px 12px; font-size:16px; box-sizing:border-box;
  border-radius:12px; border:1px solid #ccc; background:#fff;
}
.start-btn, .sound-btn{
  padding:12px 20px; font-size:16px; background:#333; color:#fff; border:none; border-radius:12px; cursor:pointer;
  touch-action:manipulation;
}
.start-btn:hover, .sound-btn:hover{ background:#444; }
.sound-btn.off{ background:#666; } .sound-btn.off:hover{ background:#777; }
.menu-block.buttons {display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap:8px;}

/* Locked look */
option.locked, .locked-note { color:#9ca3af; }
.locked-chip {
  display:inline-block; font-size:11px; background:#eee; color:#666; padding:2px 6px; border-radius:999px; margin-left:6px;
}

/* Game area: dynamisch */
/* Modern: Versuch erst mit dvh/svh; fällt auf JS ( --vh ) zurück */
#game {
  position:relative; width:100%;
  height: calc(100dvh - (var(--taken, 0px)));
  background:#fff; border:2px solid #333; overflow:hidden; margin-top:0;
}
@supports not (height: 100dvh){
  #game{ height: calc(100svh - (var(--taken, 0px))); }
}
@supports not (height: 100svh){
  /* Fallback: JS setzt --vh (= 1% innerHeight) */
  #game{ height: calc((var(--vh) * 100) - (var(--taken, 0px))); }
}

.word {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  font-size:18px; font-weight:bold; color:#fff; text-align:center;
  width:96px; height:96px; display:flex; align-items:center; justify-content:center;
  background-size:cover; animation:fall linear forwards;
  will-change: transform, top;
  z-index:10; /* unter FX-Layer, über Canvas */
}
@keyframes fall { to { top:calc(100% - 24px); } } /* landet oberhalb Rahmen */

/* Answer field – groß genug für iOS (>=16px) */
#userInput {
  font-size:24px; padding:10px 14px; margin:8px auto 24px;
  width:200px; text-align:center; display:block; border-radius:12px; border:1px solid #ccc; background:#fff;
}

/* Zeile unter dem Spielfeld: Sound ganz links (Seitenrand), Input zentriert */
#inputRow{
  position: relative;
  width: 100%;          /* volle Seitenbreite, nicht mehr max-width:980px */
  margin: 8px 0 24px;   /* nicht zentrieren, damit "links" auch wirklich links ist */
  height: 56px;
}

#userInput{
  display: block;
  margin: 0 auto;       /* zentriert innerhalb der vollen Breite */
}

#inputRow .sound-btn{
  position: absolute;
  left: 12px;           /* symmetrisch zu Save/Load (die haben right:12px) */
  top: 50%;
  transform: translateY(-50%);
}

/* Save/Load unter dem Spielfeld, rechtsbündig, Buttons untereinander */
#saveLoadContainer {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 60;
  display: flex;
  flex-direction: row;
  gap: 8px;
}
#saveLoadContainer button {
  background: #333;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}
#saveLoadContainer button:hover { background: #444; }
#saveStateBtn, #loadStateBtn{
  background:#333; color:#fff; border:0; border-radius:10px;
  padding:10px 14px; cursor:pointer; font-size:14px; min-height:44px;
}
#saveStateBtn:hover, #loadStateBtn:hover{ background:#444; }

/* Sound-Button im Save/Load-Container */
#saveLoadContainer .sound-btn {
  background:#333;
  color:#fff;
  border:0;
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
  font-size:14px;
  min-height:44px;
}
#saveLoadContainer .sound-btn:hover { background:#444; }


/* Overlays */
#gameOver, #levelBanner {
  position:absolute; top:30%; left:50%; transform:translate(-50%,-50%);
  display:none; font-size:24px; font-weight:bold; color:#333;
  background:rgba(255,255,255,0.95); padding:20px 24px; border-radius:12px; z-index:10;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.banner-emoji { font-size:2.2em; margin-right:8px; display:inline-block; animation:bannerBounce 0.6s ease; vertical-align:-4px; }
.gameover-emoji { font-size:2.6em; margin-right:8px; display:inline-block; animation:bannerBounce 0.6s ease; vertical-align:-6px; }
@keyframes bannerBounce { 0%{transform:scale(0.5);opacity:.6}60%{transform:scale(1.2);opacity:1}100%{transform:scale(1)} }

#fxCanvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; display:none; z-index:5; }

/* Start-Overlay im Spielfeld */
#game { position: relative; }
#startOverlayBtn, .start-overlay-btn {
  position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);
  padding:14px 22px; font-size:18px; font-weight:600;
  background:#111; color:#fff; border:none; border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  cursor:pointer;
}
#startOverlayBtn:hover { background:#1f2937; }

/* About panel */
#aboutPanel {
  position:fixed; right:12px; bottom:calc(12px + var(--safe-bottom)); z-index:70;
  background:#111; color:#fff; padding:14px 16px; border-radius:14px; max-width:480px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); display:none;
}
#aboutPanel h3 { margin:0 0 6px; font-size:16px; }
#aboutPanel p { margin:0; font-size:14px; opacity:.9; }
#aboutPanel .close { position:absolute; top:6px; right:8px; border:0; background:transparent; color:#fff; font-size:18px; cursor:pointer; }

/* ================= Prestige & FX Layer (schmal & konfliktarm) =============== */

/* Prestige: Goldgelb (nur Farbe/Border) */
#startMenu.prestige {
  background: linear-gradient(180deg, #fde68a 0%, #facc15 100%);
  border-color: #eab308;
  color: #1f2937; /* bessere Lesbarkeit */
}
#inputBar.prestige,
#answerBar.prestige {
  background: linear-gradient(180deg, #fef3c7 0%, #fde047 100%);
  border-top: 2px solid #eab308;
  color: #1f2937;
}

/* FX-Layer über dem Spielfeld */
#fxLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 999; /* über Words/Bannern */
}

/* Diamant über allem */
.diamond-pop{
  position:absolute;
  font-size:40px;                      /* vorher 28px */
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, -50%) scale(0.8); /* leicht größer beim Start */
  animation:diamondPop 1s ease-out forwards;
  z-index:1000;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);     /* bessere Lesbarkeit */
  will-change: transform, opacity;            /* smoother */
}
@keyframes diamondPop{
  0%   { opacity:0; transform:translate(-50%, -50%) scale(0.75); }
  15%  { opacity:1; transform:translate(-50%, -50%) scale(1.05); }
  100% { opacity:0; transform:translate(-50%, -70%) scale(1.2); }
}

/* Diamant-Zähler (rechts bei den Medaillen) */
#diamondCounter { margin-left: 10px; display: inline-flex; align-items: center; gap: 4px; }
#diamondCounter .count { font-weight: 600; }