*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;background:#0a0a1a}body{font-family:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}canvas{image-rendering:-moz-crisp-edges;image-rendering:-webkit-crisp-edges;image-rendering:pixelated;image-rendering:crisp-edges}button{cursor:pointer;transition:opacity .1s}button:hover{opacity:.9}.pack-overlay{position:absolute;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#000000bf;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.pack-container{display:flex;align-items:center;justify-content:center}.pack{width:120px;height:160px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#2a2a4e;border:3px solid #555;position:relative}.pack-icon{font-size:48px;color:#888;font-family:monospace}.pack.shaking{animation:packShake .08s infinite}@keyframes packShake{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-4px,1px) rotate(-2deg)}50%{transform:translate(3px,-2px) rotate(1.5deg)}75%{transform:translate(-2px,3px) rotate(-1deg)}}.glow-common{box-shadow:0 0 20px #ffffff4d}.glow-rare{box-shadow:0 0 30px #5588cc80;animation:packShake .08s infinite,pulseBlue 1s ease-in-out infinite}.glow-epic{box-shadow:0 0 40px #c809;animation:packShake .08s infinite,pulseGold .8s ease-in-out infinite}.glow-legendary{box-shadow:0 0 50px #ff44ffb3;animation:packShake .06s infinite,pulseLegendary .6s ease-in-out infinite}@keyframes pulseLegendary{0%,to{box-shadow:0 0 50px #ff44ffb3}50%{box-shadow:0 0 80px #f4f}}@keyframes pulseBlue{0%,to{box-shadow:0 0 20px #5588cc4d}50%{box-shadow:0 0 40px #5588ccb3}}@keyframes pulseGold{0%,to{box-shadow:0 0 20px #c806}50%{box-shadow:0 0 50px #ffaa00e6}}.reveal-burst{position:relative;width:200px;height:200px}.particle{position:absolute;width:8px;height:8px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);animation:particleBurst 1s var(--delay, 0s) ease-out forwards}@keyframes particleBurst{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(calc(-50% + cos(var(--angle)) * var(--distance)),calc(-50% + sin(var(--angle)) * var(--distance))) scale(0);opacity:0}}.flash{position:absolute;inset:-100px;background:#fff;border-radius:50%;animation:flashPop .4s ease-out forwards}@keyframes flashPop{0%{opacity:.9;transform:scale(.1)}50%{opacity:.7;transform:scale(1.5)}to{opacity:0;transform:scale(2)}}.card-wrapper{display:flex;flex-direction:column;align-items:center;gap:16px}.card-wrapper.showcasing .card.landed .card-inner .card-front{animation:cardBob 2s ease-in-out infinite}@keyframes cardBob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.card{width:160px;height:220px;perspective:800px}.card-inner{width:100%;height:100%;transition:transform .8s ease-in-out;transform-style:preserve-3d}.card.flipping .card-inner{animation:cardFlip .8s ease-in-out forwards}@keyframes cardFlip{0%{transform:rotateY(180deg) scale(.8)}50%{transform:rotateY(90deg) scale(1.1)}to{transform:rotateY(0) scale(1)}}.card-front{width:100%;height:100%;backface-visibility:hidden;border-radius:8px;border:3px solid;background:#2a2a3e;display:flex;flex-direction:column;align-items:center;padding:12px;gap:8px;position:relative}.badge{position:absolute;top:-8px;right:-8px;padding:2px 8px;border-radius:4px;font-family:monospace;font-weight:700;font-size:12px;z-index:10}.badge-new{background:#f33;color:#fff;animation:badgeBounce .5s ease-in-out infinite alternate}.badge-upgrade{background:#3c3;color:#fc0;animation:badgeBounce .5s ease-in-out infinite alternate}@keyframes badgeBounce{0%{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-4px) rotate(5deg)}}.rarity-label{font-family:monospace;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase}.portrait{width:80px;height:80px;border-radius:4px;display:flex;align-items:center;justify-content:center;image-rendering:pixelated}.portrait-letter{font-size:36px;font-family:monospace;font-weight:700;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.5)}.card-name{font-family:monospace;font-size:16px;font-weight:700;color:#fff}.card-stars{font-size:18px;letter-spacing:4px}.stats-panel{background:#0009;border-radius:6px;padding:12px 20px;min-width:180px;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.stat-row{display:flex;justify-content:space-between;padding:3px 0;font-family:monospace;font-size:13px}.stat-label{color:#888}.stat-value{color:#fff;font-weight:700}.stat-special{margin-top:8px;padding-top:8px;border-top:1px solid #444;font-family:monospace;font-size:11px;color:#afa;line-height:1.4}.continue-btn{padding:10px 32px;font-size:16px;font-family:monospace;font-weight:700;background:#4fa;border:none;color:#1a1a2e;border-radius:6px;cursor:pointer;animation:slideUp .3s ease-out;transition:transform .1s}.continue-btn:hover{transform:scale(1.05)}.continue-btn:active{transform:scale(.98)}.pack-fast .pack.shaking{animation:packShake .05s infinite}.pack-fast .particle{animation-duration:.4s}.pack-fast .flash{animation-duration:.2s}.pack-fast .card.flipping .card-inner{animation-duration:.3s}.pack-fast .stats-panel,.pack-fast .continue-btn{animation-duration:.15s}