/* classic.css — HUD for the rebuilt Pro Bowling game.
 * Sits over the Three.js/Physijs canvas: top bar, regulation scoreboard,
 * aiming/power panel, throw feedback, and the game-over card.
 *
 * Visual language: modern dark glass. Near-black translucent surfaces with
 * backdrop blur, hairline borders, a single gold accent, flat controls —
 * no glossy gradients, bevels or thick glowing outlines. */

:root {
  --hud-font: 'Poppins', 'Segoe UI', Arial, Helvetica, sans-serif;
  --power-h: 120px;              /* POWER meter height (see .cb-power-track) */

  /* Palette */
  --glass:      rgba(10, 13, 20, .68);   /* panel surface */
  --glass-deep: rgba(7, 9, 15, .80);     /* darker surface (top bar) */
  --hairline:   rgba(255, 255, 255, .09);
  --hairline-2: rgba(255, 255, 255, .16);
  --ink:        #e9edf5;                 /* primary text */
  --ink-dim:    #8b94a7;                 /* secondary text */
  --accent:     #f5c518;                 /* gold — scores, active states */
  --accent-ink: #201a02;
  --good:       #7ee787;                 /* running total */
  --strike:     #ff6b5b;
  --spare:      #5ec9ff;
}

/* ---- Top bar --------------------------------------------------------- */
#cb-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 56px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 18px; box-sizing: border-box;
  background: var(--glass-deep);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink); font-family: var(--hud-font); z-index: 50; user-select: none;
}
#cb-logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; letter-spacing: 2px; font-size: 16px;
  flex: 0 1 auto; min-width: 0;   /* the wordmark yields before anything clips */
}
#cb-status, #cb-total-wrap, #cb-sound { flex: 0 0 auto; }
#cb-status { white-space: nowrap; }
#cb-logo span {
  color: #fff; background: #e8382d; padding: 3px 8px; border-radius: 6px;
  font-size: 12px; letter-spacing: 1px; font-weight: 700;
}
/* Status + total: quiet uppercase labels with bright value chips. */
#cb-status, #cb-total-wrap {
  font-size: 11px; letter-spacing: 1px; color: var(--ink-dim); text-transform: uppercase;
}
#cb-status { padding-left: 14px; border-left: 1px solid var(--hairline); }
#cb-status b { color: var(--ink); font-size: 15px; margin: 0 2px; font-weight: 600; }
#cb-total-wrap { margin-left: auto; }
#cb-total-wrap b { color: var(--good); font-size: 20px; margin-left: 6px; font-weight: 700; }
#cb-sound {
  width: 38px; height: 38px; border: 1px solid var(--hairline-2); border-radius: 10px;
  background: rgba(255,255,255,.04); color: #fff; font-size: 15px; cursor: pointer; line-height: 1;
  transition: background .15s, border-color .15s;
}
#cb-sound:hover { background: rgba(255,255,255,.10); }

/* ---- Scoreboard ------------------------------------------------------ */
/* One quiet glass strip; frames are separated by hairlines, not boxed. */
#cb-scoreboard {
  position: fixed; top: 66px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0; z-index: 45; user-select: none;
  font-family: var(--hud-font);
  background: var(--glass); padding: 4px; border-radius: 12px;
  border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.cb-frame {
  width: 48px; background: transparent; border: 0; border-radius: 8px;
  color: var(--ink); overflow: hidden; transition: background .2s, box-shadow .2s;
}
.cb-frame + .cb-frame { border-left: 1px solid var(--hairline); border-radius: 0 8px 8px 0; }
.cb-frame:last-child { width: 66px; }
.cb-frame-active {
  background: rgba(245,197,24,.10);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.cb-frame-no {
  font-size: 9px; text-align: center; color: var(--ink-dim); padding: 2px 0;
  letter-spacing: .5px; font-weight: 600;
}
.cb-rolls { display: flex; justify-content: flex-end; gap: 2px; padding: 2px 3px; }
.cb-roll {
  flex: 1; min-width: 15px; height: 17px; line-height: 17px; text-align: center;
  font-size: 12px; font-weight: 700; border-radius: 4px; background: rgba(255,255,255,.05);
}
.cb-roll-strike { color: var(--strike); }
.cb-roll-spare  { color: var(--spare); }
.cb-cum {
  height: 22px; line-height: 22px; text-align: center; font-size: 15px;
  font-weight: 700; color: var(--accent);
}

/* ---- Control rails ---------------------------------------------------
   The HUD flanks the lane rather than sitting on top of it: the panel itself
   is a full-screen click-through layer, and only the rails/cluster inside it
   take pointer events. POWER is a vertical bar on the left edge, EFFECT a
   matching one on the right. All three inputs stay on screen; the one the
   current phase needs lights up while the others dim back. */
#cb-panel {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  color: var(--ink); font-family: var(--hud-font); text-align: center; user-select: none;
  transition: opacity .25s ease;
}

/* Shared chrome for the edge rails. */
.cb-rail {
  position: absolute; box-sizing: border-box;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--hairline); border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}

.cb-rail {
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 10px;
}
/* --pillar is the letterbox bar width (set by onResize in bowling.js): the
   rails hug the 3D view's edges, next to the lane and player like the
   reference's meters, instead of drifting to the window edges on ultrawide. */
#cb-rail-left  { left:  calc(10px + var(--pillar, 0px) + env(safe-area-inset-left)); }
#cb-rail-right { right: calc(10px + var(--pillar, 0px) + env(safe-area-inset-right)); }

/* Meters read at half strength until their step is the active one. */
.cb-meter {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  opacity: .45; transition: opacity .3s ease;
}
#cb-panel[data-phase="power"]  #cb-rail-left  .cb-meter[data-group="power"],
#cb-panel[data-phase="effect"] #cb-rail-right .cb-meter[data-group="effect"] { opacity: 1; }

/* ...and the active track gets a soft accent glow. */
#cb-panel[data-phase="power"] .cb-power-track {
  border-color: rgba(245,197,24,.75);
  animation: cb-glow 1.5s ease-in-out infinite alternate;
}
/* The EFFECT arrow has no border to light, so it pulses its own glow. */
#cb-panel[data-phase="effect"] #cb-eff-svg {
  animation: cb-eff-glow 1.5s ease-in-out infinite alternate;
}
@keyframes cb-eff-glow {
  from { filter: drop-shadow(0 0 2px rgba(245,197,24,.35)); }
  to   { filter: drop-shadow(0 0 8px rgba(245,197,24,.8)); }
}

/* MOVE arrows sit ON the lane flanking the player (the reference game's
   arrangement) — big tap targets in the lower third of the 3D view. Position is
   relative to the view via --pillar: the lane occupies the centered
   (100% - 2*pillar) span, and the arrows sit ~15% in from its edges. They only
   act while aiming, so they hide entirely once the ball is committed. */
.cb-arrow {
  position: absolute; bottom: 21%;
  width: 96px; height: 60px;
  transition: opacity .3s ease; pointer-events: auto;
}
#cb-left  { left:  calc(var(--pillar, 0px) + (100% - 2 * var(--pillar, 0px)) * 0.13); }
#cb-right { right: calc(var(--pillar, 0px) + (100% - 2 * var(--pillar, 0px)) * 0.13); }
#cb-panel:not([data-phase="aiming"]) .cb-arrow { opacity: 0; pointer-events: none; }

@keyframes cb-glow {
  from { box-shadow: 0 0 6px rgba(245,197,24,.25); }
  to   { box-shadow: 0 0 18px rgba(245,197,24,.6); }
}
.cb-glabel { font-weight: 600; letter-spacing: 1.5px; font-size: 10px; color: var(--ink-dim); }

/* EFFECT meter — an arrow that bends with the curve value (straight up = a
   straight ball). ui.js rewrites the path each frame; it bends late (progress²)
   so its shape reads the same way the ball actually breaks on the lane. */
#cb-eff-svg {
  width: 56px; height: calc(var(--power-h) + 4px); overflow: visible; display: block;
}
#cb-eff-path {
  fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round;
}
#cb-eff-head { fill: var(--ink); }
#cb-panel[data-phase="effect"] #cb-eff-path { stroke: var(--accent); }
#cb-panel[data-phase="effect"] #cb-eff-head { fill: var(--accent); }

/* MOVE arrows — flat double chevrons, no button chrome, so they read as part
   of the lane. Size/position live in the .cb-arrow block above. */
.cb-arrow {
  border: 0; background: none; padding: 0; cursor: pointer; line-height: 0;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.cb-arrow-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cb-chev {
  fill: none; stroke: #fff; stroke-width: 9;
  stroke-linecap: round; stroke-linejoin: round;
}
.cb-chev-far  { opacity: .38; }
.cb-chev-near { opacity: .92; }
.cb-arrow:active { transform: translateY(2px) scale(.94); }
.cb-arrow:active .cb-chev { stroke: var(--accent); }

/* POWER meter — vertical segmented bar (classic arcade ladder).
   The track shows faint unlit segments; the fill lights them from the bottom
   and the ::after overlay punches the gaps so it reads as discrete bars. */
.cb-power-track {
  position: relative; width: 22px; height: var(--power-h); overflow: hidden;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.12) 0 4px,
      rgba(0,0,0,0) 4px 6px),
    rgba(0,0,0,.45);
  border: 1px solid var(--hairline-2); border-radius: 11px;
  transition: border-color .2s;
}
#cb-power-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%; z-index: 1;
  /* Gradient is pinned to the full track height (not the fill), so the colour
     tracks the actual power level: green low -> gold -> red at the top. */
  background: linear-gradient(to top, #7ee787, #f5c518 55%, #ff5b45)
              bottom / 100% var(--power-h) no-repeat;
  transition: height .05s linear;
}
/* Segment gaps drawn over the fill. */
.cb-power-track::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0 4px,
    rgba(7,9,15,.92) 4px 6px);
}
#cb-power-fill.cb-power-hot { box-shadow: 0 0 14px #ff5b45; }

/* ---- Throw feedback -------------------------------------------------- */
#cb-feedback {
  position: fixed; top: 34%; left: 0; right: 0; text-align: center;
  z-index: 60; pointer-events: none; font-family: var(--hud-font);
}
/* Callout type: heavy display face with a speed skew and gradient-filled
   letters (background-clip: text), the modern sports-game treatment — not
   bold-body-font-with-a-glow. text-shadow can't paint clipped text, so depth
   comes from stacked drop-shadow filters instead. */
#cb-feedback-text {
  display: inline-block; font-family: 'Archivo Black', var(--hud-font);
  font-size: 88px; font-weight: 400; letter-spacing: .01em;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #ffffff, #c3cede);
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)) drop-shadow(0 12px 26px rgba(0,0,0,.55));
  animation: cb-pop .55s cubic-bezier(.2,1.4,.4,1);
}
.cb-fb-strike #cb-feedback-text { background-image: linear-gradient(180deg, #ffe27a 20%, #f5a623 85%); }
.cb-fb-spare  #cb-feedback-text { background-image: linear-gradient(180deg, #a8e1ff 20%, #3f9dff 85%); }
.cb-fb-open   #cb-feedback-text { font-size: 62px; }
.cb-fb-gutter #cb-feedback-text { background-image: linear-gradient(180deg, #ffa79b 20%, #ff4b3a 85%); font-size: 62px; }
@keyframes cb-pop {
  0%   { transform: scale(.3) skewX(-8deg); opacity: 0; }
  55%  { transform: scale(1.14) skewX(-8deg); opacity: 1; }
  100% { transform: scale(1) skewX(-8deg); opacity: 1; }
}
/* The skew is part of the resting pose, not just the animation. */
#cb-feedback-text { transform: skewX(-8deg); }

/* Confetti burst behind the callout (ui.js spawns/removes the tiles). Each
   tile flies out radially from the text's center, tumbling as it falls. */
.cb-burst {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  pointer-events: none;
}
.cb-burst i {
  position: absolute; left: 0; top: 0; display: block; border-radius: 2px;
  opacity: 0; animation: cb-conf 1.15s cubic-bezier(.15,.65,.45,1) forwards;
}
@keyframes cb-conf {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 150px)) rotate(var(--rot)) scale(.7); opacity: 0; }
}

/* ---- Shared card + button chrome ------------------------------------- */
/* One flat, modern card style for the menu, help and game-over overlays,
   and one solid accent button style for their primary actions. */
.cb-go-card, .cb-menu-card, .cb-help-card {
  box-sizing: border-box; color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--hairline-2); border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
#cb-play, #cb-play-again, #cb-help-close {
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--hud-font); font-weight: 700; letter-spacing: 1.5px;
  touch-action: manipulation;
  transition: transform .08s, filter .15s, opacity .2s;
}
#cb-play:not(:disabled):hover, #cb-play-again:hover, #cb-help-close:hover { filter: brightness(1.08); }
#cb-play:not(:disabled):active, #cb-play-again:active, #cb-help-close:active { transform: translateY(1px) scale(.99); }

/* ---- Game over ------------------------------------------------------- */
#cb-gameover {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: rgba(3,5,10,.7); font-family: var(--hud-font);
}
.cb-go-card { text-align: center; padding: 36px 48px; }
.cb-go-title { font-size: 36px; font-weight: 800; letter-spacing: 3px; color: var(--ink); }
.cb-go-score { margin: 14px 0 24px; font-size: 13px; letter-spacing: 1.5px; color: var(--ink-dim); text-transform: uppercase; }
.cb-go-score b { display: block; font-size: 52px; color: var(--accent); letter-spacing: 0; margin-top: 4px; }
#cb-play-again { padding: 13px 30px; font-size: 15px; }

.cb-hidden { opacity: 0 !important; pointer-events: none !important; }

/* ---- Cinematic vignette --------------------------------------------- */
/* Darkens the lane's corners so the eye settles down the middle. Purely
   decorative and click-through; it sits above the canvas, below the HUD. */
#cb-vignette {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%,
    rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 80%, rgba(0,0,0,.6) 100%);
}

/* ---- Start menu ------------------------------------------------------ */
#cb-menu {
  position: fixed; inset: 0; z-index: 80; font-family: var(--hud-font);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .35s ease; overflow: hidden;
}
/* Animated backdrop: layered radial glows drifting over a near-black field,
   so the front screen has motion without any bitmap art. */
.cb-menu-bg {
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 55% at 22% 30%, rgba(47,101,180,.35), transparent 70%),
    radial-gradient(45% 50% at 82% 70%, rgba(232,56,45,.18), transparent 70%),
    radial-gradient(60% 70% at 50% 120%, rgba(245,197,24,.10), transparent 70%),
    linear-gradient(180deg, #0a0e17 0%, #05070c 100%);
  animation: cb-menu-drift 18s ease-in-out infinite alternate;
}
@keyframes cb-menu-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.05); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.12); }
}
.cb-menu-card {
  position: relative; text-align: center;
  padding: 42px 44px 36px; border-radius: 24px; width: 380px; max-width: calc(100vw - 28px);
}
.cb-menu-logo {
  font-weight: 800; letter-spacing: 3px; font-size: 32px; line-height: 1;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap;              /* wordmark wraps instead of forcing the card wide */
}
.cb-menu-logo span {
  color: #fff; background: #e8382d; padding: 6px 12px; border-radius: 8px;
  font-size: 24px; letter-spacing: 2px; font-weight: 700;
}
.cb-menu-sub { margin: 14px 0 28px; font-size: 13px; color: var(--ink-dim); letter-spacing: .4px; }

.cb-menu-diff { margin-bottom: 28px; }
.cb-menu-diff-label {
  font-size: 10px; font-weight: 600; letter-spacing: 2px; color: var(--ink-dim); margin-bottom: 10px;
}
/* Segmented control: flat dark track, solid accent pill on the active choice. */
.cb-diff-group {
  display: inline-flex; gap: 4px; border-radius: 12px; padding: 4px;
  background: rgba(255,255,255,.05); border: 1px solid var(--hairline);
}
.cb-diff-btn {
  border: 0; cursor: pointer; padding: 10px 20px; font-family: var(--hud-font);
  font-weight: 600; font-size: 13px; letter-spacing: 1px; color: var(--ink-dim);
  background: transparent; border-radius: 9px;
  transition: background .15s, color .15s; touch-action: manipulation;
}
.cb-diff-btn:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.cb-diff-btn.cb-diff-on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

#cb-play {
  display: block; width: 100%; margin: 0 auto; padding: 16px 0;
  font-size: 18px; letter-spacing: 2px;
}
#cb-play:disabled { opacity: .45; cursor: default; }

.cb-menu-link {
  margin-top: 18px; border: 0; background: none; cursor: pointer;
  color: var(--ink-dim); font-family: var(--hud-font); font-weight: 600;
  font-size: 12px; letter-spacing: 1.5px; text-decoration: underline;
  text-underline-offset: 3px; touch-action: manipulation;
}
.cb-menu-link:hover { color: var(--ink); }

/* ---- How-to-play ---------------------------------------------------- */
#cb-help {
  position: fixed; inset: 0; z-index: 85; font-family: var(--hud-font);
  display: flex; align-items: center; justify-content: center;
  background: rgba(3,5,10,.75); transition: opacity .25s ease;
}
.cb-help-card { text-align: left; padding: 32px 36px; max-width: 90vw; width: 440px; }
.cb-help-title {
  font-size: 22px; font-weight: 800; letter-spacing: 2px; color: var(--ink);
  text-align: center; margin-bottom: 20px;
}
.cb-help-list { list-style: none; margin: 0 0 24px; padding: 0; }
.cb-help-list li {
  font-size: 14px; line-height: 1.55; margin-bottom: 12px; padding-left: 18px;
  position: relative; color: var(--ink);
}
.cb-help-list li::before { content: '▸'; position: absolute; left: 0; color: var(--accent); }
.cb-help-list b { color: var(--accent); font-weight: 700; }
#cb-help-close { display: block; margin: 0 auto; padding: 12px 32px; font-size: 14px; }

/* Narrow screens: scale the menu down. */
@media (max-width: 480px) {
  .cb-menu-card { padding: 32px 24px 28px; }
  .cb-menu-logo { font-size: 25px; letter-spacing: 2px; }
  .cb-menu-logo span { font-size: 19px; padding: 5px 9px; }
  .cb-diff-btn { padding: 9px 14px; font-size: 12px; }
}

/* ---- Touch + responsive (mobile & PC share one HUD) ------------------ */

/* No text selection, tap-highlight, or long-press menus on the HUD chrome. */
#cb-topbar, #cb-scoreboard, #cb-panel, #cb-feedback, #cb-gameover {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.cb-arrow, #cb-sound, #cb-play-again {
  touch-action: manipulation;   /* kill 300ms delay + double-tap zoom */
}
/* Let OrbitControls own canvas gestures so the page never scrolls/zooms. */
#canvas canvas { touch-action: none; }

/* Honour the notch / rounded corners when viewport-fit=cover is set.
   (The rails carry their own safe-area insets where they're positioned.) */
#cb-topbar { padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); }

/* Coarse pointers (touch): enlarge every tap target to a comfortable size. */
@media (pointer: coarse) {
  /* 48px tall keeps the minimum comfortable tap target without the chevrons
     dominating a phone screen the way the old 108x68 did. */
  .cb-arrow { width: 76px; height: 48px; }
  #cb-sound { width: 42px; height: 42px; }
}

/* Narrow screens: shrink the top bar and make the scoreboard scroll.
   The bar is a nowrap flex row. It used to need ~618px and the wordmark had to
   collapse to the bare CLASSIC chip to stop HARD and the sound button spilling
   off-screen; dropping the difficulty group reclaimed ~166px, so the wordmark
   fits again down to the 430px rule below. */
@media (max-width: 620px) {
  #cb-topbar { gap: 8px; height: 48px; padding: 0 10px; }
  #cb-logo { font-size: 14px; }
  #cb-status { font-size: 11px; } #cb-status b { font-size: 13px; }
  #cb-total-wrap { font-size: 11px; } #cb-total-wrap b { font-size: 15px; }

  #cb-scoreboard {
    top: 54px; max-width: 96vw; overflow-x: auto; overflow-y: hidden;
    justify-content: flex-start; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #cb-scoreboard::-webkit-scrollbar { display: none; }
  .cb-frame { flex: 0 0 auto; }

  #cb-feedback-text { font-size: 56px; }
}

/* Narrow phones: compact the scoreboard so all ten frames fit on screen —
   at full size it needs ~530px and frame 10 clipped off a 500px viewport. */
@media (max-width: 560px) {
  .cb-frame { width: 40px; }
  .cb-frame:last-child { width: 56px; }
  .cb-roll { min-width: 12px; height: 15px; line-height: 15px; font-size: 10px; }
  .cb-cum { height: 19px; line-height: 19px; font-size: 13px; }
  .cb-frame-no { font-size: 8px; }
}

/* Very narrow (small phones): drop the logo entirely, tighten the rails. */
@media (max-width: 430px) {
  #cb-logo { display: none; }
  #cb-status { padding-left: 0; border-left: 0; }
  .cb-rail { padding: 10px 8px; gap: 8px; }
  #cb-rail-left  { left:  calc(6px + env(safe-area-inset-left)); }
  #cb-rail-right { right: calc(6px + env(safe-area-inset-right)); }
  #cb-feedback-text { font-size: 44px; }
}

/* Landscape phones (short viewport): the top bar + scoreboard were eating a
   third of a 360px-tall screen exactly where the pins are. Shrink the bar,
   scale the scoreboard down against the bar's edge, shorten the meters, and
   pull the lane arrows down out of the pin line. */
@media (orientation: landscape) and (max-height: 480px) {
  :root { --power-h: 72px; }   /* shorter meters on short viewports */
  #cb-topbar { height: 40px; gap: 10px; }
  #cb-scoreboard {
    top: 44px; transform: translateX(-50%) scale(.72); transform-origin: top center;
  }
  .cb-rail { padding: 8px 8px; gap: 7px; }
  .cb-arrow { width: 64px; height: 40px; bottom: 12%; }
  #cb-feedback { top: 22%; }
}