:root{
  color-scheme: dark;
  --night:#101417; --table:#16211f; --table-edge:#223330; --line:#30413d;
  --fg:#e7e0d0; --mist:#9aa49d; --brass:#cfa85a; --brass-dim:#8a7140;
  --vellum:#efe5cf; --vellum-shade:#d6c7a6; --ink:#27221c; --blood:#9b2d2a;
  --sov:#6fb0a8; --warn:#d8865a; --good:#9cc487; --shadow:rgba(0,0,0,.4);
  --f-display:"IM Fell English SC","Iowan Old Style",Georgia,serif;
  --f-card:"IM Fell English","Iowan Old Style",Georgia,serif;
  --f-ui:"Alegreya Sans","Gill Sans","Segoe UI",system-ui,sans-serif;
  --card-w:60px; --card-h:86px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--night)}
img{max-width:100%}
[hidden]{display:none!important}
body{color:var(--fg);font-family:var(--f-ui);font-size:16px;line-height:1.45}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:20px 48px}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0}
.top{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;border-bottom:1px solid var(--line);padding-bottom:14px}
.top h1{font-size:clamp(28px,5vw,42px);letter-spacing:.02em;color:var(--fg)}
.top p{margin:2px 0 0;color:var(--mist);font-style:italic;font-family:var(--f-card)}
.tabs{display:flex;gap:4px}
.tab{font:500 15px var(--f-ui);background:transparent;color:var(--mist);border:1px solid transparent;border-radius:6px;padding:6px 14px;cursor:pointer}
.tab[aria-selected="true"]{color:var(--fg);border-color:var(--line);background:var(--table)}
.tab:focus-visible,.btn:focus-visible,select:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.controls{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding-block:12px;color:var(--mist);font-size:14px}
.controls label{display:flex;gap:6px;align-items:center}
select{background:var(--table);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font:inherit}
.btn{font:500 15px var(--f-ui);background:var(--table-edge);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:7px 14px;cursor:pointer}
.btn:hover:not(:disabled){border-color:var(--brass-dim)}
.btn.primary{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
@media (max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}}
.table{background:radial-gradient(120% 90% at 50% 40%,var(--table-edge),var(--table) 70%);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:16px;min-width:0}
.seats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.seat{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--night);min-width:0;transition:border-color .2s}
.seat.is-turn{border-color:var(--brass)}
.seat header{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.seat h3{font-size:19px}
.chip{font:700 11px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--brass);border-radius:4px;padding:1px 6px;white-space:nowrap}
.chip.mark{background:var(--warn)}
.blurb{margin:2px 0 8px;color:var(--mist);font-size:13px;font-style:italic}
dl.stats{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:14px}
dl.stats dt{color:var(--mist)}
dl.stats dd{margin:0;font-variant-numeric:tabular-nums}
.pips{display:inline-flex;gap:3px;vertical-align:middle}
.pip{width:10px;height:10px;border-radius:50%;border:1px solid var(--brass-dim)}
.pip.on{background:var(--brass);border-color:var(--brass)}
.mbacks{display:inline-flex;gap:3px;vertical-align:middle}
.mb{width:9px;height:13px;border-radius:2px;background:repeating-linear-gradient(45deg,var(--brass-dim) 0 2px,var(--table) 2px 4px)}
.center{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
@media (max-width:560px){.center{grid-template-columns:minmax(0,1fr)}}
.sign{display:flex;gap:10px;align-items:center}
.sign .lbl{font-size:13px;color:var(--mist);line-height:1.3}
.sign .lbl b{display:block;font-family:var(--f-display);font-weight:400;font-size:20px;color:var(--sov)}
.trick{min-height:calc(var(--card-h) + 30px);display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;justify-content:center;border:1px dashed var(--line);border-radius:10px;padding:10px}
.trick .empty{align-self:center;color:var(--mist);font-style:italic;font-family:var(--f-card)}
.play{margin:0;display:grid;justify-items:center;gap:4px}
.play figcaption{font-size:12px;color:var(--mist);max-width:84px;text-align:center}
.play.won .card{box-shadow:0 0 0 3px var(--brass),0 2px 0 var(--shadow)}
.play.won figcaption{color:var(--brass)}
.you{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:12px}
.you-head{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.you-head h2{font-size:22px}
.you-head span{color:var(--mist);font-size:14px;font-variant-numeric:tabular-nums}
.prompt{background:var(--night);border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:8px;padding:10px 12px;display:grid;gap:8px}
.prompt p{margin:0}
.prompt .rule{font-family:var(--f-card);font-style:italic;color:var(--brass)}
.btnrow{display:flex;flex-wrap:wrap;gap:6px}
.claimbtn{min-width:42px}
.row-label{font:700 11px var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--mist);margin-bottom:6px}
.cards{display:flex;flex-wrap:wrap;gap:8px}
.card{width:var(--card-w);height:var(--card-h);border-radius:6px;background:var(--vellum);color:var(--ink);position:relative;font-family:var(--f-card);border:1px solid var(--vellum-shade);box-shadow:0 2px 0 var(--shadow);display:inline-block;padding:0;flex:none;font-size:15px}
.card.red{color:var(--blood)}
.card .ci{position:absolute;top:4px;left:6px;line-height:1;display:flex;flex-direction:column;align-items:center}
.card .ci i{font-style:normal;font-size:12px}
.card .ci-b{top:auto;left:auto;bottom:4px;right:6px;transform:rotate(180deg)}
.card .cc{position:absolute;inset:0;display:grid;place-items:center;font-size:28px}
.card.sov{box-shadow:0 0 0 2px var(--sov),0 2px 0 var(--shadow)}
.card.usurp{box-shadow:0 0 0 3px var(--brass),0 0 18px var(--brass)}
button.card{cursor:pointer;transition:transform .12s}
button.card:hover{transform:translateY(-6px)}
button.card:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.card.dim{opacity:.42}
.card.house-used{opacity:.42}
.housebox{display:flex;flex-wrap:wrap;gap:18px}
.housebox > div{min-width:0}
aside.ledger{border:1px solid var(--line);border-radius:14px;background:var(--table);padding:14px;display:grid;gap:10px;min-width:0}
aside.ledger h2{font-size:20px}
.log{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:520px;overflow:auto;font-size:14px}
.log li{border-bottom:1px solid var(--line);padding-bottom:6px;color:var(--fg)}
.log li small{color:var(--mist);font-variant-numeric:tabular-nums;margin-right:6px}
.standings{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.standings th,.standings td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.standings th{color:var(--mist);font-weight:500}
.banner{font-family:var(--f-display);font-size:26px;color:var(--brass)}
.rules{max-width:70ch;padding-block:8px 24px}
.rules h2{font-size:28px;margin-top:28px;color:var(--brass)}
.rules h2:first-child{margin-top:8px}
.rules h3{font-size:20px;margin-top:20px}
.rules p,.rules li{color:var(--fg)}
.rules .vellum{font-family:var(--f-card);font-style:italic;color:var(--brass);font-size:18px}
.rules .note{color:var(--mist);font-size:14px;border-left:3px solid var(--line);padding-left:12px}
.rules ul,.rules ol{padding-left:22px}
.rules li{margin-bottom:4px}
#flash{position:fixed;inset:0;background:var(--vellum);opacity:0;pointer-events:none;z-index:10}
#flash.on{animation:strike .7s ease-out}
@keyframes strike{0%{opacity:0}8%{opacity:.22}16%{opacity:.02}24%{opacity:.14}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#flash.on{animation:none}button.card{transition:none}button.card:hover{transform:none}}
@media (max-width:520px){:root{--card-w:48px;--card-h:70px}.card{font-size:13px}.card .cc{font-size:22px}}