/* One shared portrait playmat for solo practice and automatic battles. */
@media (max-width:720px) and (orientation:portrait), (min-width:721px) and (max-height:600px) and (orientation:landscape) {
  :root, html.ios-safari-viewport { --solo-browser-reserve:0px; }
  body.solo-active .app-shell,
  body.solo-active .auto-battle.is-playing {
    box-sizing:border-box;
    height:var(--visual-viewport-height,100dvh);
    max-height:100dvh;
    padding:env(safe-area-inset-top,0px) max(3px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(3px,env(safe-area-inset-left,0px));
  }
  body.solo-active .solo-panel { padding:0; }
  body.solo-active .solo-game,
  body.solo-active .auto-battle .auto-solo-game { min-height:0; gap:3px; }
  body.solo-active .solo-toolbar { gap:3px; }
  body.solo-active .solo-toolbar button,
  html.ios-safari-viewport body.solo-active .solo-toolbar button,
  body.solo-active .auto-battle .solo-toolbar button { min-height:34px; padding:4px 5px; font-size:11px; border-radius:7px; flex:1 1 48px; touch-action:manipulation; }
  body.solo-active #soloTurnLabel,
  body.solo-active .auto-battle .auto-turn-label { flex-basis:100%; font-size:11px; line-height:14px; }
  body.solo-active .solo-notice,
  body.solo-active .auto-battle .solo-notice { min-height:18px; line-height:18px; font-size:10px; padding:0 4px; }
  body.solo-active .battlefield { gap:3px; min-height:0; }
  body.solo-active .player-board { container-type:size; flex:1 1 0; min-height:0; }
  body.solo-active .playmat,
  body.solo-active .playmat.active-turn,
  html.ios-safari-viewport body.solo-active .playmat,
  html.ios-safari-viewport body.solo-active .playmat.active-turn {
    --solo-field-card:min(13vw,18cqh);
    --solo-hand-card:min(13vw,17cqh);
    --solo-life-card:min(12vw,16cqh);
    --solo-center-card:min(17vw,22cqh);
    min-height:0; height:100%; width:100%; padding:2px; gap:2px; align-content:stretch;
    grid-template-columns:min(12vw,16cqh) minmax(0,1fr) minmax(0,1fr) min(12vw,16cqh);
    grid-template-rows:12px minmax(0,1fr) minmax(0,1.15fr) minmax(0,.32fr) minmax(0,.9fr);
    grid-template-areas:'header header header header' 'life character character character' 'life center center trash' 'don cost cost trash' 'hand hand hand hand';
    border-radius:7px;
  }
  body.solo-active .opponent-board .playmat,
  html.ios-safari-viewport body.solo-active .opponent-board .playmat {
    grid-template-rows:12px minmax(0,.9fr) minmax(0,.32fr) minmax(0,1.15fr) minmax(0,1fr);
    grid-template-areas:'header header header header' 'hand hand hand hand' 'don cost cost trash' 'life center center trash' 'life character character character';
  }
  body.solo-active .playmat-header strong { font-size:8px; }
  body.solo-active .playmat-header span { font-size:7px; }
  body.solo-active .playmat-header button { display:none; }
  body.solo-active .character-area { display:grid; place-items:center; }
  body.solo-active .character-area .battle-card-grid { height:auto; width:100%; justify-content:center; gap:3px; overflow:visible; }
  body.solo-active .battle-card { width:var(--solo-field-card); flex:0 0 var(--solo-field-card); height:calc(var(--solo-field-card) * 1.4); padding:0; }
  body.solo-active .center-area { --solo-center-card:min(17vw,22cqh); grid-template-columns:repeat(3,var(--solo-center-card)); gap:5px; align-content:center; overflow:visible; }
  body.solo-active .center-area .leader-slot,
  body.solo-active .center-area .stage-slot,
  body.solo-active .center-area .deck-slot { width:var(--solo-center-card); min-height:0; height:calc(var(--solo-center-card) * 1.4); position:relative; }
  body.solo-active .center-area h3 { position:absolute; top:0; z-index:2; font-size:7px; background:#172e2bcc; padding:1px 3px; color:white; }
  body.solo-active .center-area .battle-card-img,
  body.solo-active .center-area .card-back-object,
  body.solo-active .center-area .deck-pile { width:var(--solo-center-card); min-width:0; min-height:0; height:calc(var(--solo-center-card) * 1.4); padding:0; }
  body.solo-active .battle-card-img { height:100%; max-height:100%; object-fit:contain; }
  body.solo-active .hand-area { display:flex; flex-direction:column; min-height:0; }
  body.solo-active .hand-area h3 { font-size:7px; line-height:8px; flex:none; margin:0; }
  body.solo-active .hand-grid { min-height:0; align-items:center; justify-content:flex-start; gap:3px; padding:0 5px; scrollbar-width:none; }
  body.solo-active .hand-card { width:var(--solo-hand-card); flex:0 0 var(--solo-hand-card); height:calc(var(--solo-hand-card) * 1.4); min-height:0; padding:0; touch-action:pan-x; }
  body.solo-active .hand-card strong, body.solo-active .hand-card > span, body.solo-active .battle-card > strong { display:none; }
  body.solo-active .life-area { align-content:center; overflow:hidden; position:relative; }
  body.solo-active .life-area h3 { position:absolute; top:1px; font-size:8px; z-index:3; background:#172e2bcc; color:#fff; padding:1px 3px; }
  body.solo-active .life-count-badge { display:grid; position:absolute; right:0; top:auto; bottom:0; z-index:3; min-width:20px; min-height:20px; place-items:center; font-size:12px; color:white; background:#172e2b; }
  body.solo-active .life-stack { display:flex; flex-direction:column; align-items:center; overflow:visible; margin:0; padding-top:8px; }
  body.solo-active .life-area > .life-stack .card-back-object { width:var(--solo-life-card); height:calc(var(--solo-life-card) * 1.4); min-height:0; margin:0; flex:none; }
  body.solo-active .life-area > .life-stack .card-back-object + .card-back-object { margin-top:calc(var(--solo-life-card) * -.96); }
  body.solo-active .life-area > .life-stack .card-back-object img { position:static; width:100%; height:100%; transform:none; object-fit:contain; }
  body.solo-active .cost-area { display:flex; align-items:center; }
  body.solo-active .cost-area h3 { font-size:9px; }
  body.solo-active .cost-area .don-row { height:100%; align-items:center; padding:0; scrollbar-width:none; }
  body.solo-active .cost-area .don-row button { width:18px; min-width:18px; height:25px; min-height:0; padding:0; flex:0 0 18px; }
  body.solo-active .don-row img { width:100%; height:100%; object-fit:contain; }
  body.solo-active .don-deck-area { display:flex; align-items:center; justify-content:center; }
  body.solo-active .don-deck-area h3 { display:none; }
  body.solo-active .don-deck-pile { width:18px; height:25px; min-height:0; aspect-ratio:5/7; }
  body.solo-active .don-deck-pile span { right:-9px; top:0; min-width:16px; min-height:16px; font-size:9px; }
  body.solo-active .trash-slot { gap:0; align-content:center; }
  body.solo-active .trash-slot h3 { font-size:7px; }
  body.solo-active .trash-slot .deck-pile { width:100%; height:auto; min-height:0; aspect-ratio:5/7; padding:0; }
  body.solo-active .auto-battle .auto-controls { flex-wrap:nowrap; }
  body.solo-active .auto-battle .auto-controls button { min-height:40px; font-size:12px; }
  body.solo-active .auto-zone-viewer { padding:8px; padding-bottom:max(8px,env(safe-area-inset-bottom,0px)); }
  body.solo-active .auto-zone-viewer > .zone-viewer-panel { width:100%; max-height:calc(var(--visual-viewport-height,100dvh) - 24px); box-sizing:border-box; }
  body.solo-active .auto-inspector-body { grid-template-columns:minmax(115px,42%) 1fr; gap:10px; }
  body.solo-active .auto-inspector-actions { display:grid; grid-template-columns:1fr; }
  body.solo-active .auto-inspector-actions button { min-height:44px; font-size:14px; }
  body.solo-active .auto-inspector-body > .battle-card-img { height:auto; }
}

body.solo-active .auto-battle.is-playing { overflow:hidden; }
/* Size the hand from its own available height, including the HAND heading. */
@media (max-width:720px) and (orientation:portrait), (min-width:721px) and (max-height:600px) and (orientation:landscape) {
  body.solo-active .hand-area { overflow:hidden; }
  body.solo-active .hand-grid {
    container-type:size;
    flex:1 1 0;
    height:auto;
    min-height:0;
    padding:3px 5px 5px;
    box-sizing:border-box;
    align-items:center;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  body.solo-active .hand-grid .hand-card {
    --phone-hand-width:min(13vw,calc(100cqh * 5 / 7));
    width:var(--phone-hand-width);
    flex:0 0 var(--phone-hand-width);
    height:calc(var(--phone-hand-width) * 7 / 5);
    aspect-ratio:5 / 7;
    min-height:0;
    box-sizing:border-box;
    display:block;
    padding:0;
    margin-block:0;
  }
  body.solo-active .hand-grid.is-stacked .hand-card + .hand-card { margin-left:0; }
  body.solo-active .hand-grid .hand-card img,
  body.solo-active .auto-battle .hand-grid .auto-hidden-card img {
    display:block;
    width:100%;
    height:100%;
    max-height:100%;
    aspect-ratio:auto;
    object-fit:contain;
  }
  body.solo-active .don-deck-area { padding:1px 0; overflow:hidden; }
  body.solo-active .don-deck-area .don-deck-pile {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1px;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    padding:0;
    aspect-ratio:auto;
    overflow:visible;
    border:0;
    background:transparent;
    box-sizing:border-box;
  }
  body.solo-active .don-deck-area .don-deck-pile img {
    width:10px;
    height:14px;
    flex:0 0 10px;
    object-fit:contain;
  }
  body.solo-active .don-deck-area .don-deck-pile span {
    position:static;
    inset:auto;
    display:grid;
    place-items:center;
    min-width:18px;
    min-height:18px;
    flex:0 0 18px;
    padding:0;
    font-size:11px;
    line-height:18px;
    border-radius:5px;
    background:#25306a;
    color:#fff;
    white-space:nowrap;
  }
}
/* Space to pick up each DON, with no overlap even at ten cards. */
@media(max-width:720px) and (orientation:portrait), (min-width:721px) and (max-height:600px) and (orientation:landscape){
  body.solo-active .playmat,
  body.solo-active .playmat.active-turn,
  html.ios-safari-viewport body.solo-active .playmat,
  html.ios-safari-viewport body.solo-active .playmat.active-turn{
    --solo-field-card:min(13vw,16.5cqh);
    --solo-center-card:min(17vw,19cqh);
    grid-template-rows:12px minmax(0,1fr) minmax(0,1.15fr) minmax(42px,.55fr) minmax(0,.9fr);
  }
  body.solo-active .opponent-board .playmat,
  html.ios-safari-viewport body.solo-active .opponent-board .playmat{
    grid-template-rows:12px minmax(0,.9fr) minmax(42px,.55fr) minmax(0,1.15fr) minmax(0,1fr);
  }
  body.solo-active .center-area{--solo-center-card:min(17vw,19cqh)}
  body.solo-active .cost-area .don-row{gap:8px;align-items:center;padding:1px 8px;scrollbar-width:none;touch-action:pan-x}
  body.solo-active .cost-area .don-row button,
  body.solo-active .auto-battle .cost-area .don-row button{width:30px;min-width:30px;flex:0 0 30px;height:38px;min-height:38px;margin:0;padding:1px;border-radius:4px;box-sizing:border-box}
  body.solo-active .cost-area .don-row.is-stacked button+button{margin-left:0}
  body.solo-active .cost-area .don-row button.rested{transform:none;opacity:.45;filter:grayscale(.5)}
  body.solo-active .cost-area .don-row button img{width:100%;height:100%;object-fit:contain}
  body.solo-active .auto-battle .cost-area .don-row [data-auto-drag],
  body.solo-active .auto-battle .hand-grid [data-auto-drag]{touch-action:none}
}
@media(max-width:720px) and (orientation:portrait), (min-width:721px) and (max-height:600px) and (orientation:landscape){
  body.solo-active .cost-area .don-row button{display:flex;align-items:center;justify-content:center;overflow:hidden}
  body.solo-active .cost-area .don-row button img{display:block;min-height:0;max-height:100%}
}
/* Compact landscape uses both mats without desktop minimum heights. */
@media(min-width:721px) and (max-height:600px) and (orientation:landscape){
 body.solo-active .auto-battle .character-area,body.solo-active .auto-battle .center-area{min-height:0;padding:0}
 body.solo-active .auto-battle .character-area>h3{display:none}
 body.solo-active .auto-battle .hand-area{padding:0}
 body.solo-active .auto-battle .hand-grid{padding:0 4px}
 body.solo-active .auto-battle .hand-card{width:calc((100cqh - 2px) * 5 / 7);flex-basis:calc((100cqh - 2px) * 5 / 7);height:calc(100cqh - 2px)}
 body.solo-active .auto-battle .cost-area{padding:0 2px}
 body.solo-active .auto-battle .cost-area>h3{display:none}
}