:root{color-scheme:dark;--bg:#101415;--panel:#171e1e;--line:#35413e;--text:#f6efd9;--muted:#afbeb5;--gold:#f2cb7c;--mint:#8ce4c6;--red:#fa9788}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#263733,#101415 62%);color:var(--text);font:15px/1.45 system-ui,sans-serif;min-height:100vh}main{max-width:1320px;padding:32px clamp(12px,4vw,48px) 20px;margin:auto}.mast{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:21px;flex-wrap:wrap}.eyebrow,.fieldhead,footer,small{margin:0;color:var(--muted);font:700 11px/1.3 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}.eyebrow span{color:var(--gold);padding:0 6px}h1,h2{font-family:Georgia,serif;line-height:1.03;margin:8px 0}h1{font-size:clamp(37px,6vw,78px);font-weight:500;letter-spacing:-.065em}h1 em{color:var(--gold);font-weight:400}h2{font-size:30px;font-weight:500}nav{display:flex;gap:8px}button{font:inherit;color:inherit;background:#202a28;border:1px solid #4a5b53;border-radius:5px;padding:8px 11px;cursor:pointer}button:hover:not(:disabled){border-color:var(--gold);background:#344139}button:focus-visible{outline:3px solid white;outline-offset:3px}button:disabled{opacity:.47;cursor:default}.hud{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:15px;border:1px solid var(--line);background:#151b1b;border-radius:8px;overflow:hidden}.hud div{padding:9px 14px;border-right:1px solid var(--line)}.hud div:last-child{border:0}.hud strong{display:block;color:var(--gold);font:24px Georgia,serif;margin-top:3px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 284px;gap:15px}.field,.brief,.roster{border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden}.field{align-self:start}.fieldhead,.legend{display:flex;justify-content:space-between;gap:8px;padding:11px 14px}.fieldhead span:last-child{color:var(--mint)}.board{position:relative;isolation:isolate;background:#0b1111;overflow:hidden}canvas{display:block;width:100%;height:auto}.post{position:absolute;transform:translate(-50%,-50%);padding:0;width:clamp(30px,5.1%,48px);aspect-ratio:1;display:grid;place-items:center;border:1px solid #7cd5b8a0;border-radius:50%;background:#162a26b0;color:#dafff3;font-size:11px;font-weight:750}.post[data-post="0"]{left:20%;top:34.42%}.post[data-post="1"]{left:37.78%;top:34.42%}.post[data-post="2"]{left:55.56%;top:34.42%}.post[data-post="3"]{left:73.33%;top:34.42%}.post[data-post="4"]{left:20%;top:65.58%}.post[data-post="5"]{left:37.78%;top:65.58%}.post[data-post="6"]{left:55.56%;top:65.58%}.post[data-post="7"]{left:73.33%;top:65.58%}.post.occupied{background:transparent;color:transparent}.post.marked,.post[aria-pressed="true"]{border:2px solid var(--gold);box-shadow:0 0 14px #f2cb7ca0}.post.marked{animation:glint 1.2s ease-in-out infinite alternate}@keyframes glint{to{box-shadow:0 0 25px #f2cb7c}}.board[data-phase="raid"] .post,.board[data-phase="lesson"] .post,.board[data-phase="won"] .post,.board[data-phase="lost"] .post{visibility:hidden}.legend{justify-content:start;gap:18px;font-size:12px;color:var(--muted)}.red{color:var(--red)}.mint{color:var(--mint)}.gold{color:var(--gold)}aside{display:grid;gap:12px;align-content:start}.brief,.roster{padding:15px}.brief .eyebrow{color:var(--gold)}.brief p:not(.eyebrow),.hint{font-size:13px;color:var(--muted);margin:9px 0 12px}.action{width:100%;background:var(--gold);color:#211b12;border-color:var(--gold);font-weight:800}.action:hover:not(:disabled){background:#ffe0a3}.roster>.eyebrow{margin-bottom:10px}#roles{display:grid;gap:6px}.role{display:grid;grid-template-columns:38px 1fr auto;align-items:center;text-align:left;padding:3px 9px 3px 3px;gap:6px;width:100%}.role img{width:38px;height:37px;object-fit:contain}.role b,.role small{display:block}.role small{font-size:10px;letter-spacing:.04em;text-transform:none}.role[aria-pressed="true"]{border-color:var(--gold);background:#3d3423}.role strong{color:var(--gold);font-size:13px}.hint{margin-bottom:0;min-height:34px}footer{display:flex;justify-content:space-between;gap:10px;margin-top:17px;font-size:9px}@media(max-width:820px){.layout{grid-template-columns:1fr}aside{grid-template-columns:1fr 1fr}}@media(max-width:500px){main{padding-top:16px}.hud div{padding:7px}.hud strong{font-size:18px}small{font-size:9px;letter-spacing:.08em}aside{grid-template-columns:1fr}#roles{grid-template-columns:1fr 1fr}.legend{gap:9px}.fieldhead{font-size:9px}}@media(prefers-reduced-motion:reduce){.post.marked{animation:none}}