/* Run These Roads · "Burned CD-R" look (approved Nov 2). Dark only by design:
   a silver CD-R with Sharpie writing, a lined mixtape insert card, a green Discman LCD. */
@font-face{font-family:"EW Pen";src:url(/fonts/EwPen-Regular.ttf) format("truetype");font-display:swap}
:root{
  --bg:#0d0d0f; --ink:#e9e6df; --ink-2:#a7a39b; --ink-3:#6f6c66; --line:#2a2a2f;
  --card:#efe9da; --card-ink:#1a1a1a; --rule:rgba(70,110,200,.25);
  --hi:#e0a94e;                       /* dry grass, from the cover art */
  --lcd:#9fae8a; --lcd-2:#97a682; --lcd-ink:#1d2416; --lcd-dim:rgba(29,36,22,.45);
  --bad:#ff8a7a;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --hand:"EW Pen","Marker Felt",cursive;
  --pix:"VT323",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:14px;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
button,a{font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--hi);outline-offset:3px}
input{font-size:16px}
p{margin:0;line-height:1.5}

.screen{position:fixed;inset:0;margin:0 auto;width:100%;max-width:480px;overflow:hidden;background:var(--bg);isolation:isolate}
@media (min-width:520px){.screen{box-shadow:0 0 0 1px var(--line)}}
.view{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;overflow-y:auto;
  padding:calc(env(safe-area-inset-top,0px) + 18px) max(20px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 22px) max(20px,env(safe-area-inset-left,0px))}
.view[hidden]{display:none!important}
.spacer{flex:1}
.top{display:flex;align-items:center;justify-content:space-between;min-height:36px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.back{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;display:grid;place-items:center;font-size:18px;color:var(--ink)}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.muted{color:var(--ink-2)}
.note{font-size:12px;color:var(--ink-3);line-height:1.5}
.err{color:var(--bad);font-size:13px;text-align:center}
.err[hidden]{display:none!important}

/* buttons: highlighter pill and outlined pill */
.btn{display:block;width:100%;text-align:center;text-decoration:none;border:0;border-radius:999px;padding:15px 18px;font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;background:var(--hi);color:#111}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.35}
.btn[hidden]{display:none!important}

/* the CD-R, modelled on a real disc's shiny side (layers built by cd.js).
   Light layers stay still; only .turn layers (cover art, Sharpie) rotate, by turnCd() or .idle */
.cdr{position:relative;border-radius:50%;flex:none}
.cdr > *{position:absolute;inset:0;border-radius:50%}
.cdr .l{-webkit-mask:radial-gradient(circle,transparent 7.4%,#000 7.6%);mask:radial-gradient(circle,transparent 7.4%,#000 7.6%)}
.cdr .base{background:conic-gradient(from 0deg,#f3c9b6 0deg,#efd2c4 20deg,#e9e3dc 40deg,#dfe3e2 55deg,#f2f2ee 90deg,#d9dcd9 115deg,#cfd3cf 135deg,#e4d7cc 160deg,#ead2c2 180deg,#e2ddd5 200deg,#d7dad6 215deg,#c7d8cc 245deg,#a9cfc0 268deg,#b9d6c9 288deg,#d8dcd8 310deg,#e7dcd3 335deg,#f3c9b6 360deg)}
.cdr .art{background:url(/media/cover-512.jpg) center 30%/cover;opacity:.92;-webkit-mask:radial-gradient(circle,transparent 31.8%,#000 32.2%);mask:radial-gradient(circle,transparent 31.8%,#000 32.2%)}
.cdr .grooves{background:repeating-radial-gradient(circle,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.025) 1px 2px);-webkit-mask:radial-gradient(circle,transparent 32%,#000 33%);mask:radial-gradient(circle,transparent 32%,#000 33%)}
.cdr .rain{opacity:.85;background:conic-gradient(from 0deg,transparent 58deg,#ffb3c7 62deg,#ffe08a 65deg,#b6f5a6 68deg,#8fe0ff 71deg,#c6a6ff 74deg,#ffc2e2 77deg,transparent 82deg,transparent 100deg,rgba(255,180,200,.7) 104deg,rgba(255,236,150,.7) 107deg,rgba(150,240,200,.7) 110deg,transparent 116deg,transparent 228deg,#ffb7d0 233deg,#ffe28f 237deg,#a9f1b0 241deg,#7fd6ff 245deg,#b79dff 249deg,transparent 255deg,transparent 268deg,rgba(255,190,210,.6) 272deg,rgba(170,240,220,.6) 276deg,transparent 281deg);
  -webkit-mask:radial-gradient(circle,transparent 31%,#000 36%,#000 49%,transparent 50%);mask:radial-gradient(circle,transparent 31%,#000 36%,#000 49%,transparent 50%)}
.cdr .art ~ .rain{opacity:.28}
.cdr .glare{background:conic-gradient(from 0deg,transparent 30deg,rgba(255,255,255,.55) 52deg,transparent 70deg,transparent 210deg,rgba(255,255,255,.4) 228deg,transparent 246deg)}
.cdr .art ~ .glare{opacity:.5}
.cdr .inner{background:radial-gradient(circle,#f6f7f7 7.6%,#fff 9%,#eef0f0 13%,#d5d9da 13.6%,#eef0f0 14.4%,#e3e6e7 20%,#c3c8ca 22.5%,#b4babd 24.5%,#cfd4d6 26%,#9da4a8 28.4%,#3c4247 29.4%,#59626a 30.4%,#8b9399 31.2%,transparent 31.8%)}
.cdr .rim{box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 0 0 2px rgba(80,86,92,.35)}
.cdr::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 18px 30px rgba(0,0,0,.55)}
.cdr .ink svg{width:100%;height:100%;display:block;overflow:visible}
.cdr .ink text{font-family:var(--hand);fill:#141414}
.cdr .ink .ink{fill:none;stroke:#141414;stroke-linecap:round;stroke-linejoin:round}
.cdr .turn{will-change:transform}
@keyframes idle{to{transform:rotate(360deg)}}
.cdr.idle .turn{animation:idle 14s linear infinite}
@media (prefers-reduced-motion:reduce){.cdr.idle .turn{animation:none}}

/* lined mixtape insert card */
.insert{background:var(--card);color:var(--card-ink);border-radius:4px;padding:8px 16px;
  background-image:repeating-linear-gradient(transparent 0 33px,var(--rule) 33px 34px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.insert h2,.insert .h{font-family:var(--hand);font-weight:400;font-size:24px;margin:6px 0 8px;line-height:1.3;text-transform:uppercase}
.tilt-l{transform:rotate(-.6deg)} .tilt-r{transform:rotate(.5deg)}

/* home */
.home{gap:12px}
.homecd{position:relative;height:320px;margin:0 -20px;display:grid;place-items:center}
.homecd .cdr{--cd:290px;width:var(--cd);height:var(--cd)}
.homecd::before{content:"";position:absolute;width:380px;height:380px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(224,169,78,.2),transparent 65%);pointer-events:none}
.homehead{display:flex;align-items:baseline;justify-content:space-between}
.homehead h1{margin:0;font-size:14px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.homehead span{font-size:12px;color:var(--hi)}
.tracks.insert{background:none;box-shadow:none;padding:0;transform:none;display:flex;flex-direction:column;gap:10px}
.track{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:13px 14px;color:var(--card-ink);
  background:var(--card);background-image:linear-gradient(transparent calc(100% - 7px),var(--rule) calc(100% - 7px) calc(100% - 6px),transparent calc(100% - 6px));
  border-radius:6px;box-shadow:0 4px 0 #b9b2a0,0 10px 20px rgba(0,0,0,.4);transition:transform .08s,box-shadow .08s}
.track:nth-child(odd){transform:rotate(-.5deg)} .track:nth-child(even){transform:rotate(.4deg)}
.track:focus-visible{outline:2px solid var(--hi);outline-offset:3px}
.track .no{font-size:12px;flex:none}
.track .t{font-family:var(--hand);font-size:20px;line-height:1;white-space:nowrap;text-transform:uppercase}
.track .dots{flex:1;border-bottom:2px dotted rgba(0,0,0,.35);min-width:12px}
.track .tag{font-size:11px;background:var(--hi);padding:1px 5px;letter-spacing:.06em}
.track .pl{font-size:11px;width:26px;height:26px;border-radius:50%;background:var(--hi);color:#111;display:grid;place-items:center;flex:none;padding-left:2px;box-sizing:border-box}
.track:active{transform:translateY(3px);box-shadow:0 1px 0 #b9b2a0,0 4px 10px rgba(0,0,0,.4)}
.boardlink{all:unset;cursor:pointer;align-self:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--hi);padding:10px}
.foot{font-size:11px;color:var(--ink-3);text-align:center}

/* warning sticker (permission + safety) */
.sticker{align-self:center;background:#fff;color:#000;border:3px solid #000;box-shadow:0 0 0 4px #fff,0 10px 24px rgba(0,0,0,.45);padding:10px 16px 12px;text-align:center;min-width:240px;max-width:min(100%,320px);transform:rotate(-1.5deg)}
.sticker .s1{display:block;font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;border-bottom:3px solid #000;padding-bottom:6px;margin-bottom:6px}
.sticker .s2{display:block;font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:20px;letter-spacing:-.01em;line-height:1.05;text-transform:uppercase}
.sticker .s3{display:block;font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;border-top:3px solid #000;padding-top:6px;margin-top:6px}
.permbody{font-size:14px;line-height:1.6;color:var(--card-ink);margin:2px 0 8px}
.rules{list-style:none;margin:4px 0;padding:0;font-size:14px;line-height:34px}
.rules li::before{content:"✗ ";font-family:var(--hand);font-size:12px}
.warnsub{font-size:13px;color:var(--ink-2);text-align:center;margin-top:4px}
.check{all:unset;cursor:pointer;display:flex;gap:12px;align-items:center;padding:12px 14px;border:1.5px dashed var(--ink-3);border-radius:12px;font-size:13px;line-height:1.4;box-sizing:border-box;width:100%}
.check .box{flex:none;width:22px;height:22px;border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--hand);font-size:14px;color:transparent}
.check[aria-pressed="true"] .box{background:var(--hi);border-color:var(--hi);color:#111}

/* ready */
.readybox{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.readybox h2{margin:0;font-family:var(--hand);font-weight:400;font-size:40px;line-height:1.15;text-transform:uppercase}
.readybox p{max-width:300px;color:var(--ink-2)}

/* Discman LCD */
.lcd{background:var(--lcd);color:var(--lcd-ink);border-radius:10px;padding:12px 16px;font-family:var(--pix);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.35),0 0 0 6px #1d1d21,0 0 0 7px #2f2f35;
  background-image:linear-gradient(rgba(255,255,255,.08),transparent 40%),radial-gradient(rgba(29,36,22,.09) 1px,transparent 1.2px);background-size:auto,3px 3px}
.lcdgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px}
.lcd .dim{font-size:19px;color:var(--lcd-dim)}
.lcd .r{text-align:right}
.lcd .big{grid-column:1/-1;font-size:70px;line-height:.85;letter-spacing:.02em}
.lcd .big small{font-size:28px}
.lcd .mid{font-size:22px}
.countwrap{flex:1;display:grid;place-items:center}
.countlcd{width:min(300px,100%);aspect-ratio:1.2;display:grid;place-items:center}
.countnum{font-family:var(--pix);font-size:190px;line-height:1;color:var(--lcd-ink)}
.countnum.tick{animation:tick .9s steps(4,end)}
@keyframes tick{0%{transform:scale(1.18)}30%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.countnum.tick{animation:none}}

/* run */
.runcd{display:grid;place-items:center;margin-top:6px}
.runcd .cdr{--cd:min(72vw,290px,38vh);width:var(--cd);height:var(--cd)}
.spinhint{text-align:center;font-size:11px;color:var(--ink-3);margin-top:-4px}

/* results */
.lcd .score{grid-column:1/-1;font-size:84px;line-height:.85}
.lcd .score .dec{font-size:44px}
.segs{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;margin-top:6px}
.seg-row{display:grid;grid-template-columns:96px 1fr 44px;gap:8px;align-items:center;font-size:19px}
.seg-bar{display:flex;gap:2px;height:14px}
.seg-bar i{flex:1;background:var(--lcd-dim);opacity:.35}
.seg-bar i.on{background:var(--lcd-ink);opacity:1}
.field-in{display:flex;align-items:center;gap:4px;padding:0 16px;border-radius:999px;border:1.5px solid var(--ink-3);background:transparent}
.field-in span{color:var(--ink-2);font-size:16px}
.field-in input{flex:1;min-width:0;border:0;background:transparent;font-family:var(--mono);font-size:16px;padding:13px 0;color:var(--ink);outline:none}
.field-in[hidden]{display:none!important}
.lock{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1.5px dashed var(--ink-3);border-radius:12px;font-size:13px;line-height:1.4}
.lock[hidden]{display:none!important}
.share{display:none}   /* share card is drawn as an image when you tap Share */

/* drive / bike / ride */
.dark{background:#050506}
.ridewrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:40px 20px 140px;text-align:center}
.ridecd{--cd:min(68vw,260px,38vh);width:var(--cd);height:var(--cd)}
.ridecd[hidden],.snake[hidden],.ridewave[hidden]{display:none!important}
.ridestate{display:none}
.ridebig{font-size:13px;color:var(--ink-3);max-width:240px;line-height:1.6}
.ridewave{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 86px);transform:translateX(-50%);width:min(280px,80%);height:30px;display:flex;align-items:center;gap:3px}
.ridewave i{flex:1;border-radius:1px;background:#2b2b30;height:20%}
.ridewave i.on{background:var(--hi)}
.ridestop{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);transform:translateX(-50%);border:1.5px solid #3a3a40;background:transparent;color:var(--ink-2);border-radius:999px;padding:11px 34px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.passenger .ridewrap{justify-content:flex-start;padding-top:calc(env(safe-area-inset-top,0px) + 26px)}

/* Snake on the LCD */
.snake{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px;align-items:stretch;touch-action:none;-webkit-user-select:none;user-select:none}
.snake .lcd{padding:10px}
.snakehead{display:flex;justify-content:space-between;align-items:center;font-family:var(--pix);font-size:22px;color:var(--lcd-ink);padding:0 4px 6px}
.cvwrap{position:relative}
#snakeCv{display:block;width:100%;height:auto;aspect-ratio:1;touch-action:none}
.snakeover{position:absolute;inset:0;background:var(--lcd);color:var(--lcd-ink);font-family:var(--pix);padding:8px 10px;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.snakeover[hidden]{display:none!important}
.sohead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--lcd-ink);padding-bottom:3px}
.sohead b{font-weight:400;font-size:24px}
.sohead span{font-size:16px}
.miniboard{list-style:none;margin:0;padding:0;flex:1;min-height:0;overflow:hidden}
.miniboard li{display:grid;grid-template-columns:26px 1fr auto;gap:6px;font-size:18px;line-height:1.05}
.miniboard li.me{background:var(--lcd-ink);color:var(--lcd)}
.miniboard li.gap{color:var(--lcd-dim)}
.miniboard .n{opacity:.7}
.sosave{display:flex;align-items:center;gap:4px;border:2px solid var(--lcd-ink);padding:0 3px 0 8px}
.sosave span{font-size:18px}
.sosave input{flex:1;min-width:0;border:0;background:transparent;color:var(--lcd-ink);font-family:var(--pix);font-size:20px;padding:4px 0;outline:none}
.sosave button{border:0;background:var(--lcd-ink);color:var(--lcd);font-family:var(--pix);font-size:18px;padding:2px 10px}
.sosave[hidden],.soerr[hidden]{display:none!important}
.soerr{margin:0;font-size:16px}
.sotap{text-align:center;font-size:20px;animation:blink 1.1s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}
.snakenote{font-size:11px;color:var(--ink-3);text-align:center}

/* stats (ride results) */
.lcd .stats{grid-column:1/-1;display:flex;justify-content:space-between;font-size:20px;margin-top:4px}

/* leaderboards */
.chips{display:flex;gap:6px}
.chips button{all:unset;cursor:pointer;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid #55524c;padding:6px 9px}
.chips button[aria-pressed="true"]{background:var(--hi);color:#111;border-color:var(--hi)}
.board{padding:12px 16px 10px;background-image:repeating-linear-gradient(transparent 0 25px,var(--rule) 25px 26px);background-position:0 46px}
.board ol{list-style:none;margin:0;padding:0;font-size:13.5px;line-height:26px}
.board li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px}
.board li.me{font-weight:600;background:linear-gradient(transparent 20%,rgba(224,169,78,.85) 20% 85%,transparent 85%)}
.board li.gap{color:rgba(0,0,0,.45)}
.board .n{opacity:.75}
.elnote{font-family:var(--hand);font-size:16px;line-height:1.8;color:var(--ink)}
.elnote i{display:block;text-align:right;font-style:normal;margin-top:4px}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateX(-50%);background:var(--hi);color:#111;padding:11px 18px;border-radius:999px;font-size:13px;font-weight:600;z-index:100;max-width:90%;text-align:center}
.toast[hidden]{display:none!important}
.lcd .score sup{font-size:34px;vertical-align:top;margin-left:4px}

/* password page (functions/_middleware.js) */
.lockpage{gap:16px}
.lockcd{position:relative;display:grid;place-items:center;height:260px;margin:0 -20px}
.lockcd::before{content:"";position:absolute;width:340px;height:340px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(224,169,78,.18),transparent 65%);pointer-events:none}
.lockcd .cdr{--cd:230px;width:var(--cd);height:var(--cd)}
.presslabel{align-self:flex-start;background:#f2f2f2;color:#111;font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:6px 10px;border:2px solid #111;box-shadow:0 0 0 3px #f2f2f2;transform:rotate(-2deg)}
.lockpage .insert p{line-height:34px}
.pwfield{display:flex;align-items:center;gap:10px;padding:0 18px;border-radius:999px;border:1.5px solid var(--ink-3)}
.pwfield.bad{border-color:var(--bad)}
.pwfield input{flex:1;min-width:0;border:0;background:transparent;font-family:var(--mono);font-size:16px;padding:14px 0;color:var(--ink);outline:none}
.pwfield:focus-within{border-color:var(--hi)}
.lockfoot{text-align:center;color:var(--ink-3);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* desktop: "grab your phone" (desk.js) */
html.desk .screen,html.desk .toast{display:none!important}
.deskpage{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:center;gap:clamp(32px,6vw,96px);max-width:1080px;margin:0 auto;padding:48px max(24px,env(safe-area-inset-right,0px)) 48px max(24px,env(safe-area-inset-left,0px))}
.deskcd{position:relative;display:grid;place-items:center}
.deskcd::before{content:"";position:absolute;width:130%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(224,169,78,.16),transparent 62%);pointer-events:none}
.deskcd .cdr{--cd:min(440px,38vw);width:var(--cd);height:var(--cd)}
.deskside{display:flex;flex-direction:column;gap:22px;min-width:0}
.deskside .insert .h{font-size:34px}
.deskqr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:16px 18px}
.deskqr .qr{width:132px;height:132px}
.deskqr .qr svg{width:100%;height:100%;display:block}
.deskqr .t1{font-size:30px;line-height:1}
.deskqr .t2{font-size:18px;color:var(--lcd-dim);line-height:1.15}
.deskqr .t3{font-size:20px;word-break:break-all;margin-top:8px}
.blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.blink{animation:none}}
.deskcopy{display:flex;gap:12px;align-items:center}
.deskcopy .btn{width:auto;padding:11px 20px;font-size:12px}
@media (max-width:820px){.deskpage{grid-template-columns:minmax(0,1fr);gap:36px}.deskcd .cdr{--cd:min(300px,70vw)}.deskside{max-width:440px;margin:0 auto;width:100%}}
.sharehint{text-align:center;margin-top:-6px}
.fixsteps{margin:0 0 6px;padding-left:22px;font-size:13.5px;line-height:1.55;color:var(--card-ink);display:flex;flex-direction:column;gap:8px}
.fixsteps li::marker{font-family:var(--hand);font-size:16px}
.fixsteps[hidden]{display:none!important}

/* ---- fit every phone ----
   Short screens (small phones, or tall ones with the browser bars showing) tighten the big pieces so the
   playing screens fit without scrolling. Phones held sideways get asked to turn upright; the song keeps playing. */
@media (max-height:740px){
  .view{gap:10px}
  .homecd{height:260px} .homecd .cdr{--cd:236px} .homecd::before{width:310px;height:310px}
  .sticker{padding:8px 14px 10px} .sticker .s2{font-size:18px}
  .insert{padding:6px 14px}
  .lcd .big{font-size:58px} .lcd .score{font-size:70px}
  .countnum{font-size:150px}
  .readybox h2{font-size:34px}
  .btn{padding:13px 18px}
  .ridewrap{gap:18px;padding-bottom:120px}
}
@media (max-height:600px){
  .homecd{height:220px} .homecd .cdr{--cd:200px} .homecd::before{width:260px;height:260px}
  .lcd .big{font-size:48px} .lcd .score{font-size:58px}
  .countnum{font-size:120px}
  .permbody,.rules{font-size:13px}
  .rules{line-height:30px}
}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  body::after{content:"Turn your phone upright to play.";position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;text-align:center;
    background:var(--bg);color:var(--ink);font-family:var(--hand);font-size:28px;text-transform:uppercase}
}
@media (max-width:360px){
  .track{gap:6px;padding:12px 10px}
  .track .t{font-size:17px}
  .track .tag{font-size:9px;padding:1px 4px}
  .track .pl{width:22px;height:22px;font-size:9px}
}
/* masking-tape label stuck across the middle of a track button */
.track .tapetag{flex:none;transform:rotate(-5deg);padding:3px 9px 1px;
  font-family:var(--hand);font-size:14px;line-height:1.1;color:#1a1a1a;background:rgba(230,220,192,.95);box-shadow:0 1px 3px rgba(0,0,0,.3);
  clip-path:polygon(0 10%,5% 0,10% 12%,16% 2%,100% 6%,96% 34%,100% 58%,95% 80%,100% 100%,6% 94%,2% 100%,0 72%,4% 46%,0 24%)}
@media (max-width:400px){.track .tapetag{font-size:12px;padding:2px 7px 0}.track .dots{min-width:6px}}
.legal{font-size:11px;color:var(--ink-3);text-align:center;margin-top:-4px}
.legal a{color:var(--ink-2)}
/* terms and privacy pages */
body.docpage{height:auto;min-height:100%}
.doc{max-width:560px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 24px) max(20px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 40px) max(20px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:12px}
.doc h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--hi);margin:14px 0 0}
.doc p{color:var(--ink-2);line-height:1.65}
.doc p b{color:var(--ink)}
.doc a{color:var(--ink)}
.docback{font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-2)!important}
.doc .insert p{line-height:34px;color:var(--card-ink)}
/* text-alert note on the results screens */
.textcard{position:relative;display:flex;flex-direction:column;gap:8px;padding:6px 14px 12px}
.textcard .h{margin:4px 0 0}
.textcard p{line-height:1.5;font-size:13px}
.tapebit{position:absolute;top:-10px;right:18px;width:64px;height:18px;background:rgba(230,220,192,.95);transform:rotate(6deg);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.textcard .inp{display:flex;align-items:center;gap:8px;border:1.5px solid rgba(26,26,26,.4);border-radius:999px;padding:0 14px;background:rgba(255,255,255,.35)}
.textcard .inp:focus-within{border-color:var(--card-ink)}
.textcard .inp select{border:0;background:transparent;font:600 14px var(--mono);color:var(--card-ink);padding:12px 0;max-width:96px}
.textcard .inp input{flex:1;min-width:0;border:0;background:transparent;font-family:var(--mono);font-size:16px;padding:12px 0;color:var(--card-ink);outline:none}
.textcard .inp small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(26,26,26,.5)}
.textcard .mini{all:unset;cursor:pointer;text-align:center;border-radius:999px;padding:13px;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;background:var(--card-ink);color:var(--card)}
.textcard .mini:focus-visible{outline:2px solid var(--card-ink);outline-offset:3px}
.textcard .mini[disabled]{opacity:.5}
.textcard .fanerr{color:#b33a2b;font-size:12px}
.textcard .fanerr[hidden]{display:none!important}
.textcard .fineprint{font-size:10px;line-height:1.45;color:rgba(26,26,26,.65)}
.textcard .fineprint a{color:inherit}
/* share buttons carry the Instagram glyph */
.igicon{width:18px;height:18px;display:inline-block;vertical-align:-4px;margin-right:9px}
/* save-then-post sheet for stories */
.savesheet{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;background:rgba(13,13,15,.8);
  padding:16px max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 16px) max(16px,env(safe-area-inset-left,0px))}
.savesheet[hidden]{display:none!important}
.savecard{position:relative;width:100%;max-width:440px;max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:8px 16px 14px}
.savecard .h{margin:6px 0 0}
.savecard img{display:block;width:auto;height:min(38vh,320px);aspect-ratio:9/16;align-self:center;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.saveclose{all:unset;cursor:pointer;position:absolute;top:6px;right:10px;width:36px;height:36px;display:grid;place-items:center;font-size:24px;color:var(--card-ink)}
.saveclose:focus-visible{outline:2px solid var(--card-ink)}
.savecard .mini{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;text-align:center;border-radius:999px;padding:13px;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;background:var(--card-ink);color:var(--card)}
.savecard .mini.ig{background:var(--hi);color:#111}
.savecard .mini:focus-visible{outline:2px solid var(--card-ink);outline-offset:3px}
.savecard .fineprint{font-size:10.5px;line-height:1.45;color:rgba(26,26,26,.65)}
.savehint{font-size:13px;line-height:1.5}
.shotlink{all:unset;cursor:pointer;align-self:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;color:var(--card-ink);padding:6px}
.shotlink:focus-visible{outline:2px solid var(--card-ink)}
.shotview{position:fixed;inset:0;z-index:120;background:#0d0d0f;display:grid;place-items:center}
.shotview[hidden]{display:none!important}
.shotview img{width:100%;height:100%;object-fit:contain}
.shothint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:opacity .4s}
.shothint.gone{opacity:0}
/* long handles cut off with … instead of pushing the score onto extra lines */
.board li > span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board li > span:last-child{white-space:nowrap}