/* =====================================================================
   Sky Scramble — Oberfläche
   =====================================================================

   Bonbon-Abendhimmel: tiefes Violett als Tinte, Sonnengelb als
   Signalfarbe, Karten weiß und rund. Fredoka für alles, weil es dick
   und freundlich ist und auch auf dem Canvas gut lesbar bleibt. Knöpfe
   haben eine Kante nach unten und sinken beim Drücken ein.
   ===================================================================== */

:root{
  --tinte:#1b1240;
  --tinte-2:#4a3d85;
  --grau:#7a6fa6;
  --weiss:#fffdf8;
  --glas:rgba(255,253,248,.93);
  --linie:rgba(27,18,64,.1);
  --sonne:#ffd23f;
  --sonne-tief:#e0a800;
  --pink:#ff4d8d;
  --pink-tief:#d6306f;
  --schrift:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --rund:24px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;background:#2a1f7a;color:var(--tinte);font-family:var(--schrift);font-weight:500;font-size:15px;line-height:1.4;
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:7px;
  background:var(--tinte);color:#fff;font:600 14px var(--schrift);box-shadow:0 3px 0 #000}

#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
body.laedt .ebene{opacity:0}

/* --- Bausteine ------------------------------------------------------------ */

.karte{background:var(--glas);border:3px solid #fff;border-radius:var(--rund);
  box-shadow:0 20px 60px rgba(20,8,60,.35),inset 0 1px 0 #fff}
.kicker{margin:0;display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-2)}
.kicker i{width:6px;height:6px;border-radius:50%;background:var(--pink);display:inline-block}
.notiz{margin:0;color:var(--grau);font-size:14px;text-align:center}

.knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 20px;
  border:0;border-radius:14px;background:#fff;color:var(--tinte);font-weight:600;font-size:15px;white-space:nowrap;
  box-shadow:0 4px 0 #d3cbea,0 6px 14px rgba(27,18,64,.12);transition:transform .08s,box-shadow .08s,background-color .12s}
.knopf:hover{background:#faf7ff}
.knopf:active{transform:translateY(3px);box-shadow:0 1px 0 #d3cbea}
.knopf:focus-visible,.symbol:focus-visible,.wahl button:focus-visible,.zurueck:focus-visible,.pfeil:focus-visible{outline:3px solid var(--sonne);outline-offset:2px}
.knopf:disabled{opacity:.45;cursor:default;transform:none}
.knopf svg{width:20px;height:20px}
.knopf.primaer{background:var(--pink);color:#fff;box-shadow:0 4px 0 var(--pink-tief),0 8px 18px rgba(214,48,111,.35)}
.knopf.primaer:hover{background:#ff6aa0}
.knopf.primaer:active{box-shadow:0 1px 0 var(--pink-tief)}
.knopf.gross{height:58px;font-size:20px;font-weight:700;padding:0 26px;border-radius:18px}
.knopf.gross svg{fill:currentColor;stroke:none}
.knopf.klein{height:34px;padding:0 13px;font-size:13.5px;border-radius:11px}
.knopf.leise{background:rgba(27,18,64,.06);box-shadow:none;color:var(--tinte-2)}

.symbol{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:13px;background:#fff;color:var(--tinte);
  box-shadow:0 3px 0 #d3cbea}
.symbol svg{width:22px;height:22px}
[data-ton] .aus{display:none}
[data-ton].stumm .an{display:none}
[data-ton].stumm .aus{display:inline}

/* --- Lobby ------------------------------------------------------------------ */

.ebene{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:16px;overflow:auto;transition:opacity .4s}
.lobby-karte{width:min(980px,100%);padding:18px 22px 20px;display:grid;gap:14px;margin:auto}
.leiste-oben{display:flex;align-items:center;gap:10px}
.luecke{flex:1}
.zurueck{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 12px 0 6px;border:0;border-radius:12px;
  background:rgba(27,18,64,.06);color:var(--tinte);text-decoration:none;font-weight:600}
.zurueck svg{width:22px;height:22px}
.sterne-kasse{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:12px;
  background:var(--sonne);color:var(--tinte);font-weight:700;font-size:16px;box-shadow:0 3px 0 var(--sonne-tief)}

.marke{text-align:center;display:grid;gap:4px}
.titel{margin:0;font-weight:700;font-size:clamp(40px,7vw,68px);line-height:1;letter-spacing:-.01em}
.titel .t1{color:#3fa9ff;text-shadow:0 4px 0 #1d6fc0}
.titel .t2{color:var(--pink);text-shadow:0 4px 0 var(--pink-tief)}
.titel span{display:inline-block;animation:huepf 1.8s ease-in-out infinite}
.titel .t2{animation-delay:.25s}
@keyframes huepf{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px) rotate(-2deg)}}
.unterzeile{margin:2px auto 0;max-width:600px;color:var(--tinte-2);font-size:15.5px}

.plaetze{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.platz{position:relative;min-height:236px;border-radius:18px;padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:#fff;border:3px solid var(--farbe);box-shadow:0 5px 0 color-mix(in srgb,var(--farbe) 70%,#000);text-align:center}
.platz-leer{background:repeating-linear-gradient(-45deg,#fff 0 12px,#f6f3ff 12px 24px);border-style:dashed;box-shadow:none}
.platz-nr{margin:0;font-weight:700;color:var(--farbe);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.platz-ruf{margin:6px 0;font-size:15px;color:var(--tinte-2);line-height:1.8}
.platz-knoepfe{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.platz canvas.vorschau{width:120px;height:98px}
.platz-name{margin:0;font-weight:700;font-size:19px;color:var(--tinte)}
.bot-marke{font-size:10px;letter-spacing:.1em;background:var(--tinte);color:#fff;border-radius:6px;padding:2px 6px;vertical-align:middle}
.platz-hut{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px}
.platz-hut span{min-width:98px}
.pfeil{width:30px;height:30px;border:0;border-radius:9px;background:var(--farbe);color:#fff;font-size:20px;font-weight:700;line-height:1;
  box-shadow:0 3px 0 color-mix(in srgb,var(--farbe) 65%,#000)}
.platz-steuer{margin:0;font-size:12.5px;color:var(--grau);font-weight:600}
.platz-weg{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(27,18,64,.07);
  color:var(--tinte-2);font-size:18px;line-height:1}
.platz .stufe{min-width:96px}

.lobby-fuss{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px 16px}
.einstellung{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--tinte-2)}
.wahl{display:inline-flex;background:rgba(27,18,64,.07);border-radius:12px;padding:3px}
.wahl button{width:40px;height:34px;border:0;border-radius:9px;background:transparent;font-weight:700;color:var(--tinte-2)}
.wahl button[aria-pressed="true"]{background:#fff;color:var(--tinte);box-shadow:0 2px 0 #d3cbea}
.lobby-knoepfe{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.start-info{grid-column:1/-1;margin:0;text-align:right;color:var(--grau);font-size:13.5px}

/* --- Anleitung als Text unter der Lobby ---------------------------------------
   .lobby-buehne füllt den Bildschirm bis auf einen Streifen von 56px, in dem der
   Kopf der Anleitung hervorschaut — die Lobby steht also wie vorher in der Mitte,
   und man sieht, dass es darunter weitergeht. Ist die Lobby höher als der
   Bildschirm (Handy), wächst die Bühne mit, und die Anleitung folgt darunter.
   Text, den das SEO-Werkzeug an der Markierung einsetzt (section.seo-text),
   sieht genauso aus. */

#lobby{display:flex;flex-direction:column;align-items:center;gap:16px}
.lobby-buehne{flex:none;width:100%;min-height:calc(100% - 56px);display:grid;place-items:center}
.info-text{flex:none;width:min(760px,100%);padding:22px 26px 24px;display:grid;gap:12px;
  user-select:text;-webkit-user-select:text}
.info-text h2{margin:0;font-size:26px;font-weight:700;line-height:1.15;color:var(--tinte)}
.info-text h3{margin:6px 0 0;font-size:19px;font-weight:700;line-height:1.2;color:var(--tinte)}
.info-text p{margin:0;color:var(--tinte-2);font-size:15.5px;line-height:1.55}
.info-text a{color:var(--pink-tief);font-weight:600}
.info-text :is(ul,ol):not(.regeln){margin:0;padding-left:22px;display:grid;gap:6px;color:var(--tinte-2);font-size:15.5px;line-height:1.5}
.info-text .seo-text{display:grid;gap:12px;margin-top:6px}

/* --- Im Spiel --------------------------------------------------------------- */

.hud{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:5}
.hud-pause{opacity:.75;width:38px;height:38px}
.hud-pause:hover{opacity:1}
.tipp{position:fixed;top:calc(50% + min(15vw,15vh));left:50%;transform:translateX(-50%);z-index:5;margin:0;max-width:min(560px,92vw);
  padding:9px 16px;border-radius:14px;background:rgba(20,12,60,.82);color:#fff;font-size:15px;text-align:center;pointer-events:none;
  animation:auftauchen .4s ease-out}
@keyframes auftauchen{from{opacity:0;transform:translate(-50%,10px)}}

/* --- Schirme ---------------------------------------------------------------- */

.schirm{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(20,10,55,.55);overflow:auto;
  animation:einblenden .25s ease-out}
@keyframes einblenden{from{opacity:0}}
.karte-tafel,.karte-laden{width:min(640px,100%);padding:22px;display:grid;gap:14px;margin:auto;animation:reinhuepfen .35s cubic-bezier(.3,1.5,.6,1)}
.karte-laden{width:min(760px,100%)}
@keyframes reinhuepfen{from{transform:scale(.85);opacity:0}}
.karte-klein{width:min(340px,100%);padding:22px;display:grid;gap:14px;text-align:center}
.karte-klein h2,.tafel-kopf h2{margin:0;font-size:32px;font-weight:700;color:var(--tinte);line-height:1.1}
.tafel-kopf{text-align:center;display:grid;gap:6px}
.spalte{display:grid;gap:10px}
.tafel-fuss{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tasten-notiz{margin:-4px 0 0;text-align:center;font-size:12.5px;color:var(--grau)}

.tabelle{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:15px}
.tabelle th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);font-weight:600;text-align:center;padding:0 6px}
.tabelle td{background:#fff;padding:6px;text-align:center;font-weight:600}
.tabelle td:first-child{border-radius:12px 0 0 12px;border-left:5px solid var(--farbe);width:52px}
.tabelle td:last-child{border-radius:0 12px 12px 0}
.tabelle td.name{text-align:left;font-weight:700}
.tabelle tr.sieger td{background:#fff6cf}
.tabelle canvas.mini{width:40px;height:40px;display:block}
.siege{color:var(--sonne-tief);letter-spacing:2px;white-space:nowrap}
.siege span{color:#ddd5f0}

.hut-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.hut-karte{background:#fff;border-radius:16px;padding:10px;display:grid;justify-items:center;gap:6px;box-shadow:0 3px 0 #e2dcf3}
.hut-karte canvas{width:110px;height:96px}
.hut-karte.hat{background:#f1fff6}
.hut-name{margin:0;font-weight:700}
.hut-hat{margin:0;color:#1f9d55;font-weight:600;font-size:13px;height:34px;display:grid;place-items:center}

.regeln{margin:0;padding-left:22px;display:grid;gap:8px;font-size:15px;color:var(--tinte)}
.regeln b{color:var(--pink-tief)}
.tasten-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tasten-raster div{background:#fff;border-radius:12px;padding:8px;text-align:center;display:grid;gap:2px;box-shadow:0 3px 0 #e2dcf3}
.tasten-raster b{color:var(--farbe);font-size:14px}
.tasten-raster span{font-weight:700;font-size:15px}

.ohne-js{position:fixed;inset:0;display:grid;place-items:center;color:#fff;margin:0}

/* --- Schmal ----------------------------------------------------------------- */

@media (max-width:820px){
  .plaetze{grid-template-columns:repeat(2,1fr)}
  .lobby-fuss{grid-template-columns:1fr}
  .einstellung{justify-content:center}
  .lobby-knoepfe{justify-content:center}
  .start-info{text-align:center}
}
@media (max-width:480px){
  .lobby-karte{padding:14px 12px}
  .platz{min-height:200px;padding:10px 6px}
  .platz canvas.vorschau{width:96px;height:78px}
  .platz-hut span{min-width:70px;font-size:12.5px}
  .tasten-raster{grid-template-columns:repeat(2,1fr)}
  .tabelle{font-size:13px}
  .lobby-knoepfe .knopf.gross{width:100%}
  .info-text{padding:18px 14px 20px}
  .info-text h2{font-size:22px}
}