:root{--primary: #e00000;--primary-hover: #c20000;--bg: #f5f5f6;--surface: #ffffff;--surface-2: #f0f0f2;--text: #141416;--muted: #5f5f68;--border: #e2e2e6;--shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 20px rgba(0, 0, 0, .06);--radius-sm: 8px;--radius: 12px;--radius-lg: 16px;--topbar: 56px;--font: "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;color-scheme:light}:root[data-theme=dark]{--bg: #0d0d0f;--surface: #17171a;--surface-2: #212125;--text: #f3f3f5;--muted: #a3a3ad;--border: #2c2c32;--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);color-scheme:dark}.tile,.badge{--tile: #ffffff}.tile--core,.badge--core{--tile: #17171a}*,*:before,*:after{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0}body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body.no-scroll{overflow:hidden}img{display:block;max-width:100%}button{font:inherit;color:inherit}h1,h2,h3,p{margin:0}:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.icon{flex:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:10px;border:1px solid transparent;font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,opacity .15s,transform .1s}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:var(--primary);color:#fff}.btn--primary:hover:not(:disabled){background:var(--primary-hover)}.btn--ghost{background:var(--surface-2);border-color:var(--border);color:var(--text)}.btn--ghost:hover:not(:disabled){border-color:var(--muted)}.btn--outline-light{background:#00000040;color:#fff;border-color:#ffffff8c}.btn--outline-light:hover{border-color:#fff}.btn--lg{height:52px;padding:0 26px;font-size:17px}.btn--sm{height:32px;padding:0 10px;font-size:13px;gap:6px;border-radius:8px}.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer}.icon-btn:hover{border-color:var(--muted)}.icon-btn--dark{background:#00000059;border-color:#ffffff4d;color:#fff}.icon-btn--dark:hover{border-color:#fff}.badge{display:inline-grid;place-items:center;flex:none;overflow:hidden;width:var(--size);height:var(--size);border-radius:26%;background:var(--tile);box-shadow:0 0 0 1px #0000001f}.badge img{display:block;width:100%;height:100%;object-fit:contain}.badge--core img{width:70%;height:70%}.topbar{height:var(--topbar);flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--border)}.topbar__brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-logo{height:22px;width:auto}.brand-logo--dark,[data-theme=dark] .brand-logo--light{display:none}[data-theme=dark] .brand-logo--dark{display:block}.topbar__title{font-weight:600;white-space:nowrap;padding-left:12px;border-left:1px solid var(--border)}.topbar__actions{display:flex;gap:8px}.title{position:relative;min-height:100dvh;display:flex;flex-direction:column;color:#fff;background:#0b0b0c;overflow:hidden}.title__bg{position:absolute;top:0;right:0;bottom:0;left:0}.title__bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%}.title__bg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#08080a9e}.title__top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:16px 24px}.title__logo{height:26px;width:auto}.title__tools{display:flex;gap:8px}.title__content{position:relative;z-index:1;margin:auto;max-width:760px;width:100%;padding:24px 16px 56px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}.eyebrow{font-size:14px;font-weight:500;color:#fffc;letter-spacing:.02em}.title h1{font-size:clamp(42px,8vw,84px);line-height:1.05;font-weight:700;letter-spacing:-.01em}.title__lead{font-size:clamp(16px,2.2vw,20px);color:#ffffffe0;max-width:560px}.logo-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.title__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.segmented{border:0;padding:0;margin:0;display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}.segmented legend{float:left;margin-right:10px;font-size:14px;color:#fffc}.segmented label{position:relative;cursor:pointer}.segmented input{position:absolute;opacity:0;top:0;right:0;bottom:0;left:0;cursor:pointer}.segmented span{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:500;background:#0000004d}.segmented input:checked+span{background:#fff;color:#141416;border-color:#fff}.segmented input:focus-visible+span{outline:3px solid var(--primary);outline-offset:2px}.draft{min-height:100dvh;display:flex;flex-direction:column}.draft__head{text-align:center;padding:24px 16px 8px;display:flex;flex-direction:column;align-items:center;gap:8px}.draft__head h2{font-size:clamp(22px,3vw,30px)}.draft__head p{color:var(--muted);font-size:14px}.draft__order{list-style:none;display:flex;gap:6px;padding:0;margin:4px 0 0;flex-wrap:wrap;justify-content:center}.draft__order li{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:500;background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}.draft__order li.is-current{background:var(--primary);border-color:var(--primary);color:#fff}.draft__order li.is-done{color:var(--text);border-color:var(--text);background:var(--surface)}.draft__grid{width:100%;max-width:1360px;margin:0 auto;padding:16px;display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:stretch}.pick{--accent: var(--primary);flex:1 1 220px;max-width:256px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:border-color .2s,opacity .2s}.pick__img{position:relative;padding:0;border:0;background:#141416;cursor:zoom-in;aspect-ratio:3 / 4;overflow:hidden}.pick__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.pick__img:hover img{transform:scale(1.03)}.pick__badge{position:absolute;left:10px;top:10px}.pick__owner{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;background:#fff;color:#141416}.pick__body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}.pick__name{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.pick__name b{font-size:18px}.pick__name small{color:var(--muted);font-weight:500}.pick__role{color:var(--muted);font-size:14px}.pick__stats{margin:0;display:grid;gap:6px;font-size:13px}.pick__stats div{border-top:1px solid var(--border);padding-top:6px}.pick__stats dt{font-weight:600}.pick__stats dd{margin:0;color:var(--muted)}.pick__btn{margin-top:auto;width:100%}.pick.is-mine{border:2px solid var(--primary)}.pick.is-bot{border:2px solid var(--text)}.pick.is-mine .pick__owner{background:var(--primary);color:#fff}.pick.is-unavailable{opacity:.45}.pick.is-unavailable img{filter:grayscale(1)}.draft__footer{position:sticky;bottom:0;z-index:5;background:var(--surface);border-top:1px solid var(--border);padding:14px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.versus{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;font-size:15px}.versus div{display:inline-flex;align-items:center;gap:6px}.versus>span{font-weight:700;color:var(--primary)}.versus p{width:100%;color:var(--muted);font-size:13px}.battle{height:100dvh;display:flex;flex-direction:column;overflow:hidden}.battle__grid{--gap: 16px;--board-max: calc(100dvh - var(--topbar) - 2 * var(--gap));flex:1;min-height:0;display:grid;gap:var(--gap);padding:var(--gap);grid-template-columns:minmax(210px,1fr) minmax(0,var(--board-max)) minmax(210px,1fr);grid-template-rows:minmax(0,1fr)}.panel[data-side="0"]{order:0;justify-self:end}.center-col{order:1;min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px}.panel[data-side="1"]{order:2;justify-self:start}.stage-cell{container-type:size;min-width:0;min-height:0;display:grid;place-items:center}.stage{position:relative;width:min(100cqw,100cqh);aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;padding:2.5%;background:#0a0a0cb8;border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 50px #00000059;contain:layout paint}.stage__board{position:relative;width:100%;height:100%}.battle{position:relative;isolation:isolate}.battle__bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;background:#0b0b0c}.battle__bg img{width:100%;height:100%;object-fit:cover}.battle:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:#08080a61}[data-theme=dark] .battle:before{background:#08080a99}.topbar{position:relative;z-index:20}.battle .topbar{background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.stage-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;cursor:pointer;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-weight:600;font-size:14px;white-space:nowrap}.stage-chip .icon{color:var(--stage-accent, var(--primary))}.stage-chip__turn{color:var(--muted);font-weight:500;padding-left:8px;border-left:1px solid var(--border)}.move-meter{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;text-align:center;padding:8px 14px;border-radius:var(--radius-lg);background:var(--surface);border:2px solid var(--border);box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s}.move-meter[data-turn="0"]{border-color:var(--primary)}.move-meter__who{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;background:var(--surface-2);color:var(--text);font-weight:700;font-size:15px;white-space:nowrap}.move-meter[data-turn="0"] .move-meter__who{background:var(--primary);color:#fff}.move-meter__count{display:inline-flex;align-items:baseline;gap:4px}.move-meter__count b{font-size:40px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}.move-meter[data-turn="0"] .move-meter__count b{color:var(--primary)}.move-meter__count span{font-weight:600}.move-meter__label{font-size:13px;line-height:1.3;color:var(--muted);white-space:nowrap}.move-meter__slots{display:flex;gap:6px}.move-meter__slots i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:2px dashed var(--border);color:var(--muted);opacity:.6}.move-meter__slots i.on{border-style:solid;border-color:var(--text);background:var(--text);color:var(--surface);opacity:1}.move-meter[data-turn="0"] .move-meter__slots i.on{border-color:var(--primary);background:var(--primary);color:#fff}.move-meter__slots i.is-extra{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 35%,transparent)}.move-meter.is-bump .move-meter__count b{animation:bump .45s ease}.move-meter.is-gain{box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 40%,transparent),var(--shadow)}.move-meter.is-over .move-meter__count,.move-meter.is-over .move-meter__label{opacity:.4}@keyframes bump{40%{transform:scale(1.35)}}.notice{position:absolute;left:50%;top:50%;z-index:7;transform:translate(-50%,-50%);width:min(86%,380px);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:20px 22px;border-radius:var(--radius-lg);background:#fff;color:#141416;border:2px solid var(--primary);box-shadow:0 24px 60px #00000080;animation:noticeIn .38s cubic-bezier(.2,1.4,.4,1)}.notice.is-out{animation:bannerOut .2s ease-in forwards}.notice__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff}.notice strong{font-size:28px;line-height:1.2}.notice span:last-child{font-size:14px;color:#4b4b55}@keyframes noticeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}}.board{position:relative;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none}.tile{position:absolute;left:0;top:0;width:calc(100% / 7);height:calc(100% / 7);padding:3px;border:0;background:none;cursor:pointer;transform:translate(calc(var(--c) * 100%),calc(var(--r) * 100%));transition:transform .26s cubic-bezier(.3,.75,.35,1);will-change:transform}.tile.no-anim{transition:none}.tile:focus-visible{outline:none}.tile__face{display:grid;place-items:center;width:100%;height:100%;border-radius:20%;background:var(--tile);transition:transform .15s;box-shadow:inset 0 -3px #0003,inset 0 0 0 1px #ffffff24,0 2px 6px #00000059}.tile__face{overflow:hidden}.tile__face img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.tile--core .tile__face{box-shadow:inset 0 -3px #0000004d,inset 0 0 0 2px var(--primary),0 2px 6px #00000059}.tile--core .tile__face img{width:68%;height:68%}.tile:hover .tile__face{transform:scale(1.04)}.tile:focus-visible .tile__face{outline:3px solid var(--primary);outline-offset:1px}.tile.is-selected .tile__face{outline:3px solid var(--primary);outline-offset:1px;transform:scale(.9)}.tile.is-popping{pointer-events:none}.tile.is-popping .tile__face{animation:pop .3s ease-in forwards}.tile.is-hint .tile__face{animation:hint 1.1s ease-in-out infinite}.tile.is-shake .tile__face{animation:shake .32s}.tile.is-converted .tile__face{animation:converted .7s}.tile.is-blasted .tile__face{animation:blasted .5s}.is-locked .tile{cursor:default}.is-locked .tile:hover .tile__face{transform:none}@keyframes pop{60%{transform:scale(1.18);opacity:1}to{transform:scale(.3);opacity:0}}@keyframes hint{50%{transform:scale(.88);box-shadow:0 0 0 4px var(--primary),0 2px 6px #00000059}}@keyframes shake{25%{transform:translate(-6%)}75%{transform:translate(6%)}}@keyframes converted{0%{transform:scale(.6);box-shadow:0 0 0 4px #fff}to{transform:scale(1)}}@keyframes blasted{50%{transform:scale(1.12);box-shadow:0 0 0 4px #fff,0 0 24px #fff}}.panel{container-type:inline-size;width:100%;max-width:340px;align-self:start;display:flex;flex-direction:column;gap:12px;padding:16px;max-height:100%;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s}.panel.is-active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),var(--shadow)}.panel.is-hit{animation:hit .45s}@keyframes hit{20%{transform:translate(-8px)}40%{transform:translate(7px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}}.panel__head{display:flex;justify-content:space-between;align-items:center;gap:8px}.panel__who{display:inline-flex;align-items:center;gap:8px;font-size:17px}.panel__hp{font-weight:600;font-variant-numeric:tabular-nums}.hpbar{height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--border)}.hpbar i{display:block;height:100%;width:var(--pct, 100%);background:var(--text);border-radius:inherit;transition:width .45s ease}.hpbar.is-low i{background:var(--primary)}.panel__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;min-height:28px}.cores{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}.cores b{font-size:17px}.cores small{color:var(--muted)}.statuses{display:inline-flex;gap:6px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface-2);border:1px solid var(--border)}.robots{display:grid;gap:10px}.robot{--accent: var(--primary);position:relative;display:grid;grid-template-columns:104px 1fr;gap:12px;padding:8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:box-shadow .2s,border-color .2s,transform .2s}.robot.is-full{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.robot.is-casting{transform:scale(1.03);box-shadow:0 0 0 2px var(--accent),0 0 24px var(--accent)}.robot.is-upgrading .robot__img{animation:upgrade .9s}@keyframes upgrade{0%{filter:brightness(1)}35%{filter:brightness(2.2);transform:scale(1.06)}to{filter:brightness(1)}}.robot__img{position:relative;padding:0;border:0;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:3 / 4;background:#141416;cursor:zoom-in;align-self:start}.robot__img img{width:100%;height:100%;object-fit:cover;object-position:center 20%}.robot__badge{position:absolute;left:5px;top:5px}.robot__zoom{position:absolute;right:5px;bottom:5px;display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:#0000008c;color:#fff}.robot__body{display:flex;flex-direction:column;gap:6px;min-width:0}.robot__name{display:flex;justify-content:space-between;align-items:flex-start;gap:4px;line-height:1.25}.robot__name>span{display:flex;flex-direction:column;min-width:0}.robot__name b{font-size:15px}.robot__name small{color:var(--muted);font-size:12px}.robot__info{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:8px;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text)}.robot__info:hover{border-color:var(--accent);color:var(--accent)}.robot__skill{display:flex;flex-direction:column;gap:2px;padding:0;border:0;background:none;cursor:pointer;text-align:left;font-size:12.5px;color:var(--muted);line-height:1.4}.robot__skill b{color:var(--text);font-weight:600}.mini-line{display:flex;align-items:flex-start;gap:5px}.mini-line .icon{color:var(--accent);margin-top:2px}.mana{display:flex;align-items:center;gap:8px;margin-top:auto}.mana__bar{flex:1;height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--border)}.mana__bar i{display:block;height:100%;width:var(--mana, 0%);background:var(--accent);transition:width .35s ease}.mana__num{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;min-width:28px;text-align:right}.robot__actions{display:flex;gap:6px;flex-wrap:wrap}.robot__actions .btn{flex:1}.ability-banner{--accent: var(--primary);position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%);width:min(88%,420px);display:flex;align-items:center;gap:14px;padding:14px;background:#0c0c0eeb;color:#fff;border:1px solid var(--accent);border-radius:var(--radius-lg);box-shadow:0 0 0 1px var(--accent),0 16px 40px #00000080;animation:bannerIn .25s ease-out}.ability-banner.is-out{animation:bannerOut .22s ease-in forwards}.ability-banner img{width:72px;aspect-ratio:3 / 4;object-fit:cover;border-radius:var(--radius-sm)}.ability-banner div{display:flex;flex-direction:column;min-width:0}.ability-banner small{color:#ffffffb3;font-size:12px}.ability-banner strong{font-size:22px;line-height:1.2}.ability-banner span{font-weight:600}.ability-banner ul{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:3px;font-size:14px}.ability-banner li{display:flex;align-items:center;gap:6px}.ability-banner li .icon{color:var(--accent)}@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}@keyframes bannerOut{to{opacity:0;transform:translate(-50%,-50%) scale(.96)}}.toast{position:absolute;left:50%;top:12px;z-index:6;transform:translate(-50%);padding:8px 16px;border-radius:999px;background:#0c0c0ee0;color:#fff;font-size:14px;font-weight:600;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}.toast.is-show{animation:toast 1.3s ease forwards}@keyframes toast{0%{opacity:0;transform:translate(-50%,-6px)}12%,80%{opacity:1;transform:translate(-50%)}to{opacity:0}}#fx-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:50}.float{position:fixed;transform:translate(-50%,-50%);padding:2px 10px;border-radius:999px;font-weight:700;font-size:15px;white-space:nowrap;animation:floatUp 1.1s ease-out forwards;background:#141416e0;color:#fff;box-shadow:0 4px 12px #00000040}.float--damage{background:var(--primary);font-size:20px}.float--heal{background:#fff;color:#141416;border:1px solid #d4d4d8}.float--core{background:#fff;color:var(--primary);border:1px solid var(--primary)}.float--shield{background:#141416}@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-160%)}}.beam{position:fixed;height:6px;margin-top:-3px;transform-origin:0 50%;border-radius:999px;background:var(--accent);box-shadow:0 0 10px var(--accent),0 0 24px var(--accent);animation:beam .7s ease-out forwards}@keyframes beam{0%{clip-path:inset(0 100% 0 0);opacity:1}45%{clip-path:inset(0 0 0 0);opacity:1}to{clip-path:inset(0 0 0 0);opacity:0}}.modal{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px 24px;background:var(--surface);color:var(--text);box-shadow:0 24px 60px #00000059}.modal::backdrop{background:#0009}.modal h2{font-size:22px;margin-bottom:8px;padding-right:40px}.modal p{color:var(--muted)}.modal__x{position:absolute;top:14px;right:14px}.modal__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}.howto{padding-left:20px;margin:12px 0;display:grid;gap:10px}.howto .badge{vertical-align:middle}.howto__logos{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;align-items:center;margin:12px 0}.howto__logos span{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px;line-height:1}.note{font-size:13px;text-align:center;margin-top:6px}.result{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.result h2{padding:0;font-size:28px}.result__icon{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--surface-2);color:var(--text);margin-bottom:6px}.result--win .result__icon{background:var(--primary);color:#fff}.result__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;margin:12px 0 0}.result__stats div{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:10px}.result__stats dt{font-size:13px;color:var(--muted)}.result__stats dd{margin:0;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-items:center;background:#000000eb;padding:56px 64px;touch-action:pan-y}.lightbox[hidden]{display:none}.lightbox__figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%}.lightbox__img{max-width:min(92vw,1400px);max-height:calc(100dvh - 180px);object-fit:contain;border-radius:var(--radius-sm)}.lightbox__caption{color:#fff;text-align:center;display:flex;flex-direction:column;gap:2px;max-width:640px}.lightbox__caption span{color:#fffc;font-size:14px}.lightbox__caption em{font-style:normal;color:#fff9;font-size:13px}.lightbox__close{position:absolute;top:12px;right:12px}.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px}.lightbox__nav--prev{left:12px}.lightbox__nav--next{right:12px}@container (max-width: 270px){.robot{grid-template-columns:1fr}.robot__img{aspect-ratio:16 / 10}.robot__img img{object-position:center 18%}.robot__skill{display:none}}@media(orientation:portrait),(max-width:700px){.battle__grid{--gap: 8px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;padding:8px 12px}.panel[data-side="1"]{order:0}.center-col{order:1;gap:8px}.panel[data-side="0"]{order:2}.panel,.panel[data-side="0"],.panel[data-side="1"]{justify-self:center;max-width:760px}.panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:10px;overflow:visible;grid-template-areas:"head meta" "bar bar" "robots robots"}.panel__head{grid-area:head}.panel__meta{grid-area:meta;min-height:0;flex-wrap:nowrap}.hpbar{grid-area:bar;height:10px}.robots{grid-area:robots;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.robot{grid-template-columns:52px minmax(0,1fr);gap:8px;padding:6px}.robot__img{aspect-ratio:3 / 4}.robot__skill,.robot__zoom{display:none}.robot__name b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.robot__badge .badge{--size: 18px !important}.robot__actions .btn{height:28px;font-size:12px;padding:0 6px;min-width:0}}@media(orientation:portrait)and (min-width:701px){.battle__grid{--gap: 12px;padding:12px 16px}.robot{grid-template-columns:76px minmax(0,1fr)}.robot__skill{display:block}.robot__name b{font-size:15px}}@media(orientation:landscape)and (max-height:560px){:root{--topbar: 44px}.topbar{padding:0 10px}.topbar__title{display:none}.icon-btn{width:34px;height:34px}.battle__grid{--gap: 6px;grid-template-columns:minmax(150px,1fr) minmax(0,var(--board-max)) minmax(150px,1fr);padding:6px 8px}.panel{padding:8px;gap:6px}.robots{gap:6px}.robot{grid-template-columns:40px minmax(0,1fr);gap:6px;padding:5px}.robot__img{aspect-ratio:3 / 4}.robot__skill,.robot__zoom{display:none}.robot__name b{font-size:12px}.robot__name small{display:none}.robot__badge .badge{--size: 16px !important}.robot__actions .btn{height:26px;font-size:11px;padding:0 4px}.panel__who{font-size:14px}.title__content{gap:12px;padding-bottom:24px}.title h1{font-size:40px}}@media(max-width:560px){.topbar__title{display:none}.topbar{padding:0 10px}.topbar__actions{gap:6px}.icon-btn{width:36px;height:36px}.brand-logo{height:18px}.draft__grid{gap:10px;padding:12px}.pick{flex:0 1 calc(50% - 5px);max-width:calc(50% - 5px)}.pick__body{padding:10px}.pick__name{flex-direction:column;gap:0}.pick__name b{font-size:15px}.pick__stats{font-size:12px}.pick__btn{font-size:13px;padding:0 8px}.lightbox{padding:56px 8px}.lightbox__nav{top:auto;bottom:16px;transform:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.skill-list{list-style:none;padding:0;margin:0;display:grid;gap:5px;font-size:13.5px;line-height:1.45}.skill-list li{display:flex;align-items:flex-start;gap:7px}.skill-list li span,.mini-line,.charge>span{min-width:0;overflow-wrap:anywhere}.skill-list .icon{color:var(--accent, var(--primary));margin-top:3px}.charge{display:flex;align-items:flex-start;gap:7px;font-size:13px;line-height:1.5;padding:8px 10px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border)}.charge>.icon{color:var(--accent, var(--primary));margin-top:3px}.charge .badge{vertical-align:-5px;margin:0 2px}.pick__form{display:flex;flex-direction:column;gap:6px}.pick__form--evo{border-top:1px dashed var(--border);padding-top:10px}.pick__tag{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.01em}.stage-pick{width:100%;max-width:1360px;margin:12px auto 0;padding:0 16px}.stage-pick__head,.draft__sub{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;text-align:center}.stage-pick__head h3,.draft__sub{display:inline-flex;align-items:center;gap:8px;font-size:20px;margin:0}.stage-pick__head h3 small{font-size:14px;color:var(--muted);font-weight:500}.draft__sub{margin:24px auto 0}.stage-pick__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:6px 6px 10px}.stage-card{--accent: var(--primary);position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);outline:2px solid transparent;transition:outline-color .2s}.stage-card.is-selected{outline:3px solid var(--primary);outline-offset:2px}.stage-card__select{position:relative;display:block;width:100%;aspect-ratio:16 / 10;padding:0;border:0;background:#111;cursor:pointer;text-align:left}.stage-card__select img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}.stage-card__select:hover img{transform:scale(1.04)}.stage-card__text{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:#08080ac7;color:#fff;border-top:3px solid var(--accent)}.stage-card__text b{font-size:15px}.stage-card__text small{font-size:12.5px;line-height:1.4;color:#ffffffdb}.stage-card__check{position:absolute;left:8px;top:8px;display:none;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:999px;background:var(--primary);color:#fff;font-size:12px;font-weight:700}.stage-card.is-selected .stage-card__check{display:inline-flex}.stage-card__zoom{position:absolute;right:8px;top:8px;width:34px;height:34px}.modal--wide{width:min(780px,calc(100% - 32px))}.skill-modal{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}.skill-modal__img{position:relative;padding:0;border:0;border-radius:var(--radius);overflow:hidden;background:#141416;cursor:zoom-in;aspect-ratio:3 / 4}.skill-modal__img img{width:100%;height:100%;object-fit:cover}.skill-modal__body{display:flex;flex-direction:column;gap:10px;min-width:0}.skill-modal__body h2{margin:0;padding:0}.skill-modal__brand{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--text)!important}.skill-modal__role{margin-top:-6px}.mana--lg .mana__bar{height:12px}.mana--lg .mana__num{font-size:14px}.skill-modal .mana{--accent: inherit}.skill-form{border:1px solid var(--border);border-radius:var(--radius);padding:12px}.skill-form.is-now{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.skill-form header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}.skill-form__tag{font-size:12px;font-weight:700;color:var(--muted)}.skill-form__now{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--accent)}.skill-form h3{font-size:17px;margin:0 0 8px}.skill-form h3 small{font-weight:500;color:var(--muted)}.skill-form .skill-list{font-size:15px;gap:7px}.stage-info__img{display:block;width:100%;padding:0;border:0;border-radius:var(--radius);overflow:hidden;margin-bottom:14px;cursor:zoom-in;aspect-ratio:16 / 9;background:#111}.stage-info__img img{width:100%;height:100%;object-fit:cover}.stage-info__rule{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--text)!important}.howto__h{font-size:16px;margin:16px 0 6px}.howto__stages{margin:0 0 12px;padding-left:20px;display:grid;gap:4px;font-size:14px}@media(max-width:960px){.stage-pick__list{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(220px,42%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.stage-card{scroll-snap-align:center}}@media(max-width:640px){.skill-modal{grid-template-columns:1fr}.skill-modal__img{width:150px;justify-self:center}.stage-pick__list{grid-auto-columns:78%}.move-meter{gap:4px 10px;padding:6px 10px}.move-meter__who{height:30px;font-size:13px;padding:0 10px}.move-meter__count b{font-size:30px}.move-meter__label{font-size:11.5px}.move-meter__slots i{width:28px;height:28px;border-radius:8px}.stage-chip__turn{display:none}.stage-chip{padding:0 10px;font-size:13px}}@media(orientation:landscape)and (max-height:560px){.center-col{gap:6px}.move-meter{padding:4px 10px;gap:8px}.move-meter__who{height:26px;font-size:12px}.move-meter__count b{font-size:24px}.move-meter__label{font-size:11px}.move-meter__slots i{width:24px;height:24px}.stage-chip{height:30px;font-size:12px}}@media(max-width:420px){.move-meter{flex-wrap:nowrap;gap:8px}.lbl-long{display:none}.move-meter__count b{font-size:28px}.move-meter__slots{gap:4px}.move-meter__slots i{width:24px;height:24px;border-radius:7px}.move-meter__slots .icon{width:12px;height:12px}}.sound{position:relative;display:inline-flex}.icon-btn.is-muted{color:var(--muted)}.sound__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:220px;padding:6px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 16px 40px #00000040}.sound__row{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:var(--radius-sm);background:none;color:inherit;font-weight:600;font-size:14px;cursor:pointer;text-align:left}.sound__row:hover{background:var(--surface-2)}.sound__row span{flex:1}.switch{position:relative;width:38px;height:22px;border-radius:999px;background:var(--border);transition:background .2s;flex:none}.switch:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0000004d;transition:transform .2s}.sound__row.is-on .switch{background:var(--primary)}.sound__row.is-on .switch:after{transform:translate(16px)}