:root{
  --bg:#0b0f0b;
  --grid:#102010;
  --text:#a8ffb0;
  --accent:#71ff7f;
  --warn:#ffeb72;
  --error:#ff6b6b;
  --good:#7dffa3;
  --muted:#6fbf79;
}
/* zusätzliche Themes */
.theme-green{
  --bg:#0b0f0b; --grid:#102010; --text:#a8ffb0; --accent:#71ff7f; --muted:#6fbf79; --good:#7dffa3
}
.theme-purple{
  --bg:#100916; --grid:#1a1024; --text:#e1c8ff; --accent:#c9a6ff; --muted:#b399e0; --good:#b4ffea
}
.theme-gray{
  --bg:#0e1116; --grid:#17202a; --text:#dae4f2; --accent:#a9c1ff; --muted:#9aa6b2; --good:#b4ffea
}
/* kräftigere Trennung Gelb/Orange/Rot */
.theme-yellow{
  --bg:#141800;   /* oliv-dunkel */
  --grid:#233000;
  --text:#fff7b8;
  --accent:#f4e34a; /* leuchtendes Gelb */
  --muted:#cdbf68;
  --good:#bfffd3
}
.theme-orange{
  --bg:#1b0f03;   /* warmes Dunkelorange */
  --grid:#2c1a07;
  --text:#ffe1c8;
  --accent:#ff9138; /* kräftiges Orange */
  --muted:#d7a57e;
  --good:#c9ffd8
}
.theme-red{
  --bg:#220707;   /* tiefes Rotbraun */
  --grid:#3a0f10;
  --text:#ffd0d0;
  --accent:#ff5151; /* helleres Signalrot */
  --muted:#e28e8e;
  --good:#bfffd3
}

html,body{height:100%}
body{
  margin:0;
  height:100svh; /* iOS dynamische Toolbars */
  overflow:hidden;
  background:radial-gradient(1200px 800px at 60% -20%, #132613 0%, var(--bg) 60%);
  color:var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing:.2px;
  text-shadow:0 0 4px rgba(120,255,140,.25);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none; /* Mobile Pull-to-Refresh vermeiden */
}
/* Intro-Fix: Stage ausblenden, solange Intro läuft */
.hideStage .frame{ visibility:hidden; }

.viewport{
  position:fixed;
  inset:0;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  overflow:hidden;
  overscroll-behavior:none;
}
#stage{ position:absolute; inset:0; }
#scaleRoot{ position:absolute; inset:0; }

.desktopOnly{ display:none; }
.mobileOnly{ display:block; }
@media (hover:hover) and (min-width:821px){
  .desktopOnly{ display:block; }
  .mobileOnly{ display:none; }
}

/* ==== Unterschrift-Stil (Schreibschrift) ==== */
.signature{
  font-family: "Segoe Script", "Bradley Hand", "Comic Sans MS", "Snell Roundhand", "Apple Chancery", "Lucida Handwriting", cursive;
  font-size: 1.2em;
  letter-spacing: .02em;
  font-style: italic;
  display: inline-block;
  transform: rotate(-1.2deg);
  text-shadow: none;
}

/* Layout-Grundgerüst */
.frame, .screen, .gridwrap{ min-height:0; }
.gridwrap{ height:100%; }
/* SCHMALERES LINKES PANEL → mehr Platz fürs Grid */
.frame{
  display:grid; grid-template-columns: 220px 1fr; gap:14px; padding:14px;
  height:100%; box-sizing:border-box
}
.panel{border:1px solid #143214; background:linear-gradient(180deg, rgba(16,32,16,.6), rgba(8,16,8,.7)); border-radius:12px; box-shadow:0 0 0 1px rgba(8,32,12,.4) inset, 0 12px 40px rgba(0,0,0,.35)}
.panel h2{margin:0; padding:12px 14px; font-size:14px; color:var(--accent); border-bottom:1px solid #173817; letter-spacing:.08em}
.left{display:flex; flex-direction:column; position:relative;} /* Positioning für Pause-Button oben */
.stats{padding:10px 14px; font-size:13px; line-height:1.6; overflow-wrap:anywhere}
.bar{height:8px; background:var(--grid); border-radius:6px; overflow:hidden; box-shadow:0 0 0 1px #0e1e0e inset}
.bar>i{display:block; height:100%; width:0%; background:linear-gradient(90deg, #1bf57d, #a3ffb5); filter:saturate(1.2) brightness(1.05)}
.muted{opacity:.7}
.key{display:inline-block; border:1px solid #1f3c1f; padding:0 6px; border-radius:6px; font-size:.9em; margin:0 3px}
.screen{position:relative; display:grid; grid-template-rows: auto 1fr auto; height:100%}
.statusline{display:flex; align-items:center; gap:14px; padding:8px 12px; font-size:12px; color:var(--muted); border-bottom:1px solid #173817}
.statusline .dot{width:6px; height:6px; border-radius:50%; background:var(--muted); box-shadow:0 0 8px rgba(113,255,127,.6)}
.flexfill{flex:1}
.statustext{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Präfix der Statuszeile auf Mobile einkürzen */
@media (max-width:820px){
  .statusline .statusPrefix{ display:none; }
}

/* Header-Steuerung: Pause-Button oben rechts im linken Panel (nur mobil Portrait) */
.headerControls{ position:absolute; top:6px; right:8px; z-index:2; }
@media (min-width:821px){ .headerControls{ display:none; } }
@media (max-width:820px) and (orientation:landscape){ .headerControls{ display:none; } } /* im flachen Landscape bleibt der alte Button unten */

/* Produktivität + „Abteilung MDR“ nebeneinander (mobil) */
.titleRow{ display:flex; align-items:baseline; gap:10px; margin:8px 0 6px; text-align:left; }
.deptTag{ font-size:12px; color:var(--muted); white-space:nowrap; display:none; }
@media (max-width:820px){ .deptTag{ display:inline-flex; } }

/* Den alten Pause-Button in der Statuszeile nur im Portrait verstecken, damit er in flachem Landscape verfügbar bleibt */
#btnPauseMobile{ display:none; }
@media (max-width: 820px){
  #btnPauseMobile{ display:inline-block; }
}
@media (max-width:820px) and (orientation:portrait){
  #btnPauseMobile{ display:none !important; }
}

/* Grid */
.gridwrap{position:relative; overflow:hidden;}
.grid{
  position:absolute;
  inset:0;
  padding: var(--pad-y,12px) var(--pad-x,12px);
  display:grid;
  gap:var(--gap,8px);
  place-content:center;
  grid-template-columns: repeat(var(--cols,4), var(--cell-size,48px));
  grid-auto-rows: var(--cell-size,48px);
}
.cell{
  background:rgba(8,24,10,.6);
  border:1px solid #103010;
  border-radius:10px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  user-select:none;
  transition:transform .06s ease, background .15s ease, border-color .15s ease, opacity .2s ease, box-shadow .2s ease, filter .2s ease;
  aspect-ratio: 1 / 1;
}
.cell .t{
  font-size: clamp(12px, calc(var(--cell-size,48px) * 0.46), 32px);
  letter-spacing:.06em
}
/* Länge-spezifische Typo */
.cell.len3 .t{ font-size: clamp(14px, calc(var(--cell-size,48px)*0.54), 34px); }
.cell.len4 .t{ font-size: clamp(13px, calc(var(--cell-size,48px)*0.48), 32px); }
.cell.len5 .t{ font-size: clamp(12px, calc(var(--cell-size,48px)*0.40), 28px); letter-spacing:.02em; }
.cell[data-glitch="1"]{filter:contrast(1.2) brightness(1.15)}
.cell.sel{outline:2px solid var(--accent); box-shadow:0 0 0 2px rgba(113,255,127,.15), 0 0 18px rgba(113,255,127,.18)}
.cell.marked{background:rgba(40,92,48,.55); border-color:#2a7a3a}
.cell.bad{animation:shake .22s linear 1}

.blink{animation:flashBlinkDesktop .55s ease-in-out 1}
@keyframes flashBlinkDesktop{
  0%,100%{filter:brightness(1); box-shadow:none}
  50%{
    filter:brightness(1.25);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent), #ffffff 12%) inset, 0 0 12px color-mix(in srgb, var(--accent), #ffffff 15%);
    border-color: color-mix(in srgb, var(--accent), #ffffff 14%);
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  }
}
.hoverThreat{transform:translateY(-2px) scale(1.05); box-shadow:0 6px 18px rgba(113,255,127,.18);}
@keyframes shake{0%{transform:translateX(0)} 33%{transform:translateX(-2px)} 66%{transform:translateX(2px)} 100%{transform:translateX(0)}}
.ticker{padding:8px 12px; font-size:12px; color:var(--muted); border-top:1px solid #173817; display:flex; justify-content:space-between}
.crt:before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(to bottom, rgba(0,0,0,.0) 0, rgba(0,0,0,.0) 2px, rgba(0,0,0,.05) 3px, rgba(0,0,0,.05) 4px); pointer-events:none; mix-blend-mode:overlay; opacity:.7}
.whisper{position:absolute; inset:auto 12px 56px auto; max-width:60ch; font-size:12px; color:var(--warn); opacity:0; transition:opacity .6s ease; text-shadow:0 0 10px rgba(255,235,114,.22)}
.whisper.show{opacity:.85}

/* Overlays */
.help, .start, .levelinfo, .score, .theend, .gameover, .dev, .impressum, .contact, .intro, .credits, .playerName, .welcome{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.8);
  backdrop-filter: blur(2px);
  z-index:90;
}
.card{ position:relative; }
.card .x{
  position:absolute; right:12px; top:12px; cursor:pointer;
  padding:6px 8px; border:1px solid #2a6a36; border-radius:8px;
}

/* Intro */
.intro{ background:#000; z-index:100; }
.intro .logoImg{
  display:block;
  width:clamp(260px, 70vw, 900px);
  max-width:90vw;
  height:auto;
  margin:0 auto;
  opacity:0;
  transform:scale(.9);
  animation:introIn 1.2s ease forwards;
}
@keyframes introIn{ to{ opacity:1; transform:scale(1); } }

/* Pre-Intro Fadeout */
.fadeout{ animation:fadeOut 1.2s ease forwards; }
@keyframes fadeOut{ to{ opacity:0; } }

/* Startseite – immer grün */
.start{
  z-index:80;
  --bg:#0b0f0b; --grid:#102010; --text:#a8ffb0; --accent:#71ff7f; --muted:#6fbf79;
  background:radial-gradient(1200px 800px at 50% -10%, #132613 0%, var(--bg) 60%);
}
.card{
  width:min(900px,92vw);
  border:1px solid #285a2b;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(10,22,12,.96), rgba(8,16,9,.96));
  padding:28px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}
/* START-KARTE: Footer wirklich nach unten drücken */
.start .card{
  display:flex;
  flex-direction:column;
  min-height:clamp(560px, 80vh, 880px);
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
  max-height:none;
  overflow:visible;
}

/* === lang switch === */
.langSwitch{ position:absolute; right:12px; top:12px; display:flex; gap:8px; z-index:2; }
.langBtn{
  border:1px solid #2a6a36; border-radius:20px; padding:6px 10px; background:transparent;
  color:var(--text); cursor:pointer; font-size:13px; display:flex; align-items:center; gap:6px;
}
.langBtn[aria-pressed="true"]{ outline:2px solid var(--accent); outline-offset:1px; }

.brandblock{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:6px 0 12px; text-align:center }
.brandblock .logoTallImg{ display:block; width:clamp(90px, 20vw, 160px); height:auto; }
.brandblock .wordmarkImg{
  display:block; margin:8px auto 0; width:auto; height:auto; max-width:90vw;
}
.subtitle{ font-size:14px; color:var(--muted); text-align:center; margin:8px 0 16px; }
.startbtns{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:10px; }
.btn{
  display:inline-block; border:1px solid #2a6a36; border-radius:10px; padding:12px 18px; cursor:pointer; margin:0; background:transparent; color:var(--text);
  min-height:44px; min-width:44px; /* Touch-Ziele */
}
.btn:focus{ outline:2px solid var(--accent); outline-offset:2px; }
.btn, .cell, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn:hover{box-shadow:0 0 0 2px rgba(113,255,127,.15)}

/* START-FOOTER: nach unten + Safe-Area */
.startFooter{
  margin-top:auto;
  padding-top:10px;
  padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid #2a6a36;
}
.devLink{ position:absolute; left:12px; bottom:0; color:var(--muted); text-decoration:none; cursor:pointer; }
.copyWrap{ text-align:center; font-size:12px; }
.copyWrap a{ color:var(--accent); text-decoration:none; margin-left:18px; }

.denied{
  position:absolute; top:14px; right:14px; background:#5b1515; border:1px solid #a33;
  color:#ffdada; padding:10px 14px; border-radius:8px; display:none; z-index:99
}
.denied .x{ float:right; margin-left:8px; cursor:pointer; border:1px solid #c66; padding:0 6px; border-radius:6px; }

.help .card, .levelinfo .card, .score .card, .theend .card, .gameover .card, .impressum .card, .contact .card{ width:min(860px,92vw); max-height:92vh; overflow:auto; }
.dev .card{ width:min(980px,95vw); max-height:92vh; overflow:auto; }

.levelinfo .title{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.score table{width:100%; border-collapse:collapse; margin-top:6px}
.score th,.score td{border-bottom:1px solid #2a6a36; padding:8px 6px; font-size:13px; text-align:left}
.saveRow{ display:none; }
.waffle{width:100%; height:220px; display:block; margin-top:10px; background: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/12px 12px, linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/12px 12px, radial-gradient(circle at 30% 70%, #c58f3a 0%, #b67824 60%, #8a5615 100%); border-radius:16px; position:relative; overflow:hidden}
.waffle:before{content:""; position:absolute; inset:12px; border-radius:12px; box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.balloons{position:relative; height:120px; margin-top:10px}
.balloon{position:absolute; width:46px; height:60px; border-radius:46px 46px 40px 40px; background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.06)); outline:2px solid rgba(255,255,255,.2)}
.balloon:after{content:""; position:absolute; bottom:-12px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:12px solid rgba(255,255,255,.25)}
.string{position:absolute; width:2px; height:60px; background:rgba(255,255,255,.25); left:50%; top:60px}
.btn-ghost{ border:1px solid #2a6a36; border-radius:8px; padding:6px 10px; background:transparent; color:var(--accent); cursor:pointer; }

@media (max-width: 820px){
  #btnPauseMobile{ display:inline-block; }
}

/* ======= RWD BREAKPOINTS (Content-basiert) ======= */

/* Phone compact (≤600px) */
@media (max-width:600px){
  .frame{ grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:8px; padding:8px; }
  .panel h2{ padding:8px 10px; font-size:13px; }
  .stats{ padding:8px 10px; font-size:12px; line-height:1.5; }
  .panel.left .stats{ font-size:11px; }
  .panel.left .bar{ height:5px; }
  .statusline{ padding:6px 8px; font-size:11px; }
  .ticker{ padding:6px 8px; font-size:11px; }
  .grid{ --gap:5px; }
  .left{ max-height:36vh; overflow:auto; }
  input, textarea, select{ font-size:16px; } /* iOS Zoom verhindern */
  .card{ padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
}

/* Tablet portrait / große Phones landscape (601–820px) */
@media (min-width:601px) and (max-width:820px){
  .frame{ grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:10px; padding:10px; }
  .panel h2{ padding:8px 10px; font-size:13px; }
  .stats{ padding:8px 10px; font-size:12px; line-height:1.5; }
  .left{ max-height:38vh; overflow:auto; }
  .grid{ --gap:6px; }
  input, textarea, select{ font-size:16px; }
  .card{ padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
}

/* Laptop/Tablet landscape (821–1200px) – schmaleres linkes Panel */
@media (min-width:821px) and (max-width:1200px){
  .frame{ grid-template-columns:220px 1fr; gap:14px; padding:14px; }
}

/* Großes Desktop-Layout (≥1201px) – linkes Panel reduziert für größeres Grid */
@media (min-width:1201px){
  .frame{ grid-template-columns:240px 1fr; gap:16px; padding:16px; }
  .panel h2{ font-size:15px; }
  .stats{ font-size:14px; }
}

/* Sehr niedrige Landscape-Höhen (z. B. Handy quer) */
@media (max-height:420px) and (orientation:landscape){
  .frame{ grid-template-columns:1fr; }
  .panel.left{ display:none; } /* Fokus aufs Grid */
}

/* === NEU: Mobile Portrait Optimierungen (bestehende Regeln, konsolidiert) === */
@media (max-width: 820px) {
  .panel.left hr{ margin:8px 0; }
  .bar{ height:6px; }
}

/* Touch-Geräte: Blink */
@media (hover:none), (pointer:coarse) {
  .blink{ animation:flashBlinkMobile .7s ease-in-out 2; }
  @keyframes flashBlinkMobile{
    0%,100%{filter:brightness(1); transform:scale(1)}
    50%{
      filter:brightness(1.9);
      transform:scale(1.05);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent), #ffffff 22%) inset, 0 0 22px var(--accent), 0 0 50px color-mix(in srgb, var(--accent), #ffffff 35%);
      border-color: color-mix(in srgb, var(--accent), #ffffff 26%);
      background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
    }
  }
}

/* Begrüßung */
.welcome .card{ width:min(1000px,95vw); }
.welcomeInner{ display:grid; grid-template-columns: max-content 1fr; gap:16px; align-items:start; max-height:80vh; }
.welcomeImg{ display:block; height:auto; width:clamp(220px, 28vw, 300px); border-radius:12px; max-width:100%; }
.welcomeText{ overflow:auto; max-height:70vh; padding-right:8px; font-size:14px; line-height:1.7; }
/* NEU: Button unter dem Textbereich platzieren */
.welcomeActions{ grid-column:2; align-self:end; justify-self:end; margin-top:12px; }

/* --- MOBILE FIX: Bild kleiner + Button immer erreichbar --- */
@media (max-width:820px){
  #welcome .card{
    display:flex;
    flex-direction:column;
    max-height:calc(100svh - 20px);
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  #welcome .welcomeInner{
    flex:1;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  #welcome .welcomeImg{
    width:100%;
    height:auto;
    max-height:32vh;         /* Bild runterskalieren nur mobil */
    object-fit:contain;
  }
  #welcome .welcomeText{
    flex:1;
    max-height:none;         /* Text darf scrollen */
    padding-right:6px;
  }
  /* Mobile: Button folgt einfach unter dem Text */
  .welcomeActions{
    align-self:flex-end;
    justify-self:flex-end;
  }
}

@media (max-width:820px){
  .welcomeInner{ grid-template-columns:1fr; }
  .welcomeImg{ width:100%; max-width:100%; }
  .welcomeText{ max-height:58vh; }
}

/* Film-Style Credits */
.rollWrap{ position: relative; height: clamp(320px, 58vh, 560px); overflow: hidden; display: flex; align-items: center; justify-content: center; margin-top: 6px; }
.roll{ position: absolute; left: 50%; transform: translate(-50%, var(--from, 100%)); will-change: transform; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 10px 0; }
.roll h1{ margin:0 0 6px; font-size:28px; letter-spacing:.14em; }
.roll p{ margin:0; max-width:70ch; line-height:1.7; }
.roll a{ color:var(--accent); text-decoration:underline; }
@keyframes rollup{ from{ transform: translate(-50%, var(--from)); } to{ transform: translate(-50%, var(--to)); } }

/* „Aufgabe geschafft“ */
.leveldone-check{ display:inline-block; margin-left:10px; font-size:1.25em; line-height:1; color:var(--good); text-shadow:0 0 10px rgba(125,255,163,.35); }
.leveldone-grid{ display:grid; grid-template-columns: 1fr; gap:6px; font-size:14px; line-height:1.7; }
.leveldone-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* DEV-MENÜ: besser lesbares Select (nur hier) */
.dev select{
  background:#fff !important;
  color:#000 !important;
  border:1px solid #2a6a36;
  border-radius:8px;
  padding:6px;
}
.dev select:hover, .dev select:focus{
  color:#c41010 !important; /* roter Hover */
  border-color:#c41010;
}
.dev select option{
  color:#000;
  background:#fff;
}

/* Header-Bilder für Erfolg/GameOver */
.hdrImg{ display:block; margin:0 auto 8px; height:auto; max-width:100%; }
@media (max-width:820px){
  .hdrImg{ width:100%; height:auto; }
}

/* === NEU: Finales Fenster 1 – links Bild (398×265), rechts Text, Button darunter === */
.welcome.endWin1 .welcomeInner{ grid-template-columns: max-content 1fr; }
.welcome.endWin1 .welcomeImg{
  width:398px;
  height:265px;
  object-fit:contain;
}
@media (max-width:820px){
  .welcome.endWin1 .welcomeImg{
    width:100%;
    height:auto;
    max-height:36vh;
  }
}

/* Credits-Logo – Standard */
.credits .creditsLogoImg{
  display:block;
  margin:0 auto; /* zentriert, ohne Zusatzabstand */
  width:clamp(220px,60vw,900px);
  height:auto;
}
@media (min-width:821px){
  .credits .creditsLogoImg{
    width:295px !important;
    height:414px !important;
    object-fit:contain;
  }
}

/* ==== FIX 1: Credits-Logo vertikal enger (nur in Credits) ==== */
.credits .roll{ padding-block:0; row-gap:6px; }     /* oben/unten kein Zusatz-Polster + kleinere Lücke */
.credits .creditsLogoImg{ margin-block:0; }         /* Logo selbst ohne extra Blockabstände */

/* ===== Reduzierte Bewegungen (Barrierefreiheit) ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  .hoverThreat{ transform:none !important; box-shadow:none !important; }
}

/* ===== Rendering-Optimierung (wo verfügbar) ===== */
@supports (content-visibility:auto){
  .help, .levelinfo, .score, .theend, .gameover, .dev, .impressum, .contact, .credits, .playerName, .welcome{
    content-visibility:auto;
    contain-intrinsic-size: 600px 400px;
  }
}

/* Intro: dezenter Enter-Hinweis */
.introHint{
  margin-top:8px;
  font-size:13px;
  color:#9aa6b2;
  opacity:0;
  transition:opacity .35s ease;
}
.introHint.show{ opacity:.9; }

/* Wellness-Affirmationen */
.wellnessAffirm{
  margin-top:8px;
  color:var(--warn);
  min-height:1.2em;
  text-shadow:none;
}

/* Buttons: deaktiviert (z. B. Wellness sperrt Start) */
.btn[disabled]{
  opacity:.55;
  pointer-events:none;
  color:var(--muted);
  border-color:#2a6a36;
}


/* === Intro: "Press Enter" hint === */
.enterHint{
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  opacity: 0;
  transition: opacity .4s ease;
}
.enterHint.show{ opacity: .9; }

/* === Wellness: affirmation line === */
.affirmationLine{
  margin-top: 8px;
  font-size: 14px;
  color: var(--warn);
  text-shadow: 0 0 8px rgba(255,235,114,.25);
}

/* Disable style for start button during wellness */
.btn[disabled]{
  opacity: .55;
  filter: grayscale(40%);
  cursor: not-allowed;
  pointer-events: none;
}

/* === Rating UI (level 12) === */
.ratingWrap{ display:grid; gap:12px; margin-top:10px; }
.ratingRow{ display:grid; grid-template-columns: max-content 1fr; gap:12px; align-items:center; }
.ratingLogo{ width:120px; height:auto; display:block; }
.ratingIcons{ display:flex; gap:6px; }
.ratingIcons .icon{
  border:1px solid #2a6a36; border-radius:8px; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center; background:transparent;
  color:#8aa08a; font-size:20px; cursor:pointer;
}
.ratingIcons .icon:hover{ box-shadow:0 0 0 2px rgba(113,255,127,.1); }
.ratingIcons .icon.star.selected{ color:#f4e34a; }
.ratingIcons .icon.heart.selected{ color:#ff5151; }


/* Center headings in level-info windows */
.levelinfo .card h3{ text-align:center; }


/* === MOBILE TYPO-FINE-TUNE (nur Smartphones/Tablets): ≥4 Zeichen etwas kleiner === */
@media (hover:none), (pointer:coarse), (max-width:820px){
  .cell.len4 .t{ font-size: clamp(12px, calc(var(--cell-size,48px)*0.44), 30px); }
  .cell.len5 .t{ font-size: clamp(11px, calc(var(--cell-size,48px)*0.36), 26px); }
}


/* Fehler-Overlay */
.errorOverlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.85); backdrop-filter: blur(2px); z-index:120;
}
.errorOverlay .card{ width:min(720px,92vw); }