.home-watch { padding: 28px 0 30px; border-bottom: 1px solid var(--line); }
.watch-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:18px; }
.watch-heading h2 { margin:5px 0 0; font-size:clamp(28px,3vw,42px); letter-spacing:-.04em; line-height:1.1; }
.watch-heading p { margin:0; color:var(--muted); font-size:13px; max-width:360px; }
.watch-runs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.home-watch button, .home-watch select { min-height:44px; border:1px solid var(--line); background:var(--coal); color:var(--paper); padding:10px 13px; font:650 11px/1.2 var(--mono); cursor:pointer; }
.home-watch button:hover { border-color:var(--paper); }
.home-watch button[aria-pressed="true"] { background:var(--acid); color:var(--coal); border-color:var(--acid); }
.home-watch button:disabled { opacity:.4; cursor:default; }
.home-watch button:focus-visible, .home-watch input:focus-visible, .home-watch select:focus-visible, .watch-screen:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.watch-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; border:1px solid var(--line); background:#030503; }
.watch-main { min-width:0; }
.watch-screen { overflow:auto; background:#000; }
.watch-screen canvas { width:100%; height:auto; display:block; image-rendering:pixelated; }
.watch-screen[data-zoom="true"] canvas { width:1200px; max-width:none; }
.watch-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:40px; padding:8px 14px; border-bottom:1px solid var(--line); color:var(--muted); font:650 10px/1.4 var(--mono); }
.watch-badge { color:var(--acid); }
.watch-badge[data-live="true"] { color:var(--cyan); }
.watch-sidebar { border-left:1px solid var(--line); padding:20px; min-width:0; }
.watch-sidebar h3 { margin:0 0 14px; font:700 11px/1.2 var(--mono); color:var(--cyan); text-transform:uppercase; }
.watch-intent { margin:0 0 14px; font-size:16px; line-height:1.5; overflow-wrap:anywhere; }
.watch-keys { display:flex; flex-wrap:wrap; gap:5px; margin:0 0 12px; }
.watch-keys code { font:600 10px/1.4 var(--mono); padding:5px 7px; background:#17201b; border:1px solid #334138; overflow-wrap:anywhere; }
.watch-note { color:var(--muted); font-size:11px; line-height:1.5; margin:8px 0; }
.watch-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:18px 0; margin:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.watch-stats dt { font:600 9px/1.4 var(--mono); text-transform:uppercase; color:var(--muted); }
.watch-stats dd { font:650 18px/1.4 var(--mono); margin:4px 0 0; }
.watch-controls { display:flex; gap:6px; align-items:center; padding:10px; border-top:1px solid var(--line); }
.watch-controls input { flex:1; min-width:50px; accent-color:var(--acid); cursor:pointer; min-height:44px; }
.watch-caption { padding:0 14px 12px; margin:0; color:var(--muted); font:500 10px/1.5 var(--mono); }
.watch-footer { display:flex; justify-content:space-between; gap:12px; margin-top:12px; font-size:11px; color:var(--muted); }
.watch-moves { display:grid; gap:4px; margin:8px 0 0; padding:0; list-style:none; }
.watch-moves button { text-align:left; width:100%; font:500 11px/1.4 var(--mono); padding:7px 8px; }
.watch-moves button strong { color:var(--cyan); }
.watch-error { color:#f6bb86; }
@media (min-width:1500px) { .watch-layout { grid-template-columns:minmax(0,1fr) 340px; } }
@media (max-width:960px) { .watch-layout { grid-template-columns:1fr; } .watch-sidebar { border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:20px; } .watch-stats { margin-top:0; } .watch-moves { grid-column:1 / -1; } }
@media (max-width:600px) { .home-watch { padding-top:20px; } .watch-heading { display:block; } .watch-heading p { margin-top:10px; } .watch-sidebar { display:block; padding:16px; } .watch-controls { flex-wrap:wrap; } .watch-controls input { order:-1; flex-basis:100%; } .watch-footer { display:block; } .watch-bar { align-items:start; } }
.watch-outcome { margin-top: 18px; padding: 18px; border: 1px solid var(--line); }
.watch-outcome h3 { margin: 0 0 12px; font-size: 1rem; }
.watch-outcome p { font-size: 1rem; line-height: 1.6; }
.watch-outcome .watch-note { font-size: .875rem; }
.watch-outcome .fl-link { display: inline-block; margin: 8px 18px 0 0; }