:root {
  --ink:#f7f4e8; --muted:#8e98b9; --night:#080b1d; --panel:#11162e; --panel2:#171d3c;
  --lime:#c8ff3d; --orange:#ff6b35; --cyan:#3cf0e5; --pink:#ff4f9b; --yellow:#ffd43b;
  --blue:#5267ff; --danger:#ff425c; --edge:#35416f; --shadow:#03040d; --control-opacity:.88;
  --safe-top:env(safe-area-inset-top,0px); --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{position:fixed;inset:0;margin:0;width:100%;height:100dvh;min-height:0;overflow:hidden;background:var(--night);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;overscroll-behavior:none;touch-action:manipulation;-webkit-text-size-adjust:100%}
button,select,input{font:inherit}button{color:inherit;cursor:pointer;font-weight:800}h1,h2,h3,.brand-lockup strong,.brand-lockup h1{font-family:"Arial Black",Impact,system-ui,sans-serif}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.app{position:fixed;left:0;top:0;width:var(--app-width,100vw);height:var(--app-height,100dvh);min-width:0;min-height:0;max-height:100dvh;background:radial-gradient(circle at 80% 10%,#1f285d 0,transparent 34%),linear-gradient(145deg,#080b1d,#0d1230 55%,#070918);overflow:hidden}
.app.high-contrast{--muted:#e5e8f4;--edge:#8e9bd0}.scanlines{pointer-events:none;position:fixed;z-index:100;inset:0;opacity:.035;background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 4px);mix-blend-mode:multiply}
.screen{position:absolute;inset:0;display:none;overflow:hidden}.screen.active{display:block;animation:screenIn .33s steps(5,end)}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pixel-corners{clip-path:polygon(12px 0,calc(100% - 12px) 0,calc(100% - 12px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 4px) calc(100% - 12px),calc(100% - 4px) calc(100% - 4px),calc(100% - 12px) calc(100% - 4px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 12px),0 calc(100% - 12px),0 12px,4px 12px,4px 4px,12px 4px)}

/* Brand + boot */
.brand-lockup{display:flex;align-items:center;gap:12px;border:0;background:none;text-align:left}.brand-ball{position:relative;width:54px;height:54px;border:6px solid var(--ink);border-radius:50%;transform:rotate(-17deg);filter:drop-shadow(5px 5px 0 #27315c)}.brand-ball:before,.brand-ball:after,.brand-ball i{content:"";position:absolute;display:block;background:var(--ink)}.brand-ball:before{width:6px;height:50px;left:17px;top:-4px}.brand-ball:after{width:50px;height:6px;left:-4px;top:17px}.brand-ball i:nth-child(1){width:20px;height:6px;left:-5px;top:2px;transform:rotate(35deg)}.brand-ball i:nth-child(2){width:20px;height:6px;right:-5px;bottom:2px;transform:rotate(35deg)}.brand-ball i:nth-child(3){width:12px;height:12px;left:10px;top:10px;background:var(--orange)}
.brand-top{display:block;font-size:9px;letter-spacing:4px;color:var(--lime)}.brand-lockup h1,.brand-lockup strong{margin:0;line-height:.9;font-style:italic;letter-spacing:-2px}.brand-lockup h1{font-size:68px;text-shadow:6px 6px 0 #28305b}.brand-lockup h1 b,.brand-lockup strong b{color:var(--orange)}
.boot-screen{z-index:50;background:radial-gradient(circle at center,#1a2354,#070918 65%);text-align:center;padding-top:calc(14vh + var(--safe-top));cursor:pointer}.boot-screen:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,#ffffff08 48% 52%,transparent 52%),linear-gradient(0deg,transparent 48%,#ffffff08 48% 52%,transparent 52%);background-size:64px 64px;animation:gridMove 7s linear infinite}.boot-logo{position:relative;z-index:2;justify-content:center;animation:logoPop .8s steps(7,end)}.boot-logo .brand-ball{width:86px;height:86px;border-width:8px}.boot-tag{position:relative;z-index:2;color:var(--cyan);letter-spacing:6px;font-size:12px;margin:24px 0 38px}.pixel-loader{position:relative;z-index:2;width:280px;height:14px;padding:3px;margin:auto;background:#03040d;box-shadow:0 0 0 3px #2f3865}.pixel-loader span{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--pink),var(--lime));animation:load 1.8s steps(10,end) infinite}.boot-screen small{position:relative;z-index:2;display:block;margin-top:28px;letter-spacing:3px;animation:blink 1s steps(2,end) infinite}.boot-stars{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(var(--cyan) 1px,transparent 1px);background-size:37px 37px,71px 71px;background-position:0 0,16px 12px;opacity:.35;animation:stars 18s linear infinite}
@keyframes load{0%{width:0}70%,100%{width:100%}}@keyframes blink{50%{opacity:.25}}@keyframes logoPop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1)}}@keyframes gridMove{to{background-position:64px 64px}}@keyframes stars{to{transform:translateY(60px)}}

/* Shared chrome */
.topbar,.section-header{position:relative;z-index:3;height:84px;display:flex;align-items:center;padding:calc(10px + var(--safe-top)) max(22px,var(--safe-right)) 10px max(22px,var(--safe-left));border-bottom:2px solid #27305b;background:#080b1de8;backdrop-filter:blur(12px)}
.brand-lockup.mini{margin-right:auto}.mini .brand-ball{width:42px;height:42px;border-width:5px}.mini .brand-ball:before{height:38px;left:13px;top:-3px;width:5px}.mini .brand-ball:after{width:38px;top:13px;left:-3px;height:5px}.mini strong{font-size:25px}.profile-strip{display:flex;gap:9px;align-items:center}.icon-btn{width:43px;height:43px;border:2px solid var(--edge);background:var(--panel);border-radius:3px;box-shadow:4px 4px 0 var(--shadow)}.currency{display:flex;align-items:center;gap:7px;padding:10px 13px;background:var(--panel);border:2px solid var(--edge);border-radius:3px}.currency span{color:var(--cyan)}.avatar-chip{border:0;background:none;display:flex;align-items:center;gap:0}.avatar-chip span{position:relative;z-index:2;background:var(--orange);padding:5px 8px;box-shadow:3px 3px 0 #8f2d19}.avatar-chip i{display:grid;place-items:center;width:44px;height:44px;background:var(--lime);color:var(--night);font-style:normal;border:3px solid var(--ink)}
.section-header .back-btn{width:46px;height:46px;border:2px solid var(--edge);background:var(--panel);font-size:36px;line-height:30px;margin-right:18px}.section-header>div:nth-child(2){margin-right:auto}.section-header small{color:var(--cyan);font-size:9px;letter-spacing:3px}.section-header h2{margin:2px 0 0;font-size:24px;font-style:italic;letter-spacing:-1px}.cup-mini,.academy-medal{font-size:28px;color:var(--yellow)}

/* Home */
.home-content{height:calc(100% - 84px);overflow:auto;padding:18px max(24px,var(--safe-right)) max(28px,var(--safe-bottom)) max(24px,var(--safe-left));scrollbar-width:none}.home-content::-webkit-scrollbar{display:none}.season-line{max-width:1120px;margin:0 auto 12px;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:9px;letter-spacing:2px}.season-line div{height:1px;background:var(--edge);flex:1}.season-line b{color:var(--orange)}
.hero-card{position:relative;max-width:1120px;height:min(43vh,390px);min-height:290px;margin:auto;border:3px solid #343f75;background:#151c43;overflow:hidden;box-shadow:10px 10px 0 #04050d}.hero-card:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 80px #03040d88;pointer-events:none}.hero-card canvas{position:absolute;width:100%;height:100%;image-rendering:pixelated}.hero-copy{position:absolute;z-index:2;left:5%;top:12%;max-width:45%}.eyebrow{display:inline-block;background:var(--lime);color:var(--night);padding:6px 9px;font-size:9px;letter-spacing:2px;transform:skew(-6deg)}.hero-copy h2{font-size:clamp(32px,5.2vw,64px);line-height:.84;margin:15px 0 10px;font-style:italic;text-shadow:6px 6px 0 #101632}.hero-copy h2 em{color:var(--orange);font-style:normal}.hero-copy p{font-family:system-ui,sans-serif;font-weight:700;font-size:13px;color:#d0d5ef}.primary-btn{border:0;background:var(--lime);color:var(--night);padding:14px 20px;box-shadow:6px 6px 0 #668715;font-size:13px;letter-spacing:.5px;transform:skew(-3deg)}.primary-btn span{margin-left:10px}.primary-btn:active{transform:translate(4px,4px) skew(-3deg);box-shadow:2px 2px 0 #668715}.primary-btn.pulse{animation:btnPulse 2.4s ease-in-out infinite}@keyframes btnPulse{50%{filter:brightness(1.2);box-shadow:6px 6px 0 #668715,0 0 25px #c8ff3d44}}
.hero-badge{position:absolute;z-index:2;right:4%;top:8%;width:72px;height:72px;padding:13px 5px;text-align:center;background:var(--orange);transform:rotate(6deg);box-shadow:6px 6px 0 #7d2c18}.hero-badge small,.hero-badge span{display:block;font-size:8px}.hero-badge b{display:block;font-size:17px}
.mode-grid{max-width:1120px;margin:18px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.mode-card{position:relative;min-height:110px;display:flex;align-items:center;gap:14px;padding:14px;border:2px solid var(--edge);background:linear-gradient(145deg,var(--panel2),#0e132d);text-align:left;overflow:hidden;box-shadow:5px 5px 0 #03040d;transition:transform .15s,filter .15s}.mode-card:after{content:"";position:absolute;width:70px;height:70px;right:-30px;bottom:-35px;transform:rotate(45deg);background:#ffffff0c}.mode-card:hover{transform:translateY(-3px);filter:brightness(1.15)}.mode-icon{font-size:34px;width:46px;text-align:center;color:var(--lime);text-shadow:4px 4px 0 #405313}.local .mode-icon{color:var(--orange)}.skills .mode-icon{color:var(--cyan)}.academy .mode-icon{color:var(--yellow)}.mode-card small,.mode-card em{display:block;color:var(--muted);font-size:8px;letter-spacing:1.2px;font-style:normal}.mode-card b{display:block;font-size:13px;margin:5px 0}.mode-card em{color:var(--cyan)}
.home-footer-row{max-width:1120px;margin:12px auto 0;display:grid;grid-template-columns:1.4fr 1fr 54px;gap:10px}.daily-card,.collection-card,.settings-card{min-height:54px;border:2px solid var(--edge);background:#0d122a;display:flex;align-items:center;text-align:left;padding:9px 13px}.daily-card>span,.collection-card>span{font-size:23px;margin-right:12px}.daily-card small,.collection-card small{display:block;font-size:7px;color:var(--muted);letter-spacing:1px}.daily-card b,.collection-card b{font-size:10px}.daily-card i,.collection-card i{margin-left:auto;font-size:24px;color:var(--lime)}.settings-card{justify-content:center;font-size:20px}

/* Setup */
.menu-screen{background:radial-gradient(circle at 90% 10%,#20295a,transparent 34%),linear-gradient(155deg,#080b1d,#0b1027)}.setup-content,.cards-page,.academy-layout,.profile-page,.settings-page{height:calc(100% - 84px);overflow:auto;padding:20px max(28px,var(--safe-right)) max(32px,var(--safe-bottom)) max(28px,var(--safe-left));scrollbar-width:none}.setup-content{max-width:980px;margin:auto}.versus-panel{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;gap:12px}.team-picker{display:flex;flex-direction:column;align-items:center;border:2px solid var(--edge);background:linear-gradient(145deg,#192044,#10152f);padding:10px;min-height:175px}.team-picker canvas{width:80px;height:80px;image-rendering:pixelated}.team-picker small,.team-picker span{font-size:8px;color:var(--muted);letter-spacing:1px}.team-picker b{font-size:19px;margin:5px}.team-picker span{color:var(--cyan)}.versus-copy{text-align:center}.versus-copy strong{display:block;font-size:48px;font-style:italic;color:var(--orange);text-shadow:5px 5px 0 #6e2918}.versus-copy span{font-size:8px;color:var(--muted)}
.arena-select{position:relative;margin-top:14px;border:2px solid var(--edge);background:#0d122a;overflow:hidden}.select-heading{position:absolute;z-index:2;left:18px;right:18px;top:13px;display:flex;justify-content:space-between;align-items:start}.select-heading small{font-size:8px;color:var(--cyan);letter-spacing:2px}.select-heading h3{margin:3px 0;font-size:17px}.arena-select canvas{display:block;width:100%;height:155px;object-fit:cover;image-rendering:pixelated}.carousel{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:38px;height:52px;border:0;background:#080b1dcc;font-size:28px}.carousel.prev{left:0}.carousel.next{right:0}.dots{display:flex;gap:6px}.dots i{width:7px;height:7px;background:#515a80}.dots i.active{background:var(--lime)}
.match-options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:14px 0}.match-options label{min-height:58px;padding:9px 12px;border:2px solid var(--edge);background:var(--panel);display:flex;flex-direction:column;justify-content:center}.match-options label span{font-size:8px;color:var(--muted);letter-spacing:1px}.match-options select{margin-top:4px;background:transparent;color:var(--ink);border:0;font-size:12px}.toggle-label{position:relative}.toggle-label input,.settings-page input{position:absolute;opacity:0}.toggle-label i,.settings-page label i{position:absolute;right:13px;width:42px;height:22px;background:#343c61;border:3px solid #596386}.toggle-label i:after,.settings-page label i:after{content:"";position:absolute;width:12px;height:12px;left:3px;top:2px;background:#929ab7;transition:.2s}.toggle-label input:checked+i,.settings-page input:checked+i{background:#3e6216;border-color:var(--lime)}.toggle-label input:checked+i:after,.settings-page input:checked+i:after{left:21px;background:var(--lime)}.primary-btn.huge{display:block;width:100%;padding:18px;font-size:15px}

/* Campaign */
.campaign-map{position:relative;height:calc(100% - 84px);overflow:auto;padding:24px max(30px,var(--safe-right)) 40px max(30px,var(--safe-left));background:linear-gradient(#0b1024dd,#0b1024dd),repeating-linear-gradient(30deg,#26305e 0 2px,transparent 2px 38px),repeating-linear-gradient(150deg,#26305e 0 2px,transparent 2px 38px)}.map-copy{max-width:800px;margin:auto}.map-copy span{font-size:9px;color:var(--orange);letter-spacing:3px}.map-copy h3{font-size:32px;margin:5px 0}.map-copy p{font:600 14px system-ui;color:var(--muted)}.campaign-path{position:relative;max-width:900px;min-height:260px;margin:15px auto}.campaign-path:before{content:"";position:absolute;left:8%;right:8%;top:50%;height:8px;background:repeating-linear-gradient(90deg,#445079 0 18px,transparent 18px 26px);transform:translateY(-50%)}.campaign-node{position:absolute;top:50%;transform:translate(-50%,-50%);width:96px;height:110px;border:3px solid var(--edge);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:7px 7px 0 #03040d}.campaign-node:nth-child(even){top:30%}.campaign-node:nth-child(odd){top:70%}.campaign-node.unlocked{border-color:var(--lime)}.campaign-node.completed{background:#253e1a}.campaign-node.current{animation:nodeGlow 1.5s ease-in-out infinite}.campaign-node .node-icon{font-size:30px}.campaign-node b{font-size:10px;margin-top:7px}.campaign-node small{font-size:7px;color:var(--muted)}@keyframes nodeGlow{50%{box-shadow:7px 7px 0 #03040d,0 0 25px #c8ff3d55}}
.coach-message{max-width:700px;margin:auto;border:2px solid var(--edge);background:#11172f;display:flex;align-items:center;padding:12px}.coach-pixel{font-size:38px;margin-right:14px}.coach-message p{margin:0;font:600 12px system-ui}.coach-message b,.coach-message span{display:block}.coach-message b{font-family:inherit;color:var(--cyan);margin-bottom:3px}

/* Challenges */
.cards-page{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1180px;margin:auto;align-content:start}.challenge-card{padding:0 0 18px;border:2px solid var(--edge);background:var(--panel);text-align:left;overflow:hidden;box-shadow:7px 7px 0 #03040d}.challenge-card canvas{display:block;width:100%;height:170px;image-rendering:pixelated;background:#172044}.challenge-card>span,.challenge-card h3,.challenge-card p,.challenge-card .stars{margin-left:18px;margin-right:18px}.challenge-card>span{display:block;margin-top:15px;color:var(--cyan);font-size:8px;letter-spacing:2px}.challenge-card h3{margin-top:4px;margin-bottom:6px;font-size:19px}.challenge-card p{font:600 12px/1.4 system-ui;color:var(--muted);min-height:50px}.challenge-card .stars{color:var(--yellow);font-size:22px;letter-spacing:3px}

/* Academy */
.academy-layout{max-width:1080px;margin:auto}.rule-tabs{display:flex;gap:7px;overflow:auto;padding-bottom:12px;scrollbar-width:none}.rule-tabs button{flex:0 0 auto;border:2px solid var(--edge);background:var(--panel);padding:9px 13px;font-size:9px}.rule-tabs button.active{background:var(--lime);color:var(--night);border-color:var(--lime)}.rule-book{display:grid;grid-template-columns:1.2fr 1fr;min-height:480px;background:var(--panel);border:3px solid var(--edge)}.rule-visual{position:relative;min-height:380px;background:#151e45}.rule-visual canvas{width:100%;height:100%;image-rendering:pixelated}.rule-visual #ruleNumber{position:absolute;left:18px;bottom:8px;font-size:80px;color:#ffffff13}.rule-copy{padding:35px}.rule-copy>small{color:var(--orange);letter-spacing:3px}.rule-copy h3{font-size:31px;margin:8px 0 14px}.rule-copy p{font:600 14px/1.6 system-ui;color:#ccd1e5}.rule-bullets div{position:relative;padding:9px 0 9px 26px;border-top:1px solid var(--edge);font:600 12px system-ui}.rule-bullets div:before{content:"◆";position:absolute;left:2px;color:var(--lime)}.secondary-btn{border:2px solid var(--cyan);background:#152942;color:var(--cyan);padding:12px 16px;margin-top:17px;font-size:10px;box-shadow:4px 4px 0 #08131c}.rule-source{display:block;margin-top:10px;color:var(--muted);font-size:7px;letter-spacing:1.3px;text-align:right}

/* Collection/Profile/Settings */
.character-grid{height:calc(100% - 84px);overflow:auto;padding:20px max(30px,var(--safe-right)) 220px max(30px,var(--safe-left));display:grid;grid-template-columns:repeat(4,1fr);gap:12px;scrollbar-width:none}.character-card{position:relative;min-height:180px;border:2px solid var(--edge);background:linear-gradient(145deg,#222b59,#11162f);overflow:hidden;text-align:left;padding:0}.character-card canvas{display:block;width:100%;height:130px;image-rendering:pixelated}.character-card b,.character-card small{display:block;margin:7px 11px}.character-card b{font-size:12px}.character-card small{font-size:7px;color:var(--muted)}.character-card.locked{filter:grayscale(1) brightness(.5)}.character-card.selected{border-color:var(--lime)}.character-detail{position:absolute;z-index:4;left:20px;right:20px;bottom:calc(16px + var(--safe-bottom));min-height:155px;background:#0b1024ef;border:2px solid var(--lime);backdrop-filter:blur(10px);display:none;padding:16px}.character-detail.active{display:grid;grid-template-columns:1.3fr 2fr;gap:25px}.character-detail h3{font-size:24px;margin:0}.character-detail p{font:600 12px system-ui;color:var(--muted)}.stats-bars{display:grid;gap:7px}.stats-bars label{display:grid;grid-template-columns:80px 1fr 30px;align-items:center;font-size:8px}.stats-bars i{height:8px;background:#272e51}.stats-bars i span{display:block;height:100%;background:var(--cyan)}
.profile-page{max-width:900px;margin:auto}.player-card{display:flex;align-items:center;gap:22px;padding:22px;border:2px solid var(--edge);background:linear-gradient(135deg,#242e65,#11162f)}.big-avatar{width:100px;height:100px;display:grid;place-items:center;background:var(--lime);color:var(--night);font-size:32px;border:6px solid var(--ink);box-shadow:8px 8px 0 #080b1d}.player-card h3{font-size:27px;margin:4px 0 12px}.player-card small{color:var(--orange)}.xp-line{width:min(400px,55vw);height:12px;background:#080b1d;border:2px solid var(--edge)}.xp-line i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--lime));width:0}.player-card p{font:600 10px system-ui;color:var(--muted)}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}.stat-grid article{text-align:center;background:var(--panel);border:2px solid var(--edge);padding:15px}.stat-grid span,.stat-grid b,.stat-grid small{display:block}.stat-grid span{font-size:25px}.stat-grid b{font-size:22px;margin:5px}.stat-grid small{font-size:7px;color:var(--muted)}.achievements{background:var(--panel);border:2px solid var(--edge);padding:17px}.achievements h3{font-size:13px}.achievement{display:flex;align-items:center;gap:12px;padding:10px;border-top:1px solid var(--edge)}.achievement span{font-size:25px}.achievement div b,.achievement div small{display:block}.achievement div b{font-size:10px}.achievement div small{font:600 9px system-ui;color:var(--muted)}.achievement.locked{opacity:.35}
.settings-page{max-width:720px;margin:auto}.settings-page label{position:relative;display:flex;align-items:center;min-height:72px;border-bottom:2px solid var(--edge);padding-right:60px}.settings-page label b,.settings-page label span{display:block}.settings-page label b{font-size:11px}.settings-page label span{font:600 10px system-ui;color:var(--muted);margin-top:4px}.settings-page label i{top:25px}.settings-page .secondary-btn,.settings-page .danger-btn{width:100%;margin-top:18px}.danger-btn{border:2px solid var(--danger);background:#2c1222;color:var(--danger);padding:12px;font-size:10px}.version{display:block;text-align:center;color:var(--muted);font-size:7px;letter-spacing:2px;margin-top:25px}

/* Match */
.game-screen{background:#050714;touch-action:none;user-select:none;-webkit-user-select:none}.game-screen canvas#gameCanvas{position:absolute;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.match-hud{position:absolute;z-index:4;top:calc(9px + var(--safe-top));left:50%;transform:translateX(-50%);display:grid;grid-template-columns:90px 112px 90px;height:57px;filter:drop-shadow(5px 5px 0 #03040dcc)}.hud-team,.hud-clock{background:#0a0e23eF;border:2px solid #39436f;display:flex;align-items:center;justify-content:center}.hud-team{gap:10px}.hud-team canvas{width:38px;height:38px;image-rendering:pixelated}.hud-team b{font-size:26px}.hud-clock{flex-direction:column;border-left:0;border-right:0}.hud-clock small{font-size:7px;color:var(--cyan)}.hud-clock b{font-size:17px}.pause-btn{position:absolute;z-index:4;right:calc(12px + var(--safe-right));top:calc(13px + var(--safe-top));width:43px;height:43px;border:2px solid #48527f;background:#0a0e23eF}.game-message{position:absolute;z-index:5;left:50%;top:23%;transform:translate(-50%,-50%) scale(0);text-align:center;text-shadow:6px 6px 0 #080b1d;transition:.15s}.game-message.show{transform:translate(-50%,-50%) scale(1);animation:msg 1.5s steps(5,end)}.game-message small,.game-message b{display:block}.game-message small{color:var(--cyan);font-size:10px;letter-spacing:4px}.game-message b{font-size:48px;font-style:italic}.rule-toast{position:absolute;z-index:6;right:calc(14px + var(--safe-right));top:82px;width:250px;display:flex;gap:10px;align-items:center;padding:9px;background:#10162fea;border:2px solid var(--yellow);transform:translateX(130%);transition:.25s}.rule-toast.show{transform:none}.rule-toast>span{font-size:23px}.rule-toast b,.rule-toast p{margin:0}.rule-toast b{font-size:8px;color:var(--yellow)}.rule-toast p{font:600 9px/1.3 system-ui}
@keyframes msg{0%{filter:brightness(2)}20%,80%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(0)}}
.touch-controls{position:absolute;z-index:4;inset:0;pointer-events:none}.joystick{position:absolute;left:calc(25px + var(--safe-left));bottom:calc(20px + var(--safe-bottom));width:126px;height:126px;border-radius:50%;background:#0a0e2377;border:3px solid #ffffff38;pointer-events:auto;touch-action:none}.joystick:before{content:"";position:absolute;inset:22px;border:2px dashed #ffffff2a;border-radius:50%}.joystick div{position:absolute;left:38px;top:38px;width:46px;height:46px;border-radius:50%;background:#d9def05c;border:3px solid #ffffff65;box-shadow:0 5px 10px #0008}.action-pad{position:absolute;right:calc(22px + var(--safe-right));bottom:calc(18px + var(--safe-bottom));width:190px;height:138px;pointer-events:auto}.action-pad button{position:absolute;width:70px;height:70px;border-radius:50%;border:3px solid #ffffff55;background:#10162eaa;box-shadow:0 5px 0 #03040daa;touch-action:none}.action-pad button span,.action-pad button b{display:block}.action-pad button span{font-size:21px;color:var(--cyan)}.action-pad button b{font-size:7px}.action-pad button:nth-child(1){left:0;bottom:0}.action-pad button:nth-child(2){right:0;top:0;width:83px;height:83px;border-color:var(--orange);background:#6e251dcc}.action-pad button:nth-child(2) span{color:var(--orange)}.action-pad button:nth-child(3){right:6px;bottom:0}.action-pad button.pressed{transform:translateY(4px);box-shadow:0 1px 0 #03040d;filter:brightness(1.5)}.app.lefty .p1 .joystick{left:auto;right:calc(25px + var(--safe-right))}.app.lefty .p1 .action-pad{right:auto;left:calc(22px + var(--safe-left))}
.touch-controls.p2 .joystick{left:auto;right:calc(25px + var(--safe-right));top:calc(20px + var(--safe-top));bottom:auto;transform:rotate(180deg)}.touch-controls.p2 .action-pad{right:auto;left:calc(22px + var(--safe-left));top:calc(18px + var(--safe-top));bottom:auto;transform:rotate(180deg)}.touch-controls.p2 .action-pad button span,.touch-controls.p2 .action-pad button b{transform:rotate(180deg)}.hidden{display:none!important}.orientation-hint{display:none;position:absolute;z-index:20;inset:0;background:#080b1df5;place-content:center;text-align:center;padding:20px}.orientation-hint span{font-size:64px;color:var(--lime);animation:rotateHint 1.7s ease-in-out infinite}.orientation-hint b{display:block;font-size:24px}.orientation-hint p{font:600 13px system-ui;color:var(--muted)}@keyframes rotateHint{50%{transform:rotate(90deg)}}

/* Modal */
.modal{display:none;position:fixed;z-index:80;inset:0;background:#03040dcc;align-items:center;justify-content:center;padding:22px}.modal.open{display:flex}.modal-card{position:relative;width:min(620px,100%);max-height:88vh;overflow:auto;background:#11172f;border:3px solid #3b4679;padding:28px;box-shadow:12px 12px 0 #03040d}.modal-close{position:absolute;z-index:2;right:10px;top:10px;width:36px;height:36px;border:2px solid var(--edge);background:#080b1d;font-size:23px}.modal-card h2{margin:0 0 10px;font-size:30px}.modal-card h3{color:var(--cyan);font-size:13px}.modal-card p,.modal-card li{font:600 13px/1.55 system-ui;color:#c9cee3}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal-actions button{padding:13px;border:2px solid var(--edge);background:#1c2447}.modal-actions button.primary{background:var(--lime);color:var(--night);border-color:var(--lime)}.result-score{font-size:58px;text-align:center;color:var(--orange);text-shadow:5px 5px 0 #531f13}.reward-row{display:flex;justify-content:center;gap:12px;margin:15px}.reward-row span{background:#20284c;padding:9px 12px;font-size:11px}.toast{position:fixed;z-index:110;left:50%;bottom:calc(20px + var(--safe-bottom));transform:translate(-50%,140%);background:var(--lime);color:var(--night);padding:12px 18px;border:3px solid var(--ink);box-shadow:6px 6px 0 #03040d;font-size:10px;transition:.25s}.toast.show{transform:translate(-50%,0)}

@media(max-width:820px){
  .topbar,.section-header{height:70px}.home-content,.setup-content,.cards-page,.academy-layout,.profile-page,.settings-page{height:calc(100% - 70px)}.mini .brand-top{display:none}.mini strong{font-size:20px}.mini .brand-ball{width:34px;height:34px}.hero-card{min-height:260px}.hero-copy{top:9%;left:4%}.hero-copy p{display:none}.mode-grid{grid-template-columns:1fr 1fr}.mode-card{min-height:86px}.home-footer-row{grid-template-columns:1fr 1fr 48px}.cards-page{grid-template-columns:1fr}.challenge-card{display:grid;grid-template-columns:180px 1fr;grid-template-rows:auto auto auto auto;padding:0}.challenge-card canvas{grid-row:1/6;height:100%;min-height:180px}.challenge-card>span{margin-top:20px}.challenge-card p{min-height:auto}.rule-book{grid-template-columns:1fr}.rule-visual{min-height:250px}.character-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:580px){
  .brand-lockup.mini .brand-ball{display:none}.profile-strip{gap:5px}.currency{padding:8px}.hero-card{height:36vh;min-height:250px}.hero-copy{max-width:58%}.hero-copy h2{font-size:34px}.hero-badge{right:3%;width:61px;height:61px;padding-top:10px}.mode-card{padding:10px;gap:8px}.mode-icon{font-size:25px;width:32px}.mode-card b{font-size:10px}.mode-card small{font-size:6px}.home-footer-row{grid-template-columns:1fr 50px}.collection-card{display:none}.versus-panel{grid-template-columns:1fr 58px 1fr}.team-picker{min-height:150px}.team-picker canvas{width:62px;height:62px}.team-picker b{font-size:12px}.versus-copy strong{font-size:30px}.match-options{grid-template-columns:1fr 1fr}.match-options label:last-child{grid-column:1/3}.cards-page{display:block}.challenge-card{margin-bottom:14px}.character-grid{grid-template-columns:repeat(2,1fr)}.stat-grid{grid-template-columns:1fr 1fr}.player-card{align-items:flex-start}.big-avatar{width:70px;height:70px}.player-card h3{font-size:18px}
}
@media(orientation:portrait) and (max-width:760px){.game-screen.active .orientation-hint{display:grid}}
@media(orientation:landscape) and (max-height:520px){
  .topbar,.section-header{height:56px;padding-top:max(5px,var(--safe-top));padding-bottom:5px}.home-content,.setup-content,.cards-page,.academy-layout,.profile-page,.settings-page{height:calc(100% - 56px);padding-top:8px}.hero-card{height:240px;min-height:240px}.hero-copy h2{font-size:40px}.mode-grid{grid-template-columns:repeat(4,1fr);margin-top:9px}.mode-card{min-height:73px}.home-footer-row{display:none}.setup-content{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;max-width:1000px}.versus-panel{grid-row:1/3}.arena-select{margin:0}.match-options{margin:0}.primary-btn.huge{grid-column:2}.team-picker{min-height:130px;padding:5px}.team-picker canvas{width:55px;height:55px}.versus-copy strong{font-size:32px}.arena-select canvas{height:110px}.cards-page{grid-template-columns:repeat(3,1fr)}.challenge-card{display:block}.challenge-card canvas{height:100px;min-height:0}.challenge-card p{display:none}.rule-book{grid-template-columns:1.2fr 1fr;min-height:310px}.rule-visual{min-height:300px}.rule-copy{padding:18px}.rule-copy h3{font-size:22px}.rule-copy p{font-size:11px}.character-grid{grid-template-columns:repeat(6,1fr);padding-top:10px}.character-card{min-height:130px}.character-card canvas{height:90px}.character-detail{min-height:110px}.joystick{width:104px;height:104px}.joystick div{left:30px;top:30px;width:40px;height:40px}.action-pad{transform:scale(.82);transform-origin:right bottom}.touch-controls.p2 .action-pad{transform:rotate(180deg) scale(.75);transform-origin:left top}.touch-controls.p2 .joystick{transform:rotate(180deg) scale(.82);transform-origin:right top}.game-message b{font-size:38px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* OTBALL · interface edition */
.brand-ball{border-radius:4px;border-width:5px;transform:skew(-8deg);background:linear-gradient(135deg,transparent 45%,var(--orange) 46% 56%,transparent 57%);box-shadow:inset 0 0 0 5px var(--night)}
.brand-ball:before{width:5px;height:40px;left:9px;top:3px;transform:rotate(35deg)}.brand-ball:after{width:41px;height:5px;left:3px;top:28px;transform:rotate(-16deg)}.brand-ball i:nth-child(1){width:12px;height:12px;left:27px;top:7px;background:var(--lime);transform:none}.brand-ball i:nth-child(2),.brand-ball i:nth-child(3){display:none}
.home-screen:before,.menu-screen:before{content:"";position:absolute;inset:-30%;pointer-events:none;background:conic-gradient(from 90deg at 50% 50%,transparent,#5167ff0b,transparent,#ff4f9b0a,transparent);animation:atmosphere 24s linear infinite}@keyframes atmosphere{to{transform:rotate(360deg)}}
.hero-card{border-color:#4b5ba0}.hero-card:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#080b1dcc 0,transparent 54%),repeating-linear-gradient(90deg,transparent 0 52px,#fff06 52px 53px);pointer-events:none}.hero-copy{z-index:3}.hero-badge{z-index:3}
.mode-grid{grid-template-columns:repeat(3,1fr)}.mode-card{min-height:94px;border-color:#364174;background:linear-gradient(125deg,#182047,#0e132c 58%,#1e2855);isolation:isolate}.mode-card:before{content:"";position:absolute;z-index:-1;inset:0;opacity:0;background:linear-gradient(105deg,transparent 20%,#ffffff14 45%,transparent 70%);transform:translateX(-100%);transition:.4s}.mode-card:hover:before,.mode-card:active:before{opacity:1;transform:translateX(100%)}.world .mode-icon{color:#78a9ff}.friendly .mode-icon{color:#f4f0dc}.mode-card em{color:var(--lime)}
.home-footer-row{grid-template-columns:1.15fr 1fr 1fr 1fr 54px}.home-footer-row button{transition:transform .12s,background .12s}.home-footer-row button:active{transform:translateY(3px);background:#1c264d}.club-shortcut i{color:var(--orange)}.ranking-shortcut i{color:var(--yellow)}
.competition-switch{display:flex;gap:6px;margin-bottom:10px}.competition-switch button{flex:1;padding:11px;border:2px solid var(--edge);background:var(--panel);font-size:9px;color:var(--muted)}.competition-switch button.active{background:var(--cyan);color:var(--night);border-color:var(--cyan)}.match-options{grid-template-columns:repeat(4,1fr)}

/* Player creator */
.creator-layout{position:relative;z-index:2;height:calc(100% - 84px);overflow:auto;display:grid;grid-template-columns:minmax(310px,.85fr) minmax(430px,1.15fr);gap:18px;max-width:1100px;margin:auto;padding:20px max(28px,var(--safe-right)) max(32px,var(--safe-bottom)) max(28px,var(--safe-left))}.creator-preview{position:sticky;top:0;height:min(690px,calc(100dvh - 125px));min-height:480px;background:radial-gradient(circle at 50% 30%,#40519a,#151b3b 48%,#090d20);border:3px solid #4c5ca0;overflow:hidden;box-shadow:10px 10px 0 #03040d}.creator-preview:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 48px,#ffffff08 48px 49px),linear-gradient(0deg,#080b1dbb,transparent 40%)}.creator-preview canvas{position:absolute;width:100%;height:100%;image-rendering:pixelated}.identity-card{position:absolute;z-index:2;left:24px;bottom:25px}.identity-card small{color:var(--cyan);font-size:8px;letter-spacing:2px}.identity-card h3{font-size:30px;margin:4px 0;font-style:italic;text-shadow:4px 4px 0 #080b1d}.identity-card span{font-size:10px;color:var(--lime)}.unlock-ribbon{position:absolute;right:-29px;top:25px;background:var(--lime);color:var(--night);padding:8px 38px;font-size:8px;transform:rotate(38deg)}
.creator-controls,.club-form{position:relative;z-index:2;background:#10162f;border:2px solid var(--edge);padding:20px}.creator-tabs,.ranking-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:18px}.creator-tabs button,.ranking-tabs button{padding:11px 7px;border:2px solid var(--edge);background:#0b1026;font-size:8px;color:var(--muted)}.creator-tabs button.active,.ranking-tabs button.active{border-color:var(--lime);background:#25371b;color:var(--lime)}.creator-panel{display:none}.creator-panel.active{display:block;animation:screenIn .22s steps(4,end)}.creator-controls label,.club-form label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:8px;letter-spacing:1px;margin-bottom:14px}.creator-controls input,.creator-controls select,.club-form input,.club-form select{width:100%;border:2px solid var(--edge);background:#080d22;color:var(--ink);padding:12px;font-family:inherit;font-size:11px;border-radius:0}.creator-controls input:focus,.creator-controls select:focus,.club-form input:focus,.club-form select:focus{outline:0;border-color:var(--cyan)}.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.option-title{display:block;color:var(--cyan);font-size:8px;letter-spacing:2px;margin:15px 0 9px}.swatch-options,.shape-options{display:flex;flex-wrap:wrap;gap:8px}.swatch-options button{width:42px;height:42px;border:3px solid #ffffff30;background:var(--swatch);box-shadow:3px 3px 0 #03040d}.swatch-options button.active,.shape-options button.active{border-color:var(--lime);box-shadow:0 0 0 2px #080b1d,0 0 0 4px var(--lime)}.shape-options button{position:relative;min-width:48px;height:45px;border:2px solid var(--edge);background:#1b2348;font-size:12px}.shape-options button.locked:after{content:"🔒";position:absolute;inset:0;display:grid;place-items:center;background:#080b1dcc}.color-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.color-inputs label{margin:0}.color-inputs input[type=color]{height:48px;padding:3px}.creator-hint{font:600 11px/1.5 system-ui;color:var(--muted);border-left:3px solid var(--yellow);padding-left:10px}.creator-controls .huge,.club-form .huge{margin-top:18px}

/* Club creator */
.club-creator{position:relative;z-index:2;height:calc(100% - 84px);overflow:auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:18px;max-width:1050px;margin:auto;padding:22px max(28px,var(--safe-right)) 35px max(28px,var(--safe-left))}.club-preview{position:sticky;top:0;height:520px;background:radial-gradient(circle,#27346f,#0c1128 65%);border:3px solid #495789;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.club-preview canvas{width:280px;height:280px;image-rendering:pixelated}.club-preview small{color:var(--cyan);letter-spacing:3px}.club-preview h3{font-size:30px;margin:6px 0}.club-preview p{font:700 11px system-ui;color:var(--muted)}.club-level,.collection-count,.season-chip{padding:9px 12px;border:2px solid var(--edge);background:var(--panel);font-size:8px}.club-level b{color:var(--lime)}

/* World cup */
.world-page{position:relative;z-index:2;height:calc(100% - 84px);overflow:auto;max-width:1100px;margin:auto;padding:20px max(28px,var(--safe-right)) 36px max(28px,var(--safe-left))}.world-intro{position:relative;height:230px;background:linear-gradient(110deg,#18265c,#1a1740);border:3px solid #43538e;overflow:hidden;padding:28px}.world-intro>div{position:relative;z-index:2;max-width:47%}.world-intro small{color:var(--yellow);letter-spacing:3px}.world-intro h3{font-size:31px;margin:8px 0}.world-intro p{font:600 12px/1.5 system-ui;color:#c8cee7}.world-intro canvas{position:absolute;right:0;top:0;width:58%;height:100%;image-rendering:pixelated}.country-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin:14px 0}.country-card{min-height:94px;border:2px solid var(--edge);background:#121936;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.country-card span{font-size:30px}.country-card b{font-size:9px}.country-card small{font-size:7px;color:var(--muted)}.country-card.selected{border-color:var(--lime);background:#243b1b;box-shadow:0 0 20px #c8ff3d22}.world-cup{font-size:28px}

/* Rankings */
.ranking-page{position:relative;z-index:2;height:calc(100% - 84px);overflow:auto;max-width:950px;margin:auto;padding:20px max(28px,var(--safe-right)) 36px max(28px,var(--safe-left))}.rank-hero{display:grid;grid-template-columns:1fr 210px;border:3px solid #45538e;background:linear-gradient(120deg,#202b61,#111731);min-height:130px}.rank-hero>div{display:flex;flex-direction:column;justify-content:center;padding:20px}.rank-hero small{font-size:8px;color:var(--cyan);letter-spacing:2px}.rank-hero b{font-size:37px}.rank-hero span{font-size:10px}.rank-stars{align-items:center;border-left:2px solid #45538e}.rank-stars span{color:var(--yellow);font-size:29px}.ranking-tabs{margin-top:14px}.ranking-table{border:2px solid var(--edge);background:#0d1229}.rank-row{display:grid;grid-template-columns:58px 1fr 110px 90px;align-items:center;min-height:50px;border-bottom:1px solid var(--edge);padding:0 14px}.rank-row.me{background:#273b1e;border-left:5px solid var(--lime)}.rank-row>span{color:var(--muted);font-size:11px}.rank-row b{font-size:10px}.rank-row small{font-size:8px;color:var(--muted)}.rank-row em{text-align:right;font-style:normal;color:var(--yellow);font-size:10px}.leaders-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.leaders-row article{border:2px solid var(--edge);background:linear-gradient(135deg,#191f43,#0e132c);padding:15px}.leaders-row small,.leaders-row b,.leaders-row span{display:block}.leaders-row small{color:var(--orange);font-size:7px;letter-spacing:2px}.leaders-row b{font-size:17px;margin:7px 0}.leaders-row span{color:var(--muted);font-size:9px}

/* Match depth and cameras */
.camera-btn{position:absolute;z-index:4;right:calc(64px + var(--safe-right));top:calc(13px + var(--safe-top));height:43px;border:2px solid #48527f;background:#0a0e23eF;display:flex;align-items:center;gap:6px;padding:0 10px}.camera-btn span{color:var(--cyan);font-size:17px}.camera-btn b{font-size:7px}.match-stars{position:absolute;z-index:4;left:calc(14px + var(--safe-left));top:calc(14px + var(--safe-top));height:40px;display:flex;align-items:center;gap:6px;padding:0 12px;border:2px solid #48527f;background:#0a0e23eF}.match-stars span{color:var(--yellow)}.stamina-hud{position:absolute;z-index:4;left:calc(18px + var(--safe-left));bottom:calc(150px + var(--safe-bottom));width:118px}.stamina-hud small{font-size:6px;color:#fff8}.stamina-hud i{display:block;height:7px;background:#080b1d;border:1px solid #ffffff44}.stamina-hud i span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--orange),var(--lime));transition:width .15s}.game-screen.camera-broadcast canvas#gameCanvas{filter:saturate(1.12) contrast(1.05)}.game-screen.camera-dynamic canvas#gameCanvas{filter:saturate(1.06)}
.touch-controls .joystick{backdrop-filter:blur(5px);box-shadow:inset 0 0 35px #6d7ff322,0 0 0 7px #06091a88}.joystick.active{border-color:var(--cyan);box-shadow:inset 0 0 35px #3cf0e544,0 0 25px #3cf0e533}.action-pad button{backdrop-filter:blur(7px);transition:transform .08s,filter .08s}.action-pad .shoot{box-shadow:0 5px 0 #35100b,0 0 18px #ff6b3533}.app.controls-large .joystick{transform:scale(1.18);transform-origin:left bottom}.app.controls-large .action-pad{transform:scale(1.12);transform-origin:right bottom}.app.controls-compact .joystick{transform:scale(.82);transform-origin:left bottom}.app.controls-compact .action-pad{transform:scale(.83);transform-origin:right bottom}
.select-setting{padding-right:0!important}.select-setting select{margin-left:auto;min-width:180px;background:#111832;color:var(--ink);border:2px solid var(--edge);padding:10px;font-size:9px}

@media(max-width:900px){.home-footer-row{grid-template-columns:1fr 1fr 1fr 48px}.ranking-shortcut{display:none}.creator-layout,.club-creator{grid-template-columns:1fr}.creator-preview,.club-preview{position:relative;height:420px;min-height:420px}.creator-layout,.club-creator{height:calc(100% - 70px)}.country-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.mode-grid{grid-template-columns:1fr 1fr}.home-footer-row{grid-template-columns:1fr 1fr 48px}.club-shortcut{display:none}.match-options{grid-template-columns:1fr 1fr}.match-options label:last-child{grid-column:auto}.creator-layout{grid-template-columns:1fr;padding:10px}.creator-preview{height:360px;min-height:360px}.creator-controls{padding:13px}.club-creator{padding:10px}.country-grid{grid-template-columns:repeat(3,1fr)}.world-intro>div{max-width:72%}.world-intro canvas{opacity:.5}.rank-row{grid-template-columns:42px 1fr 78px}.rank-row small{display:none}.leaders-row{grid-template-columns:1fr}.rank-hero{grid-template-columns:1fr 130px}}
@media(orientation:landscape) and (max-height:520px){.mode-grid{grid-template-columns:repeat(3,1fr)}.mode-card{min-height:61px}.creator-layout,.club-creator{height:calc(100% - 56px);grid-template-columns:.75fr 1.25fr;padding:8px}.creator-preview,.club-preview{position:sticky;height:calc(100dvh - 72px);min-height:0}.creator-controls,.club-form{padding:11px}.creator-tabs{margin-bottom:8px}.creator-controls label,.club-form label{margin-bottom:7px}.creator-controls input,.creator-controls select,.club-form input,.club-form select{padding:7px}.option-title{margin:8px 0 5px}.swatch-options button{width:32px;height:32px}.shape-options button{height:34px}.country-grid{grid-template-columns:repeat(6,1fr)}.world-intro{height:155px;padding:16px}.world-intro h3{font-size:23px}.ranking-page,.world-page{height:calc(100% - 56px);padding-top:8px}.rank-hero{min-height:85px}.rank-hero b{font-size:25px}.camera-btn{right:calc(58px + var(--safe-right));top:calc(8px + var(--safe-top));height:36px}.pause-btn{top:calc(8px + var(--safe-top));width:36px;height:36px}.match-stars{top:calc(8px + var(--safe-top));height:34px}.stamina-hud{bottom:calc(119px + var(--safe-bottom))}}
.unlock-track{margin-top:18px;border-top:2px solid var(--edge);padding-top:14px}.unlock-track>div:first-child small,.unlock-track>div:first-child b{display:block}.unlock-track>div:first-child small{font-size:7px;color:var(--orange);letter-spacing:2px}.unlock-track>div:first-child b{font-size:11px;margin:3px 0 10px}.unlock-track #unlockTrack{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.unlock-item{position:relative;min-height:74px;padding:10px;border:2px solid var(--edge);background:#0a0f26}.unlock-item span,.unlock-item b,.unlock-item small{display:block}.unlock-item span{font-size:19px}.unlock-item b{font-size:8px;margin:5px 0}.unlock-item small{font:600 7px system-ui;color:var(--muted)}.unlock-item.done{border-color:var(--lime);background:#1f321a}.unlock-item.done:after{content:"✓";position:absolute;right:6px;top:5px;color:var(--lime)}

/* OTBALL 3.0 · fit, clarity and control */
.screen,.game-screen{width:100%;height:100%;min-height:0}.game-screen canvas#gameCanvas{inset:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center center}.game-screen.active{display:block;background:#030511}
.section-header small{font-size:10px;letter-spacing:1.8px}.section-header h2{font-size:26px;line-height:1.05}.mode-card small,.mode-card em{font-size:9px;letter-spacing:.8px}.mode-card b{font-size:14px;line-height:1.15}.daily-card small,.collection-card small{font-size:8px}.daily-card b,.collection-card b{font-size:11px}.team-picker small,.team-picker span,.match-options label span,.select-heading small{font-size:9px}.rule-tabs button,.creator-tabs button,.ranking-tabs button{font-size:10px}.rule-copy p{font-size:15px}.rule-bullets div{font-size:13px}.settings-page label b{font-size:12px}.settings-page label span{font-size:11px;line-height:1.35}.rank-row b{font-size:11px}.rank-row small{font-size:9px}
.mode-card:nth-child(1){border-left:5px solid #78a9ff;background:linear-gradient(120deg,#17285c,#111833)}.mode-card:nth-child(2){border-left:5px solid var(--lime);background:linear-gradient(120deg,#20351b,#111833)}.mode-card:nth-child(3){border-left:5px solid #f4d370;background:linear-gradient(120deg,#3a3019,#111833)}.mode-card:nth-child(4){border-left:5px solid var(--orange);background:linear-gradient(120deg,#3b211c,#111833)}.mode-card:nth-child(5){border-left:5px solid var(--cyan);background:linear-gradient(120deg,#14353a,#111833)}.mode-card:nth-child(6){border-left:5px solid var(--yellow);background:linear-gradient(120deg,#3a3214,#111833)}
.cards-page .challenge-card:nth-child(1){border-top:5px solid var(--cyan)}.cards-page .challenge-card:nth-child(2){border-top:5px solid var(--orange)}.cards-page .challenge-card:nth-child(3){border-top:5px solid var(--lime)}.settings-page{max-width:780px}.settings-page label{background:#0e142c;margin-bottom:4px;padding-left:14px;border:1px solid #263159;min-height:78px}.settings-page label:nth-child(even){background:#121a36}.select-setting select{font-size:11px}.range-setting{display:grid!important;grid-template-columns:1fr 210px!important;align-items:center}.range-setting input{position:static!important;opacity:1!important;width:100%;accent-color:var(--lime)}
.fullscreen-btn{position:absolute;z-index:4;right:calc(163px + var(--safe-right));top:calc(13px + var(--safe-top));width:43px;height:43px;border:2px solid #48527f;background:#0a0e23ef;font-size:19px}.fullscreen-btn:active,.camera-btn:active,.pause-btn:active{transform:translateY(3px);filter:brightness(1.5)}
.touch-controls{opacity:var(--control-opacity);transition:opacity .2s}.joystick{background:radial-gradient(circle,#91a1d35c 0 22%,#1019369c 23% 48%,#3cf0e522 49% 50%,#081027a6 51%);border-color:#8190c777}.joystick:after{content:"";position:absolute;inset:7px;border:1px solid #ffffff1f;border-radius:50%}.joystick div{background:radial-gradient(circle at 35% 30%,#f2f5ff,#8c9bca 45%,#344064);border:3px solid #fff;box-shadow:0 6px 0 #11172f,0 0 20px #3cf0e533}.joystick.active div{box-shadow:0 3px 0 #11172f,0 0 28px #3cf0e588}
.action-pad button{overflow:hidden;border-radius:22px 7px;background:linear-gradient(145deg,#1a2448dd,#0a1026ee);border:3px solid #5f6faaa8;box-shadow:0 6px 0 #03040d,0 10px 22px #0008;transition:transform .08s,filter .08s,box-shadow .08s}.action-pad button:before{content:"";position:absolute;inset:5px;border:1px solid #ffffff1c;border-radius:16px 4px}.action-pad button:after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;opacity:0;transform:translate(-50%,-50%) scale(0)}.action-pad button span{font-size:25px;line-height:1;color:var(--cyan);filter:drop-shadow(0 2px 0 #000)}.action-pad button b{font-size:8px;letter-spacing:.5px;margin-top:3px}.action-pad button:nth-child(1){border-color:#3cf0e5aa}.action-pad button:nth-child(3){border-color:#c8ff3daa}.action-pad button:nth-child(3) span{color:var(--lime)}.action-pad button:nth-child(2){border-radius:50%;background:radial-gradient(circle at 35% 25%,#a83b27,#5b1714 67%);border-color:#ff8b57;box-shadow:0 7px 0 #32100d,0 0 26px #ff6b3544}.action-pad button:nth-child(2) span{color:#fff}.action-pad button.pressed{transform:translateY(5px) scale(.94);box-shadow:0 1px 0 #03040d,0 0 28px currentColor;filter:brightness(1.35)}.action-pad button.pressed:after{animation:buttonRipple .38s ease-out}@keyframes buttonRipple{0%{opacity:.6;transform:translate(-50%,-50%) scale(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(12)}}
.controls-clean .joystick{background:#10162e88;border:2px solid #fff6}.controls-clean .action-pad button{border-radius:50%;background:#10162eaa;box-shadow:none}.controls-clean .action-pad button:before{display:none}.controls-clean .action-pad button:nth-child(2){background:#6e251dcc}.controls-contrast .touch-controls{opacity:1!important}.controls-contrast .joystick{background:#050505dd;border:5px solid #fff}.controls-contrast .action-pad button{background:#050505;border:4px solid #fff;color:#fff;box-shadow:0 6px 0 #000}.controls-contrast .action-pad button span{color:#fff}.controls-contrast .action-pad button:nth-child(2){background:#ad2c20;border-color:#fff}
.control-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.control-presets button,.pause-tools button{border:2px solid var(--edge);background:#151d3d;padding:14px;text-align:left}.control-presets b,.control-presets span{display:block}.control-presets b{font-size:11px;color:var(--cyan)}.control-presets span{font:600 10px system-ui;color:var(--muted);margin-top:4px}.pause-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0}.pause-tools button{text-align:center;font-size:9px}.orientation-hint .secondary-btn{margin:10px auto 0}
.calm-mode .scanlines,.calm-mode .home-screen:before,.calm-mode .menu-screen:before{display:none}.calm-mode *{animation-duration:.001ms!important;animation-iteration-count:1!important}.calm-mode .mode-card,.calm-mode .hero-card,.calm-mode .challenge-card{box-shadow:0 3px 0 #03040d}.calm-mode .mode-card:before,.calm-mode .mode-card:after{display:none}.calm-mode .muted{color:#d4d8e8}.ui-large .mode-card small,.ui-large .mode-card em{font-size:10px}.ui-large .mode-card b{font-size:16px}.ui-large .settings-page label b{font-size:14px}.ui-large .settings-page label span{font-size:12px}.ui-large .rule-copy p{font-size:17px}.ui-large .rank-row b{font-size:13px}
@media(orientation:landscape) and (max-height:540px){
  .game-screen canvas#gameCanvas{height:100%;width:100%;object-fit:contain}.match-hud{top:calc(5px + var(--safe-top));height:48px;grid-template-columns:78px 100px 78px}.hud-team canvas{width:31px;height:31px}.hud-team b{font-size:21px}.hud-clock b{font-size:15px}.pause-btn,.camera-btn,.fullscreen-btn{top:calc(6px + var(--safe-top));height:38px}.pause-btn{width:38px}.camera-btn{right:calc(58px + var(--safe-right))}.fullscreen-btn{right:calc(150px + var(--safe-right));width:38px}.match-stars{top:calc(6px + var(--safe-top));height:36px}.joystick{left:calc(14px + var(--safe-left));bottom:calc(10px + var(--safe-bottom));width:104px;height:104px}.joystick div{left:31px;top:31px;width:38px;height:38px}.action-pad{right:calc(12px + var(--safe-right));bottom:calc(7px + var(--safe-bottom));width:178px;height:122px}.action-pad button{width:62px;height:62px}.action-pad button:nth-child(2){width:76px;height:76px}.stamina-hud{left:calc(16px + var(--safe-left));bottom:calc(111px + var(--safe-bottom));width:105px}.game-message b{font-size:32px}.rule-toast{top:57px;width:220px}.rule-toast p{font-size:8px}
}
@media(orientation:landscape) and (max-height:420px){.match-hud{transform:translateX(-50%) scale(.88);transform-origin:top center}.action-pad{transform:scale(.9);transform-origin:right bottom}.joystick{transform:scale(.88);transform-origin:left bottom}.controls-large .joystick{transform:scale(1)}.controls-large .action-pad{transform:scale(1)}.camera-btn b{display:none}.camera-btn{width:42px;padding:0;justify-content:center}.fullscreen-btn{right:calc(108px + var(--safe-right))}}

/* OTBALL 4.0 · desktop play and HD pixel presentation */
.pc-guide{display:none;position:absolute;z-index:5;left:50%;bottom:calc(13px + var(--safe-bottom));transform:translateX(-50%);width:min(1080px,80vw);padding:9px 12px;border:1px solid #5b6aa077;background:#070b1bd9;box-shadow:0 6px 20px #0009;backdrop-filter:blur(8px);pointer-events:none;transition:opacity .2s,transform .2s}
.desktop-input .pc-guide{display:flex;align-items:center;justify-content:center;gap:12px}.desktop-input .touch-controls{display:none!important}.desktop-input #gameCanvas{cursor:none}.touch-input .pc-guide,.pc-hints-off .pc-guide,.pc-guide-hidden .pc-guide{display:none!important}
.pc-guide-title{display:flex;flex-direction:column;gap:1px;padding-right:10px;border-right:1px solid #50608d}.pc-guide-title span{align-self:flex-start;padding:2px 5px;background:var(--lime);color:var(--night);font-size:8px}.pc-guide-title b{font-size:10px;white-space:nowrap}.pc-guide-title small{font:700 7px system-ui;color:#8e99bd;white-space:nowrap}.pc-player{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}.pc-player strong{color:var(--cyan);font-size:9px}.pc-player span{display:flex;align-items:center;gap:4px;color:#bcc5e3;font:750 8px system-ui;white-space:nowrap}.pc-player kbd{min-width:24px;padding:4px 6px;border:1px solid #7785ae;border-bottom-width:3px;background:linear-gradient(#202a4e,#10162e);color:#fff;font:900 8px system-ui;text-align:center;border-radius:3px;box-shadow:0 2px 0 #02040d}.pc-p2{padding-left:10px;border-left:1px solid #50608d}.game-screen:not(.local-match) .pc-p2{display:none}
.desktop-input .match-hud{animation:hudEnter .35s cubic-bezier(.2,.9,.25,1.25)}@keyframes hudEnter{from{opacity:0;transform:translate(-50%,-14px) scale(.9)}}
.gfx-high canvas#gameCanvas{filter:saturate(1.12) contrast(1.06) drop-shadow(0 0 18px #394fb01e)}.gfx-performance .scanlines{display:none}.gfx-performance canvas#gameCanvas{filter:none!important}
@media(orientation:landscape) and (max-height:600px){.pc-guide{bottom:calc(5px + var(--safe-bottom));width:min(1040px,82vw);padding:5px 7px}.pc-guide-title small,.pc-player span{font-size:7px}.pc-player kbd{padding:3px 5px;font-size:7px}.pc-guide-title{display:none}}

/* OTBALL 4.0 · professional world */
:root{--night:#050711;--panel:#0d1224;--panel2:#131a33;--edge:#2a365d;--lime:#c9ff38;--cyan:#43f4e8;--orange:#ff6534;--pink:#ff3f83;--ink:#f6f7f2;--muted:#98a4c5}
.app{background:radial-gradient(circle at 72% -10%,#26316c 0,transparent 35%),radial-gradient(circle at 0 100%,#102a3d 0,transparent 32%),linear-gradient(145deg,#050711,#090d1d 58%,#070917)}
.scanlines{opacity:.022}.topbar,.section-header{border-bottom:1px solid #34416b;background:linear-gradient(90deg,#050711f5,#0a1025e8);box-shadow:0 10px 35px #0007}.topbar:after,.section-header:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--lime),var(--orange),transparent);opacity:.55}
.boot-screen{background:radial-gradient(circle at 50% 43%,#243276 0,#0b1028 28%,#04050d 74%);padding-top:calc(18vh + var(--safe-top))}.boot-screen:before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 0deg,transparent,#43f4e80b,transparent,#ff3f830d,transparent);animation:atmosphere 8s linear infinite}.boot-logo{filter:drop-shadow(0 0 35px #43f4e533)}.boot-tag{font-size:13px;color:#fff;letter-spacing:8px}.pixel-loader{height:9px;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px #6170a0,0 0 28px #43f4e544}.boot-screen small{font:800 10px system-ui;color:#abb5d3}.boot-stars{opacity:.22}

.home-v4{max-width:1480px;margin:auto;padding:16px max(22px,var(--safe-right)) max(35px,var(--safe-bottom)) max(22px,var(--safe-left))}.home-v4 .season-line{max-width:none;margin-bottom:10px}.home-stage{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(290px,.75fr);gap:13px}.hero-v4{max-width:none;width:100%;height:430px;min-height:430px;margin:0;border:1px solid #526493;box-shadow:0 20px 55px #0009;clip-path:none}.hero-v4:after{box-shadow:inset 0 0 110px #02030ca8,inset 0 -100px 100px #03050f99}.hero-v4:before{background:linear-gradient(90deg,#040711ed 0,#070a17bb 36%,transparent 64%),linear-gradient(0deg,#050711b8,transparent 40%);z-index:1}.hero-v4 canvas{filter:saturate(1.18) contrast(1.08)}.hero-v4 .hero-copy{left:5%;top:11%;max-width:52%}.hero-v4 .eyebrow{background:transparent;color:var(--lime);padding:0;transform:none;font:850 9px system-ui;letter-spacing:2px}.hero-v4 .eyebrow i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange);animation:blink .8s steps(2) infinite}.hero-v4 .hero-copy h2{font-size:clamp(42px,5.5vw,78px);line-height:.82;letter-spacing:-4px;margin:19px 0 14px;text-shadow:0 8px 0 #080b1d,0 0 45px #000}.hero-v4 .hero-copy h2 em{color:var(--lime);text-shadow:0 5px 0 #52750d}.hero-v4 .hero-copy p{max-width:430px;color:#dbe1f2;font-size:14px}.hero-actions{display:flex;align-items:center;gap:12px;margin-top:18px}.hero-quick{padding:14px 18px;border:1px solid #7b89b2;background:#0b1024bd;font-size:9px;letter-spacing:1px;backdrop-filter:blur(8px)}.hero-status{position:absolute;z-index:3;right:5%;bottom:7%;min-width:220px;padding:12px 15px;border-left:3px solid var(--cyan);background:#060a18d9;backdrop-filter:blur(8px)}.hero-status small,.hero-status b,.hero-status span{display:block}.hero-status small{color:var(--cyan);font-size:7px;letter-spacing:2px}.hero-status b{font-size:16px;margin:5px 0}.hero-status span{font:750 8px system-ui;color:#aeb8d5}.hero-status i{color:var(--lime);font-style:normal}.hero-v4 .hero-badge{width:88px;height:88px;right:3%;top:5%;padding:17px 5px;border-radius:50%;transform:rotate(6deg);background:linear-gradient(145deg,var(--orange),#9c2e25);box-shadow:0 0 0 5px #ffffff14,0 10px 25px #0008}
.season-dock{display:flex;flex-direction:column;min-height:430px;border:1px solid #34416a;background:linear-gradient(160deg,#121a34,#090d1e 70%);box-shadow:0 20px 55px #0008}.dock-head{display:flex;align-items:center;justify-content:space-between;padding:15px;border-bottom:1px solid #2c385f}.dock-head span{padding:4px 7px;background:var(--orange);font-size:7px}.dock-head b{font-size:10px;letter-spacing:1px}.continue-card{display:flex;flex-direction:column;text-align:left;padding:20px 17px;border:0;border-bottom:1px solid #2a3558;background:radial-gradient(circle at 100% 0,#293a7166,transparent 48%)}.continue-card small{font-size:7px;color:var(--cyan);letter-spacing:2px}.continue-card b{font-size:18px;line-height:1.05;margin:7px 0 14px}.continue-card>span{height:5px;background:#29314e}.continue-card>span i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--lime));box-shadow:0 0 15px #43f4e5}.continue-card em{margin-top:7px;color:var(--lime);font-size:7px;font-style:normal}.dock-event{display:flex;align-items:center;gap:10px;padding:14px;border:0;border-bottom:1px solid #2a3558;background:#0c1226;text-align:left}.dock-event>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#312f17;color:var(--yellow);font-size:21px}.dock-event small,.dock-event b{display:block}.dock-event small{font-size:7px;color:#9ea8c8}.dock-event b{font-size:10px;margin-top:3px}.dock-event>i{margin-left:auto;color:var(--yellow);font-size:9px;font-style:normal}.dock-stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #2a3558}.dock-stats div{padding:12px;text-align:center;border-right:1px solid #2a3558}.dock-stats div:last-child{border:0}.dock-stats small,.dock-stats b{display:block}.dock-stats small{font-size:6px;color:#8490b3}.dock-stats b{font-size:15px;margin-top:4px}.rival-intel{margin:auto 10px 10px;padding:12px;border:1px solid #3d4b74;background:linear-gradient(120deg,#101a34,#0a1022);text-align:left}.rival-intel small,.rival-intel b,.rival-intel span{display:block}.rival-intel small{font-size:6px;color:var(--pink);letter-spacing:1.5px}.rival-intel b{font-size:9px;margin:5px 0}.rival-intel span{font:650 8px/1.35 system-ui;color:#a8b3d0}
.mode-heading{display:flex;justify-content:space-between;align-items:end;margin:24px 0 9px}.mode-heading small{font-size:7px;color:var(--cyan);letter-spacing:2px}.mode-heading h3{font-size:22px;margin:4px 0 0}.mode-heading>span{font-size:7px;color:#8d99bc}.mode-rail{max-width:none;display:flex;overflow-x:auto;gap:10px;margin:0;padding:2px 2px 13px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#52618e transparent}.mode-rail .mode-card{flex:0 0 230px;min-height:136px;scroll-snap-align:start;display:block;padding:17px 14px 14px;border:1px solid #35436e;background:radial-gradient(circle at 100% 0,#31416d66,transparent 42%),linear-gradient(145deg,#111936,#090e20);box-shadow:0 10px 25px #0007;transform:none}.mode-rail .mode-card:hover{border-color:var(--mode,var(--cyan));transform:translateY(-4px);box-shadow:0 15px 32px #0009,0 0 22px color-mix(in srgb,var(--mode,var(--cyan)) 20%,transparent)}.mode-number{position:absolute;right:11px;top:9px;color:#ffffff20;font-size:26px;font-style:italic}.mode-rail .mode-icon{display:block;width:auto;text-align:left;font-size:31px;color:var(--mode,var(--lime));text-shadow:none;margin-bottom:9px}.mode-rail .mode-card small{font:800 7px system-ui;color:#8e9abb;letter-spacing:1.5px}.mode-rail .mode-card b{font-size:17px;margin:4px 0}.mode-rail .mode-card em{font:800 7px system-ui;color:var(--mode,var(--cyan));letter-spacing:.7px}.mode-rail .campaign{--mode:#c9ff38}.mode-rail .world{--mode:#73a8ff}.goalie-mode{--mode:#ff3f83}.tactics-mode{--mode:#43f4e8}.echo-mode{--mode:#9e8cff}.archetype-mode{--mode:#ffd43b}.arena-mode{--mode:#ff6534}.replay-mode{--mode:#63d5ff}.mode-rail .local{--mode:#ff8758}.mode-rail .skills{--mode:#43f4e8}
.home-bottom-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 54px;gap:10px;margin-top:13px}.identity-panel,.club-panel,.rank-panel{min-height:70px;display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid #334168;background:linear-gradient(120deg,#101832,#090e20);text-align:left}.identity-panel>span{display:grid;place-items:center;width:45px;height:45px;background:linear-gradient(145deg,var(--lime),#7aa817);color:#08100d;border:2px solid #fff;font-size:14px}.club-panel>span,.rank-panel>span{font-size:26px;color:var(--orange)}.rank-panel>span{color:var(--yellow)}.home-bottom-grid small,.home-bottom-grid b,.home-bottom-grid em{display:block}.home-bottom-grid small{font-size:6px;color:#8e9abc;letter-spacing:1.5px}.home-bottom-grid b{font-size:11px;margin:4px 0}.home-bottom-grid em{font:700 7px system-ui;color:var(--cyan);font-style:normal}.identity-panel>i{margin-left:auto;font-size:7px;color:var(--lime);font-style:normal}.home-bottom-grid .settings-card{min-height:70px;border-width:1px}.news-ticker{height:34px;margin-top:10px;display:flex;overflow:hidden;border:1px solid #2c385c;background:#070b19}.news-ticker>b{display:grid;place-items:center;flex:0 0 120px;background:var(--lime);color:#07100e;font-size:8px}.news-ticker>div{display:flex;align-items:center;gap:65px;white-space:nowrap;animation:newsFlow 22s linear infinite}.news-ticker span{font:800 7px system-ui;color:#aeb8d2;letter-spacing:1px}.news-ticker span:before{content:"◆";margin:0 13px;color:var(--orange)}@keyframes newsFlow{to{transform:translateX(-55%)}}

.feature-mark{display:grid;place-items:center;width:50px;height:50px;border:1px solid #4b5b86;background:#10172f;color:var(--lime);font-size:25px}.feature-page,.tactics-page,.echo-page,.archetype-page,.arena-lab-page,.replay-page{height:calc(100% - 84px);overflow:auto;max-width:1400px;margin:auto;padding:22px max(24px,var(--safe-right)) 34px max(24px,var(--safe-left));scrollbar-width:none}.feature-page{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,.7fr);gap:16px}.feature-hero{position:relative;min-height:570px;border:1px solid #3b4b77;background:#080c1c;overflow:hidden}.feature-hero canvas{position:absolute;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;filter:saturate(1.18) contrast(1.08)}.feature-hero>div{position:absolute;z-index:2;left:5%;top:8%;max-width:48%;padding:20px;background:linear-gradient(90deg,#050713e8,transparent)}.feature-kicker{display:block;color:var(--cyan);font-size:8px;letter-spacing:2.5px}.feature-hero h3,.tactic-sidebar h3,.echo-copy h3,.replay-sidebar h3{font-size:clamp(31px,4.5vw,61px);line-height:.88;margin:14px 0;letter-spacing:-2px}.feature-hero h3 em{color:var(--pink);font-style:normal}.feature-hero p,.tactic-sidebar p,.echo-copy p,.replay-sidebar p{font:650 13px/1.55 system-ui;color:#c3cbe0}.feature-badges{display:flex;gap:6px;flex-wrap:wrap}.feature-badges span{padding:6px 8px;border:1px solid #68769c;background:#0a1024;font-size:7px}.feature-side,.tactic-sidebar,.echo-console,.arena-controls,.replay-sidebar{border:1px solid #344269;background:linear-gradient(155deg,#121a34,#090e1f);padding:20px}.personal-best{text-align:center;padding:25px;border-bottom:1px solid #354166;background:radial-gradient(circle,#263868,transparent 70%)}.personal-best small,.personal-best b,.personal-best span{display:block}.personal-best small{font-size:7px;color:var(--pink);letter-spacing:2px}.personal-best b{font-size:52px;margin:8px}.personal-best span{font-size:8px;color:#98a4c5}.feature-side label,.echo-console label,.arena-controls label{display:flex;flex-direction:column;gap:7px;margin:17px 0;color:#99a5c5;font-size:8px;letter-spacing:1px}.feature-side select,.echo-console input,.arena-controls input,.arena-controls select,.board-top input{width:100%;padding:13px;border:1px solid #43517b;background:#070c1c;color:#fff;font-size:11px}.mode-rules{padding:13px;border-left:3px solid var(--cyan);background:#0b1125}.mode-rules b{font-size:8px;color:var(--cyan)}.mode-rules p{font:650 10px/1.45 system-ui;color:#abb5cf}.feature-side .huge{margin-top:15px}
.tactics-page,.echo-page,.arena-lab-page,.replay-page{display:grid;grid-template-columns:minmax(0,2fr) minmax(290px,.72fr);gap:16px}.tactic-board-wrap{border:1px solid #3c4c76;background:#080d1d;padding:12px}.board-top{display:flex;align-items:center;justify-content:space-between;padding:5px 4px 12px}.board-top>div{display:flex;align-items:center;gap:12px}.board-top small{font-size:7px;color:var(--cyan)}.board-top input{width:210px;padding:8px}.board-top>span{font-size:7px;color:var(--lime)}.tactic-board-wrap canvas{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 220px);background:#153f67;image-rendering:pixelated;cursor:crosshair}.tactic-tools{display:flex;gap:6px;margin-top:9px;overflow:auto}.tactic-tools button{flex:1;min-width:100px;padding:10px;border:1px solid #3b4972;background:#0d142a;font-size:7px}.tactic-tools button.active{border-color:var(--lime);color:var(--lime);background:#182516}.tactic-sidebar h3,.replay-sidebar h3{font-size:31px}.preset-list{display:grid;gap:7px;margin:17px 0}.preset-list button{display:flex;justify-content:space-between;padding:12px;border:1px solid #38476d;background:#0b1124;text-align:left;font-size:9px}.preset-list button span{color:var(--cyan);font-size:7px}.tactic-sidebar .secondary-btn,.tactic-sidebar .huge{width:100%;margin-top:9px}
.echo-visual{position:relative;min-height:560px;border:1px solid #3f4e7a;background:#070a18;overflow:hidden}.echo-visual canvas{position:absolute;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.echo-scan{position:absolute;inset:-20% 0;background:linear-gradient(0deg,transparent 40%,#43f4e526 49%,#fff3 50%,#43f4e526 51%,transparent 60%);animation:echoScan 4s linear infinite}@keyframes echoScan{to{transform:translateY(55%)}}.echo-copy{position:absolute;left:5%;bottom:7%;max-width:52%;padding:18px;background:#050713dc;border-left:3px solid #9e8cff}.echo-copy>span{font-size:7px;color:#9e8cff;letter-spacing:2px}.echo-copy h3{font-size:43px}.echo-console label{margin-top:0}.echo-intel{padding:15px;border:1px solid #43527e;background:#0b1227}.echo-intel small,.echo-intel b{display:block}.echo-intel small{font-size:7px;color:#9e8cff;letter-spacing:2px}.echo-intel b{font-size:13px;margin:7px 0}.echo-intel p{font:650 10px/1.45 system-ui;color:#aab4d0}.echo-record{display:grid;grid-template-columns:1fr 1fr;margin:13px 0;border:1px solid #354269}.echo-record div{padding:14px;text-align:center}.echo-record div+div{border-left:1px solid #354269}.echo-record small,.echo-record b{display:block}.echo-record small{font-size:6px;color:#8c98ba}.echo-record b{font-size:24px;margin-top:4px}.echo-console .secondary-btn,.echo-console .huge{width:100%}
.archetype-page{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,.7fr);gap:16px}.archetype-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;align-content:start}.archetype-card{position:relative;min-height:190px;padding:18px;border:1px solid #35436c;background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--arch) 20%,transparent),transparent 45%),linear-gradient(145deg,#121a35,#090e20);text-align:left;overflow:hidden}.archetype-card:before{content:"";position:absolute;right:-25px;bottom:-35px;width:130px;height:130px;border:22px solid color-mix(in srgb,var(--arch) 15%,transparent);border-radius:50%}.archetype-card>span{display:block;color:var(--arch);font-size:38px}.archetype-card small{display:block;margin:9px 0 4px;color:var(--arch);font-size:7px}.archetype-card b{font-size:22px}.archetype-card p{max-width:75%;font:650 10px/1.4 system-ui;color:#aab5d0}.archetype-card em{position:absolute;right:12px;top:12px;padding:5px 7px;background:#0a1020;color:#9ba7c5;font-size:7px;font-style:normal}.archetype-card.selected{border:2px solid var(--arch);box-shadow:0 0 30px color-mix(in srgb,var(--arch) 20%,transparent)}.archetype-card.selected em{background:var(--arch);color:#07100e}.archetype-detail{position:sticky;top:0;min-height:580px;padding:30px;border:1px solid #3c4b75;background:linear-gradient(155deg,#131b37,#080d1d)}.arch-symbol{display:grid;place-items:center;width:100px;height:100px;border:2px solid var(--arch);border-radius:50%;color:var(--arch);font-size:50px;box-shadow:0 0 50px color-mix(in srgb,var(--arch) 25%,transparent)}.archetype-detail>small{display:block;margin-top:25px;color:var(--arch,#43f4e8);font-size:7px;letter-spacing:2px}.archetype-detail h3{font-size:36px;margin:8px 0}.archetype-detail>p{font:650 13px/1.55 system-ui;color:#bbc4dc}.arch-bars{display:grid;gap:10px;margin-top:25px}.arch-bars label{display:grid;grid-template-columns:74px 1fr 28px;gap:9px;align-items:center}.arch-bars span,.arch-bars em{font-size:7px;font-style:normal}.arch-bars i{height:7px;background:#252f4e}.arch-bars i b{display:block;height:100%}.arch-boost{margin-top:25px;padding:15px;border:1px solid}.arch-boost b,.arch-boost span{display:block}.arch-boost b{font-size:7px;color:#9ca7c7}.arch-boost span{font:750 11px system-ui;margin-top:5px}
.arena-live,.replay-monitor{position:relative;border:1px solid #405078;background:#070b19;min-height:570px;overflow:hidden}.arena-live canvas,.replay-monitor canvas{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.arena-nameplate{position:absolute;left:20px;bottom:20px;padding:13px 17px;background:#050713dc;border-left:3px solid var(--lime)}.arena-nameplate small,.arena-nameplate b{display:block}.arena-nameplate small{font-size:7px;color:var(--cyan)}.arena-nameplate b{font-size:18px;margin-top:5px}.arena-controls .color-inputs{grid-template-columns:1fr 1fr}.arena-controls input[type=color]{height:55px;padding:4px}.replay-overlay{position:absolute;left:15px;right:15px;top:15px;display:flex;justify-content:space-between;color:#fff;font-size:8px;text-shadow:2px 2px #000}.replay-overlay span{color:var(--cyan)}.replay-controls{position:absolute;left:50%;bottom:17px;transform:translateX(-50%);width:min(620px,85%);display:grid;grid-template-columns:42px 52px 42px 1fr;gap:6px;padding:8px;background:#050713dc;backdrop-filter:blur(8px)}.replay-controls button{border:1px solid #52618b;background:#121a34}.replay-controls .replay-play{background:var(--lime);color:#07100d}.replay-controls input{accent-color:var(--cyan)}.replay-cameras{display:grid;gap:7px;margin:20px 0}.replay-cameras button{padding:12px;border:1px solid #3c4b72;background:#0b1125;text-align:left;font-size:8px}.replay-cameras button.active{border-color:var(--cyan);color:var(--cyan)}.replay-note{padding:13px;border-left:3px solid var(--lime);background:#0a1123;font:650 10px/1.45 system-ui;color:#aab5d0}

.match-intro{position:absolute;z-index:15;inset:0;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,#182b55e8,#04060df5 67%);opacity:0;pointer-events:none;transform:scale(1.05);transition:.25s}.match-intro.show{animation:matchIntro 2.2s ease both}.match-intro small{color:var(--cyan);font-size:9px;letter-spacing:4px}.intro-versus{display:flex;align-items:center;gap:28px;margin:18px 0}.intro-versus span{min-width:240px;font:italic 900 clamp(28px,5vw,60px)/1 "Arial Black"}.intro-versus b{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--orange);font-size:20px;box-shadow:0 0 35px #ff653477}.match-intro p{font:800 9px system-ui;color:#aab6d1;letter-spacing:2px}.intro-line{position:absolute;left:0;right:0;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--lime),transparent)}@keyframes matchIntro{0%{opacity:0;transform:scale(1.08)}12%,72%{opacity:1;transform:none}100%{opacity:0;transform:scale(.98)}}.play-call{position:absolute;z-index:6;left:50%;bottom:calc(73px + var(--safe-bottom));transform:translate(-50%,25px);display:flex;align-items:center;gap:10px;max-width:520px;padding:9px 13px;border:1px solid #3b496f;background:#060a18d9;opacity:0;transition:.25s;pointer-events:none}.play-call.show{opacity:1;transform:translate(-50%,0)}.play-call span{color:var(--orange);font-size:7px}.play-call p{margin:0;font:750 9px system-ui;color:#c4cce0}.match-report{display:grid;grid-template-columns:repeat(4,1fr);margin:13px 0;border:1px solid var(--edge)}.match-report span{text-align:center;padding:11px;font:700 7px system-ui;color:#8f9bbb;border-right:1px solid var(--edge)}.match-report span:last-child{border:0}.match-report b{display:block;color:#fff;font-size:18px;margin-bottom:3px}.result-kicker{text-align:center;color:var(--cyan);font-size:7px;letter-spacing:3px}.replay-result{display:block;width:100%;margin:10px 0}

@media(max-width:1080px){.home-stage{grid-template-columns:1fr}.season-dock{display:grid;grid-template-columns:1.4fr 1fr 1fr;min-height:0}.dock-head{display:none}.continue-card{border-right:1px solid #2a3558}.rival-intel{margin:8px}.dock-stats{display:none}.feature-page,.tactics-page,.echo-page,.arena-lab-page,.replay-page{grid-template-columns:1fr}.feature-hero,.echo-visual,.arena-live,.replay-monitor{min-height:470px}.archetype-page{grid-template-columns:1fr}.archetype-detail{position:relative;min-height:0}.home-bottom-grid{grid-template-columns:1.3fr 1fr 54px}.rank-panel{display:none}}
@media(max-width:720px){.home-v4{padding:10px}.hero-v4{height:360px;min-height:360px}.hero-v4 .hero-copy{max-width:73%}.hero-v4 .hero-copy h2{font-size:43px;letter-spacing:-2px}.hero-v4 .hero-copy p,.hero-status{display:none}.hero-actions{display:block}.hero-quick{margin-left:8px}.hero-v4 .hero-badge{width:66px;height:66px;padding:12px 4px}.season-dock{grid-template-columns:1fr}.dock-event,.rival-intel{display:none}.mode-rail .mode-card{flex-basis:205px}.home-bottom-grid{grid-template-columns:1fr 54px}.club-panel{display:none}.news-ticker{display:none}.feature-page,.tactics-page,.echo-page,.archetype-page,.arena-lab-page,.replay-page{height:calc(100% - 70px);padding:10px}.feature-hero,.echo-visual,.arena-live,.replay-monitor{min-height:380px}.feature-hero>div,.echo-copy{max-width:78%;left:4%}.feature-hero h3,.echo-copy h3{font-size:36px}.archetype-grid{grid-template-columns:1fr}.tactic-tools button{min-width:90px}.intro-versus{gap:8px}.intro-versus span{min-width:110px;font-size:23px}.play-call{bottom:150px;width:80%}}
@media(orientation:landscape) and (max-height:560px){.home-v4{padding-top:7px}.home-stage{grid-template-columns:2.25fr .75fr}.hero-v4{height:315px;min-height:315px}.hero-v4 .hero-copy h2{font-size:45px}.hero-v4 .hero-copy p{display:none}.season-dock{display:flex;min-height:315px}.dock-stats{display:grid}.rival-intel{display:block}.mode-heading{margin-top:12px}.mode-rail .mode-card{min-height:105px;flex-basis:205px;padding:11px}.mode-rail .mode-icon{font-size:24px;margin-bottom:3px}.home-bottom-grid,.news-ticker{display:none}.feature-page,.tactics-page,.echo-page,.arena-lab-page,.replay-page{height:calc(100% - 56px);grid-template-columns:2fr .8fr;padding:8px}.feature-hero,.echo-visual,.arena-live,.replay-monitor{min-height:calc(100vh - 72px)}.feature-side,.tactic-sidebar,.echo-console,.arena-controls,.replay-sidebar{padding:12px;overflow:auto}.personal-best{padding:10px}.personal-best b{font-size:31px}.feature-hero h3{font-size:38px}.archetype-page{height:calc(100% - 56px);grid-template-columns:1.5fr .8fr;padding:8px}.archetype-grid{grid-template-columns:repeat(2,1fr)}.archetype-card{min-height:145px}.archetype-detail{min-height:calc(100vh - 72px);padding:15px}.arch-symbol{width:65px;height:65px;font-size:32px}.archetype-detail h3{font-size:26px}.play-call{bottom:8px}}

/* Shared 4.0 finish */
.menu-screen{background:radial-gradient(circle at 85% 0,#1d285b99,transparent 35%),radial-gradient(circle at 0 100%,#10324066,transparent 30%),linear-gradient(145deg,#060816,#090e20)}.menu-screen:after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#43f4e504 50%,transparent 65%);background-size:200% 100%;animation:menuSheen 12s linear infinite}@keyframes menuSheen{to{background-position:-200% 0}}.menu-screen>*{position:relative;z-index:1}.section-header h2{font-size:27px;letter-spacing:-1.5px}.section-header .back-btn,.icon-btn,.pause-btn,.camera-btn,.fullscreen-btn{border-width:1px;background:linear-gradient(145deg,#141c36,#080d1c);box-shadow:0 7px 18px #0008;transition:.15s}.section-header .back-btn:hover,.icon-btn:hover{border-color:var(--cyan);transform:translateY(-2px)}.primary-btn{background:linear-gradient(135deg,#d9ff55,var(--lime));box-shadow:6px 6px 0 #557710,0 10px 25px #0007;letter-spacing:.7px}.secondary-btn{border-width:1px;background:linear-gradient(145deg,#102840,#0a1728);box-shadow:0 7px 18px #0006}.setup-content{max-width:1100px}.team-picker,.arena-select,.match-options label,.competition-switch{border-width:1px;background:linear-gradient(145deg,#151e3b,#090e20);box-shadow:0 10px 28px #0006}.team-picker{transition:.18s}.team-picker:hover{border-color:var(--cyan);transform:translateY(-3px)}.versus-copy strong{color:var(--lime);text-shadow:5px 5px 0 #3e570f}.campaign-map{background:radial-gradient(circle at 50% 30%,#1d2f5e99,transparent 45%),linear-gradient(#080d1ddd,#080d1ddd),repeating-linear-gradient(30deg,#26305e 0 1px,transparent 1px 42px)}.campaign-node{border-width:1px;box-shadow:0 12px 25px #0008}.campaign-node.current{border:2px solid var(--lime)}.coach-message,.challenge-card,.rule-book,.player-card,.achievements,.settings-page label,.rank-hero,.ranking-table,.leaders-row article,.world-intro,.character-card,.creator-controls,.club-form{border-width:1px;background-color:#0d1429;box-shadow:0 12px 28px #0005}.challenge-card,.character-card{transition:.18s}.challenge-card:hover,.character-card:hover{transform:translateY(-4px);border-color:var(--cyan)}.settings-page label{margin-bottom:7px;border-color:#2c395e;background:linear-gradient(90deg,#11182f,#0b1124)}.settings-page label:nth-child(even){background:linear-gradient(90deg,#131d39,#0b1124)}.settings-page select{border-width:1px}.ranking-table{overflow:hidden}.rank-row{border-color:#283555}.modal-card{border-width:1px;background:radial-gradient(circle at 100% 0,#27356888,transparent 40%),linear-gradient(145deg,#121a34,#080d1e);box-shadow:0 30px 80px #000d}.modal-card:before{content:"OTBALL // SYSTEM";display:block;margin-bottom:12px;color:var(--cyan);font-size:7px;letter-spacing:2px}.modal-actions button{border-width:1px}.toast{border-width:1px;border-radius:2px;box-shadow:0 12px 28px #0009}.game-screen{background:radial-gradient(circle at 50% 50%,#10183a,#02040b)}