/* Page 37 · NEW MODES + MATCH MOMENTS. Page chrome comes from 36_tm.css; this file: the live-scene engine layers,
   the channel flipper, the filmstrip, the moments timeline and the menu approaches. */

/* ================================================================ engine layers (inside a phone screen, 998 x 460) */
.nm-stage { position: absolute; inset: 0; overflow: hidden; background: #0B0820; font-family: var(--f-body); isolation: isolate; }
.nm-cam { position: absolute; inset: -6px; transform-origin: 50% 72%; will-change: transform; }
.nm-bg, .nm-act, .nm-front, .nm-plates, .nm-fx { position: absolute; inset: 6px; pointer-events: none; }
.nm-bg { overflow: hidden; }
.nm-hud, .nm-ctl, .nm-over { position: absolute; inset: 0; pointer-events: none; }
.nm-hud { z-index: 6; }
.nm-ctl { z-index: 5; }
.nm-over { z-index: 8; }
.nm-cut { position: absolute; inset: 0; z-index: 20; background: #07050F; opacity: 0; pointer-events: none; }
.nm-a { position: absolute; left: 0; top: 0; width: 102.94px; height: 118px; margin: -111.72px 0 0 -51.47px; transform-origin: 50% 94.68%; will-change: transform; }
.nm-fig { display: block; width: 100%; height: 100%; }
.nm-sh { position: absolute; left: 0; top: 0; width: 78px; height: 15px; margin: -7px 0 0 -39px; border-radius: 50%; background: radial-gradient(closest-side, rgba(4, 2, 12, .85), rgba(4, 2, 12, 0)); }
.nm-np { position: absolute; left: 0; top: 0; translate: -50% -100%; display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 3px 0 5px; border-radius: 6px; background: #FFF6E0; border: 1.5px solid var(--ink); box-shadow: 0 1.5px 0 var(--ink); white-space: nowrap; transition: opacity .2s; }
.nm-np i { width: 7px; height: 7px; border-radius: 50%; border: 1.3px solid var(--ink); }
.nm-np b { font: 400 11px/1 var(--f-display); letter-spacing: .03em; color: var(--ink); }
.nm-np .flag { width: 12px; height: 8px; display: inline-block; }
.nm-np .flag svg, .nm-np svg { width: 12px; height: 8px; display: block; }
.nm-np em { font: 400 8.5px/1 var(--f-display); font-style: normal; color: var(--ink); background: #FFD23F; border: 1.2px solid var(--ink); border-radius: 3px; padding: 1.5px 2px 1px; }
.nm-np.me { height: 21px; padding: 0 8px; background: linear-gradient(180deg, #FFE98C, #FFD23F); }
.nm-np.me b { font-size: 12.5px; }

/* the faint CALM CORE controls (10% body, 35% icons) */
.nm-cb { position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--bc) 10%, transparent); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1); display: grid; place-items: center; }
.nm-cb .ic { opacity: .35; display: grid; justify-items: center; gap: 1px; }
.nm-cb .ic svg { width: 26px; height: 26px; display: block; }
.nm-cb .ic b { font: 400 12px/1 var(--f-display); letter-spacing: .04em; color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.nm-joy { position: absolute; width: 92px; height: 92px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); }
.nm-joy i { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.nm-stage.no-ctl .nm-ctl { display: none; }

/* HUD (the game's pills) */
.nm-pause { position: absolute; left: 82px; top: 14px; width: 50px; height: 50px; border-radius: 15px; background: linear-gradient(180deg, #3A3458, #1E1B2B); border: 3px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .12), 0 3px 0 var(--ink); display: grid; place-items: center; }
.nm-pause::before { content: ""; width: 18px; height: 20px; background: linear-gradient(90deg, #fff 0 6px, transparent 6px 12px, #fff 12px); border-radius: 2px; }
.nm-hp { position: absolute; left: 150px; top: 50px; display: flex; align-items: center; gap: 6px; }
.nm-hp i { width: 120px; height: 9px; border-radius: 5px; background: rgba(8, 6, 18, .7); border: 2px solid var(--ink); overflow: hidden; position: relative; }
.nm-hp i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--hp, 80%); background: linear-gradient(180deg, #8AF5A8, #3CCB6A); transition: width .3s; }
.nm-hp b { font: 400 15px/1 var(--f-display); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.nm-pills { position: absolute; left: 50%; top: 12px; translate: -50% 0; display: flex; gap: 6px; }
.nm-pill { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 8px 0 5px; border-radius: 12px; background: linear-gradient(180deg, #2A2640, #120E26); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
.nm-pill .dot { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--ink); }
.nm-pill .nm { font: 400 12.5px/1 var(--f-display); letter-spacing: .03em; color: #fff; background: #2F7BFF; border: 2px solid var(--ink); border-radius: 8px; padding: 4px 7px 3px; }
.nm-pill .pip { width: 9px; height: 14px; border-radius: 3px; background: rgba(255, 246, 224, .22); }
.nm-pill .pip.on { background: var(--yellow); }
.nm-pill b.sc { font: 400 15px/1 var(--f-display); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; min-width: 18px; text-align: center; }
.nm-pill small { font: 800 8.5px/1 var(--f-body); letter-spacing: .1em; color: var(--cream-3); }
.nm-label { position: absolute; left: 50%; top: 56px; translate: -50% 0; font: 400 15px/1 var(--f-display); letter-spacing: .04em; color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.nm-label em { font-style: normal; color: var(--yellow); }
.nm-zoom { position: absolute; right: 70px; top: 14px; display: flex; gap: 6px; }
.nm-zoom span { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(180deg, #3A3458, #1E1B2B); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); display: grid; place-items: center; font: 400 26px/1 var(--f-display); color: #fff; }
.nm-tag { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 4px; border-radius: 10px; border: 2.5px solid var(--ink); background: rgba(13, 11, 22, .82); box-shadow: 0 2px 0 var(--ink); font: 400 13px/1 var(--f-display); letter-spacing: .04em; color: #fff; white-space: nowrap; }
.nm-tag em { font-style: normal; color: var(--yellow); }
.nm-meter { position: absolute; height: 12px; border-radius: 7px; border: 2.5px solid var(--ink); background: rgba(8, 6, 18, .75); overflow: hidden; }
.nm-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 50%); background: var(--c, var(--yellow)); transition: width .15s linear; }

/* effects */
.nm-word { position: absolute; z-index: 30; translate: -50% -50%; rotate: var(--r, -8deg); font: 400 var(--fs, 34px)/1 var(--f-display); letter-spacing: .02em; white-space: nowrap; animation: nm-word 1.05s cubic-bezier(.2, .8, .2, 1) both; }
.nm-word b { color: var(--c, #FFD23F); -webkit-text-stroke: calc(var(--fs, 34px) * .2) var(--ink); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--ink); }
@keyframes nm-word { 0% { scale: .2; opacity: 0; } 18% { scale: 1.25; opacity: 1; } 32% { scale: .94; } 44% { scale: 1; } 80% { opacity: 1; translate: -50% -60%; } 100% { opacity: 0; translate: -50% -85%; } }
.nm-banner { position: absolute; z-index: 40; translate: -50% -50%; animation: nm-ban 1.7s cubic-bezier(.2, .8, .2, 1) both; }
.nm-banner__card { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 30px 12px; border: 4px solid var(--ink); border-radius: 14px; transform: rotate(-3deg); box-shadow: 5px 7px 0 var(--ink); overflow: hidden;
  background: repeating-conic-gradient(from 0deg at 50% 60%, rgba(255, 255, 255, .16) 0 9deg, transparent 9deg 18deg), radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--bg) 70%, #fff), var(--bg) 70%); }
.nm-banner__card b { font: 400 40px/1 var(--f-display); letter-spacing: .02em; color: #fff; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); white-space: nowrap; }
.nm-banner__card span { font: 400 15px/1 var(--f-display); letter-spacing: .05em; color: var(--ink); background: var(--cream); border: 3px solid var(--ink); border-radius: 7px; padding: 6px 10px 4px; white-space: nowrap; box-shadow: 0 3px 0 var(--ink); }
.nm-banner.sm .nm-banner__card { padding: 9px 18px 8px; }
.nm-banner.sm .nm-banner__card b { font-size: 28px; -webkit-text-stroke-width: 6px; }
.nm-banner.sm .nm-banner__card span { font-size: 12px; }
@keyframes nm-ban { 0% { scale: 2.2; opacity: 0; rotate: 8deg; } 12% { scale: .9; opacity: 1; rotate: -2deg; } 20% { scale: 1.06; rotate: 1deg; } 28% { scale: 1; rotate: 0deg; } 82% { scale: 1; opacity: 1; } 100% { scale: .7; opacity: 0; translate: -50% -70%; } }
.nm-star { position: absolute; z-index: 25; width: 20px; height: 20px; margin: -10px 0 0 -10px; animation: nm-star .85s cubic-bezier(.2, .8, .3, 1) both; }
.nm-star svg { width: 100%; height: 100%; display: block; }
@keyframes nm-star { 0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--sp)); opacity: 0; } }
.nm-puff { position: absolute; z-index: 22; width: 22px; height: 22px; translate: -50% -50%; border-radius: 50%; background: var(--c); border: 2px solid rgba(29, 27, 36, .5); animation: nm-puff .75s ease-out both; }
@keyframes nm-puff { 0% { transform: translate(0, 0) scale(.3); opacity: .95; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.5); opacity: 0; } }
.nm-conf { position: absolute; z-index: 24; width: 8px; height: 12px; margin: -6px 0 0 -4px; border-radius: 2px; background: var(--c); border: 1.5px solid var(--ink); animation: nm-conf 1.35s cubic-bezier(.2, .7, .4, 1) both; }
@keyframes nm-conf { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 45% { transform: translate(calc(var(--dx) * .7), var(--dy)) rotate(calc(var(--sp) * .5)); } 100% { transform: translate(var(--dx), calc(var(--dy) + 190px)) rotate(var(--sp)); opacity: 0; } }
.nm-splat { position: absolute; z-index: 3; width: 70px; height: 46px; translate: -50% -50%; animation: nm-splat 1.4s ease-out both; }
.nm-splat svg { width: 100%; height: 100%; display: block; }
@keyframes nm-splat { 0% { scale: .2; opacity: 1; } 12% { scale: 1.15; } 22% { scale: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.nm-boom { position: absolute; z-index: 26; width: 150px; height: 150px; translate: -50% -50%; animation: nm-boom .55s cubic-bezier(.2, .8, .2, 1) both; }
.nm-boom svg { width: 100%; height: 100%; display: block; }
@keyframes nm-boom { 0% { scale: .1; rotate: -20deg; opacity: 1; } 40% { scale: calc(var(--s, 1) * 1.1); } 100% { scale: calc(var(--s, 1) * 1.2); rotate: 10deg; opacity: 0; } }
.nm-tracer { position: absolute; z-index: 21; height: 4px; margin-top: -2px; transform-origin: 0 50%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--c) 30%, #fff); box-shadow: 0 0 8px var(--c); animation: nm-tr .18s linear both; }
@keyframes nm-tr { 0% { opacity: 1; } 100% { opacity: 0; } }
.nm-pop { position: absolute; z-index: 30; translate: -50% -50%; font: 400 20px/1 var(--f-display); color: var(--c); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; white-space: nowrap; animation: nm-pop 1.1s ease-out both; }
@keyframes nm-pop { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 15% { opacity: 1; transform: translateY(0) scale(1.15); } 25% { transform: scale(1); } 100% { opacity: 0; transform: translateY(-40px); } }
.nm-flash { position: absolute; inset: 0; background: var(--c); opacity: 0; animation: nm-flash .35s ease-out both; }
@keyframes nm-flash { 0% { opacity: var(--a, .5); } 100% { opacity: 0; } }

/* ================================================================ page: the channel flipper */
.flip { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.tv { position: relative; }
.tv .dev__screen { cursor: default; }
.tv__osd { position: absolute; z-index: 30; left: 96px; top: 74px; font: 400 26px/1 var(--f-display); letter-spacing: .06em; color: #7CFFA3; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 0 12px rgba(124, 255, 163, .7); opacity: 0; pointer-events: none; }
.tv__osd small { display: block; margin-top: 4px; font-size: 15px; color: #fff; text-shadow: none; }
.tv__osd.on { animation: osd 1.6s steps(1) both; }
@keyframes osd { 0% { opacity: 1; } 10% { opacity: .6; } 14% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.tv__static { position: absolute; z-index: 29; inset: 0; opacity: 0; pointer-events: none; image-rendering: pixelated; width: 100%; height: 100%; }
.tv__static.on { animation: tvs .42s ease-out both; }
@keyframes tvs { 0% { opacity: 1; } 70% { opacity: .85; } 100% { opacity: 0; } }
.tv__roll { position: absolute; z-index: 28; left: 0; right: 0; height: 30%; top: -30%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .12), transparent); }
.tv__roll.on { animation: roll .45s linear both; }
@keyframes roll { from { top: -30%; } to { top: 100%; } }
.tvbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.chbtn { cursor: pointer; display: inline-grid; place-items: center; width: 54px; height: 46px; border: 3px solid var(--ink); border-radius: 13px; background: linear-gradient(180deg, #4D4675, #3A3458 55%, #2A2640); color: #fff; box-shadow: 2px 4px 0 var(--ink); }
.chbtn svg { width: 22px; height: 22px; display: block; }
.chbtn:active { transform: translate(1px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.chnum { font: 400 30px/1 var(--f-display); color: #7CFFA3; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; min-width: 70px; text-align: center; font-variant-numeric: tabular-nums; }
.film { margin-top: 16px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.thumb { position: relative; cursor: pointer; aspect-ratio: 998 / 460; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 2px 4px 0 var(--ink); background: #0B0820; transition: transform .2s var(--spring), box-shadow .2s; }
.thumb:hover { transform: translateY(-3px) rotate(-1deg); }
.thumb.on { box-shadow: 0 0 0 3px var(--yellow), 0 0 22px rgba(255, 210, 63, .45), 2px 4px 0 var(--ink); transform: translateY(-3px); }
.thumb__bg { position: absolute; left: 0; top: 0; width: 998px; height: 460px; transform-origin: 0 0; pointer-events: none; }
.thumb__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8, 6, 18, .88)); }
.thumb b { position: absolute; left: 7px; right: 7px; bottom: 6px; font: 400 13px/1 var(--f-display); letter-spacing: .03em; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb .n { position: absolute; left: 6px; top: 5px; font: 400 11px/1 var(--f-display); color: #7CFFA3; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.thumb .ck { position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; border-radius: 50%; display: none; place-items: center; background: #7CFFA3; border: 2.5px solid var(--ink); }
.thumb .ck svg { width: 11px; height: 11px; display: block; }
.thumb.picked .ck { display: grid; }
.thumb .fgt { position: absolute; bottom: 22%; height: 46%; aspect-ratio: 164 / 188; translate: -50% 0; }

/* the info card on the right */
.chinfo { position: relative; padding: 16px 18px 18px; border: 4px solid var(--ink); border-radius: 24px; box-shadow: 3px 7px 0 var(--ink); background: radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--acc, #FFD23F) 22%, transparent), transparent 70%), linear-gradient(180deg, #3A3458, #2A2640 55%, #1E1B2B); }
.chinfo__ch { display: flex; align-items: center; gap: 10px; }
.chinfo__ch .num { font: 400 15px/1 var(--f-display); letter-spacing: .08em; color: #7CFFA3; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.chinfo__ch .eff { margin-left: auto; }
.chinfo h3 { margin: 6px 0 0; font: 400 36px/.95 var(--f-display); color: #fff; letter-spacing: .02em; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.chinfo .rule { margin: 10px 0 0; font: 600 14.5px/1.42 var(--f-body); color: #fff; }
.chinfo .twist { margin: 10px 0 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px 10px; border-radius: 12px; background: rgba(255, 210, 63, .1); border: 2px dashed rgba(255, 210, 63, .45); color: var(--cream-2); font-size: 13.5px; line-height: 1.4; }
.chinfo .twist i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--yellow); border: 2px solid var(--ink); font: 400 14px/1 var(--f-display); font-style: normal; color: var(--ink); }
.chinfo .row { margin-top: 10px; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; color: var(--cream-2); line-height: 1.4; }
.chinfo .row > span { font: 400 13px/1.2 var(--f-display); letter-spacing: .06em; color: var(--cream-3); padding-top: 2px; }
.chinfo .row b { color: #fff; }
.pal { display: flex; gap: 5px; margin-bottom: 5px; }
.pal i { width: 26px; height: 20px; border-radius: 6px; border: 2.5px solid var(--ink); box-shadow: 1px 2px 0 var(--ink); }
.fits { display: flex; flex-wrap: wrap; gap: 5px; }
.fit { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 3px 4px; border-radius: 8px; border: 2px solid var(--ink); font: 400 12px/1 var(--f-display); letter-spacing: .04em; color: var(--ink); background: #7CFFA3; }
.fit i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--ink); font-style: normal; font: 800 10px/1 var(--f-body); }
.fit.meh { background: var(--yellow); }
.fit.no { background: #FF9AAE; }
.eff { font: 400 12.5px/1 var(--f-display); letter-spacing: .05em; color: var(--ink); background: var(--cream); border: 2.5px solid var(--ink); border-radius: 8px; padding: 5px 8px 4px; }
.eff.s { background: #7CFFA3; } .eff.m { background: var(--yellow); } .eff.l { background: #FF9AAE; }
.chinfo .pickrow { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.chinfo .pickrow small { color: var(--cream-3); font-size: 12px; }
.chinfo .rec { position: absolute; right: 14px; top: -14px; }

/* ================================================================ match moments */
.mo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.tl { position: relative; margin-top: 16px; padding: 16px 16px 14px; border: 3px solid var(--ink); border-radius: 20px; background: linear-gradient(180deg, #2A2640, #1E1B2B); box-shadow: 3px 6px 0 var(--ink); }
.tl__track { position: relative; height: 64px; margin: 4px 10px 0; }
.tl__line { position: absolute; left: 0; right: 0; top: 30px; height: 10px; border-radius: 6px; background: rgba(8, 6, 18, .7); border: 2.5px solid var(--ink); overflow: hidden; }
.tl__line i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: linear-gradient(90deg, #FFD23F, #FF8A1F); }
.tl__head { position: absolute; top: 18px; width: 4px; height: 34px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px var(--ink), 0 0 12px rgba(255, 255, 255, .7); }
.tl__mk { position: absolute; top: 0; translate: -50% 0; cursor: pointer; display: grid; justify-items: center; gap: 3px; background: none; border: 0; padding: 0; }
.tl__mk .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-3); border: 2.5px solid var(--ink); box-shadow: 1px 2px 0 var(--ink); transition: transform .2s var(--spring), background .2s; }
.tl__mk .dot svg { width: 15px; height: 15px; display: block; }
.tl__mk small { position: absolute; top: 46px; font: 400 10.5px/1 var(--f-display); letter-spacing: .04em; color: var(--cream-3); white-space: nowrap; }
.tl__mk.on .dot { background: var(--yellow); transform: scale(1.25); }
.tl__mk.on small { color: #fff; }
.tl__mk.picked .dot { box-shadow: 0 0 0 3px #7CFFA3, 1px 2px 0 var(--ink); }
.tl__ends { display: flex; justify-content: space-between; margin: 10px 10px 0; font: 400 12px/1 var(--f-display); letter-spacing: .06em; color: var(--cream-3); }
.tl__ctl { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.tl__ctl h4 { margin: 0; font: 400 18px/1 var(--f-display); letter-spacing: .05em; color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.tl__ctl .clock { margin-left: auto; font: 400 24px/1 var(--f-display); color: var(--yellow); -webkit-text-stroke: 4.5px var(--ink); paint-order: stroke fill; font-variant-numeric: tabular-nums; }
.mocard { position: relative; padding: 16px 18px 18px; border: 4px solid var(--ink); border-radius: 24px; box-shadow: 3px 7px 0 var(--ink); background: linear-gradient(180deg, #3A3458, #2A2640 55%, #1E1B2B); }
.mocard .at { font: 400 14px/1 var(--f-display); letter-spacing: .08em; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.mocard h3 { margin: 6px 0 0; font: 400 32px/.95 var(--f-display); color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.mocard p { margin: 10px 0 0; color: var(--cream-2); font-size: 14px; line-height: 1.45; }
.mocard p b { color: #fff; }
.mocard .code { margin-top: 10px; padding: 9px 11px; border-radius: 12px; background: rgba(8, 6, 18, .5); border: 2px solid rgba(255, 246, 224, .1); font-size: 12.5px; color: var(--cream-3); line-height: 1.45; }
.mocard .code b { color: var(--mint); font: 400 12.5px/1 var(--f-display); letter-spacing: .05em; }
.mocard .code em { font-style: normal; color: var(--cream); }
.mocard .modes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.mocard .pickrow { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.momap { margin-top: 16px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.mochip { cursor: pointer; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 7px; align-items: center; padding: 7px 8px; border-radius: 12px; border: 2.5px solid var(--ink); background: linear-gradient(180deg, #2E2948, #221E36); box-shadow: 1px 3px 0 var(--ink); text-align: left; color: #fff; }
.mochip .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-3); border: 2px solid var(--ink); }
.mochip .dot svg { width: 15px; height: 15px; display: block; }
.mochip b { font: 400 12.5px/1.05 var(--f-display); letter-spacing: .03em; }
.mochip small { display: block; font: 800 9px/1 var(--f-body); letter-spacing: .1em; color: var(--cream-3); margin-top: 2px; }
.mochip.on { background: linear-gradient(180deg, #4A4270, #3A3458); box-shadow: 1px 3px 0 var(--ink), inset 0 0 0 2px var(--yellow); }
.mochip.picked .dot { background: #7CFFA3; }

/* ================================================================ where new modes live */
.menu3 { display: grid; gap: 30px; }
.cal { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.cal span { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 12px; border: 2.5px solid var(--ink); background: rgba(8, 6, 18, .5); min-width: 150px; }
.cal span i { width: 34px; height: 26px; border-radius: 7px; border: 2px solid var(--ink); overflow: hidden; position: relative; }
.cal span i .mart { position: absolute; inset: 0; }
.cal span b { font: 400 13px/1.05 var(--f-display); letter-spacing: .03em; color: #fff; }
.cal span small { display: block; font: 800 9px/1 var(--f-body); letter-spacing: .1em; color: var(--cream-3); margin-top: 2px; }
.cal span.now { background: linear-gradient(180deg, rgba(255, 210, 63, .25), rgba(255, 210, 63, .08)); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--yellow); }
.fit36 { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 16px; border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; background: rgba(13, 11, 22, .55); }
.fit36 th, .fit36 td { padding: 9px 12px; text-align: left; vertical-align: top; font-size: 13px; color: var(--cream-2); border-bottom: 1.5px solid rgba(255, 246, 224, .08); }
.fit36 thead th { font: 400 14px/1 var(--f-display); letter-spacing: .05em; color: #fff; background: rgba(255, 255, 255, .06); }
.fit36 tbody th { font: 400 13.5px/1.1 var(--f-display); letter-spacing: .04em; color: var(--yellow); width: 18%; }
.fit36 tr:last-child th, .fit36 tr:last-child td { border-bottom: 0; }

/* room lobby screen (party shelf) */
.lob { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(60% 55% at 58% -8%, rgba(255, 246, 224, .12), transparent 70%), linear-gradient(180deg, #2E255A, #1D1840 55%, #120E26); }
.lob::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .045) 1.2px, transparent 1.7px); background-size: 9px 9px; }
.lob__head { position: absolute; left: 69px; top: 10px; right: 69px; height: 40px; display: flex; align-items: center; gap: 12px; }
.lob__head h5 { margin: 0; font: 400 26px/1 var(--f-display); letter-spacing: .02em; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.lob__code { display: inline-flex; align-items: center; gap: 6px; font: 400 15px/1 var(--f-display); letter-spacing: .1em; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); border-radius: 10px; padding: 6px 10px 5px; box-shadow: 2px 3px 0 var(--ink); }
.lob__code small { font: 800 9px/1 var(--f-body); letter-spacing: .1em; }
.lob__players { position: absolute; left: 69px; top: 60px; width: 250px; bottom: 34px; display: grid; gap: 6px; align-content: start; }
.lob__p { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; align-items: center; height: 46px; padding: 0 8px 0 4px; border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(180deg, #2A2640, #1E1B2B); box-shadow: 1px 3px 0 var(--ink); }
.lob__p .av { position: relative; width: 38px; height: 38px; border-radius: 10px; overflow: hidden; background: rgba(8, 6, 18, .6); }
.lob__p .av span { position: absolute; left: 50%; bottom: -16px; width: 44px; height: 52px; translate: -50% 0; }
.lob__p b { font: 400 15px/1 var(--f-display); letter-spacing: .03em; color: #fff; }
.lob__p em { font-style: normal; font: 800 9px/1 var(--f-body); letter-spacing: .1em; color: #7CFFA3; }
.lob__p.wait { border-style: dashed; border-color: rgba(255, 246, 224, .25); background: transparent; box-shadow: none; }
.lob__p.wait b { color: var(--cream-3); font-size: 13px; }
.lob__shelf { position: absolute; left: 334px; right: 69px; top: 60px; }
.lob__shelf h6 { margin: 0 0 7px; display: flex; align-items: center; gap: 8px; font: 400 16px/1 var(--f-display); letter-spacing: .05em; color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.lob__shelf h6 small { font: 800 9.5px/1 var(--f-body); letter-spacing: .12em; color: var(--cream-3); -webkit-text-stroke: 0; }
.lob__row { display: flex; gap: 8px; margin-bottom: 10px; }
.lob__m { position: relative; flex: 1; height: 100px; border-radius: 14px; overflow: hidden; border: 3px solid var(--ink); box-shadow: 1px 3px 0 var(--ink); cursor: pointer; }
.lob__m .mart, .lob__m .bgm { position: absolute; inset: 0; }
.lob__m i.sh { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(8, 6, 18, .9)); }
.lob__m b { position: absolute; left: 7px; right: 7px; bottom: 6px; font: 400 13.5px/1.02 var(--f-display); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.lob__m.sel { box-shadow: 0 0 0 3.5px var(--yellow), 0 0 18px rgba(255, 210, 63, .5), 1px 3px 0 var(--ink); }
.lob__m .new { position: absolute; left: 6px; top: 6px; font: 400 10px/1 var(--f-display); letter-spacing: .05em; color: var(--ink); background: #7CFFA3; border: 2px solid var(--ink); border-radius: 5px; padding: 2px 4px 1px; }
.lob__m .fgt { position: absolute; bottom: 24%; height: 52%; aspect-ratio: 164 / 188; translate: -50% 0; }
.lob__go { position: absolute; right: 69px; bottom: 30px; width: 190px; height: 64px; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 16px; border: 3.5px solid var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 52%, var(--yellow-lo)); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .15), inset 0 2px 0 rgba(255, 255, 255, .6), 3px 6px 0 var(--ink); }
.lob__go b { font: 400 26px/.9 var(--f-display); color: var(--ink); }
.lob__go small { font: 800 9px/1 var(--f-body); letter-spacing: .12em; color: rgba(29, 27, 36, .7); }
.lob__sum { position: absolute; left: 334px; right: 275px; bottom: 30px; height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #2A2640, #1E1B2B); box-shadow: 2px 4px 0 var(--ink); }
.lob__sum .lb { font: 800 9.5px/1 var(--f-body); letter-spacing: .1em; color: var(--cream-3); }
.lob__sum b { font: 400 18px/1 var(--f-display); color: #fff; letter-spacing: .03em; }
.lob__sum span.d { font: 600 12px/1.3 var(--f-body); color: var(--cream-2); }

@media (max-width: 1100px) {
  .flip, .mo { grid-template-columns: minmax(0, 1fr); }
  .film { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .momap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .film { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .thumb b { font-size: 10px; -webkit-text-stroke-width: 2.4px; }
  .momap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chinfo h3 { font-size: 30px; }
  .tl__mk small { display: none; }
  .tl__mk .dot { width: 22px; height: 22px; }
  .tv__osd { left: 80px; top: 70px; }
  .fit36 { min-width: 640px; }
}
@media (prefers-reduced-motion: reduce) {
  .nm-word, .nm-banner, .nm-star, .nm-puff, .nm-conf, .nm-splat, .nm-boom, .nm-pop, .nm-flash, .tv__osd.on, .tv__static.on, .tv__roll.on { animation: none !important; }
  .nm-word, .nm-banner { opacity: 1; }
}

/* ================================================================ scene layers + props (37_nm_modes.js) */
.nm-back, .nm-props { position: absolute; inset: 6px; pointer-events: none; }
.nm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.nm-front .nm-svg { overflow: visible; }
.nm-prop { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; }
.nm-prop > svg { display: block; overflow: visible; width: 100%; height: 100%; }
.nm-bomb { width: 48px; height: 61px; margin: -37px 0 0 -24px; transform-origin: 24px 37px; filter: drop-shadow(0 0 8px rgba(255, 90, 90, .35)); }
.nm-bomb .spark { transform-box: fill-box; transform-origin: center; animation: nm-spark .16s steps(2) infinite; }
.nm-bomb .ring { transition: stroke-dashoffset .1s linear; }
.nm-bomb.hot circle:first-child { animation: nm-hotbomb .18s steps(2) infinite; }
@keyframes nm-spark { 50% { transform: scale(.6) rotate(30deg); } }
@keyframes nm-hotbomb { 50% { fill: #E8344E; } }
.nm-crown { width: 52px; height: 40px; margin: -24px 0 0 -26px; transform-origin: 26px 24px; filter: drop-shadow(0 0 10px rgba(255, 210, 63, .8)); animation: nm-crownbob 1s ease-in-out infinite; }
@keyframes nm-crownbob { 50% { margin-top: -29px; } }
.nm-ice { width: 112px; height: 148px; margin: -143px 0 0 -56px; transform-origin: 56px 143px; transition: opacity .12s; filter: drop-shadow(0 0 8px rgba(160, 230, 255, .6)); }
.nm-jet { width: 26px; height: 36px; margin: -3px 0 0 -13px; transform-origin: 13px 3px; }
.nm-floatgun { width: 50px; height: 22px; margin: -11px 0 0 -25px; transform-origin: 25px 11px; filter: drop-shadow(0 0 6px rgba(63, 234, 245, .5)); }
.nm-floatgun svg { width: 100% !important; height: 100% !important; }
.nm-lava { width: 998px; height: 230px; filter: drop-shadow(0 -10px 26px rgba(255, 106, 31, .65)); }
.nm-lavatop { animation: nm-lavawave 2.2s linear infinite; }
@keyframes nm-lavawave { to { transform: translateX(-250px); } }
.nm-bub { transform-box: fill-box; transform-origin: center; animation: nm-bub 1.9s ease-in infinite; }
@keyframes nm-bub { 0% { transform: translateY(30px) scale(.3); opacity: 0; } 20% { opacity: 1; } 80% { transform: translateY(-14px) scale(1); opacity: 1; } 100% { transform: translateY(-20px) scale(1.5); opacity: 0; } }
.nm-zone { width: 240px; height: 350px; margin: -330px 0 0 -120px; }
.nm-zone .dash { animation: nm-dash 1.2s linear infinite; }
.nm-zone .beam { animation: nm-beam 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.nm-zone.contested .dash { stroke: #fff; animation: nm-dash .4s linear infinite, nm-cont .2s steps(2) infinite; }
.nm-zone.contested .beam { opacity: .5; }
.nm-zone.moving .beam { opacity: 1; }
@keyframes nm-dash { to { stroke-dashoffset: -52; } }
@keyframes nm-beam { 50% { opacity: .65; transform: scaleX(1.06); } }
@keyframes nm-cont { 50% { stroke: #FFD23F; } }
.nm-car { width: 236px; height: 130px; }
.nm-car.doomed .flash { animation: nm-doom .3s steps(2) infinite; }
@keyframes nm-doom { 50% { opacity: .55; } }
.nm-smoke i { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px; border-radius: 50%; background: #C9C3E0; border: 2px solid rgba(29, 27, 36, .45); opacity: 0; animation: nm-smoke 2.5s ease-out infinite; }
@keyframes nm-smoke { 0% { transform: translate(0, 0) scale(.5); opacity: .8; } 100% { transform: translate(-130px, -90px) scale(2.4); opacity: 0; } }
.nm-gantry { width: 120px; height: 330px; }
.nm-bolt { width: 80px; height: 340px; margin: -340px 0 0 -40px; filter: drop-shadow(0 0 14px #BFF3FF); }
.nm-met { width: 140px; height: 140px; margin: -70px 0 0 -70px; transform-origin: 70px 70px; filter: drop-shadow(0 0 16px rgba(255, 138, 31, .8)); }
.nm-rocket { width: 22px; height: 44px; margin: -33px 0 0 -11px; transform-origin: 11px 33px; }
.nm-nade { width: 24px; height: 24px; margin: -12px 0 0 -12px; transform-origin: 12px 12px; }
.nm-pct { width: 0; height: 0; }
.nm-pct b { position: absolute; left: 0; top: 0; translate: -50% -50%; font: 400 15px/1 var(--f-display); color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.nm-pct.hot b { color: #FF8AA0; font-size: 18px; }
.nm-pct.bump b { animation: nm-bump .35s var(--spring); }
@keyframes nm-bump { 0% { scale: 1.6; } 100% { scale: 1; } }
.bump { animation: nm-bump .4s var(--spring); }

/* plates: zombie + crown holder */
.nm-np.zomb { background: linear-gradient(180deg, #D8FFB0, #9CE070); }
.nm-np.gold { background: linear-gradient(180deg, #FFE98C, #FFC21A); box-shadow: 0 1.5px 0 var(--ink), 0 0 10px rgba(255, 194, 26, .8); }

/* mode HUD bits */
.nm-pill.sm { height: 30px; padding: 0 7px 0 4px; }
.nm-pill.sm .dot { width: 17px; height: 17px; }
.nm-pill .dot.sm { width: 15px; height: 15px; border-width: 2px; }
.nm-pill .dot.out { background: #4A4458 !important; position: relative; }
.nm-pill .dot.out::after { content: ""; position: absolute; inset: 2px; background: linear-gradient(45deg, transparent 42%, #FF6B8B 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #FF6B8B 42% 58%, transparent 58%); }
.nm-fuse { color: #FFB0B0 !important; animation: nm-fuse .5s ease-in-out infinite; }
@keyframes nm-fuse { 50% { scale: 1.15; } }
.nm-tag svg { width: 18px; height: 18px; display: block; flex: none; }
.nm-tag .hot { color: #FF8A5A; }
.nm-koth { gap: 7px; padding: 0 8px; }
.nm-koth .kb { display: inline-flex; align-items: center; gap: 3px; }
.nm-koth .kb .dot { width: 14px; height: 14px; border-width: 2px; }
.nm-koth .kb i { position: relative; width: 50px; height: 10px; border-radius: 5px; background: rgba(255, 246, 224, .14); border: 2px solid var(--ink); overflow: hidden; }
.nm-koth .kb i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--c); transition: width .3s; }
.nm-ladder { position: absolute; left: 150px; top: 76px; display: flex; gap: 3px; padding: 4px 5px; border-radius: 12px; background: rgba(13, 11, 22, .82); border: 2.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.nm-ladder .lg { position: relative; width: 38px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: rgba(255, 255, 255, .06); opacity: .55; transition: all .25s var(--spring); }
.nm-ladder .lg svg { width: 32px !important; height: 14px !important; }
.nm-ladder .lg.done { opacity: .3; }
.nm-ladder .lg.done::after { content: ""; position: absolute; right: 1px; top: 1px; width: 9px; height: 9px; border-radius: 50%; background: #7CFFA3; border: 1.5px solid var(--ink); }
.nm-ladder .lg.on { opacity: 1; background: linear-gradient(180deg, #FFE98C, #FFD23F); box-shadow: 0 0 0 2px var(--ink), 0 0 12px rgba(255, 210, 63, .7); transform: scale(1.18); }
.nm-ladder .lg:last-child { border: 1.5px dashed rgba(255, 210, 63, .5); }
.nm-boss { position: absolute; left: 50%; top: 10px; translate: -50% 0; display: grid; grid-template-columns: auto 300px; gap: 8px; align-items: center; padding: 5px 10px 5px 8px; border-radius: 13px; background: linear-gradient(180deg, #3A1A2A, #1E0E18); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink), 0 0 18px rgba(232, 52, 78, .45); }
.nm-boss .who b { display: block; font: 400 15px/1 var(--f-display); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.nm-boss .who small { display: block; font: 800 8px/1 var(--f-body); letter-spacing: .12em; color: #FF9AA8; margin-top: 2px; }
.nm-boss .bar { position: relative; height: 16px; border-radius: 8px; background: rgba(0, 0, 0, .5); border: 2.5px solid var(--ink); overflow: hidden; }
.nm-boss .bar i { position: absolute; inset: 0 auto 0 0; width: var(--v); background: linear-gradient(180deg, #FF9AA8, #E8344E 60%, #A8102C); transition: width .25s; }
.nm-boss .bar i::after { content: ""; position: absolute; left: 6px; right: 6px; top: 2px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .4); }
.nm-cars { gap: 5px; }
.nm-cars .car { width: 22px; height: 14px; border-radius: 3px; background: #8E2B3A; border: 2px solid var(--ink); }
.nm-cars .car:first-of-type { background: #3A6A9A; }
.nm-cars .car.gone { background: transparent; border-style: dashed; border-color: rgba(255, 246, 224, .35); }
.nm-tag .pm { position: relative; width: 60px; height: 12px; border-radius: 6px; background: rgba(0, 0, 0, .5); border: 2px solid var(--ink); overflow: hidden; }
.nm-tag .pm i { position: absolute; inset: 0 auto 0 0; width: var(--v); background: linear-gradient(90deg, #7A4BFF, #3FEAF5); }
.nm-tag .pm.full { box-shadow: 0 0 10px #3FEAF5; }
.nm-tag .pm.full i { animation: nm-pmfull .3s steps(2) infinite; }
@keyframes nm-pmfull { 50% { filter: brightness(1.6); } }
.nm-tag b { font: inherit; color: var(--yellow); }

/* ambient scene motion (SVG elements) */
.nm-tw { animation: nm-tw 2.6s ease-in-out infinite; }
@keyframes nm-tw { 50% { opacity: .15; } }
.nm-blink { animation: nm-blink 2.2s steps(1) infinite; }
@keyframes nm-blink { 0%, 60% { opacity: 1; } 61%, 70% { opacity: .2; } 71% { opacity: 1; } 80%, 84% { opacity: .35; } 85% { opacity: 1; } }
.nm-bat { animation: nm-bat 10s linear infinite; }
.nm-bat path { animation: nm-flap .22s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes nm-bat { from { transform: translate(0, 0); } 50% { transform: translate(calc(var(--bx) / 2), 30px); } to { transform: translate(var(--bx), 0); } }
@keyframes nm-flap { to { transform: scaleY(.35); } }
.nm-fog { animation: nm-fog 26s linear infinite; }
.nm-fog--b { animation-duration: 18s; animation-direction: reverse; }
@keyframes nm-fog { to { transform: translateX(-1300px); } }
.nm-bob { animation: nm-bob 5s ease-in-out infinite; }
@keyframes nm-bob { 50% { transform: translateY(-14px) rotate(4deg); } }
.nm-spin { animation: nm-spin 8s linear infinite; }
@keyframes nm-spin { to { rotate: 360deg; } }
.nm-rise { animation: nm-rise 4s linear infinite; }
@keyframes nm-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-180px); opacity: 0; } }
.nm-glowline { animation: nm-gl 1.8s ease-in-out infinite; }
@keyframes nm-gl { 50% { opacity: .4; } }
.nm-lavafall { animation: nm-lf .5s steps(2) infinite; }
@keyframes nm-lf { 50% { opacity: .55; } }
.nm-beacon { animation: nm-beacon 2.4s linear infinite; }
.alarm .nm-beacon { animation-duration: .7s; }
@keyframes nm-beacon { to { rotate: 360deg; } }
.nm-steam { animation: nm-steam 3s ease-out infinite; }
@keyframes nm-steam { 0% { transform: translateY(20px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-80px); opacity: 0; } }
.nm-aur { animation: nm-aur 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.nm-aur--b { animation-duration: 9s; animation-direction: reverse; }
@keyframes nm-aur { 50% { transform: translateX(-30px) skewX(-8deg) scaleY(1.25); opacity: .6; } }
.nm-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: nm-flame .24s ease-in-out infinite alternate; }
@keyframes nm-flame { to { transform: scale(.82, 1.12) skewX(4deg); } }
.nm-glowp { animation: nm-glowp .9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes nm-glowp { to { opacity: .6; transform: scale(.9); } }
.nm-flag { animation: nm-flag 1.2s ease-in-out infinite; }
@keyframes nm-flag { 50% { transform: skewY(8deg) scaleX(.9); } }
.nm-sweep { animation: nm-sweep 6s ease-in-out infinite alternate; }
.nm-sweep--b { animation-duration: 7.5s; animation-delay: -3s; }
@keyframes nm-sweep { from { rotate: -14deg; } to { rotate: 22deg; } }
.nm-neon { animation: nm-neon 3.2s steps(1) infinite; filter: drop-shadow(0 0 6px currentColor); }
@keyframes nm-neon { 0%, 40% { opacity: 1; } 41%, 44% { opacity: .3; } 45%, 90% { opacity: 1; } 91%, 93% { opacity: .5; } }
.nm-sway { animation: nm-sway 2.6s ease-in-out infinite alternate; }
@keyframes nm-sway { from { rotate: -5deg; } to { rotate: 5deg; } }
.nm-ripple { transform-box: fill-box; transform-origin: center; animation: nm-ripple 2.4s ease-out infinite; }
@keyframes nm-ripple { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.nm-scroll { animation: nm-scroll 10s linear infinite; }
@keyframes nm-scroll { to { transform: translateX(-1040px); } }
.nm-speed path { stroke-dasharray: 60 900; animation: nm-speed .5s linear infinite; }
@keyframes nm-speed { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 960; } }
.nm-drift { animation: nm-drift 20s ease-in-out infinite alternate; }
@keyframes nm-drift { to { transform: translateX(60px); } }
.nm-boltbg { opacity: 0; animation: nm-boltbg 4.6s steps(1) infinite; }
@keyframes nm-boltbg { 0%, 62% { opacity: 0; } 63%, 64% { opacity: 1; } 65%, 66% { opacity: 0; } 67%, 68% { opacity: .8; } 69% { opacity: 0; } }
.nm-snow i { position: absolute; top: -10px; width: var(--sz); height: var(--sz); border-radius: 50%; background: #fff; opacity: .85; animation: nm-snow 6s linear infinite; }
@keyframes nm-snow { to { transform: translate(var(--dx), 480px); } }
.nm-petals i { position: absolute; top: -12px; width: 9px; height: 6px; border-radius: 60% 0 60% 0; background: #FFB7D5; border: 1.2px solid rgba(29, 27, 36, .5); animation: nm-petal 7s linear infinite; }
@keyframes nm-petal { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-40px, 240px) rotate(260deg); } 100% { transform: translate(10px, 480px) rotate(540deg); } }
.nm-rain i { position: absolute; top: -40px; width: 2px; height: 26px; border-radius: 1px; background: linear-gradient(180deg, transparent, rgba(190, 210, 255, .7)); rotate: 12deg; animation: nm-rain .6s linear infinite; }
@keyframes nm-rain { to { transform: translate(-100px, 520px); } }
.nm-lightning { position: absolute; inset: 0; background: radial-gradient(80% 70% at 70% 0%, rgba(220, 245, 255, .9), rgba(160, 200, 255, .2) 60%, transparent); opacity: 0; mix-blend-mode: screen; }
.nm-redwash { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(232, 52, 78, .35)); animation: nm-redwash 1.4s ease-in-out infinite; }
@keyframes nm-redwash { 50% { opacity: .35; } }
.nm-stage.alarm .nm-hud::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 60px 10px rgba(255, 90, 31, .45); animation: nm-redwash .7s ease-in-out infinite; pointer-events: none; }
.nm-ping { position: absolute; right: 180px; top: 64px; display: inline-flex; align-items: flex-end; gap: 2px; padding: 5px 10px; border-radius: 12px; background: #FFF6E0; border: 2.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.nm-ping i { width: 4px; background: #1FBF5C; border-radius: 1px; }
.nm-ping i:nth-child(1) { height: 5px; } .nm-ping i:nth-child(2) { height: 8px; } .nm-ping i:nth-child(3) { height: 11px; } .nm-ping i:nth-child(4) { height: 14px; }
.nm-ping b { margin-left: 8px; font: 400 13px/1 var(--f-display); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .nm-svg *, .nm-snow i, .nm-petals i, .nm-rain i, .nm-smoke i, .nm-redwash, .nm-prop, .nm-prop * { animation: none !important; }
}

/* ================================================================ page 37 chrome */
.nm37 .top h1 small { color: var(--yellow); }
.marquee { position: relative; margin: 26px -22px 0; height: 118px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq__track { position: absolute; left: 0; top: 8px; display: flex; gap: 14px; width: max-content; animation: mq 60s linear infinite; }
.marquee:hover .mq__track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.mq { position: relative; flex: none; width: 214px; aspect-ratio: 998 / 460; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 2px 4px 0 var(--ink); background: #0B0820; transform: rotate(var(--r, -1deg)); }
.mq:nth-child(even) { --r: 1.2deg; }
.mq b { position: absolute; left: 8px; right: 8px; bottom: 6px; font: 400 15px/1 var(--f-display); color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.mq::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8, 6, 18, .85)); }
.mq b { z-index: 2; }
/* a mode's still art (bg svg + still fighters) */
.still { position: absolute; inset: 0; display: block; overflow: hidden; }
.still__bg { position: absolute; inset: 0; }
.still__bg .nm-svg *, .still__x * { animation: none !important; }
.still .fgt { position: absolute; translate: -50% 0; aspect-ratio: 164 / 188; display: block; }
.still .fgt svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* the TV */
.flip { grid-template-columns: minmax(0, 1fr) 380px; }
.tv .ph { margin: 0; }
.tv__static { position: absolute; z-index: 29; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; image-rendering: pixelated; }
.tvhint { font: 700 12.5px/1.3 var(--f-body); color: var(--cream-3); }
.chside { position: relative; }
.chinfo { --acc: #FFD23F; }
.chinfo.swap { animation: nm-swap .45s var(--spring); }
@keyframes nm-swap { 0% { transform: translateY(10px) rotate(-1deg); opacity: .3; } 100% { transform: none; opacity: 1; } }
.chinfo__ch .map { font: 800 10.5px/1.2 var(--f-body); letter-spacing: .1em; color: var(--cream-3); }
.chinfo__ch .map em { font-style: normal; display: inline-block; margin-left: 4px; color: var(--ink); background: #D7B8FF; border: 1.5px solid var(--ink); border-radius: 4px; padding: 2px 4px 1px; font-size: 8.5px; }
.chinfo h3 { color: var(--acc); }
.chinfo .twist b { display: block; font: 400 13px/1 var(--f-display); letter-spacing: .06em; color: var(--yellow); margin-bottom: 3px; }
.chinfo .row > div { min-width: 0; }
.fits { display: grid; gap: 5px; }
.fit em { font-style: normal; font: 600 11px/1.1 var(--f-body); letter-spacing: 0; color: rgba(29, 27, 36, .75); margin-left: 4px; }
.fit.ok { background: #7CFFA3; }
.fit.star { background: linear-gradient(180deg, #FFE98C, #FFD23F); }
.fit.no { background: rgba(255, 154, 174, .35); color: rgba(255, 246, 224, .55); border-color: rgba(29, 27, 36, .7); }
.fit.no i { background: transparent; color: rgba(255, 246, 224, .55); border-color: rgba(255, 246, 224, .3); }
.chinfo .rec, .mocard .rec { position: absolute; right: 16px; top: -16px; }

/* filmstrip */
.film { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.thumb { outline: none; }
.thumb:focus-visible { box-shadow: 0 0 0 3px #fff, 2px 4px 0 var(--ink); }
.thumb .still { z-index: 0; }
.thumb__shade { z-index: 1; }
.thumb b, .thumb .n { z-index: 2; }
.thumb.on { box-shadow: 0 0 0 3px var(--acc, var(--yellow)), 0 0 22px color-mix(in srgb, var(--acc, #FFD23F) 55%, transparent), 2px 4px 0 var(--ink); }
.thumb.on .n { color: var(--yellow); }
.thumb .pick--mini { position: absolute; z-index: 3; right: 5px; top: 5px; width: 26px; height: 26px; padding: 0; min-width: 0; border-radius: 50%; display: grid; place-items: center; border: 2.5px solid var(--ink); background: rgba(13, 11, 22, .72); box-shadow: 1px 2px 0 var(--ink); transform: none; }
.thumb .pick--mini .pick__off, .thumb .pick--mini .pick__on { display: none; }
.thumb .pick--mini .pick__box { width: 16px; height: 16px; margin: 0; border: 0; background: transparent; box-shadow: none; display: grid; place-items: center; }
.thumb .pick--mini .pick__box svg { width: 14px; height: 14px; opacity: 0; }
.thumb .pick--mini:hover { background: rgba(124, 255, 163, .35); }
.thumb .pick--mini.is-picked { background: #7CFFA3; }
.thumb .pick--mini.is-picked .pick__box svg { opacity: 1; }
.thumb.picked { }
.starter { margin-top: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 18px; border: 3px solid var(--ink); border-radius: 18px; background: linear-gradient(180deg, rgba(124, 255, 163, .12), rgba(124, 255, 163, .03)); box-shadow: 2px 5px 0 var(--ink); }
.starter b { display: block; font: 400 18px/1.05 var(--f-display); letter-spacing: .03em; color: #fff; }
.starter span:not(.rec) { font-size: 13.5px; color: var(--cream-2); }
.starter .count { font: 400 16px/1 var(--f-display); letter-spacing: .05em; color: var(--mint) !important; white-space: nowrap; }
.fitkey { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* moments: the scene's real frame + overlays */
.nm-real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.65) contrast(1.1); }
.nm-grade { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5, 3, 15, .55)); }
.nm-crowd .cr { transform-box: fill-box; transform-origin: 50% 100%; }
.nm-crowd .ph { opacity: 0; }
.nm-stage.roar .nm-crowd .cr { animation: nm-cr .38s ease-in-out var(--d) infinite alternate; }
.nm-stage.roar .nm-crowd .ph { animation: nm-ph .3s steps(2) var(--d) infinite; }
.nm-stage.roar .nm-crowd .arm { animation: nm-arm .3s ease-in-out var(--d) infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.nm-crowd { transition: opacity .6s; }
.nm-stage.hush .nm-crowd { opacity: .35; }
@keyframes nm-cr { to { transform: translateY(calc(var(--h) * -1)); } }
@keyframes nm-ph { 50% { opacity: 1; } }
@keyframes nm-arm { to { transform: rotate(-18deg); } }
.nm-sticker { position: absolute; z-index: 45; translate: -50% 0; animation: nm-stk 2.1s cubic-bezier(.2, .8, .2, 1) both; }
.nm-sticker__in { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 9px; border: 3.5px solid var(--ink); border-radius: 14px; background: linear-gradient(180deg, #2A2640, #120E26); box-shadow: 4px 6px 0 var(--ink), 0 0 26px color-mix(in srgb, var(--c) 45%, transparent); transform: rotate(-2deg); white-space: nowrap; }
.nm-sticker__in .mic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c); border: 2.5px solid var(--ink); }
.nm-sticker__in .mic svg { width: 22px; height: 22px; display: block; }
.nm-sticker__in b { font: 400 30px/1 var(--f-display); color: var(--c); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; letter-spacing: .02em; }
.nm-sticker__in small { display: block; font: 800 9.5px/1 var(--f-body); letter-spacing: .12em; color: var(--cream-2); margin-left: 2px; }
.nm-sticker__in b + small { margin-top: 0; }
@keyframes nm-stk { 0% { transform: translateY(-40px) scale(.6); opacity: 0; } 12% { transform: translateY(4px) scale(1.08); opacity: 1; } 20% { transform: none; } 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-16px) scale(.92); } }
.nm-cheer { position: absolute; z-index: 30; translate: -50% -100%; animation: nm-cheer 1.4s ease-out both; }
.nm-cheer b { display: inline-block; padding: 5px 10px 4px; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--cream); font: 400 15px/1 var(--f-display); color: var(--ink); box-shadow: 2px 3px 0 var(--ink); white-space: nowrap; position: relative; }
.nm-cheer b::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 10px; height: 10px; background: var(--cream); border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
@keyframes nm-cheer { 0% { transform: translateY(14px) scale(.4); opacity: 0; } 18% { transform: translateY(-4px) scale(1.1); opacity: 1; } 30% { transform: none; } 80% { opacity: 1; } 100% { transform: translateY(-24px); opacity: 0; } }
.nm-shield { width: 120px; height: 130px; margin: -120px 0 0 -60px; transition: opacity .25s; animation: nm-shield 1s ease-in-out infinite; }
@keyframes nm-shield { 50% { filter: drop-shadow(0 0 14px #C99BFF); } }
.nm-bty { width: 70px; height: 70px; margin: -35px 0 0 -35px; transform-origin: 35px 35px; transition: opacity .3s; filter: drop-shadow(0 0 10px rgba(255, 210, 63, .9)); }
.nm-crate { width: 80px; height: 116px; margin: -110px 0 0 -40px; transform-origin: 40px 0; }
.nm-crate.landed path:first-child, .nm-crate.landed path:nth-child(2), .nm-crate.landed path:nth-child(3) { opacity: 0; transition: opacity .2s; }
.nm-rk { position: absolute; z-index: 24; width: 34px; height: 10px; margin: -5px 0 0 -17px; border-radius: 5px; background: #C9D0DF; border: 2px solid var(--ink); box-shadow: 10px 0 0 -2px #FF8A1F, 18px 0 12px rgba(255, 138, 31, .6); animation: nm-rkf .45s linear both; }
@keyframes nm-rkf { to { transform: translateX(-230px); } }
.nm-spot { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 60%), rgba(255, 246, 200, .18) 0, rgba(255, 246, 200, .08) 120px, rgba(4, 2, 12, .86) 190px); transition: opacity .2s; }
.nm-ten { position: absolute; left: 50%; top: 46%; translate: -50% -50%; pointer-events: none; }
.nm-ten b { font: 400 120px/1 var(--f-display); color: #fff; -webkit-text-stroke: 14px var(--ink); paint-order: stroke fill; text-shadow: 0 8px 0 var(--ink), 0 0 40px rgba(255, 107, 139, .8); opacity: .9; }
.nm-ten.bump b { animation: nm-ten .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes nm-ten { 0% { transform: scale(1.8); opacity: 0; } 25% { transform: scale(.92); opacity: 1; } 40% { transform: scale(1); } 85% { opacity: .9; } 100% { opacity: .15; transform: scale(.9); } }
.nm-tempo { position: absolute; right: 180px; top: 64px; display: none; align-items: center; gap: 6px; padding: 5px 10px 4px 6px; border-radius: 10px; background: rgba(13, 11, 22, .85); border: 2.5px solid var(--ink); }
.nm-tempo svg { width: 18px; height: 18px; }
.nm-tempo b { font: 400 13px/1 var(--f-display); letter-spacing: .05em; color: #FF8AA0; }
.nm-stage.final10 .nm-tempo { display: inline-flex; animation: nm-fuse .3s ease-in-out infinite; }
.nm-stage.final10 .nm-hud::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 70px 14px rgba(255, 70, 110, .5); animation: nm-redwash .6s ease-in-out infinite; pointer-events: none; }
.nm-stage.siren .nm-over::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg at 50% 0%, rgba(255, 60, 60, .28) 0 30deg, transparent 30deg 150deg, rgba(255, 210, 63, .28) 150deg 180deg, transparent 180deg); animation: nm-siren .9s linear infinite; mix-blend-mode: screen; }
@keyframes nm-siren { to { filter: hue-rotate(40deg); transform: scaleX(-1); } }
.nm-np.streak { padding-right: 22px; background: linear-gradient(180deg, #FFD49A, #FF8A1F); box-shadow: 0 1.5px 0 var(--ink), 0 0 12px rgba(255, 138, 31, .9); }
.nm-np.streak::after { content: "x" attr(data-x); position: absolute; right: 3px; top: 50%; translate: 0 -50%; font: 400 10px/1 var(--f-display); color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.nm-np.streak::before { content: ""; position: absolute; left: 50%; top: -15px; width: 14px; height: 16px; translate: -50% 0; background: radial-gradient(60% 70% at 50% 70%, #FFF3B0, #FF8A1F 60%, transparent 70%); animation: nm-flame .2s ease-in-out infinite alternate; }
.nm-pill .bty { display: none; font: 400 13px/1 var(--f-display); color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.nm-pill.bounty { box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--yellow), 0 0 14px rgba(255, 210, 63, .7); }
.nm-pill.bounty .bty { display: inline; animation: nm-fuse .6s ease-in-out infinite; }
.tl__mk .dot svg { width: 16px; height: 16px; }
.tl__mk.picked .dot { background: var(--mint); }
.tl__mk.on.picked .dot { background: var(--yellow); }
.tl__ctl .clock.sd { color: #FF6B8B; font-size: 18px; }
.tl__ends { position: relative; height: 14px; display: block; }
.tl__ends span { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; } .tl__ends span:first-child { translate: 0 0; }
.mocard { min-height: 100%; }
.mocard.swap { animation: nm-swap .4s var(--spring); }
.mocard .at { display: flex; align-items: center; gap: 8px; }
.mocard .at .ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--panel-3); border: 2.5px solid var(--ink); }
.mocard .at .ic svg { width: 18px; height: 18px; display: block; }
.mocard .code b { margin-right: 4px; }
.mocard .tdy { display: inline-block; font: 400 10.5px/1 var(--f-display); letter-spacing: .06em; color: var(--ink); background: var(--mint); border: 1.5px solid var(--ink); border-radius: 4px; padding: 2px 4px 1px; margin-right: 3px; }
.mocard .tdy.part { background: var(--yellow); }
.mochip { position: relative; }
.mochip .pk { position: absolute; right: 6px; top: 6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: rgba(255, 246, 224, .15); }
.mochip.picked .pk { background: var(--mint); }
.momap { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* menu: side column, calendar, weekly intro, rotation card, party shelf */
.side3 { padding: 16px 16px 14px; border: 3px solid var(--ink); border-radius: 18px; background: rgba(13, 11, 22, .5); box-shadow: 2px 4px 0 var(--ink); }
.side3 h5 { margin: 0 0 10px; font: 400 16px/1 var(--f-display); letter-spacing: .06em; color: var(--yellow); }
.side3 p { margin: 12px 0 0; color: var(--cream-2); font-size: 13.5px; }
.cal { display: grid; gap: 7px; margin: 0; }
.cal span { min-width: 0; grid-template-columns: 74px minmax(0, 1fr); }
.cal span i { width: 74px; height: 34px; position: relative; display: block; }
.cal span.now { animation: nm-now 1.6s ease-in-out infinite; }
@keyframes nm-now { 50% { box-shadow: inset 0 0 0 2px var(--yellow), 0 0 12px rgba(255, 210, 63, .45); } }
.wk { position: absolute; inset: 0; z-index: 30; overflow: hidden; animation: tm-fade .3s; }
.wk__art { position: absolute; inset: 0; animation: wk-kb 9s ease-in-out infinite alternate; }
@keyframes wk-kb { to { transform: scale(1.08) translateX(-20px); } }
.wk__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 6, 26, .92) 0, rgba(10, 6, 26, .75) 46%, rgba(10, 6, 26, .1) 75%), linear-gradient(180deg, transparent 60%, rgba(10, 6, 26, .7)); }
.wk__l { position: absolute; left: 84px; top: 40px; width: 470px; animation: tm-up .4s cubic-bezier(.2, .8, .2, 1); }
.wk__tag { display: inline-block; font: 400 15px/1 var(--f-display); letter-spacing: .08em; color: var(--ink); background: #7CFFA3; border: 3px solid var(--ink); border-radius: 8px; padding: 5px 9px 4px; box-shadow: 2px 3px 0 var(--ink); transform: rotate(-3deg); }
.wk h4 { margin: 14px 0 0; font: 400 66px/.92 var(--f-display); color: #9CFF5E; -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink), 0 0 30px rgba(140, 255, 90, .5); letter-spacing: .01em; }
.wk p { margin: 12px 0 0; font: 600 16px/1.35 var(--f-body); color: #fff; max-width: 420px; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); }
.wk__bul { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.wk__bul span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 4px 5px; border-radius: 10px; background: rgba(13, 11, 22, .8); border: 2.5px solid var(--ink); font: 400 13px/1 var(--f-display); letter-spacing: .04em; color: #fff; }
.wk__bul i { width: 22px; height: 22px; display: grid; place-items: center; }
.wk__bul i svg { width: 20px; height: 20px; display: block; }
.wk__ends { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 12px; background: rgba(255, 210, 63, .14); border: 2px dashed rgba(255, 210, 63, .6); }
.wk__ends b { font: 800 10px/1 var(--f-body); letter-spacing: .12em; color: var(--yellow); }
.wk__ends span { font: 400 26px/1 var(--f-display); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; letter-spacing: .02em; }
.wk__ends small { font-size: 15px; color: var(--yellow); margin: 0 3px 0 1px; }
.wk__r { position: absolute; right: 84px; bottom: 34px; display: grid; justify-items: end; gap: 12px; }
.wk__next { display: grid; padding: 8px 12px; border-radius: 12px; background: rgba(13, 11, 22, .82); border: 2.5px solid var(--ink); font: 800 9.5px/1 var(--f-body); letter-spacing: .12em; color: var(--cream-3); text-align: right; }
.wk__next b { font: 400 18px/1.1 var(--f-display); letter-spacing: .03em; color: #3FEAF5; margin-top: 3px; }
.wk__go { width: 210px; height: 72px; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 18px; border: 4px solid var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 52%, var(--yellow-lo)); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .15), 3px 6px 0 var(--ink); animation: wk-go 1.4s ease-in-out infinite; }
.wk__go b { font: 400 34px/.9 var(--f-display); color: var(--ink); }
.wk__go small { font: 800 9.5px/1 var(--f-body); letter-spacing: .12em; color: rgba(29, 27, 36, .7); }
@keyframes wk-go { 50% { transform: scale(1.04); } }
.wk__x { position: absolute; right: 69px; top: 10px; }
.rotc { background: linear-gradient(180deg, #3A2E78, #1E1848); }
.rotc__bg { position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 0%, rgba(255, 255, 255, .06) 0 10deg, transparent 10deg 20deg); }
.rotc__live { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font: 400 11px/1 var(--f-display); letter-spacing: .05em; color: #fff; background: rgba(13, 11, 22, .8); border: 2px solid var(--ink); border-radius: 6px; padding: 3px 6px 2px; }
.rotc__live i { width: 7px; height: 7px; border-radius: 50%; background: #FF4D63; box-shadow: 0 0 6px #FF4D63; animation: tm-blink 1s steps(2) infinite; }
.rotc__slots { position: absolute; z-index: 3; left: 7px; right: 7px; top: 34px; bottom: 40px; display: grid; grid-template-rows: repeat(3, 1fr); gap: 6px; }
.rs-slot { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; border-radius: 11px; border: 2.5px solid var(--ink); overflow: hidden; background: #0B0820; box-shadow: 1px 2px 0 var(--ink); transition: transform .2s var(--spring); }
.rs-slot.on { box-shadow: 0 0 0 2.5px var(--yellow), 0 0 12px rgba(255, 210, 63, .5); }
.rs-slot.landed { animation: rs-land .5s var(--spring); }
@keyframes rs-land { 0% { transform: scale(1.12); } 100% { transform: none; } }
.rs-art { position: relative; overflow: hidden; }
.rs-art .rs { position: absolute; inset: 0; display: block; }
.rs-slot.spin .reel { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--n) * 100%); display: block; animation: rs-reel 1.2s cubic-bezier(.3, .1, .2, 1) both; }
.rs-slot.spin .reel .rs { position: relative; height: calc(100% / var(--n)); }
@keyframes rs-reel { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 100% / var(--n))); } }
.rs-t { display: flex; align-items: baseline; gap: 4px; padding: 3px 6px 3px; background: rgba(13, 11, 22, .9); }
.rs-t b { font: 400 11.5px/1 var(--f-display); letter-spacing: .03em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rs-t small { margin-left: auto; font: 800 8px/1 var(--f-body); letter-spacing: .08em; color: var(--mint); white-space: nowrap; }
.rotc .mc__check { position: absolute; z-index: 5; right: 8px; top: 6px; }
.r3 { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 9px; }
.r3__ring { position: relative; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(var(--yellow) calc(var(--p) * 1%), rgba(255, 246, 224, .12) 0); display: grid; place-items: center; border: 2.5px solid var(--ink); }
.r3__ring i { position: relative; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ink); display: block; }
.r3 b { display: block; font: 400 14px/1.1 var(--f-display); letter-spacing: .03em; color: #fff; }
.r3 small { display: block; font: 800 9.5px/1.3 var(--f-body); letter-spacing: .08em; color: var(--cream-3); }
.lob__wifi { display: inline-flex; align-items: center; gap: 6px; font: 400 13px/1 var(--f-display); letter-spacing: .04em; color: #8FE6FF; }
.lob__wifi svg { width: 22px; height: 22px; display: block; }
.lob__p .av span { left: 50%; bottom: -14px; width: 40px; height: 40px; }
.lob__p.wait b { font-size: 12px; }
.lob__shelf h6 { margin-top: 2px; }
.shc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-bottom: 9px; }
.shc__c { position: relative; height: 36px; border-radius: 11px; overflow: hidden; border: 2.5px solid var(--ink); box-shadow: 1px 2px 0 var(--ink); cursor: pointer; }
.shc__c .mart { position: absolute; inset: 0; }
.shc__c b { position: absolute; left: 6px; right: 6px; bottom: 5px; font: 400 12px/1 var(--f-display); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shc__c.sel, .sht__m.sel { box-shadow: 0 0 0 3px var(--yellow), 0 0 16px rgba(255, 210, 63, .55), 1px 2px 0 var(--ink); }
.sht { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.sht__m { position: relative; aspect-ratio: 998 / 440; border-radius: 10px; overflow: hidden; border: 2.5px solid var(--ink); box-shadow: 1px 2px 0 var(--ink); cursor: pointer; background: #0B0820; transition: transform .15s var(--spring); }
.sht__m:hover { transform: translateY(-2px); }
.sht__m .sh { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(8, 6, 18, .9)); }
.sht__m b { position: absolute; left: 6px; right: 6px; bottom: 5px; font: 400 12.5px/1 var(--f-display); letter-spacing: .02em; color: #fff; -webkit-text-stroke: 2.6px var(--ink); paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sht__m .new { position: absolute; left: 4px; top: 4px; font: 400 8px/1 var(--f-display); letter-spacing: .04em; color: var(--ink); background: #7CFFA3; border: 1.5px solid var(--ink); border-radius: 4px; padding: 2px 3px 1px; }
.sht__m.sel { animation: rs-land .45s var(--spring); }
.toast3 { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #A9F4FF, #29C6E8); box-shadow: 2px 4px 0 var(--ink); }
.toast3 .av { position: relative; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; background: rgba(13, 11, 22, .75); border: 2px solid var(--ink); }
.toast3 .av span { position: absolute; left: 50%; bottom: -14px; width: 46px; height: 46px; translate: -50% 0; }
.toast3 b { display: block; font: 400 15px/1.05 var(--f-display); letter-spacing: .02em; color: var(--ink) !important; }
.toast3 small { display: block; margin-top: 3px; font: 800 9.5px/1 var(--f-body); letter-spacing: .1em; color: rgba(29, 27, 36, .7); }
.toast3.pop { animation: nm-swap .45s var(--spring); }
.cmp-wrap { overflow-x: auto; }

@media (max-width: 1100px) {
  .flip { grid-template-columns: minmax(0, 1fr); }
  .momap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .starter { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}
@media (max-width: 760px) {
  .way__stage { grid-template-columns: minmax(0, 1fr) !important; }
  .marquee { height: 92px; }
  .mq { width: 160px; }
  .film { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tvhint { display: none; }
  .fit36 { min-width: 640px; }
}
@media (max-width: 480px) {
  .momap { grid-template-columns: minmax(0, 1fr); }
  .chinfo .row { grid-template-columns: 64px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .mq__track, .wk__art, .wk__go, .cal span.now, .chinfo.swap, .mocard.swap, .rs-slot.spin .reel, .nm-sticker, .nm-cheer, .nm-ten.bump b { animation: none !important; }
}

.still__x { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.chside { position: sticky; top: 76px; }
.tv .film { margin-top: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.thumb b { font-size: 12.5px; }
@media (max-width: 1100px) { .chside { position: static; } .tv .film { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tv .film { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nm-chip { left: auto !important; right: 72px; top: 68px; }
.nm-ladder .lg { background: rgba(255, 246, 224, .82); opacity: .9; box-shadow: inset 0 0 0 1.5px var(--ink); }
.nm-ladder .lg.done { opacity: .45; background: rgba(255, 246, 224, .5); }
.tv__osd { left: 96px; top: 80px; }

/* page 44's spell cast: the top banner + the rune circle */
.nm-cast { position: absolute; z-index: 46; translate: -50% -50%; animation: nm-cast 2.1s cubic-bezier(.2, .8, .2, 1) both; }
.nm-cast__in { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 26px 6px 6px; background: #15122A; border: 3.5px solid var(--ink); border-radius: 12px; box-shadow: 3px 6px 0 rgba(29, 27, 36, .6), 0 0 26px color-mix(in srgb, var(--ec) 45%, transparent); transform: skewX(-12deg); white-space: nowrap; }
.nm-cast__in::before, .nm-cast__in::after { content: ""; position: absolute; left: 10px; right: 6px; height: 3px; border-radius: 2px; background: var(--ec); }
.nm-cast__in::before { top: 3px; } .nm-cast__in::after { bottom: 3px; opacity: .55; }
.nm-cast__in > * { transform: skewX(12deg); }
.nm-cast .med { width: 46px; height: 46px; margin: -12px 0 -12px -18px; filter: drop-shadow(1px 3px 0 rgba(29, 27, 36, .6)); }
.nm-cast .med svg { width: 100%; height: 100%; display: block; }
.nm-cast .t small { display: block; font: 800 10px/1 var(--f-body); letter-spacing: .14em; }
.nm-cast .t small em { font-style: normal; color: var(--cream); }
.nm-cast .t b { display: block; margin-top: 2px; font: 400 26px/1 var(--f-display); letter-spacing: .02em; color: var(--eh); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.nm-cast__in .t { position: relative; overflow: hidden; }
@keyframes nm-cast { 0% { transform: translateY(-70px); opacity: 0; } 15% { transform: translateY(4px); opacity: 1; } 22% { transform: none; } 84% { transform: none; opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
.nm-rune { position: absolute; z-index: 2; width: 160px; height: 48px; margin: -24px 0 0 -80px; animation: nm-rune 1.4s ease-out both; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .35)); }
.nm-rune svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nm-rune .r1 { animation: nm-dash 1s linear infinite; }
.nm-rune .r2 { animation: nm-dash 1.6s linear infinite reverse; }
@keyframes nm-rune { 0% { transform: scale(.2); opacity: 0; } 18% { transform: scale(1.12); opacity: 1; } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .nm-cast, .nm-rune, .nm-rune * { animation: none !important; } }
.lob__p .av span, .toast3 .av span { position: absolute; inset: 1px; left: 1px; bottom: 1px; width: auto; height: auto; translate: none; }

.nm37 .note { max-width: 272px; }

/* ================================================================ round 2 · the game's blood & gore (Render/Gore.cs look) */
.nm-drop { position: absolute; z-index: 23; margin: -3px 0 0 -3px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E8333B, #B80A12 55%, #7A0610); box-shadow: 0 0 0 1px rgba(60, 0, 6, .55); pointer-events: none; }
.nm-bmist { position: absolute; z-index: 22; width: calc(70px * var(--ms, 1)); height: calc(70px * var(--ms, 1)); margin: calc(-35px * var(--ms, 1)) 0 0 calc(-35px * var(--ms, 1)); border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 12, 24, .55), rgba(184, 10, 18, 0)); animation: nm-bmist .5s ease-out both; }
@keyframes nm-bmist { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.nm-bsplat { position: absolute; z-index: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(ellipse at 45% 40%, #D41620, #A00810 60%, #6E0610); box-shadow: 0 0 0 1.2px rgba(40, 0, 4, .5); animation: nm-bsp .25s ease-out both; }
.nm-bsplat .dr { position: absolute; top: 60%; width: 3px; height: var(--dl, 8px); border-radius: 2px; background: #A00810; transform-origin: top; animation: nm-drip 2.4s ease-in .2s both; }
@keyframes nm-bsp { from { transform: scale(.2, .6); } to { transform: none; } }
@keyframes nm-drip { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.nm-smear { position: absolute; z-index: 21; width: 46px; height: 92px; margin: -23px 0 0 -23px; animation: nm-bsp .2s ease-out both; }
.nm-smear svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nm-smear .run { stroke-dasharray: 80; stroke-dashoffset: 80; animation: nm-run 3s ease-in .2s forwards; }
@keyframes nm-run { to { stroke-dashoffset: 0; } }
.nm-bpool { position: absolute; z-index: 1; width: 150px; height: 22px; margin: -11px 0 0 -75px; border-radius: 50%; background: radial-gradient(ellipse at 45% 45%, #C8101C, #8E0812 60%, rgba(110, 6, 16, .9) 75%, rgba(110, 6, 16, 0)); transform: scale(0); animation: nm-pool 2.2s ease-out .1s forwards; }
@keyframes nm-pool { to { transform: scale(var(--s, 1)); } }
.nm-soul { position: absolute; z-index: 26; width: 48px; height: 80px; margin: -80px 0 0 -24px; animation: nm-soul 1.9s ease-out both; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .6)); }
.nm-soul svg { width: 100%; height: 100%; display: block; }
@keyframes nm-soul { 0% { transform: translateY(0) scale(.7); opacity: 0; } 20% { opacity: .9; } 60% { transform: translate(8px, -70px); } 100% { transform: translate(-6px, -140px) scale(1.1); opacity: 0; } }
.nm-bell { position: absolute; z-index: 44; translate: -50% -50%; display: grid; justify-items: center; gap: 2px; animation: nm-bellp 1.3s cubic-bezier(.2, .8, .2, 1) both; }
.nm-bell svg { width: 60px; height: 60px; animation: nm-ring .12s ease-in-out 6 alternate; transform-origin: 50% 10%; }
.nm-bell b { font: 400 26px/1 var(--f-display); color: #FFC21A; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; white-space: nowrap; }
@keyframes nm-bellp { 0% { scale: .3; opacity: 0; } 15% { scale: 1.15; opacity: 1; } 25% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nm-ring { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.nm-lower { position: absolute; z-index: 43; animation: nm-lowl 1.9s cubic-bezier(.2, .8, .2, 1) both; }
.nm-lower.r { animation-name: nm-lowr; }
.nm-lower.r .nm-lower__in { translate: -100% 0; }
.nm-lower__in { display: grid; gap: 2px; padding: 7px 18px 6px 14px; background: linear-gradient(90deg, var(--lc), color-mix(in srgb, var(--lc) 55%, #120E26)); border: 3.5px solid var(--ink); border-radius: 10px; box-shadow: 3px 5px 0 var(--ink); transform: skewX(-12deg); white-space: nowrap; }
.nm-lower__in b { font: 400 26px/1 var(--f-display); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; letter-spacing: .02em; transform: skewX(12deg); }
.nm-lower__in span { font: 800 10px/1 var(--f-body); letter-spacing: .14em; color: #fff; transform: skewX(12deg); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
@keyframes nm-lowl { 0% { transform: translateX(-260px); opacity: 0; } 14% { transform: translateX(10px); opacity: 1; } 22% { transform: none; } 84% { transform: none; opacity: 1; } 100% { transform: translateX(-120px); opacity: 0; } }
@keyframes nm-lowr { 0% { transform: translateX(260px); opacity: 0; } 14% { transform: translateX(-10px); opacity: 1; } 22% { transform: none; } 84% { transform: none; opacity: 1; } 100% { transform: translateX(120px); opacity: 0; } }
.nm-tring { position: absolute; left: 0; top: 0; width: 70px; height: 16px; margin: -8px 0 0 -35px; border-radius: 50%; border: 3px solid var(--tc); box-shadow: 0 0 10px var(--tc), inset 0 0 6px var(--tc); background: color-mix(in srgb, var(--tc) 18%, transparent); }
.nm-np.team { box-shadow: 0 1.5px 0 var(--ink), inset 0 -3px 0 var(--tc); }
.nm-np.team.me { background: linear-gradient(180deg, #FFE98C, #FFD23F); }

/* ================================================================ round 2 · ring scenes */
.nm-ropes { width: 998px; height: 460px; }
.nm-spot2 { width: 260px; height: 500px; margin: -470px 0 0 -130px; transition: opacity .3s; mix-blend-mode: screen; }
.nm-spark { position: absolute; z-index: 24; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); animation: nm-sparkf 1s cubic-bezier(.2, .7, .4, 1) both; }
@keyframes nm-sparkf { 0% { transform: translate(0, 0); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 120px)); opacity: 0; } }
.nm-camf { animation: nm-camf 3s steps(1) infinite; opacity: 0; }
@keyframes nm-camf { 0%, 92% { opacity: 0; } 93%, 95% { opacity: 1; } 96% { opacity: 0; } }
.nm-beamp { animation: nm-gl 2.4s ease-in-out infinite; }
.nm-mesh { width: 998px; height: 460px; }
.nm-mesh.rattle { animation: nm-rattle .07s linear infinite; }
@keyframes nm-rattle { 0% { transform: translate(0, 0); } 25% { transform: translate(2px, -1px); } 50% { transform: translate(-2px, 1px); } 75% { transform: translate(1px, 1px); } }
.nm-ldr { width: 104px; height: 186px; margin: -180px 0 0 -10px; transform-origin: 10px 180px; }
.nm-belt { width: 120px; height: 194px; margin: -170px 0 0 -60px; transform-origin: 60px 0; filter: drop-shadow(0 0 10px rgba(255, 194, 26, .65)); }
.nm-belt.held svg path:first-child { opacity: 0; }
.nm-ball { width: 56px; height: 56px; margin: -28px 0 0 -28px; transform-origin: 28px 28px; filter: drop-shadow(2px 6px 0 rgba(4, 2, 12, .35)); }
.nm-net { width: 90px; height: 120px; transform-origin: 0 50%; }
.nm-label--low { top: 66px; }

/* team panels (TAG TEAM) */
.nm-teams { position: absolute; left: 50%; top: 8px; translate: -50% 0; display: flex; align-items: center; gap: 8px; }
.nm-teams .vs { font: 400 18px/1 var(--f-display); color: var(--yellow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.nm-teams .tp { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(180deg, #2A2640, #120E26); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px color-mix(in srgb, var(--tc) 60%, transparent); }
.nm-teams .tp.r { flex-direction: row-reverse; }
.nm-teams .tn { font: 400 11px/1 var(--f-display); letter-spacing: .06em; color: #fff; background: var(--tc); border: 2px solid var(--ink); border-radius: 6px; padding: 3px 5px 2px; writing-mode: vertical-rl; transform: rotate(180deg); }
.nm-teams .tp.r .tn { transform: none; }
.tmb { position: relative; display: grid; grid-template-columns: 32px 92px; gap: 5px; align-items: center; padding: 2px 4px 2px 2px; border-radius: 9px; transition: opacity .3s, filter .3s; }
.tmb .av { position: relative; width: 32px; height: 32px; border-radius: 8px; overflow: hidden; background: rgba(8, 6, 18, .7); border: 2px solid var(--ink); }
.tmb .av span { position: absolute; inset: 1px; }
.tmb .tx b { display: block; font: 400 11.5px/1 var(--f-display); letter-spacing: .03em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmb .hpb { display: block; position: relative; height: 7px; margin-top: 3px; border-radius: 4px; background: rgba(0, 0, 0, .55); border: 1.5px solid var(--ink); overflow: hidden; }
.tmb .hpb i { position: absolute; inset: 0 auto 0 0; width: var(--hp, 100%); background: linear-gradient(180deg, #8AF5A8, #3CCB6A); transition: width .3s; }
.tmb .st { position: absolute; right: 2px; top: -6px; font-style: normal; font: 400 8.5px/1 var(--f-display); letter-spacing: .06em; color: var(--ink); background: #7CFFA3; border: 1.5px solid var(--ink); border-radius: 4px; padding: 2px 3px 1px; }
.tmb.st-in { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px var(--yellow); }
.tmb.st-apron .st, .tmb.st-wait .st { background: #8FE6FF; }
.tmb.st-apron .hpb i { background: linear-gradient(90deg, #3CCB6A, #8FE6FF); animation: nm-regen 1s ease-in-out infinite; }
@keyframes nm-regen { 50% { filter: brightness(1.5); } }
.tmb.st-tired .st { background: #FF9AAE; animation: nm-fuse .4s ease-in-out infinite; }
.tmb.st-tired .hpb i { background: linear-gradient(180deg, #FF9AAE, #E8344E); }
.tmb.st-out { opacity: .45; filter: grayscale(1); }
.tmb.st-out .st { background: #FF6B8B; }
.nm-tagwrap { width: 0; height: 0; transition: opacity .2s; }
.nm-tagbtn { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 0; background: radial-gradient(circle at 40% 30%, #FFF3B0, #FFD23F 55%, #E8A800); border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink), 0 0 22px rgba(255, 210, 63, .9); }
.nm-tagbtn i { font-style: normal; font-size: 20px; line-height: 1; }
.nm-tagbtn b { font: 400 16px/1 var(--f-display); color: var(--ink); letter-spacing: .04em; }
/* rumble board */
.nm-rumble { position: absolute; left: 50%; top: 8px; translate: -50% 0; display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; border-radius: 13px; border: 3px solid var(--ink); background: linear-gradient(180deg, #2A2640, #120E26); box-shadow: 0 3px 0 var(--ink); }
.nm-rumble .clk { position: relative; display: grid; grid-template-columns: 38px auto; grid-template-rows: auto auto; column-gap: 5px; align-items: center; margin-right: 4px; }
.nm-rumble .clk svg { grid-row: span 2; width: 38px; height: 38px; }
.nm-rumble .clk b { font: 400 17px/1 var(--f-display); color: var(--yellow); -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.nm-rumble .clk small { font: 800 8px/1 var(--f-body); letter-spacing: .1em; color: var(--cream-3); }
.nm-rumble .ent { position: relative; width: 32px; height: 36px; border-radius: 8px; border: 2px solid var(--ink); background: rgba(8, 6, 18, .7); overflow: hidden; transition: all .3s; }
.nm-rumble .ent .av { position: absolute; inset: 0; }
.nm-rumble .ent .av span { position: absolute; inset: 2px; }
.nm-rumble .ent i { position: absolute; z-index: 2; left: 1px; top: 0; font-style: normal; font: 400 10px/1 var(--f-display); color: var(--yellow); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.nm-rumble .ent.wait { opacity: .35; }
.nm-rumble .ent.in { box-shadow: inset 0 0 0 2px #7CFFA3; }
.nm-rumble .ent.gone { opacity: .5; filter: grayscale(1); }
.nm-rumble .ent.gone::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(45deg, transparent 44%, #FF3D6E 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #FF3D6E 44% 56%, transparent 56%); }
.nm-rumble .inr { margin-left: 6px; font: 800 8.5px/1.1 var(--f-body); letter-spacing: .1em; color: var(--cream-3); text-align: center; }
.nm-rumble .inr b { display: block; font: 400 20px/1 var(--f-display); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.nm-buzz { position: absolute; z-index: 45; animation: nm-lowl 1.6s cubic-bezier(.2, .8, .2, 1) both; }
.nm-buzz b { display: inline-block; padding: 8px 16px 6px; font: 400 28px/1 var(--f-display); color: var(--ink); background: linear-gradient(180deg, #FFE98C, #FFC21A); border: 4px solid var(--ink); border-radius: 12px; box-shadow: 3px 5px 0 var(--ink), 0 0 26px rgba(255, 194, 26, .7); transform: rotate(-4deg); white-space: nowrap; }
.nm-elim { position: absolute; z-index: 45; translate: -50% -100%; display: grid; justify-items: center; gap: 3px; animation: nm-stamp 1.8s cubic-bezier(.2, .8, .2, 1) both; }
.nm-elim b { font: 400 30px/1 var(--f-display); color: #FF3D6E; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; padding: 4px 10px; border: 4px solid #FF3D6E; border-radius: 8px; background: rgba(13, 11, 22, .6); transform: rotate(-8deg); white-space: nowrap; }
.nm-elim small { font: 800 10px/1 var(--f-body); letter-spacing: .12em; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; }
@keyframes nm-stamp { 0% { scale: 2.4; opacity: 0; } 12% { scale: .9; opacity: 1; } 20% { scale: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
/* king panel */
.nm-king { position: absolute; left: 50%; top: 8px; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 6px; border-radius: 13px; border: 3px solid var(--ink); background: linear-gradient(180deg, #2A2640, #120E26); box-shadow: 0 3px 0 var(--ink); }
.nm-king .kg { display: flex; align-items: center; gap: 6px; padding-right: 10px; border-right: 2px solid rgba(255, 246, 224, .12); }
.nm-king .kg small, .nm-king .q > small { display: block; font: 800 8px/1 var(--f-body); letter-spacing: .12em; color: var(--cream-3); }
.nm-king .kg b { font: 400 14px/1.05 var(--f-display); color: var(--yellow); letter-spacing: .03em; }
.nm-king .cr svg { display: block; filter: drop-shadow(0 0 6px rgba(255, 210, 63, .7)); }
.nm-king .stk { display: inline-flex; align-items: baseline; gap: 2px; margin-left: 4px; padding: 3px 6px 2px; border-radius: 7px; background: rgba(255, 138, 31, .2); border: 1.5px solid rgba(255, 138, 31, .6); }
.nm-king .stk i { font-style: normal; font-size: 11px; }
.nm-king .stk b { color: #FFB070; font-size: 16px; }
.nm-king .q { display: flex; align-items: center; gap: 4px; }
.nm-king .q > small { writing-mode: vertical-rl; transform: rotate(180deg); }
.nm-king .qa { position: relative; width: 30px; height: 36px; border-radius: 7px; border: 2px solid var(--ink); background: rgba(8, 6, 18, .7); overflow: hidden; }
.nm-king .qa .av { position: absolute; inset: 0; }
.nm-king .qa .av span { position: absolute; inset: 2px; }
.nm-king .qa em { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font: 400 7.5px/1 var(--f-display); text-align: center; color: var(--ink); background: #8FE6FF; padding: 1px 0; }
.nm-king .qa:first-of-type em { background: var(--yellow); }
/* climb meters */
.nm-climb { position: absolute; left: 50%; top: 10px; translate: -50% 0; display: flex; gap: 8px; }
.nm-climb .cb { display: grid; grid-template-columns: 16px auto 110px 36px; gap: 5px; align-items: center; padding: 4px 8px 4px 5px; border-radius: 11px; border: 3px solid var(--ink); background: linear-gradient(180deg, #2A2640, #120E26); box-shadow: 0 3px 0 var(--ink); }
.nm-climb .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); }
.nm-climb b { font: 400 12px/1 var(--f-display); color: #fff; letter-spacing: .03em; white-space: nowrap; }
.nm-climb .m { position: relative; height: 10px; border-radius: 5px; background: rgba(0, 0, 0, .55); border: 2px solid var(--ink); overflow: hidden; }
.nm-climb .m i { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); background: linear-gradient(90deg, #8E99B0, #E6ECF5); }
.nm-climb .cb.hot .m i { background: linear-gradient(90deg, #FFD23F, #FF3D6E); animation: nm-pmfull .3s steps(2) infinite; }
.nm-climb em { font-style: normal; font: 400 12px/1 var(--f-display); color: var(--yellow); text-align: right; }
/* squads */
.nm-squads { position: absolute; left: 50%; top: 10px; translate: -50% 0; display: flex; align-items: center; gap: 10px; }
.nm-squads .vs { font: 400 18px/1 var(--f-display); color: var(--yellow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.nm-squads .sq { display: flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(180deg, #2A2640, #120E26); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px color-mix(in srgb, var(--tc) 60%, transparent); }
.nm-squads .sq b { font: 400 13px/1 var(--f-display); color: #fff; background: var(--tc); border: 2px solid var(--ink); border-radius: 6px; padding: 3px 6px 2px; }
.nm-squads .sq i { width: 18px; height: 24px; border-radius: 6px; background: var(--tc); border: 2px solid var(--ink); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); transition: all .3s; }
.nm-squads .sq i.out { background: transparent; border-style: dashed; border-color: rgba(255, 246, 224, .35); box-shadow: none; }
/* goal scoreboard */
.nm-score { position: absolute; left: 50%; top: 8px; translate: -50% 0; display: flex; align-items: stretch; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; box-shadow: 0 3px 0 var(--ink); }
.nm-score > * { display: grid; place-items: center; padding: 0 10px; }
.nm-score .t b { font: 400 13px/1 var(--f-display); color: #fff; letter-spacing: .05em; }
.nm-score .t.l { background: #2F7BFF; } .nm-score .t.r { background: #FF7A1A; }
.nm-score .n { min-width: 40px; font: 400 26px/1 var(--f-display); color: #fff; background: #120E26; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.nm-score .clk { font: 400 13px/1 var(--f-display); color: var(--yellow); background: #2A2640; }
/* roulette wheel */
.nm-wheel { position: absolute; left: 196px; top: 84px; width: 124px; height: 124px; filter: drop-shadow(0 4px 0 #1D1B24); }
.nm-wheel svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nm-wheel.spin { filter: drop-shadow(0 4px 0 #1D1B24) drop-shadow(0 0 14px rgba(255, 210, 63, .8)); }
.nm-roul { position: absolute; z-index: 44; translate: -50% 0; animation: nm-stamp 1.5s cubic-bezier(.2, .8, .2, 1) both; }
.nm-roul b { display: inline-block; padding: 6px 14px 5px; font: 400 24px/1 var(--f-display); color: var(--ink); background: linear-gradient(180deg, #FFE98C, #FFD23F); border: 4px solid var(--ink); border-radius: 10px; box-shadow: 3px 5px 0 var(--ink); white-space: nowrap; }
.nm-respawn { position: absolute; z-index: 20; width: 90px; height: 120px; margin: -120px 0 0 -45px; border-radius: 45px 45px 10px 10px; background: linear-gradient(180deg, rgba(124, 255, 163, 0), rgba(124, 255, 163, .45)); border: 3px solid rgba(124, 255, 163, .8); animation: nm-resp .8s ease-out both; }
@keyframes nm-resp { 0% { transform: scaleY(0); opacity: 1; } 50% { transform: scaleY(1); } 100% { opacity: 0; } }
.nm-leader { position: absolute; left: 0; top: 0; translate: -50% -100%; font: 400 12px/1 var(--f-display); letter-spacing: .06em; color: var(--ink); background: linear-gradient(180deg, #FFC8E2, #FF8FCB); border: 2.5px solid var(--ink); border-radius: 7px; padding: 4px 7px 3px; box-shadow: 1px 3px 0 var(--ink); white-space: nowrap; animation: nm-crownbob 1s ease-in-out infinite; }
.nm-dark { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nm-flare { width: 20px; height: 20px; margin: -10px 0 0 -10px; filter: drop-shadow(0 0 10px #FF8A5A); }
.nm-rain.lit i { background: linear-gradient(180deg, transparent, rgba(240, 250, 255, 1)); }
.door--short .door__name { font-size: 26px; bottom: 12px; }
.door--short .fg { height: 52% !important; }

/* ================================================================ round 2 · phones: event banner, special card, rule tiles, shelf */
.evb { position: absolute; z-index: 5; overflow: hidden; border: 4px solid var(--ink); border-radius: 18px; box-shadow: 3px 6px 0 var(--ink), 0 0 26px rgba(255, 61, 110, .35); cursor: pointer; }
.evb__art { position: absolute; inset: -40px 0 0 0; }
.evb__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 6, 26, .92) 0, rgba(10, 6, 26, .6) 50%, rgba(10, 6, 26, .1) 80%); }
.evb__tag { position: absolute; z-index: 2; left: 12px; top: 8px; font: 400 11px/1 var(--f-display); letter-spacing: .06em; color: var(--ink); background: #7CFFA3; border: 2px solid var(--ink); border-radius: 6px; padding: 3px 6px 2px; transform: rotate(-3deg); }
.evb__t { position: absolute; z-index: 2; left: 12px; top: 28px; display: grid; gap: 2px; }
.evb__t b { font: 400 30px/.95 var(--f-display); color: #FF8FB0; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; letter-spacing: .01em; }
.evb__t small { font: 800 9px/1.2 var(--f-body); letter-spacing: .08em; color: #fff; max-width: 330px; text-shadow: 0 1px 2px #000; }
.evb__ends { position: absolute; z-index: 2; left: 400px; top: 18px; display: grid; gap: 2px; }
.evb__ends small { font: 800 8px/1 var(--f-body); letter-spacing: .12em; color: var(--yellow); }
.evb__ends b { font: 400 20px/1 var(--f-display); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.evb__fr { position: absolute; z-index: 3; right: 196px; top: 22px; display: inline-flex; align-items: center; gap: 5px; font: 400 12px/1 var(--f-display); letter-spacing: .04em; color: #fff; background: rgba(13, 11, 22, .82); border: 2.5px solid var(--ink); border-radius: 9px; padding: 6px 9px 5px 5px; }
.evb__fr svg { width: 18px; height: 18px; display: block; }
.evb__go { position: absolute; z-index: 3; right: 10px; top: 9px; bottom: 9px; width: 170px; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 13px; border: 3.5px solid var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 52%, var(--yellow-lo)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15), 2px 4px 0 var(--ink); animation: wk-go 1.4s ease-in-out infinite; }
.evb__go b { font: 400 24px/.9 var(--f-display); color: var(--ink); }
.evb__go small { font: 800 8px/1 var(--f-body); letter-spacing: .1em; color: rgba(29, 27, 36, .7); }
.tms.enter .evb { animation: tm-in .46s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .2s; }
.mc.spc { background: #1E1848; box-shadow: 2px 5px 0 var(--ink), 0 0 0 2px #7CFFA3 inset; }
.mc.spc .mc__art { overflow: hidden; }
.spc__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; background: #0B0820; }
.spc__grid > span { position: relative; overflow: hidden; }
.rulek { position: absolute; z-index: 5; right: -4px; top: 30px; font: 400 11px/1 var(--f-display); letter-spacing: .05em; color: var(--ink); background: linear-gradient(180deg, #B8FFCF, #7CFFA3); border: 2.5px solid var(--ink); border-radius: 7px 0 0 7px; padding: 4px 8px 3px 7px; box-shadow: -1px 2px 0 var(--ink); animation: rk-pulse 2s ease-in-out infinite; }
@keyframes rk-pulse { 50% { transform: translateX(-3px); } }
.xtra--hot { background: linear-gradient(180deg, rgba(124, 255, 163, .22), rgba(124, 255, 163, .06)), linear-gradient(180deg, #2E2948, #1E1B2B); box-shadow: 2px 4px 0 var(--ink), inset 0 0 0 2px rgba(124, 255, 163, .55); }
.xtra__art .still { position: absolute; inset: 0; }
.rtiles { display: flex; flex-wrap: wrap; gap: 6px; }
.rtile { position: relative; display: grid; gap: 3px; width: 66px; cursor: pointer; transition: transform .15s var(--spring); }
.rtile:hover { transform: translateY(-2px); }
.rtile__art { position: relative; height: 38px; border-radius: 8px; overflow: hidden; border: 2.5px solid var(--ink); box-shadow: 1px 2px 0 var(--ink); }
.rtile__art .mart { position: absolute; inset: 0; }
.rtile b { font: 400 9.5px/1.05 var(--f-display); letter-spacing: .02em; color: var(--cream-2); text-align: center; }
.rtile.on .rtile__art { box-shadow: 0 0 0 3px var(--yellow), 0 0 12px rgba(255, 210, 63, .6), 1px 2px 0 var(--ink); }
.rtile.on b { color: #fff; }
.rtile .st, .rtile .nw { position: absolute; right: -4px; top: -6px; font-style: normal; font: 400 9px/1 var(--f-display); color: var(--ink); background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 5px; padding: 2px 3px 1px; }
.rtile .nw { background: #7CFFA3; }
.shelf3 small { display: block; margin-bottom: 6px; font: 800 9px/1 var(--f-body); letter-spacing: .12em; color: var(--cream-3); }
.shelf3__g { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.s3 { position: relative; cursor: pointer; display: grid; gap: 2px; }
.s3__art { position: relative; height: 40px; border-radius: 7px; overflow: hidden; border: 2.5px solid var(--ink); box-shadow: 1px 2px 0 var(--ink); }
.s3 b { font: 400 8.5px/1.05 var(--f-display); color: var(--cream-2); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s3.on .s3__art { box-shadow: 0 0 0 3px var(--yellow), 1px 2px 0 var(--ink); }
.s3 .pb { position: absolute; left: 2px; top: 2px; }
.pb { font: 400 8px/1 var(--f-display); letter-spacing: .04em; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 4px; padding: 2px 3px 1px; white-space: nowrap; }
.pb.pk { background: var(--yellow); } .pb.nw { background: #7CFFA3; }
.go3__pb { position: absolute; z-index: 4; left: 12px; top: 12px; font-size: 11px; padding: 3px 6px 2px; }
.go3 .still { position: absolute; inset: 0; }

/* ================================================================ round 2 · page: the record, film rows, variants */
.note--big { max-width: 420px; font-size: 15px; }
.nm37 .note { max-width: 300px; }
.nm37 .note.note--big { max-width: 440px; }
.picked36 { margin: 18px auto 0; max-width: 1180px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; padding: 12px 18px; border: 3px solid var(--ink); border-radius: 18px; background: linear-gradient(180deg, rgba(124, 255, 163, .2), rgba(124, 255, 163, .06)); box-shadow: 2px 5px 0 var(--ink), inset 0 0 0 2px rgba(124, 255, 163, .5); }
.pk36__lock { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 5px 6px; border-radius: 10px; background: linear-gradient(180deg, #B8FFCF, #7CFFA3); border: 3px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); }
.pk36__lock svg { width: 16px; height: 16px; }
.pk36__lock b { font: 400 15px/1 var(--f-display); color: var(--ink); letter-spacing: .05em; }
.pk36__lock small { font: 800 9px/1 var(--f-body); letter-spacing: .1em; color: rgba(29, 27, 36, .7); }
.pk36__g { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pk36__g small { font: 800 9.5px/1 var(--f-body); letter-spacing: .12em; color: var(--cream-3); margin-right: 2px; }
.pk36__g b { font: 400 13px/1 var(--f-display); letter-spacing: .03em; color: var(--ink) !important; background: #7CFFA3; border: 2px solid var(--ink); border-radius: 7px; padding: 4px 7px 3px; }
.mq em { position: absolute; z-index: 2; right: 6px; top: 6px; font-style: normal; font: 400 10px/1 var(--f-display); letter-spacing: .05em; color: var(--ink); background: #7CFFA3; border: 2px solid var(--ink); border-radius: 5px; padding: 2px 4px 1px; }
.mq.pk em { background: var(--yellow); }
.recstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 16px; background: linear-gradient(90deg, rgba(124, 255, 163, .18), rgba(124, 255, 163, .04) 60%, rgba(185, 179, 208, .06)); box-shadow: 2px 4px 0 var(--ink), inset 0 0 0 2px rgba(124, 255, 163, .45); }
.rs__lock { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 4px 5px; border-radius: 9px; background: linear-gradient(180deg, #B8FFCF, #7CFFA3); border: 2.5px solid var(--ink); }
.rs__lock svg { width: 15px; height: 15px; }
.rs__lock b { font: 400 14px/1 var(--f-display); color: var(--ink); letter-spacing: .05em; }
.rs__lock small { font: 800 8.5px/1 var(--f-body); letter-spacing: .1em; color: rgba(29, 27, 36, .7); }
.rs__list, .rs__rec { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rs__rec { margin-left: auto; }
.rs__rec > small { font: 800 9px/1 var(--f-body); letter-spacing: .12em; color: var(--cream-3); margin-right: 2px; }
.rs__c { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 9px; border: 2.5px solid var(--ink); transition: transform .15s var(--spring); }
.rs__c:hover { transform: translateY(-2px); }
.rs__c i { position: relative; width: 52px; height: 26px; border-radius: 6px; overflow: hidden; border: 2px solid var(--ink); display: block; }
.rs__c i.ic { width: 26px; display: grid; place-items: center; background: #3A3458; }
.rs__c i.ic svg { width: 16px; height: 16px; }
.rs__c b { font: 400 13px/1 var(--f-display); letter-spacing: .03em; }
.rs__c.pk { background: #7CFFA3; box-shadow: 1px 3px 0 var(--ink); }
.rs__c.pk b { color: var(--ink) !important; }
.rs__c.mr { padding: 5px 9px 4px; background: rgba(185, 179, 208, .14); border-color: rgba(185, 179, 208, .5); border-style: dashed; }
.rs__c.mr b { color: var(--grey, #b9b3d0) !important; font-size: 12px; }
.filmh { display: flex; align-items: baseline; gap: 10px; margin: 18px 2px 8px; }
.filmh b { font: 400 17px/1 var(--f-display); letter-spacing: .05em; color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.filmh span { font: 800 10px/1 var(--f-body); letter-spacing: .12em; color: var(--cream-3); }
.filmh.b2 b { color: #7CFFA3; }
.tv .film { margin-top: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.thumb .tflags { position: absolute; z-index: 3; left: 5px; top: 20px; display: flex; gap: 3px; }
.tf { display: inline-flex; align-items: center; gap: 3px; font: 400 9.5px/1 var(--f-display); letter-spacing: .04em; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 5px; padding: 2px 4px 1px; }
.tf svg { width: 9px; height: 9px; }
.tf.pk { background: #7CFFA3; } .tf.nw { background: #7CFFA3; } .tf.rec { background: var(--yellow); }
.tf.mr { background: rgba(185, 179, 208, .85); }
.thumb.b1.r-picked { box-shadow: 0 0 0 3px #7CFFA3, 2px 4px 0 var(--ink); }
.thumb.b1.r-no, .thumb.b1.r-rec { filter: saturate(.55) brightness(.8); }
.thumb.b1.r-no:hover, .thumb.b1.r-rec:hover, .thumb.b1.on { filter: none; }
.thumb.b2 { box-shadow: 2px 4px 0 var(--ink), inset 0 0 0 2px rgba(124, 255, 163, .35); }
.chinfo.b2 { box-shadow: 3px 7px 0 var(--ink), 0 0 0 3px rgba(124, 255, 163, .55); }
.b2tag { display: inline-block; margin-top: 8px; font: 400 11px/1 var(--f-display); letter-spacing: .06em; color: var(--ink); background: #7CFFA3; border: 2px solid var(--ink); border-radius: 6px; padding: 3px 6px 2px; }
.eff.l { background: #FF9AAE; }
.chinfo__ch .map em.nm { background: #7CFFA3; }
.vrow { margin-top: 12px; padding: 10px; border-radius: 14px; background: rgba(8, 6, 18, .45); border: 2px solid rgba(255, 246, 224, .12); }
.vl { display: block; font: 400 13px/1 var(--f-display); letter-spacing: .08em; color: var(--yellow); margin-bottom: 7px; }
.vopts { display: grid; gap: 7px; }
.vopt { cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; padding: 8px 9px; border-radius: 11px; border: 2.5px solid var(--ink); background: linear-gradient(180deg, #2E2948, #221E36); box-shadow: 1px 3px 0 var(--ink); transition: background .2s; }
.vopt .pick { grid-row: span 2; }
.vopt .vt { display: flex; align-items: center; gap: 6px; }
.vopt .vt b { font: 400 14px/1 var(--f-display); letter-spacing: .03em; color: #fff; }
.vopt small { font: 600 11px/1.3 var(--f-body); color: var(--cream-3); }
.vopt.on { background: linear-gradient(180deg, #4A4270, #3A3458); box-shadow: 1px 3px 0 var(--ink), inset 0 0 0 2px var(--yellow); }
.vopt.on .vt b::before { content: "▶ "; color: var(--yellow); }
.vrec { font: 400 9px/1 var(--f-display); letter-spacing: .05em; color: var(--ink); background: var(--grey, #b9b3d0); border: 1.5px solid var(--ink); border-radius: 4px; padding: 2px 4px 1px; }
.vhint { display: block; margin-top: 6px; font: 600 11px/1.3 var(--f-body); color: var(--cream-3); }
.pick--sm { transform: scale(.82); transform-origin: right center; }
.rstamp { display: inline-flex; align-items: center; gap: 6px; font: 400 14px/1 var(--f-display); letter-spacing: .05em; border: 3px solid var(--ink); border-radius: 10px; padding: 7px 11px 6px 8px; box-shadow: 2px 3px 0 var(--ink); transform: rotate(-2deg); }
.rstamp svg { width: 14px; height: 14px; }
.rstamp.pk { color: var(--ink); background: linear-gradient(180deg, #B8FFCF, #7CFFA3); }
.rstamp.rec { color: var(--ink); background: rgba(185, 179, 208, .85); border-style: dashed; }
.rstamp.no { color: var(--cream-3); background: rgba(255, 246, 224, .06); border-color: rgba(255, 246, 224, .25); box-shadow: none; }
.qanchor { display: block; height: 0; scroll-margin-top: 120px; }
.mocard.is-pk { box-shadow: 3px 7px 0 var(--ink), 0 0 0 3px #7CFFA3, 0 0 30px rgba(124, 255, 163, .25); }
.tl__mk.picked .dot { background: #7CFFA3; box-shadow: 0 0 0 3px rgba(124, 255, 163, .5), 1px 2px 0 var(--ink); }
.tl__mk.picked small { color: #B8FFCF; }
.tl__mk.myrec .dot { opacity: .6; }
.tl__mk.on .dot { background: var(--yellow); }
.tl__pk { position: absolute; top: -12px; right: -10px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: #7CFFA3; border: 1.5px solid var(--ink); }
.tl__pk svg { width: 10px; height: 10px; }
.mochip .mtag { position: absolute; right: 6px; top: 5px; display: inline-flex; align-items: center; gap: 3px; font: 400 9px/1 var(--f-display); letter-spacing: .04em; color: var(--ink); }
.mochip .mtag svg { width: 9px; height: 9px; }
.mochip.picked { background: linear-gradient(180deg, rgba(124, 255, 163, .28), rgba(124, 255, 163, .08)), linear-gradient(180deg, #2E2948, #221E36); box-shadow: 1px 3px 0 var(--ink), inset 0 0 0 2px #7CFFA3; }
.mochip.picked .mtag { background: #7CFFA3; border: 1.5px solid var(--ink); border-radius: 4px; padding: 2px 4px 1px; }
.mochip.myrec .mtag { background: rgba(185, 179, 208, .85); border: 1.5px dashed var(--ink); border-radius: 4px; padding: 2px 4px 1px; }
.mochip.myrec, .mochip:not(.picked):not(.myrec) { opacity: .8; }
.mochip .pk { display: none; }
.ctx36 { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 6px 12px 5px 6px; border-radius: 11px; border: 2.5px solid var(--ink); background: linear-gradient(180deg, #B8FFCF, #7CFFA3); box-shadow: 2px 3px 0 var(--ink); }
.ctx36 svg { width: 15px; height: 15px; }
.ctx36 b { font: 400 13px/1 var(--f-display); letter-spacing: .06em; color: var(--ink) !important; }
.ctx36 span { font: 800 10px/1 var(--f-body); letter-spacing: .1em; color: rgba(29, 27, 36, .75); }
.way .side3 { margin-top: 18px; }
.wl3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wl3__c b { display: block; font: 400 15px/1 var(--f-display); letter-spacing: .04em; color: #fff; }
.wl3__c > small { display: block; margin: 3px 0 7px; font: 800 9px/1 var(--f-body); letter-spacing: .1em; color: var(--yellow); }
.wl3__l { display: flex; flex-wrap: wrap; gap: 4px; }
.wl3__l span, .wl4__l span { font: 400 11px/1 var(--f-display); letter-spacing: .03em; color: var(--cream-2); background: rgba(255, 246, 224, .08); border: 1.5px solid rgba(255, 246, 224, .18); border-radius: 6px; padding: 4px 6px 3px; }
.wl3__l span.pk, .wl4__l span.pk { color: var(--ink); background: var(--yellow); border-color: var(--ink); }
.wl3__l span.pk::before, .wl4__l span.pk::before { content: "★ "; }
.wl3__l span.nw, .wl4__l span.nw { color: var(--ink); background: #7CFFA3; border-color: var(--ink); }
.wl4 { display: grid; gap: 7px; }
.wl4__r { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px; border-radius: 12px; background: rgba(8, 6, 18, .4); border: 2px solid rgba(255, 246, 224, .08); }
.wl4__w { display: flex; align-items: center; gap: 8px; }
.wl4__w i { position: relative; width: 40px; height: 28px; border-radius: 7px; overflow: hidden; border: 2.5px solid var(--ink); display: block; }
.wl4__w i .mart { position: absolute; inset: 0; }
.wl4__w b { font: 400 15px/1 var(--f-display); letter-spacing: .03em; color: #fff; }
.wl4__l { display: flex; flex-wrap: wrap; gap: 5px; }
.wl4__l span.nrm { color: var(--cream-3); border-style: dashed; }
.wl4__l span i { font-style: normal; margin-left: 5px; font: 800 8px/1 var(--f-body); letter-spacing: .08em; color: #2F7BFF; background: #fff; border-radius: 3px; padding: 1px 3px; }
@media (max-width: 1100px) { .tv .film { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rs__rec { margin-left: 0; } }
@media (max-width: 760px) { .tv .film { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wl3 { grid-template-columns: minmax(0, 1fr); } .wl4__r { grid-template-columns: minmax(0, 1fr); } .picked36 { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .nm-drop, .nm-bmist, .nm-bsplat, .nm-bsplat .dr, .nm-smear, .nm-smear .run, .nm-bpool, .nm-soul, .nm-bell, .nm-bell svg, .nm-lower, .nm-spark, .nm-buzz, .nm-elim, .nm-roul, .nm-respawn, .nm-leader, .nm-mesh.rattle, .rulek, .evb__go { animation: none !important; } .nm-bpool { transform: scale(var(--s, 1)); } }

.way .side3 .cal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.way .side3 .cal span { grid-template-columns: 84px minmax(0, 1fr); }
.way .side3 .cal span i { width: 84px; height: 40px; }
@media (max-width: 760px) { .way .side3 .cal { grid-template-columns: minmax(0, 1fr); } }
.vopt .vt { grid-column: 1; grid-row: 1; flex-wrap: wrap; }
.vopt > small { grid-column: 1; grid-row: 2; }
.vopt > .pick { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.starter b { display: inline; }
.starter > div > b:first-child { display: block; margin-bottom: 3px; }
.starter > div > span b { font: inherit; font-weight: 800; color: var(--yellow); letter-spacing: 0; }
@media (max-width: 760px) {
  .thumb .tflags { left: 38px; top: 4px; }
  .thumb .tflags .nw { display: none; }
  .tf { font-size: 8px; padding: 1px 3px 0; }
}