/* duckrunx — app skin on the --sx-* contract (core.css loads first).
   Identity: sunny duck yellow on a deep night-river blue, teal water glow.
   Motion personality: playful (set on <html data-motion="playful">).
   Design law (Joey, Nov 10 2026): NO boxed-card dashboard. The river is the
   page's spine; content sits OPEN on its banks in loose clusters, and section
   markers borrow the GAME's broadcast flag language (skewed, hard sticker
   shadow, italic caps — same family as the overlay's race flags). The only
   hero moment is the pond count + Start race. Copy stays terse: labels, not
   documentation. */
/* Fonts (Joey pick, Nov 10: cartoony, it's a duck race): Luckiest Guy carries
   the loud broadcast voice (titles, flags, the big angular buttons, stat
   numerals); Baloo 2 keeps body copy rounded and readable. */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Baloo+2:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  /* brand */
  --duck:#ffc93c;        /* sunny duck yellow */
  --duck-deep:#ffb020;   /* beak orange-gold */
  --river:#2ec4b6;       /* water teal */
  --night:#0a1016;       /* night-river base */
  --sand:#d9b36b;        /* river banks */

  /* --sx-* mapping (the bridge that drives the shared chrome) */
  --sx-bg:var(--night);
  --sx-surface:#111a22; --sx-surface2:#17232d;
  --sx-border:#24323d; --sx-border2:#31424f;
  --sx-text:#eaf1f4; --sx-muted:#8aa0ab; --sx-muted2:#a6bac4; --sx-faint:#5f7580;
  --sx-accent:var(--duck); --sx-accent2:var(--river);
  --sx-accent-ink:#1d1605;           /* dark ink on the yellow */
  --sx-accent-soft:#241d08;
  --sx-accent-hover:#ffd45e;
  --sx-glow-1:var(--duck);
  --sx-glow-2:var(--river);
  --sx-bg-hi:color-mix(in srgb,var(--night) 88%,#2ec4b6);
  --sx-bg-lo:color-mix(in srgb,var(--night) 80%,#000);
  --sx-font:'Baloo 2',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-loud:'Luckiest Guy','Baloo 2',sans-serif;
}

/* ── gate ───────────────────────────────────────────────────────────────── */
.gate{max-width:420px;margin:18vh auto 0;text-align:center;color:var(--sx-muted);font-size:15px}

/* ── the race-flag marker: the game's broadcast language, miniature ──────── */
.flag{display:inline-block;margin-bottom:16px;padding:7px 18px 5px;
  font-family:var(--font-loud);font-size:13px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;
  color:#10151c;background:var(--duck);
  transform:skewX(-8deg) rotate(-.6deg);
  box-shadow:5px 5px 0 rgba(4,8,12,.5);
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.flag.teal{background:var(--river);color:#06201d}
.flag .sx-mono{font-size:12px;letter-spacing:.14em}

/* ── signed out: the game IS the hero ───────────────────────────────────── */
.hello{margin:0;padding:0}

.hero{position:relative;height:min(74vh,680px);min-height:430px;overflow:hidden;
  border-bottom:1px solid var(--sx-border)}
.hero iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  pointer-events:none;opacity:0;transition:opacity 1.2s var(--sx-ease-out)}
.hero iframe.on{opacity:1}
.hero-poster{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(42vh,340px);filter:drop-shadow(0 30px 60px rgba(0,0,0,.45));
  animation:posterbob 4.2s var(--sx-ease-in-out) infinite}
@keyframes posterbob{0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}
  50%{transform:translate(-50%,-54%) rotate(2deg)}}
/* night-river grade so the copy reads over bright daylight gameplay */
.hero-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    color-mix(in srgb,var(--night) 96%,transparent) 0%,
    color-mix(in srgb,var(--night) 55%,transparent) 30%,
    color-mix(in srgb,var(--night) 18%,transparent) 55%,
    color-mix(in srgb,var(--night) 42%,transparent) 100%)}

/* broadcast corner chip, not a sentence */
.live-chip{position:absolute;top:18px;right:20px;z-index:2;
  display:flex;align-items:center;gap:7px;padding:6px 13px 4px;
  font-family:var(--font-loud);font-size:11px;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:#f2f7f9;
  background:rgba(10,16,22,.72);transform:skewX(-8deg);
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.live-dot{width:7px;height:7px;border-radius:50%;background:#ff5d5d;flex:none;
  box-shadow:0 0 9px #ff5d5d;animation:livepulse 2s var(--sx-ease-in-out) infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.35}}

.hero-copy{position:absolute;left:0;right:0;bottom:clamp(26px,7vh,64px);
  text-align:center;padding:0 20px}
.hero-copy h1{margin:0;font-size:clamp(52px,9vw,104px);line-height:.95;
  font-family:var(--font-loud);font-weight:400;letter-spacing:.02em;transform:skewX(-4deg);
  color:#fff;text-shadow:0 5px 0 rgba(0,0,0,.45),0 18px 50px rgba(0,0,0,.6)}
.hero-copy h1 b{color:var(--duck)}
.hero-copy .tag{margin:14px auto 22px;max-width:560px;font-size:clamp(15px,2vw,18px);
  font-weight:500;color:#f2f7f9;text-shadow:0 2px 12px rgba(0,0,0,.75)}
.cta-row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.cta-row .sx-btn{font-size:16px;padding:14px 28px 11px;
  font-family:var(--font-loud);font-weight:400;letter-spacing:.06em;
  box-shadow:0 0 30px color-mix(in srgb,var(--duck) 40%,transparent)}

.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:34px;max-width:920px;margin:0 auto;padding:54px 24px 80px}
.how-step p{margin:0;font-size:14px;line-height:1.6;color:var(--sx-muted2)}

@media (max-width:759px),(prefers-reduced-motion:reduce){
  .hero iframe{display:none}
}
@media (min-width:760px) and (prefers-reduced-motion:no-preference){
  .hero-poster{display:none}
}

/* ── dashboard: content on the left bank, the river runs the page and
      empties into the pond at the bottom left (Joey redline Nov 10) ──────── */
.dash{position:relative;max-width:1160px;margin:0 auto;padding:34px 24px 120px;
  min-height:calc(100vh - 220px)}

.river{position:absolute;top:-10px;bottom:0;left:0;right:0;
  pointer-events:none;z-index:0}
.river-svg{width:100%;height:100%;display:block}
/* stroke widths are screen px (the path is non-scaling-stroke) so the
   horizontal bottom sweep stays as wide as the vertical run */
/* banks lifted .14 -> .22 (Joey, Nov 10 night): invisible banks left the
   scenery looking unanchored — now there's a shore for things to sit on */
.rv-bank{fill:none;stroke-width:92;stroke-linecap:round;opacity:.22}
.rv-water{fill:none;stroke-width:64;stroke-linecap:round;opacity:.68}
/* downstream current: three streak layers at different speeds */
.rv-flow{fill:none;stroke-linecap:round;opacity:.3}
.rv-flow.a{stroke-width:3;stroke-dasharray:10 150;animation:flow 7s linear infinite}
.rv-flow.b{stroke-width:2;stroke-dasharray:7 110;animation:flow 4.6s linear infinite;
  animation-delay:-2s;opacity:.2}
.rv-flow.c{stroke-width:4;stroke-dasharray:14 240;animation:flow 10s linear infinite;
  animation-delay:-5s;opacity:.14}
@keyframes flow{to{stroke-dashoffset:-1000}}

.river-duck{position:absolute;left:0;top:0;width:58px;height:58px;
  margin:-36px 0 0 -29px;will-change:transform;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
/* parked at the river's end by app.js placePond(), rim opened to the river.
   WAY bigger + high on the left (Joey redline Nov 10 night): the pond is the
   page's stage — the title sits on its shore, the stats float on its water,
   and every joined racer's mini duck is visibly bobbing in it */
.pond-svg{position:absolute;left:0;top:0;width:min(760px,64vw)}
/* one bobbing mini duck per joined racer, parked in the pond (app.js) */
.pond-duck{position:absolute;left:0;top:0;width:38px;height:38px;
  margin:-25px 0 0 -19px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4));
  animation:pbob 3.1s var(--sx-ease-in-out) infinite}
@keyframes pbob{0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-4px) rotate(4deg)}}
/* riverside life, placed in px by app.js (inside the stretchy svg they squash).
   Scenery LAW (Joey, Nov 10 night): everything lives ON the waterway — river
   banks and pond rim — nothing floats in empty page space. Sizes are big
   enough to read as pond life, not dust. */
.lily{position:absolute;width:26px;height:16px;border-radius:50%;
  background:#48b89f;opacity:.85;margin:-8px 0 0 -13px}
.lily::after{content:'';position:absolute;right:-1px;top:3px;width:10px;height:7px;
  border-radius:50%;background:var(--night);opacity:.6}
.rock{position:absolute;width:22px;height:15px;border-radius:50%;
  background:#6b7682;opacity:.8;margin:-7px 0 0 -11px}
.rock::after{content:'';position:absolute;left:4px;top:3px;width:10px;height:6px;
  border-radius:50%;background:#8d97a3}
/* reed clumps: cloned + parked on the banks/rim by app.js placeDecor() */
.reeds{position:absolute;width:100px;opacity:.55;z-index:0;pointer-events:none;
  margin:-138px 0 0 -50px} /* base of the clump sits ON the placement point */
@media (prefers-reduced-motion:reduce){
  .pond-duck{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .rv-flow{animation:none}
}

/* the three views share one narrow left column, settled into the viewport */
.view{position:relative;z-index:1;max-width:470px;
  padding-top:clamp(10px,7vh,86px)}

.pond-head{display:flex;align-items:center;gap:18px;margin-bottom:20px;flex-wrap:wrap}
/* the streamer's name IS the page headline (Joey redline Nov 10: bigger) */
.pond-title{margin:0;font-size:clamp(32px,4.4vw,48px);line-height:1;
  font-family:var(--font-loud);font-weight:400;letter-spacing:.03em;text-transform:uppercase;
  transform:skewX(-4deg);color:#fff;
  text-shadow:0 4px 0 rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.5)}
.pond-title b{color:var(--duck)}
/* phase chip only earns its spot mid-race; lobby shows nothing. It wears the
   same sticker-flag cut as everything else (the rounded pill was off-family).
   [hidden] must still win over the chip's own display rule */
.phase-chip{border:0;border-radius:0;padding:5px 12px 3px;
  font-family:var(--font-loud);font-weight:400;text-transform:uppercase;
  letter-spacing:.18em;font-size:10.5px;color:#06201d;background:var(--river);
  transform:skewX(-8deg);box-shadow:4px 4px 0 rgba(4,8,12,.5);
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.phase-chip[hidden]{display:none}
.phase-chip.live{color:#1d1605;background:var(--duck);
  animation:livepulse 2s var(--sx-ease-in-out) infinite}

.stat-row{display:flex;align-items:flex-end;gap:44px;flex-wrap:wrap}
.race-stat{display:flex;flex-direction:column;gap:5px;min-width:96px}
.race-stat .n{font-size:88px;font-family:var(--font-loud);font-weight:400;
  line-height:.9;color:var(--sx-accent);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  text-shadow:0 6px 0 rgba(0,0,0,.35)}
/* labels float on pond water now: lighter ink + a shadow to hold contrast */
.race-stat .l{font-size:12px;text-transform:uppercase;letter-spacing:.22em;
  color:#cfe3e0;text-shadow:0 1px 6px rgba(0,0,0,.55)}

/* the two doors wear the game's broadcast cut: angular, hard shadow, loud */
.go-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:38px 0 26px}
.btn-watch,#btn-start{border:0;border-radius:0;font-size:16px;
  font-family:var(--font-loud);font-weight:400;
  text-transform:uppercase;letter-spacing:.08em;
  padding:17px 32px 13px;transform:skewX(-6deg);
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
  box-shadow:6px 6px 0 rgba(4,8,12,.5);
  transition:transform var(--sx-dur-1,140ms) var(--sx-ease-out),filter .14s}
.btn-watch{background:var(--river);color:#06201d}
.btn-watch:hover{background:#43d6c8;color:#06201d;transform:skewX(-6deg) translateY(-2px)}
#btn-start:not(:disabled):hover{transform:skewX(-6deg) translateY(-2px)}
#btn-start:not(:disabled){box-shadow:6px 6px 0 rgba(4,8,12,.5),0 0 30px color-mix(in srgb,var(--duck) 35%,transparent)}
#btn-start:active,.btn-watch:active{transform:skewX(-6deg) scale(.97)}
/* quiet but in-family: same angular cut as its two loud neighbours, low volume
   (the rounded grey pill clashed with the skewed slabs beside it) */
.btn-quiet{border:0;border-radius:0;opacity:.75;padding:12px 20px 10px;
  font-size:13px;background:var(--sx-surface2);color:var(--sx-muted2);
  transform:skewX(-6deg);
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.btn-quiet:hover{opacity:1}

.subnav{display:flex;gap:20px;margin-top:58px}
/* nav flags are DOORS, label flags aren't: links carry a › tell */
.subnav .flag{margin:0;text-decoration:none;cursor:pointer;
  transition:transform var(--sx-dur-1,140ms) var(--sx-ease-out),filter .14s}
.subnav .flag::after{content:' ›';opacity:.6}
.subnav .flag:hover{transform:skewX(-8deg) rotate(-.6deg) translateY(-2px);filter:brightness(1.07)}

.back{display:block;width:max-content;margin-bottom:26px;font-size:13px;font-weight:600;
  color:var(--sx-muted2);text-decoration:none}
.back::before{content:'← '}
.back:hover{color:var(--sx-text)}
.flag.gap{margin-top:44px}

/* overlay url row */
.url-row{display:flex;gap:8px}
.url-row input{font-family:var(--sx-mono);font-size:13px;flex:1;min-width:0}
.hint{font-size:12.5px;color:var(--sx-muted);margin:10px 0 0;line-height:1.55;max-width:420px}

/* settings: a quiet list, hairline separators only */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 2px}
.set-row + .set-row{border-top:1px solid color-mix(in srgb,var(--sx-border) 55%,transparent)}
.set-row .lbl{font-weight:600;font-size:14.5px}
.set-row .sub{display:block;font-weight:400;font-size:12px;color:#b9d2cd;margin-top:2px;
  text-shadow:0 1px 5px rgba(0,0,0,.45)} /* legible on pond water */
.set-row .sub .sx-mono{font-size:11.5px}
.set-row input[type=number]{width:86px;text-align:center}
/* course picker: mini sticker flags, picked one wears the duck yellow */
.map-pick{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.map-pick .map-opt{padding:7px 14px 5px;border:0;cursor:pointer;
  font-family:var(--font-loud);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:#b9d2cd;background:rgba(10,16,22,.72);
  transform:skewX(-8deg);box-shadow:3px 3px 0 rgba(4,8,12,.5);
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
  transition:transform var(--sx-dur-1,140ms) var(--sx-ease-out),filter .14s}
.map-pick .map-opt:hover{transform:skewX(-8deg) translateY(-2px);filter:brightness(1.12)}
.map-pick .map-opt.on{color:#10151c;background:var(--duck)}

/* chat status: a quiet broadcast corner, top right (Joey redline Nov 10).
   Dressed like a broadcast chip, not a bare sentence (Nov 10 night) */
.chat-corner{position:absolute;top:30px;right:24px;z-index:1;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px}
/* route() hides the corner + duck spot off the home view; display:flex would
   beat the hidden attr (same trap as the phase chip) */
.chat-corner[hidden],.duck-spot[hidden]{display:none}
.chat-state{display:flex;align-items:center;gap:10px;font-size:13px;
  font-weight:600;color:var(--sx-muted2);flex-wrap:wrap;
  padding:8px 16px;background:color-mix(in srgb,var(--sx-surface) 82%,transparent);
  transform:skewX(-6deg);
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.chat-act .sx-btn{border:0;border-radius:0;font-size:12.5px;font-weight:700;
  padding:9px 18px;background:var(--river);color:#06201d;transform:skewX(-6deg);
  box-shadow:4px 4px 0 rgba(4,8,12,.5);
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.chat-dot{width:10px;height:10px;border-radius:50%;background:var(--sx-faint);flex:none}
.chat-dot.ok{background:var(--sx-ok);box-shadow:0 0 10px color-mix(in srgb,var(--sx-ok) 60%,transparent)}
.chat-dot.warn{background:var(--duck-deep)}
.chat-dot.err{background:var(--sx-danger)}
.chat-act{margin-top:12px}
.chat-act:empty{display:none}
.perf-warn{margin:14px 0 0;max-width:430px;font-size:13px;line-height:1.55;
  color:var(--duck-deep)}
.perf-warn::before{content:'⚠ '}

/* ── your duck: sits IN the water on the river's bank ───────────────────── */
/* anchored to the river by app.js placeDecor() (left/top set there) so it
   reads as part of the waterway, never floating in page blackness */
.duck-spot{position:absolute;left:0;top:0;margin:-120px 0 0 -124px;z-index:1;
  width:248px;display:flex;flex-direction:column;align-items:center;text-align:center}
.duck-sit{position:relative;width:200px;margin-top:6px}
.duck-sit img{position:relative;z-index:1;display:block;width:150px;margin:0 auto;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.45));
  animation:ducksit 4.6s var(--sx-ease-in-out) infinite}
/* the water sits UP on the duck's keel (the hero png has empty space under
   the body — at bottom:-8px the pool floated below the duck, saucer-style) */
.duck-water{position:absolute;left:-5%;bottom:14px;width:110%;z-index:2}
@keyframes ducksit{0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-4px) rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){
  .duck-sit img{animation:none}
}

/* joined-while-watching pulse on the count */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.race-stat .n.pop{animation:pop .4s var(--sx-spring)}

/* ── standings + race log: open lists pinned to the bank ────────────────── */
.dash-list{list-style:none;margin:0;padding:0;max-height:330px;overflow-y:auto}
.dash-list li{display:flex;align-items:center;gap:10px;padding:8px 2px;font-size:13.5px;
  border-top:1px solid color-mix(in srgb,var(--sx-border) 55%,transparent)}
.dash-list li:first-child{border-top:0}
.dash-list li.empty{color:var(--sx-muted);font-size:13px}
.dash-list .rank{min-width:24px;font-weight:800;font-style:italic;color:var(--sx-accent);font-variant-numeric:tabular-nums}
.dash-list .who{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-list .pts{font-weight:700;font-variant-numeric:tabular-nums}
.dash-list .meta{font-size:12px;color:var(--sx-muted);white-space:nowrap}

@media (max-width:860px){
  /* single column: the river quiets down behind the content */
  .river{opacity:.5}
  .rv-bank{stroke-width:64}
  .rv-water{stroke-width:46}
  .river-duck{width:44px;height:44px;margin:-28px 0 0 -22px}
  .pond-svg{width:min(360px,74vw)}
  .view{max-width:none}
  .race-stat .n{font-size:58px}
  /* the corners fold back into the flow; the pond keeps the page's tail */
  .dash{padding-bottom:320px}
  .chat-corner{position:static;align-items:flex-start;margin-top:30px}
  .duck-spot{position:static;width:auto;margin:44px 0 0;align-items:flex-start;text-align:left}
}
@media (max-width:560px){
  .go-row .sx-btn{flex:1 1 auto;text-align:center}
  .btn-watch,#btn-start{padding:14px 20px;font-size:14.5px}
  .pond-title{font-size:26px}
}

/* ── customize studio (#duck): preview left, wardrobe right, open layout ── */
#view-duck{max-width:980px}
.duck-studio{display:flex;gap:34px;align-items:flex-start}
/* sticky: the frame rides along as the wardrobe scrolls, so every pick is
   seen the moment it lands on the duck */
.duck-stage{position:sticky;top:84px;z-index:10;flex:0 0 46%;aspect-ratio:4/3;overflow:hidden;
  border-radius:18px;border:1px solid var(--sx-border2);
  box-shadow:0 18px 50px rgba(0,0,0,.42);
  transform:rotate(-.5deg)}
.duck-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:grab}
.spin-toggle{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--sx-border2);color:var(--sx-text);
  background:color-mix(in srgb,var(--sx-surface) 82%,transparent);backdrop-filter:blur(7px);
  transition:transform var(--sx-dur-1,140ms) var(--sx-spring,ease-out),filter .15s}
.spin-toggle:hover{transform:scale(1.1)}
.spin-toggle:active{transform:scale(.94)}
.spin-toggle .ic-play{display:none}
.spin-toggle.paused .ic-play{display:block}
.spin-toggle.paused .ic-pause{display:none}
.spin-hint{position:absolute;top:14px;left:14px;margin:0;font-size:11.5px;font-weight:600;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none;opacity:0;
  animation:spin-hint 6s var(--sx-ease-out,ease-out) 1.2s forwards}
@keyframes spin-hint{0%{opacity:0;transform:translateY(4px)}8%{opacity:.85;transform:none}
  80%{opacity:.85}100%{opacity:0}}
.duck-opts{flex:1 1 auto;min-width:0}
.duck-edit{margin:10px 0 0;font-size:11px;padding:6px 14px 4px;text-decoration:none;cursor:pointer}
.duck-edit:hover{transform:skewX(-8deg) rotate(-.6deg) translateY(-2px);filter:brightness(1.07)}

/* swatches */
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 14px}
.swatches.grid{display:grid;grid-template-columns:repeat(auto-fill,26px);gap:7px;margin-bottom:6px}
.sw{width:26px;height:26px;border-radius:8px;border:2px solid transparent;cursor:pointer;
  transition:transform var(--sx-dur-1,140ms) var(--sx-spring,ease-out)}
.sw:hover{transform:scale(1.18)}
.sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--duck);transform:scale(1.12)}
.sw-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--sx-border2);background:var(--sx-surface);color:var(--sx-text);
  font-family:var(--sx-font);font-size:13px;font-weight:600;cursor:pointer;
  transition:transform var(--sx-dur-1,140ms) var(--sx-spring,ease-out),border-color .15s}
.sw-chip:hover{transform:translateY(-2px)}
.sw-chip.on{border-color:var(--duck);box-shadow:0 0 0 1px var(--duck)}
.sw-chip .dot{width:14px;height:14px;border-radius:50%;background:#555}
.sw-chip .dot.mystery{background:conic-gradient(#ff5959,#ffb13d,#ffe93d,#5ee05e,#58b5ff,#b06bff,#ff5959);
  filter:saturate(.45) brightness(.9)}

/* premium shelves */
.shelf{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 10px}
.shelf-tile{display:flex;flex-direction:column;align-items:center;gap:5px;width:92px;
  padding:10px 6px 9px;border-radius:14px;border:1px solid var(--sx-border);
  background:color-mix(in srgb,var(--sx-surface) 72%,transparent);cursor:pointer;
  color:var(--sx-text);font-family:var(--sx-font);
  transition:transform var(--sx-dur-1,140ms) var(--sx-spring,ease-out),border-color .15s,box-shadow .15s}
.shelf-tile:hover{transform:translateY(-3px);border-color:var(--sx-border2)}
.shelf-tile:active{transform:scale(.96)}
.shelf-tile.on{border-color:var(--duck);box-shadow:0 0 0 1px var(--duck),0 10px 26px rgba(0,0,0,.3)}
.shelf-tile .tp{width:58px;height:38px;border-radius:9px;background:var(--sx-surface2);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.shelf-tile .tp svg{width:40px;height:26px;display:block}
.shelf-tile .tp .pimg{width:100%;height:100%;object-fit:cover;display:block}
.shelf-tile .tn{font-size:12px;font-weight:700;line-height:1.1;text-align:center}
.shelf-tile .tc{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;background:var(--sx-accent-soft);color:var(--duck)}
.shelf-tile .tc.own{background:color-mix(in srgb,var(--river) 22%,transparent);color:var(--river)}
.shelf-tile.try{border-color:var(--duck);border-style:dashed;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--duck) 55%,transparent),0 10px 26px rgba(0,0,0,.3)}

/* try-on bar: floats over the pond while something unowned is on the duck */
.try-bar{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:9px;
  padding:9px 10px 9px 14px;border-radius:13px;border:1px solid var(--sx-border2);
  background:color-mix(in srgb,var(--sx-surface) 88%,transparent);backdrop-filter:blur(7px);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  animation:try-rise var(--sx-dur-2,240ms) var(--sx-spring,ease-out)}
@keyframes try-rise{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.try-bar .try-note{flex:1 1 auto;min-width:0;font-size:12px;line-height:1.25}
.try-bar .try-note b{color:var(--duck)}
.try-bar button{font-family:var(--sx-font);font-size:11.5px;font-weight:800;cursor:pointer;
  border-radius:999px;padding:7px 13px;white-space:nowrap;
  transition:transform var(--sx-dur-1,140ms) var(--sx-spring,ease-out),filter .15s,background .15s}
.try-bar button:active{transform:scale(.96)}
.try-bar .tb-buy{border:0;background:var(--duck);color:#1d1708}
.try-bar .tb-buy:hover{filter:brightness(1.08)}
.try-bar .tb-off{border:1px solid var(--sx-border2);background:transparent;color:var(--sx-text)}
.try-bar .tb-off:hover{background:color-mix(in srgb,var(--sx-surface2) 70%,transparent)}

@media (max-width:860px){
  .duck-studio{flex-direction:column}
  .duck-stage{flex-basis:auto;width:100%;max-width:520px}
}
body.studio-open .river{opacity:.14}