:root{--bg-color:#0f172a;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-primary:#3b82f6;--accent-primary-hover:#2563eb;--accent-secondary:#1e293b;--accent-secondary-hover:#334155;--glow:0 0 20px #3b82f680}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);background-image:radial-gradient(circle,#1e293b 0%,#0f172a 100%);min-height:100vh;font-family:Outfit,sans-serif;overflow:hidden}.screen{width:100%;height:100%;padding:2rem 1rem;transition:opacity .4s,visibility .4s;position:absolute;top:0;left:0;overflow:hidden auto}.screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.screen.active{opacity:1;visibility:visible;pointer-events:all}#menu-screen{justify-content:center;align-items:center;padding:2rem;display:flex}.menu-container{margin:auto}#database-screen,#collection-screen,#shop-screen,#spread-screen{flex-direction:column;align-items:center;display:flex}.menu-container{text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#1e293b66;border:1px solid #ffffff1a;border-radius:24px;padding:3rem;animation:1s ease-out fadeIn;box-shadow:0 25px 50px -12px #00000080}.token-display{color:#fbbf24;background:#fbbf241a;border:1px solid #fbbf2480;border-radius:999px;align-items:center;gap:.5rem;margin-bottom:2rem;padding:.5rem 1.5rem;font-size:1.2rem;font-weight:700;display:inline-flex;box-shadow:0 4px 12px #fbbf2426}#token-count{transition:transform .15s,color .15s;display:inline-block}.logo{margin-bottom:3rem}.logo h1{letter-spacing:.2em;background:linear-gradient(135deg,#60a5fa,#a855f7);-webkit-text-fill-color:transparent;text-shadow:var(--glow);-webkit-background-clip:text;margin-bottom:.5rem;font-size:5rem;font-weight:900;animation:3s infinite alternate pulse}.subtitle{color:var(--text-secondary);letter-spacing:.5em;text-transform:uppercase;font-size:1.2rem;font-weight:700}.menu-buttons{flex-direction:column;gap:1.5rem;width:100%;max-width:300px;margin:0 auto;display:flex}.btn{cursor:pointer;color:var(--text-primary);border:none;border-radius:12px;padding:1rem 2rem;font-family:Outfit,sans-serif;font-size:1.25rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.btn:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.btn:hover:before{left:100%}.btn:active{transform:scale(.95)}.btn-primary{background-color:var(--accent-primary);box-shadow:0 4px 14px #3b82f663}.btn-primary:hover{background-color:var(--accent-primary-hover);transform:translateY(-2px);box-shadow:0 6px 20px #3b82f699}.btn-secondary{background-color:var(--accent-secondary);border:1px solid #ffffff1a}.btn-secondary:hover{background-color:var(--accent-secondary-hover);border-color:#fff3;transform:translateY(-2px)}.btn-small{border-radius:8px;padding:.5rem 1rem;font-size:.9rem}.btn-holographic{color:#fff;text-shadow:0 1px 2px #00000080;background:linear-gradient(120deg,#a855f7,#ec4899,#f43f5e,#f59e0b,#10b981,#3b82f6,#6366f1,#a855f7) 0 0/300% 300%;border:none;font-weight:900;animation:6s infinite holo-flow;box-shadow:0 4px 15px #ec489966}.btn-holographic:hover{transform:translateY(-2px);box-shadow:0 6px 25px #ec489999}@keyframes holo-flow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.db-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1e293b99;border:1px solid #ffffff1a;border-radius:16px;flex-direction:column;gap:1rem;width:100%;max-width:1200px;margin-bottom:2rem;padding:1.5rem;display:flex}.db-header h2{text-align:center;background:linear-gradient(135deg,#60a5fa,#a855f7);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2rem;font-weight:900}.db-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.sort-controls,.pagination-controls{align-items:center;gap:.5rem;display:flex}#page-indicator{color:var(--text-secondary);white-space:nowrap;margin:0 .5rem;font-weight:700}.db-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.5rem;width:100%;max-width:1200px;padding-bottom:2rem;display:grid}.card{aspect-ratio:2.5/3.5;background:linear-gradient(145deg,#1e293b,#0f172a);border:2px solid #ffffff0d;border-radius:16px;justify-content:center;align-items:center;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 15px -3px #00000080}.card:hover{border-color:#60a5fa66;transform:translateY(-5px);box-shadow:0 20px 25px -5px #0009,0 0 15px #3b82f666}.card:before{content:"";pointer-events:none;background:radial-gradient(circle at 50% 0,#ffffff1a,#0000 50%);position:absolute;inset:0}.card-power-badge{border:2px solid var(--text-primary);width:40px;height:40px;color:var(--text-primary);z-index:10;background:#000c;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;font-weight:900;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #00000080}.card-values{width:100%;height:100%;position:relative}.val{color:#fff;background:#0000004d;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.8rem;font-weight:900;display:flex;position:absolute;box-shadow:inset 0 2px 4px #00000080}.small-card .val{width:28px;height:28px;font-size:1.1rem}.val-top{top:0;left:50%;transform:translate(-50%)}.val-right{top:50%;right:0;transform:translateY(-50%)}.val-bottom{bottom:0;left:50%;transform:translate(-50%)}.val-left{top:50%;left:0;transform:translateY(-50%)}.card-common{border-color:#fff}.card-common:hover{border-color:#fff;box-shadow:0 20px 25px -5px #0009,0 0 15px #fff6}.card-uncommon{border-color:#4ade80}.card-uncommon:hover{border-color:#4ade80;box-shadow:0 20px 25px -5px #0009,0 0 15px #4ade8080}.card-rare{border-color:#3b82f6}.card-rare:hover{border-color:#3b82f6;box-shadow:0 20px 25px -5px #0009,0 0 15px #3b82f699}.card-epic{border-color:#a855f7}.card-epic:hover{border-color:#a855f7;box-shadow:0 20px 25px -5px #0009,0 0 15px #a855f799}.card-legendary{border-color:#fbbf24}.card-legendary:hover{border-color:#fbbf24;box-shadow:0 20px 25px -5px #0009,0 0 15px #fbbf24b3}.spread-container{width:100%;max-width:800px}.spread-container h2{background:linear-gradient(135deg,#60a5fa,#a855f7);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:2rem;font-size:2.5rem;font-weight:900}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;display:grid}.stat-card{text-align:left;background:#0f172a99;border:1px solid #ffffff0d;border-radius:12px;padding:1.5rem;transition:transform .2s}.stat-card:hover{background:#1e293bcc;transform:translateY(-2px)}.stat-card h3{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:1.1rem}.stat-card p{color:var(--text-primary);font-size:2.5rem;font-weight:900}#pack-reveal-overlay{z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172af2;justify-content:center;align-items:flex-start;padding:2rem;transition:opacity .4s,visibility .4s;display:flex;position:fixed;inset:0;overflow:hidden auto}#pack-reveal-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.reveal-content{text-align:center;width:100%;max-width:1400px;margin:auto;animation:.5s cubic-bezier(.175,.885,.32,1.275) zoomIn}.reveal-title{background:linear-gradient(135deg,#fbbf24,#f59e0b);-webkit-text-fill-color:transparent;text-shadow:0 0 30px #fbbf2480;-webkit-background-clip:text;margin-bottom:3rem;font-size:4rem;font-weight:900}.reveal-grid{flex-wrap:wrap;justify-content:center;gap:1.5rem;display:flex}.reveal-grid .card{width:200px;animation:.6s ease-out backwards flipIn}.reveal-grid .card:first-child{animation-delay:.1s}.reveal-grid .card:nth-child(2){animation-delay:.2s}.reveal-grid .card:nth-child(3){animation-delay:.3s}.reveal-grid .card:nth-child(4){animation-delay:.4s}.reveal-grid .card:nth-child(5){animation-delay:.5s}.reveal-grid .card:nth-child(6){animation-delay:.6s}.reveal-grid .card:nth-child(7){animation-delay:.7s}.reveal-grid .card:nth-child(8){animation-delay:.8s}.reveal-grid .card:nth-child(9){animation-delay:.9s}.reveal-grid .card:nth-child(10){animation-delay:1s}.shake{animation:.5s cubic-bezier(.36,.07,.19,.97) both shake}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}@keyframes flipIn{0%{opacity:0;transform:perspective(400px)rotateY(90deg)}to{opacity:1;transform:perspective(400px)rotateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.particle{animation:.8s ease-out forwards particleOut}@keyframes particleOut{0%{opacity:1;transform:translate(0)rotate(0)}to{transform:translate(var(--vx), var(--vy)) rotate(var(--rot));opacity:0}}.card.revealed{animation:.8s cubic-bezier(.175,.885,.32,1.275) dramaticReveal;position:relative;overflow:hidden}.card.revealed:after{content:"";pointer-events:none;z-index:5;background:linear-gradient(45deg,#0000 45%,#fff9 50%,#0000 55%);width:300%;height:300%;animation:1s ease-in-out shineReveal;position:absolute;top:-150%;left:-150%}@keyframes shineReveal{0%{transform:translate(0)}to{transform:translate(100%,100%)}}.card-legendary.revealed{box-shadow:0 0 50px #fbbf24cc}.card-epic.revealed{box-shadow:0 0 40px #a855f7cc}.card-rare.revealed{box-shadow:0 0 30px #3b82f6cc}.placed-card{transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}.placed-card.flipping{animation:.6s ease-in-out gameFlip}@keyframes gameFlip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)scale(1.1)}to{transform:rotateY(0)}}.card.unrevealed{border-color:#ffffff1a!important;box-shadow:0 4px 10px #00000080!important}.card-cover{z-index:10;cursor:pointer;color:#fff3;background:radial-gradient(circle,#1e293b,#0f172a);border-radius:14px;justify-content:center;align-items:center;font-size:2.5rem;font-weight:900;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .5s ease-in;display:flex;position:absolute;inset:0}.card-cover:before{content:"TRBL";background:linear-gradient(135deg,#60a5fa,#a855f7);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.card.revealed .card-cover{opacity:0;pointer-events:none;transform:scale(1.5)rotateY(90deg)}.card.revealed{animation:.8s cubic-bezier(.175,.885,.32,1.275) dramaticReveal}@keyframes dramaticReveal{0%{transform:scale(1)rotateY(90deg)}50%{transform:scale(1.15)rotateY(-20deg);box-shadow:0 0 40px #fffc}to{transform:scale(1)rotateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{text-shadow:0 0 20px #60a5fa4d}to{text-shadow:0 0 30px #a855f799}}.collection-card-wrapper{cursor:pointer;transition:transform .2s;position:relative}.collection-card-wrapper:hover{transform:translateY(-5px)}.collection-card-wrapper .card:hover{transform:none}.favorite-badge{color:#0f172a;z-index:10;pointer-events:none;background:#fbbf24;border:2px solid #0f172a;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.2rem;display:flex;position:absolute;top:-10px;right:-10px;box-shadow:0 4px 10px #fbbf2499}.duplicate-badge{color:#f8fafc;z-index:10;pointer-events:none;background:#3b82f6;border:2px solid #0f172a;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:.9rem;font-weight:700;display:flex;position:absolute;bottom:-10px;left:-10px;box-shadow:0 4px 10px #3b82f699}.draft-card-wrapper{cursor:pointer;transition:transform .2s,filter .2s;position:relative}.draft-card-wrapper:hover{transform:translateY(-5px)}.draft-card-wrapper .card:hover{transform:none}.draft-card-wrapper.selected .card{border-color:#4ade80;box-shadow:0 0 20px #4ade8099}.draft-card-wrapper.selected:after{content:"✓";color:#0f172a;z-index:10;background:#4ade80;border:2px solid #0f172a;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.2rem;font-weight:700;display:flex;position:absolute;top:-10px;right:-10px;box-shadow:0 4px 10px #4ade8066}.draft-power-overlay{color:#f8fafc;pointer-events:none;z-index:10;white-space:nowrap;background:#0f172af2;border:1px solid #fff3;border-radius:12px;padding:4px 12px;font-size:.9rem;font-weight:700;position:absolute;bottom:55px;left:50%;transform:translate(-50%);box-shadow:0 4px 6px #00000080}.draft-header{z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172af2;border-bottom:1px solid #ffffff1a;border-radius:0 0 16px 16px;justify-content:space-between;align-items:center;margin-bottom:2rem;padding:1rem;display:flex;position:sticky;top:0}.draft-stats-container{text-align:center}.draft-stats-container h2{color:#f8fafc;margin-bottom:.5rem;font-size:1.5rem}.draft-stats{justify-content:center;gap:2rem;display:flex}.stat-ready{color:#4ade80;font-weight:700}.stat-pending{color:#94a3b8;font-weight:700}.stat-error{color:#ef4444;font-weight:700}#draft-grid{max-width:1200px;margin:0 auto}@media (width<=768px){.logo h1{font-size:3rem}.subtitle{font-size:.9rem}.db-header h2{font-size:1.5rem}.db-controls{flex-direction:column;align-items:stretch}.sort-controls,.pagination-controls{flex-wrap:wrap;justify-content:center}.db-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}.draft-header{flex-direction:column;gap:1rem;padding:1rem .5rem}.draft-stats{flex-direction:column;gap:.5rem}.reveal-title{font-size:2.5rem}.reveal-grid .card{width:140px}.btn{padding:.8rem 1.5rem;font-size:1.1rem}}.placed-card{border-radius:16px;transition:all .3s;box-shadow:0 4px 10px #00000080}.card-element-badge{z-index:1;opacity:.4;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.element-icon{filter:drop-shadow(0 0 10px #fff3);font-size:5rem}.element-water{background:linear-gradient(145deg,#1e3a8a,#0f172a)}.element-water:after{content:"";pointer-events:none;background:radial-gradient(circle at 100% 0,#3b82f633,#0000 70%);position:absolute;inset:0}.element-fire{background:linear-gradient(145deg,#7f1d1d,#0f172a)}.element-fire:after{content:"";pointer-events:none;background:radial-gradient(circle at 100% 0,#ef444433,#0000 70%);position:absolute;inset:0}.element-air{background:linear-gradient(145deg,#064e3b,#0f172a)}.element-air:after{content:"";pointer-events:none;background:radial-gradient(circle at 100% 0,#10b98133,#0000 70%);position:absolute;inset:0}.element-earth{background:linear-gradient(145deg,#78350f,#0f172a)}.element-earth:after{content:"";pointer-events:none;background:radial-gradient(circle at 100% 0,#92400e33,#0000 70%);position:absolute;inset:0}.element-water:hover{box-shadow:0 0 20px #3b82f699}.element-fire:hover{box-shadow:0 0 20px #ef444499}.element-air:hover{box-shadow:0 0 20px #10b98199}.element-earth:hover{box-shadow:0 0 20px #92400e99}.owner-player .card{background:linear-gradient(145deg,#1e3a8a,#0f172a)!important;border-color:#3b82f6!important;box-shadow:inset 0 0 20px #3b82f666,0 0 15px #3b82f699!important}.owner-opponent .card{background:linear-gradient(145deg,#7f1d1d,#0f172a)!important;border-color:#ef4444!important;box-shadow:inset 0 0 20px #ef444466,0 0 15px #ef444499!important}.coin-flip-overlay{z-index:500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172ad9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.coin-wrapper{perspective:1000px;justify-content:center;align-items:center;width:200px;height:200px;display:flex}.coin{width:150px;height:150px;transform-style:preserve-3d;transition:transform .1s linear;position:relative}.coin-face{backface-visibility:hidden;border:4px solid #d4af37;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;font-size:3rem;font-weight:900;display:flex;position:absolute;box-shadow:inset 0 0 20px #00000080,0 0 15px #d4af3766}.coin-front{color:#1e3a8a;z-index:2;background:radial-gradient(circle,#fbbf24,#d4af37)}.coin-back{color:#7f1d1d;background:radial-gradient(circle,#fbbf24,#d4af37);transform:rotateY(180deg)}.coin:after{content:"";background:#996515;border-radius:50%;width:100%;height:100%;position:absolute;transform:translateZ(-2px);box-shadow:0 0 2px #00000080}.toss-player{animation:3s cubic-bezier(.45,.05,.55,.95) forwards tossPlayer}.toss-opponent{animation:3s cubic-bezier(.45,.05,.55,.95) forwards tossOpponent}@keyframes tossPlayer{0%{transform:translateY(0)rotateX(0)rotateY(0)scale(1)}30%{transform:translateY(-300px)rotateX(1080deg)rotateY(360deg)scale(1.5)}60%{transform:translateY(0)rotateX(2160deg)rotateY(720deg)scale(1)}80%{transform:translateY(-20px)rotateX(2340deg)rotateY(810deg)scale(1.05)}to{transform:translateY(0)rotateX(2520deg)rotateY(900deg)scale(1)}}@keyframes tossOpponent{0%{transform:translateY(0)rotateX(0)rotateY(0)scale(1)}30%{transform:translateY(-300px)rotateX(1080deg)rotateY(360deg)scale(1.5)}60%{transform:translateY(0)rotateX(2160deg)rotateY(720deg)scale(1)}80%{transform:translateY(-20px)rotateX(2340deg)rotateY(810deg)scale(1.05)}to{transform:translateY(0)rotateX(2700deg)rotateY(900deg)scale(1)}}.game-board-5x5 .board-slot{transition:all .2s}.game-board-5x5 .board-slot:hover{background:#ffffff0d!important;border-color:#ffffff4d!important}#experimental-screen .infinite-board{-webkit-user-select:none;user-select:none}#experimental-screen .exp-hand::-webkit-scrollbar{height:6px}#experimental-screen .exp-hand::-webkit-scrollbar-track{background:#0003}#experimental-screen .exp-hand::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}