/* Goopiverse Online: the polish layer. Loaded after site.css. Every effect is scoped to a named part of the page, and
   every motion is off under prefers-reduced-motion (and when the player has turned motion off in settings).
   Part 1 is the World map (.wm-*), part 2 the site-wide states (buttons, cards, focus, page change, side nav, headers). */

/* ============================================================ 1. WORLD MAP */
.map.wm-map{ position:relative; overflow:hidden; border:0; border-radius:30px; padding:14px 14px 4px;
  background:linear-gradient(162deg, #f3e6c4 0%, #dcc190 52%, #c09a63 100%);
  box-shadow:inset 0 0 0 2px rgba(92,58,24,.55), inset 0 0 50px rgba(110,62,22,.32), 0 26px 60px rgba(0,0,0,.45); }
.wm-drips{ position:absolute; left:0; right:0; top:0; width:100%; height:26px; z-index:2; pointer-events:none; }
.wm-drips path{ fill:#9dff2e; stroke:#4e8f12; stroke-width:1.5; vector-effect:non-scaling-stroke; filter:drop-shadow(0 2px 2px rgba(40,90,8,.35)); }
.wm-stage{ position:relative; aspect-ratio:1000 / 640; overflow:hidden; border-radius:18px; background:#0b0614; cursor:grab;
  box-shadow:0 0 0 2px rgba(60,35,12,.55), inset 0 0 40px rgba(0,0,0,.6); touch-action:none; user-select:none; -webkit-user-select:none; }
.wm-stage.zoomed{ cursor:move; }
.wm-stage:active{ cursor:grabbing; }
.wm-stage svg.world{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.wm-stage .patch{ opacity:.9; }
.wm-stage .coast{ fill:none; stroke:rgba(157,255,46,.55); stroke-width:3; stroke-dasharray:1 7; stroke-linecap:round; }
.wm-stage .wm-sea-title{ font:400 22px var(--f-display); fill:rgba(214,190,255,.3); letter-spacing:.08em; }
.wm-stage .wm-compass path, .wm-stage .wm-compass circle{ vector-effect:non-scaling-stroke; }
.wm-stage .wm-badge{ stroke:#0d0716; stroke-width:3; }
.wm-stage .wm-trails path{ fill:none; stroke-linecap:round; }
.wm-stage .trail-glow{ stroke:#a46bff; stroke-width:12; opacity:.14; }
.wm-stage .trail-glow.lit{ stroke:#9dff2e; opacity:.2; }
.wm-stage .trail-base{ stroke:rgba(214,190,255,.3); stroke-width:3; stroke-dasharray:2 9; }
.wm-stage .trail{ stroke:#b58cff; stroke-width:4; stroke-dasharray:14 22; }
.wm-stage .trail.lit{ stroke:#9dff2e; }
.wm-stage .trail{ animation:wm-run 2.4s linear infinite; }
@keyframes wm-run{ to{ stroke-dashoffset:-36; } }
.wm-stage .pin{ cursor:pointer; outline:none; }
.wm-stage .pin .halo{ opacity:0; transition:opacity .2s; transform-box:fill-box; transform-origin:center; }
.wm-stage .pin:hover .halo, .wm-stage .pin:focus .halo{ opacity:.24; }
.wm-stage .pin .ring{ stroke-width:4; transition:stroke-width .2s; }
.wm-stage .pin:hover .ring{ stroke-width:6; }
.wm-stage .pin:focus-visible .ring{ stroke:#fff !important; stroke-width:6; }
.wm-stage .pin.st-new .ring{ stroke-dasharray:9 7; }
.wm-stage .pin.st-locked .ring{ stroke-dasharray:3 5; }
.wm-stage .pin.st-locked image{ filter:grayscale(1) brightness(.55); }
.wm-stage .pin.st-new .halo{ animation:wm-pulse 3.2s ease-in-out infinite; }
@keyframes wm-pulse{ 0%,100%{ transform:scale(.96); opacity:.08; } 50%{ transform:scale(1.04); opacity:.22; } }
.wm-stage .you{ animation:wm-bob 2.2s ease-in-out infinite; }
@keyframes wm-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.wm-labels{ position:absolute; inset:0; pointer-events:none; }
.wm-label{ position:absolute; transform:translate(-50%, 0); white-space:nowrap; font:800 13px/1 var(--f-head); color:#fff; padding:5px 9px; border-radius:999px;
  background:rgba(13,7,22,.8); border:1px solid rgba(214,190,255,.3); text-shadow:0 1px 2px #000; }
.wm-label.is-new{ border-color:rgba(255,210,63,.6); }
.wm-label.is-hidden{ opacity:0; visibility:hidden; }
.wm-zoom{ position:absolute; right:24px; top:24px; z-index:4; display:flex; gap:6px; align-items:center; }
.wm-zoom button{ min-width:40px; min-height:40px; padding:0 10px; border-radius:12px; border:1.5px solid rgba(214,190,255,.35); background:rgba(16,9,27,.88); color:#f6f1ff;
  font:800 18px/1 var(--f-head); cursor:pointer; transition:transform .15s, border-color .15s, color .15s; }
.wm-zoom button[data-z="reset"]{ font-size:13px; }
.wm-zoom button:hover{ border-color:var(--lime); color:var(--lime); transform:translateY(-1px); }
.wm-zoom button:active{ transform:translateY(1px) scale(.96); }
.wm-zlevel{ font:700 12px/1 var(--f-head); color:#5a3d1c; min-width:4ch; text-align:right; padding:0 2px; }
.wm-card{ margin-top:10px; padding:14px; border-radius:22px; display:grid; gap:8px; color:var(--ink); background:linear-gradient(180deg, rgba(46,26,72,.97), rgba(20,11,33,.98));
  border:2px solid rgba(157,255,46,.45); box-shadow:0 18px 40px rgba(0,0,0,.45); }
.wm-card-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.wm-st{ font:800 11px/1 var(--f-head); letter-spacing:.1em; text-transform:uppercase; padding:6px 9px; border-radius:999px; background:var(--lime); color:#0f1d02; }
.wm-st.st-new{ background:#ffd23f; color:#2a1a00; }
.wm-st.st-locked{ background:#9b8fb8; color:#120a1f; }
.wm-chost{ display:flex; align-items:center; gap:8px; }
.wm-chost img{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(214,190,255,.3); background:var(--panel3); }
.wm-chost b{ display:block; font:800 14px/1.2 var(--f-head); }
.wm-chost span span{ font-size:12px; color:var(--mute); }
.wm-cname{ font:400 28px/1.05 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); }
.wm-cblurb{ font-size:14px; line-height:1.45; color:var(--mute); }
.wm-go{ justify-self:start; }
.wm-hintline{ font-size:14px; color:var(--mute); text-align:center; padding:4px 0; }
.wm-foot{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; padding:12px 6px 12px; color:#3d2813; font:600 13px/1.3 var(--f-head); }
.wm-legend{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 14px; }
.wm-legend li{ display:inline-flex; align-items:center; gap:6px; }
.wm-ico{ width:22px; height:22px; flex:0 0 auto; overflow:visible; }
.wm-hint{ color:#6b4a22; font-weight:700; font-size:13px; }
.wm-next-sec{ margin-top:20px; }
.wm-next{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.wm-tile{ display:grid; border-radius:20px; overflow:hidden; text-decoration:none; color:var(--ink); background:var(--panel); border:2px solid rgba(157,255,46,.3);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, box-shadow .18s; }
.wm-tile img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.wm-tile-tx{ display:grid; gap:4px; padding:10px 12px 12px; align-content:start; }
.wm-tile b{ font:800 17px/1.2 var(--f-head); }
.wm-tile .small{ color:var(--mute); line-height:1.35; }
.wm-tile:hover{ transform:translateY(-3px); border-color:var(--lime); box-shadow:0 16px 34px rgba(157,255,46,.2); }
.wm-tile:active{ transform:translateY(1px) scale(.985); }
.wm-all summary{ cursor:pointer; list-style:none; }
.wm-all summary::-webkit-details-marker{ display:none; }
.wm-all summary h3::after{ content:"+"; float:right; font:800 22px/1 var(--f-head); color:var(--lime); }
.wm-all[open] summary h3::after{ content:"\2212"; }
.wm-all summary h3{ display:block; }
.wm-all summary:focus-visible{ outline:3px solid var(--lime); outline-offset:4px; border-radius:12px; }
@media (min-width:700px){
  .wm-card{ position:absolute; z-index:6; width:272px; margin:0; }
  .wm-card.wm-idle{ display:none; }
}
@media (max-width:699px){
  .map.wm-map{ padding:10px 10px 2px; border-radius:24px; }
  .wm-stage{ border-radius:14px; }
  .wm-label{ font-size:11.5px; padding:4px 7px; }
  .wm-zoom{ position:static; justify-content:flex-end; padding:8px 0 0; }
  .wm-zoom button{ min-width:36px; min-height:36px; font-size:17px; }
  .wm-foot{ padding:10px 4px 10px; }
  .wm-next{ grid-template-columns:1fr; gap:10px; }
  .wm-tile{ grid-template-columns:116px minmax(0, 1fr); }
  .wm-tile img{ aspect-ratio:auto; height:100%; min-height:82px; }
  .wm-tile-tx{ padding:10px 12px; align-content:center; }
  .wm-tile b{ font-size:16px; }
}
.wm-still .trail, .wm-still .pin .halo, .wm-still .you{ animation:none !important; }
@media (prefers-reduced-motion:reduce){
  .wm-stage .trail, .wm-stage .pin .halo, .wm-stage .you{ animation:none !important; }
}
html.calm .wm-stage .trail, html.calm .wm-stage .pin .halo, html.calm .wm-stage .you{ animation:none !important; }

/* ============================================================ 2. SITE-WIDE POLISH */

/* page change: a short fade and lift when the page itself changes (worldmap.js adds .pop-enter, not on every re-render) */
@media (prefers-reduced-motion:no-preference){
  html:not(.calm) #view.pop-enter{ animation:pop-page .42s cubic-bezier(.2,.8,.2,1) backwards; }
}
@keyframes pop-page{ from{ opacity:0; transform:translateY(10px); } }

/* buttons: a clear lift and a glow on hover, a real press on active */
.btn{ transition:transform .16s cubic-bezier(.2,.8,.2,1), filter .16s, box-shadow .2s, border-color .2s, background-color .2s, color .2s; }
.btn:hover{ transform:translateY(-2px); filter:brightness(1.1); border-color:rgba(164,107,255,.95);
  box-shadow:0 6px 0 rgba(58,20,120,.9), 0 12px 28px rgba(164,107,255,.32); }
.btn:active{ transform:translateY(2px) scale(.98); box-shadow:0 1px 0 rgba(58,20,120,.9); }
.btn.primary:hover{ border-color:transparent; box-shadow:0 6px 0 var(--limedark), 0 14px 30px rgba(157,255,46,.42); }
.btn.primary:active{ box-shadow:0 2px 0 var(--limedark); }
.btn.gold:hover{ box-shadow:0 6px 0 #a8820e, 0 14px 30px rgba(255,210,63,.4); }
.btn.grape:hover{ box-shadow:0 6px 0 #4a1a96, 0 14px 30px rgba(164,107,255,.5); }
.btn.danger:hover{ box-shadow:0 6px 0 rgba(120,20,12,.8), 0 12px 26px rgba(255,90,78,.3); }
.btn[disabled]:hover, .btn.is-off:hover{ transform:none; box-shadow:0 4px 0 rgba(58,20,120,.9); }

/* cards: lift and glow in the card's own colour, press down on click */
a.gcard:hover, button.gcard:hover, button.item:hover, a.item:hover{ box-shadow:0 22px 50px rgba(0,0,0,.4), 0 0 0 2px color-mix(in srgb, var(--fr) 45%, transparent), 0 0 34px color-mix(in srgb, var(--fr) 42%, transparent); }
.gcard:active, button.item:active, .item:active{ transform:translateY(1px) scale(.985); }
.gcard{ transition:transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, box-shadow .22s; }
.item{ transition:transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, box-shadow .22s; }
.place{ transition:transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, box-shadow .22s; }
.place:hover{ box-shadow:0 16px 34px rgba(157,255,46,.16); }
.place:active{ transform:translateY(1px) scale(.985); }
.featcard{ transition:transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .25s; }
.featcard:hover{ box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 34px rgba(164,107,255,.35); }
.featcard:active{ transform:translateY(1px) scale(.99); }
.gametile{ transition:transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .25s; }
.gametile:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(0,0,0,.45), 0 0 36px rgba(157,255,46,.22); }
.gametile:active{ transform:translateY(1px) scale(.99); }
.thread:hover{ box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 22px rgba(157,255,46,.12); }
a.panel:hover{ transform:translateY(-2px); border-color:var(--line2); box-shadow:0 26px 56px rgba(0,0,0,.42), 0 0 28px rgba(164,107,255,.18); }
a.panel{ transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .2s; }

/* focus: a lime ring with a clear gap, visible on the dark backgrounds and on the lime buttons */
:focus-visible{ outline:3px solid var(--lime); outline-offset:3px; }
.btn.primary:focus-visible, .gold:focus-visible{ outline-color:#fff; }
.input:focus-visible, select:focus-visible, textarea:focus-visible{ outline-offset:1px; }

/* side nav: a sticky column that scrolls itself if it runs long, with a marker on the current page */
.side{ max-height:calc(100dvh - var(--topbar) - 44px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line2) transparent; padding-bottom:4px; }
.sidelinks a{ position:relative; transition:background .16s, color .16s, transform .16s; }
.sidelinks a:hover{ transform:translateX(3px); }
.sidelinks a.on{ color:var(--limeink); background:var(--lime); box-shadow:0 4px 0 var(--limedark); }
.sidelinks a.on svg{ color:var(--limeink); }
.sidelinks a.on::before{ content:""; position:absolute; left:-9px; top:50%; width:4px; height:58%; transform:translateY(-50%); border-radius:4px; background:var(--lime); box-shadow:0 0 10px var(--lime); }
.sidelinks a.on .dot{ display:none; }
.mainnav a{ transition:background .16s, color .16s, transform .16s; }
.mainnav a:hover{ transform:translateY(-1px); }

/* page headers: a slow sheen of the three accent colours behind the title */
.ptitle{ position:relative; isolation:isolate; padding-top:4px; }
.ptitle::before{ content:""; position:absolute; z-index:-1; left:0; right:0; top:-8px; bottom:-14px; border-radius:36px; opacity:.9; filter:blur(22px);
  background:linear-gradient(100deg, rgba(164,107,255,.24), rgba(157,255,46,.14) 35%, rgba(255,85,216,.14) 65%, rgba(164,107,255,.22)); background-size:220% 100%; background-position:0% 50%; }
@media (prefers-reduced-motion:no-preference){
  html:not(.calm) .ptitle::before{ animation:pop-sheen 16s ease-in-out infinite alternate; }
}
@keyframes pop-sheen{ from{ background-position:0% 50%; } to{ background-position:100% 50%; } }

/* friendlier empty states: a dashed frame, the goop bobbing gently */
.empty{ border:2px dashed rgba(214,190,255,.26); border-radius:24px; padding:28px 20px; background:rgba(12,7,20,.35); }
.empty img{ filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.empty .btn{ margin-top:6px; }
@media (prefers-reduced-motion:no-preference){ html:not(.calm) .empty img{ animation:pop-bob 3.4s ease-in-out infinite; } }
@keyframes pop-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* phones: a little more air around the content, and touch targets that are easy to hit */
@media (max-width:640px){
  .frame{ gap:16px; padding-top:16px; }
  .panel.pad{ padding:16px; }
  .panel{ border-radius:24px; }
  .stack{ gap:14px; }
  .ptitle{ margin:0 0 14px; }
  .btn{ min-height:46px; }
  .btn.sm{ min-height:44px; }
  .grid{ gap:12px; }
  .places{ gap:12px; }
  .row{ gap:10px; }
}