/*
 * Final mobile duel polish. This stylesheet is loaded AFTER every legacy duel
 * sheet, and applies only on phone-sized viewports. All game rules stay shared.
 */
@media (max-width:780px) {
  /* A playable hand, an attack bar and the five turn actions get dedicated
     vertical space. The removed Hide Hand button no longer reserves 29px. */
  body.duel-active #duel:not(.hidden) {
    grid-template-rows:auto auto minmax(0,1fr) clamp(298px,39dvh,355px)!important;
  }
  body.duel-active #duel>.below,
  body.duel-active #duel>.below>.main-column {
    min-height:0!important;
    height:100%!important;
    max-height:100%!important;
  }
  body.duel-active #duel>.below>.main-column {
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
  }
  body.duel-active #duel>.below>.main-column>.hand-panel {
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    padding:5px!important;
    overflow:hidden!important;
  }
  body.duel-active #duel>.below>.main-column>.hand-panel .hand-fan:not(.hidden) {
    display:block!important;
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    bottom:auto!important;
    right:auto!important;
    width:100%!important;
    height:100%!important;
    padding:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }

  /* Attack buttons have their own compact strip ABOVE regular turn actions.
     The physical card and five Bench slots are kept centered independently. */
  body.duel-active .stage .territory .active-with-attacks {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    gap:0!important;
  }
  body.duel-active .stage .territory .active-with-attacks #myActive {
    grid-column:auto!important;
    grid-row:auto!important;
    flex:0 0 auto!important;
    width:clamp(82px,25vw,118px)!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:0!important;
  }
  body.duel-active .stage .territory .active-with-attacks #fieldAttackDock {
    display:none!important;
  }
  body.duel-active #duel>.below>.main-column>.turn-actions-panel {
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    gap:5px!important;
    flex:0 0 166px!important;
    width:100%!important;
    height:166px!important;
    min-height:0!important;
    padding:5px!important;
    overflow:visible!important;
  }
  body.duel-active #duel>.below>.main-column>.turn-actions-panel:not(:has(#mobileAttackDock button.attack-action)) {
    flex-basis:95px!important;
    height:95px!important;
  }
  body.duel-active #mobileAttackDock {
    display:block!important;
    flex:0 0 auto!important;
    width:100%!important;
    max-height:65px!important;
    min-height:0!important;
    overflow-y:auto!important;
    border:0!important;
  }
  body.duel-active #mobileAttackDock:not(:has(button.attack-action)) {
    display:none!important;
  }
  body.duel-active #mobileAttackDock .inline-attack-panel {
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:5px 8px!important;
    border:1px solid #567c64!important;
    border-radius:9px!important;
    background:#1b382b!important;
    box-shadow:none!important;
  }
  body.duel-active #mobileAttackDock .inline-attack-panel h4 {
    margin:0 0 3px!important;
    font-size:9px!important;
    letter-spacing:.12em!important;
  }
  body.duel-active #mobileAttackDock .inline-attacks {
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(105px,1fr))!important;
    gap:5px!important;
  }
  body.duel-active #mobileAttackDock button.attack-action {
    min-height:34px!important;
    padding:3px 6px!important;
    font-size:10px!important;
    background:#2b6343!important;
    border:1px solid #659a74!important;
  }
  body.duel-active #mobileAttackDock .attack-effect,
  body.duel-active #mobileAttackDock .attack-warning {
    display:none!important;
  }
  body.duel-active #duel>.below>.main-column>.turn-actions-panel .turn-actions {
    flex:0 0 84px!important;
    width:100%!important;
    height:84px!important;
    min-height:0!important;
  }

  /* Remove inherited opaque navy squares behind physical Pokémon cards.
     Keep targeting feedback (legal/selected) distinct from the card itself. */
  body.duel-active #duel .stage .territory .poke,
  body.duel-active #duel .stage .territory .poke .pokemon-face {
    background:transparent!important;
    background-image:none!important;
    border:0!important;
    box-shadow:none!important;
  }
  body.duel-active #duel .stage .territory .poke .pokemon-face>img {
    background:transparent!important;
    box-shadow:none!important;
  }
  body.duel-active #duel .stage .territory .poke.legal .pokemon-face,
  body.duel-active #duel .stage .territory .poke.decision-target .pokemon-face {
    outline:2px solid #78ebbb!important;
    outline-offset:2px!important;
    box-shadow:0 0 0 2px #166f5799!important;
  }

  /* The old six-card Prize stack was never sized for a phone and spilled
     over both boards. Normal play gets one card + count for each player.
     Prize choosing and face-up Prize effects retain their full card grid. */
  body.duel-active #duel .stage .prize-sidebar {
    position:absolute!important;
    inset:0!important;
    z-index:60!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
    background:none!important;
    border:0!important;
    pointer-events:none!important;
  }
  body.duel-active #duel .stage .prize-sidebar .prize-group {
    position:absolute!important;
    right:8px!important;
    left:auto!important;
    bottom:auto!important;
    display:grid!important;
    grid-template-columns:23px minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    align-items:center!important;
    width:77px!important;
    min-width:0!important;
    height:43px!important;
    padding:5px!important;
    gap:4px!important;
    border:1px solid #596675!important;
    border-radius:9px!important;
    background:#242e39f2!important;
    box-shadow:0 2px 7px #0006!important;
    pointer-events:none!important;
  }
  body.duel-active #duel .stage .prize-sidebar .prize-group:first-child {
    top:calc(25% - 22px)!important;
  }
  body.duel-active #duel .stage .prize-sidebar .prize-group:last-child {
    top:calc(75% - 22px)!important;
  }
  body.duel-active #duel .stage .prize-sidebar .prize-group h3 {
    display:none!important;
  }
  body.duel-active #duel .stage .prize-sidebar .prize-group .prize-count {
    grid-column:2!important;
    grid-row:1!important;
    display:block!important;
    margin:0!important;
    font-size:11px!important;
    line-height:1.1!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
  body.duel-active #duel .stage .prize-sidebar .prize-group .prize-grid {
    grid-column:1!important;
    grid-row:1!important;
    display:grid!important;
    grid-template-columns:23px!important;
    width:23px!important;
    height:32px!important;
    min-height:0!important;
    max-width:none!important;
    padding:0!important;
    gap:0!important;
  }
  body.duel-active #duel .stage .prize-sidebar .prize-group .prize-back {
    display:block!important;
    width:23px!important;
    height:32px!important;
    min-height:0!important;
    margin:0!important;
    grid-column:auto!important;
    grid-row:auto!important;
    background-size:100% 100%!important;
  }
  body.duel-active #duel .stage .prize-sidebar .prize-group:not(.prize-awaiting):not(:has(.prize-face-up)) .prize-back:not(:first-child) {
    display:none!important;
  }
  body.duel-active #duel .stage .prize-sidebar .prize-group.prize-awaiting,
  body.duel-active #duel .stage .prize-sidebar .prize-group:has(.prize-face-up) {
    z-index:85!important;
    display:block!important;
    width:min(185px,49vw)!important;
    height:auto!important;
    padding:7px!important;
    pointer-events:auto!important;
  }
  body.duel-active #duel .stage .prize-sidebar .prize-group.prize-awaiting .prize-grid,
  body.duel-active #duel .stage .prize-sidebar .prize-group:has(.prize-face-up) .prize-grid {
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
    height:auto!important;
    gap:3px!important;
    margin-top:5px!important;
  }
  body.duel-active #duel .stage .prize-sidebar .prize-group.prize-awaiting .prize-back,
  body.duel-active #duel .stage .prize-sidebar .prize-group:has(.prize-face-up) .prize-back {
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:35px!important;
  }
  body.duel-active #duel .stage .prize-sidebar .prize-group.prize-awaiting .prize-select {
    pointer-events:auto!important;
  }
}

/* v0.96 — Mobile overflow regression.
   A later reference rule set card width:auto/height:100%, so the hand grew
   cards to ~150px wide on phones despite 72px rules from older styles.
   Keep cards physically proportioned and the action rail fully visible.
   This is exclusively presentation; all duel modes use the same DOM/rules. */
@media (max-width:780px) {
  body.duel-active .masthead,
  body.duel-active > footer {
    display:none!important;
  }
  body.duel-active main {
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    height:100dvh!important;
    min-height:0!important;
    padding:4px!important;
    overflow:hidden!important;
  }
  body.duel-active #duel:not(.hidden) {
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:calc(100dvh - 8px)!important;
    min-height:0!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto minmax(0,1fr) clamp(228px,29dvh,272px)!important;
    gap:4px!important;
    overflow:hidden!important;
  }
  body.duel-active #duel > .stage {
    min-width:0!important;
    min-height:0!important;
    max-height:100%!important;
    overflow:hidden!important;
  }
  body.duel-active #duel > .below,
  body.duel-active #duel > .below > .main-column {
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
    max-height:100%!important;
  }
  body.duel-active #duel > .below > .main-column > .hand-panel {
    box-sizing:border-box!important;
    flex:1 1 0!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding:3px!important;
    overflow:hidden!important;
  }
  body.duel-active #duel > .below > .main-column > .hand-panel .hand-fan:not(.hidden) {
    display:block!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
  }
  body.duel-active #duel > .below > .main-column > .hand-panel .hand-fan-track {
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    gap:7px!important;
    width:max-content!important;
    min-width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:2px 5px!important;
  }
  body.duel-active #duel > .below > .main-column > .hand-panel .hand-fan-card {
    box-sizing:border-box!important;
    position:relative!important;
    inset:auto!important;
    flex:0 0 clamp(64px,19vw,82px)!important;
    width:clamp(64px,19vw,82px)!important;
    min-width:0!important;
    max-width:82px!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100% - 4px)!important;
    aspect-ratio:245 / 342!important;
    align-self:center!important;
    transform:none!important;
    touch-action:pan-x;
  }
  body.duel-active #duel > .below > .main-column > .hand-panel .hand-fan-card img {
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:contain!important;
  }
  body.duel-active #duel > .below > .main-column > .turn-actions-panel {
    box-sizing:border-box!important;
    flex:0 0 165px!important;
    height:165px!important;
    min-height:0!important;
    max-height:165px!important;
    width:100%!important;
    padding:5px!important;
  }
  body.duel-active #duel > .below > .main-column > .turn-actions-panel:not(:has(#mobileAttackDock button.attack-action)) {
    flex:0 0 98px!important;
    height:98px!important;
    max-height:98px!important;
  }
  body.duel-active #mobileAttackDock {
    flex:0 1 62px!important;
    max-height:62px!important;
  }
  body.duel-active #duel > .below > .main-column > .turn-actions-panel .turn-actions {
    display:grid!important;
    flex:0 0 85px!important;
    width:100%!important;
    height:85px!important;
    min-height:0!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(38px,1fr))!important;
    gap:4px!important;
  }
  body.duel-active #duel > .below > .main-column > .turn-actions-panel .turn-actions button {
    min-width:0!important;
    min-height:38px!important;
    padding:4px!important;
    white-space:nowrap!important;
    text-overflow:ellipsis;
    overflow:hidden;
  }
  body.duel-active .hand-tray-drawer,
  body.duel-active .power-drawer {
    bottom:calc(clamp(228px,29dvh,272px) + 8px)!important;
  }
}
@media (max-width:780px) and (max-height:700px) {
  body.duel-active #duel:not(.hidden) {
    grid-template-rows:auto auto minmax(0,1fr) clamp(206px,33dvh,236px)!important;
  }
  body.duel-active .hand-tray-drawer,
  body.duel-active .power-drawer {
    bottom:calc(clamp(206px,33dvh,236px) + 8px)!important;
  }
}

/* v0.97 — mobile field-first HUD.
   Reclaim the height taken by redundant coaching/activity banners and
   full-width Team/CPU bars. Keep the existing deck/discard interactions
   as compact counters beside each Active Pokémon. Desktop is unchanged. */
@media (max-width:780px) {
  /* Those two messages already have equivalents in the log, game field,
     setup choice bar and decision modal. Neither banner contains controls. */
  body.duel-active #duel > .stage > #turnCoach,
  body.duel-active #duel > .stage > #opponentActivityStatus {
    display:none!important;
  }
  body.duel-active #duel > .stage > .arena-layout {
    flex:1 1 auto!important;
    height:100%!important;
    min-height:0!important;
  }
  /* Preserve the subtle dividing line, not the large turn badge. */
  body.duel-active #duel .stage .battleline #turnChip {
    display:none!important;
  }

  /* Position small player HUDs inside the playing surface, close to the
     respective Active. They no longer consume a row in the territory. */
  body.duel-active #duel .stage .territory > .trainerbar,
  body.duel-active #duel .stage .territory > .trainerbar.player {
    position:absolute!important;
    inset:auto!important;
    left:clamp(6px,1.8vw,12px)!important;
    width:clamp(86px,26vw,112px)!important;
    max-width:29%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:stretch!important;
    gap:4px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    z-index:17!important;
    pointer-events:none!important;
  }
  body.duel-active #duel .stage .opponent-territory > .trainerbar {
    bottom:clamp(7px,1.5dvh,17px)!important;
  }
  body.duel-active #duel .stage .player-territory > .trainerbar.player {
    top:clamp(7px,1.5dvh,17px)!important;
  }
  body.duel-active #duel .stage .territory > .trainerbar .trainerlabel,
  body.duel-active #duel .stage .territory > .trainerbar .pile-tools {
    position:static!important;
    inset:auto!important;
    transform:none!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    pointer-events:auto!important;
  }
  body.duel-active #duel .stage .territory > .trainerbar .trainerlabel {
    display:flex!important;
    gap:0!important;
    padding:4px 6px!important;
    border:1px solid #72948388!important;
    border-radius:6px!important;
    background:#1a2c34d9!important;
    box-shadow:0 1px 5px #0018!important;
  }
  body.duel-active #duel .stage .territory > .trainerbar .trainerlabel > span,
  body.duel-active #duel .stage .territory > .trainerbar .trainerlabel small {
    display:none!important;
  }
  body.duel-active #duel .stage .territory > .trainerbar .trainerlabel strong {
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    font-size:10px!important;
    line-height:1.25!important;
    text-align:center!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  /* Real discard buttons and counters are still clickable; show the counts
     directly UNDER the player name without another screen-width bar. */
  body.duel-active #duel .stage .territory > .trainerbar .pile-tools {
    display:flex!important;
    flex-direction:row!important;
    justify-content:space-between!important;
    align-items:stretch!important;
    gap:3px!important;
    flex-wrap:nowrap!important;
  }
  body.duel-active #duel .stage .territory > .trainerbar .deck-counter,
  body.duel-active #duel .stage .territory > .trainerbar .pile-button {
    box-sizing:border-box!important;
    display:inline-flex!important;
    flex:1 1 0!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:0!important;
    height:28px!important;
    min-height:28px!important;
    gap:3px!important;
    padding:2px 3px!important;
    border:1px solid #72948388!important;
    border-radius:6px!important;
    background:#1a2c34df!important;
    box-shadow:0 1px 5px #0018!important;
    white-space:nowrap!important;
    pointer-events:auto!important;
    font-size:0!important;
  }
  body.duel-active #duel .stage .territory > .trainerbar .deck-counter::before {
    display:block!important;
    width:12px!important;
    height:17px!important;
    flex:0 0 12px!important;
  }
  body.duel-active #duel .stage .territory > .trainerbar .pile-button::before {
    content:"♻"!important;
    font-size:13px!important;
    line-height:1!important;
  }
  body.duel-active #duel .stage .territory > .trainerbar .deck-counter b,
  body.duel-active #duel .stage .territory > .trainerbar .pile-button b {
    font-size:11px!important;
    font-weight:800!important;
  }
}
@media (max-width:350px) {
  body.duel-active #duel .stage .territory > .trainerbar,
  body.duel-active #duel .stage .territory > .trainerbar.player {
    width:86px!important;
    left:4px!important;
  }
  body.duel-active #duel .stage .territory > .trainerbar .trainerlabel strong {
    font-size:9px!important;
  }
}