/* public/videommo/videommo.css */
/* The MMO layer over the watch page. Battle on = body.vmmo-battle. */
#vmmoWorld { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 19000; overflow: clip; }
#vmmoWorld .vm-ent { position: absolute; transform: translate(-50%, -100%); will-change: left, top; }
#vmmoWorld .vm-char .vm-rig { position: relative; width: calc(120px * var(--vm-k, 1)); height: calc(140px * var(--vm-k, 1)); }
#vmmoWorld .vm-name { font: 700 11px/1.2 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; text-align: center; white-space: nowrap; }
#vmmoWorld .vm-bar { width: 64px; height: 5px; margin: 2px auto 0; background: #0009; border-radius: 3px; overflow: hidden; }
#vmmoWorld .vm-bar i { display: block; height: 100%; background: #4ade80; }
#vmmoWorld .vm-mon img { display: block; max-width: calc(140px * var(--vm-k, 1)); max-height: calc(140px * var(--vm-k, 1)); }
#vmmoWorld .vm-mon.is-dead { opacity: 0; transition: opacity .9s; }
#vmmoWorld .vm-mon.is-hurt img { filter: brightness(2.2); }
#vmmoWorld .vm-drop { transform: translate(-50%, -50%); animation: vmBob 1.6s ease-in-out infinite; font-size: 26px; }
#vmmoWorld .vm-drop img { width: 44px; height: 44px; object-fit: contain; }
#vmmoWorld .vm-dmg { position: absolute; transform: translate(-50%, 0); font: 900 20px/1 system-ui; color: #ffd84a; text-shadow: 0 2px 0 #000; animation: vmDmg .9s ease-out forwards; }
#vmmoWorld .vm-dmg.is-crit { color: #ff6b6b; font-size: 26px; }
#vmmoWorld .vm-dead { filter: grayscale(1) opacity(.5); }
@keyframes vmBob { 50% { margin-top: -6px; } }
@keyframes vmDmg { to { transform: translate(-50%, -48px); opacity: 0; } }

#vmmoFx { position: fixed; inset: 0; pointer-events: none; z-index: 19500; }

/* HUD */
.vm-hud { position: fixed; left: 16px; bottom: calc(16px + var(--vm-bar-h, 0px)); z-index: 20010; display: grid; gap: 6px; font: 12px/1.3 system-ui, sans-serif; color: #eafffd; }
.vm-hud .vm-panel { background: #0b1418e6; border: 1px solid #2ee6d655; border-radius: 10px; padding: 8px 10px; min-width: 220px; }
.vm-hud button, .vm-card button { font: 800 12px system-ui; border-radius: 8px; padding: 6px 12px; cursor: pointer; border: 1px solid #2ee6d6; background: #0e3b38; color: #eafffd; }
.vm-hud .vm-join.is-on { background: #3b0e1a; border-color: #ff6b8b; }
.vm-meter { height: 6px; background: #000a; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.vm-meter i { display: block; height: 100%; }
.vm-meter.hp i { background: #ef4444; } .vm-meter.exp i { background: #facc15; }
.vm-chan select { background: #070a0c; color: #eafffd; border: 1px solid #22313a; border-radius: 6px; }
.vm-toast { position: fixed; right: 18px; bottom: calc(74px + var(--vm-bar-h, 0px)); z-index: 30100; display: grid; gap: 6px; }
.vm-toast div { background: #0b1418ee; color: #eafffd; border: 1px solid #2ee6d655; border-radius: 8px; padding: 6px 10px; font: 600 12px system-ui; animation: vmToast 4s forwards; }
@keyframes vmToast { 85% { opacity: 1; } to { opacity: 0; } }

/* Video card + Tributes, under the title */
.vm-card { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, #0f2a2e, #141a2e); color: #eafffd; display: grid; gap: 8px; font: 13px/1.4 system-ui, sans-serif; }
.vm-card .vm-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.vm-card .vm-lv { font: 900 18px system-ui; color: #2ee6d6; }
.vm-card .vm-chip { background: #ffffff14; border-radius: 999px; padding: 2px 9px; font-size: 12px; }
.vm-tributes { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.vm-tribute { flex: 0 0 auto; width: 92px; text-align: center; font-size: 11px; }
.vm-tribute img { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 auto; }

/* The engine's windows, lifted out of the hidden game root */
body.vmmo-page #hqInventoryModal, body.vmmo-page #hqEquippedModal { position: fixed !important; z-index: 30050 !important; }
body.vmmo-dragging .exp-video-window { pointer-events: none !important; }

/* Battle skin: the map behind, the page on readable cards */
body.vmmo-battle { background: #05080c var(--vmmo-backdrop, none) center top / var(--vmmo-backdrop-size, cover) fixed no-repeat !important; }
body.vmmo-battle .watch-main > *, body.vmmo-battle .watch-rail { background: #0a0e14b8; border-radius: 12px; }
body.vmmo-battle .watch-main > * { padding: 4px 10px; }
body.vmmo-battle, body.vmmo-battle .watch-title, body.vmmo-battle .comments { color: #eef6f7; }
.exp-video-window.vm-aura-1 { box-shadow: 0 0 18px 2px #2ee6d655; }
.exp-video-window.vm-aura-2 { box-shadow: 0 0 26px 4px #2ee6d677; }
.exp-video-window.vm-aura-3 { box-shadow: 0 0 34px 6px #8ef6ff88; }
.exp-video-window.vm-aura-4 { box-shadow: 0 0 44px 9px #c9a2ffaa; }
.exp-video-window.vm-aura-5 { box-shadow: 0 0 56px 12px #ffe27acc; animation: vmAura 3s ease-in-out infinite; }
@keyframes vmAura { 50% { box-shadow: 0 0 70px 16px #ffe27aee; } }
/* Theme scroll: a tall map that scrolls WITH the page, for every viewer. */
body.vmmo-themed { background: #05080c var(--vmmo-backdrop) center top / 100% auto repeat-y scroll !important; }
body.vmmo-themed .watch-main > *, body.vmmo-themed .watch-rail { background: #0a0e14b8; border-radius: 12px; }
body.vmmo-themed .watch-main > * { padding: 4px 10px; }
body.vmmo-themed, body.vmmo-themed .watch-title, body.vmmo-themed .comments { color: #eef6f7; }
@media (prefers-reduced-motion: reduce) { #vmmoWorld .vm-drop, .exp-video-window.vm-aura-5 { animation: none; } }

/* Riding: the mount under a seated rig (stage.js layRide) */
#vmmoWorld .vm-ride { position: relative; margin: 0 auto; }
#vmmoWorld .vm-ride .vm-mount { position: absolute; left: 0; display: block; object-fit: contain; filter: drop-shadow(0 6px 6px #0006); }
#vmmoWorld .vm-char.is-moving .vm-ride { animation: vmRide .42s ease-in-out infinite; }
#vmmoWorld .vm-char.is-hurt .vm-ride { filter: brightness(1.6) sepia(1) saturate(4) hue-rotate(-30deg); }
@keyframes vmRide { 50% { transform: translateY(-5px) rotate(-1deg); } }

/* Helper NPCs (Ari, Nova) */
#vmmoWorld .vm-ally { transition: opacity .3s; }
#vmmoWorld .vm-ally-art { position: relative; width: 110px; height: 100px; margin: 0 auto; animation: vmHover 1.4s ease-in-out infinite; }
#vmmoWorld .vm-ally-body { position: absolute; left: 50%; bottom: 0; height: 100px; translate: -50% 0; filter: drop-shadow(0 0 10px #ffe27a88); }
#vmmoWorld .vm-ally-mount { position: absolute; left: 50%; bottom: 0; height: 84px; translate: -50% 0; filter: hue-rotate(-40deg) saturate(1.3) drop-shadow(0 0 8px #ff8ad888); }
#vmmoWorld .vm-ally-rider { position: absolute; left: 50%; bottom: 40px; height: 62px; translate: -60% 0; z-index: -1; filter: hue-rotate(290deg); }
#vmmoWorld .vm-ally.vm-dead { opacity: .25; }
@keyframes vmHover { 50% { transform: translateY(-7px); } }

/* Monster lunge */
#vmmoWorld .vm-mon.is-lunge img { filter: drop-shadow(0 0 10px #ff4d4d) brightness(1.15); transform-origin: 50% 80%; animation: vmLunge .36s ease-out; }
@keyframes vmLunge { 30% { translate: 0 -8px; } }

#vmmoShots { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 19400; }
@media (prefers-reduced-motion: reduce) { #vmmoWorld .vm-char.is-moving .vm-ride, #vmmoWorld .vm-ally-art { animation: none; } }

/* Gravity rounds (round.js): the map's platforms over the page */
#vmmoWorld .vm-round-layer { position: absolute; inset: 0; pointer-events: none; }
#vmmoWorld .vm-plat { position: absolute; }
#vmmoWorld .vm-plat img { position: absolute; left: 0; width: 100%; height: auto; pointer-events: none; user-select: none; }
#vmmoWorld .vm-plat:not(.has-art) { background: linear-gradient(#8ef6ffcc, #2ee6d655); border-radius: 6px; box-shadow: 0 0 14px #2ee6d6aa; }
#vmmoWorld .vm-plat.is-floor:not(.has-art) { background: linear-gradient(#2ee6d6aa, #0000); box-shadow: none; }
body.vmmo-round .watch-main > *, body.vmmo-round .watch-rail { background: #0a0e14b0; border-radius: 12px; }
body.vmmo-round, body.vmmo-round .watch-title, body.vmmo-round .comments { color: #eef6f7; }
.vm-round-panel { position: fixed; left: 16px; bottom: calc(132px + var(--vm-bar-h, 0px)); z-index: 20011; display: flex; gap: 8px; align-items: center; font: 700 12px system-ui, sans-serif; color: #eafffd; }
.vm-round-panel .vm-round-text:not(:empty) { background: #0b1418e6; border: 1px solid #ffd84a88; border-radius: 10px; padding: 6px 10px; }
.vm-round-panel button { font: 800 12px system-ui; border-radius: 8px; padding: 6px 12px; cursor: pointer; border: 1px solid #ffd84a; background: #3b2f0e; color: #fff6d8; }

/* Page skin editor (editor.js, ?edit=1) */
.vme-layer { position: absolute; left: 0; width: 100%; z-index: 19600; cursor: crosshair; outline: 2px dashed #ffd84a66; outline-offset: -2px; touch-action: none; }
.vme-plat { position: absolute; background: #2ee6d633; border: 1px solid #2ee6d6; box-sizing: border-box; cursor: move; }
.vme-plat.has-art { background: transparent; border-style: dashed; }
.vme-plat img { position: absolute; left: 0; width: 100%; height: auto; pointer-events: none; }
.vme-plat.is-sel, .vme-spawn.is-sel, .vme-player.is-sel { outline: 2px solid #ffd84a; outline-offset: 2px; }
.vme-grip { position: absolute; right: -5px; top: -4px; bottom: -4px; width: 10px; background: #ffd84a; border-radius: 3px; cursor: ew-resize; }
.vme-spawn, .vme-player { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; font: 700 11px system-ui; color: #fff; text-shadow: 0 1px 2px #000; cursor: move; }
.vme-spawn img { max-width: 70px; max-height: 70px; pointer-events: none; }
.vme-player { font-size: 14px; background: #0b1418cc; border: 1px solid #4ade80; border-radius: 8px; padding: 3px 7px; }
.vme-panel { position: fixed; right: 14px; top: 76px; z-index: 30200; width: 290px; max-height: calc(100vh - 96px); overflow: auto; display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #0b1418f2; border: 1px solid #ffd84a66; color: #eafffd; font: 12px/1.35 system-ui, sans-serif; }
.vme-panel label { display: grid; gap: 3px; }
.vme-panel input, .vme-panel select { background: #070a0c; color: #eafffd; border: 1px solid #22313a; border-radius: 6px; padding: 5px 6px; font: inherit; }
.vme-panel button, .vme-panel .vme-play { font: 800 12px system-ui; border-radius: 8px; padding: 6px 10px; cursor: pointer; border: 1px solid #2ee6d6; background: #0e3b38; color: #eafffd; text-decoration: none; }
.vme-panel button.is-on { background: #ffd84a; color: #1a1400; border-color: #ffd84a; }
.vme-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.vme-dims { color: #9fb; font-size: 11px; }
.vme-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vme-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.vme-inline { display: flex !important; align-items: center; gap: 5px; }
.vme-art-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; max-height: 120px; overflow: auto; }
.vme-art-list button { padding: 2px; width: 54px; height: 34px; display: grid; place-items: center; }
.vme-art-list img { max-width: 48px; max-height: 28px; }
.vme-status { margin: 0; color: #9fb; } .vme-status.is-bad { color: #ff8a8a; }
.vme-help { margin: 0; color: #9ab; font-size: 11px; }

/* Page skin background (skin-bg.js): behind the whole page, mirrored past the skin */
#vmSkinBg { position: absolute; left: 0; top: 0; width: 100%; z-index: -1; pointer-events: none; overflow: hidden; }
#vmSkinBg .vm-skin-tile { position: absolute; left: 0; width: 100%; background-position: center; background-repeat: no-repeat; }
#vmSkinBg .vm-skin-tile.is-flip { transform: scaleY(-1); }
/* The skin layer is z-index -1: a body background would paint OVER it (in-flow
   block backgrounds come after negative z), so the body goes clear and the
   dark fill moves to the root. */
body.vm-skinned, body.vm-skinned.vmmo-battle, body.vm-skinned.vmmo-themed { background: transparent !important; }
html:has(body.vm-skinned) { background: #05080c !important; }
body.vm-skinned .watch-main > *, body.vm-skinned .watch-rail { background: #0a0e14b0; border-radius: 12px; }
body.vm-skinned, body.vm-skinned .watch-title, body.vm-skinned .comments { color: #eef6f7; }
.vme-row3 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vme-row3 > button { flex: 1; }
.vme-panel button:disabled { opacity: .4; cursor: default; }
.vme-selbox { display: grid; gap: 6px; padding: 8px; border: 1px solid #ffd84a66; border-radius: 10px; background: #1a1606cc; }
.vme-selbox[hidden], .vme-selbox [hidden] { display: none !important; }
.vme-selhead { display: flex; justify-content: space-between; align-items: center; }
.vme-del { border-color: #ff6b6b !important; background: #3b0e14 !important; }
.vme-nudge { display: flex; gap: 3px; } .vme-nudge button { padding: 4px 7px !important; }
.vme-selbox input[type=number] { width: 64px; }
.vme-delskin { border-color: #ff6b6b !important; background: transparent !important; color: #ffb3b3 !important; justify-self: start; }

/* Aspect lock (aspect.js): taller-than-16:10 windows see a bar, not more map */
#vmLetterbox { position: fixed; left: 0; right: 0; bottom: 0; height: 0; z-index: 40000; background: #05080c; pointer-events: auto; }
.vme-floor { position: absolute; left: 0; right: 0; height: 0; border-top: 3px solid #ffd84a; cursor: ns-resize; }
.vme-floor::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 16px; }
.vme-floor span { position: absolute; left: 8px; top: -22px; font: 800 11px system-ui; color: #1a1400; background: #ffd84a; border-radius: 6px; padding: 2px 7px; }
.vme-plat { border-top: 3px solid #4ade80 !important; }
.vme-spawn img { transform: scale(var(--vme-scale, 1)); transform-origin: 50% 100%; }
.vme-artrow small, .vme-floorrow small { color: #9ab; font-size: 10px; }
.vme-artrow input, .vme-floorrow input { width: 64px; }
.vme-floorrow[hidden] { display: none; }

/* Aspect lock: the page is always laid out 1400 wide, but media queries still
   see the real window. Pin watch.css's width rules to their >= 1360px values so
   narrow windows get the same layout as everyone else. */
html.vm-locked #watchView { grid-template-columns: minmax(0, 1fr) 372px !important; }
html.vm-locked .watch-player-slot { width: calc(100% - 2 * var(--npc-gutter)) !important; margin-inline: auto !important; }

/* Gravity round: the full-window game stage (stage-round.js). The game's
   1280x720 view, letterboxed; layers stack like the game's (game.css). */
#vmStage { position: fixed; inset: 0; z-index: 18500; background: #000; overflow: hidden; }
#vmStage[hidden] { display: none; }
#vmStage .vms-world { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; overflow: hidden; transform-origin: 0 0; background: #05080c; }
#vmStage .vms-scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; background-size: 100% 100%; background-repeat: no-repeat; }
#vmStage .vms-layer { position: absolute; inset: 0; pointer-events: none; }
#vmStage .vms-back { z-index: 24; } #vmStage .vms-platforms { z-index: 25; } #vmStage .vms-ropes { z-index: 26; } #vmStage .vms-front { z-index: 70; }
#vmmoWorld.in-round { position: absolute; inset: 0; width: auto !important; height: auto !important; z-index: 30; overflow: visible; }
#vmmoWorld.in-round .vm-ally-art { width: calc(110px * var(--vm-k, 1)); height: calc(100px * var(--vm-k, 1)); }
#vmmoWorld.in-round .vm-ally-body { height: calc(100px * var(--vm-k, 1)); }
#vmmoWorld.in-round .vm-ally-mount { height: calc(84px * var(--vm-k, 1)); }
#vmmoWorld.in-round .vm-ally-rider { height: calc(62px * var(--vm-k, 1)); bottom: calc(40px * var(--vm-k, 1)); }
#vmmoWorld.in-round .vm-name { font-size: calc(11px * var(--vm-k, 1)); }
#vmmoWorld.in-round .vm-bar { width: calc(64px * var(--vm-k, 1)); height: calc(5px * var(--vm-k, 1)); }
#vmmoWorld.in-round .vm-dmg { font-size: calc(20px * var(--vm-k, 1)); }
#vmmoWorld.in-round .vm-drop { font-size: calc(26px * var(--vm-k, 1)); }
#vmmoWorld.in-round .vm-drop img { width: calc(44px * var(--vm-k, 1)); height: calc(44px * var(--vm-k, 1)); }
/* The video plays on in its floating window, above the stage. */
/* The video window lives in #videoLayer (z 40): lift the layer, not just the window. */
html.vm-in-stage #videoLayer { z-index: 19000 !important; }
html.vm-in-stage #vmLetterbox { display: none; }

/* Full screen (battle.js): bottom-right, like the video player's own button. */
.vm-fullscreen { position: fixed; right: 18px; bottom: calc(18px + var(--vm-bar-h, 0px)); z-index: 30110; width: 46px; height: 46px; border-radius: 12px; border: 1px solid #2ee6d6; background: #0b1418e6; color: #eafffd; font: 700 22px/1 system-ui, sans-serif; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 14px #0008; }
.vm-fullscreen:hover { background: #0e3b38; }
.vm-fullscreen[hidden] { display: none; }
html.vm-in-stage .vm-fullscreen, html.vm-in-stage .vm-rchat { bottom: 18px; }
.vm-round-panel .vm-fly { border-color: #7df9ff; background: #0e2f3b; color: #eafffd; }
.vm-round-panel .vm-fly.is-gravity { border-color: #ffd84a; background: #3b2f0e; color: #fff6d8; }
.vm-round-panel .vm-fly[hidden], .vm-round-panel .vm-round-go[hidden] { display: none; }

/* Room chat in a gravity round (round-chat.js), like the MMO */
/* Bottom-right, left of the full-screen button: clear of the HUD, whose width follows its hint text. */
.vm-rchat { position: fixed; right: 84px; bottom: calc(18px + var(--vm-bar-h, 0px)); width: 440px; z-index: 30105; display: grid; gap: 6px; font: 600 13px/1.35 system-ui, sans-serif; color: #eafffd; pointer-events: none; }
.vm-rchat[hidden] { display: none; }
.vm-rchat-log { display: grid; gap: 2px; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.vm-rchat-log b { color: #7df9ff; }
.vm-rchat-input { pointer-events: auto; background: #0b1418ee; color: #eafffd; border: 1px solid #2ee6d6; border-radius: 10px; padding: 8px 12px; font: inherit; }
.vm-rchat-input[hidden] { display: none; }
#vmmoWorld .vm-bubble { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -6px); max-width: calc(260px * var(--vm-k, 1)); width: max-content; padding: calc(6px * var(--vm-k, 1)) calc(10px * var(--vm-k, 1)); border-radius: 12px; background: #fff; color: #10151c; font: 700 calc(13px * var(--vm-k, 1))/1.3 system-ui, sans-serif; box-shadow: 0 3px 10px #0006; white-space: normal; text-align: center; z-index: 5; }
#vmmoWorld .vm-bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }

/* ⚙ Video setup (setup-panel.js, admins only) */
.vm-setup-btn { position: fixed; right: 18px; top: 86px; z-index: 30120; font: 800 12px system-ui; border-radius: 10px; padding: 7px 12px; cursor: pointer; border: 1px solid #ffd84a; background: #1a1606ee; color: #fff6d8; }
.vm-setup { position: fixed; right: 18px; top: 126px; z-index: 30120; width: 340px; max-height: calc(100vh - 150px); overflow: auto; display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: #0b1418f4; border: 1px solid #ffd84a66; color: #eafffd; font: 12px/1.35 system-ui, sans-serif; }
.vm-setup[hidden] { display: none; }
.vm-setup-head { display: flex; gap: 8px; align-items: center; }
.vm-setup-head span { color: #9ab; font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.vm-setup-head button { background: none; border: 0; color: #eafffd; cursor: pointer; font-size: 14px; }
.vm-setup fieldset { border: 1px solid #22313a; border-radius: 10px; padding: 8px 10px; display: grid; gap: 6px; margin: 0; }
.vm-setup legend { color: #ffd84a; font-weight: 800; padding: 0 4px; }
.vm-setup label { display: grid; gap: 3px; }
.vm-setup .vm-setup-inline { display: flex; align-items: center; gap: 6px; }
.vm-setup input, .vm-setup select { background: #070a0c; color: #eafffd; border: 1px solid #22313a; border-radius: 6px; padding: 5px 6px; font: inherit; }
.vm-setup button { font: 800 12px system-ui; border-radius: 8px; padding: 6px 10px; cursor: pointer; border: 1px solid #2ee6d6; background: #0e3b38; color: #eafffd; }
.vm-setup-row { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.vm-setup-preview { height: 110px; border-radius: 8px; background: #05080c center / cover no-repeat; display: grid; place-items: center; color: #9ab; border: 1px solid #22313a; }
.vm-setup-note { margin: 0; color: #9ab; font-size: 11px; }
.vs-status { color: #9fb; font-size: 11px; }
.vm-rchat-open { pointer-events: auto; justify-self: end; font: 800 12px system-ui; border-radius: 10px; padding: 6px 12px; cursor: pointer; border: 1px solid #2ee6d6; background: #0b1418e6; color: #eafffd; }
.vm-rchat-open[hidden] { display: none; }

/* ---- the website (site.js): watch pages and the homepage ---------------- */
/* A page with no battle (a map, a live stream, switched off): nothing shows. */
body.vmmo-site-hidden #vmmoWorld, body.vmmo-site-hidden #vmmoFx, body.vmmo-site-hidden #vmmoShots,
body.vmmo-site-hidden .vm-hud, body.vmmo-site-hidden .vm-toast, body.vmmo-site-hidden .vm-card,
body.vmmo-site-hidden .vm-setup-btn, body.vmmo-site-hidden .vm-setup, body.vmmo-site-hidden .vm-fullscreen,
body.vmmo-site-hidden .vm-rchat { display: none !important; }
/* Watching: a smaller panel that only offers Join. */
.vm-hud-site .vm-panel { min-width: 0; max-width: 300px; }
.vm-hud-site .vm-tip { font-size: 11px; }
body.vmmo-site .vm-round-panel { display: none !important; }
#vmmoWorld .vm-drop img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 6px #ffd84a88); }
.vm-hud .vm-coin { width: 14px; height: 14px; vertical-align: -2px; }
/* The MMO's damage numbers (legacy-game.js spawnDamagePopup), page-sized. */
#vmmoWorld .vm-dmg { font: 900 44px/1 system-ui, sans-serif; color: #fff; letter-spacing: 1px; paint-order: stroke fill; white-space: nowrap; z-index: 2;
  animation: vmDmgPop .9s cubic-bezier(.2,.8,.3,1) forwards; }
#vmmoWorld .vm-dmg.is-crit { font-size: 58px; color: #fff6c9; }
#vmmoWorld .vm-dmg.is-miss { font-size: 26px; color: #cfd8dc; -webkit-text-stroke: 3px #263238; }
@keyframes vmDmgPop {
  0% { transform: translate(-50%, 0) scale(.72); opacity: 1; }
  25% { transform: translate(calc(-50% + var(--dx) * .4), calc(var(--rise) * -.45)) scale(1.18); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(var(--rise) * -1)) scale(1.05); opacity: 0; }
}
/* The site's header stays on top: monsters, shots and players pass behind it. */
body.vmmo-site .app-header { z-index: 19600; }

/* 🙈 Hide (site.js): the viewer put the battle away. Only the small
   ⚔️ Monsters button stays, bottom-left, to bring it back. */
.vm-join-row { display: inline-flex; gap: 6px; }
.vm-hud .vm-hide { background: #1f2933; border-color: #5b6b78; }
.vm-show { display: none; }
body.vmmo-site.vmmo-viewer-off .vm-show {
  display: block; position: fixed; left: 16px; bottom: 16px; z-index: 20010;
  font: 800 12px system-ui; border-radius: 999px; padding: 6px 12px; cursor: pointer;
  border: 1px solid #2ee6d6aa; background: #0b1418d9; color: #eafffd; opacity: .85;
}
body.vmmo-site.vmmo-viewer-off .vm-show:hover { opacity: 1; }
body.vmmo-site.vmmo-viewer-off #vmmoWorld, body.vmmo-site.vmmo-viewer-off #vmmoFx, body.vmmo-site.vmmo-viewer-off #vmmoShots,
body.vmmo-site.vmmo-viewer-off .vm-hud, body.vmmo-site.vmmo-viewer-off .vm-card, body.vmmo-site.vmmo-viewer-off .vm-toast,
body.vmmo-site.vmmo-viewer-off .vm-rchat, body.vmmo-site.vmmo-viewer-off .vm-fullscreen { display: none !important; }
body.vmmo-site-hidden .vm-show { display: none !important; }

/* The giant rig boss (server boss.js): a character rig several times life size. */
#vmmoWorld .vm-boss { z-index: 1; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
#vmmoWorld .vm-boss .vm-boss-rig { position: relative; width: calc(120px * 3 * var(--vm-k, 1)); height: calc(140px * 3 * var(--vm-k, 1)); margin: 0 auto; }
#vmmoWorld .vm-boss-plate { display: grid; gap: 3px; justify-items: center; margin-bottom: 4px; }
#vmmoWorld .vm-boss-name { font: 900 13px/1.2 system-ui, sans-serif; color: #ffe27a; text-shadow: 0 2px 3px #000; white-space: nowrap; letter-spacing: .03em; }
#vmmoWorld .vm-boss .vm-boss-bar { width: 220px; height: 9px; border: 1px solid #000a; }
#vmmoWorld .vm-boss.is-dead { opacity: 0; transition: opacity 1.2s; }

/* The boss's HP bar, top of the screen (just under the site header). */
.vm-bossbar { position: fixed; left: 50%; top: calc(var(--app-nav-h, 64px) + 10px); transform: translateX(-50%); z-index: 19650;
  width: min(640px, calc(100vw - 32px)); padding: 8px 12px 9px; border-radius: 12px; pointer-events: none;
  background: linear-gradient(180deg, #1a1030ee, #0b0816ee); border: 1px solid #ffd84a88; box-shadow: 0 8px 24px #0008;
  color: #fff; font: 800 13px/1.2 system-ui, sans-serif; }
.vm-bossbar[hidden] { display: none; }
.vm-bossbar-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; letter-spacing: .04em; }
.vm-bossbar-name { color: #ffe27a; font-size: 15px; text-shadow: 0 2px 2px #000; }
.vm-bossbar-lv { color: #ffd84a; }
.vm-bossbar-track { height: 14px; border-radius: 8px; background: #3a0d16; border: 1px solid #000; overflow: hidden; }
.vm-bossbar-track i { display: block; height: 100%; background: linear-gradient(180deg, #ff6b6b, #c81e3a); transition: width .25s; }
.vm-bossbar-hp { text-align: right; margin-top: 3px; font-size: 12px; color: #f8e7ff; }
body.vmmo-viewer-off .vm-bossbar, body.vmmo-site-hidden .vm-bossbar { display: none !important; }