/* Portrait battle board: a match on an upright phone. main.js fit() sets body.portrait (only while a match is on
   screen), sizes #stage to 900 x --ph and js/ui.js lays the zones out in two rows a side. Loaded last so it wins over
   the landscape body.mobile rules. */

body.portrait #board0 { width: 900px; }
body.portrait #game .divider { top: calc(var(--ph) / 2); }
body.portrait #game::after { top: calc(var(--ph) / 2); }

/* middle band: round medallion left, prompts centre, End Turn orb right */
body.portrait #centerMed { left: 84px; top: calc(var(--ph) / 2); transform: scale(1.15); }
body.portrait #phaseTag { left: 8px; right: auto; top: calc(var(--ph) / 2 + 64px); width: 200px; }
body.portrait #phaseTag span { font-size: 15px; padding: 6px 12px; }
body.portrait #hud #endTurn.eorb { right: 20px; top: calc(var(--ph) / 2 - 85px); width: 170px; height: 170px; font-size: 22px; }
body.portrait #game .eorb .eo-l { max-width: 130px; }
body.portrait #banner { top: calc(var(--ph) / 2 - 32px); }
body.portrait #banner .msg { font-size: 26px; max-width: 620px; text-align: center; }
body.portrait #promptBar { top: calc(var(--ph) / 2 + 44px); max-width: 860px; }
body.portrait #promptBar .ptxt { font-size: 22px; max-width: 500px; }
body.portrait #sweep { top: calc(var(--ph) / 2 - 70px); }
body.portrait #sweep .t { font-size: 76px; }
body.portrait #intentBox { left: 190px; top: calc(var(--ph) / 2 - 130px); width: 470px; }

/* player plates: opponent top-left, you bottom-left above the hand */
body.portrait #game .bplate.s1 { top: 84px; left: 16px; width: 320px; }
body.portrait #game .bplate.s0 { top: calc(var(--ph) - 252px); left: 16px; }
body.portrait #game .crystalbar { transform: none; left: auto; }

body.portrait #log { left: 16px; right: 16px; top: 90px; width: auto; max-height: 44%; font-size: 20px; }
body.portrait #tracker { left: 16px; top: 90px; width: 560px; max-height: 60%; font-size: 19px; }

/* overlays on a narrow stage */
body.portrait :is(#mulligan, #triumph) .box { max-width: 880px; padding: 28px 22px; }
body.portrait :is(#mulligan, #triumph) .cards { flex-wrap: wrap; justify-content: center; max-width: 840px; }
body.portrait #mulligan .cards .card { width: 190px !important; height: 266px !important; }
body.portrait #over.lc-over .box { width: 860px; max-width: calc(100% - 32px); flex-direction: column; gap: 22px; text-align: center; padding: 40px 30px; }
body.portrait #over .ov-main { width: 100%; }
body.portrait #over .actions { justify-content: center; flex-wrap: wrap; }
body.portrait #over .big { font-size: 96px; }
body.portrait #game .vs-side { width: 100%; height: 56%; left: 0; right: 0; }
body.portrait #game .vs-side.b { top: 0; bottom: auto; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
body.portrait #game .vs-side.a { top: auto; bottom: 0; clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%); }
body.portrait #game .vs-side .vs-art { left: 50% !important; right: auto !important; margin-left: -320px; }
body.portrait #game .vs-side::after { display: none; }

/* no "rotate your phone" gate any more: Auto/Portrait lay out upright, and a player who pinned Landscape gets the
   wide stage letterboxed (Settings > Screen layout stays reachable) */
#rotate { display: none !important; }
body.portrait #over :is(.ov-facts, .rewards, .ov-xp) { justify-content: center; }

/* Battle menu, both orientations (Arena style): ⏩ stays out, Deck / Log / Sound / Quit fold into ☰ */
#hud #menuBtn, #hud #skipBtn { position: absolute; top: 10px; z-index: 862; display: grid; place-items: center; width: 46px; height: 36px; padding: 0; font-size: 17px; line-height: 1; border-radius: 10px; }
#hud #menuBtn { right: 16px; }
#hud #skipBtn { right: 70px; }
#hud :is(#menuBtn, #skipBtn).on { background: linear-gradient(180deg, rgba(242, 193, 78, .4), rgba(150, 100, 20, .35)); border-color: var(--gold-1); color: #fff4d6; }
#hud #topbar { display: none; top: 54px; right: 16px; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; min-width: 150px; border-radius: 14px; background: rgba(10, 5, 24, .95); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .6); transform-origin: 100% 0; }
#hud #topbar.open { display: flex; animation: lcMenuIn .18s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes lcMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
body.mobile #hud :is(#menuBtn, #skipBtn) { top: 14px; width: 96px; height: 76px; font-size: 32px; border-radius: 16px; }
body.mobile #hud #skipBtn { right: 124px; }
body.mobile #hud #topbar { top: 102px; min-width: 260px; padding: 12px; gap: 10px; border-radius: 20px; }
body.portrait #hud :is(#menuBtn, #skipBtn) { top: 16px; height: 80px; }
body.portrait #hud #topbar { top: 108px; }
body.portrait #hud #topbar .btn { font-size: 22px; padding: 18px 22px; }
body.fx-low #hud #topbar.open { animation: none; }

/* orientation switch: the new layout fades in instead of jumping (main.js fit adds .lc-reflow for 420ms) */
#stage.lc-reflow { animation: lcReflow .4s ease-out both; }
@keyframes lcReflow { from { opacity: 0; filter: blur(6px); } }
body.fx-low #stage.lc-reflow { animation-duration: .15s; }