/* web-shell.css — the ONLY browser-specific styling.
   Everything that makes it look like an iPod comes from the shared mod stylesheet
   (shared/ipod-ui.css, served from overlay/beam_ipod). Keep this file tiny: page chrome and
   the handful of size bumps that make the in-game 260px app comfortable at desk scale. */

*{box-sizing:border-box}
html,body{height:100%}
/* touch: the whole device is a control surface, not a document. Stop the page rubber-banding or
   text-selecting while you spin the wheel, and stop long-press popping the iOS/Android callout. */
html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%}
.ipod{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.wheel,.wheel *,.ctr{touch-action:none}
/* the shared stylesheet sets display: on .np/.loading/.seg/.volbar, which outranks the browser's
   built-in [hidden]{display:none} — so views would all stack. Restore hidden's authority. */
[hidden]{display:none!important}
body{margin:0;padding:18px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(circle at 50% 0%,#2c313a,#15171b 70%,#0d0e11);
  font-family:"Source Sans 3","Helvetica Neue",Helvetica,Arial,sans-serif}
/* MUST be exactly the iPod's width: the shared sheet sizes the body with PERCENTAGE padding, and
   CSS resolves those against the containing block's width — a wider .stage silently skews every
   proportion. (In BeamNG the app window is the containing block, so it's naturally correct there.) */
.stage{display:flex;flex-direction:column;align-items:center;gap:14px;width:360px}

/* the shared .ipod is width/height:100% (it fills a BeamNG app window) — give it a body here.
   height:auto so the body hugs the 4:3 screen + wheel instead of stretching them. */
.ipod{width:360px;height:auto;border-radius:26px;
  box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 #fff,inset 0 -3px 8px rgba(0,0,0,.12)}
.ipod.black{box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -3px 8px rgba(0,0,0,.45)}

/* wheel geometry is proportional in the shared sheet now (65.7% of body width, like the real
   iPod) — we only add pointer affordances and scale the glyphs to the larger desk-size wheel. */
.wheel{touch-action:none;cursor:grab}
.wheel:active{cursor:grabbing}
.wtop{font-size:18px}
.wbot,.wleft,.wright{font-size:26px}

/* NOTE: do NOT override .mi height here — ipod.js windows the list with ROW = 23 and would
   render the wrong number of rows if CSS disagreed. */
.art{width:96px;height:96px}
.npn{font-size:15px}

/* settings rows stack (the game app sets this inline per-row) */
.set .srow{display:block;cursor:default}
.set .srow + .srow{margin-top:12px}
.set input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;
  background:#c9c9c9;outline:none;cursor:pointer;margin-top:6px}
.set input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;
  border-radius:50%;background:#fff;border:1px solid #888;box-shadow:0 1px 2px rgba(0,0,0,.3);cursor:pointer}
.art img{width:100%;height:100%;object-fit:cover;display:block}

.legend{font-size:11px;color:#7d8590;text-align:center;line-height:1.6;width:100%}
.legend b{color:#aab2bd}

@media (max-width:430px){
  body{padding:8px}
  /* .stage must stay the iPod's own width — the shared sheet's percentage padding resolves
     against it, so anything wider silently distorts every proportion. */
  .stage{width:100%;max-width:360px}
  .ipod{width:100%;height:auto}
  /* NO transform:scale here — wheel geometry is proportional now; scaling it broke the real-iPod
     ratios (measured 298px where the spec says ~220) and left its layout box the wrong size. */
  .legend{display:none}
}