/* ============================================================================
   STARTSEITE — Räume eröffnen und beitreten.
   Nutzt bewusst dieselben Tokens wie das Spiel (styles.css): Cinzel/EB Garamond,
   Antikgold auf Anthrazit. Wer von hier ins Spiel geht, soll keinen Bruch spüren.
   ============================================================================ */

.lp-body{overflow-x:hidden}

/* Sprungmarke — nur sichtbar, wenn sie den Fokus hat */
.lp-skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;background:var(--gold);
  color:#1a1407;font-family:var(--display);border-radius:0 0 10px 0}
.lp-skip:focus{left:0}

.lp{width:100%;max-width:760px;margin:0 auto;
  padding:max(24px,env(safe-area-inset-top)) 18px calc(40px + var(--safe-b))}

/* ── Kopf ─────────────────────────────────────────────────────────── */
/* Bewusst knapp gehalten: Die Fälle sollen ohne Scrollen anfangen. Vorher nahm der Kopf am Handy
   446 von 812 px ein — von der ersten Karte blieb ein Drittel übrig. */
.lp-hero{text-align:center;padding:16px 0 20px}
.lp-emblem{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(201,162,75,.35));
  animation:lpRise .6s cubic-bezier(.2,.7,.2,1) backwards}
.lp-eyebrow{font-family:var(--display);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);margin:9px 0 4px}
.lp-title{font-family:var(--display);font-weight:700;font-size:clamp(2rem,9vw,3.1rem);letter-spacing:.14em;
  margin:0;color:var(--gold-soft);text-shadow:0 0 34px rgba(201,162,75,.28);
  animation:lpRise .6s .06s cubic-bezier(.2,.7,.2,1) backwards}
.lp-lede{max-width:42ch;margin:10px auto 0;color:var(--ink);opacity:.92;font-size:.97rem;line-height:1.5;
  animation:lpRise .6s .12s cubic-bezier(.2,.7,.2,1) backwards}
.lp-facts{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:11px;
  font-size:.76rem;color:var(--muted);letter-spacing:.04em}
.lp-facts i{opacity:.45;font-style:normal}

@keyframes lpRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── Abschnitte ───────────────────────────────────────────────────── */
.lp-sec{margin:0 0 34px}
.lp-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lp-h{font-family:var(--display);font-size:1.12rem;letter-spacing:.1em;color:var(--gold-soft);
  margin:0 0 4px;text-transform:uppercase}
.lp-sub{margin:0 0 16px;color:var(--muted);font-size:.94rem}
.lp-help{color:var(--muted);font-size:.84rem;margin:10px 0 0;line-height:1.5}
.lp-err{color:#f0b6ad;font-size:.88rem;margin:10px 0 0}

/* ── Beitreten ────────────────────────────────────────────────────── */
.lp-join{background:linear-gradient(180deg,rgba(28,34,39,.82),rgba(18,22,26,.82));
  border:1px solid var(--gold-dim);border-radius:16px;padding:22px 20px;backdrop-filter:blur(6px)}
.lp-label{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin:6px 0 8px}
.lp-joinrow{display:flex;gap:10px;flex-wrap:wrap}
.lp-code{flex:1 1 190px;min-width:0;height:60px;padding:0 18px;border-radius:12px;
  border:1px solid var(--gold-dim);background:rgba(0,0,0,.35);color:var(--ink);
  font-family:var(--display);font-size:1.9rem;letter-spacing:.42em;text-transform:uppercase;
  text-align:center;font-variant-numeric:tabular-nums}
.lp-code::placeholder{color:var(--muted);opacity:.4;letter-spacing:.42em}
.lp-code:focus{outline:none;border-color:var(--gold-soft);box-shadow:0 0 0 3px rgba(201,162,75,.22)}
.lp-code.bad{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.2)}
.lp-joinbtn{flex:0 0 auto;min-height:60px;padding:0 26px}

/* ── Runden-Liste ─────────────────────────────────────────────────── */
.lp-refresh{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 14px;
  border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);
  font-family:var(--serif);font-size:.86rem;cursor:pointer;transition:.16s}
.lp-refresh:hover{border-color:var(--gold-dim);color:var(--ink)}
.lp-refresh:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.lp-refresh.spin svg{animation:lpSpin .8s linear infinite}
@keyframes lpSpin{to{transform:rotate(360deg)}}

.lp-rooms{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.lp-room{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  width:100%;text-align:left;padding:14px 16px;min-height:76px;
  border:1px solid var(--line);border-radius:14px;background:rgba(22,27,31,.8);
  color:var(--ink);font-family:var(--serif);cursor:pointer;transition:.16s}
.lp-room:hover{border-color:var(--gold-dim);transform:translateY(-1px)}
.lp-room:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.lp-room-code{font-family:var(--display);font-size:1.32rem;letter-spacing:.14em;color:var(--gold-soft)}
.lp-room-main{min-width:0}
.lp-room-title{font-family:var(--display);font-size:.92rem;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-room-meta{font-size:.8rem;color:var(--muted);margin-top:3px}
.lp-room-go{font-family:var(--display);font-size:.76rem;letter-spacing:.1em;color:var(--gold-soft);white-space:nowrap}
/* Rotes Kreuz: nur an selbst eroeffneten Runden. Erste Beruehrung macht scharf, erst die zweite schliesst. */
.lp-room.has-x{grid-template-columns:auto 1fr auto auto}
.lp-room-x{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;
  padding:0 8px;border:1px solid rgba(178,62,48,.55);border-radius:50%;
  color:#d2685c;font-size:.95rem;line-height:1;background:rgba(120,32,24,.16);transition:.16s}
.lp-room-x:hover{background:rgba(150,38,28,.32);color:#f0a196;border-color:rgba(210,90,70,.8)}
.lp-room-x.armed{border-radius:17px;background:rgba(150,38,28,.38);color:#f0a196;
  font-family:var(--display);font-size:.72rem;letter-spacing:.06em;white-space:nowrap}
/* Zustand nicht nur ueber Farbe: jeder Punkt traegt auch Text daneben */
.lp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.lp-dot.lobby{background:var(--green)}
.lp-dot.laeuft{background:var(--gold)}
.lp-empty{padding:22px 18px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);
  text-align:center;font-size:.92rem}

/* ── Fall-Karten ──────────────────────────────────────────────────── */
.lp-cases{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
@media(min-width:620px){.lp-cases{grid-template-columns:1fr 1fr}}
/* Die Karte ist ein Container (div). Nur der obere Teil ist die Auswahl-Schaltfläche — die Aktionen
   im Detailteil sind eigene Knöpfe und dürften in einem <button> gar nicht stehen. */
.lp-case{position:relative;overflow:hidden;border:1px solid var(--gold-dim);border-radius:15px;
  background:linear-gradient(180deg,#1b2027 0%,#11151a 100%);color:var(--ink);font-family:var(--serif);
  box-shadow:0 10px 28px rgba(0,0,0,.4);transition:transform .16s ease,box-shadow .24s ease,border-color .24s ease,opacity .24s ease}
.lp-case:hover{transform:translateY(-3px);border-color:var(--gold-soft);box-shadow:0 16px 38px rgba(0,0,0,.55)}
.lp-case-pick{display:grid;grid-template-columns:92px 1fr;width:100%;text-align:left;min-height:112px;
  background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer}
.lp-case-pick:focus-visible{outline:2px solid var(--gold-soft);outline-offset:-3px;border-radius:14px}
.lp-case-pick:active{transform:scale(.995)}
.lp-case-cover{position:relative;background:#0a0c0e;overflow:hidden}
.lp-case-cover img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.25)}
.lp-case-cover::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 35%,rgba(17,21,26,.96) 100%)}
.lp-case-body{padding:13px 15px 13px 10px;display:flex;flex-direction:column;min-width:0}
.lp-case-era{font-family:var(--display);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.lp-case-title{font-family:var(--display);font-size:1.02rem;letter-spacing:.06em;color:var(--gold-soft);
  margin:3px 0 2px;line-height:1.2}
.lp-case-tag{font-size:.84rem;color:var(--muted);font-style:italic;line-height:1.4;margin-top:5px}
.lp-case-go{margin-top:auto;padding-top:9px;font-family:var(--display);font-size:.72rem;letter-spacing:.1em;color:var(--gold-soft)}
.lp-case[data-theme=cyber]{border-color:rgba(34,211,238,.42)}
.lp-case[data-theme=cyber] .lp-case-title,.lp-case[data-theme=cyber] .lp-case-go{color:#5eead4}
.lp-case[data-theme=venezia]{border-color:rgba(201,79,99,.5)}
.lp-case[data-theme=venezia] .lp-case-title,.lp-case[data-theme=venezia] .lp-case-go{color:#e78fa0}
.lp-case[data-theme=nacht]{border-color:rgba(79,158,111,.45)}
.lp-case[data-theme=nacht] .lp-case-title,.lp-case[data-theme=nacht] .lp-case-go{color:#8fd0a8}

/* ── Gewählter Fall: aufklappen ───────────────────────────────────────
   Der Klick eröffnet nicht mehr sofort eine Runde, sondern WÄHLT den Fall. Erst die aufgeklappte
   Karte hat den Knopf zum Eröffnen — man sieht vorher, worauf man sich einlässt. */
.lp-cases.haspick .lp-case:not(.sel){opacity:.42;filter:saturate(.55)}
.lp-cases.haspick .lp-case:not(.sel):hover{opacity:.75;filter:none}
@media(min-width:620px){.lp-case.sel{grid-column:1 / -1}}
.lp-case.sel{border-color:var(--gold-soft);
  box-shadow:0 20px 54px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05) inset}
.lp-case.sel:hover{transform:none}
.lp-case.sel .lp-case-pick{grid-template-columns:1fr}
/* Echtes 16:9 statt fester Höhe — der Erklärfilm läuft hier ohne Balken und ohne Beschnitt. */
.lp-case.sel .lp-case-cover{height:auto;aspect-ratio:16/9}
.lp-case.sel .lp-case-cover img{filter:none;position:absolute;inset:0}
/* Im aufgeklappten Zustand blendet das Deckbild nach UNTEN aus, nicht nach rechts. */
.lp-case.sel .lp-case-cover::after{background:linear-gradient(180deg,transparent 30%,rgba(17,21,26,.97) 100%)}
.lp-case.sel .lp-case-body{padding:0 17px 4px}
.lp-case.sel .lp-case-title{font-size:1.42rem;margin-top:-34px;position:relative;z-index:1}
.lp-case.sel .lp-case-tag{display:none}
.lp-case.sel .lp-case-go{color:var(--muted);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase}

/* ── Erklärfilm ───────────────────────────────────────────────────────
   Er sitzt GENAU auf dem Titelbild, nicht darunter — und trägt keinerlei Bedienelemente.
   Kein `controls`, damit weder Zeitleiste noch Sekundenzahl noch Puffer-Balken auftauchen. */
.lp-xp-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .45s ease;pointer-events:none;background:transparent}
/* Eingeblendet wird erst, wenn der Film wirklich läuft — bis dahin steht das Standbild darunter.
   So sieht man keinen Schwarzrahmen und keine Ladephase. */
.lp-xp-vid.on{opacity:1}
/* Reste einer Bedienleiste in WebKit/Chrome sicherheitshalber abräumen. */
.lp-xp-vid::-webkit-media-controls,
.lp-xp-vid::-webkit-media-controls-enclosure,
.lp-xp-vid::-webkit-media-controls-panel{display:none !important;-webkit-appearance:none}

.lp-det{display:none;padding:0 17px 16px}
.lp-case.sel .lp-det{display:block;animation:detIn .34s ease both}
@keyframes detIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lp-det-pitch{font-size:.97rem;line-height:1.62;color:var(--ink);opacity:.95;margin:10px 0 0}
.lp-det-hooks{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.lp-det-hooks li{position:relative;padding-left:22px;font-size:.9rem;line-height:1.5;color:var(--ink);opacity:.9}
.lp-det-hooks li::before{content:'';position:absolute;left:4px;top:.6em;width:7px;height:7px;
  transform:rotate(45deg);background:var(--gold-soft);opacity:.85}
.lp-det-facts{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.lp-fact{font-family:var(--display);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--gold-dim);border-radius:999px;color:var(--muted);white-space:nowrap}
.lp-fact b{color:var(--gold-soft);font-weight:400}
.lp-det-actions{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.lp-det-actions .btn{flex:1 1 auto;min-height:46px}
.lp-det-actions .lp-hostbtn{flex:2 1 200px}

/* ── Bühnenbild des gewählten Falls ───────────────────────────────────
   Liegt über dem statischen .bg und unter allem Inhalt. Sanft eingeblendet, damit der Wechsel
   zwischen zwei Fällen nicht schneidet. */
.lp-stage{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  pointer-events:none;opacity:0;transition:opacity .6s ease}
.lp-stage.on{opacity:1}
.lp-stagescrim{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:linear-gradient(180deg,rgba(8,9,11,.74),rgba(8,9,11,.93)),
             radial-gradient(120% 90% at 50% 30%,transparent 38%,rgba(5,6,8,.55) 100%)}
.lp-stagescrim.on{opacity:1}
body[data-theme=cyber] .lp-stagescrim{background:linear-gradient(180deg,rgba(7,10,15,.74),rgba(7,10,15,.94)),
  radial-gradient(120% 90% at 50% 30%,transparent 38%,rgba(4,7,11,.55) 100%)}
body[data-theme=venezia] .lp-stagescrim{background:linear-gradient(180deg,rgba(10,13,24,.74),rgba(10,13,24,.95)),
  radial-gradient(120% 90% at 50% 30%,transparent 38%,rgba(6,9,18,.55) 100%)}
body[data-theme=nacht] .lp-stagescrim{background:linear-gradient(180deg,rgba(11,16,22,.76),rgba(11,16,22,.95)),
  radial-gradient(120% 90% at 50% 30%,transparent 38%,rgba(7,11,16,.55) 100%)}
/* Läuft die Bühne, tritt der statische Startseiten-Hintergrund zurück. */
body.lp-staged .bg{opacity:0;transition:opacity .6s ease}

/* Sprung zum Code-Feld, damit die Fälle oben stehen dürfen, ohne Gäste mit Code auszubremsen. */
.lp-jump{display:inline-block;margin-top:11px;font-family:var(--display);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none;
  padding:8px 14px;border:1px solid var(--line);border-radius:999px;transition:color .2s,border-color .2s}
.lp-jump:hover,.lp-jump:focus-visible{color:var(--gold-soft);border-color:var(--gold-dim)}

/* ── Beitreten als schlanke Zeile ─────────────────────────────────── */
.lp-joinbar{max-width:560px;margin:8px auto 26px;padding:14px 16px 12px;border:1px solid var(--line);
  border-radius:14px;background:rgba(12,14,16,.55);backdrop-filter:blur(6px)}
.lp-joinlabel{font-family:var(--display);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 9px;text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion: reduce){
  .lp-case.sel .lp-det{animation:none}
  .lp-stage,.lp-stagescrim,body.lp-staged .bg{transition:none}
}

/* ── Ablauf ───────────────────────────────────────────────────────── */
.lp-steps{margin:14px 0 0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:12px}
.lp-steps li{counter-increment:s;position:relative;padding-left:44px;color:var(--ink);opacity:.92;line-height:1.55;font-size:.96rem}
.lp-steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:.86rem;
  color:var(--gold-soft);border:1px solid var(--gold-dim);background:rgba(0,0,0,.3)}
.lp-steps b{color:var(--gold-soft);font-weight:400;font-family:var(--display);font-size:.92rem;letter-spacing:.03em}

.lp-foot{text-align:center;color:var(--muted);font-size:.82rem;padding:8px 0 0;border-top:1px solid var(--line);margin-top:8px}
.lp-foot p{margin:16px 0 0}

/* ── Ladeplatzhalter (reserviert Platz → kein Springen beim Nachladen) ── */
.lp-skel{height:76px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(100deg,rgba(255,255,255,.02) 30%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.02) 70%);
  background-size:220% 100%;animation:lpShim 1.4s ease-in-out infinite}
.lp-skel.tall{height:112px}
@keyframes lpShim{from{background-position:120% 0}to{background-position:-20% 0}}

/* ── Code-Fenster ─────────────────────────────────────────────────── */
.lp-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(6,8,10,.82);backdrop-filter:blur(5px);animation:lpFade .2s ease}
.lp-modal[hidden]{display:none}
@keyframes lpFade{from{opacity:0}to{opacity:1}}
.lp-modal-card{width:100%;max-width:400px;text-align:center;padding:26px 22px calc(22px + var(--safe-b));
  border:1px solid var(--gold-dim);border-radius:18px;background:linear-gradient(180deg,#1b2027,#0f1316);
  box-shadow:0 24px 70px rgba(0,0,0,.7);animation:lpPop .24s cubic-bezier(.2,.7,.2,1);
  max-height:calc(100dvh - 40px);overflow-y:auto}
@keyframes lpPop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.lp-code-big{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,15vw,3.4rem);
  letter-spacing:.3em;text-indent:.3em;color:var(--gold-soft);margin:12px 0 16px;
  text-shadow:0 0 30px rgba(201,162,75,.3)}
.lp-qr{display:block;width:200px;height:200px;margin:0 auto 14px;border-radius:10px;background:var(--ink);padding:6px}
.lp-modal-actions{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.lp-modal-actions .btn{width:100%;min-height:48px}

@media (prefers-reduced-motion: reduce){
  .lp-emblem,.lp-title,.lp-lede,.lp-modal,.lp-modal-card{animation:none}
  .lp-skel{animation:none}
  .lp-refresh.spin svg{animation:none}
  .lp-case:hover,.lp-room:hover{transform:none}
}