@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:gold;--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);-webkit-font-smoothing:antialiased;min-height:100dvh;line-height:1.5}@media (width<=768px){main,.main{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}footer,.footer{display:none}.about-wrapper footer,.about-wrapper .footer{margin-bottom:calc(64px + env(safe-area-inset-bottom,0px));display:block}}.bottom-nav{height:calc(64px + env(safe-area-inset-bottom,0px));-webkit-backdrop-filter:blur(12px);padding-bottom:env(safe-area-inset-bottom,0px);z-index:100;background:#0f0f19f2;border-top:1px solid #ffffff14;display:none;position:fixed;bottom:0;left:0;right:0}@media (width<=768px){.bottom-nav.ready{justify-content:space-around;align-items:center;display:flex}}.bottom-nav .tab{color:var(--color-text-muted);-webkit-tap-highlight-color:transparent;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;padding:8px 4px;text-decoration:none;transition:color .15s;display:flex}.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{width:24px;height:24px;position:relative}.bottom-nav .tab-icon svg{width:100%;height:100%}.bottom-nav .tab.active .tab-icon svg{stroke-width:2.5px}.bottom-nav .tab-label{letter-spacing:.02em;font-size:.65rem;font-weight:500}.bottom-nav .badge{color:#fff;background:var(--color-accent);border-radius:100px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 4px;font-size:.6rem;font-weight:700;display:flex;position:absolute;top:-6px;right:-8px}.bottom-nav .lock-overlay{font-size:.55rem;position:absolute;top:-4px;right:-6px}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}a{color:var(--color-accent);text-decoration:none}a:hover{text-decoration:underline}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.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:0 0}::-webkit-scrollbar-thumb{background:var(--color-bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}::-webkit-scrollbar-corner{background:0 0}.showcase-container{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;width:100%;min-height:0;padding:48px 12px 12px;display:flex;overflow:hidden}.showcase-container.has-focus{overflow:visible}.showcase-grid{flex-wrap:wrap;place-content:center;gap:48px 8px;display:flex}.showcase-card{opacity:1;animation:.4s ease-out backwards showcase-enter;animation-delay:var(--delay);flex-shrink:0;transition:transform .3s cubic-bezier(.22,1,.36,1);position:relative;transform:translateY(0)scale(1)}.showcase-card.focused,.showcase-card.returning{z-index:1001}@keyframes showcase-enter{0%{opacity:0;transform:translateY(20px)scale(.95)}}.focus-backdrop{z-index:1000;cursor:pointer;background:#000000d9;border:none;padding:0;animation:.25s ease-out forwards backdrop-fade-in;position:fixed;inset:0}@keyframes backdrop-fade-in{0%{background:0 0}to{background:#000000d9}}.card-container{cursor:pointer;position:relative}.duplicate-badge{pointer-events:none;z-index:10;pointer-events:none;white-space:nowrap;background:linear-gradient(135deg,#14141ef2,#0a0a14f2);border:2px solid gold;border-radius:10px;flex-direction:row;align-items:center;gap:6px;margin-top:-8px;padding:6px 12px;display:flex;position:absolute;top:0;left:50%;transform:translate(-50%,-100%);box-shadow:0 4px 16px #00000080,0 0 16px #ffd7004d}.badge-caret{border-top:8px solid gold;border-left:8px solid #0000;border-right:8px solid #0000;width:0;height:0;position:absolute;bottom:-8px;left:50%;transform:translate(-50%)}.badge-caret:after{content:"";border-top:6px solid #0f0f19f2;border-left:6px solid #0000;border-right:6px solid #0000;width:0;height:0;position:absolute;top:-10px;left:-6px}.showcase-card.focused .duplicate-badge{opacity:0;transition:opacity .3s ease-out}.duplicate-label{color:#ffd700cc;letter-spacing:.08em;text-transform:uppercase;font-size:.55rem;font-weight:600}.duplicate-value{align-items:center;gap:3px;display:flex}.duplicate-amount{color:gold;text-shadow:0 0 8px #ffd70080;font-size:.9rem;font-weight:700}.actions{flex-direction:column;flex-shrink:0;align-items:stretch;gap:8px;margin-top:24px;display:flex}.actions-row{justify-content:center;gap:12px;display:flex}.action-btn{cursor:pointer;transition:all .2s var(--ease-out);border-radius:100px;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:.9rem;font-weight:600;display:flex}.action-btn.secondary{color:var(--color-text-muted);border:1px solid var(--color-border);background:0 0}.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 (width<=768px){.showcase-container{gap:10px;padding:40px 10px 10px}.showcase-grid{gap:40px 6px}}@media (width<=480px){.showcase-container{gap:8px;padding:32px 8px 8px}.showcase-grid{gap:32px 4px}.actions{gap:6px}.actions-row{gap:8px}.action-btn{gap:6px;padding:10px 14px;font-size:.8rem}.action-btn svg{width:16px;height:16px}.duplicate-badge{border-width:1px;border-radius:6px;gap:4px;margin-top:-5px;padding:3px 6px}.duplicate-label{font-size:.45rem}.duplicate-amount{font-size:.7rem}.duplicate-value svg{width:12px;height:12px}.badge-caret{border-top-width:5px;border-left-width:5px;border-right-width:5px;bottom:-5px}.badge-caret:after{border-top-width:4px;border-left-width:4px;border-right-width:4px;top:-6px;left:-4px}}html,body{color:#e0e0e0;background:#0a0a0f}
