:root{--color-bg-base:#0e1014;--color-bg-surface:#1a1e26b3;--color-bg-surface-hover:#262c38cc;--color-bg-elevated:#1e232de6;--color-bg-selection-fade:#0a0a1a;--color-text-primary:#e9e4d8;--color-text-secondary:#b3ad9e;--color-text-dim:#9a9484;--color-text-on-primary:#000;--color-brand-primary:#d4af37;--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-interactive-hover:#ffffff0d;--color-focus-glow:#d4af3733;--color-ws-sel-start:#1a1a22;--color-ws-sel-mid:#3a3a48;--color-ws-accent:#c0c0cc;--color-gd-sel-start:#0a1a2e;--color-gd-sel-mid:#1e4a6e;--color-gd-accent:#4a9fd8;--typography-font-family-display:"Bahnschrift", "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;--typography-font-family-base:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;--typography-font-family-data:"Cascadia Mono", Consolas, "SF Mono", "Menlo", monospace;--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-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-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;--duration-instant:.01ms;--duration-fast:.15s;--duration-normal:.3s;--duration-slow:.5s;--duration-pulse:1.5s}@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 slide-in-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:var(--duration-instant)!important;transition-duration:var(--duration-instant)!important}}body{font-family:var(--typography-font-family-base);background-color:var(--color-bg-base);color:var(--color-text-primary);background-image:radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--color-brand-accent) 15%, transparent), transparent 25%), radial-gradient(circle at 85% 30%, color-mix(in srgb, var(--color-brand-primary) 10%, transparent), transparent 25%);-webkit-font-smoothing:antialiased;background-attachment:fixed;min-height:100vh;margin:0}*{box-sizing:border-box}:focus-visible{outline:2px solid var(--color-brand-primary);outline-offset:2px}h1,h2,h3,h4{font-family:var(--typography-font-family-display);letter-spacing:.01em;margin:0;font-weight:600}a{color:var(--color-brand-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{font-family:var(--typography-font-family-base);font-size:var(--typography-font-size-md);color:var(--color-text-primary);cursor:pointer;background:0 0;border:none;padding:0}.selection-card{background:var(--color-bg-surface);border:1px solid var(--color-ui-border);border-radius:var(--border-radius-lg);transition:transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);-webkit-backdrop-filter:blur(8px);text-align:left;flex-direction:column;animation:.5s ease-out backwards fade-in-up;display:flex;overflow:hidden}.selection-card:first-child{animation-delay:.1s}.selection-card:nth-child(2){animation-delay:.2s}.selection-card:nth-child(3){animation-delay:.3s}.selection-card:nth-child(4){animation-delay:.4s}.selection-card:nth-child(n+5){animation-delay:.5s}.selection-card:hover{border-color:var(--color-brand-primary);box-shadow:var(--shadow-card-hover);transform:translateY(-5px)scale(1.02)}.selection-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}.selection-card-header.bg-ws-sel{background:linear-gradient(135deg, var(--color-ws-sel-start) 0%, var(--color-ws-sel-mid) 50%, var(--color-bg-selection-fade) 100%)}.selection-card-header.bg-gd-sel{background:linear-gradient(135deg, var(--color-gd-sel-start) 0%, var(--color-gd-sel-mid) 50%, var(--color-bg-selection-fade) 100%)}.game-cover-image{object-fit:cover;object-position:center;width:100%;height:100%;z-index:var(--z-index-card);transition:transform var(--transition-slow);opacity:.9;filter:drop-shadow(0 0 20px #000c);position:absolute;top:0;left:0}.selection-card:hover .game-cover-image{opacity:1;transform:scale(1.08)}.selection-card-overlay{background:linear-gradient(to bottom, #0000004d 0%, transparent 50%, color-mix(in srgb, var(--color-bg-base) 95%, transparent) 100%);width:100%;height:100%;z-index:var(--z-index-overlay);transition:opacity var(--transition-normal);position:absolute;top:0;left:0}.selection-card:hover .selection-card-overlay{opacity:.8}.selection-card-body{padding:var(--spacing-lg) var(--spacing-md);gap:var(--spacing-sm);background:color-mix(in srgb, var(--color-bg-base) 40%, transparent);z-index:var(--z-index-controls);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}.selection-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);white-space:nowrap;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}.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:background var(--transition-fast), border-color var(--transition-fast), box-shadow 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 var(--color-focus-glow);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:background var(--transition-fast), transform var(--transition-fast);text-decoration:none;display:flex;position:relative}.dropdown-item:hover{background:#ffffff14;transform:translate(4px)}.dropdown-item.active{background:color-mix(in srgb, var(--color-brand-primary) 10%, transparent)}.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%}.switcher-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:color var(--transition-fast), background 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:filter var(--transition-normal), transform 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)}@media (width<=768px){.navbar{padding:var(--spacing-md);gap:var(--spacing-md);flex-direction:column}}.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-content{max-width:1400px;padding:var(--spacing-xl)}.selection-grid{gap:var(--spacing-xl);grid-template-columns:repeat(auto-fit,minmax(360px,480px));justify-content:center;max-width:1400px;margin:0 auto;display:grid}.selection-attribution{text-align:center;margin-top:var(--spacing-2xl);color:var(--color-text-dim);font-size:var(--typography-font-size-xs);line-height:var(--typography-line-height-relaxed)}@media (width<=768px){.selection-title{font-size:var(--typography-font-size-4xl)}}.main-content{max-width:1200px;padding:var(--spacing-xl);margin:0 auto}