:root{--bg-dark: rgba(20, 10, 5, .92);--bg-panel: rgba(30, 15, 10, .88);--yellow: #f8d830;--orange: #f89830;--red: #e84040;--white: #f8f8f8;--cyan: #58d8d8;--green: #58b858;--sunset-orange: #d85820;--font-pixel: "Press Start 2P", cursive}*{margin:0;padding:0;box-sizing:border-box;image-rendering:pixelated}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body{font-family:var(--font-pixel);background:url(/stage.webp) center bottom / cover no-repeat fixed;min-height:100vh;color:var(--white);overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0000004d,#0000001a,#0006);pointer-events:none;z-index:0}.container{position:relative;z-index:1;max-width:800px;margin:0 auto;padding:20px 15px;min-height:100vh}.github-corner{position:fixed;top:0;right:0;z-index:100}.github-corner svg{fill:#151513;color:#fff}.github-corner:hover .octo-arm{animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media(max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}.header{text-align:center;margin-bottom:30px;padding:20px;background:var(--bg-dark);border:4px solid var(--yellow);position:relative;box-shadow:0 4px 20px #00000080}.title{font-size:max(1.1rem,10px);color:var(--yellow);text-shadow:3px 3px 0 var(--red);letter-spacing:.05em;margin-bottom:10px;line-height:1.6}.subtitle{font-size:max(.6rem,10px);color:var(--cyan);letter-spacing:.1em;line-height:1.5}.header .disclaimer{font-size:max(.5rem,10px);color:#ffffff80;margin-top:10px}.header .install-command{font-size:12px;margin-top:10px}.controls-panel{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px;padding:15px 20px;background:var(--bg-panel);border:3px solid var(--orange);box-shadow:0 4px 15px #0006;flex-wrap:wrap}.panel-section{display:flex;flex-direction:column;gap:10px}.panel-label{font-size:.5rem;color:var(--orange)}.side-buttons{display:flex;gap:10px}.side-btn{font-family:var(--font-pixel);font-size:.7rem;padding:10px 25px;background:#0009;border:3px solid var(--white);color:var(--white);cursor:pointer;transition:all .1s;text-transform:uppercase}.side-btn:hover{background:#58d8d833;border-color:var(--cyan);color:var(--cyan)}.side-btn.active{background:var(--red);border-color:var(--yellow);color:var(--yellow);box-shadow:0 0 0 2px #000c,0 0 0 4px var(--yellow)}.commands-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-bottom:25px}.command-card{background:var(--bg-panel);border:3px solid var(--white);padding:15px 20px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:8px 20px;align-items:center;position:relative;box-shadow:0 4px 15px #0006}.command-card:before{content:"";position:absolute;top:4px;left:4px;right:4px;bottom:4px;border:1px solid rgba(255,255,255,.15);pointer-events:none}.command-card.hadouken{border-color:#58a8d8}.command-card.shoryuken{border-color:var(--red)}.command-card.tatsumaki{border-color:var(--yellow)}.command-card.sonicboom{border-color:var(--green)}.command-card.spinningbirdkick{border-color:#d858a8}.command-card.shinkuhadouken{border-color:#a080ff}.command-card.shungokusatsu{border-color:#333;box-shadow:0 0 20px #0009,0 4px 15px #0006}.command-card.secret{border-color:#ffffff4d;opacity:.7}.command-header{display:flex;align-items:baseline;gap:12px}.command-name{font-size:.7rem;color:var(--yellow);text-shadow:2px 2px 0 rgba(0,0,0,.8)}.command-japanese{font-size:.5rem;color:var(--white);opacity:.7}.command-count{grid-row:span 2;text-align:right}.count-label{font-size:.4rem;color:var(--white);opacity:.6;display:block;margin-bottom:4px}.count-value{font-size:1.5rem;color:var(--yellow);text-shadow:2px 2px 0 var(--red)}.command-input-row{display:flex;align-items:center;gap:15px}.command-input{font-size:.9rem;color:var(--white);letter-spacing:.15em}.command-arrows{font-family:system-ui,-apple-system,sans-serif}.command-button{font-family:var(--font-pixel)}.command-notation{font-size:.5rem;color:var(--cyan);opacity:.8}.controls-inline{display:flex;align-items:center;gap:20px}.control-item,.control-keys-wrap{display:flex;align-items:center;gap:6px}.key-group{font-size:.55rem;color:var(--white);background:#00000080;padding:8px 10px;border:2px solid var(--white);min-width:70px;text-align:center}.key-group.arrows{font-family:system-ui,-apple-system,sans-serif}.key{font-size:.7rem;color:#000000e6;background:var(--white);width:35px;height:35px;display:flex;align-items:center;justify-content:center;border:2px solid var(--yellow)}.control-label{font-size:.4rem;color:var(--cyan)}.footer{margin-top:25px;text-align:center;padding:15px;background:var(--bg-dark);border:2px solid rgba(255,255,255,.2)}.disclaimer{font-size:.5rem;color:#fff9;line-height:1.6}.install-command{font-family:monospace;font-size:.55rem;color:var(--cyan);background:#00000080;padding:8px 15px;border:1px solid var(--cyan);display:inline-block}.effect-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000000bf;z-index:1000;animation:flashIn .1s ease-out}.effect-text{font-family:var(--font-pixel);font-size:1.8rem;color:var(--effect-color);text-shadow:4px 4px 0 rgba(0,0,0,.9),-2px -2px 0 rgba(0,0,0,.9),2px -2px 0 rgba(0,0,0,.9),-2px 2px 0 rgba(0,0,0,.9);animation:textPop .3s ease-out;text-align:center;line-height:1.4}.effect-subtitle{font-family:var(--font-pixel);font-size:.7rem;color:var(--white);margin-top:15px;animation:fadeIn .3s ease-out .1s both}.hit-marks{position:absolute;font-size:2rem;color:var(--yellow);animation:hitSpin .5s ease-out}.hit-marks.pos1{top:20%;left:25%}.hit-marks.pos2{top:30%;right:20%}.hit-marks.pos3{bottom:25%;left:30%}@keyframes flashIn{0%{background:#fff9}to{background:#000000bf}}@keyframes textPop{0%{transform:scale(2);opacity:0}50%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes hitSpin{0%{transform:scale(0) rotate(0);opacity:1}to{transform:scale(1.5) rotate(180deg);opacity:0}}@media(max-width:700px){.commands-grid{grid-template-columns:1fr}.controls-panel{flex-direction:column;gap:15px}.controls-inline{flex-wrap:wrap;justify-content:center}.panel-section{align-items:center}}@media(max-width:500px){.title{font-size:.8rem}.effect-text{font-size:1.2rem}.controls-inline{gap:10px}.control-keys-wrap{flex-direction:column;align-items:flex-start}.charge{font-size:.5rem}}
