:root{--bg:#eef3e8;--sky:#dff0f7;--grass:#dbe8c8;--ink:#2b3326;--dim:#6b7562;--line:#c3cdb6;--card:#fff;--accent:#e4643f;--ok:#4a9d5f;--bad:#c8443a;--gold:#c9962f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;display:flex;justify-content:center}#app{width:100%;max-width:560px;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);box-shadow:0 0 0 1px var(--line)}header{padding:8px 12px;background:#fff;border-bottom:2px solid var(--line);display:flex;gap:10px;align-items:center;flex-wrap:wrap;flex:0 0 auto}h1{margin:0;font-size:16px;letter-spacing:-.01em}h1 a{color:inherit;text-decoration:none}.badge{font-size:11px;background:var(--grass);border:1px solid var(--line);border-radius:20px;padding:2px 9px;color:var(--dim)}.badge a{color:var(--dim)}button{font:inherit;cursor:pointer;border-radius:9px;border:1px solid var(--line);background:#fff;padding:7px 11px;color:var(--ink);transition:.12s}button:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}button:disabled{opacity:.35;cursor:not-allowed}button.pri{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}.wrap{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}.side{background:#fff;border-bottom:2px solid var(--line);flex:0 0 auto}.side.collapsed .pickerbody{display:none}.pickerbar{display:flex;gap:8px;align-items:center;padding:7px 12px;width:100%;background:transparent;border:none;text-align:left;cursor:pointer}.pickerbar .nm{font-size:12px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pickerbar .chev{color:var(--dim);font-size:11px;transition:transform .15s}.side:not(.collapsed) .pickerbar .chev{transform:rotate(180deg)}.pickerbody{padding:0 12px 12px;max-height:46dvh;overflow:auto}.stage{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}.fam{margin-bottom:10px}.fam h3{margin:0 0 5px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.m{background:var(--grass);border:2px solid transparent;border-radius:8px;padding:3px;text-align:center;font-size:9px;line-height:1.15;cursor:pointer;position:relative}.m:hover{border-color:var(--accent)}.m.on{border-color:var(--accent);background:#ffe9e2}.m svg{width:100%;height:auto;display:block}.m b{display:block;font-weight:600}.m i{font-style:normal;color:var(--dim);font-size:8px}.m i.lv{color:var(--accent);font-weight:700}.pickbar{display:flex;gap:6px;align-items:center;margin-bottom:10px;flex-wrap:wrap}.duel{display:flex;align-items:center;justify-content:space-between;gap:8%;flex:0 0 auto;padding:0 3%;position:relative;z-index:2}.bench{display:flex;justify-content:center;align-items:flex-end;gap:5%;flex:0 0 auto;position:relative;z-index:2}.arena{position:relative;z-index:2;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,2.5dvh,28px);padding:10px 4% 14px;overflow:hidden;background:linear-gradient(180deg,#eaf4fb,#dff0e4 78%,#cfe3c2)}.arena .horizon{position:absolute;left:0;right:0;top:0;height:40%;background:linear-gradient(180deg,#cfe6f5e6,#eaf4fb00)}.arena .ground{position:absolute;left:0;right:0;top:50%;height:30%;transform:translateY(-50%);background:linear-gradient(180deg,#bed7b400,#a8c89b8c)}.unit{position:relative;z-index:2;width:min(30vw,30%,152px);display:flex;flex-direction:column;align-items:center;gap:2px}.unit.bench{width:clamp(46px,17vw,84px);opacity:.82}.unit.bench .who{font-size:9px}.unit.bench .tagline{height:11px;line-height:11px}.unit.bench .tag{font-size:7.5px;padding:0 4px}.unit.bench .bar{height:5px;width:70%}.unit .pad{position:absolute;bottom:4%;left:13%;width:74%;height:13%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.2),transparent 70%)}.unit .who{font-size:10px;font-weight:600;color:var(--dim);text-align:center;line-height:1.25}.unit .tagline{height:12px;line-height:12px;text-align:center}.unit .who .lv{color:var(--accent);font-weight:700}.unit .who .tag{font-size:8.5px;background:var(--gold);color:#3a2a00;border-radius:99px;padding:1px 5px;font-weight:700;white-space:nowrap}.unit.dead{opacity:.3;filter:grayscale(1)}.unit .bar{width:78%;height:7px;background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden}.unit .bar i{display:block;height:100%;background:var(--ok);transition:width .25s}.unit .bar i.lo{background:var(--bad)}.bob{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;will-change:transform;transform-origin:50% 100%}.bobStill{animation:none}.bobIdle{animation:bobIdle calc(2.3s / var(--spd)) ease-in-out infinite}@keyframes bobIdle{0%,to{transform:translateY(0) scaleY(1)}50%{transform:translateY(-2.2%) scaleY(1.018)}}.bobWalk{animation:bobWalk calc(.32s / var(--spd)) ease-in-out infinite}@keyframes bobWalk{0%,to{transform:translateY(0)}25%{transform:translateY(-7.5%)}50%{transform:translateY(0)}75%{transform:translateY(-7.5%)}}.mon{width:100%;height:100%;will-change:transform;transform-origin:50% 88%;filter:drop-shadow(0 6px 0 rgba(0,0,0,.1))}.mon.idle{animation:wobble calc(2.6s / var(--spd)) ease-in-out infinite}@keyframes wobble{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.02,.98) rotate(-1.1deg)}50%{transform:scale(.98,1.02) rotate(1.1deg)}75%{transform:scale(1.015,.985) rotate(-.5deg)}}.mon.approach{animation:approach calc(.34s / var(--spd)) cubic-bezier(.45,0,.75,.6) forwards}@keyframes approach{0%{transform:translate(0) scale(1)}60%{transform:translate(calc(var(--dx)*.92)) scale(.88,1.14)}to{transform:translate(var(--dx)) scale(.9,1.12)}}.mon.strike{animation:strike calc(.14s / var(--spd)) cubic-bezier(.2,.9,.3,1) forwards}@keyframes strike{0%{transform:translate(var(--dx)) scale(.9,1.12)}to{transform:translate(calc(var(--dx)*1.16)) scale(1.18,.82)}}.mon.retreat{animation:retreat calc(.34s / var(--spd)) cubic-bezier(.3,.1,.5,1) forwards}@keyframes retreat{0%{transform:translate(calc(var(--dx)*1.16)) scale(1.14,.86)}55%{transform:translate(calc(var(--dx)*.35)) scale(1.05,.95)}to{transform:translate(0) scale(1)}}.mon.hurt{animation:hurt calc(.3s / var(--spd)) ease-out}@keyframes hurt{0%{transform:translate(var(--kick,0))}25%{transform:translate(calc(var(--kick,0) + 7px),-6px) scale(1.08,.92)}55%{transform:translate(calc(var(--kick,0) - 5px),1px) scale(.96,1.04)}to{transform:translate(0) scale(1)}}.unit.foe .mon.hurt{--kick:9px}.unit.mine .mon.hurt{--kick:-9px}.unit.bench .mon{animation:none}.mon.faint{animation:faint calc(.6s / var(--spd)) ease-in forwards}@keyframes faint{to{transform:translateY(18px) scaleY(.5) scaleX(1.2) rotate(9deg);opacity:.26;filter:grayscale(.6)}}.mon.enter{animation:enter calc(.4s / var(--spd)) cubic-bezier(.2,1.5,.4,1)}@keyframes enter{0%{transform:translate(-70px) scale(.5);opacity:0}60%{transform:translate(10px) scale(1.14);opacity:1}to{transform:translate(0) scale(1);opacity:1}}.spit{position:absolute;width:15px;height:15px;border-radius:50% 50% 50% 0;z-index:19;animation:spitFly calc(.26s / var(--spd)) linear forwards}@keyframes spitFly{0%{transform:translate(0) rotate(-45deg) scale(1);opacity:1}50%{transform:translate(calc(var(--sx)*.5),calc(var(--sy)*.5 - 26px)) rotate(-45deg) scale(1.08)}to{transform:translate(var(--sx),var(--sy)) rotate(-45deg) scale(.7);opacity:0}}.float{position:absolute;font-weight:900;font-size:24px;color:#fff;pointer-events:none;text-shadow:0 2px 0 #d1362f,0 0 12px rgba(0,0,0,.35);z-index:22;white-space:nowrap}.float.dmg{animation:floatUp calc(.85s / var(--spd)) ease-out forwards}@keyframes floatUp{0%{transform:translate(-50%) scale(.5);opacity:0}25%{transform:translate(-50%,-16px) scale(1.25);opacity:1}to{transform:translate(-50%,-62px) scale(.95);opacity:0}}.p{position:absolute;width:11px;height:11px;border-radius:50%;z-index:21;animation:part calc(.55s / var(--spd)) ease-out forwards}@keyframes part{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--tx),var(--ty)) scale(.2);opacity:0}}.flashring{position:absolute;border-radius:50%;border:5px solid #fff;pointer-events:none;z-index:21;animation:ring calc(.4s / var(--spd)) ease-out forwards}@keyframes ring{0%{transform:translate(-50%,-50%) scale(.2);opacity:.95}to{transform:translate(-50%,-50%) scale(2.5);opacity:0}}.arena.shake{animation:shake .3s cubic-bezier(.36,.07,.19,.97)}@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(3px,-2px)}30%,50%,70%{transform:translate(-5px,2px)}40%,60%{transform:translate(5px,-1px)}}.ctrl{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));border-top:2px solid var(--line);background:#fff;min-height:56px;flex:0 0 auto}.ctrl .lbl{font-size:11px;color:var(--dim);width:100%;text-align:center}.ctrl button{flex:0 1 auto;min-width:84px;padding:11px 12px;font-size:13px}#kits{margin-top:10px;border-top:2px solid var(--line);padding-top:8px}#kits .brow{margin-bottom:8px}#kits .bname{font-size:11px;font-weight:600;margin-bottom:4px}#kits .bname .hint{font-style:normal;color:var(--dim);font-weight:400}#kits .abtns{display:flex;flex-wrap:wrap;gap:3px}#kits button.ab{font-size:10px;padding:4px 7px;border-radius:7px;background:var(--grass)}#kits button.ab.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}#kits button.ab:disabled{opacity:.3;cursor:not-allowed}.empty-mini{font-size:11px;color:var(--dim);padding:8px;background:#fff8e1;border-radius:8px;line-height:1.5}.empty-mini a{color:var(--accent)}button.sendin{background:#fff;border-color:var(--accent);color:var(--ink);font-weight:600}button.sendin:hover:not(:disabled){background:var(--accent);color:#fff}button.trap{background:var(--gold);border-color:var(--gold);color:#3a2a00;font-weight:700}button.trap:hover:not(:disabled){border-color:#b57f0c}button.trap:disabled{opacity:.4}.logbox .win{color:var(--gold);font-weight:700}:root{--spd:1}.hp{font-size:11px;font-weight:700;color:var(--dim);cursor:pointer;background:#ffffffd9;border:1px solid var(--line);border-radius:99px;padding:4px 10px}.hp:active{transform:translateY(1px)}.note{flex:0 0 auto;max-height:3.6em;overflow:auto;font-size:10.5px;line-height:1.35;padding:6px 12px}@media(max-height:700px){.note{display:none}}@media(max-height:820px){.logbox{max-height:12dvh}}.logbox{flex:0 1 auto;min-height:2.6em;max-height:16dvh;overflow:auto;-webkit-overflow-scrolling:touch;font-size:11.5px;line-height:1.4;background:#fff;border-top:1px solid var(--line);padding:5px 12px}.logbox p{margin:0 0 2px}.logbox p:last-child{margin-bottom:0}#app{height:100dvh;max-height:100dvh;overflow:hidden}body.fighting .note{display:none}.unit .info{position:absolute;top:-3px;right:-11px;z-index:5;width:21px;height:21px;border-radius:50%;padding:0;background:#fff;border:1px solid var(--line);color:var(--dim);font:italic 700 13px/1 Georgia,serif;cursor:pointer;display:grid;place-items:center}.unit .info:hover{border-color:var(--accent);color:var(--accent)}.unit.bench .info{right:-9px;width:18px;height:18px;font-size:11px}.unit.tappable{cursor:pointer}.unit.tappable .bob{transition:transform .12s}.unit.tappable:hover .bob,.unit.tappable:active .bob{transform:translateY(-3px) scale(1.04)}.unit.tappable:after{content:"";position:absolute;top:-6px;right:-8px;bottom:-6px;left:-8px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);pointer-events:none;opacity:.55}.taphint{font-size:8px;color:var(--accent);opacity:.9;white-space:nowrap;font-weight:600;letter-spacing:.01em;margin-top:1px}body.sheetopen{overflow:hidden}.sheetbg{position:fixed;top:0;right:0;bottom:0;left:0;background:#2b332657;opacity:0;pointer-events:none;transition:opacity .18s;z-index:40}.sheetbg.on{opacity:1;pointer-events:auto}.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:#fff;border-top:2px solid var(--line);border-radius:16px 16px 0 0;padding:14px 14px 20px;max-height:74dvh;overflow:auto;transform:translateY(101%);transition:transform .2s cubic-bezier(.3,.1,.4,1);box-shadow:0 -8px 26px #2b33262e;max-width:560px;margin:0 auto}.sheet.on{transform:none}.sheet .grab{width:38px;height:4px;border-radius:9px;background:var(--line);margin:0 auto 10px}.sheetx{position:absolute;top:10px;right:10px;width:28px;height:28px;padding:0;border-radius:50%;font-size:17px;line-height:1;color:var(--dim)}.sheet h3{margin:0 0 2px;font-size:15px;padding-right:32px}.sheet .meta{font-size:11px;color:var(--dim);margin-bottom:10px}.sheet .kit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.sheet .kit li{display:flex;gap:10px;align-items:flex-start;padding-bottom:8px;border-bottom:1px dashed var(--line)}.sheet .kit li:last-child{border-bottom:0;padding-bottom:0}.sheet .kit .ab{font-weight:700;font-size:12.5px;white-space:nowrap;min-width:78px;color:var(--ink)}.sheet .kit .tx{font-size:12px;color:var(--dim);line-height:1.42}.sheet .gotcha{margin-top:11px;font-size:11.5px;background:#fff8e1;border:1px solid var(--gold);border-radius:9px;padding:8px 10px;line-height:1.5}.sheet .gotcha b{color:#3a2a00}.panel{flex:0 0 auto;background:#fff;border-bottom:1px solid var(--line);padding:8px 12px 10px}.sechead{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}.sechead .count{font-weight:600;text-transform:none;letter-spacing:0}button.mini{font-size:11px;padding:3px 8px;border-radius:7px;color:var(--dim)}button.mini:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.rail{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.rail::-webkit-scrollbar{height:4px}.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}.team{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:7px 10px;border-radius:11px;background:var(--bg);border:1px solid var(--line);min-width:104px}.team:hover{border-color:var(--accent)}.team.live{background:#fff;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.team .tname{font-size:12px;font-weight:700;color:var(--ink);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.team .ports{display:flex;gap:2px}.team .live-dot{position:absolute;top:5px;right:6px;font-size:8px;color:var(--accent)}.mini-mon{display:inline-flex;width:22px;height:22px}.mini-mon svg{width:100%;height:100%;display:block}.grid{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.grid::-webkit-scrollbar{height:4px}.grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}.pet{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 7px 6px;border-radius:11px;background:var(--bg);border:1px solid var(--line);min-width:60px}.pet:hover{border-color:var(--accent)}.pet.on{background:#fff;border-color:var(--accent)}.pet.on:after{content:"✓";position:absolute;top:3px;right:5px;font-size:10px;font-weight:700;color:var(--accent)}.pet .pmon{width:38px;height:38px}.pet .pmon svg{width:100%;height:100%;display:block}.pet .pnm{font-size:10px;font-weight:600;color:var(--ink);max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pet .plv{font-size:9px;font-weight:700;color:var(--dim)}.pet.on .plv{color:var(--accent)}.strip{flex:0 0 auto;display:flex;align-items:center;gap:8px;background:#fff;border-bottom:1px solid var(--line);padding:7px 12px}.strip .sname{font-size:12px;font-weight:700}.strip .slots{display:flex;gap:3px}.go{flex:0 0 auto;padding:12px 12px calc(14px + env(safe-area-inset-bottom))}.start{width:100%;background:var(--accent);color:#fff;border:1px solid var(--accent);font-size:15px;font-weight:700;padding:13px;border-radius:12px;box-shadow:0 4px 14px #e4643f47}.start:hover:not(:disabled){filter:brightness(1.06)}.start:disabled{background:#fff;color:var(--dim);border-color:var(--line);box-shadow:none;cursor:not-allowed}body.fighting .go,body.idle .stage,body.idle #log,body.idle #note{display:none}body.idle .panel{border-bottom:0}body.idle #app{height:auto;min-height:0}.badge{white-space:nowrap}.badge:before{content:"●";color:var(--ok);margin-right:5px}