/* juketype arena: Sprint, Knockout and Rush, eight players a match. Built on juketype.css's keys,
   stage and end screen; every name is drawn in its nametag (nametags.css). */
:root{--sprint:#0e7490;--knock:#b8860b;--rush:#6d28d9} /* each from the rare tag its title wears: platinum aurora's teal, jackpot black's gold, singularity's violet */
.arena .strip .back{margin-left:auto}
.shell .strip .name .ntag{font-size:.72em;vertical-align:middle} /* every game's name, singleplayer and multiplayer, sits in its nametag */
.ahud{display:inline-flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.loanline{margin:0;font-size:14px;color:var(--mute)}
.loanline .ntext{font-size:15px}

/* ---- the games page: multiplayer on top, singleplayer under it ---- */
.gsec{display:flex;flex-direction:column;align-items:center;gap:var(--s2);width:100%}
.gsec.sp{margin-top:var(--s4)}
.gsech{margin:0;font-size:clamp(24px,3vw,32px);font-weight:500;letter-spacing:.01em;line-height:1.1} /* lighter than the page title, so the two never read alike */
/* the two sections fold, one open at a time: a closed one is just its heading (with its games named
   beside it), and clicking it opens it and closes the other */
.gstog{display:inline-flex;align-items:baseline;gap:var(--s3);padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.gstog:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.gsec:not(.on) .gstog{color:var(--mute)}
.gsec:not(.on) .gstog:hover{color:var(--ink)}
.gstog .chev{font-size:.6em;color:var(--mute);transition:transform .3s cubic-bezier(.3,1.3,.5,1)}
.gsec.on .gstog .chev{transform:rotate(180deg)}
.gsbody{display:none;width:100%;flex-direction:column;align-items:center;gap:var(--s2)}
.gsec.on .gsbody{display:flex;animation:gsopen .35s cubic-bezier(.2,.8,.2,1)}
@keyframes gsopen{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.gsec.on .gsbody{animation:none}.gstog .chev{transition:none}}
@media (max-width:999px){.gsec.on .gcard .gprev{height:180px}} /* phones and tablets: bigger scenes in the open section */
.gsec .games{margin-top:var(--s3)}
/* a card's title: the game's name as a plain word in its colour, no keycaps */
/* the game names' glowing shimmer lives in juketype.css, shared with the homepage */
.gsec .gwrap{width:100%;margin-top:var(--s3)}
/* desktops and laptops: like the home page, the whole hub (title and both rows of games)
   is sized from the window height so it fits one screen without scrolling */
@media (min-width:1000px){
  main.ghub > .open:first-child{gap:1.3vh;padding-bottom:0}
  main.ghub .gsec{gap:.5vh;margin-top:2.4vh}
  main.ghub .gsec.sp{margin-top:4.5vh}
  main.ghub .gsec.on .gsbody{margin-top:3vh} /* room under the open heading, so the row never crowds it */
  main.ghub .gsech{font-size:clamp(20px,3.4vh,32px)}
  main.ghub .loanline{font-size:clamp(12px,1.6vh,15px)}
  main.ghub .gsec .games{margin-top:1.2vh;gap:3vh;flex-wrap:nowrap}
  main.ghub .gsec .gwrap{margin-top:0}
  /* no slack left over: main is exactly the window (main.fit), each section takes what it needs plus a share of
     what is left under the title, and the scenes grow to fill their cards */
  main.ghub{display:flex;flex-direction:column}
  main.ghub .gsec{flex:0 0 auto}
  /* the open section's row is as wide as the navbar and its scenes are a fixed share of
     the window's height: bigger than before, but the other section's heading stays right under them */
  main.ghub .gsbody > .games,main.ghub .gsbody > .gwrap{width:100%} /* as wide as the navbar, never past its edges */
  main.ghub .gsec.on .gcard h2.gname{font-size:clamp(22px,3.6vh,34px)}
  /* singleplayer open (the last section): its row sits halfway between its heading and the footer */
  main.ghub .gsec.sp.on{flex:1 1 auto;min-height:0}
  main.ghub .gsec.sp.on .gsbody{flex:1 1 auto;justify-content:center}
  main.ghub .gsec .games{align-items:stretch}
  main.ghub .gcard{flex:1 1 0;width:auto;min-width:0;gap:1vh}
  main.ghub .gcard .gprev{flex:none;height:clamp(110px,24vh,220px)}
  main.ghub .gsec.sp .gcard .gprev{height:clamp(124px,28vh,256px)} /* singleplayer's scenes a little taller */
  main.ghub .gcard h2.gname{font-size:clamp(20px,3.4vh,32px)}
  main.ghub .gcard p{font-size:clamp(13px,1.8vh,16px)}
  /* the record line keeps two lines' height even with no score yet, so every scene in a row is the same size */
  main.ghub .gcard .best{font-size:clamp(11px,1.5vh,13px);min-height:calc(clamp(14px,2.2vh,20px) * 1.1 + clamp(11px,1.5vh,13px) * 1.5);display:flex;flex-direction:column;justify-content:flex-end}
  main.ghub .gcard .best b{font-size:clamp(14px,2.2vh,20px)}
  main.ghub + footer.sitefoot,main.ghub ~ footer.sitefoot{margin-top:3vh}
}

/* ---- card scenes: gprev boxes like the singleplayer ones (juketype.css), sized in --u (juketype.css) so they scale
   with the box, every loop four seconds. Tags are drawn with nametags.js at keycap size ---- */
/* word size in a scene: juketype.css (.gprev .ntag), bigger in a tall scene than a short one */
.gprev .ntag .key{box-shadow:none}
/* sprint: four tags race for the line, prism takes it; the passage types itself out underneath */
.pv-sprint .plane{position:absolute;left:6%;right:15%;height:calc(11 * var(--u));border-radius:calc(2.5 * var(--u));background:var(--cap);border-right:calc(1.6 * var(--u)) solid var(--ink)}
.pv-sprint .plane::before{content:'';position:absolute;left:calc(31 * var(--u));top:calc(-1.2 * var(--u));bottom:calc(-1.2 * var(--u));width:calc(1 * var(--u));border-radius:calc(.5 * var(--u));background:var(--mute)} /* the starting line */
.pv-sprint .pcar{position:absolute;top:50%;left:calc(30 * var(--u));translate:-100% -50%;animation:4s cubic-bezier(.4,.1,.6,1) infinite;z-index:1}
.pv-sprint .pcar .ntag{font-size:calc(6 * var(--u))}
.pv-sprint .pc1{animation-name:pvcar1}
.pv-sprint .pc2{animation-name:pvcar2}
.pv-sprint .pc3{animation-name:pvcar3}
.pv-sprint .pc4{animation-name:pvcar4}
@keyframes pvcar1{0%{left:calc(30 * var(--u));opacity:0}5%,12%{left:calc(30 * var(--u));opacity:1}58%,92%{left:100%;opacity:1}100%{left:100%;opacity:0}}
@keyframes pvcar2{0%{left:calc(30 * var(--u));opacity:0}5%,12%{left:calc(30 * var(--u));opacity:1}68%,92%{left:100%;opacity:1}100%{left:100%;opacity:0}}
@keyframes pvcar3{0%{left:calc(30 * var(--u));opacity:0}5%,12%{left:calc(30 * var(--u));opacity:1}92%{left:82%;opacity:1}100%{left:82%;opacity:0}}
@keyframes pvcar4{0%{left:0;opacity:0}5%{left:0;opacity:1}78%,92%{left:calc(100% - calc(14 * var(--u)));opacity:1}100%{left:calc(100% - calc(14 * var(--u)));opacity:0}}
.pv-sprint .pflag{position:absolute;left:calc(100% + calc(4.5 * var(--u)));top:50%;translate:0 -50%;font-size:calc(7.5 * var(--u));font-weight:700;color:var(--sprint);opacity:0;animation:pvflag 4s infinite}
@keyframes pvflag{0%,56%{opacity:0;scale:.4}62%{opacity:1;scale:1.3}66%,90%{opacity:1;scale:1}96%,100%{opacity:0}}
.pv-sprint .ptype{position:absolute;left:50%;bottom:7%;translate:-50% 0;font-size:calc(10 * var(--u));font-weight:500;line-height:1.2;white-space:nowrap;color:color-mix(in srgb,var(--mute) 50%,transparent)}
.pv-sprint .ptype::after{content:attr(data-t);position:absolute;left:0;top:0;bottom:0;width:0;overflow:hidden;color:var(--ink);box-shadow:inset calc(-.8 * var(--u)) 0 0 var(--sprint);animation:pvtype 4s steps(19,end) infinite}
@keyframes pvtype{0%{width:0}86%,100%{width:100%}}
/* knockout: eight tags type the same word; they check in one by one, and the last tile goes grey */
.pv-knockout .pgrid{position:absolute;left:6%;right:6%;top:24%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(3 * var(--u))}
.pv-knockout .ptile{position:relative;display:flex;align-items:center;justify-content:center;height:calc(17 * var(--u));min-width:0;overflow:hidden;border-radius:calc(2.5 * var(--u));background:var(--cap);border:1px solid var(--cap-line);border-bottom:calc(1.5 * var(--u)) solid var(--cap-edge);font-size:calc(8.5 * var(--u));white-space:nowrap}
.pv-knockout .ptile .ntext{font-weight:700}
.pv-knockout .ptile.ok{animation:pvok 4s infinite;animation-delay:var(--d)}
@keyframes pvok{0%,30%,40%,100%{translate:0 0}34%{translate:0 calc(-4 * var(--u))}} /* done: the tile jumps, no colour */
.pv-knockout .ptile.ko{animation:pvko 4s infinite}
@keyframes pvko{0%,62%,97%,100%{opacity:1}70%,90%{opacity:.3}} /* the last one out just fades */
.pv-knockout .pfill .pk{animation:pvkey 4s steps(1,end) infinite;animation-delay:calc(var(--i) * .2s)}
@keyframes pvkey{0%,14%,92%,100%{background:var(--cap);color:var(--ink);border-color:var(--cap-line);border-bottom-color:var(--cap-edge)}16%,90%{background:var(--knock);color:#fff;border-color:var(--knock);border-bottom-color:color-mix(in srgb,var(--knock) 70%,#000)}}
/* rush: loot words with their points over them; someone else types the rainbow one and takes it,
   then you grab the blue one */
.pv-rush .ptime{position:absolute;top:5%;left:50%;translate:-50% 0;font-size:calc(9 * var(--u));font-weight:700;color:var(--mute)}
.pv-rush .ppts{position:absolute;bottom:100%;left:50%;translate:-50% calc(-1.5 * var(--u));font-size:calc(7.5 * var(--u));font-weight:700;font-style:normal;color:var(--acc);white-space:nowrap}
.pv-rush .rainbow .ppts{color:#c2184c}
.pv-rush .pcaps:not(.pgrab){animation:pvbob 2.4s ease-in-out infinite}
.pv-rush .pcaps:not(.pgrab):nth-of-type(odd){animation-delay:-1.2s}
@keyframes pvbob{50%{transform:translate(-50%,-58%)}}
.pv-rush .pgrab{animation:4s ease-out infinite}
.pv-rush .g1{animation-name:pvgrab1}
.pv-rush .g2{animation-name:pvgrab2}
@keyframes pvgrab1{0%,30%{opacity:1;transform:translate(-50%,-50%) scale(1)}36%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}80%{opacity:0;transform:translate(-50%,-50%) scale(.4)}88%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes pvgrab2{0%,64%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}90%{opacity:0;transform:translate(-50%,-50%) scale(.4)}97%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* typed letters darken one by one (a filter, so the rainbow keys keep their moving gradient) */
.pv-rush .g1 .pk{animation:holo 2.2s linear infinite,pvtyped1 4s steps(1,end) infinite;animation-delay:0s,calc(var(--i) * .22s)}
.pv-rush .g2 .pk{animation:pvtyped2 4s steps(1,end) infinite;animation-delay:calc(var(--i) * .22s)}
@keyframes pvtyped1{0%,14%,42%,100%{filter:none}16%,40%{filter:brightness(.5)}}
@keyframes pvtyped2{0%,50%,76%,100%{filter:none}52%,74%{filter:brightness(.5)}}
.pv-rush .pfloat{position:absolute;translate:-50% -50%;font-size:calc(8 * var(--u));font-weight:700;white-space:nowrap;opacity:0;pointer-events:none}
.pv-rush .f1{color:var(--mute);animation:pvfloat1 4s ease-out infinite}
.pv-rush .f2{color:#1a56e8;animation:pvfloat2 4s ease-out infinite}
@keyframes pvfloat1{0%,32%{opacity:0;translate:-50% -50%}38%{opacity:1}62%,100%{opacity:0;translate:-50% -220%}}
@keyframes pvfloat2{0%,66%{opacity:0;translate:-50% -50%}72%{opacity:1}94%,100%{opacity:0;translate:-50% -220%}}

/* ---- the waiting room: each game's own board while it fills (see lobby() in arena.js). These rules only
   add the empty seats, the arrival, the one message and the warm-up; the boards themselves are styled
   with their games below ---- */
.arrive{animation:arrive .4s cubic-bezier(.2,1.3,.4,1)}
@keyframes arrive{from{transform:translateY(-8px);opacity:0}} /* from just above, so a long car never slides past the stage edge */
.nudge{animation:nudge .18s}
@keyframes nudge{30%{transform:translateX(-4px)}70%{transform:translateX(3px)}}
.trylink{font-weight:700;color:var(--acc);text-decoration:none}
.trylink:hover{text-decoration:underline}
.wstat{font-size:14px;color:var(--mute)}
.wstat b{font-weight:700;color:var(--ink)}
/* Sprint: an open lane is the track without a car; the message and warm-up line sit where the passage goes */
.lane.vacant .track{opacity:.45}
.car.try{cursor:pointer}
.swait{width:100%;max-width:980px;margin-top:var(--s4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
.swait .msg{text-align:left;max-width:none;font-size:20px}
.swait .passage{margin-top:0}
/* Knockout: an open tile is a recessed slot; the practice word sits in the middle of the board */
.ktile.vacant{background:color-mix(in srgb,var(--cap-edge) 22%,var(--case));border-color:transparent;border-bottom-width:1px;box-shadow:inset 0 2px 5px rgba(0,0,0,.07);color:var(--mute)}
.ktile.try{cursor:pointer}
.ktile.try:hover{background:var(--field)}
.kcenter .msg{font-size:20px;color:var(--mute)}
.kpractice{display:flex;flex-direction:column;align-items:center;gap:var(--s2);margin-top:var(--s3)}
.kpractice .kword{font-size:clamp(26px,3.6vw,40px)}
/* Rush: open rows on the scoreboard; the message and practice word in the middle of the field */
.rboard li.vacant{color:color-mix(in srgb,var(--mute) 70%,transparent)}
.rboard li.try{cursor:pointer}
.rboard li.try:hover{background:color-mix(in srgb,var(--cap-edge) 25%,transparent)}
.rwait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2)}
.rwait .msg{font-size:20px;color:var(--mute)}
/* match found: a big key in the game's colour over the full board */
.lcd{position:absolute;inset:0;z-index:8;display:grid;place-items:center;pointer-events:none}
.lcd .lcdkey{font-size:clamp(72px,11vw,140px);font-weight:700;min-width:1.5em;background:var(--acc);color:#fff;border-color:var(--acc);border-bottom-color:color-mix(in srgb,var(--acc) 70%,#000);animation:lcdin .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes lcdin{from{scale:.5;opacity:0}}
@media (prefers-reduced-motion:reduce){.arrive,.nudge,.lcd .lcdkey{animation:none}}

/* ---- Sprint ---- */
/* the track: no bars, the lanes sit on the stage split by faint dashed lines. One starting line runs down
   through every lane, a checkered band marks the finish, and each car pulls a trail in its tag's colour */
.lanes{display:flex;flex-direction:column;width:100%;max-width:820px}
.lane{display:grid;grid-template-columns:1fr 2.4em;align-items:center;gap:10px;font-size:12px}
/* a slim strip: short lanes, hairline dividers, a narrow quiet finish band, no coloured lines */
.track{position:relative;height:26px;border-bottom:1px solid color-mix(in srgb,var(--cap-edge) 35%,transparent)}
.lane:last-child .track{border-bottom:0}
.track::after{content:'';position:absolute;right:0;top:0;bottom:0;width:6px;background:repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%) 0 0/6px 6px;opacity:.35}
.trail{position:absolute;top:50%;left:var(--start,0px);height:2px;width:calc(var(--p,0) * (100% - var(--start,0px)));translate:0 -50%;border-radius:2px;background:var(--tc,var(--mute));background-size:400% 100%;opacity:.4;transition:width .12s linear}
/* the car's nose (its right edge) runs from the starting line to the finish */
.car{position:absolute;top:50%;left:calc(var(--start,0px) + var(--p,0) * (100% - var(--start,0px)));translate:-100% -50%;font-size:var(--cf,13px);transition:left .12s linear;z-index:1}
.car{width:max-content} /* hug the tag: the nose must be the tag's own right edge */
.car .ntag .caps{flex-wrap:nowrap}
.sline{position:absolute;top:0;bottom:-1px;left:var(--start,0px);width:2px;margin-left:2px;background:var(--mute);opacity:.7}
.lpl{font-weight:700;font-size:12px;color:var(--mute);text-align:left}
.lane.me .lpl{color:var(--ink)}
.lane.win .lpl{color:var(--ink)}
.passage{font-size:clamp(24px,3vw,34px);line-height:1.6;max-width:36ch;text-align:left;margin-top:var(--s5);user-select:none} /* the passage is the main thing on screen */
.passage .ch{color:var(--mute);border-radius:3px}
.passage .ch.ok{color:var(--ink)}
.passage .ch.cur{color:var(--ink);box-shadow:inset 0 -3px 0 var(--acc)}
.passage .ch.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 18%,transparent)}

/* ---- Knockout ---- */
.kgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;max-width:860px}
@media (max-width:700px){.kgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ktile{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0;padding:10px 14px;border-radius:8px;background:var(--cap);border:1px solid var(--cap-line);border-bottom:3px solid var(--cap-edge);font-size:17px;transition:opacity .35s,filter .35s}
.ktile .knm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ktile .kst{flex:none;font-weight:700;color:var(--mute)}
.ktile.me{border-color:var(--acc)}
.ktile.done{border-bottom-color:#2f8f4d}
.ktile.done .kst{color:#2f8f4d}
.ktile.first .kst::before{content:'1st, '}
.ktile.out{opacity:.45;animation:knock .4s}
.ktile.out .kst{color:var(--bad)}
@keyframes knock{30%{transform:scale(1.06)}}
.kcenter{min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:var(--s4)}
.kword{display:flex;gap:.18em;font-size:clamp(34px,5.5vw,60px)}
.kword .key.hit{background:var(--acc);color:#fff;border-color:var(--acc);border-bottom-color:color-mix(in srgb,var(--acc) 70%,#000)}
.kword.safe .key{background:#2f8f4d;border-color:#2f8f4d;border-bottom-color:#1f6136;color:#fff}

/* ---- Rush ---- */
.rush .stage{justify-content:flex-start}
.rfield{position:absolute;inset:0 0 0 214px}
.loot{position:absolute;translate:-50% -50%;display:flex;gap:.18em;font-size:clamp(22px,2.6vw,32px);animation:lootin .3s cubic-bezier(.2,1.5,.4,1)}
@keyframes lootin{from{scale:.5;opacity:0}}
.loot .rpts{position:absolute;bottom:100%;left:50%;translate:-50% -4px;font-size:.45em;font-weight:700;font-style:normal;color:var(--acc);white-space:nowrap}
.loot.lock .key{outline:3px solid var(--ink);outline-offset:-3px}
.loot .key.hit{background:var(--acc);color:#fff;border-color:var(--acc);outline:0}
.loot.pop{opacity:0;scale:1.3;transition:opacity .25s,scale .25s}
.loot.gone{opacity:0;scale:.7;transition:opacity .25s,scale .25s}
.rboard{position:absolute;left:12px;top:12px;bottom:12px;width:190px;margin:0;padding:10px;list-style:none;z-index:3;display:flex;flex-direction:column;gap:3px;border-radius:10px;background:var(--cap);border:1px solid var(--cap-line);border-bottom:4px solid var(--cap-edge);font-size:13px}
.rboard li{display:flex;justify-content:space-between;gap:6px;padding:4px 7px;border-radius:5px}
.rboard li .ntext,.rboard li>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rboard li.me{background:color-mix(in srgb,var(--acc) 16%,transparent);font-weight:700}
.rtime{position:absolute;top:10px;left:calc(50% + 107px);translate:-50% 0;z-index:3;font-size:30px;font-weight:700;color:var(--mute)}
.stage.hurry .rtime{color:var(--bad);animation:hurry 1s ease-in-out infinite}
@keyframes hurry{50%{scale:1.15}}
.rgrab{position:absolute;z-index:4;translate:-50% 0;white-space:nowrap;font-size:13px;font-weight:700;color:var(--mute);pointer-events:none;animation:spop 1.1s ease-out forwards}
.rgrab.stolen{color:var(--bad);font-size:16px}
@media (max-width:700px){
  .rfield{inset:132px 0 0 0}
  .rboard{right:8px;left:8px;top:8px;bottom:auto;width:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .rtime{left:50%;top:auto;bottom:10px}
}
@media (prefers-reduced-motion:reduce){.loot,.stage.hurry .rtime,.rgrab{animation:none}}

/* ---- results ---- */
.over.aover{justify-content:flex-start;padding-top:var(--s5);gap:var(--s3)}
.aover .unit{margin-top:-4px}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:10px;width:min(660px,100%);margin-top:var(--s2)}
.pcol{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.ptag{width:100%;display:flex;justify-content:center;align-items:center;min-height:36px}
.pstat{font-size:13px;font-weight:700;color:var(--mute)}
.pcol.me .pstat{color:var(--acc)}
.pwear{font-size:12px;color:var(--mute);text-underline-offset:3px}
.pwear:hover{color:var(--ink)}
.pstep{width:100%;display:grid;place-items:center;border-radius:8px 8px 0 0;font-size:22px;font-weight:700;color:#fff;background:var(--cap-edge);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.pcol.p1 .pstep{height:78px;background:#d4a017}
.pcol.p2 .pstep{height:56px;background:#9aa0aa}
.pcol.p3 .pstep{height:42px;background:#b87333}
.alow{display:flex;gap:var(--s5);justify-content:center;align-items:flex-start;flex-wrap:wrap;width:100%}
.arest{list-style:none;margin:0;padding:0;width:min(340px,100%);display:flex;flex-direction:column;gap:2px}
.arest li{display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;gap:8px;align-items:center;padding:3px 8px;border-radius:6px;font-size:14px;text-align:left}
.arest .rk{color:var(--mute);font-weight:700}
.arest .rn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arest li.me{background:color-mix(in srgb,var(--acc) 14%,transparent);font-weight:700}
.loanbox{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(440px,100%);padding:var(--s3) var(--s4);border-radius:10px;background:var(--cap);border:1px solid var(--cap-line);border-bottom:4px solid var(--cap-edge)}
.loanbox.won{border-color:#d4a017;border-bottom-color:#9c7410}
.loanbox .lbt{font-weight:700}
.loanbox .reel{width:100%;min-height:46px;display:flex;justify-content:center;align-items:center}
.loanbox .reel.landed{animation:reelland .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes reelland{40%{scale:1.15}}
.loanbox .lbs{font-size:13px;color:var(--mute);text-align:center}