/* Arena — Campaign. Parchment, wood, wax seals. Phone-first 390x844. camp1 */
@font-face { font-family: "Cinzel Deco"; src: url("assets/fonts/CinzelDecorative-Bold.ttf"); font-weight: 700; }
@font-face { font-family: "Crimson"; src: url("assets/fonts/CrimsonText-Regular.ttf"); }
@font-face { font-family: "Crimson"; src: url("assets/fonts/CrimsonText-Bold.ttf"); font-weight: 700; }
:root { --ink: #2a1a0c; --ink-soft: #5a4028; --brass: #b8893a; --wood: #6b4226; --wax: #9c1e1e; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }   /* ns2: lock page scroll */
[hidden] { display: none !important; }
body.camp-page { font-family: "Crimson", Georgia, serif; color: var(--ink); height: 100%; min-height: 0;
  background: radial-gradient(ellipse at 50% -10%, rgba(255,190,110,.28), transparent 55%), linear-gradient(180deg, #3a2a1c 0%, #2a1d13 60%, #1c140d 100%); }
.pill-row { display: flex; gap: 5px; flex: 1; justify-content: center; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px; background: linear-gradient(180deg, #f3e2c0, #d9bf8e); border: 2px solid var(--brass); font-weight: 700; font-size: .92rem; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.camp { max-width: 520px; margin: 0 auto; padding: 66px 10px 30px; }
.parchment { background: linear-gradient(180deg, #f7e8c8, #e8d0a0); border: 2px solid #a07a3e; border-radius: 14px; box-shadow: inset 0 0 30px rgba(120,80,30,.25), 0 8px 20px rgba(0,0,0,.4); }
.panel { padding: 16px 14px; }
.title { font-family: "Cinzel Deco", serif; text-align: center; margin: 4px 0 8px; font-size: 1.45rem; }
.center { text-align: center; } .fine { font-size: .88rem; color: var(--ink-soft); } .sub { margin: 2px 0; }
.big { font-size: 1.25rem; font-weight: 700; }
a.plain { color: #f3d9a4; }
.camp > .screen > .fine a.plain { color: #f3d9a4; }
.btn { font-family: "Crimson", serif; font-weight: 700; cursor: pointer; border-radius: 10px; border: 2px solid var(--brass); color: #fbe7bf; text-decoration: none; text-align: center;
  background: linear-gradient(180deg, #7a4d2b, #4f2f16); box-shadow: 0 4px 0 #2d1b0b; padding: 10px 14px; font-size: 1rem; touch-action: manipulation; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #2d1b0b; }
.btn[disabled] { opacity: .45; }
.btn.small { font-size: .9rem; padding: 7px 10px; }
.btn.big { font-size: 1.12rem; padding: 13px; flex: 1; }
.btn.wide { display: block; width: 100%; margin-top: 8px; }
.btn.huge { display: block; width: 100%; font-size: 1.3rem; padding: 15px; margin: 12px 0 4px; font-family: "Cinzel Deco", serif; }
.btn.wax { background: radial-gradient(circle at 35% 30%, #d0413a, var(--wax) 60%, #5a0e0e); border-color: #e9c27a; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.btn.danger { background: linear-gradient(180deg, #8a2b22, #5a160f); }
.row2 { display: flex; gap: 8px; margin-top: 8px; }
.big-seal { width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: radial-gradient(circle at 35% 30%, #d0413a, var(--wax) 60%, #5a0e0e); border: 3px solid #e9c27a; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.big-seal.gold { background: radial-gradient(circle at 35% 30%, #f3d77a, #b8872a 70%); }

/* map */
.chap-head { position: relative; text-align: center; padding: 30px 12px 10px; margin-top: 24px; }
.chap-head .seal { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 700 22px "Cinzel Deco", serif; color: #fbe7bf; background: radial-gradient(circle at 35% 30%, #d0413a, var(--wax) 60%, #5a0e0e); border: 3px solid #e9c27a; }
.chap-head h1 { font-family: "Cinzel Deco", serif; font-size: 1.25rem; margin: 2px 0; }
.road { position: relative; margin: 12px 0 4px; padding: 10px 0; border-radius: 14px; min-height: 560px;
  background: linear-gradient(180deg, rgba(247,232,200,.95), rgba(222,196,146,.95)); border: 2px solid #a07a3e; box-shadow: inset 0 0 40px rgba(120,80,30,.35); display: flex; flex-direction: column-reverse; gap: 4px; }
.node { position: relative; left: var(--x); width: 118px; height: 50px; border-radius: 26px; border: 3px solid #7a5a2e; background: linear-gradient(180deg, #f3e2c0, #cfae72);
  display: flex; align-items: center; gap: 6px; padding: 0 10px; font-family: "Crimson", serif; cursor: pointer; box-shadow: 0 3px 0 #5a3d1c; }
.node .num { font: 700 1.2rem "Cinzel Deco", serif; min-width: 24px; }
.node .stars { color: #b8872a; font-size: .95rem; letter-spacing: -1px; flex: 1; }
.node .lean { font-size: 1rem; }
.node.locked { opacity: .55; filter: grayscale(.6); }
.node.next { border-color: var(--wax); animation: glow 1.4s infinite; }
.node.sel { outline: 3px solid #e9c46a; outline-offset: 2px; }
.node.boss { width: 140px; background: linear-gradient(180deg, #e9c46a, #b8872a); }
@keyframes glow { 50% { box-shadow: 0 0 16px 4px rgba(208,65,58,.6), 0 3px 0 #5a3d1c; } }

/* pick */
.slots { display: flex; gap: 8px; }
.slot { flex: 1; border: 2px dashed #a07a3e; border-radius: 12px; padding: 8px 6px; text-align: center; background: rgba(255,255,255,.25); cursor: pointer; }
.slot.on { border-style: solid; border-color: var(--wax); background: rgba(255,240,210,.7); }
.slot img { height: 110px; object-fit: contain; display: block; margin: 0 auto; }
.slot b { display: block; font-size: 1.1rem; } .slot small { display: block; font-size: .82rem; }
.clsrow { display: flex; gap: 3px; margin: 6px 0 4px; }
.cls { flex: 1; border: 2px solid var(--c); border-radius: 8px; background: #fff6e2; padding: 4px 0; font-size: 1rem; cursor: pointer; }
.cls span { display: block; font: 700 .7rem "Crimson", serif; }
.cls.on { background: var(--c); color: #fff; }
.hint { color: var(--ink-soft); font-size: .78rem; }
.roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.roster p { grid-column: 1 / -1; margin: 4px 0 0; }
.rh { border: 2px solid #a07a3e; border-radius: 10px; background: #fff6e2; padding: 4px; cursor: pointer; font: 700 .9rem "Crimson", serif; }
.rh img { height: 58px; display: block; margin: 0 auto; object-fit: contain; }
.rh.in { background: #e9d3a5; border-color: var(--wax); }

/* stage */
.stage-strip { display: flex; align-items: center; gap: 5px; padding: 8px 10px; }
.stage-strip b { font-family: "Cinzel Deco", serif; margin-right: 4px; }
.pip { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #a07a3e; background: #fff6e2; font-size: 1rem; opacity: .6; }
.pip.done { background: #cdb07a; opacity: .9; } .pip.now { border-color: var(--wax); opacity: 1; box-shadow: 0 0 0 3px rgba(208,65,58,.35); }
.tagchip { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: #2f6b3f; color: #f3ffe8; font-weight: 700; font-size: .85rem; }
.boost-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; align-items: center; }
.boost-row span { padding: 3px 9px; border-radius: 999px; background: #f3e2c0; border: 1px solid var(--brass); font-size: .85rem; font-weight: 700; }
.boost-row small { color: #d8c3a0; font-size: .75rem; }
.mg-intro p { font-size: 1.08rem; }
.mg-wrap { text-align: center; }
.mg-score { color: #fbe7bf; font: 700 1.6rem "Cinzel Deco", serif; margin: 2px 0 6px; }
.mg-score small { display: block; font: 400 .9rem "Crimson", serif; color: #d8c3a0; }
#mgCanvas { width: 100%; max-width: 380px; border-radius: 12px; border: 3px solid #7a5a2e; box-shadow: 0 6px 16px rgba(0,0,0,.5); touch-action: none; background: #f5dfae; }
.mg-ctrl { display: flex; gap: 10px; margin-top: 10px; }
.mg-ctrl .btn.big { font-size: 1.3rem; padding: 18px 8px; }
.mg-ctrl p { color: #d8c3a0; flex: 1; }
.newbest { font-weight: 700; color: #7a2a1e; font-size: 1.1rem; }
.cards { display: flex; gap: 8px; }
.card { flex: 1; min-height: 190px; border-radius: 12px; border: 3px solid #a07a3e; background: linear-gradient(180deg, #fff6e2, #ead3a1); padding: 10px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: "Crimson", serif; box-shadow: 0 4px 0 #6b4b22; }
.card .ci { font-size: 2.2rem; } .card b { font-size: 1.05rem; } .card small { font-size: .85rem; color: var(--ink-soft); }
.cc-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 8px 0; } .cc-row b { width: 100%; }

/* swap + fight */
.foe-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 4px 0 6px; }
.foe-chip { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--c); background: #fff6e2; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.foe-chip.boss { width: 60px; height: 60px; font-size: 32px; }
.foe-chip i { position: absolute; right: -6px; bottom: -6px; font-size: 14px; font-style: normal; }
.swap { display: flex; gap: 8px; }
.hero-card { flex: 1; border: 3px solid #a07a3e; border-radius: 12px; background: #fff6e2; padding: 8px 5px; cursor: pointer; font-family: "Crimson", serif; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hero-card img { height: 104px; object-fit: contain; }
.hero-card.on { border-color: var(--wax); box-shadow: 0 0 0 3px rgba(208,65,58,.35); background: #fff0d0; }
.hero-card.down { opacity: .5; }
.mu-tag { font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #fff; background: #7a6a55; }
.hero-card.adv .mu-tag { background: #2f6b3f; } .hero-card.dis .mu-tag { background: #9c1e1e; }
.hpbar { position: relative; width: 100%; height: 14px; border-radius: 7px; background: #4a2f1a; overflow: hidden; border: 1px solid #2a1a0c; }
.hpbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #6fcf6f, #2f8a3f); }
.hpbar.foe i { background: linear-gradient(180deg, #e46a5a, #9c1e1e); }
.hpbar span { position: relative; font-size: .72rem; color: #fff; font-weight: 700; line-height: 14px; }
.tag-on { font-weight: 700; color: #2f6b3f; }
.fight { color: #fbe7bf; }
.arena { display: flex; gap: 8px; min-height: 300px; padding: 10px; border-radius: 14px; border: 3px solid #7a5a2e;
  background: radial-gradient(ellipse at 50% 80%, rgba(255,210,140,.25), transparent 60%), linear-gradient(180deg, #5a4a36, #3a2c1e); }
.side { flex: 1; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.side.foes { flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; }
.fighter { text-align: center; } .fighter img { height: 96px; object-fit: contain; } .fighter b { display: block; font-size: .9rem; }
.fighter.bench { opacity: .45; } .fighter.bench img { height: 60px; } .fighter.down img { filter: grayscale(1); }
.fighter.third { outline: 2px dashed #e9c46a; border-radius: 10px; } .fighter.third img { height: 70px; }
.foe { position: relative; width: 62px; text-align: center; } .foe.boss { width: 120px; }
.foe .fe { font-size: 36px; display: block; } .foe.boss .fe { font-size: 64px; }
.foe .fc { position: absolute; top: 0; right: 4px; font-style: normal; font-size: 14px; }
.foe.dead { opacity: .25; }
.foe .pop { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-weight: 700; color: #ffd27a; text-shadow: 0 2px 0 #000; animation: pop .8s ease-out; }
@keyframes pop { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translate(-50%, -4px); opacity: 1; } }
.tag-banner { margin: 8px 0 0; padding: 6px 10px; border-radius: 10px; background: #2f6b3f; color: #f3ffe8; font-weight: 700; text-align: center; }
.tag-banner.third { background: #7a5a1e; }
.round { margin: 6px 0 2px; text-align: center; color: #d8c3a0; }
.log { list-style: none; padding: 8px 10px; margin: 0; border-radius: 10px; background: rgba(0,0,0,.35); min-height: 96px; font-size: .98rem; }
.log li.adv b { color: #8ff08f; } .log li.dis b { color: #ffb0a0; } .log li.back { color: #f0b8a8; } .log li.ko { color: #ffd27a; font-weight: 700; }

/* results + boards + store */
.stars-big { text-align: center; font-size: 2.6rem; color: #d4a017; margin: 0; letter-spacing: 4px; } .stars-big .dim { color: #b9a582; }
.rewards { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0; }
.rewards span { padding: 6px 12px; border-radius: 10px; background: #fff6e2; border: 2px solid var(--brass); font-weight: 700; font-size: 1.05rem; }
.rewards .piece { border-color: var(--wax); }
.board { margin: 10px 0; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.35); border: 1px solid #b89a62; }
.board.hl { border: 2px solid var(--wax); }
.board h3 { margin: 0 0 4px; text-align: center; } .board .cols { display: flex; gap: 8px; } .board .cols > div { flex: 1; }
.board h4 { margin: 0; font-size: .85rem; text-align: center; color: var(--ink-soft); }
.board ol { list-style: none; padding: 0; margin: 2px 0; font-size: .88rem; }
.board li { display: flex; gap: 4px; padding: 2px 0; border-bottom: 1px dashed rgba(90,64,40,.25); }
.board li b { flex: 1; font-weight: 600; } .board li em { font-style: normal; font-weight: 700; }
.board li.you { background: #f3d99a; font-weight: 700; }
.board .si { font-size: .7rem; color: #8a6a40; font-style: italic; font-weight: 400; }
.store-item { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: #fff6e2; border: 2px solid var(--brass); }
.store-item .si-ic { font-size: 2.2rem; } .store-item p { margin: 2px 0; }
.si-buy { display: flex; flex-direction: column; gap: 4px; align-items: center; } .price { font-weight: 700; }

/* sheet, tips, toast, dev */
.sheet-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(20,10,4,.65); display: flex; align-items: flex-end; justify-content: center; }
.sheet { position: relative; width: min(100vw, 520px); max-height: 86vh; overflow: auto; padding: 22px 14px 18px; border-radius: 18px 18px 0 0; }
.sheet-close { position: absolute; right: 10px; top: 8px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--brass); background: #f3e2c0; font-size: 1rem; cursor: pointer; }
.sheet h2 { font-family: "Cinzel Deco", serif; margin: 4px 0 8px; text-align: center; }
.tip { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); z-index: 95; width: min(92vw, 360px); padding: 12px 14px; text-align: center; }
.tip p { margin: 0 0 8px; font-size: 1.05rem; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; padding: 10px 16px; border-radius: 10px; background: rgba(30,16,6,.92); color: #fbe7bf; border: 1px solid var(--brass); }
.dev { margin-top: 18px; padding: 10px; border-radius: 10px; background: rgba(0,0,0,.35); color: #d8c3a0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dev .note { flex-basis: 100%; font-size: .78rem; margin: 4px 0 0; }
.slot{min-width:0}.slot img{max-width:100%}

/* 🧪 Test tools drawer */
.test-tools{display:block;margin-top:22px;border:2px dashed #b8893a}
.test-tools summary{cursor:pointer;font-weight:700;color:#f3d9a4;list-style:none;padding:4px 2px;font-size:1rem}
.test-tools summary::-webkit-details-marker{display:none}
.test-tools summary::after{content:" ▸";}
.test-tools[open] summary::after{content:" ▾";}
.test-tools:not([open]){background:rgba(0,0,0,.25);padding:8px 10px}
.test-tools[open]{display:flex}
.test-tools .tt-label{flex-basis:100%;margin:0 0 4px;color:#ffcf8a;font-weight:700;font-size:.9rem}

/* ================= camp5: in-world pass (painted battlefields, full-body heroes, Hollow shades) ================= */
body.camp-page { background: #1c140d; }
.world-bg { position: fixed; inset: 0; z-index: -1; background: #2a1d13 center 80% / cover no-repeat; transition: filter .6s; }
.world-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(20,12,6,.05), rgba(20,12,6,.6) 80%), linear-gradient(180deg, rgba(20,12,6,.25), rgba(20,12,6,.45)); }
.world-bg[data-mode="map"] { filter: blur(3px) saturate(.9) brightness(.8); transform: scale(1.03); }
.world-bg[data-mode="dim"] { filter: blur(2px) brightness(.72); transform: scale(1.02); }
.world-bg[data-mode="glow"] { filter: brightness(.85) saturate(1.05); }
.world-bg[data-mode="night"] { filter: grayscale(.5) brightness(.5); }
.parchment { background: url("assets/map/parchment_warm.jpg") center / cover, linear-gradient(180deg, #f7e8c8, #e8d0a0); border: 3px solid #8a6230;
  box-shadow: inset 0 0 36px rgba(120,80,30,.35), inset 0 0 0 2px rgba(255,240,210,.5), 0 10px 28px rgba(0,0,0,.55); }
.panel.scroll { position: relative; }

/* ---- map: a painted chapter map on parchment ---- */
.road { display: block; position: relative; min-height: 0; height: 780px; margin: 14px 0 6px; padding: 0; border-radius: 16px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,245,220,.0), rgba(90,60,20,.35) 90%), url("assets/map/parchment_warm.jpg") center / cover; border: 4px solid #6b4226;
  box-shadow: inset 0 0 60px rgba(110,70,25,.55), 0 10px 26px rgba(0,0,0,.55); }
.road::before { content: ""; position: absolute; inset: 0; background: url("assets/map/painted/map_table.jpg") center / cover; opacity: .18; mix-blend-mode: multiply; pointer-events: none; }
.map-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-path polyline { fill: none; stroke: #6b4a26; stroke-width: 3.2; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .8; }
.mark { position: absolute; margin: 0; transform: translate(-50%, -50%); pointer-events: none; text-align: center; }
.mark img { width: 100%; display: block; filter: drop-shadow(0 6px 6px rgba(60,35,10,.45)) sepia(.15); }
.mark figcaption { font: 700 .8rem "Cinzel Deco", serif; color: #4a2e14; margin-top: -4px; text-shadow: 0 1px 0 rgba(255,240,210,.8); white-space: nowrap; }
.mark.ruin img { filter: drop-shadow(0 6px 6px rgba(60,35,10,.45)) sepia(.4) grayscale(.35) brightness(.9); }
.mark.hollow img { filter: drop-shadow(0 6px 8px rgba(40,20,60,.6)) grayscale(.7) brightness(.62) sepia(.2) hue-rotate(200deg); }
.mark.cave img { filter: drop-shadow(0 6px 6px rgba(60,35,10,.45)) sepia(.25); }
.node { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 62px; height: 62px; padding: 0; border-radius: 50%; display: block; gap: 0;
  border: 3px solid #e9c27a; background: radial-gradient(circle at 35% 30%, #d0413a, var(--wax) 60%, #5a0e0e); box-shadow: 0 4px 0 #3a0a0a, 0 6px 12px rgba(0,0,0,.45); color: #fbe7bf; z-index: 3; }
.node .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 1.35rem "Cinzel Deco", serif; min-width: 0; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.node .stars { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 3px; white-space: nowrap; color: #d4a017; font-size: .95rem; letter-spacing: 0; text-shadow: 0 1px 0 #fff3d0, 0 0 3px rgba(0,0,0,.25); flex: none; }
.node .stars i { font-style: normal; color: rgba(90,60,30,.35); text-shadow: none; }
.node .lean { position: absolute; right: -10px; top: -8px; width: 26px; height: 26px; border-radius: 50%; background: #f3e2c0; border: 2px solid #8a6230; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.node.done { background: radial-gradient(circle at 35% 30%, #f3d77a, #b8872a 70%, #7a5316); color: #4a2e14; border-color: #fff0c0; box-shadow: 0 4px 0 #5a3d1c, 0 6px 12px rgba(0,0,0,.4); }
.node.done .num { text-shadow: 0 1px 0 rgba(255,240,200,.7); }
.node.locked { background: radial-gradient(circle at 35% 30%, #a39a8c, #6f665a 70%, #4a4238); border-color: #b9ab8c; opacity: 1; filter: none; color: #e9e0cc; }
.node.locked .num { opacity: .6; }
.node.next { animation: seal 1.6s infinite; }
.node.sel { outline: none; box-shadow: 0 0 0 4px #fff3c8, 0 0 0 7px rgba(156,30,30,.55), 0 6px 14px rgba(0,0,0,.45); }
.node.boss { width: 80px; height: 80px; background: radial-gradient(circle at 35% 30%, #8a5ad0, #3e2466 65%, #1c0f33); border-color: #e9c27a; }
.node.boss .num { font-size: 2rem; }
@keyframes seal { 50% { transform: translate(-50%, -50%) scale(1.08); } }
.chap-head { background-color: transparent; }
#scrMap > .fine a.plain { text-shadow: 0 1px 2px #000; }

/* ---- hero pick / swap: cutouts on parchment ---- */
.slot img { height: 150px; filter: drop-shadow(0 6px 5px rgba(60,35,10,.4)); }
.rh img { height: 70px; filter: drop-shadow(0 3px 3px rgba(60,35,10,.35)); }
.scout { position: relative; height: 150px; margin: 6px 0 10px; border-radius: 12px; overflow: hidden; background: center 88% / cover no-repeat; border: 3px solid #6b4226; box-shadow: inset 0 0 30px rgba(0,0,0,.45); }
.scout::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,12,6,.35), transparent 30%, transparent 70%, rgba(20,12,6,.35)); pointer-events: none; }
.scout-row { position: absolute; left: 6%; right: 4%; bottom: 8px; top: 8px; display: flex; align-items: flex-end; justify-content: center; }
.scout-foe { position: relative; height: var(--h); display: flex; align-items: flex-end; margin: 0 -6px; }
.scout-foe img { height: 100%; filter: drop-shadow(0 4px 4px rgba(0,0,0,.6)); }
.scout-foe.fly { align-self: center; }
.scout-foe i { position: absolute; top: 0; right: 4px; font-style: normal; font-size: 13px; width: 22px; height: 22px; border-radius: 50%; background: #f3e2c0; border: 2px solid var(--c); display: flex; align-items: center; justify-content: center; }
.who { font-family: "Cinzel Deco", serif; margin: 8px 0 6px; }
.hero-card { background: linear-gradient(180deg, rgba(255,250,236,.85), rgba(236,214,170,.9)); box-shadow: 0 4px 0 #6b4b22; }
.hero-card .hc-art { display: block; height: 170px; width: 100%; background: radial-gradient(ellipse at 50% 92%, rgba(60,35,10,.35), transparent 45%); }
.hero-card .hc-art img { height: 100%; width: 100%; object-fit: contain; object-position: bottom; }
.hero-card img { height: auto; }
.mu-tag { border: 2px solid rgba(255,240,200,.6); box-shadow: 0 2px 0 rgba(0,0,0,.25); }

/* ---- battle stage (full width, painted field) ---- */
#scrStage { position: relative; }
.bstage { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: max(440px, calc(100vh - 150px)); height: max(440px, calc(100svh - 150px)); overflow: hidden; color: #fbe7bf;
  background: #1c140d; border-top: 3px solid #6b4226; border-bottom: 3px solid #6b4226; box-shadow: 0 10px 30px rgba(0,0,0,.6); user-select: none; }
.bs-bg { position: absolute; inset: -2%; background: center bottom / cover no-repeat; transform: scale(1.04); transition: transform 1.4s ease-out; }
.bstage.entering .bs-bg { transform: scale(1.12); }
.bs-air { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.28), transparent 22%, transparent 70%, rgba(0,0,0,.2)); }
.bs-units { position: absolute; inset: 0; }
.bs-front { position: absolute; left: 0; right: 0; bottom: 0; height: 12%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(10,6,2,.45)); z-index: 40; }
.unit { position: absolute; transition: left .7s ease-in-out, bottom .7s ease-in-out, height .7s ease-in-out, width .7s ease-in-out, opacity .6s, filter .6s; }
.bstage.entering .unit.hero { opacity: 0; transform: translateX(-60px); }
.bstage.entering .unit.foe { opacity: 0; transform: translateX(70px); }
.unit { transform: none; opacity: 1; }
.bstage .unit { transition: left .7s ease-in-out, bottom .7s ease-in-out, height .7s ease-in-out, width .7s ease-in-out, opacity .9s, transform .9s ease-out, filter .6s; }
.u-move, .u-body { position: absolute; inset: 0; }
.u-body { transform-origin: 50% 100%; }
.u-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; pointer-events: none; }
.u-tint { position: absolute; inset: 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: bottom; mask-position: bottom; pointer-events: none; mix-blend-mode: soft-light; }
.u-shadow { position: absolute; left: 12%; right: 12%; bottom: -3.5%; height: 8%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.62), rgba(0,0,0,.25) 55%, transparent 72%); }
.unit.fly .u-shadow { bottom: -95%; opacity: .55; transform: scale(.7); }
/* scene light on the heroes: warm key from the field's light, darker toward the feet (no sticker look) */
.bstage .hero .u-art { filter: drop-shadow(0 0 1px rgba(0,0,0,.4)) saturate(.94) contrast(1.02); }
.bstage[data-field="old_road"] .unit .u-tint { background: linear-gradient(100deg, rgba(40,60,80,.45), rgba(255,230,170,.55) 85%), linear-gradient(0deg, rgba(20,30,10,.6), transparent 30%); }
.bstage[data-field="ruined_keep"] .unit .u-tint { background: linear-gradient(90deg, rgba(90,50,90,.55), rgba(255,170,90,.7) 90%), linear-gradient(0deg, rgba(30,15,10,.6), transparent 30%); }
.bstage[data-field="ruined_keep"] .unit .u-art { filter: saturate(.9) sepia(.12) brightness(.93); }
.bstage[data-field="forge_caverns"] .unit .u-tint { background: linear-gradient(90deg, rgba(60,20,10,.7), rgba(255,120,40,.85) 95%), linear-gradient(0deg, rgba(255,110,30,.5), transparent 25%); }
.bstage[data-field="forge_caverns"] .unit .u-art { filter: saturate(.95) sepia(.2) brightness(.8) contrast(1.05); }
.bstage[data-field="hollow_hall"] .unit .u-tint { background: linear-gradient(90deg, rgba(150,170,255,.55), rgba(40,40,110,.75) 70%), linear-gradient(0deg, rgba(10,10,40,.6), transparent 30%); }
.bstage[data-field="hollow_hall"] .unit .u-art { filter: saturate(.7) brightness(.72) contrast(1.05); }
.unit.hero.bench .u-body { filter: brightness(.5) saturate(.55) blur(.6px); }
.unit.hero.down .u-body { filter: grayscale(1) brightness(.55); transform: translateY(6%) rotate(-78deg); opacity: .75; }
.unit.foe.dead { opacity: 0; pointer-events: none; }
.unit.acting { z-index: 35 !important; }
.u-tag { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; transition: opacity .4s; }
.u-tag b { font: 700 .88rem "Crimson", serif; color: #fff3d6; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.7); white-space: nowrap; }
.u-hp { position: relative; display: block; width: min(140px, 90%); min-width: 64px; height: 11px; border-radius: 6px; background: #2a160c; border: 2px solid #c9a052; box-shadow: 0 2px 4px rgba(0,0,0,.6); overflow: hidden; }
.foe .u-hp { min-width: 54px; }
.u-hp i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(180deg, #8fe07a, #3a9a3a); transition: width .35s ease-out; }
.foe .u-hp i { background: linear-gradient(180deg, #ee7a5a, #a8261c); }
.unit.hero.front .u-hp { width: 150px; height: 13px; }
.unit.bench .u-tag, .unit.down .u-tag, .unit.dead .u-tag, .unit.ko .u-tag { opacity: 0; }
.unit.foe:not(.boss) .u-tag b { font-size: .78rem; }
.bstage[data-swarm="1"] .unit.foe .u-tag b { display: none; }
.bs-fx { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.dmg { position: absolute; transform: translate(-50%, 0); font: 700 1.9rem "Cinzel Deco", Georgia, serif; color: #fff1c4; white-space: nowrap;
  -webkit-text-stroke: 1.5px #3a1a08; text-shadow: 0 3px 0 #3a1a08, 0 0 12px rgba(0,0,0,.6); animation: dmgUp 1.3s ease-out forwards; }
.dmg.adv { color: #ffd84a; font-size: 2.4rem; } .dmg.dis { color: #d8cfc0; font-size: 1.5rem; } .dmg.splash { font-size: 1.3rem; color: #ffe3a0; }
.dmg.hurt { color: #ff8a70; }
@keyframes dmgUp { 0% { transform: translate(-50%, 10px) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -6px) scale(1.15); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -60px) scale(1); opacity: 0; } }
.proj { position: absolute; width: 0; height: 0; }
.proj.arrow::before, .proj.arrow-foe::before { content: ""; position: absolute; left: -26px; top: -2px; width: 52px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #d8d0c0 0 14%, #6b4a2a 14% 86%, #cfd4da 86%); box-shadow: 0 0 4px rgba(0,0,0,.5); }
.proj.arrow-foe::before { background: linear-gradient(90deg, #cfd4da 0 14%, #3a3228 14% 86%, #9bff5a 86%); }
.proj.orb::before, .proj.bolt-foe::before { content: ""; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, #c9b8ff 30%, rgba(120,90,255,.6) 55%, transparent 72%); box-shadow: 0 0 24px 8px rgba(150,120,255,.55); }
.proj.orb::after { content: ""; position: absolute; left: -60px; top: -5px; width: 56px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, transparent, rgba(190,170,255,.7)); }
.proj.bolt-foe::before { background: radial-gradient(circle, #fff 0 16%, #d7a8ff 32%, rgba(170,60,220,.6) 55%, transparent 72%); box-shadow: 0 0 20px 6px rgba(190,90,255,.5); }
.burst { position: absolute; width: 0; height: 0; }
.burst::before { content: ""; position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; animation: burst .5s ease-out forwards; animation-duration: inherit; }
.burst.slash::before { border-radius: 0; background: none; border-top: 6px solid #fff6e0; border-radius: 50% 50% 0 0; transform: rotate(-35deg); box-shadow: 0 -4px 14px rgba(255,240,200,.8); }
.burst.magic::before { background: radial-gradient(circle, rgba(255,255,255,.95) 0 12%, rgba(190,170,255,.8) 28%, rgba(120,90,255,.3) 50%, transparent 68%); }
.burst.splash::before { background: radial-gradient(circle, rgba(255,230,160,.7) 0 16%, rgba(255,190,90,.3) 40%, transparent 62%); }
@keyframes burst { from { transform: scale(.3) rotate(-35deg); opacity: 1; } to { transform: scale(1.35) rotate(-20deg); opacity: 0; } }
.bs-top { position: absolute; left: 0; right: 0; top: 0; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.bs-wave { font: 700 1.05rem "Cinzel Deco", serif; padding: 6px 14px; border-radius: 8px; color: #3a220e; background: url("assets/map/parchment_warm.jpg") center / cover; border: 2px solid #8a6230; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.bstage .round { margin: 0; color: #fff3d6; text-shadow: 0 1px 3px #000; font-weight: 700; }
.bs-ctrl { margin-left: auto; display: flex; gap: 6px; }
.bs-ctrl .btn { min-width: 52px; min-height: 42px; font-size: 1rem; }
.bs-banners { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); z-index: 60; width: min(92%, 560px); }
.bs-banners .tag-banner { box-shadow: 0 4px 10px rgba(0,0,0,.45); border: 2px solid #cfe8b0; }
.win-banner { margin: 40px auto 0; width: max-content; padding: 10px 40px; font: 700 2.2rem "Cinzel Deco", serif; color: #4a2a0c; background: url("assets/map/parchment_warm.jpg") center / cover;
  border: 3px solid #b8872a; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.6); animation: winIn .6s ease-out; }
@keyframes winIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bs-caption { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60; max-width: 92%; padding: 8px 18px; border-radius: 10px; font-size: 1.08rem; color: #3a220e; text-align: center;
  background: url("assets/map/parchment_warm.jpg") center / cover; border: 2px solid #8a6230; box-shadow: 0 4px 10px rgba(0,0,0,.5); opacity: 0; transition: opacity .25s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-caption:empty { display: none; }
.bs-caption.show { opacity: 1; }
.bs-caption .adv { color: #2f6b3f; font-weight: 700; } .bs-caption .dis { color: #7a2a1e; font-weight: 700; } .bs-caption .back { color: #7a2a1e; } .bs-caption .ko { color: #7a2a1e; font-weight: 700; }
.bstage.skipping .unit, .bstage.skipping .u-hp i { transition: none; }

/* ---- stage header over the world ---- */
#scrStage .stage-strip { margin-bottom: 4px; }
.boost-row small { color: #f3dcb4; text-shadow: 0 1px 2px #000; }
.mg-intro, .mg-done, #cardPick, #swapScreen { margin-top: 6px; }
.mg-intro .big-seal, .mg-done .big-seal { width: 84px; height: 84px; font-size: 40px; }

/* ---- Endless Run in-world ---- */
.mg-wrap.in-world { width: min(100vw - 20px, 980px); margin-left: 50%; transform: translateX(-50%); }
.mg-wrap.in-world #mgCanvas { max-width: none; width: 100%; border: 5px solid #6b4226; border-radius: 14px; box-shadow: 0 0 0 2px #c9a052, 0 12px 30px rgba(0,0,0,.6); background: #9cc0dc; }
.mg-wrap.in-world .mg-score { display: inline-block; padding: 4px 22px; border-radius: 10px; color: #3a220e; background: url("assets/map/parchment_warm.jpg") center / cover; border: 2px solid #8a6230; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.mg-wrap.in-world .mg-score small { color: #5a4028; }
.mg-wrap.in-world .mg-ctrl { max-width: 560px; margin: 12px auto 0; }
.mg-wrap.in-world .mg-ctrl .btn.big { font-size: 1.4rem; padding: 20px 8px; }

/* ---- results: the pair beside the scroll ---- */
#scrResult .panel { position: relative; margin-top: 150px; }
.res-heroes { position: absolute; left: 0; right: 0; top: -150px; height: 190px; pointer-events: none; }
.res-heroes img { position: absolute; bottom: 0; height: 100%; filter: drop-shadow(0 8px 6px rgba(0,0,0,.55)); }
.res-heroes .rh-0 { left: 8%; } .res-heroes .rh-1 { right: 8%; }
.res-heroes.lost img { filter: grayscale(1) brightness(.6) drop-shadow(0 8px 6px rgba(0,0,0,.55)); }
.rewards span { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,248,230,.85); }
.rewards img { width: 30px; height: 30px; object-fit: contain; }
@media (min-width: 900px) {
  #scrResult .panel { margin-top: 30px; }
  .res-heroes { position: fixed; top: auto; bottom: 4vh; left: 0; right: 0; height: 70vh; z-index: -1; }
  .res-heroes img { filter: brightness(.9) saturate(.92) drop-shadow(0 10px 8px rgba(0,0,0,.55)); }
  .res-heroes::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2vh; height: 5vh; background: radial-gradient(ellipse 160px 24px at calc(50% - 440px) 50%, rgba(0,0,0,.55), transparent), radial-gradient(ellipse 160px 24px at calc(50% + 440px) 50%, rgba(0,0,0,.55), transparent); }
  .res-heroes .rh-0 { left: calc(50% - 560px); } .res-heroes .rh-1 { right: calc(50% - 560px); left: auto; }
  .road { height: 820px; }
}
@media (max-width: 480px) {
  .road { height: 720px; }
  .bs-wave { font-size: .9rem; padding: 5px 10px; }
  .bs-top .round { font-size: .9rem; }
  .dmg { font-size: 1.5rem; } .dmg.adv { font-size: 1.9rem; }
  .bs-caption { font-size: .95rem; bottom: 10px; }
  .u-tag b { font-size: .78rem; }
  .unit.hero.front .u-hp { width: 110px; }
  .hero-card .hc-art { height: 150px; }
  .bstage[data-swarm="1"] .unit.foe .u-hp { min-width: 40px; width: 70%; height: 8px; border-width: 1.5px; }
  .dmg.ko-stamp { font-size: 1.5rem; }
}

/* KO stamp: a red wax seal word over the falling unit */
.dmg.ko-stamp { font: 900 2rem "Cinzel Deco", Georgia, serif; color: #fff4dc; background: radial-gradient(circle at 40% 35%, #c8402c, #7e1a10 70%); padding: .1em .45em; border-radius: 40% 46% 42% 48%;
  box-shadow: 0 3px 8px rgba(0,0,0,.6), inset 0 -3px 0 rgba(0,0,0,.25); text-shadow: 0 2px 0 #4a0c06; letter-spacing: .04em; z-index: 5; }

.unit.tag-in .u-tag { bottom: auto; top: var(--tagTop); }

/* ================= camp10: camera behind the heroes (default; ?view=side keeps the camp9 stage) ================= */
.bstage.behind .u-move { transform-origin: 50% 100%; }
.bstage.behind.entering .unit.hero { opacity: 0; transform: translateY(22%) scale(1.06); }
.bstage.behind.entering .unit.foe { opacity: 0; transform: translateY(-3%) scale(.86); }
.bstage.behind .u-shadow { left: 8%; right: 8%; bottom: -3%; height: 7%; }
.bstage.behind .unit.foe .u-shadow { bottom: calc(-1 * var(--shadowDrop, 3.5%)); }
.bstage.behind .unit.hero .u-shadow { left: 2%; right: 2%; bottom: -4%; height: 9%; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.7), rgba(0,0,0,.3) 55%, transparent 72%); }
.bstage.behind .unit.fly .u-shadow { transform: scale(.55); opacity: .45; }
/* backs face the field: the key light is ahead of them, so the backs sit a touch in shadow; the rim still catches the field light */
.bstage.behind .hero .u-art { filter: drop-shadow(0 0 1px rgba(0,0,0,.45)) saturate(.92) brightness(.93) contrast(1.03); }
.bstage.behind[data-field="ruined_keep"] .unit.hero .u-art { filter: saturate(.88) sepia(.12) brightness(.86); }
.bstage.behind[data-field="forge_caverns"] .unit.hero .u-art { filter: saturate(.95) sepia(.2) brightness(.76) contrast(1.05); }
.bstage.behind[data-field="hollow_hall"] .unit.hero .u-art { filter: saturate(.7) brightness(.68) contrast(1.05); }
/* partner: a step behind and to the side, a little dimmed */
.bstage.behind .unit.hero.partner .u-body { filter: brightness(.8) saturate(.86); }
.bstage.behind .unit.hero.bench .u-body { filter: brightness(.64) saturate(.7) blur(.4px); }
.bstage.behind .unit.hero.down .u-body { filter: grayscale(1) brightness(.6); transform: translateY(10%) scaleY(.62) rotate(-11deg); opacity: .78; }
/* no back view on disk: the front cutout, mirrored, under a dark overlay (flagged in backs.json "missing") */
.unit.hero.fb-front .u-art, .unit.hero.fb-front .u-tint { transform: scaleX(-1); }
.bstage.behind .unit.hero.fb-front .u-art { filter: brightness(.38) saturate(.5) contrast(1.1); }
/* tags: heroes over their heads; swarm bars staggered (--tagLift) and slimmer */
.bstage.behind .unit.foe .u-tag { bottom: calc(100% + 4px + var(--tagLift, 0px)); }
.bstage.behind .unit.foe.tag-in .u-tag { bottom: auto; }
.bstage.behind[data-swarm="1"] .unit.foe .u-hp { width: 74%; min-width: 46px; max-width: 96px; height: 9px; }
.bstage.behind .unit.foe.boss .u-tag b { font-size: 1rem; }
.bstage.behind .unit.foe.boss .u-hp { width: min(190px, 70%); height: 13px; }
.bstage.behind .unit.acting { z-index: 33 !important; }
.bstage.behind .unit.foe.acting { z-index: 27 !important; }
/* caption: bottom right, over the field, clear of the heroes' feet */
.bstage.behind .bs-caption { left: auto; right: 12px; transform: none; max-width: min(56%, 520px); }
/* depth projectiles scale about their centre */
.bstage.behind .proj { transform-origin: 0 0; }
.bstage.behind .burst::before { transform-origin: 50% 50%; }
.bstage.behind .burst { transform: scale(var(--bs, 1)); }
@media (max-width: 640px) {
  .bstage.behind .bs-caption { max-width: 60%; white-space: normal; font-size: .86rem; padding: 6px 10px; line-height: 1.2; }
  .bstage.behind[data-swarm="1"] .unit.foe .u-hp { min-width: 38px; max-width: 64px; height: 8px; }
  .bstage.behind .dmg { font-size: 1.35rem; } .bstage.behind .dmg.adv { font-size: 1.7rem; } .bstage.behind .dmg.splash { font-size: 1.05rem; }
}

/* scouting strip: the hero who goes in, from behind, looking at the wave */
.scout-hero { position: absolute; left: 2%; bottom: -6%; height: 96%; z-index: 2; filter: brightness(.88) saturate(.92) drop-shadow(0 4px 5px rgba(0,0,0,.6)); pointer-events: none; }
.scout.with-hero .scout-row { left: 26%; }

/* Tag Team: parchment ribbon + wax seal (was a flat green bar) */
.tag-banner, .bs-banners .tag-banner { position: relative; margin: 8px auto 0; width: max-content; max-width: 100%; padding: 7px 18px 7px 44px; border-radius: 6px; color: #3a220e; font: 700 1rem "Crimson", Georgia, serif; text-align: center;
  background: url("assets/map/parchment_warm.jpg") center / cover, #ead3a1; border: 2px solid #8a6230; box-shadow: inset 0 0 0 2px rgba(255,240,210,.45), inset 0 0 14px rgba(120,80,30,.35), 0 4px 10px rgba(0,0,0,.5); }
.tag-banner::before { content: "🤝"; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: radial-gradient(circle at 35% 30%, #d0413a, var(--wax) 60%, #5a0e0e); border: 3px solid #e9c27a; box-shadow: 0 3px 6px rgba(0,0,0,.5); }
.tag-banner.third::before { content: "🤝"; background: radial-gradient(circle at 35% 30%, #f3d77a, #b8872a 70%, #7a5316); }
.tag-banner.third { background: url("assets/map/parchment_warm.jpg") center / cover, #ead3a1; }
.tagchip { background: radial-gradient(circle at 35% 30%, #d0413a, var(--wax) 60%, #5a0e0e); color: #fbe7bf; border: 2px solid #e9c27a; }
.tag-on { color: #7a1a14; }
/* behind view: numbers rise a short way so they stay on the body, under the name/HP tag */
.bstage.behind .dmg { animation-name: dmgUpB; }
@keyframes dmgUpB { 0% { transform: translate(-50%, 12px) scale(.6); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.15); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -24px) scale(1); opacity: 0; } }
/* behind view: banners sit top-left under the wave chip, clear of the boss name tag in the middle */
.bstage.behind .bs-banners { left: 12px; transform: none; top: 56px; width: auto; max-width: min(92%, 520px); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bstage.behind .bs-banners .tag-banner { margin: 4px 0 0 10px; font-size: .95rem; }
.bstage.behind .bs-banners .win-banner { align-self: center; }
@media (max-width: 640px) { .bstage.behind .bs-banners .tag-banner { font-size: .85rem; padding: 5px 12px 5px 38px; } .bstage.behind .tag-banner::before { width: 34px; height: 34px; font-size: 16px; } }
.bstage.behind .bs-banners .win-banner { position: absolute; top: 70px; left: calc(50vw - 12px - 140px); width: 280px; padding: 10px 0; text-align: center; margin: 0; }
.bstage.behind .u-tag { transform: translateX(calc(-50% + var(--tagDX, 0px))); }

/* camp11: fight-first loop — boosts for the next battle, points, pick-3 cards with "Take all three" */
.boost-row .br-label { font-family: "Cinzel Deco", Georgia, serif; font-size: .82rem; color: #fbe7bf; text-shadow: 0 1px 2px #000; margin-right: 2px; }
.boost-row[data-for="next"] span { background: #fff1c9; border-color: #b8862f; }
.pts-won, .pts-have { font-size: 1.15rem; margin: 4px 0 8px; }
.pts-won b, .pts-have b { color: var(--wax, #9c1e1e); font-size: 1.35rem; }
.next-boosts { margin: 8px auto 10px; padding: 8px 12px; max-width: 420px; border: 2px dashed #a07a3e; border-radius: 12px; background: rgba(255, 246, 226, .55); }
.next-boosts h3 { margin: 0 0 2px; text-align: center; font-size: 1.05rem; }
.next-boosts .big { margin: 2px 0; font-size: 1.25rem; font-weight: 700; }
.mg-intro .big-note { font-weight: 700; }
.card .price-pts { margin-top: auto; padding: 3px 10px; border-radius: 999px; background: #7a1a14; color: #fbe7bf; font-weight: 700; font-size: .9rem; box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); }
.card.short, .card:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }
#cardPick .take-all { margin-top: 12px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.1rem; }
#cardPick .gem-price { padding: 2px 10px; border-radius: 999px; background: #2e3a66; color: #e8eeff; font-weight: 700; }
#cardPick #btnSkipCard { margin-top: 10px; }
.next-up { font-size: 1.05rem; margin: 8px 0 4px; }

/* camp12: one hero on screen (the picked one); both only while Tag Team is on */
.bstage .unit.hero.off { opacity: 0; transform: translateX(-38%) translateY(4%) scale(.9); pointer-events: none; }
.bstage.side .unit.hero.off { transform: translateX(-60%) scale(.94); }
.bstage .unit.hero.off .u-tag { opacity: 0; }
/* the picked hero's name tag: a small parchment label with a wax edge */
.unit.hero.front .u-tag b { padding: 2px 12px; border-radius: 6px; color: #3a220e; text-shadow: none; font-size: .95rem;
  background: linear-gradient(180deg, #fbeccb, #e6cc96); border: 2px solid #8a6230; border-left: 5px solid var(--wax, #9c1e1e); box-shadow: 0 2px 5px rgba(0,0,0,.55); }
.unit.hero.partner .u-tag b { font-size: .8rem; opacity: .9; }
/* Tag Team: the partner a step back, smaller and dimmer; whoever is striking lights up and comes to the front */
.bstage .unit.hero.partner .u-body { filter: brightness(.74) saturate(.82); transition: filter .25s; }
.bstage .unit.hero.acting .u-body { filter: brightness(1.12) saturate(1.05) drop-shadow(0 0 10px rgba(255, 222, 150, .55)); }
.bstage .unit.hero.acting { z-index: 34 !important; }
.bs-ctrl .swap-btn { background: linear-gradient(180deg, #fbeccb, #e2c58c); color: #3a220e; border-color: #8a6230; font-weight: 700; }
.bs-ctrl .swap-btn:disabled { opacity: .75; }
@media (max-width: 640px) { .bstage.side .unit.hero.partner .u-tag b { display: none; } }

/* ================= camp13: levels, points, upgradable cards, card effects ================= */
.lvl-chip, .pts-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .9rem; background: #3b2a14; color: #fbe7bf; box-shadow: inset 0 -2px 0 rgba(0,0,0,.35); margin: 0 4px; }
.pts-chip { background: #7a1a14; }
.cchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .85rem; font-weight: 700; border: 2px solid var(--tc, #a07a3e); background: rgba(255,248,230,.9); color: #3b2a14; }
.t-common { --tc: #8a7a5c; } .t-rare { --tc: #2f6fb4; } .t-epic { --tc: #7b3fb0; } .t-legendary { --tc: #c9901c; }
.odds span.t-common, .odds span.t-rare, .odds span.t-epic, .odds span.t-legendary { color: var(--tc); font-weight: 700; }
.card.t-common, .card.t-rare, .card.t-epic, .card.t-legendary { border-color: var(--tc); position: relative; }
.card.t-epic { background: linear-gradient(180deg, #f7ecff, #e0c9f0); } .card.t-legendary { background: linear-gradient(180deg, #fff4cf, #f0cf7a); box-shadow: 0 4px 0 #6b4b22, 0 0 16px rgba(230,170,40,.6); }
.card.t-rare { background: linear-gradient(180deg, #eef5ff, #cfdff2); }
.card .tier { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--tc); padding: 1px 8px; border-radius: 999px; }
.card .cname { font-size: 1.05rem; line-height: 1.1; text-align: center; }
.card .upnote { color: #7a1a14 !important; font-weight: 700; }
.card.up::after { content: "▲"; position: absolute; top: 6px; left: 8px; color: #7a1a14; font-size: .9rem; }
.card .who { font-style: italic; }
.odds { font-size: .88rem; margin: 10px 0 4px; }
.take-all .gem-price { font-weight: 800; margin-left: 6px; }
.pts-have b, .pts-won b { font-size: 1.3rem; color: #7a1a14; }
.lvl-won { font: 700 1.2rem "Cinzel Deco", Georgia, serif; color: #7a1a14; margin: 0 0 4px; }
@media (max-width: 480px) { .cards { gap: 5px; } .card { padding: 8px 3px; min-height: 210px; } .card .ci { font-size: 1.8rem; } .card small { font-size: .78rem; } .card .cname { font-size: .95rem; } }
/* effects */
.ring { position: absolute; width: 0; height: 0; }
.ring::before { content: ""; position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -.5); width: calc(var(--r) * 2); height: var(--r); border-radius: 50%; border: 5px solid rgba(255,220,140,.95); box-shadow: 0 0 18px rgba(255,200,90,.8), inset 0 0 12px rgba(255,200,90,.6);
  animation: ringOut .7s ease-out forwards; animation-duration: inherit; }
.ring.splash-ring::before { border-color: rgba(150,200,255,.95); box-shadow: 0 0 18px rgba(120,170,255,.8), inset 0 0 14px rgba(120,170,255,.6); }
.ring.whirl-ring::before { border-style: dashed; border-color: rgba(255,245,220,.95); border-width: 7px; }
.ring.crit-ring::before { border-color: rgba(255,90,60,.95); box-shadow: 0 0 20px rgba(255,80,40,.9); }
.ring.revive-ring::before { border-color: rgba(255,255,210,.95); box-shadow: 0 0 30px rgba(255,250,180,.95); }
@keyframes ringOut { from { transform: scale(.2); opacity: 1; } 70% { opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
.bounce-line { position: absolute; height: 5px; transform-origin: 0 50%; margin-top: -2px; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,236,150,.95), rgba(255,255,255,.2)); box-shadow: 0 0 12px rgba(255,220,120,.9); animation: bounceFade .7s ease-out forwards; }
@keyframes bounceFade { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.proj.spark::before { content: ""; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, #ffe38a 45%, transparent 70%); box-shadow: 0 0 14px 4px rgba(255,220,120,.8); }
.proj.split-shot { filter: drop-shadow(0 0 6px rgba(255,230,140,.9)); }
.burst.cleave::before { background: none; border-radius: 50% 50% 0 0; border-top: 8px solid #ffd9b0; transform: rotate(20deg); box-shadow: 0 -5px 16px rgba(255,160,90,.9); }
.burst.thorn::before { background: radial-gradient(circle, rgba(140,220,110,.8) 0 18%, rgba(60,140,50,.3) 45%, transparent 62%); }
.dmg.crit { color: #ff5a3c; font-size: 2.2rem; text-shadow: 0 2px 0 #4a0c06, 0 0 12px rgba(255,120,60,.9); }
.dmg.x-double { color: #ffe7c0; } .dmg.x-rico { color: #ffe38a; } .dmg.x-split { color: #fff3b0; } .dmg.x-cleave { color: #ffc9a0; } .dmg.x-whirl { color: #fff; } .dmg.x-splash { color: #bfe0ff; }
.dmg.thorns { color: #a9f08c; font-size: 1.3rem; } .dmg.shield { color: #a8d4ff; font-size: 1.2rem; } .dmg.revive { color: #fffbd0; font-size: 1.8rem; text-shadow: 0 0 14px rgba(255,250,170,.95), 0 2px 0 #5a4a10; }
.bs-caption .revive { color: #fff6b0; }
.boost-row .pts-chip { background: #7a1a14; color: #fbe7bf; border-color: #c9a25a; margin: 0; }
.boost-row .cchip { border: 2px solid var(--tc, #a07a3e); background: rgba(255,248,230,.95); color: #3b2a14; }

/* ================= camp14: collection + deck builder ================= */
.t-common { --tc: #7d7466; }
.deck-count { font: 700 1.1rem "Cinzel Deco", Georgia, serif; color: #7a1a14; margin: 2px 0 8px; }
.deck-tier { border-top: 2px solid var(--tc); margin: 12px 0 4px; padding-top: 6px; }
.deck-tier h3 { margin: 0 0 6px; color: var(--tc); font-family: "Cinzel Deco", Georgia, serif; font-size: 1.05rem; }
.deck-tier h3 small { color: #5a4630; font-size: .85rem; }
.slots-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dslot { position: relative; min-height: 92px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: "Crimson", serif; padding: 6px 3px; text-align: center; }
.dslot.empty { border: 2px dashed rgba(90,70,48,.45); color: rgba(90,70,48,.6); font-style: italic; background: rgba(255,248,230,.35); }
.dslot.on { border: 3px solid var(--tc); background: linear-gradient(180deg, #fff6e2, #ead3a1); box-shadow: 0 3px 0 #6b4b22; cursor: pointer; }
.dslot .ci { font-size: 1.6rem; } .dslot b { font-size: .85rem; line-height: 1.05; } .dslot small { font-size: .72rem; color: #5a4630; }
.dslot .x { position: absolute; top: 2px; right: 5px; font-style: normal; font-size: .8rem; color: #7a1a14; }
/* camp19: no class-locked cards, so no "unusable" deck slots */
.deck-pool { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pcard { flex: 0 0 calc(25% - 5px); min-height: 70px; border-radius: 10px; border: 2px solid var(--tc); background: rgba(255,248,230,.9); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; font-family: "Crimson", serif; cursor: pointer; }
.pcard .ci { font-size: 1.3rem; } .pcard b { font-size: .78rem; line-height: 1.05; text-align: center; } .pcard small { font-size: .7rem; color: #2f6b2f; font-weight: 700; }
.pcard:disabled { opacity: .45; cursor: not-allowed; } .pcard:disabled small { color: #7a1a14; }
.mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 7px; margin: 6px 0 10px; }
.mcards.one { grid-template-columns: minmax(150px, 190px); justify-content: center; }
.mcard { position: relative; border-radius: 11px; border: 3px solid var(--tc); background: linear-gradient(180deg, #fff6e2, #ead3a1); padding: 7px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; font-family: "Crimson", serif; box-shadow: 0 3px 0 #6b4b22; }
.mcard.t-rare { background: linear-gradient(180deg, #eef5ff, #cfdff2); } .mcard.t-epic { background: linear-gradient(180deg, #f7ecff, #e0c9f0); } .mcard.t-legendary { background: linear-gradient(180deg, #fff4cf, #f0cf7a); }
.mcard .tier { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--tc); padding: 1px 7px; border-radius: 999px; }
.mcard .ci { font-size: 1.9rem; } .mcard b { font-size: .92rem; line-height: 1.05; } .mcard small { font-size: .74rem; color: #5a4630; line-height: 1.15; }
.mcard .clvl { font-size: .75rem; font-weight: 700; color: #7a1a14; } .mcard .clvl i { font-weight: 400; color: #5a4630; }
.mcard.locked { filter: grayscale(1) brightness(.8); opacity: .55; box-shadow: none; border-style: dashed; }
.mcard .badge { position: absolute; top: -9px; right: -6px; background: #c8402c; color: #fff4dc; font: 800 .75rem "Cinzel Deco", Georgia, serif; padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.mcard .how { font-size: .7rem; font-weight: 800; color: #7b3fb0; }
.coll-tier { color: var(--tc); font-family: "Cinzel Deco", Georgia, serif; border-bottom: 2px solid var(--tc); margin: 14px 0 4px; font-size: 1.05rem; }
.chest-box { display: flex; align-items: center; gap: 10px; border: 2px solid #a07a3e; border-radius: 12px; padding: 8px 10px; background: rgba(255,248,230,.8); }
.chest-box .ci { font-size: 2rem; } .chest-box div { flex: 1; display: flex; flex-direction: column; } .chest-box small { font-size: .78rem; }
.where { line-height: 1.4; }
.card-found { border: 2px solid #c9901c; border-radius: 12px; background: rgba(255,244,207,.85); padding: 6px 8px; margin: 8px 0; }
.card-found h3 { margin: 2px 0 8px; color: #7a1a14; font-family: "Cinzel Deco", Georgia, serif; }
.card-found .mcards { grid-template-columns: repeat(auto-fit, minmax(120px, 160px)); justify-content: center; }
.card .clvl { color: #7a1a14 !important; font-weight: 700; }
.bounce-line.chain-line { background: linear-gradient(90deg, rgba(200,220,255,.2), rgba(170,210,255,1), rgba(255,255,255,.3)); box-shadow: 0 0 14px rgba(140,190,255,.95); height: 4px; }
.bounce-line.pierce-line { background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.95)); box-shadow: 0 0 8px rgba(255,255,255,.8); height: 3px; }
.ring.frost-ring::before { border-color: rgba(170,230,255,.95); box-shadow: 0 0 18px rgba(140,210,255,.9); }
.ring.rain-ring::before { border-style: dotted; border-color: rgba(200,220,255,.95); border-width: 7px; }
.ring.dragon-ring::before { border-color: rgba(255,120,40,.95); border-width: 8px; box-shadow: 0 0 30px rgba(255,100,30,.95), inset 0 0 20px rgba(255,160,60,.8); }
.burst.poison::before { background: radial-gradient(circle, rgba(170,240,110,.85) 0 16%, rgba(90,160,40,.35) 42%, transparent 62%); }
.burst.fire::before { background: radial-gradient(circle, rgba(255,240,170,.95) 0 14%, rgba(255,140,40,.7) 32%, rgba(200,50,20,.3) 50%, transparent 66%); }
.burst.rain::before { background: repeating-linear-gradient(100deg, transparent 0 8px, rgba(210,225,255,.85) 8px 10px); border-radius: 50%; }
.dmg.dot-poison { color: #b6f07c; font-size: 1.2rem; } .dmg.dot-burn { color: #ffb070; font-size: 1.2rem; } .dmg.frost { color: #bfe9ff; font-size: 1.6rem; }
.dmg.x-chain { color: #cfe4ff; } .dmg.x-dragon { color: #ffb070; font-size: 1.7rem; } .dmg.x-rain { color: #dfe8ff; } .dmg.x-pierce { color: #fff; } .dmg.x-frost { color: #bfe9ff; }
@media (max-width: 480px) { .slots-row { gap: 4px; } .dslot { min-height: 84px; } .dslot b { font-size: .76rem; } .mcards { grid-template-columns: repeat(3, 1fr); gap: 5px; } .mcard small { font-size: .68rem; } }

/* ---------- camp15: mini-game HUD (one currency), Bumper Hall, Endless Run v2, weekly board ---------- */
.mg-hud { max-width: 560px; margin: 0 auto 8px; padding: 6px 14px 6px; border-radius: 12px; color: #3a220e; background: url("assets/map/parchment_warm.jpg") center / cover; border: 2px solid #8a6230; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.mg-pts { font: 700 1.05rem "Crimson", Georgia, serif; }
.mg-pts b { font: 700 1.7rem "Cinzel Deco", Georgia, serif; color: #7a1a14; vertical-align: -2px; }
.mg-pts .cost { font-weight: 400; color: #5a4028; }
.mg-bar { position: relative; height: 12px; margin: 4px 4px 16px; border-radius: 7px; background: rgba(60,36,14,.25); border: 1px solid #8a6230; overflow: visible; }
.mg-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; transition: width .25s; }
.mg-bar i.gain { background: linear-gradient(90deg, #d8a23c, #ffd35a); }
.mg-bar i.have { background: #a87a3a; z-index: 1; opacity: .9; }
.mg-bar .tick { position: absolute; top: -3px; width: 3px; height: 18px; margin-left: -2px; background: #5a3a14; border-radius: 2px; z-index: 2; }
.mg-bar .tick em { position: absolute; top: 17px; left: 50%; transform: translateX(-60%); white-space: nowrap; font: 700 .72rem "Crimson", Georgia, serif; font-style: normal; color: #6a5030; }
.mg-bar .tick.on { background: #2f6b3f; box-shadow: 0 0 6px #7fe08f; }
.mg-bar .tick.on em { color: #2f6b3f; }
.mg-bar .tick:last-of-type em { transform: translateX(-90%); }
.mg-hud small { display: block; font: 400 .92rem "Crimson", Georgia, serif; color: #4a3018; margin-top: -2px; }
.mg-stage { position: relative; margin: 0 auto; touch-action: none; -webkit-user-select: none; user-select: none; }
.mg-wrap[data-mg="drop"] .mg-stage { width: min(100%, 440px, calc((100vh - 360px) * 360 / 560)); min-width: 280px; }
.mg-wrap[data-mg="drop"] #mgCanvas { border-color: #4a3a2a; background: #2a1e12; }
.mg-wrap[data-mg="gate"] .mg-stage { width: min(100%, 420px); }
.mg-wrap[data-mg="runner"] .mg-stage { width: min(100%, calc((100vh - 400px) * 360 / 220)); min-width: 300px; }
.mg-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.mg-float { position: absolute; z-index: 3; transform: translate(-50%, -50%); white-space: nowrap; font: 700 1.25rem "Crimson", Georgia, serif; color: #fff6d6; text-shadow: 0 0 3px #000, 0 2px 4px #000, 0 0 10px rgba(255,190,80,.8); animation: mgFloat 1.3s ease-out forwards; }
.mg-float.big { font-size: 1.5rem; color: #bff6ff; text-shadow: 0 0 3px #000, 0 0 14px #4fd8ff; }
.mg-float.neg { color: #ffb0a0; text-shadow: 0 0 3px #000, 0 2px 4px #000; }
@keyframes mgFloat { 0% { opacity: 0; margin-top: 6px; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; margin-top: -46px; } }
.mg-coin { position: absolute; z-index: 5; pointer-events: none; font-style: normal; font-size: 18px; color: #ffd35a; text-shadow: 0 0 8px #ffb000, 0 0 2px #000; margin: -10px 0 0 -8px; }
.mg-coin.big { font-size: 28px; color: #bff6ff; text-shadow: 0 0 10px #4fd8ff; }
.mg-prompt { position: absolute; left: 60%; top: 34%; transform: translate(-50%, -50%); padding: 6px 18px 8px; border-radius: 14px; text-align: center; pointer-events: none; color: #3a220e; background: url("assets/map/parchment_warm.jpg") center / cover; border: 3px solid #8a6230; box-shadow: 0 0 0 3px rgba(255,211,90,.6), 0 10px 26px rgba(0,0,0,.6); animation: mgPulse 0.9s ease-in-out infinite; }
.mg-prompt b { display: block; font: 700 1.9rem "Cinzel Deco", Georgia, serif; color: #7a1a14; }
.mg-prompt span { display: block; font: 700 .95rem "Crimson", Georgia, serif; white-space: nowrap; }
@keyframes mgPulse { 50% { transform: translate(-50%, -50%) scale(1.07); } }
.mg-snd { position: absolute; top: 8px; right: 8px; z-index: 4; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #8a6230; background: rgba(40,24,10,.7); color: #fff; font-size: 16px; line-height: 30px; padding: 0; cursor: pointer; }
.mg-wrap[data-mg="runner"] .mg-snd { top: auto; bottom: 8px; }
.mg-line { margin: 8px auto 0; max-width: 560px; color: #fbe7bf; font: 700 1.02rem "Crimson", Georgia, serif; text-shadow: 0 1px 3px #000; }
.mg-wrap.in-world .mg-ctrl { max-width: 560px; margin: 8px auto 0; }
.mg-ctrl .btn.down { transform: translateY(2px) scale(.97); filter: brightness(1.2); }
.mg-ctrl .btn.flip { flex: 1.2; }
.mg-ctrl .btn.launch { flex: 1; background: linear-gradient(#8a2a1c, #5a150c); color: #fbe7bf; }
.mg-ctrl .btn { -webkit-user-select: none; user-select: none; touch-action: none; }
.mg-intro .mg-rules { font-size: 1rem; }
.btn.ghost { background: transparent; border: 0; box-shadow: none; color: #6a4820; text-decoration: underline; display: block; margin: 6px auto; }
.mg-done .title { margin: 2px 0 4px; }
.mg-done-k { margin: 0; font-weight: 700; color: #6a4820; }
.why-list { list-style: none; margin: 6px auto 10px; padding: 0; max-width: 360px; }
.why-list li { display: flex; justify-content: space-between; padding: 4px 8px; border-bottom: 1px dashed rgba(90,58,20,.35); font-size: 1.05rem; }
.why-list li b { color: #2f6b3f; }
.why-list li.neg b { color: #9c1e1e; }
.why-list li.tot { border-bottom: 0; border-top: 2px solid #8a6230; font-weight: 700; }
.why-list li.tot b { color: #7a1a14; font-size: 1.2rem; }
.done-bar { max-width: 380px; margin: 0 auto; }
.have-line { font-size: 1.08rem; }
#weeklySheet .wk-sub { margin-top: -4px; }
#weeklySheet .wk-you { display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 10px 14px; border-radius: 12px; background: rgba(255,211,90,.25); border: 2px solid #c9a052; }
#weeklySheet .wk-you b:first-child { font: 700 2rem "Cinzel Deco", Georgia, serif; color: #7a1a14; }
#weeklySheet .wk-list { list-style: none; padding: 0; margin: 6px 0; }
#weeklySheet .wk-list li { display: flex; gap: 8px; padding: 5px 8px; border-bottom: 1px dashed rgba(90,58,20,.3); }
#weeklySheet .wk-list li b { flex: 1; }
#weeklySheet .wk-list li.you { background: rgba(47,107,63,.15); font-weight: 700; }
#weeklySheet .wk-list li.gap { border-top: 2px dotted #8a6230; }
#weeklySheet .wk-tiers { margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(90,58,20,.1); border: 1px solid #8a6230; }
#weeklySheet .wk-tiers h3 { margin: 0 0 4px; }
#weeklySheet .wk-tiers p { display: flex; justify-content: space-between; margin: 4px 0; }
#weeklySheet .wk-tiers p.on { color: #2f6b3f; font-weight: 700; }
@media (max-width: 700px) {
  .mg-wrap[data-mg="drop"] .mg-stage { width: min(100%, calc((100vh - 330px) * 360 / 560)); }
  .mg-wrap[data-mg="drop"] .mg-ctrl { display: none; }
  .mg-hud { padding: 4px 10px; margin-bottom: 6px; } .mg-bar { margin-bottom: 18px; }
  .mg-pts { font-size: .95rem; } .mg-pts b { font-size: 1.45rem; }
  .mg-wrap.in-world .mg-ctrl .btn.big { font-size: 1.15rem; padding: 16px 6px; }
}
@media (min-width: 900px) {
  /* desktop Bumper Hall: counter, hint and buttons beside a taller table */
  .mg-wrap[data-mg="drop"] { display: grid; grid-template-columns: minmax(280px, 360px) auto; grid-template-rows: auto auto 1fr; column-gap: 22px; justify-content: center; align-items: start; width: min(100vw - 20px, 980px); }
  .mg-wrap[data-mg="drop"] .mg-hud { grid-column: 1; grid-row: 1; margin: 20px 0 8px; width: 100%; }
  .mg-wrap[data-mg="drop"] .mg-stage { grid-column: 2; grid-row: 1 / span 3; width: calc((100vh - 190px) * 360 / 560); max-width: 460px; }
  .mg-wrap[data-mg="drop"] .mg-line { grid-column: 1; grid-row: 2; margin: 6px 0; }
  .mg-wrap[data-mg="drop"] .mg-ctrl { grid-column: 1; grid-row: 3; margin: 6px 0 0; flex-wrap: wrap; }
  .mg-wrap[data-mg="drop"] .mg-ctrl .btn.launch { order: 3; flex-basis: 100%; }
}

/* ---------- camp16: chapter themes (THEMES in campaign.js) ---------- */
.bs-light { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; z-index: 2; }
.bs-weather { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 45; }
.ph-art { position: absolute; left: 8px; bottom: 8px; z-index: 60; font: 700 10px/1 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #ffe9b0; background: rgba(60,20,10,.72); border: 1px dashed rgba(255,220,150,.7); padding: 3px 6px; border-radius: 4px; pointer-events: none; }
/* unit light per new world */
.bstage[data-field="old_road_dusk"] .unit .u-tint { background: linear-gradient(95deg, rgba(60,30,60,.55), rgba(255,130,80,.7) 90%), linear-gradient(0deg, rgba(20,10,10,.6), transparent 30%); }
.bstage[data-field="old_road_dusk"] .hero .u-art { filter: saturate(.9) brightness(.86) sepia(.1); }
.bstage[data-field="village_gate"] .unit .u-tint { background: linear-gradient(100deg, rgba(60,70,90,.35), rgba(255,245,200,.55) 85%), linear-gradient(0deg, rgba(30,30,20,.5), transparent 30%); }
.bstage[data-field="desert_dunes"] .unit .u-tint { background: linear-gradient(90deg, rgba(120,70,30,.45), rgba(255,210,130,.7) 90%), linear-gradient(0deg, rgba(90,50,20,.5), transparent 30%); }
.bstage[data-field="desert_dunes"] .hero .u-art { filter: saturate(.95) sepia(.12) brightness(1.02); }
.bstage[data-field="snow_pass"] .unit .u-tint, .bstage[data-field="frost_hall"] .unit .u-tint { background: linear-gradient(90deg, rgba(80,110,160,.5), rgba(225,240,255,.7) 90%), linear-gradient(0deg, rgba(200,220,255,.45), transparent 30%); }
.bstage[data-field="snow_pass"] .hero .u-art, .bstage[data-field="frost_hall"] .hero .u-art { filter: saturate(.8) brightness(1.02) hue-rotate(-6deg); }
.bstage[data-field="ember_mines"] .unit .u-tint { background: linear-gradient(90deg, rgba(30,15,10,.75), rgba(255,160,80,.75) 95%), linear-gradient(0deg, rgba(20,10,5,.6), transparent 30%); }
.bstage[data-field="ember_mines"] .hero .u-art { filter: saturate(.9) sepia(.15) brightness(.78) contrast(1.05); }
.bstage[data-field="keep_night"] .unit .u-tint { background: linear-gradient(90deg, rgba(255,150,70,.55), rgba(90,110,180,.7) 80%), linear-gradient(0deg, rgba(10,10,30,.6), transparent 30%); }
.bstage[data-field="keep_night"] .hero .u-art { filter: saturate(.75) brightness(.74) contrast(1.05); }
.bstage[data-field="dragon_peak"] .unit .u-tint { background: linear-gradient(90deg, rgba(40,50,90,.6), rgba(170,200,255,.6) 90%), linear-gradient(0deg, rgba(10,10,20,.6), transparent 30%); }
.bstage[data-field="dragon_peak"] .hero .u-art { filter: saturate(.8) brightness(.8) contrast(1.06); }
.node .tname { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 4px); white-space: nowrap; font: 700 11px/1.1 Georgia, serif; color: #fff2d0; text-shadow: 0 1px 2px #000, 0 0 6px #000; opacity: 0; pointer-events: none; transition: opacity .2s; }
.node.sel .tname, .node.next .tname { opacity: 1; }
@media (min-width: 900px) { .node:not(.locked) .tname { opacity: .85; } }
.strip-theme { font-weight: 400; font-size: .8em; opacity: .8; margin-left: 4px; }
/* camp16 daily challenge */
.dl-games { display: grid; gap: 10px; margin: 10px 0; }
.dl-game { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(90,60,25,.12); border: 1px solid rgba(90,60,25,.35); }
.dl-game b { font: 700 16px/1.2 Georgia, serif; } .dl-game span { font-size: 13px; opacity: .85; } .dl-game em { font-size: 12px; font-style: normal; opacity: .75; }
.dl-game .btn { justify-self: stretch; }
.mg-float.banner { font-size: 18px; white-space: nowrap; }
.mg-float.ally { color: #bfe0ff; }
#dailySheet .wk-sub { margin-top: -4px; }
#dailySheet .wk-you { display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 10px 14px; border-radius: 12px; background: rgba(255,211,90,.25); border: 2px solid #c9a052; }
#dailySheet .wk-you b:first-child { font: 700 2rem "Cinzel Deco", Georgia, serif; color: #7a1a14; }
#dailySheet .wk-list { list-style: none; padding: 0; margin: 6px 0; }
#dailySheet .wk-list li { display: flex; gap: 8px; padding: 5px 8px; border-bottom: 1px dashed rgba(90,58,20,.3); }
#dailySheet .wk-list li b { flex: 1; }
#dailySheet .wk-list li.you { background: rgba(47,107,63,.15); font-weight: 700; }
#dailySheet .wk-list li.gap { border-top: 2px dotted #8a6230; }
#dailySheet .wk-tiers { margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(90,58,20,.1); border: 1px solid #8a6230; }
#dailySheet .wk-tiers h3 { margin: 0 0 4px; }
#dailySheet .wk-tiers p { display: flex; justify-content: space-between; margin: 4px 0; }
#dailySheet .wk-tiers p.on { color: #2f6b3f; font-weight: 700; }
@media (max-width: 700px) {
.mg-wrap.daily .mg-bar { display: none; }
}
#dailySheet .wk-list li b .si { font-weight: 400; font-size: .75em; opacity: .7; margin-left: 4px; }

/* camp17: Mastery mode + replays */
.node .mstars { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); display: flex; gap: 0; padding: 1px 3px; border-radius: 6px; background: rgba(40, 24, 8, .55); font-size: 9px; line-height: 1; pointer-events: none; }
.node .num { padding-bottom: 8px; }
.node.boss .mstars { bottom: 8px; font-size: 10px; }
.ms { font-style: normal; color: rgba(60, 40, 20, .35); text-shadow: none; }
.node .ms { color: rgba(255, 240, 210, .35); }
.ms.on { color: #ffd34a; text-shadow: 0 0 3px rgba(255, 190, 40, .9), 0 1px 0 #6b3d00; }
.node .mstars[data-m="6"] { background: rgba(120, 40, 140, .8); box-shadow: 0 0 6px rgba(255, 211, 74, .9); }
.mastery-box { margin: 10px auto; max-width: 520px; padding: 10px 12px; border-radius: 12px; border: 2px solid #b8862b; background: linear-gradient(#fff4d6, #f3dfae); text-align: center; }
.mastery-box .mb-row { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 18px; }
.ms-row .ms { font-size: 20px; }
.slot.solo { margin: 0 auto; max-width: 260px; border-color: #d9a520; box-shadow: 0 0 14px rgba(255, 200, 60, .6); }
.rh.mastered { outline: 2px solid #ffd34a; }
.mastery-res { margin: 10px auto; max-width: 520px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 230, 160, .45); border: 2px solid #c99a2e; }
.mastery-all { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; padding: 10px; border-radius: 10px; background: linear-gradient(135deg, #5b2a86, #a8327a); color: #fff; box-shadow: 0 0 18px rgba(255, 200, 80, .8); animation: masPulse 1.6s ease-in-out infinite; }
.mastery-all b { font-size: 18px; } .mastery-all span { font-size: 16px; }
@keyframes masPulse { 50% { box-shadow: 0 0 30px rgba(255, 220, 120, 1); } }
.unit.enraged .u-art { filter: drop-shadow(0 0 10px rgba(255, 40, 20, .95)) saturate(1.5) !important; animation: rageShake .35s linear infinite; }
.unit.enraged .u-tag b::after { content: " 😡 ENRAGED"; color: #fff; background: #b3160c; padding: 0 5px; margin-left: 4px; border-radius: 6px; font-size: .85em; }
.unit.enraged .u-tint { background: rgba(255, 30, 10, .28); opacity: 1; }
@keyframes rageShake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.bs-mastery { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 6; background: rgba(90, 40, 120, .85); color: #ffe39a; font: 700 13px system-ui; padding: 3px 10px; border-radius: 10px; }
@media (max-width: 700px) { .bs-mastery { top: 54px; font-size: 11px; white-space: nowrap; } }

/* ---------- camp18: docked side panels (Boards left, Store right) ---------- */
.side-panel { position: fixed; top: 70px; z-index: 40; width: 300px; max-height: calc(100vh - 86px); display: none; color: var(--ink); }
body[data-screen="scrMap"] .side-panel { display: block; }
.side-panel.left { left: 14px; } .side-panel.right { right: 14px; }
.sp-card { max-height: calc(100vh - 86px); overflow: auto; padding: 12px 12px 14px; border-radius: 16px; border: 6px solid #6b4226;
  background: linear-gradient(180deg, #f7e8c8, #e8d0a0); box-shadow: inset 0 0 0 2px #b8893a, inset 0 0 30px rgba(120,80,30,.25), 0 10px 26px rgba(0,0,0,.55);
  background-clip: padding-box; outline: 2px solid #3d2412; }
.sp-head { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 6px; }
.sp-head h2 { margin: 0; font: 700 1.25rem "Cinzel Deco", Georgia, serif; color: #5a1a10; }
.sp-close { display: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #b8893a; background: #6b4226; color: #fbe7bf; font-size: 1.4rem; cursor: pointer; }
.sp-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.sp-tg { font: 700 1rem Georgia, serif; padding: 10px 6px; border-radius: 10px; border: 2px solid #8a6230; background: #e2c893; color: #4a2e14; cursor: pointer; }
.sp-tg.on { background: radial-gradient(circle at 35% 30%, #8a5a30, #6b4226 60%, #3d2412); color: #fbe7bf; border-color: #e9c27a; }
.sp-sub { margin: 0 0 6px; font-size: .85rem; text-align: center; color: var(--ink-soft); }
.sp-you { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,211,90,.3); border: 2px solid #c9a052; }
.sp-you b:first-child { font: 700 1.6rem "Cinzel Deco", Georgia, serif; color: #7a1a14; }
.sp-list { list-style: none; padding: 0; margin: 6px 0; font-size: .95rem; }
.sp-list li { display: flex; gap: 6px; padding: 4px 6px; border-bottom: 1px dashed rgba(90,58,20,.3); }
.sp-list li b { flex: 1; } .sp-list li.you { background: rgba(47,107,63,.15); font-weight: 700; } .sp-list li.gap { border-top: 2px dotted #8a6230; }
.sp-list .si { font-weight: 400; font-size: .72em; opacity: .7; margin-left: 3px; }
.sp-tiers { margin-top: 8px; padding: 6px 10px; border-radius: 12px; background: rgba(90,58,20,.1); border: 1px solid #8a6230; font-size: .9rem; }
.sp-tiers h3, .sp-board h3, .sp-h3 { margin: 4px 0; font: 700 1rem Georgia, serif; color: #5a1a10; }
.sp-tiers p { display: flex; justify-content: space-between; gap: 8px; margin: 3px 0; } .sp-tiers p.on { color: #2f6b3f; font-weight: 700; }
.sp-board { margin-bottom: 6px; }
.sp-note { font-size: .78rem; opacity: .8; margin: 8px 0 0; }
.sp-item { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255,244,214,.8); border: 2px solid #b8893a; }
.sp-ic { font-size: 2rem; text-align: center; } .sp-txt b { display: block; font-size: 1.05rem; } .sp-txt span { font-size: .85rem; color: var(--ink-soft); }
.sp-buy { grid-column: 1 / -1; margin: 4px 0 0; font-size: 1.15rem; }
.sp-left { margin: 6px 0; }
.sp-bag { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.sp-thing { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; background: rgba(90,58,20,.1); border: 1px solid #8a6230; }
.sp-thing i { font-style: normal; font-size: 1.6rem; } .sp-thing b { font-size: 1.3rem; } .sp-thing span { font-size: .8rem; text-align: center; }
.sp-link { box-sizing: border-box; }
.sp-tab { display: none; }
/* narrow: the panels fold into edge tabs and slide out over the map */
@media (max-width: 1179px) {
  .side-panel { top: 0; bottom: 0; max-height: none; width: min(320px, 86vw); transition: transform .28s ease; pointer-events: none; }
  .side-panel .sp-card { height: 100%; max-height: none; box-sizing: border-box; border-radius: 0; pointer-events: auto; padding-top: 64px; }
  .side-panel.left { left: 0; transform: translateX(-100%); } .side-panel.right { right: 0; transform: translateX(100%); }
  .side-panel.open { transform: translateX(0); }
  .side-panel.open .sp-card { box-shadow: 0 0 0 100vmax rgba(0,0,0,.35), inset 0 0 0 2px #b8893a; }
  .sp-close { display: block; }
  .sp-tab { display: block; position: absolute; top: 46%; pointer-events: auto; width: 34px; padding: 12px 0; border: 2px solid #e9c27a; cursor: pointer;
    background: radial-gradient(circle at 35% 30%, #8a5a30, #6b4226 60%, #3d2412); color: #fbe7bf; font: 700 .95rem Georgia, serif; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
  .sp-tab span { display: block; writing-mode: vertical-rl; white-space: nowrap; }
  .side-panel.left .sp-tab { left: 100%; border-left: 0; border-radius: 0 12px 12px 0; }
  .side-panel.right .sp-tab { right: 100%; border-right: 0; border-radius: 12px 0 0 12px; }
  .side-panel.right .sp-tab span { transform: rotate(180deg); }
  .side-panel.open .sp-tab { opacity: 0; pointer-events: none; }
}

/* ---------- camp19: catch your breath (the heal between levels, shown at the victory moment) ---------- */
.dmg.heal { color: #7dff8a; font-size: 2rem; text-shadow: 0 2px 0 #0c3a12, 0 0 12px rgba(90,255,120,.85); }
.bstage.breath .hero .u-hp i { transition: width .9s ease-out; box-shadow: 0 0 8px rgba(120,255,140,.9); }
.breath-banner { margin: 6px auto 0; width: max-content; max-width: 94%; padding: 6px 10px 8px; border-radius: 12px; text-align: center;
  background: rgba(10,40,16,.82); border: 2px solid #7dd88a; color: #eaffe6; font: 700 .95rem Georgia, serif; box-shadow: 0 6px 16px rgba(0,0,0,.45); animation: breathIn .35s ease-out; }
.breath-banner p { margin: 0 0 4px; }
.bh-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bh-chip { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(160,240,170,.5); }
.bh-chip.bench { border-style: dashed; }
.bh-chip img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; background: #1d3a22; border: 2px solid #7dd88a; }
.bh-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.bh-txt b { font-size: .8rem; } .bh-txt small { font-weight: 400; opacity: .75; }
.bh-gain { font-style: normal; color: #7dff8a; font-size: .95rem; }
.bh-bar { display: block; width: 78px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden; margin-top: 2px; }
.bh-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3a9a3a, #8fe07a); transition: width .9s ease-out; }
.sw-heal { font-style: normal; color: #7dff8a; margin-left: 4px; }
@keyframes breathIn { from { transform: translateY(-8px); opacity: 0; } }
@media (max-width: 640px) { .breath-banner { font-size: .82rem; padding: 4px 6px 6px; } .bh-bar { width: 60px; } .bh-chip img { width: 28px; height: 28px; } }

/* ---------- camp19: Bumper Hall table ~15-20% bigger ----------
   While the pinball is live, the stage strip and the points row step aside (the table's own panel shows points, ball and time),
   so the table can take that height. Max widths raised (440 -> 520, desktop 460 -> 540). Ball rules unchanged. */
body:has(#mgWrap[data-mg="drop"]) #stageStrip, body:has(#mgWrap[data-mg="drop"]) #boostRow { display: none; }
body:has(#mgWrap[data-mg="drop"]) #stageBody { padding-top: 4px; }
.mg-wrap[data-mg="drop"] .mg-stage { width: min(100%, 520px, calc((100vh - 250px) * 360 / 560)); }
@media (max-width: 700px) {
  .mg-wrap.in-world[data-mg="drop"] { width: calc(100vw - 8px); }
  .mg-wrap[data-mg="drop"] .mg-hud { margin-bottom: 4px; }
  .mg-wrap[data-mg="drop"] .mg-stage { width: min(100%, calc((100vh - 212px) * 360 / 560)); }
}
@media (min-width: 900px) {
  .mg-wrap[data-mg="drop"] .mg-stage { width: calc((100vh - 84px) * 360 / 560); max-width: 540px; }
}
.dmg.dot-chill { color: #bfe9ff; font-size: 1.2rem; }   /* camp19: Burn with a staff (frost look) */
/* camp19: runner choice-gate grab pop */
.mg-float.banner.grab { font-size: 1.35rem; padding: 4px 12px; border-radius: 10px; background: rgba(40,22,8,.78); border: 2px solid #e9c27a; color: #ffe9a8; animation: grabPop 1.7s ease-out forwards; }
.mg-float.banner.grab.neg { border-color: #d0634a; color: #ffc0b0; }
@keyframes grabPop { 0% { transform: translate(-50%,-50%) scale(.4); opacity: 0; } 12% { transform: translate(-50%,-50%) scale(1.18); opacity: 1; } 24% { transform: translate(-50%,-50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%,-90%) scale(1); opacity: 0; } }
@media (max-width: 700px) { .mg-float.banner.grab { font-size: 1.05rem; } }

/* ---------- no-scroll pass (ns1): the map screen fits 390x844 and 1280x800 ---------- */
.camp { padding-bottom: 8px; }
#scrMap:not([hidden]) { height: calc(100vh - 74px); height: calc(100dvh - 74px); display: flex; flex-direction: column; }
#scrMap .chap-head { flex: none; margin-top: 0; padding: 5px 12px 5px 64px; text-align: left; display: flex; align-items: center; gap: 8px; }
#scrMap .chap-head .seal { top: 50%; left: 10px; transform: translateY(-50%); width: 42px; height: 42px; }
#scrMap .chap-head h1 { font-size: .95rem; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#scrMap .chap-head .sub { margin: 0; white-space: nowrap; }
#scrMap .road { flex: 1; min-height: 300px; height: auto; margin: 6px 0; }
#scrMap .btn.huge { flex: none; margin: 0; }
#scrMap .map-more { flex: none; display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin: 6px 0 0; padding-right: 76px; }
#scrMap .map-more .btn { padding: 8px 18px; font-size: 1rem; min-height: 44px; width: auto; }
#scrMap .map-more a.plain { color: #f3d9a4; font-size: .95rem; }
/* test tools: small pill in the corner, opens as a sheet */
.camp > .test-tools { position: fixed; z-index: 130; right: 8px; bottom: 8px; margin: 0; padding: 0 !important; border: 0; background: none !important; }
.camp > .test-tools > summary { height: 32px; line-height: 28px; padding: 0 10px; border-radius: 999px; border: 2px solid #b8893a; background: rgba(40,24,10,.8); font-size: .8rem; opacity: .85; }
.camp > .test-tools > summary::after { content: ""; }
.camp > .test-tools[open] { left: 8px; max-width: 520px; margin-left: auto; padding: 10px !important; border-radius: 12px; background: rgba(30,18,8,.97) !important; border: 2px solid #b8893a; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.camp > .test-tools[open] > summary { width: 100%; }
/* pick: a little tighter so the whole screen fits */
#scrPick .panel { padding: 10px 12px; }
#scrPick .title { margin: 0 0 2px; }
#scrPick .slot { padding: 5px 5px; }
#scrPick .slot img { height: 118px; }
#scrPick .rh img { height: 52px; }
#scrPick .roster { margin-top: 5px; }
#scrPick .btn.huge { margin: 8px 0 4px; }
#scrPick #btnPickBack { padding: 8px; font-size: 1rem; min-height: 44px; margin-top: 4px; }
/* long card lists (collection, deck) scroll inside their panel; the page never scrolls */
#scrColl:not([hidden]) .panel, #scrDeck:not([hidden]) .panel { max-height: calc(100vh - 74px); max-height: calc(100dvh - 74px); overflow-y: auto; overscroll-behavior: contain; }
/* keep the main buttons in view under the scrolling card lists */
#scrDeck .panel, #scrColl .panel { padding-bottom: 0; }
#deckBody > .row2 { position: sticky; bottom: 0; z-index: 3; margin: 0 -14px; padding: 6px 14px 10px; background: linear-gradient(180deg, #e8d3a5, #d9bf8e); }
#deckBody > #btnDeckGo { position: sticky; bottom: 64px; z-index: 3; margin-bottom: 0; }
#collBody > #btnCollBack { position: sticky; bottom: 8px; z-index: 3; }
/* stage: who-goes-in screen fits */
#swapScreen { padding-top: 8px; padding-bottom: 10px; }
#swapScreen .title { margin: 0 0 2px; }
#swapScreen .scout { height: 120px; margin: 4px 0 4px; }
#swapScreen > p.center { margin: 2px 0; }
#swapScreen .who { margin: 4px 0 4px; }
#swapScreen .hero-card { padding: 5px 4px; }
#swapScreen .hero-card .hc-art { height: 128px; }
#swapScreen .btn.huge { margin: 8px 0 0; }
/* stage: the battle fills what is left, never more */
#scrStage:not([hidden]) { height: calc(100vh - 74px); height: calc(100dvh - 74px); display: flex; flex-direction: column; }
#scrStage > .stage-strip, #scrStage > .boost-row { flex: none; }
#scrStage > #stageBody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#scrStage > #stageBody > .bstage { flex: 1; min-height: 300px; height: auto; }
#scrStage > #stageBody > .panel { flex: none; max-height: 100%; }
/* run1: Castle Run (path run from behind). Portrait canvas 360x420, four big buttons, no page scroll on phone or desktop. */
body:has(#mgWrap[data-mg="runner"]) #stageStrip, body:has(#mgWrap[data-mg="runner"]) #boostRow { display: none; }
body:has(#mgWrap[data-mg="runner"]) #stageBody { padding-top: 4px; }
.mg-wrap[data-mg="runner"] .mg-stage { width: min(100%, 560px, calc((100vh - 300px) * 360 / 420)); min-width: 260px; }
.mg-wrap[data-mg="runner"] #mgCanvas { background: #1a1410; }
.mg-wrap[data-mg="runner"] .mg-ctrl { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.25fr; gap: 8px; max-width: 560px; }
.mg-wrap[data-mg="runner"] .mg-ctrl .btn.big { font-size: 1.7rem; line-height: 1; padding: 10px 4px 8px; min-height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.mg-wrap[data-mg="runner"] .mg-ctrl .btn.big small { font: 700 .82rem "Crimson", Georgia, serif; letter-spacing: .02em; }
.mg-wrap[data-mg="runner"] .mg-ctrl .btn.turn { background: linear-gradient(#a8742c, #6b4420); color: #fff3d0; }
.mg-wrap[data-mg="runner"] .mg-line { margin-top: 4px; font-size: .92rem; }
.mg-wrap[data-mg="runner"] .mg-prompt { left: 50%; top: 40%; }
.mg-wrap[data-mg="runner"] .mg-snd { top: 44px; bottom: auto; }
@media (max-width: 700px) {
  .mg-wrap[data-mg="runner"] .mg-stage { width: min(100%, calc((100vh - 250px) * 360 / 420)); }
  .mg-wrap[data-mg="runner"] .mg-ctrl .btn.big { min-height: 64px; font-size: 1.6rem; }
}

/* ---------- campowned_v1 (Brandon 8:01 / 8:03 PM): owned heroes only, street art until a class is picked, class gating, no scroll ---------- */
#scrPick .panel { display: flex; flex-direction: column; gap: 6px; }
#scrPick .sub { margin: 0; font-size: .95rem; }
#scrPick .slots { gap: 8px; justify-content: center; }
#scrPick .slot { max-width: 300px; display: flex; flex-direction: column; align-items: stretch; }
#scrPick .slot img { height: 128px; width: auto; max-width: 100%; margin: 0 auto 2px; }
#scrPick .slot b { font-size: 1.15rem; line-height: 1.15; }
#scrPick .slot small { font-size: .85rem; }
#scrPick .slot:not(.picked) small { color: #7a1c16; font-weight: 700; }
#scrPick .clsrow { flex-direction: column; gap: 5px; margin: 6px 0 0; }
#scrPick .cls { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; align-items: center; text-align: left; min-height: 48px; padding: 3px 8px; border-radius: 10px; column-gap: 6px; }
#scrPick .cls i { grid-row: 1 / span 2; font-style: normal; font-size: 1.3rem; text-align: center; }
#scrPick .cls span { font: 700 1rem "Crimson", serif; line-height: 1.1; }
#scrPick .cls em { font: italic .78rem "Crimson", serif; line-height: 1.1; opacity: .9; }
#scrPick .cls.on em { opacity: 1; }
#scrPick .cls.learn { border-style: dashed; }
#scrPick .cls.locked { background: #e8dcc4; border-color: #9b8a6a; border-style: dashed; color: #5b4a34; cursor: not-allowed; filter: grayscale(.6); }
#scrPick .cls.locked em { font-style: normal; font-weight: 700; color: #7a1c16; opacity: 1; }
#scrPick .one-hero { flex-basis: 100%; margin: 4px 0 0; }
body.pick-solo #scrPick .slots { flex-wrap: wrap; }
body.pick-solo #scrPick .slot { flex: 0 1 300px; border-style: solid; }
#scrPick .roster { display: flex; gap: 6px; overflow: visible; margin: 0; justify-content: center; flex-wrap: nowrap; }
#scrPick .roster[hidden] { display: none; }
#scrPick .rh { flex: 1 1 0; min-width: 0; max-width: 92px; padding: 3px 2px; font-size: .78rem; min-height: 48px; }
#scrPick .rh img { height: 40px; }
#scrPick .rh span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#scrPick .mastery-box { margin: 0; padding: 6px 8px; }
#scrPick .mastery-box .mb-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
#scrPick .mastery-box .fine { margin: 2px 0 0; font-size: .8rem; }
#scrPick .btn.huge { margin: 2px 0 0; min-height: 56px; }
#scrPick #btnPickBack { margin-top: 0; }
@media (max-width: 480px) {
  #scrPick .slot img { height: 112px; }
  #scrPick .cls { min-height: 46px; padding: 2px 6px; grid-template-columns: 24px 1fr; column-gap: 4px; }
  #scrPick .cls span { font-size: .95rem; }
  #scrPick .cls em { font-size: .72rem; }
}
@media (max-height: 760px) { #scrPick .slot img { height: 96px; } }
/* night1: side panels fit a ~664px phone */
@media (max-width: 1179px) and (max-height: 760px) {
  .side-panel .sp-card { padding-top: 56px; padding-bottom: 8px; }
  .sp-item { padding: 6px 8px; }
  .sp-thing { padding: 4px; }
  .sp-thing i { font-size: 1.3rem; } .sp-thing b { font-size: 1.1rem; }
  .sp-list li { padding: 2px 6px; }
  .sp-tiers { margin-top: 4px; padding: 4px 8px; }
}