:root { color-scheme: dark; font-family: 'Menlo', 'Courier New', monospace; background: #050505; color: #3b3c34; }
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
.stage { min-height: 100svh; padding: 42px 22px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: radial-gradient(ellipse at 50% 48%, #151511 0, #050505 65%); }
.player { width: min(100%, 360px); aspect-ratio: 418 / 728; position: relative; padding: 27px 23px; border-radius: 29px; background: linear-gradient(104deg,#e5e3d3 0%,#f1eedd 25%,#eeebda 70%,#e0dece 100%); border: 1px solid #b9b9ac; box-shadow: inset 2px 2px 3px #fffff8b0, inset -2px -3px 5px #aaa99a70, 0 35px 75px #000, 0 4px 8px #0008; }
.bezel { padding: 12px; border-radius: 15px; background: linear-gradient(145deg,#141710,#292b23 70%,#151810); box-shadow: 0 1px 1px #fffff8, inset 0 1px 3px #000; height: 46.6%; }
.display { height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 3px; background: #bdbfb2; color: #3c4035; box-shadow: inset 1px 2px 5px #0005; position: relative; text-shadow: .5px 0 currentColor; }
.display::after { content: ''; pointer-events: none; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 2px, #353d2a06 2px 3px); }
.status { flex-shrink: 0; height: 31px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #777b6d; gap: 10px; }
h1 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.battery { display: flex; gap: 1px; padding: 2px; border: 1px solid currentColor; border-radius: 2px; position: relative; width: 24px; height: 13px; }
.battery::after { content: ''; width: 2px; height: 6px; position: absolute; right: -3px; top: 2px; background: currentColor; }
.battery i { flex: 1; background: currentColor; }
.screen { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #666c5b #bdbfb2; }
.menu { list-style: none; margin: 0; padding: 6px 0; }
.menu-item { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 8px 11px; min-height: 34px; border: 0; border-radius: 0; background: none; color: inherit; font: bold 15px/1.2 'Menlo','Courier New',monospace; text-shadow: inherit; text-decoration: none; cursor: pointer; text-transform: uppercase; }
.menu-item.selected { background: #3b3e35; color: #dedfd4; }
.menu-item:focus-visible { outline: 2px dashed currentColor; outline-offset: -4px; }
.screen-footer { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; height: 18px; padding: 0 10px; border-top: 1px solid #858978; font-size: 8px; letter-spacing: .7px; }
.bio { padding: 8px 12px; font: bold 12px/1.55 'Menlo','Courier New',monospace; }
.bio h2 { margin: 5px 0 8px; font-size: 15px; }
.bio p { margin: 0 0 12px; }
.bio:focus-visible { outline: 2px dashed #555; outline-offset: -3px; }
.wheel { position: absolute; width: 58%; aspect-ratio: 1; left: 21%; top: 52.5%; border-radius: 50%; background: linear-gradient(135deg,#eeede2,#d8d8cc); box-shadow: inset 1px 2px 3px #fffff6b0, inset -1px -2px 3px #bfc0b450, 2px 7px 12px #8b8c792b; }
.wheel button { position: absolute; border: 0; cursor: pointer; color: #75766b; touch-action: manipulation; }
.wheel-key { display: grid; place-items: center; background: transparent; font: bold 14px 'Menlo','Courier New',monospace; letter-spacing: 1px; padding: 0; }
.up { top: 1%; left: 28%; width: 44%; height: 29%; border-radius: 60% 60% 0 0; }
.down { bottom: 1%; left: 28%; width: 44%; height: 29%; border-radius: 0 0 60% 60%; }
.left { top: 28%; left: 1%; width: 29%; height: 44%; border-radius: 60% 0 0 60%; }
.right { top: 28%; right: 1%; width: 29%; height: 44%; border-radius: 0 60% 60% 0; }
.wheel svg { width: 22px; height: 17px; fill: currentColor; }
.center { width: 39%; height: 39%; top: 30.5%; left: 30.5%; border-radius: 50%; background: linear-gradient(140deg,#e6e6da,#d8d9cc); box-shadow: inset 1px 2px 2px #ffffef60, 1px 3px 5px #989b8545; }
.wheel button:active { filter: brightness(.91); }
.wheel button:focus-visible { outline: 2px solid #666a59; outline-offset: -4px; }
.artist-mark { position: absolute; width: 29%; height: auto; right: 7%; bottom: 4%; object-fit: contain; }
@media(max-width:400px) { .stage { padding: 28px 27px 20px; gap: 22px; } .player { padding: 23px 20px; border-radius: 25px; } .bezel { padding: 10px; } .menu-item { font-size: 14px; min-height: 30px; padding: 7px 10px; } .status { height: 28px; } h1 { font-size: 14px; } .artist-mark { font-size: 26px; } }
@media(max-height:740px) and (min-width:401px) { .player { width: 310px; padding: 23px 20px; } .stage { padding-top: 20px; gap: 15px; } .menu-item { min-height: 30px; padding: 6px 10px; font-size: 14px; } }

.screen-back { border: 0; background: none; color: inherit; font: bold 22px/1 monospace; width: 32px; height: 30px; padding: 0; margin-left: -9px; cursor: pointer; flex-shrink: 0; }
.screen-back:disabled { opacity: 1; cursor: default; }
.screen-back:focus-visible { outline: 1px dashed currentColor; }
.menu-caption { margin: 8px 11px 3px; font: bold 11px/1.4 monospace; letter-spacing: .5px; }
.booking-email { font-size: clamp(9px, 2.8vw, 13px); text-transform: none; letter-spacing: -.5px; padding: 12px 7px; }

.menu-home { height: 100%; display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); padding: 3px 0; }
.menu-home li { min-height: 0; }
.menu-home .menu-item { height: 100%; min-height: 0; padding: 3px 11px; }

/* Explicit dimensions keep long submenu content from resizing the housing. */
html { min-height: 100%; background: #000; overscroll-behavior-y: none; scrollbar-width: none; }
body { width: 100%; min-height: 100vh; min-height: 100svh; overflow-x: clip; background: #000; overscroll-behavior-y: none; scrollbar-width: none; }
body::after { content: ""; display: block; height: 12px; background: #000; }
.stage { height: 100vh; height: 100svh; min-height: 0; padding: 16px 22px 72px; gap: 0; background: #000; }
.player { --player-width: min(360px, calc(100vw - 44px), calc((100svh - 40px) * 418 / 728)); width: var(--player-width); height: calc(var(--player-width) * 728 / 418); min-height: 0; flex: none; padding: 0; }
.bezel { position: absolute; top: 4.3%; left: 6.4%; right: 6.4%; height: 42.6%; min-height: 0; }
.screen { overscroll-behavior: contain; }
.artist-mark { width: 41%; right: 4%; bottom: 2.5%; pointer-events: none; }

@media (max-width: 600px) {
  .player { --player-width: min(342px, calc((100vw - 44px) * .95), calc((100svh - 104px) * 418 / 728)); }
}

/* Keep scrolling available without visible browser scroll rails. */
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }