/* Generated file: changes here are overwritten by the next build. css/common.css + css/game.css */

@font-face{font-family:"Tomorrow Night";src:url("../font/Tomorrow_Night.ttf") format("truetype");font-display:block;
  ascent-override:110%;descent-override:10%;line-gap-override:0%}
:root{
  --page:#cfeaf6; --frame:#12385c; --ink:#12385c; --muted:#3f6d92; --btn:#ffffff; --btn-ink:#12385c; --card:#ffffff; --line:#9cc6dd;
  --navy:#12385c; --navy2:#184a74; --edge:#6e9fbe; --gold:#ffd23f; --pale:#cfeaf6; --sky:#9bd7ed; --coral:#ff7a6b; --danger:#c8322b;
  --pixel:"Tomorrow Night", monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --page:#0a1f33; --frame:#2d6a9c; --ink:#dff3fb; --muted:#8ab9d5; --btn:#16395a; --btn-ink:#dff3fb; --card:#0f2a44; --line:#24557d; }
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;min-height:100%}
body{background:var(--page);color:var(--ink);font-family:var(--sans)}
a{color:inherit}
button,.btn{font:inherit;font-size:13px;color:var(--btn-ink);background:var(--btn);border:2px solid var(--frame);border-radius:4px;padding:5px 12px;cursor:pointer;text-decoration:none;display:inline-block;line-height:1.3}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.spr{--sz:64px;display:inline-block;width:var(--sz);height:var(--sz);background-repeat:no-repeat;
  background-size:calc(var(--frames) * var(--sz)) var(--sz);image-rendering:pixelated;image-rendering:crisp-edges;
  animation:spr calc(var(--frames) * var(--ms) * 1ms) steps(var(--frames)) infinite}
@keyframes spr{to{background-position-x:calc(var(--frames) * var(--sz) * -1)}}
@media (prefers-reduced-motion: reduce){ .spr{animation:none} }

body.game{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:10px;
  min-height:100vh;box-sizing:border-box;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom));
  padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
#stage{position:relative;border:4px solid var(--frame);border-radius:6px;background:#84cce7;box-sizing:content-box;overflow:hidden;--u:3}
#stage > #c{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}

html:has(body.game),body.game{overscroll-behavior:none}
#stage{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#stage input{-webkit-user-select:text;user-select:text}
.ui button,.ui .btn,.pausebtn{touch-action:manipulation}
.pausebtn{position:absolute;left:calc(var(--u) * 1px);top:calc(var(--u) * 15px);width:calc(var(--u) * 22px);height:calc(var(--u) * 22px);
  padding:0;border:0;border-radius:0;background:none;cursor:pointer}
.pausebtn span{position:absolute;left:calc(var(--u) * 5px);top:calc(var(--u) * 4px);width:calc(var(--u) * 12px);height:calc(var(--u) * 12px);
  box-sizing:border-box;border:calc(var(--u) * 1px) solid #12385c;background:rgba(18,56,92,.55)}
.pausebtn span::before,.pausebtn span::after{content:'';position:absolute;top:calc(var(--u) * 2px);width:calc(var(--u) * 2px);height:calc(var(--u) * 6px);background:#ffffff}
.pausebtn span::before{left:calc(var(--u) * 2px)}
.pausebtn span::after{right:calc(var(--u) * 2px)}
.pausebtn:active span{background:rgba(255,210,63,.8)}
@media (max-height: 540px){
  body.game{gap:6px;padding:4px;padding-top:max(4px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom));
    padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}
  #stage{border-width:2px}
}
.rotate{display:none;margin:0;font-size:14px;color:var(--muted);text-align:center}
@media (orientation: portrait) and (pointer: coarse){ .rotate{display:block} }

.ui{--p:calc(var(--u) * 1px);position:absolute;inset:0;font-family:var(--pixel);font-size:var(--f8);line-height:1.3;color:#fff;
  -webkit-font-smoothing:none}
.ui:empty{display:none}
.ui{
  --f4:min(calc(calc(var(--p) * 4) + round(down,calc(var(--p) * 4),10px) * 100),round(nearest,max(calc(var(--p) * 4),10px),10px));
  --f5:min(calc(calc(var(--p) * 5) + round(down,calc(var(--p) * 5),10px) * 100),round(nearest,max(calc(var(--p) * 5),10px),10px));
  --f6:min(calc(calc(var(--p) * 6) + round(down,calc(var(--p) * 6),10px) * 100),round(nearest,max(calc(var(--p) * 6),10px),10px));
  --f7:min(calc(calc(var(--p) * 7) + round(down,calc(var(--p) * 7),10px) * 100),round(nearest,max(calc(var(--p) * 7),10px),10px));
  --f8:min(calc(calc(var(--p) * 8) + round(down,calc(var(--p) * 8),10px) * 100),round(nearest,max(calc(var(--p) * 8),10px),10px));
  --f9:min(calc(calc(var(--p) * 9) + round(down,calc(var(--p) * 9),10px) * 100),round(nearest,max(calc(var(--p) * 9),10px),10px));
  --f10:min(calc(calc(var(--p) * 10) + round(down,calc(var(--p) * 10),10px) * 100),round(nearest,max(calc(var(--p) * 10),10px),10px));
  --f14:min(calc(calc(var(--p) * 14) + round(down,calc(var(--p) * 14),10px) * 100),round(nearest,max(calc(var(--p) * 14),10px),10px));
  --f20:min(calc(calc(var(--p) * 20) + round(down,calc(var(--p) * 20),10px) * 100),round(nearest,max(calc(var(--p) * 20),10px),10px));
}
@supports not (width: round(down, 15px, 10px)){ .ui{--f4:calc(var(--p) * 4);--f5:calc(var(--p) * 5);--f6:calc(var(--p) * 6);--f7:calc(var(--p) * 7);--f8:calc(var(--p) * 8);--f9:calc(var(--p) * 9);--f10:calc(var(--p) * 10);--f14:calc(var(--p) * 14);--f20:calc(var(--p) * 20);} }
.ui *{margin:0}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:calc(var(--p) * 8) calc(var(--p) * 8) calc(var(--p) * 6)}
.screen.center{justify-content:center}
.ui h1,.ui h2,.ui h3{font-weight:normal}
.ui h2{font-size:var(--f10);color:#fff;margin-bottom:calc(var(--p) * 2)}
.ui h3{font-size:var(--f8);color:var(--gold);margin-bottom:calc(var(--p) * 4)}
.ui .sub{font-size:var(--f6);color:var(--pale);margin-bottom:calc(var(--p) * 6)}
.shadow,.ui h1,.ui h2{text-shadow:var(--p) 0 var(--navy),calc(var(--p) * -1) 0 var(--navy),0 var(--p) var(--navy),0 calc(var(--p) * -1) var(--navy),var(--p) var(--p) var(--navy)}
.gold{color:var(--gold)}

.ui button,.ui .btn{font-family:var(--pixel);font-size:var(--f7);color:#fff;background:var(--navy2);border:var(--p) solid var(--edge);
  border-radius:0;padding:calc(var(--p) * 4) calc(var(--p) * 5);cursor:pointer;text-align:center;line-height:1.2;text-decoration:none;outline:none}
.ui button:focus,.ui .btn:focus{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.ui button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.ui button[aria-pressed="true"]:focus{color:var(--navy)}
.panel{background:var(--navy);border:var(--p) solid var(--edge);box-shadow:inset 0 var(--p) 0 var(--navy2);padding:calc(var(--p) * 6)}

.logo{font-size:var(--f20);color:var(--gold);margin-top:calc(var(--p) * 4) !important;
  text-shadow:var(--p) 0 var(--navy),calc(var(--p) * -1) 0 var(--navy),0 var(--p) var(--navy),0 calc(var(--p) * -1) var(--navy),calc(var(--p) * 2) calc(var(--p) * 2) var(--navy)}
.title .sub{margin:calc(var(--p) * 4) 0 calc(var(--p) * 8) !important;font-size:var(--f7);color:#fff}
.menu{display:flex;flex-direction:column;gap:calc(var(--p) * 3);width:calc(var(--p) * 120)}
.menu button{padding:calc(var(--p) * 3) calc(var(--p) * 5)}

.credits .roll{position:relative;height:calc(var(--p) * 100);overflow:hidden;
  --s1:calc(var(--p) * 3);--s2:calc(var(--p) * 7);--s3:calc(var(--p) * 11);
  -webkit-mask-image:linear-gradient(to bottom,#0000 var(--s1),#0006 var(--s1) var(--s2),#000b var(--s2) var(--s3),#000 var(--s3) calc(100% - var(--s3)),
    #000b calc(100% - var(--s3)) calc(100% - var(--s2)),#0006 calc(100% - var(--s2)) calc(100% - var(--s1)),#0000 calc(100% - var(--s1)));
  mask-image:linear-gradient(to bottom,#0000 var(--s1),#0006 var(--s1) var(--s2),#000b var(--s2) var(--s3),#000 var(--s3) calc(100% - var(--s3)),
    #000b calc(100% - var(--s3)) calc(100% - var(--s2)),#0006 calc(100% - var(--s2)) calc(100% - var(--s1)),#0000 calc(100% - var(--s1)))}
.credits .roll > div{display:flex;flex-direction:column;gap:calc(var(--p) * 6);padding:calc(var(--p) * 4) 0}
@media (prefers-reduced-motion: reduce){ .credits .roll{overflow-y:auto;scrollbar-width:none} }
.credits p{display:flex;flex-direction:column;align-items:center;gap:calc(var(--p) * 1);font-size:var(--f6);text-align:center}
.credits p span{color:var(--pale)}
.credits a{color:var(--gold)}
.credits a:focus{outline:calc(var(--p) * 1) solid var(--gold);outline-offset:calc(var(--p) * 1)}

.split{display:flex;gap:calc(var(--p) * 6);width:100%;flex:1;min-height:0}
.carousel{position:relative;display:flex;flex:0 0 calc(var(--p) * 132);min-height:0;min-width:0;padding:0}
.list{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:calc(var(--p) * 3);overflow-y:auto;padding:calc(var(--p) * 4);position:relative;
  scrollbar-width:none;-webkit-mask-image:var(--mask,none);mask-image:var(--mask,none);
  --s1:calc(var(--p) * 3);--s2:calc(var(--p) * 7);--s3:calc(var(--p) * 11)}
.list::-webkit-scrollbar{display:none}
.carousel.more-up > .list{--mask:linear-gradient(to bottom,#0000 var(--s1),#0006 var(--s1) var(--s2),#000b var(--s2) var(--s3),#000 var(--s3))}
.carousel.more-down > .list{--mask:linear-gradient(to top,#0000 var(--s1),#0006 var(--s1) var(--s2),#000b var(--s2) var(--s3),#000 var(--s3))}
.carousel.more-up.more-down > .list{--mask:linear-gradient(to bottom,#0000 var(--s1),#0006 var(--s1) var(--s2),#000b var(--s2) var(--s3),#000 var(--s3) calc(100% - var(--s3)),
  #000b calc(100% - var(--s3)) calc(100% - var(--s2)),#0006 calc(100% - var(--s2)) calc(100% - var(--s1)),#0000 calc(100% - var(--s1)))}
.ui .cnav{position:absolute;left:50%;translate:-50% 0;z-index:2;display:none;width:calc(var(--p) * 15);height:calc(var(--p) * 9);
  padding:0;border:0;background:none;color:var(--gold);cursor:pointer}
.ui .cnav:focus,.ui .cnav:hover{background:none;border:0;color:#fff}
.cnav svg{display:block;width:calc(var(--p) * 9);height:calc(var(--p) * 5);margin:auto;fill:currentColor;
  filter:drop-shadow(0 var(--p) 0 var(--navy)) drop-shadow(var(--p) 0 0 var(--navy)) drop-shadow(calc(var(--p) * -1) 0 0 var(--navy))}
.cnav.up{top:0}
.cnav.down{bottom:0}
.cnav.down svg{rotate:180deg}
.carousel.more-up .cnav.up,.carousel.more-down .cnav.down{display:block}
.cnav.up svg{animation:cnav-up .8s steps(1) infinite}
.cnav.down svg{animation:cnav-down .8s steps(1) infinite}
@keyframes cnav-up{50%{translate:0 calc(var(--p) * -1)}}
@keyframes cnav-down{50%{translate:0 var(--p)}}
@media (prefers-reduced-motion: reduce){ .cnav svg{animation:none} }
.list .row{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--p) * 4);text-align:left;font-size:var(--f6);padding:calc(var(--p) * 4)}
.list .row span{font-size:var(--f5);color:var(--sky);white-space:nowrap}
.list .row:focus span{color:var(--navy)}
.info{position:relative;flex:1;min-width:0;padding:0;overflow:hidden;font-size:var(--f6)}
#lpreview{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.lvtext{position:relative;display:flex;flex-direction:column;gap:calc(var(--p) * 3);height:100%;box-sizing:border-box;padding:calc(var(--p) * 5);
  text-shadow:var(--p) 0 var(--navy),calc(var(--p) * -1) 0 var(--navy),0 var(--p) var(--navy),0 calc(var(--p) * -1) var(--navy),var(--p) var(--p) var(--navy)}
.info h3{margin:0;font-size:var(--f8);color:var(--gold)}
.info .desc{color:#fff;line-height:1.4}
.info dl{display:grid;grid-template-columns:auto 1fr;gap:calc(var(--p) * 2) calc(var(--p) * 6);margin-top:auto}
.info dt{color:var(--pale)}
.info dd{text-align:right}
.info .unlock{color:#fff}
.info{box-shadow:none}

.pickhead{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--p) * 6);width:100%;margin-bottom:calc(var(--p) * 4)}
.ui .pickhead h2,.ui .pickhead .sub,.ui .pickhead .seg{margin:0}
.ph-left{display:flex;align-items:center;gap:calc(var(--p) * 5)}
.ui .back{display:flex;align-items:center;gap:calc(var(--p) * 3);font-size:var(--f6);padding:calc(var(--p) * 2) calc(var(--p) * 4)}
.ui .back svg{width:calc(var(--p) * 5);fill:currentColor;transform:rotate(-90deg)}
.ui .back.corner{position:absolute;left:calc(var(--p) * 8);top:calc(var(--p) * 8)}
.carousel.boatlist{flex-basis:calc(var(--p) * 120)}
.boatlist .list{gap:calc(var(--p) * 1)}
.ui .boatrow{display:flex;align-items:center;gap:calc(var(--p) * 4);text-align:left;padding:calc(var(--p) * 1) calc(var(--p) * 3) calc(var(--p) * 1) calc(var(--p) * 1);border:0;background:transparent}
.boatrow .spr{--sz:calc(var(--p) * 32);flex:0 0 auto;animation-play-state:paused}
.boatrow:focus .spr{animation-play-state:running}
.boatrow .nm{display:flex;flex-direction:column;gap:calc(var(--p) * 2);min-width:0}
.boatrow b{font-weight:normal;font-size:var(--f6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boatrow small{font-size:var(--f5);color:var(--sky);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boatrow:focus small{color:var(--navy)}
.boatinfo{flex:1;display:flex;flex-direction:column;gap:calc(var(--p) * 3);min-width:0;overflow:hidden;padding:calc(var(--p) * 5)}
.bi-head{display:flex;flex-direction:column;gap:calc(var(--p) * 1)}
.ui .bi-head h3{margin:0;font-size:var(--f8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bi-head span{font-size:var(--f5);color:var(--sky)}
.boatinfo .stats{margin:0}
#bpreview{display:block;flex:0 0 auto;width:calc(var(--p) * 164);height:calc(var(--p) * 68);image-rendering:pixelated;image-rendering:crisp-edges;outline:calc(var(--p) * 1) solid var(--edge)}
.bi-tag{font-size:var(--f5);color:var(--pale);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats{display:grid;grid-template-columns:auto auto;gap:calc(var(--p) * 2) calc(var(--p) * 4);align-items:center;font-size:var(--f5);color:var(--pale);margin-top:calc(var(--p) * 2)}
.stats i{font-style:normal;text-align:left}
.pips{display:flex;width:calc(var(--cap, 10) * var(--p) * 5);height:calc(var(--p) * 5);
  background:repeating-linear-gradient(90deg,#2a5a85 0 calc(var(--p) * 4),transparent calc(var(--p) * 4) calc(var(--p) * 5))}
.pips s,.pips u{display:block;flex:none;height:100%;width:calc(var(--v) * var(--p) * 5);
  background:repeating-linear-gradient(90deg,var(--gold) 0 calc(var(--p) * 4),transparent calc(var(--p) * 4) calc(var(--p) * 5))}
.pips u{background:repeating-linear-gradient(90deg,#9fe6ff 0 calc(var(--p) * 4),transparent calc(var(--p) * 4) calc(var(--p) * 5))}
.pips.none{width:auto;height:auto;background:none;color:var(--sky)}
.stats.shop{grid-template-columns:auto auto auto auto;justify-content:start}
.ui .buy{display:block;width:calc(var(--p) * 9);height:calc(var(--p) * 9);padding:0;font-size:var(--f6);line-height:1}
.stats .cost{display:inline-flex;align-items:center;gap:calc(var(--p) * 1);color:var(--gold);white-space:nowrap}

.confirm{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(10,31,51,.6)}
.confirm .panel{display:flex;flex-direction:column;align-items:center;gap:calc(var(--p) * 6);max-width:calc(var(--p) * 200);
  text-align:center;font-size:var(--f7)}
.confirm p{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:calc(var(--p) * 1);line-height:1.4}
.confirm .yn{display:flex;gap:calc(var(--p) * 4)}
.confirm .yn button{min-width:calc(var(--p) * 40)}
.seg{display:flex;gap:calc(var(--p) * 3);align-items:center;white-space:nowrap;margin-top:calc(var(--p) * 5);font-size:var(--f6)}
.seg button{font-size:var(--f6);padding:calc(var(--p) * 3) calc(var(--p) * 5)}

.results{width:calc(var(--p) * 290);display:flex;flex-direction:column;gap:calc(var(--p) * 5)}
.results h2{font-size:var(--f14);text-align:center;color:var(--gold)}
.res-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:calc(var(--p) * 8)}
.res-mine{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--p) * 4);text-align:center}
.res-mine .flash{margin:0}
.res-coins{display:inline-flex;align-items:center;gap:calc(var(--p) * 2);font-size:var(--f8);color:var(--gold)}
.res-coins b{font-weight:normal}
.res-coins s{text-decoration:none;color:var(--coral)}
.bigtime{font-size:var(--f14)}
.flash{color:var(--gold);animation:blink .66s steps(1) infinite;font-size:var(--f7);margin-top:calc(var(--p) * 5)}
@keyframes blink{50%{opacity:0}}
.board{font-size:var(--f5)}
.board ol{list-style:none;padding:0;display:flex;flex-direction:column;gap:calc(var(--p) * 2)}
.board li{display:grid;grid-template-columns:calc(var(--p) * 12) 1fr auto;gap:calc(var(--p) * 3);padding:calc(var(--p) * 2) calc(var(--p) * 3);background:var(--navy2)}
.board li .who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board li .who small{color:var(--sky);font-size:var(--f4)}
.board li.me{background:var(--gold);color:var(--navy)}
.board li.me small{color:var(--navy)}
.board li.empty{display:block;text-align:center;color:var(--sky)}
.btns{display:flex;gap:calc(var(--p) * 4);justify-content:center}
.btns button{flex:1}
.note{font-size:var(--f5);color:var(--sky);text-align:center}
.initials{display:flex;align-items:center;justify-content:center;gap:calc(var(--p) * 4);font-size:var(--f6)}
.initials input{font-family:var(--pixel);font-size:var(--f10);width:calc(var(--p) * 34);padding:calc(var(--p) * 1) calc(var(--p) * 2);text-align:center;
  letter-spacing:calc(var(--p) * 1);text-transform:uppercase;background:var(--navy);color:var(--gold);border:var(--p) solid var(--edge);border-radius:0;outline:none}
.initials input:focus{border-color:var(--gold)}
.initials input::placeholder{color:var(--edge)}
.initials input.nope{animation:nope .3s steps(2) 2}
@keyframes nope{50%{transform:translateX(calc(var(--p) * 2))}}
.initials .note{text-align:left}
.note.err{color:var(--coral)}
.vs-row{display:grid;grid-template-columns:calc(var(--p) * 40) 1fr auto;gap:calc(var(--p) * 6);align-items:center;font-size:var(--f7);padding:calc(var(--p) * 4);background:var(--navy2)}
.vs-row.win{outline:var(--p) solid var(--gold)}
.vs-row small{font-size:var(--f5);color:var(--sky)}
.ui .coin,.ui .lock{display:inline-block;flex:none;width:calc(var(--p) * 7);height:calc(var(--p) * 7);vertical-align:middle}
.ui img.coin{image-rendering:pixelated;image-rendering:crisp-edges}
.purse{display:inline-flex;align-items:center;gap:calc(var(--p) * 2);font-size:var(--f7);color:var(--gold)}
.purse b{font-weight:normal}
.screen > .purse{position:absolute;right:calc(var(--p) * 8);top:calc(var(--p) * 8)}
.title > .purse{top:auto;bottom:calc(var(--p) * 6)}
.ph-right{display:flex;align-items:center;gap:calc(var(--p) * 6)}
.price{display:inline-flex;align-items:center;gap:calc(var(--p) * 2);color:var(--gold)}
.ui button:focus .price{color:var(--navy)}
.ui .lock{margin-right:calc(var(--p) * 3);vertical-align:-0.1em}
.unlock{display:flex;align-items:center;font-size:var(--f5);line-height:1.4;color:var(--sky);white-space:nowrap;overflow:hidden}
.unlock span{display:inline-flex;align-items:center;gap:calc(var(--p) * 1);overflow:hidden;text-overflow:ellipsis}
.unlock.nope{color:var(--coral);animation:nope .3s steps(2) 2}

.options{width:calc(var(--p) * 216);display:flex;flex-direction:column;gap:calc(var(--p) * 4)}
.options h2{text-align:center;color:var(--gold)}
.ui .optrow{display:grid;grid-template-columns:calc(var(--p) * 58) 1fr calc(var(--p) * 26);align-items:center;gap:calc(var(--p) * 4);text-align:left}
.optrow b{grid-column:-2;text-align:right;font-weight:normal}
.vb{display:flex;align-items:center;gap:calc(var(--p) * 2)}
.vb s{display:block;width:calc(var(--p) * 6);height:calc(var(--p) * 6);background:#2a5a85}
.vb s.on{background:var(--gold)}
.optrow:focus .vb s{background:var(--navy);opacity:.25}
.optrow:focus .vb s.on{opacity:1}
.vb i{display:flex;align-items:center;justify-content:center;width:calc(var(--p) * 7);height:calc(var(--p) * 7);cursor:pointer}
.vb i svg{width:calc(var(--p) * 7);fill:currentColor}
.vb i[data-step="-1"] svg{transform:rotate(-90deg)}
.vb i[data-step="1"] svg{transform:rotate(90deg)}
.pause{width:calc(var(--p) * 180);display:flex;flex-direction:column;gap:calc(var(--p) * 5);text-align:center}

.twop .initials{justify-content:space-between}
.twop .btns{gap:calc(var(--p) * 3)}
.initials input.code{width:calc(var(--p) * 50)}
.lobbybox{flex:0 0 calc(var(--p) * 136);display:flex;flex-direction:column;gap:calc(var(--p) * 4);min-width:0;padding:calc(var(--p) * 5)}
.lobbybox .note{text-align:left;line-height:1.4;overflow-wrap:anywhere}
.lobby .acts{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--p) * 3);margin-top:auto}
.lobby .acts button{font-size:var(--f6);padding:calc(var(--p) * 3)}
.lobby .acts [data-act="ready"],.lobby .acts [data-act="start"]{grid-column:1 / -1}
.lobby .acts [data-act="ready"]:disabled,.lobby .acts [data-act="start"]:disabled{opacity:.4;cursor:default}
.lobby .board li > span:last-child{display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--p) * 2)}
.lobby .board li .kick{padding:0 calc(var(--p) * 2);line-height:1.4;border-width:1px;color:var(--coral)}
.lb{width:calc(var(--p) * 250)}
.lb .picker{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--p) * 4);margin-bottom:calc(var(--p) * 6);font-size:var(--f7)}
.lb .picker button{padding:calc(var(--p) * 2) calc(var(--p) * 5)}
.lb .board{font-size:var(--f6)}
.lb .board li{grid-template-columns:calc(var(--p) * 14) 1fr auto}