@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&family=Teko:wght@500;700&display=swap";:root{--bg-primary:#0a0a0a;--bg-secondary:#141414;--accent-1:#e2ff00;--accent-2:#ff003c;--text-primary:#fff;--text-secondary:#888;--card-bg:linear-gradient(145deg, #1f1f1f, #111)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);background-image:linear-gradient(#141414cc 1px,#0000 1px),linear-gradient(90deg,#141414cc 1px,#0000 1px);background-position:50%;background-size:50px 50px;min-height:100vh;font-family:Outfit,sans-serif;overflow-x:hidden}h1,h2,h3,h4,h5,h6{text-transform:uppercase;font-family:Teko,sans-serif}@keyframes flash{0%{background-color:var(--accent-1)}to{background-color:#0000}}@keyframes slideUpFade{0%{opacity:0;transform:translateY(40px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}to{transform:translate(0)}}#root{flex-direction:column;min-height:100vh;display:flex}.app-container{flex-direction:column;align-items:center;width:100%;max-width:1400px;margin:0 auto;padding:3rem 1.5rem;display:flex;position:relative}header{text-align:center;z-index:10;margin-bottom:4rem;position:relative}.header-logo-container{justify-content:center;align-items:center;gap:1.5rem;margin-bottom:.5rem;display:flex}.header-logo{object-fit:contain;width:80px;height:80px;filter:drop-shadow(4px 4px 0px var(--accent-2))}.logo-text{color:var(--text-primary);text-shadow:4px 4px 0px var(--accent-2);letter-spacing:2px;margin-bottom:0;font-size:5rem;font-weight:900;line-height:1;transform:skew(-5deg)}.subtitle{color:var(--accent-1);letter-spacing:4px;text-transform:uppercase;font-size:1.2rem;font-weight:700}.main-content{z-index:10;flex-direction:column;align-items:center;width:100%;display:flex}.controls{margin-bottom:3rem}.generate-btn{background:var(--text-primary);color:var(--bg-primary);border:4px solid var(--text-primary);text-transform:uppercase;letter-spacing:2px;cursor:pointer;box-shadow:8px 8px 0px var(--accent-1);padding:1rem 3rem;font-family:Teko,sans-serif;font-size:2rem;font-weight:700;transition:all .2s cubic-bezier(.25,.46,.45,.94);position:relative;transform:skew(-10deg)}.generate-btn:hover{box-shadow:12px 12px 0px var(--accent-1);background:var(--accent-1);border-color:var(--accent-1);transform:skew(-10deg)translate(-4px,-4px)}.generate-btn:active{box-shadow:0px 0px 0px var(--accent-1);transform:skew(-10deg)translate(4px,4px)}.matchup-container{flex-direction:column;align-items:center;width:100%;animation:.6s cubic-bezier(.16,1,.3,1) slideUpFade;display:flex;position:relative}.tier-badge{background:var(--accent-2);color:var(--text-primary);text-transform:uppercase;letter-spacing:3px;z-index:20;border:2px solid #000;margin-bottom:-1rem;padding:.5rem 2rem;font-family:Teko,sans-serif;font-size:1.8rem;font-weight:700;transform:skew(-10deg);box-shadow:4px 4px #000}.teams-wrapper{justify-content:center;align-items:stretch;gap:1rem;width:100%;display:flex;position:relative}@media (width<=900px){.teams-wrapper{flex-direction:column;gap:3rem}}.team-card{background:var(--card-bg);text-align:center;border:2px solid #333;flex-direction:column;flex:1;justify-content:center;align-items:center;max-width:450px;min-height:400px;padding:3rem 2rem;transition:all .3s;display:flex;position:relative;overflow:hidden;box-shadow:15px 15px #00000080}.team-card:hover{border-color:var(--accent-1);box-shadow:15px 15px 0px var(--accent-1)}.team-card:after{content:"";pointer-events:none;background:#ffffff08;width:100px;height:200%;position:absolute;top:0;right:-50px;transform:rotate(35deg)}.team-logo-container{filter:drop-shadow(0 15px 25px #000c);justify-content:center;align-items:center;width:180px;height:180px;margin-bottom:2rem;transition:transform .4s cubic-bezier(.175,.885,.32,1.275);display:flex}.team-card:hover .team-logo-container{transform:scale(1.1)rotate(-5deg)}.team-logo-img{object-fit:contain;max-width:100%;max-height:100%}.team-name{color:var(--text-primary);letter-spacing:1px;margin-bottom:.5rem;font-size:3.5rem;font-weight:700;line-height:1}.team-country{color:var(--text-secondary);letter-spacing:2px;text-transform:uppercase;font-size:1rem;font-weight:700}.vs-badge{background:var(--accent-1);width:100px;height:100px;color:var(--bg-primary);z-index:10;box-shadow:8px 8px 0px var(--bg-primary), 10px 10px 0px var(--accent-2);border:4px solid var(--bg-primary);justify-content:center;align-self:center;align-items:center;font-family:Teko,sans-serif;font-size:4rem;font-weight:900;line-height:1;display:flex;transform:skew(-15deg)}.vs-badge:hover{animation:.3s linear infinite glitch}@media (width<=900px){.header-logo-container{flex-direction:column;gap:.5rem}.header-logo{width:60px;height:60px}.logo-text{word-break:break-word;font-size:clamp(2rem,8vw,3.5rem)}.vs-badge{margin:-1.5rem 0;position:relative;top:auto;left:auto;transform:skew(-15deg)}.team-card{width:100%;max-width:100%}}