/* Phones (portrait, under 641px wide). Loaded last; every rule sits behind a phone-only query, so desktop and tablets
   never change. Goals: fit one screen where it can (detail-on-select), 44px tap targets, nothing wider than the screen. */

/* TALENTS (build-studio.js) in portrait: the whole screen, a header that wraps instead of pushing the body sideways,
   fork trees full width, two to a screen with the next one peeking in (swipe up), perks three across with the full rule in the
   detail panel. */
@media (max-width:640px) and (orientation:portrait){
  :root #build-studio#build-studio.build-studio{width:100vw;height:100dvh;margin:0;padding:8px 8px max(8px,env(safe-area-inset-bottom));gap:6px;border:0;border-radius:0}
  :root #build-studio#build-studio .bs-head{flex-wrap:wrap;gap:6px}
  :root #build-studio#build-studio .bs-head .bs-title{flex:1 1 100%;min-width:0}
  :root #build-studio#build-studio .bs-title h2{font-size:20px}
  :root #build-studio#build-studio .bs-tabs{flex:1 1 100%}
  :root #build-studio#build-studio .bs-tab{flex:1;min-height:44px;padding:4px 6px;font-size:15px}
  :root #build-studio#build-studio .bs-head .slot-tabs.slot-tabs{flex:1 1 100%}
  :root #build-studio#build-studio .bs-head .slot-tabs.slot-tabs .slot-tab{flex:1 1 0;max-width:none;min-height:40px}
  :root #build-studio#build-studio .bs-head .slot-tabs.slot-tabs .slot-tab[aria-selected=true]{flex-grow:2}
  :root #build-studio#build-studio .bs-head .slot-tabs.slot-tabs .slot-rename{width:40px;min-height:40px}
  :root #build-studio#build-studio .bs-actions{flex:1 1 100%}
  :root #build-studio#build-studio .bs-actions .bb-btn{flex:1;min-height:44px}
  :root #build-studio#build-studio .bs-body{overflow:hidden}

  :root #build-studio#build-studio .bs-trees{grid-template-columns:minmax(0,1fr);grid-auto-rows:calc(46% - 4px);overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory}
  :root #build-studio#build-studio .bs-tree{scroll-snap-align:start}
  :root #build-studio#build-studio .bs-root-desc{display:none}
  :root #build-studio#build-studio .bs-node{min-height:44px;padding:3px 4px}
  :root #build-studio#build-studio .bs-node.is-wide{min-height:40px}
  :root #build-studio#build-studio .bs-node .bs-short{display:none}
  :root #build-studio#build-studio .bs-node b{font-size:12px}
  :root #build-studio#build-studio .bs-node.is-wide b{font-size:14px}
  :root #build-studio#build-studio .bs-slot{top:-9px;right:-6px;padding:1px 4px;font-size:10px}

  :root #build-studio#build-studio .bs-perk-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root #build-studio#build-studio .bs-perk-slots li{min-height:40px}
  :root #build-studio#build-studio .bs-perks{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(64px,auto);overflow-y:auto;overscroll-behavior:contain;padding-top:8px}
  :root #build-studio#build-studio .bs-perk{grid-template-columns:1fr;justify-items:center;row-gap:3px;padding:6px 3px;text-align:center}
  :root #build-studio#build-studio .bs-perk>.perk-card-art{width:36px;height:36px}
  :root #build-studio#build-studio .bs-perk :is(small,em,.bs-short){display:none}
  :root #build-studio#build-studio .bs-perk b{font-size:12px;overflow-wrap:normal;hyphens:auto}

  :root #build-studio#build-studio .bs-detail{max-height:104px;overflow-y:auto}
  :root #build-studio#build-studio .bs-detail p{font-size:13px;line-height:1.35}
}

/* Touch: a dialog's first focus lands on a stat chip; show its tip only when the chip is actually tapped. */
@media (hover:none){.stat-chip:focus:not(:hover)::after{display:none}}

/* Phones in landscape (the only phone orientation since Oct 29): keep the lobby and the match HUD clear of the notch and
   the home bar. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:520px){
  html.broadcast body #menu#menu .bc-room{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  html[data-art-style] body #hud #joystick{left:max(14px,env(safe-area-inset-left))}
  html[data-art-style] body #hud :is(#stats-overlay,.feed,.objective-wrap){margin-left:env(safe-area-inset-left)}
  html[data-art-style] body #hud .player-hud{left:max(12px,env(safe-area-inset-left))}
}

/* The one-time iPhone tip (landscape.js): Add to Home Screen plays without Safari's bars. */
.home-tip{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));z-index:2147483500;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:8px 8px 8px 14px;font:500 14px/1.3 var(--bb-font-body,'Bully Body',sans-serif);color:#eef1dc;background:#0b1216f2;border:2px solid #ceff24;border-radius:8px;box-shadow:3px 3px 0 #05080c}
.home-tip>b{font:13px/1 var(--bb-font-label,'Bully Label',sans-serif);letter-spacing:.06em;color:#ceff24;white-space:nowrap}
.home-tip svg{vertical-align:-2px;color:#75eced}
.home-tip button{flex:none;width:40px;height:40px;margin:0;padding:0;font:18px/1 sans-serif;color:#eef1dc;background:transparent;border:0}

/* Match results on a landscape phone (app.js results()): one screen, no scrolling. The outcome sits on the left (word,
   quip, score), and your line plus FIGHT AGAIN and the way back to the lobby sit on the right; the award cards stay one
   tap away under AWARDS & SCOREBOARD. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:520px){
  html body #modal.overlay:has(.result-first){padding:6px max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  html body #modal .modal-content:has(.result-first){width:min(840px,100%);padding:8px 14px 10px}
  html body #modal .result-first{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-auto-flow:row dense;column-gap:18px;align-items:center}
  html body #modal .result-first>:is(.eyebrow,.result-word,.result-quip,.result-score){grid-column:1}
  html body #modal .result-first>:not(.eyebrow,.result-word,.result-quip,.result-score){grid-column:2}
  html body #modal .result-first:is(.victory,.defeat):has(.result-word:not(.result-wave))::before{width:46%;height:100%}
  html body #modal .result-first>:is(.result-awards,.discord-link,.result-pose){display:none}
  html body #modal .result-first .result-word:not(.result-wave){width:168px;height:84px;margin:0 auto -10px}
  html body #modal .result-first .result-quip{font-size:18px}
  html body #modal .result-first .result-score{margin:4px 0 0;font-size:40px}
  html body #modal .result-first :is(.result-you,.mastery-gain){margin:2px 0;font-size:12px;line-height:1.35}
  html body #modal .result-first .result-mine{margin:2px 0;font-size:16px}
  html body #modal .result-first .result-actions{display:grid;grid-template-columns:1fr;gap:6px;margin:6px 0}
  html body #modal .result-first .result-actions #again{min-height:54px;padding:0 12px;font-size:24px}
  html body #modal .result-first :is(.result-actions #open-scoreboard,#change,#change-build){width:100%;min-height:44px;margin:0;padding:6px 10px;font-size:13px}
  html body #modal .result-first>:is(#change,#change-build){margin-top:2px}
}

/* The lobby on a landscape phone: one screen. The set (tonight's contestant) on the left; on the right the six channel
   presets, every hero as a portrait tile (the name shows on the set), then the knobs and GO LIVE. Channels open as a
   full-screen sheet (broadcast-lobby.js adds .bc-sheet; its ✕ comes back). */
@media (max-height:520px) and (orientation:landscape){
  html.broadcast body #menu#menu{overflow:hidden}
  html.broadcast body #menu#menu .bc-room{height:100dvh;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) min(44vw,360px);grid-template-rows:auto minmax(0,1fr) auto auto;gap:6px 8px;padding:6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  html.broadcast body #menu#menu .bc-tv{display:contents}
  html.broadcast body #menu#menu .bc-screen{grid-column:1;grid-row:1 / 5;justify-self:stretch;width:auto;height:auto;min-height:0}
  html.broadcast body #menu#menu .bc-panel{display:contents}
  html.broadcast body #menu#menu .bc-presets{grid-column:2;grid-row:1;justify-self:stretch;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0}
  html.broadcast body #menu#menu .bc-preset{min-height:44px}
  html.broadcast body #menu#menu .bc-card-row{grid-column:2;grid-row:2;justify-self:stretch;display:block;width:auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  html.broadcast body #menu#menu .bc-card-row .bc-teams{display:none}
  html.broadcast body #menu#menu .bc-strip #classes{width:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  html.broadcast body #menu#menu .bc-strip #classes .hero-grid{display:contents}
  html.broadcast body #menu#menu .bc-strip #classes .hero-slot{width:auto;min-width:0;max-width:none;margin:0;flex:none}
  html.broadcast body #menu#menu .bc-strip #classes .class-card{width:100%;min-height:56px;height:60px;padding:2px;overflow:hidden}
  html.broadcast body #menu#menu .bc-strip #classes .class-card>:not(canvas){display:none}
  html.broadcast body #menu#menu .bc-strip #classes .hero-slot>:not(.class-card){display:none}
  html.broadcast body #menu#menu .bc-strip #classes .class-card canvas{width:100%;height:100%;object-fit:contain}
  html.broadcast body #menu#menu .bc-knobs{grid-column:2;grid-row:3;align-self:end;justify-content:flex-start;gap:8px;margin:0;padding-right:96px}
  html.broadcast body #menu#menu .bc-knob{width:44px;height:44px}
  html.broadcast body #menu#menu .bc-room>.lobby-footer{grid-column:2;grid-row:4;justify-self:stretch;flex-wrap:wrap;justify-content:flex-start;gap:2px 8px;margin:0;padding:0 96px 0 2px;font-size:10px;line-height:1.3}
  html.broadcast body #menu#menu .bc-room>.lobby-footer :is(span,a){font-size:10px}
  html.broadcast body #menu#menu .bc-golive{right:max(10px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom))}
  html.broadcast body #menu#menu .bc-go{width:80px;height:80px}
  html.broadcast body #menu#menu .bc-room>.bc-channels{display:none}
  html.broadcast body #menu#menu .bc-room.bc-sheet>.bc-channels{display:block;position:fixed;inset:0;z-index:40;overflow-y:auto;overscroll-behavior:contain;padding:0 max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:#0c110d}
  html.broadcast body #menu#menu .bc-sheet .bc-channel-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding-right:104px;background:#0c110d}
  html.broadcast body #menu#menu .bc-sheet-x{margin-left:auto;width:48px;height:44px;padding:0;font:20px/1 sans-serif;color:#eef1dc;background:#1f2620;border:2px solid #4d5a3a;border-radius:6px}
  html.broadcast body #menu#menu .pve-entry{left:max(14px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));width:116px;min-height:44px;transform:scale(.85);transform-origin:0 100%}
  html.broadcast body #menu#menu .bc-logo{width:64px}
}
html.broadcast body #menu#menu .bc-sheet-x{display:none}
@media (max-height:520px) and (orientation:landscape){html.broadcast body #menu#menu .bc-sheet .bc-sheet-x{display:block}}

/* Landscape phones: tap targets in the channel sheets reach 44px, nothing runs off the right edge, the wardrobe tabs
   go 3 across, and the pause menu puts RETURN TO BATTLE and the settings first (the rules text follows). */
@media (max-height:520px) and (orientation:landscape){
  html[data-art-style] body #menu#menu .bc-room.bc-sheet .bc-channel :is(button,[role=tab],summary):not(.class-card,.bc-sheet-x){min-height:44px;height:auto}
  html.broadcast body #menu#menu .bc-sheet .bc-channel :is(.slot-rename,[data-zoom-step]){min-width:44px}
  html.broadcast body #menu#menu .bc-sheet .bc-channel input[type=range]{height:44px}
  html.broadcast body #menu#menu .bc-sheet [data-channel=play] .multiplayer-box{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.broadcast body #menu#menu .bc-sheet [data-channel=play] .multiplayer-box>*{min-width:0}
  html.broadcast body #menu#menu .bc-sheet [data-channel=play] :is(.multiplayer-box button,.bc-room-line button){white-space:normal;padding-inline:8px}
  html.broadcast body #menu#menu .bc-sheet [data-channel=play] :is(.bc-public-info,.bc-room-line){max-width:100%;min-width:0;box-sizing:border-box}
  html.broadcast body #menu#menu .bc-sheet [data-channel=play] .bc-room-line{flex-wrap:wrap}
  html[data-art-style] body #menu#menu #wardrobe-dialog .wardrobe-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  html[data-art-style] body #menu#menu #wardrobe-dialog .wardrobe-tabs [role=tab]{min-height:40px;font-size:13px}
  html body #modal .modal-content:has(#resume){display:flex;flex-direction:column;padding:10px 14px}
  html body #modal .modal-content:has(#resume)>:is(.eyebrow,h2){order:-3;margin:0}
  html body #modal .modal-content:has(#resume)>:is(#resume,#leave){order:-2;min-height:48px;margin:6px 0 0}
  html body #modal .modal-content:has(#resume)>:not(.eyebrow,h2,#resume,#leave,details){order:6}
  html body #modal .modal-content:has(#resume)>p{font-size:11.5px;line-height:1.45}
}

/* TALENTS on a landscape phone: two fork trees side by side at full height (swipe up for the other two; the next pair
   peeks in), so every node is a real thumb target; 40px header buttons. Perks keep their one-screen grid. */
@media (max-height:520px) and (orientation:landscape){
  :root #build-studio#build-studio .bs-tab{min-height:40px}
  :root #build-studio#build-studio .bs-actions .bb-btn{min-height:40px}
  :root #build-studio#build-studio .bs-head .slot-tabs.slot-tabs .slot-tab{min-height:36px}
  :root #build-studio#build-studio .bs-head .slot-tabs.slot-tabs .slot-rename{width:40px;min-height:36px}
  :root #build-studio#build-studio .bs-body{overflow:hidden}
  :root #build-studio#build-studio .bs-trees{grid-auto-rows:calc(100% - 18px);overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory}
  :root #build-studio#build-studio .bs-tree{scroll-snap-align:start}
  :root #build-studio#build-studio .bs-node{min-height:40px}
  :root #build-studio#build-studio .bs-node.is-wide{min-height:38px}
  :root #build-studio#build-studio .bs-node b,:root #build-studio#build-studio .bs-node.is-wide b{font-size:12px}
  :root #build-studio#build-studio .bs-root{margin:4px 6px 2px}
  :root #build-studio#build-studio .bs-perk{min-height:40px}
}
@media (max-height:520px) and (orientation:landscape) and (max-width:820px){
  :root #build-studio#build-studio .bs-head{gap:6px}
  :root #build-studio#build-studio .bs-actions .bb-btn{padding:4px 8px}
  :root #build-studio#build-studio .bs-tab{padding:3px 8px}
}

/* Landscape phones: SIGN IN (client/account.css, added by the site build) moves from over the channel presets into
   the set's top bar, where the CH 01 bug was; the wardrobe tabs become one scrolling row so the item cards keep
   their height. */
@media (max-height:520px) and (orientation:landscape){
  html body .account-signin{top:max(10px,env(safe-area-inset-top));right:calc(min(44vw,360px) + 26px + env(safe-area-inset-right));left:auto;transform:none;min-height:40px;padding:0 12px;font-size:14px}
  html.broadcast body #menu#menu .bc-osd{display:none}
  html[data-art-style] body #menu#menu #wardrobe-dialog .wardrobe-tabs{display:flex;grid-template-columns:none;gap:4px;overflow-x:auto;overscroll-behavior:contain;scrollbar-width:none}
  html[data-art-style] body #menu#menu #wardrobe-dialog .wardrobe-tabs [role=tab]{flex:none;min-height:40px;padding:0 10px;font-size:12px;white-space:nowrap}
}
@media (max-height:520px) and (orientation:landscape){
  html[data-art-style] body #menu#menu #wardrobe-dialog .wardrobe-grid{display:grid;grid-auto-flow:column;grid-auto-columns:104px;grid-template-columns:none;grid-template-rows:1fr;gap:6px;min-height:112px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain}
  html[data-art-style] body #menu#menu #wardrobe-dialog .wardrobe-item{width:104px;height:108px;min-height:0}
  html[data-art-style] body #menu#menu #wardrobe-dialog .wardrobe-detail{font-size:12px}
  html[data-art-style] body #menu#menu #wardrobe-dialog .wardrobe-panel{flex:none;min-height:116px;overflow:hidden}
  html[data-art-style] body #menu#menu #wardrobe-dialog .wardrobe-browser{min-height:0;overflow-y:auto;overscroll-behavior:contain}
  html[data-art-style] body #menu#menu #wardrobe-dialog>header{padding-top:4px;padding-bottom:4px}
  html[data-art-style] body #menu#menu #wardrobe-dialog>header .section-kicker{display:none}
  html[data-art-style] body #menu#menu #wardrobe-dialog>header h2{font-size:22px;line-height:1}
  html[data-art-style] body #menu#menu #wardrobe-dialog>header [data-close-dialog]{width:44px;height:40px}
  html[data-art-style] body #menu#menu #wardrobe-dialog .wardrobe-actions p{display:none}
  html[data-art-style] body #menu#menu #wardrobe-dialog .wardrobe-tabs{flex:none}
  html[data-art-style] body #menu#menu #wardrobe-dialog .wardrobe-stage{min-height:96px}
  html[data-art-style] body #menu#menu #wardrobe-dialog .wardrobe-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-height:520px) and (orientation:landscape) and (max-width:820px){html body .account-signin{right:calc(min(44vw,360px) + 18px + env(safe-area-inset-right));padding:0 9px;font-size:12px}html.broadcast body #menu#menu .bc-bug{transform:scale(.85);transform-origin:0 0}}

/* Touch screens: no keyboard hints (· TAB, the C on STATS, TAB / ESC on the scoreboard). */
@media (hover:none) and (pointer:coarse){.key-hint,#stats-toggle kbd{display:none}}

/* Match start on a slow link (app.js start()): a status chip over everything until the map and heroes are in. */
#match-loading{position:fixed;left:50%;top:50%;z-index:2147483400;transform:translate(-50%,-50%);padding:14px 22px;font:400 24px/1 var(--bb-font-display,'Bully Display',sans-serif);letter-spacing:.04em;color:#ffcf3a;background:#0b1216f2;border:3px solid #ceff24;border-radius:8px;box-shadow:4px 5px 0 #05080c;pointer-events:none;animation:match-loading 1s steps(2) infinite}
@keyframes match-loading{50%{border-color:#ff3dd6}}
@media (prefers-reduced-motion:reduce){#match-loading{animation:none}}