/* THE VOID: under zoom, a viewport that does not divide evenly by the scale leaves a sliver of raw page at the stage edge -- visible as a thin strip on some machines. html wears the PAGE background (not a deeper black, which just traded a bright seam for a dark one -- see the band under the profile editor), so a seam cannot be picked out at all. */ html { background: #111; } /* A SHORT screen (the profile editor, whose content simply ends) leaves the body box ending with it, so the window below is painted by html -- which is why html must wear the page colour rather than a deeper one. Tried body{min-height:100vh} as well; vh does not mean the window inside a zoomed document, so it bought nothing but a scrollbar risk. */ @font-face { font-family: 'SD CyberPunk City'; src: url('../fonts/sdcyberpunkcitydemo.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } /* Second equippable name font -- see FONTS in server/profile.js and FONT_STACKS client-side. Was sitting in public/fonts/ unused. */ @font-face { font-family: 'Dissonant Volt Shard'; src: url('../fonts/dissonant-volt-shard-regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* Batch of equippable name fonts, license-checked before adding (bundled readme/license text read directly, or the embedded name-table metadata when no readme shipped with the download) -- see FONTS in server/profile.js and FONT_STACKS/FONT_LABELS client-side for the ids these map to. Three fonts from the same source batch were LEFT OUT on purpose (Lake Street, Antisocial, Whoa!) because their own bundled license text explicitly restricts embedding/commercial use regardless of how the download site had them tagged. */ @font-face { font-family: 'Angel'; src: url('../fonts/angel-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Bone'; src: url('../fonts/bone-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Dirty Brush'; src: url('../fonts/dirty-brush-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Don Graffiti'; src: url('../fonts/don-graffiti-regular.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'DragonForce'; src: url('../fonts/dragonforce-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Du Bellay'; src: url('../fonts/du-bellay-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Flamer'; src: url('../fonts/flamer-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'HellYeah'; src: url('../fonts/hellyeah-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Help Me'; src: url('../fonts/help-me-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Melting Town'; src: url('../fonts/melting-town-regular.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Minercraftory'; src: url('../fonts/minercraftory-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Newspaper Cutout'; src: url('../fonts/newspaper-cutout-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Penguin'; src: url('../fonts/penguin-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Plante'; src: url('../fonts/plante-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Poppin'; src: url('../fonts/poppin-regular.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Punks'; src: url('../fonts/punks-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Spider Font'; src: url('../fonts/spider-font-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Starbim'; src: url('../fonts/starbim-regular.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Yaki Goma'; src: url('../fonts/yaki-goma-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Yozakura'; src: url('../fonts/yozakura-regular.otf') format('opentype'); font-display: swap; } /* ---------- CRT / VHS screen overlay -- never blocks clicks (pointer-events:none inherits into every child layer and pseudo-element). Split across two fixed layers so HUD elements (the profile badge, z 600) can sit above the DARKENING effects but below the glass TEXTURE: #crt-overlay (z 500) -- soften, rollbar, glare, flicker, bezel, vignette (::after) #crt-texture (z 700) -- scanlines (::before), phosphor stripes, grain ---------- */ /* NOTE: no will-change here, deliberately. One was added while hunting the stale-band bug, on the theory that promoting the glass would stop it being re-rastered under the page. It did not fix the bands (the tear slices did -- see .cg-slice), and pinning a viewport-sized texture for nothing is the exact mistake the logo stack already paid for once. A hint that buys no measured frame is a memory cost with a story attached. */ #crt-overlay { position: fixed; inset: 0; z-index: 500; pointer-events: none; } #crt-texture { position: fixed; inset: 0; z-index: 700; pointer-events: none; } #crt-overlay > div, #crt-texture > div { position: absolute; inset: 0; } /* Analog softness: a real tube is slightly soft, hot and oversaturated, so blur/boost the LIVE content behind the overlay. Oversized past the viewport because backdrop-filter smears content at its own edges (reads as warping at the screen border) -- push those edges offscreen. Must also never carry an opacity animation: modulating opacity modulates the blur strength, which makes the whole picture visibly pulse. */ #crt-overlay .crt-soften { inset: -24px; backdrop-filter: blur(0.5px) saturate(1.25) contrast(1.06) brightness(1.04); -webkit-backdrop-filter: blur(0.5px) saturate(1.25) contrast(1.06) brightness(1.04); } /* Scanlines + aperture grille, combined on one layer -- the exact technique (and values, translated from its SCSS vars to literal rgba) from the reference this was modeled on: a tight 2px-period horizontal scan band stacked with a 3px-period vertical R/G/B subpixel fringe. */ #crt-texture::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 2px, 3px 100%; } /* Aperture grille: vertical R/G/B phosphor columns, faint enough to read as texture up close without visibly tinting the picture at a distance. */ /* ---------- screen-change glitch burst -- one-shot ~0.36s chaos played by JS (showScreen adds .glitching, removes it after). Every layer here is tinted flashes over the picture; NOTHING in this subtree reads what is behind it, and that is load-bearing rather than incidental -- see the note on .cg-slice, which used to and was the stale-band bug. z 800: above the picture, the badge and the glass. ---------- */ #crt-glitch { position: fixed; inset: 0; z-index: 800; pointer-events: none; display: none; } #crt-glitch.glitching { display: block; } #crt-glitch > div { position: absolute; opacity: 0; } /* Horizontal tear bands, flicking on/off at different offsets. THE TEAR IS A BLEND, NOT A BACKDROP RESAMPLE, and that is the fix for the stale-band bug -- proved by elimination on the reporter's Mac (hiding this ONE layer stopped it; hiding the glass and the texture did not). These used to carry `backdrop-filter: invert(.85) hue-rotate(160deg) saturate(2.5)`: three FULL-WIDTH bands, each opening its own backdrop render surface and re-reading, inverting, hue-rotating and saturating everything behind it, EVERY FRAME, while translating sideways -- fired on every screen change and again on the ambient timer. Priced per pixel, so a near-fullscreen window at DPR 2 is where it stops finishing in time, and a slice that misses its frame doesn't mangle the picture, it presents the raw stale backdrop: a full-width band of the previous frame with a hard seam. THE GLITCH EFFECT FAILING WAS THE GLITCH BUG, which is why it read as a broken renderer rather than an effect, and why paint flashing never marked it -- backdrop-filter is composited, not painted, so there is no paint rectangle to see. THE SLICE READS NOTHING BEHIND IT NOW, and that is the whole rule: `mix-blend-mode: difference` was tried here first, on the theory that a compositor blend is cheaper than a filter pipeline. It is -- and it did NOT fix the bands, because a blend READS THE BACKDROP exactly like backdrop-filter does. Cheaper read, same dependency, same failure at size. So the tear is a flat translucent band: the compositor draws it over whatever is already there and never asks what that was. WHAT THIS COSTS, stated plainly: the tear no longer inverts the picture beneath it, it lights it. Over this app's near-black ground the two look close at 0.12s, which is the entire duration; the loss is real but it is small, and a signature effect that intermittently freezes a third of the screen is not worth defending. THE RULE FOR ANYTHING NEW: a full-bleed element that MOVES must not read its backdrop -- not via backdrop-filter, not via mix-blend-mode. Cost is the read, priced per pixel, and it is paid on every frame of the motion. */ .cg-slice { left: 0; right: 0; background: rgba(170, 250, 255, 0.44); } /* Positions, heights and jitter offsets are CSS vars re-rolled by JS every burst, so no two transitions ever look identical. */ .cg-s1 { top: var(--t1-top, 16%); height: var(--t1-h, 7%); } .cg-s2 { top: var(--t2-top, 46%); height: var(--t2-h, 3.5%); } .cg-s3 { top: var(--t3-top, 71%); height: var(--t3-h, 9%); } /* The whole burst lives INSIDE the pre-swap window (swap at 110ms): every animation completes in 0.12s and JS hard-kills the overlay the instant the next screen mounts. */ /* Duration is a var, not hardcoded: screen-transition bursts stay at the original 0.12s (tuned to finish inside the swap window and mask it -- changing that would let the actual DOM swap show through as a visible cut), while the ambient loop (main.js) stretches this several times longer so a burst that's meant to be NOTICED as its own event actually reads as one instead of blinking past in a tenth of a second. Since every sub-keyframe below is percentage-timed, stretching the duration stretches the whole burst proportionally -- no separate keyframe set needed for the two cases. */ .glitching .cg-s1 { animation: cg-tear-1 var(--glitch-dur, 0.12s) step-end 1; } .glitching .cg-s2 { animation: cg-tear-2 var(--glitch-dur, 0.12s) step-end 1; } .glitching .cg-s3 { animation: cg-tear-3 var(--glitch-dur, 0.12s) step-end 1; } /* Chaos ramps IN over the first ~40% (old screen tearing apart), peaks at the swap point, then decays over the tail (new screen resolving). */ @keyframes cg-tear-1 { 0% { opacity: 1; transform: translateX(var(--t1-xa, -14px)); } 15% { opacity: 0; } 30% { opacity: 1; transform: translateX(var(--t1-xb, 26px)); } 52% { opacity: 1; transform: translateX(var(--t1-xa, -30px)); } 68% { opacity: 0; } 82% { opacity: 1; transform: translateX(var(--t1-xb, 10px)); } 90% { opacity: 0; } 100% { opacity: 0; } } @keyframes cg-tear-2 { 0% { opacity: 0; } 18% { opacity: 1; transform: translateX(var(--t2-xa, 34px)); } 36% { opacity: 1; transform: translateX(var(--t2-xb, -22px)); } 55% { opacity: 0; } 70% { opacity: 1; transform: translateX(var(--t2-xa, 16px)); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes cg-tear-3 { 0% { opacity: 1; transform: translateX(var(--t3-xb, 10px)); } 14% { opacity: 0; } 34% { opacity: 1; transform: translateX(var(--t3-xa, -26px)); } 58% { opacity: 1; transform: translateX(var(--t3-xb, 30px)); } 74% { opacity: 0; } 100% { opacity: 0; } } /* Static burst -- peaks mid-burst, right when JS swaps the screens, so the actual cut is buried under the noise. */ .cg-noise { inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); } .glitching .cg-noise { animation: cg-noise-burst var(--glitch-dur, 0.12s) step-end 1; } @keyframes cg-noise-burst { 0% { opacity: 0.12; } 20% { opacity: 0.22; } 36% { opacity: 0.34; } 50% { opacity: 0.3; } 62% { opacity: 0.16; } 80% { opacity: 0.08; } 100% { opacity: 0; } } /* One fast vertical sync roll. */ .cg-roll { left: 0; right: 0; top: 0; height: 110px; background: linear-gradient( to bottom, transparent, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.1) 55%, transparent ); } .glitching .cg-roll { animation: cg-roll-sweep var(--glitch-dur, 0.12s) linear 1; } @keyframes cg-roll-sweep { 0% { opacity: 1; transform: translateY(-110px); } 100% { opacity: 1; transform: translateY(calc(100 * var(--dvh, 1vh))); } } /* Folded into #crt-texture::before now (the RGB fringe lives there alongside the scanline band, matching the reference's single-layer technique) -- this div stays in the DOM harmlessly, just inert. */ #crt-texture .crt-phosphor { display: none; } /* Static noise removed on purpose -- it was reading as fuzz, not texture. Everything else (scanlines, phosphor fringe, vignette, bezel, flicker, roll bar) stays exactly where it was, still global via #crt-overlay / #crt-texture on every screen in the app. */ #crt-texture .crt-grain { display: none; } /* Retired: the rolling VHS bar is out, replaced by the constant ambient glitch loop instead (see playScreenGlitch's setInterval-driven loop in main.js) -- the same tear/noise/roll burst that used to only fire on screen changes now fires on every screen, always, on a randomized cadence. That's "the moving thing" now, not this bar. */ #crt-overlay .crt-rollbar { display: none; } /* Ambient room light reflecting off the curved glass, top of the tube. */ #crt-overlay .crt-glare { background: radial-gradient(ellipse 130% 55% at 50% -12%, rgba(255, 255, 255, 0.06), transparent 58%); } /* Brightness flicker: a black veil blipping in briefly. Lives on its own layer (instead of animating the overlay's opacity) so the glare and the backdrop blur stay rock steady between blips. */ #crt-overlay .crt-flicker { background: #000; opacity: 0; animation: crt-flicker 7s infinite; } /* True rounded tube corners: paint everything outside the rounded rect opaque black (the shadow only shows in the corner notches). */ #crt-overlay .crt-bezel { border-radius: 26px; box-shadow: 0 0 0 60px #000, inset 0 0 1px rgba(255, 255, 255, 0.07); } /* Vignette + curved-tube darkening toward the corners, plus an RGB fringe right at the edge to hint at chromatic aberration in the glass. THE EDGE DARKENING IS GRADIENTS, NOT A BLURRED SHADOW. This used to carry `inset 0 0 70px 12px rgba(0,0,0,.7)` -- a 70px gaussian evaluated over EVERY pixel of the viewport, on a layer sitting above the whole app, re-rastered with any full-screen repaint beneath it. Blur cost scales with radius (Glow Bloom's switch is built on the same fact) and this was the largest radius in the file over the largest box in the file, so four edge ramps buy the same darkening for a gradient fill. Corners land slightly deeper than the shadow put them, which is what a tube does anyway and what the radial under them was already for. The 8px RGB fringes stay: small radius, and they ARE the chromatic aberration. HONEST PROVENANCE, because the comment here used to claim otherwise: this was changed while hunting the stale-band bug and it was NOT the cause -- the bands survived it, and the culprit turned out to be the tear slices' backdrop-filter (see .cg-slice). It stays because it is a real cost saving at no visual cost, not because it fixed anything. Keep the rule blur-free on the same reasoning. */ #crt-overlay::after { content: ''; position: absolute; inset: 0; border-radius: 26px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.28) 22px, rgba(0, 0, 0, 0) 52px), linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.28) 22px, rgba(0, 0, 0, 0) 52px), linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.28) 22px, rgba(0, 0, 0, 0) 52px), linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.28) 22px, rgba(0, 0, 0, 0) 52px), radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.55) 100%); box-shadow: inset 4px 0 8px rgba(255, 0, 60, 0.14), inset -4px 0 8px rgba(0, 180, 255, 0.14); } @keyframes crt-flicker { 0%, 100% { opacity: 0; } 91% { opacity: 0; } 92% { opacity: 0.06; } 93% { opacity: 0; } 96% { opacity: 0.03; } 97% { opacity: 0; } } @keyframes crt-grain { 0% { transform: translate(0, 0); } 12% { transform: translate(-28px, 20px); } 25% { transform: translate(34px, -14px); } 37% { transform: translate(-20px, -34px); } 50% { transform: translate(14px, 28px); } 62% { transform: translate(-34px, 8px); } 75% { transform: translate(28px, -22px); } 87% { transform: translate(-8px, 34px); } 100% { transform: translate(0, 0); } } @keyframes crt-roll { 0% { transform: translateY(-110%); } 100% { transform: translateY(500%); } } /* ---------- "CRTV SCREEN SCAN" -- the CRT power-on flash ---------- Saved for reuse, NOT auto-played on load -- fire it on demand with playCrtvScreenScan() (main.js). Two layers, not one: #crt-boot itself is a SOLID opaque backdrop that actually hides the real app underneath (a transform:scale on a single layer, tried first, only shrinks the painted RECTANGLE -- everything outside that thin strip stays fully visible, which is exactly the bug the first version had: the menu showing through around the line the whole time). The bright line lives on ::before instead, free to jerk and expand on its own while the backdrop stays opaque underneath it. Only once the line has bloomed does the backdrop itself fade, and the two fade out together -- so the real app is never visible until the actual "reveal" moment. Sits above every other overlay (z 900). */ #crt-boot { position: fixed; inset: 0; z-index: 900; pointer-events: none; background: #050805; opacity: 0; } #crt-boot::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); background: #eafff0; opacity: 0; box-shadow: 0 0 40px 14px rgba(210, 255, 220, 0.85), 0 0 140px 50px rgba(120, 255, 150, 0.5); } #crt-boot.crt-boot-play { animation: crt-boot-bg 1.9s cubic-bezier(0.2, 0.7, 0.3, 1) 1 both; } #crt-boot.crt-boot-play::before { animation: crt-boot-line 1.9s cubic-bezier(0.2, 0.7, 0.3, 1) 1 both; } /* The opaque backdrop: fully solid (hiding the app) through the entire flash/jerk/bloom sequence, only starting to lift in the last third. */ @keyframes crt-boot-bg { 0% { opacity: 1; } 58% { opacity: 1; } 78% { opacity: 0.6; } 100% { opacity: 0; } } /* The line: pops in thin and bright, jerks through a couple of sync-roll jumps (the classic tube power-on stutter), then blooms to fill the whole screen with brightness before fading with the backdrop. */ @keyframes crt-boot-line { 0% { top: 50%; height: 4px; opacity: 1; filter: brightness(3); } 6% { top: 66%; } 6.3% { top: 34%; opacity: 1; } 9% { top: 50%; height: 4px; } 24% { top: 50%; height: calc(100 * var(--dvh, 1vh)); opacity: 1; filter: brightness(1.7); box-shadow: none; } 60% { height: calc(100 * var(--dvh, 1vh)); opacity: 0.85; filter: brightness(1.05); } 100% { height: calc(100 * var(--dvh, 1vh)); opacity: 0; } } /* ---------- "CRTV PANEL GLITCH" -- the whole-picture CRT glitch ---------- Both constant motions from the reference pen, together, applied to the ENTIRE picture (every screen + all HUD chrome), not any one element: - crtv-jerkup: the pen's exact 100ms-infinite 1px vertical tremble (its `.menu { animation: jerkup 100ms infinite }`) -- this is the always-on "the tube is alive" shudder you see the moment you look. - crtv-panel-glitch: the pen's exact @keyframes glitch -- the hard 80deg/-50deg skew warp + opacity dip firing once per 5s cycle. Two transform animations on one element would normally fight (last one wins wholesale) -- animation-composition lets them stack: the skew REPLACES the base transform when it fires, and the jerk ADDs its 1px on top of whatever the skew is doing. Pure CSS, no JS clock. The CRT glass layers (#crt-overlay/#crt-texture) are deliberately NOT animated: the PICTURE warps behind steady glass, which is how a real tube fails -- and it sidesteps every containing-block hazard those fixed full-bleed layers would otherwise have. (position:fixed children of animated elements -- the right-click menu inside the lobby screen, mode-select's fixed chrome -- reparent their containing block to the animated ancestor; those ancestors are all full-bleed viewport-sized when it matters, so coordinates stay sane, and during a warp they skew WITH the picture, which is the point.) */ /* #login-gate is deliberately absent: onboarding is flat and quiet by design -- no FILTER tremble/skew over it (see the ONBOARDING block). */ .screen, #top-bar, #voice-bar, #home-profile-badge, #profile-view, #clan-view, #crt-texture { animation: crtv-panel-glitch 30s step-end 2s infinite, crtv-jerkup 2.4s infinite; animation-composition: replace, add; } /* #crt-texture is the one glass layer that DOES move: the scanline/ phosphor texture spans the full viewport on every screen, so its tremble+warp is what makes even sparse screens read as "the ENTIRE display is glitching" -- a filter over the whole site, not per-panel motion. (It's fixed inset:0 with no fixed descendants and costs nothing to move -- plain gradients, no backdrop-filter. The heavier glass -- soften/bezel/vignette on #crt-overlay -- stays steady: it HAS a backdrop-filter child, which would resample every frame of a 10Hz forever-animation.) Slight oversize so its edges never peek in while the 1px tremble shifts it. */ #crt-texture { inset: -12px; } /* Per-screen FILTER opt-outs (ID selectors outweigh the .screen rule; the :has() variants re-declare the scanline texture while that screen is up, because the texture spans the viewport -- if it kept an effect the screen dropped, you'd still see that effect ON the screen). - Mode-select + store: NO FILTER motion at all -- static glass only. (The store's own hover/holo effects are untouched; this only strips the FILTER's whole-screen movement.) - Server browser: keeps the shake tick, drops the skew warp. */ #screen-mode-select, #screen-store, body:has(#screen-mode-select.active) #crt-texture, body:has(#screen-store.active) #crt-texture { animation: none; } #screen-lobbylist, body:has(#screen-lobbylist.active) #crt-texture { animation: crtv-jerkup 2.4s infinite; animation-composition: add; } /* Game-flow screens: NO FILTER motion at all -- static glass only. Standing rule from the user: no glitches whatsoever during actual gameplay (beat vote through results), in every game, ever. */ #screen-wordsubmit, #screen-wordvote, #screen-crate, #screen-production, #screen-listen, #screen-results, body:has(#screen-wordsubmit.active) #crt-texture, body:has(#screen-wordvote.active) #crt-texture, body:has(#screen-crate.active) #crt-texture, body:has(#screen-production.active) #crt-texture, body:has(#screen-listen.active) #crt-texture, body:has(#screen-results.active) #crt-texture { animation: none; } /* The FILTER's shake, demoted to TEXTURE (per tuning): the picture is perfectly still ~92% of every cycle, then a single sudden flick -- two rapid sub-half-pixel snaps and back, ~60ms each -- like the tube ticking, not a screen that's continuously shaking. Paired stops keep every jump a hard cut with zero glide. */ @keyframes crtv-jerkup { 0%, 91% { transform: translate(0, 0); } 92%, 94% { transform: translate(0.4px, -0.3px); } 95%, 97% { transform: translate(-0.3px, 0.3px); } 98%, 100% { transform: translate(0, 0); } } /* The skew warp -- the FILTER's "push the screen" moment. Angles stay small (subtle-detail tuning); the grit comes from hard cuts, not size. */ @keyframes crtv-panel-glitch { /* ONE position per cycle (per tuning): snap sheared-right, hold ~120ms, snap straight back -- no left phase, no bounce. On the 30s cycle in the shorthands, 0.4% of the timeline = the 120ms hold; paired stops + steps() timing keep both jumps hard cuts. */ 0%, 40.3%, 40.9%, 100% { opacity: 1; transform: skew(0deg, 0deg); } 40.4%, 40.8% { opacity: 0.97; transform: skew(1.2deg, 0deg); } } * { box-sizing: border-box; } /* Reserve the scrollbar's gutter permanently. Page height here changes constantly -- a roster gains a row, a phase swaps the screen, the transition takes a screen out of flow entirely (position:fixed) -- and every crossing of the "does this need a scrollbar" line reflows the whole layout by the scrollbar's width. That's the scrollbar flickering in and out, and it drags the centered column sideways with it. Reserving the space means the threshold is never crossed. */ html { scrollbar-gutter: stable; } body { font-family: sans-serif; max-width: 700px; margin: 0 auto; padding: 56px 16px 40px; background: #111; color: #eee; } /* The 700px cap is right for the utility screens but strangles the main menu and the mode-select split on big monitors -- release it whenever one of those is up. Mode-select also drops the page padding entirely so its full-bleed split reaches every edge (and so the screen-enter animation's box lines up with the viewport -- no jump at the end). */ body:has(#screen-home.active), body:has(#screen-mode-select.active), body:has(#screen-profile.active), body:has(#screen-store.active), body:has(#screen-clans.active) { max-width: none; } body:has(#screen-mode-select.active) { padding: 0; } /* The home menu is a fixed, known-short list (logo + 5 items + socials) -- it should never need to scroll. `safe center` on .screen.active is a real fallback for screens whose content genuinely varies (the shop, a long roster), but on home a stray scrollbar only ever means a few px of sub-pixel drift in the --dvh/zoom math, not real overflow. Clipping it here is cheaper than chasing that drift to zero. */ body:has(#screen-home.active) { overflow: hidden; } /* Gangs is viewport-fitted too (the handset is capped at 58dvh), so any scrollbar here is noise. The one that actually shows up: the power-on dolly scales the whole handset past the viewport, and a transformed box still counts toward scrollable overflow -- both page scrollbars flash in for the ~1s of the zoom, then vanish at the fullscreen cut. Clip instead. */ body:has(#screen-clans.active) { overflow: hidden; } /* Profile, gangs and store get their own generous column instead of the 700px squeeze, and a tighter top so screens fit with no scrollbar. */ #screen-profile.active, #screen-store.active, #screen-clans.active { max-width: 1200px; margin: 0 auto; } /* THE BLACK BAR. The editor is shorter than the window, and a block-level screen just stops where its content ends -- leaving a dead tail at the bottom of the page. That tail is not a different colour (html and body are both #111); it looks black because #crt-overlay::after is a radial vignette that pours rgba(0,0,0,0.55) into the edges of the viewport, and with nothing drawn down there the darkest ring is all you see. So: fill the window and centre the column, and the leftover space splits evenly top and bottom as margin instead of pooling into a bar. The 62px is body's own padding (22 top + 40 bottom) -- filling the full 100*--dvh on top of that is exactly what puts a scrollbar on the page. */ #screen-profile.active { display: flex; flex-direction: column; justify-content: center; min-height: calc(100 * var(--dvh, 1vh) - 62px); } /* THE GREY BAR, Firefox edition (settings + gangs, reported by a first-time Firefox player). Same dead tail as the profile's black bar, worse consequence: in Firefox the fixed CRT layers (#crt-overlay/#crt-texture, inset:0) can end up sized against the ZOOMED ROOT'S CONTENT BOX instead of the viewport, so below a short screen there is no vignette, no scanlines, no glass -- just raw #111 with a razor edge where the content stops (the reported band starts at exactly body-content-height in both screenshots). Chrome merely leaves the tail looking flat; Firefox strips the room off it. Either way the cure is the same: the screen fills the window, so a "below the page" doesn't exist. var(--vph) (true layout viewport, see swApplyZoom) rather than 100*--dvh: the design grid is only as tall as the window at 16:9 exactly -- a taller window would keep a strip of band below the grid. Offsets are each screen's body padding (settings: 0; gangs: 22 top + 40 bottom). */ #screen-settings.active { min-height: var(--vph, 100vh); } #screen-clans.active { min-height: calc(var(--vph, 100vh) - 62px); } /* phone-full drops the body padding (see the phone-full body rule), so the full budget comes back to the screen. */ #screen-clans.phone-full.active { min-height: var(--vph, 100vh); } /* The shop fills the screen: wide as the viewport allows (capped), card heights viewport-relative with floors (never smaller than before) and ceilings (never so big the page scrolls on a normal display). */ /* The old store's screen rule lived here: a 1780px cap and a BACK button pinned to the bottom-left. Both are gone with the rebuild -- the shop sets its own centred cap further down this file, and its exit is the corner LEAVE plate. Left in place these were a duplicate #screen-store.active fighting the real one and a fixed rule for markup that no longer exists. */ #screen-store > .btn-row .jp-btn { font-size: 26px; padding: 12px 46px; } body:has(#screen-profile.active), body:has(#screen-clans.active) { padding-top: 22px; } body:has(#screen-store.active) { padding-top: 12px; } h1, h2, h3 { color: #ffcc00; } h2 { margin-bottom: 14px; } .mode-desc { color: #aaa; max-width: 480px; } /* Angular HUD profile plate (per sketch): tall section on the left holding the square icon + name/level text, diagonal step down after the text, then a thin tail running right that houses the XP bar (origin dot -> track -> end cap), back-slanted right edge. The outline is faked with two stacked clip-path layers: #hpb-plate paints the border color, its ::after paints the same shape inset 2px in the background color. Hue-rotates in sync with the logo and menu. */ #home-profile-badge { position: fixed; /* Shared with #voice-speakers, which stacks directly above this plate -- one source of truth so moving or resizing the badge can't leave the speaker HUD overlapping it. */ bottom: var(--hpb-bottom); left: 16px; /* Above the CRT overlay (z 500): the badge lives in the corner where the vignette is darkest, which was visibly dimming it vs the centered logo. */ z-index: 600; /* --hpb-break is where the top edge's diagonal starts; JS pushes it right for long names so the plate morphs instead of truncating. Total width tracks it so the XP tail keeps its length. */ width: calc(var(--hpb-break, 230px) + 230px); height: var(--hpb-height); /* Two stacked glows -- a tight hot core plus a wide bloom -- to match the logo's neon intensity. */ filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.9)) drop-shadow(0 0 28px rgba(57, 255, 20, 0.6)) hue-rotate(var(--logo-hue)); cursor: pointer; /* Same springy pop as the menu items. Only the transform transitions -- filter must not, since hue-rotate changes every frame. */ transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ---------- PROFILE PLATE MENU ---------- Opens upward on hover or keyboard focus. The plate's own click still opens the profile, so this adds doors rather than replacing the one that was there. Anchored to the plate and sharing its edge, so the pointer never crosses a gap on the way up -- a menu that closes while you reach for it is worse than no menu at all. Same reason it has no entry delay on the way in but does keep a hold on the way out (the :hover on the badge covers both, since the menu is INSIDE it). */ #hpb-menu { position: absolute; left: 0; /* Touching the badge's top edge, NOT floating above it. Any gap here belongs to neither element, and crossing it drops :hover -- which is precisely what shut the menu the moment you reached for it. The visual separation comes from the margin below instead, which is inside the menu's own hit area. */ bottom: 100%; /* Breathing room that is still part of the menu, so the pointer stays on a live target the whole way up. */ padding-bottom: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 232px; padding: 6px; background: linear-gradient(180deg, rgba(8, 20, 10, 0.97), rgba(4, 12, 6, 0.99)); /* ring INSIDE the clip -- see THE CLIP EATS THE BORDER (#prod-sample-box) */ border: 1px solid transparent; box-shadow: inset 0 0 0 1px rgba(57, 255, 20, 0.55); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); /* Hidden without display:none so it can animate, and without pointer events so it can never swallow a click while invisible. */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.14s; /* Held open briefly on the way OUT, instant on the way in. Forgives a fast diagonal that clips a corner of the plate on its way to an item -- without it, the menu punishes moving quickly, which is how everybody moves. */ transition-delay: 0.22s; } /* An ::after bridge used to sit here to cover the gap. It could never have worked: this element carries a clip-path for its cut corners, and clip-path clips HIT TESTING as well as pixels -- so a bridge positioned at top:100%, outside the menu's own box, was clipped out of existence. The gap is closed properly above instead. */ /* CLICK opens it, not hover: the plate is a button now, and the class is the whole state -- set on click, cleared by any click outside or a menu pick. Hover-open kept punishing the corner of the screen the pointer naturally rests in; a menu that appears uninvited is furniture. The hover-exit grace delay above is harmless here and keeps the close soft. */ #home-profile-badge.hpb-open #hpb-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; } .hpb-mi { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: transparent; color: #9dffb0; font-family: 'Courier New', monospace; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .hpb-mi-t { display: block; font-family: 'SD CyberPunk City', 'Courier New', monospace; font-size: 17px; letter-spacing: 3px; line-height: 1.1; } .hpb-mi-s { display: block; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(157, 255, 176, 0.45); margin-top: 2px; } .hpb-mi:hover, .hpb-mi:focus-visible { background: rgba(57, 255, 20, 0.14); color: #d8ffe0; outline: none; } .hpb-mi:focus-visible { box-shadow: inset 0 0 0 1px rgba(57, 255, 20, 0.7); } /* Nothing behind it yet. Dimmed and labelled rather than hidden -- the xp is genuinely being recorded, so "soon" is true, and a dead click would be worse than saying so. */ .hpb-mi[data-soon] { opacity: 0.45; cursor: default; } .hpb-mi[data-soon]:hover { background: transparent; color: #9dffb0; } .hpb-mi[data-soon] .hpb-mi-t::after { content: 'SOON'; font-family: 'Courier New', monospace; font-size: 9px; letter-spacing: 2px; margin-left: 8px; padding: 1px 5px; vertical-align: middle; border: 1px solid rgba(157, 255, 176, 0.4); } @media (prefers-reduced-motion: reduce) { /* Keep the exit delay -- it is a usability hold, not decoration. */ #hpb-menu { transition: opacity 0.14s ease, visibility 0.14s; transform: none; } } /* THE reason the menu kept closing under the pointer. #voice-speakers is deliberately parked directly on top of this plate's corner (z-index 690, see the note on its `bottom`), and .vs-row sets pointer-events: auto so a row can be clicked to mute someone. The menu opens into exactly that space, and the badge is only z-index 600 -- so moving up onto the menu actually landed on the speaking HUD, which is outside the badge, which dropped :hover and shut the menu. The badge carries a `filter`, so it is a stacking context and the menu cannot climb out on its own -- the badge itself has to come up, and only while it is open so the HUD is unobstructed the rest of the time. */ #home-profile-badge:hover, #home-profile-badge:focus-within { z-index: 700; } #home-profile-badge:hover { transform: translate(-3px, -3px) scale(1.03); filter: drop-shadow(2px 2px 0 rgba(24, 140, 10, 0.9)) drop-shadow(2px 2px 0 rgba(15, 88, 6, 0.7)) drop-shadow(0 0 10px rgba(57, 255, 20, 1)) drop-shadow(0 0 30px rgba(57, 255, 20, 0.7)) hue-rotate(var(--logo-hue)); } /* The inner pieces lift a little further than the plate itself, each with its own extrusion trail -- parallax depth, like the badge is a stack of physical layers. */ #home-profile-badge .player-icon, #hpb-text, #hpb-xp-bar { transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s, text-shadow 0.15s; } #home-profile-badge:hover .player-icon { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 rgba(24, 140, 10, 0.9), 4px 4px 0 rgba(15, 88, 6, 0.6), 0 0 14px rgba(57, 255, 20, 0.8), inset 0 0 10px rgba(57, 255, 20, 0.35); } #home-profile-badge:hover #hpb-text { transform: translate(-2px, -2px); text-shadow: 1px 1px 0 rgba(24, 140, 10, 0.95), 2px 2px 0 rgba(19, 112, 8, 0.85), 3px 3px 0 rgba(15, 88, 6, 0.7), 4px 4px 0 rgba(11, 64, 5, 0.55), 0 0 6px rgba(57, 255, 20, 1), 0 0 18px rgba(57, 255, 20, 0.8); } #home-profile-badge:hover #hpb-xp-bar { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 rgba(24, 140, 10, 0.7), 0 0 8px rgba(57, 255, 20, 0.5); } #home-profile-badge.hidden { display: none; } #hpb-plate { position: absolute; inset: 0; /* Lighter, white-hot line color -- thin strokes need a hotter core than the logo's chunky fills to read as equally bright. */ background: #86ff66; clip-path: polygon(0 0, var(--hpb-break, 230px) 0, calc(var(--hpb-break, 230px) + 56px) 44px, 100% 44px, calc(100% - 14px) 100%, 0 100%); } #hpb-plate::after { content: ''; position: absolute; inset: 3px; background: rgba(12, 28, 10, 0.9); box-shadow: inset 0 0 26px rgba(57, 255, 20, 0.3); clip-path: polygon(0 0, calc(var(--hpb-break, 230px) - 4px) 0, calc(var(--hpb-break, 230px) + 51px) 41px, 100% 41px, calc(100% - 13px) 100%, 0 100%); } #home-profile-badge .player-icon { position: absolute; left: 12px; top: 12px; width: 58px; height: 58px; font-size: 30px; border: 3px solid #86ff66; border-radius: 4px; box-shadow: 0 0 14px rgba(57, 255, 20, 0.8), inset 0 0 10px rgba(57, 255, 20, 0.35); } #hpb-text { position: absolute; left: 84px; bottom: 28px; display: flex; align-items: baseline; gap: 14px; line-height: 1; font-family: 'SD CyberPunk City', 'Courier New', monospace; font-size: 30px; color: #86ff66; text-shadow: 0 0 6px rgba(57, 255, 20, 1), 0 0 18px rgba(57, 255, 20, 0.8), 0 0 34px rgba(57, 255, 20, 0.45); white-space: nowrap; } #hpb-xp-bar { position: absolute; left: 96px; right: 34px; top: 60px; height: 4px; background: rgba(57, 255, 20, 0.4); box-shadow: 0 0 8px rgba(57, 255, 20, 0.5); } /* Origin dot at the left end of the bar */ #hpb-xp-bar::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border: 2px solid #86ff66; border-radius: 50%; box-shadow: 0 0 8px rgba(57, 255, 20, 0.8); } /* Vertical end cap at max-XP */ #hpb-xp-bar::after { content: ''; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); width: 3px; height: 13px; background: #86ff66; box-shadow: 0 0 8px rgba(57, 255, 20, 0.8); } #hpb-xp-fill { height: 100%; width: 0%; background: #86ff66; box-shadow: 0 0 10px rgba(57, 255, 20, 1); } /* Chrome-less: no bar background or border line -- the status text and leave button float over whatever screen is up, and the bar itself never eats hovers/clicks (children re-enable their own). */ #top-bar { position: fixed; top: 0; left: 0; right: 0; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; z-index: 60; pointer-events: none; } #top-bar > * { pointer-events: auto; } #conn-status { color: #ff6666; font-size: 14px; } /* ---------- IN-GAME MODAL (replaces native confirm/alert) ---------- Sits above every screen and the FILTER glass -- a decision this final shouldn't be readable through scanlines. */ #sw-modal { position: fixed; inset: 0; z-index: 980; display: flex; align-items: center; justify-content: center; background: rgba(1, 5, 3, 0.72); backdrop-filter: blur(2px); animation: sw-modal-dim 0.18s ease-out; } #sw-modal.hidden { display: none; } @keyframes sw-modal-dim { from { opacity: 0; } to { opacity: 1; } } #sw-modal-card { /* Sized up: these carry real messages now (a couple of paragraphs, not a one-line yes/no), and at 560px/18px they read as fine print on a screen where everything else is huge. */ width: min(760px, calc(92 * var(--dvw, 1vw))); padding: 34px 40px 30px; background: linear-gradient(180deg, rgba(10, 22, 16, 0.98), rgba(4, 12, 8, 0.98)); border: 2px solid rgba(255, 96, 96, 0.55); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); box-shadow: 0 0 40px rgba(255, 50, 50, 0.2); animation: sw-modal-pop 0.2s cubic-bezier(0.34, 1.5, 0.64, 1); } @keyframes sw-modal-pop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } #sw-modal-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } #sw-modal-title { font-family: 'SD CyberPunk City', 'Courier New', monospace; font-size: 38px; letter-spacing: 4px; color: #ff8a8a; text-shadow: 0 0 12px rgba(255, 80, 80, 0.6); } #sw-modal-kata { font-family: 'Courier New', monospace; font-size: 14px; letter-spacing: 5px; color: rgba(255, 140, 140, 0.5); /* Japanese breaks between any two characters, so a long title pushing the tag rightwards was splitting 投票のお願い across two lines mid-word. It's a tag, not a paragraph -- it never wraps. */ white-space: nowrap; flex: 0 0 auto; } #sw-modal-body { margin: 0 0 28px; font-family: 'Courier New', monospace; font-size: 22px; line-height: 1.55; letter-spacing: 0.5px; color: #cfe8d8; /* Bodies are set with textContent (never innerHTML -- some carry player names), so paragraph breaks have to survive as real newlines. Without this they collapse and a multi-paragraph message becomes one block. */ white-space: pre-line; } /* swPrompt's textarea (report reasons). Body-matched type; the body's 28px bottom margin moves here when it shows so spacing stays even. */ #sw-modal-input { display: block; width: 100%; margin: -14px 0 28px; padding: 12px 14px; font-family: 'Courier New', monospace; font-size: 20px; line-height: 1.4; color: #eaffe3; background: rgba(6, 16, 10, 0.85); border: 1px solid rgba(134, 255, 102, 0.35); resize: vertical; min-height: 84px; } #sw-modal-input:focus { outline: none; border-color: rgba(134, 255, 102, 0.75); box-shadow: 0 0 14px rgba(80, 255, 120, 0.18); } #sw-modal-input.hidden { display: none; } #sw-modal-actions { display: flex; gap: 14px; } .sw-modal-btn { flex: 1 1 0; padding: 18px 0 15px; font-family: 'SD CyberPunk City', 'Courier New', monospace; font-size: 29px; letter-spacing: 3px; color: #b9dcb0; background: rgba(20, 44, 14, 0.5); /* ring INSIDE the clip -- see THE CLIP EATS THE BORDER (#prod-sample-box) */ border: 1px solid transparent; box-shadow: inset 0 0 0 1px rgba(134, 255, 102, 0.35); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); cursor: pointer; transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.16s ease-out, color 0.16s ease-out, filter 0.16s ease-out; } .sw-modal-btn:hover, .sw-modal-btn:focus-visible { transform: translate(-3px, -3px) scale(1.04); background: rgba(40, 88, 26, 0.85); color: #eaffe3; } .sw-modal-btn:active { transform: scale(0.97); } .sw-modal-danger { color: #ffd9d9; background: rgba(72, 16, 16, 0.7); border-color: rgba(255, 96, 96, 0.5); } .sw-modal-danger:hover, .sw-modal-danger:focus-visible { background: rgba(120, 24, 24, 0.92); color: #fff; /* drop-shadow, not box-shadow: these buttons are clip-path parallelograms and a clip cuts the box-shadow away with everything else, so the old glow here never actually drew. */ filter: drop-shadow(3px 3px 0 rgba(48, 10, 10, 0.9)) drop-shadow(3px 3px 0 rgba(48, 10, 10, 0.6)) drop-shadow(0 0 16px rgba(255, 60, 60, 0.5)); } /* alert mode: one button, and it isn't a warning */ #sw-modal.sw-modal-alert #sw-modal-cancel { display: none; } #sw-modal.sw-modal-alert #sw-modal-card { border-color: rgba(134, 255, 102, 0.5); box-shadow: 0 0 40px rgba(57, 255, 20, 0.18); } #sw-modal.sw-modal-alert #sw-modal-title { color: #86ff66; text-shadow: 0 0 12px rgba(57, 255, 20, 0.6); } #sw-modal.sw-modal-alert #sw-modal-kata { color: rgba(140, 255, 205, 0.5); } #sw-modal.sw-modal-alert .sw-modal-danger { color: #b9dcb0; background: rgba(20, 44, 14, 0.5); border-color: rgba(134, 255, 102, 0.35); } /* Pinned top-left, above every piece of UI (transition panes 640-660, profile card 680) but deliberately BELOW the FILTER glass at 700 -- the scanlines wash over it like everything else, so it sits IN the screen instead of floating on top of it. The glass is click-through, so this is still the first thing the cursor hits. Muted on purpose: it's an escape hatch, not a call to action -- it only lights up on hover. */ /* The shared corner plate. LEAVE GAME wore this first; the mode-select BACK now uses the same shape, size, position and motion so "get me out of here" looks identical everywhere it appears. Colour is the only thing that varies -- see the -danger modifier below. */ .sw-corner-btn { /* Everything colour-related runs off these three, so the danger variant is a 3-line override and the texture, extrusion and glow all follow it automatically instead of being written out twice. */ --cb-rgb: 134, 255, 102; --cb-deep: 10, 28, 8; --cb-ink: 168, 206, 158; position: fixed; top: 16px; left: 16px; /* Above #crt-texture (700, the scanline/grain darkening layer) AND #crt-glitch (800, the screen-transition burst) -- at the old 690 this sat UNDER both, so the scanlines' own darkening band (a repeating 0/25% black gradient) was actually painting over the plate, reading as "the button is dim" rather than as a texture on top of it. Same reasoning #sw-modal already states for itself: an exit control this important shouldn't be readable through the FILTER, let alone dimmed by it. Still under real UI layers (modals, 900+) since those should cover it like everything else on screen. */ z-index: 810; margin: 0; padding: 15px 34px 12px; font-family: 'SD CyberPunk City', 'Courier New', monospace; font-size: clamp(22px, calc(2.1 * var(--dvw, 1vw)), 32px); letter-spacing: 4px; line-height: 1; color: rgba(var(--cb-ink), 0.85); /* Layered plate: hazard diagonals over CRT scanlines over the base gradient. It's an EXIT control, so the diagonals read as door markings -- and the scanlines tie it to the FILTER over everything. */ background: repeating-linear-gradient(135deg, rgba(var(--cb-rgb), 0.07) 0 7px, transparent 7px 15px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(var(--cb-deep), 0.72), rgba(var(--cb-deep), 0.86)); border: 1px solid rgba(var(--cb-rgb), 0.32); /* notched corners -- same angular plate language as the rest of the UI */ clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); cursor: pointer; overflow: hidden; text-shadow: 0 0 8px rgba(var(--cb-rgb), 0.22); /* The extrusion is drawn with drop-shadow, NOT box-shadow: this plate has a clip-path, and clip-path clips an element's box-shadow along with everything else, so a stepped box-shadow stack would simply never appear. filter runs AFTER the clip, so it traces the notched silhouette -- and chained drop-shadows compound their offsets, which is what builds the stepped depth. */ filter: none; /* SNAP THE GLOW, SPRING THE TRANSFORM -- the house rule, learned on .menu-item-title and restated here. filter and text-shadow are NOT transitioned: rest is `none` / one shadow and hover is an EIGHT-function drop-shadow chain, and interpolating between mismatched shadow lists is what killed the menu neon mid-tween (far worse in Gecko than Blink). The halo has to be there the instant the pointer lands, or it reads as not being there at all. */ transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.18s ease-out, border-color 0.18s ease-out; } /* A light rakes across the plate on hover -- the clip-path contains it, so it wipes the notched shape rather than a rectangle. */ .sw-corner-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(var(--cb-rgb), 0.28) 50%, transparent 62%); transform: translateX(-140%); transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .sw-corner-btn:hover::after, .sw-corner-btn:focus-visible::after { transform: translateX(140%); } /* The house hover: springy pop toward the viewer, with the depth faked as a stack of hard shadows stepping down-right -- on the PLATE and on the lettering, so the whole thing lifts as one solid object. */ .sw-corner-btn:hover, .sw-corner-btn:focus-visible { /* Lifts further than the standard pop: this plate is big, and on a big element a 3px rise reads as a wobble rather than as height. */ transform: translate(-6px, -6px) scale(1.09); color: rgb(var(--cb-rgb)); border-color: rgba(var(--cb-rgb), 0.9); /* THE GLOW FIREFOX CAN ACTUALLY SEE. The outer drop-shadow ring below is the nice-to-have: this plate carries clip-path AND filter on the SAME element, and per spec filter is applied first and then CLIPPED -- Blink is lenient about it (the halo rendered in Chromium the whole time), Gecko is not, so on Firefox the ring was being sliced off at the notched edge and the owner correctly saw nothing. The documented fix is to split filter and clip onto different elements, but .sw-corner-btn is a bare