/* Layout: full-bleed 3D brawl on the Titanic's deck; local HUD top-left, scoreboard top-right; menus float as cards over the live scene */
:root{
  --ink:#14213a; --paper:#fff7e8; --p1:#ff5d4a; --p2:#2f8cff; --gold:#ffc23a; --sky:#f3b77e;
  --track:#d9e1ee; --skill:#9b5de5; --muted:#56657f; --white:#ffffff; --good:#3fbf5a; --line:#06c755; --fb:#1877f2; --x:#0f1419; --shade:rgba(20,33,58,.4);
  --display:"Dela Gothic One","Kanit",system-ui,sans-serif;
  --body:"Kanit",system-ui,sans-serif;
  color-scheme:light;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;background:var(--sky);color:var(--ink);font-family:var(--body);-webkit-user-select:none;user-select:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
button,select,input{font-family:inherit;color:inherit}
:focus-visible{outline:3px solid var(--p2);outline-offset:3px}

#hud{position:fixed;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none}
#cards{display:grid;gap:8px;min-width:0}
.pcard{background:var(--paper);border:3px solid var(--ink);border-radius:14px;padding:8px 12px 7px;width:min(300px,42vw);min-width:0;box-shadow:4px 4px 0 var(--ink);display:grid;gap:5px;box-sizing:border-box}
.pcard .row{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}
.pcard{grid-template-columns:auto minmax(0,1fr);column-gap:10px;width:min(370px,48vw)}
.pcard>:not(.pface){grid-column:2}
.pcard .pface{grid-column:1;grid-row:1/span 5;align-self:center;width:clamp(38px,5.2vw,68px);aspect-ratio:1;border:3px solid var(--ink);border-radius:12px;background:var(--c);box-shadow:2px 2px 0 var(--ink);box-sizing:border-box;object-fit:cover}
.pcard.ouch .pface{background:#ff5d4a;animation:faceShake .22s linear infinite}
.pcard.ko .pface{filter:grayscale(.9) brightness(.9)}
@keyframes faceShake{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-2px,1px) rotate(-5deg)}50%{transform:translate(2px,-1px) rotate(4deg)}75%{transform:translate(-1px,-1px) rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){.pcard.ouch .pface{animation:none}}
.pname{font-family:var(--display);font-size:17px;line-height:1.1;color:var(--c);-webkit-text-stroke:.6px var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pitem{font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap}
.hp{position:relative;height:14px;background:var(--track);border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.hp div{position:absolute;top:0;bottom:0;left:0;width:100%}
.hp .lag{background:var(--white)} .hp .fill{background:var(--c)}
.stocks{display:flex;gap:4px}
.pip{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:var(--gold)}
.pip.off{background:var(--track)}
.hpnum{font-family:var(--display);font-size:13px;font-variant-numeric:tabular-nums}
.skrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;min-width:0}
.skn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skbar{flex:1;min-width:40px;height:8px;border:2px solid var(--ink);border-radius:6px;background:var(--track);overflow:hidden}
.skbar i{display:block;height:100%;background:var(--skill)}
.skbar.ready i{background:var(--gold)}
.stam{height:6px;border:2px solid var(--ink);border-radius:5px;background:var(--track);overflow:hidden}
.stam i{display:block;height:100%;width:100%;background:#4ad2ff}
.stam.low i{background:#ff8a3a}
.skillinfo{border:2px solid var(--ink);border-radius:12px;padding:8px 10px;background:var(--white);font-size:13px;line-height:1.5}
.skillinfo b{color:var(--skill)}
#hudMid{display:grid;gap:6px;justify-items:center;pointer-events:auto}
#hudBtns{display:grid;gap:6px;justify-items:center}
#hudBtns .chipbtn[hidden]{display:none}
.chipbtn{font-family:var(--display);font-size:13px;background:var(--paper);border:3px solid var(--ink);border-radius:10px;padding:5px 10px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;white-space:nowrap}
#autoBtn.on{background:var(--gold)}
#bossBar{display:grid;grid-template-columns:auto minmax(120px,32vw) auto;align-items:center;gap:8px;background:var(--paper);border:3px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);padding:5px 10px;font-family:var(--display);font-size:12px;white-space:nowrap}
#bossBar[hidden]{display:none}
#bossBar .bhp{height:12px;border:2px solid var(--ink);border-radius:7px;background:var(--track);overflow:hidden}
#bossBar .bhp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#7fb5ff,#d8342c)}
#bossBar.rage .bhp i{background:#d8342c}
#stoneBar{display:flex;gap:8px;background:var(--paper);border:3px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);padding:5px 8px}
#stoneBar .sb{display:grid;gap:2px;width:min(120px,26vw);font-family:var(--display);font-size:11px;white-space:nowrap}
#stoneBar .shp{height:9px;border:2px solid var(--ink);border-radius:6px;background:var(--track);overflow:hidden}
#stoneBar .shp i{display:block;height:100%;width:100%}
#stoneBar[hidden]{display:none}
#feed.low{top:calc(env(safe-area-inset-top,0px) + 126px)}
#board{background:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:6px 10px 8px;width:min(220px,36vw);display:grid;gap:4px;box-sizing:border-box}
#boardHead{font-family:var(--display);font-size:12px;display:flex;justify-content:space-between;gap:6px}
#brows{display:grid;gap:1px;font-size:11px;max-height:48vh;overflow:hidden}
.brow{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:6px;align-items:center}
.brow .dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink);box-sizing:border-box}
.brow .bn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.brow .bs{font-family:var(--display);font-size:10px;letter-spacing:.05em;color:var(--p1)}
.brow.me .bn{font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px}
.brow.out{opacity:.4} .brow.out .bs{color:var(--muted)}
#spec{pointer-events:auto}

#tags,#fx{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.tag{position:absolute;left:0;top:0;display:grid;justify-items:center;gap:2px;will-change:transform}
.tag .tn{font-weight:700;font-size:12px;line-height:1;color:var(--white);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;white-space:nowrap}
.tag.me .tn{color:var(--gold);font-size:13px}
.tag .tb{width:42px;height:5px;background:var(--track);border:1.5px solid var(--ink);border-radius:3px;overflow:hidden}
.tag .tb i{display:block;height:100%;background:var(--good)}
.tag .tt{font-weight:700;font-size:10px;line-height:1;color:var(--gold);-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;white-space:nowrap}
.dgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:10px 0}
.dcell{position:relative;display:grid;justify-items:center;align-content:start;gap:3px;padding:8px 3px 7px;border:2.5px solid var(--ink);border-radius:10px;background:#fff;text-align:center;min-width:0}
.dcell .dn{font-size:11px;font-weight:700;opacity:.65}
.dcell .di{font-size:24px;line-height:1.15}
.dcell .dt{font-size:10.5px;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.dcell.done{background:#e3f5dc}
.dcell.done::after{content:'✓';position:absolute;top:1px;right:5px;font-weight:900;color:#2e9a3a}
.dcell.today{background:var(--gold);box-shadow:0 0 0 3px var(--paper),0 0 0 5.5px var(--ink);animation:dpulse .9s ease-in-out infinite alternate}
@keyframes dpulse{to{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.dcell.today{animation:none}}
@media (max-width:520px){.dgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
#daily .card{align-content:start}
#dailyGot{font-weight:700;text-align:center;min-height:1.2em;margin:0}
#dailyGot:empty{display:none}
#dailyBtn{position:relative}
#dailyBtn .rdot{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:#ff3b30;border:2.5px solid var(--ink)}
.chips button.locked{opacity:.55}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;max-width:calc(100% - 32px);padding:10px 16px;border:2.5px solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:3px 3px 0 var(--ink);font-weight:700;pointer-events:none;transition:opacity .25s}
.pop{position:absolute;left:0;top:0;font-family:var(--display);font-size:22px;color:var(--white);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;white-space:nowrap;will-change:transform}
.pop.combo{color:var(--gold);font-size:18px}
.pop.heal{color:var(--good)}
.pop.th{font-family:var(--body);font-weight:700;font-size:18px}
#feed{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 74px);display:grid;gap:4px;justify-items:center;pointer-events:none;max-width:calc(100% - 32px)}
.fi{background:var(--ink);color:var(--paper);font-size:13px;font-weight:500;padding:3px 12px;border-radius:999px;animation:fi 4s both;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@keyframes fi{0%{opacity:0;transform:translateY(-6px)}8%,80%{opacity:1;transform:none}100%{opacity:0}}

#banner{position:fixed;left:0;right:0;top:38%;text-align:center;pointer-events:none;font-family:var(--display);font-size:clamp(52px,13vw,128px);line-height:1;color:var(--gold);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--ink);opacity:0}
#banner.show{animation:pop .9s ease-out both}
#banner.red{color:var(--p1)}
@keyframes pop{0%{transform:scale(2.2);opacity:0}18%{transform:scale(.92);opacity:1}30%{transform:scale(1)}80%{opacity:1}100%{transform:scale(1.05);opacity:0}}

.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:var(--shade);overflow-y:auto;box-sizing:border-box}
.card{background:var(--paper);border:3px solid var(--ink);border-radius:18px;box-shadow:8px 8px 0 var(--ink);padding:22px 22px 20px;width:100%;max-width:600px;display:grid;gap:16px;box-sizing:border-box}
.logo{font-family:var(--display);font-size:clamp(40px,10vw,64px);line-height:.95;margin:0;color:var(--white);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink);letter-spacing:.01em}
.logo span{color:var(--gold)}
.logo.sm{font-size:clamp(32px,8vw,44px)}
.sub{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{font-family:var(--display);font-size:16px;padding:12px 18px;border:3px solid var(--ink);border-radius:12px;background:var(--gold);box-shadow:4px 4px 0 var(--ink);cursor:pointer;flex:1 1 170px}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:4px 4px 0 var(--ink)}
.btn.red{background:var(--p1);color:var(--white)}
.btn.blue{background:var(--p2);color:var(--white)}
.btn.plain{background:var(--paper)}
.btn.quick{display:grid;gap:2px;justify-items:center;width:100%;margin-top:12px;padding:16px 18px;font-size:24px;background:var(--p1);color:var(--white);box-shadow:5px 5px 0 var(--ink);animation:qpulse 1.6s ease-in-out infinite}
.btn.quick small{font-family:var(--body);font-size:13px;font-weight:500;opacity:.95}
@keyframes qpulse{50%{transform:scale(1.025)}}
.btn.tutb{width:100%;margin-top:10px;flex:none}
#tutBox{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 128px);transform:translateX(-50%);width:min(520px,calc(100vw - 24px));z-index:6;box-sizing:border-box;
  background:var(--paper);border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);padding:10px 14px;display:grid;gap:6px}
#tutBox .th{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700;font-size:13px}
#tutBox .tdots{display:flex;gap:4px}
#tutBox .tdots i{width:14px;height:6px;background:var(--track);border:1.5px solid var(--ink)}
#tutBox .tdots i.on{background:var(--good)} #tutBox .tdots i.cur{background:var(--gold)}
#tutBox .tt{font-family:var(--display);font-size:18px;line-height:1.3}
#tutBox .tw{font-size:13px;opacity:.85}
#tutBox .tskip{font:inherit;font-size:12px;font-weight:700;padding:3px 10px;border:2px solid var(--ink);border-radius:8px;background:var(--white);cursor:pointer}
#tutBox .tbtns{display:flex;gap:8px;flex-wrap:wrap} #tutBox .tbtns .btn{flex:1 1 150px;font-size:15px;padding:10px 12px}
.tut-hl{animation:tuthl .8s ease-in-out infinite;outline:4px solid var(--gold)!important;outline-offset:3px}
@keyframes tuthl{50%{outline-color:#fff;transform:scale(1.06)}}
@media (max-height:480px){#tutBox{padding:6px 10px;gap:3px} #tutBox .tt{font-size:15px}}
@media (prefers-reduced-motion:reduce){.btn.quick{animation:none}}
details.setd{border:3px solid var(--ink);border-radius:12px;padding:0 12px;background:var(--white)}
details.setd>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:10px 0;font-weight:700}
details.setd>summary::-webkit-details-marker{display:none}
details.setd>summary::before{content:'⚙';font-size:18px}
details.setd>summary::after{content:'▾';margin-left:auto;transition:transform .15s}
details.setd[open]>summary::after{transform:rotate(180deg)}
details.setd>summary small{font-weight:500;font-size:12px;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
details.setd[open]>.settings{padding-bottom:12px}
.tag .marr{width:20px;height:16px;background:var(--gold);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 2px 0 var(--ink));animation:mbob .8s ease-in-out infinite;margin-bottom:1px}
@keyframes mbob{50%{transform:translateY(-5px)}}
#edgeWarn{position:fixed;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 70px 26px rgba(255,40,40,.85);z-index:4}
#edgeWarn b{position:absolute;left:50%;top:27%;transform:translateX(-50%);font-family:var(--display);font-size:20px;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;white-space:nowrap}
#offs{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#offs i{position:absolute;left:0;top:0;width:24px;height:24px;margin:-12px 0 0 -12px;clip-path:polygon(0 8%,100% 50%,0 92%,24% 50%);filter:drop-shadow(0 0 1.5px #1b2333) drop-shadow(0 0 1px #1b2333);display:none}
.btn.line,.btn.fb,.btn.x{color:var(--white);text-decoration:none;text-align:center;display:inline-flex;align-items:center;justify-content:center}
.btn.line{background:var(--line)} .btn.fb{background:var(--fb)} .btn.x{background:var(--x)}
.shares{display:flex;flex-wrap:wrap;gap:8px}
.shares .btn{flex:1 1 90px;font-size:14px;padding:10px 12px}
.sharebox{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.sharecol{flex:1 1 180px;display:grid;gap:10px;min-width:0}
.qr{width:150px;height:150px;flex:none;background:var(--white);border:3px solid var(--ink);border-radius:12px;padding:6px;box-sizing:border-box;display:grid;place-items:center;font-size:12px;color:var(--muted);text-align:center}
.qr img{width:100%;height:100%;display:block;image-rendering:pixelated}
.wide{flex-basis:100%}
.settings{display:grid;gap:10px}
.seg{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.seg .lbl{font-weight:500;margin-right:4px;min-width:92px}
.seg input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.seg input[type=radio]+label{padding:4px 12px;border:2px solid var(--ink);border-radius:999px;cursor:pointer;font-weight:500;font-size:14px}
.seg input[type=radio]:checked+label{background:var(--ink);color:var(--paper)}
.seg input[type=radio]:focus-visible+label{outline:3px solid var(--p2);outline-offset:2px}
.seg input[type=range]{flex:1 1 140px;accent-color:var(--ink);min-width:0}
.seg output{font-family:var(--display);min-width:28px;text-align:right;font-variant-numeric:tabular-nums}
.pick{display:flex;flex-direction:column;gap:6px}
.pick .lbl{font-weight:500}
.pick .lbl small{font-weight:400;opacity:.75}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:9px}
.pickgrid.modes{grid-template-columns:repeat(3,minmax(0,1fr))}
.pickgrid input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.pickcard{position:relative;display:block;aspect-ratio:16/10;border:3px solid var(--ink);border-radius:12px;overflow:hidden;cursor:pointer;background:#9fb8d8 center/cover no-repeat;box-shadow:0 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.pickgrid.modes .pickcard{aspect-ratio:4/3}
.pickcard:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.pickcard svg{position:absolute;inset:0;width:100%;height:100%}
.pickcard .nm{position:absolute;left:0;right:0;bottom:0;padding:16px 7px 5px;font-weight:700;font-size:13px;line-height:1.25;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85);background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7))}
.pickcard .nm small{display:block;font-weight:500;font-size:11px;opacity:.9}
.pickgrid input:checked+.pickcard{border-color:var(--gold);box-shadow:0 0 0 3px var(--ink),0 5px 0 3px var(--ink);transform:translateY(-2px)}
.pickgrid input:checked+.pickcard::after{content:'✓';position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:var(--gold);border:2px solid var(--ink);display:grid;place-items:center;font-weight:900;font-size:13px;color:var(--ink)}
.pickgrid input:focus-visible+.pickcard{outline:3px solid var(--p2);outline-offset:3px}
.pickgrid.off .pickcard{filter:grayscale(.85) brightness(.8)}
.pickgrid input:disabled+.pickcard{cursor:default}
.pickgrid input:disabled:not(:checked)+.pickcard{opacity:.55}
.pickgrid input:disabled+.pickcard:hover{transform:none;box-shadow:0 3px 0 var(--ink)}
@media (max-width:480px){.pickgrid.modes .pickcard{aspect-ratio:1/1}.pickcard .nm{font-size:12px;padding-top:10px}.pickcard .nm small{display:none}.pickgrid input:checked+.pickcard::after{width:18px;height:18px;font-size:11px}}
.seg select{font-size:14px;font-weight:500;border:2px solid var(--ink);border-radius:8px;padding:3px 8px;background:var(--white)}
details.keys-d summary{cursor:pointer;font-weight:700}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:10px}
.keys h3{margin:0 0 6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.keys .k1 h3{color:var(--p1)} .keys .k2 h3{color:var(--p2)}
.keys dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:14px;align-items:center}
.keys dd{margin:0;color:var(--muted)}
kbd{font-family:var(--body);font-weight:700;font-size:12px;border:2px solid var(--ink);border-bottom-width:4px;border-radius:6px;padding:0 6px;background:var(--white);white-space:nowrap}
.note{font-size:13px;color:var(--muted);margin:0;line-height:1.5}
.result{font-family:var(--display);font-size:clamp(34px,9vw,54px);margin:0;line-height:1;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)}
.rtable{overflow-x:auto;max-height:46vh;overflow-y:auto}
.rtable table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.rtable th{text-align:left;font-size:12px;letter-spacing:.06em;color:var(--muted);font-weight:500;padding:4px 6px;border-bottom:2px solid var(--ink)}
.rtable td{padding:5px 6px;border-bottom:1px solid var(--track)}
.rtable td.n{text-align:right} .rtable th.n{text-align:right}
.rtable tr.me td{background:#fff0c4}
.rank{font-family:var(--display)}

.opt h4{margin:0 0 6px;font-size:13px;letter-spacing:.06em;font-weight:700}
.rlist,.slots{display:grid;gap:6px}
.rrow,.srow{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:12px;padding:6px 8px 6px 12px;min-width:0}
.rrow .rn,.srow .sn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.rrow .rm{font-size:13px;color:var(--muted);white-space:nowrap}
.chatlog{max-height:150px;min-height:60px;overflow-y:auto;border:2px solid var(--ink);border-radius:10px;padding:6px 10px;background:var(--white);font-size:13px;line-height:1.45;display:grid;gap:2px;align-content:start}
.chatlog b{color:var(--p2);margin-right:6px}
.chatlog .me b{color:var(--p1)}
.rrow button{font-family:var(--display);font-size:13px;padding:5px 12px;border:2px solid var(--ink);border-radius:8px;background:var(--gold);cursor:pointer}
.srow{padding:4px 10px}
.srow .dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);flex:none}
.badge{font-size:11px;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:0 7px;white-space:nowrap}
.badge.me{background:var(--gold)} .badge.bot{background:var(--track)} .badge.host{background:var(--ink);color:var(--paper)}
.slots{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));max-height:34vh;overflow-y:auto}
.srow{flex-wrap:wrap;row-gap:3px;column-gap:6px}
.srow .sn{flex:1 1 70px;min-width:70px}
.srow .badge{flex:none}
.teamrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.teamrow button.red[aria-pressed="true"]{background:#ff5d4a;border-color:#ff5d4a;color:#fff}
.teamrow button.blue[aria-pressed="true"]{background:#2f8cff;border-color:#2f8cff;color:#fff}
.teamrow button.green[aria-pressed="true"]{background:#3fbf5a;border-color:#3fbf5a;color:#fff}
.teamrow button.yellow[aria-pressed="true"]{background:#ffc23a;border-color:#ffc23a;color:#14213a}
.joinrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.joinrow label{font-weight:500}
.tin{font-size:16px;padding:7px 10px;border:2px solid var(--ink);border-radius:10px;background:var(--white);color:var(--ink);min-width:0;flex:1 1 120px;box-sizing:border-box}
.rhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.rhead b{font-family:var(--display);font-size:24px;letter-spacing:.08em}
.status{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500}
.status::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--muted)}
.status.on::before{background:var(--good)} .status.off::before{background:var(--p1)}

#dbg{position:fixed;left:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);background:var(--paper);border:3px solid var(--ink);border-radius:12px;padding:8px 12px;font-size:13px;line-height:1.5;box-shadow:3px 3px 0 var(--ink);max-width:calc(100% - 32px);font-variant-numeric:tabular-nums;box-sizing:border-box}
#dbg b{font-family:var(--display);font-weight:400}
.fbar{display:flex;height:10px;margin-top:4px;border:2px solid var(--ink);border-radius:4px;overflow:hidden}
.fbar i{display:block;height:100%}
.fbar .su{background:var(--gold)} .fbar .ac{background:var(--p1)} .fbar .rc{background:var(--p2)}

#c{touch-action:none}
html,body{overscroll-behavior:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
/* No double-tap zoom anywhere (scrolling still works); the game surfaces take no browser gestures at all */
body *{touch-action:manipulation}
#touch,#touch *,#hud{touch-action:none;-webkit-user-select:none;user-select:none}
/* iOS zooms the page when an input under 16px gets focus */
@media (pointer:coarse){input,select,textarea{font-size:16px}}
#touch{position:fixed;inset:0;pointer-events:none}
#joyZone{position:absolute;left:0;bottom:0;width:50%;height:62%;pointer-events:auto;touch-action:none}
#joy{position:absolute;left:95px;top:0;width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;border:3px solid var(--ink);background:rgba(255,247,232,.4);pointer-events:none;opacity:.75;transition:opacity .15s}
#joy.act{opacity:1;background:rgba(255,247,232,.6)}
#knob{position:absolute;left:40px;top:40px;width:44px;height:44px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);box-sizing:border-box}
#tbtns{position:absolute;right:calc(env(safe-area-inset-right,0px) + 14px);bottom:calc(env(safe-area-inset-bottom,0px) + 14px);width:262px;height:206px;pointer-events:none}
#tbtns button{position:absolute;pointer-events:auto;touch-action:none;border-radius:50%;border:3px solid var(--ink);background:var(--paper);font-weight:700;font-size:15px;box-shadow:3px 3px 0 var(--ink);-webkit-user-select:none;user-select:none;padding:0}
#tbtns button[data-k="atk"]{right:0;bottom:0;width:100px;height:100px;font-size:19px;background:var(--p1);color:var(--white)}
#tbtns button[data-k="jump"]{right:110px;bottom:4px;width:76px;height:76px;background:var(--gold)}
#tbtns button[data-k="guard"]{right:4px;bottom:110px;width:76px;height:76px;background:var(--p2);color:var(--white)}
#tbtns button[data-k="grab"]{right:104px;bottom:104px;width:66px;height:66px;font-size:14px}
#tbtns button[data-k="sprint"]{right:186px;bottom:4px;width:66px;height:66px;font-size:14px;background:#7fe3ff}
#tbtns button[data-k="skill"]{right:186px;bottom:96px;width:72px;height:72px;font-size:14px;background:var(--skill);color:var(--white)}
#tbtns button[data-k="lock"]{right:186px;bottom:174px;width:72px;height:32px;border-radius:16px;font-size:13px;background:var(--ink);color:var(--paper)}
#tbtns button[data-k="lock"].on2{background:var(--gold);color:var(--ink)}
#tbtns button.cd{opacity:.5}
#tbtns button.on{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);filter:brightness(.9)}
#rotHint{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 120px);transform:translateX(-50%);background:var(--ink);color:var(--paper);font-size:13px;font-weight:500;padding:4px 12px;border-radius:999px;white-space:nowrap;display:none;animation:fi 6s both}
@media (orientation:portrait){ #rotHint{display:block} }
/* Phones held sideways: everything shrinks and moves to the edges so the arena stays visible.
   The fighter list collapses to its header; tap it to open. */
@media (max-height:520px){
  #hud{padding:calc(env(safe-area-inset-top,0px) + 6px) calc(env(safe-area-inset-right,0px) + 8px) 0 calc(env(safe-area-inset-left,0px) + 8px);gap:8px}
  #cards{gap:4px}
  .pcard{width:min(228px,31vw);padding:4px 8px;border-width:2px;border-radius:10px;box-shadow:2px 2px 0 var(--ink);gap:3px}
  .pname{font-size:13px} .pitem{font-size:10px} .hp{height:9px;border-width:1.5px} .pip{width:9px;height:9px;border-width:1.5px} .hpnum{font-size:11px}
  .skrow{font-size:10px;gap:5px} .skbar{height:6px;border-width:1.5px;min-width:24px}
  #hudMid{gap:4px}
  #hudBtns{display:flex;gap:4px;flex-wrap:nowrap}
  .chipbtn{font-size:10px;padding:3px 6px;border-width:2px;border-radius:8px;box-shadow:2px 2px 0 var(--ink)}
  #stoneBar{padding:3px 6px;gap:6px;border-width:2px;box-shadow:2px 2px 0 var(--ink)} #stoneBar .sb{width:min(96px,18vw);font-size:9px} #stoneBar .shp{height:6px}
  #bossBar{padding:3px 8px;gap:6px;font-size:11px;border-width:2px;box-shadow:2px 2px 0 var(--ink);grid-template-columns:auto minmax(90px,24vw) auto} #bossBar .bhp{height:8px}
  #board{width:auto;min-width:110px;padding:3px 8px;border-width:2px;border-radius:10px;box-shadow:2px 2px 0 var(--ink);pointer-events:auto;cursor:pointer}
  #boardHead{font-size:11px} #boardHead::after{content:'▾';margin-left:2px}
  #brows{display:none} #board.open #brows{display:grid;max-height:62vh} #board.open #boardHead::after{content:'▴'}
  #feed{top:calc(env(safe-area-inset-top,0px) + 58px)} #feed.low{top:calc(env(safe-area-inset-top,0px) + 82px)}
  .fi{font-size:11px;padding:2px 9px}
  #banner{font-size:clamp(34px,9vw,72px);-webkit-text-stroke:3px var(--ink);text-shadow:4px 4px 0 var(--ink)}
  .pop{font-size:16px;-webkit-text-stroke:2.5px var(--ink)} .pop.combo,.pop.th{font-size:13px}
  .tag .tn{font-size:10px;-webkit-text-stroke:2.5px var(--ink)} .tag.me .tn{font-size:11px} .tag .tb{width:34px;height:4px}
  #tbtns{transform:scale(.8);transform-origin:right bottom} #joy{transform:scale(.8)}
}
@media (max-height:380px){ #tbtns{transform:scale(.7)} #joy{transform:scale(.7)} .pcard{width:min(210px,29vw)} }

#custom{position:fixed;inset:0;display:flex;justify-content:flex-end;align-items:stretch;padding:16px;pointer-events:none;box-sizing:border-box}
.cpanel{pointer-events:auto;width:min(380px,100%);max-height:100%;overflow-y:auto;background:var(--paper);border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);padding:16px;display:grid;gap:14px;align-content:start;box-sizing:border-box}
#copts{display:grid;gap:14px}
.ctabs{display:flex;gap:6px}
.lvchip{display:flex;align-items:center;gap:10px;margin-top:10px;font-weight:700;font-size:14px;flex-wrap:wrap}
.lvchip .lv{font-family:var(--display);background:var(--ink);color:var(--gold);border-radius:8px;padding:2px 10px}
.acct{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.acct .note{flex:1 1 220px;min-width:0}
.acct .btn{flex:0 0 auto;font-size:13px;padding:7px 12px}
.btn.google{background:var(--white);color:var(--ink)}
.xpbar{display:block;flex:1 1 120px;min-width:100px;height:10px;border:2px solid var(--ink);border-radius:6px;background:var(--track);overflow:hidden}
.xpbar i{display:block;height:100%;width:0;background:var(--gold);transition:width .8s ease-out}
.resxp{display:grid;gap:6px}
.resxp .row{display:flex;justify-content:space-between;gap:10px;font-weight:700;flex-wrap:wrap}
.ctabs .tab{flex:1;font-family:var(--display);font-size:13px;padding:8px;border:3px solid var(--ink);border-radius:10px;background:var(--paper);cursor:pointer}
.ctabs .tab[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
#custom.single .ctabs{display:none}
.cfilter{margin-bottom:8px;gap:5px;min-width:0}
#copts,#copts .opt,.cpanel>*{min-width:0}
.cfilter button{font-size:12.5px;padding:3px 9px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:7px}
.ccard{display:grid;justify-items:center;align-content:start;gap:1px;padding:0 0 4px;border:2px solid var(--ink);border-radius:10px;background:var(--white);cursor:pointer;overflow:hidden;font:inherit;color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.ccard .cimg{width:100%;aspect-ratio:1;background:#fff4dc center/cover no-repeat;border-bottom:2px solid var(--ink)}
.ccard .cn{font-size:11.5px;font-weight:700;line-height:1.15;padding:3px 3px 0;text-align:center}
.ccard .cs{font-size:10px;color:#d39a00;letter-spacing:1px;line-height:1}
.ccard[aria-pressed="true"]{background:var(--gold);box-shadow:0 0 0 3px var(--ink)}
.ccard[hidden]{display:none}
.crole{margin-top:4px;font-size:12px;font-weight:700;opacity:.8}
@media (max-width:480px){.chips.cfilter{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.cfilter::-webkit-scrollbar{display:none}.cfilter button{flex:none}.cgrid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:5px}.ccard .cn{font-size:10.5px}}
.sw{display:flex;flex-wrap:wrap;gap:8px}
.sw button{width:32px;height:32px;border-radius:50%;border:2px solid var(--ink);cursor:pointer;padding:0}
.sw button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{padding:4px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);font-weight:500;font-size:14px;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

@media (max-width:700px){ #custom{align-items:flex-end} .cpanel{max-height:58%;width:100%} }
@media (max-width:600px){
  #brows{display:none} #board{width:auto}
  .pname{font-size:14px} .pitem{font-size:11px} .card{padding:18px 16px} .chipbtn{font-size:11px;padding:4px 7px}
  .seg .lbl{min-width:0}
}
/* Phones held upright: the HUD becomes two rows (your card + the fighter count, then the buttons in one line),
   and the touch buttons pack into a narrower block so they stay clear of the stick */
@media (orientation:portrait) and (max-width:600px){
  #hud{flex-wrap:wrap;gap:6px 8px;padding:calc(env(safe-area-inset-top,0px) + 8px) 10px 0}
  #cards{flex:1 1 0;order:1;gap:4px}
  .pcard{width:auto;max-width:280px;padding:5px 9px;gap:3px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}
  .pname{font-size:13px} .hp{height:10px} .pip{width:10px;height:10px}
  #board{order:2;min-width:0;padding:4px 8px;border-width:2px;box-shadow:2px 2px 0 var(--ink);pointer-events:auto;cursor:pointer}
  #boardHead{white-space:nowrap;font-size:11px} #boardHead::after{content:'▾';margin-left:2px}
  #board.open #brows{display:grid;max-height:50vh;overflow-y:auto} #board.open #boardHead::after{content:'▴'}
  #hudMid{order:3;flex:1 0 100%;gap:4px}
  #hudBtns{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
  .chipbtn{font-size:11px;padding:3px 7px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}
  #tbtns{width:190px;height:300px;transform:scale(.9);transform-origin:right bottom}
  #tbtns button[data-k="sprint"]{right:104px;bottom:214px;width:62px;height:62px}
  #tbtns button[data-k="skill"]{right:4px;bottom:192px}
  #tbtns button[data-k="lock"]{right:104px;bottom:178px;width:66px}
  body.tutOn #rotHint{display:none}
}
@media (prefers-reduced-motion:reduce){ #banner.show{animation:fade 1s both} @keyframes fade{0%,100%{opacity:0}15%,80%{opacity:1}} .fi{animation:none} }

/* ---------- Sky Brawl: blocky UI ---------- */
:root{--sky:#7fb7e8;--pixel:"Silkscreen","Dela Gothic One","Kanit",system-ui,sans-serif}
*,*::before,*::after{border-radius:0!important}
.logo.blox{font-family:var(--pixel);font-weight:700;font-size:clamp(28px,7.6vw,50px);line-height:1;margin-bottom:12px;letter-spacing:.02em;color:#c9c9c9;-webkit-text-stroke:0;
  text-shadow:0 3px 0 #8a8a8a,0 6px 0 #5f5f5f,3px 9px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),2px 2px 0 var(--ink);display:flex;flex-wrap:wrap;gap:0 .32em}
.logo.blox span{color:#7ccf3f;text-shadow:0 3px 0 #4f8f26,0 6px 0 #33641a,3px 9px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),2px 2px 0 var(--ink)}
.card{background-image:linear-gradient(rgba(20,33,58,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(20,33,58,.035) 1px,transparent 1px);background-size:8px 8px}

/* Emotes */
#hudBtns{position:relative}
#emoPanel{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:5;display:grid;grid-template-columns:repeat(4,auto);gap:6px;padding:8px;background:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink)}
#emoPanel[hidden]{display:none}
#emoPanel .emo{display:grid;justify-items:center;gap:2px;min-width:58px;padding:6px 4px;border:2px solid var(--ink);border-radius:10px;background:#fff;cursor:pointer;font-family:var(--body)}
#emoPanel .emo b{font-size:26px;line-height:1;font-family:var(--display)}
#emoPanel .emo small{font-size:11px;font-weight:700;color:var(--muted)}
#emoPanel .emo:active{transform:translateY(2px)}
.tag .temo{display:none;position:relative;margin-bottom:6px;padding:3px 7px;font-size:30px;line-height:1.05;font-family:var(--display);color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:12px;box-shadow:2px 2px 0 var(--ink)}
.tag .temo::after{content:'';position:absolute;left:50%;bottom:-11px;margin-left:-6px;border:6px solid transparent;border-top-color:var(--ink)}
.tag .temo.word{font-size:19px;padding:6px 9px}
.tag .temo.on{display:block;animation:emoPop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes emoPop{from{transform:scale(.2) translateY(12px);opacity:0}to{transform:none;opacity:1}}
.pcard.joy .pface{background:var(--gold)}
@media (prefers-reduced-motion:reduce){.tag .temo.on{animation:none}}
/* Computer (mouse) screens: the HUD chips sit in one row along the bottom instead of a column in the middle of the top */
@media (pointer:fine) and (min-width:601px) and (min-height:521px){
  #hudBtns{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);transform:translateX(-50%);display:flex;flex-wrap:nowrap;gap:8px;pointer-events:auto}
  #hudBtns .chipbtn{font-size:12px;padding:5px 10px}
  #emoPanel{top:auto;bottom:calc(100% + 10px)}
}

/* In-match chat: comments fly across the upper half (Niconico style) */
#nico{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.nico{position:absolute;left:0;white-space:nowrap;font-family:var(--body);font-weight:700;font-size:22px;line-height:1.1;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;will-change:transform}
.nico .nn{font-size:13px;margin-right:6px;-webkit-text-stroke:3px var(--ink);opacity:.95}
.nico.mine{color:var(--gold)}
#mChatBar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 64px);z-index:7;display:flex;gap:6px;align-items:center;width:min(520px,calc(100vw - 24px));padding:6px;background:var(--paper);border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);box-sizing:border-box}
#mChatBar[hidden]{display:none}
#mChatBar input{flex:1 1 auto;min-width:0;font:500 16px var(--body);padding:6px 8px;border:2px solid var(--ink);border-radius:8px}
@media (max-height:520px){ .nico{font-size:16px;-webkit-text-stroke:3px var(--ink)} .nico .nn{font-size:11px} #mChatBar{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 44px)} }

/* Copyright & credits in the menu */
details.legal p{margin:8px 0 0;font-size:13px;line-height:1.5}
details.legal a{color:inherit;text-decoration:underline}
#menu .copy{margin:10px 0 0;font-size:12px;opacity:.7;text-align:center}

/* Camera turning chips */
#hudBtns .rot{min-width:38px;font-size:18px;line-height:1;touch-action:none;user-select:none;-webkit-user-select:none}

/* Daily quests */
.qlist{display:grid;gap:8px;margin:10px 0}
.qrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 10px;border:2.5px solid var(--ink);border-radius:12px;background:#fff}
.qrow.done{background:#fff6d6}
.qrow.got{background:#e3f5dc}
.qrow .qi{font-size:26px;line-height:1}
.qrow .qm{display:grid;gap:3px;min-width:0}
.qrow .qt{font-weight:700;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.qrow .qx{font-size:12px;opacity:.7}
.qrow .xpbar{display:block;height:8px}
.qrow .qb{padding:8px 10px;font-size:13px;white-space:nowrap;min-width:0}
.qrow .qb:disabled{opacity:.6;cursor:default}

/* Highlight replay */
.hlbtns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hlbtns .btn{flex:1 1 140px}
#rpUi{position:fixed;inset:0;pointer-events:none;z-index:8}
#rpUi[hidden]{display:none}
body.replaying::before,body.replaying::after{content:'';position:fixed;left:0;right:0;height:9vh;background:#000;z-index:7;pointer-events:none}
body.replaying::before{top:0}
body.replaying::after{bottom:0}
#rpUi .rptop{position:absolute;top:0;left:0;right:0;height:9vh;display:flex;align-items:center;gap:14px;padding:0 16px;color:#ffc23a;font:700 clamp(14px,2.4vh,22px) var(--body)}
#rpUi .rptop button{margin-left:auto;pointer-events:auto}
#rpUi #rpRec{color:#ff5d4a;animation:dpulse .8s ease-in-out infinite alternate}
#rpUi .rpcap{position:absolute;bottom:0;left:0;right:0;height:9vh;display:flex;align-items:center;justify-content:center;color:#fff;font:700 clamp(15px,2.8vh,26px) var(--body);text-align:center;padding:0 12px}

/* Zombie mode HUD */
#zbBar{background:var(--paper);border:3px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);padding:5px 12px;font:700 14px var(--body);white-space:nowrap}
#zbBar[hidden]{display:none}
#zbBar.low{background:#ffe0dc;animation:dpulse .6s ease-in-out infinite alternate}

/* Poison damage numbers */
.pop.poison{color:#7be36a;font-size:14px}

/* Coins + shop (js/shop.js) */
.coinchip{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 12px;border:2.5px solid var(--ink);border-radius:999px;background:var(--gold);box-shadow:2px 2px 0 var(--ink);font:inherit;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer}
.coinchip .cv{font-family:var(--display)}
.coinchip .cb{font-size:11px;font-weight:700;opacity:.8}
.coinchip .cb:empty{display:none}
.coinchip[hidden],#shopBtn[hidden]{display:none}
.coinbar{margin:0;font-family:var(--display);font-size:20px;text-align:center}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));grid-auto-rows:max-content;gap:8px;max-height:min(52vh,480px);overflow-y:auto;padding:2px 4px 4px 2px}
.scard{display:grid;justify-items:center;align-content:start;gap:3px;padding:0 0 7px;border:2px solid var(--ink);border-radius:10px;background:#fff;overflow:hidden;box-shadow:2px 2px 0 var(--ink);min-width:0}
.scard.owned{background:#e3f5dc}
.scard .cimg{width:100%;aspect-ratio:1;background:#fff4dc center/cover no-repeat;border-bottom:2px solid var(--ink)}
.scard .sicon{font-size:38px;line-height:1;padding:12px 0 4px}
.scard .sn{font-size:13px;font-weight:700;line-height:1.2;padding:3px 5px 0;text-align:center;overflow-wrap:anywhere}
.scard .ss{font-size:11px;opacity:.7;text-align:center;padding:0 5px;line-height:1.25}
.btn.sb{flex:none;font-size:13px;padding:6px 10px;box-shadow:2px 2px 0 var(--ink);border-width:2px;border-radius:9px}
.btn.sb.poor{background:#e6e1d6;color:#6d6a63}
.btn.sb.ask{background:#ff7a59;color:#fff}
.btn.sb:disabled{opacity:.6;cursor:default}
#shopGot{font-weight:700;text-align:center;min-height:1.2em;margin:0}
#shopGot:empty{display:none}
.ccard{position:relative}
.ccard .cprice{position:absolute;top:3px;left:3px;right:3px;font-size:10px;font-weight:700;line-height:1.2;text-align:center;background:var(--ink);color:var(--gold);border-radius:6px;padding:1px 2px}
.ccard .cprice:empty{display:none}
.ccard.locked .cimg{filter:grayscale(.75) brightness(.95)}
.ccard.preview{outline:3px dashed #ff7a59;outline-offset:1px}
.cbuy{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:2px dashed var(--ink);font-weight:700}
.cbuy span{flex:1 1 180px}
#resCoin{font-family:var(--display);color:#b07800}
#resCoin:empty{display:none}
@media (max-width:480px){.sgrid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}.scard .sn{font-size:12px}}
#zoneBar{background:#f3e6ff;border:3px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);padding:5px 12px;font:700 14px var(--body);white-space:nowrap}
#zoneBar[hidden]{display:none}
#zoneBar.low{background:#e3c2ff;animation:dpulse .6s ease-in-out infinite alternate}
#zoneWarn{position:fixed;inset:0;pointer-events:none;z-index:4;box-shadow:inset 0 0 90px 30px rgba(160,60,255,.55);display:grid;place-items:end center;padding-bottom:22vh}
#zoneWarn[hidden]{display:none}
#zoneWarn b{font:700 18px var(--display);color:#fff;background:#7a2fc0;border:3px solid var(--ink);border-radius:10px;padding:4px 12px;animation:dpulse .5s ease-in-out infinite alternate}
/* three-lane mode (moba.js) */
#mobaBar{display:flex;align-items:center;gap:8px;background:#fff7dc;border:3px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);padding:4px 10px;font:700 13px var(--body);white-space:nowrap}
#mobaBar[hidden],#mobaMap[hidden]{display:none}
#mobaBar b{font-family:var(--display);color:#b5651d}
#mobaBar .mbxp{width:70px;height:9px;border:2px solid var(--ink);border-radius:6px;background:#e6dcc0;overflow:hidden}
#mobaBar .mbxp i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd23a,#ff9f1c);transition:width .3s}
#mobaMap{width:180px;height:102px;border:3px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);image-rendering:pixelated}
@media (max-width:700px){ #mobaMap{width:132px;height:75px} #mobaBar{font-size:11px;padding:3px 7px} #mobaBar .mbxp{width:46px} }
/* ultimates (ultimate.js) */
.ultrow{display:flex;align-items:center;gap:6px;margin-top:3px}
.ultrow .uln{font:700 11px var(--body);white-space:nowrap;color:var(--muted);max-width:52%;overflow:hidden;text-overflow:ellipsis}
.ultbar{flex:1;min-width:40px;height:8px;border:2px solid var(--ink);border-radius:6px;background:var(--track);overflow:hidden}
.ultbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff9f1c,#ff4a6a);transition:width .2s}
.ultrow.full .uln{color:#d6336c}
.ultrow.full .ultbar i{background:linear-gradient(90deg,#ffd23a,#ff4a6a,#b04dff);animation:ultglow .5s ease-in-out infinite alternate}
@keyframes ultglow{from{filter:brightness(1)}to{filter:brightness(1.5)}}
#tbtns button[data-k="ult"]{right:96px;bottom:178px;width:84px;height:34px;border-radius:17px;font-size:12px;background:linear-gradient(90deg,#ff9f1c var(--p,0%),var(--paper) var(--p,0%));color:var(--ink)}
#tbtns button[data-k="ult"].full{background:linear-gradient(90deg,#ffd23a,#ff4a6a,#b04dff);color:var(--white);animation:ultglow .45s ease-in-out infinite alternate}
#ultCut{position:fixed;inset:0;pointer-events:none;z-index:40;display:grid;align-items:center;overflow:hidden}
#ultCut[hidden]{display:none}
#ultCut .ucband{display:flex;align-items:center;gap:14px;height:118px;padding:0 6vw;background:linear-gradient(90deg,transparent,var(--uc,#ffb03a) 18%,var(--uc,#ffb03a) 82%,transparent);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);transform:translateX(-110%) skewY(-4deg)}
#ultCut.go .ucband{animation:ucin 1.25s cubic-bezier(.2,.9,.2,1) forwards}
#ultCut img{width:104px;height:104px;image-rendering:pixelated;filter:drop-shadow(4px 4px 0 var(--ink))}
#ultCut .uct{display:grid;line-height:1.1}
#ultCut small{font:700 16px var(--body);color:var(--white);-webkit-text-stroke:3px var(--ink);paint-order:stroke}
#ultCut b{font:900 clamp(26px,6vw,54px) var(--display);color:var(--white);-webkit-text-stroke:5px var(--ink);paint-order:stroke;letter-spacing:.02em}
@keyframes ucin{0%{transform:translateX(-110%) skewY(-4deg)}18%{transform:translateX(0) skewY(-4deg)}80%{transform:translateX(3%) skewY(-4deg);opacity:1}100%{transform:translateX(110%) skewY(-4deg);opacity:0}}
@media (max-width:700px){ #ultCut .ucband{height:84px} #ultCut img{width:72px;height:72px} }
@media (orientation:portrait) and (max-width:600px){ #tbtns button[data-k="ult"]{right:4px;bottom:272px} }
.csskill{white-space:pre-line}
.skillinfo .cult{margin-top:4px;color:#b5338a;font-weight:600}
/* rank (rank.js) */
.resrank{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0;padding:6px 12px;border:3px solid var(--ink);border-radius:12px;background:#fff;box-shadow:3px 3px 0 var(--ink);font-weight:700}
.resrank[hidden]{display:none}
.resrank b{color:var(--rc,var(--ink));font-family:var(--display);font-weight:400}
.resrank i{font-style:normal}
.resrank i.up{color:var(--good)} .resrank i.down{color:#e5484d}
.resrank .rkbar{flex:1 1 100%;height:8px;border:2px solid var(--ink);border-radius:6px;background:var(--track);overflow:hidden}
.resrank .rkbar i{display:block;height:100%;width:0;background:var(--rc,var(--gold));transition:width .8s ease-out}
.resrank.promo{animation:dpulse .5s ease-in-out 4 alternate;background:#fff6d6}
.qmrank{margin:8px 0 0;padding:5px 10px;border:2px solid var(--ink);border-left:8px solid var(--rc,var(--ink));border-radius:10px;background:#fff;font-weight:700;font-size:13px}
.qmnote{margin-top:6px;font-size:12px}
/* guild war (woe.js) */
#woeBar{display:grid;gap:4px;min-width:min(330px,80vw);background:var(--paper);border:3px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);padding:5px 10px;font:700 13px var(--body)}
#woeBar[hidden]{display:none}
#woeBar .wotop{display:flex;justify-content:space-between;gap:10px;white-space:nowrap}
#woeBar .wotop b{font-family:var(--display);font-weight:400}
#woTime.low{color:#e5484d;animation:dpulse .5s ease-in-out infinite alternate}
#woeBar .wohp{position:relative;height:14px;border:2px solid var(--ink);border-radius:7px;background:var(--track);overflow:hidden}
#woeBar .wohp i{display:block;height:100%;width:100%;transition:width .2s}
#woeBar .wohp span{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;line-height:1;color:var(--ink);text-shadow:0 0 3px #fff}
#woeBar .woguilds{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
#woeBar .woguilds span{font-size:11px;padding:1px 7px;border-radius:9px;border:2px solid var(--gc);color:var(--ink);background:#fff}
#woeBar .woguilds span.own{background:var(--gc);color:#fff;border-color:var(--ink)}
@media (max-width:700px){ #woeBar{font-size:11px;padding:3px 7px;min-width:0} }
/* Login gate (login.js) */
.lgcard{max-width:440px}
.lgcard .btn.google{width:100%}
.lgrow{display:flex;gap:8px;flex-wrap:wrap}
.lgrow .btn{flex:0 0 auto}
.lgor{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:var(--muted);font-size:13px}
.lgor::before,.lgor::after{content:'';flex:1;border-top:2px dashed var(--muted);opacity:.45}
#lgCodeHelp{margin-top:8px}
#lgMsg.err{color:var(--p1)}
.lglink{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.lglink:disabled{opacity:.5;cursor:default;text-decoration:none}