:root{--bb-bg: #002b36;--bb-surface: #073642;--bb-surface-alt: #0a3f4c;--bb-line: #586e75;--bb-line-strong: #657b83;--bb-text: #eee8d5;--bb-text-secondary: #93a1a1;--bb-text-muted: #839496;--bb-accent: #268bd2;--bb-accent-strong: #2aa198;--bb-danger: #dc322f;--bb-tier-bronze: #cb4b16;--bb-tier-gold: #b58900;--bb-scrim: rgba(0, 43, 54, .75)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;min-height:100%;background:var(--bb-bg);overscroll-behavior:none;scroll-behavior:smooth}:root{--bb-scroll-cue-height: 44px}#app-shell{position:relative;width:100%;height:calc(100vh - var(--bb-scroll-cue-height));height:calc(100svh - var(--bb-scroll-cue-height));overflow:hidden}#game{width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#game canvas{display:block;touch-action:none}#scroll-cue{display:flex;align-items:center;justify-content:center;gap:.4em;height:var(--bb-scroll-cue-height);margin-bottom:48px;overflow:hidden;opacity:.75;color:var(--bb-text-secondary);font-size:clamp(14px,.9vw + 11px,16px);text-decoration:none;animation:scroll-cue-nudge 2.4s ease-in-out infinite}#scroll-cue:focus-visible{outline:2px solid var(--bb-accent);outline-offset:2px;opacity:1}#scroll-cue:after{content:"";width:.55em;height:.55em;transform:translateY(-.12em) rotate(45deg);border-right:.13em solid currentColor;border-bottom:.13em solid currentColor;border-radius:.12em}@keyframes scroll-cue-nudge{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}#landing-band{min-height:60vh;min-height:60svh;padding:0 max(16px,env(safe-area-inset-left)) 64px max(16px,env(safe-area-inset-right));color:var(--bb-text);font-size:clamp(15px,1.15vw + 12px,18px);line-height:1.6}#landing-band>*{max-width:68ch;margin-inline:auto}#landing-band .landing-title{margin-bottom:12px;font-size:clamp(24px,3.2vw + 12px,34px);line-height:1.25;color:var(--bb-text)}#landing-band .landing-lede{margin-bottom:40px;font-size:clamp(16px,1.4vw + 12px,20px);color:var(--bb-text-secondary)}#landing-band .landing-section{margin-bottom:40px}#landing-band .landing-section h2{margin-bottom:12px;font-size:clamp(19px,1.8vw + 12px,24px);line-height:1.3;color:var(--bb-text)}#landing-band .landing-section p{color:var(--bb-text-secondary)}#landing-band .landing-list{padding-left:22px;list-style:disc}#landing-band .landing-list li{margin-bottom:14px;color:var(--bb-text-secondary)}#landing-band .landing-list strong{color:var(--bb-text)}#landing-band .landing-qa{margin-bottom:20px}#landing-band .landing-question{margin-bottom:4px;font-size:clamp(16px,1.2vw + 12px,19px);line-height:1.4;color:var(--bb-text)}#landing-band .landing-answer{color:var(--bb-text-secondary)}.screen{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:24px;padding-bottom:calc(24px + var(--bb-footer-height));background:var(--bb-bg);touch-action:auto}.screen[hidden]{display:none}.screen-panel{width:min(420px,100%);display:flex;flex-direction:column;align-items:stretch;text-align:center;font-family:sans-serif;color:var(--bb-text-secondary);max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}.app-icon{align-self:center;width:auto;height:min(112px,16vh);margin-bottom:16px}.screen-title{margin-bottom:12px;color:var(--bb-text);font-size:34px}.screen-subtitle{margin-bottom:28px;font-size:16px;line-height:1.5}.screen-btn{margin-top:12px;padding:16px;border:0;border-radius:12px;font:600 18px/1 sans-serif;cursor:pointer}.screen-btn-primary{background:var(--bb-accent);color:var(--bb-bg)}.screen-btn-secondary{background:var(--bb-line);color:var(--bb-text)}.screen-btn-primary:hover{background:var(--bb-accent-strong)}.screen-btn-secondary:hover{background:var(--bb-line-strong)}.tester-note{margin-bottom:10px;font-size:15px;line-height:1.5;text-align:start}.screen-link{display:block;text-align:center;text-decoration:none}@media(max-height:600px){:root{--bb-scroll-cue-height: 0px}.screen{padding:12px;padding-bottom:calc(12px + var(--bb-footer-height))}.app-icon{display:none}.screen-title{margin-bottom:6px;font-size:22px}.screen-subtitle{margin-bottom:8px;font-size:14px}.tester-note{margin-bottom:6px;font-size:13px}.screen-btn{margin-top:6px;padding:10px;font-size:16px}.settings-sections{gap:12px}}.settings-sections{display:flex;flex-direction:column;gap:18px;overflow-y:auto;margin-bottom:8px}.settings-section-title{margin-bottom:6px;color:var(--bb-text);font:600 15px/1.3 sans-serif;text-align:start}.settings-list{display:flex;flex-direction:column;gap:4px;text-align:left}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;background:var(--bb-surface);font:500 15px/1.3 sans-serif}.settings-text{display:flex;flex:1;flex-direction:column;gap:4px}.settings-label{flex:1}.settings-hint{color:var(--bb-text-muted);font:400 12px/1.35 sans-serif}.settings-number{width:72px;padding:8px;border:1px solid var(--bb-line);border-radius:8px;background:var(--bb-bg);color:var(--bb-text);font:600 16px/1 sans-serif;text-align:center}.settings-select{padding:8px;border:1px solid var(--bb-line);border-radius:8px;background:var(--bb-bg);color:var(--bb-text);font:600 15px/1 sans-serif}.settings-toggle{width:22px;height:22px;accent-color:var(--bb-accent)}.game-chrome{display:contents}.game-chrome[hidden]{display:none}.game-chrome-cluster{position:absolute;top:max(12px,env(safe-area-inset-top));z-index:10;display:flex;gap:8px}.game-chrome-nav{left:max(12px,env(safe-area-inset-left))}.game-chrome-actions{right:max(12px,env(safe-area-inset-right))}.game-chrome-btn{height:44px;padding:0 14px;border:0;border-radius:22px;background:var(--bb-line);color:var(--bb-text);font:600 15px/1 sans-serif;cursor:pointer}.game-chrome-btn:hover{background:var(--bb-line-strong)}.chrome-round-btn{position:relative;width:44px;height:44px;border:0;border-radius:50%;font:600 22px/1 sans-serif;cursor:pointer}.confirm-moves-button{border:2px solid var(--bb-accent);background:var(--bb-bg);color:var(--bb-accent)}.confirm-moves-button[aria-pressed=true]{background:var(--bb-accent);color:var(--bb-bg)}.confirm-moves-button:hover[aria-pressed=true]{border-color:var(--bb-accent-strong);background:var(--bb-accent-strong)}.confirm-moves-button:hover[aria-pressed=false]{border-color:var(--bb-accent-strong);color:var(--bb-accent-strong)}.undo-button{background:var(--bb-accent);color:var(--bb-bg)}.undo-button:hover:not(:disabled){background:var(--bb-accent-strong)}.undo-button:disabled{background:var(--bb-line);color:var(--bb-text-muted);cursor:default}#help-button{background:var(--bb-line);color:var(--bb-text)}#help-button:hover{background:var(--bb-line-strong)}.tutorial-mark-ring{position:absolute;inset:-6px;border:3px solid var(--bb-accent);border-radius:50%;pointer-events:none;animation:bb-mark-pulse var(--bb-mark-pulse-ms) ease-in-out infinite}.tutorial-mark-ring[hidden]{display:none}@keyframes bb-mark-pulse{0%,to{opacity:1}50%{opacity:var(--bb-mark-pulse-min)}}@media(prefers-reduced-motion:reduce){.tutorial-mark-ring,#scroll-cue{animation:none}html,body{scroll-behavior:auto}}.tutorial-mark-label{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) + 56px);right:max(12px,env(safe-area-inset-right));z-index:10;display:flex;align-items:center;height:44px;padding:0 14px;border:3px solid var(--bb-accent);border-radius:22px;background:var(--bb-surface-alt);color:var(--bb-text);font:600 15px/1 sans-serif;pointer-events:none}.tutorial-mark-label[hidden]{display:none}#help-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;background:#06060cd1;touch-action:auto}#help-overlay[hidden]{display:none}.help-panel{width:min(560px,100%);max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:28px;border-radius:18px;background:var(--bb-surface-alt);color:var(--bb-text-secondary);font-family:sans-serif;line-height:1.55}.help-panel h1{margin-bottom:8px;color:var(--bb-text);font-size:28px}.help-panel h2{margin-top:22px;margin-bottom:6px;color:var(--bb-accent);font-size:18px}.help-panel p{margin-bottom:8px;font-size:16px}.help-dismiss{width:100%;margin-top:28px;padding:14px;border:0;border-radius:12px;background:var(--bb-accent);color:var(--bb-bg);font:600 17px/1 sans-serif;cursor:pointer}.help-replay{width:100%;margin-top:10px;padding:14px;border:0;border-radius:12px;background:var(--bb-line);color:var(--bb-text);font:600 17px/1 sans-serif;cursor:pointer}.help-replay:hover{background:var(--bb-line-strong)}.run-end-overlay{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bb-scrim);touch-action:auto}.run-end-overlay[hidden]{display:none}.run-end-score{margin-bottom:12px;color:var(--bb-text);font:700 44px/1 sans-serif}.run-end-marks{--bb-badge-size: 32px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;min-height:var(--bb-badge-size);margin-bottom:8px}.run-end-score[hidden],.run-end-marks[hidden],.run-end-overlay .screen-subtitle[hidden],.run-end-overlay .screen-btn[hidden]{display:none}.run-end-overlay .screen-subtitle,.abandon-prompt .screen-subtitle{color:var(--bb-text)}@media(max-height:600px){.run-end-score{margin-bottom:8px;font-size:32px}.run-end-marks{--bb-badge-size: 24px;margin-bottom:4px}}.abandon-prompt{position:absolute;inset:0;z-index:32;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bb-scrim);touch-action:auto}.abandon-prompt[hidden]{display:none}.scores-list{display:flex;flex-direction:column;gap:6px;overflow-y:auto;margin-bottom:8px;padding-left:0;list-style:none;text-align:left}.scores-row{display:flex;align-items:baseline;gap:12px;padding:10px 12px;border-radius:10px;background:var(--bb-surface);font-family:sans-serif}.scores-score{min-width:64px;color:var(--bb-text);font:700 20px/1 sans-serif;text-align:right}.scores-detail{display:flex;flex:1;flex-direction:column;gap:2px}.scores-meta{color:var(--bb-text-secondary);font:500 13px/1.3 sans-serif}.scores-settings{color:var(--bb-text-muted);font:400 12px/1.35 sans-serif}.scores-empty{margin-bottom:12px;color:var(--bb-text-muted);font:400 15px/1.4 sans-serif}.scores-empty[hidden]{display:none}.challenges-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;margin-bottom:8px;padding-left:0;list-style:none;text-align:left}.challenges-row{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:10px;background:var(--bb-surface);font-family:sans-serif}.challenges-detail{display:flex;flex:1;flex-direction:column;gap:4px}.challenges-name{color:var(--bb-text);font:700 16px/1.2 sans-serif}.challenges-tiers{display:flex;flex-direction:column;gap:2px;padding-left:0;list-style:none}.challenges-tier{display:flex;align-items:baseline;gap:6px;color:var(--bb-text-muted);font:400 13px/1.35 sans-serif}.challenges-tick{flex:0 0 auto;width:12px;font:700 13px/1.35 sans-serif;text-align:center}.challenges-tier[data-earned=true]{color:var(--bb-text-secondary)}.challenges-tier--bronze .challenges-tick{color:var(--bb-tier-bronze)}.challenges-tier--silver .challenges-tick{color:var(--bb-line-strong)}.challenges-tier--gold .challenges-tick{color:var(--bb-tier-gold)}.challenges-empty{margin-bottom:12px;color:var(--bb-text-muted);font:400 15px/1.4 sans-serif}.challenges-empty[hidden]{display:none}:root{--bb-footer-height: 32px}.app-footer{position:absolute;right:0;bottom:max(8px,env(safe-area-inset-bottom));left:0;z-index:31;display:flex;gap:8px;align-items:baseline;justify-content:center;padding:0 16px;color:var(--bb-text-muted);font:400 12px/1.4 sans-serif;pointer-events:none}.app-footer[hidden],.app-footer [hidden]{display:none}:root{--bb-badge-size: 44px}.challenge-badge{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:var(--bb-badge-size);height:var(--bb-badge-size);border:0;border-radius:8px;background:transparent}.challenge-mark{display:block;width:55%;height:55%}.challenge-badge--bronze{background:var(--bb-tier-bronze);color:var(--bb-bg)}.challenge-badge--silver{background:var(--bb-line-strong);color:var(--bb-bg)}.challenge-badge--gold{background:var(--bb-tier-gold);color:var(--bb-bg)}.challenge-badge--locked{border:3px solid var(--bb-line);background:none;color:var(--bb-line)}
