@font-face { font-family: 'Bricolage'; src: url('/fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Bricolage'; src: url('/fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('/fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('/fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #0e1d24;
  --bg-deep: #0a161b;
  --surface: #13262e;
  --surface-2: #19313a;
  --line: #24424d;
  --text: #e3eef0;
  --muted: #86a2aa;
  --gold: #d4a75a;
  --gold-ink: #241a07;
  --blue: #3d8fe0;
  --blue-soft: rgba(61, 143, 224, 0.14);
  --red: #e2474b;
  --red-soft: rgba(226, 71, 75, 0.14);
  --paper: #f1e6cf;
  --paper-ink: #1d2427;
  --ok: #69c08a;
  --warn: #e6a23c;

  --r-impostor: #d63a3f;
  --r-crewmate: #2f9ea6;
  --r-mayor: #b8862d;
  --r-detective: #6f5fd6;
  --r-jester: #d4508f;
  --r-pawn: #4f9c4f;

  --t1: #b07a5c; /* Bronze */
  --t2: #a9b4ba; /* Silber */
  --t3: #d9ad5c; /* Gold */
  --t4: #4fb8ad; /* Platin */
  --t5: #3db36e; /* Smaragd */
  --t6: #7f93ff; /* Diamant */
  --t7: #c07ae0; /* Master */

  --display: 'Bricolage', 'Segoe UI', system-ui, sans-serif;
  --body: 'Atkinson', 'Segoe UI', system-ui, sans-serif;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(1200px 600px at 50% -200px, #16323c 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.15; margin: 0 0 .4em; letter-spacing: -0.01em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .6em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.hint { color: var(--muted); font-size: .88rem; margin: .5em 0 0; }
.warn-text { color: var(--warn); margin: 0; }
.gold-text { color: var(--gold); }
strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Buttons & Inputs ---------- */
.btn {
  font: 700 .95rem/1 var(--body);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .7em 1.1em;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover:not(:disabled) { border-color: #3a6573; background: #1e3a44; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.btn.primary:hover:not(:disabled) { background: #e2b86b; border-color: #e2b86b; }
.btn.ok { background: var(--ok); color: #082014; border-color: var(--ok); }
.btn.ghost { background: transparent; }
.btn.big { padding: .9em 1.4em; font-size: 1rem; }
.btn.small { padding: .5em .8em; font-size: .85rem; }
.btn.pick { text-align: left; }
.btn-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.btn-row.end { justify-content: flex-end; margin-top: 1rem; }
.link { background: none; border: 0; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }
.link:hover { color: var(--text); }
.icon-btn { background: none; border: 1px solid transparent; color: var(--muted); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: .9rem; }
.icon-btn:hover { color: var(--text); border-color: var(--line); }

.input {
  font: 1rem var(--body);
  color: var(--text);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .6em .8em;
  width: 100%;
  min-width: 0;
}
.input:focus { border-color: var(--gold); outline: none; }
.input.num { width: 5.5em; text-align: right; }
.input.narrow { width: auto; }
.code-input { font-family: var(--display); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: 1.3rem; }
.field { display: grid; gap: .3rem; margin-bottom: .9rem; }
.field > span, .inline-field > span { color: var(--muted); font-size: .88rem; }
.inline-field { display: flex; align-items: center; gap: .6rem; }
.inline-field .input { width: 14rem; }
.check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; margin: .2rem 1rem .2rem 0; }
.check input, .chip input { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; }
.input-row { display: flex; gap: .5rem; }

/* ---------- Start ---------- */
.start { max-width: 920px; margin: 0 auto; padding: 9vh 24px 48px; }
.start-hero { margin-bottom: 2.5rem; }
.wordmark { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 7vw, 5.2rem); line-height: .95; letter-spacing: -0.035em; margin: 0; color: var(--text); }
.wordmark::after { content: ''; display: inline-block; width: .32em; height: .32em; margin-left: .08em; border-radius: 50%; background: var(--red); vertical-align: baseline; }
.wordmark.small { font-size: 1.35rem; letter-spacing: -0.02em; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 34em; margin-top: 1rem; }
.start-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.start-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; }
.start-card .btn { margin-top: auto; align-self: flex-start; }
.start-card .check { margin-bottom: 1.1rem; }

/* ---------- Shell ---------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 10; background: rgba(10, 22, 27, .92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.top-inner { max-width: 1360px; margin: 0 auto; padding: 12px 28px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; }
.brand { display: flex; align-items: baseline; gap: .8rem; }
.round-no { color: var(--muted); font-size: .9rem; }
.stepper { list-style: none; display: flex; justify-content: center; gap: 4px; margin: 0; padding: 0; }
.stepper li { font-size: .88rem; color: var(--muted); padding: .35em .8em; border-radius: 999px; position: relative; }
.stepper li.done { color: #b8cdd2; }
.stepper li.done::before { content: '✓ '; color: var(--ok); }
.stepper li.now { background: var(--surface-2); color: var(--text); font-weight: 700; box-shadow: inset 0 0 0 1px var(--gold); }
.top-actions { display: flex; align-items: center; gap: 12px; }
.conn { width: 9px; height: 9px; border-radius: 50%; }
.conn.on { background: var(--ok); }
.conn.off { background: var(--red); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.code-chip { display: flex; align-items: baseline; gap: .5rem; background: var(--bg-deep); border: 1px dashed #3a6573; color: var(--text); padding: .35em .8em; border-radius: 8px; cursor: pointer; font: inherit; }
.code-chip:hover { border-color: var(--gold); }
.code-label { font-size: .78rem; color: var(--muted); }
.code { font-family: var(--display); font-weight: 800; letter-spacing: .14em; font-size: 1.15rem; }

.body { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 88px; }

.page-head h1 { margin-bottom: .15em; }
.page-head p { margin: 0; max-width: 60em; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.panel.note { border-style: dashed; background: transparent; }
.panel.host { border-color: rgba(212, 167, 90, .45); background: linear-gradient(0deg, rgba(212, 167, 90, .05), rgba(212, 167, 90, .05)), var(--surface); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.panel-head h2, .panel-head h3 { margin: 0; }
.panel.split { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.action-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.action-bar > p { margin: 0; }
.panel.host .action-bar:not(:first-child) { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }

.tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: .12em .5em; border-radius: 4px; background: var(--surface-2); color: var(--muted); margin-left: .4rem; vertical-align: middle; }
.tag.gold { background: rgba(212, 167, 90, .16); color: var(--gold); }
.tag.warn { background: rgba(230, 162, 60, .16); color: var(--warn); margin: 0; }

/* ---------- Seitenleiste ---------- */
.board, .plist { list-style: none; margin: 0; padding: 0; }
.board li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.board li:last-child { border-bottom: 0; }
.board li:first-child .bpts { color: var(--gold); }
.board .rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.board .bpts { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }
.board li.me .bname, .plist li.me .pname { color: var(--gold); }
.plist li { display: grid; grid-template-columns: 10px 1fr auto auto; gap: .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.plist li:last-child { border-bottom: 0; }
.plist li.away { opacity: .55; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.dot.on { background: var(--ok); }
.pname { font-weight: 700; overflow-wrap: anywhere; }
.psub { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.ready { font-size: .8rem; color: var(--muted); }
.ready.yes { color: var(--ok); font-weight: 700; }
.pactions { display: flex; }

/* ---------- Lobby ---------- */
.lane-table { display: grid; gap: 2px; }
.lane-row { display: grid; grid-template-columns: 7rem minmax(10rem, 15rem) 1fr; gap: 1.2rem; align-items: center; padding: .55rem .2rem; border-bottom: 1px solid var(--line); }
.lane-row .seg { justify-self: end; }
.lane-row.head > div:last-child { justify-self: end; }
.lane-row.head { color: var(--muted); font-size: .82rem; padding-top: 0; }
.lane-name { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.seg { display: inline-flex; background: var(--bg-deep); border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px; }
.seg button { font: 600 .86rem var(--body); color: var(--muted); background: none; border: 0; padding: .45em .8em; border-radius: 6px; cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"].pref-0 { background: rgba(226, 71, 75, .2); color: #ff9a9c; }
.seg button[aria-checked="true"].pref-1 { background: var(--surface-2); color: var(--text); }
.seg button[aria-checked="true"].pref-2 { background: rgba(105, 192, 138, .2); color: #9be0b5; }
.riot-status { color: var(--muted); font-size: .9rem; margin: .6rem 0 0; }
.ready-box { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.ready-box .btn { min-width: 12rem; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 28px; }
.setting-label { font-weight: 700; margin-bottom: .45rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem .2rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; margin-right: .8rem; cursor: pointer; }
.points { margin-top: 1.2rem; }
.points summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.points summary:hover { color: var(--text); }
.points-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .5rem 2rem; margin-top: .8rem; }
.pt { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .92rem; }

/* ---------- Teams-Board ---------- */
section.board { display: grid; gap: 8px; }
.board-row { display: grid; grid-template-columns: 1fr 9rem 1fr; gap: 10px; align-items: stretch; }
.board-head { align-items: end; margin-bottom: 4px; }
.team-title { font-family: var(--display); font-weight: 800; font-size: 1.4rem; display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px; }
.team-title.team-A { color: var(--blue); }
.team-title.team-B { color: var(--red); }
.team-title .sum { font-size: 1rem; color: var(--muted); font-weight: 600; }
.board-head .lane-col { color: var(--muted); font-size: .85rem; }
.lane-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.lane-label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.lane-col .lane-label { font-family: var(--display); font-size: .95rem; color: var(--text); font-weight: 600; }
.lane-diff { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lane-diff.warn { color: var(--warn); }
.slot {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line);
  font: 700 1.05rem var(--body); color: var(--text); text-align: left; width: 100%;
}
.slot.team-A { background: var(--blue-soft); border-left: 4px solid var(--blue); }
.slot.team-B { background: var(--red-soft); border-right: 4px solid var(--red); flex-direction: row-reverse; text-align: right; }
button.slot { cursor: pointer; }
button.slot:hover { border-color: #4b7f8f; }
.slot.me .slot-name { color: var(--gold); }
.slot.sel { outline: 2px dashed var(--gold); outline-offset: 2px; }
.slot-meta { display: flex; gap: .4rem; align-items: center; }
.skill-pill { font-family: var(--display); font-weight: 800; font-size: .85rem; min-width: 1.9em; text-align: center; padding: .15em .4em; border-radius: 5px; background: rgba(0, 0, 0, .25); color: var(--muted); }

/* ---------- Rollenkarte ---------- */
.ingame-grid { display: flex; flex-direction: column; gap: 18px; }
.stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.role-card {
  --rc: var(--r-crewmate);
  background: var(--paper); color: var(--paper-ink);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 18px 40px -18px rgba(0, 0, 0, .7);
  display: flex; flex-direction: column; width: 100%;
}
.role-card.role-impostor { --rc: var(--r-impostor); }
.role-card.role-crewmate { --rc: var(--r-crewmate); }
.role-card.role-mayor { --rc: var(--r-mayor); }
.role-card.role-detective { --rc: var(--r-detective); }
.role-card.role-jester { --rc: var(--r-jester); }
.role-card.role-pawn { --rc: var(--r-pawn); }
.role-band { background: var(--rc); color: #fff; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .9rem; }
.link.on-band { color: rgba(255, 255, 255, .85); }
.link.on-band:hover { color: #fff; }
.role-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; padding: 24px 28px 28px; align-items: start; }
.role-info { max-width: 62ch; }
.role-name { font-size: clamp(2.4rem, 4vw, 3.2rem); letter-spacing: -0.035em; color: var(--rc); margin-bottom: .15em; line-height: .95; }
.role-goal { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.3; margin-bottom: .7em; }
.role-text { font-size: 1rem; line-height: 1.6; }
.role-tips { margin: .7em 0 0; padding-left: 1.1em; font-size: .94rem; }
.role-tips li { margin-bottom: .3em; }
.referee-note { margin-top: 1rem; padding: .8rem 1rem; border: 2px dashed rgba(29, 36, 39, .35); border-radius: 10px; display: flex; gap: .9rem; align-items: flex-start; }
.referee-note p { margin: .25em 0 0; font-size: .92rem; }
.ref-icon { flex: none; width: 34px; height: 34px; color: var(--paper-ink); }
.ref-icon svg, .role-icon svg, .det-icon svg, .spot-icon svg { width: 100%; height: 100%; display: block; }
.role-card.back {
  cursor: pointer; border: 0; flex-direction: row; align-items: center; justify-content: center; gap: 1.4rem; min-height: 190px;
  background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(29, 36, 39, .06) 14px 28px), var(--paper);
  font: inherit; color: var(--paper-ink);
}
.role-card.back:hover .back-mark { transform: rotate(-6deg) scale(1.04); }
.back-mark { font-family: var(--display); font-weight: 800; font-size: 6rem; line-height: 1; color: var(--red); transition: transform .2s; }
.back-text { font-weight: 700; font-size: 1.15rem; }
.back-mark.countdown { min-width: 1ch; text-align: center; animation: tick 1s ease-out; }
@keyframes tick { 0% { transform: scale(1.35); opacity: .4; } 35% { transform: scale(1); opacity: 1; } }
.rc-impostor { color: #ff7b7e; }
.rc-crewmate { color: #63cbd2; }
.rc-mayor { color: var(--gold); }
.rc-detective { color: #a99bff; }
.rc-jester { color: #f58ec0; }
.rc-pawn { color: #86cf86; }
.big-line { font-size: 1.25rem; margin: 0; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: .8rem; }
.mini-team { list-style: none; margin: 0; padding: 0; }
.mini-team li { display: grid; grid-template-columns: 5rem 1fr; padding: .45rem 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.mini-team li:last-child { border-bottom: 0; }
.mini-team li.me { color: var(--gold); }

/* ---------- Ergebnis ---------- */
.winner-banner { font-family: var(--display); font-weight: 800; font-size: 1.5rem; padding: 14px 18px; border-radius: var(--radius); margin-bottom: 1rem; }
.winner-banner .muted { font-family: var(--body); font-size: .95rem; font-weight: 400; }
.winner-banner.team-A { background: var(--blue-soft); color: #8cc0f5; }
.winner-banner.team-B { background: var(--red-soft); color: #ff9a9c; }
.winner-banner.conflict { background: rgba(230, 162, 60, .12); color: var(--warn); font-size: 1.1rem; }
.ref-list { display: grid; gap: 6px; }
.ref-row { display: grid; grid-template-columns: 12rem 1fr auto; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.ref-team.team-A, .cs-title.team-A { color: var(--blue); font-weight: 700; }
.ref-team.team-B, .cs-title.team-B { color: var(--red); font-weight: 700; }
.ref-name { font-weight: 700; }
.ref-vote.pending { color: var(--muted); }
.ref-vote.team-A { color: #8cc0f5; font-weight: 700; }
.ref-vote.team-B { color: #ff9a9c; font-weight: 700; }
.ref-confirm { margin-top: 1.4rem; }
.team-btn { min-width: 10rem; padding: 1em 1.4em; font-size: 1.05rem; }
.team-btn.team-A { border-color: var(--blue); }
.team-btn.team-B { border-color: var(--red); }
.team-btn.team-A.chosen { background: var(--blue); color: #fff; }
.team-btn.team-B.chosen { background: var(--red); color: #fff; }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: .6rem; }
.cs-title { margin-bottom: .3rem; }
.cs-row { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: .6rem; align-items: center; padding: .3rem 0; }
.cs-val { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- Voting ---------- */
.vote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 1rem; }
.vote-card { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-deep); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.vote-card:hover { border-color: #4b7f8f; }
.vote-card.sel { border-color: var(--red); background: var(--red-soft); box-shadow: 0 0 0 1px var(--red) inset; }
.vote-name { font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.vote-status { list-style: none; margin: 0; padding: 0; }
.vote-status li { display: flex; justify-content: space-between; padding: .3rem 0; color: var(--muted); border-bottom: 1px solid var(--line); }
.vote-status li.done { color: var(--text); }
.vote-status li.done span { color: var(--ok); }

/* ---------- Wertung ---------- */
.my-score { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.my-score-num { font-family: var(--display); font-weight: 800; font-size: 4rem; line-height: 1; color: var(--gold); letter-spacing: -0.03em; }
.reasons { margin: 0; padding-left: 1.1em; }
.reveal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.reveal.team-A { border-top: 4px solid var(--blue); }
.reveal.team-B { border-top: 4px solid var(--red); }
.reveal-head { display: flex; justify-content: space-between; align-items: baseline; }
.result-tag { font-weight: 700; font-size: .9rem; padding: .2em .6em; border-radius: 5px; }
.result-tag.win { background: rgba(105, 192, 138, .18); color: #9be0b5; }
.result-tag.loss { background: var(--surface-2); color: var(--muted); }
.reveal-line { margin-bottom: 1rem; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; color: var(--muted); font-weight: 400; font-size: .8rem; padding: .3rem .4rem; border-bottom: 1px solid var(--line); }
td { padding: .45rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num, .board .rank, .board-table td:first-child, .skill-pill, .cs-val, .input.num { font-family: var(--display); font-weight: 600; }
tr.me td { color: var(--gold); }
.board-table tr.first td strong { color: var(--gold); }
.board-table td { font-size: 1rem; }

/* ---------- Elo-Stufen ---------- */
.tier-select { font-weight: 700; border-left-width: 4px; cursor: pointer; }
.tier-select option { color: var(--text); background: var(--bg-deep); }
.tier-1 { --tc: var(--t1); } .tier-2 { --tc: var(--t2); } .tier-3 { --tc: var(--t3); } .tier-4 { --tc: var(--t4); }
.tier-5 { --tc: var(--t5); } .tier-6 { --tc: var(--t6); } .tier-7 { --tc: var(--t7); }
.tier-select[class*="tier-"] { border-left-color: var(--tc); color: var(--tc); }
.skill-pill[class*="tier-"] { color: var(--tc); background: rgba(0, 0, 0, .28); min-width: 0; padding: .2em .55em; font-size: .8rem; }

/* ---------- Animation: Teams mischen ---------- */
.slot.spinning .slot-name { filter: blur(.6px); opacity: .75; }
.slot.spinning .slot-meta { visibility: hidden; }
.slot.landed { animation: land .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes land { 0% { transform: scale(.97); } 60% { transform: scale(1.025); } 100% { transform: scale(1); } }

/* ---------- Animation: Rollen-Walze ---------- */
.role-band.neutral { background: var(--paper-ink); color: var(--paper); }
.reel-frame {
  --item: 112px;
  position: relative; width: 132px; height: calc(var(--item) * 1.5);
  border-radius: 14px; background: #e6d8bb; box-shadow: inset 0 3px 8px rgba(29, 36, 39, .25), inset 0 0 0 2px rgba(29, 36, 39, .18);
  overflow: hidden;
}
.reel-frame::before, .reel-frame::after {
  content: ''; position: absolute; top: 50%; width: 0; height: 0; border: 9px solid transparent; transform: translateY(-50%); z-index: 2;
}
.reel-frame::before { left: 0; border-left-color: var(--red); }
.reel-frame::after { right: 0; border-right-color: var(--red); }
.reel-window { height: 100%; mask-image: linear-gradient(transparent 0, #000 26%, #000 74%, transparent 100%); }
.reel-strip { padding-top: calc(var(--item) * .25); transition: transform 2.4s cubic-bezier(.15, .8, .2, 1.07); will-change: transform; }
.reel-item { height: var(--item); display: flex; align-items: center; justify-content: center; }
.reel-item .role-icon { width: 76px; height: 76px; }
.reel-frame.landed { display: flex; align-items: center; justify-content: center; }
.reel-frame.landed .role-icon { width: 84px; height: 84px; color: var(--rc); }
.role-icon { display: block; }
.ic-impostor { color: var(--r-impostor); } .ic-crewmate { color: var(--r-crewmate); } .ic-mayor { color: var(--r-mayor); }
.ic-detective { color: var(--r-detective); } .ic-jester { color: var(--r-jester); } .ic-pawn { color: var(--r-pawn); }
.role-info.placeholder { padding-top: 6px; }
.ph-line { height: 14px; border-radius: 7px; background: rgba(29, 36, 39, .1); margin-bottom: 14px; animation: breathe 1s ease-in-out infinite alternate; }
.ph-line.w60 { width: 60%; height: 34px; margin-bottom: 18px; } .ph-line.w90 { width: 90%; } .ph-line.w80 { width: 80%; } .ph-line.w40 { width: 40%; }
.role-card.fresh .reel-frame.landed .role-icon { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.role-card.fresh .role-info { animation: rise .45s ease-out .1s both; }
.det-result { display: flex; align-items: center; gap: 1rem; }
.det-icon { width: 46px; height: 46px; flex: none; padding: 6px; border-radius: 10px; background: var(--paper); }
.spot-icon { width: 58px; height: 58px; margin-right: 16px; }
.flip .back.back-imp .spot-icon { color: #fff; }
@keyframes pop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Animation: Enthüllung ---------- */
.spotlight { text-align: center; padding-bottom: 30px; }
.spot-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.spot-wait { font-family: var(--display); font-weight: 600; font-size: 1.4rem; padding: 48px 0; color: var(--muted); animation: breathe 1.2s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .45; } to { opacity: 1; } }
.spot { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: rise .35s ease-out both; }
.spot-name { font-family: var(--display); font-weight: 800; font-size: 2.6rem; letter-spacing: -0.03em; line-height: 1; }
.spot.team-A .spot-name { color: #8cc0f5; }
.spot.team-B .spot-name { color: #ff9a9c; }
.spot-sub { color: var(--muted); font-size: 1rem; }
.spot.imp .spot-sub { font-family: var(--display); font-weight: 600; font-size: 1.35rem; color: var(--text); }
.flip {
  --delay: .55s;
  position: relative; width: min(420px, 100%); height: 110px; margin-top: 12px;
  transform-style: preserve-3d; animation: flipY .8s cubic-bezier(.2, .9, .3, 1.12) var(--delay) both;
}
.flip.slow { --delay: 1.5s; animation-duration: 1s; }
.flip .face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px;
  backface-visibility: hidden; font-family: var(--display); font-weight: 800; font-size: 3.2rem; letter-spacing: -0.03em;
}
.flip .front { background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(29, 36, 39, .06) 14px 28px), var(--paper); color: var(--red); }
.flip .back { background: var(--paper); transform: rotateY(180deg); }
.flip .back.rc-impostor { color: var(--r-impostor); } .flip .back.rc-crewmate { color: var(--r-crewmate); }
.flip .back.rc-mayor { color: var(--r-mayor); } .flip .back.rc-detective { color: var(--r-detective); }
.flip .back.rc-jester { color: var(--r-jester); } .flip .back.rc-pawn { color: var(--r-pawn); }
.flip .back.back-imp { background: var(--red); color: #fff; }
@keyframes flipY { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
.spot-after { min-height: 1.6em; margin-top: 10px; color: var(--muted); font-weight: 700; animation: rise .4s ease-out 1.3s both; }
.spot.imp .spot-after { animation-delay: 2.4s; color: var(--text); font-size: 1.1rem; }
.unknown { display: inline-block; min-width: 1.6em; text-align: center; border-radius: 4px; background: var(--surface-2); color: var(--muted); font-weight: 700; }
tr.just td { animation: rowflash 1.6s ease-out var(--rd, 1.4s) both; }
tr.just td.role-cell > * { animation: rise .35s ease-out var(--rd, 1.4s) both; }
@keyframes rowflash { from { background: rgba(212, 167, 90, .22); } to { background: transparent; } }
.my-score.fresh { animation: rise .5s ease-out both; }
.fresh-board tbody tr { animation: rise .4s ease-out both; animation-delay: calc(var(--i) * 70ms + .3s); }

/* ---------- Dialoge ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(5, 12, 15, .68); backdrop-filter: blur(3px); animation: fade .16s ease-out;
}
.modal-backdrop.closing { animation: fade .16s ease-in reverse forwards; }
.modal {
  width: min(480px, 100%); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--gold);
  border-radius: 14px; padding: 24px 26px 22px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
  animation: modal-in .2s cubic-bezier(.2, 1.2, .4, 1);
}
.modal h2 { font-size: 1.4rem; margin-bottom: .35em; }
.modal-text { color: var(--muted); margin-bottom: 1.2rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; }
.modal .input-row { margin-top: .2rem; }
.link-input { font-family: var(--display); font-weight: 600; letter-spacing: .01em; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger:hover:not(:disabled) { background: #ee5a5e; border-color: #ee5a5e; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Leere Plätze (Testmodus) ---------- */
.slot.empty { color: var(--muted); font-weight: 400; font-style: italic; justify-content: center; background: transparent; border-style: dashed; }

/* ---------- Toasts ---------- */
#toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 50; pointer-events: none; }
.toast { background: var(--surface-2); border: 1px solid var(--line); padding: .7em 1.1em; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transition: opacity .4s; }
.toast.error { border-color: var(--red); }
.toast.out { opacity: 0; }

/* ---------- Schmalere Fenster ---------- */
@media (max-width: 1100px) {
  .body { grid-template-columns: 1fr; }
  .side { position: static; }
  .top-inner { grid-template-columns: auto auto; }
  .stepper { grid-column: 1 / -1; order: 3; justify-content: flex-start; overflow-x: auto; }
  .reveal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .start-grid, .cs-grid, .panel.split { grid-template-columns: 1fr; }
  .body, .top-inner { padding-left: 16px; padding-right: 16px; }
  .lane-row { grid-template-columns: 1fr; gap: .4rem; }
  .board-row { grid-template-columns: 1fr 4.5rem 1fr; }
  .slot { padding: 12px; font-size: .95rem; }
  .ref-row { grid-template-columns: 1fr; gap: .1rem; }
  .role-main { grid-template-columns: 1fr; justify-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .flip { transform: rotateY(180deg); }
}