/* Click-Sim: night-match red and black. The field is the backdrop; the interface is lit like the arena around it.
   One signature: a red light that runs along an edge, like the chase on the HUB's diffusers. It runs on the loading
   screen, down the menu's rail and under the row you're on. Everything else stays still and black.
   Alliance blue appears only where it means the blue alliance. */
:root{
  --black:#000;
  --panel:rgba(0,0,0,.74);
  --panel-hi:rgba(0,0,0,.88);
  --line:rgba(255,255,255,.09);
  --line-hi:rgba(255,255,255,.2);
  --red:#e10600;          /* signal red: the selection, the main action, the red alliance */
  --ember:#ff4a26;        /* the hot center of the light */
  --oxblood:#3d0503;      /* deep red for fills behind red light */
  --bone:#f3eee8;         /* text */
  --smoke:#a69d98;        /* quiet text */
  --ash:#625a56;          /* the quietest text */
  --blue:#2f6bff;         /* the blue alliance, nothing else */
  --ok:#35d07f;
  --fuel:#ffd21a;         /* game pieces only */
  --xa:#4fbf3c;--xb:#e3463d;--xx:#3b8ff0;--xy:#f2c230;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --snap:cubic-bezier(.5,0,.1,1);
  color-scheme:dark;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--black);color:var(--bone);font-family:var(--body);overflow:hidden;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit}
#stage{position:fixed;inset:0}
#stage canvas{display:block;width:100%;height:100%;touch-action:none}
.hud{position:fixed;pointer-events:none;z-index:2}
.label{font:600 13px var(--body);color:var(--smoke)}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px}

/* ---------- Loading screen (its first frame is styled inline in index.html so it shows before this file loads) ---------- */
#boot{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:22px;
  padding:0 max(20px,7vw) max(40px,12vh);background:radial-gradient(ellipse 80% 60% at 0% 100%,rgba(225,6,0,.22),transparent 60%),var(--black);
  transition:opacity .7s var(--ease),visibility 0s .7s}
#boot.done{opacity:0;visibility:hidden}
#boot.done .boot-mark{transform:translateY(-14px) scale(1.02)}
.boot-mark{position:relative;font:900 clamp(84px,17vw,220px)/.78 var(--display);letter-spacing:-.01em;transition:transform .7s var(--ease)}
.boot-mark .dim{color:#1d0402;-webkit-text-stroke:1px rgba(225,6,0,.35)}
/* the lit band: a window that slides across the word, holding a red copy that slides the other way so it stays put */
.boot-mark .lit{position:absolute;inset:0;overflow:hidden;width:34%;animation:boot-win 2.4s var(--snap) infinite}
.boot-mark .lit span{display:block;width:max-content;color:var(--red);text-shadow:0 0 28px rgba(255,74,38,.75);animation:boot-txt 2.4s var(--snap) infinite}
@keyframes boot-win{from{transform:translateX(-110%)}to{transform:translateX(310%)}}
@keyframes boot-txt{from{transform:translateX(37.4%)}to{transform:translateX(-105.4%)}}
.boot-bar{width:min(520px,86vw);height:3px;background:rgba(255,255,255,.08);overflow:hidden}
.boot-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--oxblood),var(--red) 70%,var(--ember));transform-origin:0 50%;transform:scaleX(.04);transition:transform .5s var(--ease);box-shadow:0 0 12px var(--red)}
#bootMsg{margin:0;font:500 15px var(--body);color:var(--smoke);min-height:1.4em}

/* ---------- Scoreboard: blue score, clock, red score, cut like a stadium board ---------- */
#foulCall{top:calc(env(safe-area-inset-top,0px) + 86px);left:50%;transform:translateX(-50%);max-width:min(560px,calc(100vw - 32px));padding:7px 14px;background:rgba(10,10,10,.82);border-left:3px solid var(--fuel);font:600 14px var(--body);color:var(--bone);text-align:center;animation:rise .3s var(--ease)}
#foulCall b.b{color:#8fb0ff}#foulCall b.r{color:#ff8a7a}
#sb{top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;transform:translateX(-50%);display:flex;align-items:stretch;font-family:var(--display);font-variant-numeric:tabular-nums;filter:drop-shadow(0 8px 22px rgba(0,0,0,.6))}
.sb-score{display:flex;align-items:center;justify-content:center;min-width:104px;padding:0 22px;height:56px}
.sb-score b{display:block;font-size:40px;font-weight:900;line-height:1}
.sb-score.blue{background:linear-gradient(180deg,#3d78ff,#1c47c4);clip-path:polygon(14px 0,100% 0,100% 100%,0 100%)}
.sb-score.red{background:linear-gradient(180deg,#f0140c,#a00400);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 100%,0 100%)}
.sb-score b.pop{animation:pop .45s var(--ease)}
@keyframes pop{30%{transform:scale(1.28)}}
.sb-time{display:flex;align-items:center;justify-content:center;min-width:118px;padding:0 18px;background:var(--black);font-size:34px;font-weight:800;letter-spacing:.02em;border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
#sb.endgame .sb-time{color:var(--ember);border-bottom-color:var(--red);animation:endgame 1s steps(1) infinite}
@keyframes endgame{50%{text-shadow:0 0 18px rgba(255,74,38,.9)}}
.sb-pause{pointer-events:auto;margin-left:8px;width:46px;border:0;background:var(--black);display:flex;align-items:center;justify-content:center;cursor:pointer}
.sb-pause svg{width:18px;height:18px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#divider{top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,var(--red),transparent)}

/* ---------- Menus: a black column on the left with a red rail ---------- */
#menu{position:fixed;inset:0;z-index:5;overflow:auto;
  background:radial-gradient(ellipse 60% 70% at 0% 100%,rgba(225,6,0,.2),transparent 70%),
    linear-gradient(90deg,var(--black) 0%,rgba(0,0,0,.9) 30%,rgba(0,0,0,.25) 68%,rgba(0,0,0,0) 100%)}
#menu.paused{background:linear-gradient(90deg,var(--black) 0%,rgba(0,0,0,.85) 40%,rgba(0,0,0,.45) 100%)}
.menu-col{position:relative;min-height:100%;width:min(500px,100%);padding:clamp(24px,8vh,72px) 16px 24px calc(max(16px,7vw) + 22px);display:flex;flex-direction:column}
/* the rail, and the light that runs down it */
.menu-col::before,.menu-col::after{content:"";position:absolute;left:max(16px,7vw);top:clamp(24px,8vh,72px);bottom:24px;width:2px}
.menu-col::before{background:linear-gradient(180deg,var(--red),rgba(225,6,0,.25) 40%,rgba(225,6,0,.08))}
.menu-col::after{height:90px;bottom:auto;background:linear-gradient(180deg,transparent,var(--ember),transparent);box-shadow:0 0 14px 2px rgba(255,74,38,.55);animation:rail 5s var(--snap) infinite}
@keyframes rail{0%{transform:translateY(-20px);opacity:0}10%{opacity:1}60%{opacity:1}75%,100%{transform:translateY(62vh);opacity:0}}
.logo{font:900 clamp(78px,11vw,132px)/.8 var(--display);letter-spacing:-.01em;margin:0;color:var(--bone)}
.logo::after{content:"";display:block;width:64px;height:6px;margin-top:16px;background:var(--red);box-shadow:0 0 18px rgba(255,74,38,.6)}
.logo-sub{margin:14px 0 0;color:var(--smoke);font-size:16px}
.screen-title{font:900 clamp(46px,6vw,64px)/.9 var(--display);margin:0}
#menuBody{margin-top:clamp(28px,6vh,56px)}
.rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mi{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;border:0;background:none;cursor:pointer;isolation:isolate;
  font:800 clamp(28px,3.8vw,36px)/1.05 var(--display);letter-spacing:.005em;color:var(--ash);padding:10px 12px 10px 18px;transition:color .15s,transform .25s var(--ease)}
/* the row you're on: red light fills in from the rail, with a hot edge where it meets it */
.mi::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(225,6,0,.38),rgba(225,6,0,.1) 55%,transparent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .32s var(--ease)}
.mi::after{content:"";position:absolute;left:-22px;top:6px;bottom:6px;width:4px;background:var(--ember);box-shadow:0 0 16px 2px rgba(255,74,38,.8);transform:scaleY(0);transition:transform .2s var(--ease)}
.mi.on{color:var(--bone);transform:translateX(6px)}
.mi.on::before{transform:scaleX(1)}
.mi.on::after{transform:scaleY(1)}
.mi:focus-visible{outline:none}
.mi.go{color:var(--smoke)}
.mi.go.on{color:#fff}
.sub .mi{font-size:clamp(23px,3vw,28px);padding-top:8px;padding-bottom:8px}
.mi.back{margin-top:14px}
.mi .val{display:inline-flex;align-items:center;gap:12px;color:var(--bone);font-weight:700;white-space:nowrap}
.mi .val i{font-style:normal;color:var(--ash);font-size:.9em;transition:color .15s,transform .15s}
.mi.on .val i{color:var(--ember)}
.mi.on .val i:first-child{transform:translateX(-2px)}.mi.on .val i:last-child{transform:translateX(2px)}
/* the Controls screen: a long list, so smaller rows; the binding you're setting waits in ember */
#menuBody.binds .mi{font-size:clamp(19px,2.4vw,23px);padding-top:5px;padding-bottom:5px}
#menuBody.binds .mi.back{margin-top:10px}
.mi.bind .val{color:var(--smoke);font-weight:700}
.mi.bind.on .val{color:var(--bone)}
.mi.wait .val,.mi.wait.on .val{color:var(--ember);animation:wait 1s ease-in-out infinite alternate}
@keyframes wait{to{opacity:.45}}
/* a new screen comes in from the rail, row by row */
.enter .rows li,.enter > :not(.rows){animation:rise .42s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
.screen-title.enter,.logo.enter,.logo-sub.enter{animation:rise .5s var(--ease) both}
.logo-sub.enter{animation-delay:80ms}
@keyframes rise{from{opacity:0;transform:translateX(-18px)}}
.menu-hint{min-height:3em;margin:22px 0 0;color:var(--smoke);font-size:15px;line-height:1.5;max-width:40ch}
/* account */
.acct{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.acct img,.acct i{width:54px;height:54px;object-fit:cover;display:grid;place-items:center;background:var(--oxblood);font:900 26px var(--display);font-style:normal;box-shadow:inset 0 -3px 0 var(--red)}
.acct b{display:block;font:800 26px/1 var(--display)}
.acct small{color:var(--smoke);font-size:14px}
.note{margin:0 0 18px;color:var(--smoke);font-size:15px;line-height:1.5;max-width:40ch}
.note.warn{color:#ff8f7a}
.code-in{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.code-in span{font:600 14px var(--body);color:var(--smoke)}
.code-in input{width:min(300px,100%);padding:10px 14px;border:0;border-bottom:3px solid var(--red);background:rgba(225,6,0,.08);color:var(--bone);
  font:800 40px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;-webkit-user-select:text;user-select:text;transition:background .2s}
.code-in input:focus{outline:none;background:rgba(225,6,0,.16);box-shadow:0 8px 24px -10px rgba(255,74,38,.7)}
#username{text-transform:none;letter-spacing:.02em;font-size:34px}
.help{max-width:52ch;font-size:15px;line-height:1.55;color:#d4ccc6}
.help h3{font:800 24px var(--display);color:var(--bone);margin:24px 0 8px}
.help h3:first-child{margin-top:0}
.help p{margin:0 0 10px}
.ctl-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;color:var(--smoke);font-size:13px}
.ctl-head b{font:800 19px var(--display);color:var(--bone)}
.ctl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center;font-size:14px}
.ctl span{color:var(--smoke)}
.keys{display:flex;gap:3px;justify-content:flex-end;min-width:110px}
kbd{font:700 13px var(--display);background:rgba(255,255,255,.06);border:1px solid var(--line-hi);border-bottom:2px solid var(--red);padding:2px 7px;color:var(--bone);white-space:nowrap;line-height:1.2}
.pb{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font:800 12px var(--display);color:#000}
.pb.a{background:var(--xa)}.pb.b{background:var(--xb);color:#fff}.pb.x{background:var(--xx);color:#fff}.pb.y{background:var(--xy)}
.pt{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:20px;padding:0 5px;border-radius:6px 6px 4px 4px;background:#d8d0ca;color:#000;font:800 11px var(--display)}
.ps{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:2px solid #d8d0ca;font:800 10px var(--display)}
.pm{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#3a3331;font:800 12px var(--display)}

/* ---------- Results ---------- */
.overlay{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
#update{z-index:9;background:rgba(0,0,0,.78)}
#update:not([hidden]) .card{animation:card-in .45s var(--ease) both}
.upd .winner{font-size:clamp(34px,6vw,48px);color:var(--bone)}
#results{z-index:7;background:radial-gradient(ellipse at center,rgba(0,0,0,.5),rgba(0,0,0,.92))}
.card{position:relative;width:min(540px,100%);background:var(--panel-hi);border-top:3px solid var(--red);padding:26px;display:flex;flex-direction:column;gap:18px;margin:auto;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -10px 40px -18px rgba(255,74,38,.8),0 30px 80px rgba(0,0,0,.7)}
#results:not([hidden]) .card{animation:card-in .55s var(--ease) both}
#results:not([hidden]) .winner{animation:winner .7s .15s var(--ease) both}
@keyframes card-in{from{opacity:0;transform:translateY(24px) scale(.97)}}
@keyframes winner{from{opacity:0;letter-spacing:.2em;filter:blur(6px)}}
.winner{font:900 clamp(48px,9vw,68px)/.9 var(--display);margin:0}
.res{display:grid;grid-template-columns:1fr auto auto;gap:8px 24px;font-variant-numeric:tabular-nums;font-size:15px}
.res .h{font:800 18px var(--display)}
.res .tot{font:900 34px var(--display);border-top:1px solid var(--line-hi);padding-top:8px}
.res .b{text-align:right;color:#8fb0ff}.res .r{text-align:right;color:#ff8a7a}
ul.fouls{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--smoke)}
ul.fouls b.b{color:#8fb0ff}ul.fouls b.r{color:#ff8a7a}
#rpList{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.rps{display:flex;flex-wrap:wrap;gap:6px}
.rp{font-size:12.5px;font-weight:600;padding:4px 8px;border:1px solid var(--line-hi);color:var(--smoke)}
.rp.got{color:#fff;background:var(--al);border-color:var(--al)}
.rps.b{--al:var(--blue)}.rps.r{--al:var(--red)}
.rp.name{color:var(--al);border-color:var(--al);filter:brightness(1.35)}
.small{font-size:13px;color:var(--smoke);line-height:1.5;margin:0}
.btn{position:relative;overflow:hidden;font:800 20px var(--display);letter-spacing:.01em;padding:13px 18px;white-space:nowrap;border:1px solid transparent;cursor:pointer;flex:1;transition:background .2s,box-shadow .2s,border-color .2s}
.btn.go{background:var(--red);color:#fff;box-shadow:0 8px 28px -12px rgba(255,74,38,.9)}
.btn.go:hover{background:#f20d05;box-shadow:0 10px 34px -10px rgba(255,74,38,1)}
/* a light passes over the main button when you point at it */
.btn.go::after,.lb-btn.go::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-120%)}
.btn.go:hover::after,.lb-btn.go:hover:not(:disabled)::after{transition:transform .6s var(--ease);transform:translateX(320%)}
.btn.quiet{background:transparent;color:var(--bone);border-color:var(--line-hi)}
.btn.quiet:hover{border-color:var(--red);background:rgba(225,6,0,.1)}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Starting position ---------- */
#place{position:fixed;z-index:4;background:var(--panel);border-left:3px solid var(--red);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);width:min(700px,calc(100vw - 24px));pointer-events:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px;animation:rise-up .45s var(--ease) both}
@keyframes rise-up{from{opacity:0;transform:translate(-50%,16px)}}
#place h2{margin:0;font:900 30px/1 var(--display)}
#place p{margin:6px 0 0;color:var(--smoke);font-size:14px;line-height:1.45}
#place .btn{padding:11px 16px;font-size:19px}
#placeMsg{color:var(--ember)!important;min-height:1.2em}

/* ---------- Touch ---------- */
#touch{position:fixed;inset:0;z-index:3;pointer-events:none}
.stick{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);width:130px;height:130px;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:rgba(0,0,0,.25);pointer-events:auto;touch-action:none}
.stick i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(225,6,0,.55);box-shadow:0 0 16px rgba(255,74,38,.5)}
#stickL{left:20px}#stickR{right:20px;width:110px;height:110px}
.tb{position:absolute;pointer-events:auto;touch-action:none;font:800 14px var(--display);letter-spacing:.04em;color:#fff;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:rgba(0,0,0,.45);width:64px;height:64px}
#tShoot{right:146px;bottom:calc(env(safe-area-inset-bottom,0px) + 40px);width:76px;height:76px;background:rgba(225,6,0,.6);border-color:var(--ember)}
#tClimb{right:150px;bottom:calc(env(safe-area-inset-bottom,0px) + 130px)}
#tIntake{left:150px;bottom:calc(env(safe-area-inset-bottom,0px) + 150px)}
#tHP{right:60px;bottom:calc(env(safe-area-inset-bottom,0px) + 150px)}

/* ---------- Online room ---------- */
#lobby{position:fixed;inset:0;z-index:6;overflow:auto;display:flex;flex-direction:column;gap:18px;padding:18px max(16px,3vw) 0;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(225,6,0,.16),transparent 70%),rgba(0,0,0,.93);-webkit-user-select:none;user-select:none;animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0}}
#lobby[hidden]{display:none}
#lobby h3{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px;font:800 21px var(--display);color:var(--bone)}
#lobby .count{font:700 16px var(--display);color:var(--smoke)}
.lb-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px}
.lb-leave{justify-self:start;background:none;border:0;color:var(--smoke);font:700 19px var(--display);cursor:pointer;padding:6px 0;transition:color .15s}
.lb-leave:hover{color:var(--bone)}
.lb-code{display:flex;flex-direction:column;align-items:center;gap:4px}
.lb-code .label{font:600 14px var(--body)}
.lb-code b{font:900 clamp(56px,9vw,84px)/.9 var(--display);letter-spacing:.14em;color:var(--bone);text-shadow:0 0 30px rgba(255,74,38,.55);-webkit-user-select:text;user-select:text;padding-left:.14em}
.lb-share{display:flex;gap:8px;margin-top:10px}
.lb-net{justify-self:end;font-size:14px;color:var(--smoke);padding-top:8px}
.lb-net .good,.ping.good{color:var(--ok)}.lb-net .ok,.ping.ok{color:var(--fuel)}.lb-net .bad,.ping.bad{color:#ff8a7a}
.chip{font:600 13px var(--body);padding:7px 13px;border:1px solid var(--line-hi);background:transparent;color:var(--bone);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s}
.chip:hover:not(:disabled){border-color:var(--red);background:rgba(225,6,0,.12)}
.chip:disabled{opacity:.4;cursor:default}
.chip.toggle.on{background:var(--red);border-color:var(--red);color:#fff}
.chip.you{border-color:var(--red)}
.lb-msg{align-self:center;max-width:46ch;text-align:center;font-size:17px;color:var(--smoke)}
.lb-msg.warn{color:#ff8f7a}
.lb-main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start;flex:1}
.lb-main[hidden]{display:none}
.lb-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.lb-alliances{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lb-card,.lb-al{background:rgba(255,255,255,.025);border:1px solid var(--line);padding:16px}
.lb-al{border-top:3px solid var(--blue);display:flex;flex-direction:column;gap:8px;background:linear-gradient(180deg,rgba(47,107,255,.1),transparent 40%)}
.lb-al.red{border-top-color:var(--red);background:linear-gradient(180deg,rgba(225,6,0,.12),transparent 40%)}
.lb-al.blue h3 span:first-child{color:#8fb0ff}.lb-al.red h3 span:first-child{color:#ff8a7a}
.seat{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;
  border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--bone);font:inherit;transition:border-color .15s,background .15s}
.seat.you{border-color:var(--red);background:rgba(225,6,0,.1);box-shadow:inset 3px 0 0 var(--ember)}
.seat.open{border-style:dashed;cursor:pointer;color:var(--smoke)}
.seat.open:hover{background:rgba(225,6,0,.08);border-color:rgba(225,6,0,.6);color:var(--bone)}
.seat .av{width:40px;height:40px;display:grid;place-items:center;font:900 20px var(--display);font-style:normal;color:#fff;background:rgba(255,255,255,.07)}
.seat .av img{width:100%;height:100%;object-fit:cover}
.seat .who{display:flex;flex-direction:column;gap:2px;min-width:0}
.seat .who b{font:600 16px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .who small{font-size:13px;color:var(--smoke)}
.seat em{font:700 11px var(--body);font-style:normal;padding:2px 6px;margin-left:4px;vertical-align:2px;background:rgba(255,255,255,.12);color:var(--bone)}
.seat em.you{background:var(--red);color:#fff}
.seat em.ok{background:rgba(53,208,127,.18);color:var(--ok)}
.seat .ping{font-size:13px;color:var(--smoke);font-variant-numeric:tabular-nums}
.seat .take{font:600 13px var(--body);opacity:0;transition:opacity .12s}
.seat.open:hover .take,.seat.open:focus-within .take{opacity:1}
.seat.open{grid-template-columns:minmax(0,1fr) auto;cursor:default}
.seat-take{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0}
.seat em.cap{background:var(--ember);color:#000}
.lb-robot,.lb-rule{font:600 13px var(--body);color:var(--bone);background:#0d0d0d;border:1px solid var(--line-hi);padding:3px 6px;max-width:100%}
.lb-robot:focus-visible,.lb-rule:focus-visible{outline:2px solid var(--ember);outline-offset:1px}
.seat .who small .lb-robot{display:block;margin-top:4px}
.seat .who b{white-space:normal}
#lbOfficial{margin-top:10px}
.lb-watchers{display:flex;flex-wrap:wrap;gap:8px}
.lb-tip{margin:8px 0 0;font-size:14px;color:var(--smoke);line-height:1.45}
.lb-tip.warn{color:#ff8f7a;margin:-2px 0 6px}
.lb-chat ol{list-style:none;margin:0 0 10px;padding:0;height:150px;overflow:auto;display:flex;flex-direction:column;gap:5px;font-size:15px;line-height:1.4;-webkit-user-select:text;user-select:text}
.lb-chat li{animation:rise .3s var(--ease)}
.lb-chat li.sys{color:var(--ash);font-size:13px}
.lb-chat form{display:flex;gap:8px}
.lb-chat input,#lbName{flex:1;min-width:0;padding:9px 12px;border:0;border-bottom:2px solid var(--line-hi);background:rgba(255,255,255,.04);color:var(--bone);font:500 15px var(--body);-webkit-user-select:text;user-select:text;transition:border-color .15s,background .15s}
.lb-chat input:focus,#lbName:focus{outline:none;border-bottom-color:var(--red);background:rgba(225,6,0,.08)}
#lbMap{display:block;width:100%;touch-action:none}
.lb-field-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;font-size:15px;border-top:1px solid var(--line)}
.lb-field-row:first-of-type{border-top:0}
.lb-field-row span{color:var(--smoke)}
.lb-field-row b{font-weight:600;text-align:right}
#lbName{flex:0 1 220px}
.lb-foot{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:12px;margin:0 calc(-1 * max(16px,3vw));padding:14px max(16px,3vw) calc(14px + env(safe-area-inset-bottom,0px));
  background:rgba(0,0,0,.94);border-top:1px solid rgba(225,6,0,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lb-foot[hidden]{display:none}
.lb-btn{position:relative;overflow:hidden;min-width:170px;padding:11px 18px;border:1px solid var(--line-hi);background:transparent;color:var(--bone);font:800 21px var(--display);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;transition:background .2s,border-color .2s,box-shadow .2s}
.lb-btn small{font:500 12px var(--body);opacity:.8}
.lb-btn:hover:not(:disabled){border-color:var(--red);background:rgba(225,6,0,.1)}
.lb-btn:disabled{opacity:.35;cursor:default}
.lb-btn.go{background:var(--red);border-color:var(--red);color:#fff;min-width:230px;box-shadow:0 8px 28px -12px rgba(255,74,38,.9)}
.lb-btn.go:hover:not(:disabled){background:#f20d05;border-color:#f20d05}
.lb-btn.go.pending{background:var(--oxblood);border-color:var(--red)}
.lb-btn.go.on{background:var(--ok);border-color:var(--ok);color:#000;box-shadow:none}
@media (max-width:900px){
  .lb-main{grid-template-columns:1fr}
  .lb-top{grid-template-columns:1fr;justify-items:center}
  .lb-leave{justify-self:start}.lb-net{justify-self:center;padding-top:0}
}
@media (max-width:560px){
  .lb-alliances{grid-template-columns:1fr}
  .lb-foot{flex-wrap:wrap}.lb-btn{flex:1;min-width:0}.lb-btn.go{flex-basis:100%}
}
@media (max-width:760px){
  #sb{top:calc(env(safe-area-inset-top,0px) + 8px)}
  .sb-score{min-width:70px;height:46px;padding:0 14px}
  .sb-score b{font-size:30px}
  .sb-time{min-width:84px;font-size:26px;padding:0 10px}
  #menu,#menu.paused{background:rgba(0,0,0,.86)}
  .menu-col::before,.menu-col::after{left:16px}
  .menu-col{padding-left:38px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .boot-mark .lit,.menu-col::after{display:none}
}
.lb-match{border-left:3px solid var(--fuel)}
.lb-match[hidden]{display:none}
.lb-score{margin:0 0 8px;font:800 26px var(--display);color:var(--bone)}
.lb-score b.b{color:#8fb0ff}.lb-score b.r{color:#ff8a7a}.lb-score span{font:500 15px var(--body);color:var(--smoke);margin:0 6px}
.lb-match .chip{margin-top:10px}
.lb-kick{margin-left:8px;background:none;border:1px solid var(--line-hi);color:var(--smoke);font:600 12px var(--body);padding:2px 7px;cursor:pointer}
.lb-kick:hover,.lb-kick[data-arm]{border-color:var(--red);color:#ff8a7a}
.lb-kick:focus-visible{outline:2px solid var(--ember);outline-offset:1px}