/* =====================================================================
   SERVEREN — designsystem
   ===================================================================== */

:root{
  --felt:#143B2F; --felt-deep:#0B221B; --felt-line:#1E5040;
  --chalk:#F4EFE2; --chalk-dim:#CFC7B4;
  --brass:#E3A63C; --pennant:#DC4B34; --voice:#3D9E60;
  --ink:#17211D; --ink-soft:#5A6660;
  --display:'Anton',Impact,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --r:14px; --r-s:8px;
  --shadow:0 18px 40px -18px rgba(0,0,0,.65);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--body);line-height:1.55;color:var(--chalk);
  background-color:var(--felt);
  background-image:
    repeating-linear-gradient(58deg,rgba(255,255,255,.018) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(-58deg,rgba(0,0,0,.05) 0 2px,transparent 2px 5px);
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font:inherit}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:4px}
.wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto}
[hidden]{display:none !important}

/* ---------- avatar ---------- */
.av{
  position:relative;flex:none;
  width:var(--size,34px);height:var(--size,34px);
  border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--tint,#3E5A50);color:var(--felt-deep);
  font-family:var(--display);font-size:calc(var(--size,34px)*.42);
  user-select:none;
}
.av__letter{padding-top:.12em}
.av__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av--ring{box-shadow:0 0 0 2px var(--felt)}

/* ---------- logo ---------- */
.mark{width:40px;height:40px;flex:none}
.mark__badge{fill:var(--voice)}
.brand.is-quiet .mark__badge{fill:#4A5B54}
.brand.is-quiet .mark__wave{opacity:.5}
.mark__ring{animation:ping 2.4s ease-out infinite;transform-origin:76px 25px}
.brand.is-quiet .mark__ring{display:none}
@keyframes ping{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.5);opacity:0}}

/* ---------- knapper ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.6rem;border-radius:var(--r-s);
  font-weight:650;font-size:.98rem;transition:transform .12s,box-shadow .12s;
}
.btn--primary{background:var(--brass);color:var(--felt-deep);box-shadow:0 4px 0 #A9761F}
.btn--primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 #A9761F}
.btn--primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #A9761F}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn--ghost{border:1px solid var(--felt-line);color:var(--chalk)}
.btn--ghost:hover:not(:disabled){border-color:var(--brass);color:var(--brass)}
.btn--danger{border:1px solid var(--felt-line);color:var(--chalk-dim)}
.btn--danger:hover{border-color:var(--pennant);color:var(--pennant)}
.btn--block{width:100%}
.btn--sm{padding:.5rem 1rem;font-size:.88rem}

/* ---------- felter ---------- */
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--chalk-dim);
  margin-bottom:.4rem}
.field input{
  width:100%;padding:.8rem .95rem;border-radius:var(--r-s);
  background:var(--felt);border:1px solid var(--felt-line);
  color:var(--chalk);font-size:1rem;transition:border-color .15s;
}
.field input:focus{border-color:var(--brass);outline:none}
.field small{display:block;margin-top:.4rem;font-size:.78rem;color:var(--ink-soft)}

.msg{
  padding:.7rem .9rem;border-radius:var(--r-s);font-size:.88rem;margin-bottom:1.1rem;
  border-left:3px solid var(--pennant);background:rgba(220,75,52,.12);color:#F3B5A8;
}

.panel{background:var(--felt-deep);border:1px solid var(--felt-line);
  border-radius:var(--r);padding:1.5rem;box-shadow:var(--shadow)}

/* =========== LOGIN =========== */
.gate{min-height:100vh;display:grid;place-items:center;padding:2rem 1.25rem}
.gate__card{width:min(420px,100%)}
.gate__brand{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin-bottom:2rem}
.gate__brand .mark{width:64px;height:64px}
.gate__name{font-family:var(--display);font-size:2.2rem;letter-spacing:.08em}
.gate__tag{color:var(--chalk-dim);font-size:.95rem;text-align:center;margin-top:-.5rem}
.tabs{display:flex;gap:.4rem;margin-bottom:1.5rem;background:rgba(0,0,0,.25);
  padding:.3rem;border-radius:var(--r-s)}
.tabs button{flex:1;padding:.6rem;border-radius:6px;font-size:.92rem;font-weight:600;
  color:var(--chalk-dim);transition:.15s}
.tabs button[aria-selected="true"]{background:var(--felt);color:var(--chalk)}
.gate__foot{margin-top:1.3rem;text-align:center;font-size:.82rem;color:var(--ink-soft)}

/* =========== TOPBAR =========== */
.topbar{position:sticky;top:0;z-index:50;background:rgba(11,34,27,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--felt-line)}
.topbar__in{display:flex;align-items:center;gap:1.5rem;height:72px}
.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.brand__name{font-family:var(--display);font-size:1.45rem;letter-spacing:.07em}
.me{display:flex;align-items:center;gap:.6rem;padding:.3rem .85rem .3rem .3rem;
  border:1px solid var(--felt-line);border-radius:99px;background:rgba(0,0,0,.22)}
.me__name{font-size:.88rem;font-weight:600}
.me__out{font-size:.78rem;color:var(--ink-soft)}
.me__out:hover{color:var(--pennant)}

/* =========== FORSIDE =========== */
.hero{padding:3rem 0 2rem}
.eyebrow{font-family:var(--mono);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass);display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--brass),transparent)}
h1{font-family:var(--display);font-size:clamp(2.5rem,6vw,4rem);line-height:.94;text-transform:uppercase}
h1 em{font-style:normal;color:var(--brass);display:block}
.lead{margin-top:1.2rem;font-size:1.05rem;color:var(--chalk-dim);max-width:46ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem;align-items:center}
.online-now{display:flex;align-items:center;gap:.85rem;margin-top:2rem;min-height:34px}
.stack{display:flex}
.stack .av{margin-left:-10px}
.stack .av:first-child{margin-left:0}
.online-now small{font-size:.86rem;color:var(--chalk-dim)}
.online-now b{color:var(--chalk)}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:start}

/* ---------- vælg sværhedsgrad ---------- */
.modes{display:grid;gap:.7rem;margin:1.2rem 0}
.mode{
  text-align:left;padding:1rem 1.1rem;border-radius:var(--r-s);
  border:1px solid var(--felt-line);background:var(--felt);transition:.15s;
}
.mode:hover{border-color:var(--brass)}
.mode[aria-pressed="true"]{border-color:var(--brass);background:rgba(227,166,60,.12)}
.mode__name{font-family:var(--display);font-size:1.1rem;letter-spacing:.06em}
.mode[aria-pressed="true"] .mode__name{color:var(--brass)}
.mode__blurb{font-size:.85rem;color:var(--chalk-dim);margin-top:.15rem}

/* ---------- åbne lobbyer ---------- */
.board__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1rem}
.board__title{font-family:var(--display);font-size:1.05rem;letter-spacing:.09em;text-transform:uppercase}
.live{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pennant);display:inline-flex;align-items:center;gap:.4rem}
.live i{width:7px;height:7px;border-radius:50%;background:var(--pennant);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

.lobbies{display:flex;flex-direction:column;gap:.7rem}
.lobby{
  position:relative;background:var(--chalk);color:var(--ink);border-radius:var(--r-s);
  padding:.9rem 1rem .9rem 1.15rem;display:grid;grid-template-columns:1fr auto;
  gap:.6rem 1rem;align-items:center;transition:transform .14s;
}
.lobby:hover{transform:translateX(4px)}
.lobby::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;
  border-radius:0 4px 4px 0;background:var(--brass)}
.lobby__game{font-weight:700;font-size:1rem}
.lobby__meta{font-size:.83rem;color:var(--ink-soft);margin-top:.1rem}
.lobby__right{display:flex;align-items:center;gap:.9rem}
.lobby__who{display:flex}
.lobby__who .av{margin-left:-8px;box-shadow:0 0 0 2px var(--chalk)}
.lobby__who .av:first-child{margin-left:0}
.seats{font-family:var(--mono);font-size:.9rem;color:var(--ink)}
.seats span{color:var(--ink-soft)}
.join{padding:.45rem 1rem;border-radius:6px;font-size:.85rem;font-weight:650;
  background:var(--ink);color:var(--chalk);transition:.15s}
.join:hover{background:var(--pennant)}

.empty{text-align:center;padding:2rem 1.25rem;border:1px dashed var(--felt-line);border-radius:var(--r-s)}
.empty__title{font-weight:650;font-size:.98rem;margin-bottom:.35rem}
.empty__body{font-size:.86rem;color:var(--chalk-dim);max-width:34ch;margin-inline:auto}

.code-row{display:flex;gap:.6rem;margin-top:1rem}
.code-row input{
  flex:1;text-transform:uppercase;letter-spacing:.28em;font-family:var(--mono);
  font-size:1.1rem;text-align:center;padding:.7rem;border-radius:var(--r-s);
  background:var(--felt);border:1px solid var(--felt-line);color:var(--chalk);
}
.code-row input:focus{border-color:var(--brass);outline:none}

/* =========== LOBBYRUM =========== */
.room{padding:2.5rem 0}
.room__head{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end;
  justify-content:space-between;margin-bottom:2rem}
.room__code{font-family:var(--display);font-size:clamp(2.5rem,8vw,4rem);
  letter-spacing:.2em;color:var(--brass);line-height:1}
.room__label{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chalk-dim);margin-bottom:.3rem}
.room__mode{font-size:.9rem;color:var(--chalk-dim);margin-top:.5rem}
.room__actions{display:flex;gap:.7rem;flex-wrap:wrap}

.seatgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.seat{
  background:var(--felt-deep);border:1px solid var(--felt-line);border-radius:var(--r);
  padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;
}
.seat--host{border-color:var(--brass)}
.seat__name{font-weight:650;font-size:.95rem}
.seat__tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass)}
.seat--empty{border-style:dashed;opacity:.4}
.seat--empty .seat__name{color:var(--chalk-dim);font-weight:400;font-size:.85rem}

/* =========== TERNINGEKAST =========== */
.rolls{display:flex;flex-direction:column;gap:1.2rem;margin-top:1.5rem}
.rollrow__label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chalk-dim);margin-bottom:.6rem}
.dice{display:flex;flex-wrap:wrap;gap:.8rem}
.die{
  display:flex;align-items:center;gap:.6rem;padding:.5rem .9rem .5rem .5rem;
  background:var(--felt-deep);border:1px solid var(--felt-line);border-radius:99px;
}
.die__value{
  width:34px;height:34px;border-radius:8px;background:var(--chalk);color:var(--ink);
  font-family:var(--display);font-size:1.2rem;display:grid;place-items:center;padding-top:2px;
}
.die__name{font-size:.88rem;font-weight:600}

/* =========== SPILLEPLADEN =========== */
.turnbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  background:var(--felt-deep);border:1px solid var(--felt-line);
  border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:1.5rem;
}
.turnbar__who{display:flex;align-items:center;gap:.7rem;font-weight:650}
.turnbar__label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chalk-dim)}
.turnbar__order{display:flex;gap:.4rem;margin-left:auto;align-items:center}
.turnbar__order .av{opacity:.35}
.turnbar__order .av.is-turn{opacity:1;box-shadow:0 0 0 2px var(--brass)}

.tablegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem}

.champcard{
  background:var(--chalk);color:var(--ink);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  border:2px solid transparent;
}
.champcard.is-turn{border-color:var(--brass);box-shadow:0 0 0 4px rgba(227,166,60,.2)}
.champcard.is-out{opacity:.45;filter:grayscale(1)}
.champcard__art{aspect-ratio:4/3;background:var(--felt);position:relative;overflow:hidden}
.champcard__art img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.champcard__champ{
  position:absolute;left:0;right:0;bottom:0;padding:.9rem .8rem .5rem;
  background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;
}
.champcard__champname{font-family:var(--display);font-size:1.05rem;letter-spacing:.03em;line-height:1.1}
.champcard__champtitle{font-size:.72rem;opacity:.75;margin-top:.1rem}

/* Dit eget kort. Serveren har aldrig sendt hvad der står under. */
.champcard--mine .champcard__art{
  display:grid;place-items:center;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px),
    var(--felt-deep);
}
.mystery{text-align:center;padding:1rem}
.mystery__q{font-family:var(--display);font-size:3rem;color:var(--brass);line-height:1}
.mystery__text{font-size:.78rem;color:var(--chalk-dim);margin-top:.3rem;max-width:20ch}

.champcard__foot{
  padding:.7rem .8rem;display:flex;align-items:center;gap:.55rem;
  border-top:1px solid #E3DCC9;
}
.champcard__name{font-weight:700;font-size:.92rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lives{display:flex;gap:.15rem}
.lives i{width:9px;height:9px;border-radius:50%;background:var(--pennant)}
.lives i.spent{background:#D6CFBD}
.champcard__out{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(11,34,27,.55);font-family:var(--display);
  font-size:1.4rem;letter-spacing:.1em;color:var(--chalk);
}

footer{border-top:1px solid var(--felt-line);padding:2rem 0;margin-top:3rem;background:var(--felt-deep)}
.foot{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.85rem;color:var(--chalk-dim)}
.foot span.dot{color:var(--voice)}

@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:2rem}
  .me__name{display:none}
  .turnbar__order{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* =====================================================================
   SPILLEPLADEN — anden runde
   ===================================================================== */

.gamewrap{display:grid;grid-template-columns:1fr 380px;gap:1.5rem;align-items:start}
@media (max-width:1000px){.gamewrap{grid-template-columns:1fr}}

/* ---------- hjerter ---------- */
.hearts{display:flex;gap:.2rem;align-items:center}
.heart{width:16px;height:16px;flex:none}
.heart path{fill:var(--pennant)}
.heart.spent path{fill:none;stroke:#B9B1A0;stroke-width:2.5}
.champcard--mine .heart.spent path{stroke:#3E5A50}

/* ---------- spillerkort ---------- */
.champcard__foot{padding:.65rem .75rem;display:flex;align-items:center;gap:.5rem;
  border-top:1px solid #E3DCC9;background:var(--chalk)}
.champcard--mine .champcard__foot{background:var(--felt-deep);border-top-color:var(--felt-line)}
.champcard--mine .champcard__name{color:var(--chalk)}
.champcard__pts{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);
  display:flex;align-items:center;gap:.25rem}
.champcard--mine .champcard__pts{color:var(--brass)}
.champcard__pts b{font-weight:500}

/* ---------- powerup-bjælken ---------- */
.powerbar{
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
  background:var(--felt-deep);border:1px solid var(--felt-line);
  border-radius:var(--r);padding:.9rem 1.1rem;margin-bottom:1.2rem;
}
.powerbar__points{
  display:flex;align-items:center;gap:.5rem;padding-right:1rem;
  border-right:1px solid var(--felt-line);margin-right:.3rem;
}
.powerbar__num{font-family:var(--display);font-size:1.6rem;color:var(--brass);line-height:1}
.powerbar__label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chalk-dim);line-height:1.2}

.pw{
  display:flex;align-items:center;gap:.6rem;padding:.5rem .85rem;
  border:1px solid var(--felt-line);border-radius:var(--r-s);
  background:var(--felt);transition:.15s;text-align:left;
}
.pw:hover:not(:disabled){border-color:var(--brass)}
.pw:disabled{opacity:.4;cursor:not-allowed}
.pw__name{font-weight:650;font-size:.9rem}
.pw__cost{font-family:var(--mono);font-size:.72rem;color:var(--brass)}
.pw__uses{font-family:var(--mono);font-size:.68rem;color:var(--chalk-dim)}
.pw--locked{border-style:dashed}
.pw--locked .pw__cost{color:var(--ink-soft)}

/* ---------- chat ---------- */
.chat{
  background:var(--felt-deep);border:1px solid var(--felt-line);
  border-radius:var(--r);display:flex;flex-direction:column;
  height:min(620px,72vh);overflow:hidden;
}
.chat__head{padding:.9rem 1.1rem;border-bottom:1px solid var(--felt-line);
  display:flex;align-items:center;justify-content:space-between}
.chat__log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.chat__log::-webkit-scrollbar{width:8px}
.chat__log::-webkit-scrollbar-thumb{background:var(--felt-line);border-radius:4px}

.bubble{border-radius:10px;padding:.6rem .8rem;font-size:.88rem;max-width:92%}
.bubble__who{font-size:.72rem;color:var(--chalk-dim);margin-bottom:.15rem}
.bubble--q{background:var(--felt);border:1px solid var(--felt-line);align-self:flex-start}
.bubble--yes{background:rgba(61,158,96,.16);border:1px solid rgba(61,158,96,.5);align-self:flex-end}
.bubble--no{background:rgba(220,75,52,.14);border:1px solid rgba(220,75,52,.45);align-self:flex-end}
.bubble--sys{background:transparent;border:1px dashed var(--felt-line);
  align-self:center;text-align:center;color:var(--chalk-dim);font-size:.82rem;max-width:100%}
.bubble--win{border-color:var(--brass);color:var(--brass);font-weight:650}
.verdict{font-family:var(--display);letter-spacing:.08em;font-size:.9rem}
.verdict--yes{color:var(--voice)}
.verdict--no{color:var(--pennant)}

.chat__foot{border-top:1px solid var(--felt-line);padding:.9rem}
.askrow{display:flex;gap:.5rem}
.askrow input{flex:1;padding:.7rem .85rem;border-radius:var(--r-s);background:var(--felt);
  border:1px solid var(--felt-line);color:var(--chalk);font-size:.92rem}
.askrow input:focus{border-color:var(--brass);outline:none}
.askrow input:disabled{opacity:.5}

.answerrow{display:flex;gap:.6rem}
.answerrow button{flex:1;padding:.85rem;border-radius:var(--r-s);
  font-family:var(--display);font-size:1.1rem;letter-spacing:.08em}
.btn-yes{background:var(--voice);color:#062017}
.btn-no{background:var(--pennant);color:#2A0A05}
.answerrow button:hover{filter:brightness(1.12)}
.asking{font-size:.9rem;color:var(--chalk-dim);margin-bottom:.7rem;text-align:center}
.asking b{color:var(--chalk)}

.chat__hint{font-size:.78rem;color:var(--ink-soft);margin-top:.5rem;text-align:center}

/* ---------- noter ---------- */
.notes{margin-top:1.2rem}
.note{display:flex;gap:.5rem;align-items:flex-start;padding:.45rem .6rem;
  border-radius:6px;font-size:.84rem;background:var(--felt-deep);margin-bottom:.35rem}
.note__mark{font-family:var(--display);font-size:.8rem;flex:none;width:1.2rem}
.note--yes .note__mark{color:var(--voice)}
.note--no .note__mark{color:var(--pennant)}
.note--no{opacity:.65}

/* ---------- gæt ---------- */
.guessbox{margin-top:.7rem;position:relative}
.guessbox input{width:100%;padding:.7rem .85rem;border-radius:var(--r-s);background:var(--felt);
  border:1px solid var(--felt-line);color:var(--chalk);font-size:.92rem}
.guessbox input:focus{border-color:var(--brass);outline:none}
.suggest{position:absolute;left:0;right:0;bottom:100%;margin-bottom:.35rem;z-index:20;
  background:var(--felt-deep);border:1px solid var(--brass);border-radius:var(--r-s);
  max-height:240px;overflow-y:auto}
.suggest button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.5rem .7rem;
  text-align:left;font-size:.88rem}
.suggest button:hover{background:var(--felt)}
.suggest img{width:28px;height:28px;border-radius:6px}

/* ---------- slutskærm ---------- */
.endcard{text-align:center;padding:2rem;border:1px solid var(--brass);
  border-radius:var(--r);background:rgba(227,166,60,.08);margin-bottom:1.5rem}
.endcard__title{font-family:var(--display);font-size:2rem;color:var(--brass);letter-spacing:.06em}
.endcard__sub{color:var(--chalk-dim);margin-top:.3rem}

/* =====================================================================
   TURBJÆLKEN — kun ansigter, ingen skæv tekst
   ===================================================================== */
.turnbar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  background:var(--felt-deep);border:1px solid var(--felt-line);
  border-radius:99px;padding:.6rem .9rem;margin-bottom:1.2rem}
.turnbar .av{opacity:.3;transition:.2s;cursor:default}
.turnbar .av.is-turn{opacity:1;box-shadow:0 0 0 3px var(--brass),0 0 18px rgba(227,166,60,.5)}
.turnbar .av.is-out{opacity:.12;filter:grayscale(1)}
.turnbar__now{margin-left:auto;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-dim)}
.turnbar__now b{color:var(--brass);font-weight:500}

/* ---------- powerups med grund ---------- */
.pw{flex-direction:column;align-items:flex-start;gap:.15rem;min-width:130px}
.pw__why{font-size:.68rem;color:var(--ink-soft);line-height:1.3}
.pw:not(:disabled) .pw__why{color:var(--voice)}

/* ---------- boten ---------- */
.bubble--bot{background:rgba(227,166,60,.12);border:1px solid rgba(227,166,60,.45);
  align-self:center;color:var(--brass);font-size:.83rem;max-width:100%;text-align:center}
.reading{font-family:var(--mono);font-size:.72rem;color:var(--chalk-dim);
  margin-top:.3rem;font-style:normal}
.reading b{color:var(--brass);font-weight:500}
.corrected{font-size:.74rem;color:var(--pennant);margin-top:.25rem}

/* =====================================================================
   CHAMPION-OVERSIGTEN
   ===================================================================== */
.sheet{position:fixed;inset:0;z-index:100;background:rgba(6,18,14,.94);
  backdrop-filter:blur(6px);display:flex;flex-direction:column}
.sheet__head{padding:1.2rem 1.5rem;border-bottom:1px solid var(--felt-line);
  display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.sheet__title{font-family:var(--display);font-size:1.3rem;letter-spacing:.06em;text-transform:uppercase}
.sheet__search{flex:1;min-width:200px;max-width:420px;padding:.65rem .9rem;border-radius:var(--r-s);
  background:var(--felt);border:1px solid var(--felt-line);color:var(--chalk);font-size:.95rem}
.sheet__search:focus{border-color:var(--brass);outline:none}
.sheet__count{font-family:var(--mono);font-size:.82rem;color:var(--brass)}
.sheet__body{flex:1;overflow-y:auto;padding:1.2rem 1.5rem 3rem}
.sheet__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:.6rem}
.sheet__hint{font-size:.82rem;color:var(--chalk-dim);width:100%;margin-top:-.3rem}

.cham{position:relative;border-radius:10px;overflow:hidden;background:var(--felt-deep);
  border:1px solid var(--felt-line);cursor:pointer;transition:.15s}
.cham:hover{border-color:var(--brass)}
.cham img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.cham__name{font-size:.7rem;padding:.3rem .25rem;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Krydset over dem det ikke kan være */
.cham.is-out{opacity:.3}
.cham.is-out img{filter:grayscale(1)}
.cham.is-out::after{
  content:"";position:absolute;left:6%;right:6%;top:6%;bottom:26%;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--pennant) calc(50% - 1.5px), var(--pennant) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(to bottom left,  transparent calc(50% - 1.5px), var(--pennant) calc(50% - 1.5px), var(--pennant) calc(50% + 1.5px), transparent calc(50% + 1.5px));
  pointer-events:none;
}
.cham.is-manual::after{opacity:.55}

.sheetbtn{position:relative}
.sheetbtn__badge{position:absolute;top:-6px;right:-6px;background:var(--pennant);
  color:#fff;font-family:var(--mono);font-size:.62rem;padding:.1rem .35rem;border-radius:99px}

/* =====================================================================
   TERNINGERNE
   ---------------------------------------------------------------------
   Rigtige kuber i 3D, ikke billeder. Seks flader med prikker, og en
   tumlen der ender på præcis det tal serveren har slået. Terningen
   lyver ikke — den viser bare resultatet på den lange måde.
   ===================================================================== */

.diceover{
  position:fixed;inset:0;z-index:120;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  background:radial-gradient(circle at 50% 40%, rgba(11,34,27,.72), rgba(6,18,14,.94));
  backdrop-filter:blur(3px);
  animation:overIn .35s ease-out;
}
@keyframes overIn{from{opacity:0}to{opacity:1}}
.diceover.is-leaving{animation:overOut .5s ease-in forwards}
@keyframes overOut{to{opacity:0;transform:scale(1.04)}}

.diceover__label{
  font-family:var(--display);font-size:clamp(1.4rem,4vw,2.2rem);
  letter-spacing:.14em;text-transform:uppercase;color:var(--chalk);
}
.diceover__sub{font-family:var(--mono);font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin-top:-1.4rem}

.dicerow{display:flex;flex-wrap:wrap;gap:2.2rem;justify-content:center;
  perspective:900px;padding:1rem}

.dieslot{display:flex;flex-direction:column;align-items:center;gap:.7rem;
  transition:opacity .4s}
.dieslot.is-done{opacity:.35}
.dieslot__name{font-size:.86rem;font-weight:650;color:var(--chalk);
  display:flex;align-items:center;gap:.45rem}

/* --- selve kuben --- */
.die3d{
  width:64px;height:64px;position:relative;
  transform-style:preserve-3d;
  transition:transform 1.5s cubic-bezier(.18,.9,.25,1);
}
.die3d.is-rolling{animation:tumble .55s linear infinite}
@keyframes tumble{
  from{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
  to{transform:rotateX(360deg) rotateY(720deg) rotateZ(360deg)}
}

.die3d .face{
  position:absolute;inset:0;
  background:#FBFAF6;border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.09), inset 0 -6px 12px rgba(0,0,0,.07);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:9px;
}
.die3d .face i{
  width:11px;height:11px;border-radius:50%;background:#15130F;
  align-self:center;justify-self:center;
  box-shadow:inset 0 -1px 1px rgba(255,255,255,.18);
}
/* Fladerne stilles op om et centrum 32px ude */
.f1{transform:translateZ(32px)}
.f6{transform:rotateY(180deg) translateZ(32px)}
.f3{transform:rotateY(90deg)  translateZ(32px)}
.f4{transform:rotateY(-90deg) translateZ(32px)}
.f2{transform:rotateX(90deg)  translateZ(32px)}
.f5{transform:rotateX(-90deg) translateZ(32px)}

.dieslot__value{
  font-family:var(--mono);font-size:.9rem;color:var(--brass);
  opacity:0;transition:opacity .3s;
}
.dieslot.is-settled .dieslot__value{opacity:1}

/* --- den endelige rækkefølge --- */
.diceorder{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  opacity:0;transform:translateY(10px);transition:.5s}
.diceorder.is-in{opacity:1;transform:none}
.diceorder__chip{display:flex;align-items:center;gap:.5rem;
  background:var(--felt-deep);border:1px solid var(--felt-line);
  border-radius:99px;padding:.35rem .9rem .35rem .35rem;font-size:.86rem}
.diceorder__chip:first-child{border-color:var(--brass);color:var(--brass)}
.diceorder__no{font-family:var(--mono);font-size:.72rem;color:var(--chalk-dim)}

/* =====================================================================
   POWERUP-EFFEKT
   ===================================================================== */

.fx{
  position:fixed;inset:0;z-index:130;pointer-events:none;
  display:grid;place-items:center;
}
.fx__card{
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  padding:1.6rem 2.4rem;border-radius:var(--r);
  background:rgba(11,34,27,.93);border:2px solid var(--brass);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
  max-width:min(420px,90vw);text-align:center;
}
.fx__name{font-family:var(--display);font-size:2.2rem;letter-spacing:.12em;
  text-transform:uppercase;line-height:1}
.fx__text{font-size:.9rem;color:var(--chalk-dim)}

/* Skip: et stempel der slår ned */
.fx--skip .fx__card{border-color:var(--pennant);animation:stamp .5s cubic-bezier(.2,1.6,.4,1)}
.fx--skip .fx__name{color:var(--pennant)}
@keyframes stamp{
  0%{transform:scale(2.6) rotate(-14deg);opacity:0}
  60%{transform:scale(.94) rotate(-4deg);opacity:1}
  100%{transform:scale(1) rotate(-4deg);opacity:1}
}

/* GC: portrætterne ruller forbi og lander på en ny champion */
.fx--gc .fx__card{border-color:#C9A0DC;animation:gcIn .45s cubic-bezier(.2,1.4,.4,1)}
.fx--gc .fx__name{color:#C9A0DC}
@keyframes gcIn{
  0%{transform:scale(.7) rotate(-3deg);opacity:0}
  100%{transform:none;opacity:1}
}

.reel{
  width:150px;height:150px;border-radius:12px;overflow:hidden;position:relative;
  background:var(--felt-deep);box-shadow:inset 0 0 0 2px rgba(201,160,220,.55);
}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel.is-spinning img{animation:reelBlur .09s steps(1) infinite}
@keyframes reelBlur{
  0%{filter:brightness(1.15) saturate(.7)}
  50%{filter:brightness(.75) saturate(1.3)}
}
.reel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 40%, rgba(201,160,220,.28));
  opacity:0;transition:opacity .3s;
}
.reel.is-landed::after{opacity:1}
.reel.is-landed{animation:reelLand .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes reelLand{
  0%{transform:scale(1.14)}
  100%{transform:scale(1)}
}
.reel__q{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-size:4rem;color:#C9A0DC;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px)}
.reel__name{
  position:absolute;left:0;right:0;bottom:0;padding:1.2rem .5rem .4rem;
  background:linear-gradient(transparent,rgba(0,0,0,.88));color:#fff;
  font-family:var(--display);font-size:1rem;letter-spacing:.04em;text-align:center;
  opacity:0;transition:opacity .3s;
}
.reel.is-landed .reel__name{opacity:1}

/* Kortet der bliver ramt, lyser op */
.champcard.is-target{animation:targetFlash 1.4s ease-out}
@keyframes targetFlash{
  0%,100%{box-shadow:none}
  30%{box-shadow:0 0 0 4px rgba(201,160,220,.85),0 0 34px rgba(201,160,220,.55)}
}

.fx.is-leaving{animation:fxOut .45s ease-in forwards}
@keyframes fxOut{to{opacity:0;transform:scale(.96)}}

/* Kortene ryster når nogen får en ny champion */
.champcard.is-rerolled{animation:cardShake .6s ease-out}
@keyframes cardShake{
  0%,100%{transform:none}
  20%{transform:translateX(-7px) rotate(-1.5deg)}
  45%{transform:translateX(6px) rotate(1.5deg)}
  70%{transform:translateX(-3px)}
}

/* =====================================================================
   NÅR NOGEN MISTER ET LIV
   ===================================================================== */

.break{
  position:fixed;top:50%;right:2.5rem;transform:translateY(-50%);
  z-index:125;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
@media (max-width:900px){
  .break{right:50%;transform:translate(50%,-50%)}
}
.break__who{
  font-family:var(--display);font-size:1.1rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--chalk);
  background:rgba(11,34,27,.9);border:1px solid var(--pennant);
  padding:.4rem 1rem;border-radius:99px;white-space:nowrap;
  animation:whoIn .4s ease-out;
}
@keyframes whoIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.break__heart{width:clamp(120px,20vw,190px);height:auto;overflow:visible}
.break__heart path{fill:var(--pennant);stroke:#7A1F12;stroke-width:1.5}

/* Hjertet knækker: to halvdele der falder hver sin vej */
.break__half{animation:none;transform-origin:50% 40%}
.break__half--l{animation:crackL 1.5s cubic-bezier(.4,0,.7,1) forwards}
.break__half--r{animation:crackR 1.5s cubic-bezier(.4,0,.7,1) forwards}
@keyframes crackL{
  0%{transform:none;opacity:1}
  12%{transform:translateX(-1px) rotate(-2deg)}
  100%{transform:translate(-26px,42px) rotate(-24deg);opacity:0}
}
@keyframes crackR{
  0%{transform:none;opacity:1}
  12%{transform:translateX(1px) rotate(2deg)}
  100%{transform:translate(26px,46px) rotate(22deg);opacity:0}
}
.break__pulse{animation:breakPulse .45s ease-out}
@keyframes breakPulse{
  0%{transform:scale(1)}
  30%{transform:scale(1.22)}
  100%{transform:scale(1)}
}
.break.is-leaving{animation:fxOut .4s ease-in forwards}

@media (prefers-reduced-motion:reduce){
  .die3d,.die3d.is-rolling,.fx__card,.break__half{animation:none !important;transition:none !important}
  .dieslot__value{opacity:1}
}

/* =====================================================================
   PROFILBILLEDE
   ===================================================================== */

.avatarbox{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1.2rem;padding:2rem 1.5rem;
}
.avatarprev{
  width:min(240px,60vw);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--felt-deep);border:2px dashed var(--felt-line);
  display:grid;place-items:center;position:relative;
}
.avatarprev.has-image{border-style:solid;border-color:var(--brass)}
.avatarprev img{width:100%;height:100%;object-fit:cover;display:block}
.avatarprev__empty{font-size:.88rem;color:var(--ink-soft)}
.avatarhint{font-size:.88rem;color:var(--chalk-dim);max-width:34ch;text-align:center}
.avatarbtns{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
#avatarMsg{max-width:34ch}

/* Kameraikonet på din egen avatar i topbaren */
.av--editable{cursor:pointer}
.av--editable::after{
  content:"";position:absolute;inset:0;
  background:rgba(11,34,27,.72) center/46% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4EFE2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
  opacity:0;transition:opacity .15s;
}
.av--editable:hover::after,.av--editable:focus-visible::after{opacity:1}

/* ---------- Discord ---------- */
.btn--discord{
  background:#5865F2;color:#fff;box-shadow:0 4px 0 #3C45A5;
  margin-bottom:1rem;
}
.btn--discord:hover{transform:translateY(-2px);box-shadow:0 6px 0 #3C45A5}
.btn--discord:active{transform:translateY(2px);box-shadow:0 2px 0 #3C45A5}
.btn--discord svg{flex:none}

.pwtoggle{
  display:block;width:100%;text-align:center;font-size:.82rem;
  color:var(--ink-soft);padding:.4rem 0 1rem;
}
.pwtoggle:hover{color:var(--chalk-dim);text-decoration:underline}
#pwBlock.is-hidden{display:none}

/* =====================================================================
   KATEGORIER OG SPIL
   ===================================================================== */

.nav{display:flex;gap:1.5rem;font-size:.92rem;font-weight:500}
.nav a{color:var(--chalk-dim);padding:.35rem 0;border-bottom:2px solid transparent;transition:.15s}
.nav a:hover{color:var(--chalk)}
.nav a.is-active{color:var(--chalk);border-bottom-color:var(--brass)}
@media (max-width:760px){.nav{display:none}}

.crumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--chalk-dim);padding:1.6rem 0 .8rem;display:flex;gap:.5rem;align-items:center}
.crumb a:hover{color:var(--brass)}
.crumb b{color:var(--chalk);font-weight:500}
.crumb--onart{padding:0 0 1rem;position:relative;z-index:2}

.cathead{margin-bottom:2rem}
.cathead h1{font-size:clamp(2.2rem,6vw,3.4rem)}

/* ---------- kategorikort på forsiden ---------- */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.1rem}
.cat{
  position:relative;display:block;border-radius:var(--r);overflow:hidden;
  background:var(--felt-deep);border:1px solid var(--felt-line);
  padding:1.6rem 1.4rem;min-height:170px;transition:.18s;
}
.cat:hover{transform:translateY(-4px);border-color:var(--accent,var(--brass));box-shadow:var(--shadow)}
.cat::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--accent,var(--brass));
}
.cat__name{font-family:var(--display);font-size:1.8rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent,var(--brass))}
.cat__full{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--chalk-dim);margin-top:.2rem}
.cat__blurb{font-size:.9rem;color:var(--chalk-dim);margin-top:.8rem;max-width:34ch}
.cat__count{position:absolute;right:1.4rem;bottom:1.3rem;font-family:var(--mono);
  font-size:.78rem;color:var(--chalk-dim)}
.cat--soon{opacity:.45;pointer-events:none;border-style:dashed}

/* ---------- spilkort ---------- */
.gamegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem;
  padding-bottom:3rem}
.gcard{
  display:block;border-radius:var(--r);overflow:hidden;background:var(--chalk);
  color:var(--ink);transition:.18s;border:2px solid transparent;
}
.gcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--brass)}
.gcard__art{aspect-ratio:16/9;background:var(--felt-deep);position:relative;overflow:hidden}
/* Billedet ligger OVEN PÅ pladsholderen. Ellers dækker pladsholderen
   billedet, fordi den er absolut placeret og dermed tegnes øverst. */
.gcard__art img{position:absolute;inset:0;z-index:2;
  width:100%;height:100%;object-fit:cover;display:block}
.gcard__fallback{
  position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  font-family:var(--display);font-size:1.6rem;letter-spacing:.08em;color:var(--brass);
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 12px,transparent 12px 24px),
    var(--felt);
  text-align:center;padding:1rem;
}
.gcard__body{padding:1rem 1.1rem 1.2rem}
.gcard__name{font-family:var(--display);font-size:1.3rem;letter-spacing:.03em}
.gcard__tag{font-size:.86rem;color:var(--ink-soft);margin-top:.25rem}
.gcard__foot{display:flex;gap:.8rem;margin-top:.9rem;padding-top:.7rem;
  border-top:1px solid #E3DCC9;font-family:var(--mono);font-size:.74rem;color:var(--ink-soft)}
.gcard--soon{opacity:.55;pointer-events:none}

/* ---------- spilside ---------- */
.gamebanner{
  position:relative;min-height:300px;display:flex;align-items:flex-end;
  padding:2rem 0 2.2rem;overflow:hidden;border-bottom:1px solid var(--felt-line);
  background:var(--felt-deep);
}
.gamebanner__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;opacity:.55}
.gamebanner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(11,34,27,.96) 0%, rgba(11,34,27,.78) 45%, rgba(11,34,27,.25) 100%);
}
.gamebanner__in{position:relative;z-index:2;width:min(1160px,100% - 2.5rem)}
.gamebanner h1{font-size:clamp(2.4rem,7vw,4rem)}
.gamebanner__tag{font-size:1.05rem;color:var(--chalk-dim);margin-top:.6rem;max-width:46ch}
.gamemeta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.gamemeta span{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--chalk-dim);
  border:1px solid var(--felt-line);border-radius:99px;padding:.28rem .8rem}

.gamepage{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:2.5rem 0 3rem;
  align-items:start}
@media (max-width:900px){.gamepage{grid-template-columns:1fr}}

.rules ol{margin:1rem 0 0;padding-left:1.3rem;display:flex;flex-direction:column;gap:.8rem}
.rules li{font-size:.9rem;line-height:1.6;color:var(--chalk-dim)}
.rules li::marker{color:var(--brass);font-family:var(--mono);font-size:.82rem}
.rulepw{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--felt-line)}
.rulepw__row{display:flex;gap:.7rem;align-items:baseline;font-size:.88rem;
  color:var(--chalk-dim);padding:.4rem 0}
.rulepw__name{font-weight:650;color:var(--chalk);min-width:5.5rem}
.rulepw__cost{font-family:var(--mono);font-size:.76rem;color:var(--brass);white-space:nowrap}
.rulepw__note{font-size:.82rem;color:var(--ink-soft);margin-top:.8rem}

/* =====================================================================
   BEKRÆFT ET GÆT
   Browserens egen boks passer dårligt ind, og et fejlklik her koster
   et liv — så det skal se ud som en beslutning.
   ===================================================================== */

.ask{
  position:fixed;inset:0;z-index:140;display:grid;place-items:center;
  background:rgba(6,18,14,.9);backdrop-filter:blur(4px);
  animation:overIn .25s ease-out;
}
.ask__card{
  background:var(--felt-deep);border:2px solid var(--brass);border-radius:var(--r);
  padding:1.8rem;width:min(360px,90vw);text-align:center;
  box-shadow:0 26px 60px -20px rgba(0,0,0,.85);
  animation:stamp .35s cubic-bezier(.2,1.4,.4,1);
}
.ask__label{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chalk-dim)}
.ask__art{width:120px;height:120px;border-radius:12px;object-fit:cover;
  margin:1rem auto .8rem;display:block;background:var(--felt)}
.ask__name{font-family:var(--display);font-size:1.9rem;letter-spacing:.04em;
  color:var(--brass);line-height:1}
.ask__warn{font-size:.86rem;color:var(--chalk-dim);margin-top:.7rem}
.ask__btns{display:flex;gap:.7rem;margin-top:1.4rem}
.ask__btns .btn{flex:1}

/* =====================================================================
   STATISTIK
   ===================================================================== */

.tabs--wide{max-width:none;margin-bottom:1.5rem;display:inline-flex}
.tabs--wide button{padding:.55rem 1.2rem;flex:none}

/* ---------- tabel ---------- */
.table{display:flex;flex-direction:column}
.trow{
  display:grid;gap:1rem;align-items:center;padding:.75rem .3rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  grid-template-columns:2.2rem 1fr repeat(4, 4.6rem);
}
.trow:last-child{border-bottom:none}
.trow--head{border-bottom:1px solid var(--felt-line);padding-bottom:.5rem}
.trow--head span{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.trow--me{background:linear-gradient(90deg,rgba(227,166,60,.1),transparent);border-radius:8px}
.trow--top .trank{color:var(--brass);font-weight:500}
.trank{font-family:var(--mono);font-size:.92rem;color:var(--chalk-dim);text-align:right}
.twho{display:flex;align-items:center;gap:.7rem;min-width:0}
.twho a{font-weight:650;font-size:.96rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.twho a:hover{color:var(--brass)}
.tnum{font-family:var(--mono);font-size:.9rem;text-align:right}
.tnum--points{color:var(--brass)}
.tnum--dim{color:var(--ink-soft)}
.tbar{position:relative;height:5px;border-radius:3px;background:rgba(255,255,255,.08);
  margin-top:.3rem;overflow:hidden}
.tbar i{position:absolute;left:0;top:0;bottom:0;background:var(--voice);border-radius:3px}

@media (max-width:760px){
  .trow{grid-template-columns:1.8rem 1fr 3.6rem 3.6rem}
  .trow .tnum:nth-of-type(n+3){display:none}
  .trow--head span:nth-of-type(n+4){display:none}
}

/* ---------- profil ---------- */
.profile{display:flex;gap:1.5rem;align-items:center;margin-bottom:2rem;flex-wrap:wrap}
.profile h1{font-size:clamp(2rem,5vw,3rem)}
.profile__since{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--chalk-dim);margin-top:.3rem}
.profile__badges{display:flex;gap:.5rem;margin-top:.7rem;flex-wrap:wrap}
.badge{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--felt-line);border-radius:99px;padding:.24rem .7rem;color:var(--chalk-dim)}
.badge--hidden{border-color:var(--pennant);color:var(--pennant)}
.badge--me{border-color:var(--brass);color:var(--brass)}

.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.9rem;margin-bottom:2rem}
.stat{background:var(--felt-deep);border:1px solid var(--felt-line);
  border-radius:var(--r);padding:1.1rem 1.2rem}
.stat__num{font-family:var(--display);font-size:2.2rem;line-height:1;color:var(--chalk)}
.stat__num--brass{color:var(--brass)}
.stat__num--green{color:var(--voice)}
.stat__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--chalk-dim);margin-top:.4rem}

.profile__cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding-bottom:3rem}
@media (max-width:900px){.profile__cols{grid-template-columns:1fr}}
.profile__cols .trow{grid-template-columns:1fr repeat(3,4.4rem)}
.profile__cols .trow--head span:first-child{text-align:left}

/* =====================================================================
   KAMPHISTORIK
   ===================================================================== */

.matches{display:flex;flex-direction:column;gap:.55rem;margin-top:1rem}
.match{
  display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
  background:var(--felt);border:1px solid var(--felt-line);
  border-left:4px solid var(--ink-soft);
  border-radius:var(--r-s);padding:.8rem 1rem;
}
.match--win{border-left-color:var(--voice)}
.match--loss{border-left-color:var(--pennant)}
.match__res{font-family:var(--display);font-size:.95rem;letter-spacing:.08em;width:3.4rem}
.match--win .match__res{color:var(--voice)}
.match--loss .match__res{color:var(--pennant)}
.match__game{font-weight:600;font-size:.94rem}
.match__vs{display:flex;align-items:center;gap:.35rem;margin-top:.25rem;
  font-size:.8rem;color:var(--chalk-dim)}
.match__vs .av{margin-left:-6px}
.match__vs .av:first-of-type{margin-left:0}
.match__num{font-family:var(--mono);font-size:.9rem;text-align:right}
.match__when{font-size:.72rem;color:var(--chalk-dim);font-family:var(--mono);text-align:right}

/* =====================================================================
   IMPOSTER
   ===================================================================== */

.impbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  background:var(--felt-deep);border:1px solid var(--felt-line);
  border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:1.2rem;
}
.impbar__game{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chalk-dim)}
.impbar__word{
  flex:1;text-align:center;font-family:var(--display);font-size:1.5rem;
  letter-spacing:.05em;color:var(--brass);min-width:180px;
}
.impbar__word small{display:block;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.14em;color:var(--chalk-dim);text-transform:uppercase}
.impbar__phase{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass)}

.impwrap{display:grid;grid-template-columns:1fr 380px;gap:1.5rem;align-items:start}
@media (max-width:1000px){.impwrap{grid-template-columns:1fr}}

/* ---------- spillerne ---------- */
.impseats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.iseat{
  background:var(--felt-deep);border:2px solid var(--felt-line);border-radius:var(--r);
  padding:1rem .8rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  text-align:center;transition:.15s;position:relative;
}
.iseat--turn{border-color:var(--brass);box-shadow:0 0 0 4px rgba(227,166,60,.18)}
.iseat--out{opacity:.35;filter:grayscale(1)}
.iseat--accused{border-color:var(--pennant)}
.iseat--votable{cursor:pointer}
.iseat--votable:hover{border-color:var(--pennant);transform:translateY(-3px)}
.iseat--picked{border-color:var(--pennant);background:rgba(220,75,52,.14)}
.iseat__name{font-weight:650;font-size:.94rem}
.iseat__tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--chalk-dim)}
.iseat__pts{font-family:var(--mono);font-size:.8rem;color:var(--brass)}
.iseat__voted{position:absolute;top:.5rem;right:.6rem;width:9px;height:9px;
  border-radius:50%;background:var(--voice)}
.iseat__out{font-family:var(--display);font-size:1rem;letter-spacing:.1em;color:var(--pennant)}

/* ---------- handlingsfeltet ---------- */
.impact{display:flex;flex-direction:column;gap:.9rem}
.impact__title{font-family:var(--display);font-size:1.1rem;letter-spacing:.06em;
  text-transform:uppercase}
.impact__hint{font-size:.86rem;color:var(--chalk-dim)}
.wordrow{display:flex;gap:.5rem}
.wordrow input{flex:1;padding:.75rem .9rem;border-radius:var(--r-s);background:var(--felt);
  border:1px solid var(--felt-line);color:var(--chalk);font-size:1rem}
.wordrow input:focus{border-color:var(--brass);outline:none}

/* ---------- ordene ---------- */
.impround{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chalk-dim);text-align:center;
  padding:.5rem 0;border-top:1px dashed var(--felt-line);margin-top:.4rem}
.impword{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;
  background:var(--felt);border:1px solid var(--felt-line);border-radius:var(--r-s)}
.impword__w{font-weight:650;font-size:1rem;flex:1}
.impword__who{font-size:.76rem;color:var(--chalk-dim)}

/* =====================================================================
   AFSLØRINGEN
   ===================================================================== */

.reveal{
  position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  background:#05100C;animation:overIn .3s ease-out;
}
.reveal__inner{text-align:center;padding:2rem;max-width:min(520px,92vw)}
.reveal__role{
  font-family:var(--display);font-size:clamp(3rem,13vw,6rem);letter-spacing:.06em;
  line-height:1;animation:roleIn .7s cubic-bezier(.2,1.5,.35,1);
}
@keyframes roleIn{
  0%{transform:scale(2.4);opacity:0;filter:blur(14px)}
  55%{transform:scale(.94);opacity:1;filter:blur(0)}
  100%{transform:scale(1)}
}
.reveal--crew .reveal__role{color:var(--voice);text-shadow:0 0 42px rgba(61,158,96,.55)}
.reveal--imp .reveal__role{color:var(--pennant);text-shadow:0 0 42px rgba(220,75,52,.6)}
.reveal__sub{font-family:var(--mono);font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--chalk-dim);margin-top:.6rem;
  animation:fadeUp .5s .5s backwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.reveal__card{margin:1.8rem auto 0;width:190px;border-radius:14px;overflow:hidden;
  border:2px solid var(--felt-line);animation:fadeUp .5s .9s backwards}
.reveal__card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--felt)}
.reveal__name{font-family:var(--display);font-size:1.3rem;letter-spacing:.04em;
  padding:.6rem;background:var(--felt-deep)}

/* ---------- emnekortet (Imposter — Hygge) ----------
   Kendte og genstande har ingen splash art. Kortet er derfor bygget
   af typografi: forbogstavet som stort vandmærke bagved, navnet
   ovenpå, og feltets farve som ramme og lys. --emne sættes af
   klienten ud fra emnets felt. */

.emnekort{position:relative;margin:1.8rem auto 0;width:250px;min-height:190px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.25rem;padding:1.6rem 1.2rem;border-radius:16px;overflow:hidden;
  border:2px solid var(--emne,var(--brass));
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--emne,#C89B3C) 26%, transparent) 0%, transparent 70%),
    var(--felt-deep);
  box-shadow:0 0 44px color-mix(in srgb,var(--emne,#C89B3C) 22%, transparent);
  animation:fadeUp .5s .9s backwards}

/* Forbogstavet. Sidder bagved og må ikke stjæle opmærksomhed fra navnet. */
.emnekort__vand{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-size:11rem;line-height:1;
  color:var(--emne,var(--brass));opacity:.13;pointer-events:none;
  transform:translateY(-.04em)}

.emnekort__type{position:relative;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--chalk-dim)}
.emnekort__navn{position:relative;font-family:var(--display);font-size:1.55rem;
  line-height:1.05;letter-spacing:.03em;text-align:center;text-wrap:balance}
.emnekort__under{position:relative;font-size:.86rem;color:var(--chalk-dim);
  text-align:center}
.emnekort__felt{position:relative;margin-top:.7rem;padding:.22rem .7rem;
  border-radius:99px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--emne,var(--brass));
  border:1px solid color-mix(in srgb,var(--emne,#C89B3C) 55%, transparent);
  background:color-mix(in srgb,var(--emne,#C89B3C) 12%, transparent)}

/* Forbogstavet igen, i miniature, i søgeforslagene — samme plads som
   champion-ikonet, så de to lister opfører sig ens. */
.emnechip{flex:0 0 auto;width:28px;height:28px;border-radius:6px;
  display:grid;place-items:center;font-family:var(--display);font-size:.95rem;
  color:var(--emne,var(--brass));
  border:1px solid color-mix(in srgb,var(--emne,#C89B3C) 55%, transparent);
  background:color-mix(in srgb,var(--emne,#C89B3C) 14%, transparent)}
.suggest__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.suggest__txt b{font-weight:600}
.suggest__txt i{font-style:normal;font-size:.76rem;color:var(--chalk-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.reveal__hint{margin-top:1.8rem;display:inline-flex;flex-direction:column;gap:.3rem;
  border:2px dashed var(--pennant);border-radius:14px;padding:1.1rem 2rem;
  animation:fadeUp .5s .9s backwards}
.reveal__hintlabel{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chalk-dim)}
.reveal__hintvalue{font-family:var(--display);font-size:2rem;letter-spacing:.04em;color:var(--pennant)}

.reveal__count{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:2rem}
.reveal.is-leaving{animation:fxOut .5s ease-in forwards}

/* =====================================================================
   STILLINGEN MELLEM SPILLENE
   ===================================================================== */

.standover{
  position:fixed;inset:0;z-index:145;display:grid;place-items:center;
  background:rgba(5,16,12,.96);animation:overIn .3s ease-out;
}
.standover__inner{width:min(480px,92vw);text-align:center;padding:2rem}
.standover__label{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass)}
.standover__title{font-family:var(--display);font-size:clamp(1.8rem,6vw,2.8rem);
  letter-spacing:.04em;margin-top:.4rem;text-transform:uppercase}
.standover__sub{color:var(--chalk-dim);font-size:.92rem;margin-top:.5rem}
.standover__rows{display:flex;flex-direction:column;gap:.5rem;margin-top:1.8rem}
.srow{
  display:grid;grid-template-columns:1.8rem 1fr auto;gap:.8rem;align-items:center;
  background:var(--felt-deep);border:1px solid var(--felt-line);
  border-radius:var(--r-s);padding:.6rem .9rem;text-align:left;
  animation:fadeUp .4s backwards;
}
.srow--top{border-color:var(--brass)}
.srow--me{background:rgba(227,166,60,.1)}
.srow__no{font-family:var(--mono);font-size:.85rem;color:var(--chalk-dim);text-align:right}
.srow__who{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.94rem}
.srow__pts{font-family:var(--display);font-size:1.3rem;color:var(--brass)}
.srow__gain{font-family:var(--mono);font-size:.74rem;color:var(--voice);margin-left:.4rem}
.standover__next{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:1.8rem}
.standover.is-leaving{animation:fxOut .5s ease-in forwards}

/* =====================================================================
   LIV-BJÆLKEN (afløser powerup-bjælken)
   ===================================================================== */
.livesbar{
  display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;
  background:var(--felt-deep);border:1px solid var(--felt-line);
  border-radius:var(--r);padding:.9rem 1.2rem;margin-bottom:1.2rem;
}
.livesbar__me{display:flex;align-items:center;gap:.7rem}
.livesbar__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chalk-dim)}
.livesbar__known{font-family:var(--mono);font-size:.8rem;color:var(--brass)}

/* ---------- spørgsmålslisten ---------- */
.qpick{position:relative}
.qpick__button{
  width:100%;text-align:left;padding:.8rem .95rem;border-radius:var(--r-s);
  background:var(--felt);border:1px solid var(--felt-line);color:var(--chalk-dim);
  font-size:.95rem;transition:.15s;
}
.qpick__button:hover:not(:disabled){border-color:var(--brass);color:var(--chalk)}
.qpick__button:disabled{opacity:.5;cursor:not-allowed}

.qpanel{
  position:absolute;left:0;right:0;bottom:100%;margin-bottom:.4rem;z-index:30;
  background:var(--felt-deep);border:1px solid var(--brass);border-radius:var(--r);
  box-shadow:var(--shadow);display:flex;flex-direction:column;max-height:min(420px,60vh);
}
.qpanel__search{
  padding:.7rem .9rem;border:none;border-bottom:1px solid var(--felt-line);
  background:transparent;color:var(--chalk);font-size:.95rem;
}
.qpanel__search:focus{outline:none}
.qpanel__list{overflow-y:auto;padding:.35rem}
.qgroup{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);padding:.6rem .7rem .3rem}
.qitem{
  width:100%;display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;
  border-radius:6px;text-align:left;font-size:.9rem;
}
.qitem:hover{background:var(--felt)}
.qitem--used{opacity:.35;cursor:not-allowed}
.qitem--used:hover{background:transparent}
.qitem__text{flex:1}
.qpanel__empty{padding:1.2rem;text-align:center;font-size:.86rem;color:var(--chalk-dim)}

/* ---------- færdige spillere ---------- */
.champcard.is-done{border-color:var(--voice)}
.champcard__solved{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(11,34,27,.6);font-family:var(--display);
  font-size:1.2rem;letter-spacing:.08em;color:var(--voice);text-align:center;line-height:1.3;
}

/* ---------- opsætning med flere valg ---------- */
.setup__title{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin:.9rem 0 .1rem}
.setup__title:first-child{margin-top:0}

/* ---------- Mr. White ---------- */
.reveal--white .reveal__role{color:#F4EFE2;text-shadow:0 0 48px rgba(244,239,226,.5)}
.reveal--white .reveal__hint{border-color:#F4EFE2}
.reveal--white .reveal__hintvalue{color:#F4EFE2}

.iseat__role{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.15rem .5rem;border-radius:99px;margin-top:.2rem}
.iseat__role--imposter{background:rgba(220,75,52,.2);color:var(--pennant)}
.iseat__role--mrwhite{background:rgba(244,239,226,.14);color:var(--chalk)}
.iseat__role--crewmate{background:rgba(61,158,96,.18);color:var(--voice)}

/* ---------- fri snak i chatten ---------- */
.chatrow{margin-top:.6rem;padding-top:.6rem;border-top:1px dashed var(--felt-line)}
.chatrow input{font-size:.88rem}
.bubble--free{border-style:dashed}
.bubble--free .bubble__who{color:var(--brass)}
.iseat__role--undercover{background:rgba(201,160,220,.2);color:#C9A0DC}

/* =====================================================================
   DRAW YOUR LEAGUE
   ---------------------------------------------------------------------
   Tegnefladen skal være det eneste lyse på siden. Alt andet er grønt
   filt og messing, så papiret træder frem af sig selv — man kigger
   derhen uden at nogen har fortalt en det.

   Værktøjerne ligger under fladen som en malerbakke: mørkt træ,
   messingkant, og farverne som små brikker der løfter sig når de er
   valgt.
   ===================================================================== */

/* ---------- bjælken øverst ---------- */
.dbar{
  display:flex;align-items:center;gap:1.4rem;
  background:var(--felt-deep);border:1px solid var(--felt-line);
  border-radius:var(--r);padding:.9rem 1.3rem;margin-bottom:1.2rem;
  box-shadow:var(--shadow);
}
.dbar__mid{flex:1;min-width:0;text-align:center}
.dbar__right{text-align:right;flex:none}

.dbar__word{
  font-family:var(--display);letter-spacing:.14em;line-height:1.15;
  font-size:clamp(1.3rem,3.4vw,2.1rem);color:var(--chalk);
  display:flex;flex-wrap:wrap;gap:.28em .9em;justify-content:center;
}
.dword__grp{display:flex;gap:.28em}
.dword__l{
  display:inline-block;min-width:.62em;text-align:center;
  border-bottom:3px solid var(--felt-line);color:var(--brass);
}
.dword__l.is-blank{color:transparent}
.dword__l.is-new{animation:letterpop .5s cubic-bezier(.2,1.5,.4,1)}
.dword__p{display:inline-block;color:var(--chalk-dim);border-bottom:3px solid transparent}
@keyframes letterpop{0%{transform:scale(2.2);color:#fff}100%{transform:scale(1)}}

/* Tegnerens egen udgave: hele ordet, ingen understreger */
.dbar__word.is-mine{color:var(--brass);gap:.1em}
.dbar__word.is-mine .dword__l{border-bottom-color:transparent;color:var(--brass)}

.dbar__meta{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chalk-dim);margin-top:.3rem;
}
.dbar__meta b{color:var(--brass);font-weight:500}
.dbar__round{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chalk-dim);white-space:nowrap}
.dbar__steps{display:flex;gap:.25rem;justify-content:flex-end;margin-top:.4rem}
.dbar__steps i{width:22px;height:4px;border-radius:2px;background:var(--voice)}
.dbar__steps i.spent{background:var(--felt-line)}

/* ---------- uret ---------- */
.dclock{position:relative;width:52px;height:52px;flex:none;display:grid;place-items:center}
.dclock svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.dclock__track{fill:none;stroke:var(--felt-line);stroke-width:4}
.dclock__fill{
  fill:none;stroke:var(--brass);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:119.4;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear;
}
.dclock__num{font-family:var(--display);font-size:1.15rem;color:var(--chalk);padding-top:2px}
.dclock.is-low .dclock__fill{stroke:var(--pennant)}
.dclock.is-low .dclock__num{color:var(--pennant);animation:tick 1s steps(2) infinite}
@keyframes tick{50%{opacity:.45}}

/* ---------- layout ---------- */
.dwrap{display:grid;grid-template-columns:1fr 330px;gap:1.2rem;align-items:start}
.dmain{min-width:0}

/* ---------- papiret ---------- */
.dstage{
  position:relative;aspect-ratio:5/3;width:100%;overflow:hidden;
  border-radius:var(--r);background:#FCFBF6;
  border:1px solid rgba(227,166,60,.35);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.8), inset 0 0 0 1px rgba(0,0,0,.05);
}
.dstage canvas{display:block;width:100%;height:100%;touch-action:none}
.dstage.is-drawing{cursor:none}
.dstage.is-filling{cursor:crosshair}

/* Sløret over fladen når man ikke selv tegner */
.dveil{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(rgba(11,34,27,.42),rgba(11,34,27,.62));
  backdrop-filter:blur(2px);pointer-events:none;text-align:center;padding:1rem;
}
.dveil__who{font-family:var(--display);font-size:clamp(1.4rem,4vw,2.4rem);
  letter-spacing:.06em;color:var(--chalk)}
.dveil__text{font-size:.92rem;color:var(--chalk-dim);margin-top:.3rem}

/* Penslens størrelse mens man trækker med højre museknap */
.dring{
  position:absolute;border-radius:50%;pointer-events:none;z-index:6;
  border:2px solid rgba(20,20,20,.65);box-shadow:0 0 0 1px rgba(255,255,255,.8);
  transform:translate(-50%,-50%);display:grid;place-items:center;
}
.dring span{
  position:absolute;top:calc(100% + 6px);font-family:var(--mono);font-size:.7rem;
  background:var(--felt-deep);color:var(--brass);padding:.1rem .4rem;border-radius:4px;
  white-space:nowrap;
}

/* ---------- vælg dit ord ---------- */
.dpick{
  position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.1rem;padding:1.2rem;
  background:linear-gradient(rgba(11,34,27,.93),rgba(11,34,27,.97));
}
.dpick__label{font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--chalk-dim)}
.dpick__cards{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center}
.dpick__timer{font-family:var(--mono);font-size:.78rem;color:var(--chalk-dim)}

.wcard{
  width:min(210px,30vw);padding:1rem .9rem 1.1rem;border-radius:var(--r);
  background:var(--felt);border:1px solid var(--felt-line);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;
  transition:transform .14s,border-color .14s,box-shadow .14s;position:relative;
}
.wcard:hover{transform:translateY(-4px);border-color:var(--brass);
  box-shadow:0 14px 28px -14px rgba(0,0,0,.8)}
.wcard__art{width:62px;height:62px;border-radius:12px;overflow:hidden;
  background:var(--felt-deep);display:grid;place-items:center;flex:none}
.wcard__art img{width:100%;height:100%;object-fit:cover;display:block}
.wcard__name{font-family:var(--display);font-size:1.1rem;letter-spacing:.03em;line-height:1.15}
.wcard__sub{font-size:.76rem;color:var(--chalk-dim)}
.wcard__cat{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--voice)}
.wcard__mult{
  position:absolute;top:.55rem;right:.55rem;font-family:var(--mono);font-size:.66rem;
  background:var(--brass);color:var(--felt-deep);padding:.1rem .38rem;border-radius:99px;
  font-weight:600;
}

/* ---------- malerbakken ---------- */
.dtools{
  margin-top:.9rem;background:var(--felt-deep);
  border:1px solid var(--felt-line);border-radius:var(--r);
  padding:.8rem .9rem;display:flex;flex-direction:column;gap:.75rem;
  box-shadow:var(--shadow);
}
.dtools__row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.dtools__row--btns{justify-content:space-between}

.dpal{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);gap:3px;flex:1;min-width:0}
.dpal button{
  width:100%;aspect-ratio:1;min-width:15px;border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);transition:transform .1s,box-shadow .1s;
}
.dpal button:hover{transform:scale(1.22);z-index:2;position:relative}
.dpal button.is-on{
  transform:scale(1.3);z-index:3;position:relative;
  box-shadow:0 0 0 2px var(--felt-deep),0 0 0 4px var(--brass);
}
.dcustom{position:relative;width:34px;height:34px;flex:none;cursor:pointer}
.dcustom input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.dcustom span{
  position:absolute;inset:0;border-radius:8px;pointer-events:none;
  background:conic-gradient(red,yellow,lime,aqua,blue,magenta,red);
  box-shadow:inset 0 0 0 2px var(--felt-deep);
}

.dseg{display:flex;gap:.35rem}
.dtool{
  display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .75rem;
  border-radius:var(--r-s);border:1px solid var(--felt-line);
  color:var(--chalk-dim);font-size:.84rem;font-weight:600;transition:.14s;
}
.dtool svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.dtool:hover{border-color:var(--brass);color:var(--brass)}
.dtool.is-on{background:var(--brass);color:var(--felt-deep);border-color:var(--brass)}
.dtool--danger:hover{border-color:var(--pennant);color:var(--pennant)}

.dsize{display:flex;align-items:center;gap:.6rem;flex:1;min-width:150px;justify-content:center}
.dsize__dot{background:var(--chalk);border-radius:50%;flex:none;
  box-shadow:0 0 0 1px var(--felt-line);transition:width .1s,height .1s}
.dsize input[type=range]{flex:1;max-width:150px;accent-color:var(--brass)}
.dsize__hint{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;
  color:var(--ink-soft);white-space:nowrap}

/* ---------- spillerlisten ---------- */
.dside{display:flex;flex-direction:column;gap:.9rem}
.dplayers{
  background:var(--felt-deep);border:1px solid var(--felt-line);
  border-radius:var(--r);padding:.55rem;display:flex;flex-direction:column;gap:.2rem;
}
.dp{
  display:flex;align-items:center;gap:.6rem;padding:.42rem .55rem;border-radius:8px;
  position:relative;transition:background .15s;
}
.dp--me{background:rgba(227,166,60,.08)}
.dp--drawer{background:rgba(227,166,60,.16);box-shadow:inset 0 0 0 1px rgba(227,166,60,.4)}
.dp--solved{background:rgba(61,158,96,.14)}
.dp__name{flex:1;font-size:.88rem;font-weight:650;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.dp__pts{font-family:var(--mono);font-size:.84rem;color:var(--brass)}
.dp__rank{font-family:var(--mono);font-size:.68rem;color:var(--ink-soft);width:1.1rem}
.dp__mark{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.dp--drawer .dp__mark{color:var(--brass)}
.dp--solved .dp__mark{color:var(--voice)}
.dp__delta{
  position:absolute;right:.55rem;top:50%;font-family:var(--display);font-size:1rem;
  pointer-events:none;animation:floatup 1.5s ease-out forwards;
}
.dp__delta--up{color:var(--voice)}
.dp__delta--down{color:var(--pennant)}
@keyframes floatup{
  0%{opacity:0;transform:translateY(0)}
  15%{opacity:1}
  100%{opacity:0;transform:translateY(-26px)}
}

.chat--draw{height:min(520px,60vh)}

/* ---------- gættelinjerne ---------- */
.gline{font-size:.86rem;display:flex;gap:.45rem;align-items:baseline;
  padding:.28rem .45rem;border-radius:6px}
.gline__who{color:var(--chalk-dim);font-weight:650;flex:none}
.gline__txt{color:var(--chalk);word-break:break-word}
.gline--solved{background:rgba(61,158,96,.1)}
.gline--solved .gline__who{color:var(--voice)}
.gline--sys{
  justify-content:center;text-align:center;color:var(--chalk-dim);font-size:.82rem;
  border:1px dashed var(--felt-line);padding:.35rem .5rem;
}
.gline--hit{border-color:rgba(61,158,96,.55);color:var(--voice);font-weight:650}
.gline--close{border-color:var(--brass);color:var(--brass)}
.gline--start{border-style:solid;border-color:var(--felt-line);color:var(--chalk-dim)}

/* ---------- indstillinger i lobbyen ---------- */
.setup__title{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--chalk-dim);margin:1.1rem 0 .55rem;
}
.setup__title:first-child{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .8rem;
  border:1px solid var(--felt-line);border-radius:99px;font-size:.86rem;
  font-weight:600;color:var(--chalk-dim);transition:.14s;
}
.chip:hover{border-color:var(--brass);color:var(--chalk)}
.chip[aria-pressed="true"]{background:var(--brass);color:var(--felt-deep);border-color:var(--brass)}
.chip__tick{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2.6;
  opacity:.25}
.chip[aria-pressed="true"] .chip__tick{opacity:1}
.chip__mult{font-family:var(--mono);font-size:.66rem;opacity:.75}

.switches{display:flex;flex-direction:column;gap:.5rem}
.swrow{
  display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem;
  border:1px solid var(--felt-line);border-radius:var(--r-s);text-align:left;width:100%;
}
.swrow:hover{border-color:var(--brass)}
.swrow__txt{flex:1}
.swrow__name{font-weight:650;font-size:.9rem}
.swrow__blurb{font-size:.76rem;color:var(--chalk-dim);margin-top:.1rem}
.swrow__box{
  width:42px;height:24px;border-radius:99px;background:var(--felt);flex:none;
  border:1px solid var(--felt-line);position:relative;transition:.16s;
}
.swrow__box::after{
  content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--chalk-dim);transition:.16s;
}
.swrow[aria-pressed="true"] .swrow__box{background:var(--voice);border-color:var(--voice)}
.swrow[aria-pressed="true"] .swrow__box::after{left:20px;background:#062017}

.setup__note{font-size:.78rem;color:var(--ink-soft);margin-top:.7rem}

/* Minus-point i stillingen */
.srow__gain--neg{color:var(--pennant)}

@media (max-width:1050px){
  .dwrap{grid-template-columns:1fr}
  .chat--draw{height:min(360px,50vh)}
  .dside{flex-direction:column-reverse}
}
@media (max-width:620px){
  .dbar{flex-wrap:wrap;gap:.8rem}
  .dbar__mid{order:3;width:100%}
  .dtools__row--btns{gap:.5rem}
  .dtool span{display:none}
  .dsize{min-width:110px}
  .dsize__hint{display:none}
}

/* Ordet der afsløres mellem turene */
.dreveal__icon{
  display:block;width:74px;height:74px;margin:0 auto .6rem;border-radius:14px;
  object-fit:cover;background:var(--felt);box-shadow:0 0 0 2px var(--brass);
}

/* =====================================================================
   WHO KNOW BALL
   ---------------------------------------------------------------------
   Et quizbræt skal føles som en tavle man står foran. Dybe felter med
   messingkant, tallene i display-skrift, og det aktive spørgsmål lagt
   hen over som et kort der er trukket frem.
   ===================================================================== */

.qbar{
  display:flex;align-items:center;gap:1.2rem;
  background:var(--felt-deep);border:1px solid var(--felt-line);
  border-radius:var(--r);padding:.85rem 1.3rem;margin-bottom:1.2rem;
  box-shadow:var(--shadow);
}
.qbar__round{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);white-space:nowrap}
.qbar__turn{flex:1;text-align:center;font-size:1rem;color:var(--chalk-dim)}
.qbar__turn b{color:var(--chalk);font-weight:700}
.qbar__left{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);white-space:nowrap}

.qwrap{display:grid;grid-template-columns:1fr 300px;gap:1.2rem;align-items:start}
.qmain{position:relative;min-width:0}

/* ---------- brættet ---------- */
.qboard{
  display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:.6rem;
}
.qcol{display:flex;flex-direction:column;gap:.6rem}
.qcol__head{
  background:linear-gradient(180deg,var(--felt) 0%,var(--felt-deep) 100%);
  border:1px solid var(--felt-line);border-radius:var(--r-s);
  padding:.7rem .5rem;text-align:center;min-height:74px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
}
.qcol__icon{font-size:1.15rem;line-height:1;filter:saturate(.5) brightness(1.1)}
.qcol__name{font-family:var(--display);font-size:.86rem;letter-spacing:.03em;
  line-height:1.05;color:var(--chalk)}

.qcell{
  aspect-ratio:16/10;border-radius:var(--r-s);
  background:radial-gradient(circle at 50% 40%, rgba(227,166,60,.12), rgba(11,34,27,.5));
  border:1px solid var(--felt-line);
  font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.9rem);
  color:var(--brass);letter-spacing:.03em;
  transition:transform .12s,box-shadow .12s,border-color .12s,background .2s;
}
.qcell.is-pick{cursor:pointer}
.qcell.is-pick:hover{
  transform:translateY(-3px);border-color:var(--brass);color:#F6D896;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.8),inset 0 0 22px rgba(227,166,60,.18);
}
.qcell.is-done{
  background:var(--felt-deep);color:transparent;border-color:transparent;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.4);pointer-events:none;
}
.qcell.is-empty{color:var(--ink-soft);background:var(--felt-deep);
  border-style:dashed;pointer-events:none}
.qcell.is-active{
  border-color:var(--brass);color:#F6D896;
  box-shadow:0 0 0 2px var(--brass),0 0 26px rgba(227,166,60,.4);
  animation:qpulse 1.4s ease-in-out infinite;
}
@keyframes qpulse{50%{box-shadow:0 0 0 2px var(--brass),0 0 12px rgba(227,166,60,.2)}}

/* ---------- spørgsmålskortet ---------- */
.qcard{
  position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:1rem;
  background:linear-gradient(rgba(6,18,14,.55),rgba(6,18,14,.78));
  backdrop-filter:blur(4px);animation:overIn .25s ease-out;
}
.qcard__inner{
  width:min(560px,94%);background:var(--felt);
  border:1px solid var(--brass-dim,rgba(227,166,60,.4));border-radius:var(--r);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.9);padding:1.5rem 1.6rem 1.7rem;
}
.qcard__top{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.qcard__icon{width:52px;height:52px;border-radius:12px;object-fit:cover;
  background:var(--felt-deep);box-shadow:0 0 0 2px var(--brass);flex:none}
.qcard__meta{display:flex;flex-direction:column;gap:.15rem}
.qcard__cat{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chalk-dim)}
.qcard__value{font-family:var(--display);font-size:1.4rem;color:var(--brass)}
.qcard__prompt{font-size:1.3rem;line-height:1.35;color:var(--chalk);margin-bottom:.5rem}
.qcard__note{font-size:.82rem;color:var(--chalk-dim);min-height:1.1em;margin-bottom:.9rem}

.qcard__owner .askrow{margin-bottom:.6rem}
.qcard__owner{display:flex;flex-direction:column}

/* ---------- stjæletid ---------- */
.qcard__steal{display:flex;gap:1rem;align-items:center;
  border-top:1px solid var(--felt-line);padding-top:1rem}
.qsteal__clock{position:relative;width:52px;height:52px;flex:none;display:grid;place-items:center}
.qsteal__clock svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.qsteal__track{fill:none;stroke:var(--felt-line);stroke-width:4}
.qsteal__fill{fill:none;stroke:var(--pennant);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:119.4;transition:stroke-dashoffset .15s linear}
.qsteal__clock span{font-family:var(--display);font-size:1.2rem;color:var(--pennant)}
.qsteal__body{flex:1;min-width:0}
.qsteal__label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pennant);margin-bottom:.5rem}
.qsteal__tried{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}
.qtried{font-family:var(--mono);font-size:.66rem;color:var(--ink-soft);
  border:1px solid var(--felt-line);border-radius:99px;padding:.1rem .5rem}

/* ---------- facit ---------- */
.qcard__reveal{border-top:1px solid var(--felt-line);padding-top:1.1rem;text-align:center}
.qreveal__answer{font-size:1.5rem;color:var(--chalk);margin-bottom:.4rem}
.qreveal__label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chalk-dim);display:block;margin-bottom:.2rem}
.qreveal__by{font-size:.92rem;color:var(--chalk-dim)}
.qreveal__by.is-good{color:var(--voice)}
.qreveal__by.is-bad{color:var(--pennant)}

/* ---------- stillingen ---------- */
.qside{display:flex;flex-direction:column;gap:.9rem}
.qscores{background:var(--felt-deep);border:1px solid var(--felt-line);
  border-radius:var(--r);padding:.55rem;display:flex;flex-direction:column;gap:.2rem}
.qscore{display:flex;align-items:center;gap:.6rem;padding:.42rem .55rem;border-radius:8px;
  position:relative;transition:background .15s}
.qscore--me{background:rgba(227,166,60,.08)}
.qscore--turn{background:rgba(227,166,60,.16);box-shadow:inset 0 0 0 1px rgba(227,166,60,.4)}
.qscore__rank{font-family:var(--mono);font-size:.68rem;color:var(--ink-soft);width:1.4rem}
.qscore__name{flex:1;font-size:.88rem;font-weight:650;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.qscore__pts{font-family:var(--display);font-size:1.05rem;color:var(--brass)}
.qscore__pts.is-neg{color:var(--pennant)}
.qscore__delta{position:absolute;right:.55rem;top:50%;font-family:var(--display);
  font-size:1rem;pointer-events:none;animation:floatup 1.5s ease-out forwards}
.qscore__delta.is-up{color:var(--voice)}
.qscore__delta.is-down{color:var(--pennant)}

/* ---------- log ---------- */
.qlog{background:var(--felt-deep);border:1px solid var(--felt-line);border-radius:var(--r);
  padding:.6rem;height:min(280px,36vh);overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}
.qline{font-size:.82rem;color:var(--chalk-dim);padding:.28rem .4rem;border-radius:6px;
  border:1px dashed transparent}
.qline--start{color:var(--chalk);border-color:var(--felt-line)}
.qline--steal{color:var(--pennant);border-color:rgba(197,84,68,.4)}
.qline--hit{color:var(--voice);border-color:rgba(61,158,96,.4);font-weight:650}
.qline--miss{color:var(--pennant)}
.qline--reveal{color:var(--brass)}

/* ---------- opsætningsskærmen ---------- */
.qintro{border:1px solid var(--felt-line);border-radius:var(--r);
  padding:1.2rem 1.3rem;background:var(--felt-deep)}
.qintro__line{font-size:.94rem;line-height:1.5;color:var(--chalk);margin:0 0 1rem}
.qintro__line--dim{color:var(--chalk-dim);margin-bottom:0}
.qintro__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1.1rem}
.qintro__grid>div{background:var(--felt);border:1px solid var(--felt-line);
  border-radius:var(--r-s);padding:.7rem .5rem;text-align:center}
.qintro__num{display:block;font-family:var(--display);font-size:1.5rem;color:var(--brass)}
.qintro__txt{font-size:.74rem;color:var(--chalk-dim)}

@media (max-width:1050px){
  .qwrap{grid-template-columns:1fr}
  .qside{flex-direction:row}
  .qscores{flex:1}
  .qlog{flex:1;height:auto;max-height:200px}
}
@media (max-width:620px){
  .qcol__name{font-size:.68rem}
  .qcol__head{min-height:58px}
  .qcard__prompt{font-size:1.1rem}
  .qside{flex-direction:column}
}

/* Holds avatarer i quiz-scoreboardet — flere ansigter når det er et par */
.qscore__avatars{display:flex;align-items:center;flex:none}
.qscore__avatars > *{margin-left:-8px;box-shadow:0 0 0 2px var(--felt-deep);border-radius:50%}
.qscore__avatars > *:first-child{margin-left:0}

/* Knappen ud af slutskærmen */
.standover__close{margin-top:1.8rem;min-width:200px}

/* ---------- Tidslinjen ----------
   Kortene ligger i en vandret række med klikbare huller imellem. På en
   telefon kan rækken scrolles, og hullerne er brede nok til en tommel. */

.hit__top{text-align:center;margin-bottom:1.2rem}
.hit__phase{font-family:var(--display);font-size:1.5rem;letter-spacing:.04em}
.hit__sub{color:var(--chalk-dim);font-size:.9rem;margin-top:.2rem;text-wrap:balance}

.hit__dj{text-align:center;margin:1.4rem 0}
.hit__djnote{color:var(--chalk-dim);font-size:.8rem;margin-top:.5rem}

.hit__board{margin:1.4rem 0}
.tidslinje{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:.4rem 0 1rem;
  scrollbar-width:thin}

.tidskort{flex:0 0 auto;width:124px;min-height:104px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.15rem;padding:.7rem .5rem;border-radius:12px;
  border:1px solid rgba(200,155,60,.35);background:var(--felt-deep);text-align:center}
.tidskort__aar{font-family:var(--display);font-size:1.5rem;color:var(--brass);line-height:1}
.tidskort__titel{font-size:.76rem;line-height:1.15;text-wrap:balance}
.tidskort__kunstner{font-size:.68rem;color:var(--chalk-dim);line-height:1.1}

/* Hullet mellem to kort. Smalt når man ikke kan klikke, bredt når man kan. */
.tidslinje__hul{flex:0 0 auto;width:22px;align-self:stretch;border:0;background:none;
  padding:0;cursor:pointer;display:grid;place-items:center;transition:width .12s ease}
.tidslinje__hul span{display:block;width:3px;height:70%;border-radius:99px;
  background:rgba(200,155,60,.18);transition:background .12s ease,width .12s ease}
.tidslinje__hul:not(:disabled){width:34px}
.tidslinje__hul:not(:disabled):hover span{background:var(--brass);width:6px}
.tidslinje__hul:disabled{cursor:default}
.tidslinje__hul.is-valgt span{background:var(--brass);width:6px}
.tidslinje__hul.is-udfordret span{background:#DC4B34;width:6px}
.tidslinje__note{text-align:center;color:var(--chalk-dim);font-size:.8rem}

.hit__actions{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin:1rem 0}
.hit__tokens{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass)}
.hit__navn{width:100%;max-width:340px;display:flex;flex-direction:column;gap:.45rem}
.hit__navn input{width:100%}
.hit__navnnote{color:var(--chalk-dim);font-size:.8rem;text-align:center;text-wrap:balance}

.hit__dom{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;
  gap:.6rem;padding:1rem;border-radius:14px;border:1px solid rgba(200,155,60,.3);
  background:var(--felt-deep);text-align:center;animation:fadeUp .3s}
.hit__dom.is-rigtig{border-color:rgba(61,158,96,.55);
  box-shadow:0 0 30px rgba(61,158,96,.16)}
.hit__dom.is-forkert{border-color:rgba(220,75,52,.5);
  box-shadow:0 0 30px rgba(220,75,52,.14)}
.hit__domkort{display:flex;flex-direction:column;gap:.15rem}
.hit__dom p{font-size:.88rem;text-wrap:balance}

.hit__others{display:flex;flex-direction:column;gap:.4rem;margin-top:1.2rem}
.hit__mini{display:flex;align-items:baseline;gap:.6rem;padding:.45rem .7rem;border-radius:10px;
  background:rgba(255,255,255,.03);font-size:.8rem}
.hit__mininavn{font-weight:650;flex:0 0 auto}
.hit__miniaar{color:var(--chalk-dim);font-family:var(--mono);font-size:.72rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.hit__minital{flex:0 0 auto;color:var(--brass);font-family:var(--mono);font-size:.7rem}

@media (max-width:600px){
  .tidskort{width:104px;min-height:92px}
  .tidskort__aar{font-size:1.3rem}
}

/* ---------- Kryds og bolle ----------
   Fire kolonner: kategorinavnene til venstre og så de tre felter. */

.ttt__ure{display:flex;gap:.8rem;justify-content:center;margin-bottom:1rem}
.ttt__ur{display:flex;flex-direction:column;align-items:center;gap:.1rem;
  padding:.5rem .9rem;border-radius:10px;background:rgba(255,255,255,.03);
  border:1px solid transparent;min-width:96px}
.ttt__ur.is-aktiv{border-color:var(--brass);
  box-shadow:0 0 20px color-mix(in srgb,var(--brass) 20%, transparent)}
.ttt__urnavn{font-size:.76rem;color:var(--chalk-dim)}
.ttt__urtid{font-family:var(--mono);font-size:1.25rem;letter-spacing:.05em}

.ttt__grid{display:grid;grid-template-columns:minmax(74px,1fr) repeat(3,minmax(84px,1fr));
  gap:.4rem;max-width:560px;margin:0 auto}
.ttt__hjoerne{}
.ttt__kat{display:grid;place-items:center;padding:.45rem;text-align:center;
  font-size:.72rem;line-height:1.15;color:var(--chalk-dim);text-wrap:balance}
.ttt__kat--raekke{font-size:.7rem}

.ttt__felt{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.15rem;padding:.3rem;border-radius:10px;
  border:1px solid rgba(200,155,60,.22);background:var(--felt-deep);
  color:inherit;cursor:pointer;position:relative;overflow:hidden}
.ttt__felt:disabled{cursor:default}
.ttt__felt:not(:disabled):hover{border-color:var(--brass)}
.ttt__felt.is-valgt{border-color:var(--brass);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--brass) 45%, transparent) inset}
.ttt__felt.is-min{border-color:rgba(61,158,96,.6);background:rgba(61,158,96,.1)}
.ttt__felt.is-hans{border-color:rgba(220,75,52,.55);background:rgba(220,75,52,.1)}
.ttt__felt.is-stribe{box-shadow:0 0 26px color-mix(in srgb,var(--brass) 40%, transparent)}
.ttt__felt img{width:38px;height:38px;border-radius:7px}
.ttt__navn{font-size:.64rem;line-height:1.1;text-align:center;text-wrap:balance}
.ttt__maerke{position:absolute;top:.2rem;right:.35rem;font-size:.8rem;opacity:.5}

.ttt__besked{text-align:center;color:var(--chalk-dim);font-size:.88rem;margin:1rem 0 .6rem;
  text-wrap:balance}
.ttt__vaelg{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.ttt__krav{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass);text-align:center}

@media (max-width:520px){
  .ttt__grid{grid-template-columns:minmax(58px,1fr) repeat(3,minmax(66px,1fr));gap:.3rem}
  .ttt__kat{font-size:.62rem}
  .ttt__felt img{width:28px;height:28px}
}

/* Værtens indstillinger i venterummet. */
.waitopts{max-width:520px;margin:1.4rem auto 0}
.waitopts .swrow:disabled{opacity:.6;cursor:default}

/* En fejl fra serveren skal kunne læses og skrives af — ikke forsvinde. */
.msg--brag{border-left-color:#DC4B34;background:rgba(220,75,52,.08);
  user-select:text;-webkit-user-select:text}

/* ---------- Riftbound deckbuilder ----------
   Luft er det vigtigste her. En kortdatabase bliver hurtigt en mur af
   miniaturer, og så kan man ikke se noget. Større kort, mere afstand,
   og en dækliste der har plads til at ånde. */

.rb__top{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:2.2rem;padding-bottom:1.4rem;
  border-bottom:1px solid rgba(139,92,246,.18)}
.rb__eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;
  color:#A78BFA;margin:0 0 .3rem}
.rb__title{font-family:var(--display);font-size:2.6rem;line-height:1;margin:0 0 .5rem}
.rb__blurb{color:var(--chalk-dim);font-size:.92rem;line-height:1.5;max-width:54ch;
  text-wrap:balance;margin:0}
.rb__topknapper{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

.rb__layout{display:grid;grid-template-columns:1fr 360px;gap:2.4rem;align-items:start}

/* --- venstre: kortene --- */

.rb__soeg{display:flex;flex-direction:column;gap:1rem;min-width:0}
.rb__soeg input{width:100%;padding:.75rem .9rem;font-size:.95rem}
.rb__filtre{display:flex;gap:.6rem;flex-wrap:wrap}
.rb__vaelg{background:var(--felt-deep);color:inherit;
  border:1px solid rgba(200,155,60,.28);border-radius:9px;
  padding:.55rem .75rem;font:inherit;font-size:.86rem;cursor:pointer}
.rb__vaelg:hover{border-color:#8B5CF6}
.rb__antal{color:var(--chalk-dim);font-size:.8rem;margin:0;
  font-family:var(--mono);letter-spacing:.04em}

.rb__kort{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:1.1rem;max-height:72vh;overflow-y:auto;padding:.2rem .5rem 1rem 0}
.rbkort{position:relative;padding:0;border:1px solid rgba(200,155,60,.16);
  border-radius:13px;background:var(--felt-deep);cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;color:inherit;text-align:left;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.rbkort:hover{transform:translateY(-3px);border-color:#8B5CF6;
  box-shadow:0 8px 24px rgba(0,0,0,.35)}
.rbkort img{width:100%;aspect-ratio:744/1039;object-fit:cover;display:block;
  background:#0d2b22}
.rbkort__navn{font-size:.76rem;line-height:1.25;padding:.5rem .55rem .6rem;
  text-wrap:balance}
.rbkort__antal{position:absolute;top:.45rem;right:.45rem;min-width:24px;height:24px;
  display:none;place-items:center;border-radius:8px;background:#8B5CF6;color:#fff;
  font-family:var(--mono);font-size:.78rem;padding:0 .3rem;
  box-shadow:0 2px 8px rgba(0,0,0,.4)}
.rbkort__antal.is-med{display:grid}

/* --- højre: dækket --- */

.rb__daek{position:sticky;top:1.2rem;display:flex;flex-direction:column;gap:1rem;
  padding:1.3rem;border-radius:14px;border:1px solid rgba(139,92,246,.22);
  background:linear-gradient(180deg,rgba(139,92,246,.08),rgba(139,92,246,.03))}
.rb__daek input{width:100%;padding:.7rem .85rem;font-size:.95rem}

.rb__status{font-size:.84rem;line-height:1.5;padding:.75rem .9rem;border-radius:10px;
  background:rgba(0,0,0,.22)}
.rb__status.is-ok{border-left:3px solid #3D9E60}
.rb__status.is-fejl{border-left:3px solid #DC4B34}
.rb__status ul{margin:.5rem 0 0;padding-left:1.1rem}
.rb__status li{margin-bottom:.3rem}
.rb__uafklaret{color:var(--chalk-dim);font-size:.74rem;line-height:1.45;
  margin:.6rem 0 0;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.07)}

.rb__liste{max-height:52vh;overflow-y:auto;padding-right:.3rem}
.rb__afsnit{display:flex;align-items:baseline;justify-content:space-between;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:#A78BFA;margin:1.1rem 0 .45rem;padding-bottom:.3rem;
  border-bottom:1px solid rgba(139,92,246,.15)}
.rb__afsnit:first-child{margin-top:0}
.rb__tom{color:var(--chalk-dim);font-size:.82rem;margin:.2rem 0 .3rem;opacity:.6}
.rbrad{display:flex;align-items:center;gap:.6rem;width:100%;padding:.42rem .5rem;
  border:0;background:none;color:inherit;font:inherit;font-size:.85rem;cursor:pointer;
  border-radius:7px;text-align:left}
.rbrad:hover{background:rgba(255,255,255,.06)}
.rbrad__antal{font-family:var(--mono);font-size:.76rem;color:var(--brass);
  min-width:24px;text-align:right}
.rbrad__navn{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbrad__ud{opacity:0;color:#DC4B34;font-size:.75rem;transition:opacity .1s}
.rbrad:hover .rbrad__ud{opacity:1}

/* --- de færdige dæk --- */

.rb__precon{margin-bottom:2rem}
.rb__preconrk{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.8rem}
.rbprecon{display:flex;flex-direction:column;gap:.25rem;padding:.8rem .9rem;
  border-radius:11px;border:1px solid rgba(200,155,60,.2);background:var(--felt-deep);
  color:inherit;cursor:pointer;text-align:left;font:inherit;
  transition:border-color .12s ease,transform .12s ease}
.rbprecon:hover{border-color:#8B5CF6;transform:translateY(-2px)}
.rbprecon__navn{font-weight:650;font-size:.92rem}
.rbprecon__saet{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--chalk-dim)}

@media (max-width:980px){
  .rb__layout{grid-template-columns:1fr;gap:1.6rem}
  .rb__daek{position:static;order:-1}
  .rb__kort{max-height:none}
  .rb__liste{max-height:40vh}
  .rb__title{font-size:2.1rem}
}

/* =====================================================================
   RIFTBOUND — VENTERUMMET OG BORDET
   ---------------------------------------------------------------------
   Bordet ligger ovenpå filten som resten af siden, men Riftbound har
   sin egen farve — den lilla — så man kan se på en skærmdump hvilket
   spil der køres. Kortene er billeder i fast forhold (744x1039 som
   Riots egne), og alt der kan klikkes løfter sig, så man ikke skal
   gætte hvad der er levende.
   ===================================================================== */

:root{ --rb:#8B5CF6; --rb-lys:#A78BFA; --rb-dyb:#2A1B48; }

/* ---------- venterummet ---------- */

.rbvent{margin-top:1.6rem;padding:1.4rem;border-radius:14px;
  border:1px solid rgba(139,92,246,.25);
  background:linear-gradient(180deg,rgba(139,92,246,.10),rgba(139,92,246,.03))}
.rbvent__hoved{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.rbvent__mrk{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;
  color:var(--rb-lys)}
.rbvent__krav{font-size:.82rem;font-family:var(--mono)}
.rbvent__krav.is-ok{color:var(--voice)}
.rbvent__krav.is-mangler{color:var(--brass)}

.rbvent__formater{display:grid;gap:.6rem;margin-bottom:1.2rem;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.rbfmt{display:flex;flex-direction:column;gap:.2rem;padding:.65rem .8rem;
  border-radius:10px;border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);text-align:left;color:inherit;
  transition:border-color .12s ease,transform .12s ease}
.rbfmt:hover:not(:disabled){border-color:var(--rb);transform:translateY(-2px)}
.rbfmt:disabled{cursor:default;opacity:.72}
.rbfmt.is-valgt{border-color:var(--rb);background:rgba(139,92,246,.16);opacity:1}
.rbfmt__navn{font-weight:650;font-size:.9rem}
.rbfmt__tal{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  color:var(--chalk-dim)}

.rbvent__daek{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1rem}
.rbvent__status{font-size:.88rem;color:var(--chalk-dim)}
.rbvent__tom{font-size:.84rem;color:var(--chalk-dim);line-height:1.55}
.rbvent__tom a{color:var(--rb-lys);text-decoration:underline}
.rbvent__tom code{font-family:var(--mono);font-size:.8em;
  background:rgba(0,0,0,.3);padding:.1em .4em;border-radius:4px}
.rbvent__vaelg{width:min(420px,100%);padding:.7rem .85rem;border-radius:9px;
  background:var(--felt-deep);color:inherit;border:1px solid rgba(255,255,255,.14)}

.rbvent__spillere{display:flex;gap:.55rem;flex-wrap:wrap}
.rbklar{font-family:var(--mono);font-size:.74rem;padding:.3rem .65rem;
  border-radius:99px;border:1px solid rgba(255,255,255,.10);
  color:var(--chalk-dim)}
.rbklar.is-klar{color:var(--voice);border-color:rgba(61,158,96,.4)}

/* ---------- kortene ---------- */

.rb2kort{position:relative;border-radius:9px;overflow:hidden;flex:none;
  background:#0d2b22;border:1px solid rgba(255,255,255,.08);
  transition:transform .13s ease,box-shadow .13s ease,border-color .13s ease}
.rb2kort img{display:block;width:100%;aspect-ratio:744/1039;object-fit:cover}
.rb2kort--tom{display:grid;place-items:center;padding:.4rem;text-align:center;
  aspect-ratio:744/1039}
.rb2kort__navn{font-size:.62rem;line-height:1.2;color:var(--chalk-dim)}
.rb2kort__tal{position:absolute;top:3px;right:3px;min-width:19px;height:19px;
  display:grid;place-items:center;border-radius:5px;background:var(--rb);
  color:#fff;font-family:var(--mono);font-size:.66rem}

/* Kortstørrelserne på banen står samlet under "kortstørrelser på
   banen" længere nede. Her stod et andet sæt fra den tidligere
   opbygning: de sidste vandt i CSS, men to sæt driver fra hinanden. */
.rb2kort--bf img{aspect-ratio:auto;height:auto}

.rb2kort.is-klikbar{cursor:pointer}
.rb2kort.is-klikbar:hover{transform:translateY(-7px);border-color:var(--rb-lys);
  box-shadow:0 12px 26px -8px rgba(0,0,0,.7)}
.rb2kort.is-valgt{border-color:var(--brass);transform:translateY(-7px);
  box-shadow:0 0 0 2px var(--brass),0 12px 26px -10px rgba(0,0,0,.7)}
.rb2kort.is-fravalgt{opacity:.42;transform:translateY(6px)}
.rb2kort.is-exhausted{transform:rotate(6deg);filter:brightness(.62) saturate(.7)}
.rb2kort.is-exhausted.is-klikbar:hover{transform:rotate(6deg) translateY(-4px)}
.rb2kort.is-gear{border-color:rgba(227,166,60,.45)}
.rb2kort--chosen{box-shadow:0 0 0 2px rgba(227,166,60,.55)}

/* ---------- chain og showdown ---------- */

.rb2__chain{padding:1rem 1.1rem;border-radius:12px;
  border:1px solid rgba(227,166,60,.3);background:rgba(227,166,60,.07)}
.rb2chain__hoved{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
  font-size:.85rem}
.rb2chain__mrk{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
  color:var(--brass)}
.rb2chain__kamp{margin-top:.5rem;font-family:var(--mono);font-size:.8rem;
  color:var(--chalk-dim)}
.rb2chain__liste{margin-top:.7rem;display:flex;flex-direction:column;gap:.3rem}
.rb2chain__item{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;
  font-size:.82rem;padding:.35rem .55rem;border-radius:7px;background:rgba(0,0,0,.24)}
.rb2chain__ejer{color:var(--chalk-dim)}
.rb2chain__status{font-family:var(--mono);font-size:.68rem;color:var(--brass);
  text-transform:uppercase;letter-spacing:.08em}
.rb2raekke{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end;
  min-height:46px}
.rb2raekke--haand{gap:.6rem;min-height:150px;padding-top:.5rem}
.rb2tom{font-size:.8rem;color:var(--chalk-dim);opacity:.55}

.rb2__note{font-size:.78rem;line-height:1.5;color:var(--chalk-dim);opacity:.7;
  max-width:70ch;margin:0}

/* ---------- mulligan ---------- */

.rb2__mull{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;padding:2rem;
  background:rgba(6,18,14,.93);backdrop-filter:blur(4px);text-align:center}
.rb2mull__titel{font-family:var(--display);font-size:2.2rem;letter-spacing:.02em}
.rb2mull__tekst{max-width:46ch;font-size:.9rem;color:var(--chalk-dim);
  line-height:1.55}
.rb2__mull .rb2raekke{justify-content:center;min-height:auto}
.rb2__mull .rb2kort--haand{width:130px}

@media (max-width:600px){
  .rb2raekke--haand{min-height:124px}   /* kun mulliganskærmen bruger den nu */
}

.rbvent__advarsel{font-size:.82rem;line-height:1.5;padding:.7rem .85rem;
  border-radius:9px;background:rgba(220,75,52,.1);
  border-left:3px solid var(--pennant)}
.rbvent__advarsel ul{margin:.4rem 0 0;padding-left:1.1rem}
.rbvent__advarsel li{margin-bottom:.2rem;color:var(--chalk-dim)}
.rbklar.is-ulovligt{color:var(--pennant);border-color:rgba(220,75,52,.45)}

/* Knappen der fører fra deckbuilderen ind til bordet. Den skal skille
   sig ud fra Gem og Nyt dæk — det er den eneste vej til spillet. */
.rb__spilknap{background:var(--rb);border-color:var(--rb);color:#fff;
  box-shadow:0 0 20px -6px rgba(139,92,246,.9)}
.rb__spilknap:hover{background:var(--rb-lys);border-color:var(--rb-lys)}
.qintro__note{margin-top:.8rem;font-size:.85rem;color:var(--chalk-dim)}
.qintro__note a{color:var(--rb-lys);text-decoration:underline}

/* ---------- luppen i deckbuilderen ----------
   Kortet stort midt på skærmen, når man peger på det. Baggrunden
   dæmpes let, så teksten på kortet står frem — men kun let, for man
   skal stadig kunne se hvor i gitteret man er. */

/* Luppen svæver ved siden af det kort man peger på — samme størrelse
   som forstørrelsen ved bordet. Ingen dæmpet baggrund: man skal kunne
   blive i gitteret og køre videre til næste kort uden at skærmen
   blinker mørk hver gang. Koordinaterne sættes af rbLupPlacer(). */
.rblup{position:fixed;z-index:70;pointer-events:none;width:max-content}
/* Nødplacering hvis der ikke er plads i nogen af siderne. */
.rblup--midt{left:50%;top:50%;transform:translate(-50%,-50%)}

.rblup__in{display:flex;flex-direction:column;align-items:center;gap:.55rem;
  text-align:center;animation:rblup-op .13s ease-out}
@keyframes rblup-op{
  from{opacity:0;transform:scale(.965)}
  to{opacity:1;transform:scale(1)}
}

/* 325 px bredt — præcis samme læsbredde som forstørrelsen ved bordet. */
.rblup img{display:block;width:min(325px,86vw);height:auto;border-radius:14px;
  box-shadow:0 20px 54px -16px rgba(0,0,0,.95),0 0 0 1px rgba(167,139,250,.55)}

/* Kortbilledet bærer teksten selv. Navnelinjen står kun under kortet
   for de kort der ikke har noget billede. */
.rblup__in:not(.rblup__in--tekst) .rblup__navn,
.rblup__in:not(.rblup__in--tekst) .rblup__meta{display:none}
.rblup__navn{font-family:var(--display);font-size:1.15rem;line-height:1.15}
.rblup__meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rb-lys)}

/* Uden billede er teksten det eneste der er — så får den en plade. */
.rblup__in--tekst{width:min(325px,86vw);padding:1.1rem 1.2rem;border-radius:14px;
  background:var(--felt-deep);border:1px solid rgba(139,92,246,.35);
  box-shadow:0 20px 54px -16px rgba(0,0,0,.95)}
.rblup__tekst{font-size:.86rem;line-height:1.55;color:var(--chalk-dim);
  white-space:pre-wrap;margin-top:.5rem;text-align:left}

/* Ingen mus, intet hover — så skal luppen slet ikke kunne komme frem. */
@media (hover:none){ .rblup{display:none} }

/* Mulligan-skærmen bruger samme kortklasse som hånden, men dér skal
   kortene IKKE ligge i en vifte — man skal kunne se alle fire på én
   gang for at vælge mellem dem. */
.rb2__mull .rb2raekke--haand{min-height:auto;padding-top:0;flex-wrap:wrap}
.rb2__mull .rb2raekke--haand .rb2kort--haand{
  margin-inline:.45rem;transform:none;box-shadow:0 14px 30px -14px rgba(0,0,0,.9)}
.rb2__mull .rb2raekke--haand .rb2kort--haand:hover{transform:translateY(-10px) scale(1.04)}
.rb2__mull .rb2raekke--haand .rb2kort--haand.is-fravalgt{
  transform:translateY(8px);opacity:.42}

/* =====================================================================
   RIFTBOUND — BANEN
   ---------------------------------------------------------------------
   Bygget efter Rift Atlas' simulator. Én sammenhængende flade i stedet
   for paneler: modstanderen foroven, to battlefields i midten, dig
   forneden, og et pointspor som en kæde af tal langs kanterne.

   Banen er et grid med navngivne felter. Det var dét der gjorde den
   gamle udgave forkert — den var en lodret stak, og en stak kan ikke
   have et hjørne. Her ligger hvert hjørne hvor det skal.
   ===================================================================== */

.rbord{
  --bane:#16294A; --bane-dyb:#0E1C36; --bane-linje:rgba(255,255,255,.13);
  --guld:#E3A63C; --hak:rgba(255,255,255,.20);
  display:grid;grid-template-columns:1fr 300px;gap:1rem;align-items:start;
}
@media (max-width:1150px){.rbord{grid-template-columns:1fr}}

.rbord__bane{
  position:relative;display:grid;gap:.4rem 1rem;padding:.8rem 1.1rem 1rem;
  border-radius:16px;
  border:1px solid var(--bane-linje);border-top:2px solid rgba(227,166,60,.55);
  background:
    radial-gradient(ellipse 90% 60% at 50% 50%,rgba(90,130,200,.10),transparent 70%),
    linear-gradient(180deg,var(--bane-dyb),var(--bane) 45%,var(--bane-dyb));
  box-shadow:inset 0 0 120px rgba(0,0,0,.55);
  grid-template-columns:170px 1fr 170px;
  grid-template-rows:repeat(6,auto);
  grid-template-areas:
    "prompt prompt  prompt"
    "demv   demhaand demh"
    "demleg demleg  demleg"
    "bf     bf      bf"
    "base   runer   mitleg"
    "mitv   haand   knap";
  padding-inline:3.6rem;          /* plads til pointsporene langs kanten */
}
@media (max-width:900px){
  .rbord__bane{grid-template-columns:1fr;
    grid-template-areas:"prompt" "demh" "demleg" "bf" "base" "runer" "mitleg"
      "mitv" "haand" "knap";
    padding-inline:1rem}
  .rbord__f--demv,.rbord__demhaand,.rbord__f--demspor,.rbord__f--mitspor{display:none}
}

.rbord__f--demv{grid-area:demv;display:flex;align-items:flex-start;gap:.5rem}
.rbord__demhaand{grid-area:demhaand;display:flex;justify-content:center;
  align-items:flex-start;min-height:36px}
.rbord__f--demh{grid-area:demh;display:flex;align-items:flex-start;
  justify-content:flex-end;gap:.6rem;flex-wrap:wrap}
.rbord__f--demleg{grid-area:demleg;display:flex;align-items:flex-start}
.rbord__f--demleg.is-flere{display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* Sporene ligger oven på banen langs kanterne. Absolut placering er
   netop pointen: så kan de være 9 felter høje uden at trække resten af
   brættet fra hinanden. */
.rbord__f--demspor{position:absolute;right:.5rem;top:2.6rem}
.rbord__f--bf{grid-area:bf;display:grid;gap:.8rem;align-content:center;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));padding:.4rem 0}
.rbord__f--mitspor{position:absolute;left:.5rem;bottom:1rem}
.rbord__f--runer{grid-area:runer;display:flex;align-items:flex-end;gap:.7rem;
  justify-content:center;flex-wrap:wrap}
.rbord__f--base{grid-area:base;align-self:flex-end}
.rbord__f--mitleg{grid-area:mitleg;display:flex;justify-content:flex-end;
  align-items:flex-end}
.rbord__f--mitv{grid-area:mitv;display:flex;align-items:flex-end;gap:.7rem;
  flex-wrap:wrap}
.rbord__f--knap{grid-area:knap;display:flex;flex-direction:column;
  align-items:flex-end;justify-content:flex-end;gap:.5rem}
.rbord__haand{grid-area:haand;display:flex;justify-content:center;align-items:flex-end}

/* ---------- den lille versalskrift der går igen ---------- */

.rbord__mrk{display:block;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42)}

/* ---------- midterbeskeden ---------- */

.rbord__prompt{
  grid-area:prompt;display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding:.4rem .8rem;margin-bottom:.2rem;
  border-bottom:1px solid var(--bane-linje);
}
.rbord__prompt.is-min{border-bottom-color:rgba(227,166,60,.5)}
.rbord__prompt__stor{font-family:var(--display);font-size:1.05rem;
  letter-spacing:.06em;text-transform:uppercase}
.rbord__prompt.is-min .rbord__prompt__stor{color:var(--guld)}
.rbord__prompt__smaa{font-family:var(--mono);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}

/* ---------- kortrygge og bunker ---------- */

.rbryg{position:relative;width:46px;aspect-ratio:744/1039;border-radius:7px;flex:none;
  background:linear-gradient(160deg,#0F3A47,#0A2632);
  border:1px solid rgba(227,166,60,.4)}
.rbryg::after{content:'';position:absolute;inset:22% 16%;
  border:1px solid rgba(227,166,60,.55);transform:rotate(45deg)}
.rbryg--rune{background:linear-gradient(160deg,#E9EFF3,#BFCCD6);
  border-color:rgba(255,255,255,.7)}
.rbryg--rune::after{border-color:rgba(20,50,70,.45)}
.rbryg__tal{position:absolute;right:-6px;bottom:-6px;min-width:21px;height:21px;
  display:grid;place-items:center;padding:0 .25rem;border-radius:5px;
  background:var(--bane-dyb);border:1px solid var(--bane-linje);
  font-family:var(--mono);font-size:.68rem;color:var(--chalk)}

.rbord__bunker{display:flex;align-items:flex-end;gap:.45rem}
/* Navneskiltet og floating står ved siden af bunkerne, ikke over dem. */
.rbord__f--mitv .rbskilt{align-self:flex-end}
.rbord__f--mitv .rbfloat{display:flex;flex-direction:column;gap:.1rem}
.rbtrash{font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.45);
  border:1px dashed rgba(255,255,255,.18);border-radius:6px;padding:.2rem .45rem;
  align-self:center}

/* ---------- pointsporet ---------- */

.rbspor{display:flex;flex-direction:column;gap:.22rem;align-items:center}
.rbspor__pip{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:.78rem;font-style:normal;
  color:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.13);
  background:rgba(0,0,0,.18);transition:.15s}
.rbspor__pip:nth-child(even){transform:translateX(-18px)}
.rbspor--op .rbspor__pip:nth-child(even){transform:translateX(18px)}
.rbspor__pip.is-naaet{color:rgba(255,255,255,.62);border-color:rgba(227,166,60,.35)}
.rbspor__pip.is-nu{color:#fff;background:rgba(227,166,60,.16);border-color:var(--guld);
  box-shadow:0 0 0 3px rgba(227,166,60,.16),0 0 22px -4px var(--guld)}

/* ---------- navneskilt og floating ---------- */

.rbskilt{display:flex;align-items:center;gap:.5rem;padding:.35rem .7rem .35rem .4rem;
  border-radius:99px;border:1px solid var(--bane-linje);background:rgba(0,0,0,.28);
  font-size:.86rem;font-weight:650}
.rbskilt.is-tur{border-color:var(--guld);box-shadow:0 0 20px -8px var(--guld)}

.rbfloat{text-align:right}
.rbfloat__rk{display:flex;gap:.6rem;justify-content:flex-end;align-items:baseline;
  font-size:.8rem}
.rbfloat__rk b{font-weight:500;color:rgba(255,255,255,.55)}
.rbfloat__rk i{font-family:var(--mono);font-style:normal;font-size:.95rem;
  color:var(--chalk);min-width:1.2em;text-align:right}
.rbord__f--mitv .rbfloat{text-align:left}
.rbord__f--mitv .rbfloat__rk{justify-content:flex-start}

/* ---------- hjørnehak: fire vinkler i stedet for en hel kasse ---------- */

.rbhak{
  background-image:
    linear-gradient(var(--hak),var(--hak)),linear-gradient(var(--hak),var(--hak)),
    linear-gradient(var(--hak),var(--hak)),linear-gradient(var(--hak),var(--hak)),
    linear-gradient(var(--hak),var(--hak)),linear-gradient(var(--hak),var(--hak)),
    linear-gradient(var(--hak),var(--hak)),linear-gradient(var(--hak),var(--hak));
  background-repeat:no-repeat;
  background-size:18px 1px,1px 18px,18px 1px,1px 18px,
                  18px 1px,1px 18px,18px 1px,1px 18px;
  background-position:left top,left top,right top,right top,
                      left bottom,left bottom,right bottom,right bottom;
}

/* ---------- battlefields ---------- */

.rbbf{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.4rem;padding:.7rem .8rem;border-radius:6px;
  min-height:138px;transition:background-color .15s}
.rbbf.is-mit{--hak:rgba(61,158,96,.6);background-color:rgba(61,158,96,.05)}
.rbbf.is-deres{--hak:rgba(220,75,52,.6);background-color:rgba(220,75,52,.05)}
.rbbf.is-showdown{--hak:var(--guld);background-color:rgba(227,166,60,.07);
  box-shadow:0 0 40px -14px rgba(227,166,60,.8)}
.rbbf.is-maal{--hak:#A78BFA;cursor:pointer;background-color:rgba(139,92,246,.09)}
.rbbf.is-maal:hover{background-color:rgba(139,92,246,.18);
  box-shadow:0 0 40px -12px rgba(139,92,246,.9)}
.rbbf__rk{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;min-height:20px}
.rbbf__kontrol{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.38);text-align:center}
.rbbf.is-mit .rbbf__kontrol{color:var(--voice)}
.rbbf.is-deres .rbbf__kontrol{color:var(--pennant)}

/* ---------- kortstørrelser på banen ---------- */

.rb2kort--lille{width:48px}
.rb2kort--rune{width:50px}
.rb2kort--legend{width:62px}
.rb2kort--bf{width:146px}
.rb2kort--bf img{aspect-ratio:auto;height:auto}
.rbord__kortrk{display:flex;gap:.4rem;flex-wrap:wrap;align-items:flex-end}
.rbkanal{font-family:var(--mono);font-size:.78rem;color:var(--guld);
  border:1px solid rgba(227,166,60,.3);border-radius:6px;padding:.15rem .45rem}

/* ---------- modstanderkort, når der er flere end én ---------- */

.rbmod{padding:.6rem .75rem;border-radius:10px;background:rgba(0,0,0,.25);
  border:1px solid var(--bane-linje)}
.rbmod.is-tur{border-color:var(--guld)}
.rbmod__hoved{display:flex;align-items:center;gap:.45rem;margin-bottom:.4rem}
.rbmod__navn{flex:1 1 auto;font-weight:650;font-size:.85rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rbmod__point{font-family:var(--mono);font-size:.78rem;color:var(--guld)}
.rbmod__tal{display:flex;flex-wrap:wrap;gap:.1rem .7rem;font-family:var(--mono);
  font-size:.72rem;color:rgba(255,255,255,.5)}
.rbmod__tal small{margin-left:.2em;opacity:.6}
.rbmod .rbord__kortrk{margin-top:.5rem}

/* ---------- hånden: viftet og hængende fra bundkanten ---------- */

.rbhaand__rk{display:flex;justify-content:center;align-items:flex-end;
  flex-wrap:nowrap}
.rb2kort--haand{width:102px}
.rbhaand__rk .rb2kort--haand{
  margin-inline:var(--spredning,-24px);transform-origin:50% 135%;
  transform:rotate(var(--vinkel,0deg)) translateY(var(--loft,0px));
  box-shadow:0 -4px 26px -10px rgba(0,0,0,.95)}

/* Modstanderens hånd: rygge, hængende ned fra overkanten. */
.rbryg--haand{width:38px;margin-inline:-14px;transform-origin:50% -30%;
  transform:rotate(var(--vinkel,0deg))}

/* ---------- slut turen ---------- */

.rbslut{display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.55rem 1.4rem;border-radius:8px;border:1px solid var(--bane-linje);
  background:rgba(0,0,0,.3);color:inherit;transition:.15s}
.rbslut i{font-style:normal;font-size:1.1rem;line-height:1}
.rbslut:not(:disabled):hover{border-color:var(--guld);background:rgba(227,166,60,.14)}
.rbslut:disabled{opacity:.35;cursor:default}

/* ---------- chainen, svævende ---------- */

.rb2__chain{position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);
  z-index:7;width:min(300px,42vw)}
@media (max-width:1150px){.rb2__chain{position:static;transform:none;width:auto;
  margin-top:1rem}}

/* ---------- aktivitetssporet ---------- */

.rbord__log{display:flex;flex-direction:column;gap:.5rem;padding:.9rem 1rem;
  border-radius:14px;border:1px solid var(--bane-linje);
  background:rgba(14,28,54,.6);max-height:min(70vh,640px);overflow:hidden}
.rblog__liste{display:flex;flex-direction:column;gap:.3rem;overflow-y:auto;
  padding-right:.3rem}
.rblog__r{display:grid;grid-template-columns:auto 1fr;gap:.5rem;font-size:.78rem;
  line-height:1.45;color:var(--chalk-dim);padding:.3rem .1rem;
  border-bottom:1px solid rgba(255,255,255,.05)}
.rblog__r i{font-family:var(--mono);font-style:normal;font-size:.66rem;
  color:rgba(255,255,255,.3);padding-top:.15em}
.rblog__r.is-mig{color:var(--chalk)}
.rblog__r.is-mig i{color:var(--guld)}

.rb2__note{font-size:.76rem;line-height:1.5;color:var(--chalk-dim);opacity:.65;
  max-width:70ch;margin:.4rem .2rem 0;grid-column:1/-1}

@media (max-width:700px){
  .rb2kort--haand{width:86px}
  .rbhaand__rk{margin-bottom:-28px}
  .rbord__prompt{padding:.5rem 1rem;white-space:normal}
}

/* =====================================================================
   FORSTØRRELSE PÅ STEDET
   ---------------------------------------------------------------------
   Ved bordet skal et kort kunne læses uden at man mister synet af
   resten — man står midt i en tur. Derfor vokser kortet dér hvor det
   ligger i stedet for at lægge sig midt på skærmen.

   Hvert felt har sit eget vokse-punkt: modstanderens kort vokser
   nedad, dine vokser opad, midten vokser til begge sider. Ellers ville
   halvdelen af dem vokse ud over skærmkanten.

   Målet er ca. 250 px bredt, uanset hvor lille kortet var i forvejen —
   dét er bredden hvor Riots egen regeltekst kan læses.
   ===================================================================== */

.rbord__bane .rb2kort{
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
  will-change:transform}

.rbord__bane .rb2kort:hover,
.rbord__bane .rb2kort.is-klikbar:hover,
.rbord__bane .rb2kort:focus-visible{
  transform:rotate(0deg) scale(var(--zoom,3));
  z-index:60;border-color:var(--rb-lys);
  box-shadow:0 10px 30px -6px rgba(0,0,0,.95),0 0 0 1px rgba(167,139,250,.7);
}

/* Vokse-faktor per kortstørrelse, så alle ender omkring 250 px. */
/* Kortene på banen blev mindre for at spare højde, så zoomen skal op
   tilsvarende. Målet er det samme: omkring 325 px bredt, hvor selv den
   fine tekst nederst på kortet kan læses. */
.rb2kort--lille{--zoom:6.8}
.rb2kort--rune{--zoom:6.5}
.rb2kort--legend{--zoom:5.2}
.rb2kort--haand{--zoom:3.2}
.rb2kort--bf{--zoom:2.2}

/* Vokseretning. Modstanderens kort ned, dine op, midten ud til siden. */
.rbord__f--demleg .rb2kort,.rbord__demhaand .rbryg{transform-origin:top center}
.rbord__f--demv .rbryg,.rbord__f--demh .rbryg{transform-origin:top center}
.rbord__f--mitleg .rb2kort{transform-origin:bottom right}
.rbord__f--mitv .rb2kort,.rbord__f--runer .rb2kort,
.rbord__f--base .rb2kort{transform-origin:bottom left}
.rbhaand__rk .rb2kort--haand{transform-origin:50% 105%}
.rbbf .rb2kort{transform-origin:center center}

/* Hånden: viften retter sig op og kortet vokser, men bliver hvor det er. */
.rbhaand__rk .rb2kort--haand:hover,
.rbhaand__rk .rb2kort--haand:focus-visible{
  transform:rotate(0deg) translateY(-8px) scale(var(--zoom,2.1));
  z-index:60 !important}

/* Det forstørrede kort skal ikke skygges af naboerne. */
.rbord__bane .rb2kort:hover img{image-rendering:auto}

/* Kort med nøgleord motoren ikke håndhæver. Mærket skal kunne ses uden
   at man peger på kortet — ellers opdager man det først, når man undrer
   sig over at der ikke skete noget. */
.rb2kort--selv::after{content:'';position:absolute;top:3px;left:3px;
  width:7px;height:7px;border-radius:50%;background:var(--guld);
  box-shadow:0 0 7px 1px rgba(227,166,60,.9);pointer-events:none}