/* Layout: a card room. Felt table as the ground, walnut rail for chrome, ivory cards as the army, crimson-backed cards as villains. Single committed dark look. */
:root {
  --felt: #14402f;
  --felt-deep: #0c2a1f;
  --felt-line: #2a6b51;
  --rail: #2b1810;
  --rail-hi: #4a2c1c;
  --brass: #dcae52;
  --brass-dim: #8f7236;
  --ivory: #f4ecd9;
  --ivory-dim: #d9cfb8;
  --ink: #1d1b17;
  --red: #c3343e;
  --villain: #2a0d12;
  --muted: #a6bfb2;
  --good: #6fd39a;
  --f-display: "Limelight", "Rockwell", Georgia, serif;
  --f-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0; background: var(--felt-deep); color: var(--ivory);
  font-family: var(--f-body); font-size: 15px; line-height: 1.45;
  background-image: radial-gradient(ellipse at 50% -10%, #1d5a42 0%, var(--felt-deep) 60%);
  background-attachment: fixed;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--rail); }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* top rail */
.rail { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: linear-gradient(var(--rail-hi), var(--rail)); border-bottom: 2px solid var(--brass-dim); box-shadow: 0 4px 18px #0008; }
.rail .wrap { display: flex; align-items: center; gap: 16px; padding-block: 10px; flex-wrap: wrap; }
.logo { font-family: var(--f-display); font-size: 26px; color: var(--brass); letter-spacing: .02em; line-height: 1; display: flex; align-items: center; gap: 8px; }
.logo small { font-family: var(--f-body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tabs { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.tab { background: transparent; border: 1px solid transparent; padding: 7px 14px; border-radius: 999px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; color: var(--ivory-dim); }
.tab[aria-selected="true"] { background: var(--brass); color: var(--ink); }
.tab:hover:not([aria-selected="true"]) { border-color: var(--brass-dim); }
.purse { display: flex; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: #0007; border: 1px solid var(--brass-dim); border-radius: 999px; padding: 4px 12px 4px 4px; font-family: var(--f-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.chip i { width: 20px; height: 20px; border-radius: 50%; background: repeating-conic-gradient(var(--red) 0 30deg, var(--ivory) 30deg 60deg); box-shadow: inset 0 0 0 4px var(--red); display: inline-block; }
.chip i.deck { border-radius: 3px; background: var(--ivory); box-shadow: inset 0 0 0 2px var(--brass); width: 15px; }

main { padding-block: 24px 60px; }
h1, h2 { font-family: var(--f-display); font-weight: 400; color: var(--brass); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(26px, 4vw, 36px); }
h2 { font-size: 22px; }
.lede { color: var(--muted); margin: 6px 0 0; max-width: 64ch; }
.eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }

/* playing card face (HTML) */
.pc { --w: 64px; width: var(--w); aspect-ratio: 5/7; border-radius: calc(var(--w) * .1); background: var(--ivory); color: var(--ink); position: relative; flex: none; box-shadow: 0 2px 0 #0004, 0 6px 14px #0006; font-family: var(--f-mono); }
.pc.red { color: var(--red); }
.pc .tl, .pc .br { position: absolute; font-size: calc(var(--w) * .2); line-height: .95; text-align: center; font-weight: 600; }
.pc .tl { top: 5%; left: 7%; }
.pc .br { bottom: 5%; right: 7%; transform: rotate(180deg); }
.pc .mid { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--w) * .5); font-family: var(--f-body); }
.pc.face { background: linear-gradient(160deg, var(--ivory), #e9dcb8); box-shadow: inset 0 0 0 calc(var(--w)*.05) var(--brass), 0 6px 14px #0006; }
.pc.villain { background: var(--villain); color: #f1c4c8; box-shadow: inset 0 0 0 2px var(--red), 0 6px 14px #0008; }
.pc.empty { background: transparent; box-shadow: none; border: 2px dashed var(--felt-line); color: var(--felt-line); }
.pc.locked { filter: grayscale(1) brightness(.45); }
.pc.back { background: repeating-linear-gradient(45deg, var(--red) 0 6px, #9c2730 6px 12px); box-shadow: inset 0 0 0 4px var(--ivory), 0 6px 14px #0006; }

/* squad tray */
.tray { background: var(--felt); border: 1px solid var(--felt-line); border-radius: 18px; padding: 16px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; box-shadow: inset 0 0 40px #0005; margin-bottom: 22px; }
.slots { display: flex; gap: 8px; }
.slots .pc { --w: 62px; cursor: pointer; }
.hand-read { min-width: 0; }
.hand-name { font-family: var(--f-display); font-size: 28px; color: var(--brass); line-height: 1.1; }
.hand-bonus { color: var(--good); font-weight: 600; }
.hand-tip { color: var(--muted); font-size: 13px; margin-top: 4px; }
@media (max-width: 640px) { .tray { grid-template-columns: 1fr; } .slots .pc { --w: 52px; } }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.pill { border: 1px solid var(--felt-line); background: #0003; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.pill[aria-pressed="true"] { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.btn { border: 0; border-radius: 10px; padding: 9px 16px; font-weight: 700; background: var(--brass); color: var(--ink); box-shadow: 0 3px 0 var(--brass-dim); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--brass-dim); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ivory); border: 1px solid var(--felt-line); box-shadow: none; }
.btn.red { background: var(--red); color: var(--ivory); box-shadow: 0 3px 0 #7d1f26; }
.spacer { flex: 1; }

/* army grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.unit { background: linear-gradient(#1a3a2e, #12291f); border: 1px solid var(--felt-line); border-radius: 14px; padding: 12px; display: grid; grid-template-columns: auto 1fr; gap: 12px; position: relative; }
.unit.in { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass), 0 0 22px #dcae5233; }
.unit.lockd { opacity: .62; }
.unit .pc { --w: 60px; cursor: pointer; }
.unit .info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.uname { font-weight: 700; font-size: 16px; line-height: 1.15; }
.meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.r0 { color: #c9c9c0; } .r1 { color: #74d48f; } .r2 { color: #6fb0ff; } .r3 { color: #f0a13c; } .r4 { color: #ff6b8a; }
.stats { display: flex; gap: 10px; font-family: var(--f-mono); font-size: 12px; color: var(--ivory-dim); font-variant-numeric: tabular-nums; }
.stats b { color: var(--ivory); font-weight: 600; }
.desc { font-size: 12.5px; color: var(--muted); }
.unit .actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.unit .actions .btn { flex: 1; padding: 7px 10px; font-size: 13px; }
.lvl { position: absolute; top: 10px; right: 12px; font-family: var(--f-mono); font-size: 12px; color: var(--brass); }

/* campaign */
.ladder { display: flex; flex-direction: column; gap: 10px; }
.rung { display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; background: linear-gradient(90deg, #1a3a2e, #12291f); border: 1px solid var(--felt-line); border-radius: 14px; padding: 12px 14px; }
.rung.boss { background: linear-gradient(90deg, #3a1015, #1a0b0e); border-color: var(--red); }
.rung.dim { opacity: .5; }
.rank-no { font-family: var(--f-display); font-size: 30px; color: var(--brass); text-align: center; line-height: 1; }
.rung .t { min-width: 0; }
.rung .t strong { font-size: 17px; display: block; }
.rung .t span { color: var(--muted); font-size: 13px; }
.minis { display: flex; gap: 3px; margin-top: 6px; }
.minis .pc { --w: 26px; box-shadow: inset 0 0 0 1px var(--red); }
.stages { display: flex; gap: 6px; }
.stage { width: 46px; height: 46px; border-radius: 50%; border: 2px dashed var(--brass-dim); background: #0004; font-family: var(--f-mono); font-weight: 600; display: grid; place-items: center; font-size: 13px; }
.stage.done { background: var(--brass); color: var(--ink); border: 2px solid var(--brass); }
.stage.open { border: 2px solid var(--ivory); background: var(--red); color: var(--ivory); box-shadow: 0 0 0 4px #c3343e44; }
.stage[disabled] { cursor: not-allowed; opacity: .55; }
@media (max-width: 560px) { .rung { grid-template-columns: 40px 1fr; } .stages { grid-column: 1 / -1; } .rank-no { font-size: 24px; } }

/* battle */
.arena { background: var(--rail); border-radius: 22px; padding: 10px; box-shadow: 0 20px 50px #000a; }
.arena-top { display: flex; align-items: center; gap: 12px; padding: 6px 8px 12px; flex-wrap: wrap; }
.vs { display: flex; gap: 10px; align-items: center; font-weight: 600; flex-wrap: wrap; }
.tag { padding: 4px 10px; border-radius: 8px; font-size: 13px; }
.tag.me { background: var(--ivory); color: var(--ink); }
.tag.them { background: var(--red); color: var(--ivory); }
canvas { display: block; width: 100%; height: auto; border-radius: 14px; touch-action: manipulation; }
.result { margin-top: 16px; background: var(--felt); border: 1px solid var(--felt-line); border-radius: 16px; padding: 18px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.result h2 { font-size: 30px; }
.result .msg { color: var(--muted); }

/* hand ranks guide */
.guide { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 860px) { .guide { grid-template-columns: minmax(0, 1fr); } }
.tablewrap { overflow-x: auto; background: var(--felt); border: 1px solid var(--felt-line); border-radius: 16px; }
table { border-collapse: collapse; width: 100%; min-width: 560px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #ffffff12; font-size: 14px; vertical-align: middle; }
th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
td.num { font-family: var(--f-display); color: var(--brass); font-size: 18px; }
.ex { display: flex; gap: 2px; }
.ex .pc { --w: 22px; }
.side { display: flex; flex-direction: column; gap: 14px; }
.box { background: var(--felt); border: 1px solid var(--felt-line); border-radius: 16px; padding: 16px; }
.box h2 { font-size: 19px; margin-bottom: 10px; }
.suitrow { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 6px 0; }
.suitrow .g { font-size: 26px; line-height: 1; text-align: center; }
.suitrow .g.red { color: #ff7a83; }
.box p { margin: 0; font-size: 14px; color: var(--ivory-dim); }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ivory); color: var(--ink); padding: 10px 18px; border-radius: 12px; font-weight: 600; box-shadow: 0 10px 30px #000a; z-index: 20; max-width: calc(100% - 32px); }
.modal-bg { position: fixed; inset: 0; background: #000b; display: grid; place-items: center; z-index: 30; padding: 16px; }
.modal { background: var(--felt); border: 1px solid var(--brass-dim); border-radius: 18px; padding: 22px; max-width: 420px; width: 100%; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.modal .pc { --w: 110px; }
@media (prefers-reduced-motion: no-preference) { .modal .pc { animation: flip .6s ease-out; } @keyframes flip { from { transform: rotateY(90deg) scale(.8); } to { transform: none; } } }

/* ===== Site-wide additions ===== */
a { color: var(--brass); }
.logo { text-decoration: none; }
a.tab { text-decoration: none; display: inline-block; }
.dim { color: var(--muted); }

/* ===== Landing page ===== */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-block: 48px 36px; }
.hero h1 { font-size: clamp(38px, 6vw, 68px); line-height: 1.02; }
.hero .lede { font-size: 18px; margin-top: 14px; }
.hero .ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.hero .ctas .btn { padding: 13px 22px; font-size: 16px; text-decoration: none; }
.fan { position: relative; height: 300px; display: flex; justify-content: center; align-items: flex-end; }
.fan .pc { --w: 130px; position: absolute; bottom: 10px; transform-origin: 50% 120%; }
.fan .pc:nth-child(1) { transform: rotate(-24deg); }
.fan .pc:nth-child(2) { transform: rotate(-12deg); }
.fan .pc:nth-child(3) { transform: rotate(0deg); }
.fan .pc:nth-child(4) { transform: rotate(12deg); }
.fan .pc:nth-child(5) { transform: rotate(24deg); }
@media (prefers-reduced-motion: no-preference) {
  .fan .pc { animation: deal .7s cubic-bezier(.2, .8, .2, 1) backwards; }
  .fan .pc:nth-child(2) { animation-delay: .08s } .fan .pc:nth-child(3) { animation-delay: .16s } .fan .pc:nth-child(4) { animation-delay: .24s } .fan .pc:nth-child(5) { animation-delay: .32s }
  @keyframes deal { from { transform: translateY(120px) rotate(0deg); opacity: 0; } }
}
@media (max-width: 760px) { .hero { grid-template-columns: minmax(0, 1fr); padding-block: 28px; } .fan { height: 210px; } .fan .pc { --w: 92px; } }
.section { padding-block: 34px; border-top: 1px solid #ffffff12; }
.section h2 { font-size: 30px; margin-bottom: 8px; }
.steps { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: s; }
.steps li { background: var(--felt); border: 1px solid var(--felt-line); border-radius: 16px; padding: 18px; counter-increment: s; position: relative; }
.steps li::before { content: counter(s); font-family: var(--f-display); font-size: 34px; color: var(--brass); display: block; line-height: 1; margin-bottom: 8px; }
.steps h3 { margin: 0 0 6px; font-size: 17px; }
.steps p { margin: 0; color: var(--ivory-dim); font-size: 14px; }
.cmds { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 18px; }
.cmds div { display: flex; gap: 12px; align-items: baseline; background: #0003; border: 1px solid var(--felt-line); border-radius: 12px; padding: 12px 14px; }
.cmds code { font-family: var(--f-mono); color: var(--brass); font-size: 15px; white-space: nowrap; }
.cmds span { color: var(--ivory-dim); font-size: 14px; }
.ladder-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.ladder-strip span { border: 1px solid var(--felt-line); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; background: #0003; }
.ladder-strip span:last-child { border-color: var(--red); background: #3a1015; }
.foot { padding-block: 30px 40px; color: var(--muted); font-size: 13px; border-top: 1px solid #ffffff12; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }

/* ===== Stream mode ===== */
.conn { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--felt-line); background: #0005; }
.conn::before { content: "●"; margin-right: 6px; }
.conn.live { color: var(--good); } .conn.connecting, .conn.retry { color: #f0a13c; } .conn.off { color: var(--muted); }
.setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-block: 40px; align-items: start; }
@media (max-width: 760px) { .setup { grid-template-columns: minmax(0, 1fr); } }
.form { background: var(--felt); border: 1px solid var(--felt-line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.form label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.form input:not([type=checkbox]) { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--felt-line); background: var(--felt-deep); color: var(--ivory); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .row > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form .check { display: flex; gap: 8px; align-items: center; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ivory-dim); }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.stream-stage { padding-block: 16px 30px; }
.banner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: stretch; margin-bottom: 14px; }
.banner-l { min-width: 0; align-self: center; }
.banner h1 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; }
.banner .sub { color: var(--muted); margin-top: 4px; }
.joinbox, .clockbox { background: var(--rail); border: 1px solid var(--brass-dim); border-radius: 16px; padding: 12px 18px; display: flex; flex-direction: column; justify-content: center; }
.cmd { font-family: var(--f-mono); font-size: 34px; color: var(--brass); line-height: 1.1; }
.cmd-sub { font-size: 13px; color: var(--ivory-dim); }
.clockbox { min-width: 150px; text-align: center; }
.clock { font-family: var(--f-mono); font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.clock.hot { color: #ff7a83; }
.clock.fighting { font-size: 28px; color: var(--brass); letter-spacing: .1em; }
@media (max-width: 900px) { .banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .banner-l { grid-column: 1 / -1; } }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
@media (max-width: 1000px) { .stage-grid { grid-template-columns: minmax(0, 1fr); } }
.stage-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.stage-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stream-stage .arena { padding: 8px; }
.panel { background: var(--felt); border: 1px solid var(--felt-line); border-radius: 16px; padding: 14px; }
.panel-h { display: flex; justify-content: space-between; gap: 8px; }
.ctl { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ctl .btn { flex: 1; }
.ctl.small .btn { padding: 7px 10px; font-size: 13px; flex: 1 1 45%; }
.hint { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; padding: 4px 2px; border-bottom: 1px solid #ffffff0c; }
.list li.empty { display: block; color: var(--muted); border: 0; }
.list .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ivory); }
.list .lv { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.list .pos { font-family: var(--f-display); color: var(--brass); width: 18px; text-align: center; }
.mini { font-family: var(--f-mono); font-weight: 600; background: var(--ivory); color: var(--ink); border-radius: 4px; padding: 1px 5px; font-size: 13px; min-width: 38px; text-align: center; }
.mini.red { color: var(--red); }
.feed { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--ivory-dim); }
.feed li { line-height: 1.35; }
.community { display: flex; gap: 18px; align-items: center; background: var(--felt); border: 1px solid var(--felt-line); border-radius: 16px; padding: 12px 16px; flex-wrap: wrap; }
.ch-cards { display: flex; gap: 6px; }
.ch-cards .pc { --w: 52px; }
.ch-name { font-family: var(--f-display); font-size: 26px; color: var(--brass); line-height: 1.1; }
.ch-note { color: var(--good); font-weight: 600; font-size: 14px; }
.result-banner { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; border-radius: 16px; padding: 16px 18px; border: 1px solid var(--brass); background: linear-gradient(90deg, #3a2c10, var(--felt)); }
.result-banner.lose { border-color: var(--red); background: linear-gradient(90deg, #3a1015, var(--felt)); }
.result-banner h2 { font-size: 30px; }
.result-banner p { margin: 4px 0 0; color: var(--ivory-dim); }
.result-banner > div:first-child { flex: 1 1 260px; min-width: 0; }
.mvp { display: flex; gap: 12px; align-items: center; }
.mvp .pc { --w: 48px; }
.mvp-name { font-weight: 700; font-size: 20px; }
.next { font-family: var(--f-mono); color: var(--muted); font-size: 13px; }
body.obs .host-only { display: none !important; }
body.obs .stream-stage { padding-block: 12px; }