/* 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
                 Hearth, 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 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; }
/* (lane PH3) no double-tap zoom anywhere, so no tap ever waits to see if a second one follows (the 300 ms delay); the
   page itself never pans or rubber-bands (iOS Safari): only the lists and panels that scroll do */
body.touch, body.touch button, body.touch [data-act], body.touch .slot, body.touch .dcard, body.touch .perk { touch-action: manipulation; }
html:has(body.touch), body.touch { overscroll-behavior: none; }
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) */
  /* (body.touch: a desktop browser that reports hover: none, e.g. headless Chrome, keeps its hover ledger) */
  body.touch .hgold:hover:not(.open) .bledger, body.touch .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: 11px; 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: 11px; 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 Hearth): 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 Hearth 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) */
/* (lane PH3) THE TEXT FLOOR: no text under 11 CSS px on a phone (a 9-10 px pixel font is unreadable at arm's length on a
   phone held sideways). Every rule of style.css / builder.css that sets a smaller size, raised to 11 px here; the
   phone rules below (which come later) keep their own sizes, all 11 px or more. The shots layout check fails a phone
   screen with smaller text (tools/shots.mjs: tiny). */
body.phone .slot .uses { font-size: 11px; }
body.phone .bnext.stack .bnl { font-size: 11px; }
body.phone .bledger .blh { font-size: 11px; }
body.phone .bledger .bll.sec { font-size: 11px; }
body.phone .bwmore { font-size: 11px; }
body.phone .bwand .seltag { font-size: 11px; }
body.phone .bwand .newtag, body.phone .slot .newtag { font-size: 11px; }
body.phone .bench .bhud { font-size: 11px; }
body.phone .bench .bghost { font-size: 11px; }
body.phone .bwand .pvs em { font-size: 11px; }
body.phone .bwand .pvs .ao { font-size: 11px; }
body.phone .bwand .pvpay { font-size: 11px; }
body.phone .bwand .pvno small { font-size: 11px; }
body.phone .bwand .pvt { font-size: 11px; }
body.phone .trash small { font-size: 11px; }
body.phone .shopitem.wand .cmp { font-size: 11px; }
body.phone .dstep { font-size: 11px; }
body.phone .dcard .dkey { font-size: 11px; }
body.phone .dcard .dtag { font-size: 11px; }
body.phone .dcard .dt { font-size: 11px; }
body.phone .dcard .ds { font-size: 11px; }
body.phone .dcard .dsyn { font-size: 11px; }
body.phone .dcard .dhint { font-size: 11px; }
body.phone .rivals .rl { font-size: 11px; }
body.phone .bpcard .bps { font-size: 11px; }
body.phone .bpcard .seltag { font-size: 11px; }
body.phone .myperks .mpl { font-size: 11px; }
body.phone .mperk small { font-size: 11px; }
body.phone .perk.taken::after { font-size: 11px; }
body.phone .tooltip th { font-size: 11px; }
body.phone .dcard .de { font-size: 11px; }
body.phone .perk span { font-size: 11px; }
body.phone .award .at { font-size: 11px; }
body.phone .timeline .tr .sdt { font-size: 11px; }
body.phone .codexgrid .ce.locked small { font-size: 11px; }
body.phone .tutstep { font-size: 11px; }
body.phone .et { font-size: 11px; }
body.phone .wandcard .wc-tag { font-size: 11px; }
body.phone .wandcard .wc-pl { font-size: 11px; }
body.phone .wandcard .wc-prev .cast small { font-size: 11px; }
body.phone .wandcard .wc-mini .num { font-size: 11px; }
body.phone .codexgrid .ce small.dis { font-size: 11px; }
body.phone .perk .pnew { font-size: 11px; }
body.phone .nucell .nut { font-size: 11px; }
body.phone .abar .abhp .abt { font-size: 11px; }
body.phone .abc { font-size: 11px; }
body.phone .aslot .asn { font-size: 11px; }
body.phone .aslot .asp i { font-size: 11px; }
body.phone .aslot .akn { font-size: 11px; }
body.phone .abeh b { font-size: 11px; }
body.phone .acard .akey { font-size: 11px; }
body.phone .acard .akind { font-size: 11px; }
body.phone .aswap kbd { font-size: 11px; }
body.phone .aspec .ahz { font-size: 11px; }
body.phone .lunb { font-size: 11px; }
body.phone .pshent small { font-size: 11px; }
body.phone #bwandhint kbd { font-size: 11px; }
body.phone .bld kbd { font-size: 11px; }
body.phone .bld button.small { font-size: 11px; }
body.phone .bld-comm small { font-size: 11px; }
body.phone .bld-cvinfo span:first-child { font-size: 11px; }
body.phone .bld .bld-tool kbd { font-size: 11px; }
body.phone .bld-stab th { font-size: 11px; }
body.phone .bld .bld-play { font-size: 11px; }
body.phone .bld-fxc em { font-size: 11px; }
body.phone .bld-pvlbl { font-size: 11px; }
body.phone .bld .bld-pins button { font-size: 11px; }
body.phone .bld-behpin { font-size: 11px; }
body.phone .bld-reason button, body.phone .bld-qh button { font-size: 11px; }
body.phone .bld-tplcard small { font-size: 11px; }
body.phone .bld-tok small { font-size: 11px; }
body.phone .bld .bk-x { font-size: 11px; }
body.phone .bk-sn { font-size: 11px; }
body.phone .bld .bk-rm { font-size: 11px; }
body.phone .bk-hl { font-size: 11px; }
body.phone .bk-chip u { font-size: 11px; }
body.phone .bk-rl small { font-size: 11px; }
body.phone .bk-cn small { font-size: 11px; }
body.phone .bld .bld-studio { font-size: 11px; }
body.phone .bld .bld-stpins button { font-size: 11px; }
body.phone .bld-stcard small { font-size: 11px; }
body.phone .bs-tabhint { font-size: 11px; }
body.phone .bs-card b { font-size: 11px; }
body.phone .bs-slh small { font-size: 11px; }
body.phone .bld h4 .bs-dice { font-size: 11px; }
body.phone .bld .bp-wc .bk-rm { font-size: 11px; }
body.phone .bld .bp-wc > .bp-wrow > .bk-x { font-size: 11px; }
body.phone .bp-kinds button em { font-size: 11px; }
body.phone .bp-card small { font-size: 11px; }
body.phone .bp-card em { font-size: 11px; }
body.phone .bp-n { font-size: 11px; }
body.phone .bp-roll small { font-size: 11px; }
body.phone .bp-lkrow > span { font-size: 11px; }
body.phone .bld .bp-lk { font-size: 11px; }
body.phone .bp-lk em { font-size: 11px; }
body.phone .bld-bandends { font-size: 11px; }
/* (lane PH4, verdict 12 #9) the difficulty meter on a phone: the basis line at the 11 px floor, and the tier's range
   ("about 20-25 s") wraps under its pips in the narrow right column instead of being cut by an ellipsis at 667x375 */
body.phone .bld-basis { font-size: 11px; }
body.phone .bld-tier { flex-wrap: wrap; row-gap: 2px; }
body.phone .bld-tier span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; min-width: 0; margin-left: 3px; }
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: 32px; letter-spacing: 3px; }
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); max-height: calc(100dvh - 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 HEARTH: 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 .hearth { 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 .hearth 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); max-height: calc(100dvh - 70px); overflow-y: auto; left: auto; right: 0; transform: none; }
body.phone .breadys { font-size: 11px; }
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: 3px 6px 2px; 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: 11px; }
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: 11px; }
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: 11px; }
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: 11px; }
body.phone .dcard .dsyn, body.phone .dcard .dhint { font-size: 11px; }
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: 11px; }
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; height: 100dvh; 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: 11px; }
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 .wfg-hdr { font-size: 11px; letter-spacing: 0; padding: 4px 6px; }
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: 960px) {   /* (lane FORGE-UI: was 760: the Describe button joined the top bar, and 844 / 915 / 932 px phones need the room) */
  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: 11px; }
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: 11px; }
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: 11px; }
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: 11px; 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: 11px; 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: 11px; 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: 11px; 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: 11px; padding: 4px 5px; letter-spacing: 0; }
body.phone .bld-left button { font-size: 11px; 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; }
/* the boss's name on a phone: a fixed 100 px slot holds every generated name (up to 12 letters, GRINDLETOOTH /
   GLOOMERSHARD) on one line and "THE HOLLOWWORM" on two; a longer typed name wraps between letters, two lines at most.
   (Lane ART2 broke every word anywhere, lane SPORE then kept whole words, so a 9-letter BRUNGNASH overflowed its 75 px
   at 844x390 and failed gate 01ac16b. The step tabs give up their letter-spacing for the room.) */
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; word-break: normal; }
body.phone .bld-name { min-width: 100px; max-width: 100px; flex: none; }
body.phone .bld .bld-steps button { letter-spacing: 0.5px; padding: 4px 6px 4px 4px; gap: 4px; }
body.phone .bld-top { gap: 3px; }
body.phone .bld-acts button { padding: 4px 5px; }
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: 11px; 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: 11px; }
  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 .hearth 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: 11px; }
/* 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 animation tabs (All / Walk / Attack / Dig / Die) have their own column at the stage's right edge (lane
   PH3, verdict 11: on the stage they sat over the boss): the canvas ends left of it, so the boss is never under a tab.
   A side column, not a band under it: the stage is wide and short on a phone, and the boss's size follows its height */
body.phone .bld-stagewrap { --pinw: 112px; }
body.phone .bld-stage { width: calc(100% - var(--pinw)); }
body.phone .bld-stpins { top: 50%; bottom: auto; right: 2px; left: auto; transform: translateY(-50%); display: grid; grid-template-columns: repeat(2, 52px); gap: 3px; }
body.phone .bld .bld-stpins button { width: 52px; min-width: 52px; height: 44px; min-height: 44px; padding: 0; font-size: 11px; letter-spacing: 0; }
body.phone .bld .bld-stpins button[data-pin=cycle] { grid-column: 1 / -1; width: auto; }
/* the power's card sits at the stage's top RIGHT (the Powers demo stands the boss at the left third, the dummy wizard
   further right), so it does not sit on the boss either */
body.phone .bld-stcard { top: 6px; left: auto; right: calc(var(--pinw) + 4px); max-width: calc((100% - var(--pinw)) * 0.56); }
/* the power's card replaces the stage's name line (it showed through the card) */
body.phone .bld-stagewrap:has(.bld-stcard:not(.hidden)) .bld-stlbl { visibility: hidden; }

/* ================================================================== pass 4 (lane PH3: verdict 11's phone notes) */
/* the selected wand's cast cards: whole cards a page at a time (3 on a phone, 2 on a narrow one), snapped, never one cut
   at the edge; the page line under them says which casts show and that a swipe shows the rest (public/phone-ui.js) */
.pvpage { display: none; }
/* the selected wand fits the wand list whole (it was taller than the list at 667 x 375): stats beside the bench, the
   slots under them across the whole row (no slot wraps to a second line), the burst line, then the cast cards */
body.phone .bwand .wtop { display: grid; grid-template-columns: minmax(0, 1fr) 38%; grid-template-areas: 'st be' 'sl be' 'ph ph'; column-gap: 8px; row-gap: 2px; align-items: start; }
@media (max-width: 760px) { body.phone .bwand .wtop { grid-template-columns: minmax(0, 1fr) 36%; grid-template-areas: 'st be' 'sl sl' 'ph ph'; } }
body.phone .bwand .wtl { display: contents; }
body.phone .bwand .wtop .wstats { grid-area: st; margin: 0; }
body.phone .bwand .wtop .wslots { grid-area: sl; }
body.phone .bwand .wtop .pvhead { grid-area: ph; }
body.phone .bwand .wtop .bench { grid-area: be; }
body.phone .bwand .pvsum { row-gap: 0; line-height: 1.2; }
body.phone .bwand .pvcard { padding: 2px 5px 3px; line-height: 1.1; }
body.phone .bwand .pvcard .pvi { margin: 1px 0; }
body.phone .bwand .pvi small { font-size: 11px; }   /* a cast that fires nothing says so at the 11 px floor (a bare <small> was 9.2 px: gate 5166edb) */
body.phone .bwand .pvhead { margin-top: 1px; }
body.phone .bwand .pvsum { margin-bottom: 2px; }
body.phone .bwand .pvcasts { display: flex; overflow-x: auto; gap: 4px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
body.phone .bwand .pvcasts::-webkit-scrollbar { display: none; }
body.phone .bwand .pvcard { flex: 0 0 calc((100% - 8px) / 3); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
body.phone .bwand .pvpage:not(:empty) { display: block; margin-top: 1px; font-size: 11px; line-height: 1.1; color: var(--gold); text-align: right; }
@media (max-width: 760px) {
  body.phone .bwand .pvcard { flex-basis: calc((100% - 4px) / 2); }
  /* a narrow phone: a cast card is its damage, mana, spells and the wait (the delay sums behind the wait are on a
     bigger screen), so the selected wand fits the wand list whole */
  body.phone .bwand .pvcard .pvt { display: none; }
  /* the bench's two readouts on two lines (side by side they overlapped on a narrow bench) */
  body.phone .bench .bhud { flex-direction: column; gap: 0; line-height: 1.1; }
  body.phone .bench .bhud .br { text-align: left; }
}
/* a phone's draft: one card per row (icon left, every line beside it), so each card is shorter than the column and
   scrolls into view whole (side by side, a phone's narrow cards ran 6-7 lines and were cut by the column's foot) */
body.phone .drow, body.phone .drow.n4 { grid-template-columns: minmax(0, 1fr); gap: 4px; }
body.phone .dcard { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 7px; row-gap: 1px; align-items: start; justify-items: start; text-align: left; padding: 5px 7px 5px 5px; }
body.phone .dcard > img { grid-row: 1 / span 4; grid-column: 1; margin-top: 12px; width: 34px; height: 34px; }
body.phone .dcard > :not(img):not(.dkey):not(.dtag) { grid-column: 2; }
body.phone .dcard .dkey { left: 4px; top: 2px; font-size: 11px; }
body.phone .dcard .dtag { font-size: 11px; right: 3px; top: 3px; }
body.phone .dcard .dn { font-size: 13px; max-width: 100%; }
body.phone .dcard .dsyn, body.phone .dcard .dhint { margin-top: 2px; text-align: left; padding: 2px 3px 0; }
body.phone .bscroll { scroll-snap-type: y proximity; }
body.phone #draft .drow > .dcard { scroll-snap-align: start; scroll-margin-top: 2px; }
/* a selection on (a spell or a draft card picked up): the wand headers say "tap: here" on one line (the wand's Empty /
   Trash buttons step aside while a spell is held: a tap on the header is the move) */
body.phone #build.tselon .bwand .whead .seltag, body.phone #build.tselon .bwand .whead button { display: none; }
/* (lane PH5, gate 1475a76 at 667x375: with the selection bar up the draft column is ~117 px, and a Wildcard card with
   a two-line hint ran 130 px: taller than its list, never whole) while a spell is held the draft cards are their name,
   kind and what they do in your wands; the effect + stats lines come back with the bar gone (the bar's ? and a long
   press have them meanwhile) */
body.phone #build.tselon #draft .dcard .de, body.phone #build.tselon #draft .dcard .ds { display: none; }
/* (lane PHFIX, deploy gate 5bd54c7 at 915x412: with the selection bar up the column is 168 px, and a perk card with a long
   description ran 180-219 px: taller than its list, never whole) the same for the perk cards while a spell is held: the
   icon, the name and the New-discovery line; the description, synergy and stack lines come back with the bar gone (a long
   press on the card shows them as a sheet) */
body.phone #build.tselon #perks .perk > span:not(.pnew), body.phone #build.tselon #perks .perk .psyn { display: none; }
/* a draft card's Wildcard / New-discovery tag is its symbol in the corner (the long-press sheet says it in words), so the
   name keeps the card's width */
body.phone .dcard .dtag { font-size: 0; padding: 1px 4px; line-height: 1; }
body.phone .dcard .dtag::first-letter { font-size: 12px; }
/* the same for a perk card's New-discovery line: its ✦ in the card's corner (the long-press sheet says it in words). Three
   perk cards share a phone's column at 98 px each, and the two-line "✦ New discovery" made a long one 259 px in a 256 px
   list at 844x390 (gate 5166edb) */
body.phone .perk { position: relative; }
body.phone .perk .pnew { position: absolute; top: 2px; right: 3px; font-size: 0; line-height: 1; margin: 0; }
body.phone .perk .pnew::first-letter { font-size: 12px; }
body.phone .dcard .dtag ~ .dn { padding-right: 18px; }
body.phone .codexgrid .ce small { font-size: 11px; }
/* the draft's pick steps and the Advanced studio's set picks: the narrower body font at the 11 px floor (the pixel title
   font ran "Pick 1 of 3" past its box) */
body.phone .dstep, body.phone .bld[data-studio=adv] .bld-setpick { font-family: var(--font); font-size: 12px; letter-spacing: 0; }
/* a draft card held over a wand (the ghost): its one line stands in for the burst line (it says the change), so the
   selected wand stays the height of the wand list */
body.phone .bwand .pvhead:has(.pvghost) .pvsum, body.phone .bwand .pvghost .pvgtail { display: none; }
body.phone .bwand:has(.pvghost) .pvpage { display: none !important; }
/* (the bench's own ghost line repeats it, and on a phone's narrow bench it wrapped up over the bench's top edge) */
body.phone .bench .bghost { display: none; }
/* the Powers cards on a phone: icon left of the name, the kind and the cost under it, so the whole card (its cost too)
   fits the strip; a tapped card says "tap again" in its cost line (no banner over the card's last line) */
body.phone .bld .bp-card { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 5px; row-gap: 1px; align-content: start; justify-items: start; text-align: left; padding: 4px 5px 3px; }
body.phone .bld .bp-card > img, body.phone .bld .bp-card > .bk-sw { grid-column: 1; grid-row: 1; width: 26px; height: 26px; margin: 0; }
body.phone .bld .bp-card > b { grid-column: 2; grid-row: 1; align-self: center; font-size: 11px; letter-spacing: 0; overflow-wrap: anywhere; }
body.phone .bld .bp-card > small, body.phone .bld .bp-card > em { grid-column: 1 / -1; letter-spacing: 0; margin: 0; }
body.touch .bld .bp-card > .bp-n { display: none; }   /* (the 1-3 keys: no keyboard) */
@media (max-width: 760px) {
  /* a narrow phone: the card is its words (the icon is on the stage card when tapped) */
  body.phone .bld .bp-card > img, body.phone .bld .bp-card > .bk-sw { display: none; }
  body.phone .bld .bp-card > b { grid-column: 1 / -1; min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-family: var(--font); font-size: 12px; line-height: 1.1; }
  body.phone .bld .bp-card > small, body.phone .bld .bp-card > em { font-family: var(--font); text-transform: none; font-size: 11px; line-height: 1.15; }
  /* the stage card: name + kind (a long press on the card has its whole text), so it stays off the boss */
  body.phone .bld-stcard span { display: none; }
  body.phone .bld-stcard b { font-family: var(--font); font-size: 13px; letter-spacing: 0; overflow-wrap: anywhere; }
  /* the strip's "into wand / points left" line: the kit list's gold slot and its "N left" say both; the cards get its room */
  body.phone .bld .bp-where { display: none; }
}
body.touch .bld .bp-card.armed::after { content: none; }
body.touch .bld .bp-card.armed > em { color: #1a1206; background: var(--gold); padding: 0 4px; }
body.touch .bld .bp-card.armed > em::before { content: 'Tap again · '; }
/* the toast's sub-line keeps the phone text floor even when the placer shrinks the toast (gate e84f422: 10.2 px at 844x390) */
body.phone .toast .rtoastd { font-size: max(11px, 0.85em); }
/* lane PH5 (verdict 13: "the third draft card is cut by READY at 844x390"): the draft column's foot never shows part of a
   card. public/phone-ui.js lays this band over the column from the top of the card its foot would cut; it names what is
   below and a tap scrolls it up. (Hidden off a phone, and whenever no card is cut.) */
.dmore { display: none; }
body.phone .bright { position: relative; }
body.phone .dmore:not(.hidden) { display: block; position: absolute; left: 0; right: 0; z-index: 3; box-sizing: border-box; padding: 2px 6px 0;
  background: #120f14; border-top: 1px dashed #6a5420; overflow: hidden; cursor: pointer; }
body.phone .dmore .dmrow { height: 18px; font-size: 12px; line-height: 18px; color: var(--gold); white-space: nowrap; overflow: hidden; }
body.phone .dmore .dmrow + .dmrow { color: var(--dim, #9a8d7a); }
body.phone .dmore.thin { padding: 0; }

/* Wandfall (judge full-verdict 1 #2): the Install chip (public/phone.css, absolute at the bottom) is taller than the
   title grid's last row, so "Next up" above it gives up the difference while the chip is there */
body.phone #title:has(> .installhint) .titlenext { margin-bottom: 18px; }