/* Tactics: alerts, queen rings and piece mobility. One scroll surface for
   the desktop dock, the phone sheet and the online side column. */
#strategy-panel{--tq-white:#f7f3e6;--tq-black:#2b3037;--tq-gold:#f2b134;--tq-danger:#d9483b;--tq-warn:#e0a526;--tq-best:#2f9a6c}
#strategy-panel .tactics-panel{display:flex;flex-direction:column;min-height:0}
html body[data-screen] #strategy-panel .tactics-body,html body[data-screen] #strategy-panel .tactics-help{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:0 2px 8px}
html body[data-screen] #strategy-panel [hidden]{display:none!important}
#strategy-panel .tactics-help p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
#strategy-panel .tactics-section h3{margin:0 0 6px;font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

/* Alerts */
#strategy-panel .tactics-alerts{display:flex;flex-direction:column;gap:6px}
#strategy-panel .tactics-alert{--tone:var(--muted);padding:9px 10px;border:1px solid color-mix(in srgb,var(--tone) 45%,var(--line));border-left:4px solid var(--tone);border-radius:9px;background:color-mix(in srgb,var(--tone) 9%,var(--panel));outline:none}
#strategy-panel .tactics-alert:focus-visible{box-shadow:0 0 0 2px var(--accent)}
#strategy-panel .tactics-alert.tone-best{--tone:var(--tq-best)}#strategy-panel .tactics-alert.tone-blunder{--tone:var(--tq-danger)}#strategy-panel .tactics-alert.tone-mistake{--tone:#e98a2e}#strategy-panel .tactics-alert.tone-inaccuracy{--tone:var(--tq-warn)}
#strategy-panel .tactics-alert-title{display:block;font-size:14px;line-height:1.3;color:var(--ink)}
#strategy-panel .tactics-alert-text{margin:3px 0 0;font-size:13px;line-height:1.4;color:var(--muted)}
#strategy-panel .tactics-alert-moves{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
#strategy-panel .tactics-move{min-height:28px;height:auto;padding:2px 8px;border-radius:7px;font:600 12.5px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#strategy-panel .tactics-move[aria-pressed=true]{background:var(--ink);color:var(--panel);border-color:var(--ink)}

/* Queens */
#strategy-panel .tactics-queen-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#strategy-panel .tactics-queen{display:flex;align-items:center;gap:7px;min-width:0;padding:7px;border:1px solid var(--line);border-radius:10px;background:var(--panel);outline:none}
#strategy-panel .tactics-queen:focus-visible{box-shadow:0 0 0 2px var(--accent)}
#strategy-panel .tactics-queen.danger-raised{border-color:color-mix(in srgb,var(--tq-warn) 60%,var(--line))}
#strategy-panel .tactics-queen.danger-high{border-color:var(--tq-danger);background:color-mix(in srgb,var(--tq-danger) 7%,var(--panel))}
#strategy-panel .tactics-queen.is-unplaced{opacity:.75}
#strategy-panel .tactics-ring{width:44px;height:44px;flex:none;overflow:visible}
#strategy-panel .tactics-ring .ring-cell{stroke-width:1.1}
#strategy-panel .tactics-ring .ring-w{fill:var(--tq-white);stroke:#9d9784}
#strategy-panel .tactics-ring .ring-b{fill:var(--tq-black);stroke:#11151a}
#strategy-panel .tactics-ring .ring-empty{fill:none;stroke:var(--muted);stroke-dasharray:2 1.6;opacity:.7}
#strategy-panel .tactics-ring .ring-stack{stroke-width:2.4}
#strategy-panel .tactics-ring .ring-queen{fill:var(--tq-gold);stroke-width:1.4}
#strategy-panel .tactics-ring .ring-queen.ring-w{stroke:#f7f3e6}#strategy-panel .tactics-ring .ring-queen.ring-b{stroke:#2b3037}
#strategy-panel .tactics-ring .ring-pin{fill:var(--tq-danger);stroke:var(--panel);stroke-width:.8}
#strategy-panel .tactics-queen-text{display:flex;flex-direction:column;min-width:0;gap:1px}
#strategy-panel .tactics-queen-text strong{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
#strategy-panel .tactics-queen-line{font-size:14px;font-weight:650;line-height:1.25;color:var(--ink);white-space:nowrap}
#strategy-panel .tactics-queen-text small{font-size:12px;line-height:1.3;color:var(--muted)}
#strategy-panel .danger-high .tactics-filled{color:var(--tq-danger)}
#strategy-panel .tactics-rescue{font-style:italic}

/* Pieces */
#strategy-panel .tactics-piece-rows{display:flex;flex-direction:column;gap:9px}
#strategy-panel .tactics-piece-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}
#strategy-panel .tactics-piece-head .player-dot{width:9px;height:9px;flex:none}
#strategy-panel .tactics-piece-count{margin-left:auto;color:var(--muted);font-size:12.5px}
#strategy-panel .tactics-piece-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
#strategy-panel .tactics-bug{position:relative;display:inline-grid;place-items:center;width:30px;height:32px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#a8a191;outline:none}
#strategy-panel .tactics-bug-b{background:#0d1014}
#strategy-panel .tactics-bug-face{display:grid;place-items:center;position:absolute;inset:1.5px;clip-path:inherit;color:var(--bug)}
#strategy-panel .tactics-bug-w .tactics-bug-face{background:var(--tq-white)}#strategy-panel .tactics-bug-b .tactics-bug-face{background:var(--tq-black)}
#strategy-panel .tactics-bug svg{width:18px;height:18px}
#strategy-panel .tactics-bug.is-pinned,#strategy-panel .tactics-bug.is-waiting{opacity:.4;filter:grayscale(.6)}
#strategy-panel .tactics-bug.is-covered{opacity:.55}
#strategy-panel .tactics-bug.is-covered::after{content:'';position:absolute;inset:auto 6px 5px;height:3px;border-radius:2px;background:#aa62ba}
#strategy-panel .tactics-bug:focus-visible{filter:drop-shadow(0 0 2px var(--accent))}
#strategy-panel .tactics-chip-divider{width:1px;align-self:stretch;margin:2px 3px;background:var(--line)}

/* Last move */
#strategy-panel .tactics-changes ul{margin:0;padding:0 0 0 16px;display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.4;color:var(--ink)}
#strategy-panel .tactics-changes li{outline:none}
#strategy-panel .tactics-changes li:focus-visible{text-decoration:underline}

body[data-screen=mobile] #strategy-panel .tactics-body{gap:9px}
body[data-screen=mobile] #strategy-panel .tactics-ring{width:40px;height:40px}