:root{--bg-dark: #0A0A18;--bg-panel: #12122A;--bg-window: #1A1A2E;--bg-choice: #0E0E22;--border-lt: #8890CC;--border-dk: #2A2A5A;--border-hi: #60E860;--text-white: #F0F0FF;--text-gold: #FFD700;--text-green: #60E860;--text-cyan: #60DDFF;--text-red: #FF6060;--text-muted: #6A7AAA;--hp-red: #CC1111;--hp-empty: #444;--correct: #1A5A1A;--wrong: #5A1A1A;--font-pixel: "Courier New", "Courier", monospace;--font-jp: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;min-height:100%;background:var(--bg-dark);color:var(--text-white);font-family:var(--font-pixel);font-size:16px;overflow-x:hidden;overflow-y:auto;image-rendering:pixelated;image-rendering:crisp-edges}#root{width:100%;min-height:100vh;background:var(--bg-dark)}.screen{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-x:hidden;overflow-y:auto}.stage-bg{position:fixed;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0}.stage-bg-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;z-index:1}.pixel-window{background:var(--bg-window);border:3px solid;border-color:var(--border-lt) var(--border-dk) var(--border-dk) var(--border-lt);position:relative;z-index:10}.pixel-window:before{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;border:1px solid;border-color:var(--border-lt) var(--border-dk) var(--border-dk) var(--border-lt);pointer-events:none}.pixel-window--dark{background:var(--bg-panel)}.pixel-btn{font-family:var(--font-pixel);font-size:15px;padding:12px 22px;background:var(--bg-panel);border:3px solid;border-color:var(--border-lt) var(--border-dk) var(--border-dk) var(--border-lt);color:var(--text-white);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;-webkit-user-select:none;user-select:none;transition:filter .05s;text-shadow:1px 1px 0 #000}.pixel-btn:hover{filter:brightness(1.3)}.pixel-btn:active{border-color:var(--border-dk) var(--border-lt) var(--border-lt) var(--border-dk);transform:translate(1px,1px)}.pixel-btn--primary{color:var(--text-gold);border-color:#AA8800 #554400 #554400 #AA8800;background:#3a2a00}.pixel-btn--primary:hover{filter:brightness(1.4)}.pixel-btn--green{color:var(--text-green);border-color:#2A8A2A #114411 #114411 #2A8A2A;background:#0a1a0a}.pixel-btn--red{color:var(--text-red);border-color:#8A2A2A #441111 #441111 #8A2A2A;background:#1a0a0a}.choice-btn{font-family:var(--font-pixel);font-size:15px;width:100%;padding:14px 16px;background:var(--bg-choice);border:3px solid;border-color:var(--border-lt) var(--border-dk) var(--border-dk) var(--border-lt);color:var(--text-white);cursor:pointer;text-align:left;display:flex;align-items:center;gap:12px;min-height:58px;-webkit-user-select:none;user-select:none;transition:filter .05s,background .1s;text-shadow:1px 1px 0 #000}.choice-btn:hover:not(:disabled){filter:brightness(1.3);border-color:var(--border-hi) var(--border-dk) var(--border-dk) var(--border-hi)}.choice-btn:disabled{cursor:default}.choice-btn.correct{background:var(--correct);border-color:#3A9A3A #1A5A1A #1A5A1A #3A9A3A;color:var(--text-green)}.choice-btn.wrong{background:var(--wrong);border-color:#9A3A3A #5A1A1A #5A1A1A #9A3A3A;color:var(--text-red)}.choice-letter{font-weight:700;color:var(--text-gold);min-width:24px;font-size:1.1em}.choice-cursor{color:var(--text-green);min-width:16px}.hearts{display:flex;gap:6px;align-items:center}.heart{font-size:20px;transition:transform .1s}.heart--empty{filter:grayscale(1) brightness(.4)}.heart--lost{animation:heartShake .3s ease}.exp-bar-wrap{background:#0a0a18;border:2px solid var(--border-dk);height:12px;position:relative;overflow:hidden}.exp-bar-fill{height:100%;background:#2563eb;transition:width .3s ease}.stars{display:flex;gap:8px;justify-content:center}.star{font-size:clamp(28px,6vw,40px);transition:transform .3s}.star--empty{filter:grayscale(1) brightness(.3)}.star--lit{animation:starPop .4s ease both}.char-sprite{image-rendering:pixelated;image-rendering:crisp-edges}.char-sprite img{image-rendering:pixelated;image-rendering:crisp-edges;display:block}.char-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-pixel);font-size:10px;color:var(--text-muted);text-align:center;border:2px dashed var(--border-dk);background:#0000004d}.trophy-notification{position:fixed;top:16px;right:16px;z-index:1000;animation:slideInRight .4s ease;max-width:280px}.trophy-notification__inner{display:flex;align-items:center;gap:12px;padding:12px 16px}.trophy-notification__icon{font-size:28px}.trophy-notification__text{flex:1}.trophy-notification__label{font-size:10px;color:var(--text-gold);letter-spacing:1px}.trophy-notification__name{font-size:14px;color:var(--text-white);margin-top:2px}@keyframes starPop{0%{transform:scale(0) rotate(-20deg);opacity:0}60%{transform:scale(1.3) rotate(5deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes heartShake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes slideInRight{0%{transform:translate(120%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.text-gold{color:var(--text-gold)}.text-green{color:var(--text-green)}.text-cyan{color:var(--text-cyan)}.text-red{color:var(--text-red)}.text-muted{color:var(--text-muted)}.text-shadow{text-shadow:2px 2px 0 #000}.blink{animation:blink 1s step-start infinite}.fade-in{animation:fadeIn .3s ease}.flex-center{display:flex;align-items:center;justify-content:center}.flex-col{flex-direction:column}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.w-full{width:100%}.relative{position:relative}@media (min-width: 768px){html,body,#root{font-size:17px}.pixel-btn{font-size:17px;padding:14px 28px;min-height:52px}.choice-btn{font-size:17px;padding:16px 20px;min-height:64px}}@media (min-width: 1024px){html,body,#root{font-size:18px}.pixel-btn{font-size:18px;padding:15px 32px;min-height:54px}.choice-btn{font-size:18px;padding:18px 24px;min-height:68px}}
