/* Goopiverse Online: the premium layer. Loaded last. Restraint over noise: clearer text, calmer frames, glow saved for hover and
   rarity, room to breathe, and smooth, quiet motion. Behaviour lives in src/js/premium.js. */

/* ---------- readable text */
:root{ --mute:#cbc1e6; --dim:#a597c6; }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
h1, h2, h3, .ptitle h1{ text-wrap:balance; }
p, .lede, .muted, .say{ text-wrap:pretty; }
.small{ font-size:13.5px; }
.dim, .small.dim{ color:var(--dim); }
::selection{ background:var(--lime); color:var(--limeink); }
html{ scrollbar-color:rgba(214,190,255,.25) transparent; scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:rgba(214,190,255,.22); border-radius:10px; border:3px solid transparent; background-clip:padding-box; }

/* ---------- the header settles into a solid bar once you scroll */
.topbar{ transition:background .25s, box-shadow .25s; }
.topbar.scrolled{ background:rgba(13,7,22,.92); box-shadow:0 10px 30px rgba(0,0,0,.45), 0 1px 0 rgba(214,190,255,.08); }

/* ---------- full width where the sidebar does not help */
body.noside .frame{ grid-template-columns:minmax(0, 1fr); max-width:1240px; }
body.noside .side{ display:none; }

/* ---------- calmer frames: a thin edge, a rarity line on top, glow only on hover */
.item{ border:1px solid rgba(214,190,255,.13) !important; background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 60%), rgba(30,16,48,.78) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.28) !important; overflow:hidden; transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s !important; }
.item::before{ content:''; position:absolute; left:14px; right:14px; top:0; height:3px; border-radius:0 0 4px 4px; background:var(--fr, rgba(214,190,255,.3)); opacity:.9; }
.item:hover, .item:focus-visible{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--fr, #9dff2e) 60%, transparent) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--fr, #9dff2e) 35%, transparent), 0 10px 40px color-mix(in srgb, var(--fr, #9dff2e) 22%, transparent) !important; }
.item.soldout{ filter:grayscale(.6); opacity:.6; }
.gcard{ border-width:1px !important; }
.gcard.unknown{ background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(0,0,0,.18)) !important; }
.gcard.unknown .nm{ font-size:0 !important; }
.gcard.unknown .nm::after{ content:'Not seen yet'; font:600 12.5px/1 var(--f-body); color:var(--dim); letter-spacing:.02em; }
.panel{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 34px rgba(0,0,0,.28); }

/* ---------- buttons press like real buttons */
.btn{ transition:transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .12s, filter .12s, background .15s; }
.btn:active{ transform:translateY(2px) scale(.985); }

/* ---------- images fade in instead of popping */
img.fadein{ opacity:0; transition:opacity .45s ease; }
img.fadein.loaded{ opacity:1; }

/* ---------- Essence glows when it changes */
.coinpill{ transition:box-shadow .3s; }
.coinpill.gain{ animation:cgain .9s ease-out; }
.coinpill.loss{ animation:closs .9s ease-out; }
@keyframes cgain{ 0%{ box-shadow:0 0 0 0 rgba(157,255,46,.0) } 25%{ box-shadow:0 0 0 4px rgba(157,255,46,.35), 0 0 24px rgba(157,255,46,.45) } 100%{ box-shadow:0 0 0 0 rgba(157,255,46,0) } }
@keyframes closs{ 0%{ box-shadow:0 0 0 0 rgba(255,107,122,0) } 25%{ box-shadow:0 0 0 4px rgba(255,107,122,.3) } 100%{ box-shadow:0 0 0 0 rgba(255,107,122,0) } }

/* ---------- toasts: top right, two at a time, out of the way */
.toasts{ top:calc(var(--topbar) + env(safe-area-inset-top, 0px) + 14px) !important; bottom:auto !important; left:auto !important; right:20px !important; transform:none !important;
  width:min(380px, calc(100vw - 32px)); display:grid; gap:10px; pointer-events:none; }
.toast{ position:relative; overflow:hidden; display:grid !important; grid-template-columns:auto minmax(0,1fr) auto !important; align-items:center; gap:12px;
  padding:12px 12px 14px 14px !important; border-radius:16px !important; background:rgba(26,14,42,.94) !important; backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(214,190,255,.16) !important; box-shadow:0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) !important;
  font:600 14.5px/1.35 var(--f-head) !important; opacity:0; transform:translateY(-8px) scale(.98); transition:opacity .24s, transform .24s cubic-bezier(.2,.8,.2,1); }
.toast.in{ opacity:1; transform:none; }
.toast.out{ opacity:0; transform:translateX(16px); }
.toast.good{ border-color:rgba(157,255,46,.35) !important; }
.toast.bad{ border-color:rgba(255,107,122,.4) !important; }
.toast .ic-sm, .toast .ic-sm svg, .toast .ic-sm img{ width:32px !important; height:32px !important; }
.toast .tclose{ width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:transparent; border:0; color:var(--dim); cursor:pointer; }
.toast .tclose:hover{ background:rgba(255,255,255,.08); color:var(--ink); }
.toast .tclose svg{ width:16px; height:16px; }
.toast .tbar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, var(--lime), #c8ff86); transform-origin:left; animation:tlife var(--life, 3600ms) linear forwards; }
.toast.bad .tbar{ background:#ff6b7a; }
.toast.paused .tbar{ animation-play-state:paused; }
@keyframes tlife{ from{ transform:scaleX(1) } to{ transform:scaleX(0) } }
@media (max-width:640px){ .toasts{ left:12px !important; right:12px !important; width:auto; top:auto !important; bottom:calc(84px + env(safe-area-inset-bottom, 0px)) !important; } .toast{ transform:translateY(8px) scale(.98); } .toast.out{ transform:translateY(8px); } }

/* ---------- the small card for random events: it does not block the page */
.notice{ position:fixed; z-index:96; left:20px; bottom:20px; width:min(380px, calc(100vw - 32px)); padding:16px; border-radius:20px; background:rgba(26,14,42,.96); backdrop-filter:blur(14px);
  border:1px solid rgba(157,255,46,.3); box-shadow:0 22px 50px rgba(0,0,0,.5); opacity:0; transform:translateY(16px); transition:opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1); }
.notice.in{ opacity:1; transform:none; }
.notice .evcard{ display:flex; gap:14px; align-items:flex-start; }
.notice .evcard img{ width:56px; height:56px; border-radius:16px; object-fit:cover; flex:0 0 auto; }
.notice .evcard p{ margin:0; }
@media (max-width:1060px){ .notice{ left:12px; right:12px; width:auto; bottom:calc(86px + env(safe-area-inset-bottom, 0px)); } }

@media (prefers-reduced-motion:reduce){ .toast, .notice, .item, .btn, img.fadein{ transition:none !important; } .toast .tbar, .coinpill.gain, .coinpill.loss{ animation:none; } .btn:active{ transform:none; } }

/* ---------- the loading screen (falls away on its own even if the script never runs) */
#splash{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 40%, #2a1745 0%, #0d0716 70%); transition:opacity .5s ease, visibility .5s; animation:spfail .5s ease 4s forwards; }
#splash.out{ opacity:0; visibility:hidden; pointer-events:none; }
#splash .sp-in{ display:grid; justify-items:center; gap:22px; width:min(420px, 80vw); }
#splash img{ width:100%; height:auto; filter:drop-shadow(0 10px 30px rgba(157,255,46,.25)); animation:spfloat 2.4s ease-in-out infinite alternate; }
#splash .sp-goo{ display:flex; gap:10px; }
#splash .sp-goo i{ width:14px; height:14px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px rgba(157,255,46,.6); animation:spdot .9s ease-in-out infinite; }
#splash .sp-goo i:nth-child(2){ animation-delay:.15s; background:#3fe0c0; } #splash .sp-goo i:nth-child(3){ animation-delay:.3s; background:#b45cff; }
#splash .sp-bar{ width:60%; height:6px; border-radius:6px; background:rgba(214,190,255,.14); overflow:hidden; }
#splash .sp-bar b{ display:block; height:100%; background:linear-gradient(90deg, var(--lime), #3fe0c0); transform-origin:left; transform:scaleX(.05); transition:transform .25s ease; }
@keyframes spfail{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
@keyframes spfloat{ from{ transform:translateY(0) } to{ transform:translateY(-8px) } }
@keyframes spdot{ 0%,100%{ transform:translateY(0) scale(1) } 50%{ transform:translateY(-10px) scale(.85) } }

/* ---------- page transitions: sections rise in one after another */
#view.enter > *, #view.enter > .stack > *{ animation:rise .5s cubic-bezier(.2,.8,.2,1) both; }
#view.enter > *:nth-child(2), #view.enter > .stack > *:nth-child(2){ animation-delay:.05s; }
#view.enter > *:nth-child(3), #view.enter > .stack > *:nth-child(3){ animation-delay:.1s; }
#view.enter > *:nth-child(4), #view.enter > .stack > *:nth-child(4){ animation-delay:.15s; }
#view.enter > *:nth-child(n+5), #view.enter > .stack > *:nth-child(n+5){ animation-delay:.2s; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.rstage .rtitle{ animation:arrive .9s cubic-bezier(.2,.8,.2,1) both; } .rstage .rmood{ animation:arrive .9s .25s cubic-bezier(.2,.8,.2,1) both; }
@keyframes arrive{ from{ opacity:0; transform:translateY(18px) scale(.98); letter-spacing:.04em } to{ opacity:1; transform:none } }

/* ---------- one icon language: same weight and size everywhere */
.btn svg, .chip svg, .kick svg, .also svg, .tabs svg{ width:1.15em; height:1.15em; flex:0 0 auto; vertical-align:-.18em; stroke-width:2.2; }
.chip{ display:inline-flex; align-items:center; gap:6px; }
.kick{ display:inline-flex; align-items:center; gap:6px; }

/* ---------- home: one goal */
.goal{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:center; padding:22px 24px !important; background:linear-gradient(135deg, rgba(157,255,46,.09), rgba(63,224,192,.05) 40%, rgba(30,16,48,.8)) !important; border:1px solid rgba(157,255,46,.28) !important; }
.goal .gring{ width:104px; height:104px; filter:drop-shadow(0 6px 16px rgba(157,255,46,.25)); }
.goal .gtitle{ margin:0; font:400 clamp(28px,3.6vw,40px)/1.05 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); }
.goal p{ margin:0; }
.alsorow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:-8px; }
.also{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:rgba(30,16,48,.8); border:1px solid rgba(214,190,255,.16); color:var(--ink); text-decoration:none; font:600 14px/1.2 var(--f-head); transition:border-color .15s, transform .15s; }
.also:hover, .also:focus-visible{ border-color:var(--lime); transform:translateY(-2px); }
.also svg{ color:var(--lime); }
details.more{ padding:0 !important; }
details.more > summary{ list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; padding:18px 22px; font:700 18px/1.2 var(--f-head); }
details.more > summary::-webkit-details-marker{ display:none; }
details.more > summary::before{ content:'+'; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--lime); color:var(--limeink); font:800 18px/1 var(--f-head); margin-right:4px; transition:transform .2s; }
details.more[open] > summary::before{ transform:rotate(45deg); }
details.more > .stack{ padding:0 22px 22px; }
@media (max-width:640px){ .goal{ grid-template-columns:1fr; justify-items:start; gap:14px; } .goal .gring{ width:84px; height:84px; } }
@media (prefers-reduced-motion:reduce){ #splash, #splash img, #splash .sp-goo i, #view.enter > *, #view.enter > .stack > *, .rstage .rtitle, .rstage .rmood{ animation:none !important; } }

/* phone home: keep the goop and today's goal on the first screen */
@media (max-width:640px){
  body[data-view="home"] .welcome{ gap:12px; padding:16px; }
  body[data-view="home"] .welcome .goopfig{ max-width:150px; }
  body[data-view="home"] .welcome .needrow, body[data-view="home"] .welcome [class*="need"]{ margin-block:2px; }
}

/* ---------- daily chest */
.chest-tile{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; align-items:center; width:100%; padding:14px 20px !important; cursor:pointer; text-align:left; color:inherit; font:inherit;
  background:linear-gradient(120deg, rgba(255,210,63,.14), rgba(30,16,48,.85) 55%) !important; border:1px solid rgba(255,210,63,.4) !important; transition:transform .18s, box-shadow .18s; }
.chest-tile:hover, .chest-tile:focus-visible{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,210,63,.18); }
.chest-tile.big{ background:linear-gradient(120deg, rgba(181,123,255,.22), rgba(30,16,48,.85) 55%) !important; border-color:rgba(181,123,255,.55) !important; }
.chest-tile .chest-svg{ width:96px; height:82px; animation:chestBob 2.6s ease-in-out infinite; }
.chest-tile b{ font-size:18px; }
@keyframes chestBob{ 0%,100%{ transform:translateY(0) rotate(0); } 45%{ transform:translateY(-3px) rotate(-2deg); } 55%{ transform:translateY(-3px) rotate(2deg); } }
.chest-btn{ background:none; border:0; padding:0; cursor:pointer; width:min(240px, 70vw); }
.chest-btn .chest-svg{ width:100%; height:auto; overflow:visible; }
.chest-svg .ch-lid{ transform-origin:100px 86px; transition:transform .5s cubic-bezier(.3,1.6,.5,1); }
.chest-svg .ch-glow{ opacity:.25; transition:opacity .5s; }
.chest-btn.shake .chest-svg{ animation:chestShake .9s ease-in-out; }
.chest-btn.open .ch-lid{ transform:translateY(-26px) rotate(-14deg); }
.chest-btn.open .ch-glow{ opacity:1; animation:chestGlow 1.6s ease-in-out infinite alternate; }
@keyframes chestShake{ 0%,100%{ transform:rotate(0); } 15%{ transform:rotate(-5deg); } 30%{ transform:rotate(5deg); } 45%{ transform:rotate(-7deg) scale(1.03); } 60%{ transform:rotate(7deg) scale(1.05); } 80%{ transform:rotate(-3deg) scale(1.06); } }
@keyframes chestGlow{ to{ opacity:.6; } }
.chest-loot{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; }
.chest-loot .loot{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 12px; border-radius:18px; background:rgba(214,190,255,.08); border:1px solid rgba(214,190,255,.16); animation:lootIn .5s cubic-bezier(.3,1.5,.5,1) both; }
.chest-loot .l2{ animation-delay:.18s; border-color:var(--fr, rgba(214,190,255,.16)); }
.chest-loot .loot > svg, .chest-loot .loot .ic{ width:56px; height:56px; display:block; }
.chest-loot .l1 b{ font-size:26px; color:#ffd23f; }
@keyframes lootIn{ from{ opacity:0; transform:translateY(16px) scale(.8); } }
@media (max-width:640px){ .chest-tile{ grid-template-columns:72px minmax(0,1fr); padding:12px 14px !important; } .chest-tile .chest-svg{ width:72px; height:62px; } }

/* ---------- job of the day */
.jotd{ display:flex; gap:14px; align-items:center; padding:14px 18px !important; background:linear-gradient(120deg, rgba(255,138,31,.16), rgba(30,16,48,.85) 60%) !important; border:1px solid rgba(255,138,31,.45) !important; }
.jotd > svg{ width:28px; height:28px; color:#ff8a1f; flex:0 0 auto; }
.jotd div{ display:flex; flex-direction:column; gap:2px; }
.job-card{ position:relative; }
.job-card.is-hot{ border-color:rgba(255,138,31,.6) !important; box-shadow:0 0 0 1px rgba(255,138,31,.25), 0 12px 30px rgba(255,138,31,.12); }
.job-card .ribbon{ position:absolute; top:-11px; right:16px; padding:4px 12px; border-radius:999px; background:#ff8a1f; color:#1a0d05; font-weight:800; font-size:12px; letter-spacing:.02em; box-shadow:0 4px 12px rgba(0,0,0,.35); }
.chip.hot{ background:rgba(255,138,31,.2); border-color:rgba(255,138,31,.5); color:#ffc48a; }

/* ---------- bundles in the shop dialog */
.bundles{ display:flex; flex-direction:column; gap:8px; padding-top:6px; border-top:1px solid rgba(214,190,255,.12); }
.bundles .row{ gap:8px; flex-wrap:wrap; }
.btn.bundle{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:0; line-height:1.2; padding:8px 14px; }
.btn.bundle .small{ color:var(--lime); font-weight:700; }
.btn.bundle:disabled{ opacity:.45; }

/* ---------- map: today's badges */
.wm-today{ pointer-events:none; }
.wm-today.done circle{ filter:drop-shadow(0 0 6px rgba(255,210,63,.7)); }
.wm-ctoday{ margin:4px 0 0; font-size:13px; font-weight:700; color:var(--lime); }

/* ---------- keeper card */
.kcard{ display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:24px; align-items:center; padding:22px; border-radius:28px; position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 0% 50%, color-mix(in srgb, var(--kc) 22%, transparent), transparent 60%), linear-gradient(135deg, #2a1747, #120a20);
  border:2px solid color-mix(in srgb, var(--kc) 70%, transparent); box-shadow:0 18px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); }
.kcard::after{ content:''; position:absolute; inset:0; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%); background-size:250% 100%; animation:kcShine 6s ease-in-out infinite; pointer-events:none; }
@keyframes kcShine{ 0%,60%{ background-position:120% 0; } 100%{ background-position:-120% 0; } }
.kc-art{ position:relative; }
.kc-art .goopfig{ max-width:260px; margin:0 auto; }
.kc-type{ position:absolute; left:8px; top:8px; }
.kc-body{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.kc-name{ margin:0; font:400 clamp(30px,4vw,44px)/1 var(--f-display); color:#fff; overflow-wrap:anywhere; }
.kc-title{ margin:0; font-weight:800; color:var(--kc); font-size:18px; }
.kc-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:8px 0; }
.kc-stats div{ background:rgba(214,190,255,.08); border-radius:14px; padding:8px 12px; }
.kc-stats dt{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim, #a99cc4); }
.kc-stats dd{ margin:0; font-size:22px; font-weight:800; }
@media (max-width:640px){ .kcard{ grid-template-columns:minmax(0,1fr); padding:16px; gap:10px; } .kc-art .goopfig{ max-width:170px; } }
@media (prefers-reduced-motion:reduce){ .kcard::after, .chest-tile .chest-svg{ animation:none; } }
.chestbox{ width:100%; } .chestbox .chest-btn{ align-self:center; margin:0 auto; display:block; }

/* town signs: placed by variables, with their own tidy layout on phones (avatar above a two-line name) */
.rsign{ left:var(--x); top:var(--y); }
@media (max-width:640px){
  .rsign{ left:var(--px); top:var(--py); flex-direction:column; gap:3px; width:24%; max-width:none; padding:5px 4px 6px; border-radius:16px; white-space:normal; text-align:center; font-size:10.5px; line-height:1.15; }
  .rsign img{ width:28px; height:28px; }
  .rsign span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .rsign .dot{ position:absolute; top:4px; right:4px; }
  .rwalker{ bottom:22%; }
}
/* the event card waits behind open dialogs, and is compact on phones */
.notice{ z-index:89; }
@media (max-width:640px){
  .notice{ padding:12px 14px; border-radius:16px; }
  .notice .evcard{ gap:10px; } .notice .evcard img{ width:42px; height:42px; border-radius:12px; }
  .notice .evcard .kick{ font-size:10px; letter-spacing:.14em; } .notice .evcard p{ font-size:14px; line-height:1.35; }
  .notice .btn{ padding:6px 14px; min-height:0; font-size:14px; }
}
/* job cards: name on its own line so the three cards line up */
.job-card > .row.between:first-of-type{ flex-direction:column; align-items:flex-start; gap:8px; }
@media (max-width:640px){ .rwalker span{ display:none; } .rwalker{ bottom:30%; } }

/* ---------- My House: a bigger room, spots only while arranging */
.hhouse{ display:flex; flex-direction:column; gap:10px; }
.hbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 4px; }
.hbtns{ gap:8px; flex-wrap:nowrap; }
.hhouse .hstage{ max-width:1180px; aspect-ratio:16/10; border-radius:26px; }
.hhouse .hroom{ inset:1% 3% 0; width:94%; height:99%; }
.hstage:not(.arrange) .hslot:not(.filled){ display:none; }
.hstage:not(.arrange) .hslot.filled{ pointer-events:none; }
.hstage.arrange .hslot:not(.filled) > span{ animation:slotGlow 1.6s ease-in-out infinite; }
.hstage.arrange .hslot.filled{ outline:2px dashed rgba(157,255,46,.55); outline-offset:4px; }
@keyframes slotGlow{ 50%{ box-shadow:0 0 0 6px rgba(157,255,46,.18); } }
.hslot{ width:18%; } .hslot.rug{ width:26%; }
.hwalker{ width:13%; }
@keyframes hwalk{ 0%{ left:36%; top:56% } 25%{ left:48%; top:64% } 50%{ left:58%; top:58% } 75%{ left:50%; top:52% } 100%{ left:40%; top:62% } }
.hhint{ margin:0; text-align:center; }
/* the room picture sits in a box with its own shape, so spots (in % of the box) land on that room's floor in every room */
.hstage{ container-type:size; }
.hbox{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:94%; height:94%;
  width:min(96cqw, 98cqh * var(--ar, 1.65)); height:min(96cqw / var(--ar, 1.65), 98cqh); }
.hhouse .hbox > .hroom, .hbox > .hroom{ inset:0; width:100%; height:100%; object-fit:contain; }
.hslot.filled.rug{ z-index:2 !important; }
#hrooms{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:560px){ #hrooms{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (min-width:1100px){ #hrooms{ grid-template-columns:repeat(8, minmax(0, 1fr)); } }
.item.featured{ box-shadow:0 0 0 2px var(--gold, #ffd23f), 0 0 18px rgba(255,210,63,.35); }
.gcard .chip.owned{ align-self:center; margin-top:6px; padding:3px 9px; font-size:12px; color:var(--lime, #9dff2e); border-color:rgba(157,255,46,.5); }
.featchip{ align-self:center; padding:2px 8px; border-radius:999px; background:var(--gold, #ffd23f); color:#1a0d2e; font:800 11px/1.4 var(--f-head, inherit); letter-spacing:.04em; text-transform:uppercase; }
@media (max-width:640px){
  .hhouse .hstage{ aspect-ratio:1/1; aspect-ratio:var(--ar, 1); border-radius:20px; margin:0 -6px; width:calc(100% + 12px); }
  .hhouse .hroom{ inset:4% 0 2%; width:100%; height:94%; }
  .hslot{ width:22%; } .hslot.rug{ width:32%; } .hwalker{ width:19%; }
}

/* ---------- town journal: four quiet task lines and a stamp seal that fills as you go */
.journal{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; padding:18px 20px !important; }
.jhead{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.jhead h3{ margin:0; }
.jlist{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.jt{ display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid rgba(214,190,255,.08); }
.jt:last-child{ border-bottom:0; }
.jic{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--dim, #a99cc4);
  background:conic-gradient(var(--lime) calc(var(--p) * 1%), rgba(214,190,255,.14) 0); position:relative; }
.jic::before{ content:''; position:absolute; inset:3px; border-radius:50%; background:#1a0f2c; }
.jic svg{ width:15px; height:15px; position:relative; }
.jt.done .jic{ color:var(--limeink, #10200a); background:var(--lime); }
.jt.done .jic::before{ display:none; }
.jt.done .jtx b{ color:var(--dim, #a99cc4); font-weight:600; }
.jtx{ display:flex; flex-direction:column; min-width:0; }
.jtx b{ font:700 15px/1.25 var(--f-head); }
.jt .btn{ white-space:nowrap; }
.jseal{ display:flex; flex-direction:column; align-items:center; gap:6px; width:110px; text-align:center; }
.jseal .seal{ width:92px; height:92px; filter:grayscale(.85) brightness(.6); opacity:.65; transition:filter .4s, opacity .4s, transform .4s; }
.journal.ready .seal{ filter:none; opacity:1; animation:sealPulse 1.8s ease-in-out infinite; }
.journal.claimed .seal{ filter:none; opacity:1; transform:rotate(-8deg); }
@keyframes sealPulse{ 50%{ transform:scale(1.06) rotate(-3deg); filter:drop-shadow(0 0 14px rgba(157,255,46,.45)); } }
@media (max-width:640px){
  .journal{ grid-template-columns:minmax(0,1fr); padding:16px !important; }
  .jseal{ flex-direction:row; width:auto; justify-content:flex-start; gap:12px; order:-1; }
  .jseal .seal{ width:56px; height:56px; }
  .jt{ grid-template-columns:28px minmax(0,1fr); } .jt .btn{ grid-column:2; justify-self:start; }
}
/* spotted goops in the scene: a small tick, not a big badge */
.rgoop.seen .rspot{ transform:scale(.7); opacity:.85; }
.rgoop.seen img{ filter:saturate(.8) brightness(.92); }
.todo .ck svg{ width:16px; height:16px; }

/* ---------- world map: territories */
.wm-stage .terr{ fill:rgba(255,255,255,0); stroke:none; transition:fill .2s; cursor:pointer; }
.wm-stage .pin:hover .terr, .wm-stage .pin:focus-visible .terr{ fill:rgba(255,255,255,.1); stroke:#fff; stroke-width:3; stroke-opacity:.7; }
.wm-stage .pin.st-new .terr{ fill:rgba(10,5,20,.22); }
.wm-stage .pin.st-new:hover .terr{ fill:rgba(255,255,255,.06); }
.wm-stage .wm-mark{ pointer-events:none; filter:drop-shadow(0 4px 3px rgba(0,0,0,.35)); }
.wm-stage .pin:hover .wm-mark{ filter:drop-shadow(0 6px 8px rgba(0,0,0,.45)) brightness(1.08); }
.wm-props{ pointer-events:none; filter:drop-shadow(0 2px 1.5px rgba(0,0,0,.3)); }
.wm-borders{ fill:none; stroke:rgba(255,246,220,.55); stroke-width:2.2; stroke-dasharray:7 6; stroke-linecap:round; }
.wm-river{ fill:none; stroke:#3aa6c4; stroke-width:12; stroke-linecap:round; }
.wm-river.hi{ stroke:#8fe3f2; stroke-width:3; stroke-dasharray:10 16; opacity:.7; }
.wm-stage .pin .halo, .wm-stage .pin .ring{ display:none; }
.wm-label{ background:#f4e6c4 !important; color:#2a1747 !important; border:2px solid #2a1747 !important; border-radius:6px !important; box-shadow:0 3px 0 #2a1747, 0 6px 14px rgba(0,0,0,.35) !important; font-family:var(--f-head) !important; letter-spacing:.02em; }
.wm-label.is-new{ background:#fff3c9 !important; }
.wm-label{ display:inline-flex !important; align-items:center; gap:6px; }
.wm-lt{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#2a1747; color:#fff; font:800 11px/1 var(--f-head); font-style:normal; }
.wm-lt.done{ background:#ffd23f; color:#2a1747; }
.wm-newtag{ font:800 9px/1 var(--f-head); letter-spacing:.08em; text-transform:uppercase; background:#ffd23f; color:#2a1747; padding:3px 5px; border-radius:4px; }
.wm-legend .wm-lt{ margin-right:8px; }
@media (max-width:640px){
  .wm-label{ font-size:10px !important; padding:3px 6px !important; gap:4px; box-shadow:0 2px 0 #2a1747 !important; }
  .wm-lt{ min-width:15px; height:15px; font-size:9.5px; }
  .wm-newtag{ display:none; }
  .wm-map{ margin-inline:-8px; }
}
@media (max-width:640px){
  .journal{ grid-template-columns:minmax(0,1fr) 70px; align-items:start; }
  .jseal{ order:0; flex-direction:column; width:70px; gap:4px; }
  .jseal .seal{ width:54px; height:54px; }
  .jseal .small{ font-size:11px; }
  .jseal .btn{ padding:5px 8px; font-size:12px; }
  .jt{ grid-column:1 / -1; }
  .jlist{ grid-column:1 / -1; }
  .jmain{ display:contents; }
  .jhead{ grid-column:1; grid-row:1; margin:0; }
  .jseal{ grid-column:2; grid-row:1; }
}

/* ---------- wild goops peek out of hiding; tap one in time to spot it */
.rpeek{ position:absolute; z-index:6; width:clamp(84px,12vw,150px); aspect-ratio:1; padding:0; border:0; background:none; overflow:hidden; pointer-events:auto; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.rpeek[hidden]{ display:none; }
.rpeek .pk-in{ position:absolute; inset:0; display:block; transition:transform .45s cubic-bezier(.3,1.4,.5,1); }
.rpeek img{ width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.rpeek.from-ground{ bottom:0; transform:translateX(-50%); }
.rpeek.from-ground .pk-in{ transform:translateY(105%); }
.rpeek.from-ground.up .pk-in{ transform:translateY(52%); animation:pkWiggle 1.1s ease-in-out .45s infinite; }
.rpeek.from-left{ left:0; }
.rpeek.from-left .pk-in{ transform:translateX(-105%) rotate(70deg); }
.rpeek.from-left.up .pk-in{ transform:translateX(-48%) rotate(70deg); }
.rpeek.from-right{ right:0; left:auto; }
.rpeek.from-right .pk-in{ transform:translateX(105%) rotate(-70deg); }
.rpeek.from-right.up .pk-in{ transform:translateX(48%) rotate(-70deg); }
@keyframes pkWiggle{ 0%,100%{ transform:translateY(52%) rotate(0); } 30%{ transform:translateY(48%) rotate(-5deg); } 60%{ transform:translateY(50%) rotate(4deg); } }
.rpeek.caught{ overflow:visible; pointer-events:none; }
.rpeek.caught .pk-in{ transform:translateY(-8%) scale(1.05) !important; animation:pkHop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes pkHop{ 0%{ transform:translateY(40%) scale(.9); } 60%{ transform:translateY(-16%) scale(1.08); } }
.rpeek .pk-puff{ position:absolute; left:50%; bottom:6%; width:10px; height:10px; margin-left:-5px; border-radius:50%; opacity:0; pointer-events:none; }
.rpeek.caught .pk-puff{ animation:pkBurst .8s ease-out; }
@keyframes pkBurst{ 0%{ opacity:1; box-shadow:0 0 0 0 rgba(157,255,46,.9), 0 0 0 0 rgba(255,210,63,.8); } 100%{ opacity:0; box-shadow:0 0 0 60px rgba(157,255,46,0), 0 0 0 90px rgba(255,210,63,0); } }
.rpeek:focus-visible{ outline:3px solid var(--lime); outline-offset:2px; border-radius:16px; }
@media (prefers-reduced-motion:reduce){ .rpeek .pk-in{ transition:none; } .rpeek.up .pk-in, .rpeek.caught .pk-in{ animation:none !important; } }

/* ---------- Wander: a wide scene the camera follows, rustling grass to search, a timing ring to make friends */
.xstage.v3{ touch-action:none; user-select:none; -webkit-user-select:none; cursor:pointer; aspect-ratio:16/9; }
.xworld{ position:absolute; top:0; left:0; height:100%; width:200%; will-change:transform; }
.xworld .xbg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.08); }
.xworld::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,5,20,.35), transparent 30%, transparent 75%, rgba(10,5,20,.35)); pointer-events:none; }
.xstage.v3 .xtracks{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.xpatch{ position:absolute; z-index:3; width:clamp(70px,9vw,120px); transform:translate(-50%,-85%); }
.xpatch svg{ width:100%; height:auto; display:block; transform-origin:50% 90%; animation:xtuft 2.8s ease-in-out infinite; filter:drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
.xpatch:nth-child(odd) svg{ animation-delay:-1.3s; }
.xpatch.near svg{ animation:xrust .28s ease-in-out infinite alternate; filter:drop-shadow(0 0 10px rgba(157,255,46,.7)); }
.xpatch.searched svg{ animation:none; transform:scaleY(.45); opacity:.55; filter:grayscale(.4); }
.xpatch.burst::after{ content:''; position:absolute; left:50%; top:60%; width:12px; height:12px; margin:-6px; border-radius:50%; animation:pkBurst .7s ease-out; }
@keyframes xtuft{ 0%,82%,100%{ transform:rotate(0); } 86%{ transform:rotate(-5deg); } 90%{ transform:rotate(5deg); } 94%{ transform:rotate(-3deg); } }
@keyframes xrust{ from{ transform:rotate(-6deg) scale(1.04); } to{ transform:rotate(6deg) scale(1.04); } }
.xsearch{ position:absolute; left:50%; bottom:100%; transform:translate(-50%,-6px); z-index:4; padding:8px 16px; border-radius:999px; border:2px solid #0d0716; background:var(--lime); color:#10200a; font:800 15px/1 var(--f-head); box-shadow:0 4px 0 #3c7a12, 0 8px 18px rgba(0,0,0,.4); cursor:pointer; white-space:nowrap; animation:xpop .35s cubic-bezier(.3,1.6,.5,1); }
.xsearch[hidden]{ display:none; }
@keyframes xpop{ from{ transform:translate(-50%,8px) scale(.6); opacity:0; } }
.xstage.v3 .xme{ z-index:5; width:clamp(96px,13vw,170px); }
.xme .xalert{ position:absolute; left:50%; top:-14%; transform:translateX(-50%); width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#ffd23f; color:#2a1747; font:900 20px/1 var(--f-head); border:2px solid #2a1747; animation:xpop .3s cubic-bezier(.3,1.6,.5,1), xbob .5s ease-in-out .3s infinite alternate; }
.xme .xalert[hidden]{ display:none; }
.xfloat{ position:absolute; z-index:6; transform:translate(-50%,-120%); display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(20,10,36,.9); border:2px solid var(--lime); color:#fff; font:800 14px/1 var(--f-head); white-space:nowrap; animation:xfloat 1.8s ease-out forwards; pointer-events:none; }
.xfloat svg, .xfloat img{ width:22px; height:22px; }
@keyframes xfloat{ 0%{ opacity:0; transform:translate(-50%,-80%) scale(.8); } 15%{ opacity:1; transform:translate(-50%,-130%) scale(1); } 80%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-190%); } }
.xhud{ position:absolute; top:12px; left:12px; right:12px; z-index:7; display:flex; gap:8px; flex-wrap:wrap; pointer-events:none; }
.xhud .chip{ background:rgba(13,7,22,.78); backdrop-filter:blur(6px); }
.xgame{ position:absolute; inset:0; z-index:10; display:grid; place-items:center; background:radial-gradient(ellipse at center, rgba(20,10,36,.75), rgba(8,4,14,.92)); animation:fade .2s; cursor:default; touch-action:manipulation; }
.xgame[hidden]{ display:none; }
.xg-card{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:16px; max-width:420px; }
.xg-card h2{ margin:0; font:400 clamp(26px,4vw,36px)/1 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); }
.xg-ring{ position:relative; width:min(240px, 52vw); aspect-ratio:1; }
.xg-ring svg{ position:absolute; inset:0; width:100%; height:100%; }
.xg-ring .xg-goop{ position:absolute; inset:18%; display:grid; place-items:center; animation:xshy 1.4s ease-in-out infinite; }
.xg-ring.ingreen #xgdot{ fill:#9dff2e; }
.xg-ring.miss{ animation:xshake .3s; }
.xg-ring.won .xg-goop{ animation:pkHop .6s cubic-bezier(.3,1.6,.5,1); }
.xg-ring.won #xgarc, .xg-ring.won #xgdot{ opacity:0; transition:opacity .3s; }
.xg-ring.lost .xg-goop{ opacity:.25; transform:translateY(20%) scale(.8); transition:all .6s; }
@keyframes xshy{ 0%,100%{ transform:translateX(-3%) rotate(-3deg); } 50%{ transform:translateX(3%) rotate(3deg); } }
@keyframes xshake{ 25%{ transform:translateX(-8px); } 75%{ transform:translateX(8px); } }
.xg-msg{ margin:0; color:#e9e2f7; max-width:34ch; }
.xg-burst{ position:absolute; inset:-10% -20%; background:center/contain no-repeat; opacity:0; animation:xburstIn 1.2s ease-out forwards; pointer-events:none; z-index:-1; }
@keyframes xburstIn{ 0%{ opacity:0; transform:scale(.5); } 30%{ opacity:.9; } 100%{ opacity:.35; transform:scale(1.1); } }
.xmini{ padding:0 6px; }
.xmini-track{ position:relative; height:10px; border-radius:6px; background:linear-gradient(90deg, rgba(157,255,46,.12), rgba(164,107,255,.15)); border:1px solid rgba(214,190,255,.18); }
.xm-dot{ position:absolute; top:50%; width:12px; height:12px; margin:-6px; border-radius:50%; background:#3d8a2a; border:2px solid #9dff2e; }
.xm-dot.done{ background:rgba(214,190,255,.25); border-color:rgba(214,190,255,.35); }
.xm-me{ position:absolute; top:50%; width:18px; height:18px; margin:-9px; border-radius:50%; background:#fff; border:3px solid var(--lime); box-shadow:0 0 10px rgba(157,255,46,.7); transition:left .1s linear; }
.xhelp{ margin:0; text-align:center; }
@media (max-width:640px){
  .xstage.v3{ aspect-ratio:3/4; }
  .xworld{ width:300%; }
  .xpatch{ width:84px; } .xstage.v3 .xme{ width:118px; }
  .xsearch{ font-size:16px; padding:10px 18px; }
}
@media (prefers-reduced-motion:reduce){ .xpatch svg, .xpatch.near svg, .xg-ring .xg-goop, .xme .xalert{ animation:none; } }
.xstage.v3 .xme .goopfig{ aspect-ratio:1; }
.xstage.v3 .xme .xsearch{ position:absolute; left:50%; bottom:96%; top:auto; transform:translateX(-50%); pointer-events:auto; display:inline-flex; align-items:center; gap:6px; z-index:8; }
.xstage.v3 .xme .xsearch[hidden]{ display:none; }
.xstage.v3 .xme .xalert{ position:static; transform:none; width:20px; height:20px; font-size:14px; border-width:1.5px; }

/* ---------- Wander atmosphere */
.xstage.v3 .xfx{ position:absolute; inset:0; width:100%; height:100%; z-index:6; pointer-events:none; }
.xstage.v3 .xgrade{ position:absolute; inset:0; z-index:5; pointer-events:none; mix-blend-mode:soft-light; transition:opacity .6s; }
.xstage.v3.p-dawn .xgrade{ background:linear-gradient(180deg, rgba(255,150,190,.55), rgba(255,200,150,.25)); }
.xstage.v3.p-day .xgrade{ background:linear-gradient(180deg, rgba(255,250,220,.25), rgba(255,255,255,0)); }
.xstage.v3.p-dusk .xgrade{ background:linear-gradient(180deg, rgba(255,120,60,.6), rgba(180,60,140,.35)); }
.xstage.v3.p-night .xgrade{ background:linear-gradient(180deg, rgba(40,60,160,.7), rgba(20,20,80,.5)); }
.xstage.v3.w-rain .xworld .xbg{ filter:saturate(.85) brightness(.88) contrast(1.05); }
.xstage.v3.w-rain .xworld::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:46%; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(150,180,255,0), rgba(150,180,255,.14)); mix-blend-mode:screen; }
.xstage.v3 .xme.walking .xbody, .xstage.v3 .xme.walking .xshadow{ animation:none; }
.xstage.v3 .xme .xbody{ transform-origin:50% 95%; will-change:transform; }
.xstage.v3 .xme .xshadow{ transform:translateX(-50%); }
.xbars{ position:absolute; inset:0; z-index:8; pointer-events:none; }
.xbars i{ position:absolute; left:0; right:0; height:0; background:#05020b; transition:height .45s cubic-bezier(.3,.9,.4,1); }
.xbars i:first-child{ top:0; } .xbars i:last-child{ bottom:0; }
.xstage.v3.cine .xbars i{ height:10%; }
.xstage.v3.cine .xhud{ opacity:0; transition:opacity .3s; }
.xstage.v3 .xworld{ transition:none; }
.xg-ring.shimmer .xg-goop{ animation:xshimmer 1.2s ease-in-out infinite; }
@keyframes xshimmer{ 0%,100%{ filter:drop-shadow(2px 0 0 rgba(255,60,120,.55)) drop-shadow(-2px 0 0 rgba(60,220,255,.55)); } 50%{ filter:drop-shadow(-3px 0 0 rgba(255,60,120,.6)) drop-shadow(3px 0 0 rgba(60,220,255,.6)) drop-shadow(0 0 14px rgba(255,255,255,.6)); } }
.xhud .xmood{ margin-left:auto; }
@media (max-width:640px){ .xhud .xmood{ margin-left:0; } }
@media (prefers-reduced-motion:reduce){ .xbars i{ transition:none; } .xg-ring.shimmer .xg-goop{ animation:none; } }
.xstage.v3 .xgrade{ mix-blend-mode:overlay; }
.xstage.v3.p-dawn .xgrade{ background:linear-gradient(180deg, rgba(255,130,180,.5), rgba(255,190,140,.3)); }
.xstage.v3.p-day .xgrade{ background:linear-gradient(180deg, rgba(255,245,210,.22), rgba(255,255,255,0)); }
.xstage.v3.p-dusk .xgrade{ background:linear-gradient(180deg, rgba(255,110,40,.6), rgba(200,70,140,.35)); }
.xstage.v3.p-night .xgrade{ background:linear-gradient(180deg, rgba(30,50,160,.55), rgba(20,20,90,.4)); }

/* ---------- Wander, first person */
.fp{ position:relative; width:100%; aspect-ratio:16/9; min-height:320px; border-radius:26px; overflow:hidden; isolation:isolate; background:#0d0716; border:2px solid rgba(164,107,255,.4); box-shadow:0 20px 60px rgba(0,0,0,.5); touch-action:none; user-select:none; -webkit-user-select:none; outline:none; cursor:grab; }
.fp:active{ cursor:grabbing; }
.fp:focus-visible{ box-shadow:0 0 0 3px var(--lime), 0 20px 60px rgba(0,0,0,.5); }
.fp canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.fp-hud{ position:absolute; top:12px; left:12px; right:30%; z-index:3; display:flex; flex-wrap:wrap; gap:6px; pointer-events:none; }
.fp-hud .chip, .fp-mood{ background:rgba(13,7,22,.72); backdrop-filter:blur(6px); font-size:12px; }
.fp-mood{ position:absolute; z-index:3; right:12px; bottom:12px; pointer-events:none; }
.fp-bottom{ position:absolute; left:0; right:0; bottom:18px; z-index:3; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
.fp-bottom .btn{ pointer-events:auto; animation:xpop .35s cubic-bezier(.3,1.6,.5,1); box-shadow:0 8px 24px rgba(0,0,0,.45); }
.fp-hint{ margin:0; padding:5px 12px; border-radius:999px; background:rgba(13,7,22,.6); color:#e9e2f7; font-size:13px; }
.fp-hint[hidden], .fp-bottom .btn[hidden]{ display:none; }
.fp.catching .fp-hud, .fp.catching .fp-mood, .fp.catching .fp-bottom{ opacity:0; transition:opacity .25s; }
.fp-catch{ position:absolute; inset:0; z-index:4; pointer-events:none; display:flex; flex-direction:column; justify-content:space-between; }
.fp-catch[hidden]{ display:none; }
.fp-ctop{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 12px; background:linear-gradient(180deg, rgba(5,2,12,.75), transparent); text-align:center; }
.fp-ctop b{ font:400 clamp(24px,3.6vw,34px)/1.05 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); }
.fp-praise{ min-height:22px; font:800 18px/1.2 var(--f-head); color:#ffd23f; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.fp-cbtm{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 12px 16px; background:linear-gradient(0deg, rgba(5,2,12,.7), transparent); }
.fp-cbtm .btn, .fp-jarpick .btn{ pointer-events:auto; }
.fp-jarpick{ gap:6px; justify-content:center; }
.fp-cbtm .fp-hint{ font-size:12px; }
.fp-result{ position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:radial-gradient(ellipse at center, rgba(20,10,36,.55), rgba(8,4,14,.88)); animation:fade .25s; }
.fp-result[hidden]{ display:none; }
.fp-rcard{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:16px; max-width:420px; }
.fp-rcard h2{ margin:0; font:400 clamp(26px,4vw,38px)/1.05 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); }
.fp-rart{ width:min(200px, 40vw); animation:pkHop .7s cubic-bezier(.3,1.6,.5,1); }
.fp-rart.shimmer{ animation:pkHop .7s cubic-bezier(.3,1.6,.5,1), xshimmer 1.2s ease-in-out .7s infinite; }
.pen-item .ic{ width:100%; aspect-ratio:1; } .pen-item .ic .goopfig{ width:100%; }
.pen-item .row .btn{ padding:5px 10px; }
@media (max-width:640px){
  .fp{ aspect-ratio:3/4; border-radius:20px; margin:0 -6px; width:calc(100% + 12px); }
  .fp-hud{ right:34%; } .fp-hud .chip{ font-size:11px; padding:4px 8px; }
}
@media (max-width:640px){
  .fp-cbtm .fp-hint{ display:none; }
  .fp-cbtm{ gap:6px; padding-bottom:12px; }
  .fp-cbtm .btn.lg{ padding:10px 26px; font-size:18px; }
}
@media (max-width:640px){ .fp-mood{ display:none; } }

/* ---------- Wander in 3D */
.w3{ position:relative; width:100%; aspect-ratio:16/9; min-height:340px; border-radius:26px; overflow:hidden; isolation:isolate; background:#0d0716; border:2px solid rgba(164,107,255,.4); box-shadow:0 20px 60px rgba(0,0,0,.5); touch-action:none; user-select:none; -webkit-user-select:none; outline:none; cursor:grab; }
.w3:active{ cursor:grabbing; }
.w3:focus-visible{ box-shadow:0 0 0 3px var(--lime), 0 20px 60px rgba(0,0,0,.5); }
.w3-gl, .w3-gl canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; }
.w3-ov{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.w3 .fp-hud{ z-index:3; } .w3 .fp-mood{ z-index:3; } .w3 .fp-bottom{ z-index:3; }
.w3-pal{ color:var(--lime); }
.w3-load{ position:absolute; inset:0; z-index:9; display:grid; place-items:center; align-content:center; gap:12px; background:radial-gradient(ellipse at center, #2a1747, #0d0716); color:#fff; transition:opacity .6s; }
.w3-load.gone{ opacity:0; pointer-events:none; }
.w3-spin{ width:44px; height:44px; border-radius:50%; border:4px solid rgba(157,255,46,.25); border-top-color:var(--lime); animation:w3spin .9s linear infinite; }
@keyframes w3spin{ to{ transform:rotate(360deg); } }
.w3.catching .fp-hud, .w3.catching .fp-mood, .w3.catching .fp-bottom{ opacity:0; transition:opacity .25s; pointer-events:none; }
.w3-enc{ position:absolute; inset:0; z-index:4; pointer-events:none; display:flex; flex-direction:column; justify-content:space-between; }
.w3-enc[hidden]{ display:none; }
.w3-etop{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 14px 30px; background:linear-gradient(180deg, rgba(5,2,12,.78), transparent); text-align:center; }
.w3-etop b{ font:400 clamp(24px,3.6vw,34px)/1.05 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); }
.w3-how{ max-width:52ch; font-size:13px; color:#e9e2f7; }
.w3-ebtm{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:30px 12px 16px; background:linear-gradient(0deg, rgba(5,2,12,.7), transparent); }
.w3-ebtm .btn{ pointer-events:auto; }
.w3-hold.on{ transform:scale(.96); box-shadow:0 0 0 6px rgba(157,255,46,.3); }
.w3-ov.on{ pointer-events:none; }
@media (max-width:640px){
  .w3{ aspect-ratio:3/4; border-radius:20px; margin:0 -6px; width:calc(100% + 12px); }
  .w3 .fp-hud{ right:34%; } .w3 .fp-hud .chip{ font-size:11px; padding:4px 8px; } .w3 .fp-mood{ display:none; }
  .w3-how{ font-size:12px; } .w3-ebtm .fp-hint{ display:none; }
}

/* ---------- bonds */
.bondm{ display:block; height:8px; border-radius:6px; background:rgba(214,190,255,.16); overflow:hidden; }
.bondm i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg, #ff8ad8, #9dff2e); transition:width .6s cubic-bezier(.3,1.2,.5,1); }
.bondm.full i{ background:linear-gradient(90deg, #ffd23f, #9dff2e); }
.bondrow{ display:grid; grid-template-columns:1fr auto; gap:6px; align-items:center; margin-top:6px; }
.bondbox{ display:flex; flex-direction:column; gap:8px; margin-top:12px; padding:12px 14px; border-radius:16px; background:rgba(255,138,216,.08); border:1px solid rgba(255,138,216,.3); }
.bondbox .btn{ align-self:flex-start; }
.bondres{ width:min(320px, 80vw); display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:14px; background:rgba(13,7,22,.6); }
.pen-wait{ border-color:rgba(255,210,63,.45) !important; }
.hwalker.hvisit{ width:10%; opacity:.95; pointer-events:none; }
@media (max-width:640px){ .hwalker.hvisit{ width:15%; } }

/* ---------- Goop Jobs: a shift is work. Each workplace wears its own colour (--job), set from the job's accent ---------- */
.goo[data-c="fizzy"]{ color:var(--fizzy); } .goo[data-c="slick"]{ color:var(--slick); } .goo[data-c="chunky"]{ color:var(--chunky); }
.jobwork{ --job:var(--lime); }
.jobbrief{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr); gap:18px; padding:16px 18px !important; margin-bottom:14px;
  border-color:color-mix(in srgb, var(--job) 45%, transparent) !important; background:linear-gradient(135deg, color-mix(in srgb, var(--job) 14%, transparent), transparent 60%), var(--panel) !important; }
.jb-who{ display:flex; gap:12px; align-items:flex-start; min-width:0; }
.jb-who img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:2px solid color-mix(in srgb, var(--job) 70%, transparent); background:#0b0614; }
.jb-who p{ margin:0; font-size:15px; line-height:1.4; }
.jb-who .kick{ color:var(--job); display:inline-flex; gap:6px; align-items:center; } .jb-who .kick svg{ width:15px; height:15px; }
.jb-stats{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.jb-stats > div{ display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); min-width:0; }
.jb-stats b{ font-size:18px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.jb-stats .meter, .sl-rank .meter{ display:block; height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:4px; }
.jb-stats .meter > span, .sl-rank .meter > span{ display:block; height:100%; border-radius:inherit; background:var(--job); }
.jobhost{ border-color:color-mix(in srgb, var(--job) 40%, transparent) !important; box-shadow:0 0 0 1px color-mix(in srgb, var(--job) 18%, transparent), 0 18px 40px rgba(0,0,0,.35); }
@media (max-width:760px){ .jobbrief{ grid-template-columns:1fr; gap:12px; } .jb-who img{ width:52px; height:52px; } .jb-stats b{ font-size:16px; } }

.jobslip-wrap{ position:absolute; inset:0; display:grid; place-items:center; padding:16px; overflow:auto;
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--job) 22%, #160a26), #0b0614 70%); }
.jobslip{ width:min(400px, 100%); display:flex; flex-direction:column; gap:10px; padding:18px 18px 16px; border-radius:16px; text-align:center;
  background:#fbf6ee; color:#2a1b33; box-shadow:0 20px 50px rgba(0,0,0,.5), inset 0 -3px 0 rgba(0,0,0,.08); position:relative;
  animation:slipIn .45s cubic-bezier(.2,.9,.3,1.2) both; }
.jobslip::before{ content:''; position:absolute; left:0; right:0; top:0; height:7px; border-radius:16px 16px 0 0; background:var(--job); }
.jobslip .kick{ color:color-mix(in srgb, var(--job) 60%, #2a1b33); } .jobslip .dim{ color:#675774 !important; } .jobslip .muted{ color:#5c4b68 !important; }
.jobslip h2{ margin:0; font-size:22px; color:#2a1b33; }
.sl-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.sl-score{ font:400 54px/1 var(--f-label); color:color-mix(in srgb, var(--job) 55%, #2a1b33); }
.sl-rows{ display:flex; flex-direction:column; text-align:left; border-top:1.5px dashed #d8cbbd; border-bottom:1.5px dashed #d8cbbd; padding:6px 0; }
.sl-row{ display:flex; justify-content:space-between; gap:10px; padding:5px 2px; font-size:14px; }
.sl-row b{ display:inline-flex; gap:4px; align-items:center; } .sl-row b svg, .sl-row b img{ width:16px; height:16px; }
.sl-row.hot b{ color:#c45f00; } .sl-row.total{ font-size:17px; font-weight:700; border-top:1px solid #e6dccf; margin-top:2px; padding-top:8px; }
.sl-rank{ text-align:left; } .sl-rank .meter{ background:#e9dfd3; }
.jobslip .btn:not(.primary){ color:#2a1b33; border-color:#d8cbbd; background:#fff; }
@keyframes slipIn{ from{ transform:translateY(24px) rotate(-1.5deg); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){ .jobslip{ animation:none; } }
/* phones: the shift briefing folds into a short strip so the game stays on screen */
@media (max-width:640px){
  .jobwork .ptitle h1{ font-size:34px; }
  .jobbrief{ padding:12px !important; gap:10px; margin-bottom:10px; }
  .jb-who img{ width:40px; height:40px; } .jb-who p{ font-size:13.5px; } .jb-who .small.dim{ display:none; }
  .jb-who .kick{ font-size:10.5px; letter-spacing:.12em; }
  .jb-stats{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; }
  .jb-stats > div{ padding:7px 6px; gap:1px; text-align:center; align-items:center; }
  .jb-stats > div > .small.dim:first-child{ font-size:10px; line-height:1.15; } .jb-stats > div > .small.dim:last-child{ display:none; }
  .jb-stats b{ font-size:13.5px; justify-content:center; } .jb-stats .chip{ display:none; }
  .jobslip{ padding:14px 14px 12px; gap:7px; } .jobslip h2{ font-size:19px; } .sl-score{ font-size:42px; } .sl-row{ font-size:13px; padding:4px 2px; }
  .jobslip .kick{ font-size:10.5px; letter-spacing:.1em; }
}
.jobslip .kick{ letter-spacing:.12em; }
/* the shift report on a pay slip: what happened on this shift, in the job's own terms */
.sl-report{ display:grid; grid-template-columns:repeat(auto-fit, minmax(70px, 1fr)); gap:6px; }
.sl-report > div{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 4px; border-radius:10px; background:color-mix(in srgb, var(--job) 12%, #f3ece2); }
.sl-report b{ font-size:17px; color:#2a1b33; } .sl-report span{ font-size:11px; color:#6d5d78; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:640px){ .sl-report b{ font-size:15px; } .sl-report > div{ padding:4px 3px; } }
/* phones: briefing plus the whole game fit on one screen, so Start isn't hidden under the bottom menu */
@media (max-width:640px){ .jobwork .jobhost{ height:max(440px, calc(100dvh - 400px)); } }

/* ================= The Sandbox Pit: a sandy ring, a rowdy crowd, read-and-react bouts ================= */
.pit{ --sand:#e8c48a; --sand2:#c99a5b; --wood:#5a3a22; }
.pit-hero{ position:relative; overflow:hidden; border-radius:22px; min-height:210px; display:flex; align-items:flex-end; border:1px solid rgba(232,196,138,.35);
  background:linear-gradient(180deg, rgba(20,10,4,.15) 0%, rgba(14,7,22,.55) 45%, rgba(14,7,22,.95) 100%), var(--bg) center 40%/cover; }
.pit-bunting{ position:absolute; left:0; right:0; top:0; height:20px; z-index:2; pointer-events:none; border-top:2px solid rgba(255,255,255,.35);
  background:repeating-linear-gradient(90deg, var(--chunky) 0 26px, var(--slick) 26px 52px, var(--sticky) 52px 78px, var(--fizzy) 78px 104px);
  -webkit-mask:conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 0 0/26px 100%; mask:conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 0 0/26px 100%; opacity:.9; }
.pit-crowd{ position:absolute; left:2%; right:2%; top:22%; display:flex; justify-content:space-between; z-index:1; pointer-events:none; }
.pit-crowd img{ width:clamp(24px, 4vw, 40px); height:auto; filter:brightness(.45) saturate(.75) drop-shadow(0 2px 2px rgba(0,0,0,.6));
  animation:pitCrowd calc(1.7s - var(--hype, .2) * .8s) ease-in-out infinite; animation-delay:calc(var(--i) * -.17s); transform-origin:50% 100%; }
@keyframes pitCrowd{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(calc(-3px - var(--hype, .2) * 9px)) } }
.pit-hero-in{ position:relative; z-index:3; display:flex; gap:16px; align-items:flex-end; padding:18px 20px; width:100%; }
.pit-champ{ width:86px; height:86px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:3px solid var(--sand); box-shadow:0 6px 18px rgba(0,0,0,.5); background:#1a0f08; }
.pit-hero .kick{ color:var(--sand); }
.pit-say{ margin:0; font:600 17px/1.35 var(--f-head); color:#fff; }
.pit-chips .chip{ background:rgba(13,7,22,.7); border-color:rgba(232,196,138,.35); }
.pit-chips .chip svg{ width:14px; height:14px; } .pit-chips .chip.dim{ opacity:.6; }
.pit-cols{ display:grid; grid-template-columns:minmax(0, 380px) minmax(0, 1fr); gap:18px; align-items:start; }
@media (max-width:900px){ .pit-cols{ grid-template-columns:1fr; } }
.pit-fighter{ border-color:rgba(232,196,138,.28) !important; }
.pf-me{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; align-items:center; }
.pf-name{ font:700 21px/1.1 var(--f-head); }
.pf-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
.pf-stats span{ display:flex; flex-direction:column; padding:6px 7px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); font-size:12px; font-weight:600; min-width:0; }
.pf-stats b{ font-size:17px; } .pf-stats small{ font-size:10.5px; color:var(--mute); line-height:1.15; font-weight:400; }
.pf-moves, .pf-sel{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.pf-sel{ margin:10px 0; }
/* a move card */
.mvc{ display:grid; gap:3px; text-align:left; padding:8px 10px; border-radius:12px; color:var(--ink); min-width:0; position:relative;
  background:linear-gradient(180deg, color-mix(in srgb, var(--sc) 20%, #1d1030), #160b25 75%); border:1px solid color-mix(in srgb, var(--sc) 45%, transparent);
  box-shadow:inset 0 3px 0 color-mix(in srgb, var(--sc) 70%, transparent); font:inherit; }
.mvc-top{ display:flex; align-items:center; gap:6px; }
.mvc-st{ font:700 10.5px/1 var(--f-head); letter-spacing:.12em; text-transform:uppercase; color:var(--sc); flex:1; }
.mvc-nm{ font:700 15px/1.15 var(--f-head); }
.mvc small{ font:500 12px/1.25 var(--f-body); color:var(--mute); }
.sti{ width:18px; height:18px; fill:var(--sc); flex:0 0 auto; filter:drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
.pips{ display:inline-flex; gap:3px; align-items:center; }
.pips i{ display:block; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.14); }
.pips.pow i.on{ background:var(--sc); }
button.mvc{ cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
button.mvc:hover:not(:disabled){ transform:translateY(-2px); box-shadow:inset 0 3px 0 var(--sc), 0 8px 18px color-mix(in srgb, var(--sc) 25%, transparent); }
button.mvc:active:not(:disabled){ transform:translateY(1px) scale(.98); }
button.mvc:disabled{ opacity:.45; cursor:default; }
.mvc.sel{ outline:2px solid var(--sc); outline-offset:1px; }
.mvc.lockd{ opacity:.5; } .mv-lock{ font:700 11px var(--f-head); color:var(--gold); }
.mv-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px; max-height:52vh; overflow:auto; padding:2px; margin-bottom:12px; }
.pf-special{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; background:color-mix(in srgb, var(--sc) 14%, var(--bg2)); border:1px dashed color-mix(in srgb, var(--sc) 55%, transparent); }
.pf-special .sti{ --sc:var(--fizzy); width:24px; height:24px; }
.pf-gear, .gear-list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.gear-list{ grid-template-columns:1fr; margin-bottom:12px; }
.gslot{ display:flex; gap:9px; align-items:center; padding:8px 10px; border-radius:12px; border:1px dashed var(--line2); background:rgba(255,255,255,.02); min-width:0; text-align:left; color:var(--ink); font:inherit; }
.gslot.on{ border-style:solid; border-color:rgba(232,196,138,.55); background:rgba(232,196,138,.07); }
.gslot.pick{ cursor:pointer; } .gslot .chip{ margin-left:auto; }
.gslot b{ display:block; font:700 13.5px/1.15 var(--f-head); } .gslot small{ display:block; font-size:11.5px; color:var(--mute); line-height:1.2; }
.gic{ width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; } .gic.empty{ font-size:22px; color:var(--mute); border-radius:10px; border:1px dashed var(--line2); }
.pit-how summary{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; list-style:none; gap:10px; }
.pit-how summary::-webkit-details-marker{ display:none; }
.pit-how[open] summary{ margin-bottom:8px; }
.pit-tri{ position:relative; width:220px; height:180px; margin:6px auto 4px; color:var(--mute); }
.t-arrows{ position:absolute; inset:0; width:100%; height:100%; } .t-arrows path{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-dasharray:4 4; }
.t-node{ position:absolute; display:flex; flex-direction:column; align-items:center; gap:2px; width:70px; }
.t-node .sti{ width:34px; height:34px; } .t-node b{ font:700 13px var(--f-head); color:var(--sc); }
.t-splat{ left:0; top:4px; } .t-grab{ right:0; top:4px; } .t-brace{ left:calc(50% - 35px); bottom:-4px; }
.t-splat .sti, .t-splat b{ --sc:var(--chunky); } .t-grab .sti, .t-grab b{ --sc:var(--sticky); } .t-brace .sti, .t-brace b{ --sc:var(--slick); }
.t-lab{ position:absolute; font:600 10px var(--f-head); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
.l1{ left:calc(50% - 16px); top:2px; } .l2{ right:8px; top:100px; } .l3{ left:6px; top:100px; }
.pit-rules{ margin:6px 0 0; padding-left:18px; display:grid; gap:6px; font-size:14px; color:var(--mute); } .pit-rules b{ color:var(--ink); }
/* the ladder */
.pit-ladder h3{ margin:0; }
.pit-foe{ display:grid; grid-template-columns:84px minmax(0,1fr); gap:12px; padding:12px; border-radius:16px; background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--tc); position:relative; }
.pit-foe.next{ border-color:rgba(157,255,46,.45); border-left-color:var(--tc); box-shadow:0 0 0 1px rgba(157,255,46,.18), 0 10px 26px rgba(157,255,46,.08); }
.pit-foe.locked{ opacity:.55; filter:saturate(.5); }
.pfo-art{ position:relative; width:84px; height:84px; border-radius:14px; background:radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--tc) 30%, transparent), transparent 70%), rgba(255,255,255,.03); }
.pfo-goop{ width:100%; height:100%; object-fit:contain; }
.pfo-face{ position:absolute; right:-6px; bottom:-6px; width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--panel); background:#1a0f08; }
.pfo-rung{ position:absolute; left:-7px; top:-7px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:#e8c48a; color:#2a1608; font:800 12px var(--f-head); box-shadow:0 2px 6px rgba(0,0,0,.4); }
.pfo-name{ font:700 16px/1.15 var(--f-head); }
.pfo-meta{ gap:6px; margin:4px 0; } .pfo-meta .chip{ font-size:12px; padding:3px 9px; } .chip.style{ background:rgba(232,196,138,.12); border-color:rgba(232,196,138,.35); color:#f1d9ae; }
.pfo-scout{ margin:2px 0 8px; } .pfo-scout svg{ width:13px; height:13px; vertical-align:-2px; }
.pfo-tiers{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
.pt-tier{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 6px; border-radius:11px; border:1px solid var(--line2); background:var(--bg2); color:var(--ink); cursor:pointer; font:inherit; }
.pt-tier b{ font:700 11px var(--f-head); letter-spacing:.1em; text-transform:uppercase; }
.pt-tier span{ display:inline-flex; gap:4px; align-items:center; font:600 13px var(--f-head); } .pt-tier span svg, .pt-tier span img{ width:14px; height:14px; }
.pt-tier:nth-child(1) b{ color:var(--sticky); } .pt-tier:nth-child(2) b{ color:var(--gold); } .pt-tier:nth-child(3) b{ color:var(--fizzy); }
.pt-tier:hover:not(:disabled){ border-color:rgba(232,196,138,.6); transform:translateY(-1px); }
.pt-tier.done{ border-color:rgba(157,255,46,.45); background:rgba(157,255,46,.06); } .pt-tier.done span{ color:var(--lime); }
.pt-tier:disabled{ opacity:.45; cursor:default; }
/* ---- a bout ---- */
.pitb{ display:grid; gap:10px; }
.pitb-head{ display:grid; gap:6px; }
.pitb-title{ margin:0; font-size:clamp(22px, 4.6vw, 40px); line-height:1.05; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.pitb-title .vs{ font:700 .55em var(--f-head); color:var(--mute); vertical-align:middle; }
.chip.tier{ flex:0 0 auto; font-weight:700; } .chip.tier.t1{ color:var(--sticky); } .chip.tier.t2{ color:var(--gold); border-color:rgba(255,201,60,.5); } .chip.tier.t3{ color:var(--fizzy); border-color:rgba(255,85,216,.5); }
.pitb-stage{ position:relative; overflow:hidden; border-radius:20px; aspect-ratio:16/8; max-height:470px; width:100%; border:1px solid rgba(232,196,138,.35);
  background:linear-gradient(180deg, rgba(14,7,22,.35) 0%, rgba(14,7,22,0) 35%), radial-gradient(ellipse 80% 45% at 50% 100%, rgba(232,196,138,.5), rgba(232,196,138,0) 70%), var(--bg) center 60%/cover; }
.pitb-stage .pit-crowd{ top:30%; }
.pitb-ring{ position:absolute; left:10%; right:10%; bottom:5%; height:24%; border:3px dashed rgba(255,248,230,.32); border-radius:50%; pointer-events:none; }
.hpbox{ position:absolute; top:24px; width:min(44%, 320px); z-index:4; padding:7px 10px 6px; border-radius:13px; background:rgba(13,7,22,.88); border:1px solid rgba(255,255,255,.12); display:grid; gap:4px; }
.hpbox.me{ left:10px; } .hpbox.foe{ right:10px; }
.hpbox .hn{ font:700 14px/1.1 var(--f-head); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.hpbar{ position:relative; height:11px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.hpbar i{ position:absolute; left:0; top:0; bottom:0; border-radius:inherit; }
.hpbar .trail{ background:rgba(255,255,255,.55); transition:width .5s ease; }
.hpbar .now{ background:linear-gradient(90deg, #7be04a, var(--lime)); transition:width .22s ease; } .hpbar .now.mid{ background:linear-gradient(90deg, #e6a91f, var(--gold)); } .hpbar .now.low{ background:linear-gradient(90deg, #c22b40, var(--danger)); }
.hpn{ font:600 12px var(--f-head); color:var(--mute); }
.pips.goo i{ width:10px; height:10px; border-radius:2px; transform:rotate(45deg); margin:0 1px; }
.pips.goo i.on{ background:var(--fizzy); box-shadow:0 0 8px var(--fizzy); }
.pips.goo.full i.on{ animation:pitGoo 1.1s ease-in-out infinite; }
@keyframes pitGoo{ 50%{ box-shadow:0 0 14px var(--fizzy), 0 0 2px #fff; } }
.pitb-round{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); z-index:4; font:400 16px/1 var(--f-label); letter-spacing:.14em; padding:5px 12px; border-radius:99px; background:rgba(13,7,22,.75); color:var(--sand, #e8c48a); }
.ftr{ position:absolute; bottom:8%; width:min(33%, 250px); z-index:3; }
.ftr.me{ left:9%; } .ftr.foe{ right:9%; }
.ftr.foe .goopfig .body{ transform:scaleX(-1); }
.ftr.lunge-r{ animation:lunger .42s; } .ftr.lunge-l{ animation:lungel .42s; } .ftr.hit{ animation:shake .4s; }
.ftr.charge{ animation:pitCharge .6s; } .ftr.ko{ animation:pitKo .9s ease-in forwards; }
@keyframes pitCharge{ 0%,100%{ filter:none; transform:none; } 40%{ filter:drop-shadow(0 0 18px var(--fizzy)) brightness(1.3); transform:scale(1.08); } }
@keyframes pitKo{ 0%{ transform:none; opacity:1; } 30%{ transform:translateY(-6%) rotate(-6deg); } 100%{ transform:translateY(14%) rotate(18deg) scale(.8, .55); opacity:.35; } }
.pitb-stage.shk{ animation:shake .35s; }
.pitb-tell{ position:absolute; left:50%; top:96px; transform:translate(-50%, 6px); z-index:5; width:min(78%, 440px); padding:9px 14px; border-radius:16px; background:#fbf6ee; color:#2a1b33; text-align:center;
  font:italic 600 14.5px/1.3 var(--f-body); box-shadow:0 10px 26px rgba(0,0,0,.45); opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
.pitb-tell::after{ content:''; position:absolute; right:22%; bottom:-9px; border:9px solid transparent; border-bottom:0; border-top-color:#fbf6ee; }
.pitb-tell.show{ opacity:1; transform:translate(-50%, 0); }
.pitb-tell .tl{ display:inline-flex; gap:6px; align-items:center; } .pitb-tell .sti.hint{ width:18px; height:18px; }
.pitb-tell .tl-k{ display:block; font:normal 700 12px/1.3 var(--f-head); color:#6b4e2a; margin-top:3px; }
.pitb-clash{ position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; gap:10px; pointer-events:none; }
.clc{ width:118px; padding:10px 8px 9px; border-radius:14px; background:#1b0f2c; border:1px solid color-mix(in srgb, var(--sc) 55%, transparent); border-top:5px solid var(--sc); text-align:center; display:grid; justify-items:center; gap:3px; opacity:0; box-shadow:0 14px 30px rgba(0,0,0,.55); }
.clc .sti, .clc svg{ width:30px; height:30px; fill:var(--sc); } .clc b{ font:700 14px/1.1 var(--f-head); } .clc small{ font:700 10.5px var(--f-head); letter-spacing:.1em; text-transform:uppercase; color:var(--sc); }
.clc.snack svg{ fill:none; stroke:var(--gold); }
.clv{ font:400 22px var(--f-display); color:var(--sand, #e8c48a); opacity:0; text-shadow:0 2px 0 #000; }
.pitb-clash.go .clc.me{ animation:clcL 1.25s cubic-bezier(.2,.9,.3,1) forwards; } .pitb-clash.go .clc.foe{ animation:clcR 1.25s cubic-bezier(.2,.9,.3,1) forwards; } .pitb-clash.go .clv{ animation:clcV 1.25s ease forwards; }
@keyframes clcL{ 0%{ opacity:0; transform:translateX(-140%) rotate(-14deg); } 28%{ opacity:1; transform:translateX(8px) rotate(-3deg); } 36%{ transform:translateX(0) rotate(-2deg); } 78%{ opacity:1; } 100%{ opacity:0; transform:translateY(-10px) rotate(-2deg); } }
@keyframes clcR{ 0%{ opacity:0; transform:translateX(140%) rotate(14deg); } 28%{ opacity:1; transform:translateX(-8px) rotate(3deg); } 36%{ transform:translateX(0) rotate(2deg); } 78%{ opacity:1; } 100%{ opacity:0; transform:translateY(-10px) rotate(2deg); } }
@keyframes clcV{ 0%,22%{ opacity:0; transform:scale(2); } 34%{ opacity:1; transform:scale(1); } 78%{ opacity:1; } 100%{ opacity:0; } }
.pitb-banner{ position:absolute; left:50%; top:30%; transform:translate(-50%, -50%); z-index:7; white-space:nowrap; font:400 clamp(20px, 4vw, 34px)/1 var(--f-display); color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.6), 0 0 22px rgba(0,0,0,.6); animation:pitBan 1.3s ease forwards; }
.pitb-banner.win{ color:var(--lime); } .pitb-banner.lose{ color:#ff7a8a; } .pitb-banner.even{ color:#f1d9ae; } .pitb-banner.sp{ color:var(--fizzy); font-size:clamp(26px, 5vw, 44px); } .pitb-banner.roar{ color:var(--gold); }
@keyframes pitBan{ 0%{ opacity:0; transform:translate(-50%, -30%) scale(.7); } 15%{ opacity:1; transform:translate(-50%, -50%) scale(1.08); } 25%{ transform:translate(-50%, -50%) scale(1); } 80%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%, -70%); } }
.pitb-fx{ position:absolute; inset:0; z-index:8; pointer-events:none; }
.pitb-fx .dmg{ font-size:34px; } .pitb-fx .dmg.recoil{ font-size:24px; color:#ffb0b9; } .pitb-fx .dmg.goo{ font:700 15px var(--f-head); color:var(--fizzy); text-shadow:0 2px 0 #000; }
.pitb-fx .dmg.eff{ font:700 14px var(--f-head); color:#fff; text-shadow:0 2px 0 #000; }
@media (prefers-reduced-motion: reduce){ .pit-crowd img{ animation:none; } .pitb-clash.go .clc, .pitb-clash.go .clv{ animation-duration:.01s; opacity:1; } }
.pitb-hype{ display:flex; align-items:center; gap:10px; padding:0 4px; }
.pitb-hype .hl{ display:inline-flex; gap:5px; align-items:center; font:700 11px var(--f-head); letter-spacing:.12em; text-transform:uppercase; color:var(--mute); } .pitb-hype .hl svg{ width:14px; height:14px; }
.pitb-hype .bar{ flex:1; height:9px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; }
.pitb-hype .bar i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--gold), var(--chunky)); transition:width .4s ease; }
.pitb-hype .roar{ font:400 15px var(--f-label); letter-spacing:.06em; color:var(--mute); min-width:48px; text-align:right; }
.pitb-hype.roar .bar i{ animation:pitRoar .9s ease-in-out infinite; } .pitb-hype.roar .roar{ color:var(--gold); }
@keyframes pitRoar{ 50%{ filter:brightness(1.5); box-shadow:0 0 12px var(--gold); } }
.pitb-ticker{ margin:0; min-height:20px; text-align:center; font:700 14.5px/1.3 var(--f-head); color:var(--ink); }
.pitb-ticker.good{ color:var(--lime); } .pitb-ticker.bad{ color:#ff8b98; }
.pt-moves{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.pt-moves .mvc{ min-height:76px; }
.pt-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; margin-top:8px; }
.mv-sp{ display:flex; gap:10px; align-items:center; text-align:left; padding:9px 12px; border-radius:14px; color:var(--ink); cursor:pointer; font:inherit; min-width:0;
  background:color-mix(in srgb, var(--sc) 12%, #160b25); border:1px solid color-mix(in srgb, var(--sc) 45%, transparent); }
.mv-sp .sti{ --sc:var(--fizzy); width:26px; height:26px; } .mv-sp b{ display:block; font:700 15px/1.1 var(--f-head); } .mv-sp small{ display:block; font-size:11.5px; color:var(--mute); line-height:1.2; }
.mv-sp.ready{ background:linear-gradient(135deg, color-mix(in srgb, var(--fizzy) 32%, #160b25), color-mix(in srgb, var(--sc) 26%, #160b25)); border-color:var(--fizzy); animation:pitReady 1.4s ease-in-out infinite; }
@keyframes pitReady{ 50%{ box-shadow:0 0 0 2px rgba(255,85,216,.4), 0 0 22px rgba(255,85,216,.35); } }
.mv-sp:disabled{ opacity:.55; cursor:default; animation:none; }
.mv-mini{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:66px; padding:6px 8px; border-radius:12px; border:1px solid var(--line2); background:var(--bg2); color:var(--ink); font:600 12px var(--f-head); cursor:pointer; }
.mv-mini svg{ width:18px; height:18px; } .mv-mini.ghost{ background:transparent; color:var(--mute); } .mv-mini:disabled{ opacity:.45; cursor:default; }
.pitb-log summary{ cursor:pointer; font:600 13px var(--f-head); color:var(--mute); }
.pitb-log ol{ margin:6px 0 0; padding-left:20px; max-height:200px; overflow:auto; display:grid; gap:3px; font-size:13px; color:var(--mute); } .pitb-log li.rv{ color:var(--ink); font-weight:600; margin-top:4px; } .pitb-log li.good{ color:var(--lime); } .pitb-log li.bad{ color:#ff8b98; }
.pit-result{ display:grid; gap:10px; justify-items:center; text-align:center; padding:16px; border-radius:18px; background:var(--panel); border:1px solid var(--line2); animation:slipIn .45s cubic-bezier(.2,.9,.3,1.2) both; }
.pit-result.win{ border-color:rgba(157,255,46,.55); box-shadow:0 0 0 1px rgba(157,255,46,.15), 0 16px 40px rgba(157,255,46,.08); } .pit-result.loss{ border-color:rgba(255,77,97,.45); }
.pit-result h2{ margin:0; font:400 clamp(24px, 5vw, 34px)/1.05 var(--f-display); color:var(--lime); } .pit-result.loss h2{ color:#ff8b98; }
.pr-stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; width:100%; max-width:440px; }
.pr-stats span{ display:flex; flex-direction:column; font-size:11px; color:var(--mute); text-transform:uppercase; letter-spacing:.06em; padding:6px 2px; border-radius:10px; background:rgba(255,255,255,.04); } .pr-stats b{ font-size:19px; color:var(--ink); }
.pr-rows{ width:100%; max-width:440px; display:grid; } .pr-rows > div{ display:flex; justify-content:space-between; gap:10px; padding:7px 4px; border-bottom:1px dashed rgba(255,255,255,.1); font-size:14px; }
.pr-rows .gearwin b{ color:var(--gold); }
.pr-tip{ margin:0; font-size:13.5px; color:var(--mute); max-width:440px; } .pr-tip svg{ width:14px; height:14px; vertical-align:-2px; }
@media (max-width:640px){
  .pit-hero{ min-height:190px; } .pit-hero-in{ padding:14px; gap:12px; } .pit-champ{ width:64px; height:64px; } .pit-say{ font-size:15px; }
  .pf-me{ grid-template-columns:90px minmax(0,1fr); }
  .pitb .crumbs{ display:none; }
  .pitb-stage{ aspect-ratio:auto; height:292px; }
  .hpbox{ top:22px; width:calc(50% - 15px); padding:6px 8px 5px; } .hpbox .hn{ font-size:13px; }
  .ftr{ width:38%; bottom:9%; } .ftr.me{ left:5%; } .ftr.foe{ right:5%; }
  .pitb-tell{ top:84px; width:88%; font-size:13.5px; padding:8px 10px; }
  .clc{ width:96px; padding:8px 6px; } .clc b{ font-size:12.5px; }
  .pt-moves .mvc{ min-height:70px; padding:7px 9px; } .pt-moves .mvc small{ display:none; }
  .pt-moves .mvc-nm{ font-size:14.5px; }
  .pitb-hype .roar{ font-size:13px; }
}
/* Pit layout fixes: the result banner sits between the fighters; computers keep the whole bout on screen; locked rungs are compact */
.pitb-banner{ top:58%; }
@media (min-width:900px){
  .pitb-stage{ aspect-ratio:auto; height:clamp(300px, 44vh, 410px); }
  .pt-moves{ grid-template-columns:repeat(4, minmax(0,1fr)); } .pt-moves .mvc{ min-height:84px; }
  .pitb-head{ gap:2px; } .pitb-title{ font-size:clamp(24px, 3vw, 34px); }
}
.pit-foe.locked{ grid-template-columns:52px minmax(0,1fr); padding:8px 12px; align-items:center; }
.pit-foe.locked .pfo-art{ width:52px; height:52px; } .pit-foe.locked .pfo-face{ display:none; } .pit-foe.locked .pfo-scout{ margin:0; }
.pit-foe.locked .pfo-meta{ margin:2px 0; }
.pitb-banner{ top:74%; }
@media (max-width:640px){ .pitb-banner{ top:72%; } }

/* ---------- phone home, first screen: the goop in a compact card (picture beside the name), then today's goal, then the chest */
@media (max-width:640px){
  body[data-view="home"] .welcome{ grid-template-columns:104px minmax(0,1fr); align-items:center; gap:8px 14px; padding:14px 16px; }
  body[data-view="home"] .welcome > a{ grid-column:1; grid-row:1 / span 3; align-self:center; }
  body[data-view="home"] .welcome .goopfig{ max-width:104px; }
  body[data-view="home"] .welcome > .stack{ display:contents; }
  body[data-view="home"] .welcome > .stack > .kick, body[data-view="home"] .welcome > .stack > .say, body[data-view="home"] .welcome > .stack > h2{ grid-column:2; margin:0; }
  body[data-view="home"] .welcome > .stack > h2{ font-size:34px !important; line-height:1; }
  body[data-view="home"] .welcome > .stack > .say{ font-size:14px; padding:8px 12px; }
  body[data-view="home"] .welcome > .stack > .needs, body[data-view="home"] .welcome > .stack > .row{ grid-column:1 / -1; }
  body[data-view="home"] .welcome .needs{ gap:4px; margin-top:4px; }
  body[data-view="home"] .welcome .need{ grid-template-columns:22px 62px minmax(0,1fr) auto; gap:8px; }
  body[data-view="home"] .welcome .need .orb{ width:22px; height:22px; }
  body[data-view="home"] .goal{ order:1; } body[data-view="home"] .alsorow{ order:2; } body[data-view="home"] .chest-tile{ order:3; } body[data-view="home"] details.more{ order:4; }
}

/* ---------- phone adoption: two goops a row, so all twelve fit in a few swipes instead of one per screen */
@media (max-width:640px){
  #adoptgrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  #adoptgrid .gcard{ padding:10px; gap:6px; }
  #adoptgrid .gcard .nm{ font-size:16px; }
  #adoptgrid .gcard .meta{ font-size:12px; gap:4px 6px; line-height:1.25; }
}

/* ---------- phone Pit hero: the crowd and bunting get the top band, the champion sits beside the title, the quote and chips run full width */
@media (max-width:640px){
  .pit-hero{ display:block; min-height:0; }
  .pit-crowd{ top:28px; }
  .pit-hero-in{ display:grid; grid-template-columns:56px minmax(0,1fr); align-items:center; gap:10px 12px; padding:82px 14px 14px; }
  .pit-hero-in > .stack{ display:contents; }
  .pit-champ{ grid-column:1; grid-row:1; width:56px; height:56px; border-width:2px; }
  .pit-hero .kick{ grid-column:2; grid-row:1; line-height:1.3; }
  .pit-say, .pit-chips{ grid-column:1 / -1; }
  .pit-chips{ gap:6px; } .pit-chips .chip{ font-size:12.5px; padding:5px 10px; }
}

/* ---------- festivals: the Festival Green (dailies.js). A banner with the festival's goop and its dates (or a countdown
   between festivals), the door calendar, the festival year and the keepsake shelf. */
.fest-hero{ position:relative; overflow:hidden; isolation:isolate; border-radius:26px; display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:22px; align-items:center; padding:22px 26px;
  border:1px solid rgba(255,210,63,.32); background:linear-gradient(100deg, rgba(14,7,24,.94) 0%, rgba(14,7,24,.72) 55%, rgba(14,7,24,.42) 100%), var(--bg) center 60%/cover; box-shadow:0 20px 50px rgba(0,0,0,.35); }
.fest-hero::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.75; animation:festDrift 16s linear infinite;
  background-image:radial-gradient(3px 3px at 14% 80%, rgba(255,230,160,.95), transparent), radial-gradient(4px 4px at 46% 92%, rgba(184,240,255,.9), transparent), radial-gradient(3px 3px at 72% 86%, rgba(255,182,240,.9), transparent), radial-gradient(4px 4px at 88% 96%, rgba(255,230,160,.9), transparent), radial-gradient(3px 3px at 30% 98%, rgba(184,240,255,.8), transparent); }
@keyframes festDrift{ from{ transform:translateY(10%); } to{ transform:translateY(-60%); } }
.fest-hero .fn-art{ width:150px; height:150px; object-fit:contain; filter:drop-shadow(0 10px 24px rgba(0,0,0,.55)); }
.fest-hero .fn-title{ font-size:clamp(34px, 5vw, 54px); margin:0; line-height:1; }
.fest-hero p{ color:var(--ink); max-width:60ch; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.fest-hero .fn-tag{ font:700 clamp(18px, 2.2vw, 24px)/1.3 var(--f-head); }
.fest-hero .kick{ color:var(--gold); }
.fest-glimmer .fest-hero{ border-color:rgba(164,107,255,.5); }
.fest-glimmer .fest-hero .kick{ color:#b8f0ff; }
.fn-count{ display:grid; justify-items:center; gap:4px; padding:14px 18px; min-width:118px; border-radius:20px; background:rgba(12,7,20,.72); border:1.5px solid var(--line2); }
.fn-count b{ font:800 48px/1 var(--f-head); color:var(--gold); font-variant-numeric:tabular-nums; }
.fn-count span{ font:700 12px/1.2 var(--f-head); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
@media (max-width:640px){
  .fest-hero{ grid-template-columns:84px minmax(0,1fr); gap:12px 14px; padding:16px; }
  .fest-hero .fn-art{ width:84px; height:84px; align-self:start; }
  .fn-count{ grid-column:1 / -1; grid-template-columns:auto auto; justify-content:start; align-items:baseline; gap:10px; min-width:0; padding:10px 14px; }
  .fn-count b{ font-size:34px; }
}

/* the door calendar: shut doors show the day, today's door glows gold, opened doors show their gift */
.gcal-grid{ display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:10px; }
@media (min-width:1100px){ .gcal-grid{ grid-template-columns:repeat(12, minmax(0,1fr)); } }
@media (max-width:900px){ .gcal-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); } }
@media (max-width:520px){ .gcal-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; } }
.gdoor{ position:relative; aspect-ratio:1; border-radius:16px; display:grid; place-items:center; padding:6px; font:inherit; color:var(--ink);
  border:1.5px solid var(--line); background:linear-gradient(160deg, rgba(58,28,92,.85), rgba(20,10,34,.92)); transition:transform .15s; }
.gdoor .gn{ position:absolute; top:7px; left:10px; font:800 14px/1 var(--f-head); color:var(--mute); }
.gdoor.shut svg{ width:18px; height:18px; color:var(--dim); opacity:.7; }
.gdoor.missed{ opacity:.42; }
.gdoor .gst{ font:700 11px/1 var(--f-head); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-top:10px; }
.gdoor.today{ cursor:pointer; border:2px solid var(--gold); background:radial-gradient(circle at 50% 42%, rgba(255,210,63,.34), rgba(58,28,92,.92) 72%);
  box-shadow:0 0 0 4px rgba(255,210,63,.12), 0 10px 26px rgba(255,210,63,.25); animation:doorGlow 1.8s ease-in-out infinite; }
.gdoor.today:hover{ transform:translateY(-2px); }
.gdoor.today .gn{ color:var(--gold); }
.gdoor .gcta{ font:800 14px/1 var(--f-head); letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-top:12px; }
.gdoor.opening{ animation:doorOpen .42s ease-in forwards; }
.gdoor.opened{ border-color:rgba(184,240,255,.3); background:radial-gradient(circle at 50% 48%, rgba(184,240,255,.16), rgba(20,10,34,.92) 72%); }
.gdoor.just{ animation:doorPop .5s cubic-bezier(.3,1.6,.5,1); border-color:var(--gold); }
.gd-it{ width:62%; height:62%; display:grid; place-items:center; margin-top:8px; } .gd-it > svg, .gd-it > img, .gd-it > span{ width:100%; height:100%; }
.gd-ess{ display:grid; justify-items:center; gap:3px; margin-top:10px; } .gd-ess svg{ width:26px; height:26px; } .gd-ess b{ font:800 13px/1 var(--f-head); color:var(--gold); }
@keyframes doorGlow{ 50%{ box-shadow:0 0 0 7px rgba(255,210,63,.07), 0 12px 32px rgba(255,210,63,.42); } }
@keyframes doorOpen{ to{ transform:perspective(520px) rotateY(-78deg); opacity:.25; } }
@keyframes doorPop{ from{ transform:scale(.6); } to{ transform:scale(1); } }

/* the festival year and the keepsake shelf */
.fy{ display:grid; gap:10px; }
.fy-row{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:6px 12px; align-items:center; padding:10px 12px; border-radius:16px; background:rgba(12,7,20,.45); border:1px solid var(--line); }
.fy-row img{ width:44px; height:44px; border-radius:14px; object-fit:cover; grid-row:span 2; }
.fy-row > span:last-child{ grid-column:2; }
.fk .item.fk-off{ opacity:.55; } .fk .item.fk-off .ic{ filter:grayscale(.85); }

@media (prefers-reduced-motion:reduce){ .fest-hero::after, .gdoor.today{ animation:none !important; } }


/* My House: goop sets (house.js) */
.hsets{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; }
.hset{ position:relative; display:inline-flex; align-items:center; gap:6px; padding:5px 12px 6px; border-radius:999px; font:700 13px/1.2 var(--f-head);
  color:#fff; background:color-mix(in srgb, var(--sc) 22%, rgba(13,7,22,.8)); border:2px solid color-mix(in srgb, var(--sc) 55%, transparent); }
.hset b{ color:var(--sc); }
.hset.on{ background:var(--sc); color:#1a0d24; border-color:var(--sc); box-shadow:0 0 14px color-mix(in srgb, var(--sc) 60%, transparent); }
.hset.on::after{ content:''; position:absolute; left:22%; bottom:-7px; width:9px; height:10px; background:var(--sc); border-radius:50% 50% 50% 50% / 35% 35% 65% 65%; }
.hset.on::before{ content:''; position:absolute; left:58%; bottom:-4px; width:6px; height:6px; background:var(--sc); border-radius:50%; }
.hstage.goopset::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:90; mix-blend-mode:screen;
  background:radial-gradient(ellipse 70% 45% at 50% 72%, color-mix(in srgb, var(--sg) 30%, transparent), transparent 70%); animation:hsetGlow 5s ease-in-out infinite; }
@keyframes hsetGlow{ 0%, 100%{ opacity:.55; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .hstage.goopset::after{ animation:none; opacity:.75; } }
/* My House: placed pieces wear their rarity colour while arranging */
.hstage.arrange .hslot.filled{ outline-color:color-mix(in srgb, var(--fr, #9dff2e) 75%, transparent); }
/* room tiles: dressed and finished sets */
.hrbadges{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:4px; }
.hrb{ font:700 11px/1.2 var(--f-head); padding:2px 7px; border-radius:999px; background:rgba(157,255,46,.16); color:var(--lime2, #c8ff86); }
.hrb.dot{ background:color-mix(in srgb, var(--sc) 22%, transparent); color:var(--sc); }
/* the placing window: set badges and the colour filter */
.hpfilter{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.hpfilter .chip{ cursor:pointer; font:inherit; font-size:13px; border:2px solid color-mix(in srgb, var(--sc, #9dff2e) 45%, transparent); background:transparent; color:inherit; }
.hpfilter .chip.on{ background:color-mix(in srgb, var(--sc, #9dff2e) 30%, transparent); border-color:var(--sc, #9dff2e); }
.item .hpb{ display:inline-block; margin-top:4px; padding:2px 8px; border-radius:999px; font:700 11px/1.25 var(--f-head); color:var(--sc); background:color-mix(in srgb, var(--sc) 16%, transparent); }
.item .hpb.done{ color:#1a0d24; background:var(--sc); box-shadow:0 0 10px color-mix(in srgb, var(--sc) 55%, transparent); }
.item .hpb.warn{ color:#ffb199; background:rgba(255,90,60,.16); }
.item[hidden]{ display:none !important; }
/* the Carpenter's preview: what the piece does for a set */
.hpv-set{ display:block; margin-top:4px; padding-left:8px; border-left:3px solid var(--sc); }
.hpv-set b{ color:var(--sc); }
/* the Sets book */
.hbook-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:12px; }
.hbset{ position:relative; display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb, var(--sc) 14%, rgba(20,10,34,.92)), rgba(13,7,22,.92)); border:2px solid color-mix(in srgb, var(--sc) 35%, transparent); }
.hbset::before{ content:''; position:absolute; top:-2px; left:14%; width:16px; height:20px; background:color-mix(in srgb, var(--sc) 55%, transparent); border-radius:0 0 50% 50% / 0 0 70% 70%; }
.hbset::after{ content:''; position:absolute; top:-2px; left:24%; width:9px; height:12px; background:color-mix(in srgb, var(--sc) 40%, transparent); border-radius:0 0 50% 50% / 0 0 70% 70%; }
.hbset.paid{ border-color:var(--sc); box-shadow:0 0 18px color-mix(in srgb, var(--sc) 30%, transparent); }
.hbset header{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.hbset header b{ color:var(--sc); font:800 17px/1.2 var(--f-head); }
.hbset-pcs{ display:flex; flex-wrap:wrap; gap:6px; }
.hbp{ width:46px; height:46px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.05); }
.hbp img{ max-width:40px; max-height:40px; object-fit:contain; }
.hbp.no img{ filter:brightness(0) invert(1) opacity(.16); }
.hbset footer{ color:var(--muted, #b9a8d6); }
.hbs-ok{ color:var(--sc); font-weight:800; }
/* the ribbon when a set is finished or a room is dressed */
.hribbon{ position:absolute; left:50%; top:16%; z-index:96; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:12px 26px 14px; border-radius:20px; background:var(--sc, #9dff2e); color:#1a0d24; text-align:center; white-space:nowrap;
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 26px color-mix(in srgb, var(--sc, #9dff2e) 60%, transparent);
  transform:translate(-50%, 0); animation:hribbon 2.8s cubic-bezier(.2,.9,.3,1.2) forwards; }
.hribbon b{ font:900 clamp(18px, 4cqw, 30px)/1.1 var(--f-head); }
.hribbon small{ font:700 13px/1.2 var(--f-head); opacity:.8; }
.hribbon::after{ content:''; position:absolute; left:30%; bottom:-10px; width:14px; height:16px; background:inherit; border-radius:0 0 50% 50% / 0 0 70% 70%; }
@keyframes hribbon{ 0%{ opacity:0; transform:translate(-50%, -30px) scale(.6); } 14%{ opacity:1; transform:translate(-50%, 0) scale(1.06); } 22%{ transform:translate(-50%, 0) scale(1); }
  80%{ opacity:1; transform:translate(-50%, 0) scale(1); } 100%{ opacity:0; transform:translate(-50%, 10px) scale(.96); } }
/* the placing window's tiles scroll inside the window; rows keep their full height (they used to squash on phones and hide the names) */
.grid.sm.hpgrid{ max-height:58vh; overflow:auto; grid-template-columns:repeat(auto-fill, minmax(min(100%, 128px), 1fr)); grid-auto-rows:max-content; align-content:start; padding:2px; }