/* Layout: a night-time enclosed mall. Center court with a skylight and directory kiosk, a concourse of
   storefronts with neon signs and roll-up grilles, then each store is its own page with its own sign. */
:root {
  color-scheme: dark;
  /* Color */
  --night: #0b0614;        /* page ground, the mall after dark */
  --concourse: #150a2a;    /* raised surfaces */
  --panel: #1d1236;        /* cards and panels */
  --line: #362a5e;         /* hairlines, frames */
  --paper: #f4efff;        /* main text */
  --muted: #a79fcc;        /* secondary text */
  /* Site palette (Nov 14): sun #FBE74D, tangerine #EC642B, hot pink #EA3374, lime #7EFB4D, sky #52B4F9. Logo keeps brand-kit neon. */
  --neon-blue: #52b4f9;
  --neon-pink: #ea3374;
  --neon-yellow: #fbe74d;
  --mall-teal: #7efb4d;    /* palette lime (food court accent) */
  --tangerine: #ec642b;    /* palette orange: ticker, PA, LCD warnings */
  --mall-teal-deep: #167a7c;
  --mauve: #c27ba0;        /* 90s mall mauve */
  --brass: #e0b867;        /* railings and plaques */
  --win-gray: #c0c0c0; --win-dark: #808080; --win-navy: #000080; --win-ink: #000000; --win-white: #ffffff;
  /* Type */
  /* Brand kit v1.0: Quicksand display, Inter body, VT323 pixel. Press Start 2P only inside the arcade. */
  --font-sign: "Quicksand", ui-rounded, system-ui, sans-serif;
  --font-neon: "Quicksand", ui-rounded, system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-lcd: "VT323", ui-monospace, "Courier New", monospace;
  --font-pixel: "VT323", ui-monospace, "Courier New", monospace;
  --font-arcade: "Press Start 2P", "VT323", monospace;
  --font-win: Tahoma, "Microsoft Sans Serif", "MS Sans Serif", Geneva, Verdana, sans-serif;
  /* Glows: subtle, layered */
  --glow-blue: 0 0 2px #d9efff, 0 0 6px var(--neon-blue), 0 0 18px rgb(82 180 249 / .55), 0 0 36px rgb(82 180 249 / .3);
  --glow-pink: 0 0 2px #ffd0e1, 0 0 6px var(--neon-pink), 0 0 18px rgb(234 51 116 / .55), 0 0 36px rgb(234 51 116 / .3);
  --glow-yellow: 0 0 2px #fff, 0 0 6px var(--neon-yellow), 0 0 16px rgba(251, 231, 77, .45);
  --glow-teal: 0 0 2px #fff, 0 0 6px var(--mall-teal), 0 0 16px rgba(126, 251, 77, .55);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--night);
  /* terrazzo: scattered chips over the night floor */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(194, 123, 160, .10) 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(126, 251, 77, .10) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 40% 80%, rgba(224, 184, 103, .08) 0 1px, transparent 1.6px);
  background-size: 37px 41px, 53px 47px, 29px 31px;
  color: var(--paper);
  font: 400 16px/1.6 var(--font-body);
  overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: #000; }
a { color: var(--neon-blue); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--neon-yellow); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--neon-yellow); color: #000; padding: 8px 12px; }
.skip:focus { left: 16px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.eyebrow { font: 400 23px/1 var(--font-pixel); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; margin: 0 0 14px; line-height: 1.6; }
.fine { font-size: 13px; color: var(--muted); }
.center { text-align: center; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- Neon type ---------- */
.neon-pink { color: #ffd0e1; text-shadow: var(--glow-pink); }
.neon-blue { color: #d9efff; text-shadow: var(--glow-blue); }
.neon-yellow { color: #fffbe0; text-shadow: var(--glow-yellow); }
.neon-teal { color: #e8ffdc; text-shadow: var(--glow-teal); }
.wm-90s { color: #ffd0e1; text-shadow: var(--glow-pink); }
.wm-mall { color: #d9efff; text-shadow: var(--glow-blue); }
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .45; }
}

/* ---------- LED ticker ---------- */
.ticker { background: #000; border-bottom: 1px solid #231d44; overflow: hidden; white-space: nowrap; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.ticker-track { display: inline-flex; gap: 28px; padding: 5px 0; font: 400 20px/1 var(--font-lcd); color: #ec642b; text-shadow: 0 0 6px rgba(236, 100, 43, .7); letter-spacing: .08em; animation: ticker 70s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Header ---------- */
.mall-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: rgba(12, 10, 29, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(234, 51, 116, .25), 0 8px 24px rgba(0, 0, 0, .4); }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 10px var(--gutter-r) 10px var(--gutter-l); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.wordmark { display: inline-flex; flex: none; line-height: 0; }
.wordmark img { height: 46px; width: auto; display: block; }
.wordmark.small img { height: 44px; }
.directory-nav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.directory-nav::-webkit-scrollbar { display: none; }
.directory-nav a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; color: var(--paper); text-decoration: none; font: 700 14px/1 var(--font-sign); letter-spacing: .02em; white-space: nowrap; border: 1px solid transparent; }
.directory-nav a:hover { border-color: var(--line); background: var(--concourse); }
.directory-nav a[aria-current="page"] { border-color: var(--neon-pink); box-shadow: inset 0 0 12px rgba(234, 51, 116, .25), 0 0 10px rgba(234, 51, 116, .3); }
.store-no { font: 400 18px/1 var(--font-pixel); color: #000; background: var(--brass); padding: 4px 5px; border-radius: 3px; }
.header-tools { display: flex; gap: 6px; }
.tool-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--concourse); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; font-size: 13px; font-weight: 600; }
.tool-btn:hover { border-color: var(--neon-blue); box-shadow: 0 0 10px rgba(82, 180, 249, .3); }
.tool-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.tool-btn .count { font: 400 16px/1 var(--font-lcd); background: #000; color: var(--neon-yellow); padding: 1px 5px; border-radius: 3px; min-width: 18px; text-align: center; }
.tool-btn.bump { animation: bump .4s; }
@keyframes bump { 50% { transform: scale(1.12); } }
@media (max-width: 1300px) { .tool-btn span:not(.count) { display: none; } }
@media (max-width: 860px) {
  .wordmark img { height: 38px; }
  .header-inner { gap: 10px; }
  .directory-nav { order: 3; flex-basis: 100%; }
  .header-tools { margin-left: auto; }
  .tool-btn span:not(.count) { display: none; }
  .tool-btn b.count { display: inline-block; }
}

/* ---------- PA banner ---------- */
.pa-banner { position: fixed; z-index: 70; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 14px); transform: translateX(-50%); width: min(680px, calc(100% - 32px)); background: #000; border: 2px solid #ec642b; border-radius: 4px; padding: 10px 14px; display: flex; gap: 12px; align-items: center; box-shadow: 0 0 24px rgba(236, 100, 43, .35); }
.pa-banner.show { animation: drop .35s ease-out; }
.pa-label { font: 400 18px/1 var(--font-pixel); color: #000; background: #ec642b; padding: 5px 6px; flex: none; }
.pa-text { font: 400 22px/1.15 var(--font-lcd); color: #ec642b; text-shadow: 0 0 6px rgba(236, 100, 43, .6); }
@keyframes drop { from { transform: translate(-50%, -30px); opacity: 0; } }

/* ---------- Atrium / center court ---------- */
.atrium { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.skylight {
  position: absolute; inset: 0 0 auto; height: 260px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(224, 184, 103, .16) 78px 80px),
    radial-gradient(120% 140% at 50% -20%, rgba(82, 180, 249, .18), transparent 60%),
    linear-gradient(#1a1440, transparent);
  -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent);
}
.skylight::after { content: ""; position: absolute; left: -10%; right: -10%; top: -160px; height: 320px; border-radius: 50%; border: 2px solid rgba(224, 184, 103, .25); box-shadow: 0 0 0 40px rgba(224, 184, 103, .04); }
.atrium-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 56px var(--gutter-r) 36px var(--gutter-l); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: start; }
.atrium-copy { min-width: 0; }
.atrium-sign { margin: 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.sign-small { font: 700 clamp(16px, 2vw, 20px)/1 var(--font-sign); color: var(--brass); letter-spacing: .12em; text-transform: uppercase; }
.sign-big { display: block; line-height: 0; margin-left: -4%; }
.sign-big img { width: min(100%, 490px); height: auto; display: block; }
.atrium-lede { font-size: 18px; max-width: 34em; color: #d9d1f2; margin: 0 0 24px; }
.atrium-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.btn-neon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 2px solid var(--neon-pink); background: rgba(234, 51, 116, .1); color: #ffd0e1; text-decoration: none; font: 700 15px/1 var(--font-sign); letter-spacing: .03em; box-shadow: 0 0 12px rgba(234, 51, 116, .45), inset 0 0 12px rgba(234, 51, 116, .3); text-shadow: 0 0 6px rgba(234, 51, 116, .8); transition: background .15s, box-shadow .15s; }
.btn-neon:hover { background: rgba(234, 51, 116, .22); box-shadow: 0 0 20px rgba(234, 51, 116, .7), inset 0 0 14px rgba(234, 51, 116, .4); }
.btn-neon.wide { width: 100%; }
.btn-ghost { display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 999px; border: 2px solid var(--neon-blue); color: #d9efff; text-decoration: none; font: 700 15px/1 var(--font-sign); background: transparent; box-shadow: 0 0 10px rgba(82, 180, 249, .3); }
.btn-ghost:hover { background: rgba(82, 180, 249, .1); }
.btn-ghost.small { padding: 8px 14px; font-size: 12px; }
.hours-plaque { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 16px; border-radius: 6px; background: linear-gradient(135deg, #3b2e12, #2a210c); border: 1px solid var(--brass); color: #f3e2b8; font-size: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.hours-plaque b { font: 700 13px/1 var(--font-sign); color: var(--brass); letter-spacing: .08em; text-transform: uppercase; }
.lcd-chip { display: inline-block; font: 400 19px/1 var(--font-lcd); background: #000; color: #7efb4d; padding: 4px 8px; border-radius: 3px; letter-spacing: .04em; border: 1px solid #222; }
.lcd-chip[data-open="false"] { color: #ec642b; }
.lcd { font-family: var(--font-lcd); font-size: 1.2em; letter-spacing: .03em; }

.directory-kiosk { min-width: 0; background: linear-gradient(#211b44, #17132f); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: 0 0 0 6px #120f26, 0 0 0 7px var(--line), 0 20px 40px rgba(0, 0, 0, .45); }
.directory-kiosk h2 { margin: 0 0 12px; font: 700 15px/1 var(--font-sign); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); text-align: center; }
.floorplan { width: 100%; height: auto; display: block; }
.fp-floor { fill: #0f0c22; stroke: var(--line); stroke-width: 2; }
.fp-hall { stroke: #2a2350; stroke-width: 22; stroke-linecap: round; fill: none; }
.fp-store { stroke-width: 2; rx: 4; transition: filter .15s; }
.fp-store.s1 { fill: #3a1435; stroke: var(--neon-pink); }
.fp-store.s2 { fill: #10303f; stroke: var(--neon-blue); }
.fp-store.s3 { fill: #2f2b14; stroke: var(--neon-yellow); }
.fp-store.s4 { fill: #0f3236; stroke: var(--mall-teal); }
.floorplan a:hover .fp-store, .floorplan a:focus .fp-store { filter: drop-shadow(0 0 6px currentColor) brightness(1.4); }
.fp-soon { fill: none; stroke: #4a4270; stroke-width: 1.5; stroke-dasharray: 4 3; }
.fp-no { font: 700 16px var(--font-sign); fill: var(--paper); text-anchor: middle; }
.fp-name { font: 400 13px var(--font-lcd); fill: var(--muted); text-anchor: middle; letter-spacing: .08em; }
.fp-name.small { font-size: 11px; }
.fp-fountain { fill: rgba(82, 180, 249, .15); stroke: var(--neon-blue); stroke-width: 1.5; }
.fp-here { fill: #ff2b2b; }
.fp-here-pulse { fill: none; stroke: #ff2b2b; stroke-width: 2; transform-origin: 160px 110px; animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.you-are-here { display: flex; align-items: center; gap: 8px; font: 400 18px/1.2 var(--font-lcd); color: #ffb0b0; margin: 10px 0; }
.you-are-here .dot { width: 10px; height: 10px; border-radius: 50%; background: #ff2b2b; box-shadow: 0 0 8px #ff2b2b; flex: none; }
.dir-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dir-list a { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--paper); font-weight: 600; font-size: 15px; }
.dir-list a:hover { background: rgba(255, 255, 255, .05); }
.dir-list b { grid-row: span 2; font: 400 19px/1 var(--font-pixel); color: #000; background: var(--brass); border-radius: 3px; display: grid; place-items: center; height: 26px; }
.dir-list span { font-weight: 400; font-size: 13px; color: var(--muted); }
.floor { height: 70px; background:
  linear-gradient(var(--night), transparent 60%),
  repeating-conic-gradient(#1a1636 0 25%, #221d45 0 50%) 50% 0 / 56px 56px;
  transform: perspective(300px) rotateX(48deg); transform-origin: top; margin-top: -10px; opacity: .8; }
@media (max-width: 900px) {
  .atrium-inner { grid-template-columns: minmax(0, 1fr); padding-top: 36px; }
}

/* ---------- Section signs ---------- */
.section-sign { font: 700 clamp(22px, 3vw, 30px)/1.1 var(--font-sign); letter-spacing: .02em; margin: 0 0 22px; color: var(--paper); }
.section-sign.small { font-size: clamp(18px, 2.2vw, 22px); }
.band { padding-block: 36px 8px; }
.band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.link-arrow { font-weight: 600; text-decoration: none; }
.link-arrow::after { content: " →"; }

/* ---------- Concourse / storefronts ---------- */
.concourse { padding-block: 44px 20px; }
.storefronts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 18px; }
.storefront { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--paper); background: linear-gradient(#1f1a3e, #15122b); border: 1px solid var(--line); border-radius: 10px 10px 4px 4px; overflow: hidden; padding: 0 0 12px; box-shadow: inset 0 -2px 0 var(--brass); }
.sf-sign { display: block; padding: 16px 10px 14px; text-align: center; font: 700 22px/1 var(--font-sign); letter-spacing: .02em; background: #0b0918; border-bottom: 3px solid #2b2452; }
.sf-sign.neon-pink, .sf-sign.neon-blue, .sf-sign.neon-yellow, .sf-sign.neon-teal { animation: flicker 11s infinite; }
.sf-posters .sf-sign { animation-delay: 2.3s; }
.sf-arcade .sf-sign { animation-delay: 5.1s; }
.sf-food .sf-sign { animation-delay: 7.7s; }
.sign-off { color: #4d466e; text-shadow: none; }
.sf-window { position: relative; display: flex; gap: 8px; align-items: flex-end; justify-content: center; height: 150px; margin: 12px 12px 10px; padding: 10px; border: 3px solid #3a3366; border-radius: 4px; background: linear-gradient(160deg, rgba(255, 255, 255, .08), transparent 40%), radial-gradient(circle at 50% 120%, rgba(234, 51, 116, .2), transparent 70%), #100d24; overflow: hidden; }
.sf-window::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .07) 32%, transparent 38%); pointer-events: none; }
.sf-window::before { content: ""; position: absolute; inset: 0; z-index: 2; background: repeating-linear-gradient(#5d5880 0 3px, #2b2748 3px 9px); box-shadow: 0 3px 0 #000; transform-origin: top; transform: scaleY(.14); transition: transform .55s cubic-bezier(.6, .05, .3, 1); pointer-events: none; }
.storefront:hover .sf-window::before, .storefront:focus-visible .sf-window::before { transform: scaleY(0); }
.mannequin { width: 30%; max-width: 64px; }
.mannequin svg, .window-poster svg { display: block; width: 100%; height: auto; border-radius: 3px; }
.window-poster { width: 30%; max-width: 72px; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.window-poster:nth-child(2) { transform: translateY(-14px) rotate(-3deg); }
.sf-window-food { flex-direction: column; align-items: stretch; justify-content: center; }
.window-menu { background: #0b0918; border: 1px solid #2b2452; border-radius: 4px; padding: 8px; font-size: 13px; line-height: 1.3; }
.window-menu span { display: block; font: 400 14px/1 var(--font-lcd); color: var(--mall-teal); }
.sf-window-arcade { gap: 10px; }
.mini-cab { width: 36px; height: 100px; background: linear-gradient(#3a1960, #1a0c33); border-radius: 6px 6px 2px 2px; position: relative; border: 1px solid #5a2f8f; }
.mini-cab.c2 { background: linear-gradient(#123a5a, #0a1d33); border-color: #2a6a9a; height: 110px; }
.mini-cab.c3 { background: linear-gradient(#5a1238, #2d0a1d); border-color: #9a2a6a; }
.mini-screen { position: absolute; left: 5px; right: 5px; top: 16px; height: 26px; background: #000; border-radius: 2px; box-shadow: 0 0 10px rgba(82, 180, 249, .5); overflow: hidden; }
.mini-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--neon-pink) 0 20%, transparent 20% 40%, var(--neon-blue) 40% 60%, transparent 60% 80%, var(--neon-yellow) 80%); opacity: .7; animation: scr 1.2s steps(4) infinite; }
@keyframes scr { to { transform: translateX(-40%); } }
.sf-paper { flex-direction: column; justify-content: center; align-items: center; background: repeating-linear-gradient(90deg, #d9ceb4 0 40px, #cfc3a6 40px 41px); color: #3b3424; text-align: center; }
.sf-paper span { font: 700 18px/1 var(--font-sign); color: #3b3424; }
.sf-paper small { font-size: 12px; line-height: 1.35; max-width: 18em; margin-top: 6px; }
.sf-unit { padding: 0 14px; font-size: 13px; color: var(--muted); }
.storefront:hover, .storefront:focus-visible { border-color: #5a4f9a; }
.storefront:hover .sf-window, .storefront:focus-visible .sf-window { border-color: var(--brass); }
/* Grille: down at rest on the coming-soon unit only, rolls up on open stores */
.sf-soon .sf-window::before, .sf-soon:hover .sf-window::before { transform: scaleY(.28); }

/* ---------- Rail ---------- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 200px); gap: 14px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
.rail-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--paper); font-size: 14px; line-height: 1.3; }
.rail-art { border-radius: 8px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 5; margin-bottom: 4px; }
.rail-art svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.rail-card span { color: var(--muted); font-size: 13px; }
.rail-card:hover .rail-art { border-color: var(--neon-pink); box-shadow: 0 0 14px rgba(234, 51, 116, .35); }

/* ---------- Store heads ---------- */
.store-head { padding-block: 44px 34px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.store-head::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.store-finds::before { background: radial-gradient(60% 120% at 15% 0%, rgba(234, 51, 116, .25), transparent 70%); }
.store-posters::before { background: radial-gradient(60% 120% at 15% 0%, rgba(82, 180, 249, .22), transparent 70%); }
.store-arcade::before { background: radial-gradient(60% 120% at 15% 0%, rgba(251, 231, 77, .16), transparent 70%); }
.store-food::before { background: radial-gradient(60% 120% at 15% 0%, rgba(126, 251, 77, .25), transparent 70%); }
.store-head .wrap { position: relative; }
.store-sign { font: 700 clamp(40px, 7vw, 76px)/1 var(--font-sign); margin: 0 0 14px; letter-spacing: .01em; }
.store-lede { max-width: 40em; color: #d9d1f2; font-size: 17px; margin: 0; }
.store-body { padding-block: 28px 56px; }

/* ---------- Radar ---------- */
.radar-panel { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 260px); gap: 22px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 26px; }
.radar { width: 120px; height: 120px; border-radius: 50%; position: relative; overflow: hidden; background: radial-gradient(circle, transparent 0 29%, rgba(126, 251, 77, .35) 29.5% 30.5%, transparent 31% 59%, rgba(126, 251, 77, .35) 59.5% 60.5%, transparent 61%), #05140f; border: 2px solid var(--mall-teal); box-shadow: 0 0 16px rgba(126, 251, 77, .4); }
.radar::before, .radar::after { content: ""; position: absolute; background: rgba(126, 251, 77, .35); }
.radar::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(126, 251, 77, .7), transparent 25%); animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.blip { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #7efb4d; box-shadow: 0 0 8px #7efb4d; animation: blip 3s infinite; }
.blip.b1 { left: 70%; top: 28%; } .blip.b2 { left: 30%; top: 64%; animation-delay: 1.2s; } .blip.b3 { left: 58%; top: 74%; animation-delay: 2.1s; }
@keyframes blip { 0%, 100% { opacity: .15; } 10% { opacity: 1; } }
.radar-copy h2 { margin: 0 0 6px; font: 700 18px/1.1 var(--font-sign); color: var(--mall-teal); }
.radar-copy p { margin: 0 0 8px; font-size: 15px; color: #d9d1f2; }
.sample-flag { background: rgba(251, 231, 77, .08); border-left: 3px solid var(--neon-yellow); padding: 6px 10px; border-radius: 0 4px 4px 0; font-size: 14px !important; }
.radar-stats { margin: 0; display: grid; gap: 10px; }
.radar-stats dt { font: 400 18px/1.2 var(--font-pixel); color: var(--muted); text-transform: uppercase; }
.radar-stats dd { margin: 2px 0 0; font-size: 14px; }
.radar-stats dd.lcd { color: #7efb4d; font-size: 22px; }
@media (max-width: 860px) { .radar-panel { grid-template-columns: 90px minmax(0, 1fr); } .radar { width: 90px; height: 90px; } .radar-stats { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .radar-panel { grid-template-columns: minmax(0, 1fr); } .radar-stats { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Finds controls ---------- */
.finds-controls { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.dept-tabs, .board-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.dept-tabs button, .board-tags button { background: var(--concourse); border: 1px solid var(--line); color: var(--paper); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 14px; }
.dept-tabs button:hover, .board-tags button:hover { border-color: var(--muted); }
.dept-tabs button[aria-pressed="true"] { border-color: var(--neon-pink); background: rgba(234, 51, 116, .14); box-shadow: 0 0 10px rgba(234, 51, 116, .3); }
.board-tags button[aria-pressed="true"] { border-color: var(--mall-teal); background: rgba(126, 251, 77, .16); box-shadow: 0 0 10px rgba(126, 251, 77, .35); }
.board-tags { margin-bottom: 22px; }
.finds-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.search { flex: 1 1 260px; min-width: 0; }
.search input { width: 100%; background: #0b0918; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; font-size: 15px; }
.search input:focus { border-color: var(--neon-blue); outline: none; box-shadow: 0 0 0 3px rgba(82, 180, 249, .2); }
.sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.sort select { background: #0b0918; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; color: var(--paper); }

/* ---------- Finds grid (masonry) ---------- */
.finds-grid, .board-grid { columns: 4 240px; column-gap: 18px; }
.find-card, .pin { break-inside: avoid; margin-bottom: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: block; position: relative; transition: transform .15s, box-shadow .15s, border-color .15s; }
.find-card:hover, .pin:hover { transform: translateY(-3px); border-color: #5a4f9a; box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 0 1px rgba(234, 51, 116, .15); }
.find-art { display: block; }
.find-art svg { display: block; width: 100%; height: auto; }
.find-body { padding: 12px 14px 14px; position: relative; }
.find-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 6px; }
.dept-chip { font: 400 16px/1 var(--font-pixel); text-transform: uppercase; color: var(--neon-pink); letter-spacing: .04em; }
.found { font: 400 16px/1 var(--font-lcd); color: #7efb4d; }
.find-card h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.25; font-weight: 800; }
.find-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.find-tags span { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.find-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.price-tag { position: relative; display: inline-block; font: 400 22px/1 var(--font-lcd); background: var(--neon-yellow); color: #140f2b; padding: 4px 10px 4px 16px; clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); }
.price-tag::before { content: ""; position: absolute; left: 6px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #140f2b; }
.price-tag.big { font-size: 30px; padding: 6px 14px 6px 22px; }
.btn-shop { font-size: 14px; font-weight: 800; text-decoration: none; color: var(--neon-blue); }
.btn-shop:hover { text-shadow: 0 0 8px rgba(82, 180, 249, .7); }
.btn-save { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px 5px 9px; font-size: 13px; font-weight: 600; color: var(--paper); }
.btn-save svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.btn-save:hover { border-color: var(--neon-pink); }
.btn-save[aria-pressed="true"] { border-color: var(--neon-pink); color: #ffd0e1; background: rgba(234, 51, 116, .15); }
.btn-save[aria-pressed="true"] svg { fill: var(--neon-pink); stroke: var(--neon-pink); }
.find-card .btn-save { position: absolute; top: -40px; right: 10px; background: rgba(12, 10, 29, .85); backdrop-filter: blur(4px); }
.empty-state { column-span: all; padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }

/* ---------- Poster Pit ---------- */
.rack { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: start; margin-bottom: 48px; }
.rack-stage { display: flex; align-items: center; gap: 10px; perspective: 1400px; }
.rack-arrow { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--concourse); border: 1px solid var(--line); font-size: 16px; color: var(--neon-blue); }
.rack-arrow:hover { border-color: var(--neon-blue); box-shadow: 0 0 12px rgba(82, 180, 249, .4); }
.rack-frame { position: relative; flex: 1; min-width: 0; max-width: 460px; margin: 0 auto; padding: 14px; background: linear-gradient(#2b2b3a, #18181f); border-radius: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, .6), inset 0 0 0 1px #3e3e52; }
.rack-hinge { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); width: 60%; height: 12px; background: linear-gradient(#8a8a99, #4a4a58); border-radius: 4px 4px 0 0; }
.rack-face { aspect-ratio: 3 / 4; max-width: 100%; background: #000; transform-style: preserve-3d; transform-origin: left center; touch-action: pan-y; }
.rack-face svg { display: block; width: 100%; height: 100%; }
.rack-face.flip-out-l { animation: outL .23s ease-in forwards; }
.rack-face.flip-out-r { animation: outR .23s ease-in forwards; transform-origin: right center; }
.rack-face.flip-in-l { animation: inL .26s ease-out; transform-origin: right center; }
.rack-face.flip-in-r { animation: inR .26s ease-out; }
@keyframes outL { to { transform: rotateY(-88deg); filter: brightness(.4); } }
@keyframes outR { to { transform: rotateY(88deg); filter: brightness(.4); } }
@keyframes inL { from { transform: rotateY(88deg); filter: brightness(.4); } }
@keyframes inR { from { transform: rotateY(-88deg); filter: brightness(.4); } }
.rack-info h2 { font: 700 clamp(28px, 4vw, 40px)/1.05 var(--font-sign); margin: 0 0 6px; }
.rack-line { font: 400 20px/1.2 var(--font-lcd); color: var(--neon-blue); margin: 0 0 12px; }
.rack-info fieldset { border: 0; padding: 0; margin: 18px 0 0; }
.rack-info legend { font: 400 18px/1 var(--font-pixel); text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.opts { display: flex; gap: 8px; flex-wrap: wrap; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-weight: 600; font-size: 14px; background: var(--concourse); }
.opt small { font-weight: 400; color: var(--muted); font-size: 12px; }
.opt input:checked + span { border-color: var(--neon-blue); background: rgba(82, 180, 249, .1); box-shadow: 0 0 10px rgba(82, 180, 249, .3); }
.opt input:focus-visible + span { outline: 2px solid var(--neon-yellow); outline-offset: 2px; }
.opt input[value="blacklight"]:checked + span { border-color: #b66bff; background: rgba(143, 91, 255, .2); box-shadow: 0 0 14px rgba(182, 107, 255, .6); }
.rack-buy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 24px 0 10px; }
.poster-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 16px; }
.thumb { background: none; border: 0; padding: 0; text-align: left; color: var(--paper); font-weight: 600; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.thumb svg { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 3px; border: 2px solid transparent; transition: transform .15s, border-color .15s; }
.thumb:hover svg { transform: translateY(-3px) rotate(-1deg); }
.thumb[aria-current="true"] svg { border-color: var(--neon-blue); box-shadow: 0 0 14px rgba(82, 180, 249, .45); }
@media (max-width: 860px) { .rack { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Arcade ---------- */
.arcade-floor {
  padding-block: 32px 56px;
  /* the arcade carpet: neon confetti on black */
  background-color: #07050f;
  background-image:
    radial-gradient(circle at 12px 14px, rgba(234, 51, 116, .5) 0 3px, transparent 3.5px),
    linear-gradient(35deg, transparent 46%, rgba(82, 180, 249, .45) 46% 54%, transparent 54%),
    radial-gradient(circle at 46px 52px, transparent 0 5px, rgba(251, 231, 77, .45) 5px 6.5px, transparent 7px),
    conic-gradient(from 90deg at 70px 20px, rgba(143, 91, 255, .45) 0 25%, transparent 0);
  background-size: 64px 64px, 48px 48px, 80px 80px, 90px 90px;
}
.arcade-row { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 32px; align-items: start; margin-bottom: 40px; }
.cabinet { background: linear-gradient(90deg, #1a0c33, #2a1252 12%, #2a1252 88%, #1a0c33); border-radius: 14px 14px 6px 6px; padding: 0 22px 18px; box-shadow: 0 30px 60px rgba(0, 0, 0, .7), inset 0 0 0 2px #3d1d70; }
.cab-marquee { margin: 0 -22px; padding: 16px 10px; border-radius: 14px 14px 0 0; background: linear-gradient(#0d0820, #1c0f3a); border-bottom: 4px solid #000; text-align: center; font: 700 clamp(22px, 4vw, 34px)/1 var(--font-sign); display: flex; justify-content: center; gap: .4em; flex-wrap: wrap; }
.cab-marquee span:first-child { color: #ffd0e1; text-shadow: var(--glow-pink); }
.cab-marquee span:last-child { color: #d9efff; text-shadow: var(--glow-blue); }
.cab-bezel { margin-top: 18px; background: #000; padding: 18px; border-radius: 10px; box-shadow: inset 0 0 0 3px #222, inset 0 0 30px rgba(82, 180, 249, .12); position: relative; }
.cab-bezel::after { content: ""; position: absolute; inset: 18px; pointer-events: none; border-radius: 6px; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .22) 2px 3px), radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, .55)); }
#ff-canvas { display: block; width: 100%; height: auto; aspect-ratio: 256 / 224; image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 6px; background: #0d0a22; touch-action: none; }
#ff-canvas:focus-visible { outline: 2px solid var(--neon-yellow); }
.cab-panel { margin: 16px -10px 0; background: linear-gradient(#3a1d6a, #241245); border-radius: 8px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12); }
.cab-stick { width: 56px; height: 56px; border-radius: 50%; background: #111; position: relative; box-shadow: inset 0 0 0 4px #333; flex: none; }
.cab-stick span { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -24px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff7cc8, #c0127a); box-shadow: 0 10px 0 -6px #000, 0 12px 0 -4px #444; }
.cab-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cab-buttons button { width: 52px; height: 52px; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #ff7cc8, #c0127a); color: #fff; font-size: 16px; box-shadow: 0 5px 0 #6a0a44, 0 7px 10px rgba(0, 0, 0, .5); touch-action: none; }
.cab-buttons button.b-blue { background: radial-gradient(circle at 35% 30%, #8af0ff, #0a8aa8); box-shadow: 0 5px 0 #05506a, 0 7px 10px rgba(0, 0, 0, .5); }
.cab-buttons button.b-start { width: auto; border-radius: 8px; padding: 0 12px; height: 34px; align-self: center; font: 400 10px/1 var(--font-arcade); background: linear-gradient(#fbe74d, #c9a800); color: #000; box-shadow: 0 4px 0 #7a6600; }
.cab-buttons button.down, .cab-buttons button:active { transform: translateY(4px); box-shadow: 0 1px 0 #000; }
.cab-coin { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; font: 400 9px/1 var(--font-arcade); color: #ec642b; }
.cab-coin .slot { width: 8px; height: 26px; background: #000; border-radius: 3px; box-shadow: 0 0 0 4px #ec642b, 0 0 14px rgba(236, 100, 43, .7); }
.arcade-side { min-width: 0; background: rgba(12, 10, 29, .88); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.arcade-side h2 { font: 700 15px/1 var(--font-sign); letter-spacing: .06em; margin: 22px 0 12px; color: var(--neon-yellow); }
.how { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 15px; }
.how b { color: var(--neon-blue); }
.score-table { list-style: none; margin: 0 0 18px; padding: 12px; background: #000; border-radius: 6px; font: 400 10px/1 var(--font-arcade); display: grid; gap: 10px; }
.score-table li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; color: var(--paper); }
.score-table li:first-child { color: var(--neon-yellow); }
.cab-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.mini-cabinet { background: linear-gradient(#211245, #140a2c); border-radius: 10px; padding: 0 14px 18px; border: 1px solid #3d1d70; }
.mc-marquee { margin: 0 -14px 14px; padding: 12px; text-align: center; font: 700 15px/1 var(--font-sign); color: #6d6496; background: #0d0820; border-radius: 10px 10px 0 0; }
.mc-screen { aspect-ratio: 4 / 3; background: #050410; border-radius: 6px; display: grid; place-items: center; box-shadow: inset 0 0 20px rgba(0, 0, 0, .9); }
.oom { font: 400 12px/1.5 var(--font-arcade); color: #ec642b; text-align: center; background: #fff7d6; color: #2a2a2a; padding: 10px 14px; transform: rotate(-4deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); display: flex; flex-direction: column; }
.oom small { font: 400 16px/1 var(--font-lcd); color: #555; margin-top: 4px; }
@media (max-width: 960px) { .arcade-row { grid-template-columns: minmax(0, 1fr); } .cabinet { max-width: 600px; } }
@media (max-width: 480px) { .cabinet { padding: 0 12px 14px; } .cab-marquee { margin: 0 -12px; } .cab-bezel { padding: 10px; } .cab-bezel::after { inset: 10px; } .cab-stick { display: none; } .cab-buttons { justify-content: space-between; width: 100%; } }

/* ---------- Food Court board ---------- */
.pin-art { display: block; position: relative; }
.pin-art svg { display: block; width: 100%; height: auto; }
.pin-body { padding: 14px 16px 14px; }
.board-tag { display: inline-block; font: 400 16px/1 var(--font-pixel); text-transform: uppercase; color: var(--mall-teal); margin-bottom: 8px; letter-spacing: .04em; }
.pin h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.25; font-weight: 800; }
.pin p { margin: 0 0 10px; font-size: 15px; color: #d9d1f2; }
.pin-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.meta { font-size: 13px; color: var(--muted); }
.pin-hit { position: absolute; inset: 0; z-index: 1; background: transparent; border: 0; border-radius: 12px; }
.pin-article .btn-save { position: relative; z-index: 2; }
.vhs { overflow: hidden; }
.vhs-play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 2px solid #fff; color: #fff; font-size: 18px; padding-left: 3px; transition: transform .15s; }
.vhs:hover .vhs-play { transform: scale(1.1); background: rgba(234, 51, 116, .6); }
.vhs::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; top: 60%; background: rgba(255, 255, 255, .12); filter: blur(1px); animation: track 4s linear infinite; }
@keyframes track { from { top: -10%; } to { top: 110%; } }
.pin-list { background: #f6f0dc; color: #2a2238; border-color: #d8ceb0; }
.pin-list .pin-body { background: repeating-linear-gradient(transparent 0 27px, rgba(80, 120, 200, .25) 27px 28px); padding-top: 18px; }
.pin-list h3 { color: #2a2238; }
.pin-list .board-tag { color: #b0186e; }
.pin-list ol { margin: 0 0 10px; padding-left: 22px; font-size: 15px; line-height: 28px; }
.pin-list .meta { color: #6b6280; }
.pin-list .btn-save { color: #2a2238; border-color: #c6bb9a; }
.pin-fact { background: linear-gradient(150deg, #2a1052, #120a2a); }
.fact-big { font: 700 58px/1 var(--font-neon) !important; color: #ffd0e1 !important; text-shadow: var(--glow-pink); margin: 4px 0 12px !important; }

/* ---------- Drawers, modal, toast ---------- */
.scrim { position: fixed; inset: 0; background: rgba(5, 4, 14, .7); z-index: 80; backdrop-filter: blur(2px); }
.drawer { position: fixed; z-index: 90; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--concourse); border-left: 1px solid var(--line); padding: calc(20px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) 20px; display: flex; flex-direction: column; box-shadow: -20px 0 40px rgba(0, 0, 0, .5); animation: slide .25s ease-out; }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head h2 { margin: 0; font: 700 22px/1 var(--font-sign); }
.drawer-sub { color: var(--muted); font-size: 14px; margin: 6px 0 12px; }
.drawer-list { list-style: none; margin: 12px 0 0; padding: 0; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.drawer-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.drawer-thumb { width: 56px; height: 70px; overflow: hidden; border-radius: 4px; }
.drawer-thumb svg { display: block; width: 100%; height: 100%; }
.drawer-meta { display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; min-width: 0; }
.drawer-meta span { color: var(--muted); font-size: 13px; }
.drawer-meta .lcd { color: var(--neon-yellow); font-size: 18px; }
.drawer-empty { color: var(--muted); padding: 20px 0; }
.btn-tiny { background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; font-size: 13px; color: var(--paper); }
.btn-tiny:hover { border-color: var(--neon-pink); }
.receipt { border-top: 2px dashed var(--line); padding-top: 14px; margin-top: 14px; display: grid; gap: 12px; }
.receipt > div { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.receipt .lcd { font-size: 28px; color: var(--neon-yellow); }
.modal { position: fixed; z-index: 90; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(680px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow-y: auto; background: var(--concourse); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.modal-close { position: sticky; top: 0; float: right; z-index: 2; background: var(--concourse); }
.reader-art { margin: -24px -24px 18px; max-height: 220px; overflow: hidden; }
.reader-art svg { display: block; width: 100%; height: auto; }
.reader h2 { font: 700 clamp(24px, 4vw, 34px)/1.1 var(--font-sign); margin: 4px 0 10px; }
.reader-dek { font-size: 19px; color: #d9d1f2; margin: 0 0 8px; }
.reader-by { font: 400 18px/1 var(--font-lcd); color: var(--muted); margin: 0 0 18px; }
.reader p { max-width: 62ch; }
.reader-foot { margin-top: 20px; }
.toast { position: fixed; z-index: 95; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: #000; color: var(--neon-yellow); font: 400 20px/1 var(--font-lcd); padding: 10px 16px; border-radius: 4px; border: 1px solid var(--neon-yellow); box-shadow: 0 0 16px rgba(251, 231, 77, .3); }
.toast.show { animation: pop .25s ease-out; }
@keyframes pop { from { transform: translate(-50%, 10px); opacity: 0; } }

/* ---------- Windows 95 Mouse Properties ---------- */
.win95-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0, 128, 128, .35); padding: 16px; }
.win95-backdrop[hidden] { display: none; }
.win95 { width: min(420px, 100%); background: var(--win-gray); color: var(--win-ink); font: 400 12px/1.4 var(--font-win); border: 2px solid; border-color: var(--win-white) var(--win-ink) var(--win-ink) var(--win-white); box-shadow: inset -1px -1px 0 var(--win-dark), inset 1px 1px 0 #dfdfdf, 6px 6px 0 rgba(0, 0, 0, .35); padding: 3px; }
.win95-title { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(90deg, var(--win-navy), #1084d0); color: var(--win-white); font-weight: 700; padding: 3px 3px 3px 4px; }
.win95-title > span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.win95-title svg { width: 14px; height: 14px; }
.win95-ctrls { display: flex; gap: 2px; }
.win95-x { width: 18px; height: 16px; padding: 0; display: grid; place-items: center; background: var(--win-gray); color: var(--win-ink); font: 700 12px/1 var(--font-win); border: 1px solid; border-color: var(--win-white) var(--win-ink) var(--win-ink) var(--win-white); box-shadow: inset -1px -1px 0 var(--win-dark); }
.win95-body { padding: 10px 8px 8px; }
.win95-tabs { display: flex; gap: 0; position: relative; z-index: 1; padding-left: 2px; }
.win95-tabs button { background: var(--win-gray); color: var(--win-ink); border: 1px solid; border-color: var(--win-white) var(--win-ink) transparent var(--win-white); border-radius: 3px 3px 0 0; padding: 3px 10px; margin-bottom: -1px; font: 400 12px/1.4 var(--font-win); box-shadow: inset -1px 0 0 var(--win-dark); }
.win95-tabs button[aria-selected="true"] { padding: 5px 12px 4px; margin-top: -2px; border-bottom-color: var(--win-gray); position: relative; z-index: 2; }
.win95-panel { border: 1px solid; border-color: var(--win-white) var(--win-ink) var(--win-ink) var(--win-white); box-shadow: inset -1px -1px 0 var(--win-dark); padding: 12px; min-height: 230px; }
.win95-row { display: flex; gap: 12px; align-items: flex-start; }
.win95-group { border: 1px solid var(--win-dark); box-shadow: 1px 1px 0 var(--win-white); padding: 8px 10px 10px; margin: 0; min-width: 0; }
.win95-group legend { padding: 0 3px; }
.win95-group.grow { flex: 1; }
.win95-list { list-style: none; margin: 0; padding: 0; background: var(--win-white); border: 2px solid; border-color: var(--win-dark) var(--win-white) var(--win-white) var(--win-dark); box-shadow: inset 1px 1px 0 var(--win-ink); max-height: 190px; overflow-y: auto; }
.win95-list:focus { outline: none; }
.win95-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 4px; }
.win95-list li:focus { outline: 1px dotted var(--win-ink); outline-offset: -2px; }
.win95-list li[aria-selected="true"] { background: var(--win-navy); color: var(--win-white); }
.win95-list .cur-name { display: flex; flex-direction: column; }
.win95-list small { font-size: 11px; opacity: .75; }
.win95-preview { width: 96px; height: 96px; flex: none; margin-top: 8px; background: #008080; border: 2px solid; border-color: var(--win-dark) var(--win-white) var(--win-white) var(--win-dark); display: grid; place-items: center; }
.win95-preview img { image-rendering: pixelated; }
.win95-check { display: flex; gap: 6px; align-items: center; margin-bottom: 14px; }
.win95-check input { accent-color: var(--win-navy); }
.win95-slider { display: flex; align-items: center; gap: 8px; }
.win95-slider input { flex: 1; accent-color: var(--win-navy); }
.win95-slider input:disabled + span, .win95-slider input:disabled { opacity: .5; }
.win95-note { margin: 10px 0 0; color: #400000; }
.win95-buttons { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.win95-buttons button { min-width: 75px; padding: 4px 8px; background: var(--win-gray); color: var(--win-ink); font: 400 12px/1.4 var(--font-win); border: 1px solid; border-color: var(--win-white) var(--win-ink) var(--win-ink) var(--win-white); box-shadow: inset -1px -1px 0 var(--win-dark), inset 1px 1px 0 #dfdfdf; }
.win95-buttons button:active { border-color: var(--win-ink) var(--win-white) var(--win-white) var(--win-ink); box-shadow: inset 1px 1px 0 var(--win-dark); }
.win95 :focus-visible { outline: 1px dotted var(--win-ink); outline-offset: -4px; }
@media (max-width: 420px) { .win95-row { flex-direction: column; } .win95-preview { align-self: center; } }

/* Pointer trail */
#trail-layer { position: fixed; inset: 0; pointer-events: none; z-index: 200; }
.trail-ghost { position: absolute; left: 0; top: 0; width: 32px; height: 32px; will-change: transform; }

/* ---------- Footer ---------- */
.mall-footer { border-top: 1px solid var(--line); background: #08061a; padding-block: 40px calc(24px + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 28px; }
.mall-footer h2 { font: 400 19px/1 var(--font-pixel); color: var(--paper); text-transform: uppercase; margin: 0 0 12px; letter-spacing: .04em; }
.mall-footer nav a { display: block; color: var(--muted); text-decoration: none; padding: 3px 0; }
.mall-footer nav a:hover { color: var(--neon-blue); }
.hit-counter { display: inline-flex; gap: 2px; margin-bottom: 12px; }
.hit-counter span { font: 400 24px/1 var(--font-lcd); background: #000; color: #7efb4d; padding: 3px 5px; border: 1px solid #333; border-radius: 2px; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.badge { font: 400 9px/1 var(--font-arcade); padding: 6px 7px; background: linear-gradient(#0040a0, #002060); color: #fff; border: 1px solid #6fa0ff; }
.badge.alt { background: linear-gradient(#a00060, #600030); border-color: #ff8fc8; }
.webring { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.webring b { color: var(--neon-pink); }
.copyright { margin-top: 28px; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}