/* Modern-only readability and touch pass; Legacy never loads this sheet. */
.audioctl { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.devbar__audio {
  min-height: 30px; padding: 3px 10px; border: 1px solid #8a7650; border-radius: 4px;
  color: #f2e5c8; background: #161b21; font-size: 12px; white-space: nowrap;
}
.devbar__audio[aria-pressed="true"] { color: #c9c2b5; border-color: #5b5b57; background: #141516; }
.audioctl__volume { display: grid; place-items: center; }
#audio-volume { width: 82px; accent-color: #d6bc80; }
.field__name { font-size: 16px; white-space: normal; line-height: 1.15; width: 100%; }
.field__score { font-size: 11px; line-height: 1.6; color: #d5d4c7; }
.field__head { min-height: 48px; }
/* Size lives in style.css so one sheet owns it: the base there, and a 44px
   floor in the touch-landscape block. A 24px base here silently beat that
   media rule (same specificity, later sheet) and kept the button at 24px
   on the one device that needs 44. */
.field__btn { font-size: 16px; }
.shelf__label { font-size: 12px; }
.res__label, .slot__label, .pile small { font-size: 10px; color: #c3bead; }
.hud__points { font-size: 22px; }
.hud__name { font-size: 14px; }
.gem { font-size: 14px; }
.bigaction__label { font-size: 20px; }
.bigaction--long .bigaction__label { font-size: 13px; }
.turnstate__who { font-size: 16px; }
.turnstate__phase { font-size: 12px; }

/* A readable badge has its own stable box, independent of the board font. */
.might { width: 26px; height: 26px; left: auto; right: 1%; top: auto; bottom: 1%; transform: none; }
.might::before { inset: 0; border: 1px solid #d6bc80; background: #17191b; box-shadow: 0 2px 4px #000b, inset 0 1px 3px #e6c67855; }
.might__n { font-size: 17px; font-weight: 700; line-height: 26px; color: #fff3ce; }
.dmg { width: 21px; height: 23px; top: 2%; left: 3%; transform: none; border-radius: 5px 5px 9px 9px; }
.dmg__n { font-size: 13px; line-height: 23px; }
.unit { perspective: 700px; }
.unit__art { box-shadow: inset 0 0 8px #0007; }
.unit:focus-visible { z-index: 35; }
.field-nav { display: none; }
.field-nav__button { flex: 1 1 0; min-height: 44px; padding: 4px 8px; border-bottom: 2px solid #525960; color: #bbbeb4; background: #141b22f5; }
.field-nav__button strong, .field-nav__button small { display: block; font-size: 12px; }
.field-nav__button small { font-size: 10px; }
.field-nav__button[aria-current="true"] { border-color: #f4d28b; color: #fff0c6; }
.field-nav__button.is-destination { box-shadow: inset 0 0 0 2px #6fc0ff; }
#stage:not(.is-stacked) .field-nav.is-open { display: flex; position: absolute; left: 7.4%; right: 12.5%; top: 16.5%; height: 46px; gap: 4px; }
#stage:not(.is-stacked) .fields.is-focused { top: calc(16.5% + 52px); height: calc(38.5% - 52px); grid-template-columns: 1fr; }
#stage:not(.is-stacked) .fields.is-focused .field:not(.is-focused-field) { display: none; }

/* Required decisions have their own content-sized surface. */
#choice-popup {
  --choice-width: 560px;
  left: 50%; right: auto; top: 50%; bottom: auto;
  transform: translate(-50%, -50%);
  width: min(var(--choice-width), calc(100vw - 32px));
  height: auto; max-height: calc(100dvh - 32px);
  overflow: auto; z-index: 100;
  background: #10161df5; border: 1px solid #a89159;
  box-shadow: 0 20px 70px #000c, 0 0 0 100vmax #0005;
}
#choice-popup.tray--cards { --choice-width: 1060px; }
#choice-popup.tray--cards[data-count="1"] { --choice-width: 340px; }
#choice-popup.tray--cards[data-count="2"] { --choice-width: 560px; }
#choice-popup.tray--cards[data-count="3"] { --choice-width: 810px; }
#choice-popup .tray__head { cursor: default; touch-action: auto; padding: 8px 4px; }
#choice-popup .tray__prompt { font-size: 20px; }
#choice-popup .options { max-height: min(64dvh, 540px); }
#choice-popup .options--cards { padding: 8px 4px 12px; }
#choice-popup .tray__foot { padding: 8px 4px 0; }
#choice-popup .affordances:empty, #choice-popup .tray__foot:empty { display: none; }

/* Card galleries retain readable art and explicit selection ranks. */
.tray--cards {
  left: 50%; right: auto; bottom: 30px; transform: translateX(-50%);
  width: min(1120px, calc(100% - 32px)); max-height: calc(100dvh - 80px);
  background: #10161df5; border: 1px solid #a89159;
  box-shadow: 0 20px 70px #000c, 0 0 0 100vmax #0005;
  border-radius: 8px; z-index: 100;
}
.tray--cards .tray__prompt { font: 600 22px/1.2 var(--display); }
.tray--cards .tray__head { padding: 14px 18px; }
.tray--cards .affordances:empty { display: none; }
.options--cards {
  display: flex; align-items: flex-start; gap: 18px; overflow: auto;
  justify-content: safe center;
  padding: 18px 22px 24px; scroll-snap-type: x proximity;
  max-height: min(64dvh, 540px);
}
.options--cards .option {
  display: flex; flex-direction: column; flex: 0 0 206px; align-items: stretch;
  padding: 0; gap: 9px; position: relative; border: 0; border-radius: 6px;
  background: transparent; scroll-snap-align: center;
  transition: transform 150ms ease, opacity 150ms ease;
}
.option-item { flex: 0 0 228px; scroll-snap-align: center; }
.options--cards .option-item .option { width: 100%; }
.option-inspect { display: block; margin: 0 auto; min-height: 36px; padding: 4px 16px; font-size: 12px; color: #b8c9dc; }
.option-inspect:hover { color: #fff3cb; text-decoration: underline; }
.options--cards .option__art {
  width: 100%; height: auto; aspect-ratio: 744 / 1039; overflow: hidden;
  border-radius: 6px; box-shadow: 0 6px 14px #000a; background: #080e12;
}
.options--cards .option__art img { width: 100%; height: 100%; object-fit: contain; margin: 0; transform: none; }
.options--cards .option__label { font-size: 13px; line-height: 1.4; min-height: 37px; text-align: center; overflow-wrap: anywhere; }
.options--cards .option.is-picked { background: transparent; box-shadow: none; }
.options--cards .is-picked .option__art { outline: 3px solid #e9c878; outline-offset: 3px; }
.options--cards .option__rank {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
  display: grid; place-items: center; border: 2px solid #f8d780; border-radius: 50%;
  color: #fff4d9; background: #152927; font: 700 17px var(--num); box-shadow: 0 3px 8px #000;
}
.tray--cards .tray__foot { padding: 12px 18px; gap: 12px; }
.tray--cards .tray__foot button { min-height: 44px; padding: 8px 20px; font-size: 14px; }
.tray--cards #toggle-options { display: none; }
.tray--cards .tray__foot .act--primary { margin-left: auto; }
#stage[data-card-tray] .action {
  visibility: hidden;
  pointer-events: none;
}
@media (hover: hover) {
  .options--cards .option:hover { transform: translateY(-5px); }
}

@media (orientation: portrait), (max-width: 700px) {
  #stage { font-size: 14px; overflow: clip; gap: 12px; padding: 10px 8px; }
  #hud-opp { order: 1; }
  #res-opp { order: 2; }
  #base-opp { order: 3; }
  #field-nav { order: 4; }
  #stage > .action { order: 5; }
  #chain { order: 6; }
  #fields { order: 7; }
  #base-you { order: 8; }
  #hud-you { order: 9; }
  #res-you { order: 10; }
  #handzone { order: 11; }
  #piles-opp { order: 12; }
  #piles-you { order: 13; }
  #stage > .field-nav {
    position: sticky; top: 0; z-index: 45; display: flex; gap: 4px;
    background: #10161cf5; padding: 6px 0; width: 100%;
  }
  .field-nav__button {
    flex: 1 1 0; min-height: 54px; padding: 5px 6px; border-bottom: 3px solid #525960;
    color: #bbbeb4; background: #141b22d9; border-radius: 4px 4px 0 0;
  }
  .field-nav__button strong { display: block; font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
  .field-nav__button small { display: block; font-size: 10px; margin-top: 4px; }
  .field-nav__button[aria-current="true"] { border-color: #f4d28b; color: #fff0c6; background: #353a40; }
  .field-nav__button.is-destination { box-shadow: inset 0 0 0 2px #6fc0ff; }
  #stage > .fields {
    display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; padding: 4px 0 10px; align-items: stretch;
    scrollbar-color: #ae9560 #151b21; scrollbar-width: thin;
  }
  .fields .field { flex: 0 0 94%; scroll-snap-align: start; }
  .field__body { display: flex; min-height: 340px; }
  .field__scene { height: 261.7%; width: auto; left: 50%; transform: translate(-50%, -19.8%); opacity: .14; }
  .field__head { min-height: 56px; padding: 6px; }
  .field__name { font-size: 15px; }
  .field__score { font-size: 10px; }
  .field__btn { min-width: 32px; min-height: 40px; }
  .lane { flex: 1; align-content: center; padding: 14px 10px; min-height: 140px; }
  .lane .unit, .units .unit { width: 80px; }
  .lane, .units { gap: 7px; }
  .might__n { font-size: 17px; }
  .dmg__n { font-size: 13px; }
  .unit:hover { --lift: 0px; --scale: 1; }
  .shelf { padding: 8px; }
  .shelf__label { margin-bottom: 8px; }
  .res { flex-wrap: wrap; gap: 16px; padding: 8px 12px; }
  .res__label { font-size: 10px; }
  .rune { width: 12px; height: 17px; }
  .runes { gap: 3px; flex-wrap: wrap; }
  .res__row { min-height: 24px; gap: 4px; }
  .gem { width: 23px; height: 27px; font-size: 15px; }
  .piles { flex-direction: row; }
  .piles::before { content: 'Rival'; align-self: center; width: 30px; font-size: 10px; }
  .piles--you::before { content: 'You'; }
  .pile { flex: 1; display: flex; justify-content: center; gap: 6px; min-height: 44px; }
  .pile__icon { width: 18px; height: 18px; }
  .hand { gap: 4px; scroll-snap-type: x proximity; }
  .hand .card { flex: 0 0 104px; width: 104px; margin: 0; --fan: 0deg !important; scroll-snap-align: start; }
  .hand .card:hover { transform: none; }
  .tray--cards { bottom: 8px; width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .tray--cards .tray__prompt { font-size: 18px; }
  .options--cards { max-height: 60dvh; gap: 14px; padding: 14px; }
  .options--cards .option { flex-basis: 180px; }
  .option-item { flex-basis: 180px; }
  .option-inspect { min-height: 44px; }
  .tray--cards .tray__foot { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
}
@media (max-height: 500px) {
  .options--cards .option { flex-basis: 124px; }
  .option-item { flex-basis: 124px; }
  .options--cards .option__label { min-height: 0; font-size: 11px; }
  .tray--cards .tray__head { padding: 8px 12px; }
}
@media (pointer: coarse), (max-width: 900px) {
  #devbar select,
  .devbar__play,
  .devbar__lesson,
  .devbar__audio {
    min-height: 44px;
  }

  #devbar select {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
@media (orientation: portrait) and (max-width: 700px) {
  #devbar {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 8px;
    padding: 6px 10px;
  }
  #devbar label { min-width: 0; }
  #devbar select { width: 100%; }
  .audioctl {
    grid-column: 2 / 4; margin-left: 0; justify-content: flex-end; min-width: 0;
  }
  #audio-volume { width: min(112px, 34vw); }
  .devbar__legacy { grid-column: 3; grid-row: 1; align-self: center; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .options--cards .option { transition: none; }
}

/* Battlefield scans are landscape cards; give their artwork the whole choice. */
#choice-popup.battlefield-choice {
  width: min(1680px, calc(100vw - 16px));
  padding: 12px;
}
#choice-popup.battlefield-choice #tray-close,
#choice-popup.battlefield-choice #toggle-options { display: none; }
#choice-popup.battlefield-choice .options--cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 20px);
  max-height: calc(100dvh - 140px);
  padding: 12px 4px;
}
#choice-popup.battlefield-choice .option {
  width: 100%; min-width: 0; gap: 0;
  background: transparent; border: 0; box-shadow: none;
}
#choice-popup.battlefield-choice .option__art {
  aspect-ratio: auto; height: auto;
  background: transparent; box-shadow: none; border-radius: 0;
}
#choice-popup.battlefield-choice .option__art img {
  display: block; width: 100%; height: auto; margin: 0;
}
@media (max-width: 600px) {
  #choice-popup.battlefield-choice .options--cards { grid-template-columns: 1fr; }
}