/* tokens, pulled from the art: turquoise sea, pink bouquet, BUSTED orange, cream icing, VHS-dark room */
:root{
  --room:#0d0b0a; --shell:#1d1a18; --shell2:#2a2623;
  --cream:#f4ecd6; --ink:#16110f; --pink:#e8458b; --sea:#25b6c2;
  --busted:#f5a21a; --stamp:#d9301f; --star:#ffd93b;
  --disp:'Pirata One',Georgia,serif; --hand:'Permanent Marker','Comic Sans MS',cursive; --mono:'Inconsolata',ui-monospace,Menlo,monospace;
  --w:min(92vw,880px,calc((100svh - 270px) * 1.7778));
}
@font-face{font-family:'Pirata One';src:url(/assets/fonts/pirata-one-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Permanent Marker';src:url(/assets/fonts/permanent-marker-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Inconsolata';font-weight:400;src:url(/assets/fonts/inconsolata-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Inconsolata';font-weight:700;src:url(/assets/fonts/inconsolata-latin-700-normal.woff2) format('woff2');font-display:swap}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:radial-gradient(ellipse at 50% 38%,#1b1613 0,var(--room) 70%);color:var(--cream);font-family:var(--mono);overflow-x:hidden}
.room{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px 0}
img{max-width:100%;height:auto;display:block}

/* the screen */
.tv{width:var(--w)}
.screen{position:relative;aspect-ratio:16/9;background:#000;border:10px solid var(--shell2);border-radius:10px;box-shadow:0 0 0 3px #000,0 0 60px #25b6c233;overflow:hidden;isolation:isolate}
.shake,.frame,.band{position:absolute;inset:0;width:100%;height:100%}
.frame{object-fit:cover;object-position:50% 50%;filter:saturate(1.08) contrast(1.04);animation:drift 6s ease-in-out infinite}
.band{pointer-events:none;overflow:hidden;clip-path:inset(100% 0 -9% 0);animation:track 8s linear infinite}
.band img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(1.08) contrast(1.25);animation:tear .35s steps(2) infinite}
.scan{position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0000002e 2px 3px),radial-gradient(ellipse at 50% 50%,#0000 55%,#0000008c 100%)}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(.7px) skewX(.08deg)}}
@keyframes track{from{clip-path:inset(100% 0 -9% 0)}to{clip-path:inset(-9% 0 100% 0)}}
@keyframes tear{from{transform:translateX(-7px)}to{transform:translateX(9px)}}

/* on-screen display: VCR text */
.osd{position:absolute;z-index:4;font:700 clamp(13px,3.1vw,26px)/1 var(--mono);letter-spacing:.14em;color:#fff;text-shadow:2px 2px 0 #000,-1px 0 #f0f,1px 0 #0ff}
.osd-tl{left:3.2%;top:5%}
.osd-bl{left:3.2%;bottom:5%;display:flex;flex-direction:column;gap:.35em}
.date{font-size:.62em;letter-spacing:.1em;opacity:.92}
.sp{margin-left:.7em;opacity:.85}
body[data-state=pause] .mode{animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* one wanted star */
.stars{position:absolute;z-index:4;right:3%;top:5%;display:flex;gap:.45%;filter:drop-shadow(1px 2px 0 #000)}
.s{display:block;width:clamp(14px,3.6vw,30px);aspect-ratio:1;background:#e9e9e9;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);position:relative}
.s::after{content:"";position:absolute;inset:11%;background:#2b2b2b;clip-path:inherit}
.s.lit{background:var(--star);animation:flash .5s ease-out}
.s.lit::after{background:var(--star)}
.stars.lit{filter:drop-shadow(0 0 7px #ffd93b) drop-shadow(1px 2px 0 #000)}
@keyframes flash{0%{transform:scale(2.2)}60%{transform:scale(.9)}100%{transform:scale(1)}}

/* BUSTED stamp, slams in over the frame */
.stamp{position:absolute;left:50%;top:83%;z-index:2;display:none;pointer-events:none;transform:translate(-50%,-50%) rotate(-5deg)}
.stamp span{display:block;font:clamp(34px,9.4vw,92px)/.9 var(--disp);padding:.02em .2em .08em;color:var(--cream);background:var(--stamp);border:.05em solid var(--cream);outline:.04em solid var(--stamp);outline-offset:.05em;text-shadow:.04em .04em 0 #000;letter-spacing:.04em}
.stamp.slam{display:block;animation:slam .28s cubic-bezier(.2,.9,.3,1.3) both}
.stamp.out{animation:glitchout .3s steps(3) both}
@keyframes slam{from{transform:translate(-50%,-50%) rotate(-5deg) scale(3.2);opacity:0}to{transform:translate(-50%,-50%) rotate(-5deg) scale(1);opacity:1}}
@keyframes glitchout{0%{opacity:1;transform:translate(-50%,-50%) rotate(-5deg) translateX(0)}50%{opacity:.5;transform:translate(-50%,-50%) rotate(-5deg) translateX(14px)}100%{opacity:0;transform:translate(-50%,-50%) rotate(-5deg) translateX(-10px)}}
.shake.jump{animation:jump .55s steps(1) both}
.shake.hit{animation:hit .35s linear both}
@keyframes jump{0%{transform:translateY(-9%) scale(1.04);filter:brightness(1.7)}20%{transform:translateY(5%)}40%{transform:translateY(-2%) scale(1.04);filter:none}60%{transform:translateY(1%)}100%{transform:none}}
@keyframes hit{0%{transform:translate(0,0)}20%{transform:translate(-10px,6px)}40%{transform:translate(9px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(3px,-2px)}100%{transform:none}}

/* deck: the play key and the link keys */
.deck{display:flex;align-items:stretch;gap:10px;margin-top:10px}
.play{flex:0 0 auto;display:flex;align-items:center;gap:.6em;padding:.5em 1.1em .5em .9em;font:700 clamp(16px,2.6vw,22px)/1 var(--mono);letter-spacing:.16em;color:var(--ink);background:var(--busted);border:0;border-bottom:5px solid #9b5f08;border-radius:3px;cursor:pointer}
.play i{width:0;height:0;border-left:.9em solid var(--ink);border-top:.55em solid transparent;border-bottom:.55em solid transparent}
.play:active:not(:disabled){transform:translateY(3px);border-bottom-width:2px}
.play:disabled{background:#6b5a3a;border-bottom-color:#3b3220;cursor:default}
.play:focus-visible,.key:focus-visible,.ca:focus-visible{outline:2px solid var(--sea);outline-offset:3px}
.keys{display:flex;flex:1;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.key{display:flex;align-items:center;padding:0 .9em;min-height:42px;font:700 clamp(12px,2vw,15px)/1 var(--mono);letter-spacing:.1em;color:var(--cream);text-decoration:none;background:var(--shell);border:1px solid #3a3531;border-bottom:4px solid #000;border-radius:3px}
.key:hover{background:var(--shell2)}
.key-buy{background:var(--pink);color:#fff;border-color:#b02d68;border-bottom-color:#6b1740}
.key-buy:hover{background:#f05a9d}

/* the cassette, label sticker with the CA */
.cassette{width:var(--w)}
.shell{background:var(--shell);border:2px solid #000;border-radius:6px;padding:12px 12px 8px;box-shadow:0 8px 0 #000}
.label{position:relative;background:var(--cream) repeating-linear-gradient(0deg,#0000 0 27px,#2a6fb333 27px 28px);color:#14253d;padding:14px 16px 14px 124px;min-height:132px;border-top:7px solid var(--pink);transform:rotate(-.4deg);display:grid;gap:10px}
.photo{position:absolute;left:14px;top:14px;width:96px;height:96px;transform:rotate(-5deg);filter:drop-shadow(2px 3px 0 #0003)}
.hand h1{font:clamp(26px,5.6vw,46px)/1 var(--hand);letter-spacing:.02em;color:#14253d;transform:rotate(-1.2deg)}
.hand p{font:clamp(13px,2.5vw,19px)/1.25 var(--hand);color:#1d3a66;margin-top:4px;transform:rotate(.6deg)}
.hand p+p{transform:rotate(-.5deg);color:#c0306b}
.ca{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;width:100%;text-align:left;font:inherit;color:inherit;background:#fffdf2;border:1.5px dashed #14253d;padding:7px 10px;cursor:pointer}
.ca-tag{font:700 12px/1 var(--mono);letter-spacing:.12em;color:#c0306b}
.ca code{font:700 clamp(13px,2.7vw,19px)/1.2 var(--mono);color:#14253d;overflow-wrap:anywhere;word-break:break-all}
.ca.copied{background:#d9f3d6}
.reels{display:flex;justify-content:space-around;margin:8px auto 0;width:50%}
.reels b{width:34px;height:12px;background:#000;border-radius:0 0 8px 8px}
.ns{position:fixed;bottom:6px;left:0;right:0;text-align:center;font-size:12px;color:#aaa}

@media (max-width:560px){
  .label{padding:12px 12px 12px 12px;padding-top:112px}
  .photo{width:84px;height:84px;left:12px;top:10px}
  .hand{position:absolute;left:104px;top:8px;right:8px}
  .deck{flex-direction:column}
  .play{justify-content:center;padding:.7em}
  .keys{justify-content:stretch}
  .key{flex:1 1 auto;justify-content:center}
  .key-buy{flex:2 1 auto}
  .screen{border-width:6px}
}
@media (prefers-reduced-motion:reduce){
  .frame,.band,.band img,.mode,.shake,.stamp,.s{animation:none!important}
  .band{display:none}
}