.game-detail-modal{max-width:550px;max-height:90vh;overflow-y:auto}.modal-loading,.modal-error{padding:2rem;text-align:center;color:#a0aec0}.modal-error{color:#ef4444}.game-info-section{background:#0000004d;border-radius:8px;padding:1rem;margin-bottom:1.5rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.game-info-row{display:flex;flex-direction:column;gap:.25rem}.info-label{font-size:.75rem;color:#718096;text-transform:uppercase;letter-spacing:.5px}.info-value{font-size:1rem;color:#e2e8f0;font-weight:500}.players-section{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;padding:1rem;background:#0003;border-radius:8px}.player-header{display:flex;align-items:center;gap:.75rem;flex:1}.player-header.winner{flex-direction:row}.player-header.loser{flex-direction:row-reverse;text-align:right}.player-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid}.player-header.winner .player-avatar{border-color:#4ade80}.player-header.loser .player-avatar{border-color:#ef4444}.player-avatar-placeholder{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.25rem;color:#fff}.player-header.winner .player-avatar-placeholder{background:linear-gradient(135deg,#4ade80,#22c55e)}.player-header.loser .player-avatar-placeholder{background:linear-gradient(135deg,#ef4444,#dc2626)}.player-info{display:flex;flex-direction:column;gap:.2rem}.player-info .player-name{font-weight:600;color:#e2e8f0;font-size:.95rem}.player-result{font-size:.75rem;font-weight:600;text-transform:uppercase}.player-result.victory{color:#4ade80}.player-result.defeat{color:#ef4444}.rating-change{font-size:.85rem;font-weight:700}.rating-change.positive{color:#4ade80}.rating-change.negative{color:#ef4444}.vs-divider{font-size:1.5rem;font-weight:700;color:#4a5568;padding:0 .5rem}.stats-section{background:#0000004d;border-radius:8px;padding:1rem}.stats-section-title{text-align:center;color:#e2e8f0;font-size:1rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.stats-header{display:grid;grid-template-columns:1fr 2fr 1fr;gap:.5rem;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.stats-header .player-label{font-size:.8rem;font-weight:600}.stats-header .player-label.winner{color:#4ade80;text-align:left}.stats-header .player-label.loser{color:#ef4444;text-align:right}.detail-stat-row{display:grid;grid-template-columns:1fr 2fr 1fr;gap:.5rem;padding:.35rem 0}.detail-stat-row .stat-label{color:#a0aec0;font-size:.85rem;text-align:center}.detail-stat-row .stat-value{font-weight:700;font-size:.95rem}.detail-stat-row .stat-value.winner{color:#4ade80;text-align:left}.detail-stat-row .stat-value.loser{color:#ef4444;text-align:right}.no-stats-message{text-align:center;color:#718096;padding:1.5rem;font-style:italic}.gameover-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f0f23);display:flex;align-items:center;justify-content:center;z-index:1000}.gameover-content{text-align:center;padding:2rem;max-width:500px;width:90%}.gameover-content h2{font-size:3rem;margin-bottom:1rem;text-shadow:0 0 20px currentColor}.gameover-content h2.victory{color:#4ade80;animation:victoryPulse 1s ease-in-out infinite}.gameover-content h2.defeat{color:#ef4444;animation:defeatPulse 1s ease-in-out infinite}@keyframes victoryPulse{0%,to{text-shadow:0 0 20px #4ade80}50%{text-shadow:0 0 40px #4ade80,0 0 60px #4ade80}}@keyframes defeatPulse{0%,to{text-shadow:0 0 20px #ef4444}50%{text-shadow:0 0 40px #ef4444}}.reason-text{font-size:1.2rem;color:#a0aec0;margin-bottom:.5rem}.turns-text{font-size:.9rem;color:#718096;margin-bottom:1.5rem}.game-stats{background:#0006;border-radius:12px;padding:1rem;margin:1.5rem 0;border:1px solid rgba(255,255,255,.1)}.stats-header{display:grid;grid-template-columns:1fr 2fr 1fr;gap:.5rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.1)}.stats-header .player-name{font-weight:700;font-size:.9rem}.stats-header .player-name.you{color:#60a5fa;text-align:left}.stats-header .player-name.opponent{color:#f87171;text-align:right}.stats-header .stats-title{color:#e2e8f0;font-size:1rem;font-weight:700;text-align:center}.stats-body{display:flex;flex-direction:column;gap:.5rem}.stat-row{display:grid;grid-template-columns:1fr 2fr 1fr;gap:.5rem;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.stat-row:last-child{border-bottom:none}.stat-row .stat-label{color:#a0aec0;font-size:.85rem;text-align:center}.stat-row .stat-value{font-weight:700;font-size:1rem}.stat-row .stat-value.you{color:#60a5fa;text-align:left}.stat-row .stat-value.opponent{color:#f87171;text-align:right}.gameover-content .pixel-btn{margin-top:1rem}*{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark: #1a1a2e;--bg-medium: #16213e;--bg-light: #0f3460;--accent: #e94560;--gold: #ffd700;--silver: #c0c0c0;--text: #eee;--pixel-font: "Press Start 2P", cursive}html,body{height:100%;overflow:hidden}body{font-family:var(--pixel-font);background:linear-gradient(180deg,var(--bg-dark) 0%,var(--bg-medium) 50%,var(--bg-dark) 100%);color:var(--text);min-height:100vh;image-rendering:pixelated}body:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 1px,transparent 1px,transparent 2px);z-index:9999}.game-container{display:flex;flex-direction:column;height:100vh;width:100%;overflow:hidden}.game-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background:#0000004d;border-bottom:2px solid rgba(255,215,0,.2);flex-shrink:0}.header-left{display:flex;align-items:center}.header-logo{font-size:1rem;color:var(--gold);cursor:pointer;text-shadow:2px 2px 0 rgba(0,0,0,.5);transition:color .2s}.header-logo:hover{color:var(--accent)}.header-right{display:flex;align-items:center;gap:15px}.profile-icon-container{width:40px;height:40px;border-radius:50%;border:2px solid var(--gold);overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s;background:var(--bg-dark)}.profile-icon-container:hover{border-color:var(--accent);transform:scale(1.05)}.profile-icon-img{width:100%;height:100%;object-fit:cover}.profile-icon-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:.8rem;background:linear-gradient(135deg,var(--accent) 0%,#b8344d 100%);color:#fff}.header-user-info{display:flex;flex-direction:column;align-items:flex-end;cursor:pointer;padding:5px 10px;border-radius:6px;transition:background .2s}.header-user-info:hover{background:#ffd7001a}.header-username{font-size:.55rem;color:var(--gold);margin-bottom:2px}.header-stats{display:flex;gap:8px;font-size:.4rem}.header-rating{color:var(--accent);font-weight:700}.header-record{color:#888}.header-wallet-btn{font-size:.5rem!important;padding:8px 16px!important}.header-right .wallet-connect,.header-right .wallet-connected{margin:0}.header-right .wallet-connect .error-text{position:absolute;right:0;top:100%;font-size:.4rem;white-space:nowrap}.game-header h1{font-size:1.5rem;text-shadow:3px 3px 0 var(--accent),-1px -1px 0 var(--accent),1px -1px 0 var(--accent),-1px 1px 0 var(--accent);letter-spacing:2px}.pixel-btn{font-family:var(--pixel-font);font-size:.7rem;padding:12px 24px;background:linear-gradient(180deg,var(--accent) 0%,#b8344d 100%);border:none;border-radius:4px;color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px #8b2a3d,0 6px 10px #0000004d;transition:all .1s ease;position:relative}.pixel-btn:hover{transform:translateY(-2px);box-shadow:0 6px #8b2a3d,0 8px 15px #0000004d}.pixel-btn:active{transform:translateY(2px);box-shadow:0 2px #8b2a3d,0 3px 5px #0000004d}.pixel-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.pixel-btn.primary{background:linear-gradient(180deg,var(--accent) 0%,#b8344d 100%);font-size:.8rem;padding:15px 40px}.pixel-btn.secondary{background:linear-gradient(180deg,var(--bg-light) 0%,var(--bg-medium) 100%);box-shadow:0 4px #0a1628}.pixel-btn.small{font-size:.5rem;padding:8px 16px}.pixel-btn.danger{background:linear-gradient(180deg,#ef4444,#b91c1c);box-shadow:0 4px #7f1d1d}.lobby-bottom-buttons{display:flex;gap:15px;margin-top:20px;justify-content:center}.leaderboard-btn{padding:12px 25px;font-size:.55rem;background:linear-gradient(180deg,var(--gold) 0%,#b8960f 100%);color:#1a1a2e;font-weight:700;box-shadow:0 4px #8b7500,0 6px 10px #0000004d,0 0 15px #ffd7004d;animation:leaderboardGlow 2.5s ease-in-out infinite}@keyframes leaderboardGlow{0%,to{box-shadow:0 4px #8b7500,0 6px 10px #0000004d,0 0 15px #ffd7004d}50%{box-shadow:0 4px #8b7500,0 6px 10px #0000004d,0 0 25px #ffd70080}}.leaderboard-btn:hover{transform:translateY(-2px);box-shadow:0 6px #8b7500,0 8px 15px #0000004d,0 0 30px #ffd70099}.how-to-play-btn{padding:12px 25px;font-size:.55rem;background:linear-gradient(180deg,#8b5cf6,#6d28d9);box-shadow:0 4px #4c1d95,0 6px 10px #0000004d,0 0 15px #8b5cf64d}.how-to-play-btn:hover{transform:translateY(-2px);box-shadow:0 6px #4c1d95,0 8px 15px #0000004d,0 0 30px #8b5cf680}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-content{background:linear-gradient(180deg,var(--bg-medium) 0%,var(--bg-dark) 100%);border:4px solid var(--gold);border-radius:8px;padding:30px;max-width:500px;width:90%;max-height:80vh;box-shadow:0 0 30px #ffd7004d,inset 0 0 20px #00000080;text-align:center}.modal-content h2{font-size:1.2rem;margin-bottom:20px;color:var(--gold);text-shadow:2px 2px 0 rgba(0,0,0,.5)}.onboarding-content{max-width:450px}.onboarding-progress{display:flex;justify-content:center;gap:8px;margin-bottom:25px}.progress-dot{width:10px;height:10px;border-radius:50%;background:#fff3;cursor:pointer;transition:all .3s}.progress-dot:hover{background:#fff6}.progress-dot.active{background:var(--gold);transform:scale(1.2);box-shadow:0 0 10px var(--gold)}.progress-dot.completed{background:var(--accent)}.onboarding-icon{font-size:4rem;margin-bottom:15px;animation:iconBounce 2s ease-in-out infinite}@keyframes iconBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.onboarding-title{font-size:1rem;color:var(--gold);margin-bottom:15px}.onboarding-text{font-size:.55rem;line-height:1.8;color:#ccc;margin-bottom:25px;min-height:60px}.onboarding-nav{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px}.onboarding-nav .pixel-btn{font-size:.5rem;padding:10px 20px}.step-counter{font-size:.45rem;color:#666}.skip-btn{font-family:var(--pixel-font);font-size:.4rem;color:#666;background:none;border:none;cursor:pointer;text-decoration:underline;transition:color .2s}.skip-btn:hover{color:#aaa}.leaderboard-table-container{max-height:400px;overflow-y:auto;margin-bottom:20px}.leaderboard-table{width:100%;border-collapse:collapse;font-size:.6rem}.leaderboard-table th,.leaderboard-table td{padding:10px 8px;text-align:left;border-bottom:2px solid rgba(255,215,0,.2)}.leaderboard-table th{background:#ffd7001a;color:var(--gold);text-transform:uppercase;letter-spacing:1px}.leaderboard-table tbody tr:hover{background:#ffd7000d}.leaderboard-table-container::-webkit-scrollbar{width:8px}.leaderboard-table-container::-webkit-scrollbar-track{background:var(--bg-dark)}.leaderboard-table-container::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px}.hand{display:flex;justify-content:center;align-items:flex-end;gap:-30px;padding:20px;min-height:350px;position:relative}.wallet-section{margin-bottom:20px}.wallet-connect{display:flex;flex-direction:column;align-items:center;gap:10px}.wallet-connected{display:flex;align-items:center;gap:10px}.error-text{color:#ef4444;font-size:.5rem;margin-top:5px}.logged-in-info{margin-bottom:25px;text-align:center;padding:15px 20px;background:#ffd7000d;border-radius:8px;border:1px solid rgba(255,215,0,.15)}.welcome-text{font-size:.65rem;margin-bottom:6px;color:var(--gold)}.rating-text{font-size:.45rem;color:#999;margin-bottom:12px;letter-spacing:1px}.connection-status{margin-top:20px;font-size:.4rem;color:#555;display:flex;align-items:center;justify-content:center;gap:6px}.connection-status:before{content:"";width:6px;height:6px;border-radius:50%;background:#555}.status-connected{color:#4ade80}.status-connected:before{background:#4ade80;box-shadow:0 0 6px #4ade80}.status-connecting{color:#fbbf24}.status-connecting:before{background:#fbbf24;animation:pulse 1s ease-in-out infinite}.status-disconnected{color:#f87171}.status-disconnected:before{background:#f87171}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.profile-screen{align-items:center;justify-content:flex-start;padding:20px;overflow-y:auto;background:radial-gradient(ellipse at center,var(--bg-medium) 0%,var(--bg-dark) 100%)}.profile-content{max-width:600px;width:100%;padding:20px}.back-btn{margin-bottom:20px;font-size:.5rem;padding:8px 16px}.profile-title{font-size:1.5rem;margin-bottom:30px;text-align:center;color:var(--gold);text-shadow:2px 2px 0 rgba(0,0,0,.5)}.avatar-section{display:flex;flex-direction:column;align-items:center;margin-bottom:30px;gap:15px}.avatar-container{width:120px;height:120px;border-radius:50%;border:4px solid var(--gold);overflow:hidden;cursor:pointer;position:relative;background:var(--bg-dark)}.avatar-container.uploading{opacity:.7;pointer-events:none}.avatar-img{width:100%;height:100%;object-fit:cover}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem;background:linear-gradient(135deg,var(--accent) 0%,#b8344d 100%);color:#fff}.avatar-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;font-size:.5rem;color:#fff;opacity:0;transition:opacity .2s}.avatar-container:hover .avatar-overlay{opacity:1}.profile-form{margin-bottom:30px}.form-group{margin-bottom:20px;position:relative}.form-group label{display:block;font-size:.6rem;margin-bottom:8px;color:#aaa}.form-group input,.form-group textarea{font-family:var(--pixel-font);font-size:.7rem;width:100%;padding:12px 15px;background:#00000080;border:2px solid var(--bg-light);border-radius:4px;color:#fff;outline:none;transition:border-color .3s;resize:none}.form-group input:focus,.form-group textarea:focus{border-color:var(--accent)}.char-count{position:absolute;right:10px;bottom:-18px;font-size:.4rem;color:#666}.message{padding:12px 20px;border-radius:4px;margin-bottom:20px;font-size:.6rem;text-align:center}.message.success{background:#22c55e33;border:2px solid #22c55e;color:#4ade80}.message.error{background:#ef444433;border:2px solid #ef4444;color:#f87171}.stats-section{margin-bottom:30px}.stats-section h2,.history-section h2,.wallet-section h2{font-size:.8rem;margin-bottom:15px;color:var(--gold);border-bottom:2px solid rgba(255,215,0,.3);padding-bottom:10px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.stat-box{background:#0000004d;border:2px solid rgba(255,255,255,.1);border-radius:8px;padding:15px;text-align:center}.stat-value{display:block;font-size:1rem;color:var(--accent);margin-bottom:5px}.stat-label{font-size:.4rem;color:#aaa;text-transform:uppercase}.history-section{margin-bottom:30px}.no-games{font-size:.6rem;color:#666;text-align:center;padding:20px}.game-history{display:flex;flex-direction:column;gap:10px}.game-entry{display:flex;align-items:center;gap:15px;padding:12px 15px;background:#0000004d;border-radius:4px;border-left:4px solid #666;font-size:.5rem;transition:background .2s,transform .2s}.game-entry.clickable{cursor:pointer}.game-entry.clickable:hover{background:#00000080;transform:translate(4px)}.game-entry.win{border-left-color:#22c55e}.game-entry.loss{border-left-color:#ef4444}.game-result{font-weight:700;min-width:40px}.game-entry.win .game-result{color:#4ade80}.game-entry.loss .game-result{color:#f87171}.game-rating{color:var(--gold);min-width:50px}.game-opponent{color:#ccc;flex:1}.game-turns{color:#aaa;min-width:60px}.game-date{color:#666;margin-left:auto}.bio-section{margin-bottom:30px}.bio-section h2{font-size:.8rem;margin-bottom:15px;color:var(--gold);border-bottom:2px solid rgba(255,215,0,.3);padding-bottom:10px}.bio-text{font-size:.6rem;color:#ccc;line-height:1.8;background:#0000004d;padding:15px;border-radius:4px}.joined-date{font-size:.5rem;color:#666;margin-top:10px}.avatar-container.editable{cursor:pointer}.avatar-container:not(.editable){cursor:default}.avatar-container:not(.editable):hover .avatar-overlay{opacity:0}.wallet-section{margin-top:0}.wallet-address{font-size:.6rem;color:#aaa;background:#0000004d;padding:10px 15px;border-radius:4px;word-break:break-all}.action-hint{font-size:.5rem;color:#aaa;margin:10px 0}.loading{display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#aaa}@media (max-width: 600px){.stats-grid{grid-template-columns:repeat(2,1fr)}.game-entry{flex-wrap:wrap}.game-date{width:100%;margin-left:0;margin-top:5px}}:root{--card-width: 280px;--card-height: 392px;--card-aspect: .714;--card-radius: 12px;--border-width: 6px;--fire-primary: #ff6b35;--fire-secondary: #f7931e;--fire-glow: #ff4500;--water-primary: #3498db;--water-secondary: #2980b9;--water-glow: #00bfff;--earth-primary: #8b4513;--earth-secondary: #654321;--earth-glow: #daa520;--air-primary: #87ceeb;--air-secondary: #b0e0e6;--air-glow: #e0ffff;--dark-primary: #4a0e4e;--dark-secondary: #2d0a30;--dark-glow: #9932cc;--light-primary: #fff8dc;--light-secondary: #fffacd;--light-glow: #ffd700;--nature-primary: #228b22;--nature-secondary: #006400;--nature-glow: #32cd32}.card{width:var(--card-width);height:var(--card-height);position:relative;transform-style:preserve-3d;transition:transform .3s ease,z-index 0s .3s;cursor:grab;flex-shrink:0}.card:hover{z-index:100;transition:transform .3s ease,z-index 0s;cursor:grab;filter:drop-shadow(0 0 10px var(--card-glow, rgba(255, 215, 0, .5)))}.card:active{cursor:grabbing}.hand .card{margin:0 -15px;transform-origin:bottom center}.hand .card:nth-child(1){transform:rotate(-12deg) translateY(15px)}.hand .card:nth-child(2){transform:rotate(-8deg) translateY(8px)}.hand .card:nth-child(3){transform:rotate(-4deg) translateY(3px)}.hand .card:nth-child(4){transform:rotate(0) translateY(0)}.hand .card:nth-child(5){transform:rotate(4deg) translateY(3px)}.hand .card:nth-child(6){transform:rotate(8deg) translateY(8px)}.hand .card:nth-child(7){transform:rotate(12deg) translateY(15px)}.hand .card:hover{transform:translateY(-30px) scale(1.1)!important}.card__inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .15s ease-out}.card__frame{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--card-radius);overflow:hidden;background:var(--frame-bg, linear-gradient(135deg, #3a3a5c 0%, #2a2a3c 100%));border:var(--border-width) solid;border-color:var(--frame-border, #5a5a7a);box-shadow:inset 0 0 0 2px #ffffff1a,inset 0 0 20px #00000080,4px 4px #0006}.card__frame:before{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;border:2px solid rgba(255,255,255,.15);border-radius:4px;pointer-events:none}.card__frame:after{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:2px dashed rgba(255,255,255,.08);border-radius:2px;pointer-events:none}.card__content{position:relative;width:100%;height:100%;display:flex;flex-direction:column;padding:12px;z-index:1}.card__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.card__name{font-family:var(--pixel-font);font-size:.8rem;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.8);flex:1;line-height:1.3;word-wrap:break-word;max-width:180px}.card__cost{display:flex;gap:2px;flex-shrink:0}.cost-pip{width:20px;height:20px;border-radius:50%;background:var(--cost-color, var(--gold));border:2px solid rgba(255,255,255,.5);box-shadow:inset 0 -2px 4px #0000004d,0 1px 2px #00000080}.card__art{flex:1;background:linear-gradient(135deg,#1a1a2e,#0d0d1a);border:3px solid rgba(255,255,255,.2);border-radius:4px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;min-height:140px}.card__art-placeholder{color:#fff3;font-family:var(--pixel-font);font-size:.4rem;text-align:center}.card__creature-img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;image-rendering:crisp-edges;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));transform:scale(1.2)}.card__type-badge{position:absolute;top:4px;right:4px;font-family:var(--pixel-font);font-size:.35rem;padding:2px 6px;background:#0009;border-radius:2px;color:var(--type-color, white);text-transform:uppercase;letter-spacing:1px}.card__stats{display:flex;justify-content:space-between;margin-bottom:6px;padding:4px 8px;background:#0000004d;border-radius:4px;border:1px solid rgba(255,255,255,.1)}.card__stat{display:flex;align-items:center;gap:6px;font-family:var(--pixel-font);font-size:.75rem}.stat-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:1rem}.stat-icon.attack{color:#ff6b6b}.stat-icon.defense{color:#4ecdc4}.card__effect{font-family:var(--pixel-font);font-size:.55rem;color:#ffffffe6;line-height:1.6;padding:10px 12px;background:#0006;border-radius:4px;border:1px solid rgba(255,255,255,.1);flex-shrink:0}.card.spell .card__effect{flex:1;display:flex;align-items:center}.card.fire .card__frame{--frame-bg: linear-gradient(135deg, var(--fire-primary) 0%, var(--fire-secondary) 100%);--frame-border: #ff8c00}.card.fire{--card-glow: var(--fire-glow);--type-color: #ffb74d}.card.water .card__frame{--frame-bg: linear-gradient(135deg, var(--water-primary) 0%, var(--water-secondary) 100%);--frame-border: #1e90ff}.card.water{--card-glow: var(--water-glow);--type-color: #64b5f6}.card.earth .card__frame{--frame-bg: linear-gradient(135deg, var(--earth-primary) 0%, var(--earth-secondary) 100%);--frame-border: #cd853f}.card.earth{--card-glow: var(--earth-glow);--type-color: #daa520}.card.air .card__frame{--frame-bg: linear-gradient(135deg, var(--air-primary) 0%, var(--air-secondary) 100%);--frame-border: #add8e6}.card.air{--card-glow: var(--air-glow);--type-color: #e0ffff}.card.dark .card__frame{--frame-bg: linear-gradient(135deg, var(--dark-primary) 0%, var(--dark-secondary) 100%);--frame-border: #8b008b}.card.dark{--card-glow: var(--dark-glow);--type-color: #da70d6}.card.light .card__frame{--frame-bg: linear-gradient(135deg, var(--light-primary) 0%, var(--light-secondary) 100%);--frame-border: #ffd700}.card.light{--card-glow: var(--light-glow);--type-color: #ffd700}.card.light .card__name,.card.light .card__stat,.card.light .card__effect{color:#2a2a3c;text-shadow:none}.card.nature .card__frame{--frame-bg: linear-gradient(135deg, var(--nature-primary) 0%, var(--nature-secondary) 100%);--frame-border: #32cd32}.card.nature{--card-glow: var(--nature-glow);--type-color: #90ee90}.card.creature:before{content:"";position:absolute;top:-2px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid var(--frame-border, #5a5a7a);z-index:10}.card.spell:before{content:"";position:absolute;top:-2px;left:50%;transform:translate(-50%);width:16px;height:6px;background:var(--frame-border, #5a5a7a);border-radius:0 0 4px 4px;z-index:10}.spell-icon{font-size:3rem;opacity:.3;filter:drop-shadow(0 0 5px var(--card-glow, white))}.card-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:linear-gradient(180deg,#2a2a4a,#1a1a2e);border:3px solid var(--gold);border-radius:8px;padding:15px 20px;min-width:250px;max-width:320px;z-index:1000;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;box-shadow:0 0 20px #ffd7004d,0 10px 30px #00000080;margin-bottom:15px}.card-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:10px solid transparent;border-top-color:var(--gold)}.card:hover .card-tooltip{opacity:1;visibility:visible}.field .card .card-tooltip{bottom:auto;top:100%;margin-bottom:0;margin-top:15px}.field .card .card-tooltip:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--gold)}.tooltip-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:10px;border-bottom:2px solid rgba(255,215,0,.3)}.tooltip-name{font-family:var(--pixel-font);font-size:.9rem;color:var(--gold);text-shadow:1px 1px 0 rgba(0,0,0,.8)}.tooltip-cost{font-family:var(--pixel-font);font-size:.8rem;color:#60a5fa;background:#0000004d;padding:4px 10px;border-radius:4px}.tooltip-type{font-family:var(--pixel-font);font-size:.6rem;color:#fff9;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}.tooltip-stats{display:flex;gap:20px;margin-bottom:12px}.tooltip-stat{display:flex;align-items:center;gap:8px;font-family:var(--pixel-font);font-size:.85rem}.tooltip-stat .stat-label{color:#fff9;font-size:.6rem}.tooltip-stat.attack{color:#ff6b6b}.tooltip-stat.defense{color:#4ecdc4}.tooltip-effect{font-family:var(--pixel-font);font-size:.7rem;color:#ffffffe6;line-height:1.8;padding:12px;background:#0006;border-radius:6px;border:1px solid rgba(255,255,255,.1)}.tooltip-element{display:inline-block;font-family:var(--pixel-font);font-size:.55rem;padding:3px 8px;border-radius:3px;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}.tooltip-element.fire{background:var(--fire-primary);color:#fff}.tooltip-element.water{background:var(--water-primary);color:#fff}.tooltip-element.earth{background:var(--earth-primary);color:#fff}.tooltip-element.air{background:var(--air-primary);color:#1a1a2e}.tooltip-element.dark{background:var(--dark-primary);color:#fff}.tooltip-element.light{background:var(--light-primary);color:#1a1a2e}.tooltip-element.nature{background:var(--nature-primary);color:#fff}:root{--sunpillar-1: hsl(2, 100%, 73%);--sunpillar-2: hsl(53, 100%, 69%);--sunpillar-3: hsl(93, 100%, 69%);--sunpillar-4: hsl(176, 100%, 76%);--sunpillar-5: hsl(228, 100%, 74%);--sunpillar-6: hsl(283, 100%, 73%);--violet: #9b59b6;--blue: #3498db;--green: #2ecc71;--yellow: #f1c40f;--red: #e74c3c}.card{--pointer-x: 50%;--pointer-y: 50%;--card-opacity: 0;--rotate-x: 0deg;--rotate-y: 0deg;--background-x: 50%;--background-y: 50%;--pointer-from-center: 0;--pointer-from-top: .5;--pointer-from-left: .5;transform:translateZ(.01px);transform-style:preserve-3d}.card.interacting{z-index:100!important}.card__inner{transform:rotateY(var(--rotate-x)) rotateX(var(--rotate-y));transform-style:preserve-3d}.card.interacting .card__frame{box-shadow:0 0 3px -1px #fff,0 0 3px 1px var(--card-glow, #ffd700),0 0 15px 2px var(--card-glow, #ffd700),0 10px 20px -5px #000,0 0 50px -10px var(--card-glow, #ffd700)}.card__shine{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--card-radius);overflow:hidden;z-index:10;pointer-events:none;--scanlines-space: 1px;--bars: 3%;background-image:repeating-linear-gradient(110deg,var(--violet),var(--blue),var(--green),var(--yellow),var(--red),var(--violet),var(--blue),var(--green),var(--yellow),var(--red),var(--violet),var(--blue),var(--green),var(--yellow),var(--red)),repeating-linear-gradient(90deg,#0000004d,#0000004d 1px,#6464644d 1px,#6464644d 2px);background-position:calc(((50% - var(--background-x)) * 2.6) + 50%) calc(((50% - var(--background-y)) * 3.5) + 50%),center center;background-size:400% 400%,cover;background-blend-mode:overlay;filter:brightness(.9) contrast(1.2) saturate(1.3);mix-blend-mode:color-dodge;opacity:var(--card-opacity);transition:opacity .1s ease}.card__shine:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--card-radius);background-image:repeating-linear-gradient(90deg,transparent 0%,rgba(255,255,255,.2) 2%,transparent 3%,transparent 10%),repeating-linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 3%,transparent 4%,transparent 8%);background-position:calc((((50% - var(--background-x)) * 1.65) + 50%)) var(--background-x),calc((((50% - var(--background-x)) * -.9) + 50%)) var(--background-y);background-size:200% 200%,200% 200%;background-blend-mode:screen;filter:brightness(1.2) contrast(1.1);mix-blend-mode:hard-light}.card__shine:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--card-radius);background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,90%,.8) 0%,hsla(0,0%,78%,.1) 25%,hsl(0,0%,0%) 90%);background-position:center center;background-size:cover;mix-blend-mode:luminosity;filter:brightness(.6) contrast(4)}.card__glare{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--card-radius);overflow:hidden;z-index:11;pointer-events:none;background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,100%,.8) 10%,hsla(0,0%,100%,.65) 20%,hsla(0,0%,0%,.5) 90%);opacity:calc(var(--card-opacity) * .6);mix-blend-mode:overlay;filter:brightness(.9) contrast(1.5);transition:opacity .1s ease}.card__glare:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--card-radius);background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsl(180,100%,95%) 5%,hsla(0,0%,39%,.25) 55%,hsla(0,0%,0%,.36) 110%);mix-blend-mode:overlay;filter:brightness(.7) contrast(2.5)}.card__sparkle{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--card-radius);z-index:12;pointer-events:none;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.8) 0%,transparent 2%),radial-gradient(circle at 80% 20%,rgba(255,255,255,.6) 0%,transparent 1.5%),radial-gradient(circle at 60% 70%,rgba(255,255,255,.7) 0%,transparent 2%),radial-gradient(circle at 30% 80%,rgba(255,255,255,.5) 0%,transparent 1%),radial-gradient(circle at 90% 60%,rgba(255,255,255,.6) 0%,transparent 1.5%),radial-gradient(circle at 10% 50%,rgba(255,255,255,.4) 0%,transparent 1%);opacity:calc(var(--card-opacity) * .8);animation:sparkleShift 3s ease-in-out infinite alternate}@keyframes sparkleShift{0%{background-position:0% 0%,100% 0%,50% 100%,0% 100%,100% 50%,0% 50%}to{background-position:10% 10%,90% 10%,40% 90%,10% 90%,90% 40%,10% 40%}}.card.rare .card__shine{filter:brightness(1.1) contrast(1.3) saturate(1.5)}.card.rare .card__glare{opacity:calc(var(--card-opacity) * .8)}.card.epic .card__shine{background-image:repeating-linear-gradient(130deg,var(--sunpillar-6),var(--sunpillar-5),var(--sunpillar-4),var(--sunpillar-3),var(--sunpillar-2),var(--sunpillar-1),var(--sunpillar-6),var(--sunpillar-5),var(--sunpillar-4)),repeating-linear-gradient(45deg,#0003,#0003 2px,#64646433 2px,#64646433 4px);filter:brightness(1.2) contrast(1.4) saturate(1.6)}.card.legendary .card__shine{background-image:repeating-linear-gradient(160deg,gold,#ffec8b,gold,#daa520,gold,#ffec8b,gold,#daa520,gold),repeating-linear-gradient(90deg,rgba(255,215,0,.1) 0px,rgba(255,215,0,.1) 1px,transparent 1px,transparent 2px);filter:brightness(1.3) contrast(1.2) saturate(2);mix-blend-mode:soft-light}.card.legendary .card__glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(45,100%,80%,.9) 10%,hsla(45,100%,60%,.5) 30%,hsla(0,0%,0%,.4) 90%);opacity:calc(var(--card-opacity) * .9)}.screen{display:none;width:100%;flex:1;min-height:0}.screen.active{display:flex}.lobby-screen{align-items:center;justify-content:center;background:radial-gradient(ellipse at center,var(--bg-medium) 0%,var(--bg-dark) 100%)}.lobby-content{text-align:center;padding:30px 40px;background:#0003;border-radius:12px;border:2px solid rgba(255,215,0,.15);box-shadow:0 10px 40px #0000004d}.game-title{font-size:2.2rem;margin-bottom:8px;text-shadow:4px 4px 0 var(--accent),-2px -2px 0 #ff8080;animation:titlePulse 2s ease-in-out infinite}@keyframes titlePulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.subtitle{font-size:.6rem;color:var(--gold);margin-bottom:25px;letter-spacing:4px;text-transform:uppercase}.player-name-section{margin-bottom:25px}.player-name-section label{display:block;font-size:.5rem;margin-bottom:8px;color:#888;text-transform:uppercase;letter-spacing:1px}.player-name-section input,.join-room-section input{font-family:var(--pixel-font);font-size:.6rem;padding:10px 18px;background:#0006;border:2px solid var(--bg-light);border-radius:6px;color:#fff;text-align:center;outline:none;transition:border-color .3s,box-shadow .3s}.player-name-section input:focus,.join-room-section input:focus{border-color:var(--accent);box-shadow:0 0 10px #e945604d}.lobby-buttons{display:flex;flex-direction:column;gap:12px;align-items:center}.divider{font-size:.45rem;color:#555;margin:8px 0;text-transform:uppercase;letter-spacing:2px}.join-room-section{display:flex;gap:8px}.join-room-section input{width:130px;text-transform:uppercase;letter-spacing:2px}.matchmaking-screen{align-items:center;justify-content:center;background:radial-gradient(ellipse at center,var(--bg-medium) 0%,var(--bg-dark) 100%)}.matchmaking-content{text-align:center}.matchmaking-content h2{font-size:1rem;margin-bottom:30px}.spinner{width:50px;height:50px;border:4px solid var(--bg-light);border-top-color:var(--accent);border-radius:50%;margin:0 auto 20px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.room-code-display{margin:20px 0}.room-code-display p{font-size:.5rem;color:#aaa;margin-bottom:10px}.room-code{display:inline-block;font-size:1.5rem;padding:15px 30px;background:var(--bg-dark);border:3px solid var(--gold);border-radius:8px;letter-spacing:8px;color:var(--gold)}.battle-screen{flex-direction:column;background:linear-gradient(180deg,#1a1a2e,#16213e,#1a1a2e);padding:5px 10px;overflow:hidden;height:100vh;max-height:100vh;box-sizing:border-box}.player-info{display:flex;align-items:center;gap:10px;padding:6px 12px;background:#0006;border-radius:6px;border:2px solid rgba(255,255,255,.1);flex-shrink:0}.player-avatar{width:32px;height:32px;background:linear-gradient(135deg,var(--accent) 0%,#b8344d 100%);border-radius:50%;border:2px solid white;flex-shrink:0}.opponent-avatar{background:linear-gradient(135deg,#3498db,#2980b9)}.player-details{flex:1}.player-name{font-size:.6rem;display:block;margin-bottom:5px}.health-bar{width:120px;height:14px;background:#333;border-radius:7px;overflow:hidden;position:relative;border:2px solid #555}.health-fill{height:100%;background:linear-gradient(180deg,#4ade80,#22c55e);transition:width .5s ease;width:100%}.health-fill.low{background:linear-gradient(180deg,#fbbf24,#f59e0b)}.health-fill.critical{background:linear-gradient(180deg,#f87171,#ef4444)}.health-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.5rem;text-shadow:1px 1px 0 black}.mana-display{font-size:.5rem;margin-top:5px;color:#60a5fa}.deck-info{display:flex;flex-direction:column;align-items:center;gap:5px}.mini-deck{width:24px;height:34px;background:linear-gradient(135deg,#2d1f4e,#1a1230);border:2px solid var(--gold);border-radius:3px}.deck-info span,.hand-count span{font-size:.5rem}.hand-count{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.9rem}.opponent-area,.player-area{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.opponent-area{padding-bottom:5px}.player-area{padding-top:5px;overflow:hidden}.field{flex:1;display:flex;justify-content:center;align-items:center;gap:10px;padding:10px;min-height:140px;background:#0003;border-radius:6px;margin:5px 0;overflow:visible}.opponent-field{border:2px dashed rgba(59,130,246,.3)}.player-field{border:2px dashed rgba(239,68,68,.3)}.field .card{transform:scale(.55);margin:0 -45px}.field .card:hover{transform:scale(.65) translateY(-5px)!important}.field .card.can-attack{box-shadow:0 0 15px #ffd70080;cursor:pointer}.field .card.targetable{box-shadow:0 0 15px #ef444480;cursor:crosshair}.field.targetable-zone{cursor:crosshair;border-color:#ef444480}.center-area{display:flex;justify-content:center;align-items:center;gap:15px;padding:5px;flex-shrink:0}.turn-indicator{font-size:.7rem;padding:8px 20px;background:#00000080;border-radius:20px;border:2px solid var(--gold)}.turn-indicator.opponent-turn{border-color:#60a5fa;color:#60a5fa}.end-turn-btn{font-size:.6rem;padding:10px 20px}.end-turn-btn:disabled{opacity:.5}.battle-screen .hand{display:flex;justify-content:center;padding:80px 10px 10px;gap:0;min-height:180px;max-height:200px;overflow:visible;flex-shrink:0}.battle-screen .hand .card{transform:scale(.55);margin:0 -45px;transition:transform .2s,margin .2s}.battle-screen .hand .card:hover{transform:scale(.7) translateY(-20px)!important;margin:0 -30px;z-index:100}.battle-screen .hand .card.playable{cursor:pointer}.battle-screen .hand .card.unplayable{opacity:.6;filter:grayscale(.5)}.action-menu{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.action-menu-content{background:var(--bg-medium);padding:30px;border-radius:12px;border:3px solid var(--accent);text-align:center;max-width:400px}.action-menu-content h3{font-size:.8rem;margin-bottom:20px}.action-targets{display:flex;flex-direction:column;gap:15px;align-items:center;margin-bottom:20px}.target-list{display:flex;flex-direction:column;gap:8px;width:100%}.target-label{font-size:.5rem;color:#aaa;margin-bottom:5px}.target-btn{font-family:var(--pixel-font);font-size:.5rem;padding:12px 20px;background:var(--bg-light);border:2px solid #555;border-radius:4px;color:#fff;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.target-btn:hover{border-color:var(--accent);background:var(--bg-dark);transform:scale(1.02)}.target-btn-player{background:linear-gradient(180deg,var(--accent) 0%,#b8344d 100%);border-color:var(--accent)}.target-creature{background:linear-gradient(180deg,#3b82f6,#1d4ed8);border-color:#3b82f6}.target-creature:hover{border-color:#60a5fa}.target-player{background:linear-gradient(180deg,var(--gold) 0%,#b8960f 100%);color:#1a1a2e;border-color:var(--gold)}.target-icon{font-size:1rem}.no-targets{font-size:.5rem;color:#f87171;padding:15px;background:#ef44441a;border-radius:4px;border:1px dashed #f87171}.menu-btn{position:fixed;top:10px;right:10px;width:40px;height:40px;background:#00000080;border:2px solid #555;border-radius:8px;color:#fff;font-size:1.2rem;cursor:pointer;z-index:100}.game-menu{position:fixed;top:60px;right:10px;background:var(--bg-medium);padding:15px;border-radius:8px;border:2px solid #555;z-index:100}.gameover-screen{align-items:center;justify-content:center;background:#000000e6}.gameover-content{text-align:center;padding:40px;background:var(--bg-medium);border-radius:12px;border:3px solid var(--gold)}.gameover-content h2{font-size:1.5rem;margin-bottom:20px}.gameover-content h2.victory{color:var(--gold);text-shadow:0 0 20px var(--gold)}.gameover-content h2.defeat{color:#ef4444}.gameover-content p{font-size:.6rem;margin-bottom:30px;color:#aaa}@keyframes cardEnter{0%{transform:scale(.5) translateY(50px);opacity:0}to{transform:scale(.5) translateY(0);opacity:1}}.card.entering{animation:cardEnter .3s ease-out}@keyframes damage{0%,to{filter:none}50%{filter:brightness(2) saturate(0)}}.card.damaged{animation:damage .3s ease}@keyframes attackAnimation{0%{transform:scale(.5) translateY(0)}50%{transform:scale(.5) translateY(-30px)}to{transform:scale(.5) translateY(0)}}.card.attacking{animation:attackAnimation .4s ease}.card.selected{box-shadow:0 0 20px #ffd700cc}