/* depth.css: the shared depth + EMBROIDERY tokens for the in-world chrome that floats over the painting (the visitor tab,
   the SOUND tab, the SPEEDRUN BOARD panel, the Wrapped tray), so every piece reads as one physical set.
   Loaded last on index.html. The cardboard kit itself is style.css (cb-*); this adds the second material, KCC felt.

   THE SET  cardboard = structure (cards, trays, digit tiles) · felt patches = KCC branding (tabs, headers, labels,
            buttons) · brass = hardware (brads) · printed ink = information.
   LIGHT    one low sun behind-RIGHT: every shadow falls down-left, every rim catches on the right, felt is lighter on
            its right half. Use the --dp-shadow-* tokens below instead of hand-rolled shadows.
   A PATCH  felt face (--dp-felt fuzz over --felt) · a merrowed SATIN rim in KCC gold thread (diagonal threads, the
            border-box) · a cream RUNNING STITCH just inside it (::after, dashed + lifted by two hard drop-shadows) ·
            lettering in raised thread (--dp-thread-text). Hover = a short felt "press" bounce (scale only); press = squash.
            Set the colours per piece: --felt, --thread (stitch + letters), --sat / --sat-dk / --sat-lt (the rim).
   Everything is static paint: no loops, hover/press only, nothing moves with prefers-reduced-motion. */

:root{
  /* shadows, sun behind-right: glued flat < hanging tab < card standing off the world */
  --dp-shadow-glued:-1.5px 2px 1.5px rgba(30,12,2,.38);
  --dp-shadow-hang:-4px 6px 6px rgba(26,10,2,.42),-1px 2px 1px rgba(26,10,2,.3);
  --dp-shadow-card:-12px 16px 20px rgba(14,6,1,.5),-3px 4px 4px rgba(14,6,1,.3);
  --dp-rim:inset -1.5px 0 0 rgba(255,222,160,.55);                       /* the right edge catching the sun */
  /* felt: matted fibres, light and dark, a little stray hair; tiled */
  --dp-felt:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .97  0 0 0 0 .9  1.5 0 0 0 -.66'/></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1.7 0 0 0 .66'/></filter><filter id='h'><feTurbulence type='fractalNoise' baseFrequency='.03 .7' numOctaves='2' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 .95  2.4 0 0 0 -1.5'/></filter><rect width='100%' height='100%' filter='url(%23a)' opacity='.5'/><rect width='100%' height='100%' filter='url(%23b)' opacity='.5'/><rect width='100%' height='100%' filter='url(%23h)' opacity='.25'/></svg>");
  /* the sun on felt: shade on the left, a soft warm lift on the right */
  --dp-felt-light:linear-gradient(100deg,rgba(0,0,0,.24),transparent 38%,rgba(255,226,170,.14) 85%,rgba(255,226,170,.22));
  /* padded felt: a patch is a little pillowed, so its edges fall away */
  --dp-pillow:inset 2px -3px 5px rgba(0,0,0,.28),inset -1px 1.5px 2px rgba(255,240,210,.14);
  /* thread lettering: lit top-right, shadow down-left, a hair of fuzz */
  --dp-thread-text:.45px -.45px 0 rgba(255,255,255,.28),-.7px .9px 0 rgba(0,0,0,.5),-1.2px 1.8px 1.4px rgba(0,0,0,.32),0 0 .6px currentColor;
  /* chenille fuzz over a letter's colour (background-clip:text) */
  --dp-chenille:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' seed='6' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.8 0 0 0 -.95'/></filter><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 .08  0 0 0 0 0  -1.8 0 0 0 .85'/></filter><rect width='100%' height='100%' filter='url(%23c)' opacity='.55'/><rect width='100%' height='100%' filter='url(%23d)' opacity='.6'/></svg>");
}

/* ---------------- the patch material (each piece's file sets its size, colours and place) ---------------- */
#vtTab,#sndBtn,.lb-head,.vt-full,.lb-full,.cb-btn.kick-login,.wr-side .wr-k{
  --felt:var(--cb-laurel);--thread:#f3e6c4;--sat:#d9a441;--sat-dk:#6e4a14;--sat-lt:#fff0b8;--sat-w:3px;
  position:relative;border:var(--sat-w) solid transparent;
  background:var(--dp-felt) padding-box,var(--dp-felt-light) padding-box,linear-gradient(var(--felt),var(--felt)) padding-box,
    linear-gradient(100deg,rgba(0,0,0,.28),transparent 45%,rgba(255,240,200,.25)) border-box,
    repeating-linear-gradient(58deg,var(--sat-lt) 0 .7px,var(--sat) .7px 1.7px,var(--sat-dk) 1.7px 2.4px) border-box;
  outline:none;text-shadow:var(--dp-thread-text)}
/* the running stitch, just inside the satin rim */
#vtTab::after,#sndBtn::after,.lb-head::after,.vt-full::after,.lb-full::after,.cb-btn.kick-login::after,.wr-side .wr-k::after{
  content:'';position:absolute;inset:var(--st-in,2.5px);border:var(--st-w,1.4px) dashed var(--thread);border-radius:inherit;pointer-events:none;opacity:.88;
  filter:drop-shadow(-.5px .8px 0 rgba(0,0,0,.5)) drop-shadow(.35px -.35px 0 rgba(255,255,255,.22))}
/* the felt press: hover gives a quick squash-and-settle, pressing squashes it flat. scale only, so the pieces' own
   rotate/transform (swing, cb-btn tilt) still compose */
@keyframes dp-press{0%{scale:1}30%{scale:.955 .92}64%{scale:1.035 1.03}100%{scale:1}}
@media (prefers-reduced-motion:no-preference){
  #vtTab:hover,#sndBtn:hover,.vt-full:hover,.lb-full:hover,.cb-btn.kick-login:hover,.lb-x:hover{animation:dp-press .36s cubic-bezier(.3,1.3,.5,1)}
}
#vtTab:active,#sndBtn:active,.vt-full:active,.lb-full:active,.cb-btn.kick-login:active,.lb-x:active{scale:.95 .92}

/* ---------------- cross-page pieces from board.css, embroidered here (board.html keeps board.css's base look
   until it links this file too) ---------------- */

/* LOG IN WITH [Kick]: a black felt patch, gold satin rim, cream running stitch, the words in cream thread, and Kick's
   own wordmark (../kick-logo.svg, unaltered) appliquéd on. Still a .cb-btn underneath (layout, focus, the key caps
   KCC enrollment adds), but felt doesn't lift on hover like board: it presses. */
.cb-btn.kick-login{--felt:#121513;--thread:#e9dfc4;--sat-w:3.5px;--st-in:3px;--e:2px;--cb-edge-c:#050605;border-radius:6px;
  box-shadow:0 var(--e) 0 #050605,var(--dp-shadow-hang),var(--dp-pillow);
  text-shadow:.45px -.45px 0 rgba(255,255,255,.35),-.8px 1px 0 rgba(0,0,0,.8),-1.4px 2px 1.5px rgba(0,0,0,.5)}
.cb-btn.kick-login:not(:disabled):hover{--e:2px;transform:rotate(var(--rot,0deg));box-shadow:0 var(--e) 0 #050605,var(--dp-shadow-hang),var(--dp-pillow),0 0 0 1px rgba(83,252,24,.25)}
.cb-btn.kick-login:not(:disabled):active{--e:1px;transform:translateY(1px) rotate(var(--rot,0deg));box-shadow:0 var(--e) 0 #050605,var(--dp-shadow-glued),inset 0 2px 5px rgba(0,0,0,.5)}
.cb-btn.kick-login::before{border-radius:0 0 6px 6px}
.cb-btn.kick-login:focus-visible{outline:2.5px solid var(--cb-kick);outline-offset:3px}
.kick-login .kl-logo{filter:drop-shadow(.4px -.4px 0 rgba(255,255,255,.25)) drop-shadow(-1px 1.4px 0 rgba(0,0,0,.7))}

/* the ✓K "verified on Kick" mark: a tiny woven label, black, cream stitch, Kick's own K */
.kv{border-radius:2.5px;background:var(--dp-felt),linear-gradient(100deg,rgba(0,0,0,.2),transparent 45%,rgba(255,240,200,.12)),#121513;
  box-shadow:inset 0 0 0 1.2px #121513,inset 0 0 0 2px rgba(233,223,196,.0),0 0 0 1.2px #c49a3c,0 0 0 1.7px #5a3a10,var(--dp-shadow-glued);
  outline:1px dashed rgba(233,223,196,.62);outline-offset:-2.6px}

/* the area-code tag: same light as everything else */
.ac-tag{box-shadow:0 1.5px 0 #8a6234,var(--dp-shadow-glued),var(--dp-rim)}

/* ---------------- piece colours ---------------- */
/* cream felt, laurel thread: FULL BOARD › (the visitor flap + the board panel) */
.vt-full,.lb-full{--felt:#f2e3c0;--thread:#1f5a2f;--sat-w:2.5px;--st-in:2px;--st-w:1.2px;color:var(--thread);border-radius:4px;
  font:13px/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.1em;
  text-shadow:.45px -.45px 0 rgba(255,255,255,.6),-.6px .8px 0 rgba(60,30,8,.4),-1px 1.5px 1px rgba(60,30,8,.22);
  box-shadow:var(--dp-shadow-glued),inset 2px -3px 5px rgba(90,50,10,.2),inset -1px 1.5px 2px rgba(255,250,235,.5)}

/* ---------------- one sun for the printed ink too: the dark debossed-ink shadows on the green and red boards fall
   down-LEFT like every other shadow (style.css drew them down-right). The light ones on Kick green read as right-hand
   rims, so they stay. ---------------- */
.cb-btn.cb-green{text-shadow:-.6px .5px 0 rgba(0,0,0,.35)}
.cb-btn.cb-red{text-shadow:-.6px .5px 0 rgba(40,4,0,.4)}
.choice.wrong{text-shadow:-.6px .5px 0 rgba(40,4,0,.45)}

/* ---------------- the footer apron on small laptops (footer.css lays it out; these only size it) ----------------
   the ABOUT / RULES / COLLAB tags keep a readable 10.5px floor, and the Kick plate becomes a tidy two-line plate
   (FOLLOW mongrlz ON over the logo) so the right side fits beside the envelope instead of wrapping into it */
@media (max-width:1400px) and (min-width:1080px){
  .ap-right{gap:10px}
  .ap-links{gap:5px}
  .ap-tag{font-size:10.5px;letter-spacing:.05em;padding-inline:.6em}
  .ap-kick{flex-direction:column;justify-content:center;gap:3px;padding:5px 21px 5px 22px;font-size:10.5px;letter-spacing:.05em;line-height:1}
  .ap-kick .ap-follow{white-space:nowrap}
  .ap-kick img{height:14px}
}
@media (max-width:1079px){.ap-tag{font-size:10.5px}}

/* "Re-enroll" in the fine print: a tiny cream felt tag stitched in laurel thread (the patch material above), not a link */
.ap-fine .en-re{--felt:#f2e3c0;--thread:#1f5a2f;--sat-w:2px;--st-in:1.5px;--st-w:1px;
  position:relative;display:inline-block;vertical-align:.06em;margin:0 0 0 .35em;padding:.34em .55em .26em;border-radius:3px;rotate:-2deg;cursor:pointer;
  font:10px/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--thread);text-decoration:none;
  border:var(--sat-w) solid transparent;
  background:var(--dp-felt) padding-box,var(--dp-felt-light) padding-box,linear-gradient(var(--felt),var(--felt)) padding-box,
    repeating-linear-gradient(58deg,#fff0b8 0 .7px,#d9a441 .7px 1.7px,#6e4a14 1.7px 2.4px) border-box;
  text-shadow:.4px -.4px 0 rgba(255,255,255,.6),-.5px .7px 0 rgba(60,30,8,.35);
  box-shadow:var(--dp-shadow-glued),inset 1.5px -2px 3px rgba(90,50,10,.2)}
.ap-fine .en-re::after{content:'';position:absolute;inset:var(--st-in);border:var(--st-w) dashed var(--thread);border-radius:inherit;pointer-events:none;opacity:.8}
.ap-fine .en-re:hover{color:var(--thread)}
@media (prefers-reduced-motion:no-preference){.ap-fine .en-re:hover{animation:dp-press .36s cubic-bezier(.3,1.3,.5,1)}}
.ap-fine .en-re:active{scale:.94 .9}
.ap-fine .en-re:focus-visible{outline:2px solid var(--cb-kick);outline-offset:2px}