/* ==========================================================================
   MOBILE (TCG style, <= 640px). Inspired by Pokemon TCG Pocket / Marvel Snap / Runeterra: art first, little text,
   dense card grids, chips instead of forms, thumb-sized buttons. Everything is scoped to the phone width, so the desktop is untouched.
   ========================================================================== */
@media (max-width: 640px) {
  .shell { padding: .6rem .6rem 5.4rem; }
  .page-head { margin-bottom: .5rem; }
  .page-head p { display: none; }
  .page-head h1 { font-size: 1.9rem; margin: 0; }
  .page-head .kicker { margin-bottom: .3rem; font-size: .6rem; }
  .panel { padding: .9rem; }
  .btn { min-height: 44px; }
  .tut-banner { padding: .3rem .6rem; font-size: .74rem; justify-content: space-between; flex-wrap: nowrap; }
  .tut-banner span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .tut-banner form { display: inline; }

  /* ---- Collection: card wall first -------------------------------------------------- */
  .card-grid, .card-grid.small { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem .35rem; }
  .cell-cap { font-size: .62rem; padding: 0; }
  .cell-cap .rarity.compact { font-size: 0; gap: 0; } .cell-cap .rarity.compact i { font-size: .6rem; min-width: 1.3rem; padding: .2rem .3rem; }
  .cell .cbrief { display: none; }
  .rar-summary { display: flex; gap: .4rem; overflow-x: auto; margin: .6rem -.2rem 0; padding: 0 .2rem .2rem; scrollbar-width: none; }
  .rar-summary::-webkit-scrollbar { display: none; }
  .rar-summary .rs { flex: none; min-width: 74px; padding: .35rem .5rem; }
  .filters { margin: .5rem 0; padding: .6rem; }
  .filters form.row { display: grid; grid-template-columns: 1fr 1fr 44px; gap: .4rem; }
  .filters form.row .search { grid-column: 1 / -1; }
  .filters form.row select { width: 100%; min-height: 44px; }
  .filters form.row .btn { grid-column: 3; grid-row: 2; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .filters form.row .btn .ico { margin: 0; font-size: 1rem; }
  .filters .tabs { display: flex; width: 100%; }
  .filters .row.between { flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
  .filters .tabs a { flex: 1; text-align: center; padding: .7rem .4rem; }

  /* ---- Card page: the card is the hero, the rest a sheet below ----------------------- */
  .detail { display: block; }
  .hero-card { width: min(300px, 78%); }
  .detail-art { margin-bottom: .8rem; }
  .detail .stack > .panel { border-radius: 14px 14px 3px 3px; }

  /* ---- Packs and rows: full-width big targets ----------------------------------------- */
  .pack-grid, .packs-grid { grid-template-columns: 1fr; }
  .stats { gap: .5rem; }
  .row.between { gap: .5rem; }
}

/* ---- phones, round 3: ONE screen. The board takes at most ~44% of the height, the skills are a swipe strip, the confirm and end buttons
   sit right under them, so nothing needs scrolling to play a turn. The explanations fold away (they stay on desktop). ---- */
@media (max-width: 640px) {
  :root { --bt-mh: 44svh; }
  .bt-legend { display: none; }
  .bt-field-wrap { margin-inline: -.6rem; }
  .bt-stage { max-height: var(--bt-mh); justify-items: center; }
  .bt-board { margin-inline: auto; flex: none; }
  .bt-map.w320, .bt-map.w288, .bt-map.w400 { width: 100%; }
  body.bt-zoomed .bt-stage { max-height: none; }
  body.bt-zoomed .bt-board { width: 180% !important; }
  .bt-charge { margin: .35rem 0 .3rem; }
  .bt-tools { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x proximity; gap: .4rem; padding-bottom: .2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .bt-tools::-webkit-scrollbar { display: none; }
  .bt-tool { flex: 0 0 8.6rem; scroll-snap-align: start; min-height: 0; padding: .45rem .55rem; }
  .bt-tool .bt-tb small { display: none; }
  .bt-tool .bt-tf kbd { display: none; }
  .bt-act { padding: .5rem .6rem; margin-top: .4rem; }
  .bt-act .bt-act-h, .bt-act .bt-steps, .bt-act .bt-fx-list, .bt-act .bt-flavor, .bt-act .bt-coords { display: none; }
  .bt-act .bt-hint, .bt-act .bt-bad { margin: 0 0 .4rem; font-size: .8rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bt-act .bt-chip { font-size: .7rem; }
  .bt-act form.row { position: static; box-shadow: none; border: 0; padding: 0; margin: 0 0 .4rem; background: none; }
  .bt-act form.row .btn.primary { min-height: 2.8rem; }
  .bt-endrow { display: grid; grid-template-columns: 1fr 1fr auto; gap: .4rem; }
  .bt-endrow .btn { min-height: 2.5rem; padding-inline: .5rem; font-size: .74rem; width: 100%; justify-content: center; }
  .shell { padding-bottom: 5rem; }
}
@media (max-width: 640px) {
.bt-board.ar10 { width: min(100%, calc(var(--bt-mh) * 0.50)); }
.bt-board.ar11 { width: min(100%, calc(var(--bt-mh) * 0.55)); }
.bt-board.ar12 { width: min(100%, calc(var(--bt-mh) * 0.60)); }
.bt-board.ar13 { width: min(100%, calc(var(--bt-mh) * 0.65)); }
.bt-board.ar14 { width: min(100%, calc(var(--bt-mh) * 0.70)); }
.bt-board.ar15 { width: min(100%, calc(var(--bt-mh) * 0.75)); }
.bt-board.ar16 { width: min(100%, calc(var(--bt-mh) * 0.80)); }
.bt-board.ar17 { width: min(100%, calc(var(--bt-mh) * 0.85)); }
.bt-board.ar18 { width: min(100%, calc(var(--bt-mh) * 0.90)); }
.bt-board.ar19 { width: min(100%, calc(var(--bt-mh) * 0.95)); }
.bt-board.ar20 { width: min(100%, calc(var(--bt-mh) * 1.00)); }
.bt-board.ar21 { width: min(100%, calc(var(--bt-mh) * 1.05)); }
.bt-board.ar22 { width: min(100%, calc(var(--bt-mh) * 1.10)); }
.bt-board.ar23 { width: min(100%, calc(var(--bt-mh) * 1.15)); }
.bt-board.ar24 { width: min(100%, calc(var(--bt-mh) * 1.20)); }
.bt-board.ar25 { width: min(100%, calc(var(--bt-mh) * 1.25)); }
.bt-board.ar26 { width: min(100%, calc(var(--bt-mh) * 1.30)); }
.bt-board.ar27 { width: min(100%, calc(var(--bt-mh) * 1.35)); }
.bt-board.ar28 { width: min(100%, calc(var(--bt-mh) * 1.40)); }
.bt-board.ar29 { width: min(100%, calc(var(--bt-mh) * 1.45)); }
.bt-board.ar30 { width: min(100%, calc(var(--bt-mh) * 1.50)); }
.bt-board.ar31 { width: min(100%, calc(var(--bt-mh) * 1.55)); }
.bt-board.ar32 { width: min(100%, calc(var(--bt-mh) * 1.60)); }
.bt-board.ar33 { width: min(100%, calc(var(--bt-mh) * 1.65)); }
.bt-board.ar34 { width: min(100%, calc(var(--bt-mh) * 1.70)); }
.bt-board.ar35 { width: min(100%, calc(var(--bt-mh) * 1.75)); }
.bt-board.ar36 { width: min(100%, calc(var(--bt-mh) * 1.80)); }
.bt-board.ar37 { width: min(100%, calc(var(--bt-mh) * 1.85)); }
.bt-board.ar38 { width: min(100%, calc(var(--bt-mh) * 1.90)); }
.bt-board.ar39 { width: min(100%, calc(var(--bt-mh) * 1.95)); }
.bt-board.ar40 { width: min(100%, calc(var(--bt-mh) * 2.00)); }
.bt-board.ar41 { width: min(100%, calc(var(--bt-mh) * 2.05)); }
.bt-board.ar42 { width: min(100%, calc(var(--bt-mh) * 2.10)); }
.bt-board.ar43 { width: min(100%, calc(var(--bt-mh) * 2.15)); }
.bt-board.ar44 { width: min(100%, calc(var(--bt-mh) * 2.20)); }
.bt-board.ar45 { width: min(100%, calc(var(--bt-mh) * 2.25)); }
.bt-board.ar46 { width: min(100%, calc(var(--bt-mh) * 2.30)); }
.bt-board.ar47 { width: min(100%, calc(var(--bt-mh) * 2.35)); }
.bt-board.ar48 { width: min(100%, calc(var(--bt-mh) * 2.40)); }
.bt-board.ar49 { width: min(100%, calc(var(--bt-mh) * 2.45)); }
.bt-board.ar50 { width: min(100%, calc(var(--bt-mh) * 2.50)); }
.bt-board.ar51 { width: min(100%, calc(var(--bt-mh) * 2.55)); }
.bt-board.ar52 { width: min(100%, calc(var(--bt-mh) * 2.60)); }
.bt-board.ar53 { width: min(100%, calc(var(--bt-mh) * 2.65)); }
.bt-board.ar54 { width: min(100%, calc(var(--bt-mh) * 2.70)); }
.bt-board.ar55 { width: min(100%, calc(var(--bt-mh) * 2.75)); }
.bt-board.ar56 { width: min(100%, calc(var(--bt-mh) * 2.80)); }
.bt-board.ar57 { width: min(100%, calc(var(--bt-mh) * 2.85)); }
.bt-board.ar58 { width: min(100%, calc(var(--bt-mh) * 2.90)); }
.bt-board.ar59 { width: min(100%, calc(var(--bt-mh) * 2.95)); }
.bt-board.ar60 { width: min(100%, calc(var(--bt-mh) * 3.00)); }
}

/* the quick-navigation bar has no place in a battle: it covers the buttons. Leave with the menu or the lobby link. */
@media (max-width: 640px) {
  body:has(#bt-root) .tabbar { display: none; }
  body:has(#bt-root) .shell { padding-bottom: .6rem; }
  .bt-act form.row, .bt-endrow { scroll-margin-bottom: .5rem; }
}

/* ---- mobile round 3: tap targets and the narrowest phones ---- */
@media (max-width: 640px) {
  .foot-links { gap: .1rem .4rem; }
  .foot-links a { display: inline-block; padding: .75rem .5rem; }
  .bt-zoom { padding: .6rem .9rem; font-size: .8rem; }
  .bt-act form.row { flex-wrap: wrap; }
  .bt-act form.row .btn { flex: 1 1 auto; min-width: 0; }
  details > summary { min-height: 2.6rem; display: flex; align-items: center; }
  .rp-bar .btn.small, .fr-act .btn.small, .sig-x button { min-height: 2.6rem; }
  .fr-list li { padding: .6rem; }
  .fr-act { margin-left: 0; width: 100%; }
  .fr-act form { flex: 1; }
  .fr-act .btn, .fr-act input[type=text] { flex: 1; min-width: 0; }
}
@media (max-width: 380px) {
  .bt-tools { grid-template-columns: minmax(0, 1fr); }
  .rp-bar { gap: .35rem; }
  .rp-bar .btn.small { flex: 1 1 40%; }
}
@media (max-width: 380px) {
  .bt-act form.row { gap: .35rem; }
  .bt-act form.row .btn { white-space: normal; padding-inline: .5rem; letter-spacing: .04em; font-size: .72rem; text-align: center; justify-content: center; }
}
@media (max-width: 640px) {
  .bt-act, .bt-act > * { min-width: 0; max-width: 100%; }
  .bt-act .bt-hint, .bt-act .bt-bad { overflow-wrap: anywhere; }
}
@media (max-width: 640px) { .bt-act .row { flex-wrap: wrap; } .bt-act .row > form { flex: 1 1 auto; } .bt-act .row > form > .btn { width: 100%; } }
@media (max-width: 380px) { .bt-act div.row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bt-act div.row > form:last-child:nth-child(3) { grid-column: 1 / -1; } }