/* =====================================================================================================================
   GAME SKIN: the Goopiverse game's own interface. A blurred painting of the town behind everything (by time of day),
   frosted dark-plum cards, titles in Rubik Wet Paint lime with a purple drop, interface text in heavy Rubik, solid lime
   buttons with a darker lip, purple-rimmed secondary buttons, cards that glow in their goop's type colour.
   ===================================================================================================================== */
:root{
  --f-display:'Rubik Wet Paint', 'Rubik', system-ui, sans-serif;
  --f-head:'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-label:'Rubik', system-ui, sans-serif;
  --bg:#0c0714; --bg2:#120a1f; --panel:rgba(36,20,56,.74); --panel2:rgba(46,27,70,.8); --panel3:#2e1d48;
  --glass:linear-gradient(180deg, rgba(44,25,68,.80), rgba(22,12,36,.88));
  --line:rgba(214,190,255,.14); --line2:rgba(214,190,255,.28);
  --lime:#9dff2e; --lime2:#c8ff86; --limedark:#4e8f12; --grape:#8a3dff; --plum:#3a1478;
}
body{ font:400 16px/1.55 var(--f-body); background:var(--bg); }
.world-bg{ position:fixed; inset:0; z-index:-2; background:var(--bg) center/cover no-repeat; transform:scale(1.06); filter:saturate(1.1); }
.world-bg::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 0%, rgba(12,7,20,.35), rgba(12,7,20,.82) 70%), linear-gradient(180deg, rgba(12,7,20,.2), rgba(12,7,20,.75)); }
.motes{ position:fixed; inset:0; z-index:-1; pointer-events:none; }

/* titles: the game's drippy face */
.goo, .ptitle h1, .hero h1, .modal h2{ font-family:var(--f-display); font-weight:400; color:var(--lime); text-shadow:0 4px 0 var(--plum), 0 0 30px rgba(157,255,46,.18); letter-spacing:.005em; line-height:1.02; }
.goo{ display:inline; }
.goo[data-c="grape"]{ color:#c98bff; } .goo[data-c="fire"]{ color:#ffb547; } .goo[data-c="gold"]{ color:#ffd23f; }
.ptitle h1{ font-size:clamp(36px, 5.4vw, 60px); }
.ptitle .crumbs{ font:700 14px/1 var(--f-head); letter-spacing:.14em; text-transform:uppercase; color:var(--lime); opacity:.85; }
.ptitle .crumbs a{ color:inherit; }
h2, h3{ font-family:var(--f-head); font-weight:800; letter-spacing:0; text-transform:none; }
.panel h3{ font-size:20px; }
.kick{ font:800 14px/1 var(--f-head); letter-spacing:.22em; text-transform:uppercase; color:var(--lime); }

/* the logo */
.brand{ align-items:center; gap:10px; }
.brand img{ height:30px; width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.brand i{ font:800 12px/1 var(--f-head); letter-spacing:.3em; color:var(--lime); font-style:normal; opacity:.9; }
.logo-lockup{ display:grid; justify-items:center; gap:4px; }
.logo-lockup img{ width:min(760px, 92vw); height:auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.6)); }
.logo-lockup span{ font:800 clamp(16px, 2.4vw, 26px)/1 var(--f-head); letter-spacing:.6em; color:#d9b8ff; text-shadow:0 3px 0 var(--plum), 0 0 16px rgba(138,61,255,.6); margin-left:.6em; }

/* top bar and nav */
.topbar{ background:rgba(16,9,27,.78); backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid var(--line); box-shadow:0 8px 30px rgba(0,0,0,.3); }
.mainnav a{ font:700 15px/1 var(--f-head); color:var(--mute); border-radius:14px; padding:10px 13px; }
.mainnav a[aria-current="page"]{ background:var(--lime); color:var(--limeink); box-shadow:0 4px 0 var(--limedark); }

/* frosted cards */
.panel{ background:var(--glass); border:1.5px solid var(--line); border-radius:28px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); }
.modal{ background:linear-gradient(180deg, rgba(48,27,74,.96), rgba(24,13,40,.98)); border:2px solid rgba(157,255,46,.35); border-radius:30px; box-shadow:0 30px 90px rgba(0,0,0,.65); }
.modal h2{ font-size:36px; }

/* buttons: solid lime with a darker lip (primary), purple-rimmed glass (secondary) */
.btn{ border-radius:16px; min-height:48px; padding:12px 20px; font:700 16px/1 var(--f-head); letter-spacing:0; text-transform:none; color:var(--ink);
  background:rgba(30,17,48,.82); border:2.5px solid rgba(138,61,255,.75); box-shadow:0 4px 0 rgba(58,20,120,.9); margin:0; backdrop-filter:blur(8px); }
.btn:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(58,20,120,.9); }
.btn.primary{ background:linear-gradient(180deg, #b8ff5e, var(--lime)); color:var(--limeink); border:0; box-shadow:0 5px 0 var(--limedark), 0 10px 26px rgba(157,255,46,.25); }
.btn.primary:active{ box-shadow:0 2px 0 var(--limedark); }
.btn.grape{ background:linear-gradient(180deg, #a466ff, var(--grape)); color:#fff; border:0; box-shadow:0 5px 0 #4a1a96; }
.btn.gold{ background:linear-gradient(180deg, #ffe680, var(--gold)); color:#2a1a00; border:0; box-shadow:0 5px 0 #a8820e; }
.btn.danger{ border-color:rgba(255,90,78,.7); color:#ffb4ae; box-shadow:0 4px 0 rgba(120,20,12,.8); }
.btn.ghost{ border-color:var(--line2); box-shadow:none; }
.btn.sm{ min-height:38px; padding:8px 14px; font-size:14px; border-radius:12px; border-width:2px; }
.btn.lg{ min-height:60px; padding:16px 30px; font-size:20px; border-radius:20px; }
.btn svg{ width:20px; height:20px; }

/* coin pill */
.coinpill{ display:inline-flex; align-items:center; gap:8px; padding:4px 4px 4px 4px; border-radius:999px; background:rgba(12,7,20,.7); border:1.5px solid var(--line2); color:var(--gold); font:800 16px/1 var(--f-head); text-decoration:none; }
.coinpill .coin{ width:28px; height:28px; display:grid; place-items:center; } .coinpill .coin svg{ width:28px; height:28px; }
.coinpill .plus{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--lime); color:var(--limeink); font:800 20px/1 var(--f-head); text-decoration:none; box-shadow:0 2px 0 var(--limedark); }
.chip{ font:700 14px/1 var(--f-head); background:rgba(12,7,20,.55); border:1.5px solid var(--line); }

/* cards that glow in their type colour, like the game's starter cards */
.gcard, .item{ --fr:var(--line2); background:linear-gradient(180deg, rgba(44,25,68,.78), rgba(20,11,33,.9)); border:2px solid color-mix(in srgb, var(--fr) 55%, transparent); border-radius:26px;
  box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 0 40px color-mix(in srgb, var(--fr) 10%, transparent); backdrop-filter:blur(12px); }
.gcard{ padding:16px; }
.gcard .goopfig{ background:radial-gradient(closest-side at 50% 82%, color-mix(in srgb, var(--fr) 40%, transparent), transparent 70%); border-radius:20px; }
a.gcard:hover, button.gcard:hover{ border-color:var(--fr); transform:translateY(-4px); box-shadow:0 22px 50px rgba(0,0,0,.4), 0 0 0 2px color-mix(in srgb, var(--fr) 40%, transparent), inset 0 0 40px color-mix(in srgb, var(--fr) 16%, transparent); }
.gcard.active-ring{ border:4px solid var(--fizzy); box-shadow:0 0 0 3px rgba(255,255,255,.12), 0 20px 50px rgba(0,0,0,.4); }
.gcard .nm{ font:800 20px/1.1 var(--f-head); }
.gcard.unknown{ --fr:rgba(214,190,255,.2); }
.tpill{ font:800 13px/1 var(--f-head); letter-spacing:0; text-transform:none; padding:6px 11px; border-radius:999px; background:var(--c); color:#12071f; border:0; }
.tpill::before{ display:none; }
.item{ padding:14px 10px 16px; }
.item .nm{ font:700 15px/1.2 var(--f-head); }
.item .rar{ font:800 11px/1 var(--f-head); letter-spacing:.08em; text-transform:uppercase; color:var(--fr); }
.item .pr{ font:800 15px/1 var(--f-head); color:var(--gold); }
.item .qty{ font:800 12px/1 var(--f-head); background:rgba(12,7,20,.8); border:1px solid var(--line2); }

/* meters: thin coloured bars like the game's stat bars */
.need{ grid-template-columns:28px 64px minmax(0,1fr) auto; }
.need .orb{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--c2) 22%, transparent); color:var(--c2); border:1.5px solid color-mix(in srgb, var(--c2) 50%, transparent); }
.need .orb svg{ width:14px; height:14px; }
.need .lbl{ font:700 14px/1 var(--f-head); color:var(--mute); }
.need .bar{ height:10px; background:rgba(0,0,0,.35); border:0; }
.need .bar i{ background:var(--c2); box-shadow:0 0 12px color-mix(in srgb, var(--c2) 60%, transparent); }
.need .bar i::after{ display:none; }
.need .val{ font:600 14px/1 var(--f-head); }
.sidegoop .need{ grid-template-columns:24px minmax(0,1fr); } .sidegoop .need .lbl{ display:none; } .sidegoop .need .orb{ width:22px; height:22px; }
.prog{ height:10px; background:rgba(0,0,0,.35); border:0; } .prog i{ background:var(--lime); box-shadow:0 0 12px rgba(157,255,46,.5); }

/* tabs: a segmented strip like the Goopdex tabs */
.tabs{ background:rgba(12,7,20,.5); border:1.5px solid var(--line); border-radius:18px; padding:5px; display:inline-flex; gap:4px; flex-wrap:wrap; }
.tabs button, .tabs a{ border:0; background:transparent; color:var(--mute); font:700 15px/1 var(--f-head); border-radius:13px; padding:10px 16px; }
.tabs [aria-selected="true"], .tabs [aria-current="page"]{ background:var(--lime); color:var(--limeink); box-shadow:0 3px 0 var(--limedark); }

/* lists, places, todo: rows with a lime edge like the Goopdex list */
.place, .thread, .todo a{ background:linear-gradient(180deg, rgba(44,25,68,.72), rgba(20,11,33,.86)); border:2px solid rgba(157,255,46,.35); border-radius:20px; backdrop-filter:blur(10px); }
.place:hover, .thread:hover, .todo a:hover{ border-color:var(--lime); }
.place b, .thread b, .host b{ font:800 17px/1.2 var(--f-head); }
.place .tag{ font:800 11px/1 var(--f-head); border-radius:999px; }
.todo a{ font-family:var(--f-head); }
.todo a.done{ border-color:var(--line); }
.todo a.done .ck{ background:var(--lime); }
.sidelinks a{ font:700 15px/1 var(--f-head); }
.stat b{ font:800 30px/1 var(--f-head); color:var(--ink); }
.stat span{ font:700 12px/1 var(--f-head); letter-spacing:.08em; }
table.lb th{ font:800 12px/1 var(--f-head); } table.lb .rank{ font:800 20px/1 var(--f-head); }
.input, select.input, textarea.input{ background:rgba(12,7,20,.7); border:2px solid var(--line2); border-radius:16px; }
.field label{ font:700 14px/1.2 var(--f-head); }
.say{ font:600 16px/1.4 var(--f-head); border-radius:20px; }
.toast{ font:600 15px/1.35 var(--f-head); background:rgba(36,20,56,.95); border:1.5px solid rgba(157,255,46,.45); border-radius:18px; backdrop-filter:blur(10px); }
.tabbar{ background:rgba(16,9,27,.88); backdrop-filter:blur(16px); }
.tabbar a{ font:700 11px/1.1 var(--f-head); }
.tabbar a svg{ width:26px; height:26px; }
.tabbar a[aria-current="page"]{ color:var(--lime); }
.eventbn{ border-radius:28px; }
.eventbn b{ font:400 30px/1 var(--f-display); color:#ffb547; text-shadow:0 3px 0 #3a1478; }
.gametile{ border-radius:26px; border:2px solid rgba(157,255,46,.3); }
.gametile .art b{ font:400 34px/1 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); }
.hero{ border-radius:28px; border:1.5px solid var(--line); }
.hero h1{ font-size:clamp(40px, 6vw, 66px); }
.foot{ background:rgba(12,7,20,.6); backdrop-filter:blur(10px); }

/* landing */
.land-hero{ border-radius:34px; border:1.5px solid var(--line); min-height:auto; align-items:start; box-shadow:0 30px 80px rgba(0,0,0,.45); }
.land-hero::before{ background:radial-gradient(80% 70% at 50% 35%, rgba(12,7,20,.35), rgba(12,7,20,.88)), linear-gradient(0deg, rgba(12,7,20,.9), transparent 35%); }
.land-hero .in{ max-width:900px; margin:0 auto; justify-items:center; text-align:center; padding-block:clamp(36px, 6vw, 70px) 10px; }
.land-hero .in .row{ justify-content:center; }
.land-hero .tagline{ font:400 clamp(28px, 4vw, 46px)/1.05 var(--f-display); color:#fff; text-shadow:0 4px 0 var(--plum); }
.land-hero .tagline b{ color:var(--lime); font-weight:400; } .land-hero .tagline i{ color:var(--fizzy); font-style:normal; }
.parade{ position:relative; right:auto; bottom:auto; width:min(900px, 100%); margin:0 auto; aspect-ratio:3.2; }
.parade .goopfig{ width:26%; }
.welcome h2{ font-family:var(--f-display); font-weight:400; }

/* petting: hearts float up from the goop */
.heart{ position:absolute; pointer-events:none; width:30px; height:30px; color:#ff6fd8; animation:heart 1.1s ease-out forwards; z-index:6; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
@keyframes heart{ 0%{ transform:translate(-50%, 0) scale(.4); opacity:0; } 20%{ opacity:1; transform:translate(-50%, -14px) scale(1.1); } 100%{ transform:translate(calc(-50% + var(--dx)), -110px) scale(.8); opacity:0; } }
.stage .goopfig{ cursor:pointer; }

/* ---------- feature cards (home, arcade) */
.featcard{ position:relative; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:16px; padding:16px 20px; min-height:132px; border-radius:22px; overflow:hidden; text-decoration:none; color:var(--ink);
  background:linear-gradient(90deg, rgba(17,7,34,.88) 30%, rgba(17,7,34,.35)), var(--bg) center/cover; border:2px solid rgba(164,107,255,.45); box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .15s, border-color .15s; }
.featcard:hover{ transform:translateY(-2px); border-color:var(--lime); }
.featcard img{ width:104px; height:104px; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.featcard .ft{ font:400 clamp(24px,3vw,32px)/1.05 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); }
.featcard.wide{ min-height:150px; }
.featcard.wide img{ width:128px; height:128px; }
@media (max-width:640px){ .featcard img{ width:76px; height:76px; } .featcard.wide img{ width:88px; height:88px; } }

/* ---------- My House */
.hstage{ position:relative; width:100%; max-width:980px; margin:0 auto; aspect-ratio:16/9; border-radius:22px; overflow:hidden; background:radial-gradient(ellipse at 50% 60%, #2a1745, #0d0716); border:2px solid rgba(164,107,255,.4); box-shadow:0 14px 40px rgba(0,0,0,.45); isolation:isolate; }
.hroom{ position:absolute; inset:4% 4% 2%; width:92%; height:94%; object-fit:contain; z-index:0; filter:drop-shadow(0 12px 18px rgba(0,0,0,.4)); }
.hslot{ position:absolute; width:22%; transform:translate(-50%,-92%); background:none; border:0; padding:0; cursor:pointer; line-height:0; border-radius:14px; }
.hslot > span{ display:grid; place-items:center; width:42px; height:42px; margin:0 auto 0; border-radius:50%; border:2px dashed rgba(200,255,134,.7); color:var(--lime2); font:800 22px/1 var(--f-head); background:rgba(13,7,22,.35); transform:translateY(-6px); transition:transform .15s, background .15s; }
.hslot:hover > span, .hslot:focus-visible > span{ background:rgba(157,255,46,.25); transform:translateY(-10px) scale(1.08); }
.hslot img{ width:100%; height:auto; display:block; filter:drop-shadow(0 6px 5px rgba(0,0,0,.45)); transition:transform .15s; }
.hslot.filled:hover img, .hslot.filled:focus-visible img{ transform:translateY(-4px); }
.hslot.rug{ width:30%; transform:translate(-50%,-55%); }
.hslot:focus-visible{ outline:3px solid var(--lime); outline-offset:2px; }
.hwalker{ position:absolute; width:15%; left:30%; top:56%; animation:hwalk 26s ease-in-out infinite alternate; pointer-events:none; }
.hwalker .hw-in{ display:block; pointer-events:auto; cursor:pointer; border-radius:50%; }
.hwalker .heart{ z-index:80; }
@keyframes hwalk{ 0%{ left:28%; top:58% } 20%{ left:46%; top:70% } 45%{ left:64%; top:60% } 70%{ left:52%; top:50% } 100%{ left:34%; top:66% } }
@media (prefers-reduced-motion:reduce){ .hwalker{ animation:none; } }
html.calm .hwalker{ animation:none; }
.hroomtile .ic{ aspect-ratio:16/10; }
.hroomtile.on{ box-shadow:0 0 0 3px var(--lime), 0 10px 26px rgba(157,255,46,.2); }
@media (max-width:640px){ .hslot > span{ width:30px; height:30px; font-size:18px; } .hwalker{ width:19%; } }

/* ---------- region scenes */
.rstage{ position:relative; width:100%; aspect-ratio:21/9; min-height:300px; border-radius:26px; overflow:hidden; isolation:isolate; border:2px solid rgba(164,107,255,.4); box-shadow:0 18px 50px rgba(0,0,0,.5); background:#0d0716; }
.rstage .rbg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.04); animation:rdrift 40s ease-in-out infinite alternate; }
@keyframes rdrift{ from{ transform:scale(1.04) translateX(-1%) } to{ transform:scale(1.08) translateX(1%) } }
.rstage .rtint{ position:absolute; inset:0; z-index:1; pointer-events:none; transition:background .6s; }
.rstage .rfx{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.rstage.p-dawn .rtint{ background:linear-gradient(180deg, rgba(255,170,120,.28), rgba(255,210,150,.06)); }
.rstage.p-dusk .rtint{ background:linear-gradient(180deg, rgba(255,110,60,.32), rgba(120,40,120,.28)); }
.rstage.p-night .rtint{ background:linear-gradient(180deg, rgba(10,10,60,.62), rgba(20,10,60,.5)); }
.rstage.p-night .rbg{ filter:brightness(.7) saturate(.85); }
.rstage::after{ content:''; position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(0deg, rgba(13,7,22,.78) 0%, rgba(13,7,22,0) 42%), radial-gradient(ellipse at 50% 120%, transparent 55%, rgba(13,7,22,.55)); }
.rstage .rtext{ position:absolute; z-index:6; left:clamp(16px,3vw,34px); right:clamp(16px,3vw,34px); top:clamp(12px,2.4vw,24px); max-width:640px; }
.rstage .rtitle{ margin:2px 0 6px; font:400 clamp(38px,6vw,76px)/.95 var(--f-display); color:var(--lime); text-shadow:0 5px 0 var(--plum), 0 12px 30px rgba(0,0,0,.45); }
.rstage .rmood{ margin:0; font:500 clamp(14px,1.6vw,18px)/1.4 var(--f-body); color:#f3ecff; text-shadow:0 2px 10px rgba(0,0,0,.7); max-width:46ch; }
.rstage .crumbs{ text-shadow:0 2px 8px rgba(0,0,0,.7); }
.rcast{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.rgoop, .rme{ position:absolute; left:var(--x); bottom:5%; width:clamp(74px,11vw,150px); transform:translateX(-50%); pointer-events:auto; background:none; border:0; padding:0; cursor:pointer; animation:rwalk var(--t,18s) ease-in-out var(--dl,0s) infinite alternate; filter:drop-shadow(0 8px 6px rgba(0,0,0,.5)); }
.rme{ width:clamp(90px,13vw,170px); --t:24s; border-radius:50%; }
.rgoop img{ width:100%; display:block; transition:transform .15s; }
.rgoop:hover img, .rgoop:focus-visible img{ transform:scale(1.1) translateY(-4px); }
.rgoop:focus-visible, .rme:focus-visible{ outline:3px solid var(--lime); outline-offset:3px; border-radius:16px; }
.rgoop .rspot{ position:absolute; top:-4px; right:-4px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--lime); color:var(--limeink); font:800 18px/1 var(--f-head); box-shadow:0 3px 0 var(--limedark); animation:rping 2s ease-in-out infinite; }
.rgoop.seen .rspot{ background:rgba(255,255,255,.85); animation:none; }
@keyframes rwalk{ 0%{ transform:translateX(-50%) translateX(-5vw) } 100%{ transform:translateX(-50%) translateX(5vw) } }
@keyframes rping{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.15) } }
.rbubble{ position:absolute; z-index:8; left:50%; bottom:clamp(110px,20%,190px); transform:translateX(-50%); max-width:min(86%,420px); padding:10px 16px; border-radius:18px; background:#fff; color:#170a2c; font:600 15px/1.3 var(--f-body); border:3px solid #0b0516; box-shadow:0 5px 0 rgba(0,0,0,.3); text-align:center; }
.rumor{ margin:0; padding:12px 14px; border-radius:16px; background:rgba(157,255,46,.08); border:1px dashed rgba(157,255,46,.4); color:var(--ink); }
.lore{ margin:0; padding-left:12px; border-left:3px solid var(--lime); color:var(--mute); }
.item.res .ic{ aspect-ratio:1; }
@media (max-width:640px){ .rstage{ aspect-ratio:4/5; } .rstage .rtext{ max-width:none; } .rgoop{ width:84px; } .rme{ width:100px; } @keyframes rwalk{ 0%{ transform:translateX(-50%) translateX(-9vw) } 100%{ transform:translateX(-50%) translateX(9vw) } } }
@media (prefers-reduced-motion:reduce){ .rstage .rbg, .rgoop, .rme, .rgoop .rspot{ animation:none; } }
html.calm .rstage .rbg, html.calm .rgoop, html.calm .rme, html.calm .rgoop .rspot{ animation:none; }

/* ---------- city life */
.rsigns{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.rsign{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:7px; max-width:30%; padding:5px 12px 5px 5px; border-radius:999px; background:rgba(20,10,36,.82); backdrop-filter:blur(6px); border:2px solid rgba(214,190,255,.5); color:#fff; text-decoration:none; font:700 13px/1.1 var(--f-head); pointer-events:auto; box-shadow:0 6px 18px rgba(0,0,0,.45); transition:transform .15s, border-color .15s, box-shadow .15s; white-space:nowrap; }
.rsign img{ width:30px; height:30px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.rsign span{ overflow:hidden; text-overflow:ellipsis; }
.rsign:hover, .rsign:focus-visible{ transform:translate(-50%,-56%) scale(1.06); border-color:var(--lime); box-shadow:0 10px 26px rgba(157,255,46,.3); z-index:2; }
.rsign.hot{ border-color:var(--lime); }
.rsign .dot{ width:9px; height:9px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(157,255,46,.3); flex:0 0 auto; animation:rping 1.6s ease-in-out infinite; }
.rstage.p-night .rsign, .rstage.p-dusk .rsign{ box-shadow:0 0 22px rgba(255,200,110,.28), 0 6px 18px rgba(0,0,0,.45); }
.rwalker{ position:absolute; bottom:23%; left:0; width:46px; pointer-events:auto; background:none; border:0; padding:0; cursor:pointer; text-align:center; animation:rstreet var(--t,36s) linear var(--dl,0s) infinite alternate; filter:drop-shadow(0 5px 5px rgba(0,0,0,.5)); }
.rwalker img{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.85); display:block; animation:rbob .7s ease-in-out infinite alternate; }
.rwalker span{ display:block; margin-top:2px; font:700 11px/1 var(--f-head); color:#fff; text-shadow:0 1px 4px #000, 0 0 6px #000; }
.rwalker:hover img, .rwalker:focus-visible img{ border-color:var(--lime); }
@keyframes rstreet{ 0%{ left:4% } 100%{ left:90% } }
@keyframes rbob{ from{ transform:translateY(0) } to{ transform:translateY(-4px) } }
.rstage.w-rain .rtint{ background:linear-gradient(180deg, rgba(40,60,100,.38), rgba(20,30,70,.3)); }
.rstage.w-rain .rbg{ filter:saturate(.8) brightness(.85); }
.rpulse{ gap:8px; flex-wrap:wrap; margin-top:-6px; }
@media (max-width:640px){ .rsign{ font-size:11px; padding:3px 9px 3px 3px; gap:5px; max-width:44%; } .rsign img{ width:22px; height:22px; } .rwalker{ bottom:25%; width:36px; } .rwalker img{ width:36px; height:36px; } }
@media (prefers-reduced-motion:reduce){ .rwalker, .rwalker img, .rsign .dot{ animation:none; } }
html.calm .rwalker, html.calm .rwalker img, html.calm .rsign .dot{ animation:none; } 
/* standing still (reduced motion or the motion switch), each resident keeps their own spot on the street */
@media (prefers-reduced-motion:reduce){ .rcast .rwalker:nth-child(6n+1){ left:6%; } .rcast .rwalker:nth-child(6n+2){ left:28%; } .rcast .rwalker:nth-child(6n+3){ left:50%; } .rcast .rwalker:nth-child(6n+4){ left:72%; } .rcast .rwalker:nth-child(6n+5){ left:17%; bottom:36%; } .rcast .rwalker:nth-child(6n){ left:61%; bottom:36%; } }
html.calm .rcast .rwalker:nth-child(6n+1){ left:6%; } html.calm .rcast .rwalker:nth-child(6n+2){ left:28%; } html.calm .rcast .rwalker:nth-child(6n+3){ left:50%; } html.calm .rcast .rwalker:nth-child(6n+4){ left:72%; } html.calm .rcast .rwalker:nth-child(6n+5){ left:17%; bottom:36%; } html.calm .rcast .rwalker:nth-child(6n){ left:61%; bottom:36%; }

/* ---------- explore: walk and find */
.xstage{ position:relative; width:100%; aspect-ratio:16/9; min-height:300px; border-radius:26px; overflow:hidden; isolation:isolate; border:2px solid rgba(164,107,255,.4); box-shadow:0 18px 50px rgba(0,0,0,.5); background:#0d0716; cursor:crosshair; user-select:none; touch-action:manipulation; }
.xbg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.xshade{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(13,7,22,.35) 0%, rgba(13,7,22,0) 30%, rgba(13,7,22,0) 48%, rgba(13,7,22,.35) 100%); pointer-events:none; }
.xwalk{ position:absolute; left:6%; right:6%; top:52%; bottom:8%; z-index:2; border-radius:50%/30%; background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 70%); border:2px dashed rgba(214,190,255,.12); pointer-events:none; }
.xspots, .xtracks{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.xspot{ position:absolute; width:clamp(74px,11vw,120px); transform:translate(-50%,-100%); background:none; border:0; padding:0; cursor:pointer; pointer-events:auto; line-height:0; }
.xspot .xprop{ width:100%; height:auto; display:block; filter:drop-shadow(0 8px 8px rgba(0,0,0,.5)); }
.xspot .xhint{ position:absolute; left:50%; top:-8%; width:34%; transform:translate(-50%,-50%); animation:xshim 2.4s ease-in-out infinite; pointer-events:none; }
.xspot .xhint svg{ width:100%; height:auto; filter:drop-shadow(0 0 6px rgba(255,250,200,.9)); }
.xspot .xrust{ position:absolute; left:50%; bottom:-6%; width:70%; transform:translateX(-50%); opacity:0; pointer-events:none; }
.xspot .xrust svg{ width:100%; height:auto; }
.xspot.close .xrust{ opacity:1; animation:xrustle .5s ease-in-out infinite alternate; }
.xspot.close .xhint{ opacity:0; }
.xspot.close .xprop{ animation:xwig .7s ease-in-out infinite alternate; }
.xspot .xsil{ position:absolute; left:50%; bottom:58%; width:58%; transform:translateX(-50%); pointer-events:none; animation:xfade .5s ease-out both; }
.xspot .xlabel{ position:absolute; left:50%; top:-18%; transform:translateX(-50%); padding:3px 9px; border-radius:999px; background:rgba(20,10,36,.85); border:2px solid var(--lime); color:var(--lime); font:700 12px/1.2 var(--f-head); white-space:nowrap; pointer-events:none; }
.xspot.found{ opacity:.45; }
.xspot.found .xhint, .xspot.found .xrust, .xspot.found .xsil, .xspot.found .xlabel{ display:none; }
.xspot:focus-visible{ outline:3px solid var(--lime); outline-offset:4px; border-radius:12px; }
.xme{ position:absolute; z-index:5; width:clamp(78px,11vw,128px); transform:translate(-50%,-100%); pointer-events:none; transition:none; }
.xme .xshadow{ position:absolute; left:50%; bottom:-4%; width:74%; height:16%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.6), transparent); }
.xme .xbody{ position:relative; transform-origin:50% 90%; }
.xme .goopfig{ aspect-ratio:auto; }
.xme.walking .xbody{ animation:xbob .42s ease-in-out infinite alternate; }
.xme.walking .xshadow{ animation:xshadowpulse .42s ease-in-out infinite alternate; }
.xtrack{ position:absolute; width:22px; height:22px; transform:translate(-50%,-50%); opacity:.7; animation:xfoot 2.4s ease-out forwards; }
.xtrack svg{ width:100%; height:100%; }
.xburst{ position:absolute; width:min(44vw,300px); transform:translate(-50%,-50%); z-index:7; pointer-events:none; animation:xburst 1.2s ease-out forwards; }
.xbanner{ position:absolute; z-index:8; }
.xbar{ margin-top:-4px; }
.xlegend{ display:flex; flex-wrap:wrap; gap:14px 22px; font-size:14px; }
.xlegend i{ display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:6px; vertical-align:-2px; }
.lg-shim{ background:#fffbe0; box-shadow:0 0 8px #fffbe0; }
.lg-rust{ background:transparent; border:3px solid var(--lime); border-radius:3px; }
.lg-sil{ background:#18092c; box-shadow:0 0 0 3px var(--grape); }
.xreveal{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:center; }
.xrevealart{ width:min(220px,60vw); }
@keyframes xshim{ 0%,100%{ transform:translate(-50%,-50%) scale(.8); opacity:.55 } 50%{ transform:translate(-50%,-50%) scale(1.15); opacity:1 } }
@keyframes xrustle{ from{ transform:translateX(-50%) rotate(-3deg) } to{ transform:translateX(-50%) rotate(3deg) } }
@keyframes xwig{ from{ transform:rotate(-1.2deg) } to{ transform:rotate(1.2deg) } }
@keyframes xfade{ from{ opacity:0; transform:translateX(-50%) translateY(10px) } to{ opacity:1; transform:translateX(-50%) translateY(0) } }
@keyframes xbob{ from{ transform:translateY(0) scale(1,1) } to{ transform:translateY(-8%) scale(.96,1.06) } }
@keyframes xshadowpulse{ from{ transform:translateX(-50%) scale(1) } to{ transform:translateX(-50%) scale(.85) } }
@keyframes xfoot{ 0%{ opacity:.75 } 100%{ opacity:0 } }
@keyframes xburst{ 0%{ transform:translate(-50%,-50%) scale(.3); opacity:0 } 20%{ opacity:1 } 100%{ transform:translate(-50%,-50%) scale(1.25); opacity:0 } }
@media (max-width:640px){ .xstage{ aspect-ratio:4/5; } .xlegend{ font-size:12px; } }
@media (prefers-reduced-motion:reduce){ .xspot .xhint, .xspot .xrust, .xspot .xprop, .xme.walking .xbody, .xme.walking .xshadow, .xtrack, .xburst{ animation:none; } .xtrack{ display:none; } }
html.calm .xspot .xhint, html.calm .xspot .xrust, html.calm .xspot .xprop, html.calm .xme.walking .xbody, html.calm .xme.walking .xshadow, html.calm .xtrack, html.calm .xburst{ animation:none; } html.calm .xtrack{ display:none; }