@import"https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700;900&family=Sarabun:wght@400;600;700&display=swap";:root{--color-bg: #0a0a0f;--color-bg-secondary: #1a1a2e;--color-bg-tertiary: #16213e;--color-text: #e0e0e0;--color-text-muted: #888;--color-border: #333;--color-accent: #00d4ff;--color-accent-secondary: #7b2cbf;--tier-mythic: #ff6b35;--tier-legendary: #ffd700;--tier-epic: #a855f7;--tier-ultra: #3b82f6;--tier-rare: #22c55e;--tier-uncommon: #94a3b8;--tier-common: #78716c;--card-width: 300px;--card-height: 450px;--card-ratio: calc(var(--card-height) / var(--card-width));--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);min-height:100vh;min-height:100dvh;line-height:1.5;-webkit-font-smoothing:antialiased}@media(max-width:768px){main,.main{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}footer,.footer{display:none}.about-wrapper footer,.about-wrapper .footer{display:block;margin-bottom:calc(64px + env(safe-area-inset-bottom,0px))}}.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:calc(64px + env(safe-area-inset-bottom,0px));background:#0f0f19f2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.08);padding-bottom:env(safe-area-inset-bottom,0px);z-index:100}@media(max-width:768px){.bottom-nav.ready{display:flex;justify-content:space-around;align-items:center}}.bottom-nav .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;text-decoration:none;color:var(--color-text-muted);transition:color .15s;-webkit-tap-highlight-color:transparent}.bottom-nav .tab:hover{text-decoration:none}.bottom-nav .tab.active{color:var(--color-accent)}.bottom-nav .tab.locked{opacity:.6}.bottom-nav .tab-icon{position:relative;width:24px;height:24px}.bottom-nav .tab-icon svg{width:100%;height:100%}.bottom-nav .tab.active .tab-icon svg{stroke-width:2.5}.bottom-nav .tab-label{font-size:.65rem;font-weight:500;letter-spacing:.02em}.bottom-nav .badge{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 4px;font-size:.6rem;font-weight:700;color:#fff;background:var(--color-accent);border-radius:100px;display:flex;align-items:center;justify-content:center}.bottom-nav .lock-overlay{position:absolute;top:-4px;right:-6px;font-size:.55rem}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}a{color:var(--color-accent);text-decoration:none}a:hover{text-decoration:underline}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tier-mythic{color:var(--tier-mythic)}.tier-legendary{color:var(--tier-legendary)}.tier-epic{color:var(--tier-epic)}.tier-ultra{color:var(--tier-ultra)}.tier-rare{color:var(--tier-rare)}.tier-uncommon{color:var(--tier-uncommon)}.tier-common{color:var(--tier-common)}.bg-mythic{background:var(--tier-mythic)}.bg-legendary{background:var(--tier-legendary);color:#000}.bg-epic{background:var(--tier-epic)}.bg-ultra{background:var(--tier-ultra)}.bg-rare{background:var(--tier-rare)}.bg-uncommon{background:var(--tier-uncommon);color:#000}.bg-common{background:var(--tier-common)}*{scrollbar-width:thin;scrollbar-color:var(--color-bg-tertiary) transparent}*:hover{scrollbar-color:var(--color-accent) transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}::-webkit-scrollbar-corner{background:transparent}.pack-scaler{--base-width: 440px;--base-height: 884px;--pack-height: clamp(300px, 70vh, 700px);--pack-scale: calc(var(--pack-height) / var(--base-height));width:calc(var(--base-width) * var(--pack-scale));height:var(--pack-height);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:visible}.pack-stage{position:relative;width:var(--base-width);height:var(--base-height);transform:scale(var(--pack-scale));transform-origin:center;overflow:visible}.card-stack{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}.pack-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:440px;height:884px;perspective:600px;pointer-events:none;z-index:10}.pack-area{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:0;width:100%;padding:24px;overflow:visible}.stack-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.95);opacity:0;transition:opacity .3s,transform .4s}.stack-card.visible{opacity:1}.stack-card.top{transform:translate(-50%,-50%) scale(1);z-index:10!important}.stack-card.swiped{opacity:0;transform:translate(calc(-50% + 500px),-50%) rotate(15deg);transition:opacity .3s,transform .4s cubic-bezier(.25,.46,.45,.94);z-index:20!important}.pack-whole{position:absolute;inset:0;z-index:5;background:none;border:none;padding:0;cursor:pointer;pointer-events:auto;filter:drop-shadow(0 8px 32px rgba(0,0,0,.5));transition:filter .2s ease-out,transform .2s ease-out}.pack-whole:hover{filter:drop-shadow(0 12px 40px rgba(0,0,0,.6)) brightness(1.05);transform:scale(1.02)}.pack-whole img{width:100%;height:100%;object-fit:contain}.tear-strip{position:absolute;inset:0;transform-origin:70% 15%;z-index:3;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}.tear-strip img{width:100%;height:100%;object-fit:contain}.pack-body-shadow{position:absolute;inset:0;filter:drop-shadow(0 8px 32px rgba(0,0,0,.5))}.pack-body{position:absolute;inset:0}.pack-body img{width:100%;height:100%;object-fit:contain}.pack-stage.revealing .card-stack{animation:cards-pull-out 1s ease-out}.pack-stage.interactive .card-stack{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}.pack-stage.interactive .card-stack:active{cursor:grabbing}.pack-stage.interactive .card-stack img{-webkit-user-drag:none;user-drag:none;pointer-events:none}@keyframes cards-pull-out{0%{transform:translateY(0)}50%{transform:translateY(-15%)}to{transform:translateY(0)}}.card-stack.scale-up{animation:scale-up-cards .5s ease-out .1s forwards}@keyframes scale-up-cards{0%{transform:scale(1)}to{transform:scale(var(--interactive-scale, 1.4))}}.tearing .tear-strip{animation:tear-away .5s cubic-bezier(.33,1,.68,1) forwards}@keyframes tear-away{0%{transform:translateY(0) translate(0) rotate(0) rotateX(0);opacity:1}to{transform:translateY(-180px) translate(90px) rotate(16deg) rotateX(-50deg);opacity:0}}.revealing .pack-body{animation:wrapper-slide-down .5s linear forwards}@keyframes wrapper-slide-down{0%{transform:translateY(0);opacity:1}65%{transform:translateY(27%);opacity:1}to{transform:translateY(90%);opacity:0}}.done{display:none}.pack-scaler.rainbow .pack-whole:before,.pack-scaler.rainbow .pack-body:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 0%,transparent 40%,rgba(255,0,0,.5) 45%,rgba(255,127,0,.5) 48%,rgba(255,255,0,.5) 51%,rgba(0,255,0,.5) 54%,rgba(0,255,255,.5) 57%,rgba(0,127,255,.5) 60%,rgba(139,0,255,.5) 65%,transparent 70%,transparent 100%);background-size:400% 100%;background-repeat:repeat-x;animation:rainbow-wave 8s linear infinite;animation-delay:var(--rainbow-sync);pointer-events:none;z-index:10;mix-blend-mode:screen;will-change:background-position;-webkit-mask-image:var(--pack-url);mask-image:var(--pack-url);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.pack-scaler.rainbow .pack-whole:after,.pack-scaler.rainbow .pack-body:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 0%,transparent 35%,rgba(255,0,0,.5) 40%,rgba(255,127,0,.5) 45%,rgba(255,255,0,.5) 50%,rgba(0,255,0,.5) 55%,rgba(0,255,255,.5) 57%,rgba(0,127,255,.5) 63%,rgba(139,0,255,.5) 70%,transparent 75%,transparent 100%);background-size:400% 100%;background-repeat:repeat-x;animation:rainbow-wave 8s linear infinite;animation-delay:calc(var(--rainbow-sync) + 4s);pointer-events:none;z-index:10;mix-blend-mode:screen;will-change:background-position;-webkit-mask-image:var(--pack-url);mask-image:var(--pack-url);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}@keyframes rainbow-wave{0%{background-position:110% 0}to{background-position:-10% 0}}@media(max-width:768px){.pack-area{padding:16px}.pack-scaler{--pack-height: clamp(250px, 60vh, 500px)}}@media(max-width:480px){.pack-area{padding:12px}.pack-scaler{--pack-height: clamp(200px, 55vh, 400px)}}.showcase-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 12px 12px;width:100%;flex:1;min-height:0;overflow:hidden}.showcase-container.has-focus{overflow:visible}.showcase-grid{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;column-gap:8px;row-gap:48px}.showcase-card{position:relative;flex-shrink:0;opacity:1;transform:translateY(0) scale(1);animation:showcase-enter .4s ease-out backwards;animation-delay:var(--delay);transition:transform .3s cubic-bezier(.22,1,.36,1)}.showcase-card.focused,.showcase-card.returning{z-index:1001}@keyframes showcase-enter{0%{opacity:0;transform:translateY(20px) scale(.95)}}.focus-backdrop{position:fixed;inset:0;background:#000000d9;z-index:1000;cursor:pointer;border:none;padding:0;animation:backdrop-fade-in .25s ease-out forwards}@keyframes backdrop-fade-in{0%{background:#0000}to{background:#000000d9}}.card-container{position:relative;cursor:pointer}.duplicate-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-100%);margin-top:-8px;display:flex;flex-direction:row;align-items:center;gap:6px;padding:6px 12px;background:linear-gradient(135deg,#14141ef2,#0a0a14f2);border:2px solid #ffd700;border-radius:10px;box-shadow:0 4px 16px #00000080,0 0 16px #ffd7004d;z-index:10;pointer-events:none;white-space:nowrap}.badge-caret{position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #ffd700}.badge-caret:after{content:"";position:absolute;top:-10px;left:-6px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(15,15,25,.95)}.showcase-card.focused .duplicate-badge{opacity:0;transition:opacity .3s ease-out}.duplicate-label{font-size:.55rem;font-weight:600;color:#ffd700cc;letter-spacing:.08em;text-transform:uppercase}.duplicate-value{display:flex;align-items:center;gap:3px}.duplicate-amount{font-size:.9rem;font-weight:700;color:gold;text-shadow:0 0 8px rgba(255,215,0,.5)}.actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex-shrink:0;margin-top:24px}.actions-row{display:flex;justify-content:center;gap:12px}.action-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font-size:.9rem;font-weight:600;border-radius:100px;cursor:pointer;transition:all .2s var(--ease-out)}.action-btn.secondary{color:var(--color-text-muted);background:transparent;border:1px solid var(--color-border)}.action-btn.secondary:hover{color:var(--color-text);border-color:var(--color-text-muted);background:#ffffff0d}.action-btn.primary{color:#000;background:linear-gradient(135deg,var(--color-accent),#00a8cc);border:none;box-shadow:0 4px 16px #00d4ff4d}.action-btn.primary:hover{transform:scale(1.02);box-shadow:0 8px 24px #00d4ff80}.action-btn svg{flex-shrink:0}@media(max-width:768px){.showcase-container{padding:40px 10px 10px;gap:10px}.showcase-grid{column-gap:6px;row-gap:40px}}@media(max-width:480px){.showcase-container{padding:32px 8px 8px;gap:8px}.showcase-grid{column-gap:4px;row-gap:32px}.actions{gap:6px}.actions-row{gap:8px}.action-btn{padding:10px 14px;font-size:.8rem;gap:6px}.action-btn svg{width:16px;height:16px}.duplicate-badge{padding:3px 6px;gap:4px;border-width:1px;border-radius:6px;margin-top:-5px}.duplicate-label{font-size:.45rem}.duplicate-amount{font-size:.7rem}.duplicate-value svg{width:12px;height:12px}.badge-caret{bottom:-5px;border-left-width:5px;border-right-width:5px;border-top-width:5px}.badge-caret:after{top:-6px;left:-4px;border-left-width:4px;border-right-width:4px;border-top-width:4px}}html,body{background:#0a0a0f;color:#e0e0e0}