/* Battle stage (js/battle.js): glowing panel, pixel monster, floating numbers, drifting motes. Effects switch off with the Settings option (html.fx-off). */
.stage { --glow: #7c5cff; position: relative; height: 300px; margin: 10px 0; overflow: hidden; border: 3px solid var(--line); box-shadow: 3px 3px 0 #000, inset 0 0 46px rgba(0, 0, 0, .65);
  background: radial-gradient(ellipse at 50% 88%, color-mix(in srgb, var(--glow) 34%, transparent), transparent 62%), linear-gradient(#0d0a1d, #181234 70%, #120d26); }
.stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 28px color-mix(in srgb, var(--glow) 40%, transparent); }
.stage-scene { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; object-fit: cover; object-position: center bottom; }
.stage-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; border-top: 3px solid rgba(0, 0, 0, .5);
  background: repeating-conic-gradient(rgba(0, 0, 0, .3) 0 25%, rgba(0, 0, 0, .14) 0 50%) 0 0 / 16px 16px; }
.stage-motes i { position: absolute; bottom: 30px; background: color-mix(in srgb, var(--glow) 80%, white); opacity: 0; animation: mote 7s linear infinite; }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(14px, -210px); opacity: 0; } }
.stage-hero { position: absolute; left: 13%; bottom: 44px; transition: transform .08s steps(2); }
.stage-hero.lunge { transform: translateX(34px); }
.stage-hero { left: 16%; }
.stage-hero canvas { display: block; width: 144px; height: 144px; animation: bob 1s steps(2) infinite; filter: drop-shadow(0 7px 0 rgba(0, 0, 0, .55)); }
.stage-foe { position: absolute; right: 13%; bottom: 44px; }
.stage-foe canvas { display: block; width: 144px; height: 144px; animation: bob 1s steps(2) .3s infinite; filter: drop-shadow(0 7px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 10px var(--glow)); }
.stage-foe.hit canvas { filter: brightness(3.2) saturate(0) drop-shadow(0 7px 0 rgba(0, 0, 0, .55)); transform: translateX(6px); }
.stage-foe.spawn canvas { animation: spawn .35s steps(5) both, bob 1s steps(2) .35s infinite; }
.stage-foe.dying canvas { animation: die .55s steps(6) forwards; }
@keyframes spawn { from { opacity: 0; transform: translateY(-26px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes die { 0% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(1.12) rotate(4deg); } 100% { opacity: 0; transform: scale(.3) translateY(40px); } }
.stage-plate.hero { right: auto; left: 10px; }
.stage-plate.hero .hp, .stage-plate.hero .bar.hp { opacity: 1; }
.stage-plate { position: absolute; top: 8px; right: 10px; width: min(250px, 52%); padding: 4px 6px; background: rgba(10, 6, 24, .72); border: 2px solid var(--line2); }
.stage-name { font-size: calc(18px * var(--ts, 1)); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-fx { position: absolute; inset: 0; pointer-events: none; }
.stage-fx b { position: absolute; bottom: 150px; font-family: var(--font-head); font-size: calc(15px * var(--ts, 1)); font-weight: normal; text-shadow: 2px 2px 0 #000; animation: floatup 1.1s steps(9) forwards; white-space: nowrap; }
.stage-fx b.dmg { color: #fff; } .stage-fx b.crit { color: var(--accent); font-size: calc(21px * var(--ts, 1)); } .stage-fx b.hurt { color: var(--bad); }
.stage-fx b.gold { color: var(--accent); bottom: 120px; } .stage-fx b.xp { color: var(--accent2); bottom: 120px; }
@keyframes floatup { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-58px); opacity: 0; } }
.fx-off .stage-motes, .fx-off .stage-fx { display: none; }
.fx-off .stage-foe canvas, .fx-off .stage-hero canvas { animation: none; }
@media (max-width: 640px) { .stage { height: 220px; } .stage-foe canvas { width: 112px; height: 112px; } .stage-hero canvas { width: 112px; height: 112px; } .stage-plate { width: 60%; } }

/* ---- Camp (js/screens/camp.js) */
.camp-frame { padding: 0; overflow: hidden; margin-bottom: 12px; }
.camp-view { position: relative; height: 300px; overflow: hidden; background: #0d0a1d; }
.camp-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; object-fit: cover; object-position: center 85%; }
.camp-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: repeating-conic-gradient(rgba(0, 0, 0, .28) 0 25%, rgba(0, 0, 0, .12) 0 50%) 0 0 / 16px 16px; border-top: 3px solid rgba(0, 0, 0, .55); }
.camp-hero { position: absolute; left: 22%; bottom: 36px; z-index: 3; transition: transform .08s steps(2); }
.camp-hero canvas { display: block; width: 160px; height: 160px; animation: bob 1s steps(2) infinite; filter: drop-shadow(0 7px 0 rgba(0, 0, 0, .55)); }
.camp-hero.swing { transform: translateX(26px) rotate(6deg); }
.camp-prop { position: absolute; right: 24%; bottom: 36px; z-index: 2; }
.camp-prop canvas { display: block; width: 144px; height: 144px; filter: drop-shadow(0 7px 0 rgba(0, 0, 0, .55)); }
.camp-prop.hit canvas { transform: translateX(4px) scale(1.04); filter: brightness(1.7) drop-shadow(0 7px 0 rgba(0, 0, 0, .55)); }
.camp-prop.rest canvas { animation: flicker .5s steps(2) infinite; }
@keyframes flicker { 50% { transform: scaleY(1.05); filter: brightness(1.2) drop-shadow(0 7px 0 rgba(0, 0, 0, .55)); } }
.camp-tent { position: absolute; right: 8%; bottom: 36px; z-index: 1; }
.camp-tent canvas { width: 160px; height: 160px; filter: drop-shadow(0 7px 0 rgba(0, 0, 0, .55)); }
.camp-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.camp-fx i { position: absolute; bottom: 120px; width: 6px; height: 6px; animation: spark .7s steps(7) forwards; }
@keyframes spark { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.camp-fx b { position: absolute; bottom: 170px; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-head); font-size: calc(12px * var(--ts, 1)); font-weight: normal; text-shadow: 2px 2px 0 #000; animation: floatup 1.2s steps(10) forwards; white-space: nowrap; }
.camp-fx b.loot { color: var(--accent); } .camp-fx b.xp { color: var(--accent2); }
.camp-label { position: absolute; left: 10px; top: 10px; z-index: 6; padding: 4px 10px; background: rgba(10, 6, 24, .78); border: 3px solid #000; box-shadow: 0 0 0 2px var(--line2); font-size: calc(20px * var(--ts, 1)); }
.camp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.camp-queue { padding: 10px 12px; }
.camp-h { font-family: var(--font-head); font-size: calc(10px * var(--ts, 1)); color: var(--accent2); margin-bottom: 8px; }
.qrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.qtile { position: relative; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--well); border: 3px solid #000; box-shadow: 0 0 0 2px var(--line2); }
.qtile .q-n { position: absolute; left: 1px; top: -1px; font-size: calc(14px * var(--ts, 1)); text-shadow: 1px 1px 0 #000; color: var(--accent); }
.qtile .q-t { position: absolute; right: 1px; bottom: -2px; font-size: calc(14px * var(--ts, 1)); text-shadow: 1px 1px 0 #000; }
.doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.door { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 2px; cursor: pointer; color: var(--text);
  background: linear-gradient(var(--panel2), var(--bg2)); border: 4px solid #000; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .14), 0 4px 0 #000; font-family: var(--font-head); font-size: calc(8px * var(--ts, 1)); }
.door:hover { filter: brightness(1.2); transform: translateY(-2px); } .door:active { transform: translateY(3px); box-shadow: none; }
.door .badge { position: absolute; top: -6px; right: -6px; background: var(--bad); color: #fff; font-size: calc(8px * var(--ts, 1)); padding: 2px 5px; border: 2px solid #000; }
.door .d-n { font-family: var(--font); font-size: calc(15px * var(--ts, 1)); color: var(--good); }
.fx-off .camp-hero canvas, .fx-off .camp-prop canvas { animation: none; }
@media (max-width: 700px) { .camp-row { grid-template-columns: 1fr; } .camp-view { height: 250px; } .camp-hero { left: 6%; } .camp-prop { right: 6%; } .camp-tent { right: 2%; } .camp-hero canvas { width: 112px; height: 112px; } .camp-prop canvas, .camp-tent canvas { width: 104px; height: 104px; } }
.camp-info, .camp-news { padding: 10px 12px; margin-top: 12px; }
.camp-news .log-line { display: flex; gap: 8px; font-size: calc(18px * var(--ts, 1)); padding: 2px 0; border-bottom: 1px dashed rgba(255, 255, 255, .08); }