/*
  What is left of the phone breakpoint: rules with no counterpart in a base stylesheet, so there
  is nothing for them to sit beside. Every override of an existing rule now lives with it.
*/
@media (max-width: 720px) {
  .brand span:last-child small {
    display: none;
  }

  .mainnav a::before {
    content: attr(data-icon);
    grid-row: 1;
    font-size: 18px;
  }

  .topline h1 {
    font-size: 40px;
  }

  .card-showcase .card-face--showcase {
    --blokemon-card-scale: 0.42;
  }

  .starter-intro h1 {
    font-size: 44px;
  }

  .deck-top-actions button {
    flex: 1;
  }

  .starter-summary, .decklist {
    position: static;
    margin-bottom: 13px;
  }

  .pack-topline {
    display: flex;
  }

  .pack-order {
    grid-column: 1 / -1;
    padding: 20px 10px 30px;
  }

  .round-status {
    display: none;
  }

  .deck-stack, .empties-tray, .prize-rack {
    position: absolute;
    z-index: 2;
  }

  .opponent-zone .deck-stack, .opponent-zone .empties-tray, .opponent-zone .prize-rack {
    bottom: 2px;
  }

  .player-zone .deck-stack, .player-zone .empties-tray, .player-zone .prize-rack {
    top: 2px;
  }

  .opponent-zone .local-slot {
    bottom: 0;
  }

  .player-zone .local-slot {
    top: 0;
  }

  .opponent-zone .bench-row {
    grid-row: 1;
  }

  .opponent-zone .active-slot {
    grid-row: 2;
  }

  .player-zone .active-slot {
    grid-row: 1;
  }

  .player-zone .bench-row {
    grid-row: 2;
  }

  .opponent-zone .active-slot > .field-card-button, .player-zone .active-slot > .field-card-button {
    position: relative;
    top: auto;
    bottom: auto;
  }

  .battle-screen .card-face--bench {
    --blokemon-card-scale: 0.067;
  }

  .attached-energy .card-face-host {
    --blokemon-card-scale: 0.04;
  }

  /*
    While the glowing cards to choose from are in hand, the hand rises clear of the sheet; the
    board is the aura surface the rest of the time, so the hand stays down out of the way.
  */
  .hand-forward .hand-zone {
    /* Forward means in front: it rises over the table state rather than under it. */
    z-index: 32;
    bottom: 336px;
    background: linear-gradient(transparent, rgb(9 11 8 / 88%) 42%);
  }

  /* The card on top of the hand is the one held last, and it is shown whole. */
  .hand-card:last-child {
    margin-right: 0;
  }

  /*
    Held cards sit against one another, so their coronas would otherwise merge into one band of
    light along the row: in the hand the rim is drawn tighter and softer than on the table.
  */
  .hand-card .hand-card-visual::after {
    inset: -6px;
    border-radius: 12px;
    filter: blur(3px);
  }

  .hand-card .card-face--hand {
    --blokemon-card-scale: 0.12;
  }

  .card-reveal-overlay .card-face--hand {
    --blokemon-card-scale: 0.15;
  }

  /* A bottom sheet above the nav bar; a forced decision reuses the same geometry so a phone
     never stacks two competing surfaces. */
  .action-sheet, .action-sheet.is-centred {
    position: absolute;
    inset: auto 8px 8px;
    width: auto;
    max-height: min(40dvh, 320px);
    transform: none;
    transform-origin: bottom center;
  }

  .sheet-tray .card-face--hand {
    --blokemon-card-scale: 0.15;
  }
}