:root{--color-bg-primary:#0a0e17;--color-bg-secondary:#111827;--color-bg-card:#1a2332;--color-bg-elevated:#243447;--color-gold:#d4af37;--color-gold-light:#f0d878;--color-gold-dark:#a68b2b;--color-blue:#3b82f6;--color-blue-light:#60a5fa;--color-blue-dark:#1e40af;--color-text-primary:#f3f4f6;--color-text-secondary:#b8c0cc;--color-text-muted:#8b95a8;--color-action-red:#dc2626;--color-action-red-hover:#ef4444;--color-shoulder-gray:#4b5563;--color-shoulder-gray-hover:#6b7280;--color-stick-blue:#2563eb;--color-stick-blue-hover:#3b82f6;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--font-display:"Cinzel", serif;--font-body:"Inter", system-ui, sans-serif;--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);color:var(--color-text-primary);min-height:100vh;line-height:1.6}#root{min-height:100vh}.hero{padding:var(--spacing-2xl) var(--spacing-lg);text-align:center;border-bottom:2px solid var(--color-gold-dark);background:linear-gradient(#1a2332cc 0%,#0a0e17f2 100%),radial-gradient(at top,#d4af3726 0%,#0000 60%);position:relative;overflow:hidden}.hero:before{content:"";background:linear-gradient(90deg, transparent, var(--color-gold), transparent);height:4px;position:absolute;top:0;left:0;right:0}.hero-title{font-family:var(--font-display);color:var(--color-gold-light);text-shadow:0 2px 20px #d4af374d;margin-bottom:var(--spacing-sm);letter-spacing:.05em;font-size:clamp(1.75rem,5vw,3rem);font-weight:700}.hero-subtitle{color:var(--color-text-secondary);font-size:clamp(.875rem,2vw,1.125rem);font-weight:400}.container{max-width:1200px;padding:var(--spacing-xl) var(--spacing-lg);margin:0 auto}.controller-section{margin-bottom:var(--spacing-2xl)}.section-title{font-family:var(--font-display);color:var(--color-gold);text-align:center;margin-bottom:var(--spacing-xl);font-size:clamp(1.25rem,3vw,1.75rem);position:relative}.section-title:after{content:"";background:linear-gradient(90deg, transparent, var(--color-gold), transparent);width:80px;height:2px;margin:var(--spacing-md) auto 0;display:block}.controller-diagram{justify-content:center;align-items:center;gap:var(--spacing-xl);padding:var(--spacing-xl);background:var(--color-bg-card);border-radius:var(--radius-lg);border:1px solid var(--color-bg-elevated);flex-wrap:wrap;display:flex}.controller-half{align-items:center;gap:var(--spacing-lg);flex-direction:column;display:flex}.controller-body{border-radius:var(--radius-lg);background:linear-gradient(145deg,#2a3441 0%,#1a2332 100%);border:2px solid #374151;width:180px;height:280px;position:relative;box-shadow:0 10px 40px #00000080,inset 0 1px #ffffff1a}.controller-body.left{border-top-right-radius:30px;border-bottom-right-radius:30px}.controller-body.right{border-top-left-radius:30px;border-bottom-left-radius:30px}.btn-controller{border-radius:var(--radius-full);cursor:pointer;justify-content:center;align-items:center;width:36px;height:36px;font-size:.875rem;font-weight:600;transition:all .2s;display:flex;position:absolute;box-shadow:0 4px 8px #0000004d,inset 0 1px #fff3}.btn-controller:hover{transform:scale(1.05)}.btn-action{background:linear-gradient(145deg, var(--color-action-red-hover), var(--color-action-red));color:#fff;border:2px solid #991b1b}.btn-shoulder{background:linear-gradient(145deg, var(--color-shoulder-gray-hover), var(--color-shoulder-gray));color:#fff;border:2px solid #374151;font-size:.75rem}.btn-stick{background:linear-gradient(145deg, var(--color-stick-blue-hover), var(--color-stick-blue));color:#fff;border:2px solid #1e40af}.dpad{width:60px;height:60px;position:absolute}.dpad-btn{color:var(--color-text-secondary);background:linear-gradient(145deg,#4b5563,#374151);border:1px solid #4b5563;justify-content:center;align-items:center;font-size:.625rem;font-weight:600;display:flex;position:absolute}.dpad-up{border-radius:4px 4px 0 0;width:20px;height:20px;top:0;left:20px}.dpad-down{border-radius:0 0 4px 4px;width:20px;height:20px;bottom:0;left:20px}.dpad-left{border-radius:4px 0 0 4px;width:20px;height:20px;top:20px;left:0}.dpad-right{border-radius:0 4px 4px 0;width:20px;height:20px;top:20px;right:0}.dpad-center{background:#374151;width:20px;height:20px;top:20px;left:20px}.left .btn-l{border-radius:var(--radius-md);width:60px;height:24px;top:-15px;left:50%;transform:translate(-50%)}.left .btn-zl{border-radius:var(--radius-md);width:70px;height:20px;top:10px;left:50%;transform:translate(-50%)}.left .stick-left{width:50px;height:50px;top:70px;left:50%;transform:translate(-50%)}.left .btn-minus{border-radius:4px;width:24px;height:12px;font-size:.625rem;top:45px;right:25px}.left .dpad{top:140px;left:50%;transform:translate(-50%)}.left .btn-capture{background:#374151;border:1px solid #4b5563;border-radius:4px;width:20px;height:20px;bottom:50px;left:50%;transform:translate(-50%)}.right .btn-r{border-radius:var(--radius-md);width:60px;height:24px;top:-15px;left:50%;transform:translate(-50%)}.right .btn-zr{border-radius:var(--radius-md);width:70px;height:20px;top:10px;left:50%;transform:translate(-50%)}.right .btn-plus{border-radius:4px;width:24px;height:12px;font-size:.625rem;top:45px;left:25px}.right .btn-x{top:60px;right:25px}.right .btn-a{top:100px;right:55px}.right .btn-b{top:100px;right:25px}.right .btn-y{top:100px;right:85px}.right .stick-right{width:50px;height:50px;top:160px;left:50%;transform:translate(-50%)}.right .btn-home{background:#374151;border:1px solid #4b5563;border-radius:4px;width:20px;height:20px;bottom:50px;left:50%;transform:translate(-50%)}.controls-grid{gap:var(--spacing-lg);margin-bottom:var(--spacing-2xl);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));display:grid}.control-card{background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--spacing-lg);border:1px solid var(--color-bg-elevated);transition:all .2s}.control-card:hover{border-color:var(--color-gold-dark);box-shadow:0 4px 20px #d4af371a}.card-title{font-family:var(--font-display);color:var(--color-gold);margin-bottom:var(--spacing-md);align-items:center;gap:var(--spacing-sm);font-size:1.125rem;display:flex}.card-icon{font-size:1.25rem}.control-item{align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-sm) 0;border-bottom:1px solid var(--color-bg-elevated);display:flex}.control-item:last-child{border-bottom:none}.control-keys{gap:var(--spacing-xs);flex-shrink:0;align-items:center;display:flex}.key{border-radius:var(--radius-sm);text-transform:uppercase;justify-content:center;align-items:center;min-width:28px;height:28px;padding:0 8px;font-size:.75rem;font-weight:600;display:inline-flex;box-shadow:0 2px 4px #0000004d}.key-action{background:var(--color-action-red);color:#fff;border:1px solid #991b1b}.key-shoulder{background:var(--color-shoulder-gray);color:#fff;border:1px solid #374151}.key-stick{background:var(--color-stick-blue);color:#fff;border:1px solid #1e40af}.key-dpad{color:#fff;background:#4b5563;border:1px solid #374151;font-size:.625rem}.key-plus{color:#fff;background:#6b7280;border:1px solid #4b5563;padding:0 6px;font-size:.875rem}.key-combo{color:var(--color-gold-light);border:1px solid var(--color-gold-dark);border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.05em;background:linear-gradient(135deg,#d4af3726,#d4af370d);padding:2px 8px;font-size:.6875rem;font-weight:600;box-shadow:inset 0 1px #d4af3733,0 2px 4px #0003}.control-desc{color:var(--color-text-secondary);font-size:.9375rem;line-height:1.6}.control-desc strong{color:var(--color-text-primary);font-weight:600}.advanced-section{border:1px solid var(--color-gold-dark);border-radius:var(--radius-lg);padding:var(--spacing-xl);margin-bottom:var(--spacing-2xl);background:linear-gradient(135deg,#d4af371a 0%,#0000 100%)}.advanced-title{font-family:var(--font-display);color:var(--color-gold-light);text-align:center;margin-bottom:var(--spacing-lg);font-size:1.5rem}.advanced-grid{gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.technique-card{background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--spacing-lg);border-left:4px solid var(--color-gold)}.technique-name{font-family:var(--font-display);color:var(--color-gold);margin-bottom:var(--spacing-sm);font-size:1.125rem}.technique-input{align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);flex-wrap:wrap;display:flex}.technique-desc{color:var(--color-text-secondary);font-size:.9375rem;line-height:1.6}.runes-grid{gap:var(--spacing-md);margin-top:var(--spacing-md);grid-template-columns:repeat(3,1fr);display:grid}@media (width<=900px){.runes-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=480px){.runes-grid{gap:var(--spacing-sm);grid-template-columns:repeat(2,1fr)}.rune-item{padding:var(--spacing-sm)}}.rune-item{background:var(--color-bg-elevated);border-radius:var(--radius-md);padding:var(--spacing-md);text-align:center;border:1px solid #0000;transition:all .2s}.rune-item:hover{border-color:var(--color-blue);background:#3b82f61a}.rune-icon{margin-bottom:var(--spacing-xs);font-size:1.5rem}.rune-name{color:var(--color-text-primary);font-size:.875rem;font-weight:600}.footer{text-align:center;padding:var(--spacing-xl);color:var(--color-text-muted);border-top:1px solid var(--color-bg-elevated);margin-top:var(--spacing-xl);font-size:.875rem}@media (width<=768px){.controller-diagram{gap:var(--spacing-md);padding:var(--spacing-md)}.controller-body{width:140px;height:220px}.btn-controller{width:30px;height:30px;font-size:.75rem}.controls-grid,.advanced-grid{grid-template-columns:1fr}}@media (width<=480px){.container{padding:var(--spacing-md)}.hero{padding:var(--spacing-xl) var(--spacing-md)}.controller-diagram{gap:var(--spacing-sm);padding:var(--spacing-sm);flex-direction:row}.controller-body{width:120px;height:190px}.btn-controller{width:26px;height:26px;font-size:.6875rem}.left .btn-l,.right .btn-r{width:45px;height:18px}.left .btn-zl,.right .btn-zr{width:55px;height:16px}.left .stick-left,.right .stick-right{width:38px;height:38px}.left .btn-minus,.right .btn-plus{width:18px;height:10px}.left .dpad{width:48px;height:48px}.left .dpad-up,.left .dpad-down{width:16px;height:16px;left:16px}.left .dpad-left,.left .dpad-right{width:16px;height:16px;top:16px}.left .dpad-center{width:16px;height:16px;top:16px;left:16px}.right .btn-x{top:50px;right:18px}.right .btn-a{top:85px;right:45px}.right .btn-b{top:85px;right:18px}.right .btn-y{top:85px;right:72px}.control-card,.technique-card{padding:var(--spacing-md)}.advanced-section{padding:var(--spacing-lg)}.key{min-width:24px;height:24px;padding:0 6px;font-size:.6875rem}.control-keys{gap:2px}}