:root{color-scheme:dark;--night:#05070c;--ink:#0d111b;--gold:#ffc45c;--cyan:#2ddcff;--magenta:#f044c8;--victory:#5ce1a1;--danger:#ff5d62;--text:#f7f4ed;--muted:#aeb8cc;--panel:#16130f;--line:rgba(255,240,193,.24);--cream:#fff0c1}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#020306;color:var(--text);font-family:"Patrick Hand","Comic Sans MS",cursive;overscroll-behavior:none}body{min-height:100vh;min-height:100dvh;overflow-x:hidden}button,input{font:inherit}button{color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}img{display:block;max-width:100%}#app{min-height:100dvh}.game-root{position:relative;width:min(100vw,520px);min-height:100dvh;margin:0 auto;background:var(--night);overflow:hidden;box-shadow:0 0 80px #000}.screen{position:relative;min-height:100dvh;overflow:hidden;background:var(--night)}.screen-scroll{position:relative;z-index:3;height:100dvh;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding-bottom:calc(24px + env(safe-area-inset-bottom))}.screen-scroll::-webkit-scrollbar{display:none}.content{position:relative;z-index:3;padding:max(8px,env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom))}.arena-bg{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;animation:bgDrift 22s ease-in-out infinite alternate;filter:saturate(.94)}@keyframes bgDrift{from{transform:scale(1.02) translateX(-7px)}to{transform:scale(1.08) translateX(7px)}}.arena-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,6,12,.58),rgba(2,3,7,.18) 45%,rgba(2,3,7,.9));pointer-events:none}.arena-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(45,220,255,.10),transparent 58%);animation:glow 2.8s ease-in-out infinite alternate;pointer-events:none}@keyframes glow{from{opacity:.5}to{opacity:1}}.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}.particle{position:absolute;border-radius:50%;background:var(--cyan);opacity:.12;animation:particleDrift 9s linear infinite}.particle:nth-child(3n){background:var(--gold);opacity:.15}@keyframes particleDrift{from{transform:translateY(0)}to{transform:translateY(-12vh)}}
.paint-panel,.paint-circle{position:relative;isolation:isolate}.paint-panel::before,.paint-circle::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-position:center;background-repeat:no-repeat}.paint-panel::before{background-image:url('assets/ui/fc_ui_name_rect.png');background-size:100% 100%}.paint-circle::before{background-image:url('assets/ui/fc_ui_circle_paint.png');background-size:100% 100%}.paint-button{border:0;background:transparent;position:relative;cursor:pointer;min-height:58px;padding:12px 22px;font-weight:900;text-transform:uppercase;letter-spacing:.2px}.paint-button::before{content:"";position:absolute;inset:0;z-index:-1;background:url('assets/ui/fc_ui_name_rect.png') center/100% 100% no-repeat}.paint-button:active{transform:scale(.985)}.paint-button[disabled]{opacity:.4}.btn-sub{display:block;color:rgba(255,255,255,.7);font-size:10px;margin-top:2px}.back-btn{width:78px;height:62px;border:0;background:transparent url('assets/ui/fc_ui_arrow_paint.png') center/contain no-repeat;transform:rotate(90deg);filter:brightness(0) invert(1) sepia(.2);cursor:pointer;flex:none}.circle-action{width:54px;height:54px;border:0;background:transparent;position:relative;display:grid;place-items:center;cursor:pointer}.circle-action::before{content:"";position:absolute;inset:0;background:url('assets/ui/fc_ui_circle_paint.png') center/100% 100% no-repeat;z-index:-1}.circle-action img{width:58%;height:58%;object-fit:contain;filter:brightness(0) invert(1)}.toast{position:fixed;z-index:200;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);width:min(420px,calc(100% - 32px));padding:12px 16px;border-radius:5px;background:rgba(5,7,12,.96);border:1px solid rgba(255,196,92,.55);box-shadow:0 15px 45px #000;color:#fff;font-size:14px;text-align:center;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* login */
.auth-screen .arena-shade{background:rgba(2,4,8,.63)}.auth-content{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:28px 24px}.auth-logo{width:112px;margin-bottom:10px}.auth-head{text-align:center;margin-bottom:18px}.auth-head h1{margin:0;color:var(--gold);font-size:46px;line-height:.94}.auth-head p{margin:7px 0 0;color:var(--muted);font-size:14px;letter-spacing:1px}.auth-panel{width:100%;padding:24px 22px 20px;--paint:#3a251b}.field{display:grid;gap:6px;margin-bottom:12px}.field label{font-size:12px;font-weight:800}.field input{width:100%;height:50px;background:rgba(11,16,25,.9);border:1px solid rgba(255,255,255,.18);border-radius:6px;color:white;padding:0 14px;outline:none;font-family:Arial,sans-serif;font-size:16px}.field input:focus{border-color:var(--gold)}.forgot{display:block;text-align:right;color:var(--cyan);font-size:13px;margin:0 2px 8px;text-decoration:none}.auth-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:8px}.auth-error{width:100%;padding:10px 12px;margin-bottom:10px;background:rgba(255,93,98,.14);border:1px solid rgba(255,93,98,.45);font-family:Arial,sans-serif;font-size:12px;color:#ffd7d9;border-radius:5px}
/* shared topbar */
.screen-topbar{height:72px;display:flex;align-items:center;gap:4px;margin:0 0 8px}.topbar-copy{flex:1;min-width:0}.topbar-title{font-size:27px;font-weight:900;white-space:nowrap}.topbar-count{font-size:11px;color:var(--gold);font-weight:800;letter-spacing:.7px}.topbar-right-icon{width:58px;height:58px;display:grid;place-items:center;padding:12px;flex:none}.topbar-right-icon img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1) sepia(.2)}.profile-topbar{gap:8px}.topbar-square{width:56px;height:56px;border:0;background:transparent;display:grid;place-items:center;padding:13px;flex:none}.topbar-square img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}.topbar-square.more-dots{font-size:28px;padding:0}.section-label{display:flex;justify-content:space-between;align-items:center;padding:6px 5px;font-size:13px;letter-spacing:1px;font-weight:900;color:var(--gold)}
/* home */
.home-content{padding:8px 20px 30px}.home-profile-row{height:78px;display:grid;grid-template-columns:74px 1fr 62px;align-items:center;gap:10px;margin-bottom:20px}.home-avatar-tile,.home-settings-tile,.cash-chip{border:0;background:transparent;height:72px}.home-avatar-tile{display:grid;place-items:center;position:relative;padding:8px}.home-avatar-ring{width:52px;height:52px;display:grid;place-items:center;padding:6px}.home-avatar-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover}.home-level-badge{position:absolute;right:-2px;bottom:-1px;width:30px;height:30px;display:grid;place-items:center;font-size:12px;color:var(--cream)}.cash-chip{display:flex;flex-direction:column;align-items:center;justify-content:center}.cash-chip strong{font-size:25px;color:var(--gold);line-height:1}.cash-chip span{font-size:10px;color:var(--muted);margin-top:5px}.home-settings-tile{display:grid;place-items:center;padding:14px}.home-settings-tile img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1) sepia(.25)}.mode-list{display:grid;gap:13px}.mode-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.mode-stack{display:grid;grid-template-rows:1fr 1fr;gap:13px}.mode-tile{border:0;background:transparent url('assets/ui/fc_ui_name_rect.png') center/100% 100% no-repeat;position:relative;text-align:left;color:white;cursor:pointer;overflow:hidden;padding:0;min-height:126px}.mode-tile::before{display:none}.mode-tile.quick{height:168px}.mode-row.twins .mode-tile{height:154px}.mode-tile.wide{height:136px}.mode-row.team-row{height:224px}.mode-row.last-row{height:126px}.mode-icon{position:absolute;right:20px;top:16px;width:40%;height:66%;object-fit:contain;opacity:.93;filter:brightness(0) invert(1) sepia(.22)}.mode-tile.tall .mode-icon{width:60%;height:56%;right:12px;top:13px}.mode-copy{position:absolute;left:34px;right:16px;bottom:32px;z-index:2}.mode-title{font-size:24px;font-weight:900;line-height:1;text-transform:uppercase;white-space:nowrap}.mode-sub{font-size:12px;margin-top:8px;color:rgba(255,255,255,.92);font-weight:600}.mode-tile:active{transform:scale(.99)}
/* cards */
.catalog-content{padding:8px 12px 24px}.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;padding:8px 4px 20px}.fighter-card{position:relative;aspect-ratio:154/224;border-radius:19px;overflow:hidden;background:#0b111b;border:2px solid var(--tier,#697386);box-shadow:0 11px 24px rgba(0,0,0,.4);isolation:isolate;cursor:pointer}.fighter-card::before{content:"";position:absolute;inset:-1px;border-radius:19px;padding:2px;background:linear-gradient(135deg,var(--tier),rgba(255,255,255,.78),var(--tier));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:5}.card-art{position:absolute;inset:0 0 24% 0;width:100%;height:76%;object-fit:cover;object-position:center top}.card-fallback{position:absolute;inset:0 0 20%;display:grid;place-items:center;background:radial-gradient(circle,#243448,#080b12 68%)}.card-fallback img{width:56%;opacity:.74}.card-gradient{position:absolute;inset:36% 0 0;background:linear-gradient(180deg,transparent,#080c13 50%,#05070c 100%)}.card-level{position:absolute;right:6px;top:5px;width:40px;height:40px;display:grid;place-items:center;font-weight:900;font-size:14px;--paint:var(--tier)}.card-name{position:absolute;left:10px;right:46px;bottom:61px;font-size:15px;line-height:1;font-weight:900;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 5px #000}.card-stats{position:absolute;left:0;right:0;bottom:0;height:56px;background:rgba(5,8,13,.94);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;padding:5px 7px;gap:1px 4px}.mini-stat{font-size:7px;color:var(--muted);font-weight:800;line-height:1.05}.mini-stat b{display:block;color:white;font-size:10px;margin-top:1px}.fighter-card.small{width:92px;height:148px;aspect-ratio:auto;border-radius:13px}.fighter-card.small .card-name{bottom:14px;right:7px;font-size:11px}.fighter-card.small .card-stats{display:none}.fighter-card.small .card-art{height:83%;inset:0 0 17%}.fighter-card.small .card-gradient{inset:44% 0 0}.fighter-card.small .card-level{width:29px;height:29px;font-size:10px}.fighter-card.team-card{width:100%;height:100%;aspect-ratio:auto;border-radius:9px}.fighter-card.team-card .card-stats{display:none}.fighter-card.team-card .card-name{font-size:8px;bottom:9px;right:4px;left:6px}.fighter-card.team-card .card-art{height:86%;inset:0 0 14%}.fighter-card.team-card .card-gradient{inset:42% 0 0}.fighter-card.team-card .card-level{width:24px;height:24px;font-size:8px}.fighter-card.battle-size{width:190px;height:276px;aspect-ratio:auto}.fighter-card.battle-size .card-name{font-size:18px;bottom:16px;right:8px}.fighter-card.battle-size .card-stats{display:none}.fighter-card.battle-size .card-art{height:90%;inset:0 0 10%}.fighter-card.battle-size .card-gradient{inset:52% 0 0}.fighter-card.expanded{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:184px;height:294px;aspect-ratio:auto;z-index:5;border-radius:22px}.fighter-card.expanded .card-name{font-size:19px;bottom:67px}.fighter-card.expanded .card-stats{display:none}.fighter-card.expanded .card-art{height:88%;inset:0 0 12%}.fighter-card.expanded .card-gradient{inset:48% 0 0}.fighter-card.expanded .card-level{width:45px;height:45px;font-size:14px}.card-back .card-fallback{inset:0;background:#000}.card-back .card-fallback img{width:68%}
/* expanded card / radial stats */
.expanded-card-overlay{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.88);display:grid;place-items:center;animation:fadeIn .16s ease}.expanded-stage{position:relative;width:min(480px,100vw);height:min(780px,100dvh);max-height:100dvh;animation:zoomStage .28s ease-out}.expanded-stage::before{content:"";position:absolute;left:50%;top:50%;width:238px;height:352px;transform:translate(-50%,-50%) rotate(-1deg);border:4px solid rgba(45,220,255,.72);clip-path:polygon(8% 0,91% 2%,100% 12%,96% 92%,85% 100%,7% 97%,0 85%,3% 10%);box-shadow:0 0 18px rgba(45,220,255,.35)}.animated-card-frame{position:absolute;left:50%;top:50%;width:248px;height:362px;transform:translate(-50%,-50%);border:3px solid rgba(255,196,92,.46);clip-path:polygon(8% 0,91% 2%,100% 12%,96% 92%,85% 100%,7% 97%,0 85%,3% 10%);animation:framePulse 1.15s ease-in-out infinite alternate}.radial-stat{position:absolute;width:86px;height:86px;border:0;border-radius:50%;background:transparent url('assets/ui/fc_ui_circle_paint.png') center/100% 100% no-repeat;color:#fff;filter:drop-shadow(0 0 7px var(--stat));display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:12;cursor:default;padding:13px}.radial-stat.enabled{cursor:pointer;animation:statPulse 1.1s ease-in-out infinite alternate}.radial-stat.enabled:active{transform:scale(.94)}.radial-stat img{width:22px;height:22px;object-fit:contain;filter:brightness(0) invert(1);margin-bottom:1px}.radial-stat span{font-size:7px}.radial-stat b{font-size:15px;line-height:1.05}.radial-rank{left:50%;top:calc(50% - 262px);transform:translateX(-50%)}.radial-biceps{left:calc(50% - 188px);top:calc(50% - 160px)}.radial-chest{right:calc(50% - 188px);top:calc(50% - 160px)}.radial-fame{left:calc(50% - 192px);top:calc(50% + 92px)}.radial-height{right:calc(50% - 192px);top:calc(50% + 92px)}.radial-weight{left:50%;top:calc(50% + 215px);transform:translateX(-50%)}.expanded-footer{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:var(--muted);font-size:12px;letter-spacing:1px;font-weight:900}.expanded-footer.callable-label{color:var(--victory)}@keyframes zoomStage{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}@keyframes framePulse{from{filter:drop-shadow(0 0 2px var(--cyan));transform:translate(-50%,-50%) scale(.985)}to{filter:drop-shadow(0 0 10px var(--magenta));transform:translate(-50%,-50%) scale(1.025)}}@keyframes statPulse{from{filter:brightness(.88)}to{filter:brightness(1.18)}}
/* fight team */
.team-screen .arena-bg{filter:saturate(.83)}.team-content{padding:8px 20px 26px}.team-rating{height:102px;--paint:#5c3b19;display:flex;align-items:center;padding:10px 26px;gap:18px}.mdr-circle{width:70px;height:70px;display:grid;place-items:center;--paint:#16130f}.mdr-circle b{font-size:24px}.mdr-label{font-size:27px;flex:1}.rating-right{text-align:center}.rating-right span{display:block;font-size:10px;border:1px solid var(--cream);padding:8px 22px;margin-bottom:5px}.rating-right b{font-size:18px}.corner-empty{height:104px;margin:8px 0;--paint:#39271c;display:grid;grid-template-columns:70px 1fr 98px;align-items:center;padding:12px 22px;gap:12px}.corner-empty img{width:58px;opacity:.8}.corner-empty b{display:block;font-size:15px}.corner-empty span{font-family:Arial,sans-serif;font-size:11px;color:var(--muted)}.mini-paint{height:56px;border:1px solid var(--cream);background:#19140f;color:#fff;font-size:11px;clip-path:polygon(3% 0,100% 0,100% 88%,91% 100%,0 100%,0 10%)}.team-slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 6px;justify-items:center}.team-slot{width:100%;height:138px;display:grid;place-items:center;padding:4px;border:3px solid var(--victory);border-radius:17px;background:rgba(4,7,10,.24)}.team-slot:nth-child(n+5){transform:translateX(50%)}.team-slot.pink{border-color:#ff6682}.team-slot-empty{text-align:center}.team-slot-empty strong{display:block;font-size:31px;color:var(--victory)}.team-slot.pink .team-slot-empty strong{color:#ff6682}.team-slot-empty span{font-size:9px;color:var(--cream)}.reserve-label{margin-top:12px;color:var(--cyan)}.team-reserve-panel{height:188px;--paint:#2b1e17;display:grid;align-items:center;padding:8px 14px}.team-reserve{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}.team-reserve::-webkit-scrollbar{display:none}.no-reserve{text-align:center;color:var(--cream);font-size:18px}.team-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:9px;margin-top:10px}.team-bottom{height:67px}
/* arrange */
.arrange-screen{height:100dvh;overflow:hidden}.arrange-screen .arena-shade{background:linear-gradient(180deg,rgba(2,4,7,.38),rgba(2,4,7,.7))}.arrange-content{min-height:100dvh;display:flex;flex-direction:column;padding-left:12px;padding-right:12px}.arrange-head{height:68px;display:flex;align-items:center;padding:0 2px;flex:none}.arrange-title{flex:1;text-align:center}.arrange-title b{display:block;color:var(--gold);font-size:26px}.arrange-title span{font-size:11px}.auto-btn{width:110px;height:52px;border:1px solid var(--cream);background:#17130f;clip-path:polygon(4% 0,100% 0,100% 88%,91% 100%,0 100%,0 10%);font-size:14px}.lineup-grid{flex:1;min-height:460px;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;padding:8px 0}.slot-row{display:flex;gap:17px;justify-content:center}.lineup-slot{width:118px;height:176px;position:relative;display:grid;place-items:center;background:transparent url('assets/ui/fc_ui_slot.png') center/100% 100% no-repeat;transition:.15s;touch-action:pan-y}.lineup-slot.hover{filter:drop-shadow(0 0 10px var(--cyan));transform:scale(1.04)}.lineup-slot .fighter-card.small{width:108px;height:168px}.slot-empty{text-align:center;color:rgba(255,255,255,.35)}.slot-empty strong{display:block;font-size:42px}.slot-empty span{font-size:12px;color:var(--cream)}.ability-pocket{width:176px;height:54px;--paint:#281d16;margin:0 0 5px 2px;display:flex;align-items:center;justify-content:space-evenly;padding:8px}.ability-dot{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;font-size:7px;border:2px solid}.ability-dot.red{border-color:#ff5d62}.ability-dot.cyan{border-color:#2ddcff}.ability-pocket b{color:var(--gold)}.ready-btn{width:calc(100% - 70px);margin:0 35px 6px;min-height:74px}.reserve-head{display:flex;justify-content:space-between;padding:2px 6px;font-size:13px;letter-spacing:1.2px}.reserve-head span:first-child{color:#fff}.reserve-head span:last-child{color:var(--gold)}.reserve-strip{height:190px;margin-bottom:8px;overflow-x:auto;display:flex;gap:12px;align-items:center;padding:10px 18px;--paint:#261b15;scrollbar-width:none;touch-action:pan-x}.reserve-strip::-webkit-scrollbar{display:none}.reserve-card-wrap{flex:none;touch-action:pan-x}.drag-ghost-card{position:fixed!important;z-index:300!important;width:92px!important;height:148px!important;pointer-events:none!important;transform:translate(-50%,-50%) scale(1.08)!important;opacity:.94!important}
/* profile / settings */
.meta-content{padding:8px 20px 28px}.profile-card{height:164px;--paint:#5a381e;display:flex;align-items:center;padding:22px 36px;gap:24px}.profile-large-avatar{width:92px;height:92px;padding:8px;--paint:#6e4a1b}.profile-large-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}.profile-card h2{font-size:24px;margin:0 0 4px}.profile-card p{margin:0;color:var(--muted);font-size:11px}.profile-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}.profile-metric{height:82px;--paint:#4d321c;display:flex;flex-direction:column;align-items:center;justify-content:center}.profile-metric b{font-size:22px}.profile-metric span{font-size:9px}.save-fighter{--paint:#4d321c;padding:28px;margin-top:10px;text-align:center}.save-fighter h3{margin:0;color:var(--gold);font-size:24px}.save-fighter p{color:var(--muted);font-family:Arial,sans-serif;font-size:13px}.settings-content{padding-bottom:40px}.settings-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:10px 0 16px}.settings-tab{height:62px;border:1px solid var(--cream);background:#17130f;clip-path:polygon(3% 0,100% 0,100% 88%,92% 100%,0 100%,0 9%);font-size:12px}.settings-tab span{font-size:20px;margin-right:8px}.settings-tab.selected{box-shadow:inset 0 -4px 0 #fff;border:3px solid #fff}.settings-panel{--paint:#4f321b;padding:20px;margin-bottom:14px}.settings-action{width:100%;min-height:66px;border:1px solid var(--cream);background:transparent;--paint:#251a14;margin-bottom:8px;font-size:17px}.settings-action.selected{outline:3px solid var(--gold);color:var(--gold)}.setting-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}.settings-kicker{font-size:10px;color:var(--muted);margin:11px 0 8px}.setting-row{width:100%;height:58px;border:0;background:transparent;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between}.toggle{width:48px;height:26px;border-radius:20px;background:#39404a;position:relative}.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}.toggle.on{background:var(--cyan)}.toggle.on::after{left:25px}.slider-row{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center;height:60px;font-size:11px}.slider-row input{accent-color:var(--gold)}.setting-info{display:flex;justify-content:space-between;padding:18px 4px}.community-label{color:var(--gold)}.community-panel{--paint:#4b321d;height:112px;padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.community-panel button{border:1px solid var(--cream);background:#17130f;font-size:24px}.community-panel button span{display:block;font-size:9px;margin-top:4px}.settings-wide{width:100%;margin-top:8px}
/* store */
.store-screen .arena-shade{background:rgba(0,0,0,.1)}.store-content{padding:8px 14px 28px}.store-balance{height:94px;--paint:#805c18;display:grid;grid-template-columns:72px 1fr 42px;align-items:center;padding:10px 26px}.store-cash-icon{width:64px;height:64px;--paint:#17130f;padding:12px}.store-cash-icon img{width:100%;height:100%;object-fit:contain}.store-balance span{font-size:10px;letter-spacing:1.2px}.store-balance b{display:block;font-size:31px}.store-balance>strong{color:var(--gold);font-size:19px}.store-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0 12px}.store-tabs button{height:47px;border:1px solid rgba(255,255,255,.16);background:transparent;--paint:#423225;font-size:10px}.store-tabs button.selected{outline:2px solid #fff;color:var(--gold)}.store-section-title{font-size:23px;margin:8px 5px 14px}.store-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.store-item{height:306px;--paint:#301d16;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px}.store-item img{width:100px;height:100px;object-fit:contain;filter:grayscale(1) brightness(3)}.store-item h3{font-size:18px;margin:12px 0 2px}.store-item p{font-size:11px;margin:0}.store-item>span{color:var(--gold);font-size:11px;margin:4px 0 12px}.store-item button{width:100%;height:62px;border:1px solid var(--cream);background:#17130f;font-size:17px}.store-empty{--paint:#433326;padding:36px;text-align:center;min-height:200px}.store-empty p{font-family:Arial,sans-serif;color:var(--muted);font-size:13px}
/* recruit */
.recruit-screen .arena-shade{background:rgba(0,0,0,.22)}.recruit-content{padding:8px 20px 34px}.recruit-content>h2{font-size:24px;margin:16px 0 3px}.recruit-sub{margin:0 0 14px;color:var(--muted);font-size:11px}.recruit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.recruit-pack{height:220px;border:0;background:transparent;--paint:#321f17;display:flex;flex-direction:column;align-items:center;justify-content:center;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--glow) 20%,transparent))}.recruit-pack img{width:76px;filter:drop-shadow(0 0 12px var(--glow))}.recruit-pack h3{font-size:24px;margin:10px 0 2px}.recruit-pack p{margin:0;color:var(--muted);font-size:10px}.recruit-pack b{margin-top:8px;font-size:14px}.recruit-pack.disabled{opacity:.6}.build-team-card{--paint:#4d301c;margin-top:20px;padding:28px;text-align:center}.build-team-card img{width:85px;margin:0 auto;opacity:.8}.build-team-card h3{color:var(--gold);font-size:20px}.build-team-card .paint-button{width:100%}
/* battle */
.battle-screen{background:#000}.stage-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}.battle-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.15) 45%,rgba(0,0,0,.78));pointer-events:none}.battle-ui{position:relative;z-index:4;height:100dvh;padding:max(6px,env(safe-area-inset-top)) 10px calc(9px + env(safe-area-inset-bottom));display:flex;flex-direction:column}.battle-top{height:68px;display:grid;grid-template-columns:58px 1fr 28px 1fr 58px 58px;gap:5px;align-items:center}.battle-exit,.round-chip{width:56px;height:56px;border:0;background:transparent;--paint:#5d4221;font-size:22px}.battle-score{height:58px;--paint:#3f2a1c;display:grid;grid-template-columns:1fr 28px;grid-template-rows:1fr 1fr;align-items:center;padding:6px 16px}.battle-score span{font-size:9px;grid-column:1}.battle-score b{grid-column:2;grid-row:1/3;font-size:24px}.battle-score small{font-size:8px;color:var(--muted)}.battle-score.muted-side{opacity:.75}.pause-btn{height:54px;border:0;background:transparent;--paint:#5d4221;font-size:24px}.vs-mini{color:var(--gold);font-size:17px;text-align:center}.round-chip{font-size:13px}.opponent-zone{height:33%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding-top:8px}.battle-card-label{font-size:10px;margin-bottom:5px}.battle-card-label i,.player-call-meta i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--danger);margin-right:3px}.battle-card-label span{font-size:8px;color:var(--muted)}.opponent-card-wrap{transition:.3s;position:relative}.opponent-ability-pips{position:absolute;z-index:8;right:-2px;top:-8px;display:flex;gap:3px}.opponent-ability-pips i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#258f97;border:2px solid var(--cream);font-style:normal;font-size:10px}.opponent-ability-pips i:nth-child(2){background:#ce4e4c}.player-zone{position:relative}.battle-ability-pocket{position:absolute;left:50%;bottom:2px;transform:translate(-50%,100%);width:178px;height:48px;display:flex;align-items:center;justify-content:space-evenly;padding:7px;z-index:9}.battle-ability-pocket .ability-dot{width:31px;height:31px}.battle-ability-pocket b{color:var(--gold)}.battle-status{height:74px;--paint:#50331c;display:grid;place-items:center;text-align:center;margin:2px 16px}.status-main{font-size:18px;font-weight:900}.player-zone{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding-bottom:34px}.player-card-wrap{cursor:pointer;transition:.22s}.player-card-wrap.callable{filter:drop-shadow(0 0 14px rgba(92,225,161,.56));animation:cardPulse 1s ease-in-out infinite alternate}.player-call-meta{height:58px;text-align:center;font-size:10px;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center}.player-call-meta span{color:var(--victory)}.player-call-meta span i{background:var(--victory)}.player-call-meta b{color:var(--victory);letter-spacing:1px;font-size:11px}@keyframes cardPulse{from{transform:scale(1)}to{transform:scale(1.025)}}.vs-intro{position:absolute;z-index:180;inset:0;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;overflow:hidden}.vs-side{position:absolute;width:56%;top:50%;transform:translateY(-50%);padding:14px;--paint:#3d281b}.vs-side.left{left:-65%;animation:slideLeft .58s cubic-bezier(.2,.8,.2,1) .15s forwards}.vs-side.right{right:-65%;animation:slideRight .58s cubic-bezier(.2,.8,.2,1) .15s forwards;text-align:right}.vs-name{font-size:23px;text-transform:uppercase}.vs-role{font-size:9px;color:var(--muted)}.vs-center{font-size:72px;color:var(--gold);opacity:0;animation:vsHit .35s ease-out .72s forwards}@keyframes slideLeft{to{left:-4%}}@keyframes slideRight{to{right:-4%}}@keyframes vsHit{0%{opacity:0;transform:scale(2.2)}70%{opacity:1;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}.screen-flash{position:absolute;inset:0;background:#fff;animation:flash .18s ease-out .82s both}@keyframes flash{from{opacity:.65}to{opacity:0}}.flip{animation:flipCard .48s ease}@keyframes flipCard{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}.round-banner{position:fixed;z-index:170;left:50%;top:50%;transform:translate(-50%,-50%);width:min(390px,88vw);text-align:center;padding:24px 28px;--paint:#4e321c;animation:roundPop .25s ease-out}.round-banner .r-stat{color:var(--gold);font-size:10px;letter-spacing:1.5px}.round-banner .r-result{font-size:35px;margin:4px 0}.round-banner .r-values{color:var(--muted);font-size:13px}.round-banner.win .r-result{color:var(--victory)}.round-banner.loss .r-result{color:var(--danger)}.round-banner.draw .r-result{color:var(--gold)}@keyframes roundPop{from{opacity:0;transform:translate(-50%,-50%) scale(.72)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.capture-down{animation:captureDown .72s cubic-bezier(.2,.8,.2,1) forwards}.capture-up{animation:captureUp .72s cubic-bezier(.2,.8,.2,1) forwards}.capture-stay{filter:drop-shadow(0 0 18px rgba(92,225,161,.5))}@keyframes captureDown{to{transform:translateY(38vh) scale(.42);opacity:.12}}@keyframes captureUp{to{transform:translateY(-38vh) scale(.42);opacity:.12}}
/* result */
.result-content{min-height:100dvh;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) 16px calc(10px + env(safe-area-inset-bottom));position:relative;z-index:4}.result-head{height:94px;display:flex;align-items:center}.result-icon{width:78px;height:78px;--paint:var(--accent);padding:17px}.result-icon img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}.result-copy{padding-left:12px;flex:1}.result-mode{color:var(--muted);font-size:9px}.result-title{color:var(--accent);font-size:36px;line-height:1}.result-sub{font-size:9px;color:rgba(255,255,255,.76)}.result-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px}.metrics{height:112px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;--paint:#4d321c;padding:0 20px}.metric{text-align:center}.metric b{display:block;font-size:22px}.metric span{font-size:7px;color:var(--muted)}.performance{min-height:140px;padding:28px;--paint:#4d321c}.performance h3{margin:0 0 10px;color:var(--gold);font-size:14px}.perf-row{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;padding:4px 0}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-intro{position:fixed;inset:0;z-index:190;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;animation:resultFade 1.6s ease forwards}.result-intro img{width:118px;height:118px;object-fit:contain;filter:drop-shadow(0 0 24px var(--accent));animation:resultIcon .6s ease-out}.result-intro h1{font-size:54px;color:var(--accent);margin:8px 0 0;text-transform:uppercase}.result-intro p{margin:4px 0;color:var(--muted);font-size:11px}@keyframes resultIcon{from{transform:scale(.3) rotate(-12deg);opacity:0}to{transform:scale(1);opacity:1}}@keyframes resultFade{0%,75%{opacity:1}100%{opacity:0;visibility:hidden}}
.loading{min-height:70vh;display:grid;place-items:center;text-align:center;color:var(--muted)}.spinner{width:42px;height:42px;border:3px solid rgba(255,255,255,.13);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}@keyframes spin{to{transform:rotate(360deg)}}.error-panel{padding:22px;--paint:#5a2631;margin:16px}.error-panel p{font-family:Arial,sans-serif;font-size:12px}.empty-message{text-align:center;color:var(--victory);width:100%;font-size:17px}@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(min-width:521px){body{background:radial-gradient(circle at top,#101827,#020306 66%)}.game-root{border-left:1px solid rgba(255,255,255,.05);border-right:1px solid rgba(255,255,255,.05)}}
@media(max-width:430px){.home-content{padding-left:12px;padding-right:12px}.mode-title{font-size:19px}.mode-copy{left:17px}.lineup-slot{width:100px;height:150px}.lineup-slot .fighter-card.small{width:91px;height:143px}.slot-row{gap:10px}.lineup-grid{min-height:405px}.reserve-strip{height:172px}.fighter-card.battle-size{width:166px;height:242px}.battle-top{grid-template-columns:48px 1fr 22px 1fr 48px 48px;gap:3px}.battle-exit,.round-chip{width:47px;height:47px}.pause-btn{height:47px}.battle-score{height:51px;padding:4px 10px}.expanded-stage{height:760px}.fighter-card.expanded{width:184px;height:294px}.expanded-stage::before{width:236px;height:350px}.animated-card-frame{width:244px;height:358px}.radial-stat{width:70px;height:70px;padding:10px}.radial-stat img{width:18px;height:18px}.radial-stat span{font-size:6px}.radial-stat b{font-size:13px}.radial-rank{top:calc(50% - 205px)}.radial-biceps{left:calc(50% - 135px);top:calc(50% - 100px)}.radial-chest{right:calc(50% - 135px);top:calc(50% - 100px)}.radial-fame{left:calc(50% - 135px);top:calc(50% + 90px)}.radial-height{right:calc(50% - 135px);top:calc(50% + 90px)}.radial-weight{top:calc(50% + 202px)}.expanded-footer{bottom:9px}.team-slot{height:121px}.corner-empty{grid-template-columns:58px 1fr 84px;padding:10px 16px}.team-rating{padding:10px 18px}.store-item{height:278px}.store-item img{width:82px;height:82px}}
@media(max-width:360px){.lineup-slot{width:88px;height:135px}.lineup-slot .fighter-card.small{width:80px;height:128px}.slot-row{gap:7px}.team-slot{height:110px}.mode-title{font-size:17px}.battle-score span{font-size:7px}.fighter-card.battle-size{width:148px;height:218px}.radial-biceps{left:calc(50% - 142px)}.radial-chest{right:calc(50% - 142px)}.radial-fame{left:calc(50% - 144px)}.radial-height{right:calc(50% - 144px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* v1.3.0 — app-viewport fit, Android-paced battle presentation, commentary */
html,body,#app{height:100%;height:100dvh;overflow:hidden}
.game-root{width:min(100vw,calc(100dvh * .52),560px);height:100dvh;min-height:0;margin:0 auto;overflow:hidden}
.screen{height:100%;min-height:0}
.screen-scroll{height:100%;min-height:0}

/* Commentary selector mirrors the Android Ringside Voice language chooser. */
.commentary-settings{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,240,193,.18)}
.commentary-head{display:flex;flex-direction:column;margin:0 6px 10px}.commentary-head b{color:var(--gold);font-size:19px}.commentary-head span{color:var(--muted);font-size:9px;font-weight:900;letter-spacing:1px}
.commentary-languages{display:grid;gap:7px;margin-top:9px}.commentary-language{height:62px;border:1px solid rgba(255,196,92,.48);border-radius:5px;background:#10161f;color:#fff;display:grid;grid-template-columns:46px 1fr 88px;align-items:center;text-align:left;padding:5px 12px;cursor:pointer}.commentary-language>span{font-size:27px;text-align:center}.commentary-language>b{font-size:15px}.commentary-language>small{font-size:8px;color:var(--muted);font-weight:900;text-align:right}.commentary-language.selected{border:3px solid var(--victory);box-shadow:0 0 14px rgba(92,225,161,.18)}.commentary-language.selected>small{color:var(--victory)}

/* Arrange is a fixed game screen, not a document: every control fits one viewport. */
.arrange-content{height:100%;min-height:0;padding-top:max(4px,env(safe-area-inset-top));padding-bottom:max(5px,env(safe-area-inset-bottom))}
.arrange-head{height:clamp(48px,7dvh,62px)}
.arrange-head .back-btn{width:clamp(58px,8dvh,72px);height:clamp(46px,6.5dvh,58px)}
.arrange-title b{font-size:clamp(20px,3.1dvh,26px)}.arrange-title span{font-size:clamp(8px,1.25dvh,11px)}
.auto-btn{width:clamp(82px,12dvh,106px);height:clamp(42px,6dvh,52px)}
.lineup-grid{flex:1;min-height:0;padding:2px 0;justify-content:space-evenly;overflow:hidden}
.slot-row{gap:clamp(8px,1.6dvh,14px)}
.lineup-slot{width:clamp(70px,10.5dvh,100px);height:clamp(104px,15.7dvh,150px);touch-action:none}
.lineup-slot .fighter-card.small{width:calc(100% - 6px);height:calc(100% - 6px)}
.slot-empty strong{font-size:clamp(27px,4.5dvh,40px)}.slot-empty span{font-size:clamp(8px,1.2dvh,11px)}
.ability-pocket{width:clamp(148px,21dvh,176px);height:clamp(42px,6dvh,52px);margin-bottom:2px}.ability-dot{width:clamp(27px,4dvh,33px);height:clamp(27px,4dvh,33px)}
.ready-btn{width:calc(100% - 58px);margin:0 29px 3px;min-height:clamp(48px,7dvh,62px);height:clamp(48px,7dvh,62px)}
.reserve-head{height:clamp(18px,2.5dvh,24px);padding:0 6px;align-items:center}
.reserve-strip{height:clamp(114px,17dvh,154px);margin-bottom:1px;padding:7px 12px;gap:9px}
.reserve-card-wrap .fighter-card.small{width:clamp(70px,10.5dvh,88px);height:clamp(108px,16dvh,137px)}

/* The radial card zoom always fits; dark empty area outside closes it. */
.expanded-card-overlay{z-index:250;background:rgba(0,0,0,.92);padding:8px;cursor:zoom-out}
.expanded-stage{width:min(100vw,460px);height:100dvh;max-height:100dvh;cursor:default}
.fighter-card.expanded{width:clamp(148px,21.5dvh,184px);height:auto;aspect-ratio:184/294}
.expanded-stage::before{width:clamp(190px,28dvh,236px);height:clamp(285px,41.5dvh,350px)}
.animated-card-frame{width:clamp(198px,29dvh,244px);height:clamp(294px,42.5dvh,358px)}
.radial-stat{width:clamp(61px,8.5dvh,74px);height:clamp(61px,8.5dvh,74px);padding:8px}
.radial-stat img{width:clamp(16px,2.2dvh,20px);height:clamp(16px,2.2dvh,20px)}.radial-stat span{font-size:clamp(5px,.75dvh,7px)}.radial-stat b{font-size:clamp(11px,1.65dvh,14px)}
.radial-rank{top:calc(50% - min(25dvh,210px))}.radial-biceps{left:calc(50% - min(16dvh,135px));top:calc(50% - min(12dvh,100px))}.radial-chest{right:calc(50% - min(16dvh,135px));top:calc(50% - min(12dvh,100px))}.radial-fame{left:calc(50% - min(16dvh,135px));top:calc(50% + min(10dvh,84px))}.radial-height{right:calc(50% - min(16dvh,135px));top:calc(50% + min(10dvh,84px))}.radial-weight{top:calc(50% + min(23dvh,194px))}
.expanded-footer{bottom:max(8px,env(safe-area-inset-bottom));font-size:10px}

/* Battle screen uses the same single-screen density rule as the Android Compose battle. */
.battle-screen{height:100%;min-height:0;overflow:hidden}.battle-ui{height:100%;min-height:0;padding:max(4px,env(safe-area-inset-top)) 8px max(5px,env(safe-area-inset-bottom));display:grid;grid-template-rows:clamp(48px,7.3dvh,62px) minmax(0,1fr) clamp(46px,6.6dvh,60px) minmax(0,1fr) clamp(26px,3.8dvh,34px);gap:3px}
.battle-top{height:100%;min-height:0;grid-template-columns:clamp(42px,6dvh,50px) 1fr 20px 1fr clamp(40px,5.6dvh,46px) clamp(42px,6dvh,50px);gap:4px}
.battle-exit,.round-chip{width:100%;height:auto;aspect-ratio:1}.pause-btn{height:100%;min-height:0}.battle-score{height:100%;padding:3px 8px;grid-template-columns:1fr 24px}.battle-score span{font-size:clamp(6px,.9dvh,8px)}.battle-score small{font-size:clamp(5px,.75dvh,7px)}.battle-score b{font-size:clamp(16px,2.5dvh,21px)}.vs-mini{font-size:clamp(11px,1.8dvh,15px)}
.opponent-zone,.player-zone{height:auto;min-height:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:visible}
.battle-card-label{font-size:clamp(7px,1dvh,9px);margin-bottom:2px}.battle-card-label span{font-size:clamp(6px,.8dvh,7px)}
.fighter-card.battle-size{width:clamp(112px,17.2dvh,150px);height:auto;aspect-ratio:154/224;border-radius:15px}.fighter-card.battle-size .card-name{font-size:clamp(12px,1.8dvh,16px);bottom:11px}.fighter-card.battle-size .card-level{width:clamp(29px,4dvh,36px);height:clamp(29px,4dvh,36px);font-size:clamp(9px,1.3dvh,12px)}
.opponent-card-wrap,.player-card-wrap{position:relative;transition:.28s}.opponent-card-wrap.focused,.player-card-wrap.focused{filter:drop-shadow(0 0 18px var(--gold));transform:scale(1.045)}
.opponent-ability-pips i{width:clamp(20px,3dvh,26px);height:clamp(20px,3dvh,26px);font-size:8px}
.battle-status{height:100%;min-height:0;margin:0 8px;display:grid;place-items:center}.status-main{font-size:clamp(11px,1.8dvh,16px);padding:0 8px;line-height:1.05}
.battle-ability-pocket{bottom:0;transform:translate(-50%,65%);width:clamp(132px,19dvh,165px);height:clamp(38px,5.5dvh,46px);padding:5px}.battle-ability-pocket .ability-dot{width:clamp(24px,3.5dvh,29px);height:clamp(24px,3.5dvh,29px);font-size:6px}
.player-call-meta{height:100%;min-height:0;gap:1px;font-size:clamp(7px,1dvh,9px);line-height:1}.player-call-meta b{font-size:clamp(8px,1.15dvh,10px)}

/* Winner presentation and capture match the Android phase order instead of instantly starting the next round. */
.winner-highlight{position:absolute;z-index:230;inset:0;background:radial-gradient(circle at center,rgba(8,22,30,.72),rgba(0,0,0,.97) 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;animation:highlightIn .32s ease-out}.winner-highlight::before,.winner-highlight::after{content:"";position:absolute;width:140vw;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 22px var(--gold);animation:highlightSweep 2.2s linear infinite}.winner-highlight::before{transform:rotate(35deg)}.winner-highlight::after{transform:rotate(-35deg);animation-delay:-1.1s}.winner-highlight.loss::before,.winner-highlight.loss::after{background:linear-gradient(90deg,transparent,var(--danger),transparent);box-shadow:0 0 22px var(--danger)}
.winner-highlight-title{position:absolute;top:max(18px,env(safe-area-inset-top));color:var(--gold);font-weight:900;letter-spacing:2px;font-size:14px}.highlight-skip{position:absolute;right:12px;top:max(8px,env(safe-area-inset-top));width:68px;height:48px;border:0;background:transparent;z-index:4}.winner-media-ring{position:absolute;width:min(70vw,330px);aspect-ratio:1;border:4px solid var(--gold);border-radius:50%;opacity:.22;box-shadow:0 0 55px var(--gold);animation:mediaRing 1.4s ease-in-out infinite alternate}.winner-highlight.loss .winner-media-ring{border-color:var(--danger);box-shadow:0 0 55px var(--danger)}
.fighter-card.winner-card{width:min(52vw,220px);height:auto;aspect-ratio:154/224;z-index:2;animation:winnerCardReveal 8s linear both;cursor:default}.winner-video{width:min(76vw,360px);max-height:72dvh;object-fit:contain;z-index:2;border-radius:10px;box-shadow:0 0 28px rgba(255,196,92,.35)}.winner-highlight-name{z-index:3;margin-top:12px;font-size:24px;font-weight:900}.winner-highlight-stat{z-index:3;color:var(--gold);font-size:12px}.capture-flight{position:absolute;z-index:225;inset:0;pointer-events:none;background:rgba(0,0,0,.48);display:flex;align-items:center;justify-content:center}.capture-copy{position:absolute;top:44%;color:var(--gold);font-weight:900;font-size:18px;letter-spacing:1px}.capture-stack{position:absolute;left:50%;top:50%;width:160px;height:220px;transform:translate(-50%,-50%)}.fighter-card.capture-card{position:absolute;width:110px;height:auto;aspect-ratio:154/224;left:25px;top:20px}.fighter-card.capture-card.one{animation:captureToPlayer 1.05s cubic-bezier(.2,.8,.2,1) forwards}.fighter-card.capture-card.two{animation:captureToPlayer 1.05s cubic-bezier(.2,.8,.2,1) .08s forwards}.capture-flight.bot .fighter-card.capture-card.one,.capture-flight.bot .fighter-card.capture-card.two{animation-name:captureToBot}.capture-plus{position:absolute;left:50%;top:50%;width:58px;height:58px;display:grid;place-items:center;transform:translate(-50%,-50%);z-index:8;color:var(--gold);font-weight:900;font-size:20px;animation:plusPop 1.15s ease-out both}
@keyframes highlightIn{from{opacity:0}to{opacity:1}}@keyframes highlightSweep{from{translate:-55vw -55vh}to{translate:55vw 55vh}}@keyframes mediaRing{from{transform:scale(.9);opacity:.12}to{transform:scale(1.08);opacity:.35}}@keyframes winnerCardReveal{0%{opacity:0;transform:translateY(28px) scale(.72) rotateY(90deg)}8%{opacity:1;transform:translateY(0) scale(1) rotateY(0)}70%{transform:scale(1.07)}94%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.16)}}@keyframes captureToPlayer{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(0,38dvh) scale(.48);opacity:.2}}@keyframes captureToBot{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(0,-38dvh) scale(.48);opacity:.2}}@keyframes plusPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}28%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:.15;transform:translate(-50%,-50%) scale(.9)}}

@media(max-height:690px){.battle-ui{grid-template-rows:44px minmax(0,1fr) 42px minmax(0,1fr) 24px}.fighter-card.battle-size{width:105px}.battle-ability-pocket{transform:translate(-50%,54%)}.arrange-head{height:44px}.ready-btn{height:45px;min-height:45px}.reserve-strip{height:105px}.lineup-slot{width:65px;height:96px}}


/* #devtext - temporary commentary diagnostics. Search #devtext to remove after verification. */
.devtext-block{margin-top:12px;padding:12px 13px;border:1px dashed rgba(45,220,255,.72);background:rgba(1,8,13,.88);font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-size:9px;line-height:1.45;color:#c7d6df;overflow-wrap:anywhere}
.devtext-title{font-weight:900;color:#2ddcff;font-size:10px;margin-bottom:7px;letter-spacing:.4px}.devtext-line{margin:3px 0}.devtext-ok{color:#5ce1a1}.devtext-warn{color:#ffc45c}.devtext-bad{color:#ff6b70}.devtext-muted{color:#8d9baa}.devtext-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.devtext-actions button{min-height:34px;border:1px solid rgba(255,240,193,.48);background:#17130f;color:#fff;font:700 9px ui-monospace,SFMono-Regular,Consolas,monospace;cursor:pointer}.devtext-actions button:active{transform:scale(.985)}

/* v1.3.2 battle stability: lock the browser page while the native-style battle viewport is active. */
body.battle-route{height:100dvh;overflow:hidden}body.battle-route #app{height:100dvh;overflow:hidden}


/* v1.3.3 — battle HUD containment, zoom-out affordance, winner-audio skip cleanup */
.expanded-card-tap-close{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;cursor:zoom-out;border-radius:20px}
.expanded-card-tap-close .fighter-card.expanded{position:relative;left:auto;top:auto;transform:none}
.expanded-card-overlay .radial-stat{z-index:8}

/* Keep every battle HUD control inside the native-style viewport at every width. */
.battle-ui{width:100%;max-width:100%;overflow:hidden}
.battle-top{width:100%;max-width:100%;min-width:0;grid-template-columns:clamp(40px,5.7dvh,48px) minmax(0,1fr) clamp(16px,2.2dvh,20px) minmax(0,1fr) clamp(38px,5.2dvh,44px) clamp(40px,5.7dvh,48px);gap:3px;align-items:center;overflow:visible}
.battle-top>*{min-width:0;max-width:100%}
.battle-exit,.round-chip{display:grid;place-items:center;line-height:1;padding:0;margin:0;overflow:visible}
.round-chip{font-size:clamp(10px,1.45dvh,13px);white-space:nowrap}
.pause-btn{display:grid;place-items:center;padding:0;line-height:1;overflow:hidden}
.battle-score{min-width:0;overflow:hidden;padding:3px 6px;grid-template-columns:minmax(0,1fr) clamp(20px,3dvh,24px)}
.battle-score span,.battle-score small{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-mini{min-width:0;display:grid;place-items:center}
@media(max-width:380px){.battle-ui{padding-left:5px;padding-right:5px}.battle-top{grid-template-columns:38px minmax(0,1fr) 15px minmax(0,1fr) 36px 38px;gap:2px}.battle-score{padding:2px 5px;grid-template-columns:minmax(0,1fr) 19px}.battle-score b{font-size:15px}.battle-score span{font-size:6px}.battle-score small{font-size:5px}.vs-mini{font-size:10px}.round-chip{font-size:9px}}


/* v1.3.4 — native-feeling Arrange drag/drop + mobile browser gesture suppression */
.arrange-screen [data-drag-source],
.arrange-screen [data-drag-source] *,
.arrange-screen .fighter-card,
.arrange-screen .fighter-card *{
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.arrange-screen img{pointer-events:none;-webkit-user-drag:none!important}
.lineup-slot[data-drag-source]{touch-action:none!important}
.reserve-card-wrap[data-drag-source]{touch-action:none!important}
.dragging-source{opacity:.42;filter:saturate(.7)}
.drag-ghost-card{
  will-change:left,top,transform;
  box-shadow:0 18px 44px rgba(0,0,0,.72),0 0 22px rgba(45,220,255,.28)!important;
  transition:none!important;
}
/* Reveal is driven once by Web Animations; never replay a CSS flip on render. */
.opponent-card-wrap.flip{animation:none!important}

/* v1.4.0 — queue, themed forfeit, Android-style winner reveal */
.queue-content{height:100%;min-height:0;padding:max(20px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,rgba(6,9,16,.92),rgba(16,28,43,.72),rgba(5,7,12,.96));overflow:hidden}
.queue-title{font-size:clamp(28px,5.1dvh,38px);font-weight:1000;letter-spacing:1.2px;color:#fff;line-height:1}.queue-mode{font-size:11px;font-weight:1000;letter-spacing:2px;color:var(--cyan);margin:5px 0 16px}.queue-panel{width:100%;flex:1;min-height:0;padding:16px 12px;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;background-color:#182c44}.queue-kicker{font-size:9px;font-weight:1000;letter-spacing:1.2px;color:rgba(255,255,255,.76)}.queue-matchup{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr);align-items:center;gap:6px}.queue-vs{width:62px;height:62px;display:grid;place-items:center;font-size:21px;font-weight:1000;color:#fff}.queue-fighter{min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}.queue-avatar{width:82px;height:82px;max-width:22vw;max-height:22vw;border-radius:50%;padding:4px;border:3px solid var(--q);box-shadow:0 0 20px color-mix(in srgb,var(--q) 45%,transparent);background:#071018}.queue-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.queue-fighter b{font-size:10px;color:var(--gold);letter-spacing:1px}.queue-fighter span{font-size:12px;font-weight:900;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-fighter.searching{gap:10px}.queue-search-ring{width:78px;height:78px;max-width:21vw;max-height:21vw;border-radius:50%;border:4px solid rgba(255,255,255,.12);border-top-color:var(--q);border-right-color:var(--q);animation:queueSpin 1.25s linear infinite;box-shadow:0 0 18px color-mix(in srgb,var(--q) 42%,transparent)}.queue-message{font-size:clamp(15px,2.5dvh,23px);font-weight:1000;text-align:center;color:var(--gold);line-height:1.1}.queue-seconds{font-size:28px;font-weight:1000;color:var(--cyan)}.queue-progress{width:78%;height:4px;background:rgba(255,255,255,.13);overflow:hidden;border-radius:8px}.queue-progress i{display:block;width:38%;height:100%;background:var(--cyan);animation:queueBar 1.4s ease-in-out infinite}.countdown-marks{display:flex;gap:9px}.countdown-marks i{width:34px;height:5px;background:rgba(255,255,255,.16);transform:skewX(-20deg)}.countdown-marks i.on{background:var(--gold);box-shadow:0 0 12px rgba(255,196,92,.45)}.queue-error{font-size:10px;color:#ff7d82;text-align:center}.queue-cancel{width:100%;height:58px;margin-top:12px;flex:none}.queue-cancel:disabled{opacity:.55;pointer-events:none}@keyframes queueSpin{to{transform:rotate(360deg)}}@keyframes queueBar{0%{transform:translateX(-120%)}50%{transform:translateX(90%)}100%{transform:translateX(260%)}}

.forfeit-overlay{position:absolute;inset:0;z-index:420;background:rgba(0,0,0,.78);display:grid;place-items:center;padding:24px;backdrop-filter:blur(4px);animation:forfeitFade .18s ease-out}.forfeit-modal{width:min(92%,350px);padding:25px 18px 18px;text-align:center;background-color:#17110f;box-shadow:0 22px 60px rgba(0,0,0,.72),0 0 30px rgba(255,93,98,.13);animation:forfeitPop .22s cubic-bezier(.2,.8,.2,1)}.forfeit-icon{width:78px;height:78px;margin:-4px auto 12px;display:grid;place-items:center;border:3px solid var(--danger);box-shadow:0 0 22px rgba(255,93,98,.32)}.forfeit-icon img{width:49px;height:49px;object-fit:contain}.forfeit-modal h2{font-size:27px;color:var(--danger);margin:4px 0 8px;letter-spacing:.8px}.forfeit-modal p{font-size:13px;color:rgba(255,255,255,.8);line-height:1.35;margin:0 auto 18px;max-width:280px}.forfeit-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.forfeit-actions .paint-button{height:58px;font-size:12px}.forfeit-actions .danger-choice{color:#fff}@keyframes forfeitFade{from{opacity:0}to{opacity:1}}@keyframes forfeitPop{from{transform:scale(.88) translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* Android-style 8 second winner card presentation. Character palettes drive every light. */
.winner-highlight{--char1:#ffc45c;--char2:#2ddcff;position:absolute;z-index:230;inset:0;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--char1) 13%,#03070b),#010205 70%);display:flex;align-items:center;justify-content:center;overflow:hidden;animation:highlightIn .22s ease-out;perspective:1100px}.winner-highlight::before,.winner-highlight::after{display:none}.winner-highlight-title{top:max(15px,env(safe-area-inset-top));color:var(--char1);text-shadow:0 0 16px color-mix(in srgb,var(--char1) 70%,transparent);z-index:12}.highlight-skip{z-index:16}.winner-light-field{position:absolute;inset:0;z-index:0;filter:blur(.15px)}.winner-light-field span{position:absolute;left:50%;top:44%;width:135%;height:3px;transform-origin:left center;background:linear-gradient(90deg,color-mix(in srgb,var(--char1) 0%,transparent),var(--char1),transparent);box-shadow:0 0 18px var(--char1);opacity:.4;animation:winnerBeam 2.4s ease-in-out infinite alternate}.winner-light-field span:nth-child(1){transform:rotate(32deg) translateX(-58%)}.winner-light-field span:nth-child(2){transform:rotate(148deg) translateX(-58%);background:linear-gradient(90deg,transparent,var(--char2),transparent);box-shadow:0 0 18px var(--char2);animation-delay:-.6s}.winner-light-field span:nth-child(3){transform:rotate(218deg) translateX(-58%);animation-delay:-1.2s}.winner-light-field span:nth-child(4){transform:rotate(326deg) translateX(-58%);background:linear-gradient(90deg,transparent,var(--char2),transparent);box-shadow:0 0 18px var(--char2);animation-delay:-1.8s}.winner-media-ring{width:min(72vw,335px);border-color:var(--char1);box-shadow:0 0 38px color-mix(in srgb,var(--char1) 70%,transparent),inset 0 0 38px color-mix(in srgb,var(--char2) 20%,transparent);opacity:.22;animation:androidRing 2s ease-in-out infinite alternate}.winner-sparks{position:absolute;left:50%;top:43%;width:0;height:0;z-index:3}.winner-sparks i{position:absolute;width:2px;height:clamp(18px,4dvh,34px);background:linear-gradient(var(--char1),transparent);box-shadow:0 0 7px var(--char1);transform-origin:0 0;transform:rotate(var(--a)) translateY(-58px) scaleY(.1);opacity:0;animation:winnerSpark 2.4s calc(.55s + var(--i)*45ms) ease-out both}.winner-sparks i:nth-child(even){background:linear-gradient(var(--char2),transparent);box-shadow:0 0 7px var(--char2)}
.winner-turn{position:relative;width:min(54vw,226px);aspect-ratio:154/224;z-index:7;transform-style:preserve-3d;animation:androidWinnerTurn 8s linear both}.winner-face{position:absolute;inset:0;backface-visibility:hidden;transform-style:preserve-3d}.winner-back{display:grid;place-items:center;border:3px solid var(--char1);border-radius:18px;background:#020305;box-shadow:0 0 32px color-mix(in srgb,var(--char1) 50%,transparent)}.winner-back img{width:72%;height:auto}.winner-front{transform:rotateY(180deg)}.winner-front .fighter-card.winner-card{width:100%;height:100%;animation:none!important;box-shadow:0 0 35px color-mix(in srgb,var(--char1) 48%,transparent),0 0 70px color-mix(in srgb,var(--char2) 25%,transparent)}.winner-highlight-details{position:absolute;left:22px;right:36px;bottom:max(52px,env(safe-area-inset-bottom));z-index:11;transform:translateX(-140%) rotate(var(--tilt));animation:winnerTextIn 8s linear both}.winner-highlight-name{margin:0;font-size:clamp(24px,4dvh,34px);line-height:.95;text-shadow:0 2px 8px #000}.winner-highlight-stat{color:var(--char1);font-size:12px;font-weight:900;margin-top:8px;text-shadow:0 2px 8px #000}.winner-video{z-index:7;box-shadow:0 0 34px color-mix(in srgb,var(--char1) 42%,transparent)}
@keyframes winnerBeam{from{opacity:.18;filter:brightness(.8)}to{opacity:.58;filter:brightness(1.25)}}
@keyframes androidRing{from{transform:scale(.82);opacity:.12}to{transform:scale(1.09);opacity:.34}}
@keyframes winnerSpark{0%{opacity:0;transform:rotate(var(--a)) translateY(-42px) scaleY(.1)}28%{opacity:.8;transform:rotate(var(--a)) translateY(-108px) scaleY(1)}70%,100%{opacity:0;transform:rotate(var(--a)) translateY(-160px) scaleY(.45)}}
@keyframes androidWinnerTurn{0%{opacity:0;transform:translate(var(--sx),calc(var(--sy) - 28px)) scale(.08) rotateX(19deg) rotateY(-18deg) rotateZ(-8deg)}5%{opacity:1}22%{transform:translate(0,0) scale(.73) rotateX(0) rotateY(45deg) rotateZ(0)}48%{transform:translate(0,0) scale(1.05) rotateY(180deg) rotateZ(0)}68%{transform:scale(1.48) rotateY(180deg)}92%{opacity:1;transform:scale(1.62) rotateY(180deg)}100%{opacity:0;transform:translateY(-70px) scale(1.82) rotateY(180deg)}}
@keyframes winnerTextIn{0%,63%{opacity:0;transform:translateX(-140%) rotate(var(--tilt))}72%{opacity:1;transform:translateX(0) rotate(var(--tilt))}94%{opacity:1;transform:translateX(0) rotate(var(--tilt))}100%{opacity:0;transform:translateX(55%) rotate(var(--tilt))}}

/* The stat overlay closes on every non-stat tap, including the empty stage around the card. */
.expanded-card-overlay{cursor:zoom-out}.expanded-card-overlay .radial-stat{cursor:pointer}.expanded-stage{pointer-events:auto}.expanded-stage::before{content:"";position:absolute;inset:-28vh -28vw;z-index:-1}

@media(max-width:420px){.queue-content{padding-left:12px;padding-right:12px}.queue-matchup{grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr)}.queue-vs{width:52px;height:52px;font-size:17px}.forfeit-overlay{padding:18px}.winner-turn{width:min(56vw,220px)}}
.winner-highlight.loss .winner-media-ring{border-color:var(--char1)!important;box-shadow:0 0 38px color-mix(in srgb,var(--char1) 70%,transparent),inset 0 0 38px color-mix(in srgb,var(--char2) 20%,transparent)!important}
.arrange-screen .auto-btn:disabled{opacity:.45;pointer-events:none}


/* v1.4.1 — settings breathing room, Quick Match arrange timer, reliable winner face */
.settings-content{padding:6px 18px 34px}.settings-tabs{gap:8px;margin:7px 0 12px}.settings-tab{height:54px;font-size:11px}.settings-tab span{font-size:17px}.settings-panel-clean{padding:14px 14px 16px;margin-bottom:14px}.settings-panel-clean .settings-action{min-height:54px;margin-bottom:8px}.settings-panel-clean .settings-action.compact{min-height:50px}.settings-section-label{font-size:9px;color:var(--muted);margin:12px 3px 7px;letter-spacing:.7px}.settings-group-head{height:52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08)}.settings-group-head>div{display:flex;flex-direction:column;gap:2px}.settings-group-head b{font-size:14px;color:#fff}.settings-group-head span{font-size:8px;color:var(--muted);letter-spacing:1px}.settings-group-head .toggle{flex:none;cursor:pointer}.audio-sliders{padding:5px 0}.settings-panel-clean .slider-row{height:48px;grid-template-columns:112px 1fr;gap:10px;font-size:9px}.settings-divider{height:1px;background:rgba(255,255,255,.1);margin:5px 0 12px}.commentary-head{margin:0 2px 6px}.commentary-head b{font-size:18px;color:var(--gold)}.commentary-head span{display:block;font-size:8px;color:var(--muted);letter-spacing:1px}.commentary-settings .setting-row{height:50px}.commentary-languages.compact-list{display:flex;flex-direction:column;gap:7px;margin-top:8px}.commentary-languages.compact-list .commentary-language{height:58px;padding:0 12px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;text-align:left;gap:8px}.commentary-languages.compact-list .commentary-language>span{font-size:24px}.commentary-languages.compact-list .commentary-language>b{font-size:14px}.commentary-languages.compact-list .commentary-language>small{font-size:7px}.community-label{margin-top:18px}.community-panel{height:96px;padding:12px}.settings-wide{height:52px}
.arrange-head{position:relative}.arrange-timer{position:absolute;right:78px;top:2px;width:62px;height:58px;border:2px solid var(--cream);background:rgba(10,12,16,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:6;box-shadow:0 0 12px rgba(0,0,0,.35)}.arrange-timer span{font-size:6px;color:var(--muted);letter-spacing:.6px}.arrange-timer b{font-size:22px;line-height:20px;color:var(--gold)}.arrange-timer small{font-size:6px;color:#fff}.arrange-timer.urgent{border-color:var(--danger);animation:timerPulse .7s ease-in-out infinite alternate}.arrange-timer.urgent b{color:var(--danger)}@keyframes timerPulse{to{box-shadow:0 0 18px rgba(255,75,81,.48)}}
/* Keep 3D entrance but make the visible winner face deterministic on mobile browsers. */
.winner-turn{animation:androidWinnerTurnFace 8s linear both}.winner-back{animation:winnerBackSwap 8s linear both}.winner-front{transform:none!important;animation:winnerFrontSwap 8s linear both}.winner-art-card{position:absolute;inset:0;overflow:hidden;border:3px solid var(--char1);border-radius:18px;background:#03060a;box-shadow:0 0 35px color-mix(in srgb,var(--char1) 48%,transparent),0 0 70px color-mix(in srgb,var(--char2) 25%,transparent)}.winner-art-card>img{width:100%;height:100%;object-fit:cover;display:block}.winner-art-shade{position:absolute;inset:38% 0 0;background:linear-gradient(transparent,rgba(1,3,8,.92) 86%)}.winner-art-level{position:absolute;right:8px;top:8px;width:46px;height:46px;display:grid;place-items:center;--paint:var(--char1);font-size:13px;font-weight:1000}.winner-art-name{position:absolute;left:12px;right:52px;bottom:13px;font-size:18px;font-weight:1000;line-height:.95;color:#fff;text-shadow:0 2px 6px #000}.winner-art-fallback{object-fit:contain!important;padding:22%!important;background:#020305}
@keyframes winnerBackSwap{0%,36%{opacity:1}43%,100%{opacity:0}}@keyframes winnerFrontSwap{0%,36%{opacity:0}43%,100%{opacity:1}}@keyframes androidWinnerTurnFace{0%{opacity:0;transform:translate(var(--sx),calc(var(--sy) - 28px)) scale(.08) rotateX(19deg) rotateY(-62deg) rotateZ(-8deg)}5%{opacity:1}22%{transform:translate(0,0) scale(.73) rotateX(0) rotateY(-34deg) rotateZ(0)}46%{transform:translate(0,0) scale(1.05) rotateY(0) rotateZ(0)}68%{transform:scale(1.48) rotateY(0)}92%{opacity:1;transform:scale(1.62) rotateY(0)}100%{opacity:0;transform:translateY(-70px) scale(1.82) rotateY(0)}}
@media(max-width:420px){.settings-content{padding-left:12px;padding-right:12px}.settings-panel-clean{padding:12px}.settings-tabs{gap:5px}.settings-tab{height:50px}.arrange-timer{right:74px;width:56px;height:52px}.arrange-timer b{font-size:20px}}