@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap";:root{--color-bg-base:#0a0a0f;--color-bg-surface:#191923b3;--color-bg-surface-hover:#282837cc;--color-bg-elevated:#1e1e2ae6;--color-text-primary:#f0f0f5;--color-text-secondary:#a0a0b5;--color-text-dim:#a0a0b580;--color-text-on-primary:#000;--color-brand-primary:#d4af37;--color-brand-primary-rgb:212, 175, 55;--color-brand-primary-glow:#d4af3766;--color-brand-primary-muted:#d4af3726;--color-brand-accent:#8b5cf6;--color-ui-border:#ffffff1a;--color-ui-border-strong:#fff3;--color-ui-danger:#ff4d4f;--color-ui-danger-bg:#ff4d4f1a;--color-ui-warning:#ff6b6b;--color-ui-interactive-hover:#ffffff0d;--color-toast-error-bg:#dc2626f2;--color-toast-error-border:#f8717180;--color-toast-warning-bg:#d97706f2;--color-toast-warning-border:#fbbf2480;--color-toast-success-bg:#16a34af2;--color-toast-success-border:#4ade8080;--color-toast-info-bg:#1e3a8af2;--color-toast-info-border:#60a5fa80;--color-hsr-element-lightning:#d97afe;--color-hsr-element-imaginary:#f4d258;--color-hsr-element-fire:#f84f36;--color-hsr-element-ice:#47c7fd;--color-hsr-element-quantum:#7864aa;--color-hsr-element-wind:#5bc89f;--color-hsr-element-physical:#bcbcbc;--color-hsr-element-thunder:#d97afe;--color-hsr-path-destruction:#ff9090;--color-hsr-path-the-hunt:#f5d68a;--color-hsr-path-erudition:#7fe4d0;--color-hsr-path-harmony:#f0a8d8;--color-hsr-path-nihility:#c9a8f8;--color-hsr-path-preservation:#8ab8f5;--color-hsr-path-abundance:#90e09a;--color-hsr-path-remembrance:#90e8f8;--color-hsr-path-elation:#ffc875;--color-r1999-afflatus-plant:#90e09a;--color-r1999-afflatus-star:#f5d68a;--color-r1999-afflatus-beast:#f5b080;--color-r1999-afflatus-mineral:#a8c8f0;--color-r1999-afflatus-intellect:#c9a8f8;--color-r1999-afflatus-spirit:#90d0f0;--color-r1999-damage-mental:#c9a8f8;--color-r1999-damage-reality:#f5d68a;--color-tier-splus:#ff6b35;--color-tier-s:gold;--color-tier-a:#7fbfff;--color-tier-b:#8be28b;--typography-font-family-base:"Inter", system-ui, sans-serif;--typography-font-size-xs:.7rem;--typography-font-size-sm:.8rem;--typography-font-size-base:.9rem;--typography-font-size-md:1rem;--typography-font-size-lg:1.1rem;--typography-font-size-xl:1.2rem;--typography-font-size-xl2:1.25rem;--typography-font-size-2xl:1.5rem;--typography-font-size-3xl:1.8rem;--typography-font-size-4xl:2.2rem;--typography-font-size-5xl:3rem;--typography-font-size-display:4rem;--typography-font-weight-normal:400;--typography-font-weight-medium:500;--typography-font-weight-semibold:600;--typography-font-weight-bold:700;--typography-font-weight-extrabold:800;--typography-line-height-tight:1.3;--typography-line-height-base:1.4;--typography-line-height-relaxed:1.5;--typography-line-height-loose:1.6;--spacing-1:2px;--spacing-2:4px;--spacing-3:6px;--spacing-5:10px;--spacing-6:12px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--spacing-3xl:64px;--border-radius-xs:2px;--border-radius-sm:4px;--border-radius-md:8px;--border-radius-badge:10px;--border-radius-lg:16px;--border-radius-xl:20px;--border-radius-full:9999px;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 12px #0000004d;--shadow-lg:0 10px 30px #00000080;--shadow-xl:0 20px 50px #00000080;--shadow-glow-primary:0 0 15px #d4af3766;--shadow-glow-sm:0 0 8px #d4af3766;--shadow-inset-glow:0 0 8px #d4af3766 inset;--shadow-modal:0 20px 50px #00000080, 0 0 20px #d4af3766;--shadow-card-hover:0 10px 30px #00000080, 0 0 15px #d4af3766;--z-index-base:0;--z-index-card:1;--z-index-overlay:2;--z-index-controls:3;--z-index-sticky:100;--z-index-modal:1000;--z-index-toast:9999;--transition-fast:.15s ease;--transition-normal:.3s ease;--transition-slow:.5s ease}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-in-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes toast-slide-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes saving-toast-pulse{0%,to{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}@keyframes spinner-bounce{0%,80%,to{opacity:.3;transform:scale(.6)}40%{opacity:1;transform:scale(1)}}@keyframes pulse-warn{0%{box-shadow:0 0 #ff6b6b00}to{box-shadow:0 0 10px #ff6b6b66}}:root{--color-primary:var(--color-brand-primary);--color-primary-glow:var(--color-brand-primary-glow);--color-accent:var(--color-brand-accent);--color-border:var(--color-ui-border);--font-family-base:var(--typography-font-family-base);--radius-sm:var(--border-radius-sm);--radius-md:var(--border-radius-md);--radius-lg:var(--border-radius-lg)}body{font-family:var(--font-family-base);background-color:var(--color-bg-base);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 15%,#8b5cf626,#0000 25%),radial-gradient(circle at 85% 30%,#d4af371a,#0000 25%);background-attachment:fixed;min-height:100vh;margin:0}*{box-sizing:border-box}h1,h2,h3,h4{letter-spacing:-.02em;margin:0;font-weight:600}a{color:var(--color-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-brand-primary);text-shadow:0 0 8px var(--color-brand-primary-glow)}button{border:1px solid var(--color-ui-border);color:var(--color-text-primary);padding:var(--spacing-5) var(--spacing-md);border-radius:var(--border-radius-md);font-family:var(--typography-font-family-base);font-size:var(--typography-font-size-md);font-weight:var(--typography-font-weight-medium);cursor:pointer;transition:all var(--transition-normal);-webkit-backdrop-filter:blur(10px);background:linear-gradient(135deg,#ffffff0d,#fff0);position:relative;overflow:hidden}button:before{content:"";width:50%;height:100%;transition:all var(--transition-slow);background:linear-gradient(90deg,#0000,#ffffff1a,#0000);position:absolute;top:0;left:-100%;transform:skew(-20deg)}button:hover:before{left:150%}button:hover{border-color:var(--color-brand-primary);box-shadow:var(--shadow-glow-primary);transform:translateY(-2px)}.game-card{background:var(--color-bg-surface);border:1px solid var(--color-ui-border);border-radius:var(--border-radius-lg);transition:all var(--transition-normal);-webkit-backdrop-filter:blur(8px);text-align:left;flex-direction:column;padding:0;animation:.5s ease-out backwards fade-in-up;display:flex;overflow:hidden}.game-card:first-child{animation-delay:.1s}.game-card:nth-child(2){animation-delay:.2s}.game-card:hover{border-color:var(--color-brand-primary);box-shadow:var(--shadow-card-hover);transform:translateY(-5px)scale(1.02)}.game-card:before{display:none}.game-card-header{height:320px;padding:var(--spacing-md);background-position:50%;background-size:cover;border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:flex-start;display:flex;position:relative;overflow:hidden}.game-card-header.bg-honkai-star-rail-sel{background-image:url(https://upload-os-bbs.hoyolab.com/upload/2023/04/23/94776100/98bda9142f1cf4e3328e3705a1cb36cf_4167389445173163155.jpg?x-oss-process=image/resize,s_1000/quality,q_80/auto-orient,0/interlace,1/format,jpg)}.game-card-header.bg-r1999-sel{background-image:url(https://www.prydwen.gg/static/fcd1174cd08e75db740f90e386055d72/31336/rv_meta.webp)}.game-character-image{object-fit:contain;object-position:center bottom;z-index:1;width:100%;height:100%;transition:transform var(--transition-slow);opacity:.9;filter:drop-shadow(0 0 20px #000c);position:absolute;top:0;left:0}.game-card-header.bg-r1999-sel .game-character-image{object-position:center top}.game-card:hover .game-character-image{opacity:1;transform:scale(1.08)}.game-card-overlay{z-index:2;width:100%;height:100%;transition:opacity var(--transition-normal);background:linear-gradient(#0a0a0f4d 0%,#0000 50%,#14141ef2 100%);position:absolute;top:0;left:0}.game-card:hover .game-card-overlay{opacity:.8}.game-card-badges{bottom:var(--spacing-sm);right:var(--spacing-md);z-index:3;position:absolute}.requires-login-badge{border:1px solid var(--color-brand-primary);color:var(--color-brand-primary);padding:var(--spacing-2) var(--spacing-5);border-radius:var(--border-radius-xl);font-size:var(--typography-font-size-xs);font-weight:var(--typography-font-weight-semibold);box-shadow:var(--shadow-inset-glow);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-transform:uppercase;letter-spacing:.5px;background:#282837cc}.game-card-body{padding:var(--spacing-lg) var(--spacing-md);gap:var(--spacing-sm);z-index:3;background:#14141e66;flex-direction:column;display:flex}.game-title-row{justify-content:space-between;align-items:center;gap:var(--spacing-sm);display:flex}.game-name{color:var(--color-text-primary);transition:color var(--transition-fast);margin-bottom:0;font-size:1.6rem}.game-card:hover .game-name{color:var(--color-brand-primary)}.game-tag-badge{color:var(--color-text-secondary);padding:var(--spacing-1) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-xs);font-weight:var(--typography-font-weight-medium);letter-spacing:.05em;border:1px solid var(--color-ui-border);background:#ffffff1a}.game-description{color:var(--color-text-secondary);font-size:var(--typography-font-size-base);line-height:var(--typography-line-height-relaxed);margin:0}.layout{flex-direction:column;min-height:100vh;display:flex}.main-content{padding:var(--spacing-xl);flex:1;width:100%;max-width:1200px;margin:0 auto}.secondary-action{border:1px solid var(--color-ui-border);color:var(--color-text-secondary);background:0 0}.secondary-action:hover{border-color:var(--color-text-primary);color:var(--color-text-primary);background:var(--color-ui-interactive-hover);box-shadow:0 0 10px #ffffff1a}.secondary-action:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.primary-action{background:linear-gradient(135deg, var(--color-primary), #b8960c);border:1px solid var(--color-primary);color:#000;font-weight:600}.primary-action:hover{box-shadow:0 0 20px var(--color-primary-glow);border-color:var(--color-primary);transform:translateY(-2px)}.element-badge{font-size:var(--typography-font-size-xs);text-transform:uppercase;letter-spacing:.1em;padding:var(--spacing-2) var(--spacing-sm);border-radius:var(--border-radius-sm);background:#0000004d;font-weight:600}.element-lightning{color:var(--color-hsr-element-lightning);border:1px solid #d97afe8c}.element-imaginary{color:var(--color-hsr-element-imaginary);border:1px solid #f4d2584d}.element-fire{color:var(--color-hsr-element-fire);border:1px solid #f84f364d}.element-ice{color:var(--color-hsr-element-ice);border:1px solid #47c7fd4d}.element-quantum{color:var(--color-hsr-element-quantum);border:1px solid #7864aa66}.element-wind{color:var(--color-hsr-element-wind);border:1px solid #5bc89f4d}.element-physical{color:var(--color-hsr-element-physical);border:1px solid #bcbcbc4d}.element-thunder{color:var(--color-hsr-element-thunder);border:1px solid #d97afe8c}@media (width<=768px){.main-content{padding:var(--spacing-md)}}.game-switcher{margin-right:var(--spacing-md);position:relative}.switcher-trigger{border:1px solid var(--color-ui-border);border-radius:var(--border-radius-md);padding:var(--spacing-3) var(--spacing-5);align-items:center;gap:var(--spacing-sm);cursor:pointer;transition:all var(--transition-fast);color:var(--color-text-primary);background:#ffffff0d;display:flex}.switcher-trigger:hover,.switcher-trigger.active{border-color:var(--color-brand-primary);box-shadow:0 0 10px rgba(var(--color-brand-primary-rgb), .2);background:#ffffff1a}.current-game-icon-container{border-radius:var(--border-radius-sm);border:1px solid var(--color-ui-border);background:#ffffff0d;justify-content:center;align-items:center;width:24px;height:24px;display:flex;overflow:hidden}.current-game-icon-img{object-fit:cover;width:100%;height:100%}.chevron{font-size:var(--typography-font-size-sm);opacity:.5;transition:transform var(--transition-fast)}.switcher-trigger.active .chevron{transform:rotate(180deg)}.switcher-dropdown{top:calc(100% + var(--spacing-5));background:var(--color-bg-elevated);border:1px solid var(--color-ui-border);border-radius:var(--border-radius-badge);width:220px;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(16px);z-index:var(--z-index-modal);animation:slide-in-down var(--duration-fast) ease-out;position:absolute;left:0;overflow:hidden}.dropdown-header{padding:var(--spacing-6) var(--spacing-md);font-size:var(--typography-font-size-xs);font-weight:var(--typography-font-weight-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);border-bottom:1px solid var(--color-ui-border);background:#ffffff05}.dropdown-list{padding:var(--spacing-sm)}.dropdown-item{align-items:center;gap:var(--spacing-6);padding:var(--spacing-5) var(--spacing-6);color:var(--color-text-primary);border-radius:var(--border-radius-md);transition:all var(--transition-fast);text-decoration:none;display:flex;position:relative}.dropdown-item:hover{background:#ffffff14;transform:translate(4px)}.dropdown-item.active{background:rgba(var(--color-brand-primary-rgb), .1)}.game-icon-container{border-radius:var(--border-radius-sm);border:1px solid var(--color-ui-border);background:#ffffff0d;justify-content:center;align-items:center;width:32px;height:32px;display:flex;overflow:hidden}.game-icon-img{object-fit:cover;width:100%;height:100%}.game-name{font-size:var(--typography-font-size-base);font-weight:var(--typography-font-weight-medium)}.active-indicator{font-size:var(--typography-font-size-xs);color:var(--color-brand-primary);margin-left:auto}.dropdown-footer{padding:var(--spacing-sm);border-top:1px solid var(--color-ui-border);background:#ffffff05}.back-link{text-align:center;padding:var(--spacing-sm);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary);border-radius:var(--border-radius-md);transition:all var(--transition-fast);text-decoration:none;display:block}.back-link:hover{background:var(--color-ui-interactive-hover);color:var(--color-text-primary)}.navbar{padding:var(--spacing-md) var(--spacing-xl);background:var(--color-bg-surface);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-ui-border);z-index:var(--z-index-sticky);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.nav-left{align-items:center;display:flex}.brand-logo{width:auto;height:40px;margin-right:var(--spacing-sm);mix-blend-mode:lighten;opacity:.92}.nav-brand{font-size:var(--typography-font-size-xl);font-weight:var(--typography-font-weight-semibold);letter-spacing:.05em;text-transform:uppercase;background:linear-gradient(90deg, #fff, var(--color-text-secondary));-webkit-text-fill-color:transparent;transition:all var(--transition-normal);cursor:pointer;-webkit-background-clip:text;background-clip:text;align-items:center;text-decoration:none;display:flex}.nav-brand:hover{filter:brightness(1.2);transform:translateY(-1px)}.nav-brand:active{transform:translateY(0)}.nav-auth{align-items:center;gap:var(--spacing-md);display:flex}.user-email{color:var(--color-text-secondary);font-size:var(--typography-font-size-base)}@media (width<=768px){.navbar{padding:var(--spacing-md);gap:var(--spacing-md);flex-direction:column}.nav-auth{justify-content:space-between;width:100%}}.toast-container{top:var(--spacing-lg);right:var(--spacing-lg);z-index:var(--z-index-toast);gap:var(--spacing-sm);pointer-events:none;flex-direction:column;max-width:400px;display:flex;position:fixed}.toast{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-6) var(--spacing-md);border-radius:var(--border-radius-md);font-size:var(--typography-font-size-base);font-weight:var(--typography-font-weight-medium);box-shadow:var(--shadow-md);pointer-events:auto;animation:toast-slide-in var(--duration-fast) ease-out;display:flex}.toast-error{background:var(--color-toast-error-bg);border:1px solid var(--color-toast-error-border);color:#fff}.toast-warning{background:var(--color-toast-warning-bg);border:1px solid var(--color-toast-warning-border);color:#fff}.toast-success{background:var(--color-toast-success-bg);border:1px solid var(--color-toast-success-border);color:#fff}.toast-info{background:var(--color-toast-info-bg);border:1px solid var(--color-toast-info-border);color:#fff}.toast-icon{font-size:var(--typography-font-size-md);flex-shrink:0}.toast-message{line-height:var(--typography-line-height-base);flex:1}.toast-close{color:inherit;opacity:.6;cursor:pointer;font-size:var(--typography-font-size-base);padding:0 0 0 var(--spacing-xs);transition:opacity var(--transition-fast);background:0 0;border:none;flex-shrink:0}.toast-close:hover{opacity:1}.selection-hero{text-align:center;margin-bottom:var(--spacing-2xl);animation:.6s ease-out fade-in-down}.selection-title{font-size:var(--typography-font-size-5xl);font-weight:var(--typography-font-weight-extrabold);margin-bottom:var(--spacing-sm);background:linear-gradient(135deg, #fff, var(--color-brand-primary));-webkit-text-fill-color:transparent;color:#fff;-webkit-background-clip:text;background-clip:text}.selection-subtitle{font-size:var(--typography-font-size-xl);color:var(--color-text-secondary);margin-bottom:var(--spacing-xl)}.selection-grid{gap:var(--spacing-xl);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));max-width:900px;margin:0 auto;display:grid}.selection-empty{text-align:center;padding:var(--spacing-3xl) var(--spacing-xl);color:var(--color-text-secondary);font-size:var(--typography-font-size-lg)}@media (width<=768px){.selection-title{font-size:var(--typography-font-size-4xl)}}