/* Straits Deal · a night table.
   Borrowed on purpose: the dark teal panels and single lime action accent of Neon Straits, the chunky
   mono counters of Last Kyotoan Standing, and Coup's three bands (others, stage, you) on one screen.
   Hand cards are pale paper so they read as cards; everything laid on the table is a compact dark strip. */
@font-face{font-family:"SD Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url('./fonts/geist-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"SD Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url('./fonts/geist-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"SD Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url('./fonts/geist-mono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"SD Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url('./fonts/geist-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{color-scheme:dark;
 --font:"SD Geist",Arial,Helvetica,sans-serif;--mono:"SD Geist Mono",ui-monospace,Consolas,monospace;
 --bg:#0a1014;--panel:#131d23;--panel-2:#1a272e;--panel-3:#22333b;--line:#33454c;--line-2:#4e666d;
 --text:#eff4ee;--muted:#b1c1c3;--faint:#8a9da0;
 --lime:#d9ed96;--lime-ink:#17210a;--cyan:#9fdbe0;--coral:#ff8068;--gold:#f4d267;
 --paper:#f3f0e3;--ink:#142026;--ink-2:#44555c;
 --table-art:url('./art/table.webp');--back-art:url('./art/back.webp');--hero-art:url('./art/hero.webp');--hero-overhang:32vh;
 --radius:10px;--ease:cubic-bezier(.2,.8,.2,1)}
/* Steppe Deal: night-blue felt, the gold and red of the banner, the eternal blue sky for the second accent. */
body[data-skin="steppe"]{--bg:#080c1a;--panel:#10172e;--panel-2:#172040;--panel-3:#212d57;--line:#2b3966;--line-2:#4a5c99;
 --text:#f2efe6;--muted:#b3bbd6;--faint:#8590b5;--lime:#f4c64a;--lime-ink:#241a02;--cyan:#7cc3f5;--coral:#ef5a4c;--gold:#f4c64a;
 --table-art:url('./skins/steppe/art/table.webp');--back-art:url('./skins/steppe/art/back.webp');--hero-art:url('./skins/steppe/art/hero.webp');--hero-overhang:41vh}
/* Nippon Deal: city pop. Night blue, hot pink for action, aqua for the second accent. */
body[data-skin="nippon"]{--bg:#070a1c;--panel:#0e1330;--panel-2:#151c44;--panel-3:#1f2960;--line:#2a3570;--line-2:#4d5db0;
 --text:#f4f6ff;--muted:#b9c1ea;--faint:#8690c4;--lime:#ff6fae;--lime-ink:#2b0518;--cyan:#62e0ea;--coral:#ff8a5c;--gold:#ffd66b;
 --table-art:url('./skins/nippon/art/table.webp');--back-art:url('./skins/nippon/art/back.webp');--hero-art:url('./skins/nippon/art/hero.webp');--hero-overhang:28vh}
body[data-skin="nippon"] button:hover:not(:disabled):not(.quiet):not(.ghost):not(.danger):not(.sd-mini):not(.sd-hand-card):not(.sd-hand-pill){background:#ff8fc0}
/* Nippon Deal: city pop. Night blue, hot pink for action, aqua for the second accent. */
body[data-skin="nippon"]{--bg:#070a1c;--panel:#0e1330;--panel-2:#151c44;--panel-3:#1f2960;--line:#2a3570;--line-2:#4d5db0;
 --text:#f4f6ff;--muted:#b9c1ea;--faint:#8690c4;--lime:#ff6fae;--lime-ink:#2b0518;--cyan:#62e0ea;--coral:#ff8a5c;--gold:#ffd66b;
 --table-art:url('./skins/nippon/art/table.webp');--back-art:url('./skins/nippon/art/back.webp');--hero-art:url('./skins/nippon/art/hero.webp');--hero-overhang:28vh}
body[data-skin="nippon"] button:hover:not(:disabled):not(.quiet):not(.ghost):not(.danger):not(.sd-mini):not(.sd-hand-card):not(.sd-hand-pill){background:#ff8fc0}
/* World Deal: a passport. Deep navy, gold for action, coral for the second accent. */
body[data-skin="world"]{--bg:#070d1a;--panel:#0e172b;--panel-2:#15213c;--panel-3:#1f2f54;--line:#2a3b63;--line-2:#4a6199;
 --text:#f5f1e4;--muted:#b9c2d8;--faint:#8792b0;--lime:#f2c14e;--lime-ink:#241a02;--cyan:#ef7d63;--coral:#ef7d63;--gold:#f2c14e;
 --table-art:url('./skins/world/art/table.webp');--back-art:url('./skins/world/art/back.webp');--hero-art:url('./skins/world/art/hero.webp');--hero-overhang:20vh}
/* Troika Deal: the old box. Red, white and black, with white cards and heavy black edges. */
body[data-skin="troika"]{--bg:#130909;--panel:#1e1112;--panel-2:#2a1719;--panel-3:#3b2023;--line:#4d2a2d;--line-2:#80494d;
 --text:#fbf6ee;--muted:#dcc6c2;--faint:#aa8d89;--lime:#ffd23f;--lime-ink:#241a02;--cyan:#ff6b5e;--coral:#ff6b5e;--gold:#ffd23f;--paper:#fffefa;
 --table-art:url('./skins/troika/art/table.webp');--back-art:url('./skins/troika/art/back.webp');--hero-art:url('./skins/troika/art/hero.webp');--hero-overhang:15vh}
body[data-skin="troika"] .sd-card{border:2px solid #111}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
html{background:var(--bg)}
body.sd-page{min-height:100vh;min-height:100dvh;color:var(--text);font:15px/1.45 var(--font);
 background:radial-gradient(1100px 520px at 88% -12%,#1d3a33 0,transparent 60%),radial-gradient(900px 520px at -10% 108%,#2a1c3a 0,transparent 55%),var(--bg)}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
button{cursor:pointer;min-height:42px;padding:.55rem 1rem;border-radius:8px;border-top:1px solid var(--lime);border-right:1px solid var(--lime);border-bottom:1px solid var(--lime);border-left:1px solid var(--lime);box-shadow:none;background:var(--lime);color:var(--lime-ink);font-weight:650;letter-spacing:.005em;transition:transform .09s ease,background-color .15s ease,border-color .15s ease}
button:hover:not(:disabled){background:#e7f6b4}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{cursor:not-allowed;opacity:.45}
button.quiet,button.ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
button.quiet:hover:not(:disabled),button.ghost:hover:not(:disabled){background:var(--panel-3);border-color:var(--cyan)}
button.ghost{min-height:36px;padding:.35rem .75rem;font-size:13px;font-weight:550}
button.danger{background:var(--coral);border-color:var(--coral);color:#2a0c05}
button.danger:hover:not(:disabled){background:#ff9a86}
input,select{min-height:42px;padding:.5rem .7rem;border:1px solid var(--line-2);border-radius:8px;background:#0e171c}
.sd-muted{color:var(--muted)}
.sd-eyebrow{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}

/* Entry */
.sd-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px clamp(16px,4vw,40px);font:500 13px var(--mono);color:var(--muted)}
.sd-top a{text-decoration:none;color:var(--text)}
.sd-top a span{color:var(--faint)}
#entry{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,400px);gap:clamp(24px,5vw,64px);align-items:center;max-width:1120px;margin:0 auto;padding:clamp(24px,6vh,72px) clamp(16px,4vw,40px) 64px}
body.sd-page:not(.in-match){background:linear-gradient(90deg,#0a1014 0,#0a1014e0 26%,#0a101433 52%,#0a101466 72%,#0a1014d9 100%),linear-gradient(0deg,#0a1014 4%,transparent 45%),var(--hero-art) 70% center/cover fixed,var(--bg)}
.sd-hero h1{font-size:clamp(44px,8vw,88px);line-height:.95;letter-spacing:-.035em;font-weight:750;margin:14px 0 18px}
.sd-hero h1 span{color:var(--lime)}
.sd-hero h1 b{font-weight:inherit}
.sd-skin-field{flex:none}
.sd-hero-copy{max-width:46ch;color:var(--muted);font-size:17px;margin-bottom:22px}
.sd-setup{display:grid;gap:14px}
.sd-entry-card{display:grid;gap:10px;padding:18px;border:1px solid var(--line-2);border-radius:14px;background:linear-gradient(180deg,#1a272ef2,#131d23f2);backdrop-filter:blur(8px)}
.sd-entry-card h2{font-size:18px}
.sd-entry-card p{color:var(--muted);font-size:14px}
.sd-entry-row{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.sd-field{display:grid;gap:5px;flex:1 1 140px;font:500 12px var(--mono);color:var(--muted);letter-spacing:.04em}
.sd-setup-buttons{display:flex;flex-wrap:wrap;gap:10px}
.sd-error{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;max-width:min(92vw,560px);padding:10px 16px;border:1px solid var(--coral);border-radius:10px;background:#2b1310;color:#ffd0c6}
.sd-connection{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:60;max-width:92vw;padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--panel-2);font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;overflow-wrap:anywhere}
.sd-connection.show{opacity:1}

/* Full-height art, with the face and cards between the copy and form.
   Each 120px side fade ends on dark ground before the text or the image edge. */
@media (min-width:981px){
 body.sd-page:not(.in-match){--entry-copy:clamp(280px,calc(12.5vw + 120px),360px);--entry-form:340px;--entry-left:40px;
  --hero-focus:92vh;--hero-left:calc((var(--entry-left) + var(--entry-copy) + 100vw - var(--entry-form) - 40px)/2 - var(--hero-focus));
  --hero-fade-left:max(calc(var(--entry-left) + var(--entry-copy)),var(--hero-left));--hero-fade-right:min(calc(100vw - var(--entry-form) - 40px),calc(var(--hero-left) + 150vh));
  background:linear-gradient(90deg,#0a1014 var(--hero-fade-left),transparent calc(var(--hero-fade-left) + 120px),transparent calc(var(--hero-fade-right) - 120px),#0a1014 var(--hero-fade-right)),linear-gradient(0deg,#0a1014 4%,transparent 45%),var(--hero-art) left var(--hero-left) top/auto 100vh no-repeat fixed,#0a1014}
 /* Horizontal focus measured against the height of the 3:2 source art. */
 body.sd-page[data-skin="steppe"]{--hero-focus:82vh}
 body.sd-page[data-skin="nippon"]{--hero-focus:90vh}
 body.sd-page[data-skin="troika"]{--hero-focus:96vh}
 body.sd-page[data-skin="world"]{--hero-focus:97vh}
 #entry{grid-template-columns:var(--entry-copy) var(--entry-form);justify-content:space-between;max-width:none;min-height:calc(100dvh - 51px);padding:20px 40px 24px var(--entry-left)}
 #entry .sd-hero h1{font-size:clamp(60px,5vw,80px)}
 #entry .sd-hero-copy{max-width:100%}
 #entry .sd-setup{gap:8px}
 #entry .sd-entry-card{gap:8px;padding:12px}
 #entry .sd-entry-row .sd-field{min-width:0;flex-basis:0}
 #entry .sd-entry-row input,#entry .sd-entry-row select{min-width:0;width:100%}
}
@media (min-width:1600px){
 body.sd-page:not(.in-match){--entry-left:min(6vw,140px)}
}

/* Match frame */
body.in-match{height:100dvh;overflow:hidden}
.sd-match{display:flex;flex-direction:column;height:100dvh;background:linear-gradient(180deg,#0a1014d9,#0a1014f2),var(--table-art) center/cover}
.sd-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px clamp(10px,2vw,20px);border-bottom:1px solid var(--line);background:#0c151af2}
.sd-bar-title{display:flex;align-items:baseline;gap:12px;min-width:0}
.sd-bar-home{font-weight:750;font-size:17px;letter-spacing:-.01em;text-decoration:none}
.sd-bar-room{font:500 12px var(--mono);color:var(--muted);white-space:nowrap}
.sd-bar-net{font:500 12px var(--mono);color:var(--cyan);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-bar-net[data-state="warn"]{color:var(--gold)}
.sd-bar-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sd-arena{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr)}
/* The column never scrolls and its three bands never overlap: rivals on top at their natural height, the stage, then your
   table taking the rest. `fitTable()` in client.js shrinks the rivals' cards until everything is inside the window. */
.sd-main{min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.sd-scroll{flex:none;overflow:visible;display:flex;flex-direction:column;gap:12px;padding:12px clamp(10px,2vw,20px) 10px}
/* The log, watchers and notes are a drawer on every screen: closed until the Log button opens it, so the table has the full width. */
.sd-side{position:fixed;inset:0 0 0 auto;width:min(340px,92vw);z-index:45;min-height:0;overflow-y:auto;display:grid;align-content:start;gap:18px;padding:14px;border-left:1px solid var(--line-2);background:var(--panel);transform:translateX(100%);visibility:hidden;transition:transform .2s var(--ease),visibility .2s;box-shadow:-18px 0 40px #0008}
body.side-open .sd-side{transform:none;visibility:visible}
.sd-side h2{font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.sd-side h2 span{color:var(--lime)}
.sd-log{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:13.5px;color:var(--muted)}
.sd-log li:first-child{color:var(--text)}
.sd-trust{font-size:12.5px;color:var(--faint)}


/* Seats: one panel per player, counters first. */
.sd-rivals{display:grid;gap:10px;grid-template-columns:repeat(var(--rivals,2),minmax(0,1fr))}
.sd-seat{min-width:0;border:1px solid #ffffff14;border-top:3px solid var(--seat,var(--line-2));border-radius:14px;background:linear-gradient(180deg,#16242bd9,#101a20cc);box-shadow:inset 0 0 0 4px #0a101466,inset 0 0 40px #0006;padding:10px 12px 12px}
.sd-seat.is-turn{border-color:var(--lime);outline:1px solid var(--lime);background:linear-gradient(180deg,color-mix(in srgb,var(--seat) 9%,var(--panel)),var(--panel) 70%)}
.sd-seat-head{display:flex;flex-wrap:nowrap;align-items:center;gap:6px 8px;margin-bottom:8px;min-width:0}
.sd-seat-head .sd-tag,.sd-seat-head .sd-stats,.sd-seat-head .sd-avatar{flex:none}
.sd-avatar{position:relative;flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px solid var(--seat,var(--line-2));background:color-mix(in srgb,var(--seat,var(--line-2)) 22%,var(--panel-3));font:750 16px/1 var(--font);color:var(--text);overflow:hidden}
.sd-avatar-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sd-seat-head h2{flex:0 1 auto;min-width:0;font-size:16px;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-tag{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;border-radius:4px;background:var(--panel-3);color:var(--muted)}
.sd-tag.turn{background:var(--lime);color:#10181c}
.sd-tag.warn{background:#3a2a10;color:var(--gold)}
.sd-stats{display:flex;gap:14px;margin-left:auto}
.sd-counter{display:grid;justify-items:end;font:500 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.sd-counter b{font:700 20px/1 var(--mono);letter-spacing:-.02em;color:var(--text);text-transform:none}
.sd-counter.sets b{color:var(--seat,var(--lime))}
.sd-pips{display:flex;gap:3px;margin-top:3px}
.sd-pips i{width:12px;height:5px;border-radius:2px;background:var(--panel-3)}
.sd-pips i.on{background:var(--seat,var(--lime))}
.sd-table{display:flex;flex-wrap:wrap;gap:10px 8px;align-items:flex-start;padding:4px 2px 0}
/* Cards on the table are small real cards. A colour pile overlaps downward so every title band shows. */
.sd-seat{--mw:84px;--step:24px}
.sd-seat.is-me{--mw:88px;--step:25px}
.sd-mini{display:block;min-height:0;padding:0;border-color:transparent;background:transparent;border-radius:8px;transition:transform .14s var(--ease)}
.sd-mini:disabled{opacity:1;cursor:default}
.sd-mini:hover{background:transparent}
.sd-mini .sd-card{--w:var(--mw);border-radius:7px;box-shadow:0 3px 8px #0009}
.sd-mini{position:relative}
.sd-mini .sd-card-band{display:block;min-height:var(--step);padding:0 calc(var(--mw)*.3) 0 6px;font-size:max(10.5px,calc(var(--mw)*.125));line-height:var(--step);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-pile .sd-mini .sd-card{border-left:5px solid var(--pile)}
.sd-pile .sd-mini .sd-card-value{display:none}
.sd-pile .sd-mini .sd-card-band{padding-right:5px}
.sd-mini-tag{position:absolute;top:4px;left:4px;z-index:3;padding:1px 5px;border-radius:999px;border:1px solid #14202699;background:var(--gold);color:#221c02;font:700 11px/1.25 var(--mono)}
.sd-bank .sd-mini .sd-card-value{display:none}
.sd-mini.look{cursor:zoom-in}
.sd-mini .sd-card-value{top:4px;right:3px;min-width:0;padding:1px 4px;font-size:max(9.5px,calc(var(--mw)*.11))}
.sd-mini .sd-card-kind,.sd-mini .sd-card-text,.sd-mini .sd-ladder{display:none}
.sd-mini .sd-card-body{padding:3px 5px;justify-content:center}
.sd-mini .sd-card-art{flex:1 1 auto}
.sd-mini .sd-card[data-type="property"] .sd-card-body,.sd-mini .sd-card[data-type="wild"] .sd-card-body{display:none}
.sd-mini .sd-card-name{font-size:calc(var(--mw)*.125)}
.sd-mini .sd-card-effect{font-size:calc(var(--mw)*.15)}
.sd-mini .sd-card.is-effect .sd-card-band{min-height:0;padding:2px 5px;font-size:calc(var(--mw)*.085);letter-spacing:.04em}
.sd-mini .sd-card-big{min-width:0;padding:2px 7px 1px;border-width:1.5px;font-size:calc(var(--mw)*.2)}
.sd-mini .sd-card[data-type="money"] .sd-card-body{padding-bottom:5px}
.sd-mini.can .sd-card{outline:2px solid var(--cyan);outline-offset:1px}
.sd-mini.can:hover{transform:translateY(-3px)}
.sd-mini.picked .sd-card{outline:3px solid var(--lime);outline-offset:1px}
.sd-pile,.sd-bank{display:grid;gap:5px;justify-items:start}
.sd-pile-cards{display:grid;padding:3px;border-radius:10px}
.sd-pile-cards .sd-mini+.sd-mini{margin-top:calc(var(--step) - var(--mw)*1.44)}
.sd-pile.is-full .sd-pile-cards{background:color-mix(in srgb,var(--pile) 26%,transparent);outline:2px solid var(--pile)}
.sd-bank-cards{display:flex;min-height:calc(var(--mw)*1.44 + 6px);min-width:var(--mw);padding:3px;border-radius:10px;border:1px dashed #f4d26755}
.sd-bank-cards .sd-mini+.sd-mini{margin-left:calc(var(--mw)*-.56)}
.sd-bank-empty{margin:auto;font:500 11px var(--mono);color:var(--faint)}
.sd-pile-foot{display:grid;gap:1px;justify-items:start;min-width:calc(var(--mw) + 6px);padding:0 3px;font-size:11px;line-height:1.2}
.sd-pile-foot strong{white-space:nowrap}
.sd-pile-foot strong{font-size:11.5px;border-bottom:2px solid var(--pile,var(--gold))}
.sd-pile-rent{font-family:var(--mono);color:var(--lime)}
/* A crowded table: piles close up and their labels keep only the numbers (the full label is the pile's tooltip). */
.sd-seat.tight .sd-table{gap:6px 3px}
.sd-seat.tight .sd-pile-word{display:none}
.sd-seat.tight .sd-pile-foot{display:flex;gap:4px;width:calc(var(--mw) + 6px);padding:0 2px;font-size:10px;white-space:nowrap}
.sd-seat.tight .sd-pile-foot strong{font-size:10px}
.sd-seat.tight .sd-bank .sd-pile-foot strong{display:none}
.sd-seat.tight .sd-pile-cards,.sd-seat.tight .sd-bank-cards{padding:2px}
.sd-seat.tight .sd-bank-cards .sd-mini+.sd-mini{margin-left:calc(var(--mw)*-.7)}
.sd-seat.tight{padding:5px 6px 6px}
.sd-you.squeezed{min-height:calc(var(--hand-peek) + 120px)}
.sd-bank .sd-pile-rent{color:var(--gold)}

/* Stage: the deck, the last card played, and the one question being asked. */
.sd-stage{--hw:calc(clamp(118px,17vh,156px)*.6);flex:none;margin:0 clamp(10px,2vw,20px) 10px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:10px 14px;border:1px solid var(--line-2);border-radius:14px;background:radial-gradient(600px 200px at 20% 0,#1f3a36cc 0,transparent 70%),#1a272ef5;backdrop-filter:blur(6px);box-shadow:0 10px 24px #0006}
.sd-piles{display:flex;gap:18px;align-items:flex-start;padding:4px 6px 0}
.sd-deck{display:grid;place-items:center;align-content:center;gap:2px;width:var(--hw);height:calc(var(--hw)*1.44);border:1px solid var(--line-2);border-radius:9px;background:linear-gradient(#0a1014a8,#0a1014a8),var(--back-art) center/cover,repeating-linear-gradient(135deg,#17313a 0 8px,#12262d 8px 16px);box-shadow:0 1px 0 #24424c,0 calc(var(--depth,4px)*.5) 0 #1a323a,0 var(--depth,4px) 0 #132830,0 calc(var(--depth,4px) + 8px) 18px #000a;border-radius:11px;font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.sd-deck b{font:700 26px/1 var(--mono);color:var(--text)}
.sd-last{margin:0;display:grid;gap:4px;justify-items:center}
.sd-last figcaption{font:500 11px var(--mono);color:var(--muted);max-width:var(--hw);text-align:center}
.sd-now{display:grid;gap:8px;min-width:0}
.sd-headline{font-size:clamp(19px,2.4vw,26px);font-weight:720;letter-spacing:-.02em;line-height:1.15}
.sd-subline{justify-self:start;max-width:100%;padding:3px 10px;border-left:3px solid var(--cyan);border-radius:0 6px 6px 0;background:#0f191e;color:var(--text);font-size:14px;min-height:1.45em}
.sd-subline:empty{display:none}
.sd-clock{font:600 12px var(--mono);color:var(--gold)}
.sd-claims{display:flex;flex-wrap:wrap;gap:6px}
.sd-claim{display:inline-flex;gap:7px;align-items:baseline;padding:4px 9px;border:1px solid var(--line-2);border-radius:999px;background:#0f191e;font-size:12.5px}
.sd-claim span{color:var(--cyan);font-family:var(--mono);font-size:12px}
.sd-claim.done span{color:var(--muted)}
.sd-plays{display:inline-flex;align-items:center;gap:5px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sd-plays i{width:22px;height:8px;border-radius:3px;background:var(--lime)}
.sd-plays i.used{background:var(--panel-3)}
.sd-timer{height:3px;border-radius:2px;background:var(--panel-3);overflow:hidden}
.sd-timer i{display:block;height:100%;width:100%;background:var(--cyan);transition:width .25s linear}
.sd-timer i.low{background:var(--coral)}
.sd-prompt{display:grid;gap:8px}
.sd-prompt:empty{display:none}
.sd-hint{color:var(--text);font-size:14.5px}
.sd-buttons,.sd-lobby{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.sd-lobby .sd-field{flex:0 0 130px}

/* You */
.sd-you{flex:1 1 0;min-height:calc(var(--mw-me,88px)*1.44 + 96px + var(--hand-peek));overflow:hidden;display:flex;flex-direction:column;padding:8px clamp(10px,2vw,20px) 0;border-top:1px solid var(--line);background:linear-gradient(180deg,#0c1519f2,#0a1014fa)}
.sd-you:empty{display:none}
.sd-you .sd-seat{flex:1;min-height:0;display:flex;flex-direction:column;border-top-width:1px;box-shadow:none;background:none;border-color:transparent;padding:0}
.sd-you .sd-seat-head{flex:none;margin-bottom:4px}
.sd-you .sd-table{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;padding-bottom:var(--you-pad,calc(var(--hand-peek) + 44px))}
/* Hand: the Here to Secure hand. Cards held in a fan at the bottom edge, floating over the table; they lift on hover, focus or a tap. */
:root{--hw:clamp(118px,17vh,210px);--hand-peek:calc(var(--hw)*.8 + 12px);--side:0px}
.sd-hand-tray{position:fixed;left:0;right:var(--side);bottom:0;z-index:30;pointer-events:none;display:flex;justify-content:center}
.sd-hand{display:flex;justify-content:center;align-items:flex-end;max-width:100%;padding:26px 28px 0;transform:translateY(44%);transition:transform .22s ease;pointer-events:none}
.sd-hand-tray:hover .sd-hand,.sd-hand-tray:focus-within .sd-hand,.sd-hand-tray.raised .sd-hand,.sd-hand-tray.held .sd-hand{transform:translateY(-8px)}
.sd-hand-tray.collapsed .sd-hand,.sd-hand-tray.collapsed:hover .sd-hand,.sd-hand-tray.collapsed:focus-within .sd-hand{transform:translateY(110%)}
.sd-hand-card{flex:0 0 auto;position:relative;pointer-events:auto;min-height:0;padding:0;margin-left:calc(var(--hw)*-1*var(--lap,.26));border-color:transparent;background:transparent;border-radius:12px;transform:translateY(var(--drop,0)) rotate(var(--rot,0deg));transform-origin:50% 130%;transition:transform .16s ease}
.sd-hand-card:first-child{margin-left:0}
.sd-hand-card .sd-card{--w:var(--hw);box-shadow:0 10px 26px #000c}
.sd-hand-card:hover:not(:disabled),.sd-hand-card:hover,.sd-hand-card:focus-visible,.sd-hand-card.picked{background:transparent;transform:translateY(-16px) rotate(0deg);z-index:5}
.sd-hand-card[aria-disabled="true"]{cursor:default}
.sd-hand-card.picked .sd-card{box-shadow:0 0 0 3px var(--lime),0 10px 24px #000c}
.sd-hand-note{pointer-events:auto;margin:0 0 calc(var(--hand-peek) + 30px);padding:4px 12px;border-radius:999px;background:#0a1014b3;color:var(--muted);font-size:13px}
button.sd-hand-pill{position:fixed;left:12px;bottom:10px;z-index:31;pointer-events:auto;min-height:0;padding:5px 12px;border-radius:999px;background:#0a101480;border-color:#ffffff38;color:#e9efe6;font:700 11px var(--mono);letter-spacing:.06em;opacity:.75;backdrop-filter:blur(4px)}
button.sd-hand-pill:hover,button.sd-hand-pill:focus-visible{opacity:1;background:#0a1014cc}
.sd-hand-pill b{color:var(--lime)}
@keyframes sd-pop{from{opacity:0;transform:translateY(-10px) scale(.9) rotate(-4deg)}}

/* Flights: cards in the air between two places on the table. */
.sd-fx{position:fixed;inset:0;z-index:75;pointer-events:none;overflow:hidden}
.sd-ghost{position:absolute;will-change:transform,opacity;filter:drop-shadow(0 14px 18px #0009)}
.sd-ghost .sd-card{box-shadow:none}
.sd-ghost-back{border-radius:6px;border:1px solid #4e666d;background:var(--back-art) center/cover,#17313a}

/* Dragging: the card follows the pointer and every place it could go lights up. */
.sd-drag{position:fixed;left:0;top:0;z-index:80;pointer-events:none;filter:drop-shadow(0 18px 30px #000b);will-change:transform}
.sd-drag .sd-card{--w:128px}
body.dragging{user-select:none;-webkit-user-select:none;cursor:grabbing}
body.dragging .sd-hand-tray{pointer-events:none}
/* While a card is being carried the hand sits still at rest: no hover lift, no raising, nothing chasing the pointer. */
body.dragging .sd-hand-tray .sd-hand,body.dragging .sd-hand-tray:hover .sd-hand,body.dragging .sd-hand-tray.held .sd-hand{transform:translateY(44%)}
body.dragging .sd-hand-card,body.dragging .sd-hand{pointer-events:none}
body.dragging .sd-hand-card:hover,body.dragging .sd-hand-card.picked{transform:translateY(var(--drop,0)) rotate(var(--rot,0deg))}
.sd-hand-card.lifted{opacity:.18}
body.dragging [data-drop].drop-ok{outline:1px dashed #9fdbe0aa;outline-offset:2px}
body.dragging [data-drop].drop-hot{outline:2px solid var(--lime);background-color:#2b3a1799}
.sd-hand-card,.sd-mini[data-wild]{touch-action:pan-x}
.sd-hand-card{cursor:grab}
.sd-mini[data-wild]{cursor:grab}

/* Card faces. Picture first, then band and words; with no picture the words simply take the room. */
.sd-card{--w:136px;position:relative;display:flex;flex-direction:column;width:var(--w);height:calc(var(--w)*1.44);border-radius:11px;border:1px solid #c9c4ad;background:var(--paper);color:var(--ink);font:500 11px/1.3 var(--font);text-align:left;overflow:hidden;box-shadow:0 6px 14px #0007}
.sd-card-art{display:block;flex:0 0 38%;width:100%;min-height:0;object-fit:cover;background:#d8d3bd}
.sd-card-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:3px;padding:6px 8px 8px}
.sd-card-value{position:absolute;top:6px;right:6px;z-index:2;min-width:30px;padding:2px 6px;border-radius:999px;border:1px solid #f3f0e366;background:#142026ee;color:var(--paper);font:700 11px/1.3 var(--mono);text-align:center}
.sd-card-kind{font:600 9px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.sd-card-name{font-size:14.5px;line-height:1.1;font-weight:750;letter-spacing:-.01em}
.sd-card-text{color:var(--ink-2);font-size:10.5px;line-height:1.28}
.sd-card-band{flex:none;display:flex;align-items:center;min-height:30px;padding:5px 42px 5px 8px;font-size:13px;line-height:1.08;font-weight:750;letter-spacing:-.01em}
.sd-card[data-type="property"] .sd-card-art{flex-basis:32%}
.sd-card[data-type="wild"] .sd-card-art{flex-basis:42%}
.sd-card[data-type="wild"] .sd-card-band{text-shadow:0 0 6px #fff9}
.sd-ladder{display:grid;gap:2px;margin-top:auto;font-size:10.5px}
.sd-ladder-row{display:flex;justify-content:space-between;padding:1px 6px;border-radius:4px;background:#e3dfcc}
.sd-ladder-row b{font-family:var(--mono)}
.sd-ladder-row:last-child{background:var(--ink);color:var(--paper)}
/* Actions and rent follow the wild card: picture, a named band, then the effect in large type so the card reads at a glance. */
.sd-card.is-effect .sd-card-band{min-height:22px;padding:4px 8px;background:#2c6f66;color:var(--paper);font:700 10px/1.1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.sd-card.is-effect .sd-card-art{flex-basis:40%}
.sd-card-effect{font-size:calc(var(--w)*.165);line-height:.98;font-weight:820;letter-spacing:-.035em;text-wrap:balance;color:var(--ink)}
.sd-card.is-effect .sd-card-text{color:#33434a;font-weight:550}
.sd-card[data-action="no"] .sd-card-band{background:#c23a26}
.sd-card[data-action="breaker"] .sd-card-band{background:#5f38b0}
.sd-card[data-action="sly"] .sd-card-band,.sd-card[data-action="forced"] .sd-card-band{background:#9a5413}
.sd-card[data-action="house"] .sd-card-band,.sd-card[data-action="hotel"] .sd-card-band{background:#2a7038}
.sd-card[data-action="go"] .sd-card-band{background:#1c5596}
.sd-card[data-action="debt"] .sd-card-band,.sd-card[data-action="birthday"] .sd-card-band{background:#a32b52}
/* Money: the note fills the card and the numeral sits on a paper disc. */
.sd-card[data-type="money"]{background:#e9efd9}
.sd-card[data-value="2"]{background:#f6dccd}.sd-card[data-value="3"]{background:#dcecc6}.sd-card[data-value="4"]{background:#cfe5f1}.sd-card[data-value="5"]{background:#e0d3f3}.sd-card[data-value="10"]{background:#f5dc8c}
.sd-card[data-type="money"] .sd-card-art{position:absolute;inset:0;width:100%;height:100%;background:none}
.sd-card[data-type="money"] .sd-card-body{position:relative;align-items:center;justify-content:flex-end;gap:5px;padding-bottom:9px}
.sd-card-big{display:grid;place-items:center;min-width:64%;padding:5px 10px 4px;border-radius:999px;border:2px solid var(--ink);background:#f3f0e3f2;font:800 26px/1 var(--mono);letter-spacing:-.05em}
.sd-card[data-type="money"] .sd-card-kind{padding:2px 7px;border-radius:999px;background:#142026d9;color:var(--paper)}
.sd-stack{position:relative;width:var(--hw);height:calc(var(--hw)*1.44)}
.sd-stack .sd-card{--w:var(--hw);position:absolute;inset:0;transform:translateX(var(--shift,0)) rotate(var(--tilt,0deg));box-shadow:0 6px 16px #0009}
/* The discard pile shows each card as picture and name only, like the cards on the table; hover or tap for the full card. */
.sd-stack .sd-card{border-radius:8px;cursor:zoom-in}
.sd-stack .sd-card-kind,.sd-stack .sd-card-text,.sd-stack .sd-ladder,.sd-stack .sd-card-effect{display:none}
.sd-stack .sd-card-art{flex:1 1 auto}
.sd-stack .sd-card-body{flex:none;padding:0}
.sd-stack .sd-card-band,.sd-stack .sd-card.is-effect .sd-card-band{display:block;min-height:0;padding:3px 5px;font:700 max(8.5px,calc(var(--hw)*.115))/1.15 var(--font);letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-stack .sd-card-value{top:3px;right:3px;min-width:0;padding:1px 4px;font-size:max(9px,calc(var(--hw)*.12))}
.sd-stack .sd-card[data-type="money"] .sd-card-body{position:absolute;inset:auto 0 6px 0;align-items:center}
.sd-stack .sd-card-big{min-width:0;padding:2px 8px 1px;border-width:1.5px;font-size:calc(var(--hw)*.22)}
.sd-stack.empty{border:2px dashed #ffffff26;border-radius:11px}
.sd-peek{position:fixed;z-index:70;pointer-events:none;filter:drop-shadow(0 14px 28px #000a)}
.sd-peek .sd-card{--w:176px;font-size:13px}
.sd-peek .sd-card-name{font-size:18px}.sd-peek .sd-card-text,.sd-peek .sd-ladder{font-size:12.5px}.sd-peek .sd-card-band{font-size:16px;min-height:38px}.sd-peek .sd-card-kind{font-size:10.5px}.sd-peek .sd-card-big{font-size:34px}

.sd-rules{width:min(680px,94vw);max-height:88dvh;padding:22px;border:1px solid var(--line-2);border-radius:14px;background:var(--panel);color:var(--text)}
.sd-rules::backdrop{background:#04080bcc}
.sd-rules-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.sd-rules h2{font-size:24px;letter-spacing:-.02em;margin-bottom:10px}
.sd-rules h3{font-size:15px;margin:14px 0 6px}
.sd-rules p{margin-bottom:10px;color:var(--muted)}
.sd-rules ul{margin:0 0 10px;padding-left:18px;display:grid;gap:6px;color:var(--muted)}
.sd-rules strong{color:var(--text)}
.sd-gallery{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.sd-gallery .sd-card{--w:118px}
.sd-rules .sd-card strong{color:var(--ink)}

@media (max-width:980px){
 #entry{grid-template-columns:1fr}
 body.sd-page:not(.in-match){background:linear-gradient(180deg,#0a1014e6,#0a1014cc 40%,#0a1014f2),var(--hero-art) 62% top/cover fixed,var(--bg)}
}
/* Phones. Top to bottom: a slim bar, what is happening and your choices, the other players as a row you swipe through,
   your own table, and your hand as a strip of whole small cards along the bottom edge. Nothing covers anything else. */
@media (max-width:640px){
 .sd-bar{padding:5px 8px;gap:8px}
 .sd-bar-room,.sd-bar-net{display:none}
 .sd-bar-home{white-space:nowrap;font-size:15px}
 .sd-bar-actions{flex-wrap:nowrap;overflow-x:auto;gap:4px;scrollbar-width:none}
 .sd-bar-actions button.ghost{flex:none;min-height:32px;padding:.2rem .5rem;font-size:12px}
 .sd-stage{grid-template-columns:1fr;order:-1;margin:6px 8px 0;padding:8px 10px;border-radius:12px}
 .sd-piles{display:none}
 .sd-now{gap:5px}
 .sd-headline{font-size:17px}
 .sd-subline{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .sd-hint{font-size:13.5px}
 .sd-clock{font-size:11px}
 .sd-stage button{min-height:40px;padding:.4rem .8rem;font-size:14px}
 .sd-buttons{gap:6px}
 /* Rivals sit side by side; swipe to bring one into view. The next one always peeks in from the right. */
 .sd-scroll{padding:6px 8px}
 .sd-rivals{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
 .sd-rivals::-webkit-scrollbar{display:none}
 .sd-rivals>.sd-seat{flex:0 0 86%;scroll-snap-align:start}
 .sd-rivals>.sd-seat:only-child{flex-basis:100%}
 .sd-seat,.sd-seat.is-me{--mw:58px;--step:20px;padding:6px 8px 8px}
 .sd-seat-head{margin-bottom:4px;gap:5px}
 .sd-seat-head h2{font-size:14.5px}
 .sd-avatar{width:28px;height:28px;font-size:13px}
 .sd-stats{gap:9px}
 .sd-counter{font-size:9.5px}
 .sd-counter b{font-size:15px}
 .sd-pips{display:none}
 .sd-table{gap:8px 6px}
 .sd-pile-foot{font-size:10px}
 .sd-pile-foot strong{font-size:10.5px}
 .sd-you{--mw-me:58px;padding:6px 8px 0;--you-pad:calc(var(--hand-peek) + 10px)}
 .sd-card{--w:116px}
 .sd-peek .sd-card{--w:150px}
}
/* Small phones: drop what can be spared so your own table still shows above the hand. */
@media (max-width:640px) and (max-height:700px){
 .sd-subline,.sd-clock{display:none}
 .sd-stage button{min-height:36px}
}
/* Phones: the hand is an ordinary sideways-scrolling strip along the bottom edge, so a swipe always works. A tapped card is
   outlined in the strip and held up full size just above it. Width decides this, not touch: a touchscreen laptop keeps the fan. */
@media (max-width:640px){
 :root{--hw:88px;--hand-peek:112px}
 button.sd-hand-pill{display:none}
 .sd-hand-tray{justify-content:flex-start;pointer-events:auto;background:linear-gradient(180deg,#0a1014e6,#0a1014);border-top:1px solid var(--line)}
 .sd-hand,.sd-hand-tray:hover .sd-hand,.sd-hand-tray:focus-within .sd-hand,.sd-hand-tray.raised .sd-hand,.sd-hand-tray.raised:hover .sd-hand,.sd-hand-tray.held .sd-hand,.sd-hand-tray.collapsed .sd-hand,
 body.dragging .sd-hand-tray .sd-hand,body.dragging .sd-hand-tray:hover .sd-hand,body.dragging .sd-hand-tray.held .sd-hand{transform:none}
 .sd-hand{justify-content:flex-start;align-items:flex-start;width:100%;height:var(--hand-peek);overflow-x:auto;overflow-y:hidden;pointer-events:auto;touch-action:pan-x;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:8px 8px 0;gap:6px;scrollbar-width:none}
 .sd-hand::-webkit-scrollbar{display:none}
 .sd-hand-card,.sd-hand-card:hover,.sd-hand-card:focus-visible,.sd-hand-card.picked,.sd-hand-card.picked:hover,body.dragging .sd-hand-card:hover,body.dragging .sd-hand-card.picked{pointer-events:auto;margin-left:0;transform:none;touch-action:pan-x}
 .sd-hand>:first-child{margin-left:auto}.sd-hand>:last-child{margin-right:auto}
 .sd-hand-note{margin:auto;pointer-events:none}
 .sd-hand-card .sd-card-text{font-size:9px}
 .sd-hand-card .sd-card-kind{font-size:8px}
 .sd-hand-card .sd-ladder{font-size:9px}
 .sd-hand-card .sd-card-band{font-size:11px;min-height:24px;padding:3px 30px 3px 6px}
 .sd-hand-card .sd-card.is-effect .sd-card-band{font-size:8px;min-height:16px;padding:3px 6px}
 .sd-hand-card .sd-card-value{font-size:9.5px;min-width:0;padding:1px 4px;top:4px;right:4px}
 .sd-hand-card .sd-card-big{font-size:20px}
}
/* Short windows (a laptop with the browser's bars showing, a landscape tablet): everything a size down, the middle panel
   kept to what it must say, and less room held back for the hand, so rivals, the stage and your own table all stay in view. */
@media (max-height:900px) and (min-width:641px){
 :root{--hw:104px;--hand-peek:calc(var(--hw)*.56 + 8px)}
 .sd-seat,.sd-seat.is-me{--mw:68px;--step:21px}
 .sd-scroll{gap:8px;padding-top:8px;padding-bottom:6px}
 .sd-seat{padding:6px 10px 8px}
 .sd-seat-head{margin-bottom:4px}
 .sd-avatar{width:30px;height:30px}
 .sd-counter b{font-size:16px}
 .sd-stage{--hw:66px;gap:12px;padding:8px 12px;margin-bottom:6px}
 .sd-now{gap:5px}
 .sd-headline{font-size:19px}
 .sd-last figcaption{display:none}
 .sd-hint{font-size:13.5px}
 .sd-stage button{min-height:36px;padding:.35rem .8rem}
 .sd-you{--mw-me:68px;padding-top:6px;--you-pad:calc(var(--hand-peek) + 12px)}
 .sd-hand{transform:translateY(60%)}
 body.dragging .sd-hand-tray .sd-hand,body.dragging .sd-hand-tray:hover .sd-hand,body.dragging .sd-hand-tray.held .sd-hand{transform:translateY(60%)}
 .sd-bar{padding-top:5px;padding-bottom:5px}
}
/* Between short and roomy there is space to show more of the hand at rest: enough to read every card's name and effect. */
@media (min-height:740px) and (max-height:900px) and (min-width:641px){
 :root{--hw:118px;--hand-peek:calc(var(--hw)*.84 + 8px)}
 .sd-hand{transform:translateY(42%)}
 body.dragging .sd-hand-tray .sd-hand,body.dragging .sd-hand-tray:hover .sd-hand,body.dragging .sd-hand-tray.held .sd-hand{transform:translateY(42%)}
}
/* Short and wide: the middle panel says what is happening on the left and asks its question on the right, in half the height. */
@media (max-height:900px) and (min-width:1000px){
 .sd-now{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"head clock" "sub prompt" "claims prompt" "timer timer";column-gap:18px;align-items:start}
 .sd-headline{grid-area:head}.sd-subline{grid-area:sub}.sd-claims{grid-area:claims}.sd-timer{grid-area:timer}.sd-clock{grid-area:clock}
 .sd-prompt,.sd-lobby{grid-area:prompt}
}
/* Tall, wide windows (a big monitor, or a browser zoomed out): table cards grow with the room instead of sitting tiny in a corner. */
@media (min-height:1000px) and (min-width:1400px){
 .sd-seat{--mw:clamp(84px,8.4vh,128px);--step:calc(var(--mw)*.29)}
 .sd-seat.is-me{--mw:clamp(88px,9.4vh,140px);--step:calc(var(--mw)*.29)}
 .sd-stage{--hw:clamp(84px,10vh,130px)}
 .sd-headline{font-size:clamp(26px,2.8vh,38px)}
 .sd-pile-foot{font-size:clamp(11px,1.15vh,15px)}
 .sd-pile-foot strong{font-size:clamp(11.5px,1.25vh,16px)}
 .sd-seat-head h2{font-size:clamp(16px,1.7vh,22px)}
 .sd-counter b{font-size:clamp(20px,2.1vh,28px)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Results: the shared dialog, dressed in this game's type and colours, and short enough to show every player. */
#results .results-dialog{border-color:var(--line-2);background:var(--panel);color:var(--text);font-family:var(--font)}
#results .results-dialog h2{font:750 clamp(26px,4.5vw,40px)/1.1 var(--font);letter-spacing:-.03em;color:var(--lime);margin:12px 0}
#results .results-dialog .results-story{font:500 16px/1.55 var(--font);margin-bottom:12px}
#results .results-dialog .results-summary{font:500 14px/1.5 var(--font);color:var(--muted);margin-bottom:12px}
#results .results-dialog .results-ending img{max-height:min(210px,26vh);object-fit:cover;object-position:center 30%}
#results .results-dialog table{font-family:var(--mono)}
#results .results-dialog button,#results .results-reopen{font:650 14px/1.3 var(--font);border-radius:8px;border-color:var(--line-2);background:transparent;color:var(--text)}
#results .results-dialog .results-actions button{border-color:var(--lime);background:var(--lime);color:var(--lime-ink)}