[hidden]:not(.verdict){display:none!important} /* Autoren-display (nav, .card …) darf das hidden-Attribut nie aushebeln */
:root{--bg:#0b1020;--ink:#f3efe6;--muted:#a9a6b8;--card:rgba(18,20,38,.78);--line:rgba(255,255,255,.12);--acc:#e0a24a;--danger:#d9534f;--v:#e0a24a}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Georgia","Iowan Old Style",serif;color:var(--ink);background:var(--bg)}
button,input,select{font:inherit}
button{background:var(--acc);color:#1a1206;border:0;border-radius:10px;padding:.55rem 1rem;cursor:pointer;font-weight:600;transition:transform .15s,filter .15s}
button:hover{filter:brightness(1.1);transform:translateY(-1px)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.danger{background:var(--danger);color:#fff}
button.link{background:none;color:var(--acc);padding:0;font-weight:400;text-decoration:underline}
input{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:.5rem .7rem;width:100%}
label{display:block;margin:.6rem 0;color:var(--muted);font-size:.92rem}
label input{margin-top:.25rem}
h1,h2,h3{font-weight:600;letter-spacing:.01em;margin:.2rem 0 .5rem}
.sub,.muted{color:var(--muted)} .small{font-size:.85rem}
.err{color:#ff9a8a;min-height:1.2em}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.3rem;backdrop-filter:blur(6px)}
header{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.6rem}
.brand{color:var(--ink);text-decoration:none;font-size:1.35rem;font-weight:700}
.brand span{color:var(--acc);font-style:italic}
nav{display:flex;gap:.8rem;align-items:center}
main{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 1.4rem 7rem}

/* Himmel & Tageszeiten */
#sky{position:fixed;inset:0;z-index:0;overflow:hidden;background:linear-gradient(#141a3a,#0b1020 70%)}
#sky .stars{position:absolute;inset:0;opacity:.9;background-image:radial-gradient(1.5px 1.5px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 30% 60%,#fff,transparent),radial-gradient(1.2px 1.2px at 70% 25%,#fff,transparent),radial-gradient(1px 1px at 85% 55%,#fff,transparent),radial-gradient(1.4px 1.4px at 50% 10%,#fff,transparent),radial-gradient(1px 1px at 20% 80%,#fff,transparent),radial-gradient(1px 1px at 60% 75%,#fff,transparent),radial-gradient(1.3px 1.3px at 92% 12%,#fff,transparent);background-size:600px 400px}
#sun,#moon{position:absolute;width:110px;height:110px;border-radius:50%;left:78%;top:110%}
#sun{background:radial-gradient(circle at 40% 40%,#fff3c4,#ffbf47 55%,#ff8a2b);box-shadow:0 0 90px 30px rgba(255,190,80,.45)}
#moon{background:radial-gradient(circle at 35% 35%,#fbfbf2,#cfd3e0 60%,#9aa0b8);box-shadow:0 0 70px 18px rgba(200,210,255,.3)}
#sky .hills{position:absolute;left:-5%;right:-5%;bottom:-40px;height:190px;background:radial-gradient(ellipse at 30% 100%,#0a0d1a 60%,transparent 61%),radial-gradient(ellipse at 75% 100%,#0d1122 58%,transparent 59%)}
.phase-badge{padding:.4rem .9rem;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}

/* Anmeldung */
.auth{max-width:440px;margin:6vh auto 0}
.tabs{display:flex;gap:.4rem;margin:1rem 0 .3rem}
.tabs button{flex:1;background:transparent;color:var(--muted);border:1px solid var(--line)}
.tabs button.on{background:var(--acc);color:#1a1206}

/* Lobby */
.lobby-head{display:flex;gap:1.4rem;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin:1rem 0 1.4rem}
.idcard{min-width:300px;max-width:380px}
.idcard .label{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}
.idcard .pid{font-size:2rem;letter-spacing:.25em;font-family:ui-monospace,monospace;color:var(--acc);margin:.2rem 0}
.idcard .hint{font-size:.85rem;color:var(--muted)}
form.inline{display:flex;gap:.4rem;margin-top:.5rem}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin-bottom:1.5rem}
.game{position:relative;border-radius:16px;padding:1rem 1.1rem;background:var(--card);border:1px solid var(--line);overflow:hidden}
.game::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--gc,#e0a24a)}
.game h3{display:flex;justify-content:space-between;align-items:center}
.game .meta{color:var(--muted);font-size:.9rem;margin:.2rem 0 .8rem}
.game .btns{display:flex;gap:.4rem;flex-wrap:wrap}
.game .btns button{padding:.4rem .7rem;font-size:.9rem}
.tag{font-size:.7rem;padding:.15rem .5rem;border-radius:999px;border:1px solid var(--line);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.empty{color:var(--muted);font-style:italic;padding:1rem}
.variants{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:.8rem 0}
.variant{cursor:pointer;border:2px solid var(--line);border-radius:14px;padding:1rem;text-align:center;background:rgba(255,255,255,.03);transition:all .2s}
.variant .ico{font-size:2.2rem}
.variant.on{border-color:var(--vc);box-shadow:0 0 0 4px color-mix(in srgb,var(--vc) 25%,transparent);transform:translateY(-2px)}
.row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--ink)}
.switch input{display:none}
.switch span{width:42px;height:24px;border-radius:999px;background:#444;position:relative;transition:.2s}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked+span{background:var(--acc)}
.switch input:checked+span::after{left:21px}

/* Spiel */
.game-top{display:flex;align-items:center;gap:1rem;margin:.6rem 0 1rem}
.game-top .title{flex:1}
.stage{position:relative;height:440px;margin-bottom:1rem}
.ring{position:absolute;inset:0}
.token{position:absolute;width:88px;margin-left:-44px;margin-top:-44px;text-align:center;transition:filter .4s}
.token .disc{width:62px;height:62px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;background:radial-gradient(circle at 35% 30%,#3b3f63,#1c1f38);border:2px solid var(--line);position:relative}
.token.me .disc{border-color:var(--acc);box-shadow:0 0 18px rgba(224,162,74,.6)}
.token.dead{filter:grayscale(1) brightness(.55)}
.token.dead .disc::after{content:"✝";position:absolute;font-size:1.1rem;right:-4px;top:-6px;color:#ccc}
.token .nm{font-size:.82rem;margin-top:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.token .rl{font-size:.7rem;color:var(--acc)}
.token .votes{position:absolute;top:-8px;left:58px;min-width:22px;height:22px;border-radius:11px;background:var(--danger);color:#fff;font-size:.75rem;display:grid;place-items:center;padding:0 5px}
.token.nominee .disc{border-color:var(--danger);animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(217,83,79,.6)}50%{box-shadow:0 0 0 12px rgba(217,83,79,0)}}
.center{position:absolute;left:50%;top:50%;width:46%;transform:translate(-50%,-50%);text-align:center}
.caption{font-size:1.15rem;line-height:1.45;font-style:italic;text-shadow:0 2px 12px #000}
.panel{display:grid;grid-template-columns:1.2fr 1fr 1.1fr;gap:1rem}
#actions .group{margin-bottom:.7rem}
#actions .group h4{margin:.2rem 0 .35rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
#actions .group div{display:flex;flex-wrap:wrap;gap:.35rem}
#actions button{padding:.4rem .75rem;font-size:.9rem}
.news ol{list-style:none;padding:0;margin:0;max-height:260px;overflow:auto;font-size:.9rem}
.news li{padding:.35rem 0;border-bottom:1px dashed var(--line);color:var(--muted)}
.news li:first-child{color:var(--ink)}
.role-card{position:relative;height:280px;perspective:1000px;cursor:pointer;transform-style:preserve-3d}
.role-card .face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;text-align:center;border:1px solid var(--line)}
.role-card .front{background:repeating-linear-gradient(45deg,#2a1d3a,#2a1d3a 10px,#22172f 10px,#22172f 20px)}
.role-card .back{background:linear-gradient(160deg,color-mix(in srgb,var(--v) 35%,#1a1a2e),#14142a);transform:rotateY(180deg)}
.role-card .emblem{font-size:3.2rem;margin-bottom:.3rem}
.role-card p{font-size:.85rem;color:var(--ink);opacity:.9;max-height:110px;overflow:auto}
.role-card .inner{position:absolute;inset:0;transform-style:preserve-3d}

/* Telefon */
.phone{position:fixed;right:1.2rem;bottom:1.2rem;z-index:5;width:300px}
.phone-toggle{position:absolute;right:0;bottom:0;width:58px;height:58px;border-radius:50%;font-size:1.6rem;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.phone.incall .phone-toggle{background:#3fbf6f;animation:pulse 1.5s infinite}
.phone-body{background:#151830;border:1px solid var(--line);border-radius:16px;padding:1rem;margin-bottom:70px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.phone.collapsed .phone-body{display:none}
.phone input{margin:.25rem 0}
.phone-status{margin:.5rem 0;font-weight:600;color:#7fe0a0}
.phone-btns{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.5rem}
.phone-btns button{padding:.4rem .6rem;font-size:.85rem}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-top:.5rem}
.pad button{background:#262a4a;color:var(--ink)}
@media (max-width:900px){.panel{grid-template-columns:1fr}.variants{grid-template-columns:1fr 1fr}.stage{height:380px}}

/* ── (C) Gestaltung: Kulisse je Variante, Avatare, Sprech-Anzeige, Stimmbalken, Urteil, Barrierefreiheit ── */
/* Richtung: „Scherenschnitt-Theater bei Nacht" – dunkler Grund, Bernstein-Akzent, Variantenfarbe --v nur als Licht */
html,body{background:radial-gradient(1200px 500px at 80% -10%,color-mix(in srgb,var(--v) 18%,transparent),transparent 70%),linear-gradient(#141a3a,#0b1020 60%) fixed}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:6px}
select{background:#1b1f3a;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:.45rem .6rem}
input:focus,select:focus{border-color:var(--acc)}
.muted,.sub{color:#b9b6c8} /* ≥ 7:1 auf --bg, ≥ 4.5:1 auf Karten */
.linkish{background:none;border:0;padding:0;color:var(--acc);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.linkish:hover{transform:none}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:.85rem}
.notes{list-style:none;padding:0;margin:.4rem 0}.notes li{padding:.4rem 0;border-bottom:1px dashed var(--line)}
.row label{flex:1 1 200px;margin:0}
/* Start-/Admin-Seiten ohne Himmel: zweispaltige Karten, ruhige Kopfzeile */
body:not(:has(#sky)) main{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1rem;align-items:start;padding-top:1rem}
body:not(:has(#sky)) main>section:first-child{grid-column:1/-1}
body:not(:has(#sky))::after{content:"";position:fixed;inset:auto 0 0 0;height:120px;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 30% 100%,#070913 60%,transparent 61%),radial-gradient(ellipse at 75% 100%,#090c18 58%,transparent 59%)}
.admin main{display:block}
.card h2{font-size:1.15rem;border-bottom:1px solid var(--line);padding-bottom:.4rem}
.auth{box-shadow:0 30px 80px rgba(0,0,0,.45)}
.auth h1{font-size:1.7rem}
.tabs button{border-radius:999px}

/* Kulissen */
#sky .scene{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(30vh,260px);display:none;fill:#06080f}
#sky .scene .win{fill:#ffcf6b;opacity:.85}
#sky .scene .water{fill:#0a1630;opacity:.9}
#sky .scene .bat{fill:#06080f}
body[data-variant=werwolf] #sky .scene-werwolf,body[data-variant=vampir] #sky .scene-vampir,body[data-variant=mafia] #sky .scene-mafia{display:block}
body[data-variant] #sky .hills{display:none}
.phase-tag #sky .scene{fill:#2b3a2a}.phase-tag #sky .scene .win{opacity:0}
.phase-tag #sky .scene-mafia,.phase-tag #sky .scene-vampir{fill:#2a2c3e}
@media (prefers-reduced-motion:no-preference){
  #sky .scene .bat{animation:flap 3.2s ease-in-out infinite alternate}
  #sky .scene .win{animation:flicker 5s steps(2) infinite}
}
@keyframes flap{to{transform:translate(40px,-12px)}}
@keyframes flicker{50%{opacity:.55}}

/* Caption lesbar auch am hellen Taghimmel */
.caption{display:inline-block;background:rgba(8,10,22,.72);padding:.5rem .9rem;border-radius:12px;font-style:italic}
.phase-badge{background:color-mix(in srgb,var(--v) 30%,#121426);border-color:color-mix(in srgb,var(--v) 60%,transparent)}

/* Avatare */
.token .disc{background:radial-gradient(circle at 35% 30%,hsl(var(--h,220) 45% 42%),hsl(var(--h,220) 45% 18%));font-size:1.15rem;font-weight:700;letter-spacing:.03em}
.token .disc .num{position:absolute;bottom:-6px;left:-6px;min-width:22px;height:22px;border-radius:11px;background:#0b1020;border:1px solid var(--line);font-size:.72rem;display:grid;place-items:center}
.token .disc .badge{position:absolute;top:-8px;right:-10px;font-size:1.05rem;background:#0b1020;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line)}
.token .nm{background:rgba(8,10,22,.7);border-radius:6px;padding:0 .3rem}
.token .rl{color:#f2c27c}
.token .wave{position:absolute;bottom:-4px;right:-8px;display:none;gap:2px;align-items:flex-end;height:14px;padding:2px 3px;border-radius:6px;background:#0b1020}
.token .wave i{width:3px;height:100%;background:#7fe0a0;border-radius:2px}
.token.speaking .disc{border-color:#7fe0a0;box-shadow:0 0 0 4px rgba(127,224,160,.35)}
.token.speaking .wave{display:flex}
@media (prefers-reduced-motion:no-preference){
  .token.speaking .disc{animation:talk 1s ease-in-out infinite}
  .token.speaking .wave i{animation:eq .7s ease-in-out infinite alternate}
  .token.speaking .wave i:nth-child(2){animation-delay:.2s}.token.speaking .wave i:nth-child(3){animation-delay:.4s}
}
@media (prefers-reduced-motion:reduce){.token.nominee .disc,.phone.incall .phone-toggle{animation:none}.token.nominee .disc{box-shadow:0 0 0 4px rgba(217,83,79,.55)}}
@keyframes talk{50%{box-shadow:0 0 0 9px rgba(127,224,160,0)}}
@keyframes eq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.token .wave i{transform-origin:bottom}
.token .votes{display:none} /* ersetzt durch Stimmbalken in der Mitte */

/* Stimmbalken */
.tally{margin:.8rem auto 0;max-width:340px;text-align:left;background:rgba(8,10,22,.8);border:1px solid var(--line);border-radius:14px;padding:.6rem .8rem}
.tally h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:#f2c27c;margin:0 0 .4rem}
.tally ol{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.tally li{display:grid;grid-template-columns:minmax(0,7.5rem) 1fr 1.6rem;gap:.5rem;align-items:center;font-size:.88rem}
.tally .who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tally .bar{height:10px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.tally .bar b{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--w));background:linear-gradient(90deg,#d9534f,#ff8a6b)}
.tally li.lead .who{color:#ffb4a6;font-weight:700}
.tally .n{text-align:right;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){.tally .bar b{transition:transform .5s cubic-bezier(.2,.8,.2,1)}}

/* Urteil */
.verdict{position:absolute;left:50%;top:50%;z-index:3;translate:-50% -50%;min-width:260px;text-align:center;padding:1.2rem 1.6rem;border-radius:18px;background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--v) 45%,#1a0c14),#0d0a14);border:1px solid color-mix(in srgb,var(--v) 70%,transparent);box-shadow:0 20px 60px rgba(0,0,0,.6);opacity:1;scale:1;transition:opacity .35s,scale .35s,display .35s allow-discrete,overlay .35s allow-discrete}
.verdict[hidden]{display:none;opacity:0;scale:.85}
@starting-style{.verdict{opacity:0;scale:1.25}}
.verdict .v-emb{font-size:3rem}
.verdict .v-name{font-size:1.5rem;font-weight:700}
.verdict .v-what{color:#ffcfc4;text-transform:uppercase;letter-spacing:.18em;font-size:.85rem;margin-top:.2rem}
@media (prefers-reduced-motion:reduce){.verdict{transition:opacity .2s,display .2s allow-discrete;scale:1}@starting-style{.verdict{scale:1}}}

/* Rollenkarte */
.role-card .front{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--v) 22%,#1d1428),color-mix(in srgb,var(--v) 22%,#1d1428) 10px,#17111f 10px,#17111f 20px);border-color:color-mix(in srgb,var(--v) 50%,transparent)}
.role-card .front .emblem{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;border:2px dashed color-mix(in srgb,var(--v) 60%,#fff)}
.role-card h3{font-size:1.4rem}

@media (max-width:600px){
  header{padding:.7rem 1rem;flex-wrap:wrap;gap:.5rem}
  .stage{height:340px}.token{width:72px;margin-left:-36px}.token .disc{width:50px;height:50px;font-size:1rem}
  .center{width:72%}.caption{font-size:1rem}.tally li{grid-template-columns:minmax(0,5.5rem) 1fr 1.4rem}
  .game-top{flex-wrap:wrap}.phone{right:.7rem;bottom:.7rem;width:calc(100vw - 1.4rem)}
  .idcard{min-width:0;max-width:none;width:100%}
}
.token.dead .rl{background:rgba(8,10,22,.85);border-radius:6px;padding:0 .3rem;display:inline-block}
.token.dead .nm{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.5)}
.empty{grid-column:1/-1;text-align:center;border:1px dashed var(--line);border-radius:16px;padding:2rem;background:rgba(8,10,22,.5)}
/* Runde 2: Lesbarkeit am hellen Himmel, Mobil-Bühne */
.game-top .title,#btn-back{background:rgba(8,10,22,.62);border-radius:12px;padding:.3rem .7rem}
.game-top .title .sub{color:#d6d3e2}
header{background:linear-gradient(rgba(8,10,22,.55),transparent)}
@media (max-width:600px){
  .stage{height:auto}.ring{position:relative;height:300px}
  .center{position:static;transform:none;width:100%;margin-top:.4rem}
  .verdict{position:fixed}
  .game-top .title h1{font-size:1.4rem}
}
header a:not(.brand),nav a{color:var(--acc);text-underline-offset:3px}

/* Lautstärke-Dämpfung: kleines Abzeichen am Token */
.token .damp{font-size:.7rem;margin-top:2px;padding:1px 6px;border-radius:9px;background:rgba(240,170,60,.25);color:#ffd28a;white-space:nowrap}

/* Tisch-Chat: im Seitenfluss (Panel), überdeckt die Dorfszene nicht */
.chat ol{list-style:none;padding:0;margin:0 0 .5rem;max-height:240px;overflow:auto;font-size:.9rem}
.chat li{padding:.25rem 0;border-bottom:1px dashed var(--line);overflow-wrap:anywhere}
.chat li.wolf{color:#e07a7a}.chat li.tot{color:var(--muted);font-style:italic}
.chat li .bot{font-size:.7rem;opacity:.7;margin-left:.2rem}
.chat-f{display:flex;gap:.4rem}.chat-f input{flex:1;min-width:0}