/* Goopiverse Online. Layout: a lit top bar, a sidebar that keeps your goop beside you (desktop), a content column of glossy
   dark jelly panels, and a tab bar at the bottom on phones. One committed dark world: plum-black, lime light, type colours. */
:root{
  color-scheme:dark;
  --bg:#0d0716; --bg2:#120a1f; --panel:#1a1029; --panel2:#231537; --panel3:#2e1d48;
  --line:rgba(214,190,255,.13); --line2:rgba(214,190,255,.26);
  --ink:#f6f1ff; --mute:#b9aed6; --dim:#8b7daa;
  --lime:#9dff2e; --lime2:#c8ff86; --limeink:#0f1d02; --grape:#a46bff; --plum:#3a1478;
  --gold:#ffd23f; --danger:#ff5a4e; --ok:#7ee787;
  --slick:#3fe0ff; --fizzy:#ff55d8; --chunky:#ff9a3c; --sticky:#b8ff3b; --shadow:#8e7bff;
  --f-display:'Rubik Wet Paint', 'Fredoka', system-ui, sans-serif;
  --f-head:'Fredoka', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-label:'Bebas Neue', 'Fredoka', system-ui, sans-serif;
  --r:18px; --r2:26px;
  --shadow-lg:0 18px 50px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.04) inset;
  --topbar:64px;
}
*{ box-sizing:border-box; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; }
body{ margin:0; min-height:100%; background:var(--bg); color:var(--ink); font:400 16px/1.55 var(--f-body);
  background-image:radial-gradient(1200px 600px at 80% -10%, rgba(164,107,255,.16), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(157,255,46,.07), transparent 60%);
  background-attachment:fixed; }
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:60; background:var(--bg2); }
img{ max-width:100%; }
a{ color:var(--lime); text-decoration-thickness:1px; text-underline-offset:3px; }
button, input, select, textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--lime); outline-offset:2px; border-radius:10px; }
[hidden]{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* the skip link shows itself when a keyboard reaches it */
a.sr:focus, a.sr:focus-visible{ position:fixed !important; left:12px; top:10px; z-index:1000; width:auto; height:auto; min-height:44px; display:inline-flex; align-items:center; padding:0 18px; clip:auto; overflow:visible;
  background:var(--lime); color:var(--limeink, #102000); font:700 15px/1 var(--f-head); border-radius:14px; text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.45); outline:3px solid #fff; outline-offset:2px; }
h1,h2,h3,h4{ font-family:var(--f-head); font-weight:700; line-height:1.15; margin:0; text-wrap:balance; }
p{ margin:0; }
.num{ font-variant-numeric:tabular-nums; }

/* ---------- top bar */
.topbar{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:50; background:linear-gradient(180deg, rgba(18,10,31,.97), rgba(18,10,31,.9)); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); }
.topbar .in{ display:flex; align-items:center; gap:14px; min-height:var(--topbar); padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); max-width:1360px; margin:0 auto; }
.brand{ display:flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--lime); flex:0 0 auto; }
.brand b{ font:400 28px/1 var(--f-display); letter-spacing:.01em; text-shadow:0 3px 0 var(--plum), 0 0 22px rgba(157,255,46,.25); }
.brand i{ font:400 15px/1 var(--f-label); letter-spacing:.14em; color:var(--ink); font-style:normal; opacity:.8; }
.mainnav{ display:flex; gap:2px; margin-left:8px; }
.mainnav a{ color:var(--mute); text-decoration:none; font:600 15px/1 var(--f-head); padding:10px 12px; border-radius:12px; }
.mainnav a:hover{ color:var(--ink); background:var(--panel2); }
.mainnav a[aria-current="page"]{ color:var(--limeink); background:var(--lime); }
.tb-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--panel2); border:1px solid var(--line); font:600 14px/1 var(--f-head); color:var(--ink); white-space:nowrap; }
.chip.ess{ color:var(--gold); text-decoration:none; }
.chip.ess svg{ width:16px; height:16px; }
.chip.live{ color:var(--mute); font-weight:500; }
.chip.live::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(157,255,46,.18); }
.chip.live.off::before{ background:var(--dim); box-shadow:none; }
.iconbtn{ width:40px; height:40px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--mute); cursor:pointer; }
.iconbtn:hover{ color:var(--ink); border-color:var(--line2); }
.iconbtn svg{ width:20px; height:20px; }
.mebtn{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); padding:4px 10px 4px 4px; border-radius:999px; border:1px solid var(--line); background:var(--panel); font:600 14px/1 var(--f-head); }
.mebtn .ava{ width:32px; height:32px; border-radius:50%; background:var(--panel3); overflow:hidden; display:grid; place-items:center; }
.mebtn .ava img{ width:120%; height:120%; object-fit:contain; }

/* ---------- frame */
.frame{ max-width:1360px; margin:0 auto; display:grid; grid-template-columns:280px minmax(0, 1fr); gap:24px; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); padding-block:24px 64px; }
.frame.nosidebar{ grid-template-columns:minmax(0, 1fr); }
.side{ position:sticky; top:calc(var(--topbar) + env(safe-area-inset-top, 0px) + 20px); align-self:start; display:grid; gap:16px; }
main#view{ min-width:0; }
@media (max-width:1060px){ .frame{ grid-template-columns:minmax(0, 1fr); } .side{ display:none; } .mainnav{ display:none; } }

/* ---------- mobile tab bar */
.tabbar{ display:none; }
@media (max-width:1060px){
  .tabbar{ display:grid; grid-template-columns:repeat(var(--tabs, 6), 1fr); position:fixed; left:0; right:0; bottom:0; z-index:55; background:rgba(18,10,31,.97); backdrop-filter:blur(12px); border-top:1px solid var(--line);
    padding:6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
  .tabbar a{ display:grid; justify-items:center; gap:2px; color:var(--dim); text-decoration:none; font:600 11px/1.1 var(--f-head); padding:6px 0; border-radius:12px; }
  .tabbar a svg{ width:24px; height:24px; }
  .tabbar a[aria-current="page"]{ color:var(--lime); }
  .frame{ padding-bottom:110px; }
  .tb-right .chip.live, .mebtn span{ display:none; } .mebtn{ padding:4px; } .brand i{ display:none; }
  .brand b{ font-size:24px; }
}

/* ---------- panels */
.panel{ background:linear-gradient(180deg, var(--panel), rgba(26,16,41,.92)); border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--shadow-lg); position:relative; }
.panel.pad{ padding:20px; }
.panel.tight{ padding:14px; }
.panel h3{ font-size:18px; }
.stack{ display:grid; gap:16px; }
.stack.lg{ gap:24px; }
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.row.between{ justify-content:space-between; }
.grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.grid.sm{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap:12px; }
.grid.lg{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.split{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:20px; align-items:start; }
@media (max-width:860px){ .split{ grid-template-columns:minmax(0, 1fr); } }
.kick{ font:400 15px/1 var(--f-label); letter-spacing:.14em; color:var(--mute); text-transform:uppercase; }
.lede{ color:var(--mute); max-width:62ch; }
.muted{ color:var(--mute); }
.dim{ color:var(--dim); }
.small{ font-size:14px; }

/* page title: the drippy display face, used once per page */
.ptitle{ display:grid; gap:6px; margin:4px 0 18px; }
.ptitle h1{ font:400 clamp(34px, 5vw, 52px)/1.02 var(--f-display); color:var(--lime); text-shadow:0 4px 0 var(--plum), 0 0 30px rgba(157,255,46,.18); letter-spacing:.005em; }
.ptitle .crumbs{ font:500 14px/1 var(--f-head); color:var(--dim); }
.ptitle .crumbs a{ color:var(--mute); text-decoration:none; }
.ptitle .crumbs a:hover{ color:var(--lime); }

/* ---------- buttons */
.btn{ --b:var(--panel3); display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px; border-radius:14px; border:1px solid var(--line2); background:var(--b); color:var(--ink);
  font:600 15px/1 var(--f-head); text-decoration:none; cursor:pointer; transition:transform .12s ease, filter .12s ease, background .12s; user-select:none; }
.btn:hover{ filter:brightness(1.12); }
.btn:active{ transform:translateY(1px) scale(.98); }
.btn.primary{ background:linear-gradient(180deg, var(--lime2), var(--lime)); color:var(--limeink); border-color:transparent; box-shadow:0 6px 0 #4e8f12, 0 10px 26px rgba(157,255,46,.25); }
.btn.primary:active{ box-shadow:0 3px 0 #4e8f12; transform:translateY(3px); }
.btn.grape{ background:linear-gradient(180deg, #b98bff, var(--grape)); color:#fff; border-color:transparent; box-shadow:0 6px 0 #5a2fa8; }
.btn.gold{ background:linear-gradient(180deg, #ffe680, var(--gold)); color:#2a1a00; border-color:transparent; box-shadow:0 6px 0 #a8820e; }
.btn.ghost{ background:transparent; }
.btn.danger{ background:transparent; color:#ffb4ae; border-color:rgba(255,90,78,.45); }
.btn.sm{ min-height:36px; padding:7px 12px; font-size:14px; border-radius:12px; }
.btn.lg{ min-height:56px; padding:14px 26px; font-size:18px; border-radius:18px; }
.btn[disabled], .btn.is-off{ opacity:.45; pointer-events:none; filter:grayscale(.4); }
.btn svg{ width:18px; height:18px; flex:0 0 auto; }

/* ---------- forms */
.field{ display:grid; gap:6px; }
.field label{ font:600 14px/1.2 var(--f-head); color:var(--mute); }
.input, select.input, textarea.input{ width:100%; min-height:46px; border-radius:14px; border:1px solid var(--line2); background:var(--bg2); padding:10px 14px; color:var(--ink); font-size:16px; }
textarea.input{ min-height:110px; resize:vertical; line-height:1.5; }
.input:focus{ outline:none; border-color:var(--lime); box-shadow:0 0 0 3px rgba(157,255,46,.18); }
.help{ font-size:13px; color:var(--dim); }
.err{ font-size:14px; color:#ffb4ae; }

/* ---------- goop figure: backdrop, aura, painting, hat */
.goopfig{ position:relative; aspect-ratio:1; width:100%; max-width:100%; isolation:isolate; }
.goopfig .bd{ position:absolute; inset:0; border-radius:inherit; background-size:cover; background-position:center; z-index:-2; }
.goopfig .bd::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 50% 55%, transparent 30%, rgba(13,7,22,.7) 100%); }
.goopfig .floor{ position:absolute; left:18%; right:18%; bottom:7%; height:9%; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent); z-index:-1; }
.goopfig .body{ position:absolute; inset:0; transform-origin:50% 92%; }
.goopfig.idle .body{ animation:wob 3.6s ease-in-out infinite; }
.goopfig .body img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); user-select:none; -webkit-user-drag:none; }
.goopfig .hat{ position:absolute; pointer-events:none; }
.goopfig .hat svg{ width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
@keyframes wob{ 0%,100%{ transform:scale(1, 1); } 50%{ transform:scale(1.025, .975); } }
@keyframes pulse{ 0%,100%{ opacity:.75; transform:scale(.96); } 50%{ opacity:1; transform:scale(1.04); } }
@keyframes flick{ 0%,100%{ opacity:.8; transform:scale(1) translateY(0); } 30%{ opacity:1; transform:scale(1.05, 1.1) translateY(-2%); } 60%{ opacity:.85; transform:scale(.98, 1.04); } }
@keyframes twinkle{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
@keyframes mist{ 0%,100%{ transform:scale(1) rotate(0); } 50%{ transform:scale(1.1) rotate(8deg); } }
@keyframes glitch{ 0%{ filter:hue-rotate(0deg) saturate(1.6); } 25%{ filter:hue-rotate(90deg) saturate(1.8); } 50%{ filter:hue-rotate(200deg) saturate(1.6); } 75%{ filter:hue-rotate(300deg) saturate(2); } }
.goopfig.bounce .body{ animation:bounce .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes bounce{ 0%{ transform:scale(1,1); } 25%{ transform:scale(1.12,.86) translateY(4%); } 55%{ transform:scale(.92,1.1) translateY(-10%); } 100%{ transform:scale(1,1); } }

/* ---------- skins: a texture painted inside the goop's own outline, a rim glow, particles, accessories and an idle motion of its own.
   The picture is the goop's own art: every layer is masked to its outline and blended on top, so faces and eyes stay painted. */
.goopfig{ container-type:inline-size; }
/* a texture layer is a masked, blended window (.sk-l) over an oversized tile sheet (i) that slides by whole tiles with transform:
   moving it costs the GPU a shift, not a repaint, so a page full of skinned goops stays smooth on a phone */
.goopfig .sk-l{ position:absolute; inset:0; pointer-events:none; overflow:hidden; -webkit-mask:var(--art) center/contain no-repeat; mask:var(--art) center/contain no-repeat;
  mix-blend-mode:var(--bm,screen); opacity:var(--op,1); }
.goopfig .sk-l > i{ position:absolute; display:block; inset:calc(var(--ext,100cqw) * -1); background-image:var(--tex); background-size:var(--sz,100cqw) var(--sz,100cqw);
  will-change:transform; animation:skdrift var(--dur,60s) linear infinite; }
.goopfig .sk-l.hue{ animation:skhue 9s linear infinite; }
.goopfig .sk-l.pul{ animation:skpul var(--pd,3.4s) ease-in-out infinite; }
.goopfig .sk-l.sw > i{ position:absolute; display:block; top:0; bottom:0; left:0; width:300%; background:linear-gradient(112deg, transparent 38%, rgba(255,255,255,var(--sa,.7)) 50%, transparent 62%);
  will-change:transform; animation:sksweep var(--dur,5s) ease-in-out infinite; }
.goopfig .sk-l.sp{ background-image:none; background-color:var(--col); animation:sksplit var(--dur,3.2s) steps(1) infinite; }
.goopfig .sk-l.sp.b{ animation-name:sksplitb; }
@keyframes skdrift{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(var(--dx,100cqw), var(--dy,0cqw), 0); } }
@keyframes skhue{ to{ filter:hue-rotate(360deg); } }
@keyframes skpul{ 0%,100%{ opacity:calc(var(--op,1) * .45); } 50%{ opacity:var(--op,1); } }
@keyframes sksweep{ 0%,30%{ transform:translate3d(0,0,0); } 80%,100%{ transform:translate3d(-66.667%,0,0); } }
@keyframes sksplit{ 0%,70%{ transform:translateX(0); } 72%{ transform:translateX(-3.2cqw); } 76%{ transform:translateX(2cqw); } 80%{ transform:translateX(-1.4cqw); } 84%,100%{ transform:translateX(0); } }
@keyframes sksplitb{ 0%,70%{ transform:translateX(0); } 72%{ transform:translateX(3.2cqw); } 76%{ transform:translateX(-2cqw); } 80%{ transform:translateX(1.4cqw); } 84%,100%{ transform:translateX(0); } }
.goopfig .sk-in{ position:absolute; inset:0; transform-origin:50% 92%; }
.goopfig .sk-halo{ position:absolute; inset:3%; border-radius:50%; z-index:-1; pointer-events:none; background:radial-gradient(closest-side, var(--hc), transparent 72%); opacity:.5; animation:pulse 3.4s ease-in-out infinite; }
.goopfig .sk-halo.mist{ filter:blur(5px); opacity:.7; }
.goopfig .sk-fl{ position:absolute; left:14%; right:14%; bottom:5%; height:11%; border-radius:50%; z-index:-1; pointer-events:none; background:radial-gradient(closest-side, var(--hc), transparent 75%); opacity:.55; }

/* idle motion: each skin moves its own way */
.goopfig.idle[data-m="jelly"] .body{ animation:skjelly 2.6s ease-in-out infinite; }
.goopfig.idle[data-m="heavy"] .body{ animation:skheavy 5.4s ease-in-out infinite; }
.goopfig.idle[data-m="float"] .body{ animation:skfloat 4.4s ease-in-out infinite; }
.goopfig.idle[data-m="float"] .floor{ animation:skfloor 4.4s ease-in-out infinite; }
.goopfig.idle[data-m="bob"] .body{ animation:skbob 5s ease-in-out infinite; }
.goopfig.idle[data-m="stutter"] .body{ animation:skstut 3.2s linear infinite; }
.goopfig.idle[data-m="shiver"] .body{ animation:skshiv 4.2s linear infinite; }
.goopfig.idle[data-m="flicker"] .body{ animation:skflick 3.6s linear infinite; }
.goopfig.idle[data-m="pulse"] .body{ animation:skpulse 3.2s ease-in-out infinite; }
.goopfig.idle[data-m="hop"] .body{ animation:skhop 2.2s cubic-bezier(.3,1.4,.5,1) infinite; }
.goopfig.bounce[data-m] .body{ animation:bounce .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes skjelly{ 0%,100%{ transform:scale(1,1); } 16%{ transform:scale(1.07,.92); } 34%{ transform:scale(.95,1.06); } 52%{ transform:scale(1.03,.98); } 70%{ transform:scale(.99,1.015); } }
@keyframes skheavy{ 0%,100%{ transform:scale(1,1); } 50%{ transform:scale(1.04,.955); } }
@keyframes skfloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5cqw); } }
@keyframes skfloor{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.7); opacity:.55; } }
@keyframes skbob{ 0%,100%{ transform:translateY(0) rotate(-1.6deg); } 50%{ transform:translateY(-1.6cqw) rotate(1.6deg); } }
@keyframes skstut{ 0%,84%,100%{ transform:none; } 86%{ transform:translate(2cqw,0) skewX(8deg); } 88%{ transform:translate(-2.4cqw,.6cqw); } 90%{ transform:translate(1.2cqw,-.8cqw) skewX(-6deg); } 92%{ transform:none; } }
@keyframes skshiv{ 0%,88%,100%{ transform:translateX(0); } 90%{ transform:translateX(-.7cqw); } 92%{ transform:translateX(.7cqw); } 94%{ transform:translateX(-.6cqw); } 96%{ transform:translateX(.5cqw); } }
@keyframes skflick{ 0%,100%{ opacity:1; } 30%{ opacity:1; } 31%{ opacity:.78; } 33%{ opacity:1; } 62%{ opacity:1; } 63%{ opacity:.66; } 65%{ opacity:.95; } 67%{ opacity:.8; } 69%{ opacity:1; } }
@keyframes skpulse{ 0%,100%{ transform:scale(1); filter:brightness(1); } 50%{ transform:scale(1.025); filter:brightness(1.16); } }
@keyframes skhop{ 0%,100%{ transform:scale(1.04,.94) translateY(0); } 30%{ transform:scale(.96,1.05) translateY(-7cqw); } 55%{ transform:scale(1,1) translateY(-7cqw); } 80%{ transform:scale(1.06,.92) translateY(0); } }

/* particles: they rise, fall, twinkle or circle from around the goop (positions are fractions of the goop's own outline) */
.goopfig .skfx{ position:absolute; inset:0; pointer-events:none; }
.goopfig .skfx i{ position:absolute; display:block; left:calc((var(--bx0) + (var(--bx1) - var(--bx0)) * var(--x)) * 100%); top:calc((var(--by0) + (var(--by1) - var(--by0)) * var(--y,1)) * 100%);
  width:calc(var(--s,3) * 1cqw); aspect-ratio:1; opacity:0; animation-duration:var(--t,4s); animation-delay:var(--d,0s); animation-iteration-count:infinite; animation-timing-function:linear; }
.goopfig .skfx.ember i{ border-radius:50%; background:radial-gradient(circle, #fff6c0 0, var(--c) 42%, transparent 72%); animation-name:skrise; mix-blend-mode:screen; }
.goopfig .skfx.bubble i{ border-radius:50%; border:1.5px solid var(--c); background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.75), rgba(255,255,255,0) 42%); animation-name:skbub; }
.goopfig .skfx.snow i{ border-radius:50%; background:var(--c); box-shadow:0 0 5px var(--c); animation-name:skfall; }
.goopfig .skfx.glint i{ background:var(--c); clip-path:polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation-name:sktw; animation-timing-function:ease-in-out; filter:drop-shadow(0 0 3px var(--c)); }
.goopfig .skfx.orbit i{ left:calc((var(--bx0) + var(--bx1)) * 50%); top:calc((var(--by0) + var(--by1)) * 50%); margin:calc(var(--s,3) * -.5cqw) 0 0 calc(var(--s,3) * -.5cqw); background:var(--c); clip-path:polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation-name:skorbit; filter:drop-shadow(0 0 3px var(--c)); opacity:1; }
.goopfig .skfx.wisp i{ border-radius:50%; background:radial-gradient(circle, var(--c), transparent 70%); filter:blur(1.5px); animation-name:skwisp; }
.goopfig .skfx.feather i{ width:calc(var(--s,3) * 1cqw); aspect-ratio:1/2.6; border-radius:60% 60% 60% 60% / 70% 70% 30% 30%; background:linear-gradient(180deg, #fff, var(--c)); box-shadow:0 0 4px var(--c); animation-name:skdrop; }
.goopfig .skfx.bit i{ background:var(--c); box-shadow:0 0 4px var(--c); animation-name:skrise; }
.goopfig .skfx.leaf i{ width:calc(var(--s,3) * 1cqw); aspect-ratio:1.6/1; border-radius:0 80% 0 80%; background:linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #5a1a00)); box-shadow:inset 0 0 0 1px rgba(255,230,170,.35); animation-name:skleaf; }
.goopfig .skfx.heart i{ background:var(--c); transform-origin:50% 50%; animation-name:skheart; filter:drop-shadow(0 0 3px var(--c)); }
.goopfig .skfx.heart i{ clip-path:polygon(50% 92%, 18% 66%, 4% 44%, 3% 26%, 12% 10%, 28% 3%, 42% 8%, 50% 18%, 58% 8%, 72% 3%, 88% 10%, 97% 26%, 96% 44%, 82% 66%); }
.goopfig .skfx.burst i{ border-radius:50%; border:2px dotted var(--c); box-shadow:0 0 6px var(--c), inset 0 0 6px var(--c); animation-name:skburst; animation-timing-function:cubic-bezier(.15,.8,.3,1); }
.goopfig .skfx.petal i{ width:calc(var(--s,3) * 1cqw); aspect-ratio:1/1.5; border-radius:50% 50% 50% 50% / 70% 70% 30% 30%; background:radial-gradient(circle at 50% 80%, #fff, var(--c) 70%); animation-name:skdrop; }
.goopfig .skfx.firefly i{ border-radius:50%; background:radial-gradient(circle, #fffde0 0, var(--c) 40%, transparent 72%); mix-blend-mode:screen; animation-name:skfly; animation-timing-function:ease-in-out; }
@keyframes skleaf{ 0%{ transform:translate(0, calc(var(--rise,40) * -.5cqw)) rotate(0deg); opacity:0; } 12%{ opacity:1; } 35%{ transform:translate(var(--sw,5cqw), calc(var(--rise,40) * -.22cqw)) rotate(140deg); } 65%{ transform:translate(calc(var(--sw,5cqw) * -.5), calc(var(--rise,40) * .05cqw)) rotate(250deg); } 100%{ transform:translate(var(--sw,5cqw), calc(var(--rise,40) * .45cqw)) rotate(400deg); opacity:0; } }
@keyframes skheart{ 0%{ transform:translate(0,0) scale(.3); opacity:0; } 15%{ opacity:1; transform:translate(0,-2cqw) scale(1); } 50%{ transform:translate(var(--sw,3cqw), calc(var(--rise,34) * -.5cqw)) scale(.9); } 100%{ transform:translate(calc(var(--sw,3cqw) * -.4), calc(var(--rise,34) * -1cqw)) scale(.6); opacity:0; } }
@keyframes skburst{ 0%,40%{ transform:scale(0); opacity:0; } 45%{ opacity:1; } 100%{ transform:scale(3.2); opacity:0; } }
@keyframes skfly{ 0%,100%{ transform:translate(0,0); opacity:0; } 20%{ opacity:1; } 35%{ opacity:.35; } 50%{ transform:translate(var(--sw,4cqw), calc(var(--rise,20) * -1cqw)); opacity:1; } 70%{ opacity:.2; } 85%{ transform:translate(calc(var(--sw,4cqw) * -.6), calc(var(--rise,20) * -.4cqw)); opacity:.9; } }
@keyframes skrise{ 0%{ transform:translate(0,0) scale(.5); opacity:0; } 14%{ opacity:1; } 100%{ transform:translate(var(--sw,4cqw), calc(var(--rise,34) * -1cqw)) scale(.2); opacity:0; } }
@keyframes skbub{ 0%{ transform:translate(0,0) scale(.4); opacity:0; } 12%{ opacity:.95; } 50%{ transform:translate(var(--sw,3cqw), calc(var(--rise,34) * -.5cqw)) scale(1); } 100%{ transform:translate(calc(var(--sw,3cqw) * -.6), calc(var(--rise,34) * -1cqw)) scale(1.1); opacity:0; } }
@keyframes skfall{ 0%{ transform:translate(0, calc(var(--rise,30) * -.4cqw)); opacity:0; } 14%{ opacity:.95; } 100%{ transform:translate(var(--sw,4cqw), calc(var(--rise,30) * .6cqw)); opacity:0; } }
@keyframes sktw{ 0%,100%{ transform:scale(0) rotate(0); opacity:0; } 50%{ transform:scale(1) rotate(45deg); opacity:1; } }
@keyframes skorbit{ from{ transform:rotate(0deg) translate(var(--r,30cqw)) rotate(0deg) scale(1,.6); } to{ transform:rotate(360deg) translate(var(--r,30cqw)) rotate(-360deg) scale(1,.6); } }
@keyframes skwisp{ 0%{ transform:translate(0,0) scale(.6); opacity:0; } 25%{ opacity:.8; } 100%{ transform:translate(var(--sw,5cqw), calc(var(--rise,40) * -1cqw)) scale(1.9); opacity:0; } }
@keyframes skdrop{ 0%{ transform:translate(0, calc(var(--rise,40) * -.5cqw)) rotate(-20deg); opacity:0; } 15%{ opacity:1; } 55%{ transform:translate(var(--sw,5cqw), calc(var(--rise,40) * .1cqw)) rotate(24deg); } 100%{ transform:translate(calc(var(--sw,5cqw) * -.5), calc(var(--rise,40) * .6cqw)) rotate(-16deg); opacity:0; } }

/* accessories: horns, a halo, wings, a crown of shards and a pumpkin stem, set on each goop's own outline */
.goopfig .at{ position:absolute; pointer-events:none; }
.goopfig .at svg{ display:block; width:100%; height:auto; overflow:visible; }
.goopfig .at-halo{ animation:skhalo 3.6s ease-in-out infinite; filter:drop-shadow(0 0 4px rgba(255,214,90,.9)) drop-shadow(0 0 10px rgba(255,200,60,.6)); }
.goopfig .at-horns{ filter:drop-shadow(0 0 5px rgba(255,60,20,.7)); }
.goopfig .at-wingl{ transform-origin:93% 85%; animation:skwing 3.4s ease-in-out infinite; }
.goopfig .at-wingr{ transform-origin:7% 85%; animation:skwingr 3.4s ease-in-out infinite; }
.goopfig .at-crown{ filter:drop-shadow(0 0 6px rgba(160,80,255,.9)); animation:skhalo 4.6s ease-in-out infinite; }


@keyframes skhalo{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3%); } }
@keyframes skwing{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(-7deg); } }
@keyframes skwingr{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(7deg); } }
@keyframes skshard{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }


/* ---------- skins: the closet and Cinda's Skin Parlour */
.sktiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; }
/* Limited Run: a warm gold panel so the seasonal skin is the first thing in the Parlour */
.sklim{ border-color:rgba(255,200,80,.55); background:linear-gradient(160deg, rgba(255,170,60,.16), rgba(255,90,200,.08) 55%, transparent), var(--panel); box-shadow:0 0 0 1px rgba(255,200,80,.18) inset, 0 10px 30px rgba(255,150,40,.10); }
.sklim h3{ color:#ffd36a; }
.sklim .limchip{ background:rgba(255,200,80,.16); border-color:rgba(255,200,80,.6); color:#ffe39a; font-weight:700; }
.sklim .pchip.lim{ background:#ffcf4a; color:#2a1600; }
.sklim .sksub{ margin:4px 0 0; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }
.skvault summary{ cursor:pointer; color:var(--mute); font-weight:700; padding:6px 0; list-style-position:inside; }
.skvault[open] summary{ margin-bottom:8px; }
.skvault .skt{ filter:saturate(.75); }
.limline{ color:#ffd36a; font-weight:700; }
.skt{ position:relative; display:grid; justify-items:center; gap:2px; padding:6px 6px 8px; border-radius:16px; border:2px solid color-mix(in srgb, var(--fr, #888) 70%, transparent); background:linear-gradient(180deg, rgba(44,25,68,.72), rgba(20,11,33,.86));
  color:var(--ink); font:inherit; cursor:pointer; text-align:center; transition:transform .15s, border-color .15s, box-shadow .15s; }
.skt:hover{ transform:translateY(-2px); border-color:var(--fr, var(--lime)); }
.skt.sel{ border-color:var(--lime); box-shadow:0 0 0 3px rgba(157,255,46,.28), 0 8px 22px rgba(0,0,0,.35); }
.skt .ic{ display:block; width:84px; height:84px; }
.skt .nm{ font:700 13px/1.15 var(--f-head); }
.skt .qty{ position:absolute; top:6px; left:8px; font:700 11px/1 var(--f-head); color:var(--dim); }
.skt .wchip, .skt .pchip{ display:inline-flex; align-items:center; gap:3px; margin-top:2px; padding:2px 7px; border-radius:999px; font:700 11px/1.2 var(--f-head); background:rgba(0,0,0,.4); color:var(--ink); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.skt .wchip{ background:var(--lime); color:var(--limeink); }
.skt .pchip svg{ width:12px; height:12px; }
.skt.locked{ opacity:.7; border-color:var(--line); }
.skt.locked .ic{ display:grid; place-items:center; }
.skq{ font:800 40px/1 var(--f-head); color:var(--dim); }
.sktags{ display:flex; flex-wrap:wrap; gap:6px; }
.chip.on{ border-color:var(--lime); color:var(--lime); }
a.chip{ text-decoration:none; }
@media (min-width:900px){ .skpage > .stack:first-child{ position:sticky; top:84px; align-self:start; } }
button.chip{ cursor:pointer; font:inherit; }
@keyframes skreveal{ 0%{ transform:scale(.55) rotate(-8deg); filter:brightness(3) saturate(0); } 55%{ transform:scale(1.12) rotate(2deg); filter:brightness(1.4); } 100%{ transform:none; filter:none; } }
.goopfig.sk-reveal{ animation:skreveal .85s cubic-bezier(.3,1.5,.5,1) 1; }
/* another tab is playing: this one is covered and paused */
#tabcover{ position:fixed; inset:0; z-index:100000; display:grid; place-items:center; padding:16px; background:rgba(8,4,14,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
#tabcover .tabcover-in{ max-width:420px; text-align:center; background:var(--panel, #1a1029); border:2px solid var(--lime, #9dff2e); border-radius:22px; padding:28px 22px; box-shadow:0 20px 60px rgba(0,0,0,.6); display:grid; gap:12px; justify-items:center; }
#tabcover h2{ margin:0; font-size:1.35rem; color:var(--ink, #f6f1ff); }
#tabcover p{ margin:0; color:var(--mute, #cbc1e6); line-height:1.45; }
#tabcover .tabcover-blob{ width:64px; height:56px; border-radius:50% 50% 46% 46% / 60% 60% 40% 40%; background:radial-gradient(circle at 35% 30%, #e8ffb0, var(--lime, #9dff2e) 45%, #3f8a08); box-shadow:0 6px 0 rgba(0,0,0,.35); animation:tabbob 2.4s ease-in-out infinite; }
@keyframes tabbob{ 50%{ transform:translateY(-6px) scaleY(1.04); } }
html.calm #tabcover .tabcover-blob{ animation:none; }
html.tab-paused body{ overflow:hidden; }
.stage .goopfig.skin{ overflow:visible; }

/* little icon of a skin: a plain goop wearing it, standing still */
.skico{ display:block; width:100%; height:100%; }
.skico .goopfig{ width:100%; }

/* a goop that is standing still (small icons, foes, Animations off) keeps its texture but nothing moves */
.goopfig.still .sk-l, .goopfig.still .sk-l > i{ animation:none; will-change:auto; }
/* a goop scrolled out of sight stops moving until it comes back */
.goopfig.skoff, .goopfig.skoff *{ animation-play-state:paused !important; }
html.sk-many .goopfig.skin:not(.stage .goopfig) .skfx{ display:none; }
html.sk-many .goopfig.skin:not(.stage .goopfig) .sk-l > i, html.sk-many .goopfig.skin:not(.stage .goopfig) .sk-l, html.sk-many .goopfig.skin:not(.stage .goopfig) .at{ animation-play-state:paused; }
.goopfig.still .sk-l.sp, .goopfig.still .sk-l.sw{ display:none; }
.goopfig.still .at{ animation:none; }
.goopfig.still .sk-halo{ animation:none; }

/* type pills and rarity */
.tpill{ display:inline-flex; align-items:center; gap:5px; font:600 12px/1 var(--f-head); letter-spacing:.04em; text-transform:uppercase; padding:5px 9px; border-radius:999px; background:color-mix(in srgb, var(--c) 18%, transparent); color:var(--c); border:1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.tpill::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--c); }
.rar{ font:600 12px/1 var(--f-head); color:var(--c); }

/* ---------- goop card (lists) */
.gcard{ display:grid; gap:8px; padding:12px; border-radius:var(--r); background:radial-gradient(circle at 50% 35%, var(--panel3), var(--panel) 70%); border:1px solid var(--line); text-decoration:none; color:var(--ink); transition:transform .15s, border-color .15s; position:relative; }
a.gcard:hover, button.gcard:hover{ transform:translateY(-3px); border-color:var(--line2); }
.gcard .nm{ font:700 16px/1.2 var(--f-head); }
.gcard .meta{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--mute); }
.gcard.unknown .goopfig img{ filter:brightness(0) saturate(0) opacity(.55) drop-shadow(0 0 0 transparent); }
.gcard.active-ring{ border-color:var(--lime); box-shadow:0 0 0 3px rgba(157,255,46,.15); }
button.gcard{ font:inherit; text-align:left; cursor:pointer; }

/* ---------- needs meters */
.needs{ display:grid; gap:10px; }
.need{ display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:10px; align-items:center; font-size:14px; }
.need .lbl{ color:var(--mute); font:600 13px/1 var(--f-head); }
.need .bar{ height:12px; border-radius:999px; background:var(--bg2); border:1px solid var(--line); overflow:hidden; position:relative; }
.need .bar i{ position:absolute; inset:0 auto 0 0; border-radius:inherit; background:linear-gradient(90deg, var(--c1), var(--c2)); box-shadow:0 0 10px var(--c2); transition:width .6s cubic-bezier(.2,.9,.3,1); }
.need .bar i::after{ content:""; position:absolute; inset:1px 4px auto; height:3px; border-radius:3px; background:rgba(255,255,255,.4); }
.need .val{ font:600 13px/1 var(--f-head); color:var(--ink); min-width:9ch; text-align:right; }
.need.low .val{ color:#ffb4ae; }

/* speech bubble */
.say{ position:relative; background:var(--ink); color:#1a0f2a; border-radius:18px; padding:12px 16px; font:500 16px/1.4 var(--f-head); box-shadow:0 8px 24px rgba(0,0,0,.35); max-width:44ch; }
.say::after{ content:""; position:absolute; left:28px; bottom:-10px; border:10px solid transparent; border-top-color:var(--ink); border-bottom:0; }
.say.pop{ animation:pop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop{ from{ transform:scale(.7); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ---------- items */
.item{ display:grid; gap:6px; justify-items:center; text-align:center; padding:12px 10px 14px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); position:relative; color:var(--ink); }
.item .ic{ width:84px; height:84px; display:grid; place-items:center; }
.item .ic svg, .item .ic img{ width:84px; height:84px; }
.item .nm{ font:600 14px/1.25 var(--f-head); }
.item .pr{ font:700 14px/1 var(--f-head); color:var(--gold); display:inline-flex; gap:4px; align-items:center; }
.item .pr svg{ width:14px; height:14px; }
.pr svg, .chip svg{ width:1em; height:1em; flex:0 0 auto; }
.item .qty{ position:absolute; top:8px; right:8px; font:700 12px/1 var(--f-head); background:var(--panel3); border:1px solid var(--line2); padding:4px 7px; border-radius:999px; }
.item .rar{ font-size:11px; }
button.item{ cursor:pointer; font:inherit; }
button.item:hover{ border-color:var(--line2); transform:translateY(-2px); }
.item.soldout{ opacity:.5; }
.ic-sm{ width:40px; height:40px; display:inline-grid; place-items:center; flex:0 0 auto; }
.ic-sm svg, .ic-sm img{ width:40px; height:40px; }

/* ---------- region hero */
.hero{ position:relative; border-radius:var(--r2); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-lg); min-height:260px; display:grid; align-items:end; isolation:isolate; }
.hero .bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2; transform:scale(1.02); }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(13,7,22,.05) 20%, rgba(13,7,22,.85) 78%, var(--bg)); }
.hero .in{ padding:22px; display:grid; gap:10px; }
.hero h1{ font:400 clamp(36px, 6vw, 64px)/1 var(--f-display); color:var(--lime); text-shadow:0 4px 0 var(--plum), 0 0 30px rgba(0,0,0,.6); }
.hero p{ max-width:62ch; color:var(--ink); text-shadow:0 2px 8px #000; }
.host{ display:flex; align-items:center; gap:10px; }
.host img{ width:52px; height:52px; border-radius:50%; object-fit:cover; background:var(--panel3); border:2px solid var(--line2); }
.host b{ display:block; font:700 15px/1.2 var(--f-head); }
.host span{ font-size:13px; color:var(--mute); }

/* place tiles */
.places{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.place{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:center; padding:14px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); color:var(--ink); text-decoration:none; transition:transform .15s, border-color .15s; }
.place:hover{ transform:translateY(-2px); border-color:var(--line2); }
.place img{ width:64px; height:64px; border-radius:16px; object-fit:cover; background:var(--panel3); }
.place b{ display:block; font:700 16px/1.2 var(--f-head); }
.place span{ font-size:14px; color:var(--mute); }
.place .tag{ display:inline-block; margin-top:4px; font:600 11px/1 var(--f-head); letter-spacing:.06em; text-transform:uppercase; color:var(--limeink); background:var(--lime); padding:4px 7px; border-radius:6px; }
.place .tag.done{ background:var(--panel3); color:var(--dim); }

/* ---------- world map */
.map{ position:relative; border-radius:var(--r2); overflow:hidden; border:1px solid var(--line); background:radial-gradient(ellipse at 50% 50%, #1b1033, #0b0614 75%); box-shadow:var(--shadow-lg); }
.map svg.world{ display:block; width:100%; height:auto; }
.map .pin{ cursor:pointer; }
.map .pin .ring{ transition:transform .2s; transform-box:fill-box; transform-origin:center; }
.map .pin:hover .ring, .map .pin:focus .ring{ transform:scale(1.08); }
.map .pin text{ font:700 15px var(--f-head); fill:var(--ink); paint-order:stroke; stroke:#0d0716; stroke-width:5px; stroke-linejoin:round; }
.map .pin:focus{ outline:none; }
.map .pin:focus-visible .ring{ stroke:var(--lime); stroke-width:5; }
.maplist{ display:none; }
@media (max-width:640px){ .map .pin text{ font-size:22px; stroke-width:7px; } }

/* ---------- landing */
.land{ display:grid; gap:56px; }
.land-hero{ position:relative; border-radius:32px; overflow:hidden; border:1px solid var(--line); min-height:min(78vh, 720px); display:grid; align-items:center; isolation:isolate; box-shadow:var(--shadow-lg); }
.land-hero .bg{ position:absolute; inset:0; background:url('../assets/scenes/kv_canal_dusk.webp') center/cover; z-index:-3; }
.land-hero::before{ content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg, rgba(13,7,22,.94) 0%, rgba(13,7,22,.75) 42%, rgba(13,7,22,.15) 100%), linear-gradient(0deg, var(--bg), transparent 40%); }
.land-hero .in{ padding:clamp(24px, 5vw, 64px); display:grid; gap:20px; max-width:640px; }
.land-hero h1{ font:400 clamp(48px, 8vw, 96px)/.95 var(--f-display); color:var(--lime); text-shadow:0 6px 0 var(--plum), 0 0 40px rgba(157,255,46,.25); }
.land-hero h1 span{ display:block; color:var(--ink); }
.land-hero h1 span:last-child{ color:var(--fizzy); }
.land-hero .lede{ font-size:clamp(17px, 2vw, 20px); color:var(--ink); }
.parade{ position:absolute; right:-2%; bottom:-4%; width:min(58%, 640px); aspect-ratio:1.3; z-index:-1; pointer-events:none; }
.parade .goopfig{ position:absolute; width:46%; }
@media (max-width:760px){ .land-hero{ align-items:start; } .land-hero::before{ background:linear-gradient(180deg, rgba(13,7,22,.9) 0%, rgba(13,7,22,.6) 55%, rgba(13,7,22,.2) 100%); } .parade{ position:relative; right:auto; bottom:auto; width:100%; margin-top:-10px; } .land-hero .in{ padding-bottom:0; } }
.steps{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.step{ padding:22px; border-radius:var(--r2); background:var(--panel); border:1px solid var(--line); display:grid; gap:10px; align-content:start; }
.step .k{ font:400 15px/1 var(--f-label); letter-spacing:.14em; color:var(--lime); }
.step h3{ font-size:22px; }
.locals{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ---------- dashboard */
.welcome{ display:grid; grid-template-columns:minmax(0, 300px) minmax(0, 1fr); gap:24px; align-items:center; padding:22px; }
.welcome .goopfig{ max-width:300px; margin:0 auto; }
@media (max-width:640px){ .welcome{ grid-template-columns:minmax(0,1fr); } .welcome .goopfig{ max-width:230px; } }
.todo{ display:grid; gap:8px; }
.todo a{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 12px; border-radius:14px; background:var(--bg2); border:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:15px; }
.todo a:hover{ border-color:var(--line2); }
.todo a .ck{ width:24px; height:24px; border-radius:8px; border:2px solid var(--line2); display:grid; place-items:center; }
.todo a.done .ck{ background:var(--lime); border-color:var(--lime); color:var(--limeink); }
.todo a.done{ color:var(--dim); }
.todo a .ck svg{ width:16px; height:16px; }
.prog{ height:10px; border-radius:999px; background:var(--bg2); border:1px solid var(--line); overflow:hidden; }
.prog i{ display:block; height:100%; background:linear-gradient(90deg, var(--grape), var(--lime)); border-radius:inherit; }

/* event banner */
.eventbn{ position:relative; overflow:hidden; border-radius:var(--r2); padding:18px 20px; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:16px; align-items:center;
  background:linear-gradient(110deg, #3a1a08 0%, #4a1460 60%, #1d0d33 100%); border:1px solid rgba(255,154,60,.35); box-shadow:0 0 0 1px rgba(255,154,60,.08) inset, var(--shadow-lg); color:var(--ink); text-decoration:none; }
.eventbn img{ width:72px; height:72px; object-fit:contain; filter:drop-shadow(0 0 16px rgba(255,140,30,.6)); }
.eventbn b{ font:400 26px/1 var(--f-display); color:#ffb547; text-shadow:0 3px 0 #3a1478; }
.eventbn .btn{ white-space:nowrap; }
@media (max-width:640px){ .eventbn{ grid-template-columns:auto minmax(0,1fr); } .eventbn .btn{ grid-column:1 / -1; } }

/* ---------- goop page */
.gpage{ display:grid; grid-template-columns:minmax(0, 420px) minmax(0, 1fr); gap:24px; align-items:start; }
@media (max-width:900px){ .gpage{ grid-template-columns:minmax(0, 1fr); } }
.stage{ position:relative; border-radius:30px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-lg); background:radial-gradient(circle at 50% 40%, var(--panel3), var(--bg2) 75%); }
.stage .goopfig{ border-radius:30px; }
.stage .say{ position:absolute; left:16px; right:16px; top:16px; max-width:none; z-index:3; }
.stage .namebar{ position:absolute; left:0; right:0; bottom:0; padding:44px 18px 16px; background:linear-gradient(0deg, rgba(13,7,22,.92), transparent); display:flex; gap:10px; align-items:end; justify-content:space-between; flex-wrap:wrap; }
.stage .namebar h1{ font:400 clamp(30px, 5vw, 42px)/1 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); }
.lvl{ display:grid; gap:6px; }
.lvl .row{ font:600 14px/1 var(--f-head); }
.actions{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.actions .btn{ flex-direction:column; min-height:74px; gap:6px; font-size:14px; padding:10px 6px; }
.actions .btn svg{ width:26px; height:26px; }
@media (max-width:420px){ .actions .btn{ min-height:64px; font-size:13px; } }
.statrow{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.stat{ background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:10px 12px; }
.stat b{ display:block; font:400 30px/1 var(--f-label); color:var(--ink); letter-spacing:.03em; }
.stat span{ font:600 12px/1 var(--f-head); color:var(--mute); text-transform:uppercase; letter-spacing:.06em; }

/* pickers (closet, feed) */
.picker{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); }
.picker .item{ padding:10px 6px; }
.picker .item .ic, .picker .item .ic svg, .picker .item .ic img{ width:60px; height:60px; }
.picker .item.sel{ border-color:var(--lime); box-shadow:0 0 0 3px rgba(157,255,46,.18); }

/* tabs */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.tabs button, .tabs a{ border:1px solid var(--line); background:var(--panel); color:var(--mute); border-radius:999px; padding:8px 14px; font:600 14px/1 var(--f-head); cursor:pointer; text-decoration:none; }
.tabs [aria-selected="true"], .tabs [aria-current="page"]{ background:var(--ink); color:#1a0f2a; border-color:var(--ink); }

/* tables (leaderboards) */
.tablewrap{ overflow-x:auto; }
table.lb{ width:100%; border-collapse:collapse; font-size:15px; }
table.lb th{ text-align:left; font:600 12px/1 var(--f-head); color:var(--dim); text-transform:uppercase; letter-spacing:.06em; padding:8px 10px; border-bottom:1px solid var(--line); }
table.lb td{ padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.lb tr.me td{ background:rgba(157,255,46,.07); }
table.lb .rank{ font:400 22px/1 var(--f-label); color:var(--mute); width:44px; }
table.lb tr:nth-child(1) .rank{ color:var(--gold); }

/* boards */
.thread{ display:grid; gap:4px; padding:14px 16px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); color:var(--ink); text-decoration:none; }
.thread:hover{ border-color:var(--line2); }
.thread b{ font:700 16px/1.3 var(--f-head); }
.thread .meta{ font-size:13px; color:var(--dim); }
.thread.pinned{ border-color:rgba(157,255,46,.35); background:linear-gradient(180deg, rgba(157,255,46,.06), var(--panel)); }
.post{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; padding:14px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); }
.post .av{ width:52px; height:52px; border-radius:16px; background:var(--panel3); overflow:hidden; display:grid; place-items:center; }
.post .av img{ width:115%; height:115%; object-fit:contain; }
.post .av img.face{ width:100%; height:100%; object-fit:cover; }
.post .who{ font:700 15px/1.2 var(--f-head); }
.post .who span{ font-weight:500; color:var(--dim); font-size:13px; margin-left:6px; }
.post .tx{ margin-top:4px; white-space:pre-wrap; overflow-wrap:anywhere; }

/* plaza: other players' goops wandering about */
.plaza{ position:relative; border-radius:var(--r2); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9; max-width:100%; background:url('../assets/scenes/goopville.webp') center/cover; }
@media (max-width:640px){ .plaza{ aspect-ratio:auto; height:360px; } }
.plaza::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,7,22,.25), rgba(13,7,22,.55)); }
.walker{ position:absolute; width:clamp(70px, 12%, 120px); transform:translate(-50%, -100%); transition:left 2.4s ease-in-out, top 2.4s ease-in-out; }
.walker .tag{ position:absolute; left:50%; top:100%; transform:translateX(-50%); white-space:nowrap; font:700 12px/1 var(--f-head); background:rgba(13,7,22,.85); padding:4px 8px; border-radius:999px; border:1px solid var(--line2); }
.walker.me .tag{ background:var(--lime); color:var(--limeink); border-color:transparent; }
.walker .bub{ position:absolute; left:50%; bottom:100%; transform:translateX(-50%); background:var(--ink); color:#1a0f2a; font:600 13px/1.3 var(--f-head); padding:6px 10px; border-radius:12px; white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; animation:pop .3s; }

/* ---------- modal + toast */
.scrim{ position:fixed; inset:0; z-index:90; background:rgba(6,3,12,.72); backdrop-filter:blur(4px); display:grid; place-items:center; padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); animation:fade .18s; }
.modal{ width:min(560px, 100%); max-height:calc(100dvh - 40px); overflow:auto; background:linear-gradient(180deg, var(--panel2), var(--panel)); border:1px solid var(--line2); border-radius:28px; padding:22px; box-shadow:0 30px 80px rgba(0,0,0,.6); animation:rise .28s cubic-bezier(.2,1.2,.4,1); display:grid; gap:16px; }
.modal.wide{ width:min(860px, 100%); }
.modal h2{ font:400 32px/1.05 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); }
.modal .x{ justify-self:end; margin:-8px -8px 0 0; }
@keyframes fade{ from{ opacity:0; } }
@keyframes rise{ from{ transform:translateY(24px) scale(.96); opacity:0; } }
.toasts{ position:fixed; z-index:95; left:50%; transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom, 0px)); display:grid; gap:8px; width:min(440px, calc(100% - 32px)); pointer-events:none; }
@media (max-width:1060px){ .toasts{ bottom:calc(90px + env(safe-area-inset-bottom, 0px)); } }
.toast{ pointer-events:auto; display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; padding:12px 16px; border-radius:16px; background:var(--panel3); border:1px solid var(--line2); box-shadow:0 14px 40px rgba(0,0,0,.5); font:500 15px/1.35 var(--f-head); animation:rise .3s cubic-bezier(.2,1.2,.4,1); }
.toast.good{ border-color:rgba(157,255,46,.5); }
.toast.bad{ border-color:rgba(255,90,78,.5); }
.toast .ic-sm, .toast .ic-sm svg, .toast .ic-sm img{ width:36px; height:36px; }

/* random-event card */
.evcard{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; align-items:center; }
.evcard img{ width:96px; height:96px; border-radius:24px; object-fit:cover; background:var(--panel3); }
.evcard .kick{ color:var(--fizzy); }
@media (max-width:420px){ .evcard{ grid-template-columns:72px minmax(0,1fr); } .evcard img{ width:72px; height:72px; } }

/* hidden goop peeking from an edge */
.peek{ position:fixed; z-index:40; width:78px; height:78px; cursor:pointer; border:0; padding:0; background:none; transition:transform .5s cubic-bezier(.3,1.5,.5,1); }
.peek img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.peek.r{ right:calc(-20px + env(safe-area-inset-right, 0px)); transform:translateX(70px) rotate(-18deg); }
.peek.r.on{ transform:translateX(0) rotate(-18deg); }
.peek.l{ left:calc(-20px + env(safe-area-inset-left, 0px)); transform:translateX(-70px) rotate(18deg); }
.peek.l.on{ transform:translateX(0) rotate(18deg); }

/* wheel + scratch */
.wheelwrap{ position:relative; width:min(420px, 100%); aspect-ratio:1; margin:0 auto; }
.wheelwrap canvas{ width:100%; height:100%; display:block; }
.wheelwrap .ptr{ position:absolute; left:50%; top:-6px; transform:translateX(-50%); width:0; height:0; border:16px solid transparent; border-top:30px solid var(--ink); border-bottom:0; filter:drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.scratch{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; width:min(360px, 100%); margin:0 auto; }
.scratch .cell{ position:relative; aspect-ratio:1; border-radius:18px; overflow:hidden; background:var(--panel3); border:1px solid var(--line2); display:grid; place-items:center; touch-action:none; }
.scratch .cell svg.sym{ width:70%; height:70%; }
.scratch .cell canvas{ position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; }

/* arena */
.arenabox{ position:relative; border-radius:var(--r2); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9; max-width:100%; background:url('../assets/scenes/arena.webp') center/cover; isolation:isolate; }
@media (max-width:640px){ .arenabox{ aspect-ratio:auto; height:380px; } .fighter{ width:46%; bottom:6%; } .hpcard{ width:calc(50% - 18px); } }
.arenabox::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(13,7,22,.35), rgba(13,7,22,.75)); }
.fighter{ position:absolute; bottom:10%; width:min(36%, 280px); }
.fighter.me{ left:6%; }
.fighter.foe{ right:6%; }
.fighter.foe .goopfig .body{ transform:scaleX(-1); }
.fighter.foe .goopfig.idle .body{ animation:wobf 3.6s ease-in-out infinite; }
@keyframes wobf{ 0%,100%{ transform:scaleX(-1) scale(1, 1); } 50%{ transform:scaleX(-1) scale(1.025, .975); } }
.fighter.hit{ animation:shake .4s; }
.fighter.lunge-r{ animation:lunger .45s; }
.fighter.lunge-l{ animation:lungel .45s; }
@keyframes shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-10px); } 40%{ transform:translateX(9px); } 60%{ transform:translateX(-6px); } 80%{ transform:translateX(4px); } }
@keyframes lunger{ 0%,100%{ transform:translateX(0); } 40%{ transform:translateX(18%) scale(1.06); } }
@keyframes lungel{ 0%,100%{ transform:translateX(0); } 40%{ transform:translateX(-18%) scale(1.06); } }
.hpcard{ position:absolute; top:12px; width:min(44%, 300px); background:rgba(13,7,22,.86); border:1px solid var(--line2); border-radius:16px; padding:10px 12px; display:grid; gap:6px; backdrop-filter:blur(6px); }
.hpcard.me{ left:12px; } .hpcard.foe{ right:12px; }
.hpcard b{ font:700 15px/1.1 var(--f-head); }
.hpbar{ height:12px; border-radius:999px; background:var(--bg2); overflow:hidden; border:1px solid var(--line); }
.hpbar i{ display:block; height:100%; background:linear-gradient(90deg, #4fd12a, var(--lime)); transition:width .5s ease; }
.hpbar i.mid{ background:linear-gradient(90deg, #e0a000, var(--gold)); }
.hpbar i.low{ background:linear-gradient(90deg, #c0281e, var(--danger)); }
.chg{ display:flex; gap:4px; }
.chg i{ width:16px; height:6px; border-radius:3px; background:var(--panel3); }
.chg i.on{ background:var(--fizzy); box-shadow:0 0 6px var(--fizzy); }
.dmg{ position:absolute; font:400 44px/1 var(--f-display); color:#fff; text-shadow:0 3px 0 var(--danger), 0 0 14px rgba(0,0,0,.8); pointer-events:none; animation:dmg 1s ease-out forwards; z-index:5; }
.dmg.heal{ text-shadow:0 3px 0 #2f7a10; color:var(--lime2); }
.dmg.crit{ color:var(--gold); }
@keyframes dmg{ 0%{ transform:translateY(0) scale(.6); opacity:0; } 15%{ transform:translateY(-14px) scale(1.15); opacity:1; } 100%{ transform:translateY(-70px) scale(1); opacity:0; } }
.blog{ max-height:150px; overflow:auto; display:grid; gap:4px; font-size:15px; color:var(--mute); padding:12px 14px; background:var(--bg2); border-radius:14px; border:1px solid var(--line); }
.blog p:last-child{ color:var(--ink); font-weight:500; }
.moves{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap:10px; }
.moves .btn{ min-height:58px; flex-direction:column; gap:3px; }
.moves .btn small{ font:500 12px/1.1 var(--f-body); opacity:.8; }

/* arcade game host */
.gamehost{ position:relative; width:100%; aspect-ratio:16/10; border-radius:var(--r2); overflow:hidden; border:1px solid var(--line2); background:#0b0614; box-shadow:var(--shadow-lg); }
@media (max-width:640px){ .gamehost{ aspect-ratio:auto; height:min(76dvh, 760px); } }
.gametile{ display:grid; gap:0; border-radius:var(--r2); overflow:hidden; background:var(--panel); border:1px solid var(--line); text-decoration:none; color:var(--ink); transition:transform .15s; }
.gametile:hover{ transform:translateY(-3px); }
.gametile .art{ aspect-ratio:16/9; position:relative; background-size:cover; background-position:center; display:grid; place-items:center; overflow:hidden; }
.gametile .art::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(13,7,22,.9), transparent 60%); }
.gametile .art img{ position:absolute; height:82%; bottom:4%; z-index:1; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.gametile .art b{ position:absolute; left:16px; bottom:12px; z-index:2; font:400 32px/1 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); }
.gametile .tx{ padding:14px 16px 16px; display:grid; gap:6px; }

/* footer */
.foot{ border-top:1px solid var(--line); color:var(--dim); font-size:14px; }
.foot .in{ max-width:1360px; margin:0 auto; padding:24px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; }
@media (max-width:1060px){ .foot .in{ padding-bottom:120px; } }
.foot a{ color:var(--mute); }

/* evolution flash */
.evo-flash{ position:fixed; inset:0; z-index:99; background:radial-gradient(circle, #fff 0%, rgba(255,255,255,.85) 30%, rgba(157,255,46,.4) 60%, transparent 80%); animation:evoflash 1.6s ease-out forwards; pointer-events:none; }
@keyframes evoflash{ 0%{ opacity:0; } 30%{ opacity:1; } 100%{ opacity:0; } }

/* sidebar bits */
.sidegoop{ display:grid; gap:12px; padding:16px; }
.sidegoop .goopfig{ max-width:200px; margin:-6px auto 0; }
.sidegoop h3{ font:400 26px/1 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); text-align:center; }
.sidelinks{ display:grid; gap:4px; padding:10px; }
.sidelinks a{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; color:var(--mute); text-decoration:none; font:600 14px/1 var(--f-head); }
.sidelinks a:hover{ background:var(--panel2); color:var(--ink); }
.sidelinks a svg{ width:18px; height:18px; }
.sidelinks a .dot{ margin-left:auto; width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime); }

/* empty states */
.empty{ display:grid; gap:10px; justify-items:center; text-align:center; padding:32px 16px; color:var(--mute); }
.empty img{ width:120px; height:120px; object-fit:contain; opacity:.9; }
.empty b{ font:700 18px/1.2 var(--f-head); color:var(--ink); }

/* dex */
.dexfilters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.dexno{ font:400 14px/1 var(--f-label); letter-spacing:.08em; color:var(--dim); }

/* reduced motion: the device setting, and the same for <html class="calm"> (set by core.js when the device asks for it or
   the keeper turns Animations off in Settings). Every reduced-motion rule in the three stylesheets has an html.calm twin. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
html.calm *, html.calm *::before, html.calm *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }