/* Illustrated scenes for the room game modes: painted backdrops (images/scenes/*.svg), drifting particles
   (fx() in js/screens/room-mode-view.js) and glossier HUD pieces. Loaded after room-modes.css. */

/* ---------- shared depth and polish ---------- */
.mode-board.mm { box-shadow: inset 0 1px 0 #ffffff26, inset 0 60px 70px -60px #ffffff1c, 0 14px 34px #0006; }
.mode-board.mm .mode-title > span { box-shadow: inset 0 1px 0 #ffffff30, inset 0 -3px 0 #0003, 0 4px 10px #0004; }
.mode-board.mm .mode-title h3 { text-shadow: 0 2px 0 #0006; }

/* Every scene gets a bevelled frame, a soft vignette and room for particles. */
.mm .horror-mansion, .mm .ice-mountain-scene, .time-scene, .mm .lava-arena, .mm.mode-mayhem .arena-monsters, .mm .creature-stage, .mm .lab-map,
.mm .race-track, .cart-mine, .mm .tower-scene, .vault-scene, .defense-scene, .raid-scene, .sprint-scene, .streak-scene, .gemrush-scene, .double-scene, .zombie-field {
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 0 0 2px #ffffff14, inset 0 -40px 50px -30px #0008, 0 6px 18px #0005;
}
/* Monsters stand on the ground: a soft contact shadow under every sprite in a scene. */
.mm .room-sprite-frame { filter: drop-shadow(0 6px 3px #0007); }
.mm .knocked-out .room-sprite-frame { filter: grayscale(1) drop-shadow(0 6px 3px #0007); }

/* Glossy bars with slowly moving stripes. */
.mm-bar { border-color: #ffffff24; box-shadow: inset 0 3px 6px #0008, 0 1px 0 #ffffff14; }
.mm-bar > span { background: linear-gradient(#ffffff55, #ffffff00 55%), repeating-linear-gradient(-45deg, #ffffff22 0 7px, #0000 7px 14px) 0 0 / 20px 20px, var(--bar, #7fd36b);
  box-shadow: inset 0 -2px 0 #0003; animation: mm-stripes 1.4s linear infinite; }
@keyframes mm-stripes { to { background-position: 0 0, 20px 0, 0 0; } }

/* Chunky stat tiles. */
.mm .mode-stats > div { border-radius: 12px; background: linear-gradient(#ffffff14, #ffffff03 60%), #0b1521b8; border: 1px solid #ffffff16; border-bottom: 3px solid #0006; box-shadow: inset 0 1px 0 #ffffff1f; }
.mm .mode-stats strong { text-shadow: 0 2px 0 #0007; }
.mm-banner { box-shadow: inset 0 1px 0 #ffffff1a, 0 3px 8px #0004; }
.mm-rules > span { box-shadow: inset 0 1px 0 #ffffff1a, inset 0 -2px 0 #0003; }

/* Move buttons: 3D candy buttons with the icon in a glowing bubble. */
.mm-action { background: linear-gradient(180deg, #27463d, #16262c 70%); box-shadow: inset 0 1px 0 #ffffff26, 0 6px 14px #0005; }
.mm-actions .action-grid .mm-action > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px;
  background: radial-gradient(circle at 35% 28%, #ffffff40, #ffffff0a 65%), #0003; box-shadow: inset 0 -3px 0 #0003, inset 0 1px 0 #ffffff33; }
.mm-action:hover:not(:disabled) { background: linear-gradient(180deg, #355c48, #20362f 70%); box-shadow: inset 0 1px 0 #ffffff30, 0 8px 22px #caee9333; }
.mm-action:hover:not(:disabled) > span { animation: mm-wiggle .5s ease; }
.mm-actions .action-grid .mm-action:disabled { box-shadow: none; }
.mm-actions .action-grid .mm-action:disabled > span { background: #0003; box-shadow: none; }
@keyframes mm-wiggle { 30% { rotate: -8deg; scale: 1.08; } 60% { rotate: 6deg; } }
@media (max-width: 460px) { .mm-actions .action-grid .mm-action > span { width: 44px; height: 44px; border-radius: 13px; } }

/* ---------- particles ---------- */
.mm-fx { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.mm-fx i { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(5px * var(--s)); height: calc(5px * var(--s)); border-radius: 50%; }
/* Falling: snow, confetti and sparks. */
.fx-snow i { background: #fff; box-shadow: 0 0 4px #fff; opacity: .85; animation: fx-fall calc(7s / var(--s)) linear infinite; animation-delay: calc(var(--d) * -7s); }
.fx-confetti i { width: calc(7px * var(--s)); height: calc(4px * var(--s)); border-radius: 1px; background: #ffd23f; animation: fx-fall 4.5s linear infinite, fx-flip .9s linear infinite; animation-delay: calc(var(--d) * -4.5s), 0s; }
.fx-confetti i:nth-child(4n+1) { background: #ff5d8f; } .fx-confetti i:nth-child(4n+2) { background: #4cc9f0; } .fx-confetti i:nth-child(4n+3) { background: #8fe06d; }
.fx-spark i { width: 3px; height: 3px; background: #ffe58a; box-shadow: 0 0 6px #ffb347; animation: fx-fall 1.8s ease-in infinite; animation-delay: calc(var(--d) * -1.8s); }
/* Rising: embers and bubbles. */
.fx-ember i { background: radial-gradient(#fff3b0, #ff9a3c 55%, #ff5a1f); box-shadow: 0 0 8px #ff7a2a; animation: fx-rise calc(4s / var(--s)) ease-in infinite; animation-delay: calc(var(--d) * -4s); }
.fx-bubble i { width: calc(9px * var(--s)); height: calc(9px * var(--s)); border: 1.5px solid #c8ffe0cc; background: radial-gradient(circle at 30% 30%, #ffffffaa 0 20%, #7cffc022 45%); animation: fx-rise calc(5s / var(--s)) linear infinite; animation-delay: calc(var(--d) * -5s); }
/* Twinkling: sparkles and glints (4-point stars). */
.fx-sparkle i, .fx-glint i { width: calc(12px * var(--s)); height: calc(12px * var(--s)); border-radius: 0; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: fx-twinkle 2.4s ease-in-out infinite; animation-delay: calc(var(--d) * -2.4s); }
.fx-sparkle i:nth-child(3n) { background: #d9c2ff; } .fx-sparkle i:nth-child(3n+1) { background: #a5f3fc; }
.fx-glint i { width: calc(8px * var(--s)); height: calc(8px * var(--s)); background: #fff7d1; animation-duration: 3.2s; }
/* Wandering: fireflies and dust motes. */
.fx-firefly i { width: 5px; height: 5px; background: #f4ff9a; box-shadow: 0 0 6px 2px #d9ff5a99; animation: fx-wander calc(6s / var(--s)) ease-in-out infinite alternate, fx-blink 1.7s ease-in-out infinite; animation-delay: calc(var(--d) * -6s), calc(var(--d) * -1.7s); }
.fx-dust i { width: 3px; height: 3px; background: #fff; opacity: .3; animation: fx-wander calc(9s / var(--s)) ease-in-out infinite alternate; animation-delay: calc(var(--d) * -9s); }
/* Drifting across: clouds and graveyard fog. */
.fx-cloud i { width: 90px; height: 26px; border-radius: 50%; background: #ffffff2e; filter: blur(3px); top: calc(var(--y) * .8%); animation: fx-drift calc(26s / var(--s)) linear infinite; animation-delay: calc(var(--d) * -26s); }
.fx-fog i { width: 70%; height: 30px; top: auto; bottom: calc(10px + var(--d) * 40px); border-radius: 50%; background: radial-gradient(closest-side, #d8cfff40, #0000); animation: fx-drift calc(18s / var(--s)) linear infinite; animation-delay: calc(var(--d) * -18s); }
.zombie-field .mm-fx { z-index: 11; }

@keyframes fx-fall { from { top: -6%; translate: 0 0; } 50% { translate: 12px 0; } to { top: 106%; translate: -6px 0; } }
@keyframes fx-rise { from { top: 104%; opacity: 0; } 15% { opacity: 1; } 50% { translate: 8px 0; } to { top: -6%; opacity: 0; translate: -8px 0; } }
@keyframes fx-flip { to { rotate: 1turn; scale: 1 -1; } }
@keyframes fx-twinkle { 0%, 100% { scale: .2; opacity: 0; rotate: 0deg; } 50% { scale: 1; opacity: 1; rotate: 45deg; } }
@keyframes fx-wander { from { translate: 0 0; } 33% { translate: 14px -10px; } 66% { translate: -8px -18px; } to { translate: 10px 6px; } }
@keyframes fx-blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes fx-drift { from { left: -75%; } to { left: 105%; } }

/* ---------- Monster Horror: a candle-lit haunted parlour ---------- */
.mm .horror-mansion { background: url(../images/scenes/horror.svg) center / cover; border-bottom: 24px solid #2b1c25; box-shadow: inset 0 -6px 0 #5a3f4e, inset 0 0 0 2px #ffffff10, 0 6px 18px #0005; }
.mm .horror-mansion::after { z-index: 2; }
.mm .horror-window { border-color: #4a3a5a; background: radial-gradient(circle at 50% 40%, #3a5a8a, #101a2e 70%); box-shadow: 0 0 24px #9ec5ff33, inset 0 0 14px #0008; }
.mm .horror-door { filter: brightness(.75) drop-shadow(0 0 10px #000); }
.horror-ghost { filter: drop-shadow(0 0 14px #c9b5ff) drop-shadow(0 0 30px #a78bfa88); }
.mm .horror-player { z-index: 3; }
.mm .horror-room-name { z-index: 3; background: #0009; border: 1px solid #c9a15a66; color: #f3dfb0; }
/* Full-screen play makes the hallway huge, so the monster, door, window and ghost grow with it. */
.mm .horror-mansion { container: hmansion / size; }
@container hmansion (min-height: 320px) { .horror-player { zoom: 1.7; } .horror-door { font-size: 170px; } .horror-ghost { font-size: 76px; } .horror-window { zoom: 1.4; } .horror-scare > span { font-size: 160px; } .horror-scare strong { font-size: 1.6rem; } }
@container hmansion (min-height: 460px) { .horror-player { zoom: 2.3; } .horror-door { font-size: 230px; } .horror-ghost { font-size: 104px; } .horror-window { zoom: 1.8; } .horror-room-name { font-size: 1rem; } }

/* ---------- Ice Mountain: aurora night over a snowy peak ---------- */
.mm .ice-mountain-scene { background: url(../images/scenes/ice.svg) center bottom / cover; }
.mm .ice-mountain-scene .ice-peak, .mm .ice-mountain-scene .ice-snow { display: none; }
.mm .ice-climber { z-index: 2; color: #fff; background: linear-gradient(#1d4a6ee6, #0f2a40e6); border: 1px solid #ffffff55; border-bottom: 4px solid #e3faff; border-radius: 10px; backdrop-filter: blur(3px); box-shadow: 0 4px 10px #0004; }
.mm .ice-climber.is-me { background: linear-gradient(#caee9355, #28598acc); }
.mm .ice-altitude, .mm .ice-base { text-shadow: 0 1px 3px #000a; }
.mm .ice-base { color: #1d3c58; text-shadow: none; border-top-color: #9fd0ea; text-align: center; }

/* ---------- Time Machine: a swirling time vortex ---------- */
.time-scene { padding: 16px 8px; border-radius: 16px; background: url(../images/scenes/time.svg) center / cover; }
.time-scene > :not(.mm-fx) { position: relative; z-index: 2; }
.time-portal { box-shadow: 0 0 34px #9a74ffaa, 0 0 70px #9a74ff55; animation: mm-portal 3s ease-in-out infinite; }
.time-portal::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid #e2d4ff66; border-left-color: transparent; border-right-color: transparent; animation: mm-spin 3s linear infinite reverse; }
.time-rider strong { text-shadow: 0 2px 4px #000a; }
@keyframes mm-portal { 50% { box-shadow: 0 0 46px #b99bffcc, 0 0 90px #9a74ff77; } }
.era-line li { background: linear-gradient(#ffffff10, #0000), #151d36; box-shadow: inset 0 1px 0 #ffffff1a, inset 0 -3px 0 #0004; }

/* ---------- Floor Is Lava: a volcano cave with glowing rock ledges ---------- */
.mm .lava-arena { background: repeating-linear-gradient(0deg, #0000 0 48px, #ffffff0b 49px 50px), url(../images/scenes/lava.svg) center bottom / cover; }
.mm .lava-flood { z-index: 3; border-top: 0; box-shadow: 0 -10px 40px #ff7a2a99, 0 -2px 0 #ffe7a3; }
.mm .lava-flood::before { content: ''; position: absolute; left: 0; right: 0; top: -9px; height: 12px; background: radial-gradient(circle at 10px 12px, #ffbe46 9px, #0000 10px) 0 0 / 20px 12px repeat-x; animation: mm-slide 1.4s linear infinite; }
.mm .lava-platform { z-index: 2; background: linear-gradient(#6b5a52, #3e302c); border-bottom: 6px solid #2a1e1c; border-radius: 8px 8px 12px 12px; box-shadow: inset 0 2px 0 #ffffff26, 0 6px 12px #0007, 0 10px 18px -6px #ff7a2a66; }
.mm .lava-platform.is-me { background: linear-gradient(#7b6a4a, #4a3a2a); box-shadow: inset 0 2px 0 #caee9366, 0 0 0 2px var(--brand, #caee93), 0 10px 18px -6px #ff7a2a66; }

/* ---------- Monster Mayhem: a cheering colosseum ---------- */
.mm.mode-mayhem .arena-monsters { padding: 10px; border-radius: 16px; background: url(../images/scenes/arena.svg) center / cover; }
.mm .arena-fighter { z-index: 2; background: linear-gradient(#ffffff1c, #0b152199); backdrop-filter: blur(3px); box-shadow: inset 0 1px 0 #ffffff26, 0 6px 14px #0006; }
.mm .arena-fighter.is-me { background: linear-gradient(#caee9333, #22362ccc); box-shadow: 0 0 18px #caee9344, inset 0 1px 0 #ffffff26; }
.mm .arena-fighter.is-bot { background: linear-gradient(#ff8a8a26, #3a1f28cc); }
.arena-vs { z-index: 2; font-size: 1.8rem; color: #ffd36b; text-shadow: 0 3px 0 #a33a1a, 0 0 18px #ff9a3c; animation: mm-flicker 1.2s ease-in-out infinite; }

/* ---------- Factory / Mutation / Feed creature stages ---------- */
.mm .creature-stage > :not(.mm-fx) { z-index: 2; }
.mm .factory-stage { background: radial-gradient(ellipse at 50% 85%, #fff3c444, #0000 55%), url(../images/scenes/factory.svg) center / cover; }
.mm .factory-stage .conveyor { z-index: 2; height: 24px; border-top-color: #c3ccd9; background: repeating-linear-gradient(90deg, #4d5566 0 18px, #2b313d 18px 20px), #3a4150; box-shadow: inset 0 3px 0 #ffffff22, 0 -4px 10px #0006; }
.mm .mutation-stage { background: radial-gradient(ellipse at 50% 80%, #7cffc044, #0000 55%), url(../images/scenes/mutation.svg) center / cover; }
.mm .mutation-stage .dna-helix { filter: drop-shadow(0 0 8px #7cffc0); }
.mm .feed-stage { background: url(../images/scenes/feed.svg) center bottom / cover; }
.mm .feed-stage .feed-form { box-shadow: 0 3px 8px #0006; border: 1px solid #ffe0b566; }
.assembled-creature { filter: drop-shadow(0 10px 6px #0007); }

/* ---------- Escape the Lab: tiled lab floor framed in hazard tape ---------- */
.mm .lab-map { border: 6px solid #0000; background: repeating-conic-gradient(#1a2a35 0 25%, #152230 0 50%) 0 0 / 28px 28px padding-box, repeating-linear-gradient(45deg, #ffd23f 0 10px, #1b1b1b 10px 20px) border-box; }
.mm .lab-map > span { z-index: 2; background: linear-gradient(#3a4c5c, #1d2c38); border-bottom-width: 4px; box-shadow: inset 0 1px 0 #ffffff26, 0 4px 8px #0006; }
.mm .lab-map > span.cleared { background: linear-gradient(#3f6a48, #2d4d35); }
.mm .lab-map > span.here { background: linear-gradient(#3a6a8a, #2b4f68); box-shadow: 0 0 0 3px #caee9355, 0 0 18px #caee9355; }

/* ---------- Monstit Racing: a mowed-grass circuit with kerbs ---------- */
.mm .race-track { background: repeating-linear-gradient(90deg, #3f8a4a 0 36px, #357a40 36px 72px); box-shadow: inset 0 0 0 4px #2c6b37, inset 0 0 30px #0005, 0 6px 18px #0005; }
.mm .race-lane { position: relative; z-index: 2; }
.mm .race-name { padding: 3px 6px; border-radius: 8px; background: #0005; }
.mm .race-road { background: linear-gradient(90deg, #f1f1f1cc 50%, #0000 50%) 0 50% / 26px 3px repeat-x, linear-gradient(90deg, #e63946 50%, #fff 50%) 0 0 / 16px 4px repeat-x, linear-gradient(90deg, #e63946 50%, #fff 50%) 0 100% / 16px 4px repeat-x, linear-gradient(#4a505e, #343945); box-shadow: inset 0 3px 6px #0006, 0 2px 0 #0003; }

/* ---------- Minecart Mania: lantern-lit mine with crystals ---------- */
.cart-mine { background: url(../images/scenes/mine.svg) center / cover; border-color: #6b4a2b; }
.cart-rail { position: relative; z-index: 2; }
.cart-mine .race-name { padding: 3px 6px; border-radius: 8px; background: #0006; }
.cart-track { background: linear-gradient(#0000 calc(50% + 5px), #b9c0ca calc(50% + 5px) calc(50% + 8px), #0000 calc(50% + 8px)), repeating-linear-gradient(90deg, #7a5530 0 5px, #0000 5px 16px) 0 calc(50% + 4px) / 100% 10px no-repeat, #2a1f17cc; box-shadow: inset 0 2px 6px #0007; }
.cart-fork { background: linear-gradient(#5a4430, #3a2c20); box-shadow: inset 0 1px 0 #ffffff22, 0 4px 10px #0005; }

/* ---------- Monster Tower: a stone tower climbing into a sunset sky ---------- */
.mm .tower-scene { padding: 14px 18px 0; border-radius: 16px; background: url(../images/scenes/sky.svg) center bottom / cover; width: 100%; }
.mm .tower-scene > :not(.mm-fx) { position: relative; z-index: 2; width: min(100%, 240px); margin-inline: auto; }
.mm .tower-scene > .tower-floor { width: min(100%, 240px); }
.tower-floor { background: repeating-linear-gradient(0deg, #0000 0 13px, #0003 13px 14px), linear-gradient(90deg, #5a5274, #4a4262 50%, #3a3352); box-shadow: inset 4px 0 0 #ffffff12, inset -4px 0 0 #0003; }
.tower-floor.boss { background: repeating-linear-gradient(0deg, #0000 0 13px, #0003 13px 14px), linear-gradient(90deg, #7a3a62, #5b3050); }
.tower-floor.done { background: repeating-linear-gradient(0deg, #0000 0 13px, #0003 13px 14px), linear-gradient(90deg, #4a6a58, #3a4f45); }
.tower-floor.here { background: repeating-linear-gradient(0deg, #0000 0 13px, #0003 13px 14px), linear-gradient(90deg, #3a7a94, #2f5a6e); box-shadow: inset 0 0 0 2px #caee9366, 0 0 16px #caee9344; }
.mm .tower-ground { height: 0; }
.tower-cap { filter: drop-shadow(0 0 10px #ffd36b88); }

/* ---------- Monster Heist: inside the bank vault ---------- */
.vault-scene { background: url(../images/scenes/vault.svg) center / cover; }
.vault-scene > :not(.mm-fx) { position: relative; z-index: 2; }
.vault-safe, .vault-heat { background: linear-gradient(#ffffff14, #0b1521dd); backdrop-filter: blur(3px); box-shadow: inset 0 1px 0 #ffffff22, 0 6px 14px #0006; }
.vault-heat { box-shadow: inset 0 1px 0 #ffffff22, 0 0 calc(var(--heat, 0) * 30px) #ff4d5e88; }

/* ---------- Monster Defense: dusk over the hills ---------- */
.defense-scene { background: url(../images/scenes/defense.svg) center bottom / cover; }
.defense-scene > :not(.mm-fx) { position: relative; z-index: 2; }
.defense-castle > span { filter: drop-shadow(0 0 14px #ffeaa866) drop-shadow(0 6px 6px #0008); }
.defense-kit > span { background: linear-gradient(#ffffff14, #0b1521dd); backdrop-filter: blur(2px); }

/* ---------- Monstit Hunt: painted habitat cards ---------- */
.mm .hunt-map button.hab-0 { background: linear-gradient(#0000 30%, #000b), url(../images/scenes/hunt-0.svg) center / cover !important; }
.mm .hunt-map button.hab-1 { background: linear-gradient(#0000 30%, #000b), url(../images/scenes/hunt-1.svg) center / cover !important; }
.mm .hunt-map button.hab-2 { background: linear-gradient(#0000 30%, #000b), url(../images/scenes/hunt-2.svg) center / cover !important; }
.mm .hunt-map button.hab-3 { background: linear-gradient(#0000 30%, #000b), url(../images/scenes/hunt-3.svg) center / cover !important; }
.mm .hunt-map button.hab-4 { background: linear-gradient(#0000 30%, #000b), url(../images/scenes/hunt-4.svg) center / cover !important; }
.mm .hunt-map button.hab-5 { background: linear-gradient(#0000 30%, #000b), url(../images/scenes/hunt-5.svg) center / cover !important; }
.mm .hunt-map button { box-shadow: inset 0 1px 0 #ffffff2a, inset 0 -4px 0 #0005, 0 6px 12px #0005; text-shadow: 0 1px 3px #000; transition: transform .15s ease, box-shadow .15s ease; }
.mm .hunt-map button span { filter: drop-shadow(0 3px 3px #0008); }
.mm .hunt-map button:hover { transform: translateY(-2px); }

/* ---------- Boss Raid: a glowing crystal cavern ---------- */
.raid-scene { background: url(../images/scenes/crystal-cave.svg) center / cover; }
.raid-scene > :not(.mm-fx) { position: relative; z-index: 2; }
.raid-boss > .room-monster-avatar { filter: drop-shadow(0 0 18px #b38cffaa); }
.raid-boss strong { text-shadow: 0 2px 4px #000; }

/* ---------- Classic modes: a spotlit stage ---------- */
.sprint-scene > :not(.mm-fx, .sprint-burst), .streak-scene > :not(.mm-fx), .gemrush-scene > :not(.mm-fx, .sprint-burst), .double-scene > :not(.mm-fx, .sprint-burst) { position: relative; z-index: 2; }
.sprint-scene::after, .streak-scene::after, .gemrush-scene::after, .double-scene::after { content: ''; position: absolute; left: 15%; right: 15%; bottom: -18px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, #ffffff2e, #0000); z-index: 0; }
.sprint-score strong, .streak-count strong, .double-multi strong { text-shadow: 0 3px 0 #0007, 0 0 20px currentColor; }
.gemrush-gem { filter: drop-shadow(0 4px 0 #0006) drop-shadow(0 0 14px #7ad3ff); }

/* ---------- Monster Clash: glowing pedestals ---------- */
.clash-slot { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 92%, #ffffff26, #0000 45%), linear-gradient(#26324a, #161e2e); box-shadow: inset 0 1px 0 #ffffff1c, 0 6px 14px #0005; }
.clash-slot:not(.is-empty)::before { content: ''; position: absolute; left: 50%; top: 18%; width: 90px; height: 90px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--rarity, #8cc8ff) 45%, #0000), #0000); z-index: 0; }
.clash-slot > * { position: relative; z-index: 1; }
.clash-slot.rarity-rare { --rarity: #4cc9f0; } .clash-slot.rarity-epic { --rarity: #c44cff; } .clash-slot.rarity-legendary { --rarity: #ffd60a; } .clash-slot.rarity-heroic { --rarity: #ff3030; }

/* ---------- Zombie Night: a foggy graveyard ---------- */
.zombie-field { background: url(../images/scenes/graveyard.svg) center bottom / cover; }
.zf-house { filter: drop-shadow(0 0 16px #f97316aa) drop-shadow(0 6px 4px #000a); }
/* The field grows with full-screen play, so the horde, hideout and crew grow with it (cqh = 1% of field height). */
.zombie-field { container: zfield / size; --zbase: max(110px, 36cqh); }
.zombie-field .zf-lane, .zombie-field .zombie-clash { font-size: max(1.6rem, 11cqh); }
.zombie-field .zombie { font-size: 1em; bottom: calc(max(8px, 4cqh) + var(--row, 0) * max(8px, 4.5cqh)); }
.zombie-field .z-brute { font-size: 1.55em; }
.zombie-field .z-king { font-size: 2em; }
.zombie-field .zf-base { width: var(--zbase); }
.zombie-field .zf-crew { justify-self: end; flex-direction: row-reverse; }
.zombie-field .zf-house { font-size: max(4.2rem, 28cqh); }
.zombie-field .zf-boards { font-size: max(1.5rem, 10cqh); bottom: 32%; }
.zombie-field .zf-moon { font-size: max(1.8rem, 10cqh); }
.zombie-field .zf-grave { font-size: max(1.1rem, 7cqh); bottom: 22%; }
.zombie-field .zombie-clash .zombie { right: calc(var(--zbase) - 10px + var(--k) * .55em); }
.zombie-field .zc-shot { right: calc(var(--zbase) * .6); bottom: 36%; font-size: max(1.3rem, 8cqh); }
.zombie-field .zc-dmg { font-size: max(1.6rem, 10cqh); right: calc(var(--zbase) * .3); top: 18%; }
@keyframes zombie-march { from { left: calc(-14% - var(--gap, 0) * 1px); } to { left: calc(100% - var(--zbase) - 18px - var(--gap, 0) * 1px); } }
.zf-status { position: absolute; left: 50%; top: 10px; z-index: 14; translate: -50% 0; display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 10px; padding: 6px 14px; border-radius: 16px;
  background: #0b0716d9; border: 2px solid #36d399; box-shadow: 0 6px 18px #0008; text-align: left; white-space: nowrap; }
.zf-status b { font: .95rem var(--font-display); color: #fff; }
.zf-status span { font: 900 .9rem var(--font-body); color: #fde68a; }
.zf-status small { font: 800 .72rem var(--font-body); color: #cbd5e1; }
.zf-status em { font: 900 .78rem var(--font-body); font-style: normal; color: #86efac; }
.zf-status.is-danger { border-color: #ff5d6c; animation: zf-danger 1s ease-in-out infinite alternate; }
.zf-status.is-danger em { color: #fecaca; }
@keyframes zf-danger { to { box-shadow: 0 0 22px #ff5d6c99, 0 6px 18px #0008; } }
@container zfield (min-height: 280px) { .zf-crew { zoom: 1.6; } .zf-lives { font-size: 1.5rem; } .zc-tag { font-size: 1.05rem; } }
@container zfield (min-height: 420px) { .zf-crew { zoom: 1.8; } .zf-status { zoom: 1.3; } .zf-lives { font-size: 1.9rem; } .zc-tag { font-size: 1.25rem; } }

@media (prefers-reduced-motion: reduce) {
  .mm-fx { display: none; }
  .mm-bar > span, .time-portal, .time-portal::after, .arena-vs, .mm .lava-flood::before { animation: none !important; }
}
@container zfield (max-width: 440px) { .zf-status { left: 8px; translate: none; padding: 4px 10px; } }

/* Full-screen races: the lanes share the whole scene height, and racers grow when there are only a few. */
#screen-rooms.immersive .cart-mine, #screen-rooms.immersive .mm .race-track { min-height: var(--scene-h); max-height: none; align-content: space-evenly; }
#screen-rooms.immersive .mm .race-track { display: grid; }
#screen-rooms.immersive .lanes-few :is(.cart-track, .race-road) { height: clamp(34px, calc(var(--scene-h) / 4 - 34px), 110px); }
#screen-rooms.immersive .lanes-some :is(.cart-track, .race-road) { height: clamp(34px, calc(var(--scene-h) / 8 - 22px), 64px); }
#screen-rooms.immersive .lanes-few .race-name strong { font-size: 1rem; }
#screen-rooms.immersive .lanes-few .race-name small { font-size: .8rem; }
#screen-rooms.immersive :is(.lanes-few, .lanes-some) :is(.cart-rail, .race-lane) { grid-template-columns: 84px minmax(0, 1fr); }
/* Ice Mountain: climbers and labels grow with the full-screen mountain. */
.mm .ice-mountain-scene { container: icemtn / size; }
@container icemtn (min-height: 360px) { .ice-climber { zoom: 1.45; } .ice-altitude, .ice-base { font-size: .9rem; } }
@container icemtn (min-height: 500px) { .ice-climber { zoom: 1.8; } .ice-altitude, .ice-base { font-size: 1.05rem; } }
/* Floor Is Lava: platforms and monsters grow with the full-screen arena. */
.mm .lava-arena { container: lavaarena / size; }
@container lavaarena (min-height: 340px) { .lava-platform { zoom: 1.45; } }
@container lavaarena (min-height: 480px) { .lava-platform { zoom: 1.8; } .lava-flood span { font-size: 1.1rem; } }
/* Monster Mayhem: the arena fills the scene and fighters grow when there are only a few. */
#screen-rooms.immersive .mm .arena-monsters { min-height: var(--scene-h); align-content: safe center; overflow-y: auto; }
/* Build modes: the creature grows on a tall stage. */
@media (min-height: 640px) { #screen-rooms.immersive .creature-stage .assembled-creature { zoom: 1.3; margin: 24px auto; } }
@media (min-height: 640px) and (min-width: 700px) { #screen-rooms.immersive .creature-stage .assembled-creature { zoom: 1.6; margin: 34px auto; } }
@media (min-height: 820px) and (min-width: 700px) { #screen-rooms.immersive .creature-stage .assembled-creature { zoom: 2; } }
/* Escape the Lab: the ten rooms fill the scene as a big floor plan. */
#screen-rooms.immersive .mm .lab-map { min-height: calc(var(--scene-h) * .8); grid-auto-rows: 1fr; gap: 10px; padding: 14px; }
#screen-rooms.immersive .mm .lab-map > span { font-size: 2rem; }
#screen-rooms.immersive .mm .lab-map > span small { font-size: .8rem; }
#screen-rooms.immersive .mm .lab-map > span .room-monster-avatar { zoom: 2; }
/* Monster Tower: a wider, taller tower in full-screen play. */
#screen-rooms.immersive .mm .tower-scene { width: min(100%, 440px); }
#screen-rooms.immersive .tower-floor { min-height: clamp(42px, calc(var(--scene-h) / 8), 78px); font-size: 1.15rem; }
#screen-rooms.immersive .tower-floor > b { font-size: 1.05rem; }
#screen-rooms.immersive .tower-floor > span { font-size: .95rem; }
#screen-rooms.immersive .tower-floor.here > .room-monster-avatar { zoom: 1.4; margin: -12px 0 -6px; }
#screen-rooms.immersive .tower-cap { font-size: 3rem; }
/* Monster Heist: a bigger thief and bag. */
@media (min-height: 640px) and (min-width: 700px) { #screen-rooms.immersive .vault-thief > .room-monster-avatar { zoom: 1.7; } #screen-rooms.immersive .vault-safe > span, #screen-rooms.immersive .vault-heat > span { font-size: 3rem; } }
/* Monster Defense: a big castle, a big incoming wave, and the build kit along the bottom. */
#screen-rooms.immersive .defense-scene { align-content: space-between; }
@media (min-height: 640px) {
  #screen-rooms.immersive .defense-wave { font-size: 3.4rem; letter-spacing: 6px; }
  #screen-rooms.immersive .defense-castle { zoom: 2; }
  #screen-rooms.immersive .defense-kit i { font-size: 2rem; }
  #screen-rooms.immersive .defense-kit small { font-size: .78rem; }
  #screen-rooms.immersive .defense-kit b { font-size: 1.2rem; }
}
/* Classic modes: a big monster and a big score (smaller on phones so the score still fits). */
@media (min-height: 640px) {
  #screen-rooms.immersive :is(.sprint-scene, .streak-scene, .gemrush-scene, .double-scene) > .room-monster-avatar { zoom: 1.4; }
  #screen-rooms.immersive .raid-boss > .room-monster-avatar { zoom: 1.3; }
  #screen-rooms.immersive .raid-scene { padding-top: 24px; }
}
@media (min-height: 640px) and (min-width: 700px) {
  #screen-rooms.immersive :is(.sprint-scene, .streak-scene, .gemrush-scene, .double-scene) > .room-monster-avatar { zoom: 2; }
  #screen-rooms.immersive :is(.sprint-scene, .gemrush-scene, .double-scene) .sprint-score, #screen-rooms.immersive .streak-count, #screen-rooms.immersive .double-multi { zoom: 1.8; }
  #screen-rooms.immersive .streak-flame { zoom: 1.8; }
  #screen-rooms.immersive .raid-boss > .room-monster-avatar { zoom: 1.5; }
  #screen-rooms.immersive .raid-scene { padding-top: 34px; }
  #screen-rooms.immersive .raid-crew { zoom: 1.4; }
}
/* Bigger racers and fighters only where there's room for them (laptops and tablets). */
@media (min-width: 700px) and (min-height: 600px) {
  #screen-rooms.immersive .lanes-few :is(.cart-car, .race-car) { zoom: 1.9; }
  #screen-rooms.immersive .lanes-some :is(.cart-car, .race-car) { zoom: 1.3; }
  #screen-rooms.immersive .arena-monsters.lanes-few .arena-fighter { zoom: 1.7; }
  #screen-rooms.immersive .arena-monsters.lanes-some .arena-fighter { zoom: 1.25; }
}
/* Monstit Hunt: the six habitats fill the scene as big tappable cards. */
#screen-rooms.immersive .mm .hunt-map { min-height: calc(var(--scene-h) * .8); grid-auto-rows: 1fr; gap: 10px; }
#screen-rooms.immersive .mm .hunt-map button span { font-size: 2.6rem; }
#screen-rooms.immersive .mm .hunt-map button strong { font-size: .9rem; }
#screen-rooms.immersive .mm .hunt-map button small { font-size: .8rem; }

/* ---------- Host big screen (classScene in room-mode-view.js) ---------- */
.class-scene { margin: 0 0 18px; padding: 14px; border-radius: 22px; border: 2px solid #ffffff1f; background: linear-gradient(160deg, #1d2a44, #121a2b); box-shadow: 0 14px 34px #0006; }
.class-scene.mode-racing, .class-scene.mode-minecart, .class-scene.mode-ice-mountain, .class-scene.mode-mayhem, .class-scene.mode-raid { padding: 8px; }
/* Racers glide from where they were last drawn (--from) to where they are now (--to). */
.glide-x { left: calc(var(--to) * 1%) !important; animation: glide-x 1s cubic-bezier(.3, 1.25, .5, 1); }
@keyframes glide-x { from { left: calc(var(--from) * 1%); } }
.glide-w { width: calc(var(--to) * 1%); animation: glide-w 1s cubic-bezier(.3, 1.15, .5, 1); }
@keyframes glide-w { from { width: calc(var(--from) * 1%); } }
.host-track.lanes-few :is(.cart-track, .race-road) { height: 86px; }
.host-track.lanes-some :is(.cart-track, .race-road) { height: 58px; }
.host-track.lanes-few :is(.cart-car, .race-car) { zoom: 1.6; }
.host-track :is(.cart-rail, .race-lane) { grid-template-columns: 120px minmax(0, 1fr); }
.host-track .race-name strong { font-size: .95rem; }
.host-track .race-name small { font-size: .8rem; }
.class-scene .ice-mountain-scene { height: 380px; }
.class-scene .ice-climber { zoom: 1.2; }
.class-scene .raid-scene { min-height: 320px; }
.class-scene .raid-boss > .room-monster-avatar { zoom: 1.6; }
.class-scene .host-arena { max-height: none; }
.class-scene .host-arena.lanes-few .arena-fighter { zoom: 1.5; }
/* Monster bar race: everyone else's mode, top 8 by score. */
.bar-race { display: grid; gap: 10px; }
.br-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 120px; align-items: center; gap: 10px; }
.br-rank { font: 1.5rem var(--font-display); text-align: center; color: #c9d4ff; }
.br-track { position: relative; display: flex; align-items: center; height: 52px; padding-right: 50px; border-radius: 14px; background: #0b1221; box-shadow: inset 0 2px 6px #0008; }
.br-bar { position: relative; display: flex; align-items: center; height: 100%; min-width: 0; border-radius: 14px; background: linear-gradient(#ffffff40, #ffffff00 55%), linear-gradient(90deg, #4d9bff, #8a6cff); box-shadow: inset 0 -3px 0 #0003; }
.br-row.place-1 .br-bar { background: linear-gradient(#ffffff55, #ffffff00 55%), linear-gradient(90deg, #ffb703, #ffd23f); }
.br-row.place-2 .br-bar { background: linear-gradient(#ffffff55, #ffffff00 55%), linear-gradient(90deg, #9aaabe, #e6edf5); }
.br-row.place-3 .br-bar { background: linear-gradient(#ffffff55, #ffffff00 55%), linear-gradient(90deg, #a85d2a, #f0b27d); }
.br-bar em { overflow: hidden; padding: 0 12px; font: 1.05rem var(--font-display); font-style: normal; color: #fff; text-shadow: 0 2px 0 #0007; white-space: nowrap; text-overflow: ellipsis; }
.br-row.place-1 .br-bar em, .br-row.place-2 .br-bar em { color: #2a1b00; text-shadow: none; }
.br-track > .room-monster-avatar { flex-shrink: 0; margin: -16px 0 -10px -24px; zoom: .95; }
.br-score { font: 1.5rem var(--font-display); color: #ffd23f; text-align: right; }
.br-score small { font-size: .85rem; color: #c9d4ff; }
@media (max-width: 640px) { .br-row { grid-template-columns: 30px minmax(0, 1fr) 76px; gap: 6px; } .br-score { font-size: 1.1rem; } .br-track { height: 42px; } }
@media (prefers-reduced-motion: reduce) { .glide-x, .glide-w { animation: none; } }
.class-scene :is(.race-track, .cart-mine) { max-height: none; overflow: visible; }
.br-track > .br-out { overflow: hidden; margin-left: 8px; font: 1rem var(--font-display); font-style: normal; color: #c9d4ff; white-space: nowrap; text-overflow: ellipsis; }
.class-scene .host-arena { min-height: 280px; align-content: center; } .class-scene .host-arena.lanes-some .arena-fighter { zoom: 1.3; }
/* Monster Clash arena: three lanes, your team on the left facing your rival on the right. After each
   battle the duels replay lane by lane (timed from --since, so redraws pick up mid-replay). */
.clash-arena { --t: calc(var(--since, 99999) * -1ms); container: clasharena / inline-size; position: relative; overflow: hidden; display: grid; gap: 8px; padding: 12px; border-radius: 18px; background: radial-gradient(ellipse 60% 40% at 50% 0%, #ff8a3d38, #0000 70%), radial-gradient(ellipse 70% 40% at 50% 100%, #6c4dff40, #0000 70%), linear-gradient(#1a1430, #0f1426 60%, #1d1530); box-shadow: inset 0 0 0 2px #ffffff14, 0 10px 24px #0006; }
.clash-arena::before { content: ''; position: absolute; inset: auto 6% 0; height: 46%; border-radius: 50% 50% 0 0 / 30% 30% 0 0; background: repeating-linear-gradient(90deg, #ffffff08 0 2px, #0000 2px 60px), linear-gradient(#3a2a5a55, #1a1430); pointer-events: none; }
.clash-arena > * { position: relative; z-index: 1; }
.ca-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ca-next { padding: 6px 14px; border-radius: 999px; background: linear-gradient(#ff8a3d, #e85d1a); box-shadow: 0 3px 0 #8c3208, 0 0 18px #ff8a3d55; font: 1rem var(--font-display); color: #fff; text-shadow: 0 1px 0 #0006; }
.ca-next .mm-tick { color: #fff3c4; margin-left: 4px; }
.ca-coins { padding: 5px 12px; border-radius: 999px; background: #0008; font-weight: 900; color: #ffd966; }
.ca-sides { display: grid; grid-template-columns: 1fr 1fr; font: .8rem var(--font-display); letter-spacing: 1px; text-transform: uppercase; color: #b9c4ff; }
.ca-sides span { display: flex; align-items: center; gap: 6px; } .ca-sides span:last-child { justify-content: flex-end; color: #ffb3a8; }
.ca-lanes { display: grid; gap: 8px; }
.ca-lane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(76px, .55fr) minmax(0, 1fr); align-items: center; gap: 6px; }
.ca-mon { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 8px; align-items: center; min-height: 74px; padding: 6px 10px; border-radius: 14px; background: linear-gradient(90deg, #2c4f9a, #1b2a52); border: 2px solid #5b8cff88; box-shadow: 0 4px 0 #0005; }
.ca-mon.foe { grid-template-columns: minmax(0, 1fr) auto; text-align: right; background: linear-gradient(270deg, #9a2c3c, #521b2a); border-color: #ff6b7d88; }
.ca-mon > .room-monster-avatar { grid-row: 1 / 4; }
.ca-mon.foe > .room-monster-avatar { grid-column: 2; scale: -1 1; }
.ca-mon strong { overflow: hidden; font-size: .9rem; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; }
.ca-mon small { font-size: .7rem; font-weight: 800; color: #d4dcf5; }
.ca-mon .clash-stars { font-size: .8rem; }
.ca-mon.rarity-rare { border-color: #4cc9f0; } .ca-mon.rarity-epic { border-color: #c44cff; box-shadow: 0 4px 0 #0005, 0 0 12px #c44cff55; }
.ca-mon.rarity-legendary { border-color: #ffd60a; box-shadow: 0 4px 0 #0005, 0 0 14px #ffd60a66; } .ca-mon.rarity-heroic { border-color: #ff3030; box-shadow: 0 4px 0 #0005, 0 0 16px #ff303077; }
.ca-mon:is(.is-empty, .is-mystery) { display: flex; justify-content: center; gap: 8px; background: #ffffff0d; border: 2px dashed #ffffff33; color: #9fb0cc; }
.ca-mon:is(.is-empty, .is-mystery) > span { font-size: 1.8rem; }
.ca-mon.is-mystery > span { animation: mm-wiggle 2.4s ease-in-out infinite; }
.ca-mid { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; gap: 2px; font: 1.05rem var(--font-display); }
.ca-mid .vs { grid-column: 1 / -1; font-style: normal; font-size: 1.4rem; color: #ffd966; text-shadow: 0 0 12px #ff8a3d, 0 2px 0 #0008; }
.ca-mid > i:not(.vs) { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; background: #36d399; color: #0b2a1d; }
.ca-mid.lost > i { background: #ff5d6c; color: #fff; }
.ca-pow { color: #fff; text-shadow: 0 2px 0 #0008; } .ca-pow.bonus { color: #ffd23f; }
.ca-mid > em { grid-column: 1 / -1; font: 800 .62rem var(--font-body, inherit); font-style: normal; color: #ffd23f; text-transform: uppercase; } .ca-mid > em.bad { color: #ff9aa5; }
.ca-hit { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: 2.2rem; opacity: 0; pointer-events: none; }
/* Replay: lane k clashes at 0.5s + k × 0.9s after the battle. */
.ca-lane.has-duel { --at: calc(500ms + var(--k) * 900ms + var(--t)); }
.ca-lane.has-duel .ca-mon.mine { animation: ca-lunge-r .5s ease-in-out var(--at) both; }
.ca-lane.has-duel .ca-mon.foe { animation: ca-lunge-l .5s ease-in-out var(--at) both; }
.ca-lane.has-duel .ca-hit { animation: ca-hit .6s ease-out calc(var(--at) + 180ms) both; }
.ca-lane.has-duel .ca-mid > :not(.ca-hit) { animation: ca-pop .35s ease-out calc(var(--at) + 250ms) both; }
.ca-lane.has-duel .ca-mon.ko { animation: ca-ko .7s ease-in calc(var(--at) + 350ms) both; }
.ca-result { justify-self: center; display: grid; justify-items: center; padding: 8px 22px; border-radius: 16px; animation: ca-stamp .5s cubic-bezier(.2, 1.6, .5, 1) calc(3.3s + var(--t)) both; }
.ca-result strong { font: 1.6rem var(--font-display); letter-spacing: 1px; }
.ca-result small { font-weight: 800; color: #e6ecff; }
.ca-result.win { background: linear-gradient(#ffd23f, #ff9f1c); color: #3a2200; box-shadow: 0 5px 0 #9a5a00, 0 0 30px #ffd23f88; } .ca-result.win small { color: #5a3600; }
.ca-result.loss { background: linear-gradient(#5a2a3a, #33182a); color: #ffb3bd; box-shadow: 0 5px 0 #1a0a12; }
@keyframes ca-lunge-r { 50% { translate: 18% 0; scale: 1.06; } }
@keyframes ca-lunge-l { 50% { translate: -18% 0; scale: 1.06; } }
@keyframes ca-hit { from { opacity: 0; scale: .3; } 30% { opacity: 1; scale: 1.5; } to { opacity: 0; scale: 2; } }
@keyframes ca-pop { from { opacity: 0; scale: .4; } }
@keyframes ca-ko { 30% { translate: 0 -6px; rotate: -4deg; } to { filter: grayscale(1) brightness(.6); opacity: .55; scale: .92; } }
@keyframes ca-stamp { from { opacity: 0; scale: 2.4; rotate: -8deg; } }
@container clasharena (min-width: 560px) {
  .ca-mon { min-height: 96px; } .ca-mon > .room-monster-avatar { zoom: 1.35; }
  .ca-mon strong { font-size: 1.05rem; } .ca-mon small { font-size: .78rem; }
  .ca-mid { font-size: 1.4rem; } .ca-mid .vs { font-size: 2rem; }
}
#screen-rooms.immersive .mm .clash-arena { min-height: calc(var(--scene-h) * .8); align-content: space-evenly; }
@media (min-height: 700px) and (min-width: 700px) { #screen-rooms.immersive .ca-mon { min-height: 120px; } #screen-rooms.immersive .ca-mon > .room-monster-avatar { zoom: 1.8; } }
@media (max-width: 480px) { .ca-mon { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 6px 4px; } .ca-mon.foe { grid-template-columns: 1fr; text-align: center; } .ca-mon > .room-monster-avatar, .ca-mon.foe > .room-monster-avatar { grid-row: auto; grid-column: auto; } .ca-mon small { display: none; } .ca-lane { grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .clash-arena *, .ca-result { animation-duration: 1ms !important; animation-delay: 0s !important; } }
/* Monster Factory build (factoryCreature). */
.factory-build .fb-body { scale: calc(1 + var(--grow) * .09); transform-origin: 50% 90%; filter: hue-rotate(calc(var(--mut) * 55deg)) saturate(calc(1 + var(--mut) * .15)); transition: scale .5s cubic-bezier(.2, 1.6, .5, 1); }
.factory-build.is-powered .fb-body { filter: hue-rotate(calc(var(--mut) * 55deg)) saturate(calc(1 + var(--mut) * .15)) drop-shadow(0 0 10px #ff9f1c) drop-shadow(0 0 22px #ff5d1c88); }
.factory-build.is-supercharged .fb-body { animation: fb-charge 1.2s ease-in-out infinite; }
.fb-heads { position: absolute; z-index: 3; left: 50%; top: calc(-26px - var(--grow) * 5px); translate: -50% 0; display: flex; gap: 2px; font-size: 30px; }
.fb-heads span { animation: fb-blink 4s ease-in-out calc(var(--k) * .7s) infinite; }
.fb-arm { position: absolute; z-index: 1; top: 44%; font-size: 34px; } .fb-arm.left { left: calc(-34px - var(--grow) * 4px); scale: -1 1; } .fb-arm.right { right: calc(-34px - var(--grow) * 4px); }
.fb-tail { position: absolute; z-index: 0; bottom: 4px; left: calc(-40px - var(--grow) * 3px); font-size: 34px; scale: -1 1; }
.fb-fire { animation: fb-flame .5s ease-in-out infinite alternate; transform-origin: left center; }
.fb-dna { position: absolute; z-index: 3; top: 6px; right: -18px; font-size: 20px; writing-mode: vertical-lr; animation: mm-wiggle 2s ease-in-out infinite; }
.factory-claw { position: absolute; z-index: 4; left: 50%; top: -60px; translate: -50% 0; display: grid; justify-items: center; animation: fb-claw 1.6s ease-in-out calc(var(--since) * -1ms) both; }
.factory-claw i { width: 6px; height: 70px; background: linear-gradient(90deg, #8a95a8, #d7dee8, #8a95a8); border-radius: 3px; }
.factory-claw span { margin-top: -6px; padding: 4px; border: 3px solid #d7dee8; border-top: 0; border-radius: 0 0 14px 14px; font-size: 30px; }
@keyframes fb-claw { from { translate: -50% -120px; } 35% { translate: -50% 40px; } 55% { translate: -50% 40px; opacity: 1; } to { translate: -50% -140px; opacity: 0; } }
@keyframes fb-blink { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 .1; } }
@keyframes fb-flame { to { scale: 1.25; } }
@keyframes fb-charge { 50% { translate: 0 -3px; filter: hue-rotate(calc(var(--mut) * 55deg)) drop-shadow(0 0 16px #ffd23f) drop-shadow(0 0 30px #ff5d1c); } }
@media (prefers-reduced-motion: reduce) { .factory-claw { display: none; } .fb-heads span, .fb-fire, .fb-dna, .factory-build .fb-body { animation: none !important; } }
.ca-sides .room-monster-avatar { zoom: .7; margin: -14px 0 -6px; }
/* Monster Tower: lit windows, classmates on their floors, arrows for anyone out of view. */
.tower-floor { grid-template-columns: 34px auto minmax(0, 1fr) auto; }
.tower-floor > em { grid-column: 4; }
.tower-floor > span.win { display: flex; gap: 10px; letter-spacing: 0; opacity: 1; }
.tower-floor > span.win i { width: 14px; height: 16px; border-radius: 3px 3px 1px 1px; background: #1c1830; box-shadow: inset 0 0 0 2px #0004; }
.tower-floor > span.win i.lit { background: linear-gradient(#ffe9a3, #ffc94d); box-shadow: 0 0 8px #ffd26688; }
.tower-rivals { grid-column: 3; justify-self: end; display: flex; align-items: center; }
.tower-rivals .room-monster-avatar { margin-left: -8px; }
.tower-rivals em { margin-left: 2px; font-style: normal; font-size: .75rem; font-weight: 900; color: #fff; }
.tower-above { justify-self: center; padding: 4px 12px; border-radius: 999px; background: #000a; color: #ffd966; font-weight: 900; font-size: .8rem; animation: mm-wiggle 3s ease-in-out infinite; }
.tower-ground { display: grid; place-items: center; }
.tower-ground span { padding: 2px 10px; border-radius: 999px; background: #0008; color: #e6ecff; font-size: .75rem; font-weight: 900; }
#screen-rooms.immersive .tower-floor > span.win i { width: 20px; height: 24px; }
#screen-rooms.immersive .tower-rivals .room-monster-avatar { zoom: 1.25; }
.mm .tower-ground:has(span) { height: auto; padding: 6px 0 8px; background: none; }
/* Streak Rush heats up: the scene, the flame and the monster's aura all follow --heat (0 to 1). */
.streak-scene { background: radial-gradient(ellipse at 50% 110%, color-mix(in srgb, #ff5a1c calc(var(--heat) * 85%), #0000), #0000 70%), radial-gradient(ellipse at 30% 80%, #ff7a3c44, transparent 60%), linear-gradient(color-mix(in srgb, #3a1020 calc(var(--heat) * 100%), #1a1320), #1a1320); transition: background .6s; }
.streak-scene.heat-cold { background: radial-gradient(ellipse at 50% 100%, #4cc9f033, #0000 70%), linear-gradient(#141c30, #10141f); }
.streak-scene.heat-cold .streak-flame { filter: grayscale(.8) brightness(.8); }
.streak-scene:is(.heat-fire, .heat-inferno) > .room-monster-avatar { filter: drop-shadow(0 0 12px #ff8a3c) drop-shadow(0 0 26px #ff5a1c99); }
.streak-scene.heat-inferno { animation: streak-pulse 1s ease-in-out infinite; }
.streak-flame { font-size: calc(2.4rem + var(--heat, 0) * 3.4rem); }
.streak-tier { margin-top: 2px; padding: 2px 10px; border-radius: 999px; background: #0007; font: .8rem var(--font-display); letter-spacing: 1px; color: #ffd24a; }
.heat-cold .streak-tier { color: #9fd8ff; } .heat-inferno .streak-tier { background: linear-gradient(#ffd24a, #ff6a2b); color: #3a1406; }
.streak-score { margin-top: 4px; font-size: .75rem; font-weight: 900; color: #e6dcef; }
.streak-meter { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.streak-meter i { height: auto; padding: 4px 2px; line-height: 1.1; }
.streak-meter i b { font-size: .8rem; } .streak-meter i small { display: block; font-size: .62rem; opacity: .85; }
.streak-meter i.next { background: #3a2a40; color: #ffd24a; box-shadow: inset 0 0 0 2px #ffd24a; animation: streak-next 1.2s ease-in-out infinite alternate; }
@keyframes streak-next { to { box-shadow: inset 0 0 0 2px #ffd24a, 0 0 14px #ffd24aaa; translate: 0 -2px; } }
@keyframes streak-pulse { 50% { box-shadow: inset 0 0 40px #ff5a1c88; } }
#screen-rooms.immersive .streak-meter i { padding: 8px 2px; } #screen-rooms.immersive .streak-meter i b { font-size: 1.1rem; } #screen-rooms.immersive .streak-meter i small { font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .streak-scene.heat-inferno, .streak-meter i.next { animation: none; } }