@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";
:root{--bg-primary:#0a0a0f;--bg-secondary:#1a1a24;--bg-tertiary:#2a2a38;--bg-hover:#3a3a48;--text-primary:#f5f5f7;--text-secondary:#b8b8c0;--text-muted:#808088;--terran-primary:#0ea5e9;--terran-secondary:#0284c7;--terran-glow:#0ea5e94d;--protoss-primary:#f59e0b;--protoss-secondary:#d97706;--protoss-glow:#f59e0b4d;--zerg-primary:#a855f7;--zerg-secondary:#9333ea;--zerg-glow:#a855f74d;--accent-success:#10b981;--accent-warning:#f59e0b;--accent-error:#ef4444;--border-subtle:#ffffff1a;--border-medium:#fff3;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.4s ease;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem}*{box-sizing:border-box;margin:0;padding:0}html,body{scroll-behavior:smooth;max-width:100vw;overflow-x:hidden}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6}a{color:inherit;transition:opacity var(--transition-fast);text-decoration:none}a:hover{opacity:.8}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-weight:700;line-height:1.2}h1{font-size:3rem;font-weight:800}h2{font-size:2.25rem}h3{font-size:1.875rem}h4{font-size:1.5rem}p{line-height:1.7}.container{max-width:1280px;padding:0 var(--spacing-lg);margin:0 auto}.text-gradient{background:linear-gradient(135deg,var(--text-primary),var(--text-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.gradient-terran{background:linear-gradient(135deg,var(--terran-primary),var(--terran-secondary))}.gradient-protoss{background:linear-gradient(135deg,var(--protoss-primary),var(--protoss-secondary))}.gradient-zerg{background:linear-gradient(135deg,var(--zerg-primary),var(--zerg-secondary))}.tr-hover{transition:background-color var(--transition-fast)}.tr-hover:hover{background-color:var(--bg-hover)!important}.glass{-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-subtle);background:#1a1a2499}.glass-strong{-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-medium);background:#1a1a24cc}.card{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--border-subtle);transition:all var(--transition-normal)}.card:hover{border-color:var(--border-medium);box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-interactive{cursor:pointer}.card-interactive:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.card-interactive:hover .race-logo{opacity:1!important;transform:translate(-50%,-50%)scale(1)!important}.card-interactive:hover .race-bg{filter:brightness(.4);transform:scale(1.1)!important}.card-interactive:hover .race-title{opacity:0}.btn{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm)var(--spacing-lg);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:none;font-size:.9375rem;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:linear-gradient(135deg,var(--terran-primary),var(--terran-secondary));color:#fff;box-shadow:0 0 20px var(--terran-glow)}.btn-primary:hover{box-shadow:0 0 30px var(--terran-glow);filter:brightness(1.15)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-medium)}.btn-secondary:hover{background:var(--bg-hover);border-color:var(--border-medium)}.badge{padding:var(--spacing-xs)var(--spacing-sm);border-radius:var(--radius-sm);letter-spacing:.05em;align-items:center;font-size:.75rem;font-weight:600;display:inline-flex}.badge-beginner{color:var(--accent-success);background:#10b98126;border:1px solid #10b9814d}.badge-intermediate{color:var(--accent-warning);background:#f59e0b26;border:1px solid #f59e0b4d}.badge-advanced{color:var(--accent-error);background:#ef444426;border:1px solid #ef44444d}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes glow{0%,to{opacity:1}50%{opacity:.6}}.fade-in{animation:.5s forwards fadeIn}.slide-in{animation:.4s forwards slideIn}@media (max-width:768px){h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.5rem}.container{padding:0 var(--spacing-md)}}@media (max-width:480px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.25rem}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--bg-hover)}.unit-tooltip-container{display:inline-block;position:relative}.unit-tooltip-container:hover .unit-tooltip-content{opacity:1;visibility:visible;transform:translateY(0)}.unit-tooltip-content{z-index:1000;background:var(--bg-secondary);border:1px solid var(--border-medium);border-radius:var(--radius-md);padding:var(--spacing-md);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;min-width:280px;max-width:320px;transition:all var(--transition-normal);pointer-events:none;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%)translateY(-8px)}.unit-tooltip-content:after{content:"";border:6px solid #0000;border-top-color:var(--bg-secondary);position:absolute;top:100%;left:50%;transform:translate(-50%)}.unit-tooltip-header{margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-subtle);align-items:center;display:flex}.unit-tooltip-name{color:var(--text-primary);margin-bottom:2px;font-size:1rem;font-weight:700}.unit-tooltip-type{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:500}.unit-tooltip-description{color:var(--text-secondary);font-size:.875rem;line-height:1.6}@media (max-width:768px){.unit-tooltip-container:active .unit-tooltip-content{visibility:visible;transform:translateY(0)}.unit-tooltip-content{min-width:240px;left:auto;right:0;transform:translateY(-8px)}.unit-tooltip-content:after{left:auto;right:20px;transform:none}}.skip-to-content:focus{top:var(--spacing-md);left:var(--spacing-md);z-index:10000;outline:3px solid var(--terran-primary);outline-offset:2px;position:fixed!important}:focus-visible{outline:2px solid var(--terran-primary);outline-offset:2px;border-radius:var(--radius-sm)}:focus:not(:focus-visible){outline:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--terran-primary);outline-offset:2px}a:focus-visible{background-color:#0ea5e91a;margin:-2px -4px;padding:2px 4px}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (prefers-contrast:high){:root{--border-subtle:#666;--border-medium:#888;--text-muted:#ccc}}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}