:root{--bg:#172333;--surface:#293b50;--border:#3c5068;--text:#fff3dc;--sub:#a9b5c4;--accent:#ffd166;--on-accent:#2a1e05;--danger:#e5484d;--success:#4cd07d;--me:#4c8dff;--opponent:#ff5c5c;--green:#4cd07d;--yellow:#ffd166;--blue1:#79aaff;--blue2:#396abf;--blue3:#9dc0ff;--red1:#ff8585;--red2:#bf4545;--red3:#ffa5a5;--inset:#101a26;--shadow:#0b121b;--lamp-off:#1b2838;--secondary-edge:#6a83a3;--rarity-mint:#7fd9bf;--font:"Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif}.screen-host{--robot:144px;--gap:8px;--pad:10px;--btn-h:48px;--btn-main-h:52px;--input-h:48px}@container ui (height<=440px){.screen-host{--gap:6px;--pad:8px;--btn-h:44px;--btn-main-h:46px;--input-h:44px}}@container ui (height>=560px){.screen-host{--robot:192px;--gap:14px;--pad:18px;--btn-h:56px;--btn-main-h:64px;--input-h:52px}}#app-wrap{position:relative}#ui{inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);z-index:1;color:var(--text);font:500 16px/1.4 var(--font);background:radial-gradient(ellipse at 50% 0%, #4c8dff14, transparent 60%), var(--bg);position:absolute;overflow:hidden;container:ui/size}#ui *,#ui :before,#ui :after{box-sizing:border-box}#ui input{-webkit-user-select:text;user-select:text}.screen-host{position:absolute;inset:0}.view{gap:var(--gap);padding:var(--pad) clamp(12px, 2.5cqw, 32px);flex-direction:column;display:flex;position:absolute;inset:0}.px{image-rendering:pixelated;image-rendering:crisp-edges;-webkit-user-drag:none}.row{gap:var(--gap);align-items:center;display:flex}.label{color:var(--sub);font-size:16px}.panel{background:var(--surface);border:2px solid var(--border);box-shadow:inset 0 2px 0 #ffffff0f, 0 4px 0 var(--shadow);border-radius:12px;position:relative}.panel.blue,.panel.red,.panel.green,.panel.yellow,.panel.blue1,.panel.blue2,.panel.blue3,.panel.red1,.panel.red2,.panel.red3{border-color:var(--side)}.blue{--side:var(--me)}.red{--side:var(--opponent)}.green{--side:var(--green)}.yellow{--side:var(--yellow)}.blue1{--side:var(--blue1)}.blue2{--side:var(--blue2)}.blue3{--side:var(--blue3)}.red1{--side:var(--red1)}.red2{--side:var(--red2)}.red3{--side:var(--red3)}.actions{justify-content:center;align-items:center;gap:clamp(10px,2cqw,24px);display:flex}.btn{--face:var(--accent);--fg:var(--on-accent);--edge:color-mix(in srgb, var(--face) 62%, #000);min-width:44px;min-height:var(--btn-h);background:var(--face);color:var(--fg);font:700 18px/1.2 var(--font);white-space:nowrap;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 2px 0 #ffffff59, 0 4px 0 var(--edge), 0 6px 10px #0000004d;border:0;border-radius:10px;justify-content:center;align-items:center;gap:8px;margin-bottom:4px;padding:0 clamp(14px,2cqw,24px);transition:transform 60ms ease-out,box-shadow 60ms ease-out,filter .12s;display:inline-flex;position:relative}.btn[data-variant=secondary]{--face:var(--border);--fg:var(--text);outline:2px solid var(--secondary-edge);outline-offset:-2px}.btn[data-variant=danger]{--face:var(--danger);--fg:var(--text)}.btn:active:not(:disabled){box-shadow:inset 0 2px 0 #ffffff40, 0 1px 0 var(--edge), 0 2px 4px #0000004d;transform:translateY(3px)}.btn:disabled{cursor:default;filter:saturate(.15)brightness(.7)}.btn:focus-visible{outline:3px solid var(--text);outline-offset:2px}.btn-main{min-height:var(--btn-main-h);font-size:20px}.input{min-width:0;height:var(--input-h);border:2px solid var(--border);background:var(--inset);color:var(--text);font:500 18px var(--font);border-radius:10px;outline:none;padding:0 12px}.input:focus{border-color:var(--accent)}.input::placeholder{color:#66768a}.lamps{align-items:center;gap:8px;display:inline-flex}.lamp{background:var(--lamp-off);width:18px;height:18px;box-shadow:0 0 0 3px var(--shadow), inset 0 0 0 1px var(--border);border-radius:50%;transition:background .16s,box-shadow .16s}.lamp.on{--glow:var(--accent);background:radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--glow) 40%, #fff) 0 18%, var(--glow) 30%);box-shadow:0 0 0 3px var(--shadow), 0 0 10px var(--glow)}.lamp.done{--glow:var(--success)}.toast{z-index:30;border:2px solid var(--border);max-width:calc(100% - 32px);color:var(--text);font:700 18px/1.3 var(--font);text-align:center;pointer-events:none;background:#293b50f5;border-radius:999px;padding:10px 20px;position:absolute;top:12px;left:50%;transform:translate(-50%)}.toast.show{animation:.2s ease-out toast-in}.toast[data-kind=ok]{border-color:var(--success);color:var(--success)}.toast[data-kind=warn]{border-color:var(--accent);color:var(--accent)}.toast[data-kind=danger]{border-color:var(--danger);color:var(--danger)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-8px)}}.robot{width:var(--robot);height:var(--robot);flex:none;display:inline-block;position:relative}.robot-inner{position:absolute;inset:0}.robot.flip .robot-inner{transform:scaleX(-1)}.robot-layer{width:100%;height:100%;transition:filter .2s;position:absolute;inset:0}.silhouette{filter:brightness(.25)opacity(.6)}.legs-frame{--frame-anim:none;--bob-anim:none;opacity:0;width:100%;height:100%;animation:var(--frame-anim), var(--bob-anim);position:absolute;inset:0}.legs-frame.legs-f0{opacity:1}.legs-idle .layer-legs.anim-bob .legs-frame{--bob-anim:legs-bob var(--legs-bob-cycle) ease-in-out var(--legs-delay,0s) infinite}.legs-idle .layer-legs.frames-ready .legs-frame{--frame-steps:var(--legs-cycle) steps(1, end) var(--legs-delay,0s) infinite}.legs-idle .layer-legs.anim-walk.frames-ready .legs-f0{--frame-anim:legs-walk-f0 var(--frame-steps)}.legs-idle .layer-legs.anim-walk.frames-ready .legs-f1{--frame-anim:legs-walk-f1 var(--frame-steps)}.legs-idle .layer-legs.anim-walk.frames-ready .legs-f2{--frame-anim:legs-walk-f2 var(--frame-steps)}.legs-idle .layer-legs.anim-tread.frames-ready .legs-f0{--frame-anim:legs-tread-f0 var(--frame-steps)}.legs-idle .layer-legs.anim-tread.frames-ready .legs-f1{--frame-anim:legs-tread-f1 var(--frame-steps)}@keyframes legs-walk-f0{0%{opacity:0}25%{opacity:1}50%{opacity:0}75%,to{opacity:1}}@keyframes legs-walk-f1{0%{opacity:1}25%,to{opacity:0}}@keyframes legs-walk-f2{0%,25%{opacity:0}50%{opacity:1}75%,to{opacity:0}}@keyframes legs-tread-f0{0%{opacity:1}50%,to{opacity:0}}@keyframes legs-tread-f1{0%{opacity:0}50%,to{opacity:1}}@keyframes legs-bob{25%{transform:translateY(-4%)}75%{transform:translateY(4%)}}.name-tag{min-width:0;max-width:100%;color:var(--side);align-items:center;gap:6px;font-weight:700;line-height:1.25;display:flex}.name-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.you-chip{border:1px solid var(--side);background:color-mix(in srgb, var(--side) 22%, transparent);color:var(--text);border-radius:999px;flex:none;padding:0 8px;font-size:14px;font-weight:700;line-height:1.45}.you-chip.off{display:none}.name-stack .you-chip.off{visibility:hidden;display:block}.name-stack{flex-direction:column;align-items:flex-start;gap:2px;width:100%;container-type:inline-size}.name-stack .name-text{max-width:100%;font-size:min(var(--name-size), calc(100cqi / 12.4))}.home{justify-content:center;align-items:center;gap:clamp(8px,4cqh,40px)}.home-logo{--chamfer:.42em;--rim:3px;padding:var(--rim);clip-path:polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)), 0 var(--chamfer));filter:drop-shadow(0 4px 0 var(--shadow));background:linear-gradient(#5b7391,#3c5068 55%,#2a3a4e);flex:none;margin:0;font-size:clamp(24px,min(5.5cqh,4.4cqw),52px);font-weight:700;line-height:1.1}.logo-plate{--cut:calc(var(--chamfer) - var(--rim) * .4);min-width:clamp(240px,32cqw,480px);clip-path:polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));background:linear-gradient(#ffffff0f,#0000 45%),linear-gradient(#2a3d54,#22324a);flex-direction:column;align-items:center;padding:.3em 1.5em .34em;display:flex;position:relative}.logo-plate:before{--rivet:linear-gradient(var(--accent), var(--accent));content:"";background:var(--rivet) left top / .36em .1em no-repeat, var(--rivet) right top / .36em .1em no-repeat, var(--rivet) left bottom / .36em .1em no-repeat, var(--rivet) right bottom / .36em .1em no-repeat;pointer-events:none;position:absolute;inset:.32em .42em}.logo-plate:after{content:"";top:.1em;left:var(--cut);right:var(--cut);pointer-events:none;background:#a9b5c473;height:2px;position:absolute}.logo-top,.logo-main{white-space:nowrap;text-shadow:1px 0 0 var(--shadow), -1px 0 0 var(--shadow), 0 1px 0 var(--shadow), 0 -1px 0 var(--shadow);position:relative}.logo-top{letter-spacing:.4em;color:#9fc0f0;margin-right:-.4em;font-size:.5em}.logo-main{letter-spacing:.06em;color:var(--text);padding-bottom:.16em}.logo-main:after{content:"";background:var(--accent);border-radius:1px;width:1.6em;height:.08em;min-height:2px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.home-main{flex:0 auto;justify-content:center;align-items:center;gap:clamp(16px,5cqw,80px);width:100%;min-height:0;display:flex}.home-hero{--robot:clamp(144px, min(34cqh, 28cqw), 288px);place-items:center;display:grid;position:relative}.hero-shadow{background:#00000059;border-radius:50%;width:60%;height:10%;animation:2.4s ease-in-out infinite shadow-pulse;position:absolute;bottom:6%}.float{animation:2.4s ease-in-out infinite float}@keyframes float{50%{transform:translateY(-8%)}}@keyframes shadow-pulse{50%{opacity:.6;transform:scale(.8)}}.home-form{gap:calc(var(--gap) - 2px);width:min(420px,52cqw);padding:var(--pad) clamp(14px, 2cqw, 24px);flex-direction:column;display:flex}.home-form .input{width:100%}.home-form .row .input{flex:1}.home-form .row .btn{margin-bottom:4px}.home-form>.btn{width:100%;margin-top:2px}.mode-row{margin-top:2px}.mode-row[hidden]{display:none}.create-row{margin-top:2px}.create-row>.btn{flex:1}.segment{background:var(--inset);box-shadow:inset 0 0 0 2px var(--border);border-radius:10px;flex:none;align-self:stretch;align-items:center;margin-bottom:4px;padding:3px;display:flex}.seg-label{color:var(--sub);writing-mode:vertical-rl;padding:0 6px 0 4px;font-size:14px;line-height:1.1}.seg-option{min-width:40px;color:var(--sub);font:700 16px/1 var(--font);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:7px;align-self:stretch;padding:0 6px}.seg-option.on{background:var(--border);color:var(--text);box-shadow:inset 0 0 0 2px var(--secondary-edge)}.seg-option:disabled{cursor:default;opacity:.6}.seg-option:focus-visible{outline:3px solid var(--text);outline-offset:1px}.divider{border:0;border-top:2px solid var(--border);width:100%;margin:4px 0}.home-form .label{line-height:1.2}.message{min-height:20px;color:var(--danger);margin:0;font-size:16px;line-height:1.25}.message[data-kind=sub]{color:var(--sub)}.code-input{text-transform:uppercase;letter-spacing:.1em}.room{justify-content:space-between;align-items:center}.room-head{justify-content:center;align-items:flex-end;gap:clamp(12px,3cqw,40px);width:100%;display:flex}.room-code{flex-direction:column;align-items:center;line-height:1;display:flex}.code{color:var(--accent);letter-spacing:.12em;text-shadow:0 4px 0 var(--shadow);-webkit-user-select:all;user-select:all;margin-top:4px;font-size:clamp(40px,11cqh,80px);font-weight:700}.room-code .btn-copy{margin-top:var(--gap)}.room-share{flex-direction:column;gap:2px;width:min(520px,50cqw);display:flex}.url-input{flex:1;font-size:16px}.btn-share svg{fill:none;stroke:currentColor;stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:20px;height:20px}.room-bays{--robot:clamp(96px, min(30cqh, 15cqw), 192px);flex:1;grid-template-columns:1fr 1fr;gap:clamp(12px,3cqw,40px);width:min(1000px,100%);min-height:0;display:grid}.room-bays.grid4{gap:var(--gap) clamp(12px, 3cqw, 40px);--robot:clamp(48px, min(14cqh, 9cqw), 120px);grid-template-rows:1fr 1fr}.room-bays.teams{--robot:clamp(48px, min(14cqh, 9cqw), 120px);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch}.room-bays.teams .team-col{gap:var(--gap);flex-direction:column;min-width:0;min-height:0;display:flex}.room-bays.teams .team-col>.bay{flex:1 1 0;min-height:0}.room-bays.teams .vs{align-self:center;font-size:clamp(28px,10cqh,64px);animation:none}.room-bays.teams .btn-switch-team{flex:none;align-self:center}.room-bays.grid4 .bay,.room-bays.teams .bay{padding:4px var(--pad);flex-direction:row}.room-bays.grid4 .bay-info,.room-bays.teams .bay-info{flex:1;align-items:flex-start;gap:2px;width:auto}.room-bays.grid4 .bay-name,.room-bays.teams .bay-name{--name-size:clamp(16px, 4.5cqh, 26px);flex-direction:row;align-items:center}.room-bays.grid4 .bay-name .you-chip.off,.room-bays.teams .bay-name .you-chip.off{display:none}.bay.is-left .bay-state{color:var(--sub)}.room-count{color:var(--sub);margin:0;font-size:14px;line-height:1.2}.bay{padding:var(--pad);align-items:center;gap:clamp(8px,2cqw,24px);transition:box-shadow .2s,border-color .2s;display:flex;overflow:hidden}.bay.empty{border-style:dashed;border-color:var(--border)}.bay.is-ready{box-shadow:inset 0 2px 0 #ffffff0f, 0 4px 0 var(--shadow), 0 0 18px color-mix(in srgb, var(--side) 45%, transparent)}.bay-stand{background:repeating-linear-gradient(45deg, transparent 0 10px, #ffd1660f 10px 20px), var(--inset);border-radius:10px;flex:none;place-items:center;padding:4px;display:grid;position:relative}.bay-info{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.bay-name{--name-size:clamp(20px, 5cqh, 30px)}@container ui (height>=560px){.bay{flex-direction:column;justify-content:center}.bay-info{flex:none;align-items:center;width:100%}.bay-name{align-items:center}}.bay.empty .bay-name,.bay-state{color:var(--sub)}.bay.is-ready .bay-state{color:var(--success)}.bay.is-offline .bay-state{color:var(--danger)}.draft-top{grid-template-columns:1fr auto 1fr;align-items:center;min-height:28px;display:grid}.timer{font-size:clamp(20px,5cqh,30px);font-weight:700;transition:color .2s}.timer[data-level=warn]{color:var(--accent)}.timer[data-level=danger]{color:var(--danger);animation:1s ease-in-out infinite pulse}@keyframes pulse{50%{transform:scale(1.08)}}.opponent-count{color:var(--opponent);justify-self:end;font-weight:700}.arena-info{min-width:0;max-width:100%;color:var(--sub);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:14px;overflow:hidden}.draft-top .arena-info{justify-self:start}.tabs{gap:var(--gap);grid-template-columns:repeat(4,1fr);display:grid}.tab{min-height:48px;font-size:18px}.tab-icon{flex:none;width:32px;height:32px}.tab-check{color:var(--success);font-size:20px}.tab[data-variant=primary] .tab-check{color:#1e7a45}.draft-main{gap:var(--gap);flex:1;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr) minmax(220px,1fr);min-height:0;display:grid}.draft-preview{background:radial-gradient(circle at 50% 55%, #4c8dff2e, transparent 65%), var(--surface);--robot:clamp(96px, min(38cqh, 19cqw), 240px);place-items:center;display:grid}.preview-robot.is-snap{animation:.22s ease-out snap}@keyframes snap{40%{transform:scale(1.08)}}.draft-cand{padding:var(--pad);--part:clamp(112px, min(44cqh, 22cqw), 288px);align-items:center;gap:clamp(8px,2cqw,24px);display:flex;overflow:hidden}.stage{width:var(--part);height:var(--part);flex:none;position:relative}.stage-shadow{background:#00000059;border-radius:50%;height:10%;position:absolute;bottom:2%;left:18%;right:18%}.capsule{transform-origin:50% 85%;width:76%;height:76%;position:absolute;top:12%;left:12%}.stage[data-state=closed] .capsule{animation:2.4s ease-in-out infinite idle-wobble}.stage[data-state=open] .capsule{opacity:.55;transform:translateY(14%)scale(.85)}.stage[data-state=locked] .capsule{display:none}.capsule.is-shaking{animation:shake .25s linear var(--shake-n,1)}.stage:before,.stage:after{content:"";pointer-events:none;opacity:0;position:absolute}.stage:before{background:radial-gradient(circle,#fff3dcf2 0 14%,#ffd16600 58%),repeating-conic-gradient(#ffd1668c 0deg 9deg,#ffd16600 9deg 30deg);border-radius:50%;inset:-22%;-webkit-mask-image:radial-gradient(circle,#000 30%,#0000 70%);mask-image:radial-gradient(circle,#000 30%,#0000 70%)}.stage:after{z-index:1;background:var(--accent);width:6px;height:6px;box-shadow:0 -60px 0 var(--accent), 52px -30px 0 var(--text), 52px 30px 0 var(--accent), 0 60px 0 var(--text), -52px 30px 0 var(--accent), -52px -30px 0 var(--text), 30px -52px 0 var(--text), 60px 0 0 var(--accent), 30px 52px 0 var(--text), -30px 52px 0 var(--accent), -60px 0 0 var(--text), -30px -52px 0 var(--accent);margin:-3px 0 0 -3px;top:50%;left:50%}.stage.is-rare3:before{animation:.9s ease-out rare-flash}.stage.is-rare3:after{animation:.9s cubic-bezier(.2,.7,.3,1) rare-stars}@keyframes rare-flash{0%{opacity:0;transform:scale(.4)rotate(0)}15%{opacity:1}to{opacity:0;transform:scale(1.15)rotate(40deg)}}@keyframes rare-stars{0%{opacity:1;transform:scale(.2)rotate(45deg)}70%{opacity:1}to{opacity:0;transform:scale(1.6)rotate(45deg)}}@keyframes idle-wobble{0%,80%,to{transform:rotate(0)}85%{transform:rotate(-4deg)}90%{transform:rotate(4deg)}95%{transform:rotate(-2deg)}}@keyframes shake{20%{transform:translate(-6%)rotate(-8deg)}40%{transform:translate(6%)rotate(8deg)}60%{transform:translate(-5%)rotate(-6deg)}80%{transform:translate(4%)rotate(5deg)}}.stage-part{width:100%;height:100%;position:absolute;inset:0}.stage-part.is-pop{animation:.35s cubic-bezier(.34,1.56,.64,1) pop}@keyframes pop{0%{opacity:0;transform:translateY(40%)scale(.4)}40%{opacity:1}}.cand-info{flex-direction:column;gap:2px;min-width:0;transition:opacity .15s;display:flex}.cand-info.hidden-during-anim{opacity:0}.part-name{flex-wrap:wrap;align-items:center;gap:0 8px;font-size:clamp(24px,7cqh,40px);font-weight:700;line-height:1.2;display:flex}.rarity{border:2px solid var(--border);color:var(--sub);letter-spacing:1px;white-space:nowrap;vertical-align:middle;border-radius:999px;flex:none;padding:1px 6px;font-size:14px;font-weight:700;line-height:1.2;display:inline-block}.rarity[data-rarity="2"]{border-color:var(--sub);color:var(--rarity-mint)}.rarity[data-rarity="3"]{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}.part-name .rarity{font-size:clamp(14px,3.6cqh,20px)}.stats{grid-template-columns:auto auto;justify-content:start;gap:0 12px;margin:4px 0 0;display:grid}.stats dt{color:var(--sub)}.stats dd{text-align:right;margin:0;font-weight:700}.draft-actions{flex-direction:column;justify-content:center;gap:6px;display:flex}.draft-actions .btn{width:100%}.lamps-row{justify-content:center}.draws-left{font-weight:700}.draws-left.ok{color:var(--success)}.note{text-wrap:balance;color:var(--accent);text-align:center;margin:-2px 0 0;font-size:16px;line-height:1.3}.flyer{z-index:40;pointer-events:none;transform-origin:50%;transition:transform .3s cubic-bezier(.5,0,.75,0),opacity .3s ease-in;position:fixed}.reveal{align-items:center}.screen-title{margin:0;font-size:clamp(22px,6cqh,36px)}.reveal-stage{flex:1;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,3cqw,40px);width:min(1100px,100%);min-height:0;display:grid}.stand{padding:var(--pad);flex-direction:column;align-items:center;gap:4px;animation:.4s cubic-bezier(.2,.8,.3,1.1) both slide-in-left;display:flex}.stand.from-right{animation-name:slide-in-right}.reveal-stage.multi{gap:var(--gap) clamp(8px, 2cqw, 24px);grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.reveal-stage.n4{grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(2,minmax(0,1fr))}.reveal-stage.multi .stand{justify-content:center;min-width:0;min-height:0;animation-name:stand-in}.reveal-stage.multi .stand-robot{--robot:clamp(64px, min(26cqh, 14cqw), 200px)}.reveal-stage.multi .stand-name{--name-size:clamp(16px, 5cqh, 28px)}.reveal-stage.multi .stand-parts{grid-template-columns:minmax(0,1fr);max-width:100%;font-size:14px;line-height:1.3}.reveal-stage.multi .stand-parts li{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.reveal-stage.n4 .stand{padding:4px var(--pad);grid-template-rows:auto 1fr;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 12px;display:grid}.reveal-stage.n4 .stand-robot{--robot:clamp(56px, min(22cqh, 12cqw), 160px);grid-row:1/3}.reveal-stage.n4 .stand-name{align-items:flex-start}.reveal-stage.n4 .stand-parts{align-self:start;font-size:13px;line-height:1.25}.reveal-stage.teams{gap:var(--gap) clamp(8px, 2cqw, 24px);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch}.reveal-stage.teams .vs{align-self:center}.reveal-stage.teams .team-col{gap:var(--gap);flex-direction:column;min-width:0;min-height:0;display:flex}.team-name{color:var(--side);text-align:center;font-size:clamp(16px,5cqh,24px);font-weight:700;line-height:1.2}.reveal-stage.teams .stand{min-width:0;min-height:0;padding:4px var(--pad);flex:1 1 0;grid-template-rows:auto 1fr;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 12px;display:grid}.reveal-stage.teams .stand-robot{--robot:clamp(56px, min(22cqh, 12cqw), 160px);grid-row:1/3}.reveal-stage.teams .stand-name{--name-size:clamp(16px, 5cqh, 28px);align-items:flex-start}.reveal-stage.teams .stand-parts{grid-template-columns:minmax(0,1fr);align-self:start;max-width:100%;font-size:13px;line-height:1.25}.reveal-stage.teams .stand-parts li{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.stand.is-left{opacity:.55}@keyframes stand-in{0%{opacity:0;transform:scale(.85)}}.stand-name{--name-size:clamp(20px, 6cqh, 32px);align-items:center}.stand-robot{--robot:clamp(120px, min(40cqh, 24cqw), 240px);width:var(--robot);height:var(--robot);position:relative}.stand-robot .robot{position:absolute;inset:0}.robot-layer.equip{animation:.15s ease-out both equip;animation-delay:calc(.4s + var(--n) * .15s)}@keyframes equip{0%{opacity:0;transform:scale(1.35)}}.stand-parts{grid-template-columns:auto auto;gap:0 16px;margin:0;padding:0;list-style:none;display:grid}.stand-parts .rarity{margin-left:6px;padding:0 5px;font-size:12px}.vs{color:var(--accent);text-shadow:0 4px 0 var(--shadow), 0 0 24px #ffd16666;font-size:clamp(40px,14cqh,96px);font-style:italic;font-weight:700;animation:.35s cubic-bezier(.34,1.56,.64,1) 1s both vs-in}@keyframes slide-in-left{0%{opacity:0;transform:translate(-60cqw)}}@keyframes slide-in-right{0%{opacity:0;transform:translate(60cqw)}}@keyframes vs-in{0%{opacity:0;transform:scale(3)}}.result{align-items:center}.result-body{gap:var(--gap);flex-direction:column;flex:1;align-items:center;width:min(1100px,100%);min-height:0;display:flex}.waiting{color:var(--sub);margin:auto;font-size:24px}.outcome{align-items:baseline;gap:16px;display:flex}.outcome-text{text-shadow:0 4px 0 var(--shadow);font-size:clamp(36px,11cqh,72px);font-weight:700;line-height:1.1}.outcome.win .outcome-text{color:var(--success)}.outcome.lose .outcome-text{color:var(--danger)}.outcome-reason{color:var(--sub);font-size:20px}.cards{--robot:clamp(96px, min(26cqh, 12cqw), 192px);flex:1;grid-template-columns:1fr 1fr;gap:clamp(12px,3cqw,40px);width:100%;min-height:0;display:grid}.cards.multi{grid-template-columns:repeat(var(--n,3), minmax(0, 1fr));--robot:clamp(48px, min(14cqh, 8cqw), 128px);gap:clamp(8px,1.5cqw,20px)}.cards.n4{--n:4}.cards.multi .card{padding:6px clamp(6px,1cqw,12px)}.cards.multi .card-head{gap:2px 6px}.cards.multi .card{gap:2px}.cards.multi .card-head{flex-wrap:wrap}.cards.multi .card-name{flex:1 1 0;font-size:clamp(15px,4cqh,22px)}.cards.multi .card-parts{gap:0}.cards.multi .hp{flex:1 0 100%}.cards.multi .card-body{flex-direction:column;align-items:stretch;gap:2px}.cards.multi .card-robot{align-self:center}.cards.multi .result-part{width:clamp(20px,5.5cqh,48px);height:clamp(20px,5.5cqh,48px)}.cards.multi .result-part-name{gap:4px;font-size:13px}.cards.multi .result-part-name small{display:none}.cards.multi .stamp{width:clamp(48px,14cqh,96px);height:clamp(48px,14cqh,96px)}.cards.multi.teams{--robot:clamp(40px, min(10cqh, 7cqw), 96px);grid-template-columns:repeat(2,minmax(0,1fr))}.cards.teams .team-col{flex-direction:column;gap:clamp(6px,1.5cqh,12px);min-width:0;min-height:0;display:flex}.cards.teams .team-col>.card{flex:1 1 0;position:relative}.cards.teams .card-body{flex-direction:row;align-items:center}.cards.teams .card-parts{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px}.left-tag{color:var(--sub);flex:none;font-size:13px;font-weight:700}.blue .rank-chip,.red .rank-chip{color:var(--text)}.rank-chip{background:var(--side);color:var(--on-accent);border-radius:999px;flex:none;padding:0 8px;font-size:15px;font-weight:700;line-height:1.5}.card{min-height:0;padding:var(--pad);flex-direction:column;gap:6px;display:flex}.card-head{flex-wrap:wrap;align-items:center;gap:2px 12px;display:flex}.card-name{font-size:clamp(18px,5cqh,28px)}.hp{flex:1 0 160px;align-items:center;gap:8px;display:flex}.hp-bar{background:var(--inset);height:14px;box-shadow:inset 0 0 0 2px var(--border);border-radius:7px;flex:1;overflow:hidden}.hp-fill{background:var(--side);height:100%;animation:.6s ease-out hp-in;display:block}@keyframes hp-in{0%{width:0}}.hp-text{white-space:nowrap;font-weight:700}.card-body{flex:1;align-items:center;gap:clamp(8px,2cqw,20px);min-height:0;display:flex}.card-parts{grid-template-columns:minmax(0,1fr);gap:4px;min-width:0;margin:0;padding:0;list-style:none;display:grid}.card-parts li{align-items:center;gap:6px;min-width:0;display:flex}.result-part{flex:none;width:clamp(40px,10cqh,96px);height:clamp(40px,10cqh,96px)}.result-part-name{white-space:nowrap;text-overflow:ellipsis;align-items:baseline;gap:8px;min-width:0;line-height:1.2;display:flex;overflow:hidden}.result-part-name small{color:var(--sub);font-size:16px}.result-part-name span{font-weight:700}.result-part-name .rarity{align-self:center;padding:0 5px;font-size:12px}.stamp{pointer-events:none;width:clamp(64px,18cqh,128px);height:clamp(64px,18cqh,128px);animation:.3s cubic-bezier(.5,0,.75,0) .3s both stamp;position:absolute;bottom:6px;right:6px;transform:rotate(-12deg)}@keyframes stamp{0%{opacity:0;transform:scale(1.6)rotate(-12deg)}}.result-actions{justify-content:center;align-items:flex-end;gap:clamp(12px,3cqw,40px);display:flex}.rematch{flex-direction:column;align-items:center;display:flex}.wait-text{min-height:22px;color:var(--sub);margin:0 0 2px}.wait-text.highlight{color:var(--accent);font-weight:700}.status{justify-content:center;align-items:center}.status-box{flex-direction:column;align-items:center;gap:16px;max-width:min(760px,100%);padding:clamp(16px,4cqh,32px) clamp(20px,4cqw,48px);display:flex}.status-message{text-align:center;margin:0;font-size:22px}.spinner{border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.tutorial-open{min-height:32px;color:var(--sub);font:700 15px/1.2 var(--font);text-underline-offset:3px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:8px;align-self:center;padding:4px 12px;text-decoration:underline}.tutorial-open:disabled{cursor:default;opacity:.5}.tutorial-open:focus-visible{outline:3px solid var(--text);outline-offset:1px}.tutorial{--gap:8px;--pad:12px;--btn-h:44px;z-index:5;background:#0b121bb8;place-items:center;display:grid;position:absolute;inset:0}.tutorial-card{--art:min(60cqh, 40cqw, 320px);grid-template-columns:var(--art) minmax(0, 1fr);column-gap:clamp(12px,2.5cqw,28px);row-gap:var(--gap);width:min(92cqw,720px);max-height:92cqh;padding:var(--pad) clamp(14px, 2cqw, 24px);grid-template-rows:minmax(0,1fr) auto auto;display:grid}.tutorial-art{width:var(--art);height:var(--art);background:var(--bg);box-shadow:inset 0 0 0 2px var(--border);border-radius:10px;grid-area:1/1/-1;align-self:center;position:relative;overflow:hidden;container-type:size}.tutorial-art[hidden],.tutorial-text[hidden]{display:none}.tutorial-text{touch-action:pan-y;grid-area:1/2;min-height:0;overflow-y:auto}.tutorial-title{color:var(--accent);margin:0 0 6px;padding:6px 24px 0 0;font-size:clamp(18px,6cqh,22px);font-weight:700;line-height:1.25}.tutorial-title:focus{outline:none}.tutorial-body{margin:0;font-size:16px;line-height:1.5}.tutorial-dots{grid-column:2;justify-content:center;gap:8px;display:flex}.tutorial-dot{background:var(--lamp-off);width:10px;height:10px;box-shadow:inset 0 0 0 2px var(--border);border-radius:50%}.tutorial-dot.on{background:var(--accent);box-shadow:none}.tutorial-actions{grid-column:2;gap:12px;display:flex}.tutorial-actions .btn{flex:1}.tutorial-back.is-hidden{visibility:hidden}.tutorial-close{width:44px;height:44px;color:var(--sub);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:10px;padding:0;position:absolute;top:4px;right:4px}.tutorial-close:before,.tutorial-close:after{content:"";background:currentColor;border-radius:2px;width:20px;height:3px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg)}.tutorial-close:after{transform:translate(-50%,-50%)rotate(-45deg)}.tutorial-close:focus-visible{outline:3px solid var(--text);outline-offset:-2px}.tutorial-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tutorial-symbol{min-width:32px;min-height:32px}.tutorial-art>img,.tut-capsule>img,.tut-slot>img,.tut-discard>img{position:absolute}.tut-capsule{transform-origin:50% 85%;width:36%;height:36%;animation:.25s linear .2s 2 backwards shake;position:absolute;top:18%;left:3%}.tutorial-art .tut-capsule img{width:100%;height:100%;inset:0}.tutorial-art .tut-capsule-closed{opacity:0;animation:1ms linear .7s backwards tut-was-shown}.tutorial-art .tut-capsule-open{animation:1ms linear .7s backwards tut-was-hidden}@keyframes tut-was-shown{0%{opacity:1}}@keyframes tut-was-hidden{0%{opacity:0}}.tutorial-art .tut-arrow{width:14%;height:14%;top:29%;left:40%}.tut-slots{grid-template-columns:repeat(2,1fr);gap:3cqi;width:41%;display:grid;position:absolute;top:10%;left:56%}.tut-slot{aspect-ratio:1;background:var(--inset);box-shadow:inset 0 0 0 2px var(--border);border-radius:8px;position:relative}.tutorial-art .tut-slot-part{width:88%;height:88%;animation:.35s cubic-bezier(.34,1.56,.64,1) .85s backwards pop;inset:6%}.tut-discard{width:26%;height:26%;position:absolute;top:60%;left:63%}.tutorial-art .tut-discard-part{filter:grayscale()opacity(.45);width:100%;height:100%;inset:0}.tutorial-art .tut-cross{width:60%;height:60%;top:50%;left:50%;transform:translate(-50%,-50%)}.art-battle{--robot:40cqi}.tut-robot{position:absolute;top:36%}.tut-robot-blue{left:4%}.tut-robot-red{right:4%}.tut-hp{background:var(--inset);width:34%;height:5cqi;box-shadow:inset 0 0 0 2px var(--border);border-radius:3cqi;position:absolute;top:24%;overflow:hidden}.tut-hp-blue{left:7%}.tut-hp-red{right:7%}.tut-hp-fill{background:var(--side);height:100%;display:block}.tut-hp-blue .tut-hp-fill{width:85%}.tut-hp-red .tut-hp-fill{width:45%}.tutorial-art .tut-bullet{opacity:0;width:8%;animation:.7s ease-in .3s backwards tut-shot;top:54%;left:46%}@keyframes tut-shot{0%{opacity:1;transform:translate(-14cqi)}to{opacity:1;transform:translate(14cqi)}}.art-variety{flex-direction:column;justify-content:center;align-items:center;display:flex}.tut-tiles{margin-top:8cqi}.tut-row{justify-content:center;gap:4cqi;display:flex}.tut-part{width:28cqi;height:28cqi}.tut-tile{width:20cqi;height:20cqi}@media (prefers-reduced-motion:reduce){.legs-frame,.float,.hero-shadow,.stage[data-state=closed] .capsule,.timer[data-level=danger],.tut-capsule,.tutorial-art .tut-capsule-closed,.tutorial-art .tut-capsule-open,.tutorial-art .tut-slot-part,.tutorial-art .tut-bullet{animation:none}.stage.is-rare3:before{opacity:.6;animation:none}.stage.is-rare3:after{animation:none}.tutorial-art .tut-bullet{opacity:1}}.fs-btn{top:var(--pad);z-index:2;border:2px solid var(--border);background:var(--surface);width:44px;height:44px;color:var(--sub);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:0 3px 0 var(--shadow);border-radius:10px;place-items:center;padding:0;display:grid;position:absolute;right:clamp(8px,1.5cqw,20px)}.fs-btn:active{box-shadow:0 1px 0 var(--shadow);transform:translateY(2px)}.fs-btn svg{fill:none;stroke:currentColor;stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.fs-btn[data-state=on] .fs-enter,.fs-btn:not([data-state=on]) .fs-exit{display:none}.install-hint{border:2px solid var(--border);background:var(--surface);color:var(--sub);border-radius:10px;flex:none;align-items:center;gap:8px;padding:2px 4px 2px 12px;font-size:14px;line-height:1.3;display:flex}.hint-close{width:36px;height:36px;color:var(--sub);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:0;flex:none;padding:0;position:relative}.hint-close:before,.hint-close:after{content:"";background:currentColor;border-radius:1px;width:16px;height:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg)}.hint-close:after{transform:translate(-50%,-50%)rotate(-45deg)}.room:has(>.fs-btn) .room-head{padding-right:52px}:is(.room:has(>.fs-btn) .room-share,.room:has(>.fs-btn) .url-input){min-width:0}@container ui (width<=1100px) or (height<=600px){.arena-info{white-space:normal;text-overflow:clip;line-height:1.25;overflow:visible}.cards.multi:not(.teams){grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(2,minmax(0,1fr))}.cards.multi .card-body{flex-direction:row;align-items:center}.cards.multi .card-parts{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px}.toast{width:max-content}.room-bays.grid4 .bay-name .name-text,.room-bays.teams .bay-name .name-text{font-size:min(var(--name-size), calc((100cqi - 58px) / 12.4))}}@container ui (height<=440px){.home{gap:clamp(4px,2.5cqh,16px)}.home-logo{font-size:clamp(20px,6cqh,28px)}.home-main{gap:clamp(12px,3cqw,40px)}.home-hero{--robot:clamp(72px, min(26cqh, 14cqw), 144px)}.home-form{grid-template-rows:repeat(5,auto);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-content:start;gap:4px 12px;width:min(640px,80cqw);display:grid}.home-form>*{grid-column:1}.home-form>.divider{border-top:0;border-left:2px solid var(--border);grid-area:1/2/-1;width:0;margin:0}.home-form>.label[for=home-code]{grid-area:1/3}.home-form>.row:has(#home-code){grid-area:2/3}.home-form>.message{grid-area:3/3/span 2;font-size:14px}.home-form>.tutorial-open{grid-area:5/3;justify-self:center}.home-form .label{font-size:14px}.home-form .btn{padding:0 10px;font-size:16px}.home-form .input{font-size:16px}.seg-option{min-width:34px;padding:0 4px;font-size:15px}.install-hint{font-size:13px}.code{font-size:clamp(28px,9cqh,80px)}.room-head .label{font-size:14px}.room-head .btn{font-size:16px}.draft-top{column-gap:8px}.draft-top .arena-info{font-size:12px}.tab{min-height:var(--btn-h);font-size:16px}.tab-icon{width:28px;height:28px}.draft-cand{--part:clamp(80px, min(36cqh, 16cqw), 288px)}.cand-info .label{font-size:13px}.part-name{font-size:clamp(20px,6cqh,40px)}.stats{font-size:13px;line-height:1.3}.draft-actions .btn{padding:0 10px;font-size:17px}.note{font-size:13px}.screen-title{font-size:clamp(18px,6cqh,36px)}.reveal .arena-info{font-size:12px}.stand-robot{--robot:clamp(64px, min(28cqh, 20cqw), 240px)}.reveal-stage.multi .stand-robot{--robot:clamp(56px, min(24cqh, 13cqw), 200px)}.reveal-stage.n4 .stand-robot,.reveal-stage.teams .stand-robot{--robot:clamp(48px, min(20cqh, 11cqw), 160px)}.stand-parts{grid-template-columns:minmax(0,1fr);font-size:14px;line-height:1.3}.reveal-stage.multi .stand-parts,.reveal-stage.teams .stand-parts{font-size:12px;line-height:1.2}.stand-parts .rarity{padding:0 4px;font-size:10px;line-height:1}.team-name{font-size:15px}.outcome-text{font-size:clamp(28px,9cqh,72px)}.outcome-reason{font-size:16px}.card-name{font-size:17px}.card{--robot:clamp(64px, min(22cqh, 12cqw), 192px)}.result-part{width:clamp(24px,8cqh,96px);height:clamp(24px,8cqh,96px)}.result-part-name{gap:6px;font-size:14px}.result-part-name small{font-size:12px}.result-part-name .rarity{padding:0 4px;font-size:10px}.cards.multi .card{--robot:clamp(32px, min(10cqh, 6cqw), 96px)}.cards.multi .card-body{gap:6px}.cards.multi .card-parts{grid-template-columns:auto auto;justify-content:space-between;gap:2px 8px}.cards.multi .card-parts li{gap:4px}.cards.multi .result-part{width:18px;height:18px}.cards.multi .result-part-name{font-size:12px}.cards.multi .card-name{font-size:15px}.wait-text{min-height:18px;font-size:14px}.room-bays.grid4,.room-bays.teams{--robot:clamp(32px, 10cqh, 48px)}.room-bays.grid4 .bay,.room-bays.teams .bay{gap:8px}.room-bays.teams .vs{font-size:clamp(24px,8cqh,64px)}.room-bays.teams{overscroll-behavior:contain;overflow-y:auto}.room-bays.teams .team-col>.bay{flex:1 0 auto}.room-bays.teams .bay{padding-block:2px}.room-bays .you-chip{padding:0 6px;font-size:12px}.toast{font-size:15px}}@container ui (width<=760px){.cards.multi .card{--robot:32px}.cards.multi .card-parts{column-gap:6px}.cards.multi .card-parts li{gap:3px}.cards.multi .result-part{width:16px;height:16px}.cards.multi .result-part-name{font-size:11px}}@container ui (height<=360px){.screen-host{--gap:4px;--pad:6px}.room-head .label{font-size:12px}.code{margin-top:2px;font-size:28px}.room-count,.bay-state{font-size:13px}.reveal .arena-info{font-size:11px}.reveal-stage .you-chip{font-size:12px;line-height:1.3}.reveal-stage.teams .stand,.reveal-stage.n4 .stand{padding:2px var(--pad)}.team-name{font-size:14px}.outcome-text{font-size:26px}.cards.multi .card{padding:4px 8px}.cards.multi .card-name{font-size:14px}.cards.multi .card .rank-chip{font-size:13px;line-height:1.4}}