:root{--bg-dark:#0f172a;--primary:#00dc82;--primary-dark:#00995a;--pack-red:#ef4444;--pack-red-dark:#b91c1c;--gold:#fbbf24;--font-kr:"Noto Sans KR",sans-serif;--font-en:"Outfit",sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:#fff;font-family:var(--font-kr);min-height:100vh;overflow:hidden;perspective:1200px}#app-root,body{display:flex;justify-content:center;align-items:center}#app-root{width:100%;height:100vh;position:relative;z-index:10;flex-direction:column}.bg-particles{top:0;bottom:0;background-image:radial-gradient(circle at 50% 50%,#1e293b 0,#0f172a 100%);z-index:-1}.bg-particles,.logo{position:absolute;left:0;right:0}.logo{font-family:var(--font-en);font-size:2.5rem;color:#fff;text-shadow:0 4px 15px rgba(0,220,130,.4);letter-spacing:2px;top:2rem;text-align:center;pointer-events:none}.logo span{color:var(--primary)}.pack-container{display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.pack-container:hover{transform:scale(1.05) translateY(-10px)}.booster-pack-wrapper{position:relative;width:260px;height:400px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}.booster-pack{width:100%;height:100%;background:linear-gradient(135deg,var(--pack-red),var(--pack-red-dark));border-radius:12px;position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:inset 0 0 20px rgba(0,0,0,.5);border:2px solid hsla(0,0%,100%,.1)}.pack-bottom,.pack-top{height:25px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.2) 2px,hsla(0,0%,100%,.1) 0,hsla(0,0%,100%,.1) 4px);border-top:2px solid hsla(0,0%,100%,.3);border-bottom:2px solid rgba(0,0,0,.5)}.pack-body{flex:1 1;display:flex;justify-content:center;align-items:center;position:relative}.pack-art{text-align:center;z-index:2}.pack-title{font-family:var(--font-en);font-size:3rem;line-height:1;color:var(--gold);text-shadow:2px 2px 0 #000,-1px -1px 0 #fff;transform:rotate(-10deg)}.pack-subtitle{margin-top:10px;font-weight:700;letter-spacing:3px;color:#fff;background:#000;padding:4px 10px;border-radius:4px;font-size:.9rem}.pack-icon{font-size:4rem;margin-top:20px;filter:drop-shadow(0 10px 10px rgba(0,0,0,.5))}.pack-foil{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.05) 45%,hsla(0,0%,100%,.4) 50%,hsla(0,0%,100%,.05) 55%,hsla(0,0%,100%,0));transform:rotate(30deg);pointer-events:none;animation:foil-shine 6s linear infinite}@keyframes foil-shine{0%{transform:translateY(-50%) rotate(30deg)}to{transform:translateY(50%) rotate(30deg)}}.instructions{margin-top:2rem;font-size:1.2rem;color:#94a3b8;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.shake{animation:shake-anim .5s ease-in-out infinite}@keyframes shake-anim{0%{transform:translate(1px,1px) rotate(0deg)}20%{transform:translate(-3px) rotate(-2deg)}40%{transform:translate(1px,-1px) rotate(2deg)}60%{transform:translate(-3px,1px) rotate(0deg)}80%{transform:translate(3px,-1px) rotate(-2deg)}to{transform:translate(1px,-2px) rotate(2deg)}}.white-flash{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:100;opacity:0;pointer-events:none;transition:opacity .5s ease}.flash-active{opacity:1!important}.card-scene{width:320px;height:450px;perspective:1000px;display:flex;flex-direction:column;align-items:center}.card{width:100%;height:100%;position:relative;transition:transform 1.2s cubic-bezier(.175,.885,.32,1.275);transform-style:preserve-3d}.card.is-flipped{transform:rotateY(180deg)}.card__face{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:16px;box-shadow:0 15px 35px rgba(0,0,0,.4);overflow:hidden}.card__face--back{background:linear-gradient(135deg,#1e3a8a,#1e40af);border:12px solid #fbbf24}.card-back-pattern,.card__face--back{display:flex;justify-content:center;align-items:center}.card-back-pattern{width:90%;height:94%;border:2px solid hsla(0,0%,100%,.2);border-radius:8px;flex-direction:column;background:radial-gradient(circle at center,#2563eb 0,#1e3a8a 100%)}.card-back-logo h2{font-family:var(--font-en);font-size:3rem;color:var(--gold);text-shadow:2px 2px 0 #000;margin:0;line-height:1}.card-back-logo p{font-family:var(--font-en);font-size:1.5rem;color:#fff;text-align:center;letter-spacing:5px;margin:0}.pokeball-like{width:120px;height:120px;border:4px solid #fff;border-radius:50%;margin-top:30px;display:flex;justify-content:center;align-items:center;background:linear-gradient(180deg,#ef4444 50%,#fff 0)}.pokeball-center{width:30px;height:30px;background:#fff;border:4px solid #000;border-radius:50%}.card__face--front{background:#fdfdfd;transform:rotateY(180deg);border:1px solid #d1d5db}.card-border{margin:12px;height:calc(100% - 24px);background:linear-gradient(180deg,#f8fafc,#e2e8f0);border-radius:6px;border:2px solid #cbd5e1;position:relative;z-index:2}.card-content{padding:10px;display:flex;flex-direction:column;height:100%}.card-header{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:5px;border-bottom:2px solid #94a3b8}.rarity{font-weight:800;font-size:.8rem;color:#64748b;letter-spacing:1px}.hp{font-size:1.2rem;font-weight:900;color:#ef4444}.card-heading{padding:10px 0}.card-heading h2{font-size:1.4rem;color:#0f172a;line-height:1.2;margin:0;min-height:2em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-image-wrapper{border:4px solid #94a3b8;border-radius:4px;flex:1 1;position:relative;background:#0f172a;overflow:hidden;display:flex;justify-content:center;align-items:center;box-shadow:inset 0 0 10px rgba(0,0,0,.5)}.placeholder-icon{font-size:6rem;z-index:2}.holo-effect{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,hsla(0,100%,71%,.4),rgba(255,230,109,.4) 25%,rgba(78,205,196,.4) 50%,rgba(26,83,92,.4) 75%,hsla(0,100%,71%,.4));mix-blend-mode:color-dodge;opacity:.6;animation:holo-pan 8s linear infinite;z-index:1}@keyframes holo-pan{0%{background-position:0 0}to{background-position:200% 200%}}.card-moves{margin-top:15px;background:hsla(0,0%,100%,.6);border-radius:6px;padding:10px;min-height:120px}.move{display:flex;gap:10px}.move-cost{display:flex;gap:2px}.energy{font-size:1.2rem;background:#f1f5f9;border-radius:50%;width:24px;height:24px;display:flex;justify-content:center;align-items:center;box-shadow:0 1px 3px rgba(0,0,0,.2)}.move-details h3{font-size:1.1rem;color:#1e293b;margin-bottom:8px}.move-details p{font-size:.85rem;color:#475569;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-footer{display:flex;justify-content:space-between;padding-top:10px;font-size:.7rem;color:#64748b;border-top:1px solid #cbd5e1;margin-top:auto}.card-foil{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(115deg,transparent 20%,hsla(0,0%,100%,.6) 30%,hsla(0,0%,100%,0) 40%);z-index:10;pointer-events:none;transform:translateX(-100%);opacity:0;transition:opacity .3s}.card.is-flipped .card-foil{opacity:1;animation:flash 3s infinite}@keyframes flash{0%{transform:translateX(-100%)}20%{transform:translateX(100%)}to{transform:translateX(100%)}}.card-controls{margin-top:30px;display:flex;gap:15px;justify-content:center;transition:opacity .5s ease 1s}.btn{padding:12px 24px;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;text-decoration:none;transition:all .2s;border:none;display:inline-block}.btn-primary{background:var(--primary);color:#000;box-shadow:0 4px 14px rgba(0,220,130,.4)}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px)}.btn-secondary{background:transparent;color:#fff;border:2px solid #64748b}.btn-secondary:hover{background:hsla(0,0%,100%,.1);color:#fff}