/* RNGparty — one look for every page.
   Loaded LAST in each page's <head> so it overrides that page's own tokens and
   base components. Each page keeps its own layout CSS; this file owns the
   palette, type, the shared components (buttons, panels, tickets, chips, the
   sticky action bar) and motion. A page opts into its game colour with
   <html data-game="horsrng"> etc.  See theme section in PARTY.md / CLAUDE.md. */

/* ---------- tokens ---------- */
:root{
  /* aubergine-ink night, chalk text */
  --rp-ink:#140f1d; --rp-felt:#1e1729; --rp-felt-2:#2a2138; --rp-seam:#3a2f4d;
  --rp-chalk:#f5f0ea; --rp-chalk-2:#d4cbe0; --rp-dust:#a89cba;
  --rp-pop:#ffd84a;                    /* brand highlighter */
  --rp-good:#4ade9a; --rp-bad:#ff5c7a;
  --accent:var(--rp-pop); --on-accent:#1a1222;
  --accent-ink:var(--accent); --pop-ink:var(--rp-pop);   /* colour used AS TEXT; darkened in light mode */
  --rp-display:'Bowlby One','Arial Black',Impact,system-ui,sans-serif;
  --rp-body:'Atkinson Hyperlegible Next','Atkinson Hyperlegible',system-ui,-apple-system,sans-serif;
  --rp-mono:'Atkinson Hyperlegible Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --rp-radius:14px; --rp-spring:cubic-bezier(.34,1.56,.64,1); --rp-ease:cubic-bezier(.2,.8,.2,1);

  /* the names every game page already uses, mapped onto the palette */
  --background:var(--rp-ink); --foreground:var(--rp-chalk);
  --surface:var(--rp-felt-2); --surface-raised:#352a47; --outline:#4a3d61;
  --prose-2:var(--rp-chalk-2); --prose-3:var(--rp-dust);
  --card:var(--rp-felt); --card-line:var(--rp-seam);
  color-scheme:dark;
}
html:not(.dark){
  --rp-ink:#f3f0f7; --rp-felt:#ffffff; --rp-felt-2:#ece7f3; --rp-seam:#d9d1e6;
  --rp-chalk:#1c1428; --rp-chalk-2:#3b3150; --rp-dust:#6c6080;
  --background:var(--rp-ink); --foreground:var(--rp-chalk);
  --surface:var(--rp-felt-2); --surface-raised:#e1d9ec; --outline:#c9bfd8;
  --prose-2:var(--rp-chalk-2); --prose-3:var(--rp-dust);
  --card:var(--rp-felt); --card-line:var(--rp-seam);
  --pop-ink:#c08f00;
  color-scheme:light;
}
/* one "ball" colour per game — CTA, focus and highlights follow it */
[data-game="rngdle"]{--accent:#8aa2ff}
[data-game="horsrng"]{--accent:#ff9b54}
[data-game="rngoldrush"]{--accent:#f5bd3a}
[data-game="imposter"]{--accent:#ff5c7a}
[data-game="secretrule"]{--accent:#65dec1}
[data-game="irishpoker"]{--accent:#3ccf8e}   /* hub/party cards only — the game page keeps its own felt look */
[data-game="wavelength"]{--accent:#4fd8e8}
[data-game="mafia"]{--accent:#c9a7ff}         /* hub/party cards only — the game page keeps its own noir look */
[data-game="party"]{--accent:var(--rp-pop)}
[data-game]{--accent-ink:var(--accent)}
html:not(.dark) [data-game],html:not(.dark)[data-game]{--accent-ink:color-mix(in srgb,var(--accent) 62%,#000)}


/* ---------- base ---------- */
html{background:var(--rp-ink)}
body{
  background:var(--rp-ink); color:var(--rp-chalk);
  font-family:var(--rp-body); font-size:15px; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* ambient room light: two slow-drifting pools of the page's accent, plus grain */
body::before{
  content:''; position:fixed; inset:-20vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38vmax 30vmax at 18% 12%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 70%),
    radial-gradient(34vmax 28vmax at 86% 78%, color-mix(in srgb,#8aa2ff 12%,transparent), transparent 70%);
  animation:rp-drift 26s ease-in-out infinite alternate;
}
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes rp-drift{to{transform:translate3d(4vmax,3vmax,0) rotate(6deg)}}
.mono,.mono *{font-family:var(--rp-mono)!important;letter-spacing:.02em}
button,input,select,textarea{font-family:inherit}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:3px solid var(--accent)!important;outline-offset:3px}
h1,h2,h3{letter-spacing:-.01em}

/* ---------- header ---------- */
header{background:color-mix(in srgb,var(--rp-ink) 78%,transparent)!important;border-bottom:1px solid var(--rp-seam)!important;backdrop-filter:blur(14px) saturate(1.3)}
.logo,.herowordmark{font-family:var(--rp-display)!important;font-weight:400!important;letter-spacing:.01em!important;color:var(--rp-chalk)}
.logo b,.herowordmark b{color:var(--pop-ink)!important;font-weight:400}
.logo{font-size:21px!important;transition:transform .3s var(--rp-spring)}
.logo:hover{transform:rotate(-3deg) scale(1.04)}
.gametitle{font-weight:700;color:var(--rp-chalk-2)!important;border-left-color:var(--rp-seam)!important}
.gametitle::first-letter{font-size:1.1em}
.iconbtn{background:var(--rp-felt)!important;border:1px solid var(--rp-seam)!important;border-radius:12px!important;transition:transform .25s var(--rp-spring),border-color .2s}
.iconbtn:hover{border-color:var(--accent)!important;transform:translateY(-1px) rotate(-6deg)}

.gametitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:440px){ .logo{font-size:17px!important} .gametitle{font-size:13px!important} .hbar{gap:9px!important} }
/* big live numbers (pots, scores, totals) share the poster face */
.secretcard .word,.potbox .amt,.dmbig,.drinktotal,.eptotal>span:first-child{font-family:var(--rp-display)!important;font-weight:400!important;letter-spacing:.01em!important}

/* ---------- panels & type ---------- */
.panel{background:var(--rp-felt)!important;border:1px solid var(--rp-seam)!important;border-radius:var(--rp-radius)!important;box-shadow:0 1px 0 color-mix(in srgb,var(--rp-chalk) 6%,transparent) inset,0 18px 40px -28px #000}
.panel h3,.panel>h3{font-family:var(--rp-body);font-weight:800!important;letter-spacing:.14em!important;font-size:12px!important;color:var(--rp-dust)!important;text-transform:uppercase}
.small{color:var(--rp-dust)}
.panel + .center{margin-top:16px}

/* ---------- buttons ---------- */
.bigbtn,.rollbtn{
  background:var(--accent)!important; color:var(--on-accent)!important; border:0!important;
  font-weight:800!important; letter-spacing:.01em; border-radius:12px!important;
  box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 45%,#000), 0 12px 30px -12px color-mix(in srgb,var(--accent) 70%,transparent)!important;
  transition:transform .18s var(--rp-ease), box-shadow .18s, filter .2s; position:relative; overflow:hidden;
}
.bigbtn::after,.rollbtn::after::after{  /* a sheen that sweeps across on hover */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,color-mix(in srgb,#fff 45%,transparent) 50%,transparent 65%);
  transform:translateX(-120%); transition:transform .6s var(--rp-ease);
}
.bigbtn:not(:disabled):hover::after,.rollbtn:not(:disabled):hover::after{transform:translateX(120%)}
.bigbtn:not(:disabled):hover,.rollbtn:not(:disabled):hover{filter:brightness(1.06)}
.bigbtn:not(:disabled):active,.rollbtn:not(:disabled):active{transform:translateY(3px) scale(.985);box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 45%,#000)!important}
.bigbtn:disabled,.rollbtn:disabled{filter:grayscale(.5);opacity:.45!important;box-shadow:none!important}
.secbtn,.linkbtn{transition:transform .18s var(--rp-ease),border-color .2s,background .2s}
.secbtn{background:var(--rp-felt-2)!important;border:1px solid var(--rp-seam)!important;color:var(--rp-chalk)!important;border-radius:12px!important;font-weight:700!important}
.secbtn:hover{border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 10%,var(--rp-felt-2))!important}
.secbtn:active{transform:scale(.97)}
.linkbtn{color:var(--rp-dust)!important}
.linkbtn:hover{color:var(--accent-ink)!important}

/* ---------- inputs & toggles ---------- */
.inp{background:var(--rp-ink)!important;border:1px solid var(--rp-seam)!important;color:var(--rp-chalk)!important;border-radius:12px!important;font-size:16px!important;transition:border-color .2s,box-shadow .2s}
.inp:focus{outline:0!important;border-color:var(--accent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)!important}
.inp::placeholder{color:color-mix(in srgb,var(--rp-dust) 75%,transparent)}
.switch input:checked+.track{background:var(--accent)!important}
.switch .knob{transition:transform .3s var(--rp-spring)!important}
.toggle-row{background:var(--rp-ink)!important;border-color:var(--rp-seam)!important;border-radius:12px!important}
.seg{background:var(--rp-ink)!important;border:1px solid var(--rp-seam);border-radius:12px!important}
.seg button{border-radius:9px!important;transition:background .2s,color .2s}
.seg button.on{background:var(--accent)!important;color:var(--on-accent)!important}

/* ---------- the ticket (signature): room codes and game cards are raffle stubs ---------- */
.codebox,#pCodePanel{
  position:relative; background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--accent) 18%,transparent), transparent 55%),
    var(--rp-felt)!important;
  border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--rp-seam))!important; border-radius:16px!important;
  -webkit-mask:radial-gradient(circle 13px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 13px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
}
.codebox .lbl,#pCodePanel .lbl{letter-spacing:.32em!important;font-weight:800;color:var(--rp-dust)!important}
.codebox .code,#pCodePanel .code,.rc{font-family:var(--rp-display)!important;font-weight:400!important;letter-spacing:.18em!important;color:var(--accent-ink)!important;text-shadow:0 0 28px color-mix(in srgb,var(--accent) 45%,transparent)}
.qrbox{border-radius:12px!important;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 25%,transparent);transition:transform .4s var(--rp-spring)}
.qrbox:hover{transform:scale(1.04) rotate(-1.5deg)}

/* entry choices + game cards */
.choice,.gamebox,.gamecard{
  position:relative; isolation:isolate;
  background:var(--rp-felt)!important; border:1px solid var(--rp-seam)!important; border-radius:18px!important;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px))!important;
  transition:transform .35s var(--rp-ease), border-color .25s, box-shadow .3s!important;
  will-change:transform;
}
.choice:hover,.gamebox:not(.disabled):hover,.gamecard:not(:disabled):hover{--lift:-4px;border-color:var(--accent)!important;box-shadow:0 22px 40px -24px color-mix(in srgb,var(--accent) 80%,#000)}
.choice:active,.gamecard:not(:disabled):active{--lift:1px}
/* cursor spotlight + glare (motion.js feeds --mx/--my) */
.choice::before,.gamebox::before,.gamecard::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; opacity:0; transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--accent) 22%,transparent), transparent 60%);
}
.choice:hover::before,.gamebox:hover::before,.gamecard:hover::before{opacity:1}
.choice .t,.gamebox-body h3,.gamecard .t{font-family:var(--rp-display)!important;font-weight:400!important;letter-spacing:.01em;font-size:19px!important}
.choice .ic,.gamecard .ic{display:inline-grid;place-items:center;transition:transform .5s var(--rp-spring)}
.choice:hover .ic,.gamecard:not(:disabled):hover .ic{transform:rotate(-12deg) scale(1.15)}
/* hub game box = ticket with a perforation between art and body */
.gamebox{overflow:hidden}
.gamebox-media{background:
    radial-gradient(100% 120% at 50% 0%, color-mix(in srgb,var(--g,var(--accent)) 28%,transparent), transparent 70%),
    var(--rp-felt-2)!important; position:relative}
.gamebox-media::after{content:'';position:absolute;left:14px;right:14px;bottom:-1px;border-bottom:2px dashed var(--rp-seam)}
.gamebox-tag{font-family:var(--rp-mono)!important;color:var(--accent-ink)!important;letter-spacing:.08em!important}

/* hub: game boxes stack top-down even when a <button> is stretched by the grid */
.gamebox{display:flex!important;flex-direction:column}
.gamebox-body{flex:1}
.joinbar-row .bigbtn{margin-top:0!important}
.joinbar{position:relative;z-index:2}

/* ---------- lottery balls (hub + party hero) ---------- */
.hero{position:relative;text-align:center}
.hero .herosub{max-width:520px;margin:12px auto 0}
.hero .herowordmark{position:relative;z-index:2;font-size:clamp(46px,10vw,92px)!important;line-height:.95;text-shadow:0 6px 0 color-mix(in srgb,var(--rp-ink) 60%,#000)}
.hero .herosub{position:relative;z-index:2;font-size:15px!important;color:var(--rp-chalk-2)!important}
.hero{padding-top:44px!important;padding-bottom:18px!important}
.rp-balls{position:absolute;top:0;bottom:0;left:calc(-1 * min(260px,17vw));right:calc(-1 * min(260px,17vw));pointer-events:none;z-index:0}
.rp-ball{
  position:absolute; left:var(--x); top:var(--y); width:var(--s,54px); height:var(--s,54px); border-radius:50%;
  display:grid; place-items:center; font-size:calc(var(--s,54px) * .36); line-height:1;
  background:
    radial-gradient(circle at 50% 50%, #fffaf2 0 30%, transparent 31%),
    radial-gradient(circle at 32% 26%, color-mix(in srgb,#fff 70%,transparent) 0 7%, transparent 8%),
    radial-gradient(circle at 38% 32%, color-mix(in srgb,var(--accent) 60%,#fff), var(--accent) 48%, color-mix(in srgb,var(--accent) 50%,#000) 100%);
  box-shadow: inset -5px -8px 14px #0005, 0 18px 26px -14px #000;
  animation: rp-float var(--d,7s) ease-in-out infinite alternate;
  transition: translate .6s var(--rp-ease);
}
@keyframes rp-float{from{transform:translateY(-7px) rotate(-10deg)}to{transform:translateY(9px) rotate(12deg)}}
/* phones: the balls line up in a bobbing row above the title instead of orbiting it */
@media (max-width:640px){
  .hero{padding-top:22px!important}
  .rp-balls{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:flex;justify-content:center;gap:10px;height:48px;margin-bottom:10px}
  .rp-ball{position:relative;left:auto;top:auto;--s:36px!important}
  .rp-ball:nth-child(2n){animation-delay:-1.4s}
}
html,body{overflow-x:clip}

/* party picker: each game card carries its ball */
.gamecard .ic{
  width:54px;height:54px;border-radius:50%;font-size:22px!important;flex:none;
  background:
    radial-gradient(circle at 50% 50%, #fffaf2 0 31%, transparent 32%),
    radial-gradient(circle at 32% 26%, color-mix(in srgb,#fff 70%,transparent) 0 7%, transparent 8%),
    radial-gradient(circle at 38% 32%, color-mix(in srgb,var(--accent) 60%,#fff), var(--accent) 48%, color-mix(in srgb,var(--accent) 50%,#000) 100%);
  box-shadow: inset -4px -6px 12px #0005, 0 12px 20px -12px #000;
}
.gamecard:disabled .ic{filter:grayscale(.85)}
.crown{display:inline-block;transform-origin:50% 90%;animation:rp-crown 2.6s ease-in-out infinite}
@keyframes rp-crown{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-14deg) translateY(-2px)}84%{transform:rotate(10deg)}92%{transform:rotate(-4deg)}}

/* QR: room for the "Scan to join" caption join-qr.js appends under the code */
.qrbox{width:150px!important;height:auto!important;line-height:1.15!important;padding:8px 8px 6px!important}
.qrbox svg{width:100%!important;height:auto!important;aspect-ratio:1}
.qrbox span{display:block;margin-top:4px;font-size:11px;font-weight:800;letter-spacing:.08em;color:#3a2f4d;text-transform:uppercase}
/* hub "BETA / IN PROGRESS" pills take the card's own colour */
.mini-pills .pill[style*="fef3c7"],.mini-pills .pill[style*="e0e7ff"]{background:transparent!important;color:var(--accent-ink)!important;border:1px solid currentColor!important;font-family:var(--rp-mono)}

/* pickable cards inside games: horses, vote targets, sip targets */
.horsecard,.voteopt,.giveopt{transition:transform .25s var(--rp-ease),border-color .2s,box-shadow .25s!important;border-radius:16px!important}
button.horsecard:hover,.voteopt:hover,.giveopt:hover{transform:translateY(-3px);border-color:var(--accent)!important}
button.horsecard:active,.voteopt:active,.giveopt:active{transform:scale(.97)}
.horsecard.selected,.voteopt.selected{border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--accent),0 16px 30px -18px var(--accent)!important}
.horsecard-name{font-family:var(--rp-display);font-weight:400!important;letter-spacing:.01em}

/* multi-select chips (ImpostRNG categories): tinted, not solid, so ten picks don't shout */
.catchip{border-radius:999px!important;transition:background .2s,border-color .2s,transform .2s var(--rp-ease)!important}
.catchip.on{background:color-mix(in srgb,var(--accent) 18%,var(--rp-felt))!important;color:var(--rp-chalk)!important;border:1px solid var(--accent)!important}
.catchip:active{transform:scale(.95)}
.setlabel{margin:18px 0 8px!important;font-weight:700}

/* hub game cards: a Remotion-rendered clip per game (video/ → media/).
   Idle it plays in slow motion, dimmed; hovered (or in view on a phone) it runs
   full speed and full colour. motion.js drives the playback rate. */
.gamebox-media:has(.gm-video){padding:0!important;min-height:0!important;aspect-ratio:1200/540;overflow:hidden;display:block!important}
.gamebox-media:has(.gm-video)>:not(.gm-video):not(.mini-pills){display:none!important}
.gm-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.75) brightness(.78);transform:scale(1.02);transition:filter .5s var(--rp-ease),transform 1.2s var(--rp-ease)}
.gamebox:hover .gm-video,.gm-video.rp-hot{filter:none;transform:scale(1.07)}
.gamebox-media:has(.gm-video) .mini-pills{position:absolute;left:12px;bottom:12px;z-index:2;margin:0}
.gamebox-media:has(.gm-video)::after{z-index:2}

/* how-to-play tutorials (shared: any game can use .tut-panel / .tut-dialog) */
.tut-panel video{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;background:#000;object-fit:cover}
.tut-open{display:block;margin:10px auto 0}
.tut-dialog{border:0;padding:0;background:var(--rp-ink);color:var(--rp-chalk);border-radius:20px;width:min(92vw,900px);max-height:92vh;overflow:auto;box-shadow:0 30px 80px -20px #000}
.tut-dialog::backdrop{background:color-mix(in srgb,#000 72%,transparent);backdrop-filter:blur(4px)}
.tut-dialog video{display:block;width:100%;max-height:78vh;background:#000;object-fit:contain;cursor:pointer}
.tut-dialog{position:relative}
.tut-dialog .bigbtn{width:calc(100% - 32px);margin:14px 16px 16px}
.tut-steps{margin:18px 20px 0 38px;line-height:1.55;color:var(--rp-chalk-2)}
.tut-steps li{margin-bottom:8px}

/* ---------- players ---------- */
.pchip,.lbrow,.minirow{border-radius:12px!important;border-color:var(--rp-seam)!important}
.pchip{background:var(--rp-felt-2)!important}
.av{box-shadow:0 0 0 2px var(--rp-felt),0 0 0 3px color-mix(in srgb,currentColor 0%,transparent)}
.rp-new{animation:rp-pop-in .55s var(--rp-spring) both}
@keyframes rp-pop-in{0%{opacity:0;transform:translateY(10px) scale(.85)}100%{opacity:1;transform:none}}

/* ---------- sticky action bar (same on every game) ---------- */
.actionbar{background:color-mix(in srgb,var(--rp-ink) 86%,transparent)!important;border-top:1px solid var(--rp-seam)!important;backdrop-filter:blur(14px);box-shadow:0 -14px 30px -18px #000!important}
.connbar{border-radius:12px!important}
.statusbig{font-family:var(--rp-body);font-weight:800}

/* winner / reveal banners pick up the game colour */
.winner{border-color:var(--accent)!important;background:radial-gradient(120% 120% at 50% 0%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 70%),var(--rp-felt)!important}
.winner .t{color:var(--accent-ink)!important;letter-spacing:.3em!important}
.winner .n,.reveal .n{font-family:var(--rp-display)!important;font-weight:400!important}

/* ---------- motion layer (motion.js) ---------- */
.rp-cursor-glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 13%,transparent), transparent 62%);
  transform:translate3d(var(--cx,-999px),var(--cy,-999px),0); transition:opacity .4s; mix-blend-mode:screen}
html:not(.dark) .rp-cursor-glow{mix-blend-mode:multiply;opacity:.6}
.rp-spark{position:fixed;width:2px;height:10px;border-radius:2px;background:var(--accent);pointer-events:none;z-index:9999;transform-origin:50% 100%}
.rp-pip{position:fixed;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;pointer-events:none;z-index:9998;background:var(--accent);animation:rp-pip-fade .7s ease-out forwards}
@keyframes rp-pip-fade{to{opacity:0;transform:scale(.2) translateY(8px)}}
[data-stagger]>*{animation:rp-rise .6s var(--rp-ease) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes rp-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* page-to-page: party → game → party crossfade where the browser supports it */
@view-transition{navigation:auto}
::view-transition-old(root){animation:rp-vt-out .28s ease both}
::view-transition-new(root){animation:rp-vt-in .38s var(--rp-ease) both}
@keyframes rp-vt-out{to{opacity:0;transform:scale(.985)}}
@keyframes rp-vt-in{from{opacity:0;transform:scale(1.015)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rp-cursor-glow,.rp-pip,.rp-spark{display:none!important}
  .choice,.gamebox,.gamecard{transform:none!important}
}