.stakeout-game { --acid:#dcff00; --paper:#f4f0dc; --black:#080a05; --muted:#c4c5b9; --red:#ff735b; border:1px solid #596047; margin:24px 0; background:#0d1008; color:var(--paper); }
.stakeout-game[hidden],.stakeout-game [hidden] { display:none !important; }
.stakeout-game>summary { min-height:64px; padding:16px; cursor:pointer; font-size:1.2rem; font-weight:800; }
.stakeout-game>summary span { display:block; margin-top:4px; color:var(--muted); font-size:.875rem; font-weight:400; }
.stakeout-content { max-width:480px; margin:auto; padding:8px 16px 22px; }
.stakeout-game button { min-height:44px; color:var(--paper); border:1px solid #787e67; background:#191d12; border-radius:2px; cursor:pointer; font:inherit; }
.stakeout-game button:focus-visible,.stakeout-game summary:focus-visible { outline:3px solid var(--acid); outline-offset:3px; }
.stakeout-game button:disabled { cursor:default; opacity:.55; }
.stakeout-game .board-heading h3 { margin:0; font-size:1rem; }
.stakeout-game .tools { flex-wrap:wrap; }
@media(max-width:350px) { .stakeout-content { padding:8px 12px 22px; } .stakeout-game .token { font-size:24px; } }
@media(prefers-reduced-motion:no-preference) { .stakeout-game .cell[data-mark="1"] .token { animation:stakeout-place .12s ease-out; } @keyframes stakeout-place { from { transform:scale(.8); } to { transform:scale(1); } } }
.stakeout-game nav { display:flex; gap:6px; }
.stakeout-game nav button { flex:1; min-width:0; overflow-wrap:anywhere; padding:8px 6px; font-size:.875rem; font-weight:700; }
.stakeout-game nav button[aria-pressed="true"] { color:var(--black); background:var(--acid); border-color:var(--acid); box-shadow:2px 2px 0 var(--paper); }
.stakeout-game .calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-bottom:22px; }
.stakeout-game .calendar-grid>span { text-align:center; font-size:.875rem; line-height:2; }
.stakeout-game .calendar-grid button { min-width:0; font-size:.875rem; padding:4px 0; }
.stakeout-game .calendar-grid button[aria-pressed="true"] { border-color:var(--acid); color:var(--acid); }
.stakeout-game .rules { font-size:1rem; line-height:1.5; margin:18px 0 14px; }
.stakeout-game .board-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 12px; }
.stakeout-game .board-heading h2 { margin:0; font-size:1rem; }
.stakeout-game .board-heading>span { font-size:.875rem; color:var(--muted); }
.stakeout-game .board { width:100%; display:flex; flex-direction:column; border:3px solid var(--paper); box-shadow:5px 5px 0 #495330; background:var(--paper); }
.stakeout-game .board-row { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); }
.stakeout-game .board-row>[role="gridcell"] { min-width:0; }
.stakeout-game .cell { width:100%; position:relative; padding:0; aspect-ratio:1; min-width:0; min-height:calc(2rem + 20px); border:1px solid #c5c6b444; border-radius:0; color:var(--paper); touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.stakeout-game .cell[data-zone="0"] { background:#34431b; }
.stakeout-game .cell[data-zone="1"] { background:#173d4a; }
.stakeout-game .cell[data-zone="2"] { background:#542a25; }
.stakeout-game .cell[data-zone="3"] { background:#494023; }
.stakeout-game .cell[data-zone="4"] { background:#393f40; }
.stakeout-game .cell[data-zone="5"] { background:#252a1e; }
.stakeout-game .cell.zone-top { border-top:3px solid var(--paper); }
.stakeout-game .cell.zone-right { border-right:3px solid var(--paper); }
.stakeout-game .cell.zone-bottom { border-bottom:3px solid var(--paper); }
.stakeout-game .cell.zone-left { border-left:3px solid var(--paper); }
.stakeout-game .zone-label { position:absolute; top:3px; left:3px; font-size:.875rem; line-height:1; font-weight:800; }
.stakeout-game .token { display:block; padding:1rem 0 0 8px; font-size:28px; line-height:1; }
.stakeout-game .cell[data-mark="1"] .token { color:var(--acid); text-shadow:0 2px 0 #000; }
.stakeout-game .cell[data-mark="2"] .token { color:var(--paper); opacity:.85; }
.stakeout-game .cell.given .token { color:var(--paper); }
.stakeout-game .cell.conflict .token { color:var(--red); }
.stakeout-game .cell.conflict::after { content:"!"; position:absolute; bottom:2px; right:4px; font-size:.875rem; font-weight:900; color:var(--red); }
.stakeout-game .cell:focus-visible { z-index:2; outline-offset:-5px; }
.stakeout-game .cell.lesson-target { box-shadow:inset 0 0 0 3px var(--acid); }
.stakeout-game .board.complete { border-color:var(--acid); box-shadow:5px 5px 0 var(--paper); }
.stakeout-game .status { min-height:48px; font-size:1rem; line-height:1.45; margin:16px 0; }
.stakeout-game .status.error { color:var(--red); }
.stakeout-game .status.complete { color:var(--acid); font-weight:800; }
.stakeout-game .modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.stakeout-game .modes button { display:grid; place-items:center; gap:4px; padding:8px; min-width:0; min-height:48px; overflow-wrap:anywhere; line-height:1.3; font-weight:800; }
.stakeout-game .modes button[aria-pressed="true"] { background:var(--acid); color:var(--black); border-color:var(--acid); }
.stakeout-game .modes span { margin:0; }
.stakeout-game .tools { display:flex; gap:8px; margin-top:12px; }
.stakeout-game .tools button { flex:1; padding:8px; }
.stakeout-game .help,.stakeout-game .local-note { font-size:.875rem; color:var(--muted); line-height:1.55; }
.stakeout-game .learning-guide { padding:12px; margin:0 0 18px; border:1px solid #596047; border-left:4px solid var(--acid); background:#141a0d; }
.stakeout-game .guide-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.stakeout-game .guide-heading h4 { margin:0; font-size:1rem; }
.stakeout-game .guide-heading span { color:var(--acid); font-size:.875rem; font-weight:700; }
.stakeout-game .learning-guide p { line-height:1.5; margin:10px 0; }