/* Apple HIG: glass belongs to controls; game content uses quiet, solid surfaces.
   UIKit presents Pause, Shake and the game-over rescue on iOS. These tokens are the shared
   web/Android fallback, not an implementation of Apple's optical material. */
:root {
  --glass-surface: linear-gradient(165deg, #dcd7ff26, #b1c4ed0a 52%, #ffffff10);
  --glass-edge: #e7e5ff45;
  --glass-highlight: inset 0 1px 0 #ffffff40, inset 0 -1px 0 #09051b55;
  --glass-shadow: 0 6px 18px #02010c38;
  --surface-content: #171329;
  --control-radius: 999px;
  --panel-radius: 28px;
  --control-ink: #f5f3ff;
  --control-tint: #a8f5df;
}
body { color-scheme: dark; }
/* Keep text/score widgets distinct from the floating interaction layer. */
#hud .hud-rail {
  background:var(--surface-content); border-color:#d9d2ff20;
  border-radius:var(--panel-radius); padding:6px 12px 7px;
  box-shadow:0 4px 16px #05021226; backdrop-filter:none; -webkit-backdrop-filter:none;
}
#hud .score { font-weight:750; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
#hud #coin-chip { background:none; border:0; box-shadow:none; padding:0; }
#hud .orbit-hud { background:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
#hud .orbit-timer { border-radius:10px; }
#strategy-controls { display:none!important; }
#hud .hud-rail { grid-template-columns:minmax(60px,1fr) minmax(0,1fr) auto; gap:0 8px; }
#hud .hud-right { display:flex; align-items:flex-start; gap:8px; }
#hud #item-shake { width:48px; height:48px; min-width:48px; min-height:48px; padding:10px; position:relative; display:flex; align-items:center; justify-content:center; }
#hud #item-shake .di-ic { width:26px; height:26px; margin:0; }
#hud #item-shake::before { content:''; position:absolute; inset:auto 8px 4px; height:3px; border-radius:3px; background:#ffe6a6; transform:scaleX(var(--shake-fill,1)); transform-origin:left; }
#hud #item-shake:not(.cooling-down)::before { opacity:0; }
#hud #item-shake:disabled { color:#a9a5b9; }
#strategy-controls button { height:48px; min-height:48px; border-radius:var(--control-radius); }
#hud #btn-pause { width:48px; height:48px; min-width:48px; min-height:48px; padding:12px; }
#hud #btn-pause,
#strategy-controls #btn-nova,
#hud #item-shake,
#screen-title .play-modes .mode-btn,
#screen-title .title-secondary-actions button,
#screen-title > .discovery-button,
.screen .panel :is(.btn-primary,.btn-secondary,.btn-ghost,.btn-leaderboard,.help-button,.back-btn),
.help-dialog :is(.help-close,.help-arrow,.help-done) {
  background:var(--glass-surface); color:var(--control-ink); border:1px solid var(--glass-edge);
  border-radius:var(--control-radius); box-shadow:var(--glass-highlight),var(--glass-shadow);
  backdrop-filter:blur(12px) saturate(125%); -webkit-backdrop-filter:blur(12px) saturate(125%);
  text-shadow:none; transition:transform 140ms ease, background-color 140ms ease;
}
#screen-title .play-modes .mode-btn { border-radius:24px; min-height:82px; font-weight:650; }
#screen-title #btn-play, .screen .panel .btn-primary, .help-dialog .help-done,
#strategy-controls #btn-nova.ready {
  background:linear-gradient(155deg,#c7ffed,#88dfc4); color:#123a32; border-color:#e0fff49c;
}
#screen-title #btn-competitive { color:#f4edff; }
#screen-title .mode-btn small { color:inherit; opacity:.85; }
#screen-title > .discovery-button { border-radius:22px; }
#screen-title #btn-leaderboard-title { color:#ffdfa1; }
#screen-title > .settings {
  border-radius:26px; background:var(--glass-surface); border-color:var(--glass-edge);
  box-shadow:var(--glass-highlight),var(--glass-shadow);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
#screen-title > .settings .toggle { border-radius:20px; border-color:transparent; box-shadow:none; }
#screen-title > .settings .toggle.on { color:#c0ffec; background:#b9ffe912; border-color:#bbffe226; }
.screen .panel, .help-dialog { background:var(--surface-content); border:1px solid #d9d2ff2e; border-radius:var(--panel-radius); }
#screen-pause .panel { width:min(340px,calc(100vw - 40px)); box-sizing:border-box; padding:24px; }
#screen-pause .panel button { min-height:48px; font:600 16px/1.4 var(--ui-font); }
#strategy-controls #btn-nova:disabled { color:#c3d6d2; background:var(--glass-surface); opacity:1; }
#strategy-controls #item-shake { color:#ffe6a6; }
#strategy-controls #item-shake:disabled { color:#a9a5b9; background:var(--glass-surface); }
#strategy-controls #nova-label { font:650 16px/1.2 var(--ui-font); font-variant-numeric:tabular-nums; letter-spacing:.2px; }
#strategy-controls #nova-fill { left:18px; right:18px; bottom:6px; width:calc(100% - 36px); height:3px; border-radius:3px; }
#strategy-controls #item-shake .di-ic { width:28px; height:28px; }
#strategy-controls #item-shake::before {
  inset:auto 22px 6px; height:3px; border-radius:3px; z-index:0;
  background:#ffe6a6; transform:scaleX(var(--shake-fill,1)); transform-origin:left;
}
#strategy-controls #item-shake:not(.cooling-down)::before { opacity:0; }
#strategy-controls #item-shake.cooling-down { color:#c3bfd2; border-color:var(--glass-edge); box-shadow:var(--glass-highlight),var(--glass-shadow); }
button:focus-visible, select:focus-visible, [role=button]:focus-visible { outline:3px solid #d3fff1; outline-offset:4px; }
#hud button:active:not(:disabled), #screen-title button:active:not(:disabled), .panel button:active:not(:disabled) { transform:scale(.97); }
/* The native buttons occupy these exact layout slots; no second glass layer,
   duplicate accessibility elements, or transparent DOM hit targets. */
.native-controls-enabled #app :is(#btn-pause,#btn-nova,#item-shake) {
  opacity:0; pointer-events:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:none; transform:none;
}
#shake-control { min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:3px; }
#shake-count { text-align:center; color:#ffe6a6; font:700 12px/14px var(--ui-font); font-variant-numeric:tabular-nums; pointer-events:none; }
#screen-over #btn-nova { width:100%; min-height:48px; margin-bottom:10px; }
@media(max-height:520px) {
  #strategy-controls button { height:48px; min-height:48px; }
}
/* Keep the same compact score/Shake/Pause hierarchy at every width. */
@media(max-width:380px), (max-height:740px) {
  #hud .hud-rail { padding:4px 8px; border-radius:20px; gap:0 5px; }
  #hud .hud-right { gap:5px; }
  #hud #btn-pause, #hud #item-shake { width:44px; height:44px; min-width:44px; min-height:44px; padding:10px; }
  #hud .score { font-size:24px; }
  #hud .chain-meter { display:none; }
  #hud .orbit-hud { margin-top:2px; padding-top:3px; }
  #hud .orbit-time-bonus { display:none; }
}
/* Also used by the iOS accessibility bridge when WebKit doesn't expose a query. */
body.reduce-transparency #app button, body.reduce-transparency #screen-title > .settings,
body.increase-contrast #app button, body.no-glass #app button, body.lite-fx #app button {
  backdrop-filter:none!important; -webkit-backdrop-filter:none!important; background-color:#29253e!important;
}
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  #app button, #screen-title > .settings { backdrop-filter:none!important; -webkit-backdrop-filter:none!important; background-color:#29253e!important; border-color:#e7e5ff80!important; }
}
@media(prefers-reduced-motion:reduce) {
  #app *, #app *::before, #app *::after { transition:none!important; animation:none!important; }
}
body.reduce-motion #app *, body.reduce-motion #app *::before, body.reduce-motion #app *::after { transition:none!important; animation:none!important; }