:root { color-scheme:dark; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; background:#0c1714; color:#e7e7da; font-synthesis:none }
* { box-sizing:border-box }
body {margin:0;min-height:100vh;background:radial-gradient(circle at 50% -18%,#295344 0,#12271f 45%,#081410 105%)}
button,input,select {font:inherit}
button {cursor:pointer; transition:transform .12s,background .12s}
button:hover {filter:brightness(1.12)}
button:active {transform:translateY(1px)}
button:focus-visible {outline:2px solid #e3b96a;outline-offset:3px}
#shell {max-width:1550px;margin:auto;padding:clamp(14px,2vw,30px)}
.notice {position:sticky;top:10px;background:#6a3027;border:1px solid #dc8974;padding:12px 18px;z-index:20;border-radius:8px;margin-bottom:12px}
.ui-stack {display:flex;flex-direction:column;gap:12px;min-width:0}
.ui-row {display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.app-root {gap:24px}
.header {justify-content:space-between;border-bottom:1px solid #547064;padding:4px 0 18px;gap:16px}
.eyebrow {color:#d4b675;letter-spacing:.24em;font-size:11px;font-weight:800;text-transform:uppercase}
.heading {font-family:Georgia,serif;font-size:clamp(29px,3vw,42px);line-height:1.06;letter-spacing:-.04em;color:#fff4d1}
.header-meta {align-items:flex-end}
.ui-badge {display:inline-flex;align-items:center;font-size:12px;font-weight:600;line-height:1.5;color:#d8e6da;background:#244136;border:1px solid #406052;padding:6px 10px;border-radius:6px}
.phase-badge {text-transform:capitalize;color:#f5d690}
.table-layout {align-items:start;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.95fr);gap:24px}
.battlefield {min-width:0;gap:18px;padding:16px;background:radial-gradient(ellipse at 36% 30%,#2b614e 0,#204b3d 42%,#173b30 100%);border:1px solid #537562;border-radius:20px;box-shadow:inset 0 0 80px #071f1422,0 12px 50px #01090766}
.sidebar {min-width:0;gap:14px}
.ui-panel {min-width:0;padding:16px;background:#132c25bf;border:1px solid #4c78624e;border-radius:12px}
.sidebar .ui-panel {background:#14271ff2}
.zone {background:#09271929;border:1px solid #ffffff12;padding:10px 13px}
.panel-title {text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.15em;color:#b4d1bd;margin:0 0 15px}
.cards-row {gap:9px;align-items:flex-start;flex-wrap:wrap;min-height:84px}
.ui-card-wrap {display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.playing-card {width:64px;height:89px;border-radius:7px;border:1px solid #e3dac4;background:linear-gradient(150deg,#fffdf1,#e6dfcf);box-shadow:0 3px 8px #0006;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:29px;font-weight:800;color:#172721;padding:0}
.playing-card.red-suit {color:#ae3538}
.playing-card.selectable {border:2px solid #ebc87c;box-shadow:0 3px 8px #0006,0 0 0 2px #b2934530}
.playing-card.selectable:hover {transform:translateY(-5px)}
.card-caption {font-size:9px;max-width:86px;text-align:center;letter-spacing:.09em;font-weight:750;text-transform:uppercase;color:#bad3bf}
.ui-pile {min-width:80px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.pile-visual {width:64px;height:89px;border-radius:7px;border:2px solid #e3ce9a;display:grid;place-items:center;font-family:Georgia,serif;font-size:31px;color:#e4cc82;background:repeating-linear-gradient(35deg,#213f37 0,#213f37 7px,#2c5747 8px,#2c5747 12px);box-shadow:0 5px 0 #102920,0 7px 0 #7c9472}
.pile-visual.pile-face {background:linear-gradient(145deg,#fffdf0,#e8ded0);color:#162920}
.pile-visual.red-suit {color:#b92e37}
.pile-name {font-size:10px;color:#c2d7c4;text-align:center}
.pile-count {position:absolute;top:59px;right:5px;border-radius:12px;background:#e9c57e;color:#143425;padding:2px 6px;font-size:11px;font-weight:800}
.empty,.muted {color:#a2bfae;font-size:12px}
.triarch-slot {align-items:center;gap:6px}
.done {color:#dbefc5;background:#31573a}
.triarch.done .playing-card {opacity:.5}
.progress {font-size:10px}
.players-panel .seats {gap:7px}
.seat {background:#163e30}
.seat.active {border-color:#e4b85d;color:#ffe1a6}
.seat.own {background:#345c48}
.phase-title {font-size:22px;letter-spacing:-.03em;color:#fbe5ae;font-weight:750}
.phase-detail {font-size:13px;line-height:1.45;color:#cbddcf}
.ui-button,.primary,.secondary {border:1px solid #caad6e;border-radius:8px;background:#dfb966;color:#102a21;font-size:13px;font-weight:800;padding:12px 18px}
.ui-button.primary,.primary {background:#f1c86a;color:#183229}
.secondary {background:#193a2e;color:#f1d7a1;border-color:#537361}
.hand-panel {background:#23382b!important;border:1px solid #c5aa6b70}
.hand {gap:8px;align-items:flex-start}
.hand-card.playable .playing-card {border-color:#e9c16f}
.card-options {width:90px;display:grid;grid-template-columns:1fr;gap:3px}
.card-option {font-size:11px;border-radius:5px;border:1px solid #b8a170;background:#305747;color:#f3dda5;padding:5px}
.staging {border-color:#b88a4655}
.recovery-card .playing-card {border-color:#e7bd65}
.log-line {color:#b7cfbf;font-size:12px;padding:5px 0;border-bottom:1px solid #ffffff0c}
.lobby-panel {max-width:590px;margin:10vh auto;padding:clamp(24px,5vw,54px);background:#17362d;border:1px solid #68846d;border-radius:18px;box-shadow:0 25px 80px #0007}
.lobby-panel h1 {font:600 clamp(38px,6vw,54px)/1.04 Georgia,serif;color:#ffeac1;letter-spacing:-.05em;margin:14px 0}
.lobby-lede {font-size:17px;color:#cbdbca;line-height:1.6;margin-bottom:35px}
.lobby-form {display:grid;gap:18px}
.lobby-form label {display:grid;gap:8px;color:#d8ead9;font-size:13px;font-weight:700}
.lobby-form input,.lobby-form select {padding:14px;background:#09221b;color:#fff;border:1px solid #5b8069;border-radius:8px}
.lobby-meta {color:#f1d9a2;font-weight:800}
.lobby-seats {color:#bed1bc}
.lobby-help,.lobby-footer {color:#94b5a1;font-size:12px;line-height:1.6}
.lobby-footer {margin-top:32px}
dialog {max-width:min(95vw,400px);width:100%;background:#183b2d;color:#f4f1de;border:1px solid #bfac77;border-radius:14px;padding:28px;box-shadow:0 18px 100px #000b}
dialog::backdrop {background:#000b;backdrop-filter:blur(3px)}
dialog h2 {font-family:Georgia,serif;font-size:27px;margin:8px 0}
dialog p {color:#d2d9cc;line-height:1.5;font-size:14px}
.dialog-actions {display:flex;gap:12px;justify-content:flex-end;margin-top:26px}
@media(max-width:980px){.table-layout {grid-template-columns:1fr}.sidebar {display:contents}.battlefield {order:1}.players-panel,.phase-panel {order:0}.hand-panel {order:2}.controls {order:3}.log-panel {order:4}}
@media(max-width:600px){#shell{padding:12px}.battlefield {padding:7px;gap:8px}.ui-panel {padding:9px}.playing-card,.pile-visual{width:49px;height:70px;font-size:23px}.ui-pile{min-width:58px}.pile-count{top:46px}.ui-row{gap:6px}.cards-row{min-height:74px}.card-option{font-size:10px}.card-options{width:69px}}