.activity-page { padding:72px 12px 24px; }
.activity-page .site-nav { position:relative; margin:-72px 0 18px; top:auto; padding:8px; min-height:52px; flex-wrap:nowrap; justify-content:space-between; gap:6px; }
.activity-page .site-nav .brand-home { font-size:15px; padding:4px; white-space:nowrap; }
.activity-page .theme-toggle { padding:8px; font-size:12px; }
.activity-menu { position:relative; font-size:13px; }
.activity-menu summary { cursor:pointer; padding:10px; }
.activity-menu .nav-links { position:absolute; right:0; top:100%; min-width:170px; padding:10px; border:1px solid var(--card-border); border-radius:12px; background:var(--card-bg); box-shadow:var(--card-shadow); display:flex; flex-direction:column; z-index:100; }
.play-setup { width:100%!important; max-width:480px!important; padding:22px!important; margin:12px auto!important; text-align:left; }
.play-setup .quick-start-btn { border:0; border-radius:12px; min-height:48px; background:#246c66; color:white; font-weight:750; cursor:pointer; }
.play-setup .quick-start-hint { font-size:12px; margin:4px 0 16px; }
.play-disclosure { width:100%; border-top:1px solid var(--card-border,#cbd5e1); padding:12px 0; }
.play-disclosure > summary { font-size:14px; font-weight:700; cursor:pointer; padding:6px 0; }
.play-disclosure p { line-height:1.6; }
.play-disclosure .field-row { margin-top:12px; }
.activity-page:has(#startOverlay:not(.hidden)) .stage-wrap { overflow:visible; }
.activity-page:has(#startOverlay:not(.hidden)) #startOverlay { position:relative; padding:0; background:transparent; }
.activity-page:has(#startOverlay:not(.hidden)) #gameCanvas,
.activity-page:has(#startOverlay:not(.hidden)) .stats-bar,
.activity-page:has(#startOverlay:not(.hidden)) .progress-row,
.activity-page:has(#startOverlay:not(.hidden)) .octave-row,
.activity-page:has(#startOverlay:not(.hidden)) .controls-row,
.activity-page:has(#startOverlay:not(.hidden)) #lowerHint,
.activity-page #scrollHint { display:none!important; }
body.play-focused { overflow:hidden; height:100dvh; min-height:0; padding:0; }
.play-focused > .site-nav,.play-focused > h1,.play-focused > .tagline,.play-focused > footer,.play-focused > .brand-footer { display:none; }
.play-focused #gameArea { width:100%; height:100dvh; max-width:none; margin:0; padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; }
.play-focused #gameArea > * { flex-shrink:0; }
.play-focused #gameArea #msg { display:none; }
.play-focused #gameArea #hud,.play-focused #gameArea #score { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; font-size:13px; margin:0 0 6px; }
.play-focused .playfield-wrap { justify-content:center; gap:10px; }
.play-focused #nextCanvas { width:48px; height:48px; }
.play-focused #sidePanel { gap:4px; }
.play-focused #sidePanel.compact-preview { flex-direction:row; align-items:center; margin-left:8px; }
.play-focused #gameArea #coldBarWrap { max-width:100%; width:370px; }
.play-focused #game { display:block; max-width:none; max-height:none; touch-action:none; }
.play-focused .controls { margin-top:6px; gap:5px; }
.play-focused .controls button { min-height:36px; padding:6px; }
.play-focused #overlay { z-index:120; overflow:auto; padding:16px; }
.play-focused .game-shell { height:100dvh; width:100%; max-width:1200px; padding:max(6px,env(safe-area-inset-top)) 8px max(6px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:5px; margin:auto; }
.play-focused .game-shell > * { flex-shrink:0; }
.play-focused .stage-wrap { min-height:0; flex:1 1 0; padding:0; overflow:hidden; width:100%; }
.play-focused .stats-bar { gap:5px; margin:0; flex-wrap:nowrap; }
.play-focused .stat-chip { min-width:0; padding:4px 12px; box-shadow:none; }
.play-focused .stat-chip .val { font-size:16px; }
.play-focused .progress-row,.play-focused .controls-row,.play-focused .octave-row { margin:0; gap:8px; }
.play-focused #lowerHint { display:none; }
.play-focused #gameCanvas { display:block; margin:auto; touch-action:none; }
.play-focused .overlay { overflow:auto; }
.play-focused .overlay-card { max-height:100%; overflow:auto; }
@media(max-height:450px) { .play-focused .stat-chip { display:flex; gap:7px; align-items:center; } .play-focused .controls-row .btn,.play-focused .octave-row .btn { padding:5px 10px; } .play-focused .controls button { min-height:30px; } }
.doodle-mode-picker,.guided-actions,#guidedPalette { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:10px 0; }
.doodle-mode-picker label { font-weight:700; }
.doodle-mode-picker select,.guided-actions select,.guided-doodle button { font:inherit; color:var(--text); background:var(--card-bg); padding:9px; border:1px solid var(--card-border); border-radius:9px; cursor:pointer; }
#guidedPalette button[aria-pressed="true"] { outline:3px solid var(--text); outline-offset:1px; }
#guidedPalette button { border-width:4px; font-size:12px; }
#guidedStatus { font-size:14px; line-height:1.5; }
.dot-board { position:relative; width:min(100%,520px); aspect-ratio:1; margin:auto; background:#fff7e9; border-radius:14px; }
.dot-board svg { position:absolute; inset:0; width:100%; height:100%; }
.dot-board button { position:absolute; transform:translate(-50%,-50%); width:32px; height:32px; padding:0; border-radius:50%; background:#fff; color:#246c66; border:2px solid #246c66; font-weight:bold; }
.dot-board button:disabled { opacity:.7; cursor:default; }
.dot-board button.connected { color:white; background:#246c66; }
.paint-board { display:grid; grid-template-columns:repeat(8,1fr); max-width:520px; margin:auto; }
.paint-board button { aspect-ratio:1; min-width:0; border-radius:0; color:#253334; padding:0; border-color:#d1d5db; }
[hidden] { display:none!important; }
.guided-focused { height:100dvh; min-height:0; padding:8px; overflow:hidden; }
.guided-focused > .site-nav,.guided-focused > h1,.guided-focused > .tagline,.guided-focused > footer,.guided-focused > .brand-footer { display:none; }
.guided-focused .game-shell { height:calc(100dvh - 16px); display:flex; flex-direction:column; }
.guided-focused .doodle-mode-picker { margin:0 0 6px; flex-shrink:0; }
.doodle-mode-picker a { color:var(--text); margin-left:auto; font-size:13px; }
.guided-focused .guided-doodle { flex:1; min-height:0; display:flex; flex-direction:column; }
.guided-focused .guided-actions { margin:0; gap:4px; }
.guided-focused .guided-actions button,.guided-focused .guided-actions select { padding:6px; font-size:12px; }
.guided-focused #guidedStatus { margin:6px 0; font-size:12px; }
.guided-focused #guidedPalette { margin:0 0 6px; gap:4px; }
.guided-focused #guidedPalette button { padding:5px; font-size:11px; }
.guided-focused #guidedBoard { flex-shrink:0; margin:auto; }
.play-focused:not(:has(#rangeSelect)) #gameCanvas { width:100%; height:100%; }
.guided-focused .guided-doodle > :not(#guidedBoard) { flex-shrink:0; }
.live-speed { display:flex; align-items:center; gap:5px; color:var(--text-soft); font-size:12px; font-weight:700; }
.live-speed input[type="range"] { width:110px; min-width:0; height:32px; margin:0; accent-color:#246c66; cursor:pointer; }
.live-speed output,.speed-slider output { min-width:38px; font-variant-numeric:tabular-nums; text-align:right; }
.speed-slider { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.speed-slider input { width:100%; min-width:0; height:36px; accent-color:#246c66; cursor:pointer; }

.end-exit { display:block; margin:12px auto 0; padding:10px 14px; width:fit-content; border:1px solid currentColor; border-radius:9px; color:var(--text,#e2e8f0); font-size:14px; font-weight:700; text-decoration:none; }
#overlay .end-exit { color:#e2e8f0; }
.healthy-options { font-size:13px; }
.healthy-options p { font-size:12px; line-height:1.6; color:var(--text-soft); }
.healthy-options a { color:inherit; }
.break-notice { padding:12px; margin:0 0 12px; border:1px solid #5aa99a; border-radius:10px; background:var(--card-bg,#fff); color:var(--text,#26352e); font:13px/1.5 system-ui,sans-serif; }
.break-notice p { margin:6px 0; }
.break-notice a,.break-notice button { color:inherit; font:inherit; padding:5px; }
.guided-focused > .game-shell > .healthy-options { display:none; }