:root { color-scheme: dark; --bg:#07100e; --panel:#11201c; --line:#29443b; --text:#eef7f2; --muted:#91aaa1; --accent:#caff5d; --blue:#5da8ff; --red:#ff7068; --amber:#ffc35f; --danger:#ff6f68; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; } body { margin:0; min-width:1120px; color:var(--text); background:radial-gradient(circle at 50% -20%,#20372f,var(--bg) 44%); }
button,select,a { font:inherit; } button,select,.app-header a { border:1px solid var(--line); border-radius:8px; padding:8px 10px; color:var(--text); background:#172a24; } button,a { cursor:pointer; } button:hover,.app-header a:hover { border-color:var(--accent); } button.primary { color:#10190d; border-color:var(--accent); background:var(--accent); font-weight:900; } button:disabled { opacity:.4; cursor:not-allowed; } a { text-decoration:none; }
.eyebrow { margin:0 0 4px; color:var(--accent); font-size:9px; font-weight:900; letter-spacing:.17em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { margin:0; font-size:21px; } h1 span { color:var(--muted); font-weight:500; } h2 { margin-bottom:8px; font-size:15px; }
.app-header { position:sticky; top:0; z-index:10; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; min-height:72px; padding:11px 16px; border-bottom:1px solid var(--line); background:rgba(7,16,14,.96); }
.match-status { display:grid; gap:3px; text-align:center; }.match-status span,.header-actions label { color:var(--muted); font-size:10px; }.header-actions { display:flex; justify-content:flex-end; align-items:end; gap:8px; }.header-actions label { display:grid; gap:4px; }
.layout { display:grid; grid-template-columns:280px minmax(600px,1fr) 285px; gap:12px; padding:12px; }.left-rail,.right-rail { display:flex; flex-direction:column; gap:12px; }.panel,.board-shell { border:1px solid var(--line); border-radius:12px; background:linear-gradient(160deg,#14251f,#0c1915); box-shadow:0 12px 34px rgba(0,0,0,.25); }.panel { padding:13px; }.panel-heading,.board-heading { display:flex; justify-content:space-between; align-items:start; gap:8px; }.panel-heading span,#revisionLabel,#deckLabel { color:var(--muted); font-size:9px; }
.scores { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.score { padding:9px; border-radius:8px; background:#0b1713; }.score.active { box-shadow:inset 0 0 0 1px var(--accent); }.score strong { display:block; font-size:17px; }.score span { color:var(--muted); font-size:9px; }
.prompt-panel { border-color:#486b5f; }.prompt-panel p:not(.eyebrow) { color:var(--muted); font-size:11px; line-height:1.4; }.action-stack { display:grid; gap:6px; }.action-stack .choice-row { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }.action-stack small { color:var(--muted); }
.hand { display:grid; gap:6px; max-height:390px; overflow:auto; }.hand-card { width:100%; padding:8px; text-align:left; }.hand-card.selected { border-color:var(--accent); background:#243a31; }.hand-card strong { display:block; font-size:11px; }.hand-card span { color:var(--muted); font-size:9px; }.hand-card em { display:block; margin-top:4px; color:#c5d8d0; font-size:8px; font-style:normal; line-height:1.3; }
.board-shell { overflow:hidden; }.board-heading { padding:12px 14px; border-bottom:1px solid var(--line); }.phase-guide { display:flex; gap:4px; }.phase-guide span { padding:4px 6px; border-radius:999px; color:#688078; font-size:8px; }.phase-guide span.current { color:#10190d; background:var(--accent); font-weight:900; }
.board { display:grid; grid-template-columns:repeat(3,1fr); min-height:820px; }.sector { display:grid; grid-template-rows:52px repeat(6,1fr); border-right:1px solid var(--line); }.sector:last-child { border-right:0; }.sector-title { display:grid; place-content:center; gap:4px; color:var(--muted); border-bottom:1px solid var(--line); font-size:10px; font-weight:900; letter-spacing:.13em; text-align:center; text-transform:uppercase; }.objective-control { padding:3px 6px; border-radius:999px; color:#839b92; background:#0a1512; font-size:7px; letter-spacing:.03em; }.objective-control.controller-A { color:#d9ebff; box-shadow:inset 0 0 0 1px var(--blue); }.objective-control.controller-B { color:#ffe2df; box-shadow:inset 0 0 0 1px var(--red); }.zone { position:relative; min-height:120px; padding:23px 6px 6px; border-bottom:1px solid #20362f; }.zone.front-boundary { border-bottom:2px solid rgba(202,255,93,.65); }.zone-label { position:absolute; inset:5px 6px auto; display:flex; justify-content:space-between; color:#6f887f; font-size:8px; font-weight:900; text-transform:uppercase; }.zone-cards { display:flex; flex-wrap:wrap; gap:5px; }
.board-card { width:calc(33.333% - 4px); min-height:66px; padding:6px; border:1px solid #516c62; border-top:3px solid var(--blue); border-radius:7px; color:var(--text); background:#172a24; text-align:left; overflow:hidden; }.board-card.owner-B { border-top-color:var(--red); }.board-card.selected { box-shadow:0 0 0 2px var(--accent); }.board-card.committed { border-color:var(--amber); transform:rotate(3deg); }.board-card.disrupted { border-color:var(--danger); transform:rotate(180deg); }.board-card.jammed { box-shadow:inset 0 0 0 2px #b486ff; }.board-card strong { display:block; font-size:9px; line-height:1.05; }.board-card span { color:var(--muted); font-size:7px; }.board-card .state-label { display:inline-block; margin-top:4px; padding:2px 4px; border-radius:999px; color:#07100e; background:var(--accent); font-weight:900; text-transform:uppercase; }.board-card.committed .state-label { background:var(--amber); }.board-card.disrupted .state-label { background:var(--danger); }.board-card.jammed .state-label { color:#f5edff; background:#67439e; }.board-card .stats { display:block; margin-top:5px; color:#d2e2db; }
.zone.interdicted { background:repeating-linear-gradient(135deg,rgba(255,195,95,.08),rgba(255,195,95,.08) 7px,transparent 7px,transparent 14px); box-shadow:inset 0 0 0 1px rgba(255,195,95,.4); }
.selected-panel .empty,.empty { padding:22px 5px; color:var(--muted); font-size:11px; text-align:center; }.card-detail h3 { margin-bottom:4px; }.card-detail p { color:var(--muted); font-size:9px; line-height:1.4; }.legal-buttons { display:grid; gap:5px; margin-top:9px; }.destination-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }.destination-grid button { padding:6px 3px; font-size:8px; }.why-unavailable { display:grid; gap:5px; padding:9px; border:1px solid #4a3f28; border-radius:8px; color:#e7d5af; background:#221d12; font-size:9px; line-height:1.4; }.why-unavailable strong { color:var(--amber); }
.attached-equipment { display:grid; gap:7px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }.attached-equipment > small { color:var(--accent); font-size:8px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }.attached-equipment article { padding:9px; border:1px solid #40584e; border-radius:6px; background:#0b1713; }.attached-equipment h4,.attached-equipment p { margin:0; }.attached-equipment h4 { color:#ecf5f1; font-size:11px; }.attached-equipment p { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.45; }
.log-panel { flex:1; min-height:360px; }.log-panel ol { max-height:620px; overflow:auto; margin:0; padding-left:22px; color:#c4d5ce; font-size:10px; }.log-panel li { padding:6px 2px; border-bottom:1px solid #243b33; }.log-panel li.private { color:#8bc9ff; }
.toast { position:fixed; right:18px; bottom:18px; z-index:20; max-width:420px; padding:12px 15px; border:1px solid #7a3d39; border-radius:9px; color:#ffe1de; background:#3b1e1b; box-shadow:0 8px 30px #000; font-size:12px; }