:root{--bg:#080a10;--panel:#10141e;--panel2:#171d29;--line:#2a3342;--text:#f6f7fb;--muted:#a4adbd;--gold:#f5b82e;--red:#f04e45;--green:#54e0a2}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 80% 0%,#1c1b27 0%,var(--bg) 55%);color:var(--text);font-family:Inter,Arial,sans-serif;min-height:100vh}button,select{font:inherit}button{cursor:pointer;color:inherit}.app-shell{max-width:1440px;margin:auto;padding:0 28px}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff15}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-weight:800;letter-spacing:1.5px}.brand>span:last-child{font-size:15px}.brand b{color:var(--gold)}.brand small{display:block;color:#8c96a8;font-size:9px;letter-spacing:2.5px;margin-top:4px}.brand-mark{display:grid;place-items:center;width:46px;height:46px;background:var(--gold);color:#111;border-radius:12px;font-family:'Barlow Condensed';font-size:22px;font-weight:900;transform:skew(-5deg)}.top-meta{display:flex;gap:12px;align-items:center}.coin-pill,.icon-btn{border:1px solid var(--line);background:#111722;border-radius:30px;padding:10px 15px}.icon-btn{border-radius:50%;width:42px;height:42px}.screen{display:none;min-height:calc(100vh - 145px);padding:42px 0 58px}.screen.active{display:block}.hero-screen.active{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;min-height:calc(100vh - 145px)}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:800;color:var(--gold);margin:0 0 12px}.hero-copy h1,.section-head h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(48px,7vw,94px);line-height:.88;letter-spacing:1px;margin:0;font-weight:900}.hero-copy h1 span,.section-head h2 span{color:var(--gold)}.lead{max-width:520px;color:#aeb6c5;font-size:17px;line-height:1.7;margin:24px 0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{border:1px solid transparent;padding:14px 20px;font-size:12px;letter-spacing:1px;font-weight:800;border-radius:7px;transition:transform .15s,filter .15s}.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.btn.primary{background:var(--gold);color:#17130a}.btn.ghost{background:#141a25;border-color:#343d4c;color:#e5e9f1}.btn.small{padding:11px 14px}.feature-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px;color:#9da7b7;font-size:11px}.hero-art{height:min(570px,70vh);min-height:380px;position:relative;overflow:hidden;border:1px solid #ffffff1a;border-radius:18px;background:linear-gradient(145deg,#25202a,#111722 62%,#21140e)}.hero-art:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#07090e 0%,transparent 58%),repeating-linear-gradient(115deg,transparent 0 50px,#ffffff04 51px 52px)}.sunburst{position:absolute;width:360px;height:360px;right:10%;top:10%;border-radius:50%;background:radial-gradient(circle,#f5b82e 0%,#d94d32 30%,#802b37 56%,transparent 70%);filter:blur(1px);opacity:.8}.fighter-silhouette{position:absolute;left:50%;top:50%;transform:translate(-50%,-48%) rotate(-10deg);font-size:clamp(150px,25vw,330px);font-family:serif;color:#0a0b10;text-shadow:12px 12px 0 #f5b82e55,-6px -5px 0 #fff1;filter:drop-shadow(0 20px 15px #000);z-index:1}.hero-stamp{position:absolute;right:24px;top:25px;border:2px solid var(--gold);color:var(--gold);padding:9px 12px;font-family:'Barlow Condensed';font-weight:900;font-size:20px;line-height:.9;transform:rotate(7deg);z-index:2}.hero-bottom{position:absolute;bottom:20px;left:22px;right:22px;display:flex;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:2px;color:#d6d9df;z-index:2}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}.section-head h2{font-size:clamp(40px,5vw,64px)}.muted{color:var(--muted);font-size:13px}.fighter-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,.8fr);gap:22px}.fighter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-content:start}.fighter-card{background:linear-gradient(150deg,#171e2a,#0d1119);border:1px solid #293242;border-radius:9px;min-height:130px;padding:12px;text-align:left;position:relative;overflow:hidden}.fighter-card:after{content:'';position:absolute;width:90px;height:90px;border-radius:50%;background:var(--fighter-color,#f5b82e);opacity:.1;right:-30px;top:-30px}.fighter-card.selected{border-color:var(--gold);box-shadow:0 0 0 1px #f5b82e55 inset}.fighter-avatar{height:64px;width:64px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--fighter-color,#f5b82e),#141824);color:#fff;text-shadow:0 2px 8px #000;font-family:'Barlow Condensed';font-size:28px;font-weight:900;margin-bottom:10px}.fighter-card strong{display:block;font-size:12px}.fighter-card small{color:#8d98aa;font-size:10px}.fighter-details,.help-card{background:linear-gradient(145deg,#171e2a,#0e121a);border:1px solid var(--line);border-radius:12px;padding:24px}.detail-avatar{height:130px;display:grid;place-items:center;border-radius:10px;background:radial-gradient(circle at 50% 30%,var(--fighter-color),#111722 65%);font-family:'Barlow Condensed';font-size:74px;font-weight:900;margin-bottom:20px;text-shadow:0 5px 12px #000}.fighter-details h3,.help-card h3{font-family:'Barlow Condensed';font-size:30px;margin:0 0 4px}.fighter-details p{color:var(--muted);font-size:12px;line-height:1.7}.stat{margin:14px 0}.stat-head{display:flex;justify-content:space-between;font-size:10px;color:#c8cfda;margin-bottom:6px}.stat-bar,.progress-track{height:7px;background:#252c38;border-radius:10px;overflow:hidden}.stat-bar i,.progress-track i{display:block;height:100%;background:var(--gold);width:70%;border-radius:10px}.campaign-banner{padding:24px;border:1px solid #55421c;background:linear-gradient(110deg,#342714,#151721 70%);border-radius:12px;margin-bottom:18px;display:grid;grid-template-columns:1fr minmax(130px,250px);gap:20px;align-items:center}.campaign-banner h3{font-family:'Barlow Condensed';font-size:28px;margin:0}.campaign-banner p{font-size:12px;color:#c2b7a3;margin:6px 0 0}.stage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stage-card{padding:20px;border:1px solid var(--line);border-radius:10px;background:var(--panel);min-height:150px;text-align:left}.stage-card.current{border-color:var(--gold);background:linear-gradient(140deg,#342a17,#131721)}.stage-card.locked{opacity:.45;cursor:not-allowed}.stage-card .stage-num{font-family:'Barlow Condensed';font-size:30px;color:var(--gold)}.stage-card h3{font-size:13px;margin:6px 0}.stage-card p{font-size:10px;color:#9aa4b4;margin:0}.center-actions{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px;flex-wrap:wrap}.setting-label{font-size:11px;color:#9ea8b8;font-weight:800;letter-spacing:1px;display:flex;align-items:center;gap:10px}.setting-label select{background:#171d29;color:white;border:1px solid var(--line);padding:12px;border-radius:7px}.arena-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.arena-card{border:1px solid var(--line);background:#121722;border-radius:10px;overflow:hidden;text-align:left}.arena-card.selected{border-color:var(--gold);box-shadow:0 0 0 1px #f5b82e55}.arena-card img{width:100%;aspect-ratio:16/8;object-fit:cover;display:block;background:#202531}.arena-card strong{display:block;padding:13px;font-size:12px}.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.help-card p{font-size:12px;color:#b5becc;line-height:1.8}.help-card kbd{display:inline-block;min-width:25px;text-align:center;background:#252c38;border:1px solid #3a4557;padding:4px 6px;border-radius:4px;color:white}.match-screen{padding-top:16px;position:relative}.match-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.match-title{text-align:center;font-size:10px;letter-spacing:2px;color:#b5bdca}.match-title b{display:block;font-size:14px;color:var(--gold);margin-top:4px}.match-timer{font-size:11px;color:var(--green);font-weight:800}.health-row{display:grid;grid-template-columns:1fr 50px 1fr;align-items:center;gap:10px;margin-bottom:12px}.health-name{display:flex;justify-content:space-between;font-size:11px;font-weight:800;margin-bottom:6px}.health-name b{color:var(--gold)}.health-bar{height:13px;background:#33313a;border:1px solid #4a4650;transform:skew(-10deg);overflow:hidden}.health-bar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#35d58c,#c8e96a);transition:width .15s}.health-bar.enemy i{background:linear-gradient(90deg,#f4b82f,#f04e45)}.vs{text-align:center;font-family:'Barlow Condensed';font-size:25px;color:var(--gold);font-weight:900}.arena{width:100%;height:min(56vw,450px);min-height:280px;max-height:450px;background:#121722;border:1px solid #303747;border-radius:8px;overflow:hidden;position:relative}.arena canvas{display:block;max-width:100%;height:auto!important;margin:0 auto}.touch-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 4px}.dpad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,42px);gap:5px}.dpad button,.action-pad button{border:1px solid #4b5669;background:#1b2330;border-radius:8px;font-weight:800;touch-action:none;user-select:none}.dpad button[data-key="37"]{grid-column:1;grid-row:2}.dpad button[data-key="38"]{grid-column:2;grid-row:1}.dpad button[data-key="40"]{grid-column:2;grid-row:2}.dpad button[data-key="39"]{grid-column:3;grid-row:2}.action-pad{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.action-pad button{padding:13px 12px;font-size:10px}.action-pad .block-key{border-color:#498f7b;color:#7cf0c1}.match-overlay{position:absolute;z-index:8;inset:65px 0 0;display:grid;place-items:center;background:#05070cbb;backdrop-filter:blur(5px);border-radius:10px}.match-overlay.hidden{display:none}.result-panel{text-align:center;padding:34px 24px;border:1px solid #55421c;border-radius:14px;background:#111620;max-width:460px;width:92%;box-shadow:0 20px 80px #0009}.result-panel h2{font-family:'Barlow Condensed';font-size:60px;color:var(--gold);margin:0}.result-panel p:not(.eyebrow){color:#aeb7c5;font-size:13px}.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);background:#1b2631;border:1px solid #42566b;padding:12px 18px;border-radius:8px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:99}.toast.show{opacity:1;transform:translate(-50%,0)}footer{height:60px;border-top:1px solid #ffffff14;display:flex;justify-content:space-between;align-items:center;color:#6e7889;font-size:9px;letter-spacing:2px}.hidden{display:none!important}@media(max-width:900px){.app-shell{padding:0 16px}.hero-screen.active{grid-template-columns:1fr;gap:24px;padding-top:35px}.hero-art{height:380px;min-height:320px}.fighter-layout{grid-template-columns:1fr}.fighter-details{order:-1}.fighter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.help-grid{grid-template-columns:1fr}.section-head{align-items:flex-start}.stage-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:540px){.topbar{height:68px}.brand-mark{width:38px;height:38px}.brand>span:last-child{font-size:12px}.brand small{font-size:7px}.screen{padding-top:28px}.hero-copy h1{font-size:60px}.lead{font-size:14px}.feature-row{gap:10px;font-size:9px}.hero-art{min-height:290px;height:300px}.fighter-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.fighter-card{padding:8px;min-height:118px}.fighter-avatar{width:48px;height:48px;font-size:22px}.fighter-card strong{font-size:10px}.fighter-card small{font-size:9px}.section-head h2{font-size:42px}.section-head{gap:10px}.campaign-banner{grid-template-columns:1fr}.stage-grid{gap:8px}.stage-card{padding:13px;min-height:130px}.arena-grid{grid-template-columns:repeat(2,1fr);gap:9px}.arena-card strong{padding:10px;font-size:10px}.match-head .btn{padding:9px;font-size:9px}.match-title{font-size:8px}.health-row{grid-template-columns:1fr 28px 1fr;gap:5px}.health-name{font-size:9px}.health-bar{height:10px}.arena{height:52vh;min-height:230px}.touch-controls{padding:12px 0;gap:8px}.dpad{grid-template-columns:repeat(3,36px);grid-template-rows:repeat(2,34px);gap:4px}.action-pad{max-width:58%;gap:5px}.action-pad button{padding:10px 7px;font-size:8px}.touch-controls button{min-height:34px}.match-overlay{inset:48px 0 0}.result-panel h2{font-size:48px}footer{font-size:7px;letter-spacing:1px}} /* Roster search and tier filters */ .roster-tools{display:flex;align-items:end;gap:14px;flex-wrap:wrap;margin:0 0 18px;padding:16px;background:#10141e;border:1px solid var(--line);border-radius:10px}.roster-search,.roster-filter{display:flex;flex-direction:column;gap:7px}.roster-search{flex:1;min-width:220px}.roster-filter{min-width:190px}.roster-tools label{font-size:9px;font-weight:900;letter-spacing:1.6px;color:#9ea8b8}.roster-tools input,.roster-tools select{height:42px;padding:0 12px;background:#171d29;border:1px solid #343d4c;border-radius:7px;color:#f6f7fb;min-width:0}.roster-tools input{width:100%}.roster-count{font-size:11px;color:var(--gold);font-weight:800;padding:12px 2px;white-space:nowrap}.tier-chip{display:inline-block;position:relative;z-index:1;margin-top:7px;padding:4px 6px;border-radius:4px;background:#ffffff0b;border:1px solid #ffffff16;color:#c7cfdd;font-size:8px;font-weight:800;letter-spacing:.5px}.tier-starter{color:#8ce6b8}.tier-silver{color:#cbd5e1}.tier-gold{color:#f5c94f}.tier-platinum{color:#8ed7ff}.tier-boss{color:#ff9c83}.tier-faction{color:#c9a4ff}.roster-empty{grid-column:1/-1;padding:30px;border:1px dashed #394355;border-radius:10px;color:var(--muted);text-align:center;font-size:13px} @media(max-width:540px){.roster-tools{gap:10px;padding:12px}.roster-search,.roster-filter{width:100%;min-width:0}.roster-count{padding:2px 0}} /* Version 4: dedicated roster portrait artwork */ .fighter-avatar{overflow:hidden;padding:0;border:1px solid color-mix(in srgb,var(--fighter-color,#f5b82e) 65%,transparent);background:#111722} .fighter-avatar img{display:block;width:100%;height:100%;object-fit:cover} .detail-avatar{overflow:hidden;padding:0;min-height:130px;background:#111722} .detail-avatar img{display:block;width:100%;height:100%;max-height:250px;object-fit:contain;object-position:center bottom} /* Version 6: signature-move control and impact feedback */ .special-key{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;background:linear-gradient(100deg,#f7b928,#ff6b35);color:#141820;font-weight:900;border:1px solid rgba(255,255,255,.3);border-radius:9px;box-shadow:0 5px 18px rgba(247,185,40,.18)} .special-key small{font-size:9px;letter-spacing:.08em;opacity:.8} .special-key:disabled{opacity:.6;filter:saturate(.55);cursor:not-allowed} .special-key.cooldown{background:linear-gradient(100deg,#454b58,#272d38);color:#d8dde6;box-shadow:none} .arena.special-flash{animation:nac-special-flash .62s ease-out} @keyframes nac-special-flash{0%{filter:brightness(1) saturate(1)}18%{filter:brightness(1.7) saturate(1.8) drop-shadow(0 0 12px #ffc83d)}45%{filter:brightness(1.3) saturate(1.5)}100%{filter:brightness(1) saturate(1)}} .special-meter{margin:0 0 12px;padding:10px 13px;border:1px solid #3b3340;border-radius:8px;background:linear-gradient(100deg,#171b27,#201a25)}.special-meter-head{display:flex;justify-content:space-between;gap:12px;font-size:10px;font-weight:900;letter-spacing:1px}.special-meter-head span{color:#f5b82e}.special-meter-head b{color:#f6f7fb;font-variant-numeric:tabular-nums}.special-meter-track{height:8px;background:#30313b;border-radius:20px;overflow:hidden;margin:8px 0 5px}.special-meter-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#f5b82e,#ff643c);border-radius:20px;transition:width .2s}.special-meter.ready .special-meter-track i{box-shadow:0 0 14px #ffb52e}.special-meter small{font-size:10px;color:#9ca6b6} /* v8: signature-move archetype feedback */ .arena.special-flash-power{animation:nac-power-burst .72s ease-out} .arena.special-flash-speed{animation:nac-speed-burst .72s ease-out} .arena.special-flash-guard{animation:nac-guard-burst .72s ease-out} .arena.special-flash-balanced{animation:nac-balanced-burst .72s ease-out} @keyframes nac-power-burst{0%{filter:none}25%{filter:brightness(1.8) saturate(1.6) drop-shadow(0 0 15px #ff5733)}100%{filter:none}} @keyframes nac-speed-burst{0%{filter:none}18%{filter:brightness(1.7) hue-rotate(35deg) drop-shadow(0 0 13px #5ce7ff)}38%{filter:brightness(1.25) hue-rotate(-25deg)}100%{filter:none}} @keyframes nac-guard-burst{0%{filter:none}30%{filter:brightness(1.7) saturate(.7) drop-shadow(0 0 15px #9eaaff)}100%{filter:none}} @keyframes nac-balanced-burst{0%{filter:none}20%{filter:brightness(1.8) saturate(1.5) drop-shadow(0 0 15px #ffd84d)}55%{filter:brightness(1.25)}100%{filter:none}} /* v9: arena tiers and online lobby */ .arena-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:-8px 0 18px}.arena-filters{display:flex;gap:8px;flex-wrap:wrap}.arena-filter{border:1px solid var(--line);background:#141a25;color:#cbd3df;border-radius:999px;padding:9px 13px;font-size:10px;font-weight:800;letter-spacing:.5px}.arena-filter.active{background:#352a16;color:var(--gold);border-color:var(--gold)}.arena-card{position:relative}.arena-tier{position:absolute;top:8px;left:8px;z-index:2;padding:5px 7px;border-radius:5px;background:#080a10d9;color:#f5b82e;font-size:9px;font-weight:900;letter-spacing:1px}.arena-card.secret .arena-tier{color:#d6a6ff}.arena-card img{background:radial-gradient(circle at 50% 25%,#7b4a2c,#1a2331 58%,#090c13)}.arena-card .arena-subtitle{display:block;padding:0 13px 12px;color:#8f9aab;font-size:10px}.online-connect-panel,.online-players-panel,.online-challenge-panel{border:1px solid var(--line);background:linear-gradient(145deg,#171e2a,#0e121a);border-radius:12px;padding:20px}.online-connect-panel{margin-bottom:18px}.online-status-row{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:1px;margin-bottom:18px}.status-dot{width:9px;height:9px;border-radius:50%;background:#657080;box-shadow:0 0 0 4px #65708022}.status-dot.online{background:#42d89b;box-shadow:0 0 0 4px #42d89b22}.online-count{margin-left:auto;color:var(--gold)}.online-form-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}.online-form-grid label,.online-match-settings label{display:flex;flex-direction:column;gap:7px;color:#9ea8b8;font-size:10px;font-weight:800;letter-spacing:1px}.online-form-grid input,.online-player-head input,.online-panel-head input,.online-match-settings select{width:100%;min-width:0;background:#0d1119;border:1px solid #30394a;border-radius:7px;color:#f3f5f8;padding:12px;font:inherit;letter-spacing:0}.online-connect-actions{display:flex;gap:8px;margin-top:14px}.online-note{font-size:10px;line-height:1.6;color:#8f9aab;margin:12px 0 0}.online-lobby-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.online-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.online-panel-head h3,.online-challenge-panel h3{font-family:'Barlow Condensed';font-size:26px;margin:0}.online-panel-head .eyebrow{margin-bottom:4px}.online-panel-head input{max-width:210px}.online-player-list,.online-challenge-list{display:grid;gap:8px}.online-player-row,.online-challenge-row{display:flex;align-items:center;gap:10px;border:1px solid #293242;background:#101620;border-radius:8px;padding:11px}.online-player-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:#322817;color:var(--gold);font-weight:900}.online-player-meta{min-width:0;flex:1}.online-player-meta strong{display:block;font-size:12px;overflow-wrap:anywhere}.online-player-meta small{color:#8f9aab;font-size:10px}.online-player-row .btn,.online-challenge-row .btn{padding:9px 10px;font-size:9px;white-space:nowrap}.online-empty{color:#8f9aab;font-size:11px;line-height:1.6;padding:12px 4px}.online-match-settings{display:grid;gap:12px;margin-top:18px}.online-challenge-panel>.eyebrow{margin-bottom:4px}.online-challenge-row{align-items:flex-start;flex-wrap:wrap}.online-challenge-row .challenge-copy{flex:1;min-width:130px;font-size:11px;line-height:1.6}.online-challenge-row .challenge-actions{width:100%;display:flex;gap:7px}.online-challenge-row .challenge-actions button{flex:1}.arena-card .arena-tier.tier-a{color:#83d8ff}.arena-card .arena-tier.tier-b{color:#9be6b0} @media(max-width:760px){.online-lobby-layout,.online-form-grid{grid-template-columns:1fr}.online-panel-head{align-items:flex-start;flex-direction:column}.online-panel-head input{max-width:none}.online-connect-panel,.online-players-panel,.online-challenge-panel{padding:15px}.arena-toolbar{align-items:flex-start}} /* v10: player fighter creator, richer arena presentation, and sponsor billboards */ .creator-panel,.ad-manager{position:relative;margin:18px 0 24px;padding:22px;border:1px solid #353e50;border-radius:16px;background:radial-gradient(circle at 90% 0%,#33291b 0,transparent 36%),linear-gradient(145deg,#171e2a,#0c1018);overflow:hidden} .creator-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.creator-heading h3,.ad-manager h3{font-family:'Barlow Condensed';font-size:32px;line-height:1;margin:0 0 10px}.creator-heading h3 span,.ad-manager h3 span{color:var(--gold)}.creator-heading .muted,.ad-manager .muted{max-width:680px;font-size:12px;line-height:1.65}.creator-preview{width:100px;height:100px;flex:none;display:grid;place-items:center;border-radius:24px;border:2px solid var(--creator-color,#f5b82e);color:#fff;font-size:46px;background:radial-gradient(circle at 35% 20%,var(--creator-color,#f5b82e),#101520 72%);box-shadow:0 0 34px color-mix(in srgb,var(--creator-color,#f5b82e) 25%,transparent);transition:.2s}.creator-preview[data-style="royal"]{border-radius:50% 50% 18px 18px}.creator-preview[data-style="tech"]{border-radius:8px;transform:skew(-3deg)}.creator-preview[data-style="festival"]{border-radius:50%;box-shadow:0 0 0 7px #ffffff0a,0 0 34px var(--creator-color)}.creator-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.creator-form>label,.ad-manager-form>label{display:flex;flex-direction:column;gap:7px;color:#aeb8c8;font-size:10px;font-weight:800;letter-spacing:.8px}.creator-form input:not([type=range]):not([type=color]),.creator-form select,.ad-manager-form input{min-width:0;width:100%;box-sizing:border-box;background:#0b1018;border:1px solid #354054;color:#f4f6fb;border-radius:8px;padding:12px;font:inherit;letter-spacing:0}.creator-form input[type=color]{width:100%;height:42px;border:1px solid #354054;border-radius:8px;background:#0b1018;padding:4px}.creator-stat{padding:11px;border:1px solid #2e3748;background:#0c111a;border-radius:8px}.creator-stat label{display:flex;justify-content:space-between;gap:8px;color:#adb7c7;font-size:10px;font-weight:800}.creator-stat label b{color:var(--gold)}.creator-stat input{width:100%;accent-color:var(--gold);margin-top:12px}.creator-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}.creator-note{grid-column:1/-1;margin:0;color:#9eabbc;font-size:11px}.ad-manager{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:start}.ad-manager-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ad-manager-form>label:nth-child(3){grid-column:1/-1}.ad-manager-form label small{font-size:9px;font-weight:400;letter-spacing:0;color:#7f8b9d}.ad-preview{grid-column:1/-1;min-height:82px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:14px;border:2px dashed #a57c2c;border-radius:9px;text-align:center;background:repeating-linear-gradient(135deg,#201b12,#201b12 12px,#292116 12px,#292116 24px)}.ad-preview span,.arena-billboard span{font-size:8px;font-weight:900;letter-spacing:2px;color:#f5c95c}.ad-preview strong{font-family:'Barlow Condensed';font-size:26px;line-height:1;color:#fff;text-transform:uppercase}.ad-preview small{color:#d4c5a2;font-size:10px}.arena{isolation:isolate}.arena-billboard{position:absolute;z-index:4;top:10px;width:clamp(105px,20%,170px);min-height:53px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:8px 10px;border:1px solid #f5c95caa;border-radius:6px;background:linear-gradient(135deg,#111722ee,#292116eF);box-shadow:0 4px 18px #0008;color:white;text-decoration:none;overflow:hidden;pointer-events:auto}.billboard-left{left:10px}.billboard-right{right:10px}.arena-billboard strong{font-family:'Barlow Condensed';font-size:clamp(10px,1.5vw,15px);line-height:1.1;letter-spacing:.5px;text-transform:uppercase;overflow-wrap:anywhere}.arena-billboard small{font-size:9px;line-height:1.25;color:#d7dce5;overflow-wrap:anywhere}.arena-billboard[href]:hover{border-color:#fff;transform:translateY(-1px)}.fighter-card .tier-custom{color:#ffe7a0;background:#4b3517;border:1px solid #a57c2c} @media(max-width:760px){.creator-form{grid-template-columns:repeat(2,minmax(0,1fr))}.ad-manager{grid-template-columns:1fr}.ad-manager-form{grid-template-columns:1fr}.ad-manager-form>label:nth-child(3){grid-column:auto}.creator-preview{width:76px;height:76px;font-size:34px}.creator-heading h3,.ad-manager h3{font-size:27px}.arena-billboard{top:6px;width:clamp(94px,28%,135px);padding:6px}.billboard-left{left:6px}.billboard-right{right:6px}.arena-billboard small{font-size:8px}} @media(max-width:420px){.creator-panel,.ad-manager{padding:14px}.creator-form{gap:9px}.creator-actions .btn{flex:1}.arena-billboard{width:34%;min-height:45px}.arena-billboard span{font-size:6px;letter-spacing:1px}} /* v12: fighter unlocks, costume palettes, fight music, and campaign reset feedback */ .fighter-locked{opacity:.88;filter:saturate(.68)} .fighter-locked .fighter-avatar{position:relative} .fighter-lock{position:absolute;left:4px;right:4px;bottom:4px;padding:5px 3px;border:1px solid #f5b82e99;border-radius:5px;background:#080b12eF;color:#ffd978;text-align:center;font-size:8px;font-weight:900;letter-spacing:.4px} .fighter-unlock-copy{padding:10px;border:1px solid #8b692d;background:#2a2114;border-radius:8px;color:#f6d78a;font-size:12px;line-height:1.55} .fighter-card .fighter-avatar img,.detail-avatar img{object-fit:cover} #soundToggle{min-width:95px;font-size:10px;letter-spacing:.4px;color:var(--gold)} .arena-billboard{border-width:2px;background:linear-gradient(125deg,#101722f5,#3c2a10f5 52%,#101722f5);box-shadow:0 0 0 2px #0008,0 5px 22px #000b,0 0 16px #f5b82e30} .arena-billboard:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 15%,#ffffff0c 40%,transparent 65%)} .arena-billboard strong{position:relative;text-shadow:0 2px 3px #000} @media(max-width:420px){#soundToggle{min-width:78px;font-size:9px}} /* Version 13: strike shop, gender-aware fighter portrait treatment, hit audio feedback and campaign defeat screen */ .strike-shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0}.shop-item{border:1px solid #30394b;border-radius:12px;padding:16px;background:linear-gradient(160deg,#171e2a,#0b1018);display:flex;flex-direction:column;gap:10px;min-width:0}.shop-item.equipped{border-color:#e8bb4b;box-shadow:0 0 0 1px #e8bb4b22,0 10px 30px #0005}.shop-item-art{height:104px;display:grid;place-items:center;border-radius:8px;font-size:44px;color:#fff;background:radial-gradient(circle,#6e501b,#121722 68%);border:1px solid #d9ae4b55}.shop-item-art.speed{background:radial-gradient(circle,#225a73,#121722 68%)}.shop-item-art.guard{background:radial-gradient(circle,#4b3273,#121722 68%)}.shop-item-art.balanced{background:radial-gradient(circle,#703333,#121722 68%)}.shop-item .eyebrow{font-size:8px;margin:0;color:#e8bd5b}.shop-item h3{font-family:'Barlow Condensed';font-size:25px;margin:0}.shop-item p:not(.eyebrow){font-size:11px;color:#aab5c5;line-height:1.5;margin:0;flex:1}.shop-item-meta{display:flex;flex-direction:column;gap:4px;color:#cbd2dd;font-size:10px}.shop-item-meta b{font-size:14px;color:#f5c95c}.shop-item .btn{width:100%;font-size:10px}.equipped-summary{color:#f5c95c;font-size:12px}.arena.weapon-shock:after,.arena.weapon-dragon:after,.arena.weapon-baton:after,.arena.weapon-phoenix:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;animation:weaponImpact .48s ease-out both}.arena.weapon-shock:after{background:radial-gradient(ellipse at 50% 55%,#7af9ff55,transparent 52%)}.arena.weapon-dragon:after{background:linear-gradient(115deg,transparent 28%,#42c9ff88 48%,transparent 62%)}.arena.weapon-baton:after{background:radial-gradient(ellipse at 50% 60%,#d9b5ff66,transparent 45%)}.arena.weapon-phoenix:after{background:radial-gradient(ellipse at 50% 50%,#ff7b3c77,transparent 58%)}@keyframes weaponImpact{0%{opacity:0;transform:scale(.94)}25%{opacity:1}100%{opacity:0;transform:scale(1.04)}}.match-overlay.campaign-failed{background:radial-gradient(ellipse at center,#641f27dd,#05070cf5 72%)}.campaign-failed .result-panel{border-color:#d44d58;background:linear-gradient(160deg,#24121a,#111620 70%);box-shadow:0 0 0 1px #d44d5833,0 25px 90px #000c}.campaign-failed .result-panel:before{content:'✕';display:grid;place-items:center;margin:0 auto 12px;width:54px;height:54px;border-radius:50%;border:2px solid #df5965;color:#ff737d;font-size:29px;font-weight:900;box-shadow:0 0 28px #f33a4b35}.campaign-failed .result-panel h2{font-size:clamp(42px,7vw,66px);letter-spacing:2px;color:#ff727c!important}.campaign-failed #resultPrimary{background:#a82f3b;border-color:#e45c68}.campaign-failed #resultCopy{font-size:14px;line-height:1.7}.arena-billboard{font-family:Arial,sans-serif} @media(max-width:900px){.strike-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.strike-shop-grid{grid-template-columns:1fr}.shop-item-art{height:78px}} /* v14: pause and compact adaptive fight controls */ .match-left-actions{display:flex;gap:6px;align-items:center} .pause-overlay{position:absolute;z-index:12;inset:58px 0 0;display:grid;place-items:center;background:#05070ce8;backdrop-filter:blur(8px);border-radius:10px} .pause-overlay.hidden{display:none} .pause-panel{text-align:center;padding:28px 22px;border:1px solid #55421c;border-radius:14px;background:#111620;max-width:420px;width:92%;box-shadow:0 20px 80px #0009} .pause-panel h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(42px,7vw,60px);color:var(--gold);margin:0} .pause-panel p:not(.eyebrow){color:#aeb7c5;font-size:13px} #pauseMatch[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)} .touch-controls{gap:clamp(5px,1vw,12px);padding:clamp(5px,1vw,10px) 0;touch-action:manipulation} .dpad{position:relative;display:block;width:clamp(112px,17vw,150px);height:clamp(112px,17vw,150px);flex:0 0 auto;border:2px solid #39485f;border-radius:50%;background:radial-gradient(circle at 50% 42%,#202c40 0,#111925 68%,#080d16 100%);box-shadow:inset 0 0 0 5px #0a101b,inset 0 0 18px #0008,0 5px 14px #0006;touch-action:none} .dpad button{position:absolute;display:flex;align-items:center;justify-content:center;width:34%;height:34%;min-width:0;min-height:0;padding:0;border:1px solid #566780;border-radius:50%;background:linear-gradient(145deg,#35465f,#172235);color:#f7f9ff;font-size:clamp(17px,2.5vw,24px);font-weight:900;box-shadow:0 3px 0 #080d15, inset 0 1px 0 #ffffff20;touch-action:none;user-select:none;-webkit-user-select:none} .dpad button[data-key="38"]{top:4%;left:33%} .dpad button[data-key="40"]{bottom:4%;left:33%} .dpad button[data-key="37"]{left:4%;top:33%} .dpad button[data-key="39"]{right:4%;top:33%} .dpad button:active{transform:scale(.94);background:linear-gradient(145deg,#d8a82f,#805b12);color:#10141e} .dpad:after{content:"";position:absolute;pointer-events:none;left:42%;top:42%;width:16%;height:16%;border-radius:50%;background:#080e18;border:1px solid #52617a;box-shadow:inset 0 1px 5px #0009} .dpad button,.action-pad button{min-width:0;min-height:clamp(30px,5vw,40px);padding:clamp(5px,1vw,10px);touch-action:none} .action-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;flex:1;min-width:0} .action-pad button{width:100%;font-size:clamp(8px,1.5vw,10px);padding:clamp(5px,1vw,9px) 3px;white-space:nowrap} .action-pad .special-key{grid-column:span 3;display:flex;align-items:center;justify-content:center;gap:8px} .arena{height:clamp(180px,48vh,450px);min-height:180px} .arena canvas{width:100%!important;height:100%!important;object-fit:contain} @media(max-width:700px){ .match-screen{padding-top:6px;padding-bottom:8px;min-height:0} .match-head{margin-bottom:6px} .match-left-actions{gap:4px} .match-head .btn{padding:7px 8px;font-size:9px} .health-row{margin-bottom:6px} .special-meter{margin-bottom:6px} .arena{height:clamp(170px,38svh,340px);min-height:170px;border-radius:6px} .touch-controls{position:relative;margin-top:4px;padding:5px 0;align-items:center;gap:6px} .dpad{width:clamp(104px,29vw,132px);height:clamp(104px,29vw,132px)} .action-pad{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px} .action-pad button{min-height:34px;font-size:clamp(7px,2vw,9px);padding:4px 1px;border-radius:6px} .action-pad .special-key{min-height:30px} .pause-overlay,.match-overlay{inset:42px 0 0} } @media(max-height:650px) and (max-width:900px){ .topbar{height:48px} .match-screen{padding-top:3px} .match-head{margin-bottom:3px} .health-row{margin-bottom:4px} .special-meter{margin-bottom:3px} .arena{height:32svh;min-height:130px} .touch-controls{padding:2px 0;margin-top:1px} .dpad{width:96px;height:96px}.dpad button{font-size:16px} .action-pad button{min-height:28px;padding:3px 1px} .screen.match-screen{min-height:0} } /* v16: cleaner creator form and collapsed locked roster */ .creator-form-v16{display:flex;flex-direction:column;gap:12px} .creator-fields-primary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .creator-fields-primary label,.creator-fields-secondary label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:11px;letter-spacing:.06em;color:var(--muted,#aeb7c5)} .creator-fields-primary input,.creator-fields-secondary input,.creator-fields-secondary select{width:100%;min-width:0;box-sizing:border-box} .creator-more{border:1px solid #303746;border-radius:10px;background:#0d111a;overflow:hidden} .creator-more summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:800;color:#f5b82e;display:flex;justify-content:space-between;gap:10px;align-items:center} .creator-more summary::-webkit-details-marker{display:none} .creator-more summary span{font-size:10px;color:#aeb7c5;font-weight:500} .creator-fields-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 14px 14px} .creator-fields-secondary .creator-stat{min-width:0} .creator-fields-secondary input[type=range]{width:100%;min-width:0} .creator-fields-secondary input[type=color]{min-height:36px;padding:3px} .creator-form-v16 .creator-actions{display:flex;gap:8px;flex-wrap:wrap} .roster-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0} .roster-toolbar p{margin:0;font-size:12px} #fighterGrid .fighter-locked{opacity:.95} @media(max-width:560px){ .creator-fields-primary,.creator-fields-secondary{grid-template-columns:minmax(0,1fr)} .creator-fields-primary{gap:8px} .creator-heading{gap:10px} .creator-preview{flex:0 0 64px;width:64px;height:64px} .roster-toolbar{align-items:stretch;flex-direction:column} .roster-toolbar .btn{width:100%} .creator-fields-secondary{gap:10px} } /* v17: fighter identities, arena real-world notes and ad-ready billboards */ .fighter-quality{display:block;margin-top:4px;font-size:10px;letter-spacing:.04em;color:var(--gold,#f5b82e);line-height:1.35} .arena-feature{display:block;padding:7px 9px;margin-top:5px;border-top:1px solid #343b49;color:#aeb9c9;font-size:10px;line-height:1.4;text-align:left} .arena-card{height:100%;min-width:0} .arena-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover} .arena-billboard{border:2px dashed #f5b82e;background:linear-gradient(135deg,#111827,#24202a);color:#fff;min-width:120px;max-width:24%;padding:7px 10px;text-align:center;box-shadow:0 4px 20px #0009} .arena-billboard span{display:block;font-size:8px;letter-spacing:.12em;color:#f5b82e} .arena-billboard strong{display:block;font-size:clamp(10px,1.5vw,16px);line-height:1.1;text-transform:uppercase} .arena-billboard small{display:block;font-size:9px;color:#d1d5db;margin-top:4px} .arena-billboard:not(a){cursor:default} @media(max-width:560px){.arena-feature{font-size:9px;padding:6px}.arena-billboard{min-width:88px;padding:5px 6px;max-width:29%}.arena-billboard small{font-size:7px}} /* v18: lightweight animated arena atmosphere, selected by arena identity */ #arena{position:relative;isolation:isolate;overflow:hidden} #arena .arena-environment{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen} #arena .arena-environment~canvas{position:relative;z-index:2} #arena .arena-billboard{z-index:4} .env-caption{position:absolute;left:10px;top:8px;max-width:44%;padding:4px 7px;border-left:2px solid var(--gold,#f5b82e);background:#05070ab8;color:#fff;font-size:clamp(7px,1vw,10px);letter-spacing:.12em;font-weight:800;text-shadow:0 2px 6px #000} .env-light{position:absolute;display:block;width:22%;height:180%;top:-40%;background:linear-gradient(90deg,transparent,#fff3,transparent);transform:rotate(24deg);opacity:.16;animation:env-sweep 8s ease-in-out infinite} .env-light-two{left:72%;animation-delay:-4s} .env-particle{position:absolute;display:block;width:4px;height:4px;border-radius:50%;background:#fff9;box-shadow:0 0 10px #fff8;animation:env-float 5s ease-in-out infinite} .env-particle-one{left:18%;top:28%}.env-particle-two{left:76%;top:58%;animation-delay:-2s}.env-particle-three{left:48%;top:72%;animation-delay:-3.5s} .env-traffic .env-light{width:8%;background:linear-gradient(90deg,transparent,#ffdf9b99,transparent);opacity:.3;transform:rotate(68deg)} .env-traffic .env-particle{width:7px;height:3px;border-radius:2px;background:#ffcc77;box-shadow:0 0 12px #ffb64a} .env-market .env-particle{width:3px;height:12px;border-radius:0;background:#f5b82e;box-shadow:0 0 7px #f5b82e} .env-stadium .env-light{opacity:.34;background:linear-gradient(90deg,transparent,#fff8,transparent)} .env-water{background:linear-gradient(0deg,#2aa5d322,transparent 40%);opacity:.7} .env-water .env-particle{width:22%;height:2px;border-radius:0;background:#73e5ff;box-shadow:0 0 12px #73e5ff;animation:env-ripple 4s ease-in-out infinite} .env-festival .env-particle{width:5px;height:5px;background:#ff5ac8;box-shadow:0 0 12px #ff5ac8} .env-festival .env-particle-two{background:#5df5ff;box-shadow:0 0 12px #5df5ff} .env-industrial .env-light{opacity:.24;background:linear-gradient(90deg,transparent,#ff9d4a,transparent)} .env-terrain .env-particle{background:#f0d8a1;box-shadow:0 0 8px #f0d8a1} @keyframes env-sweep{0%,100%{transform:translateX(-20%) rotate(24deg);opacity:.08}50%{transform:translateX(70%) rotate(24deg);opacity:.28}} @keyframes env-float{0%,100%{transform:translateY(8px);opacity:.15}50%{transform:translateY(-20px);opacity:.8}} @keyframes env-ripple{0%,100%{transform:translateX(-15px);opacity:.1}50%{transform:translateX(35px);opacity:.6}} @media(prefers-reduced-motion:reduce){#arena .arena-environment *{animation:none!important}} /* v19: animated origin-story cinematic and crowd reactions */ .origin-story{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:clamp(12px,3vw,32px);background:radial-gradient(ellipse at 50% 20%,#29384deF,#05070af7 70%);backdrop-filter:blur(8px)} .origin-story.hidden{display:none}.story-frame{width:min(820px,100%);border:1px solid #f5b82e66;background:linear-gradient(145deg,#111722f7,#080a10f7);box-shadow:0 24px 100px #000b;border-radius:18px;padding:clamp(16px,3vw,30px);overflow:hidden;animation:story-frame-in .6s cubic-bezier(.2,.8,.2,1) both}.story-topline{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--gold,#f5b82e);font-size:10px;font-weight:900;letter-spacing:.16em}.story-art{position:relative;isolation:isolate;height:clamp(150px,27vw,260px);margin:18px 0 20px;overflow:hidden;border:1px solid #ffffff1c;border-radius:12px;background:linear-gradient(#172d48,#d18a48 75%,#24202b);display:flex;align-items:end;justify-content:center}.story-art:before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,transparent 0 7%,#11182744 7.2% 7.5%),linear-gradient(0deg,#080a10 0 10%,transparent 10%);animation:story-pan 12s linear infinite}.story-sun{position:absolute;top:12%;left:16%;font-size:clamp(30px,7vw,70px);color:#ffdb7b;filter:drop-shadow(0 0 22px #ffc45b);animation:story-sun-pulse 3s ease-in-out infinite}.story-city{position:absolute;bottom:13%;font-size:clamp(28px,7vw,62px);filter:drop-shadow(0 8px 5px #0007);animation:story-city-drift 7s ease-in-out infinite}.story-crowd{position:absolute;bottom:1%;width:100%;text-align:center;font-size:clamp(20px,5vw,42px);letter-spacing:.12em;filter:drop-shadow(0 0 6px #000);animation:story-crowd-bob 1.8s ease-in-out infinite}.story-flash{position:absolute;top:16%;right:18%;font-size:clamp(34px,8vw,80px);opacity:0;transform:scale(.3) rotate(-20deg)}.story-art-peace{filter:saturate(1.05)}.story-art-crown{background:radial-gradient(circle at 50% 35%,#ffdf7b,#8c4e2b 48%,#101624 100%)}.story-art-crown .story-flash{opacity:1;color:#ffdf7b;animation:story-crown-drop .9s ease-out both}.story-art-rumour{background:linear-gradient(115deg,#17243a,#704b50,#111722)}.story-art-rumour:after{content:"RUMOUR • BLAME • PRIDE";position:absolute;top:38%;width:100%;text-align:center;color:#fff;font-weight:1000;font-size:clamp(14px,3vw,26px);letter-spacing:.15em;text-shadow:0 3px 12px #000;animation:story-rumour 2.6s ease-in-out infinite}.story-art-chaos{background:linear-gradient(120deg,#4b1d2c,#171827 55%,#a44c2b)}.story-art-chaos:after{content:"⚡ CHAOS ⚡";position:absolute;top:35%;width:100%;text-align:center;color:#fff;font-size:clamp(24px,6vw,54px);font-weight:1000;letter-spacing:.1em;text-shadow:0 0 22px #ff4d40;animation:story-chaos-pulse .55s steps(2,end) infinite}.story-art-chaos .story-city{animation:story-shake .2s linear infinite}.story-art-arena{background:radial-gradient(ellipse at 50% 35%,#5b4b25,#101522 65%,#05070a)}.story-art-arena:after{content:"CHOOSE YOUR CHAMPION";position:absolute;top:37%;width:100%;text-align:center;color:#f5b82e;font-size:clamp(16px,4vw,34px);font-weight:1000;letter-spacing:.12em;text-shadow:0 3px 14px #000;animation:story-title-glow 1.8s ease-in-out infinite}.story-art-arena .story-flash{opacity:1;color:#f5b82e;animation:story-crown-drop 1.2s ease-out infinite alternate}.story-frame .eyebrow{margin:0 0 8px;color:var(--gold,#f5b82e);font-size:10px;letter-spacing:.14em}.story-frame h2{font-size:clamp(25px,5vw,44px);line-height:1.02;margin:0 0 12px}.story-frame #storyCopy{color:#d1d5db;line-height:1.7;max-width:66ch;min-height:3.4em}.story-progress{height:4px;background:#ffffff19;border-radius:5px;overflow:hidden;margin:22px 0}.story-progress i{display:block;height:100%;width:20%;background:var(--gold,#f5b82e);box-shadow:0 0 12px #f5b82e;transition:width .35s ease}.story-actions{display:flex;justify-content:space-between;gap:12px}.story-actions button:disabled{opacity:.35;cursor:not-allowed}.story-open{overflow:hidden}.crowd-reaction{position:absolute;z-index:8;top:12%;left:50%;transform:translateX(-50%);padding:9px 14px;border:1px solid #f5b82e;background:#080a10eF;color:#fff;font-size:clamp(10px,1.7vw,16px);font-weight:1000;letter-spacing:.1em;text-align:center;white-space:nowrap;box-shadow:0 0 22px #f5b82e55;pointer-events:none;animation:crowd-pop 1.05s ease-out both}.crowd-cheer:after{content:"🙌 🙌 🙌 🙌 🙌";position:absolute;z-index:7;left:0;right:0;bottom:4%;text-align:center;font-size:clamp(17px,3vw,30px);filter:drop-shadow(0 2px 5px #000);pointer-events:none;animation:crowd-wave .95s ease-in-out both}.crowd-cheer{filter:saturate(1.3)} @keyframes story-frame-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes story-pan{from{background-position:0 0}to{background-position:120px 0}}@keyframes story-sun-pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.12);opacity:1}}@keyframes story-city-drift{0%,100%{transform:translateX(-8px)}50%{transform:translateX(8px)}}@keyframes story-crowd-bob{0%,100%{transform:translateY(2px)}50%{transform:translateY(-7px)}}@keyframes story-crown-drop{from{transform:translateY(-30px) scale(.4) rotate(-30deg);opacity:0}to{transform:translateY(0) scale(1) rotate(0);opacity:1}}@keyframes story-rumour{0%,100%{opacity:.45;transform:translateX(-3px)}50%{opacity:1;transform:translateX(3px)}}@keyframes story-chaos-pulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}@keyframes story-shake{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}@keyframes story-title-glow{0%,100%{text-shadow:0 0 10px #f5b82e55}50%{text-shadow:0 0 28px #f5b82e}}@keyframes crowd-pop{0%{opacity:0;transform:translate(-50%,-10px) scale(.8)}15%,75%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-8px) scale(1.02)}}@keyframes crowd-wave{0%{opacity:0;transform:translateY(15px)}25%,75%{opacity:1;transform:translateY(-4px)}100%{opacity:0;transform:translateY(-12px)}} @media(max-width:560px){.story-topline{font-size:8px}.story-art{margin:14px 0}.story-frame #storyCopy{font-size:14px}.story-actions .btn{padding:10px 12px}.crowd-reaction{max-width:90%;white-space:normal}} @media(prefers-reduced-motion:reduce){.story-frame,.story-art *,.story-art:before,.story-art:after,.crowd-reaction,.crowd-cheer:after{animation:none!important;transition:none!important}} /* v20: timed arena momentum events and fighter-flavoured signature VFX */ #arena .arena-event-banner{position:absolute;z-index:12;top:5px;left:50%;transform:translateX(-50%);width:max-content;max-width:94%;display:flex;flex-direction:column;gap:4px;text-align:center;padding:9px 15px;border:1px solid #f5b82e;background:#090c13ed;color:#fff;box-shadow:0 0 22px #f5b82e55;pointer-events:none;animation:event-banner-in .28s ease-out both} #arena .arena-event-banner strong{font-size:clamp(10px,1.6vw,15px);letter-spacing:.08em}#arena .arena-event-banner small{font-size:clamp(9px,1.25vw,12px);color:#f9d98a} #arena.event-warning:before{content:"";position:absolute;z-index:9;inset:0;border:5px solid #ffb347;pointer-events:none;animation:event-warning-pulse .65s ease-in-out infinite alternate} #arena.event-active:before{content:"";position:absolute;z-index:9;inset:0;border:5px solid #52f7cf;box-shadow:inset 0 0 34px #52f7cf55;pointer-events:none;animation:event-active-pulse .75s ease-in-out infinite alternate} #arena.event-hit{animation:event-hit-shake .18s linear 2}#arena.vfx-cosmic.special-flash:after{content:"✦ ✧ ✦";position:absolute;z-index:11;inset:35% 0 auto;text-align:center;font-size:clamp(35px,8vw,78px);color:#8be9ff;text-shadow:0 0 24px #55cfff;pointer-events:none;animation:vfx-starburst .65s ease-out both} #arena.vfx-impact.special-flash:after{content:"💥";position:absolute;z-index:11;inset:30% 0 auto;text-align:center;font-size:clamp(40px,9vw,90px);filter:drop-shadow(0 0 20px #ff773b);pointer-events:none;animation:vfx-impact .65s ease-out both} #arena.vfx-flare.special-flash:after{content:"🔥 ✦ 🔥";position:absolute;z-index:11;inset:35% 0 auto;text-align:center;font-size:clamp(32px,7vw,70px);filter:drop-shadow(0 0 16px #ff5e32);pointer-events:none;animation:vfx-flare .65s ease-out both} #arena.vfx-wave.special-flash:after{content:"〰 〰 〰";position:absolute;z-index:11;inset:36% 0 auto;text-align:center;font-size:clamp(34px,7vw,68px);color:#d9b8ff;text-shadow:0 0 20px #9e66ff;pointer-events:none;animation:vfx-wave .65s ease-out both} #arena.vfx-street.special-flash:after{content:"⚡ CHAOS ⚡";position:absolute;z-index:11;inset:38% 0 auto;text-align:center;font-size:clamp(22px,5vw,48px);font-weight:1000;color:#f5b82e;text-shadow:0 0 18px #ff6b2b;pointer-events:none;animation:vfx-starburst .65s ease-out both} @keyframes event-banner-in{from{opacity:0;transform:translate(-50%,-10px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}@keyframes event-warning-pulse{from{opacity:.25}to{opacity:.9}}@keyframes event-active-pulse{from{opacity:.25}to{opacity:.85}}@keyframes event-hit-shake{0%,100%{transform:translateX(0)}30%{transform:translateX(-3px)}70%{transform:translateX(3px)}}@keyframes vfx-starburst{from{opacity:0;transform:scale(.35) rotate(-12deg)}30%{opacity:1;transform:scale(1.1) rotate(5deg)}to{opacity:0;transform:scale(1.45) rotate(12deg)}}@keyframes vfx-impact{from{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.2)}to{opacity:0;transform:scale(1.6)}}@keyframes vfx-flare{from{opacity:0;transform:translateY(20px) scale(.5)}35%{opacity:1;transform:translateY(0) scale(1.1)}to{opacity:0;transform:translateY(-22px) scale(1.5)}}@keyframes vfx-wave{from{opacity:0;transform:scaleX(.25)}35%{opacity:1;transform:scaleX(1.15)}to{opacity:0;transform:scaleX(1.6)}} @media(max-width:560px){#arena .arena-event-banner{top:3px;padding:7px 9px}}@media(prefers-reduced-motion:reduce){#arena.event-warning:before,#arena.event-active:before,#arena.vfx-cosmic.special-flash:after,#arena.vfx-impact.special-flash:after,#arena.vfx-flare.special-flash:after,#arena.vfx-wave.special-flash:after,#arena.vfx-street.special-flash:after{animation:none!important}} /* v21: campaign rival introductions and branching-feel dialogue cards */ .campaign-briefing{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at 50% 0%,#29384df2,#05070af7 72%);backdrop-filter:blur(9px)} .campaign-briefing.hidden{display:none}.brief-panel{width:min(720px,100%);padding:clamp(20px,4vw,36px);border:1px solid #f5b82e77;border-radius:18px;background:linear-gradient(145deg,#151d2bfa,#080a10fa);box-shadow:0 25px 90px #000b;animation:brief-enter .38s cubic-bezier(.2,.8,.2,1) both;position:relative;overflow:hidden}.brief-panel:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#f5b82e,#ff644d,#f5b82e);background-size:200% 100%;animation:brief-line 3s linear infinite}.brief-top{display:flex;justify-content:space-between;gap:12px;color:#f5c85d;font-size:9px;font-weight:900;letter-spacing:.15em}.brief-emblem{margin:20px auto 12px;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;border:1px solid #f5b82e77;background:radial-gradient(circle,#f5b82e33,#10141d);font-size:30px;color:#f5c85d;box-shadow:0 0 32px #f5b82e22;animation:brief-emblem 2.5s ease-in-out infinite}.brief-panel>.eyebrow{font-size:10px;letter-spacing:.16em;color:#f5c85d;margin:0 0 8px}.brief-panel h2{font-size:clamp(27px,5vw,43px);line-height:1.05;margin:0 0 18px}.brief-dialogue{padding:13px 15px;margin-top:10px;border-left:3px solid #ff765e;background:#ffffff08;border-radius:0 9px 9px 0}.brief-dialogue p{margin:5px 0 0;color:#f1f3f7;line-height:1.55;font-size:clamp(14px,2vw,17px)}.brief-speaker{color:#ff987f;font-size:9px;font-weight:1000;letter-spacing:.14em}.brief-player-line{border-left-color:#f5b82e}.brief-player-line .brief-speaker{color:#f5c85d}.brief-beat{margin:18px 0;color:#aeb8c8;line-height:1.65;font-size:13px}.brief-actions{display:flex;justify-content:space-between;gap:12px;margin-top:20px}.brief-actions .btn{white-space:normal}@keyframes brief-enter{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes brief-line{from{background-position:0 0}to{background-position:200% 0}}@keyframes brief-emblem{0%,100%{transform:translateY(0);box-shadow:0 0 20px #f5b82e22}50%{transform:translateY(-4px);box-shadow:0 0 34px #f5b82e44}} @media(max-width:520px){.brief-top{font-size:8px}.brief-emblem{width:52px;height:52px;margin:14px auto 10px}.brief-actions{flex-direction:column-reverse}.brief-actions .btn{width:100%}} @media(prefers-reduced-motion:reduce){.brief-panel,.brief-panel:before,.brief-emblem{animation:none!important}} /* v22: final champion entrance and campaign finale */ .boss-intro-flag{display:table;margin:0 auto 12px;padding:7px 13px;border:1px solid #ff6a55;border-radius:999px;background:linear-gradient(90deg,#51151b,#251019);color:#ffd4a0;font-size:9px;font-weight:1000;letter-spacing:.18em;text-align:center;animation:boss-flag-pulse 1.5s ease-in-out infinite} .boss-intro-flag.hidden{display:none} .final-boss-brief .brief-panel{border-color:#ff5b4d;background:radial-gradient(ellipse at 50% 0%,#562026,#100b12 70%);box-shadow:0 25px 100px #ff241f25,0 25px 90px #000b} .final-boss-brief .brief-panel:before{background:linear-gradient(90deg,#ff3c3c,#ffd06a,#ff3c3c);background-size:200% 100%} .final-boss-brief .brief-emblem{border-color:#ff6258;background:radial-gradient(circle,#ff423b55,#180b10);color:#ffd06a;box-shadow:0 0 40px #ff332c55;animation:boss-crown-pulse 1.4s ease-in-out infinite} .campaign-champion-victory:not(.hidden){animation:champion-victory-flash .65s ease-out both} @keyframes boss-flag-pulse{0%,100%{box-shadow:0 0 0 #ff3c3c00;transform:scale(1)}50%{box-shadow:0 0 24px #ff3c3c55;transform:scale(1.025)}} @keyframes boss-crown-pulse{0%,100%{transform:translateY(0) rotate(-2deg);filter:brightness(1)}50%{transform:translateY(-5px) rotate(2deg);filter:brightness(1.35)}} @keyframes champion-victory-flash{0%{filter:brightness(1.8)}100%{filter:brightness(1)}} @media(prefers-reduced-motion:reduce){.boss-intro-flag,.final-boss-brief .brief-emblem,.campaign-champion-victory{animation:none!important}} /* v23: fighter personality taunts and result reactions */ #arena{position:relative} .fighter-taunt-ui{position:absolute;z-index:35;top:12px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:min(92%,420px)} .fighter-taunt-button{pointer-events:auto;border:1px solid #ffd06a;border-radius:999px;padding:9px 17px;background:linear-gradient(135deg,#31140f,#9e3e1a);color:#fff1cf;font-size:10px;font-weight:1000;letter-spacing:.13em;box-shadow:0 5px 22px #0008;cursor:pointer} .fighter-taunt-button:disabled{opacity:.55;cursor:wait} .fighter-taunt-bubble{opacity:0;transform:translateY(-8px) scale(.97);max-width:100%;padding:10px 15px;border:1px solid #ffd06a;border-radius:14px;background:#100d12ed;color:#fff0c7;text-align:center;font-weight:900;font-size:clamp(11px,2vw,14px);box-shadow:0 8px 28px #0009;pointer-events:none} .fighter-taunt-bubble.taunt-pop{animation:taunt-pop-in .22s ease-out forwards} .campaign-champion-victory #resultTitle{text-shadow:0 0 26px #f9c44b66} @keyframes taunt-pop-in{to{opacity:1;transform:translateY(0) scale(1)}} @media(max-width:600px){.fighter-taunt-ui{top:5px}.fighter-taunt-button{padding:7px 12px}.fighter-taunt-bubble{padding:8px 10px}} @media(prefers-reduced-motion:reduce){.fighter-taunt-bubble.taunt-pop{animation:none;opacity:1;transform:none}} /* v24 usability pass: clearer creator, icon-only music, visible pause, larger fighter presentation */ .top-meta{display:flex;align-items:center;gap:10px} #soundToggle.music-icon-only{min-width:42px;width:42px;height:42px;padding:0;display:grid;place-items:center;font-size:25px;line-height:1;border-radius:12px;color:var(--gold);border:1px solid #4b3a1b;background:#151923;letter-spacing:0} #soundToggle.music-icon-only[aria-pressed="false"]{color:#8993a5;border-color:#303747} #fighterCreator{padding:clamp(16px,3vw,28px);border:1px solid #394254;border-radius:18px;background:radial-gradient(ellipse at 0% 0%,#f5b82e12,transparent 45%),linear-gradient(145deg,#151b27,#0a0e15);box-shadow:0 18px 45px #0003} .creator-heading{margin-bottom:20px} .creator-heading h3{font-size:clamp(28px,4vw,42px);line-height:1;margin:4px 0 10px} .creator-heading .muted{max-width:600px} .creator-preview{min-height:88px;min-width:88px;border:2px solid var(--creator-color,#f5b82e);border-radius:22px;box-shadow:0 0 35px color-mix(in srgb,var(--creator-color,#f5b82e) 25%,transparent);font-size:48px} .creator-fields-primary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} #fighterCreator label{display:flex;flex-direction:column;gap:7px;color:#d8deea;font-size:10px;font-weight:900;letter-spacing:.08em} #fighterCreator input:not([type="range"]):not([type="color"]),#fighterCreator select{width:100%;min-height:46px;padding:12px 13px;border:1px solid #3b465b;border-radius:10px;background:#090e17;color:#f4f6fb;font:inherit;font-size:14px;letter-spacing:0;outline:none} #fighterCreator input:focus,#fighterCreator select:focus{border-color:var(--gold);box-shadow:0 0 0 3px #f5b82e20} #fighterCreator input[type="color"]{width:100%;height:46px;padding:4px;border:1px solid #3b465b;border-radius:10px;background:#090e17} .creator-more{margin:16px 0;border:1px solid #30394b;border-radius:12px;background:#0d121c;overflow:hidden} .creator-more summary{cursor:pointer;padding:14px 16px;color:#f5d98b;font-size:11px;font-weight:1000;letter-spacing:.1em;list-style:none} .creator-more summary::-webkit-details-marker{display:none} .creator-more summary:after{content:"＋";float:right;font-size:17px} .creator-more[open] summary:after{content:"−"} .creator-fields-secondary{padding:4px 16px 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .creator-stat-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:8px} .creator-stat input[type="range"]{width:100%;accent-color:var(--gold)} .creator-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .creator-actions button{min-height:46px} .creator-note{padding:12px 14px;margin:14px 0 0;border-radius:10px;background:#101722;color:#bac5d6;font-size:12px;line-height:1.5} .match-screen{position:relative} #pauseMatch{position:fixed;z-index:120;top:92px;right:14px;min-width:102px;min-height:44px;display:flex;align-items:center;justify-content:center;border:2px solid #f5b82e;background:#17130b;color:#ffe6a0;box-shadow:0 4px 22px #0009;font-size:12px;font-weight:1000;letter-spacing:.07em} #pauseMatch[aria-pressed="true"]{background:#f5b82e;color:#111} .match-head{padding-right:125px} .fighter-card{min-height:150px;padding:14px} .fighter-avatar{height:78px;width:78px;font-size:33px;margin-bottom:12px} .detail-avatar{height:150px;font-size:84px} .fighter-card strong{font-size:13px} @media(max-width:650px){ .creator-fields-primary,.creator-fields-secondary{grid-template-columns:1fr} .creator-stat-grid{grid-template-columns:1fr} .creator-header{align-items:flex-start} .creator-preview{min-width:66px;min-height:66px;width:66px;height:66px;font-size:36px;border-radius:16px} #pauseMatch{top:auto;bottom:calc(125px + env(safe-area-inset-bottom));right:10px;min-width:86px;min-height:42px} .match-head{padding-right:0;padding-top:50px} .fighter-avatar{height:72px;width:72px} } /* v24 next upgrade: dramatic match-ending impact and champion pose presentation */ #matchOverlay.finishing-win:not(.hidden){animation:finish-win-entry .55s cubic-bezier(.2,.8,.2,1) both} #matchOverlay.finishing-loss:not(.hidden){animation:finish-loss-entry .45s ease-out both} #matchOverlay.finishing-win:not(.hidden) #resultTitle{animation:champion-title-pop .65s cubic-bezier(.16,1,.3,1) both;text-shadow:0 0 28px #f5b82e66} #matchOverlay.finishing-loss:not(.hidden) #resultTitle{animation:finish-loss-title .4s ease-out both} @keyframes finish-win-entry{0%{filter:brightness(2.1);transform:scale(1.015)}55%{filter:brightness(1.2);transform:scale(.995)}100%{filter:brightness(1);transform:scale(1)}} @keyframes finish-loss-entry{0%{filter:brightness(.65);opacity:.75}100%{filter:brightness(1);opacity:1}} @keyframes champion-title-pop{0%{opacity:0;transform:translateY(18px) scale(.82)}70%{opacity:1;transform:translateY(-3px) scale(1.04)}100%{transform:translateY(0) scale(1)}} @keyframes finish-loss-title{0%{transform:translateY(-6px);opacity:.5}100%{transform:translateY(0);opacity:1}} @media(prefers-reduced-motion:reduce){#matchOverlay.finishing-win:not(.hidden),#matchOverlay.finishing-loss:not(.hidden),#matchOverlay.finishing-win:not(.hidden) #resultTitle,#matchOverlay.finishing-loss:not(.hidden) #resultTitle{animation:none!important}} /* v25: signature move callout and attack-specific cinematic accents */ .signature-move-cinematic{position:absolute;z-index:42;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;overflow:hidden;opacity:0;pointer-events:none;text-align:center} .signature-move-cinematic:before{content:"";position:absolute;inset:-35%;background:conic-gradient(from 0deg,transparent 0 22%,#f8cf5940 26%,transparent 32% 48%,#ffffff22 52%,transparent 58% 78%,#f8cf5940 83%,transparent 90%);opacity:0} .signature-move-cinematic .signature-move-kicker{position:relative;color:#ffe7a0;font-size:clamp(8px,1.6vw,11px);font-weight:1000;letter-spacing:.28em;text-shadow:0 2px 8px #000} .signature-move-cinematic .signature-move-title{position:relative;max-width:94%;padding:5px 14px;color:#fff8df;font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(24px,5vw,48px);line-height:1;text-transform:uppercase;letter-spacing:.035em;text-shadow:0 4px 0 #17100b,0 0 22px #ffbf4a;transform:translateY(22px) scale(.8);opacity:0} .signature-move-cinematic .signature-move-trail{position:relative;display:block;width:0;height:3px;background:linear-gradient(90deg,transparent,#fff1b0,#ff6a32,transparent);box-shadow:0 0 18px #ffb32e} .signature-move-cinematic.signature-move-play{animation:signature-scene-in 1.05s ease-out both} .signature-move-play:before{animation:signature-ring-spin 1.05s ease-out both} .signature-move-play .signature-move-title{animation:signature-title-hit .92s cubic-bezier(.15,.85,.25,1) both} .signature-move-play .signature-move-trail{animation:signature-trail-stretch .78s ease-out both} .signature-move-cinematic.move-speed .signature-move-title{text-shadow:0 4px 0 #07151b,0 0 25px #52e9ff} .signature-move-cinematic.move-guard .signature-move-title{text-shadow:0 4px 0 #1a0c20,0 0 25px #c48aff} .signature-move-cinematic.move-power .signature-move-title{text-shadow:0 4px 0 #29100a,0 0 25px #ff642e} .signature-move-cinematic.move-balanced .signature-move-title{text-shadow:0 4px 0 #172012,0 0 25px #c7f56b} @keyframes signature-scene-in{0%{opacity:0}12%{opacity:1}70%{opacity:1}100%{opacity:0}} @keyframes signature-ring-spin{0%{opacity:0;transform:rotate(-35deg) scale(.65)}25%{opacity:.9}100%{opacity:0;transform:rotate(25deg) scale(1.1)}} @keyframes signature-title-hit{0%{opacity:0;transform:translateY(22px) scale(.8)}24%{opacity:1;transform:translateY(-2px) scale(1.06)}42%{transform:translateY(0) scale(1)}82%{opacity:1}100%{opacity:0;transform:translateY(-7px) scale(1.02)}} @keyframes signature-trail-stretch{0%{width:0;opacity:0}25%{width:75%;opacity:1}85%{width:90%;opacity:.9}100%{width:0;opacity:0}} @media(prefers-reduced-motion:reduce){.signature-move-cinematic.signature-move-play,.signature-move-play:before,.signature-move-play .signature-move-title,.signature-move-play .signature-move-trail{animation:none!important}.signature-move-cinematic.signature-move-play{opacity:1}.signature-move-play .signature-move-title{opacity:1;transform:none}} /* v27: custom fighter identity, style aura, impact pulse, and stronger finish beats */ #arena{--custom-accent:#f5b82e} #arena.custom-style-street{--custom-accent:#f5b82e} #arena.custom-style-tech{--custom-accent:#62e8ff} #arena.custom-style-boxing{--custom-accent:#ff6b57} #arena.custom-style-capoeira{--custom-accent:#c5a2ff} #arena.custom-style-wrestling{--custom-accent:#76e5a0} .custom-fighter-intro{position:absolute;z-index:28;top:13%;left:50%;transform:translate(-50%,-10px) scale(.92);width:min(88%,410px);padding:13px 18px 15px;border:1px solid var(--custom-accent);border-radius:13px;background:linear-gradient(110deg,#090d17f2,#151b2af0);box-shadow:0 0 0 1px #0008,0 0 26px var(--custom-accent);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;opacity:0;pointer-events:none;overflow:hidden} .custom-fighter-intro i{position:absolute;left:-20%;right:-20%;bottom:0;height:3px;background:var(--custom-accent);transform:scaleX(0);transform-origin:left} .custom-fighter-intro.custom-intro-show{animation:custom-intro-arrive .4s cubic-bezier(.2,.9,.2,1) forwards} .custom-fighter-intro.custom-intro-show i{animation:custom-intro-scan 2.1s ease-out forwards} .custom-intro-kicker{font-size:9px;letter-spacing:.2em;font-weight:1000;color:var(--custom-accent)} .custom-fighter-intro strong{font-size:clamp(17px,3vw,27px);font-weight:1000;letter-spacing:.06em;color:#fff;text-shadow:0 2px 0 #000,0 0 16px var(--custom-accent)} .custom-fighter-intro small{font-size:10px;color:#c9d1e0;letter-spacing:.08em;font-weight:800} #arena.custom-style-street:before,#arena.custom-style-tech:before,#arena.custom-style-boxing:before,#arena.custom-style-capoeira:before,#arena.custom-style-wrestling:before{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:screen;background:radial-gradient(ellipse at 28% 70%,var(--custom-accent),transparent 43%)} #arena.custom-impact-pulse:after{content:"";position:absolute;z-index:13;inset:0;pointer-events:none;border:4px solid var(--custom-accent);box-shadow:inset 0 0 45px var(--custom-accent);animation:custom-impact-ring .38s ease-out both} #arena.custom-style-tech.custom-impact-pulse:after{border-style:dashed} #arena.custom-style-capoeira.custom-impact-pulse:after{border-radius:42%} @keyframes custom-intro-arrive{0%{opacity:0;transform:translate(-50%,-10px) scale(.92)}70%{opacity:1;transform:translate(-50%,2px) scale(1.02)}100%{opacity:1;transform:translate(-50%,0) scale(1)}} @keyframes custom-intro-scan{0%{transform:scaleX(0)}100%{transform:scaleX(1)}} @keyframes custom-impact-ring{0%{opacity:.95;transform:scale(.97)}100%{opacity:0;transform:scale(1.025)}} #matchOverlay.finishing-win:not(.hidden){box-shadow:inset 0 0 0 2px #f5b82e,0 0 50px #f5b82e24} #matchOverlay.finishing-win:not(.hidden) #resultTitle{animation:champion-title-pop .65s cubic-bezier(.16,1,.3,1) both,champion-title-glow 1.6s ease-in-out .2s 2} #matchOverlay.finishing-loss:not(.hidden){box-shadow:inset 0 0 0 2px #d64b4b88} @keyframes champion-title-glow{0%,100%{filter:drop-shadow(0 0 0 #f5b82e00)}50%{filter:drop-shadow(0 0 15px #f5b82eaa)}} @media(prefers-reduced-motion:reduce){.custom-fighter-intro,.custom-fighter-intro i,#arena.custom-impact-pulse:after,#matchOverlay.finishing-win:not(.hidden) #resultTitle{animation:none!important}.custom-fighter-intro{opacity:1;transform:translate(-50%,0)}} /* v28: clearer combat feedback layered over existing fighter animation frames */ .combat-move-callout{position:absolute;z-index:29;left:50%;top:25%;transform:translate(-50%,8px) skewX(-7deg) scale(.96);width:max-content;max-width:86%;padding:8px 18px 10px;border-left:3px solid #f5b82e;border-right:3px solid #f5b82e;background:linear-gradient(90deg,#090d17e8,#182137ed,#090d17e8);box-shadow:0 0 22px #0009;display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;pointer-events:none} .combat-move-callout strong{font-size:clamp(16px,2.5vw,25px);font-weight:1000;font-style:italic;letter-spacing:.1em;color:#fff;text-shadow:2px 2px #101522,0 0 13px #f5b82e99} .combat-move-kicker{font-size:8px;font-weight:1000;letter-spacing:.24em;color:#f5b82e} .combat-move-callout i{position:absolute;bottom:0;left:0;height:2px;width:100%;background:#f5b82e;transform:scaleX(0);transform-origin:left} .combat-move-callout.show{animation:combat-callout-pop .2s cubic-bezier(.2,.9,.2,1) forwards} .combat-move-callout.show i{animation:combat-callout-line 1s linear forwards} .combat-move-callout.kind-special{border-color:#62e8ff;box-shadow:0 0 28px #62e8ff44} .combat-move-callout.kind-special strong,.combat-move-callout.kind-special .combat-move-kicker{color:#62e8ff} .combat-move-callout.kind-special i{background:#62e8ff} .combat-move-callout.kind-guard{border-color:#76e5a0} .combat-move-callout.kind-movement{border-color:#c5a2ff} @keyframes combat-callout-pop{0%{opacity:0;transform:translate(-50%,8px) skewX(-7deg) scale(.96)}100%{opacity:1;transform:translate(-50%,0) skewX(-7deg) scale(1)}} @keyframes combat-callout-line{0%{transform:scaleX(0)}100%{transform:scaleX(1)}} @media(prefers-reduced-motion:reduce){.combat-move-callout.show{animation:none;opacity:1}.combat-move-callout.show i{animation:none;transform:scaleX(1)}} /* v30: readable hit/guard reactions and small movement feedback cues */ .nac-hit-reaction{filter:brightness(1.55) saturate(1.25);animation:nac-hit-flash .16s ease-out both!important} .nac-guard-reaction{filter:brightness(1.22) drop-shadow(0 0 8px #62e8ff);animation:nac-guard-flash .16s ease-out both!important} @keyframes nac-hit-flash{0%{transform:translateX(0) scale(1)}35%{transform:translateX(-4px) scale(1.025)}70%{transform:translateX(3px) scale(.99)}100%{transform:translateX(0) scale(1)}} @keyframes nac-guard-flash{0%{transform:translateX(0)}35%{transform:translateX(-2px)}70%{transform:translateX(2px)}100%{transform:translateX(0)}} @media(prefers-reduced-motion:reduce){.nac-hit-reaction,.nac-guard-reaction{animation:none!important}} /* v31: character wardrobe variety and in-match news/advert ticker */ .fighter-avatar{overflow:hidden;background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--fighter-color) 55%,#101622),#0b1018 72%)} .fighter-avatar img{object-fit:cover;object-position:center top;filter:drop-shadow(0 8px 7px #0008);transition:transform .2s ease,filter .2s ease} .fighter-card:hover .fighter-avatar img,.fighter-card.selected .fighter-avatar img{transform:scale(1.06);filter:drop-shadow(0 0 9px var(--fighter-color))} .detail-avatar img{object-fit:cover;object-position:center top;filter:drop-shadow(0 0 14px var(--fighter-color))} .naija-live-ticker{position:relative;z-index:25;display:flex;align-items:center;gap:10px;min-height:37px;margin:0 0 8px;padding:5px 8px;border:1px solid #f5b82e66;border-radius:7px;background:linear-gradient(90deg,#0a0e16,#121b2a,#0a0e16);box-shadow:0 3px 16px #0005;overflow:hidden} .ticker-label{flex:0 0 auto;padding:5px 8px;border-radius:4px;background:#e9ad2d;color:#10131a;font-size:9px;letter-spacing:.1em;font-weight:1000} .ticker-window{position:relative;flex:1;min-width:0;overflow:hidden;height:24px} .ticker-track{display:flex;height:24px;transition:transform .5s ease} .ticker-item{flex:0 0 100%;min-width:0;display:flex;align-items:center;gap:9px;white-space:nowrap;overflow:hidden} .ticker-item b{flex:0 0 auto;color:#f5c75f;font-size:9px;letter-spacing:.08em} .ticker-item span{overflow:hidden;text-overflow:ellipsis;color:#e7edf6;font-size:11px;font-weight:650} .ticker-source{flex:0 0 auto;border:1px solid #ffffff35;background:#ffffff0a;color:#e7edf6;border-radius:4px;padding:5px 7px;font-size:9px;font-weight:900;cursor:pointer} @media(max-width:600px){.naija-live-ticker{gap:5px;padding:4px;min-height:34px}.ticker-label{font-size:8px;padding:4px}.ticker-item{gap:5px}.ticker-item b{font-size:8px}.ticker-item span{font-size:10px}.ticker-source{font-size:8px;padding:4px}} @media(prefers-reduced-motion:reduce){.fighter-avatar img,.ticker-track{transition:none!important}} /* v32: fighter identity labels and illustrated portrait detail */ .fighter-archetype{display:inline-flex;align-self:flex-start;max-width:100%;margin:4px 0 2px;padding:3px 6px;border:1px solid color-mix(in srgb,var(--fighter-color,#f5b82e) 62%,transparent);border-radius:4px;background:color-mix(in srgb,var(--fighter-color,#f5b82e) 12%,#0b1018);color:color-mix(in srgb,var(--fighter-color,#f5b82e) 60%,white);font-size:8px;line-height:1.2;font-weight:1000;letter-spacing:.08em;white-space:normal} .fighter-card .fighter-archetype{font-size:7px;margin-top:2px} .fighter-card .fighter-avatar img{object-position:center center} .fighter-card.selected{border-color:var(--fighter-color,#f5b82e);box-shadow:0 0 0 1px var(--fighter-color,#f5b82e),0 0 20px color-mix(in srgb,var(--fighter-color,#f5b82e) 20%,transparent)} .intro-archetype{font-size:9px;font-style:normal;font-weight:1000;letter-spacing:.18em;color:var(--custom-accent);padding-top:3px} /* v33 — move-specific combat presentation cues, layered over the existing fighter animation. */ #arena{isolation:isolate;overflow:hidden} #arena::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:30;opacity:0;background:transparent} #arena.nac-cue-punch::after{opacity:1;animation:nac-v33-punch .28s ease-out} #arena.nac-cue-kick::after{opacity:1;animation:nac-v33-kick .34s ease-out} #arena.nac-cue-spin::after{opacity:1;animation:nac-v33-spin .38s ease-out} #arena.nac-cue-uppercut::after{opacity:1;animation:nac-v33-uppercut .32s ease-out} #arena.nac-cue-block::after{opacity:1;animation:nac-v33-block .28s ease-out} #arena.nac-cue-down::after{opacity:1;animation:nac-v33-down .32s ease-out} #arena.nac-cue-victory::after{opacity:1;animation:nac-v33-victory .9s ease-out} #arena.nac-cue-rise::after{opacity:1;animation:nac-v33-rise .36s ease-out} #arena.nac-cue-jump::after{opacity:1;animation:nac-v33-jump .32s ease-out} @keyframes nac-v33-punch{0%{background:linear-gradient(100deg,transparent 38%,#fff8 48%,#ffd45a99 52%,transparent 62%);transform:translateX(-14%)}100%{background:transparent;transform:translateX(14%)}} @keyframes nac-v33-kick{0%{background:linear-gradient(165deg,transparent 35%,#ffb14b99 48%,#fff8 51%,transparent 59%);transform:translateY(10px)}100%{background:transparent;transform:translateY(-8px)}} @keyframes nac-v33-spin{0%{background:radial-gradient(ellipse at 50% 55%,transparent 12%,#6ce8ff99 28%,transparent 45%);transform:rotate(-3deg) scale(.92)}100%{background:transparent;transform:rotate(3deg) scale(1.03)}} @keyframes nac-v33-uppercut{0%{background:linear-gradient(0deg,#ffd45a99,transparent 42%);transform:translateY(12px)}100%{background:transparent;transform:translateY(-10px)}} @keyframes nac-v33-block{0%{background:linear-gradient(90deg,transparent,#68dfff88,transparent)}55%{background:radial-gradient(ellipse at 50% 50%,#68dfff66,transparent 65%)}100%{background:transparent}} @keyframes nac-v33-down{0%{background:linear-gradient(0deg,#e44d4d77,transparent 60%);transform:translateY(-4px)}100%{background:transparent;transform:translateY(5px)}} @keyframes nac-v33-victory{0%{background:radial-gradient(ellipse at 50% 65%,#ffd45a99,transparent 12%)}45%{background:radial-gradient(ellipse at 50% 65%,#ffd45a55,transparent 62%)}100%{background:transparent}} @keyframes nac-v33-rise{0%{background:linear-gradient(0deg,#6ce8ff88,transparent 55%);transform:translateY(8px)}100%{background:transparent;transform:translateY(-5px)}} @keyframes nac-v33-jump{0%{background:radial-gradient(ellipse at 50% 82%,#ffd45a88,transparent 30%);transform:translateY(8px)}100%{background:transparent;transform:translateY(-7px)}} @media(prefers-reduced-motion:reduce){#arena.nac-cue-punch::after,#arena.nac-cue-kick::after,#arena.nac-cue-spin::after,#arena.nac-cue-uppercut::after,#arena.nac-cue-block::after,#arena.nac-cue-down::after,#arena.nac-cue-victory::after,#arena.nac-cue-rise::after,#arena.nac-cue-jump::after{animation-duration:.01ms}} /* v34: virtual player phone, visit counter and fighter training hub */ .virtual-phone-open{white-space:nowrap} .virtual-phone-backdrop{position:fixed;inset:0;z-index:9999;background:#02040bd9;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(8px)} .virtual-phone-backdrop.hidden{display:none} .virtual-phone{position:relative;width:min(100%,390px);max-height:min(88vh,790px);overflow:auto;border:3px solid #505a6b;border-radius:30px;padding:22px 17px 18px;background:linear-gradient(165deg,#111a2a,#080b12 60%);box-shadow:0 24px 90px #000b,0 0 0 5px #202633;color:var(--text)} .phone-notch{width:88px;height:17px;background:#03050a;border-radius:0 0 12px 12px;margin:-22px auto 16px} .phone-top,.phone-account,.phone-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .phone-top h2{margin:0;font-size:20px}.phone-top .eyebrow{margin:0 0 4px} .phone-account{justify-content:flex-start;background:#1a2333;border:1px solid #303c50;border-radius:14px;padding:12px;margin:16px 0} .phone-account-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#2b3546;font-size:22px} .phone-account small,.phone-account span,.phone-quick-grid small{display:block;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.06em} .phone-account b{display:block;margin:3px 0;font-size:14px}.phone-account span{font-size:10px;font-weight:500;letter-spacing:0} .phone-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px} .phone-quick-grid>div{padding:12px;border-radius:12px;background:#171e2c;border:1px solid #293447;min-width:0} .phone-quick-grid b{display:block;margin-top:7px;font-size:17px;overflow-wrap:anywhere} .phone-section{margin-top:15px;padding:13px;background:#101621;border:1px solid #293447;border-radius:14px} .phone-section-head h3{margin:0;font-size:12px}.phone-section-head span{font-size:10px;color:var(--muted)} .phone-cart-list{font-size:12px;color:var(--muted);padding:8px 0}.phone-cart-item{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #273041}.phone-cart-item:last-child{border-bottom:0} .phone-section .btn{margin-top:7px;width:100%}.phone-footnote{font-size:10px;line-height:1.5;color:var(--muted);margin:14px 3px 0} .training-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.4fr);gap:18px;align-items:start} .training-profile,.training-drills{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px} .training-avatar{display:grid;place-items:center;width:100%;min-height:125px;border-radius:10px;background:radial-gradient(circle at 50% 40%,#f5b82e33,transparent 65%),#171d29;font-size:58px;margin-bottom:18px} .training-profile h3{margin:5px 0;font-size:24px}.training-xp{display:flex;justify-content:space-between;gap:10px;margin-top:20px;font-size:11px;color:var(--muted)}.training-xp b{color:var(--gold)} .training-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:14px}.training-stat{padding:9px 5px;text-align:center;background:#171d29;border-radius:8px}.training-stat b{display:block;font-size:17px}.training-stat small{color:var(--muted);font-size:9px} .training-drill-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 16px} .training-drill{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:15px;border:1px solid var(--line);border-radius:10px;background:#151b27;color:var(--text);cursor:pointer;min-height:125px} .training-drill b{font-size:12px}.training-drill small{color:var(--muted);line-height:1.45}.training-drill span{margin-top:auto;color:var(--gold);font-size:11px;font-weight:900} .training-drill.selected{border-color:var(--gold);box-shadow:0 0 0 1px #f5b82e33;background:#211f1a} .training-drills>#startTraining{width:100%}.training-feedback{padding:12px;border-radius:8px;background:#171d29;color:var(--muted);font-size:12px;min-height:42px} @media(max-width:720px){.training-layout{grid-template-columns:1fr}.training-drill-grid{grid-template-columns:1fr 1fr}.virtual-phone-open{font-size:10px;padding:8px}.training-profile{padding:15px}} @media(max-width:420px){.training-drill-grid{grid-template-columns:1fr}.phone-quick-grid b{font-size:15px}} .shop-cart-actions{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}.shop-cart-actions .btn{min-width:0}.training-pop{animation:nac-training-pop .45s ease-out}@keyframes nac-training-pop{0%{transform:scale(.96);filter:brightness(1)}45%{transform:scale(1.04);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}} /* v35: timed interactive training ring */ .practice-ring{margin:16px 0;padding:13px;border:1px solid #344158;border-radius:12px;background:linear-gradient(160deg,#121b2a,#090d15)} .practice-ring-top,.practice-hud{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;font-weight:900;letter-spacing:.06em} .practice-ring-top{color:var(--muted);margin-bottom:9px}.practice-ring-top b{color:var(--gold);font-size:14px;font-variant-numeric:tabular-nums} .practice-scene{height:190px;position:relative;overflow:hidden;border:1px solid #374258;border-radius:9px;background:radial-gradient(ellipse at 50% 85%,#28344a 0,transparent 50%),linear-gradient(#121b2b 0 66%,#1b2432 66% 70%,#101621 70%);touch-action:manipulation} .practice-scene:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.5%,#8c9bb322 50%,transparent 50.5%),repeating-linear-gradient(0deg,transparent 0 31px,#9aabc10b 32px);pointer-events:none} .practice-fighter{position:absolute;bottom:14px;left:13%;font-size:44px;filter:drop-shadow(0 6px 5px #0008);animation:nac-practice-bob 1.1s ease-in-out infinite alternate} /* v146: practice fighter uses a transparent RGBA sprite; never paint a card/background behind the sprite. */ .practice-fighter img{display:block;height:128px;max-width:100px;width:auto;object-fit:contain;object-position:center bottom;image-rendering:pixelated;background:transparent;filter:none;} .practice-dummy{position:absolute;left:68%;top:22%;z-index:2;width:64px;height:64px;border:2px solid #f5b82e;border-radius:50%;background:#31271a;color:#ffe7a0;font-size:26px;box-shadow:0 0 0 5px #f5b82e22,0 0 22px #f5b82e55;cursor:crosshair;touch-action:manipulation;transition:left .13s linear,top .13s linear,transform .1s} .practice-dummy:active{transform:scale(.88)}.practice-dummy small{display:block;font-size:7px;font-weight:900;letter-spacing:.05em} .practice-hud{margin-top:11px;color:var(--muted)}.practice-hud b{color:var(--text);font-size:13px;margin-left:4px} .practice-help{font-size:10px;line-height:1.5;margin:10px 0 0} .practice-success{animation:nac-practice-shake .15s ease-out} .practice-hit{position:absolute;z-index:4;left:50%;top:25%;opacity:0;transform:translate(-50%,10px) scale(.6);font-weight:1000;color:#ffe27a;text-shadow:0 2px 0 #9b4c1a,0 0 15px #ffb52c;pointer-events:none} .practice-hit-show{animation:nac-practice-hit .45s ease-out} @keyframes nac-practice-bob{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-5px) rotate(3deg)}} @keyframes nac-practice-shake{0%{filter:brightness(1)}50%{filter:brightness(1.5)}100%{filter:brightness(1)}} @keyframes nac-practice-hit{0%{opacity:1;transform:translate(-50%,10px) scale(.6)}25%{opacity:1;transform:translate(-50%,-4px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-25px) scale(1)}} @media(prefers-reduced-motion:reduce){.practice-fighter{animation:none}.practice-success{animation:none}.practice-hit-show{animation-duration:.01ms}} /* v37: bigger fighters, circular roster portraits and a longer timed round */ .fighter-avatar{border-radius:50%!important;width:86px;height:86px;overflow:hidden;box-shadow:0 0 0 3px #f5b82e22,0 8px 18px #0008} .fighter-avatar img{border-radius:50%;object-fit:cover;transform:scale(1.08)} .fighter-card{min-height:148px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px} .fighter-card strong,.fighter-card small{text-align:center} .fighter-card .fighter-lock{border-radius:999px} .arena canvas{image-rendering:auto;transform-origin:center bottom} .match-timer{font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums} @media(max-width:700px){.fighter-avatar{width:64px;height:64px}.fighter-card{min-height:126px}} /* v41 circular directional controller + combo-chain feedback */ .nac-combo-chain{position:absolute;z-index:8;top:17%;left:50%;transform:translate(-50%,-8px) scale(.8);opacity:0;pointer-events:none;font-weight:1000;font-style:italic;letter-spacing:.08em;font-size:clamp(16px,3vw,28px);color:#ffe16a;-webkit-text-stroke:.35px #5b2b08;text-shadow:0 2px 0 #7b3b0c,0 0 16px #ff9d28;text-align:center;white-space:nowrap} .nac-combo-chain.combo-pop{animation:nacComboPop .9s cubic-bezier(.2,.8,.2,1) both} @keyframes nacComboPop{0%{opacity:0;transform:translate(-50%,12px) scale(.55)}22%{opacity:1;transform:translate(-50%,0) scale(1.14)}42%{transform:translate(-50%,0) scale(1)}82%{opacity:1}100%{opacity:0;transform:translate(-50%,-16px) scale(1.04)}} /* v42: horizontal fighter carousel, shop category filters, and reliable modal layouts */ .fighter-grid{display:flex!important;gap:12px;overflow-x:auto;overflow-y:hidden;padding:8px 4px 16px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--gold) #141b27;-webkit-overflow-scrolling:touch;align-items:stretch} .fighter-grid .fighter-card{flex:0 0 clamp(150px,19vw,205px);width:clamp(150px,19vw,205px);scroll-snap-align:start;min-height:240px;display:flex;flex-direction:column;gap:7px} .fighter-grid .fighter-avatar{width:100%;height:118px;border-radius:10px;overflow:hidden} .fighter-grid .fighter-avatar img{width:100%;height:100%;object-fit:contain} .fighter-grid .fighter-card strong,.fighter-grid .fighter-card small{position:relative;z-index:1} .shop-filter-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px} .shop-filter-row .active{border-color:var(--gold);color:var(--gold);background:#f5b82e18} .shop-item .eyebrow{line-height:1.4} #practiceScene{position:relative;overflow:hidden;min-height:180px} .practice-dummy{position:absolute;left:58%;top:42%;transition:left .16s ease,top .16s ease,transform .12s ease;touch-action:manipulation} .practice-dummy:active{transform:scale(.94)} .virtual-phone{overscroll-behavior:contain} .virtual-phone button{cursor:pointer} @media(max-width:700px){ .fighter-grid .fighter-card{flex-basis:148px;width:148px;min-height:218px;padding:9px} .fighter-grid .fighter-avatar{height:96px} .shop-filter-row{gap:5px} .shop-filter-row .btn{font-size:9px;padding:7px 8px} .fighter-layout{display:block} .fighter-details{margin-top:12px} } /* v43: clear fighter confirmation and explicit defeat choices */ .fighter-confirm-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:18px auto 8px} #chooseUnlockedFighter{min-width:min(100%,260px)} .result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} #resultEndGame{background:#2b1017;border:1px solid #9e394b;color:#ffe9ed} #resultEndGame:hover{background:#46131e} @media(max-width:520px){.fighter-confirm-row>*{width:100%}.result-actions>*{flex:1 1 100%;min-height:42px}} /* v44: stronger impact/recovery language without replacing original fighter sprites. */ .nac-hit-reaction{animation:nac-hit-recover .24s cubic-bezier(.2,.8,.3,1) both!important} .nac-heavy-impact{filter:brightness(1.8) saturate(1.35) drop-shadow(0 0 11px #ffb84d)!important} .nac-heavy-impact.nac-hit-reaction{animation:nac-heavy-recover .28s cubic-bezier(.15,.85,.25,1) both!important} @keyframes nac-hit-recover{ 0%{transform:translateX(0) rotate(0) scale(1)} 22%{transform:translateX(-6px) rotate(-2deg) scale(1.025)} 58%{transform:translateX(4px) rotate(1deg) scale(.985)} 100%{transform:translateX(0) rotate(0) scale(1)} } @keyframes nac-heavy-recover{ 0%{transform:translateX(0) rotate(0) scale(1)} 20%{transform:translateX(-10px) rotate(-4deg) scale(1.04)} 55%{transform:translateX(6px) rotate(2deg) scale(.97)} 100%{transform:translateX(0) rotate(0) scale(1)} } @media(prefers-reduced-motion:reduce){.nac-heavy-impact,.nac-hit-reaction{animation:none!important}} /* v45: compact pause control aligned to the match HUD. */ #pauseMatch{ top:12px!important; right:12px!important; bottom:auto!important; min-width:70px!important; width:70px; min-height:32px!important; height:32px; padding:4px 7px!important; gap:4px; border-width:1px!important; border-radius:8px!important; font-size:10px!important; line-height:1!important; letter-spacing:.035em!important; box-shadow:0 3px 12px #0008!important; } @media(max-width:700px){ #pauseMatch{ top:8px!important; right:8px!important; min-width:64px!important; width:64px; min-height:30px!important; height:30px; padding:3px 5px!important; font-size:9px!important; } } /* v45: short knockdown-and-recovery animation for clean heavy impacts. */ .nac-knockdown-recovery{ transform-origin:50% 90%; animation:nac-knockdown-recover .42s cubic-bezier(.2,.7,.25,1) both!important; } @keyframes nac-knockdown-recover{ 0%{transform:translateY(0) rotate(0) scale(1)} 22%{transform:translateY(7px) rotate(13deg) scale(1.02)} 48%{transform:translateY(4px) rotate(9deg) scale(.98)} 76%{transform:translateY(-2px) rotate(-3deg) scale(1.01)} 100%{transform:translateY(0) rotate(0) scale(1)} } @media(prefers-reduced-motion:reduce){.nac-knockdown-recovery{animation:none!important}} /* v46: combo counter is compact, high-contrast, and arena anchored. */ #arena{position:relative} .nac-combo-counter{ position:absolute;z-index:30;left:50%;top:18%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:2px; padding:7px 14px;border:1px solid #ffd15c;border-radius:10px; color:#fff7d2;background:linear-gradient(135deg,#301500ed,#8c2700e8); box-shadow:0 5px 22px #0009,0 0 16px #ff9d2440; font-family:'Barlow Condensed',Impact,sans-serif;text-align:center; white-space:nowrap;pointer-events:none;opacity:1; } .nac-combo-counter[hidden]{display:none!important} .nac-combo-counter strong{font-size:clamp(20px,3.3vw,32px);line-height:1;letter-spacing:.06em;text-shadow:0 2px 0 #5b1d00} .nac-combo-counter span{font:900 10px/1.2 system-ui,sans-serif;letter-spacing:.12em;color:#ffe09a} .nac-combo-pop{animation:nac-combo-pop .32s cubic-bezier(.2,.9,.3,1.25) both} @keyframes nac-combo-pop{ 0%{opacity:0;transform:translateX(-50%) scale(.62) rotate(-3deg)} 72%{opacity:1;transform:translateX(-50%) scale(1.08) rotate(1deg)} 100%{opacity:1;transform:translateX(-50%) scale(1) rotate(0)} } @media(max-width:600px){.nac-combo-counter{top:15%;padding:6px 10px}.nac-combo-counter span{font-size:9px}} @media(prefers-reduced-motion:reduce){.nac-combo-pop{animation:none!important}} /* v48: campaign cards clearly show objectives and stage rewards. */ .campaign-objective{ margin-top:8px;padding-top:7px;border-top:1px solid #ffffff18; color:#d6dce7;font-size:11px;line-height:1.35;text-align:left; } .campaign-reward{ margin-top:7px;color:#ffd46a;font-size:10px;font-weight:1000; letter-spacing:.06em;text-align:left; } .stage-card.current .campaign-objective{color:#fff1bc} .stage-card.locked .campaign-objective,.stage-card.locked .campaign-reward{opacity:.55} /* v49 hotfix: arena decorations are inserted after the fight canvas. Keep the canvas above the scenery layer so fighter sprites cannot be covered. */ #arena canvas{ position:relative!important; z-index:2!important; display:block!important; } #arena .arena-environment{ z-index:1!important; pointer-events:none!important; } #arena .arena-environment~canvas{ position:relative!important; z-index:2!important; } #arena .arena-billboard{ z-index:4!important; } /* v50: advert submission eligibility and functional phone app launcher. */ .advert-session-gate{ display:flex;flex-direction:column;gap:5px;margin:0 0 12px;padding:12px 14px; border:1px solid #8b6727;border-radius:10px;background:#211a0b;color:#ffe3a0; } .advert-session-gate strong{font-size:12px;letter-spacing:.06em} .advert-session-gate span{font-size:12px;line-height:1.4;color:#d7c9a4} #arenaAdForm button:disabled,#arenaAdForm input:disabled{opacity:.45;cursor:not-allowed} .phone-app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0} .phone-app{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:70px;padding:9px 4px;border:1px solid #344156;border-radius:12px;background:#172235;color:#e9f0ff} .phone-app span{font-size:22px;line-height:1} .phone-app b{font-size:10px;letter-spacing:.03em} .phone-app.active{border-color:#f5b82e;background:#2a2416;color:#ffe19a;box-shadow:0 0 0 1px #f5b82e33} .phone-app-panel{padding:12px;border:1px solid #303b4f;border-radius:12px;background:#090e18} .phone-app-panel h4{margin:0 0 10px;color:#ffd36a;font-size:13px;letter-spacing:.08em} .phone-app-panel p{font-size:12px;line-height:1.45;color:#b9c4d5} .phone-app-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .phone-app-stats>div{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:8px;background:#151f2f;min-width:0} .phone-app-stats small,.phone-bank-balance small,.phone-winpay-balance small{font-size:9px;letter-spacing:.08em;color:#9ba9bf} .phone-app-stats b{font-size:12px;overflow-wrap:anywhere;color:#f1f5fb} .phone-bank-balance,.phone-winpay-balance{display:flex;flex-direction:column;gap:5px;padding:12px;border-radius:10px;background:linear-gradient(135deg,#153b2d,#101d22);margin:8px 0} .phone-bank-balance strong,.phone-winpay-balance strong{font-size:23px;color:#a9f0c9} .phone-app-label{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:900;color:#aebbd0;margin:10px 0} .phone-app-label input{width:100%;padding:10px;border-radius:8px;border:1px solid #3b475a;background:#070b12;color:#fff} .phone-app-panel .btn{margin:5px 5px 0 0;font-size:10px} .phone-message{padding:9px 0;border-bottom:1px solid #293346} .phone-message:last-child{border-bottom:0} .phone-message b,.phone-message strong{display:block;font-size:11px;color:#ffe2a0} .phone-message strong{margin-top:3px;color:#fff} .phone-message p{margin:5px 0 0} .phone-app-error{color:#ff9d9d!important} @media(max-width:390px){.phone-app-grid{gap:5px}.phone-app{min-height:64px}.phone-app span{font-size:20px}} /* v51: replace storyboard with the supplied game-loading intro video */ .intro-video-frame{width:min(1120px,100%);border:1px solid #f5b82e88;background:#080a10;box-shadow:0 24px 100px #000d;border-radius:16px;padding:clamp(12px,2vw,22px);overflow:hidden}.game-intro-video{display:block;width:100%;max-height:min(72vh,720px);aspect-ratio:16/9;object-fit:contain;background:#000;border-radius:10px;margin-top:14px}.intro-video-hint{margin:10px 2px 0;color:#b8c0cc;font-size:12px;line-height:1.5}.intro-video-frame .story-topline{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--gold,#f5b82e);font-size:10px;font-weight:900;letter-spacing:.12em}.origin-story{z-index:10000} /* v52: post-match highlights */ .result-highlights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 20px;text-align:left} .result-highlights>div{min-width:0;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.045)} .result-highlights small{display:block;font-size:.68rem;letter-spacing:.1em;opacity:.7;margin-bottom:6px} .result-highlights b{display:block;font-size:1.05rem;overflow-wrap:anywhere;color:var(--gold,#f3c969)} @media(max-width:520px){.result-highlights{gap:7px}.result-highlights>div{padding:10px}.result-highlights b{font-size:.92rem}} /* v53 Fighter Progression */ .progression-floating-btn{position:fixed;right:18px;bottom:18px;z-index:30;border:1px solid #e4bd60;border-radius:999px;padding:11px 16px;background:#19130c;color:#f7d77f;font-weight:800;box-shadow:0 6px 24px #0008;cursor:pointer} .progression-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.82);backdrop-filter:blur(7px)} .progression-overlay[hidden]{display:none} .progression-panel{position:relative;width:min(480px,100%);padding:28px;border:1px solid rgba(247,215,127,.4);border-radius:20px;background:linear-gradient(145deg,#20180e,#090b10 72%);color:#f8f3e7;box-shadow:0 20px 80px #000b} .progression-close{position:absolute;top:12px;right:15px;border:0;background:transparent;color:#fff;font-size:30px;cursor:pointer} .progression-kicker{font-size:11px;letter-spacing:.2em;color:#e5c36b;font-weight:900} .progression-panel h2{font-size:clamp(25px,5vw,34px);margin:4px 0 8px} .progression-intro,.progression-xp-text,.progression-notice{color:#c5c0b5;font-size:13px} .progression-identity{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:24px;font-weight:800} .progression-identity strong{color:#f7d77f} .progression-xp-track{height:12px;background:#35302a;border-radius:999px;overflow:hidden;margin-top:12px} .progression-xp-track div{height:100%;width:0;background:linear-gradient(90deg,#b47d25,#ffe69a);transition:width .25s} .progression-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0} .progression-stats>div{padding:14px 8px;text-align:center;border:1px solid #ffffff1c;border-radius:12px;background:#ffffff08} .progression-stats small{display:block;font-size:10px;letter-spacing:.12em;color:#c5c0b5} .progression-stats b{display:block;font-size:24px;color:#f7d77f;margin-top:5px} .progression-notice{min-height:18px} .progression-train-btn{width:100%;padding:13px 16px;border:0;border-radius:12px;background:#e4bd60;color:#17120a;font-weight:900;cursor:pointer} .progression-train-btn:disabled{opacity:.45;cursor:not-allowed} @media(max-width:520px){.progression-panel{padding:22px}.progression-floating-btn{right:10px;bottom:10px;font-size:12px;padding:10px 12px}} /* v56 bug fixes: visible roster cards and reliable intro/phone layers */ .fighter-grid{min-height:120px;position:relative;z-index:1} .fighter-card{display:block;visibility:visible;opacity:1;cursor:pointer;color:var(--text,#f4f6fb);width:100%} .fighter-avatar img,.detail-avatar img{display:block;width:100%;height:100%;object-fit:contain;position:relative;z-index:1} .portrait-fallback{display:grid;place-items:center;position:absolute;inset:0;font-weight:900;font-size:24px;color:#fff;background:linear-gradient(135deg,var(--fighter-color,#f5b82e),#101722)} .fighter-avatar,.detail-avatar{position:relative;overflow:hidden} .origin-story:not(.hidden){display:grid!important;visibility:visible!important;opacity:1!important} .virtual-phone-backdrop:not(.hidden){display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important} /* v57: smaller, non-obstructive rotating sponsor placement */ .arena-billboard.billboard-rotating{top:8px;left:50%;right:auto;transform:translateX(-50%);width:clamp(112px,17%,190px);min-height:30px;max-height:54px;padding:5px 8px;gap:2px;border-radius:5px;opacity:.76;z-index:3;pointer-events:auto;animation:nacAdPulse 18s ease-in-out infinite} .arena-billboard.billboard-rotating span{font-size:6px;letter-spacing:1px} .arena-billboard.billboard-rotating strong{font-size:clamp(9px,1.15vw,12px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .arena-billboard.billboard-rotating small{font-size:8px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} @keyframes nacAdPulse{0%,8%{opacity:.72;visibility:visible}12%,78%{opacity:0;visibility:hidden}82%,92%{opacity:.72;visibility:visible}96%,100%{opacity:0;visibility:hidden}} @media(max-width:600px){.arena-billboard.billboard-rotating{top:5px;width:clamp(100px,30%,145px);padding:4px 6px}.arena-billboard.billboard-rotating small{font-size:7px}} @media(prefers-reduced-motion:reduce){.arena-billboard.billboard-rotating{animation:none;opacity:.55}} /* v57: make fighter portraits feel like deliberate character cards */ .fighter-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .fighter-card:hover,.fighter-card:focus-visible{transform:translateY(-3px);border-color:var(--fighter-color,#f5b82e);box-shadow:0 8px 22px #0006} .fighter-avatar img{filter:drop-shadow(0 5px 5px #0008)} .detail-avatar{background:radial-gradient(circle at 50% 25%,var(--fighter-color,#f5b82e)55,#101722 100%)} /* v58: richer arena identity, depth, lighting and environmental motion. Decorations remain behind the fight canvas and never intercept input. */ #arena{isolation:isolate;overflow:hidden;background-color:#111827} #arena .arena-environment{ position:absolute!important;inset:0!important;overflow:hidden!important; opacity:1!important;contain:layout paint;z-index:1!important; background: linear-gradient(180deg,rgba(4,8,16,.08) 0%,rgba(5,8,15,.08) 48%,rgba(2,4,8,.58) 100%), radial-gradient(ellipse at 50% 10%,rgba(255,225,145,.16),transparent 54%); } #arena .arena-environment:before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.9; background: linear-gradient(180deg,transparent 0 57%,rgba(8,11,16,.10) 57% 59%,rgba(4,7,11,.38) 100%), repeating-linear-gradient(90deg,transparent 0 8.5%,rgba(255,255,255,.025) 8.6% 8.8%,transparent 8.9% 17%); animation:nacEnvParallax 24s linear infinite; } #arena .arena-environment:after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 18% 82%,rgba(0,0,0,.28)), radial-gradient(ellipse at 50% 100%,transparent 25%,rgba(0,0,0,.32) 100%); } #arena .arena-environment .env-light{ position:absolute;display:block;width:32%;height:55%;top:-8%;border-radius:50%; filter:blur(28px);opacity:.28;mix-blend-mode:screen;pointer-events:none; animation:nacArenaLight 7s ease-in-out infinite alternate; } #arena .arena-environment .env-light-one{left:8%;background:#ffd06c} #arena .arena-environment .env-light-two{right:8%;background:#66c8ff;animation-delay:-3.5s} #arena .arena-environment .env-particle{ position:absolute;display:block;width:3px;height:3px;border-radius:50%; background:#ffe6a2;box-shadow:0 0 9px 2px #ffc45b88;opacity:.55; animation:nacArenaDust 8s linear infinite; } #arena .arena-environment .env-particle-one{left:18%;bottom:12%} #arena .arena-environment .env-particle-two{left:71%;bottom:18%;animation-delay:-3s} #arena .arena-environment .env-particle-three{left:49%;bottom:9%;animation-delay:-5s} #arena .arena-environment .env-caption{ position:absolute;left:14px;bottom:12px;z-index:1;max-width:55%; color:#fff3ce;font-size:clamp(8px,.9vw,11px);font-weight:1000;letter-spacing:.18em; text-shadow:0 2px 8px #000,0 0 15px #000;opacity:.72; border-left:2px solid #f4c35f;padding:5px 8px;text-transform:uppercase; background:linear-gradient(90deg,#080c12a8,transparent); } /* Lagos traffic: streetlamp beams and flowing lane reflections. */ #arena .env-traffic{ background-image: linear-gradient(180deg,rgba(13,28,48,.08),rgba(4,8,15,.22)), repeating-linear-gradient(90deg,transparent 0 15%,rgba(255,198,89,.09) 15.2% 15.5%,transparent 15.7% 31%); } #arena .env-traffic:before{ background: linear-gradient(115deg,transparent 0 20%,rgba(255,190,75,.13) 20.5%,transparent 26%), linear-gradient(245deg,transparent 0 68%,rgba(80,174,255,.14) 68.5%,transparent 74%), repeating-linear-gradient(90deg,transparent 0 11%,rgba(255,255,255,.055) 11.2% 11.5%,transparent 11.8% 22%); background-size:100% 100%,100% 100%,220% 100%; } /* Markets: warm awnings, stall stripes and busy colour. */ #arena .env-market{ background-image:linear-gradient(180deg,rgba(107,48,16,.18),rgba(14,8,5,.2)), repeating-linear-gradient(90deg,rgba(244,169,74,.10) 0 5%,transparent 5% 10%,rgba(42,123,83,.10) 10% 15%,transparent 15% 20%); } #arena .env-market:before{ background:repeating-linear-gradient(90deg,transparent 0 7%,rgba(238,177,95,.17) 7.2% 7.8%,transparent 8% 14%), linear-gradient(180deg,rgba(255,179,83,.18),transparent 38%,rgba(9,7,5,.26)); } /* Stadiums: floodlight wash and subtle grandstand bands. */ #arena .env-stadium{ background-image:radial-gradient(ellipse at 18% 8%,rgba(255,255,218,.27),transparent 22%), radial-gradient(ellipse at 82% 8%,rgba(255,255,218,.25),transparent 22%), linear-gradient(180deg,rgba(31,64,91,.1),rgba(6,16,21,.25)); } #arena .env-stadium:before{ background:repeating-linear-gradient(180deg,transparent 0 7%,rgba(255,255,255,.06) 7.3% 8%,transparent 8.3% 12%), linear-gradient(180deg,transparent 0 38%,rgba(3,7,12,.25) 39% 65%,transparent 66%); } /* Waterfront: blue horizon and reflected light. */ #arena .env-water{ background-image:linear-gradient(180deg,rgba(34,122,171,.20),rgba(5,19,34,.1) 55%,rgba(3,8,14,.38)), repeating-linear-gradient(0deg,transparent 0 10%,rgba(106,211,255,.045) 10.2% 10.6%,transparent 10.8% 18%); } #arena .env-water .env-light-one{background:#51d7ff} #arena .env-water .env-light-two{background:#4a87ff} #arena .env-water:before{ background:repeating-linear-gradient(0deg,transparent 0 5%,rgba(108,208,255,.07) 5.2% 5.7%,transparent 6% 11%), linear-gradient(180deg,transparent 0 43%,rgba(4,17,29,.3) 44% 100%); } /* Festival / nightlife: vivid colour pools and neon. */ #arena .env-festival{ background-image:radial-gradient(ellipse at 20% 18%,rgba(255,51,147,.18),transparent 34%), radial-gradient(ellipse at 80% 16%,rgba(71,122,255,.2),transparent 35%), linear-gradient(180deg,rgba(25,8,42,.05),rgba(5,4,13,.34)); } #arena .env-festival .env-light-one{background:#ff3caa;opacity:.4} #arena .env-festival .env-light-two{background:#6265ff;opacity:.42} #arena .env-festival:before{ background:repeating-linear-gradient(90deg,transparent 0 12%,rgba(255,64,178,.09) 12.2% 12.7%,transparent 13% 24%), linear-gradient(180deg,transparent 0 50%,rgba(7,3,15,.35) 100%); } /* Industrial arenas: steel shadows, ember flecks and furnace glow. */ #arena .env-industrial{ background-image:radial-gradient(ellipse at 78% 48%,rgba(255,106,34,.22),transparent 32%), linear-gradient(180deg,rgba(40,49,58,.12),rgba(4,7,10,.42)); } #arena .env-industrial .env-light-one{background:#ff7b35} #arena .env-industrial .env-light-two{background:#ffca72} #arena .env-industrial .env-particle{background:#ff914d;box-shadow:0 0 10px 2px #ff6b2b88} #arena .env-industrial:before{ background:repeating-linear-gradient(90deg,transparent 0 18%,rgba(187,205,216,.07) 18.2% 19%,transparent 19.2% 32%), linear-gradient(180deg,transparent 0 35%,rgba(0,0,0,.25) 36% 100%); } /* Rock, desert and highland arenas: dust haze and warm horizon. */ #arena .env-terrain{ background-image:radial-gradient(ellipse at 50% 25%,rgba(242,177,99,.22),transparent 54%), linear-gradient(180deg,rgba(107,70,42,.12),rgba(8,8,10,.35)); } #arena .env-terrain .env-light-one,#arena .env-terrain .env-light-two{background:#f6bb78} #arena .env-terrain:before{ background:linear-gradient(165deg,transparent 0 43%,rgba(218,156,90,.11) 43.5% 49%,transparent 49.5%), linear-gradient(195deg,transparent 0 51%,rgba(10,9,10,.25) 51.5% 100%); } /* Default urban arenas: richer night-city depth and warm shopfront glow. */ #arena .env-urban{ background-image:radial-gradient(ellipse at 15% 35%,rgba(255,190,78,.15),transparent 34%), radial-gradient(ellipse at 88% 28%,rgba(77,169,255,.14),transparent 32%), linear-gradient(180deg,rgba(15,27,39,.05),rgba(3,6,11,.36)); } #arena .env-urban:before{ background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(255,220,145,.055) 9.2% 10.2%,transparent 10.4% 18%), linear-gradient(180deg,transparent 0 58%,rgba(0,0,0,.22) 59% 100%); } /* Selection cards get a more intentional portrait frame and fighter-colour accent. */ .fighter-grid .fighter-card{ position:relative;isolation:isolate;overflow:hidden; border:1px solid color-mix(in srgb,var(--fighter-color,#f5b82e) 32%,#273143); background:linear-gradient(155deg,#1b2433 0%,#0b1019 68%,#070a10 100%); box-shadow:inset 0 1px 0 #ffffff0c,0 9px 22px #0004; } .fighter-grid .fighter-card:before{ content:"";position:absolute;inset:0 0 auto;height:3px;z-index:2; background:linear-gradient(90deg,transparent,var(--fighter-color,#f5b82e),transparent);opacity:.9; } .fighter-grid .fighter-avatar{ position:relative;isolation:isolate; background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--fighter-color,#f5b82e) 30%,#1c2637),#080c13 76%); border:1px solid #ffffff12; box-shadow:inset 0 0 25px #0007; } .fighter-grid .fighter-avatar:after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:2; background:linear-gradient(180deg,transparent 60%,rgba(5,8,13,.34)); } .fighter-grid .fighter-card:hover .fighter-avatar, .fighter-grid .fighter-card:focus-visible .fighter-avatar{ border-color:color-mix(in srgb,var(--fighter-color,#f5b82e) 60%,#fff); } .fighter-grid .fighter-card strong{letter-spacing:.015em} @keyframes nacArenaLight{from{transform:translate3d(0,0,0) scale(.92);opacity:.18}to{transform:translate3d(8%,5%,0) scale(1.12);opacity:.38}} @keyframes nacArenaDust{0%{transform:translate3d(0,12px,0);opacity:0}20%{opacity:.55}80%{opacity:.3}100%{transform:translate3d(18px,-65px,0);opacity:0}} @keyframes nacEnvParallax{from{background-position:0 0,0 0}to{background-position:0 0,100% 0}} @media(prefers-reduced-motion:reduce){ #arena .arena-environment:before,#arena .arena-environment .env-light,#arena .arena-environment .env-particle{animation:none!important} } @media(max-width:600px){ #arena .arena-environment .env-caption{left:7px;bottom:7px;letter-spacing:.1em;font-size:8px} #arena .arena-environment .env-light{filter:blur(20px)} } /* v59: fighter identity and combat animation polish. CSS-only enhancement layer; existing game mechanics, roster data, and input bindings remain unchanged. */ :root{ --nac-hit-flash:rgba(255,244,204,.82); --nac-combat-shadow:rgba(0,0,0,.42); } .fighter-grid .fighter-card{ --fighter-color:var(--fighter-color,#f5b82e); transform:translateZ(0); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease; } .fighter-grid .fighter-card:hover, .fighter-grid .fighter-card:focus-visible{ transform:translateY(-3px) scale(1.012); box-shadow:0 13px 28px #0007,0 0 0 1px color-mix(in srgb,var(--fighter-color) 40%,transparent); } .fighter-grid .fighter-card:focus-visible{ outline:2px solid color-mix(in srgb,var(--fighter-color) 78%,white); outline-offset:2px; } .fighter-grid .fighter-card img, .fighter-grid .fighter-avatar img{ transform-origin:50% 88%; transition:transform .22s ease,filter .22s ease; filter:drop-shadow(0 7px 6px #0006) saturate(1.04); } .fighter-grid .fighter-card:hover img, .fighter-grid .fighter-card:focus-visible img{ transform:translateY(-2px) scale(1.035); filter:drop-shadow(0 10px 8px #0008) saturate(1.12) contrast(1.025); } .fighter-grid .fighter-card .fighter-name, .fighter-grid .fighter-card strong{ text-shadow:0 2px 8px #000b; } /* Respect common combat state classes when present; no JS class assumptions required. */ #arena .fighter.hit,#arena .player.hit,#arena .opponent.hit, #arena .fighter.is-hit,#arena .player.is-hit,#arena .opponent.is-hit, #arena .fighter.damaged,#arena .player.damaged,#arena .opponent.damaged{ animation:nacHitReact .19s steps(2,end)!important; filter:brightness(1.7) saturate(1.22); } #arena .fighter.attacking,#arena .player.attacking,#arena .opponent.attacking, #arena .fighter.is-attacking,#arena .player.is-attacking,#arena .opponent.is-attacking{ filter:drop-shadow(0 0 7px #ffd56a55); } #arena .fighter.winning,#arena .player.winning,#arena .opponent.winning, #arena .fighter.victory,#arena .player.victory,#arena .opponent.victory{ animation:nacVictoryPose .62s ease-in-out infinite alternate; filter:drop-shadow(0 0 10px #f9c95a77); } #arena .fighter.defeated,#arena .player.defeated,#arena .opponent.defeated, #arena .fighter.ko,#arena .player.ko,#arena .opponent.ko{ filter:grayscale(.65) brightness(.72); } /* If the game uses a combat canvas, provide a more polished presentation without changing its dimensions or pointer interaction. */ #arena canvas{ filter:drop-shadow(0 3px 3px var(--nac-combat-shadow)); } @keyframes nacHitReact{ 0%{transform:translateX(0);filter:brightness(1.8) saturate(1.25)} 25%{transform:translateX(-3px)} 50%{transform:translateX(3px);filter:brightness(1.35)} 100%{transform:translateX(0);filter:none} } @keyframes nacVictoryPose{ from{transform:translateY(0) scale(1);filter:drop-shadow(0 0 4px #f9c95a44)} to{transform:translateY(-3px) scale(1.012);filter:drop-shadow(0 0 12px #f9c95a88)} } @media(prefers-reduced-motion:reduce){ .fighter-grid .fighter-card,.fighter-grid .fighter-card img,.fighter-grid .fighter-avatar img{ transition:none!important } .fighter-grid .fighter-card:hover,.fighter-grid .fighter-card:focus-visible{transform:none} #arena .fighter.hit,#arena .player.hit,#arena .opponent.hit, #arena .fighter.is-hit,#arena .player.is-hit,#arena .opponent.is-hit, #arena .fighter.damaged,#arena .player.damaged,#arena .opponent.damaged, #arena .fighter.winning,#arena .player.winning,#arena .opponent.winning, #arena .fighter.victory,#arena .player.victory,#arena .opponent.victory{animation:none!important} } /* v60: phone touch reliability and lightweight small-screen presentation. */ #virtualPhone{touch-action:manipulation} #virtualPhone .phone-app,#virtualPhone button,#openVirtualPhone,#closeVirtualPhone{ touch-action:manipulation;-webkit-tap-highlight-color:transparent } #virtualPhone .phone-app:focus-visible,#virtualPhone button:focus-visible{ outline:2px solid #f5c65b;outline-offset:2px } #virtualPhone .phone-app-panel{overflow-wrap:anywhere} @media(max-width:600px){ .virtual-phone-backdrop{backdrop-filter:none;-webkit-backdrop-filter:none;padding:8px} .virtual-phone{width:min(100%,390px);max-height:92dvh;padding:18px 12px 14px;border-radius:24px} .phone-notch{margin-top:-18px} .phone-app-grid{gap:6px} .phone-app{min-height:62px} } @media(prefers-reduced-motion:reduce){ #virtualPhone *{scroll-behavior:auto!important;transition:none!important} } /* v61: clearer phone transaction feedback and stable tap targets. */ .phone-cart-feedback{font-size:11px;line-height:1.45;margin:8px 0;padding:8px 9px;border-radius:8px;background:#141d2b;color:#dce5f3} #virtualPhone .phone-app[aria-pressed="true"]{box-shadow:inset 0 0 0 1px #f5b82e} #virtualPhone .phone-app-error{display:block;padding:8px 9px;margin:8px 0;border-radius:8px;background:#341719;border:1px solid #6b3035} #virtualPhone .phone-app-panel{overscroll-behavior:contain} /* v62 responsive header, roster tabs, and larger fighter cards */ .topbar{gap:clamp(8px,1.4vw,18px);align-items:center;min-width:0}.brand{flex:0 1 auto;min-width:0;max-width:100%;gap:10px;white-space:normal}.brand>span:last-child{min-width:0;overflow:visible;line-height:1.05}.brand>span:last-child b{display:inline}.brand small{display:block;white-space:normal;line-height:1.2}.brand-mark{flex:0 0 auto}.top-meta{flex:0 0 auto;gap:clamp(5px,.8vw,10px);min-width:0;flex-wrap:wrap;justify-content:flex-end}.top-meta .coin-pill,.top-meta .virtual-phone-open,#soundToggle{flex-shrink:0} @media(max-width:760px){.topbar{align-items:flex-start;flex-wrap:wrap}.brand{flex:1 1 220px}.top-meta{flex:1 1 100%;justify-content:flex-start}} @media(max-width:430px){.brand{font-size:12px;gap:7px}.brand-mark{width:42px;height:42px;min-width:42px}.top-meta{gap:6px}.top-meta .virtual-phone-open{padding-inline:9px}#soundToggle.music-icon-only{width:40px;min-width:40px;height:40px}} .roster-mode-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.roster-mode-tab{min-height:42px;padding:10px 16px;border:1px solid #343d4f;border-radius:10px;background:#111722;color:#cbd3df;font-weight:900;cursor:pointer}.roster-mode-tab.active,.roster-mode-tab[aria-selected="true"]{border-color:var(--gold);background:#f5b82e18;color:#ffe08a;box-shadow:inset 0 0 0 1px #f5b82e22} .fighter-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}.fighter-card{min-width:0;padding:12px 12px 15px;min-height:260px}.fighter-avatar{height:clamp(165px,19vw,235px);min-height:165px;margin-bottom:12px}.fighter-card>strong{font-size:clamp(16px,1.5vw,20px);line-height:1.1}.fighter-card>small{font-size:12px}.fighter-card .tier-chip{margin-top:8px}.fighter-card.fighter-locked{opacity:1;filter:none}.fighter-card.fighter-locked .fighter-avatar img{filter:saturate(.5) brightness(.72)}.fighter-card.fighter-locked .fighter-lock{z-index:2} @media(max-width:520px){.fighter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fighter-card{padding:8px;min-height:220px}.fighter-avatar{height:clamp(145px,48vw,205px);min-height:145px}} /* v63: phone hit-target and panel responsiveness repair */ #virtualPhone{pointer-events:auto;isolation:isolate} #virtualPhone.hidden{display:none!important;pointer-events:none!important} #virtualPhone:not(.hidden){display:flex!important;pointer-events:auto!important;visibility:visible!important;opacity:1!important} #virtualPhone .virtual-phone{pointer-events:auto;position:relative;z-index:1} #virtualPhone .phone-app-grid{position:relative;z-index:2} #virtualPhone .phone-app{position:relative;z-index:3;pointer-events:auto;min-height:68px;user-select:none} #virtualPhone .phone-app-panel{min-height:90px;position:relative;z-index:1} #virtualPhone .phone-top button{min-width:42px;min-height:42px;position:relative;z-index:4} /* v64: compact match history inside the phone Stats app */ .phone-history-heading{margin:18px 0 8px;font-size:11px;letter-spacing:1.2px;color:#f5c95b} .match-history-row{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;align-items:center;margin:8px 0;padding:10px;border:1px solid #30394a;border-radius:10px;background:#101722} .match-history-row strong{font-size:12px;overflow-wrap:anywhere} .match-history-row p{grid-column:2;margin:0;color:#9da8ba;font-size:11px} .match-history-result{font-size:10px;font-weight:900;letter-spacing:.7px} .match-win{color:#70e2a1}.match-loss{color:#ff8c8c} #clearMatchHistory{margin-top:10px;min-height:40px} /* v66: more grounded arena presentation */ .arena-card{position:relative;isolation:isolate;overflow:hidden;background:#0b111a;border:1px solid #344253;box-shadow:0 10px 28px #0006;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease} .arena-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#07101a05 12%,#07101a20 38%,#05080de8 100%),linear-gradient(115deg,#d8e8ff0a,transparent 45%,#ffce6b08)} .arena-card img{display:block;width:100%;height:clamp(210px,23vw,300px);object-fit:cover;filter:saturate(.92) contrast(1.08) brightness(.88);transform:scale(1.01);transition:filter .25s ease,transform .35s ease} .arena-card:hover img,.arena-card:focus-visible img{filter:saturate(1.08) contrast(1.12) brightness(1);transform:scale(1.045)} .arena-card strong,.arena-card .arena-tier,.arena-card .arena-subtitle,.arena-card .arena-feature{position:relative;z-index:1} .arena-card .arena-feature{display:block;margin-top:7px;padding-top:7px;border-top:1px solid #ffffff20;color:#d6c08d;font-size:10px;letter-spacing:.06em} .arena-card .arena-subtitle{display:block;line-height:1.45;color:#c2cbd6} .arena-card.selected{border-color:#edc75b;box-shadow:0 0 0 2px #edc75b55,0 14px 35px #0008} .arena-card.selected::before{content:"SELECTED ARENA";position:absolute;z-index:2;top:12px;right:10px;padding:6px 9px;border-radius:6px;background:#e8bd47;color:#19130a;font-size:9px;font-weight:1000;letter-spacing:.08em} .arena-toolbar{margin-bottom:15px} .arena-filters{gap:8px;flex-wrap:wrap} .arena-filter{border-radius:8px;min-height:36px} @media(max-width:560px){.arena-card img{height:210px}.arena-card .arena-feature{font-size:9px}} /* Fight-stage atmosphere: restrained lighting, floor texture and audience depth. */ #fightScreen .fight-arena,#fightScreen .arena-stage,.fight-scene .arena-backdrop{background-color:#141b25;background-image:radial-gradient(ellipse at 50% 10%,#d6e8ff18,transparent 45%),linear-gradient(180deg,#0a1019 0%,#252d36 42%,#11161c 72%,#080b10 100%)} #fightScreen .fight-floor,.fight-scene .fight-floor{background-image:repeating-linear-gradient(90deg,#ffffff08 0 1px,transparent 1px 72px),linear-gradient(180deg,#303944,#11161d);box-shadow:inset 0 18px 35px #0008} /* v66 fighter mastery phone app */ .nac-mastery-list{display:grid;gap:10px;margin:14px 0} .nac-mastery-card{border:1px solid #354052;border-radius:12px;padding:12px;background:linear-gradient(135deg,#151e2b,#0d121b)} .nac-mastery-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .nac-mastery-top strong{font-size:14px;color:#f3f5f8} .nac-mastery-top b{font-size:10px;letter-spacing:.07em;color:#f0ce70;white-space:nowrap} .nac-mastery-bar{height:7px;border-radius:99px;background:#293241;overflow:hidden;margin:10px 0 7px} .nac-mastery-bar i{display:block;height:100%;background:linear-gradient(90deg,#9c7026,#ffdf78);border-radius:99px} .nac-mastery-card p{margin:0;color:#c0c9d6;font-size:12px} .nac-mastery-card small{display:block;margin-top:5px;color:#9ca8b8;font-size:10px} /* v67: arena-specific ambience driven by the selected arena index */ #arena{background-color:#141a22;background-size:cover;background-position:center;transition:background-color .3s ease,filter .3s ease} #arena::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,#d9e8ff24,transparent 48%),linear-gradient(180deg,#070b1280 0%,transparent 38%,#05070b88 100%)} #arena::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background:repeating-linear-gradient(90deg,transparent 0 8%,#ffffff06 8.1% 8.25%,transparent 8.35% 16%)} #arena .arena-environment{z-index:1} #arena canvas{position:relative;z-index:2} #arena[data-arena-theme="lagos"],#arena[data-arena-theme="traffic"]{background-image:linear-gradient(180deg,#697b8b 0%,#34414b 38%,#20272e 70%,#10151b 100%)} #arena[data-arena-theme="market"]{background-image:linear-gradient(180deg,#b59a6d 0%,#796447 38%,#433a2e 70%,#171613 100%)} #arena[data-arena-theme="neon"]{background-image:radial-gradient(ellipse at 20% 18%,#ed3a9b44,transparent 35%),radial-gradient(ellipse at 80% 20%,#25b8ff44,transparent 38%),linear-gradient(180deg,#18243b,#20202c 62%,#0b0d14)} #arena[data-arena-theme="festival"]{background-image:radial-gradient(ellipse at 20% 10%,#ffc85b66,transparent 22%),radial-gradient(ellipse at 80% 8%,#fa527b55,transparent 25%),linear-gradient(180deg,#4c2a38,#30232e 58%,#0f1018)} #arena[data-arena-theme="stadium"]{background-image:radial-gradient(ellipse at 18% 0%,#fff9d866,transparent 18%),radial-gradient(ellipse at 82% 0%,#dceaff66,transparent 18%),linear-gradient(180deg,#26394a,#273a37 48%,#17201f 72%,#080d12)} #arena[data-arena-theme="coast"]{background-image:radial-gradient(ellipse at 75% 15%,#f9d5a244,transparent 35%),linear-gradient(180deg,#568da5,#315b71 44%,#1b3948 68%,#10191f)} #arena[data-arena-theme="capital"]{background-image:linear-gradient(180deg,#7b8996,#4a5865 40%,#2e3741 72%,#12171d)} #arena[data-arena-theme="royal"]{background-image:radial-gradient(ellipse at 50% 12%,#f2d28d3d,transparent 38%),linear-gradient(180deg,#62513e,#493b31 55%,#171513)} #arena[data-arena-theme="mountain"]{background-image:linear-gradient(180deg,#7e99a6,#536a76 40%,#303c43 72%,#13191d)} #arena[data-arena-theme="urban"]{background-image:linear-gradient(180deg,#637381,#3a4651 38%,#222a32 72%,#0c1117)} #arena[data-arena-theme="stadium"]::after{opacity:.7;background:repeating-linear-gradient(90deg,transparent 0 12%,#ffffff10 12.1% 12.25%,transparent 12.35% 24%)} #arena[data-arena-theme="market"]::after,#arena[data-arena-theme="festival"]::after{opacity:.25} @media(prefers-reduced-motion:reduce){#arena,#arena::before,#arena::after{transition:none!important}} /* v68: lightweight arena-specific environmental reactions on landed hits */ #arena{isolation:isolate;overflow:hidden} #arena .arena-hit-burst{position:absolute;z-index:12;left:50%;top:47%;width:12px;height:12px;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);animation:nac-hit-ring .58s ease-out both} #arena .arena-hit-burst:before{content:"";position:absolute;inset:-5px;border:2px solid var(--hit-fx,#ffe29a);border-radius:50%;box-shadow:0 0 16px var(--hit-fx,#ffe29a)} #arena .arena-hit-burst i{position:absolute;left:50%;top:50%;width:4px;height:10px;border-radius:3px;background:var(--hit-fx,#ffe29a);box-shadow:0 0 8px var(--hit-fx,#ffe29a);transform:translate(-50%,-50%);animation:nac-hit-spark .48s ease-out both} #arena .arena-hit-burst i:nth-child(1){--sx:-25px;--sy:-20px} #arena .arena-hit-burst i:nth-child(2){--sx:25px;--sy:-20px;animation-delay:.015s} #arena .arena-hit-burst i:nth-child(3){--sx:-34px;--sy:2px;animation-delay:.025s} #arena .arena-hit-burst i:nth-child(4){--sx:34px;--sy:2px;animation-delay:.035s} #arena .arena-hit-burst i:nth-child(5){--sx:-18px;--sy:26px;animation-delay:.045s} #arena .arena-hit-burst i:nth-child(6){--sx:18px;--sy:26px;animation-delay:.055s} #arena .arena-hit-burst.burst-left{left:36%}#arena .arena-hit-burst.burst-right{left:64%} #arena .burst-traffic{--hit-fx:#ffd17a}#arena .burst-market{--hit-fx:#ffb66d}#arena .burst-stadium{--hit-fx:#d9f0ff} #arena .burst-water{--hit-fx:#75ddff}#arena .burst-festival{--hit-fx:#ff76c7}#arena .burst-industrial{--hit-fx:#ff895e} #arena .burst-terrain{--hit-fx:#e7d0a0}#arena .burst-urban{--hit-fx:#ffe29a} #arena[class*="arena-impact-"] .arena-environment .env-light{filter:brightness(1.7) blur(18px)} #arena.arena-impact-traffic{box-shadow:inset 0 0 40px #ffcf6c33}#arena.arena-impact-market{box-shadow:inset 0 0 36px #ff9c4b30} #arena.arena-impact-stadium{box-shadow:inset 0 0 48px #d9f0ff3b}#arena.arena-impact-water{box-shadow:inset 0 0 44px #56d8ff35} #arena.arena-impact-festival{box-shadow:inset 0 0 48px #ff62b933}#arena.arena-impact-industrial{box-shadow:inset 0 0 42px #ff724533} #arena.arena-impact-terrain{box-shadow:inset 0 0 40px #e7d0a02b}#arena.arena-impact-urban{box-shadow:inset 0 0 38px #ffe29a2b} @keyframes nac-hit-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(5)}} @keyframes nac-hit-spark{0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.5)}25%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) rotate(130deg) scale(.25)}} @media(prefers-reduced-motion:reduce){#arena .arena-hit-burst,#arena .arena-hit-burst i{animation:none!important}#arena .arena-hit-burst{display:none!important}} /* v69: responsive combat feedback, layered over existing fighter rendering */ #arena.combat-clean-impact{filter:brightness(1.035)} #arena.combat-heavy-impact{filter:brightness(1.10) saturate(1.12)} #arena .combat-hit-shake{animation:nac-hit-shake .20s ease-out both} #arena .combat-heavy-shake{animation:nac-heavy-shake .34s cubic-bezier(.2,.8,.2,1) both} #arena.combat-heavy-impact:after{content:"";position:absolute;inset:0;z-index:11;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,#fff7d51c 0%,#ff8d4a0d 35%,transparent 72%);animation:nac-heavy-flash .34s ease-out both} @keyframes nac-hit-shake{0%{transform:translateX(0)}30%{transform:translateX(-2px)}65%{transform:translateX(2px)}100%{transform:translateX(0)}} @keyframes nac-heavy-shake{0%{transform:translate(0,0)}18%{transform:translate(-4px,1px)}38%{transform:translate(4px,-1px)}58%{transform:translate(-3px,0)}78%{transform:translate(2px,0)}100%{transform:translate(0,0)}} @keyframes nac-heavy-flash{0%{opacity:0}20%{opacity:1}100%{opacity:0}} @media(prefers-reduced-motion:reduce){#arena .combat-hit-shake,#arena .combat-heavy-shake,#arena.combat-heavy-impact:after{animation:none!important}} /* v70: phone and fighter roster visibility recovery plus movement polish */ #virtualPhone.hidden{display:none!important} #virtualPhone:not(.hidden){display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important} #virtualPhone .virtual-phone{max-height:min(92dvh,900px);overflow-y:auto;overscroll-behavior:contain} #virtualPhone .phone-app-panel{min-height:92px} #virtualPhone .phone-app-error{padding:12px;border:1px solid #9e394b;border-radius:10px;color:#ffd4dc;background:#35131b} #fighterGrid{display:grid!important;visibility:visible!important;opacity:1!important} #fighterGrid .fighter-card{visibility:visible;animation:nac-roster-arrive .22s ease-out both} #fighterGrid .fighter-card:nth-child(2n){animation-delay:.025s} #fighterGrid .fighter-card:nth-child(3n){animation-delay:.045s} #fighterGrid .fighter-locked{opacity:1;filter:none} #fighterGrid .fighter-locked .fighter-avatar:after{content:"LOCKED";position:absolute;top:8px;right:8px;z-index:3;padding:4px 7px;border-radius:5px;background:#32151c;border:1px solid #b94e5b;color:#ffd9df;font-size:9px;font-weight:900;letter-spacing:.8px} #fighterGrid .fighter-lock{z-index:4;display:block;visibility:visible} #rosterModeTabs{position:relative;z-index:4} #rosterModeTabs .roster-mode-tab{pointer-events:auto;cursor:pointer} @keyframes nac-roster-arrive{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){#fighterGrid .fighter-card{animation:none!important}} /* v72 pause menu: clearer actions and compact in-pause settings */ .pause-menu-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px} .pause-menu-actions .btn{min-width:0;white-space:normal} .pause-settings-panel{margin-top:16px;padding:16px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(4,10,18,.72);text-align:left} .pause-settings-panel h3{margin:0 0 6px;font-size:1rem;letter-spacing:.08em} .pause-settings-panel p{margin:0 0 12px;opacity:.8;font-size:.9rem} .pause-controls-help{display:grid;gap:6px;margin-top:14px;font-size:.82rem;line-height:1.45} .pause-controls-help b{color:var(--accent,#f5c451);letter-spacing:.08em} @media(max-width:520px){.pause-menu-actions{grid-template-columns:1fr}.pause-settings-panel{padding:12px}.pause-controls-help{font-size:.76rem}} /* v74: persistent campaign objective tracker during fights */ .campaign-objective-hud{display:flex;align-items:center;gap:12px;margin:0 auto 12px;padding:10px 14px;max-width:1000px;border:1px solid rgba(245,196,81,.34);border-radius:10px;background:linear-gradient(100deg,rgba(30,23,10,.94),rgba(9,15,25,.92));box-shadow:0 6px 20px rgba(0,0,0,.18)} .campaign-objective-hud>span{flex:0 0 auto;color:var(--gold,#f5c451);font-size:.68rem;font-weight:900;letter-spacing:.12em} .campaign-objective-hud>b{font-size:.86rem;font-weight:700;line-height:1.35} @media(max-width:600px){.campaign-objective-hud{align-items:flex-start;flex-direction:column;gap:4px;margin-bottom:8px;padding:9px 11px}.campaign-objective-hud>b{font-size:.78rem}} /* v75: result-screen campaign progression and reward clarity */ .result-campaign-progress{margin:16px 0 4px;padding:14px 16px;border:1px solid rgba(245,196,81,.3);border-radius:12px;background:linear-gradient(110deg,rgba(54,39,12,.5),rgba(9,16,28,.72));text-align:left} .result-campaign-progress>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px} .result-campaign-progress span{color:var(--gold,#f5c451);font-size:.68rem;font-weight:900;letter-spacing:.1em} .result-campaign-progress b{font-size:.86rem} .result-campaign-progress p{margin:8px 0 10px;font-size:.84rem;line-height:1.45;opacity:.9} .result-campaign-track{height:7px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.12)} .result-campaign-track i{display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#e9a92e,#ffe18a);transition:width .3s ease} @media(max-width:520px){.result-campaign-progress{padding:11px}.result-campaign-progress b{font-size:.78rem}.result-campaign-progress p{font-size:.78rem}} /* v76: compact roster stats and clear fighter availability */ .fighter-card-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%;margin-top:8px} .fighter-card-stats span{display:flex;justify-content:center;gap:4px;padding:4px 2px;border-radius:5px;background:rgba(5,10,18,.6);font-size:.58rem;font-weight:800;color:rgba(235,241,250,.7)} .fighter-card-stats b{color:#fff;font-variant-numeric:tabular-nums} .fighter-card[aria-pressed="true"]{outline:2px solid var(--fighter-color,#f5c451);outline-offset:1px} .fighter-card.fighter-locked .fighter-card-stats{opacity:.62} .fighter-detail-state{display:inline-flex;align-items:center;margin:8px 0 4px;padding:6px 9px;border-radius:7px;font-size:.68rem;font-weight:900;letter-spacing:.07em} .fighter-detail-state.is-ready{color:#b8f7d0;background:rgba(44,170,101,.14);border:1px solid rgba(70,210,130,.28)} .fighter-detail-state.is-locked{color:#ffd58a;background:rgba(205,137,30,.14);border:1px solid rgba(245,196,81,.3)} .fighter-detail-stats .stat{margin-top:12px} .fighter-detail-stats .stat-head b small{font-size:.65rem;opacity:.55;margin-left:2px} .fighter-detail-stats .stat-bar{overflow:hidden} .fighter-detail-stats .stat-bar i{display:block;max-width:100%;transition:width .25s ease} @media(max-width:520px){.fighter-card-stats span{font-size:.52rem}.fighter-card-stats{gap:2px}} /* v77: roster visibility and reliable selection controls */ #fighters.active{min-height:100vh} #rosterModeTabs{display:flex!important;flex-wrap:wrap;gap:8px;margin:18px 0 10px;visibility:visible;opacity:1} #rosterModeTabs .roster-mode-tab{min-height:42px;flex:1 1 190px;position:relative;z-index:5} #fighterGrid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr))!important;gap:12px;min-height:180px;width:100%;overflow:visible;visibility:visible!important;opacity:1!important} #fighterGrid .fighter-card{display:flex!important;flex-direction:column;align-items:stretch;position:relative;min-width:0;min-height:245px;cursor:pointer;pointer-events:auto!important;visibility:visible!important;opacity:1!important} #fighterGrid .fighter-card .fighter-avatar{position:relative;flex:0 0 auto} #fighterGrid .fighter-card .fighter-avatar img{display:block;width:100%;height:100%;object-fit:cover} #fighterGrid .fighter-card .fighter-lock{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);padding:5px 7px;border-radius:6px;background:#24151b;color:#ffe2e6;font-size:.65rem;font-weight:900;white-space:normal} #fighterGrid .fighter-card.selected,#fighterGrid .fighter-card[aria-pressed="true"]{border-color:var(--fighter-color,#f5b82e);box-shadow:0 0 0 2px color-mix(in srgb,var(--fighter-color,#f5b82e) 45%,transparent)} .fighter-confirm-row{position:sticky;bottom:8px;z-index:8;padding:12px;background:rgba(7,11,19,.94);border:1px solid rgba(255,255,255,.12);border-radius:12px;backdrop-filter:blur(10px)} #chooseUnlockedFighter{min-height:48px;pointer-events:auto} @media(max-width:560px){#rosterModeTabs .roster-mode-tab{flex:1 1 100%;font-size:.82rem}#fighterGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}#fighterGrid .fighter-card{min-height:210px;padding:8px}#fighterGrid .fighter-card .fighter-avatar{height:clamp(130px,42vw,190px);min-height:130px}.fighter-confirm-row{position:static;flex-direction:column;gap:8px}} /* v78: fighter selection lives directly inside Select Arena */ .arena-fighter-picker{margin:18px 0 30px;padding:clamp(14px,2.2vw,24px);border:1px solid rgba(245,184,46,.35);border-radius:18px;background:linear-gradient(145deg,rgba(21,25,35,.96),rgba(11,13,19,.96));} .arena-fighter-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px} .arena-fighter-heading h3{margin:2px 0 6px;font-size:clamp(1.15rem,2vw,1.65rem)} .arena-fighter-heading .muted{margin:0;max-width:660px} .arena-fighter-count{flex-shrink:0;border:1px solid rgba(245,184,46,.4);border-radius:999px;padding:8px 11px;color:#f5c65d;font-size:.72rem;font-weight:800;letter-spacing:.04em} .arena-fighter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:10px;max-height:560px;overflow:auto;padding:2px 4px 8px 2px} .arena-fighter-card{min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 8px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:#171b25;color:#f5f5f5;text-align:center;cursor:pointer;transition:border-color .16s,transform .16s,background .16s} .arena-fighter-card:hover:not(:disabled){transform:translateY(-2px);border-color:#f5b82e} .arena-fighter-card.selected{border:2px solid #f5b82e;background:rgba(245,184,46,.12);box-shadow:0 0 0 1px rgba(245,184,46,.12)} .arena-fighter-card:disabled{cursor:not-allowed;opacity:.7;background:repeating-linear-gradient(135deg,#171b25,#171b25 8px,#1d2029 8px,#1d2029 16px)} .arena-fighter-portrait{width:74px;height:82px;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:radial-gradient(circle at 50% 25%,rgba(245,184,46,.18),transparent 70%)} .arena-fighter-portrait img{width:100%;height:100%;object-fit:contain} .arena-fighter-card strong{font-size:.82rem;line-height:1.2;overflow-wrap:anywhere} .arena-fighter-card small{font-size:.65rem;line-height:1.3;color:#f5c65d;font-weight:800} .arena-fighter-stats{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;color:#b9c1d0;font-size:.62rem} @media(max-width:600px){.arena-fighter-heading{align-items:flex-start;flex-direction:column}.arena-fighter-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:480px}.arena-fighter-card{padding:10px 6px}.arena-fighter-count{font-size:.65rem}} /* v81: fighter-specific idle stance motion in both roster pickers */ .fighter-card .fighter-avatar img,.arena-fighter-card .arena-fighter-portrait img{transform-origin:50% 88%;will-change:transform} .fighter-card.pose-wide .fighter-avatar img,.arena-fighter-card.pose-wide .arena-fighter-portrait img{animation:nacIdleGuard 2.7s ease-in-out infinite} .fighter-card.pose-guard .fighter-avatar img,.arena-fighter-card.pose-guard .arena-fighter-portrait img{animation:nacIdleBounce 2.2s ease-in-out infinite} .fighter-card.pose-lean .fighter-avatar img,.arena-fighter-card.pose-lean .arena-fighter-portrait img{animation:nacIdleLean 2.5s ease-in-out infinite} .fighter-card:hover .fighter-avatar img,.arena-fighter-card:hover .arena-fighter-portrait img{filter:drop-shadow(0 0 9px var(--fighter-color,#f5b82e))} .fighter-card.selected .fighter-avatar img,.arena-fighter-card.selected .arena-fighter-portrait img{filter:drop-shadow(0 0 11px var(--fighter-color,#f5b82e))} @keyframes nacIdleGuard{0%,100%{transform:translateY(0) rotate(-1deg) scale(1)}50%{transform:translateY(-3px) rotate(1deg) scale(1.015)}} @keyframes nacIdleBounce{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-4px) scale(1.02)}65%{transform:translateY(1px) scale(.995)}} @keyframes nacIdleLean{0%,100%{transform:translateY(0) rotate(-2deg) translateX(-1px)}50%{transform:translateY(-2px) rotate(2deg) translateX(2px)}} .fighter-card.pose-wide .fighter-avatar,.fighter-card.pose-guard .fighter-avatar,.fighter-card.pose-lean .fighter-avatar{overflow:hidden} @media(prefers-reduced-motion:reduce){.fighter-card.pose-wide .fighter-avatar img,.fighter-card.pose-guard .fighter-avatar img,.fighter-card.pose-lean .fighter-avatar img,.arena-fighter-card.pose-wide .arena-fighter-portrait img,.arena-fighter-card.pose-guard .arena-fighter-portrait img,.arena-fighter-card.pose-lean .arena-fighter-portrait img{animation:none!important;will-change:auto}} /* v82: harden fighter roster visibility against legacy screen/card rules */ #fighters.active{display:block!important;visibility:visible!important;opacity:1!important} #fighters.active #fighterGrid{display:grid!important;visibility:visible!important;opacity:1!important;position:relative;z-index:1} #fighters.active .fighter-card{display:flex!important;visibility:visible!important;opacity:1!important;min-height:190px} #fighters.active .fighter-avatar{display:grid!important;visibility:visible!important;opacity:1!important;min-height:105px} #fighters.active .fighter-avatar img{display:block!important;visibility:visible!important;opacity:1!important;max-width:100%;max-height:170px;object-fit:contain} #fighters.active .roster-empty{display:block!important;visibility:visible!important} /* v83: authoritative screen visibility + roster resilience */ .screen{display:none!important;visibility:hidden!important;pointer-events:none} .screen.active{display:block!important;visibility:visible!important;pointer-events:auto} #fighters.active #fighterGrid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:14px;min-height:120px} #fighters.active .fighter-card{display:flex!important;min-width:0;visibility:visible!important;opacity:1!important} #fighters.active .fighter-avatar img{display:block!important;max-width:100%;height:auto;object-fit:contain} #match:not(.active){pointer-events:none!important;z-index:0!important} #match.active{position:relative;z-index:2} #arenas.active{position:relative;z-index:1} @media(max-width:600px){#fighters.active #fighterGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}} /* v84: strict screen isolation; inactive match DOM cannot paint beneath menus. */ .app-shell{position:relative;isolation:isolate;overflow:clip} .app-shell>.screen{position:relative!important;inset:auto!important;z-index:auto!important;transform:none} .app-shell>#match:not(.active){display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;position:absolute!important;inset:0 auto auto 0!important;width:100%!important;height:0!important;min-height:0!important;overflow:hidden!important;contain:strict!important} .app-shell>#match:not(.active) *{visibility:hidden!important;pointer-events:none!important} .app-shell>#match.active{display:block!important;visibility:visible!important;opacity:1!important;position:relative!important;height:auto!important;overflow:visible!important;contain:layout paint style} .app-shell>.screen:not(.active){display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important} /* v85: final fail-safe for single-screen navigation and match-layer isolation. */ .app-shell > .screen[hidden], .app-shell > .screen:not(.active) { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .app-shell > .screen.active:not([hidden]) { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } .app-shell > #match:not(.active), .app-shell > #match[hidden] { display: none !important; position: absolute !important; width: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; clip-path: inset(100%) !important; contain: strict !important; } /* v86: target the real DOM hierarchy (screens are inside main, not direct app-shell children). */ main > .screen:not(.active), main > .screen[hidden], .app-shell .screen:not(.active), .app-shell .screen[hidden] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } main > .screen.active:not([hidden]), .app-shell .screen.active:not([hidden]) { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } main > #match:not(.active), main > #match[hidden], .app-shell #match:not(.active), .app-shell #match[hidden] { display: none !important; position: absolute !important; width: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; clip-path: inset(100%) !important; contain: strict !important; } /* v87: transition-proof screen isolation and campaign-exit safeguards. */ main { position: relative; isolation: isolate; } main > .screen { position: relative; z-index: 0; } main > .screen:not(.active), main > .screen[hidden] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } main > .screen.active:not([hidden]) { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } main > #match:not(.active), main > #match[hidden] { display: none !important; visibility: hidden !important; pointer-events: none !important; position: absolute !important; inset: auto !important; width: 0 !important; height: 0 !important; min-height: 0 !important; overflow: clip !important; clip-path: inset(100%) !important; contain: strict !important; } /* v94 Audio Mixer */ .nac-audio-mixer{display:grid;gap:10px;margin-top:16px;padding:14px;border:1px solid #394152;border-radius:12px;background:rgba(8,12,20,.72)} .nac-audio-mixer h4{margin:0;color:var(--gold,#f4c45d);font-size:12px;letter-spacing:1.4px} .nac-audio-mixer p{margin:0;color:#aab3c2;font-size:11px;line-height:1.45} .nac-audio-mixer label{display:grid;grid-template-columns:1fr auto;gap:6px;color:#e7eaf0;font-size:12px;font-weight:700} .nac-audio-mixer output{color:var(--gold,#f4c45d);font-variant-numeric:tabular-nums} .nac-audio-mixer input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--gold,#f4c45d);cursor:pointer} .nac-audio-mixer #audioResetMix{justify-self:start;font-size:10px} /* v95: broader arena identity palette across the 40-entry roster */ #arena[data-arena-theme="cyber"]{background-image:linear-gradient(90deg,#111d2b 1px,transparent 1px),linear-gradient(#111d2b 1px,transparent 1px),radial-gradient(ellipse at 50% 15%,#29d9ff55,transparent 42%),linear-gradient(180deg,#18243b,#171727 65%,#090c12);background-size:26px 26px,26px 26px,auto,auto} #arena[data-arena-theme="civic"]{background-image:linear-gradient(180deg,#8aafca,#657c92 43%,#55575b 44%,#292d32 75%,#15191e)} #arena[data-arena-theme="waterfront"]{background-image:linear-gradient(180deg,#7ab7d5 0%,#3e7f9b 42%,#19576c 58%,#172c38 59%,#111820 100%)} #arena[data-arena-theme="nightmarket"]{background-image:radial-gradient(ellipse at 20% 25%,#ffb52b55,transparent 24%),radial-gradient(ellipse at 78% 20%,#fa527b55,transparent 27%),linear-gradient(180deg,#30233a,#302b2b 58%,#101014)} #arena[data-arena-theme="industrial"]{background-image:linear-gradient(180deg,#66737a 0%,#38434a 43%,#353535 44%,#25292c 72%,#101214)} #arena[data-arena-theme="heritage"]{background-image:linear-gradient(180deg,#d0a36c 0%,#98714c 40%,#6c4d37 58%,#332b27 59%,#141313)} #arena[data-arena-theme="desert"]{background-image:linear-gradient(180deg,#dfb77d 0%,#bd8e57 42%,#876342 66%,#33271f 67%,#171310)} #arena[data-arena-theme="mansion"]{background-image:radial-gradient(ellipse at 50% 8%,#d5b56c44,transparent 35%),linear-gradient(180deg,#242b3a,#3d3440 52%,#18171c)} #arena[data-arena-theme="nightlife"]{background-image:radial-gradient(ellipse at 20% 20%,#ef3c9b55,transparent 25%),radial-gradient(ellipse at 80% 20%,#26b8ff55,transparent 30%),linear-gradient(180deg,#171d31,#24202e 65%,#090b12)} #arena[data-arena-theme="studio"]{background-image:linear-gradient(180deg,#414a5c 0%,#222a36 60%,#0e1117)} #arena[data-arena-theme="football"]{background-image:linear-gradient(180deg,#7ca8c0 0%,#557b88 35%,#426b4b 36%,#24452b 70%,#131a16)} #arena[data-arena-theme="village"]{background-image:linear-gradient(180deg,#a9b8a1 0%,#777d55 40%,#75553a 60%,#34271e 61%,#171310)} #arena[data-arena-theme="island"]{background-image:linear-gradient(180deg,#72c3d8 0%,#2b8fa8 44%,#167184 58%,#3c3b31 59%,#171a1a)} /* Fighter signature style adds a subtle identity tint without obscuring sprites. */ #arena.fighter-style-cosmic{box-shadow:inset 0 0 0 2px #5ad9ff66,inset 0 0 38px #4d8cff22} #arena.fighter-style-impact{box-shadow:inset 0 0 0 2px #ff873c66,inset 0 0 38px #ff4d2222} #arena.fighter-style-flare{box-shadow:inset 0 0 0 2px #ff5d9e66,inset 0 0 38px #ff3f8522} #arena.fighter-style-wave{box-shadow:inset 0 0 0 2px #9c7bff66,inset 0 0 38px #6d59ff22} #arena.fighter-style-street{box-shadow:inset 0 0 0 2px #f5b82e55} @media(prefers-reduced-motion:reduce){#arena.fighter-style-cosmic,#arena.fighter-style-impact,#arena.fighter-style-flare,#arena.fighter-style-wave,#arena.fighter-style-street{scroll-behavior:auto}} /* v96: readable combo callouts and graded hit feedback */ #arena .nac-combo-callout{position:absolute;z-index:18;top:22%;left:50%;transform:translateX(-50%);padding:7px 13px;border:1px solid #f5b82eaa;border-radius:7px;background:#080b12e8;color:#fff3bd;font-size:clamp(12px,2.3vw,20px);font-weight:1000;letter-spacing:1.5px;text-shadow:0 2px 8px #000;box-shadow:0 0 20px #f5b82e33;pointer-events:none;animation:nac-combo-pop .18s ease-out both} #arena.nac-combo-3 .nac-combo-callout,#arena.nac-combo-4 .nac-combo-callout,#arena.nac-combo-5 .nac-combo-callout{border-color:#ff764dcc;color:#ffb28d;box-shadow:0 0 26px #ff572244} #arena.nac-combo-4 .nac-combo-callout,#arena.nac-combo-5 .nac-combo-callout{font-size:clamp(15px,3vw,26px)} #arena.nac-combo-3{box-shadow:inset 0 0 0 2px #f5b82e66} #arena.nac-combo-4,#arena.nac-combo-5{box-shadow:inset 0 0 0 3px #ff764d88,inset 0 0 35px #ff572222} @keyframes nac-combo-pop{from{opacity:0;translate:0 8px;scale:.88}to{opacity:1;translate:0 0;scale:1}} @media(prefers-reduced-motion:reduce){#arena .nac-combo-callout{animation:none}} /* v97: signature-move identity accents */ #arena .signature-move-cinematic{isolation:isolate} #arena .signature-move-cinematic:before{content:"";position:absolute;inset:-8px -18px;z-index:-1;pointer-events:none;opacity:0;border-radius:50%;filter:blur(10px)} #arena .signature-move-cinematic.signature-family-cosmic:before{background:radial-gradient(ellipse,#47dfff66,transparent 70%)} #arena .signature-move-cinematic.signature-family-impact:before{background:radial-gradient(ellipse,#ff6a2f77,transparent 70%)} #arena .signature-move-cinematic.signature-family-flare:before{background:radial-gradient(ellipse,#ff4d9e66,transparent 70%)} #arena .signature-move-cinematic.signature-family-wave:before{background:radial-gradient(ellipse,#9a79ff66,transparent 70%)} #arena .signature-move-cinematic.signature-family-street:before{background:radial-gradient(ellipse,#f5b82e66,transparent 70%)} #arena .signature-move-cinematic.signature-move-play:before{opacity:1} #arena .signature-move-cinematic.signature-family-cosmic .signature-move-title{color:#9eefff;text-shadow:0 0 18px #24bfff99} #arena .signature-move-cinematic.signature-family-impact .signature-move-title{color:#ffc09b;text-shadow:0 0 18px #ff642e99} #arena .signature-move-cinematic.signature-family-flare .signature-move-title{color:#ffc0dc;text-shadow:0 0 18px #ff4d9e99} #arena .signature-move-cinematic.signature-family-wave .signature-move-title{color:#d0c4ff;text-shadow:0 0 18px #9a79ff99} #arena .signature-move-cinematic.signature-family-street .signature-move-title{color:#ffe29a;text-shadow:0 0 18px #f5b82e99} @media(prefers-reduced-motion:reduce){#arena .signature-move-cinematic:before{filter:none}} /* v98: character identity and results-screen polish */ #resultScreen .result-card,#resultScreen .match-result-card,#resultScreen .results-panel{border:1px solid #f5b82e66;box-shadow:0 18px 55px #0009,inset 0 0 30px #f5b82e0a} #resultScreen .result-title,#resultScreen h1,#resultScreen h2{letter-spacing:1.2px;text-wrap:balance} #resultScreen .result-stat,#resultScreen .stat-value{font-variant-numeric:tabular-nums} #resultScreen button{min-height:42px} #resultScreen .victory,#resultScreen .result-win{color:#ffe29a;text-shadow:0 0 18px #f5b82e44} #resultScreen .defeat,#resultScreen .result-loss{color:#ffb4a2} @media(max-width:520px){#resultScreen .result-card,#resultScreen .match-result-card,#resultScreen .results-panel{padding:16px}} /* v99: distinct signature outfit layers for key roster fighters */ #fighterGrid .arena-fighter-portrait img{image-rendering:auto} /* v137 REA-guided presentation and legal notice */ .arena-card{position:relative;isolation:isolate;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .arena-card:hover,.arena-card:focus-visible{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 12px 30px #0006} .arena-card .arena-region-tag{position:absolute;left:8px;bottom:calc(100% - 43px);z-index:3;max-width:calc(100% - 90px);padding:5px 7px;border-radius:4px;background:#080a10dc;color:#f2f5fa;font-size:8px;font-weight:900;letter-spacing:.9px;pointer-events:none} .arena-card:before{content:'';position:absolute;inset:0 0 auto;height:4px;z-index:2;background:linear-gradient(90deg,var(--arena-accent,#f5b82e),transparent)} .arena-theme-street{--arena-accent:#f5b82e}.arena-theme-coastal{--arena-accent:#47c5e8}.arena-theme-nightlife{--arena-accent:#d17bff}.arena-theme-stadium{--arena-accent:#7de2a7}.arena-theme-royal{--arena-accent:#e7b86c}.arena-theme-industrial{--arena-accent:#ff775d}.arena-theme-heritage{--arena-accent:#d8a15e} .fighter-card{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease} .fighter-card:hover,.fighter-card:focus-visible{transform:translateY(-2px);border-color:var(--fighter-color,#f5b82e);box-shadow:0 10px 24px #0005} .fighter-card .fighter-avatar{overflow:hidden;border:1px solid color-mix(in srgb,var(--fighter-color,#f5b82e) 65%,transparent);box-shadow:0 5px 18px color-mix(in srgb,var(--fighter-color,#f5b82e) 20%,transparent)} .fighter-card .fighter-avatar img{object-position:center top} .legal-link{border:0;background:transparent;color:#f5b82e;text-decoration:underline;text-underline-offset:3px;font:inherit;letter-spacing:inherit;cursor:pointer;padding:4px} .legal-disclaimer{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:18px;background:#03050beF;backdrop-filter:blur(12px);overflow:auto} .legal-disclaimer.hidden{display:none!important} .legal-disclaimer-panel{width:min(720px,100%);max-height:min(92dvh,900px);overflow:auto;padding:clamp(20px,4vw,38px);border:1px solid #f5b82e66;border-radius:18px;background:radial-gradient(circle at 100% 0,#3b2a124d,transparent 35%),linear-gradient(145deg,#171d29,#090c12);box-shadow:0 24px 90px #000b;color:#f4f6fb} .legal-mark{display:flex;align-items:center;gap:10px;color:#f5b82e;font-weight:1000;letter-spacing:2px;margin-bottom:24px}.legal-mark span{color:#8f9aab;font-size:9px;letter-spacing:1.5px} .legal-disclaimer h2{font-size:clamp(30px,5vw,46px);margin:5px 0 18px;letter-spacing:-1px}.legal-disclaimer h2 span{color:#f5b82e} .legal-disclaimer-copy{color:#c3cad5;font-size:13px;line-height:1.8}.legal-disclaimer-copy p{margin:0 0 13px}.legal-disclaimer-copy strong{color:#fff}.legal-small{color:#8994a6;font-size:10px;line-height:1.6} .legal-actions{display:grid;gap:14px;margin:22px 0 12px;padding-top:18px;border-top:1px solid #ffffff18}.legal-check{display:flex;align-items:flex-start;gap:10px;color:#dce2eb;font-size:12px}.legal-check input{margin-top:2px;accent-color:#f5b82e}.legal-actions button:disabled{opacity:.4;cursor:not-allowed} body.legal-open{overflow:hidden} @media(max-width:540px){.legal-disclaimer{padding:8px}.legal-disclaimer-panel{max-height:96dvh;border-radius:13px;padding:20px}.legal-disclaimer-copy{font-size:12px}.arena-card .arena-region-tag{font-size:7px;max-width:calc(100% - 76px)}} @media(prefers-reduced-motion:reduce){.arena-card,.fighter-card{transition:none}.arena-card:hover,.fighter-card:hover{transform:none}} /* v138: real selected fighter identity in the training panel */ .training-avatar{overflow:hidden;display:grid;place-items:center} .training-avatar img{width:100%;height:100%;max-height:180px;object-fit:contain;object-position:center bottom;image-rendering:auto} .training-stats{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:540px){.training-stats{grid-template-columns:repeat(2,minmax(0,1fr))}} /* v145: real roster artwork carousel on the home screen */ .home-roster-slider{position:absolute;z-index:3;left:14px;right:14px;bottom:54px;padding:12px 12px 10px;border:1px solid #f5b82e55;border-radius:12px;background:linear-gradient(135deg,#080b12ed,#161b27e8);box-shadow:0 12px 35px #0008;backdrop-filter:blur(8px)} .home-slider-head{display:flex;justify-content:space-between;align-items:center;color:#f5b82e;font-size:9px;font-weight:900;letter-spacing:1.7px;margin-bottom:7px}.home-slider-head b{color:#d8dce4;letter-spacing:1px} .home-slider-track{display:flex;align-items:stretch;justify-content:center;gap:8px;min-height:112px;overflow:hidden} .home-fighter-slide{flex:1 1 0;min-width:0;max-width:116px;border:1px solid #394152;border-radius:8px;background:#111722;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:5px 4px;position:relative;overflow:hidden;cursor:pointer} .home-fighter-slide.is-current{border-color:var(--fighter-color,#f5b82e);box-shadow:inset 0 0 0 1px var(--fighter-color,#f5b82e),0 0 18px color-mix(in srgb,var(--fighter-color,#f5b82e) 25%,transparent)} .home-fighter-slide img{width:100%;height:78px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 5px 5px #0009)} .home-fighter-slide strong{display:block;width:100%;font-size:9px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:3px} .home-fighter-slide small{font-size:7px;color:#b7c0ce;letter-spacing:.6px} .home-slider-controls{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px}.home-slider-controls button{border:1px solid #394152;background:#1b2330;color:#e8edf5;border-radius:6px;padding:7px 8px;font-size:8px;font-weight:900;letter-spacing:.5px;cursor:pointer}.home-slider-controls #homeFighterChoose{background:#f5b82e;color:#111722;border-color:#f5b82e} @media(max-width:540px){.home-roster-slider{left:8px;right:8px;bottom:49px;padding:8px}.home-slider-track{min-height:94px;gap:5px}.home-fighter-slide{padding:4px 2px}.home-fighter-slide img{height:62px}.home-fighter-slide strong{font-size:8px}.home-slider-controls button{font-size:7px;padding:7px 5px}.home-slider-head{font-size:8px}} /* v149 full-roster portrait presentation */ .fighter-card{min-height:218px;padding:10px 10px 12px;background:linear-gradient(155deg,#1a2231 0%,#0b1019 78%);border-color:#354054;isolation:isolate} .fighter-card:before{content:'';position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,transparent,var(--fighter-color,#f5b82e),transparent);opacity:.95;z-index:1} .fighter-card:after{width:140px;height:140px;right:-45px;top:24px;opacity:.08;z-index:-1} .fighter-avatar{width:100%;height:148px;margin:0 0 10px;border-radius:7px;border:1px solid color-mix(in srgb,var(--fighter-color,#f5b82e) 70%,#ffffff 10%);background:radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--fighter-color,#f5b82e) 55%,#17202d),#0a0e16 78%);box-shadow:inset 0 0 0 3px #080b12,0 6px 18px #0008;overflow:hidden;position:relative} .fighter-avatar:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#ffffff12,transparent 30%,transparent 68%,#05070bbd);border-bottom:2px solid var(--fighter-color,#f5b82e)} .fighter-card .fighter-avatar img,.fighter-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;image-rendering:auto;filter:none!important;mix-blend-mode:normal!important;opacity:1!important} .fighter-card strong{font-size:12px;letter-spacing:.25px}.fighter-card small{line-height:1.35}.fighter-card .fighter-card-stats{margin-top:8px}.fighter-card.selected{border-color:var(--fighter-color,var(--gold));box-shadow:0 0 0 1px var(--fighter-color,var(--gold)) inset,0 0 22px color-mix(in srgb,var(--fighter-color,var(--gold)) 18%,transparent)} .detail-avatar{overflow:hidden;padding:0;border:1px solid var(--fighter-color,var(--gold));position:relative;background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--fighter-color,var(--gold)) 55%,#17202d),#0a0e16 78%)} .detail-avatar img{width:100%;height:100%;object-fit:contain;display:block;filter:none!important;opacity:1!important} @media(max-width:540px){.fighter-card{min-height:174px;padding:7px}.fighter-avatar{height:112px}.fighter-card strong{font-size:10px}} /* Naija Radio app and fight startup recovery */ .nac-radio-player{display:grid;gap:12px;padding:14px;border:1px solid rgba(212,175,55,.35);border-radius:16px;background:linear-gradient(145deg,rgba(39,18,70,.94),rgba(9,14,28,.98));color:#fff} .nac-radio-art{height:104px;border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;font-size:48px;color:#e4c15c;background:radial-gradient(circle at 50% 45%,rgba(151,76,255,.7),rgba(15,18,40,.95) 68%);border:1px solid rgba(212,175,55,.35)} .nac-radio-art span{position:absolute;right:10px;top:9px;font-size:10px;letter-spacing:.16em;padding:4px 7px;border-radius:99px;background:#a91f42;color:white} .nac-radio-meta{display:grid;gap:4px}.nac-radio-meta small,.nac-radio-note{color:#b9c1d7;font-size:12px;line-height:1.5}.nac-radio-player audio{width:100%;max-width:100%}.nac-radio-controls{display:flex;gap:8px;flex-wrap:wrap}.nac-radio-controls button{flex:1}.nac-radio-note code{color:#f0cf72;overflow-wrap:anywhere}.nac-startup-recovery{position:relative;z-index:10;margin:12px auto;padding:16px;max-width:440px;text-align:center;border:1px solid rgba(245,184,46,.55);border-radius:14px;background:rgba(8,10,20,.94);color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.4)}.nac-startup-recovery strong{color:#f5c45a;letter-spacing:.08em}.nac-startup-recovery p{font-size:13px;line-height:1.5;color:#c6cee0} \n\n/* v145: short in-arena result reveal before the next-round instructions */ .nac-round-result-reveal{position:absolute;z-index:80;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.8vh,14px);padding:24px;text-align:center;background:radial-gradient(ellipse at center,rgba(5,9,18,.72),rgba(5,9,18,.94));color:#fff;pointer-events:none;animation:nacResultRevealIn .22s ease-out both} .nac-round-result-reveal strong{font-size:clamp(2rem,7vw,5.5rem);font-weight:1000;line-height:1;letter-spacing:.04em;text-shadow:0 5px 0 rgba(0,0,0,.28),0 0 32px currentColor} .nac-round-result-reveal.is-victory strong{color:#ffd65a}.nac-round-result-reveal.is-defeat strong{color:#ff7777} .nac-round-result-reveal .nac-result-kicker{font-size:clamp(.75rem,2vw,1.1rem);font-weight:900;letter-spacing:.22em;color:#fff} .nac-round-result-reveal .nac-result-score{font-size:clamp(1.5rem,4vw,3rem);font-weight:900;color:#fff} .nac-round-result-reveal small{font-size:clamp(.8rem,2vw,1.1rem);font-weight:700;color:#e4e9f2} @keyframes nacResultRevealIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}} @media(prefers-reduced-motion:reduce){.nac-round-result-reveal{animation:none}} /* v147: explicit, high-visibility Round 2 progression control */ #resultContinueRound2[hidden]{display:none!important} #resultContinueRound2:not([hidden]){display:inline-flex;align-items:center;justify-content:center;min-height:48px;white-space:normal;z-index:5;position:relative} @media(max-width:640px){.result-actions{display:grid;grid-template-columns:1fr;gap:10px}.result-actions .btn{width:100%;min-height:48px}}