:root{--bg:#f0f0f0;--ink:#111;--pink:#ff4081;--yellow:#ffeb3b;--green:#76ff03;--cyan:#00d4ff;--purple:#8c52ff;--shadow:6px;--pokemon:#ffde00;--onepiece:#ff3333;--yugioh:#8c52ff;--digimon:#00d4ff;--gundam:#c9d4dd}*{box-sizing:border-box}html{min-width:320px;min-height:100%;background:var(--bg)}body{margin:0;min-height:100vh;color:var(--ink);font-family:Outfit,Arial,sans-serif;background-color:var(--bg);background-image:radial-gradient(#111 1px,transparent 1px);background-size:24px 24px;overflow-x:hidden}button,select{font:inherit}button{color:inherit}.app-shell{min-height:100svh}.screen{min-height:100svh;width:100%;padding:36px 20px;display:none;position:relative;isolation:isolate}.screen.active{display:flex}.screen[hidden]{display:none!important}.home-screen{align-items:center;justify-content:center;flex-direction:column;padding-top:48px;padding-bottom:48px}.home-heading{text-align:center;z-index:2;margin-bottom:18px}.home-heading h1{font-size:clamp(48px,8vw,76px);line-height:.95;font-weight:900;letter-spacing:-.075em;text-transform:uppercase;margin:0 0 13px;text-shadow:4px 4px 0 var(--pink)}.home-heading h1 span{color:var(--pink)}.home-heading>p{display:inline-block;margin:0;padding:0 0 4px;border-bottom:4px solid #111;font-size:clamp(18px,3vw,25px);font-weight:800}.carousel{width:min(900px,100%);height:clamp(330px,53vh,450px);position:relative;display:grid;place-items:center;perspective:1000px;margin-bottom:14px;z-index:2}.carousel-cards{position:absolute;inset:0;perspective:1000px}.carousel-card{width:240px;height:336px;position:absolute;left:50%;top:50%;padding:0;transform-style:preserve-3d;cursor:pointer;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s,filter .3s;border:0;background:transparent}.carousel-card-inner{width:100%;height:100%;overflow:hidden;border:4px solid var(--ink);border-radius:12px;background:white;box-shadow:6px 6px 0 var(--ink);transition:box-shadow .2s,border-color .2s}.carousel-card.is-selected .carousel-card-inner{box-shadow:0 0 0 4px var(--bg),0 0 0 8px var(--ink),7px 8px 0 var(--ink)}.carousel-card img{display:block;width:100%;height:100%;object-fit:cover}.carousel-control{position:absolute;top:50%;z-index:12;transform:translateY(-50%);width:48px;height:48px;display:grid;place-items:center;border:4px solid var(--ink);border-radius:50%;box-shadow:4px 4px 0 var(--ink);background:#fff;font-size:25px;font-weight:700;cursor:pointer;transition:transform .12s,background .12s}.carousel-control:hover{transform:translateY(calc(-50% - 2px));background:var(--yellow)}.carousel-control:active{transform:translateY(calc(-50% + 3px));box-shadow:1px 1px 0 var(--ink)}.carousel-control.prev{left:clamp(4px,8vw,70px)}.carousel-control.next{right:clamp(4px,8vw,70px)}.home-actions,.result-actions,.collection-actions{z-index:3;display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}.btn{min-height:52px;padding:12px 28px;border:4px solid var(--ink);border-radius:9px;box-shadow:4px 4px 0 var(--ink);font-size:16px;font-weight:850;letter-spacing:.035em;text-transform:uppercase;cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s}.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:4px 4px 0 var(--ink)}.btn-primary{background:var(--green)}.btn-secondary{background:#fff}.btn-secondary:hover{background:var(--yellow)}.demo-caption{position:absolute;right:20px;bottom:12px;margin:0;font-size:10px;font-weight:700;opacity:.55}.screen-title,.result-heading h2,.collection-heading h2{margin:0;text-align:center;font-size:clamp(30px,5vw,48px);font-weight:900;letter-spacing:-.045em;text-transform:uppercase;text-shadow:3px 3px 0 var(--pink)}.pack-screen{align-items:center;justify-content:center;flex-direction:column;gap:28px;overflow:hidden}.pack-screen:before,.pack-screen:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(80px);opacity:.14;z-index:-1;background:var(--purple);left:-100px;top:10%}.pack-screen:after{left:auto;top:auto;right:-110px;bottom:7%;background:var(--cyan)}.pack-button{position:relative;display:block;border:0;padding:0;background:transparent;perspective:1000px;cursor:pointer}.booster-pack{width:256px;height:384px;display:flex;flex-direction:column;overflow:hidden;border:4px solid #111;border-radius:12px;background:var(--pokemon);box-shadow:7px 7px 0 #111;position:relative;z-index:1;transition:transform .18s,opacity .5s,filter .5s}.pack-button:not(.is-opening):hover .booster-pack{transform:scale(1.04) rotate(2deg)}.booster-pack.is-shaking{animation:shake .5s ease-in-out 1}.booster-pack.is-opened{transform:scale(.05) rotate(15deg);opacity:0}.pack-glow{position:absolute;inset:0;border-radius:32px;opacity:0;z-index:0;pointer-events:none}.pack-glow.active{animation:pack-glow .8s ease-out forwards}.pack-crimp{height:24px;flex:none;border-bottom:4px solid #111;background-color:white;background-image:repeating-linear-gradient(90deg,transparent,transparent 10px,rgba(0,0,0,.1) 10px,rgba(0,0,0,.1) 20px)}.bottom-crimp{border-top:4px solid #111;border-bottom:0}.pack-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;position:relative}.pack-card{display:block;width:128px;height:176px;margin-bottom:22px;padding:7px;border:4px solid #111;border-radius:9px;background:#fff;box-shadow:4px 4px 0 #111;transform:rotate(-5deg);transition:transform .25s}.pack-button:hover .pack-card{transform:rotate(0)}.pack-card img{width:100%;height:100%;object-fit:cover;border-radius:4px}.pack-name{display:block;padding:6px 14px;border:4px solid #111;background:#fff;text-align:center;font-size:24px;font-weight:900;line-height:1.05;text-transform:uppercase;letter-spacing:-.05em;transform:rotate(2deg)}.pack-label{margin-top:16px;padding:4px 12px;border:2px solid #111;border-radius:4px;background:#111;color:#fff;font-size:13px;font-weight:850;text-transform:uppercase;transform:rotate(-3deg)}.pack-hint{margin:0;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.loading-screen{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px}.loading-screen p{font-size:18px;font-weight:750;letter-spacing:.04em;animation:pulse 1s infinite}.spinner{width:64px;height:64px;position:relative;animation:spin 2s linear infinite}.spinner:before,.spinner:after{content:"";position:absolute;inset:0;border:3px solid transparent;border-top-color:var(--purple);border-right-color:var(--cyan);border-radius:50%}.spinner:after{inset:10px;border-top-color:var(--yellow);border-right-color:var(--pink);animation:spin 1s linear infinite reverse}.reveal-screen{align-items:center;justify-content:center;flex-direction:column;gap:23px;padding-block:26px}.reveal-heading{z-index:2;display:flex;flex-direction:column;align-items:center;gap:13px}.progress-dots{display:flex;align-items:center;justify-content:center;gap:10px}.progress-dot{width:32px;height:12px;border:2px solid #111;border-radius:6px;background:white;box-shadow:2px 2px 0 #111;transition:width .25s,background .25s}.progress-dot.done{background:#4caf50}.progress-dot.current{width:48px;background:var(--yellow)}.counter{padding:6px 14px;border:3px solid #111;border-radius:5px;background:#111;box-shadow:3px 3px 0 #111;color:#fff;font-weight:900;letter-spacing:.04em}.counter b{color:var(--pink)}.reveal-card{width:min(330px,78vw);perspective:1000px}.flip-card{width:100%;aspect-ratio:2.5/3.5;position:relative;transform-style:preserve-3d;cursor:pointer;transition:transform .68s cubic-bezier(.2,.78,.24,1)}.flip-card.flipped{transform:rotateY(180deg)}.flip-face{position:absolute;inset:0;overflow:hidden;border:4px solid #111;border-radius:13px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff}.flip-back{box-shadow:6px 6px 0 #111}.flip-back img{width:100%;height:100%;object-fit:cover}.flip-front{transform:rotateY(180deg);display:flex;flex-direction:column;padding:10px;background:#fff}.card-topline{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 8px;border:2px solid #111;background:var(--card-color,#ffde00);font-size:12px;font-weight:900;text-transform:uppercase}.card-art{flex:1;min-height:0;margin:9px 0;border:3px solid #111;display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 35%,var(--art-light,#fff) 0,transparent 32%),linear-gradient(145deg,var(--art-color,#facc15),#fb7185 50%,#312e81);}.card-art:before,.card-art:after{content:"";position:absolute;width:190px;height:190px;border:2px solid rgba(255,255,255,.64);border-radius:50%;transform:rotate(-24deg) scaleY(.45)}.card-art:after{width:135px;height:135px;transform:rotate(35deg) scaleY(.55)}.card-emoji{position:relative;z-index:1;font-size:clamp(54px,13vw,92px);filter:drop-shadow(4px 5px 0 rgba(0,0,0,.2));animation:float 2.4s ease-in-out infinite}.card-info{padding:8px;border:2px solid #111;background:#fff}.card-info h3{margin:0;font-size:clamp(13px,3vw,18px);font-weight:900;line-height:1.1}.card-info p{margin:5px 0 0;font-size:9px;line-height:1.35;font-weight:600}.card-stats{display:flex;justify-content:space-between;margin-top:7px;padding-top:6px;border-top:1px solid #111;font-size:9px;font-weight:900;text-transform:uppercase}.rarity-common{box-shadow:6px 6px 0 #111}.rarity-uncommon{box-shadow:6px 6px 0 #111;border-color:var(--cyan)}.rarity-rare{box-shadow:8px 8px 0 #111;border-color:#3b82f6}.rarity-super{box-shadow:8px 8px 0 #111;border-width:5px;border-color:#a855f7}.rarity-ultra{box-shadow:10px 10px 0 #111;border-width:6px;border-color:#fbbf24}.next-card-button{margin-top:2px}.flip-hint{margin:0;font-size:11px;font-weight:800;opacity:.65;text-transform:uppercase;letter-spacing:.05em}.result-screen{align-items:center;justify-content:center;flex-direction:column;gap:36px;padding-block:45px}.result-heading{text-align:center}.result-heading p{display:inline-block;margin:10px 0 0;border-bottom:2px solid #111;padding-bottom:4px;font-size:17px;font-weight:800}.result-grid{width:min(1100px,100%);display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;gap:24px}.result-card{position:relative;width:min(150px,25vw);text-align:center;transition:transform .2s}.result-card:hover{transform:translateY(-6px) scale(1.02)}.result-art{width:100%;aspect-ratio:2.5/3.5;overflow:hidden;border:4px solid #111;border-radius:11px;box-shadow:6px 6px 0 #111;background:linear-gradient(145deg,var(--art-color),#fb7185 55%,#312e81);display:grid;place-items:center}.result-art span{font-size:clamp(42px,8vw,72px);filter:drop-shadow(3px 3px 0 #111)}.result-card.is-best:before{content:"⭐ Best Pull!";position:absolute;z-index:2;top:-12px;right:-10px;padding:4px 7px;border:2px solid #111;background:var(--yellow);box-shadow:2px 2px 0 #111;font-size:9px;font-weight:900;transform:rotate(5deg)}.result-card h3{overflow:hidden;margin:11px 0 3px;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.rarity-tag{display:inline-block;margin-top:3px;padding:3px 8px;border-radius:4px;background:#111;color:#fff;font-size:10px;font-weight:800}.result-actions{gap:13px}.collection-screen{align-items:center;flex-direction:column;gap:28px;padding:50px 24px}.collection-heading{text-align:center}.collection-heading h2{font-size:clamp(35px,6vw,58px)}.collection-count{display:inline-block;margin:15px 0 0;padding:8px 14px;border:2px solid #111;background:#fff;box-shadow:3px 3px 0 #111;font-weight:800}.collection-actions{gap:12px}.collection-actions .btn{min-height:44px;padding:9px 18px;font-size:13px}.filters{width:min(1400px,100%);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px}.game-filter,.rarity-filter{min-height:62px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 13px;border:4px solid #111;border-radius:10px;background:#fff;box-shadow:6px 6px 0 #111}.game-filter>b,.rarity-filter>b{font-size:12px;font-weight:900}.game-filter>div{display:flex;flex-wrap:wrap;gap:7px}.filter-button,.rarity-filter select{padding:6px 9px;border:2px solid #111;background:#fff;font-size:12px;font-weight:800;cursor:pointer}.filter-button.is-active{background:var(--yellow);box-shadow:2px 2px 0 #111;transform:translateY(-1px)}.rarity-filter select{max-width:170px;box-shadow:2px 2px 0 #111}.collection-grid{width:min(1400px,100%);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}.collection-item{text-align:center;min-width:0;position:relative}.collection-item:hover .collection-art{transform:scale(1.04) rotate(-2deg)}.collection-art{width:100%;aspect-ratio:2.5/3.5;display:grid;place-items:center;overflow:hidden;border-radius:11px;background:linear-gradient(145deg,var(--art-color),#fb7185 55%,#312e81);transition:transform .2s}.collection-art span{font-size:clamp(30px,5vw,60px)}.duplicate-badge{position:absolute;right:-9px;top:-10px;z-index:2;padding:4px 8px;border:2px solid #111;background:var(--cyan);box-shadow:2px 2px 0 #111;font-size:12px;font-weight:900}.collection-item h3{margin:10px 0 4px;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.collection-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:55px 20px;text-align:center}.collection-empty span{font-size:55px}.collection-empty b{margin-top:8px;font-size:23px;font-weight:900;text-transform:uppercase}.collection-empty p{margin:6px 0 18px;color:#444;font-weight:700}.error-screen{align-items:center;justify-content:center}.error-box{width:min(460px,100%);padding:32px;border:4px solid #111;border-radius:12px;background:#fff;box-shadow:8px 8px 0 #111;text-align:center}.error-box>span{font-size:52px}.error-box h2{font-size:22px;font-weight:900;text-transform:uppercase}.error-box p{margin-bottom:23px;font-weight:700;color:#555}.error-box>div{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.error-box .btn{font-size:13px;padding:10px 14px}.collection-screen .btn,.home-screen .btn{font-size:15px}
@keyframes shake{0%,100%{transform:translateX(0) rotate(0)}10%{transform:translateX(-8px) rotate(-4deg)}20%{transform:translateX(8px) rotate(4deg)}30%{transform:translateX(-6px) rotate(-3deg)}40%{transform:translateX(6px) rotate(3deg)}50%{transform:translateX(-4px) rotate(-2deg)}60%{transform:translateX(4px) rotate(2deg)}70%{transform:translateX(-2px) rotate(-1deg)}80%{transform:translateX(2px) rotate(1deg)}90%{transform:translateX(-1px)}}@keyframes pack-glow{0%{opacity:0;transform:scale(.5);box-shadow:0 0 15px 5px var(--tcg-color)}50%{opacity:1;transform:scale(1.4);box-shadow:0 0 100px 50px var(--tcg-color)}100%{opacity:0;transform:scale(2);box-shadow:0 0 120px 55px var(--tcg-color)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.45}}@keyframes float{50%{transform:translateY(-8px)}}
@media(max-width:1000px){.collection-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.filters{grid-template-columns:1fr}.rarity-filter{min-height:58px}}
@media(max-width:700px){.screen{padding-inline:16px}.home-screen{padding-top:32px;padding-bottom:50px}.home-heading{margin-bottom:8px}.home-heading h1{font-size:56px}.carousel{height:355px;margin-bottom:7px;overflow:hidden}.carousel-card{width:205px;height:287px}.carousel-control.prev{left:1px}.carousel-control.next{right:1px}.home-actions{width:min(400px,100%);gap:12px}.home-actions .btn{flex:1;min-width:145px;padding-inline:12px;font-size:14px}.demo-caption{left:0;right:0;text-align:center;font-size:9px}.booster-pack{width:230px;height:345px}.pack-card{width:115px;height:158px}.screen-title{font-size:32px}.reveal-screen{gap:20px}.reveal-card{width:min(300px,76vw)}.progress-dots{gap:8px}.progress-dot{width:25px}.progress-dot.current{width:39px}.result-screen{gap:27px;padding-block:34px}.result-grid{gap:18px 14px}.result-card{width:calc(33.333% - 12px)}.result-card h3{font-size:11px}.result-actions{width:min(400px,100%)}.result-actions .btn{width:100%;font-size:13px}.collection-screen{padding:34px 14px;gap:21px}.collection-heading h2{font-size:40px}.collection-actions{width:100%}.collection-actions .btn{flex:1;padding-inline:8px}.filters{gap:12px}.game-filter,.rarity-filter{padding:9px;border-width:3px;box-shadow:4px 4px 0 #111}.game-filter{align-items:flex-start;flex-direction:column}.game-filter>div{width:100%;gap:6px}.filter-button{font-size:10px;padding:5px 7px}.rarity-filter{align-items:center;justify-content:space-between}.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px}.collection-item h3{font-size:11px}.rarity-tag{font-size:9px}.error-box{padding:24px 18px}}
@media(max-width:390px){.carousel{height:320px}.carousel-card{width:180px;height:252px}.carousel-control{width:42px;height:42px}.home-heading h1{font-size:49px}.btn{font-size:14px}.result-card{width:calc(33.333% - 10px)}.result-grid{gap:16px 12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
[hidden]{display:none!important}
.carousel-card-inner{display:block;position:relative;width:100%;height:100%;overflow:hidden}.carousel-card.is-selected{z-index:20!important}.carousel-card img{display:block;width:100%;height:100%;object-fit:cover}