.battle-screen {
  position: relative;
  height: calc(100dvh - 68px);
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(ellipse at 50% 45%, #24341e 0, #11170e 50%, #090b08 85%),
    #090b08;

  @media (max-width: 720px) {
    height: calc(100dvh - 124px);
    min-height: 0;
  }
}

.battle-screen:fullscreen {
  width: 100vw;
  height: 100dvh;
}

.battle-canvas {
  position: relative;
  width: 100%;
  min-width: 1120px;
  height: max(100%, 820px);

  /* Exactly screen height - nothing here may grow the canvas and start a scroll. */
  @media (max-width: 720px) {
    min-width: 0;
    height: 100%;
  }
}

/* Equal shares, so the two halves mirror and neither leaning Active is cut off. */
.battlefield {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 42px 1fr;
  gap: 3px;
  padding: 48px 510px 350px 52px;

  @media (max-width: 1180px) {
    padding-right: 448px;
    padding-left: 20px;
  }

  @media (max-width: 720px) {
    --fan-strip: 40px;
    grid-template-rows: 1fr 28px 1fr;
    padding: calc(38px + var(--fan-strip)) 5px 162px;
  }
}

/* Five columns, same order on both halves: Deck, Empties Tray, Kit in play, field, Prizes.
   Every column is always present, empty or not, so nothing shifts when one fills. */
.side-zone {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: 112px 147px 112px minmax(0, 1fr) 90px;
  align-items: center;
  border-radius: 24px;

  /* The Bench needs the full width, so Deck and Prizes leave the flow and sit outboard. */
  @media (max-width: 720px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.side-zone.has-turn {
  background: radial-gradient(ellipse, rgb(244 189 63 / 6%), transparent 68%);
}

.chooser {
  width: fit-content;
  margin-top: 4px;
  padding: 4px 7px;
  border: 1px solid #6d623c;
  border-radius: 100px;
  color: var(--gold-soft);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.deck-stack,
.prize-rack {
  display: grid;
  justify-items: center;
  gap: 5px;
}

/* Positioned so the corona it can wear has the stack itself to sit around. The phone table
   places it absolutely instead, which serves the same purpose. */
.deck-stack {
  position: relative;
  grid-column: 1;

  @media (max-width: 720px) {
    left: 0;
  }
}

/* The Deck only becomes a control while a draw is waiting on it, and looks no different for it:
   the button carries none of a button's own furniture, so the stack keeps its exact box. */
button.deck-stack {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.prize-rack {
  grid-column: 5;

  @media (max-width: 720px) {
    grid-column: 1;
    right: 0;
  }
}

/* Next to the Deck it is fed from, and the control that opens itself once it holds anything -
   hence the button reset. Its box is the same empty or full, so nothing shifts on the first
   chuck. */
.empties-tray {
  position: relative;
  grid-column: 2;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;

  /* No room beside the Deck at this width; it goes outboard, inside the Prizes. */
  @media (max-width: 720px) {
    grid-column: 1;
    right: 52px;
  }
}

button.empties-tray {
  cursor: pointer;
}

button.empties-tray:hover .card-face-host,
button.empties-tray:focus-visible .card-face-host {
  filter: drop-shadow(-4px 4px 0 #1f2118) drop-shadow(-4px 4px 0 #353527)
    drop-shadow(0 0 9px rgb(244 189 63 / 55%));
}

.empties-tray b {
  position: relative;
  z-index: 2;
  color: var(--muted);
  font: 700 11px "Jost", sans-serif;
}

.empties-tray.is-empty b {
  color: #687057;
}

/* The face on top of the pile, which is a picture of the pile rather than a card of its own: the
   whole tray is read by opening it, so nothing inside here answers a press separately. */
.tray-top {
  display: block;
}

/* The same outline an empty Bench place and an empty Kit slot wear, at the tray's own size. */
.tray-top.is-nothing {
  width: 78px;
  height: 109px;
  border: 1px dashed rgb(156 164 128 / 23%);
  border-radius: 7px;

  @media (max-width: 720px) {
    width: 42px;
    height: 59px;
  }
}

/* Sized here rather than taken from the Bench, so the face and the outline an empty tray wears
   are the same box and nothing moves when the first card is chucked. */
.empties-tray .card-face-host {
  --blokemon-card-scale: 0.104;

  filter: drop-shadow(-4px 4px 0 #1f2118) drop-shadow(-4px 4px 0 #353527);

  @media (max-width: 720px) {
    --blokemon-card-scale: 0.056;
  }
}

/* Positioned so the halves a shuffle splits it into have the stack's own box to riffle in. */
.deck-card-back {
  position: relative;
  width: 96px;
  aspect-ratio: 5 / 7;
  margin-bottom: 8px;
  filter: drop-shadow(-5px 5px 0 #1f2118) drop-shadow(-5px 5px 0 #353527);

  @media (max-width: 720px) {
    width: 58px;
  }
}

.oche-card-back {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.deck-stack b,
.deck-stack small,
.prize-rack b {
  position: relative;
  z-index: 2;
  color: var(--muted);
  font: 700 11px "Jost", sans-serif;

  @media (max-width: 720px) {
    font-size: 8px;
  }
}

.prizes {
  display: grid;
  grid-template-columns: repeat(2, 31px);
  gap: 4px;

  @media (max-width: 720px) {
    grid-template-columns: repeat(2, 21px);
    gap: 2px;
  }
}

.prizes .oche-card-back {
  width: 31px;

  @media (max-width: 720px) {
    width: 21px;
  }
}

/* In the flow of the row rather than over it, which is what keeps it clear of the Active at
   every width. The place is kept whether or not a card stands in it, and never clips. */
.local-slot {
  position: relative;
  z-index: 6;
  grid-row: 1;
  grid-column: 3;
  display: grid;
  grid-template-rows: auto 12px;
  justify-items: center;
  align-content: center;
  gap: 3px;
  overflow: visible;

  @media (max-width: 720px) {
    position: absolute;
    z-index: 6;
    grid-column: 1;
    left: 58px;
  }
}

/* An empty place reads the way an empty Bench position does: an outline, and nothing else. */
.local-slot-empty {
  width: 98px;
  height: 137px;
  border: 1px dashed rgb(156 164 128 / 23%);
  border-radius: 7px;

  @media (max-width: 720px) {
    display: none;
  }
}

.local-slot-label {
  color: #687057;
  font: 700 9px "Jost", sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* The Bench's own column, which is the second of the field's two - not the table's. The tray
   column added to the side zone does not reach in here, and counting it in did: the fan went to a
   third column the field has never had, and an implicit track carried it off the table. */
.opponent-hand {
  position: absolute;
  z-index: 3;
  grid-row: 1;
  grid-column: 2;
  top: -40px;
  left: 50%;
  display: flex;
  transform: translateX(-50%);

  /* Compressed rather than dropped: how much they hold is always readable. */
  @media (max-width: 720px) {
    /* One column here, so the fan is placed against the half itself and centred on its Bench. */
    grid-column: 1;
    top: calc(-1 * var(--fan-strip));
  }
}

.opponent-hand .oche-card-back {
  width: 52px;
  margin-left: -23px;
  box-shadow: 0 8px 14px #0008;
  transform: rotate(3deg);

  @media (max-width: 720px) {
    width: 26px;
    margin-left: -17px;
    border-radius: 4px;
    box-shadow: 0 3px 6px #0009;
  }
}

.opponent-hand .oche-card-back:first-child {
  margin-left: 0;
}

.field-center {
  position: relative;
  grid-column: 4;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.65fr) minmax(420px, 1.35fr);
  align-items: center;
  justify-items: center;
  gap: 20px;

  @media (max-width: 1180px) {
    grid-template-columns: minmax(200px, 0.65fr) minmax(350px, 1.35fr);
  }

  /* One column, two rows, Bench outboard of Active on both sides. */
  @media (max-width: 720px) {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    gap: 2px;
  }
}

.active-slot {
  position: relative;
  height: 100%;
  min-width: 250px;
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(ellipse, #b2c57a22, transparent 65%);

  /* The Active card sits in the flow of its own row here, so the row keeps its height. */
  @media (max-width: 720px) {
    grid-column: 1;
    height: auto;
    min-width: 124px;
    min-height: 148px;
    padding-bottom: 13px;
  }
}

.opponent-zone .active-slot > .field-card-button {
  position: absolute;
  bottom: 0;
}

.player-zone .active-slot > .field-card-button {
  position: absolute;
  top: 0;
}

.active-slot::after {
  content: "ACTIVE";
  position: absolute;
  z-index: 0;
  bottom: 3px;
  color: #687057;
  font: 700 10px "Jost", sans-serif;
  letter-spacing: 0.15em;
}

.empty-slot,
.empty-hand {
  color: #79806a;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}