:root{--font-main: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;--bg-dark: #0f172a;--bg-card: rgba(30, 41, 59, .7);--accent-primary: #3b82f6;--accent-secondary: #8b5cf6;--accent-success: #10b981;--accent-danger: #ef4444;--text-main: #f8fafc;--text-muted: #94a3b8;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--transition-speed: .3s}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:var(--bg-dark);background-image:radial-gradient(at 0% 0%,hsla(253,16%,7%,1) 0,transparent 50%),radial-gradient(at 50% 0%,hsla(225,39%,30%,1) 0,transparent 50%),radial-gradient(at 100% 0%,hsla(339,49%,30%,1) 0,transparent 50%);color:var(--text-main);font-family:var(--font-main);-webkit-font-smoothing:antialiased;overflow:hidden}#root{width:100%;max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:16px;border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);padding:2rem}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--accent-primary);color:#fff;cursor:pointer;transition:border-color .25s}button:hover{background-color:#2563eb}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card-container{perspective:1000px}.card{width:300px;height:450px;border-radius:20px;overflow:hidden;position:relative;transition:transform .6s cubic-bezier(.4,0,.2,1);background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column}.card.opponent,.card.empty{background:linear-gradient(135deg,#1e3a8a,#3b82f6);background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.1) 2px,transparent 2.5px),linear-gradient(135deg,#1e3a8a,#3b82f6);background-size:20px 20px,100% 100%;border:4px solid #fff;box-shadow:0 10px 25px #0000004d;display:flex;align-items:center;justify-content:center;position:relative}.card.opponent:after,.card.empty:after{content:"TOP ASS";font-family:Outfit,sans-serif;font-weight:900;font-size:3rem;color:#fff3;transform:rotate(-45deg);letter-spacing:4px;text-transform:uppercase;pointer-events:none}.card.empty{opacity:.8}.card.winner{box-shadow:0 0 30px var(--accent-success);transform:scale(1.05)}.card.loser{opacity:.6;transform:scale(.95)}.card-image{width:100%;height:200px;object-fit:cover;background-color:#333}.card-content{padding:1rem;flex:1;display:flex;flex-direction:column;gap:.5rem}.attribute-row{display:flex;justify-content:space-between;padding:.5rem;border-radius:4px;cursor:pointer;transition:background .2s}.attribute-row:hover{background:#ffffff1a}.attribute-row.selected{background:var(--accent-primary);font-weight:700}.attribute-row.disabled{pointer-events:none;opacity:.7}.attribute-row.interactive:hover{background:var(--accent-primary);transform:scale(1.02)}.attribute-row.highlight-win{background-color:var(--accent-success);color:#fff;font-weight:700;animation:bounce .5s}.attribute-row.highlight-loss{background-color:var(--accent-danger);color:#fff}.attribute-row.highlight-neutral{background-color:var(--text-muted)}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.fly-top-right{animation:animFlyTopRight 1.5s forwards cubic-bezier(.68,-.55,.27,1.55);animation-delay:1.5s}.fly-top-left{animation:animFlyTopLeft 1.5s forwards cubic-bezier(.68,-.55,.27,1.55);animation-delay:1.5s}@keyframes animFlyTopRight{0%{transform:scale(1) translate(0);opacity:1}20%{transform:scale(1.1) translateY(20px)}to{transform:scale(.1) translate(100vw,-100vh);opacity:0}}@keyframes animFlyTopLeft{0%{transform:scale(1) translate(0);opacity:1}20%{transform:scale(1.1) translateY(20px)}to{transform:scale(.1) translate(-100vw,-100vh);opacity:0}}