:root{
  --asphalt:#2e3133; --concrete:#8d8f88; --sodium:#f2a43a; --lada:#e2d3a8; --rust:#a4492b;
  --ink:#151718; --paper:#ece6d6; --panel:rgba(21,23,24,.88); --dim:#9a968a; --good:#8fbf6a; --bad:#d9563c;
  --display:"Russo One","Arial Black",Impact,sans-serif; --body:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --panel:rgba(21,23,24,.9);} }
:root[data-theme="dark"]{ --panel:rgba(21,23,24,.9); }
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hudbox{position:fixed;background:var(--panel);border-radius:6px;padding:8px 12px;pointer-events:none}
#tl{top:calc(10px + env(safe-area-inset-top,0px));left:10px}
#cash{font-family:var(--display);font-size:22px;color:var(--lada);letter-spacing:.5px}
#resp{font-size:13px;color:var(--dim);margin-top:2px}
#resp b{color:var(--paper);font-weight:500}
#online{font-size:12px;color:var(--good);margin-top:3px}
.chatrow{display:flex;gap:6px;margin-top:8px}.chatrow input{flex:1;min-width:0;background:#101213;border:1px solid #33373a;border-radius:6px;color:var(--paper);font:14px var(--body);padding:7px 9px;user-select:text;-webkit-user-select:text}.chatrow input:focus{outline:2px solid var(--sodium)}
#tr{top:calc(10px + env(safe-area-inset-top,0px));right:10px;text-align:right}
#clock{font-family:var(--display);font-size:22px}
#wx{font-size:13px;color:var(--dim);margin-top:2px}
#obj{left:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:min(420px,60vw);font-size:14px;line-height:1.35;border-left:3px solid var(--sodium)}
#obj small{display:block;color:var(--dim);font-size:11px;margin-bottom:2px}
#br{position:fixed;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
#mini{background:#101213;border-radius:6px;border:2px solid #2a2d2f;width:180px;height:128px;image-rendering:pixelated}
#carhud{background:var(--panel);border-radius:6px;padding:8px 12px;min-width:180px}
#spd{font-family:var(--display);font-size:30px;line-height:1}
#spd span{font-size:12px;color:var(--dim);font-family:var(--body);margin-left:4px}
.bar{height:5px;background:#2b2e30;border-radius:3px;margin-top:5px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--sodium)}
.cond{display:flex;gap:10px;font-size:11px;color:var(--dim);margin-top:6px}
#prompt{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(70px + env(safe-area-inset-bottom,0px));background:var(--panel);padding:8px 14px;border-radius:6px;font-size:15px;pointer-events:none;white-space:nowrap}
#prompt kbd{font-family:var(--display);background:var(--sodium);color:var(--ink);border-radius:4px;padding:1px 7px;margin-right:6px}
#raceHud{top:calc(64px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);font-family:var(--display);font-size:18px;text-align:center}
#count{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:min(26vw,190px);color:var(--sodium);text-shadow:0 6px 0 rgba(0,0,0,.5);pointer-events:none}
#toasts{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;width:min(440px,70vw)}
.toast{background:var(--panel);padding:7px 13px;border-radius:6px;font-size:14px;text-align:center;animation:tin .25s ease-out}
.toast.gold{color:var(--sodium)}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#card{position:fixed;left:0;right:0;top:34%;text-align:center;pointer-events:none}
#card h2{font-family:var(--display);font-size:min(9vw,64px);margin:0;color:var(--paper);text-shadow:0 4px 0 rgba(0,0,0,.55);font-weight:400}
#card p{margin:6px 0 0;color:var(--sodium);font-size:17px;text-shadow:0 2px 0 rgba(0,0,0,.6)}
[hidden]{display:none!important}
body.intro .hudbox,body.intro #br,body.intro #prompt,body.intro #touch{display:none!important}

#dlg{position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;padding:0 12px;z-index:20}
.dlg-box{background:#1b1d1e;border:1px solid #33373a;border-radius:8px;width:min(620px,100%);padding:16px 18px;max-height:70vh;overflow:auto}
.dlg-name{font-family:var(--display);color:var(--sodium);font-size:18px;margin-bottom:6px}
.dlg-text{font-size:16px;line-height:1.5;color:var(--paper);white-space:pre-line}
.dlg-opts{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.dlg-opts button{all:unset;cursor:pointer;background:#26292b;border-radius:5px;padding:9px 12px;font-size:15px;display:flex;gap:10px;align-items:baseline}
.dlg-opts button:hover,.dlg-opts button:focus-visible{background:#33373a;outline:2px solid var(--sodium)}
.dlg-opts button .n{font-family:var(--display);color:var(--sodium);min-width:14px}
.dlg-opts button.off{opacity:.45}

#phone{position:fixed;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:12px min(6vw,60px);z-index:30;background:rgba(0,0,0,.35)}
.ph-body{width:min(340px,92vw);height:min(600px,88vh);background:#0f1011;border-radius:30px;padding:12px;border:2px solid #2d3033;box-shadow:0 20px 50px rgba(0,0,0,.6);display:flex;flex-direction:column}
.ph-status{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);padding:4px 14px 8px}
.ph-screen{flex:1;background:#1a1c1d;border-radius:18px;overflow:auto;padding:14px}
.ph-nav{display:flex;justify-content:center;gap:40px;padding:10px 0 2px}
.ph-nav button{all:unset;cursor:pointer;color:var(--dim);font-size:13px;padding:4px 10px;border-radius:12px}
.ph-nav button:focus-visible{outline:2px solid var(--sodium)}
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 8px;margin-top:6px}
.app{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--paper);position:relative}
.app .ic{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;background:#2a2d2f}
.app:focus-visible .ic{outline:2px solid var(--sodium)}
.app .badge{position:absolute;top:-4px;right:12px;background:var(--bad);color:#fff;border-radius:9px;font-size:11px;padding:1px 6px}
.ph-title{font-family:var(--display);font-size:20px;margin:0 0 10px}
.row{padding:9px 0;border-bottom:1px solid #2a2d2f;font-size:14px;line-height:1.4}
.row .who{color:var(--sodium);font-weight:500}
.row .meta{color:var(--dim);font-size:12px}
.pbtn{all:unset;cursor:pointer;background:#2a2d2f;border-radius:6px;padding:6px 10px;font-size:13px;margin-top:6px;display:inline-block}
.pbtn:focus-visible{outline:2px solid var(--sodium)}
.pbtn.warn{background:#4a2420}
.sk{display:grid;grid-template-columns:80px 1fr 30px;gap:8px;align-items:center;font-size:13px;margin:6px 0}
#phMap{width:100%;border-radius:8px;background:#101213;image-rendering:pixelated}
.legend{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--dim);margin-top:8px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:middle}

#title{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:flex-end;padding:0 min(7vw,80px) calc(min(8vh,70px) + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(15,16,17,.15) 0%,rgba(15,16,17,.55) 45%,rgba(15,16,17,.93) 100%)}
#title h1{font-family:var(--display);font-weight:400;font-size:min(15vw,132px);line-height:.88;margin:0;color:var(--paper);text-shadow:0 6px 0 rgba(0,0,0,.45)}
#title h1 span{display:block;color:var(--sodium);font-size:.42em;letter-spacing:.02em;margin-top:.18em}
#title .tag{font-size:18px;color:var(--paper);margin:18px 0 22px;max-width:52ch;line-height:1.5}
#title .btns{display:flex;gap:12px;flex-wrap:wrap}
.tbtn{all:unset;cursor:pointer;font-family:var(--display);font-size:20px;padding:12px 22px;border-radius:6px;background:var(--sodium);color:var(--ink)}
.tbtn.alt{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 2px var(--paper)}
.tbtn:focus-visible{outline:3px solid var(--paper);outline-offset:3px}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 30px;margin-top:26px;font-size:13px;color:var(--dim);max-width:720px;line-height:1.7}
.controls b{color:var(--paper);font-weight:500}

#touch{position:fixed;inset:auto 0 calc(150px + env(safe-area-inset-bottom,0px)) 0;pointer-events:none;z-index:10}
.tpad{position:absolute;left:14px;bottom:0;display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,56px);gap:6px}
.tact{position:absolute;right:14px;bottom:0;display:grid;grid-template-columns:repeat(2,62px);gap:8px}
.tb{pointer-events:auto;background:rgba(30,32,34,.7);border:1px solid #3a3e41;border-radius:10px;color:var(--paper);font-family:var(--display);font-size:18px;display:flex;align-items:center;justify-content:center;height:56px;touch-action:none}
.tb.a{background:rgba(242,164,58,.85);color:var(--ink)}
@media (max-width:640px){#cash,#clock{font-size:18px}#mini{width:135px;height:96px}#carhud{min-width:135px}#obj{max-width:52vw;font-size:13px}}
@media (prefers-reduced-motion: reduce){.toast{animation:none}}

/* ---- muštynės ---- */
body.battle .hudbox,body.battle #br,body.battle #prompt{display:none!important}
#bHud{position:fixed;inset:0;pointer-events:none;z-index:5}
.bteams{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;gap:14px;align-items:center;background:var(--panel);border-radius:6px;padding:8px 14px}
.bt{min-width:150px}.bt.red{text-align:right}.bt b{font-family:var(--display);font-weight:400;font-size:14px;display:block}
.bt.blue b{color:#7fb0f5}.bt.red b{color:#f08a7c}.bt small{font-size:11px;color:var(--dim)}
.tk{display:flex;gap:3px;margin:4px 0 2px}.bt.red .tk{justify-content:flex-end}
.tk i{width:10px;height:8px;border-radius:2px;background:#2b2e30}.bt.blue .tk i.on{background:#4a8ae6}.bt.red .tk i.on{background:#e0503f}
.bvs{font-family:var(--display);font-size:22px;color:var(--sodium)}
.bme{position:absolute;left:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));background:var(--panel);border-radius:6px;padding:8px 12px;width:min(360px,70vw)}
.bname{font-family:var(--display);font-size:16px}
.bar.hp i{background:#4a8ae6}
.blu{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;margin-top:6px;color:var(--paper)}.blu .dead{opacity:.35;text-decoration:line-through}.blu .cur{color:var(--sodium)}
.bkeys{font-size:11px;color:var(--dim);margin-top:6px}
.pbtn.bigbtn{display:block;text-align:center;font-family:var(--display);font-size:18px;background:var(--sodium);color:var(--ink);padding:12px;margin-top:10px}
@media (pointer:coarse){.bkeys{display:none}}
body.battle #toasts{top:calc(92px + env(safe-area-inset-top,0px))}

/* ---- chebros ekranas ---- */
#crewBtn{position:fixed;right:10px;top:calc(78px + env(safe-area-inset-top,0px));z-index:6;font:500 14px var(--body);background:var(--panel);color:var(--paper);border:1px solid #3a3e41;border-radius:6px;padding:8px 12px;cursor:pointer}
#crewBtn kbd{font-family:var(--display);background:var(--sodium);color:var(--ink);border-radius:4px;padding:0 6px;margin-left:6px;font-size:12px}
#crewBtn:hover,#crewBtn:focus-visible{border-color:var(--sodium);outline:none}
body.intro #crewBtn,body.battle #crewBtn{display:none}
#crewUI{position:fixed;inset:0;z-index:35;background:rgba(8,9,10,.62);display:flex;align-items:center;justify-content:center;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
.cu-win{width:min(1020px,100%);height:min(820px,100%);background:#141617;border:1px solid #33373a;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.6);display:flex;flex-direction:column;padding:14px;gap:10px;color:var(--paper);overflow:hidden}
#crewUI button{font-family:var(--body);color:inherit}
.cu-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cu-nations{display:flex;gap:6px;overflow-x:auto;max-width:100%}
.cu-nat{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:6px;background:#1f2224;font-size:13px;white-space:nowrap;opacity:.5}
.cu-nat span{font-size:17px}.cu-nat.on{opacity:1;background:#2a2d2f;box-shadow:inset 0 -3px 0 var(--sodium)}
.cu-cur{display:flex;gap:16px;align-items:center;font-size:14px;color:var(--dim)}.cu-cur b{font-family:var(--display);font-weight:400;color:var(--lada);font-size:18px}
.cu-x{all:unset;cursor:pointer;font-size:18px;padding:6px 10px;border-radius:6px;background:#2a2d2f}
.cu-main{flex:1;min-height:0;display:grid;grid-template-columns:1fr 280px;gap:12px}
.cu-treewrap{overflow:auto;background:#1a1c1d;border-radius:8px;padding:12px}
.cu-tree{position:relative;margin:0 auto}
.cu-tree svg{position:absolute;inset:0;pointer-events:none}
.cu-tree path{fill:none;stroke:#3a3e41;stroke-width:2.5}.cu-tree path.lit{stroke:var(--sodium)}
.cu-tier{position:absolute;left:0;width:46px;text-align:center;font-family:var(--display);font-size:22px;color:#4a4e51;line-height:1}.cu-tier small{display:block;font-family:var(--body);font-size:9px;line-height:1.2;margin-top:4px;color:#5a5e61}
.cu-card{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;width:178px;height:96px;background:#232628;border:2px solid #3a3e41;border-radius:8px;padding:9px 11px;display:flex;flex-direction:column;justify-content:space-between}
.cu-card.own{border-color:#5f8f45;background:#1f2a1c}.cu-card.res{border-color:var(--sodium)}.cu-card.avail{border-color:#8d8f88}.cu-card.lock{opacity:.45}
.cu-card.sel{box-shadow:0 0 0 3px var(--sodium)}.cu-card:focus-visible{box-shadow:0 0 0 3px var(--paper)}
.cu-ch{display:flex;align-items:center;gap:8px}.cu-n{font-family:var(--display);font-size:13.5px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cu-st{white-space:nowrap}
.cu-st{font-size:11px;color:var(--dim)}.cu-act{font-size:12px;font-weight:500}.cu-card.own .cu-act{color:var(--good)}.cu-card.res .cu-act,.cu-card.avail .cu-act{color:var(--sodium)}
.av{position:relative;display:inline-block;width:26px;height:26px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.15);overflow:hidden}
.av i{position:absolute;left:0;right:0;top:0;height:40%;display:block}
.cu-soon{position:absolute;height:34px;display:flex;align-items:center;justify-content:center;border:2px dashed #33373a;border-radius:8px;color:#5a5e61;font-size:13px}
.cu-side{background:#1a1c1d;border-radius:8px;padding:16px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.cu-dh{display:flex;gap:10px;align-items:center}.cu-dh .av{width:44px;height:44px}
.cu-dn{font-family:var(--display);font-size:19px}.cu-dt{font-size:12px;color:var(--dim)}
.cu-desc{font-size:14px;line-height:1.45;margin:4px 0}
.cu-sb{display:grid;grid-template-columns:62px 1fr 40px;gap:8px;align-items:center;font-size:13px}.cu-sb .bar{margin:0}.cu-sb b{text-align:right;font-weight:500}
.cu-btn{all:unset;cursor:pointer;text-align:center;font-family:var(--display)!important;font-size:16px;background:var(--sodium);color:var(--ink)!important;border-radius:6px;padding:10px;margin-top:6px}
.cu-btn.alt{background:#2a2d2f;color:var(--paper)!important}.cu-btn:focus-visible{outline:2px solid var(--paper)}
.cu-note{font-size:12px;color:var(--dim);margin:2px 0}
.cu-modes{margin-top:auto;display:flex;flex-direction:column;gap:4px;padding-top:10px}
.cu-lbl{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.cu-mode{all:unset;cursor:pointer;padding:7px 10px;border-radius:5px;background:#232628;font-size:13px}.cu-mode.on{background:#3a2e1a;box-shadow:inset 3px 0 0 var(--sodium)}.cu-mode.off{opacity:.45}
.cu-bottom{display:flex;gap:12px;align-items:stretch}
.cu-lineup{flex:1;min-width:0;background:#1a1c1d;border-radius:8px;padding:10px 12px}
.cu-slots{display:flex;gap:8px;overflow-x:auto}
.cu-slot{flex:1;min-width:130px;background:#232628;border:2px solid #3a3e41;border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;gap:3px;cursor:pointer}
.cu-slot small{font-size:11px;color:var(--dim)}.cu-slot.sel{border-color:var(--sodium)}
.cu-slot.empty,.cu-slot.locked{cursor:default;border-style:dashed;color:#6a6e71;font-size:13px;justify-content:center}
.cu-sl{display:flex;gap:4px;margin-top:2px}.cu-sl button{all:unset;cursor:pointer;background:#2e3133;border-radius:4px;padding:2px 8px;font-size:12px}
.cu-go{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;width:280px}
.cu-rec{font-size:12px;color:var(--dim);text-align:center}
.cu-battle{all:unset;cursor:pointer;text-align:center;font-family:var(--display)!important;font-size:28px;background:var(--sodium);color:var(--ink)!important;border-radius:8px;padding:18px 10px;letter-spacing:.02em}
.cu-battle:hover{filter:brightness(1.08)}.cu-battle:focus-visible{outline:3px solid var(--paper);outline-offset:2px}
@media (max-width:860px){.cu-main{grid-template-columns:1fr;grid-template-rows:1fr auto}.cu-side{max-height:38vh}.cu-bottom{flex-direction:column}.cu-go{width:auto}.cu-battle{font-size:22px;padding:12px}}
@media (max-width:860px){#crewUI{padding:calc(6px + env(safe-area-inset-top,0px)) 6px calc(6px + env(safe-area-inset-bottom,0px))}.cu-win{height:100%;overflow-y:auto;padding:10px}.cu-main{display:flex;flex-direction:column;flex:none}.cu-treewrap{height:62vh;flex:none;padding:10px}.cu-side{max-height:none}.cu-modes{margin-top:8px}}
.cu-card.soon{cursor:default;border-style:dashed;border-color:#33373a;background:#1c1e1f;opacity:.6}.cu-card.soon .cu-act{color:#6a6e71}
.av.q{display:inline-flex;align-items:center;justify-content:center;background:#2a2d2f;color:#6a6e71;font-family:var(--display);font-size:13px}
.cu-tree path.soon{stroke:#2e3133;stroke-dasharray:6 6}
.cu-treewrap{scroll-behavior:smooth}
/* ---- brawl v2 ---- */
#bPick{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(8,9,10,.55);padding:16px}
.bp-win{background:#141617;border:1px solid #33373a;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.6);padding:20px;width:min(560px,100%);max-height:90%;overflow:auto}
.bp-t{font-family:var(--display);font-size:24px}.bp-s{color:var(--dim);font-size:14px;margin:6px 0 14px;line-height:1.4}
.bp-list{display:grid;gap:8px}
.bp-card{all:unset;cursor:pointer;display:grid;grid-template-columns:34px 1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;background:#232628;border:2px solid #3a3e41;border-radius:10px;padding:10px 14px}
.bp-card:hover,.bp-card:focus-visible{border-color:var(--sodium)}
.bp-card .av{grid-row:1/3;width:34px;height:34px}.bp-n{font-family:var(--display);font-size:16px}.bp-st{font-size:12px;color:var(--dim);grid-column:2}
.bp-k{grid-row:1/3;grid-column:3;font-family:var(--display);background:#2e3133;border-radius:5px;padding:2px 8px;color:var(--sodium)}
.bme{pointer-events:auto;width:min(380px,74vw)}
.bme-top{display:flex;gap:10px;align-items:center}.bme-top .av{width:36px;height:36px;box-shadow:0 0 0 2px #f2c230}
.bme-you{font-size:10px;letter-spacing:.1em;color:#f2c230}
.bstat{margin-top:6px;font-size:13px;color:var(--sodium)}
.blbl{font-size:10px;color:var(--dim);margin-top:6px;text-transform:uppercase;letter-spacing:.08em}
.bar.hp i{background:#f2c230}.bar.sta i{background:#8fbf6a}.bme .bar{margin-top:2px;height:7px}
.bord{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.bord button{all:unset;cursor:pointer;font-size:12px;background:#232628;border-radius:5px;padding:5px 8px;color:var(--paper)}
.bord button.on{background:#3a2e1a;box-shadow:inset 0 0 0 1px var(--sodium)}
.bord kbd{font-family:var(--display);color:var(--sodium);margin-right:5px}
.tk small{font-size:10px;color:var(--dim)}
#ver{position:absolute;right:min(7vw,80px);bottom:calc(min(8vh,70px) + env(safe-area-inset-bottom,0px));font-family:var(--display);font-size:14px;color:var(--dim);letter-spacing:.04em}
.cu-title{font-family:var(--display);font-size:20px}.cu-title span{display:block;font-family:var(--body);font-size:12px;color:var(--dim);margin-top:2px}
.cu-need{margin-top:6px}.cu-need .bar i{background:var(--sodium)}
.cu-card.resp{border-color:#6a5a3a}.cu-card.resp .cu-act{color:#c9a24a}
/* crew tree: scroll without a visible scrollbar, soft fade at the bottom hints there is more below */
.cu-treewrap{scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent)}
.cu-treewrap::-webkit-scrollbar{display:none;width:0;height:0}
.cu-side,.cu-slots,.cu-win{scrollbar-width:none}.cu-side::-webkit-scrollbar,.cu-slots::-webkit-scrollbar,.cu-win::-webkit-scrollbar{display:none}
.bar.bal i{background:#7fb0f5}
.bstat.cond{font-family:var(--display);font-size:14px}.bstat.c0{color:var(--good)}.bstat.c1{color:#e6d27a}.bstat.c2{color:#f2a43a}.bstat.c3{color:#ff6b5a}

/* ---- training ---- */
.cu-gobtns{display:flex;gap:8px}.cu-gobtns .cu-battle{flex:1}
.cu-train{all:unset;cursor:pointer;text-align:center;font-family:var(--display)!important;font-size:18px;background:#2a2d2f;color:var(--paper)!important;border-radius:8px;padding:18px 16px;box-shadow:inset 0 0 0 2px #4a4e51}
.cu-train:hover{box-shadow:inset 0 0 0 2px var(--sodium)}.cu-train:focus-visible{outline:3px solid var(--paper);outline-offset:2px}
.btrain{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);background:var(--panel);border-radius:8px;padding:10px 14px;width:min(620px,94vw);pointer-events:auto}
.btr-h{font-family:var(--display);font-size:16px;color:var(--sodium)}.btr-h span{font-family:var(--body);font-size:11px;color:var(--dim);margin-left:8px}
.btr-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--dim)}
.btr-row button{all:unset;cursor:pointer;font-size:12px;background:#232628;border-radius:5px;padding:5px 9px;color:var(--paper)}
.btr-row button.on{background:#3a2e1a;box-shadow:inset 0 0 0 1px var(--sodium)}.btr-row button.x{background:#4a2420}
.btr-log{margin-top:8px;font-size:12px;line-height:1.5;max-height:110px;overflow:hidden}.btr-log div:first-child{color:var(--paper)}.btr-log div{color:var(--dim)}.btr-log .m{font-style:italic}
@media (max-width:860px){.cu-gobtns{flex-direction:row}.cu-train{padding:12px}}
body.training #toasts{top:calc(236px + env(safe-area-inset-top,0px))}
.cu-gobtns .cu-battle{font-size:22px;padding:18px 10px;white-space:nowrap}

/* ---- district fights ---- */
#hubFight{left:10px;bottom:calc(92px + env(safe-area-inset-bottom,0px));width:min(300px,60vw);border-left:3px solid #f2c230}
#hubFight .hf-t{font-family:var(--display);color:#f2c230;font-size:14px;letter-spacing:.05em}
#hubFight .bar{height:6px;margin-top:2px}#hubFight .hf-k{font-size:10px;color:var(--dim);margin-top:6px;line-height:1.4}
body.battle #hubFight{display:none!important}


/* ---- accounts (title screen) ---- */
.acct{max-width:440px}
.ac-form{display:flex;flex-direction:column;gap:10px}
.ac-form input{font:16px var(--body);padding:12px 14px;border-radius:8px;border:1px solid #3a3e41;background:rgba(15,16,17,.85);color:var(--paper);user-select:text;-webkit-user-select:text}
.ac-form input:focus{outline:2px solid var(--sodium);border-color:transparent}
.ac-row{display:flex;gap:10px;flex-wrap:wrap}
.ac-link{all:unset;cursor:pointer;color:var(--dim);font-size:14px;text-decoration:underline;align-self:flex-start}
.ac-link:focus-visible{outline:2px solid var(--sodium)}
.ac-msg{font-size:16px;color:var(--paper);margin-bottom:10px}.ac-msg b{color:var(--sodium)}
.ac-err{font-size:14px;color:#ff8a7a;min-height:1.2em}
.tbtn:disabled{opacity:.5;cursor:default}
/* ---- title screen: everything centred ---- */
#title{justify-content:center;align-items:center;text-align:center;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(ellipse at center,rgba(15,16,17,.82) 0%,rgba(15,16,17,.62) 45%,rgba(15,16,17,.9) 100%)}
#title h1{text-align:center}
#title .tag{margin:16px auto 22px}
#title .acct{width:min(420px,100%);margin:0 auto}
#title .ac-form{align-items:stretch}
#title .ac-row{justify-content:center}
#title .ac-link{align-self:center}
#title .ac-msg{text-align:center}
#title .ac-err{text-align:center}
#title .controls{margin:28px auto 0;justify-items:center;text-align:center}
#ver{right:auto;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px))}
@media (max-height:640px){#title h1{font-size:min(11vw,86px)}#title .tag{margin:10px auto 14px;font-size:16px}#title .controls{display:none}}
@media (max-width:600px){#title .controls{grid-template-columns:1fr;gap:10px}}
@media (pointer:coarse){#title .controls{display:none}}

/* ---- phones / tablets: not supported yet ---- */
body.mobile-block #title,body.mobile-block #touch{display:none!important}
#mobileBlock{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px));background:rgba(15,16,17,.86);text-align:center}
.mb-win{max-width:380px}.mb-icon{font-size:56px}.mb-t{font-family:var(--display);font-size:30px;margin:10px 0 6px;color:var(--paper)}
#mobileBlock p{font-size:16px;line-height:1.5;color:var(--paper);margin:8px 0}#mobileBlock .mb-s{color:var(--dim);font-size:14px;margin-top:18px}
.mb-link{font-family:var(--display);color:var(--sodium);font-size:16px;word-break:break-all;margin:6px 0 16px}