/* Phone layout for Match Lab (Replay theater, Card library, Decks, Player vs bot, Live Training).
   Loaded after the other stylesheets; only narrow screens are affected. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:600px){
 body{font-size:14px}
 main{padding-inline:8px}
 /* Header: one compact row, tabs scroll sideways instead of wrapping onto two lines. */
 .mast{padding:6px 8px;gap:6px;flex-wrap:nowrap}
 .mast .brand,.mast .offline{display:none}
 .mast nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px;min-width:0;-webkit-overflow-scrolling:touch}
 .mast nav::-webkit-scrollbar{display:none}
 .mast nav button{white-space:nowrap;padding:6px 9px;font-size:13px;flex:none}
 .training-tab-state{display:none}
 /* Page titles and pickers. */
 .titlebar{padding:8px 0 6px}
 .titlebar h1{font-size:21px;margin:0}
 .eyebrow{font-size:10px}
 .pickers{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
 .pickers label{min-width:0;font-size:11px}
 .pickers select,.pickers input{max-width:100%!important;width:100%;font-size:13px;padding:6px 8px}
 /* Replay theater */
 .arenahead{padding:6px 8px}
 .table-options{gap:6px 10px;padding:6px 8px;font-size:12px}
 .table-options button,.table-options select{font-size:12px;padding:4px 8px}
 aside{display:flex!important;flex-direction:column;gap:8px}
 .monitor,.feed,#study{padding:10px}
 #current{font-size:13px}
 #moments{max-height:240px;overflow-y:auto}
 .transport{padding:6px 8px}
 .tracks{gap:6px;font-size:12px}
 .buttons{display:flex!important;flex-wrap:wrap;gap:5px}
 .buttons .spacer{display:none}
 .buttons button,.buttons select{padding:7px 6px;font-size:13px;min-width:0}
 .buttons #prev,.buttons #next{flex:0 0 42px}
 .buttons #play,.buttons #speed{flex:1 1 30%}
 .buttons #attack,.buttons #ending,.buttons #result{flex:1 1 28%}
 /* Card library */
 #libFilters,.ws-filters{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}
 .ws-filters label{max-width:none!important;width:auto!important}
 .ws-filters select,.ws-filters input{max-width:none!important;width:100%;font-size:13px;padding:5px 6px}
 .ws-filters button{grid-column:span 1}
 #gallery{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px}
 .gallerycard{padding:4px}
 .gallerycard b,.gallerycard strong{font-size:12px}
 .gallerycard small,.gallerycard span{font-size:10px}
 /* Decks: Oshi shelf and deck lists */
 .oshi-shelf{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 .oshi-entry{padding:4px;gap:2px}
 .oshi-entry strong,.oshi-entry b{font-size:12px;line-height:1.2}
 .oshi-entry span{font-size:10px}
 .ws-deck-list{gap:6px}
 .deck-entry{padding:6px;gap:8px}
 .deck-entry img{width:42px}
 .deck-entry em{display:none}
 .deck-entry strong{font-size:14px}
 /* Deck editor: compact preview, four cards per row, readable quantity controls. */
 .ws-editor-meta{padding:8px}
 .ws-panel{padding:8px}
 .build-layout h2{font-size:16px}
 .preview-pane{max-height:none}
 .preview-pane img{width:84px!important;max-height:none}
 .preview-pane p{font-size:12px}
 .ws-grid,.vs-seat .ws-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px}
 #buildCards>.ws-zone>.ws-grid{max-height:none;overflow:visible}
 .ws-face{padding:2px}
 .ws-face b{font-size:13px;padding:0 4px}
 .ws-face span,.ws-pick span{font-size:10px;padding:2px 1px}
 .quantity{gap:0;padding:1px}
 .quantity small{display:none}
 .quantity button{flex:1;padding:4px 0;min-height:30px;font-size:15px}
 .picker-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px}
 .quick-add{right:2px;bottom:18px;min-width:28px;min-height:28px}
 #pickTypes button{padding:6px 9px}
 .ws-lower{display:flex;flex-direction:column}
 .ws-lower .ws-tile{max-width:none}
 /* Player vs bot */
 .practice-pickers{grid-template-columns:1fr 1fr!important;gap:6px}
 .p-controls{padding:8px}
 /* Live Training */
 #trainingPage .titlebar a{display:none}
 .tp-card{padding:10px}
}
@media (max-width:380px){
 .ws-grid,.vs-seat .ws-grid,.picker-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .oshi-shelf{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Player vs bot on phones: the whole table fits on one screen (board-fit.js shrinks it to the room above
   the bottom sheet). The opponent's stage is one compact row; decisions sit in a bottom sheet. */
.p-sheet-handle{display:none}
@media (max-width:600px){
 #playPage.fit-table{--sheet-peek:clamp(150px,26dvh,220px)}
 #playPage.fit-table .titlebar{padding:2px 0 3px;align-items:center}
 #playPage.fit-table .titlebar h1{font-size:15px;line-height:18px}
 #playPage.fit-table .titlebar p{font-size:11px;margin:0}
 #playPage.fit-table .p-layout{display:block;padding-bottom:calc(var(--sheet-peek) + 8px)}
 #playPage.fit-table .p-mat{padding:2px}
 #playPage.fit-table .p-zone-label,#playPage.fit-table .p-zone>small:first-child{font-size:7px;line-height:9px}
 /* Opponent: one row, front zones on the left, back stage on the right; details hidden */
 #playPage.fit-table .bot-side{display:grid;grid-template-columns:3fr 5fr;column-gap:3px;row-gap:0;align-items:end}
 #playPage.fit-table .bot-side>header{grid-column:1/-1;grid-row:1;padding:1px 2px;flex-wrap:nowrap}
 #playPage.fit-table .bot-side>header .p-bot-name,#playPage.fit-table .bot-side>header>span:not(.p-supply-counts){display:none}
 #playPage.fit-table .bot-side>.p-hidden-hand{grid-column:2;grid-row:1;justify-self:end;align-self:center;margin:0 118px 0 0}
 #playPage.fit-table .bot-side .p-hidden-hand span{width:9px;height:13px;font-size:8px}
 #playPage.fit-table .bot-side .p-hidden-hand b{font-size:9px}
 #playPage.fit-table .bot-side>.p-front{grid-column:1;grid-row:2;gap:2px;grid-template-columns:repeat(3,minmax(0,1fr))}
 #playPage.fit-table .bot-side>.p-back{grid-column:2;grid-row:2;padding:1px}
 #playPage.fit-table .bot-side .p-back .p-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;min-height:0}
 #playPage.fit-table .bot-side .p-zone{padding:1px;min-height:0}
 #playPage.fit-table .bot-side .p-member>.p-card,#playPage.fit-table .bot-side .p-attachments,#playPage.fit-table .bot-side .p-oshi,
 #playPage.fit-table .bot-side .p-empty,#playPage.fit-table .bot-side .p-front .p-empty{width:min(100%,calc(var(--fit-unit) * .8));max-width:100%;margin-inline:auto}
 #playPage.fit-table .bot-side .p-empty{height:auto;aspect-ratio:63/88;min-height:0}
 #playPage.fit-table .bot-side .p-member small,#playPage.fit-table .bot-side .p-resources,#playPage.fit-table .bot-side .p-oshi-info,
 #playPage.fit-table .bot-side .p-zone-label,#playPage.fit-table .bot-side .p-empty *{display:none}
 #playPage.fit-table .bot-side .p-health{font-size:7px;line-height:9px}
 #playPage.fit-table .bot-side .p-support{display:block}
 #playPage.fit-table .p-side header .p-resource-stack{display:none}
 #playPage.fit-table .p-side header{padding:1px 2px;column-gap:6px}
 #playPage.fit-table .p-counter .p-counter-value{font-size:15px}
 #playPage.fit-table .p-counter .p-counter-label{font-size:8px;line-height:9px}
 #playPage.fit-table .p-side header button{font-size:9px;padding:2px 5px}
 #playPage.fit-table .p-divider{font-size:8px;line-height:10px;margin:1px 0}
 /* Your side: smaller labels; empty back slots shrink to the card size */
 #playPage.fit-table .human-side .p-support{display:grid;grid-template-columns:minmax(0,var(--fit-unit)) auto;align-items:center;justify-content:center;gap:4px}
 #playPage.fit-table .human-side .p-support>.p-zone-label{grid-column:1/-1}
 #playPage.fit-table .human-side .p-oshi-info{gap:2px;align-items:flex-start}
 #playPage.fit-table .human-side .p-counter-power{gap:3px}
 #playPage.fit-table .human-side .p-counter-power .p-resource-stack{display:none}
 #playPage.fit-table .human-side .p-oshi-skills{font-size:9px;padding:2px 5px;min-height:0}
 #playPage.fit-table .human-side .p-resources{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 #playPage.fit-table .human-side .p-collab .p-empty,#playPage.fit-table .human-side .p-center .p-empty{width:min(100%,var(--fit-unit));height:auto;aspect-ratio:63/88;min-height:0;font-size:8px}
 #playPage.fit-table .human-side .p-member small{font-size:8px;line-height:9px}
 #playPage.fit-table .human-side .p-resources{font-size:7px;line-height:8px}
 #playPage.fit-table .human-side .p-health{font-size:8px;line-height:9px}
 #playPage.fit-table .p-back .p-slots{min-height:0}
 #playPage.fit-table .human-side .p-empty{height:auto;aspect-ratio:63/88;min-height:0}
 #playPage.fit-table .p-hand>b{font-size:8px;line-height:9px}
 /* Bottom sheet */
  #playPage.fit-table .p-controls{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:40;height:var(--sheet-peek);max-height:none;overflow-y:auto;
  overscroll-behavior:contain;margin:0;padding:0 10px calc(10px + env(safe-area-inset-bottom));border-radius:14px 14px 0 0;
  border:1px solid #465861;border-bottom:0;background:#15232b;box-shadow:0 -8px 22px #000b;transition:height .2s ease}
 #playPage.fit-table .p-controls.p-sheet-open{height:min(80dvh,calc(100dvh - 56px))}
 #playPage.fit-table .p-controls:not(.p-sheet-open)>details{display:none}
 #playPage.fit-table .p-sheet-handle{display:flex;flex-direction:column;align-items:center;gap:3px;position:sticky;top:0;z-index:2;width:calc(100% + 20px);
  margin:0 -10px 4px;padding:6px 10px 5px;border:0;border-radius:14px 14px 0 0;background:#15232b;color:var(--muted);font-size:10px;min-height:0}
 #playPage.fit-table .p-sheet-handle span{width:38px;height:4px;border-radius:2px;background:#6f8a95}
 #playPage.fit-table .p-controls .p-decision .eyebrow,#playPage.fit-table .p-controls .p-detail-hint{display:none}
 #playPage.fit-table .p-controls .p-card-detail:has(.p-detail-hint){display:none}
 #playPage.fit-table .p-controls .p-decision h2{font-size:15px;line-height:1.25;margin:0 0 2px}
 #playPage.fit-table .p-controls #pMessage{font-size:11px;line-height:1.35;margin:0 0 6px}
 #playPage.fit-table .p-controls #pClear{min-height:28px;padding:3px 10px;font-size:11px;margin:0 0 6px}
 #playPage.fit-table .p-controls:not(.p-has-selection) #pClear{display:none}
 #playPage.fit-table .p-controls:not(.p-sheet-open) #pMessage{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 #playPage.fit-table #pChoices:not(.p-visual-choices):not(.p-order-choices){display:flex;flex-wrap:wrap;gap:6px}
 #playPage.fit-table #pChoices:not(.p-visual-choices):not(.p-order-choices)>button{flex:1 1 calc(50% - 6px);min-width:0;min-height:40px;padding:6px 8px;font-size:13px;margin:0}
 #playPage.fit-table .p-reaction{bottom:calc(var(--sheet-peek) + 8px)}
 #playPage.fit-table .st-truss-top{display:none}
 /* Card choices: one sideways-scrolling row of small tiles in the sheet */
 #playPage.fit-table .p-controls:not(.p-sheet-open) #pChoices.p-visual-choices{display:flex;overflow-x:auto;overflow-y:hidden;max-height:none;gap:6px;padding:0 0 4px;scroll-snap-type:x proximity}
 #playPage.fit-table .p-controls:not(.p-sheet-open) #pChoices.p-visual-choices>*{flex:0 0 112px;scroll-snap-align:start}
 #playPage.fit-table .p-controls:not(.p-sheet-open) #pChoices.p-visual-choices .p-choice-tile{padding:4px;font-size:11px}
 #playPage.fit-table .p-controls:not(.p-sheet-open) #pChoices.p-visual-choices .p-choice-images{gap:2px}
 #playPage.fit-table .p-controls:not(.p-sheet-open) #pChoices.p-visual-choices>*{flex-basis:70px}
 #playPage.fit-table .p-controls:not(.p-sheet-open) #pChoices.p-visual-choices .p-pick-card{display:flex;justify-content:center}
 #playPage.fit-table .p-controls:not(.p-sheet-open) #pChoices.p-visual-choices .p-pick-card .p-card{width:auto;padding:0}
 #playPage.fit-table .p-controls:not(.p-sheet-open) #pChoices.p-visual-choices .p-pick-card img{height:68px;width:auto;max-width:100%}
 #playPage.fit-table .p-controls:not(.p-sheet-open) #pChoices.p-visual-choices .p-inspect-label,
 #playPage.fit-table .p-controls:not(.p-sheet-open) #pChoices.p-visual-choices .p-pick-card>:not(button){display:none}
 #playPage.fit-table .p-controls:not(.p-sheet-open) #pChoices.p-visual-choices .p-choose{min-height:30px;padding:3px 4px;font-size:11px;margin-top:3px}
 #playPage.fit-table .p-controls:not(.p-sheet-open) #pChoices.p-visual-choices>button:not(.p-choose){flex-basis:70px;font-size:11px;padding:4px}
}