/* Phone polish layer (loaded only at max-width:760px from index.html).
   Owned by the phone-polish agent: index.html only carries the hook line.
   Goals (Android 300-430 px, also robust under Chrome "page zoom" which shrinks the CSS width):
   nothing sticks out sideways, every tap target >= 48x48 with 8 px gaps, text >= 14 px (bottom-key labels excepted),
   the SEARCH plate looks like the laptop one. Perf: no backdrop-filter, blend modes or animated filters here. */

/* ---------- 1. zero sideways overflow ---------- */
html,body{max-width:100%;overflow-x:hidden}
.rig,.hud,.grid,.panel,.tv,.jukebox,.nowbar,.ctl,.tvbar,.hchat,.hchd,.hcrow,.pbanner,.pticker,.srbar,.relwrap,.relrow,.rwall,.setlist,.srbox,.srrow,.card{min-width:0;max-width:100%}
.ctl,.tvbar,.relrow,.acts,.pwbtns,.chips{flex-wrap:wrap}
.hchd{flex-wrap:wrap;row-gap:6px}.hctitle{min-width:0}
.hcfull{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hcrow{gap:8px}.hcgo{flex:none}
.pbt,.srmsg,.relcredit,.pwfine,#pwWhy,.mini a,.n,.rplate span,.rplate small{overflow-wrap:anywhere}
/* stickers slapped on the panels: keep them inside the screen (their offsets are inline styles) */
.slap-kind{left:2px!important}.slap-welcome{right:2px!important}.slap-horns{right:2px!important}.slap-phase{right:2px!important}
/* the jukebox THEATER / FULL SCREEN row: share the width, wrap instead of running off */
.tvbar{gap:8px}.tvbar .bt{flex:1 1 100%;min-width:0}.tvbar .grow{display:none}
.tvbar .chip{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* header: brand shrinks before anything else is pushed out */
.hud{gap:8px}.brand{font-size:clamp(16px,4.5vw,24px)}
@media(max-width:340px){.brand{font-size:15px;letter-spacing:.01em}.brand .bclub{font-size:12px!important}#proLamp{padding:0 6px}#proLamp:after{font-size:12px}}

/* ---------- 2. bottom bar: 5 keys always fit, icon above label ---------- */
#tabbar{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#tabbar button{min-width:0;overflow:hidden;flex-direction:column}
#tabbar button .tl{display:block;max-width:100%;overflow:hidden;text-overflow:clip;font-size:clamp(11px,3.6vw,14px);letter-spacing:.04em}
@media(max-width:340px){#tabbar{gap:4px;padding-left:4px;padding-right:4px}#tabbar button .tl{letter-spacing:0;font-size:11px}#tabbar button:not([data-t=search]) .tl{font-family:'Metal Mania','Pirata One',serif}#tabbar button .ti{font-size:19px}}

/* ---------- 3. tap targets >= 48 px with 8 px gaps ---------- */
.hcfull,.hcgo,.hcin{min-height:48px}
.ctl{gap:8px}.ctl .chip,#prevB,#nextB{min-height:48px;min-width:48px}
.jbfoot{grid-template-columns:1fr;gap:12px}.jbgrille{height:56px}
.jbsel{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.jbsel button{height:48px;min-width:48px;font-size:14px}
.mini a{display:flex;flex-direction:column;justify-content:center;min-height:48px;font-size:14px}.mini small{font-size:12px}
.pticker{min-height:48px}.pti,.ptlbl{min-height:48px}
#pwClose{min-width:48px;min-height:48px;top:4px;right:4px;padding:0}
.pwbtns{gap:8px}.pwbtns .go2,#pwLater,#pwRestore{min-height:48px;font-size:14px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center}
.pwfine{font-size:14px}.pwlinks{display:flex;flex-wrap:wrap;gap:0 8px;align-items:center}
.pwlinks a{display:inline-flex;align-items:center;min-height:48px;min-width:48px;padding:0 4px;position:relative;z-index:1}
#relAll,.relrow .srgo,.relbtn{min-height:48px}
.relg{gap:8px}.relg .chip{min-width:48px;font-size:14px;justify-content:center}
.racts{flex-wrap:wrap;gap:8px}.racts button{flex:1 1 48px;min-width:48px;min-height:48px;font-size:14px;letter-spacing:0;padding:2px 4px}
.racts button[data-ra=set]{flex-basis:100%}
.acts{gap:8px}.acts span{min-height:48px;min-width:48px;justify-content:center;font-size:14px}
.clubfoot a{min-height:48px;line-height:36px;min-width:48px}
.slname,#slName{min-height:48px;font-size:14px}
.slnew,#newTrack,.slbtn,.slbtn.main,#slPlay{min-height:48px;font-size:14px}
.slacts{gap:8px}.slx{gap:8px}.slx button{min-height:48px;font-size:14px}
.tagrow{font-size:14px}.tagrow select,#tagSel{min-height:48px;font-size:14px}
.chip{min-height:48px}
.slap .stk{min-width:48px;min-height:48px}
/* the booth flags on the hero garland are 11 px wide on a phone: decoration there (booths open from MORE / DECK) */
#heroGarland{pointer-events:none}

/* ---------- 4. text >= 14 px ---------- */
.hctitle small,.tvbar .bt,#onAir,.tvbar .chip,#views button,.views button,.shelf .bt,.bt,#modeLbl,#chLbl,.who,.via,#hcVia,
.uc .n,.uc .n small,#npS,#capS,#npTag,.heavy small,.cvl,#convs .chip,#newChat,.srsec .bt,.srsec .srmsg,.srmsg,.sr .ac .chip,
#relLive,.relrow .chip,.showcov,.rplate small,.rplate span,.relcredit,.relsign small,#slMeta,.slmeta,.sltt small,#roadieTip,
.pwcol b,.pwcol li,#pwWhy,#pwFine,.shprev code,.shgrid .shb,#shCopy,#shQr,#shQrBox small,#srchStat,.hcq,.hcq b,.n b,
#moreStat .lamp,#moreStat .gauge,.card h3,.card small,.card p{font-size:14px}
.pkb{font-size:12px}
.ptlbl{font-size:13px}

/* ---------- 5. SEARCH plate = the laptop's riveted steel plate ---------- */
.srbar{border-radius:9px;min-height:56px}
.srbar .lbl{font-family:'Pirata One',serif;letter-spacing:.12em;text-transform:uppercase;font-size:clamp(17px,5.4vw,22px)}
@media(max-width:340px){.srbar{gap:8px;padding:8px 10px}.srbar .horns{display:none}.srbar .lbl{font-size:16px;letter-spacing:.06em}}

/* ---------- 6. FREE PASS / TRIAL reminder: its one-line phone layout lives in index.html; only the 8 px key gap here ---------- */
.pbanner{gap:8px}.pbgo{min-height:48px}.pbx{width:48px;height:48px}

/* ---------- follow-ups from the probe ---------- */
/* setlist row tools: 5 buttons wrap to a second row instead of shrinking under 48 px */
.slx{flex-wrap:wrap}.slx button{flex:1 1 48px;min-width:48px}
/* release TVs: the invisible PLAY layer covers only the screen part, so the action keys below stay hittable */
.rtv>.rtplay{bottom:auto;height:auto;aspect-ratio:16/10}
/* big screen: the poster caption must not sit over the round PLAY key */
#bigPlay{position:relative;z-index:5}
/* stickers on the console: large enough to tap */
.slap-local .stk{zoom:.62}.slap-ears .stk{zoom:.45}
/* setlist tools: one row of five 48 px keys across the whole card when it fits, else 4 + 1 at the same size */
.slx{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:8px}.slx button{min-width:0}
/* big screen row: label on its own line, the two keys share the width and never cut their words */
.tvbar .bt{letter-spacing:.12em}#onAir{white-space:nowrap}
.tvbar .chip{white-space:normal;line-height:1.1;letter-spacing:.02em;padding:4px 8px;text-overflow:clip}
.relsign small,#relLive{letter-spacing:.1em}
.slap-phase{top:-34px!important}
/* bottom SEARCH key: the four rivets sit in the corners, clear of the label */
#tabbar button[data-t=search]{background:radial-gradient(circle at 6px 6px,#e4e8ec 0 1.5px,#6b7279 2.1px,#0f1114 2.8px,transparent 3.5px),radial-gradient(circle at calc(100% - 6px) 6px,#e4e8ec 0 1.5px,#6b7279 2.1px,#0f1114 2.8px,transparent 3.5px),radial-gradient(circle at 6px calc(100% - 6px),#e4e8ec 0 1.5px,#6b7279 2.1px,#0f1114 2.8px,transparent 3.5px),radial-gradient(circle at calc(100% - 6px) calc(100% - 6px),#e4e8ec 0 1.5px,#6b7279 2.1px,#0f1114 2.8px,transparent 3.5px),linear-gradient(112deg,transparent 30%,rgba(255,255,255,.08) 30.3%,transparent 31.1%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),linear-gradient(#3b4047,#262a30 48%,#1c1f24 52%,#2a2e34)}
#tabbar button[data-t=search] .tl{padding:0 6px 3px}
/* paywall: RESTORE / NOT NOW as steel keys (they were bare grey browser buttons at 21 px) */
.pwbtns .go2:not(.main){border-radius:8px;border:1px solid #6b7279;background:linear-gradient(#3b4047,#1c1f24);color:#f1e7d2;font:800 14px ui-monospace,monospace;letter-spacing:.06em;box-shadow:0 2px 0 #0b0c0e}
.plan>small,.plan small{font-size:14px}
/* more real content up to 14 px (sticker words, the jukebox crown, knob scales and stamps stay decorative) */
.ctl .chip,#autoB,#sampleB,#saveBtn,#shareB,#slAddNow,#fullB,#bMem,#bSet,#bVault,.hcfull,#hcFull,.mini small,.ptlbl,#pTickAll,.pkb,
.plan b,.plan .go,.plan .pp small,.plan .badge,.uc .yl,.sr .n small,.rbadge,.rdur,.acts .rx,.who,.cvl{font-size:14px}
.uc .yl{padding:4px 7px}
/* big screen "no official video" card: both links as 48 px targets */
.novid a.chip.full{display:inline-flex;align-items:center;justify-content:center;min-height:48px}
.novid small a{display:inline-flex;align-items:center;min-height:48px;padding:0 4px}
/* the sample / no-video card is taller than a 16:9 phone screen: the screen grows while it shows, so nothing is cut
   (the card's position/inset/padding are inline styles, hence !important) */
.screen:has(>.novid){aspect-ratio:auto;min-height:calc((100vw - 60px) * 9 / 16)}
.screen>.novid{position:relative!important;inset:auto!important;min-height:inherit;padding:10px 8px!important}
.novid>div{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:100%}.novid small{font-size:14px!important}
.novid a.chip.full{padding:6px 14px;white-space:normal;line-height:1.15}