/* M4-P5 wheel art (local; pending Codex review): the approved Classic hub cap and pointer, stationary and non-interactive,
   added by wheel-art.js only when already decoded. A partial visual upgrade: today's CSS rim, slices, labels and timing stay.
   Geometry (M4_P5_WHEEL_IMPLEMENTATION_CONTRACT.md §5): the art box is 1.25 W square, centred on .wheelFrame (W = the disc's
   diameter; the frame has no border or padding).
   - Hub canvas 240 of 1000 at (380, 380): cap diameter 197.2 of 800 = 0.247 W, inside the 0.25 W hub radius.
   - Pointer canvas 128 x 160 with its visible tip at local (64, 152), placed so the tip lands on (500, 150): straight above
     the disc centre, 0.0625 W inside the rim (radius 0.4375 W). */
.wheelOverlay .wheelArtBox { position: absolute; left: 50%; top: 50%; width: 125%; height: 125%; transform: translate(-50%, -50%); pointer-events: none; z-index: 11; }
.wheelOverlay .wheelArtBox img { position: absolute; display: block; max-width: none; animation: none; }
.wheelOverlay .wheelArtHub { left: 38%; top: 38%; width: 24%; height: 24%; }
.wheelOverlay .wheelArtPointer { left: 43.6%; top: -0.2%; width: 12.8%; height: 16%; }
/* Room for the art pointer. It reaches 0.1275 W above the rim (33 px on the 260 px phone wheel, 41 px at 320) where today's
   glyph starts 20 px above it, so while the art pointer shows, the title's gap grows from 30 px to keep it >= 8 px clear of
   the pointer (measured: 9 px on phones, >= 8.8 px on host and TV including the TV's scale). Decided when the wheel is
   created, so nothing moves during a spin. The short-landscape layout puts the title beside the wheel (its own 8 px). */
.wheelOverlay.wheelHasArtPointer .wheelTitle { margin-bottom: 48px; }
@media (max-width: 600px) {
  .wheelOverlay.wheelHasArtPointer .wheelTitle { margin-bottom: 40px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  body:not(.bbr-tv-mode) .wheelOverlay.wheelHasArtPointer .wheelTitle { margin-bottom: 8px; }
}
/* The art pointer replaces today's ▼ glyph only where it is shown. Compact fallback: on landscape phones up to 342 px tall
   the side-by-side wheel sits too close to the top edge for the art pointer (at 568x320 it would start 3 px above the
   screen), so the glyph stays there; from 343 px the art pointer keeps >= 8 px from the top edge. The TV scales its own
   overlay and always uses the art. */
@media not all and (orientation: landscape) and (max-height: 342px) {
  .wheelOverlay.wheelHasArtPointer .wheelPointer { visibility: hidden; animation: none; }
}
@media (orientation: landscape) and (max-height: 342px) {
  body:not(.bbr-tv-mode) .wheelOverlay .wheelArtPointer { display: none; }
  body.bbr-tv-mode .wheelOverlay.wheelHasArtPointer .wheelPointer { visibility: hidden; animation: none; }
}