/* phone-ui.css — phones and touch on every screen that is not the fight (lane PH2, Karl 2026-10-26: the phone beta,
   "Remember Steam quality"). public/phone-ui.js sets the classes:
     body.touch  the last pointer down was a finger (tablets too): no hover anywhere, 44 px touch targets in the Holy
                 Mountain, the tap selection, the pause / menu buttons
     body.phone  a landscape phone (pointer: coarse, height <= 500 px; ?phone=1 forces it): the layouts below
   The same Noita look (stone panels, gold edges, pixel fonts); only sizes and arrangement change. Safe areas: the
   viewport has viewport-fit=cover, so the notch side is padded with env(safe-area-inset-*). */
:root { --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --tt: 44px; }

/* ================================================================== touch (any size) */
body.touch { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.touch * { -webkit-tap-highlight-color: transparent; }
/* no hover look stuck on the last thing a finger touched */
@media (hover: none) {
  button:hover:not(.padon) { color: var(--text); border-color: var(--edge2); background: linear-gradient(#3a3028, #2a221c); }
  button.primary:hover:not(.padon) { border-color: #b08a3a; color: #ffe7a8; }
  .dcard:hover:not(.padon):not(.tsel) { border-color: #3a3029; transform: none; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5); }
  /* the gold chip's ledger: a tap opens it, a second tap (or a tap anywhere else) closes it (no sticky hover / focus) */
  .hgold:hover:not(.open) .bledger, .hgold:focus:not(.open) .bledger { display: none; }
}
body.touch .hgold:not(.open) .bledger { display: none; }
/* the tap selection (public/hmtouch.js): one clear gold mark on what is selected */
#build .slot.tsel { border-color: #fff3c4; background: rgba(242, 193, 78, 0.32); box-shadow: 0 0 0 2px #000, 0 0 12px rgba(255, 220, 120, 0.85); z-index: 2; animation: tselpulse 0.6s infinite alternate; }
#build .dcard.tsel { border-color: #fff3c4; transform: translateY(-2px); box-shadow: 0 0 0 2px #000, 0 0 16px rgba(255, 220, 120, 0.7), inset 0 0 18px rgba(0, 0, 0, 0.5); }
#build .dcard.tsel::after { content: 'TAP AGAIN: BAG'; position: absolute; left: 0; right: 0; bottom: -2px; font-family: var(--title); font-size: 9px; color: #1a1206; background: var(--gold); padding: 1px 0; }
@keyframes tselpulse { to { box-shadow: 0 0 0 2px #000, 0 0 4px rgba(255, 220, 120, 0.4); } }
/* with something selected, every wand's header says it takes it (the 1-4 keys' equivalent) and the slots invite */
#build.tselon .bwand .whead { outline: 2px dashed #8a6a24; outline-offset: 1px; }
#build.tselon .bwand .whead .wname::after { content: ' ◂ tap: here'; font-family: var(--title); font-size: 10px; color: var(--gold); }
#build.tselon .slot:not(.tsel) { border-color: #5a4a2a; }
#build.tselon #trash { border-color: #c0503a; color: #ff9a7a; }
/* the selection bar: over Ready, in the right column's foot */
.tbar { flex: none; margin: 0 0 6px; padding: 4px; background: #1c1610; border: 2px solid #8a6a24; box-shadow: 0 0 0 2px #000, 0 0 14px rgba(242, 193, 78, 0.18); }
.tbar .tbtop { display: flex; align-items: center; gap: 6px; }
.tbar .tbtop img { width: 32px; height: 32px; flex: none; }
.tbar .tbn { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.tbar .tbn b { font-weight: 400; color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbar .tbn small { color: var(--dim); font-size: 11px; }
.tbar .tbrow { display: flex; gap: 4px; margin-top: 4px; }
.tbar .tbrow button { flex: 1 1 0; min-width: 44px; padding: 4px 2px; }
.tbar button { min-height: var(--tt); font-size: 13px; letter-spacing: 0; }
.tbar .tbi, .tbar .tbx { width: var(--tt); padding: 0; flex: none; }
/* the long-press sheet (the hover tooltip's content) */
.tsheet { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; background: rgba(4, 3, 6, 0.6); padding: max(10px, var(--st)) max(12px, var(--sr)) max(10px, var(--sb)) max(12px, var(--sl)); }
.tsbox { width: min(460px, 94vw); max-height: 100%; display: flex; flex-direction: column; background: rgba(12, 10, 14, 0.98); border: 2px solid var(--edge2); box-shadow: 0 0 0 2px #000, 0 10px 40px rgba(0, 0, 0, 0.7); padding: 10px 12px; }
.tsbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; font-size: 14px; line-height: 1.35; }
.tsbody .tn { font-size: 17px; color: #fff; }
.tsbody .tt { font-size: 12px; font-family: var(--title); margin-bottom: 4px; }
.tsbody .td { color: var(--dim); margin-bottom: 6px; }
.tsbody table { border-collapse: collapse; } .tsbody td, .tsbody th { padding: 0 10px 0 0; color: var(--dim); text-align: left; font-weight: 400; }
.tsbody td + td { color: var(--text); }
.tsbody .cmpnote { margin-top: 6px; font-size: 12px; color: var(--dimmer); }
.tsbody .tsyn { margin-top: 6px; color: #ffd46a; font-size: 13px; }
.tsclose { flex: none; margin-top: 8px; min-height: var(--tt); }
/* the pause button (the fight) and the menu button (the Holy Mountain): touch only */
.tpause, .tmenu { display: none; }
body.touch .tpause { display: flex; position: absolute; left: 50%; bottom: max(8px, var(--sb)); transform: translateX(-50%); width: var(--tt); height: var(--tt); padding: 0; gap: 6px; align-items: center; justify-content: center; pointer-events: auto; z-index: 6; opacity: 0.85; background: rgba(20, 16, 22, 0.75); }
body.touch .tpause i { width: 5px; height: 16px; background: var(--text); display: block; }
body.touch .tmenu { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: var(--tt); min-height: var(--tt); padding: 0 10px; font-size: 18px; }
/* a dead wizard's "Shop now" / "Watch the round" (autoui.js #aswap): no H key on a phone, and it sits over the pause button */
body.touch .aswap kbd { display: none; }
body.touch .aswap { bottom: calc(max(8px, var(--sb)) + 52px); min-height: var(--tt); zoom: 1; font-size: 14px; }
body.touch #build .bfoot .aswap { bottom: auto; }
/* a checkbox: a 44 px target around its 26 px box */
body.touch #modal input[type=checkbox], body.touch .bld input[type=checkbox] { width: var(--tt); height: var(--tt); border: 9px solid transparent; background-clip: padding-box; box-shadow: none; outline: 2px solid var(--edge2); outline-offset: -11px; }
body.touch #modal input[type=checkbox]:checked::after, body.touch .bld input[type=checkbox]:checked::after { inset: 3px; }
/* the Holy Mountain on any touch screen (a tablet keeps its desktop layout): 44 px slots and buttons */
body.touch #build { --slot: 44px; }
body.touch #build button, body.touch #build .slot { min-height: var(--tt); }
body.touch #build button { min-width: var(--tt); }
body.touch #build .bwand .whead { min-height: var(--tt); }
body.touch .bld button, body.touch .autospanel button, body.touch #modal button, body.touch #esc button, body.touch #lobby button, body.touch #lobby select, body.touch #end button,
body.touch #title button, body.touch #title input { min-height: var(--tt); }
body.touch #modal input[type=range], body.touch .bld input[type=range] { height: var(--tt); }
body.touch #modal input[type=range]::-webkit-slider-thumb, body.touch .bld input[type=range]::-webkit-slider-thumb { width: 22px; height: 34px; margin-top: -14px; }
body.touch .bld input[type=range]::-webkit-slider-runnable-track, body.touch #modal input[type=range]::-webkit-slider-runnable-track { height: 10px; }

/* ================================================================== phones (landscape) */
body.phone { font-size: 13px; }
body.phone button { font-size: 13px; padding: 6px 12px; min-height: var(--tt); min-width: var(--tt); letter-spacing: 0.5px; }
body.phone button.big { font-size: 16px; padding: 8px 16px; }
body.phone button.small { font-size: 11px; padding: 4px 8px; }
body.phone select, body.phone input { min-height: var(--tt); font-size: 15px; }
body.phone .hint { font-size: 12px; margin-top: 8px; }
body.phone h2 { font-size: 20px; margin-bottom: 6px; }
body.phone h3 { font-size: 13px; margin-top: 10px; }
body.phone .panel { padding: 10px 14px; }
body.phone .toast { font-size: 14px; padding: 8px 12px; bottom: max(14px, var(--sb)); max-width: min(80vw, 520px); }
body.phone #tut .tutcard { width: min(320px, 46vw); font-size: 13px; padding: 8px 10px; }
body.phone .tutcard button { min-height: var(--tt); }

/* ---- TITLE: the logo left, the menu (or the login gate) right, "Next up" under the logo */
body.phone #title { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 44%); grid-template-rows: auto auto auto minmax(0, 1fr) auto; column-gap: 18px; row-gap: 4px; align-items: start; justify-items: start;
  padding: max(8px, var(--st)) max(14px, var(--sr)) max(4px, var(--sb)) max(14px, var(--sl)); }
body.phone #title .logo { grid-column: 1; grid-row: 1; align-items: flex-start; margin-top: 4px; }
body.phone #title .logo .l1 { font-size: 46px; letter-spacing: 5px; }
body.phone #title .logo .l2 { font-size: 19px; letter-spacing: 6px; }
body.phone #title .tag { grid-column: 1; grid-row: 2; font-size: 13px; margin: 0; }
body.phone #title .acctbox { grid-column: 1; grid-row: 3; zoom: 1; margin: 2px 0 0; font-size: 13px; flex-wrap: wrap; row-gap: 2px; }
body.phone #title .acctbox .acctimg { width: 22px; height: 30px; }
body.phone #title .titlenext { grid-column: 1; grid-row: 4; position: static; transform: none; width: 100%; max-height: 100%; overflow-y: auto; zoom: 1; align-self: stretch; }
body.phone #title .titlenext .nugrid { --nucols: 2; }
body.phone #title .menu, body.phone #title .loginpanel { grid-column: 2; grid-row: 1 / 5; align-self: center; width: 100%; }
body.phone #title .menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body.phone #title .menu > button, body.phone #title .menu > .joinrow { grid-column: 1 / -1; }
body.phone #title .menu > button[data-act=create] { grid-column: 1; }
body.phone #title .menu > .joinrow { grid-column: 2; grid-row: 2; }
body.phone #title .menu .joinrow input { width: 70px; min-width: 0; letter-spacing: 2px; padding: 4px; }
body.phone #title .menu .menurow { display: contents; }
body.phone #title .menu button { width: 100%; padding: 4px 6px; }
body.phone #title .menu button.big { font-size: 16px; }
body.phone #title .loginpanel { zoom: 1; padding: 10px 12px; gap: 6px; max-height: calc(100vh - 20px); }
body.phone #title .loginpanel .hint { font-size: 11px; }
body.phone #title .loginres { max-height: 120px; }
body.phone #title .logpick { min-height: var(--tt); }
body.phone #title .padhint { display: none; }
body.phone #title .foot { position: static; grid-column: 2; grid-row: 5; justify-self: end; font-size: 11px; display: flex; align-items: center; }
body.phone #title .foot .linkbtn { min-height: 36px; }
body.phone #title .fscorner { position: static; grid-column: 1; grid-row: 5; zoom: 1; justify-self: start; font-size: 12px; }

/* ---- the screens that are one panel: full height, scrolling, safe areas */
body.phone #lobby, body.phone #end, body.phone #modal, body.phone #esc { padding: max(6px, var(--st)) max(10px, var(--sr)) max(6px, var(--sb)) max(10px, var(--sl)); }
body.phone .modalpanel, body.phone .modalpanel.wide { zoom: 1; width: 100%; max-width: 980px; max-height: 100%; padding: 10px 14px; }
body.phone .modalpanel .close { position: sticky; top: 0; float: right; margin: -4px -6px 0 8px; z-index: 3; width: var(--tt); height: var(--tt); padding: 0; }
body.phone #modal .modalpanel > #modalbody > h2:first-child, body.phone #modal .howto > h2:first-child { padding-right: 50px; }

/* ---- LOBBY */
body.phone .lobbypanel { width: min(640px, 100%); max-height: 100%; overflow-y: auto; }
body.phone .lobbypanel h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.phone .lobbypanel .row { margin-top: 8px; gap: 8px; }
body.phone .plist { margin-top: 6px; gap: 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.phone .plist li { padding: 4px 8px; font-size: 15px; min-height: var(--tt); }
body.phone .plist li button { min-height: 36px; }
body.phone .lopt select { min-width: 84px; }
body.phone .lobbypanel .hint { margin-top: 6px; }

/* ---- ESC: two columns of big buttons */
body.phone .escpanel { width: min(520px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.phone .escpanel h2 { grid-column: 1 / -1; margin: 0; }
body.phone .escpanel button[data-act=resume] { grid-column: 1 / -1; }

/* ---- SETTINGS / HOW TO / CODEX / PROFILE / LEADERBOARD / WARDROBE */
body.phone .setgrid { grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) 46px; gap: 6px 10px; font-size: 14px; }
body.phone .setgrid.binds { grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); }
body.phone .kbmore { margin-top: 10px; }
body.phone .kbmore > summary, body.touch .kbmore > summary { min-height: var(--tt); display: flex; align-items: center; cursor: pointer; font-family: var(--title); font-size: 13px; color: var(--gold); border: 2px solid var(--edge); padding: 0 12px; background: #1a1614; }
body.phone .keys { font-size: 13px; gap: 4px 10px; }
body.phone .howto p { font-size: 13px; line-height: 1.4; }
body.phone .stlegend { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); font-size: 12px; }
body.phone .codexgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
body.phone .codexgrid .ce { min-height: var(--tt); }
body.phone .wtabs { flex-wrap: wrap; padding-right: 50px; }
body.phone .wardrobe { grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
body.phone .wprev { width: 110px; height: 140px; }
body.phone .wgrid { max-height: none; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
body.phone .witem { min-height: 56px; }
body.phone .wdetail { flex-wrap: wrap; }
body.phone .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
body.phone .stats b { font-size: 17px; }
body.phone .stats div { padding: 4px; font-size: 11px; }
body.phone .lb { font-size: 13px; }
body.phone .lb td, body.phone .lb th { padding: 3px 5px; }

/* ---- END OF MATCH: the panel scrolls, Rematch / Leave stay at its foot */
body.phone .endpanel { zoom: 1; width: min(980px, 100%); max-height: 100%; padding: 8px 12px 0; }
body.phone .endpanel h2 { font-size: 22px; }
body.phone .awards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
body.phone .award { padding: 5px 7px; min-height: 0; }
body.phone .endpanel table { font-size: 13px; }
body.phone .endpanel td, body.phone .endpanel th { padding: 3px 5px; }
body.phone .endpanel .endrow { position: sticky; bottom: 0; margin: 8px -12px 0; padding: 6px 12px max(6px, var(--sb)); background: #120f14; border-top: 2px solid var(--edge); z-index: 3; }
body.phone .aend .aendport canvas { width: 110px; height: 82px; }

/* ---- THE HOLY MOUNTAIN: one screen, no panel margin; header one line; the left column (wands, bag, wand bodies)
   scrolls by whole items; the right (draft, perks) scrolls above the pinned selection bar + Ready */
body.phone #build { padding: 0; align-items: stretch; justify-content: stretch; }
body.phone .mountain { width: 100%; max-height: none; height: 100%; padding: max(4px, var(--st)) max(8px, var(--sr)) max(4px, var(--sb)) max(8px, var(--sl)); border-width: 0; box-shadow: none; }
body.phone .mountain header { gap: 8px; padding-bottom: 3px; min-height: var(--tt); }
body.phone .htitle { font-size: 14px; } body.phone .htitle small { font-size: 11px; display: block; line-height: 1; }
body.phone .bnext { font-size: 12px; min-width: 0; }
body.phone .hgold { font-size: 16px; padding: 1px 8px; min-height: var(--tt); }
body.phone .hgold .hgln { font-size: 11px; }
body.phone .bledger { max-height: calc(100vh - 70px); overflow-y: auto; left: auto; right: 0; transform: none; }
body.phone .breadys { font-size: 10px; }
body.phone .breadys span b { display: none; }
body.phone .btimer { font-size: 22px; min-width: 40px; }
body.phone .bomen, body.phone .bauto { margin-top: 3px; padding: 2px 8px; font-size: 12px; }
body.phone .bwarn { top: 50px; font-size: 16px; }
body.phone .bcols { grid-template-columns: minmax(0, 1fr) clamp(250px, 36vw, 340px); gap: 10px; margin-top: 4px; }
body.touch .bleft { overflow-y: auto; overflow-x: hidden; scroll-snap-type: y proximity; overscroll-behavior: contain; padding-right: 2px; }
body.touch .bleft > * { flex: none; }
body.touch .bleft > h3, body.touch .bleft .baghead, body.touch .bleft .bodyhead, body.touch .bleft .bagrow, body.touch .bleft .bodies, body.touch .bleft .bodypick, body.touch #bwands > .bwand { scroll-snap-align: start; }
body.touch .bwands { overflow: visible; max-height: none !important; padding-right: 0; }
body.touch .bwmore { display: none !important; }
body.phone .bleft .baghead { margin-top: 2px; }
body.phone .bleft h3, body.phone .bright h3 { margin: 4px 0 3px; font-size: 12px; }
body.phone .bleft h3 small, body.phone .bright h3 small { font-size: 11px; }
body.phone #bwandhint .qk { white-space: nowrap; }
body.phone .bwand { padding: 4px 6px; margin-bottom: 5px; }
body.phone .bwand .whead { gap: 6px; flex-wrap: wrap; row-gap: 0; }
body.phone .bwand .whead img { width: 48px; height: 18px; }
body.phone .bwand .wname { font-size: 14px; }
body.phone .bwand .wsum { flex-basis: 100%; order: 9; font-size: 11px; }
body.phone .bwand .whead button { margin-left: auto; }
body.phone .bwand .whead button + button { margin-left: 0; }
body.phone .bwand .wstats { font-size: 11px; gap: 0 8px; margin: 2px 0 3px; }
body.phone .bwand .wstats span { min-width: 0; }
body.phone .bwand .wtop { grid-template-columns: minmax(0, 1fr) 40%; gap: 6px; }
body.phone .bwand .pvcasts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.phone .bwand .pvsum { font-size: 11px; gap: 0 10px; }
body.phone .bwand .pvh, body.phone .bwand .pvh b, body.phone .bwand .pvw, body.phone .bwand .pvt { font-size: 11px; }
body.phone .bench .bhud, body.phone .bench .bghost { font-size: 10px; }
body.phone .bagrow { gap: 6px; }
body.phone .bag { gap: 4px; }
body.phone .trash { width: 64px; font-size: 11px; padding: 4px; }
body.phone .bodies { grid-template-columns: minmax(0, 1fr); }
body.phone .shopitem.wand.body { min-height: var(--tt); font-size: 12px; }
body.phone .shopitem.wand.body .wmeta { font-size: 11px; }
body.phone .bodypick .bprow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
body.phone .bpcard { min-height: var(--tt); padding: 3px 5px; gap: 5px; }
body.phone .bpcard img { width: 44px; height: 17px; }
body.phone .bpcard .bpt { font-size: 11px; } body.phone .bpcard .bpt b { font-size: 12px; } body.phone .bpcard .bpn { display: none; }
body.phone .bpcard .bps { font-size: 10px; }
body.phone .bscroll { scroll-snap-type: y proximity; overscroll-behavior: contain; }
body.phone .bscroll > * { scroll-snap-align: start; }
body.phone .drafthead h3 { margin: 2px 0; }
body.phone .dsteps { margin-bottom: 4px; }
body.phone .dstep { height: 30px; font-size: 10px; }
body.phone .drow, body.phone .drow.n4 { gap: 4px; }
body.phone .drow.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.phone .dcard { padding: 14px 3px 6px; }
body.phone .dcard img { width: 34px; height: 34px; }
body.phone .dcard .dn { font-size: 13px; } body.phone .dcard .de { font-size: 11px; } body.phone .dcard .ds { font-size: 10px; }
body.phone .dcard .dsyn, body.phone .dcard .dhint { font-size: 10.5px; }
body.phone .perks { gap: 4px; }
body.phone .perk { padding: 4px 3px; min-height: var(--tt); }
body.phone .perk img { width: 28px; height: 28px; }
body.phone .perk b { font-size: 12px; } body.phone .perk span { font-size: 10.5px; }
body.phone .perkconfirm { margin-top: 4px; font-size: 12px; flex-wrap: wrap; }
body.phone .bfoot { padding-top: 6px; }
body.phone #readybtn { min-height: 48px; font-size: 18px; padding: 6px 10px; }
body.phone #readybtn.confirm { font-size: 12px; }
body.phone .bpadhint { display: none; }
body.phone #build .tooltip { display: none !important; }

/* the Automaton's commission panel + star row at the match end */
body.phone .ecomm { padding: 6px 10px; gap: 8px; flex-wrap: wrap; }
body.phone .erate { flex-wrap: wrap; padding: 4px 10px; gap: 6px; }
body.phone .erate button.lstar { min-width: var(--tt); min-height: var(--tt); font-size: 18px; }

/* ---- THE AUTOMATONS SCREEN (Workshop · My Automatons · Library · Shelf) */
body.phone #autos { padding: max(4px, var(--st)) max(8px, var(--sr)) max(4px, var(--sb)) max(8px, var(--sl)); }
body.phone .autospanel { --az: 1; zoom: 1; width: 100%; height: 100%; padding: 6px 10px 4px; }
body.phone .autoshead { gap: 8px; padding-bottom: 4px; flex-wrap: wrap; }
body.phone .autoshead h2 { font-size: 18px; }
body.phone .autostabs { gap: 4px; }
body.phone .lgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
body.phone .lport { width: 120px; height: 90px; }
body.phone .wsrow { gap: 10px; }
body.phone .autosfoot { font-size: 11px; }
body.phone button.lstar { min-width: 36px; min-height: 36px; }

/* ---- THE BUILDER (Automatons > Workshop > design): no zoom, laid out for a landscape phone */
body.phone .bld { zoom: 1; width: 100vw; height: 100vh; padding: var(--st) var(--sr) var(--sb) var(--sl); font-size: 13px; }
body.phone .bld button { font-size: 12px; padding: 4px 8px; }
body.phone .bld-top { gap: 4px; padding: 2px 4px; flex-wrap: nowrap; }
body.phone .bld-name { min-width: 0; max-width: 120px; }
body.phone .bld-nm { font-size: 13px; }
body.phone .bld-sk { font-size: 10px; }
body.phone .bld .bld-steps button { font-size: 12px; padding: 4px 8px 4px 5px; gap: 5px; }
body.phone .bld-acts { gap: 3px; }
body.phone .bld-ico { min-width: var(--tt); }
body.phone .bld-acts button { padding: 4px 6px; font-size: 11px; }
/* the top bar fits one row: the studio toggle says "Studio", the test fight "Test" */
body.phone .bld-studio, body.phone .bld-test { font-size: 0 !important; }
body.phone .bld[data-studio=simple] .bld-studio::before { content: 'Studio ▸'; font-size: 11px; }
body.phone .bld[data-studio=adv] .bld-studio::before { content: '◂ Simple'; font-size: 11px; }
body.phone .bld-test::before { content: '▶ Test'; font-size: 11px; }
body.phone .bld-sk { display: none; }
/* a narrow phone: the steps not shown are their numbers (the right column's "Next" names the next one) */
@media (max-width: 760px) {
  body.phone .bld .bld-steps button:not(.on) { font-size: 0; gap: 0; padding: 4px 10px; }
  body.phone .bld .bld-steps button:not(.on) em { font-size: 11px; }
  body.phone .bld-name { max-width: 84px; }
}
body.phone .bld[data-studio=simple] .bld-main { grid-template-columns: clamp(170px, 24vw, 230px) minmax(0, 1fr) clamp(150px, 20vw, 200px); }
body.phone .bld[data-studio=simple] .bld-centre { gap: 4px; padding: 4px; }
body.phone .bld-strip { height: 52%; padding: 4px; }
body.phone .bld-stagewrap { min-height: 100px; }
body.phone .bs-tabs { margin-bottom: 4px; min-height: var(--tt); flex-wrap: nowrap; overflow-x: auto; }
body.phone .bs-tabhint { font-size: 10px; }
body.phone .bs-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
body.phone .bs-card canvas { height: 52px; }
body.phone .bs-card b { font-size: 10px; }
body.phone .bld-left, body.phone .bld-right { padding: 6px; }
body.phone .bs-sl input[type=range] { height: var(--tt); }
body.phone .bs-slh b { font-size: 12px; } body.phone .bs-slh small { font-size: 10px; }
body.phone .bp-cards { gap: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)) 52px; }
body.phone .bld .bp-card { padding: 4px 4px 3px; }
body.phone .bld .bp-card.armed { border-color: #fff3c4; box-shadow: 0 0 0 2px #000, 0 0 14px rgba(255, 220, 120, 0.7); }
body.touch .bld .bp-card.armed::after { content: 'TAP AGAIN TO TAKE'; position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--title); font-size: 9px; color: #1a1206; background: var(--gold); padding: 1px 0; }
body.touch .bld .bp-card.armed { border-color: #fff3c4; }
body.phone .bm-card canvas { width: 56px; height: 56px; }
body.phone .bm-card b { font-size: 13px; }
body.phone .bld-bot { display: none; }
body.phone .bld-stpins button { min-height: var(--tt); min-width: var(--tt); }
body.phone .bld-nextbtn { width: 100%; }
/* the Advanced studio on a phone: reachable, with a note that it is meant for a bigger screen */
.bld-bignote { display: none; }
body.phone .bld[data-studio=adv] .bld-bignote { display: block; position: absolute; left: 50%; bottom: max(6px, var(--sb)); transform: translateX(-50%); z-index: 8; pointer-events: none; font-size: 12px; color: #ffe7a8; background: rgba(40, 28, 10, 0.94); border: 2px solid #8a6a24; padding: 3px 10px; white-space: nowrap; box-shadow: 0 0 0 2px #000; }
body.phone .bld[data-studio=adv] .bld-main { grid-template-columns: 230px minmax(0, 1fr) 200px; }
body.phone .bld[data-studio=adv] .bld-setpick { font-size: 10px; letter-spacing: 0; padding: 4px; }

/* ---- pass 2 (the first phone screenshots) */
body.touch .bld-tip { display: none !important; }   /* (a finger's hover tip stuck over the strip: a long press shows it as a sheet) */
body.phone #title .foot { font-size: 10px; line-height: 1.2; gap: 6px; }
body.phone #title .foot .linkbtn { min-height: var(--tt); min-width: var(--tt); flex: none; white-space: nowrap; }
body.touch #modal input:not([type=range]):not([type=checkbox]) { min-width: var(--tt); min-height: var(--tt); }
body.phone .lcard .lname { font-size: 12px; letter-spacing: 0; }
body.phone .bld-tplcard b { font-size: 10px; letter-spacing: 0; white-space: normal; overflow: visible; text-overflow: clip; text-align: center; }
body.phone .bld-name { max-width: 150px; }
body.phone .bld-nm { font-size: 12px; letter-spacing: 0; }
body.phone .bld .bld-play { min-width: var(--tt); min-height: var(--tt); }
body.phone .bld .bp-kinds button { font-size: 10px; padding: 4px 5px; letter-spacing: 0; }
body.phone .bld-left button { font-size: 10px; letter-spacing: 0; padding: 4px 5px; }
body.phone .bld-tut .tutcard { padding: 6px 8px; }
body.phone .bld-tut .tuttext { font-size: 12px; overflow-wrap: anywhere; }
body.phone .bld-tut .tutstep { letter-spacing: 0; overflow-wrap: anywhere; }
body.phone .bld-tut .tutbtns { flex-wrap: wrap; }
body.phone .bld-right .bld-bandlbl, body.phone .bld-right h4 { letter-spacing: 0; overflow-wrap: anywhere; }
body.touch .bench .bghost { white-space: normal; }
body.touch .baghead h3 small, body.touch .bodyhead h3 small { display: none; }
body.phone .bld-top > button[data-b=back] { white-space: nowrap; padding: 4px 6px; font-size: 11px; }
/* the selected wand's cast cards: one row that scrolls sideways (the bag stays near the wands) */
body.phone .bwand .pvcasts { display: flex; overflow-x: auto; gap: 4px; scroll-snap-type: x proximity; }
body.phone .bwand .pvcard { flex: 0 0 31%; scroll-snap-align: start; }
body.touch #modal input[type=checkbox], body.touch .bld input[type=checkbox] { flex: none; }
body.phone .bld-nm { white-space: normal; line-height: 1.05; font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
body.phone .bld .bp-kinds button, body.phone .bld .bs-tabs button { flex: none; }
body.phone .bld-top > button, body.phone .bld-acts > button { flex: none; }
/* pass 3 (667 x 375) */
body.phone .bld .bld-dlg[data-kind=templates] { right: 0; }
body.phone .bld-dlgbox { padding: 8px 10px; max-height: 100%; }
body.phone .bld-dlgbox.tpl { width: 100%; }
body.phone .bld-tplgrid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; }
body.phone .bld-tplcard canvas { width: 72px; height: 72px; }
body.phone .bld-left button { white-space: normal; line-height: 1.1; }
body.phone .bs-tabhint { overflow-wrap: anywhere; min-width: 60px; }
body.phone .dstep { padding: 2px 3px; letter-spacing: 0; }
body.phone .bwand .whead button { font-size: 10px; padding: 4px 6px; letter-spacing: 0.5px; }
@media (max-width: 760px) {
  body.phone .bld-name { display: none; }
  body.phone .htitle { font-size: 12px; } body.phone .htitle small { font-size: 10px; }
  body.phone .bnext { font-size: 11px; }
  body.phone .hgold { font-size: 14px; padding: 1px 5px; }
  body.phone .btimer { font-size: 18px; min-width: 30px; }
  body.phone .mountain header { gap: 5px; }
  body.phone .bs-tabhint { display: none; }
}
@media (max-width: 760px) { body.phone .tbar .tbn small { display: none; } body.phone .tbar .tbtop img { width: 26px; height: 26px; } }
/* a Powers card's effect: on the stage card when it is tapped (a phone's card is too short to hold it whole) */
body.phone .bld .bp-card p { display: none; }
body.phone .tbar .tbn b { white-space: normal; font-size: 13px; line-height: 1.05; }
body.phone .bld-right > * { min-width: 0; max-width: 100%; }
body.phone .bld-tut .tutcard { max-width: 100%; min-width: 0; }
body.phone .bld-tut .tutbtns button { flex: 1 1 auto; min-width: 0; padding: 4px 6px; font-size: 10px; }
/* the Advanced studio's tabs scroll sideways so its actions (and "◂ Simple") always stay on screen */
body.phone .bld[data-studio=adv] .bld-tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; margin: 0; scrollbar-width: none; }
body.phone .bld[data-studio=adv] .bld-tabs button { flex: none; font-size: 11px; padding: 4px 6px; }
body.phone .bld[data-studio=adv] .bld-dice { display: none; }
body.phone .bld-acts { flex: none; }
/* the Powers step's kit rows on a phone: the slots keep a finger's width and wrap; a slot's corner ✕ stays a corner */
body.phone .bp-wrow { flex-wrap: wrap; row-gap: 2px; }
body.phone .bp-wc .bk-slot { flex: 1 0 96px; min-height: 52px; justify-content: flex-start; }
body.phone .bld .bp-wc .bk-rm { position: static; margin-left: auto; min-width: var(--tt); min-height: var(--tt); font-size: 12px; padding: 0; }
body.phone .bld .bp-wc .bk-slot .bk-mods { position: static; }
body.phone .bld[data-studio=simple] .bld-main { grid-template-columns: clamp(190px, 27vw, 240px) minmax(0, 1fr) clamp(150px, 20vw, 200px); }
/* the stage's preview pins sit along its floor, under the power's card */
body.phone .bld-stpins { top: auto; bottom: 4px; right: 4px; }
body.phone .bld-stcard { top: 6px; max-width: 70%; }