:root { --ink:#08090f; --paper:#f5f4ee; --cyan:#00e5ff; --pink:#ff007f; --green:#8dff35; --muted:#a9a9b5; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:'DM Sans',sans-serif; overflow-x:hidden; }
button,input { font:inherit; } button { cursor:pointer; }
.theme-button { position:fixed; z-index:20; top:1rem; right:1rem; display:flex; align-items:center; gap:.45rem; border:2px solid currentColor; border-radius:999px; padding:.5rem .75rem; background:#ffffffdd; color:var(--ink); font-size:.7rem; font-weight:900; letter-spacing:.08em; box-shadow:4px 4px 0 var(--ink); }
.theme-button:hover { transform:translateY(-2px); }
body[data-theme="light"] { --ink:#f7f7f2; --paper:#11121a; --muted:#5e616d; background:var(--ink); color:var(--paper); }
body[data-theme="light"] .battle-screen { background:#f7f7f2; color:#11121a; }
body[data-theme="light"] .winner-screen { background:radial-gradient(circle at 50% 45%,#d9f5f7 0,#f7f7f2 48%); }
body[data-theme="light"] .theme-button { background:#11121a; color:#f7f7f2; box-shadow:4px 4px 0 var(--pink); }
body[data-theme="light"] .logo-button { color:#11121a; }
body[data-theme="light"] .sound-button { color:#11121a; border-color:#11121a66; }
body[data-theme="light"] .progress-track { background:#d8d9df; }
body[data-theme="light"] .fighter-card { border-color:#11121a; }
body[data-theme="light"] .winner-content h2 { color:#11121a; }
.noise { position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.screen { min-height:100vh; display:none; position:relative; overflow:hidden; } .screen.active { display:flex; }
.landing-screen { background:linear-gradient(110deg,var(--cyan) 0 52%,var(--pink) 52%); color:var(--ink); align-items:center; padding:clamp(2rem,6vw,6rem); }
.landing-screen:after { content:''; position:absolute; inset:0; opacity:.1; background:repeating-linear-gradient(135deg,transparent 0 24px,#fff 25px 27px); pointer-events:none; }
.landing-copy { width:54%; position:relative; z-index:2; animation:rise .7s ease both; } .eyebrow { font-size:.72rem; letter-spacing:.16em; font-weight:900; margin:0 0 1.4rem; } .pulse-dot { display:inline-block; background:var(--ink); border-radius:50%; width:8px;height:8px;margin-right:8px; box-shadow:0 0 0 5px #ffffff4d; }
h1,h2 { font-family:'Archivo Black',sans-serif; text-transform:uppercase; line-height:.88; letter-spacing:-.06em; margin:0; } h1 { font-size:clamp(4rem,9vw,9rem); } h1 em { color:var(--pink); font-style:normal; text-shadow:4px 4px var(--paper); } .lede { font-size:1.1rem; font-weight:700; line-height:1.35; margin:2rem 0 3rem; }
.seo-copy { max-width:550px; margin:-1.8rem 0 2rem; font-size:.82rem; line-height:1.45; font-weight:700; }
.username-form { max-width:540px; } label { display:block; font-size:.75rem; font-weight:900; text-transform:uppercase; letter-spacing:.12em; margin:0 0 .65rem; } .input-wrap { display:flex; align-items:center; background:var(--paper); border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); height:72px; } .at-sign { font-size:1.5rem; font-weight:900; padding-left:1.2rem; } input { border:0; outline:0; min-width:0; flex:1; background:transparent; color:var(--ink); padding:0 .7rem; font-size:1.25rem; font-weight:700; } input::placeholder { color:#96969d; } .input-wrap button { align-self:stretch; border:0; background:var(--ink); color:#fff; padding:0 1.4rem; font-size:1.1rem; font-weight:900; } .input-wrap button span { color:var(--cyan); font-size:1.4rem; margin-left:.5rem; } .status { height:18px; font-weight:700; font-size:.78rem; margin:.85rem 0 0; }
.mini-stats { display:flex; gap:2rem; font-size:.7rem; font-weight:900; text-transform:uppercase; margin-top:3.5rem; } .mini-stats strong { display:block; font-family:'Archivo Black'; font-size:1.25rem; }
.landing-art { position:absolute; right:0; width:54%; height:100%; z-index:1; } .hero-avatar { position:absolute; width:min(45vw,550px); aspect-ratio:1; right:9%; top:15%; transform:rotate(7deg); } .hero-avatar img { position:relative; width:100%; height:100%; object-fit:contain; filter:drop-shadow(20px 26px 0 var(--ink)); } .avatar-glow { position:absolute; inset:13%; background:#ff85c1; border-radius:50%; border:3px solid var(--ink); } .art-orbit { position:absolute; border:3px solid var(--ink); border-radius:50%; width:70%; aspect-ratio:1; top:17%;right:5%; transform:rotate(-22deg); } .orbit-two { width:92%; top:4%; right:-7%; border-width:2px; } .versus-mark { position:absolute; left:11%; top:47%; background:var(--ink); color:var(--cyan); font-family:'Archivo Black'; font-size:2rem; padding:.6rem; transform:rotate(-12deg); } .sticker { position:absolute; z-index:2; font-family:'Archivo Black'; font-size:1.1rem; line-height:.9; text-align:center; padding:1.1rem .8rem; border:3px solid var(--ink); background:var(--green); transform:rotate(12deg); box-shadow:6px 6px 0 var(--ink); } .sticker span { color:var(--pink); } .sticker-top { right:14%; top:12%; } .sticker-bottom { left:7%; bottom:15%; transform:rotate(-15deg); background:var(--paper); }
.ad-box { position:absolute; z-index:3; left:50%; bottom:1.5rem; transform:translateX(-50%); width:min(728px,calc(100% - 3rem)); min-height:70px; padding:.65rem 1.2rem; border:2px dashed var(--ink); background:#ffffffaa; display:flex; align-items:center; justify-content:center; gap:1.5rem; color:var(--ink); } .ad-box span,.ad-box small { font-size:.6rem; font-weight:900; letter-spacing:.12em; } .ad-box strong { font-family:'Archivo Black'; font-size:1rem; } .ad-box small { opacity:.65; }
.battle-screen { background:var(--ink); flex-direction:column; padding:1.4rem clamp(1rem,4vw,4rem) 2rem; } .game-header { display:flex; align-items:center; gap:2rem; padding-right:7rem; } .logo-button { text-align:left; border:0; background:transparent; color:#fff; font-family:'Archivo Black'; line-height:.8; font-size:1rem; } .logo-button span { color:var(--cyan); } .round-label { margin-left:auto; text-align:right; } .round-label span { color:var(--muted); font-size:.65rem; font-weight:900; display:block; } .round-label strong { font-family:'Archivo Black'; font-size:1.6rem; } .progress-track { width:22%; height:8px; background:#242631; border-radius:9px; overflow:hidden; } #progress-bar { width:15%; height:100%; background:var(--green); transition:width .3s; } .sound-button { position:relative; z-index:21; flex-shrink:0; background:transparent; color:#fff; border:1px solid #3b3d48; border-radius:50%; width:38px;height:38px; } .battle-intro { display:flex; align-items:end; justify-content:space-between; margin:clamp(3rem,8vh,7rem) 0 2rem; } .battle-intro .eyebrow { color:var(--cyan); margin:0 0 .8rem; } h2 { font-size:clamp(2.7rem,6vw,6rem); } .match-count { font-weight:900; font-size:.72rem; letter-spacing:.12em; color:var(--muted); }
.fighters { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; max-width:1280px; width:100%; margin:auto; } .fighter-card { position:relative; min-height:clamp(330px,53vh,600px); border:3px solid var(--paper); border-radius:28px; overflow:hidden; background:var(--cyan); color:var(--ink); transition:transform .25s, box-shadow .25s; } .fighter-card:nth-child(2) { background:var(--pink); } .fighter-card:hover { transform:translateY(-10px) rotate(-1deg); box-shadow:0 17px 0 var(--green); } .fighter-card .card-number { position:absolute; z-index:1; top:1rem; left:1.2rem; font-family:'Archivo Black'; font-size:1.4rem; } .fighter-card img { position:absolute; width:88%; height:75%; left:6%; top:4%; object-fit:contain; filter:drop-shadow:12px 14px 0 #000); } .fighter-info { position:absolute; bottom:0; left:0; right:0; padding:1.2rem; background:linear-gradient(transparent,#00000022); } .fighter-name { display:block; font-family:'Archivo Black'; font-size:clamp(1.3rem,3vw,2.6rem); text-transform:uppercase; margin-bottom:.8rem; } .choose-button { width:100%; background:var(--green); border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:.7rem; font-family:'Archivo Black'; font-size:1rem; transition:.2s; } .choose-button:active { transform:translate(4px,4px); box-shadow:1px 1px 0 var(--ink); } .battle-hint { text-align:center; color:var(--muted); font-size:.65rem; letter-spacing:.18em; font-weight:900; margin:2rem 0 0; } .battle-hint span { color:var(--pink); margin-left:.4rem; }
.winner-screen { background:radial-gradient(circle at 50% 45%,#293945 0,#08090f 45%); align-items:center; justify-content:center; text-align:center; } .winner-content { position:relative; z-index:2; animation:rise .7s ease both; } .winner-content .eyebrow { color:var(--green); } .winner-content h2 { font-size:clamp(2.5rem,7vw,7rem); color:var(--paper); text-shadow:7px 7px var(--pink); } .winner-subtitle { color:var(--muted); font-weight:700; margin:.8rem 0 0; } .podium { position:relative; width:min(390px,70vw); height:300px; margin:-.3rem auto 1rem; } .podium img { position:absolute; z-index:1; width:70%; height:95%; left:15%; object-fit:contain; filter:drop-shadow(0 0 30px var(--cyan)); } .podium-base { position:absolute; bottom:3px; left:20%; width:60%; height:90px; background:linear-gradient(120deg,#dce3e7,#687984); clip-path:polygon(15% 0,85% 0,100% 100%,0 100%); display:flex; align-items:center; justify-content:center; color:var(--ink); font-family:'Archivo Black'; font-size:2rem; } .podium-light { position:absolute; width:100%; height:100%; background:radial-gradient(ellipse,#00e5ff55 0,transparent 60%); } .winner-actions { display:flex; flex-direction:column; align-items:center; gap:1rem; } .share-button { background:var(--green); border:3px solid var(--paper); box-shadow:6px 6px 0 var(--pink); padding:1rem 1.6rem; color:var(--ink); font-family:'Archivo Black'; font-size:1rem; } .share-button span { margin-left:1rem; } .again-button { background:transparent; border:0; color:var(--paper); text-decoration:underline; font-weight:900; } .confetti { position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(var(--cyan) 2px,transparent 3px),radial-gradient(var(--pink) 3px,transparent 4px),radial-gradient(var(--green) 2px,transparent 3px); background-size:87px 113px,139px 157px,183px 121px; animation:fall 8s linear infinite; opacity:.75; }
@keyframes rise { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } @keyframes fall { from { background-position:0 -200px,40px -300px,80px -100px; } to { background-position:50px 500px,0 700px,120px 600px; } }
.fighter-username { display:block; margin-top:-.55rem; margin-bottom:.8rem; font-size:.75rem; font-weight:900; opacity:.72; }
.battle-hint { margin-bottom:4.5rem; }
.battle-ad { color:var(--paper); border-color:#ffffff55; background:#ffffff0d; bottom:.75rem; min-height:48px; }
.site-footer { position:fixed; z-index:5; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.5rem; color:#ffffffb8; font-size:.65rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; pointer-events:none; }
.site-footer nav { display:flex; gap:1rem; pointer-events:auto; }
.site-footer a { color:inherit; text-decoration:none; border-bottom:1px solid #ffffff66; padding-bottom:2px; }
.site-footer a:hover { color:var(--green); border-color:var(--green); }
.landing-screen ~ .site-footer { color:#08090faa; }
@media (max-width:700px) { .landing-screen { padding:2rem 1.4rem; align-items:flex-start; } .landing-copy { width:100%; padding-top:3rem; } h1 { font-size:4.5rem; } .landing-art { opacity:.32; width:100%; top:30%; } .mini-stats { gap:1rem; margin-top:2.5rem; } .ad-box { bottom:1rem; width:calc(100% - 2rem); gap:.6rem; padding:.6rem; } .ad-box strong { font-size:.72rem; } .game-header { gap:1rem; } .progress-track { width:30%; } .battle-intro { margin-top:4rem; } .fighters { gap:.7rem; } .fighter-card { min-height:420px; border-radius:18px; } .fighter-card img { height:64%; top:8%; } .fighter-info { padding:.7rem; } .fighter-name { font-size:1.2rem; overflow:hidden; text-overflow:ellipsis; } .choose-button { font-size:.8rem; padding:.6rem .2rem; } }