/* Layout: one 402×874 phone screen (the Figma frame size), scaled to fit and centred on a quiet stage.
   Single deliberate light look that matches the Figma frames: white screen, cream bakelite deck, warm-grey table. */
:root{
  --stage:#D8CDBF;   /* same beige as the phone screen, without the texture */
  --screen:#D7CDBE;
  --ink:#111111;
  --muted:#4a4232;
  --dot:#c4c4c4;
  --cream:#ddd6c4;
  --cream-dark:#b9b19c;
  --print:#262626;
  --sans:"News Gothic MT", "News Gothic Std", "News Gothic BT", "News Gothic", "News Cycle", "Franklin Gothic Book", Arial, sans-serif;
  --title:"News Gothic MT", "News Gothic Std", "News Gothic BT", "News Gothic", "News Cycle", "Franklin Gothic Book", Arial, sans-serif;
  --body:"News Gothic MT", "News Gothic Std", "News Gothic BT", "News Gothic", "News Cycle", "Franklin Gothic Book", Arial, sans-serif;
  --deck-type:"News Gothic MT", "News Gothic Std", "News Gothic BT", "News Gothic", "News Cycle", "Franklin Gothic Book", Arial, sans-serif;
  color-scheme:light;
}
html,body{height:100%;margin:0}
body{
  background:var(--stage);color:var(--ink);font-family:var(--sans);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  box-sizing:border-box;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
#fit{position:relative;flex:none;margin-top:0}
/* device mockup: 402x874 screen inside a 12px black bezel and a thin titanium band */
#device{position:absolute;left:4px;top:0;width:426px;height:898px;border-radius:67px;transform-origin:-4px 0;
  background:#0c0c0d;
  box-shadow:inset 0 0 0 1px #3d3a37,0 0 0 1.6px #8c877f,0 0 0 3.2px #3b3835,0 0 0 3.8px #a7a198,
    0 46px 90px -18px rgba(38,32,22,.38),0 18px 34px -10px rgba(38,32,22,.22)}
#device .hw{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#5d5954,#a7a198 45%,#4a4744)}
#device .hw.l{left:-7.6px;border-radius:2px 0 0 2px}
#device .hw.r{right:-7.6px;border-radius:0 2px 2px 0;background:linear-gradient(270deg,#5d5954,#a7a198 45%,#4a4744)}
#phone{
  position:absolute;left:12px;top:12px;width:402px;height:874px;overflow:hidden;
  background:var(--screen) url("../assets/img/ui/background-paper.jpg") 0 0/402px 874px no-repeat;border-radius:55px;
}
#island{position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;border-radius:18px;background:#000;z-index:80;pointer-events:none}
#sbar{position:absolute;left:0;right:0;top:0;height:54px;z-index:79;pointer-events:none;color:var(--ink)}
#sbar .t{position:absolute;left:0;width:139px;top:19px;text-align:center;font:600 16.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
#sbar .ic{position:absolute;left:264px;width:138px;top:19px;height:14px;display:flex;justify-content:center;gap:6px;align-items:center;overflow:visible}
#sbar .si{display:block;flex:0 0 auto;overflow:visible;max-width:none}
#homebar{position:absolute;left:50%;bottom:8px;width:140px;height:5px;margin-left:-70px;border-radius:3px;background:var(--ink);opacity:.92;z-index:80;pointer-events:none}
.screen{position:absolute;inset:0}
[hidden]{display:none!important}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.btn{cursor:pointer}
.btn:focus-visible,.hitbtn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img{-webkit-user-drag:none;user-select:none}

/* ---------- discs (shared) ---------- */
.disc{position:absolute;border-radius:50%}
.disc .spin{position:absolute;inset:0;border-radius:50%;will-change:transform}
.disc .tex{position:absolute;inset:0;width:100%;height:100%;display:block}
.disc .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;box-sizing:border-box}
.disc .emb{position:absolute;display:block;-webkit-mask:radial-gradient(closest-side,#000 78%,transparent 100%);mask:radial-gradient(closest-side,#000 78%,transparent 100%)}
.disc .ln{position:absolute;left:50%;transform:translate(-50%,-50%);white-space:nowrap;line-height:1}
.disc .hole{position:absolute;left:50%;top:50%;width:2.4%;height:2.4%;transform:translate(-50%,-50%);border-radius:50%;background:#ededed;box-shadow:inset 0 0 0 .25em rgba(0,0,0,.35)}
.disc .sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from var(--sa,-35deg),
    rgba(255,255,255,0) 0deg, rgba(255,255,255,.20) 13deg, rgba(185,215,255,.12) 21deg, rgba(255,255,255,0) 40deg,
    rgba(255,255,255,0) 180deg, rgba(255,255,255,.16) 193deg, rgba(255,205,235,.09) 203deg, rgba(255,255,255,0) 222deg, rgba(255,255,255,0) 360deg);
  mix-blend-mode:screen;
  -webkit-mask:radial-gradient(circle closest-side, transparent 0 var(--lab,34%), #000 calc(var(--lab,34%) + 3%), #000 97%, transparent 100%);
          mask:radial-gradient(circle closest-side, transparent 0 var(--lab,34%), #000 calc(var(--lab,34%) + 3%), #000 97%, transparent 100%);
}
.disc.light .sheen{mix-blend-mode:normal;
  background:conic-gradient(from var(--sa,-35deg),
    rgba(0,0,0,0) 0deg, rgba(255,255,255,.55) 14deg, rgba(0,0,0,0) 36deg, rgba(0,0,0,.06) 90deg, rgba(0,0,0,0) 150deg,
    rgba(255,255,255,.45) 194deg, rgba(0,0,0,0) 216deg, rgba(0,0,0,.07) 270deg, rgba(0,0,0,0) 330deg);
}
.disc .paper{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:url("../assets/img/records/paper-texture.jpg") center/100% 100%}
.disc .paper.m{mix-blend-mode:multiply;opacity:.5}
.disc .paper.s{mix-blend-mode:screen;opacity:.09}
.disc .rim{position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 .12em rgba(255,255,255,.12), inset 0 0 0 .35em rgba(0,0,0,.28)}
.disc.light .rim{box-shadow:inset 0 0 0 .12em rgba(255,255,255,.9), inset 0 0 0 .35em rgba(0,0,0,.07)}

/* ---------- crate ---------- */
.topbar{position:absolute;left:24px;right:24px;top:40px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.brand{font-weight:800;letter-spacing:.24em}
.count{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.hint{position:absolute;left:18px;right:18px;top:110px;text-align:center;line-height:1.3;margin:0;font-family:var(--body);font-weight:400;font-size:19.44px;color:var(--muted);text-wrap:balance}
.stage{position:absolute;left:0;top:120px;width:402px;height:500px;perspective:900px;perspective-origin:50% 50%}
.card{position:absolute;left:108px;top:140px;width:220px;height:220px;transform-style:preserve-3d;will-change:transform}
.card > *{opacity:var(--op,1)}
.card .face{position:absolute;inset:0;backface-visibility:hidden;box-shadow:0 14px 28px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.12)}
.card .face img{width:100%;height:100%;display:block}
.card .gloss{position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,0) 70%,rgba(0,0,0,.08) 100%)}
.card .shade{position:absolute;inset:0;pointer-events:none;background:#000;opacity:var(--sh,0)}
.card .edge{position:absolute;top:0;left:220px;width:5px;height:220px;transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(90deg,#f2f0ea,#d8d4ca)}
.card .edgeT{position:absolute;top:0;left:0;width:220px;height:5px;transform-origin:50% 0;transform:rotateX(-90deg);background:#e9e6de}
.card .back{position:absolute;inset:0;transform:translateZ(-5px) rotateY(180deg);background:#e4e1d9}
.card .cdisc{position:absolute;top:2px;width:215px;height:215px}
.floor{position:absolute;left:99px;top:392px;width:270px;height:18px;border-radius:50%;background:rgba(0,0,0,.11);filter:blur(10px)}
.swipe{position:absolute;left:0;top:120px;width:402px;height:500px;z-index:300;touch-action:none;cursor:grab}
.swipe:active{cursor:grabbing}
.swipe .hitbtn{position:absolute;left:103px;top:136px;width:230px;height:228px;border:0;background:transparent;padding:0;border-radius:4px}
.info{position:absolute;left:16px;right:16px;top:575px;text-align:center}
.info .artists{margin:6px auto 0;max-width:370px;white-space:pre-line;font-family:var(--body);font-weight:400;font-size:18px;line-height:1.3;color:var(--muted);text-wrap:balance}
.info h1{margin:0;font-family:var(--title);font-size:24px;line-height:1.15;font-weight:700;letter-spacing:0;text-wrap:balance}
.info p{margin:6px 0 0;font-family:var(--body);font-weight:400;font-size:20px;line-height:1.2;color:var(--muted)}
.dots{position:absolute;left:0;right:0;top:700px;display:flex;justify-content:center;gap:2px}
.dots button{display:flex;align-items:center;justify-content:center;width:36px;height:44px;padding:0;border:0;background:transparent}
.dots span{display:block;height:6px;width:8px;border-radius:3px;background:var(--dot);transition:width .3s,background .3s}
.dots button[aria-current="true"] span{width:22px;background:var(--ink)}
.cta{position:absolute;left:89.85px;top:703px;width:222.3px;height:45.5px;border:0;border-radius:0;padding:0;display:flex;align-items:center;justify-content:center;line-height:1;text-align:center;background:#161412 url("../assets/img/ui/button-ink.jpg") center/cover no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2090.5%2018.525%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H89L90.5%2018.525H0Z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2090.5%2018.525%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H89L90.5%2018.525H0Z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E") center/100% 100% no-repeat;color:#f4efe4;font-family:var(--body);font-size:18px;font-weight:400;letter-spacing:0;transition:transform .15s}
.cta::before{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
.cta:active{transform:scale(.97)}
.crateui{transition:opacity .45s ease}
#crate.leaving .crateui{opacity:0}

/* ---------- player (Figma Frame 6) ---------- */
.back{position:absolute;left:0;top:54px;width:56px;height:48px;border:0;border-radius:0 24px 24px 0;background:transparent;display:flex;align-items:center;justify-content:flex-start;padding:0 0 0 12px;z-index:5}
.back .back-ink{display:block;overflow:visible;transform:rotate(-2deg);opacity:.92}
#cover{position:absolute;left:76px;top:143.7px;width:249px;height:249px;border-radius:0;overflow:hidden;box-sizing:border-box;background:var(--screen);box-shadow:0 16px 32px rgba(0,0,0,.16),0 2px 7px rgba(0,0,0,.12)}
#cover .gloss,#fly .fs .gloss{position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,0) 70%,rgba(0,0,0,.08) 100%)}
#coverFloor{position:absolute;left:50px;top:415px;width:302px;height:20px;border-radius:50%;background:rgba(0,0,0,.11);filter:blur(11px);pointer-events:none;transition:opacity .3s}
.v2 #coverFloor{display:none}
#cover img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
#pview{position:absolute;inset:0;will-change:transform;touch-action:none}
#band{position:absolute;left:0;top:371.7px;width:402px;height:411px}
#fshadow{position:absolute;left:-74.45px;top:0;width:548.15px;height:411px;pointer-events:none;transform-origin:275.45px 217.2px}
#scene{position:absolute;inset:0;perspective:1000px}
#deck{position:absolute;left:-7.94px;top:58.26px;width:417.88px;height:317.88px;transform-style:flat;--k:0}
.f{position:absolute;backface-visibility:visible}
.f.psh{left:0;top:0;width:100%;height:100%;border-radius:6.4px;background:transparent;box-shadow:-7px 12px 20px -6px rgba(70,54,28,.30),-2px 4px 6px -2px rgba(70,54,28,.22)}
.f.top{left:-4.13px;top:-10.55px;width:425.68px;height:333.02px}
.f.top img{position:absolute;inset:0;width:100%;height:100%;display:block}
.f.front{left:5px;right:5px;top:100%;height:24px;transform-origin:50% 0;transform:rotateX(-90deg);background:linear-gradient(#cfc7b2,#a9a08a);border-radius:0 0 4px 4px}
.f.backf{left:5px;right:5px;bottom:100%;height:24px;transform-origin:50% 100%;transform:rotateX(90deg);background:linear-gradient(#a9a08a,#d4ccb8)}
.f.left{top:5px;bottom:5px;right:100%;width:24px;transform-origin:100% 50%;transform:rotateY(-90deg);background:linear-gradient(90deg,#a59c86,#cfc7b2)}
.f.right{top:5px;bottom:5px;left:100%;width:24px;transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(90deg,#d8d0bc,#b3aa93)}
.z{transform:translateZ(calc(var(--k) * var(--z,0) * 1px))}
.lbl{position:absolute;top:301.85px;transform:translate(-50%,-50%) translateZ(calc(var(--k) * .2px));white-space:nowrap;pointer-events:none}
.lbl > span{display:inline-block;height:1em;font-family:var(--deck-type);font-size:19.6px;font-weight:400;line-height:1;color:var(--print);transform:scale(.5);transform-origin:50% 50%;letter-spacing:.02em}
.sp{transition:color .2s}
.sp{display:inline-block;position:relative}
.sp.on{color:inherit;font-weight:inherit}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:baseline;position:relative;top:-.62em;font-size:.5em;line-height:1;margin:0 .04em 0 .06em}
.lbl .frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:baseline;position:relative;top:-.5em;font-size:.6em;font-weight:inherit;line-height:.98;margin:0 .02em 0 .05em}
.frac > span:last-child{margin-bottom:-1.2em}
#hint .frac,#bubble .frac{font-size:.55em;vertical-align:baseline;top:-1.1em}
.frac > span:first-child{border-bottom:.1em solid currentColor;padding:0 .08em .02em}
.lbl .frac > span:first-child{border-bottom-width:.075em;padding:0 .1em .04em}
.lbl .frac > span:last-child{margin-bottom:-1.1em;padding-top:.02em}
#rec{position:absolute;left:15.58px;top:12.15px;width:272px;height:272px;--z:3.5;pointer-events:none}
#rec .shadow{position:absolute;inset:0;border-radius:50%;box-shadow:-4px 5px 8px rgba(0,0,0,.38),-1px 1px 2px rgba(0,0,0,.35)}
/* ---------- Frame 2 · Version 02: mirrored deck, larger knobs, no cover ---------- */
.v2 #cover{display:none}
.v2 #band{top:219.8px}
.v2 #hint{top:601.5px}
#kSpeed.z,#kVol.z{transform:translateZ(calc(var(--k) * var(--z,0) * 1px)) scale(1.2023)}
.lbl > span{transform:scale(.5671)}
.vswitch{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.72);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 4px 14px rgba(40,32,20,.08);font:500 12px/1 var(--sans);color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vswitch .lab{padding:0 8px 0 10px;color:var(--muted);white-space:nowrap}
.vswitch button{border:0;background:transparent;padding:0 12px;height:30px;border-radius:999px;font:inherit;color:var(--muted);cursor:pointer;white-space:nowrap}
.vswitch button[aria-pressed="true"]{background:var(--ink);color:#fff}
.vswitch button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#rec .disc{left:0;top:0}
#rec .spindle{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:radial-gradient(circle at 62% 35%,#fff 0 18%,#9aa0a6 45%,#3b3f44 100%);box-shadow:-1px 1px 1.5px rgba(0,0,0,.5)}
#recBtn{position:absolute;left:25.58px;top:22.15px;width:252px;height:252px;border-radius:50%;border:0;background:transparent;padding:0;cursor:pointer}
.knob{position:absolute;width:33.94px;height:33.94px;margin:-16.97px 0 0 -16.97px;--z:.3}
.knob .kimg{position:absolute;display:block;pointer-events:none;filter:drop-shadow(-.6px .8px 1.1px rgba(50,38,20,.26))}
.knob .ptrw{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.knob .ptr{position:absolute;left:-.6px;top:-9.4px;width:1.2px;height:5.4px;border-radius:.6px;background:rgba(72,60,42,.58);box-shadow:.55px 0 0 rgba(255,252,244,.55)}
.knob .kh{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:0;background:transparent;padding:0;cursor:ns-resize;touch-action:none}
#arm{position:absolute;left:303.21px;top:-8.72px;width:113.76px;height:238.53px;transform-origin:18.35px 15.60px;--z:12;pointer-events:none}
#arm img{position:absolute;inset:0;width:100%;height:100%;display:block}
#arm .grab{position:absolute;left:72px;top:150px;width:54px;height:96px;border:0;background:transparent;padding:0;border-radius:14px;pointer-events:auto;cursor:grab;touch-action:none}
#arm .grab2{position:absolute;left:16px;top:6px;width:52px;height:150px;border:0;background:transparent;padding:0;border-radius:20px;pointer-events:auto;cursor:grab;touch-action:none;transform:rotate(-19deg);transform-origin:50% 0}
#pivot{position:absolute;left:18.35px;top:15.60px;width:1px;height:1px}
#hint{position:absolute;left:14px;right:14px;top:753.4px;margin:0;text-align:center;font-family:var(--body);font-weight:400;font-size:19.44px;line-height:1.3;text-wrap:balance;color:var(--muted);transition:opacity .4s}
#hint .frac{font-size:.62em;vertical-align:-.32em}
#bubble{position:absolute;top:617.7px;padding:7px 12px;border-radius:16px;background:rgba(17,17,17,.88);color:#fff;font-family:var(--body);font-size:13px;font-weight:400;white-space:nowrap;transform:translateX(-50%);opacity:0;transition:opacity .2s;pointer-events:none;font-variant-numeric:tabular-nums}
#bubble.show{opacity:1}
#bubble .frac{font-size:.62em;vertical-align:-.32em}
#fly{position:absolute;inset:0;pointer-events:none;z-index:50}
#fly .fs{position:absolute;overflow:hidden;box-sizing:border-box;background:var(--screen);box-shadow:0 15px 30px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.12)}
#fly .fs img{width:100%;height:100%;display:block;object-fit:cover}
#fly .fd{position:absolute;left:0;top:0;width:272px;height:272px;border-radius:50%}
#fly .fd .shadow{position:absolute;inset:0;border-radius:50%}
@media (prefers-reduced-motion: reduce){ .crateui,#hint{transition:none} }

/* =========================================================================
   App mode: phones and installed (home-screen) use.
   The phone mockup, fake status bar and version switch disappear and the
   screen fills the device. Toggled by the .is-app class on <html>.
   ========================================================================= */
/* The paper is a seamless tile on the page itself (no fixed layers), so the browser paints it
   everywhere: behind the status bar, behind Safari's floating toolbar, and in any overscroll. */
html.is-app{height:100%;overflow:hidden;overflow:clip;width:100%;
  background:#D8CFC6 url("../assets/img/ui/paper-tile.jpg") 0 0/392px 392px repeat}
.is-app body{height:100%;padding:0;margin:0;overflow:hidden;overflow:clip;width:100%;background:transparent;
  overscroll-behavior:none;touch-action:manipulation;align-items:flex-start}
.is-app.is-touch .vswitch{display:none}
.is-app .vswitch{z-index:200}
.is-app #fit{margin:0 auto}
.is-app #device{left:0;width:402px;height:874px;border-radius:0;background:transparent;box-shadow:none;transform-origin:0 0}
.is-app #device .hw,.is-app #island,.is-app #sbar,.is-app #homebar{display:none}
.is-app #phone{left:0;top:0;border-radius:0;background:transparent;overflow:visible}

/* Vintage typewriter: every character is laid out from the start (no layout shift),
   then struck one at a time with uneven ink and a slightly wandering baseline */
.tw-w{white-space:nowrap}
.tw-c{opacity:0}
.tw-c:not(.tw-sp):not(.tw-br){display:inline-block;transform:translateY(var(--dy,0)) rotate(var(--r,0))}
.tw-c.on{opacity:var(--ink,1);animation:tw-strike .11s ease-out}
.tw-sp.on,.tw-br.on{animation:none}
@keyframes tw-strike{
  0%{opacity:0;transform:translateY(calc(var(--dy,0em) - .12em)) rotate(var(--r,0)) scale(1.18);text-shadow:0 0 .02em currentColor}
  45%{opacity:1;transform:translateY(calc(var(--dy,0em) + .02em)) rotate(var(--r,0)) scale(.97);text-shadow:.02em 0 0 currentColor}
  100%{opacity:var(--ink,1);transform:translateY(var(--dy,0)) rotate(var(--r,0)) scale(1)}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ink-w{white-space:nowrap}
.ink-c{display:inline-block;opacity:var(--ink,1);transform:translateY(var(--dy,0)) rotate(var(--r,0))}
/* Phone mockup: back arrow sits 3% lower */
.is-mockup .back{top:80.2px}
/* Full-screen (no mockup): secondary text 5% larger */
.is-app #crate .hint{font-size:20.41px}
.is-app .info p{font-size:21px}
.is-app .info .artists{font-size:18.9px}
.is-app #hint{font-size:20.41px}
.is-mockup .back{left:12.06px}
/* tactile touches (see the end of js/app.js) */
.cta,.back{transition:transform .22s cubic-bezier(.3,1.6,.5,1)}
.cta.tilted{transform:rotate(var(--tilt,0deg))}
.cta.tilted:active{transform:rotate(var(--tilt,0deg)) scale(.97)}
.back.tilted{transform:rotate(var(--tilt,0deg))}
#crate .hint,#crate .info p{transition:transform .3s ease}
#hint{transition:opacity .4s,transform .3s ease}
.floaty{transform:translateY(-3px)}
@media (prefers-reduced-motion: reduce){ .cta.tilted,.back.tilted,.floaty{transform:none} }