:root{
  --felt:#380610; --felt-hi:#5a0c19; --felt-lo:#130104;
  --brass:#c9a24b; --brass-hi:#f1dca0; --brass-lo:#7d5f22;
  --ivory:#f3ebd7; --paper:#f2ead6; --ink:#0a2a20; --ruby:#8e1b2b; --mute:#e3c3a6;
  --serif:"Instrument Serif","Playfair Display",Georgia,serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  color:var(--ivory);font-family:var(--sans);min-height:100dvh;overflow-x:hidden;
  background:
    radial-gradient(60% 50% at 50% 44%,rgba(255,200,170,.035),transparent 72%),
    radial-gradient(130% 105% at 50% 42%,var(--felt-hi) 0%,var(--felt) 48%,var(--felt-lo) 100%);
  -webkit-font-smoothing:antialiased;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.22;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .6  0 0 0 0 .8  0 0 0 0 .7  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>")}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}

.app{height:100dvh;min-height:560px;display:grid;grid-template-rows:auto 1fr;padding:clamp(14px,2.4vw,30px) clamp(14px,3vw,48px) calc(clamp(14px,2.4vw,30px) + var(--safe-b))}
header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;position:relative;z-index:6}
.brand{line-height:1}
.brand .name{font:italic 400 clamp(30px,3.6vw,46px)/1 var(--serif);letter-spacing:.005em}
.brand .name b{font-style:normal;color:var(--brass-hi)}
.brand .tag{display:block;margin-top:7px;font:500 10px/1 var(--sans);letter-spacing:.38em;text-transform:uppercase;color:var(--brass)}
.tools{display:flex;gap:10px;align-items:center}
.pill{height:38px;padding:0 16px;border:1px solid rgba(241,220,160,.45);border-radius:40px;font:500 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass-hi);display:inline-flex;align-items:center;gap:9px;transition:.25s;background:rgba(4,22,15,.35)}
.pill:hover{background:rgba(241,220,160,.14)}
.pill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#sound[aria-pressed=false] .on,#sound[aria-pressed=true] .off{display:none}

.layout{min-height:0;display:grid;grid-template-columns:1fr;gap:clamp(10px,2vw,40px)}
.main{min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(6px,1.6vh,18px);position:relative}
.stage{--chrome:340px;position:relative;width:min(100%,max(calc(100dvh - var(--chrome)),58vmin),900px);aspect-ratio:1}
.table-art{position:absolute;left:50%;top:50%;width:138%;height:138%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;opacity:1}
.stage canvas{display:block}
.rays{position:absolute;left:50%;top:50%;width:230%;height:230%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;opacity:.55;transition:opacity 1.2s,filter 1.2s;
  background:repeating-conic-gradient(from 0deg,rgba(241,205,130,.08) 0 2.6deg,transparent 2.6deg 7.5deg);
  -webkit-mask:radial-gradient(closest-side,#000 18%,transparent 66%);mask:radial-gradient(closest-side,#000 18%,transparent 66%);animation:rays 160s linear infinite}
.glow{position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;opacity:.7;transition:opacity 1s;
  background:radial-gradient(closest-side,rgba(255,210,130,.13),rgba(255,210,130,.04) 55%,transparent 80%)}
@keyframes rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
body[data-phase=spin] .rays,body[data-phase=charging] .rays{opacity:.8}
body[data-phase=result] .rays{opacity:1;filter:brightness(1.35)}
body[data-phase=result] .glow{opacity:1}

/* hub button */
#spin{--sz:max(calc(var(--wr)*.4),62px);position:absolute;left:50%;top:50%;width:var(--sz);height:var(--sz);transform:translate(-50%,-50%);border-radius:50%;z-index:5;touch-action:manipulation;user-select:none;-webkit-user-select:none;
  background:conic-gradient(from 20deg,#7d5f22,#f1dca0,#b8893b,#fff2c6,#8a6524,#d9b45f,#7d5f22);
  box-shadow:0 0 0 calc(var(--wr)*.014) rgba(3,18,12,.55),0 10px 22px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,255,255,.4);
  display:grid;place-items:center;transition:transform .12s,filter .2s}
#spin .face{position:absolute;inset:11%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 28%,#7a1022 0%,#4a0914 55%,#220308 100%);box-shadow:inset 0 0 0 1.5px rgba(241,220,160,.7),inset 0 3px 8px rgba(0,0,0,.6)}
#spin .lbl{font:italic 400 clamp(15px,calc(var(--wr)*.095),30px)/1 var(--serif);color:var(--brass-hi);letter-spacing:.02em}
#spin .ring{position:absolute;inset:-24%;border-radius:50%;pointer-events:none;
  background:conic-gradient(#ffd45c calc(var(--charge,0)*1turn),rgba(4,22,15,.38) 0);
  -webkit-mask:radial-gradient(closest-side,transparent 78%,#000 79% 93%,transparent 94%);mask:radial-gradient(closest-side,transparent 78%,#000 79% 93%,transparent 94%);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.55)) drop-shadow(0 0 7px rgba(255,212,92,calc(var(--charge,0)*.9)))}
#spin::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;mix-blend-mode:overlay;
  background:conic-gradient(from 200deg,rgba(255,255,255,0) 0,rgba(255,255,255,.7) 7%,rgba(255,255,255,0) 15%,rgba(255,255,255,0) 50%,rgba(255,255,255,.5) 58%,rgba(255,255,255,0) 66%)}
#spin:hover{filter:brightness(1.08)}
#spin:active,body[data-phase=charging] #spin{transform:translate(-50%,-50%) scale(.95)}
body[data-phase=spin] #spin{filter:saturate(.5) brightness(.7);cursor:default}
#spin:disabled{filter:grayscale(1) brightness(.6);cursor:not-allowed}

.dock{width:100%;display:grid;justify-items:center}
.readout{position:relative;z-index:2;background:radial-gradient(closest-side,rgba(19,1,4,.95) 62%,rgba(19,1,4,0));width:min(94vw,620px);height:clamp(104px,13vh,116px);display:grid;place-items:center;text-align:center}
.hint{font:500 10.5px/1.5 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--mute);transition:opacity .4s;display:flex;gap:14px;align-items:center}
.hint::before,.hint::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--brass))}
.hint::after{transform:scaleX(-1)}
.readout:has(.result.is-open) .hint{opacity:0}
.result{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:6px;opacity:0;visibility:hidden;transform:translateY(12px) scale(.98);transition:opacity .5s .5s,transform .8s .5s cubic-bezier(.2,.9,.2,1),visibility 0s .5s}
.result.is-open{opacity:1;visibility:visible;transform:none}
.result .eyebrow{font:500 10px/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--brass);display:flex;align-items:center;gap:14px}
.result .eyebrow::before,.result .eyebrow::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--brass))}
.result .eyebrow::after{transform:scaleX(-1)}
.result h2{font:400 clamp(30px,5vw,50px)/1 var(--serif);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 6px;color:var(--ivory);text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 28px rgba(241,220,160,.28)}
.result .actions{display:flex;gap:10px}
.result .actions button{font:600 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:9px 14px;border-radius:30px;border:1px solid rgba(241,220,160,.5);color:var(--brass-hi)}
.result .actions button:hover{background:rgba(241,220,160,.14)}

/* side */
#panel{display:flex;flex-direction:column;gap:16px;min-height:0}
.card{background:linear-gradient(180deg,#f6efdd,#ece2c8);color:var(--ink);border-radius:3px;padding:20px 20px 16px;position:relative;box-shadow:0 1px 0 #fff inset,0 18px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:12px;min-height:0}
.card::before{content:"";position:absolute;inset:6px;border:1px solid rgba(125,95,34,.45);pointer-events:none}
.card::after{content:"";position:absolute;inset:9px;border:1px solid rgba(125,95,34,.2);pointer-events:none}
.card h3{font:italic 400 28px/1 var(--serif);color:var(--ink)}
.card .sub{font:600 9.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#6b5a2e}
.card-top{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px}
#entries{flex:1;min-height:170px;resize:none;width:100%;border:0;background:transparent;outline:none;color:var(--ink);padding:2px 4px;font:400 21px/1.55 var(--serif);caret-color:#8e1b2b;
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(10,42,32,.16) 31px 32px);background-position:0 -1px;line-height:32px;scrollbar-width:thin;scrollbar-color:#b8a36a transparent}
#entries:read-only{opacity:.55}
.row2{display:flex;justify-content:space-between;align-items:center;font:500 10.5px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#4d4220;padding:0 4px}
.switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer}
.switch input{position:absolute;opacity:0}
.switch i{width:36px;height:20px;border-radius:20px;background:#cfc29c;position:relative;transition:.25s;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.switch i::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:.25s}
.switch input:checked+i{background:#7a1022}
.switch input:checked+i::after{transform:translateX(16px)}
.switch input:focus-visible+i{outline:2px solid #0f5a42;outline-offset:3px}
.rack{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:4px 0}
.chip{--c:#8e1b2b;--e:#f3ebd7;--t:#f3ebd7;width:64px;height:64px;border-radius:50%;position:relative;display:grid;place-items:center;
  background:repeating-conic-gradient(var(--e) 0 11deg,var(--c) 11deg 30deg);box-shadow:0 3px 0 rgba(0,0,0,.4),0 10px 16px rgba(0,0,0,.4);transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.chip::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.8),inset 0 0 0 5px var(--c),inset 0 0 0 6.5px rgba(255,255,255,.5)}
.chip span{position:relative;font:600 9.5px/1.15 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--t);text-align:center}
.chip:hover{transform:translateY(-6px) rotate(-6deg);box-shadow:0 8px 0 rgba(0,0,0,.25),0 18px 22px rgba(0,0,0,.45)}
.chip.r{--c:#8e1b2b}.chip.g{--c:#7a1022}.chip.k{--c:#16181a;--e:#c9a24b;--t:#f1dca0}.chip.i{--c:#e8dec3;--e:#8e1b2b;--t:#0a2a20}
.last{padding:0 4px}
.last .lab{font:600 9.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin-bottom:8px;display:block}
#history{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-height:92px;overflow:hidden}
#history li{display:inline-flex;align-items:center;gap:8px;background:rgba(243,235,215,.1);border:1px solid rgba(241,220,160,.3);border-radius:30px;padding:5px 12px 5px 6px;font:400 17px/1 var(--serif)}
#history .h-n{width:22px;height:22px;border-radius:50%;background:var(--brass);color:#1a1405;display:grid;place-items:center;font:600 9.5px/1 var(--sans)}
#history:empty::before{content:"No hands dealt yet";font:italic 400 17px/1 var(--serif);color:#d8a98f}

#drawerBtn{display:none}
.drawer-head{display:none}
@media (min-width:960px){
  .layout{grid-template-columns:minmax(0,1fr) clamp(330px,29vw,410px);align-items:center}
  .stage{--chrome:322px}
}
@media (max-width:959px){
  #drawerBtn{display:inline-flex;align-items:center;gap:10px;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + var(--safe-b));z-index:30;height:44px;padding:0 20px;border-radius:40px;
    background:#f3ebd7;color:var(--ink);font:600 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;box-shadow:0 10px 26px rgba(0,0,0,.5)}
  #drawerBtn b{background:var(--ink);color:var(--brass-hi);border-radius:20px;padding:4px 9px;font-size:10px;letter-spacing:.08em}
  .layout{padding-bottom:58px}
  .stage{--chrome:394px}
  #panel{position:fixed;left:0;right:0;bottom:0;z-index:45;max-height:82dvh;transform:translateY(106%);transition:transform .55s cubic-bezier(.2,.9,.2,1);padding:0 clamp(8px,3vw,22px) calc(12px + var(--safe-b));overflow:auto;pointer-events:none}
  #panel[data-open="1"]{transform:none;pointer-events:auto}
  #panel>*{max-width:600px;margin-inline:auto;width:100%}
  .drawer-head{display:flex;justify-content:flex-end;margin:-6px -6px -14px 0;position:relative;z-index:2}
  .drawer-head .pill{height:32px;background:rgba(10,42,32,.08);color:var(--ink);border-color:rgba(10,42,32,.3);padding:0 12px}
  #entries{min-height:150px;max-height:26dvh}
  .rack{background:rgba(0,0,0,.25);border-radius:14px;padding:12px 6px}
}
@media (max-width:420px){.pill span{display:none}.pill{padding:0 11px}}
/* desktop: result + spin sit side by side so the wheel gets the height */
@media (min-width:960px){.readout{height:88px}.result h2{font-size:clamp(28px,3.2vw,42px)}.stage{--chrome:262px}}
@media (min-width:960px){.app{position:relative;grid-template-rows:1fr}header{position:absolute;left:clamp(14px,3vw,56px);right:clamp(14px,3vw,56px);top:clamp(14px,2.2vw,30px);z-index:6;padding:0;border:0}.stage{--chrome:170px}}
#physTag{position:fixed;left:12px;bottom:calc(8px + var(--safe-b));z-index:5;font:500 9.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(241,220,160,.5);pointer-events:none}
@media (prefers-reduced-motion:reduce){.rays{animation:none}*{transition-duration:.01s!important}}

/* entry editor */
#entries{display:none!important}
.count{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px}
.count label{font:600 9.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#6b5a2e}
.stepper{display:inline-flex;align-items:center;border:1px solid rgba(125,95,34,.55);border-radius:30px;background:#fbf6e6;box-shadow:inset 0 1px 2px rgba(80,60,20,.15)}
.stepper button{width:36px;height:36px;font:400 20px/1 var(--sans);color:#7a1022;border-radius:50%;transition:background .2s}
.stepper button:hover{background:rgba(122,16,34,.1)}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper input{width:48px;text-align:center;border:0;background:transparent;outline:none;font:400 24px/1 var(--serif);color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}
.qn{font:600 11px/1 var(--sans);letter-spacing:.06em;min-width:34px;padding:7px 10px;border-radius:20px;border:1px solid rgba(125,95,34,.45);color:#6a4a12;background:rgba(255,255,255,.4);transition:.2s}
.qn:hover{background:rgba(122,16,34,.08)}
.qn[aria-pressed=true]{background:#7a1022;border-color:#7a1022;color:#fbf1d6}
.rows{display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:96px;max-height:min(260px,26dvh);padding:2px 4px 2px 2px;scrollbar-width:thin;scrollbar-color:#b8a36a transparent}
.rows[inert]{opacity:.55}
.row{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.55);border:1px solid rgba(125,95,34,.28);border-radius:10px;padding:3px 6px 3px 5px;transition:.2s}
.row:focus-within{border-color:#a8152b;background:#fff;box-shadow:0 0 0 3px rgba(168,21,43,.14)}
.row .n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 10px/1 var(--sans);color:#fbf1d6;background:linear-gradient(160deg,#c21f38,#7a1022);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.row:nth-child(even) .n{color:#3a0d12;background:linear-gradient(160deg,#f3d88a,#c4912c)}
.row input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:400 19px/1.7 var(--serif);color:var(--ink);caret-color:#a8152b}
.row input::placeholder{color:#a79c7c;font-style:italic}
.row .x{flex:none;width:24px;height:24px;border-radius:50%;color:#8a6a40;opacity:.55;font:400 17px/1 var(--sans);transition:.2s}
.row .x:hover{opacity:1;color:#a8152b;background:rgba(168,21,43,.1)}
.row .x:disabled{opacity:.15;cursor:not-allowed}
.add{border:1px dashed rgba(125,95,34,.65);border-radius:10px;padding:10px;font:600 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#6a4a12;transition:.2s}
.add:hover{background:rgba(122,16,34,.07);border-color:#7a1022;color:#7a1022}
.add:disabled{opacity:.35;cursor:not-allowed}
@media (min-width:960px){#panel{align-self:start;margin-top:clamp(84px,11dvh,120px);max-height:calc(100dvh - clamp(84px,11dvh,120px) - clamp(30px,4.8vw,60px) - 24px);overflow:auto;scrollbar-width:thin;scrollbar-color:#b8a36a transparent}}


/* the win moment: a full-screen reveal */
.result{position:fixed;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;align-content:center;gap:clamp(12px,2.4vh,24px);text-align:center;padding:24px;overflow:hidden;
  background:radial-gradient(75% 65% at 50% 47%,rgba(70,8,24,.55),rgba(22,2,8,.92));transform:none;transition:opacity .4s .15s,visibility 0s .15s}
.result.is-open{transform:none}
.rrays{position:absolute;left:50%;top:47%;width:190vmax;height:190vmax;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,120,.26) 0 4deg,transparent 4deg 12deg);-webkit-mask:radial-gradient(closest-side,#000 4%,transparent 60%);mask:radial-gradient(closest-side,#000 4%,transparent 60%)}
.result.is-open .rrays{opacity:1;transition:opacity 1.1s .3s;animation:spinR 80s linear infinite}
@keyframes spinR{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.rflash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 47%,#fff7d4,rgba(255,214,120,.55) 30%,transparent 66%)}
.result.is-open .rflash{animation:flash .95s .22s ease-out}
@keyframes flash{0%{opacity:0}14%{opacity:.95}100%{opacity:0}}
.result .eyebrow{position:relative;display:flex;align-items:center;gap:14px;font:700 clamp(11px,1.4vw,15px)/1 var(--sans);letter-spacing:.5em;text-transform:uppercase;color:#f6e3a1;opacity:0}
.result .eyebrow::before,.result .eyebrow::after{content:"★";width:auto;height:auto;background:none;transform:none;color:#e8c25a;letter-spacing:0;font-size:1.3em}
.result.is-open .eyebrow{animation:rise .5s .4s ease-out forwards}
.plate{position:relative;isolation:isolate;padding:.16em .85em;max-width:96vw}
.plate::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:150vw;height:100%;transform:translate(-50%,-50%) scaleX(0);
  background:linear-gradient(180deg,#b01a30,#6e0c1b 52%,#4a0612);border-top:3px solid #e8c25a;border-bottom:3px solid #e8c25a;box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 0 36px rgba(0,0,0,.4)}
.result.is-open .plate::before{animation:band .55s .22s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes band{to{transform:translate(-50%,-50%) scaleX(1)}}
.result h2{margin:0 0 -.08em;padding:.02em .06em .22em;max-width:92vw;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;font:400 clamp(46px,11vw,150px)/1.02 "DM Serif Display","Instrument Serif",Georgia,serif;
  background:linear-gradient(180deg,#fff8d6 0%,#f6d878 38%,#c8922a 52%,#f9e49a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 0 #4a0612) drop-shadow(0 0 26px rgba(255,205,100,.5));text-shadow:none;opacity:0;transform:scale(.2)}
.result.is-open h2{animation:slam .75s .36s cubic-bezier(.2,1.5,.35,1) forwards,breathe 2.8s 1.3s ease-in-out infinite}
@keyframes slam{0%{opacity:0;transform:scale(.2) rotate(-6deg)}55%{opacity:1}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}
.result .actions{opacity:0;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:clamp(4px,1vh,12px)}
.result.is-open .actions{animation:rise .5s 1.15s ease-out forwards}
.result .actions button{font:700 11.5px/1 var(--sans);letter-spacing:.2em;padding:14px 24px;border-radius:40px;border:1px solid rgba(246,227,161,.6);color:#f6e3a1;transition:.2s}
.result .actions button:hover{background:rgba(246,227,161,.16)}
.result .actions [data-act=again]{background:linear-gradient(180deg,#f6e3a1,#e2b955 55%,#a8771d);color:#3a1608;border-color:#f6e3a1;box-shadow:0 3px 0 #6a4710,0 12px 22px rgba(0,0,0,.45)}
.result .actions [data-act=again]:hover{transform:translateY(-1px);background:linear-gradient(180deg,#fff0b8,#eec45f 55%,#b8821f)}
.result .dismiss{font:500 10.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:rgba(246,227,161,.55);opacity:0}
.result.is-open .dismiss{animation:rise .5s 1.6s ease-out forwards}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body:has(.result.is-open) #spin{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.result.is-open h2,.result.is-open .eyebrow,.result.is-open .actions,.result.is-open .dismiss{animation:none!important;opacity:1;transform:none}.result.is-open .plate::before{animation:none!important;transform:translate(-50%,-50%) scaleX(1)}.result.is-open .rrays{animation:none}}