/* ============================== MOBILE LAYOUT ==============================
   Applied ONLY under 521px (see the <link media> in index.html) — desktop
   never parses this file. App-style: the controls live in a fixed bar in the
   bottom thumb zone, the stage fills the middle, and every piece of text is
   sized for a hand-held screen. The base stylesheet's small tweaks still
   apply; anything here wins because it loads after. */

body {
  padding: 56px 0 232px;   /* top: clear the account tab · bottom: clear the app bar */
  gap: 6px;
}

h1 { font-size: 27px; letter-spacing: .06em; }

/* question on its own line, sides on the next — both properly readable */
#topicLine { font-size: 16.5px; line-height: 1.4; padding: 0 14px; max-width: none; }
#topicLine .tq { display: block; font-size: 18.5px; margin-bottom: 3px; }
#topicLine .tsep { display: none; }
#topicLine .tsides { display: block; font-size: 16.5px; }

/* ---- the app bar: meter + pull buttons + status pill + buy, pinned ---- */
#controls {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: grid; grid-template-columns: 1fr auto; gap: 9px 10px; align-items: center;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 2.5px solid var(--ink);
  box-shadow: 0 -3px 0 rgba(24, 21, 18, .12);
}
#meterWrap, #btns { grid-column: 1 / -1; }
#buyBtn { grid-column: 1 / -1; justify-self: center; }

#meterWrap { width: 100%; }
#meter { height: 17px; }
#mPct { font-size: 14.5px; margin-top: 4px; }

#btns { width: 100%; gap: 10px; margin: 0; }
button.pull {
  flex: 1; font-size: 21px; padding: 15px 6px;
  white-space: nowrap; letter-spacing: .04em;
}

/* the cooldown timer owns a FULL line — it was truncating beside the buy
   button — and reads at proper size */
#cool.show { grid-column: 1 / -1; }
#cool { width: 100%; min-width: 0; height: 36px; }
#coolTxt {
  font-size: 15px; letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

#buyBtn { align-self: center; font-size: 15.5px; padding: 8px 22px; margin: 0; }

/* ---- battle stats: one fact per line, readable ---- */
#battleMeta { font-size: 16px; line-height: 1.75; padding: 0 16px; }
#battleMeta .bm { display: block; }
#battleMeta .bsep { display: none; }

/* ---- site menu: bigger touch targets ---- */
#siteMenu { top: 6px; left: 8px; }
#menuBtn { width: 46px; height: 42px; }
#menuPanel a { font-size: 16.5px; padding: 11px 18px; }
#menuPanel a.legal { font-size: 15px; padding: 10px 18px; }
.note { display: none; }

/* the win banner rides the (smaller) stage */
#winTxt { font-size: 34px; }

/* shop sheet above the app bar */
#shop { z-index: 30; align-items: flex-end; }
#shopCard {
  width: 100vw; max-width: none; border-radius: 22px 26px 0 0 / 26px 22px 0 0;
  border-bottom: none; box-shadow: none;
  padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
}
#shopCard h2 { font-size: 24px; }
.shopSub { font-size: 14px; }
.pack { font-size: 18px; padding: 15px 18px; }
.pack span { font-size: 14px; }
#shopClose { font-size: 15px; padding: 8px; }

/* ---- landscape phones: short viewport, wide screen. The bottom bar would
   eat half the height — controls go back into the flow, compact header. ---- */
@media (orientation: landscape) {
  body { padding: 8px 0 20px; }
  #controls { position: static; display: flex; flex-wrap: wrap; justify-content: center;
              align-items: center; gap: 8px 14px; border-top: none; box-shadow: none;
              padding: 0 12px; background: none; }
  #meterWrap { width: min(560px, 92vw); }
  #btns { width: auto; }
  button.pull { font-size: 17px; padding: 10px 26px; }
  #cool { width: auto; min-width: 260px; }
  h1 { font-size: 22px; }
  #topicLine .tq { display: inline; font-size: 15.5px; }
  #topicLine .tsep { display: inline; }
  #topicLine .tsides { display: inline; font-size: 15.5px; }
  #battleMeta { font-size: 14px; }
  #battleMeta .bm { display: inline; }
  #battleMeta .bsep { display: inline; }
}