html { overscroll-behavior-y: contain; }
body { padding-bottom: env(safe-area-inset-bottom, 0px); }
#stage { touch-action: none; }
.hc-native-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; background:#173b35; color:#fff9e8; font:13px/1.5 system-ui,sans-serif; }
.hc-native-bar button { color:inherit; background:transparent; border:1px solid #fff6; border-radius:8px; padding:7px 12px; }
.hc-native-bar[hidden] { display:none; }

/* A compact, touch-first studio. These overrides never resize the SVG viewBox. */
:root { --app-nav:76px; --app-radius:20px; }
* { -webkit-tap-highlight-color:transparent; }
body { padding-bottom:calc(var(--app-nav) + 20px); }
button,a,input,select { touch-action:manipulation; }
button { transition:background .18s,transform .18s; }
button:not(:disabled):active { transform:scale(.97); }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid #b64c33; outline-offset:3px; }
[hidden] { display:none!important; }
main#game { max-width:680px; padding:0 20px; }
.topbar { display:flex; max-width:720px; min-height:64px; padding:12px 20px; gap:12px; border-bottom:0; }
.topbar .home,.hc-intro,main>footer { display:none; }
.topbar .brand { margin:0; justify-self:auto; flex:1; gap:9px; }
.brand h1 { font-size:22px; letter-spacing:-.9px; }
.brand h1 span { display:block; font-size:9px; letter-spacing:2px; margin-top:2px; }
.brand img { width:34px; height:34px; }
.top-actions { width:auto; margin:0; display:flex; }
.app-settings-open,.app-close { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; padding:10px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink); }
.app-settings-open svg,.app-close svg { width:22px; height:22px; }
.game-nav { padding:4px 0 12px; gap:8px; display:flex; flex-wrap:wrap; }
.modes { width:100%; padding:4px; border-radius:16px; background:#e6e4d8; gap:4px; }
.modes button { border-radius:12px; min-height:46px; flex:1; font-size:14px; padding:10px 8px; }
.modes button[aria-pressed=true] { box-shadow:0 3px 8px #263f3615; }
.date { width:auto; margin:0 2px 0 auto!important; font-size:11px; font-variant-numeric:tabular-nums; }
.app-coach { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 14px; margin:0 0 16px; border:1px solid #d7dfc4; border-radius:16px; background:#e9eddf; }
.app-coach strong { display:block; font-size:13px; line-height:1.5; }
.app-coach small { display:block; font-size:12px; line-height:1.6; color:var(--muted); margin-top:3px; }
.app-coach .app-close { border:0; background:transparent; width:44px; height:44px; }
.layout { display:block; }
.object-heading { min-height:58px; padding:0 2px; align-items:center; }
.object-heading h2,html[lang=en] .object-heading h2 { font-size:23px; letter-spacing:-.7px; margin:6px 0 0; line-height:1.3; }
.eyebrow { font-size:9px; gap:5px; }
.attempt-counter { min-width:62px; max-width:90px; }
.attempt-counter>span { font-size:11px; }
#attempt-dots { justify-content:flex-end; gap:6px; }
#attempt-dots b { width:10px; height:10px; }
.stage-wrap { border-radius:var(--app-radius); background:radial-gradient(ellipse at 50% 45%,#fffdf6 0%,#faf7ef 70%); border-color:#dedbcb; box-shadow:0 6px 24px #463f2410; margin-top:14px; }
#stage { display:block; width:100%; min-height:210px; max-height:350px; height:clamp(210px,35svh,350px); }
.stage-meta { top:14px; left:16px; right:16px; font-size:9px; }
.stage-meta b { font-size:13px; }
.hc-draw-hint { font-size:11px; bottom:12px; }
.hc-steps { margin:12px 0!important; gap:18px; font-size:10px; }
.hc-steps span { font-size:9px; }
.controls { display:flex; gap:10px; padding:4px 0; }
.controls>.primary { flex:1; min-width:0; height:56px; border-radius:16px; font-size:16px; box-shadow:0 4px 10px #263f3616; }
.controls>.primary:disabled { box-shadow:none; }
.controls>.icon-button { min-width:50px; width:50px; height:56px; border-radius:16px; border-color:var(--line); }
body:is([data-hc-phase=result],[data-hc-phase=complete]) .hc-steps { display:none; }
.result { border-radius:20px; padding:20px; margin:14px 0 10px; box-shadow:0 5px 20px #263f3609; }
.result .ratios { margin:12px 0; }
.result .ratios strong { font-size:36px; font-variant-numeric:tabular-nums; }
.hc-balance-track { height:10px; border-radius:8px; }
.status { min-height:0; padding:10px 2px; font-size:13px; }
#fine-adjust { margin-top:10px; padding:0 4px; border-top:0; }
#fine-adjust summary { min-height:48px; align-items:center; font-size:13px; }
.adjustments { padding:12px; background:#e9e8dc; border-radius:14px; gap:16px; }
.adjustments input { min-height:44px; accent-color:var(--ink); }
.after-controls { min-height:44px; }
.after-controls button { min-height:44px; }
.hc-friend-share { border:1px solid var(--line); border-radius:18px; padding:16px; margin:16px 0; }
.hc-friend-share>button,.hc-copy-row button,.hc-lobby-action a { border-radius:12px; }
.hc-friend-banner { background:#e9eddf; border:1px solid #cdd7bc; border-radius:16px; padding:14px; margin:0 0 16px; }
.hc-friend-banner button { border-radius:10px; }

/* A view switch only hides presentation. Game state and API ownership stay intact. */
body[data-app-view=play] :is(.sidebar,#app-ranking) { display:none; }
body[data-app-view=records] :is(.play,.game-nav,.app-coach,#hc-friend-banner,#app-ranking) { display:none!important; }
body[data-app-view=ranking] :is(.layout,.game-nav,.app-coach,#hc-friend-banner) { display:none!important; }
.sidebar { display:flex; flex-direction:column; gap:16px; margin:4px 0 0; border:0; }
.sidebar>section { padding:20px; border:1px solid var(--line); border-radius:20px; margin:0; background:var(--surface); }
.sidebar>section.today-record { padding:24px; background:var(--ink); border-color:var(--ink); }
.today-record .best { position:static; margin:18px 0; }
.today-record .best strong { font-size:56px; }
.sidebar .history { gap:8px; }
.sidebar .history .bar-track { height:64px; }
.sidebar .daily-note { padding:16px; margin:0; border:0; }
.app-page-heading { padding:10px 2px 8px; }
.app-page-heading>p,.hc-week-header .hc-kicker { font-size:10px; letter-spacing:1px; color:var(--muted); margin:0 0 8px; }
.app-page-heading h2,.hc-week-header h2 { margin:0; font-size:30px; letter-spacing:-1.2px; }
.app-page-heading>span { display:block; margin-top:8px; color:var(--muted); font-size:13px; line-height:1.6; }
.hc-weekly { margin:4px 0 0; padding:10px 0 0; border-top:0; }
.hc-week-header { display:grid; grid-template-columns:minmax(0,1fr); width:100%; gap:16px; }
.hc-week-header>div { min-width:0; }
.hc-week-header h2 { letter-spacing:0; overflow-wrap:anywhere; }
.hc-week-header #hc-week-range { max-width:100%; line-height:1.6; overflow-wrap:anywhere; }
.hc-week-date { white-space:nowrap; }
.hc-week-filters { display:grid; grid-template-columns:minmax(0,1fr) 48px; align-items:end; gap:12px; width:100%; max-width:420px; min-width:0; padding:0; border:0; border-radius:0; background:transparent; }
.hc-week-filters>label:not([hidden]) { grid-column:1; grid-row:1; display:grid; gap:6px; min-width:0; }
.hc-week-filters select { width:100%; min-width:0; max-width:100%; min-height:48px; height:auto; font-size:16px; line-height:1.5; padding:10px 12px; border-radius:8px; }
.hc-week-filters>#hc-week-refresh { grid-column:2; grid-row:1; align-self:end; justify-self:stretch; display:grid; place-items:center; width:48px; min-width:48px; height:48px; padding:12px; border-radius:8px; }
.hc-week-filters>#hc-week-refresh svg { width:20px; height:20px; }
#hc-week-retry { border-radius:8px; }
.hc-week-personal,.hc-week-honors { border:1px solid var(--line); border-radius:18px; padding:20px; background:var(--surface); }
.hc-week-days { gap:6px; }
.hc-week-days li { padding:12px 2px; }
.app-bottom-nav { position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex; justify-content:center; padding:8px 16px max(8px,env(safe-area-inset-bottom)); background:#faf7eff5; border-top:1px solid #d9d7c8; box-shadow:0 -4px 24px #263f3606; backdrop-filter:blur(16px); }
.app-bottom-nav button { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; max-width:200px; min-height:56px; color:var(--muted); background:transparent; border:0; border-radius:16px; padding:7px 8px; font-size:11px; font-weight:600; }
.app-bottom-nav svg { width:23px; height:23px; }
.app-bottom-nav button[aria-pressed=true] { color:var(--ink); background:#e7ecd9; }
.app-bottom-nav button[aria-pressed=true] svg { stroke-width:2.1; }
.app-sheet { width:min(100% - 24px,480px); max-height:85svh; box-sizing:border-box; margin:auto auto 12px; border:1px solid #d9d7c8; border-radius:28px; padding:10px 24px 24px; background:var(--surface); color:var(--ink); box-shadow:0 -12px 60px #17281e26; }
.app-sheet::backdrop,dialog::backdrop { background:#17281e66; backdrop-filter:blur(3px); }
.app-sheet-handle { width:36px; height:4px; border-radius:4px; background:#c6c9b9; margin:0 auto 22px; }
.app-sheet header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.app-sheet header p { font-size:10px; letter-spacing:2px; margin:0 0 6px; color:var(--muted); }
.app-sheet header h2 { font-size:25px; letter-spacing:-1px; margin:0; }
.app-setting-row { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:70px; border-bottom:1px solid var(--line); font-size:15px; }
.app-setting-row #sound { width:48px; height:48px; border-radius:12px; }
.app-setting-row .surface-language { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.app-setting-row .surface-language a { min-width:48px; min-height:44px; }
.app-setting-row .surface-language a[aria-current=true] { background:var(--ink); color:var(--surface); }
.app-setting-link { display:flex; align-items:center; gap:10px; width:100%; min-height:60px; padding:10px 0; font-size:14px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; }
.app-setting-link svg { width:20px; height:20px; }
.app-sheet .account-link span { display:inline; }
.app-settings-note { font-size:12px; line-height:1.8; color:var(--muted); margin:20px 0 0; }
#rules { border-radius:24px; max-height:80svh; }
.hc-native-bar { margin:0 16px 10px; border-radius:14px; font-size:12px; }
.hc-native-bar button { min-height:44px; flex-shrink:0; }
.hc-native-bar .hc-native-dismiss { padding:0; width:32px; min-width:32px; border:0; font-size:22px; }
@media(max-width:360px) { main#game { padding:0 16px; }.topbar { padding:10px 16px; }.object-heading h2,html[lang=en] .object-heading h2 { font-size:21px; }.app-coach { padding:10px; }.result .ratios strong { font-size:30px; } }
@media(max-height:720px) { #stage { height:30svh; min-height:190px; }.app-coach { margin-bottom:10px; padding-block:8px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

#app-tutorial { box-sizing:border-box; width:min(calc(100% - 24px),480px); max-height:calc(100svh - 24px); padding:20px; border:1px solid var(--line); border-radius:26px; background:var(--surface); color:var(--ink); overscroll-behavior:contain; }
#app-tutorial header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tutorial-step { font-size:11px; font-weight:600; letter-spacing:1px; }
#tutorial-skip { min-height:44px; padding:8px; background:transparent; border:0; color:var(--muted); font-size:12px; }
#tutorial-title { margin:10px 0; font-size:25px; letter-spacing:-1px; line-height:1.35; }
#tutorial-title:focus { outline:none; }
#tutorial-description { margin:0 0 12px; font-size:14px; line-height:1.7; color:var(--muted); }
.tutorial-canvas { border:1px solid var(--line); border-radius:18px; overflow:hidden; text-align:center; background:var(--paper); }
#tutorial-stage { display:block; width:100%; height:clamp(150px,28svh,260px); touch-action:none; }
.tutorial-canvas>span { display:block; padding:0 8px 12px; font-size:11px; color:var(--muted); }
#tutorial-guide { fill:none; stroke:#263f3655; stroke-width:3; stroke-dasharray:8 10; }
#tutorial-line { fill:none; stroke:var(--ink); stroke-width:4; stroke-linecap:round; }
.tutorial-adjust { display:grid; font-size:12px; color:var(--muted); margin-top:12px; gap:4px; }
.tutorial-adjust input { width:100%; min-height:44px; accent-color:var(--ink); }
#tutorial-feedback { font-size:13px; color:var(--coral); line-height:1.6; min-height:44px; margin:8px 0; }
#tutorial-feedback:empty { visibility:hidden; }
.tutorial-actions { display:flex; gap:10px; margin-top:16px; }
.tutorial-actions button { min-height:50px; border-radius:14px; padding:12px; font-size:14px; }
#tutorial-reset { border:1px solid var(--line); background:transparent; color:var(--ink); }
#tutorial-next { flex:1; border:0; background:var(--ink); color:var(--surface); }
#tutorial-next:disabled { opacity:.45; }
#tutorial-result { border-radius:16px; background:#e6edce; margin-top:14px; padding:16px; text-align:center; }
#tutorial-result>strong { font-size:27px; font-variant-numeric:tabular-nums; }
#tutorial-result span { color:var(--muted); }
#tutorial-result p { margin:8px 0 0; font-size:14px; }
#app-tutorial:not([data-step=draw]) :is(.tutorial-adjust,#tutorial-reset) { display:none; }
#app-tutorial[data-step=summary] :is(.tutorial-canvas,#tutorial-result) { display:none; }
#tutorial-summary ul { list-style:none; padding:0; margin:0; }
#tutorial-summary li { font-size:13px; line-height:1.7; padding:12px 0; border-bottom:1px solid var(--line); color:var(--muted); }
#tutorial-summary strong { display:block; font-size:15px; margin-bottom:4px; color:var(--ink); }

#app-ranking { padding-top:4px; }
.app-ranking-periods { display:flex; gap:4px; padding:4px; background:#e6e4d8; border-radius:16px; margin:18px 0 22px; }
.app-ranking-periods button { flex:1; min-height:46px; border:0; border-radius:12px; background:transparent; color:var(--muted); font-size:14px; }
.app-ranking-periods button[aria-pressed=true] { background:var(--ink); color:var(--surface); box-shadow:0 3px 8px #263f3615; }
#app-ranking-daily>.section-head { flex-wrap:wrap; gap:10px; }
#app-ranking-daily>.section-head h2 { font-size:15px; margin-right:auto; }
#app-ranking-daily #league { font-size:13px; min-height:44px; border:1px solid var(--line); border-radius:10px; padding:8px; }
.app-rank-refresh { min-height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font-size:12px; }
.app-rank-note { color:var(--muted); font-size:12px; line-height:1.7; margin:12px 0 16px; }
#app-ranking .hc-rank-summary { padding:22px; border:0; border-radius:20px; background:var(--ink); color:var(--surface); box-shadow:0 7px 20px #263f3610; }
#app-ranking .hc-rank-summary>strong { display:block; font-size:25px; line-height:1.4; letter-spacing:-.7px; }
#app-ranking .hc-rank-summary :is(p,#hc-rank-label) { color:#dfe6d8; }
#app-ranking #hc-rank-detail { margin-top:12px; }
#app-ranking #hc-rank-goal { color:#e2efb5; font-size:16px; margin-top:10px; line-height:1.6; }
#app-ranking #hc-rank-goal:empty { display:none; }
#app-ranking #app-rank-score { margin:18px 0 0; padding-top:12px; border-top:1px solid #ffffff35; font-size:14px; font-weight:600; color:#fff9e8; }
#app-ranking :is(#hc-rank-login,#hc-board-retry) { color:var(--surface); }
#app-podium { margin:24px 0; }
#app-podium h3 { font-size:17px; margin:0; }
#app-podium>p { font-size:11px; line-height:1.6; color:var(--muted); margin:6px 0 12px; }
#app-podium ol { display:grid; grid-template-columns:repeat(auto-fit,minmax(75px,1fr)); gap:8px; list-style:none; padding:0; margin:0; align-items:stretch; }
#app-podium li { display:flex; flex-direction:column; align-items:center; text-align:center; padding:16px 8px; gap:8px; border:1px solid var(--line); border-radius:16px; background:var(--surface); min-width:0; }
#app-podium li[data-rank="1"] { background:#e6edce; border-color:#b9c895; }
#app-podium li>span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#e7e5d9; font-size:12px; font-weight:700; }
#app-podium li[data-rank="1"]>span { background:var(--ink); color:var(--surface); }
#app-podium li>strong { font-size:13px; line-height:1.6; overflow-wrap:anywhere; min-width:0; }
#app-podium li>b { font-size:20px; font-variant-numeric:tabular-nums; margin-top:auto; }
#app-podium li.is-mine { outline:2px solid var(--ink); outline-offset:-2px; }
#app-ranking .hc-nearby { border:1px solid var(--line); border-radius:18px; padding:18px 12px 8px; background:var(--surface); }
#app-ranking .hc-top-ranks { border:1px solid var(--line); border-radius:18px; padding:0 16px; background:var(--surface); margin-top:16px; }
#app-ranking .hc-top-ranks>summary { min-height:48px; align-items:center; }
#app-ranking .board .hc-board-me { border-radius:8px; }
#app-ranking .board li { min-height:52px; }
.app-rank-play,.app-record-rank { display:block; width:100%; border:1px solid var(--ink); border-radius:14px; min-height:50px; padding:12px; color:var(--ink); background:var(--surface); font-size:14px; margin-top:18px; }
.app-record-profile { min-height:48px; display:flex; align-items:center; justify-content:center; font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.app-result-rank { display:block; width:100%; min-height:48px; padding:10px; margin-top:6px; border:0; border-radius:12px; background:#e6edce; color:var(--ink); font-size:13px; font-weight:600; }
#app-ranking .hc-week-header .hc-kicker { display:none; }
#app-ranking .hc-week-header h2 { font-size:23px; }
@media(max-width:360px){#app-ranking .hc-rank-summary { padding:18px; }#app-ranking .hc-rank-summary>strong { font-size:23px; }#app-podium li>b { font-size:18px; }}
/* Warm paper, charcoal and a restrained burnt-orange accent. */
:root { --ink:#292723; --muted:#716C65; --line:#DED9D1; --paper:#F5F3EF; --surface:#FFFEFC; --lime:#EDE7DD; --coral:#A94B24; --app-accent:#A94B24; --app-radius:16px; color:var(--ink); background:var(--paper); }
body { background:var(--paper); }
.topbar { background:transparent; }
.brand img { width:36px; height:36px; border-radius:10px; box-shadow:none; }
.brand h1 { color:var(--ink); font-size:21px; }
.brand h1 span { color:var(--muted); letter-spacing:1.1px; }
.modes,.app-ranking-periods { background:#EAE6DF; border:0; border-radius:12px; }
.modes button,.app-ranking-periods button { border-radius:9px; }
.modes button[aria-pressed=true],.app-ranking-periods button[aria-pressed=true] { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px #29272312; }
.app-coach,.hc-friend-banner { background:#EEE9E1; border-color:var(--line); border-radius:12px; }
.stage-wrap { border:1px solid #DDD5CA; background:#F1EBE1; box-shadow:none; border-radius:16px; }
.stage-meta,.hc-draw-hint { color:#73695B; }
.level { background:#EAE4DA; color:#655D52; border-radius:4px; }
.live-dot,#attempt-dots b { background:var(--coral); }
#attempt-dots b.used { background:#DDD7CE; }
.controls>.primary,#tutorial-next { background:#34312D; color:#fff; box-shadow:none; border:1px solid #34312D; border-radius:12px; }
.controls>.primary:disabled,#tutorial-next:disabled { opacity:1; background:#E5E0D8; color:#82796E; border-color:#E5E0D8; box-shadow:none; }
.controls>.icon-button,.app-settings-open { background:var(--surface); box-shadow:none; border-radius:12px; }
.adjustments { background:#ECE7DF; }
.adjustments input,.tutorial-adjust input { accent-color:var(--coral); }
.result { background:var(--surface); border-color:var(--line); border-radius:16px; box-shadow:none; }
.app-bottom-nav { background:#F9F7F3; border-color:var(--line); box-shadow:none; backdrop-filter:none; }
.app-bottom-nav button { color:#787269; border-radius:10px; }
.app-bottom-nav button[aria-pressed=true] { background:#EEE7DC; color:#8B3D1D; }
.app-sheet,#app-tutorial,#rules { background:var(--surface); border-color:var(--line); border-radius:20px; box-shadow:0 16px 50px #29272326; }
.app-sheet::backdrop,dialog::backdrop { background:#25231F80; backdrop-filter:blur(2px); }
.app-sheet-handle { background:#D8D0C5; }
.app-setting-row .surface-language a[aria-current=true] { background:var(--ink); color:#fff; }
#tutorial-guide { stroke:#73695B66; }
#tutorial-line { stroke:var(--ink); }
.tutorial-canvas { background:#F1EBE1; }
#tutorial-result { background:#EEE8DE; }
.app-page-heading>p { display:none; }
.app-page-heading h2 { font-size:28px; }
.app-page-heading>span { margin-top:6px; }
.app-ranking-periods { margin:14px 0 18px; }
#app-ranking .hc-rank-summary { background:#34312D; border-color:#34312D; color:#fff; box-shadow:none; border-radius:16px; padding:20px; }
#app-ranking .hc-rank-summary :is(p,#hc-rank-label) { color:#D8D2C9; }
#app-ranking .hc-rank-summary #hc-rank-goal { color:#FFC78B; }
#app-ranking #app-rank-score { color:#F6EFE6; }
#app-podium li { border-radius:12px; box-shadow:none; }
#app-podium li[data-rank="1"] { background:#F4E9DA; border-color:#C7A37E; }
#app-podium li>span { background:#EAE5DD; color:#625A50; border-radius:8px; }
#app-podium li[data-rank="1"]>span { background:#A94B24; color:#fff; }
#app-ranking .board .hc-board-me { background:#EEE6D9; }
#app-ranking :is(.hc-nearby,.hc-top-ranks) { border-radius:14px; }
.app-result-rank { background:#EDE5D9; color:#713A22; }
.app-rank-play,.app-record-rank { border-color:var(--line); color:var(--ink); border-radius:12px; }
.hc-native-bar { background:#34312D; color:#fff; }
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,#stage:focus-visible { outline-color:var(--coral); }
.sidebar>section { border-radius:16px; }
.sidebar>section.today-record { padding:20px; background:var(--surface); border-color:var(--line); color:var(--ink); box-shadow:none; }
.today-record .best { margin:14px 0; }
.today-record .best strong { font-size:48px; }
.today-record :is(.section-head>span,.best>span,.muted),.today-record .attempts .ratio,.today-record .attempts li[data-played=false] .ratio { color:var(--muted); }
.today-record .attempts li { border-top-color:var(--line); min-height:44px; }
.today-record .attempts .number { border-color:#CEC5B8; color:#625A50; }
.today-record .attempts li.winner .number { background:#EEE2D1; color:#713A22; }
.hc-attempt-balance i:first-child { background:#8F877B; }
.hc-attempt-balance i:last-child { background:#C4805B; }
.history .bar-track { background:#E8E2D8; border-radius:4px; }
.history .bar { background:#ADA393; }
.history .day:last-child .bar { background:#A94B24; }
.history .day:hover .bar-track { background:#DCD3C6; }
/* Short, consistent transitions; confirmed numbers are never interpolated. */
.app-feedback-toggle,#app-settings #sound { min-width:64px; width:auto; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:#EEE8DE; color:#625A50; font-size:13px; }
.app-feedback-toggle[aria-pressed=true],#app-settings #sound[aria-pressed=true] { background:#34312D; color:#fff; border-color:#34312D; }
#app-feedback-note { margin:10px 0 12px; padding:12px 16px; border:1px solid #D7BA93; border-radius:12px; background:#F3E7D6; color:#713A22; font-size:14px; font-weight:600; text-align:center; }
body[data-app-view=play] .play,body[data-app-view=ranking] #app-ranking,body[data-app-view=records] #app-records { animation:app-view-enter .18s ease-out; }
.app-sheet[open],#app-tutorial[open],#rules[open] { animation:app-sheet-enter .2s cubic-bezier(.2,.8,.2,1); }
.hc-native-bar:not([hidden]) { animation:app-view-enter .18s ease-out; }
@keyframes app-view-enter { from { opacity:.45; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes app-sheet-enter { from { opacity:.4; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
body[data-app-reduce-motion=true] *,body[data-app-reduce-motion=true] *::before,body[data-app-reduce-motion=true] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/* Small operational labels remain readable on narrow devices. */
.hc-draw-hint { font-size:12px; }
.hc-steps { font-size:11px; gap:14px; }
.hc-steps span { font-size:10px; }
#app-ranking .hc-nearby-board .hc-board-me { border-block-color:#CCB79A; }
/* Result actions stay in reach while the confirmed result remains scrollable. */
body[data-app-view=play]:is([data-hc-phase=result],[data-hc-phase=complete]) { padding-bottom:calc(var(--app-nav) + 110px); }
body[data-app-view=play]:is([data-hc-phase=result],[data-hc-phase=complete]) .controls { position:fixed; z-index:29; bottom:var(--app-nav); left:0; right:0; margin:0 auto; width:min(100%,680px); padding:12px 20px; background:var(--paper); border-top:1px solid var(--line); }
body:is([data-hc-phase=result],[data-hc-phase=complete]) .controls #reset { display:none; }
body[data-hc-phase=result] #stage { height:clamp(150px,24svh,220px); min-height:150px; }
body[data-hc-phase=result] .result { padding:16px; }
body[data-hc-phase=result] .result .ratios { margin:8px 0; }
#app-empty-record { padding:20px 0 4px; }
#app-empty-record>strong { font-size:19px; line-height:1.5; }
#app-empty-record>p { font-size:13px; line-height:1.7; color:var(--muted); margin:8px 0 18px; }
.app-empty-start { width:100%; min-height:48px; border-radius:12px; background:var(--ink); color:var(--surface); font-size:14px; }
.today-record.app-record-empty :is(.best,#attempts,.hc-record-stamp) { display:none; }
#app-leaders { margin-top:14px; border:1px solid var(--line); border-radius:14px; padding:0 16px; background:var(--surface); }
#app-leaders>summary { min-height:48px; align-items:center; color:var(--ink); }
#app-leaders>summary::after { content:'+'; font-size:20px; }
#app-leaders[open]>summary::after { content:'−'; }
#app-leaders #app-podium { margin:4px 0 16px; }
#app-leaders #app-podium h3 { display:none; }
#app-ranking .hc-nearby { margin-top:18px; }
#app-ranking .app-rank-play { display:none; }
@media(max-width:360px) { body[data-app-view=play]:is([data-hc-phase=result],[data-hc-phase=complete]) .controls { padding-inline:16px; } }
/* A transformed view would temporarily change the fixed action bar's containing block. */
body[data-app-view=play]:is([data-hc-phase=result],[data-hc-phase=complete]) .play { animation:none; }
.result[data-success=true] { background:#F3E7D6; border-color:#C9AA81; }
/* Browser-specific navigation; Android keeps its existing native shell. */
html:not([data-hc-native]) .app-site-link { display:flex; align-items:center; min-height:52px; font-size:14px; border-bottom:1px solid var(--line); }
@media(min-width:900px) {
 html:not([data-hc-native]) .topbar { max-width:1000px; }
 html:not([data-hc-native]) .topbar .home { display:block; font-size:13px; }
 html:not([data-hc-native]) .topbar .home span { display:none; }
 html:not([data-hc-native]) main#game { max-width:960px; }
 html:not([data-hc-native]) :is(.game-nav,.app-coach,.layout:has(.play:not([hidden]))) { max-width:680px; margin-inline:auto; }
 html:not([data-hc-native]) body[data-app-view=records] .layout { max-width:960px; }
 html:not([data-hc-native]) #app-records { max-width:680px; margin-inline:auto; }
 html:not([data-hc-native]) #app-ranking { max-width:760px; margin-inline:auto; }
 html:not([data-hc-native]) .app-bottom-nav { left:50%; right:auto; transform:translateX(-50%); width:min(680px,100%); border:1px solid var(--line); border-bottom:0; border-radius:16px 16px 0 0; }
}