:root{--bg-color: #0b0f19;--panel-bg: rgba(22, 28, 45, .7);--panel-border: rgba(56, 189, 248, .2);--panel-accent: #38bdf8;--panel-accent-glow: rgba(56, 189, 248, .4);--accent-green: #34d399;--accent-yellow: #fbbf24;--text-main: #f3f4f6;--text-muted: #9ca3af;--font-retro: "Press Start 2P", monospace;--font-ui: "Outfit", sans-serif;--crt-brightness: 1.1}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-ui);height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}#app{display:flex;flex-direction:row;width:100vw;height:100vh;max-width:none;background:#020617;border:none;border-radius:0;box-shadow:none;padding:0;gap:0}#game-frame{flex:1;width:100%;height:100%;position:relative;background-color:#020617;border-radius:0;overflow:hidden;border:none;box-shadow:none;display:flex;justify-content:center;align-items:center}#hud-overlay{position:absolute;top:24px;left:24px;background:#0f172abf;border:2px solid var(--panel-accent);border-radius:8px;padding:12px 16px;z-index:25;font-family:var(--font-retro);font-size:8px;color:var(--text-main);box-shadow:0 4px 15px #00000080,0 0 10px var(--panel-accent-glow);display:flex;flex-direction:column;gap:8px;pointer-events:none}#hud-overlay span{color:var(--accent-yellow);font-weight:700}#audio-mute-btn{position:absolute;top:24px;right:24px;background:#0f172abf;border:2px solid var(--panel-accent);color:var(--text-main);border-radius:50%;width:44px;height:44px;display:flex;justify-content:center;align-items:center;font-size:18px;cursor:pointer;z-index:25;transition:all .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 4px 15px #00000080,0 0 10px var(--panel-accent-glow);outline:none}#audio-mute-btn:hover{background:#0f172af2;border-color:var(--accent-green);transform:scale(1.05);box-shadow:0 0 15px #34d39966}#audio-mute-btn:active{transform:scale(.95)}#controls-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0f172ae6;border:3px solid var(--panel-accent);border-radius:12px;padding:24px 32px;text-align:center;z-index:22;box-shadow:0 10px 30px #000c,0 0 20px var(--panel-accent-glow);font-family:var(--font-retro);color:var(--text-main);transition:opacity .8s ease,transform .8s ease;pointer-events:none;display:flex;flex-direction:column;gap:16px;max-width:90%}#controls-popup.fade-out{opacity:0;transform:translate(-50%,-45%)}.popup-title{font-size:12px;color:var(--accent-yellow);letter-spacing:1px;margin-bottom:4px}.popup-keys{font-size:8px;background:#ffffff1a;padding:6px 12px;border-radius:6px;border-bottom:3px solid rgba(255,255,255,.2);display:inline-block;margin-bottom:4px}.popup-interact{font-size:8px;background:#34d39926;border:1px dashed var(--accent-green);color:var(--accent-green);padding:6px 12px;border-radius:6px;display:inline-block}.crt-screen{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}#game-canvas{width:100%;height:100%;max-height:100%;max-width:100%;object-fit:fill;image-rendering:-moz-crisp-edges;image-rendering:-webkit-crisp-edges;image-rendering:pixelated;image-rendering:crisp-edges}#dialogue-box{position:absolute;bottom:24px;left:24px;right:24px;background:#0f172af2;border:4px solid var(--panel-accent);border-radius:8px;padding:16px;z-index:15;color:var(--text-main);box-shadow:0 10px 30px #000c,0 0 15px var(--panel-accent-glow);display:flex;flex-direction:column;gap:8px;font-family:var(--font-retro);font-size:11px;line-height:1.8;animation:dialogue-slide .25s cubic-bezier(.16,1,.3,1)}@keyframes dialogue-slide{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.dialogue-header{border-bottom:2px solid var(--panel-border);padding-bottom:4px;font-weight:700;color:var(--accent-yellow);letter-spacing:1px}.dialogue-body{min-height:48px}.dialogue-footer{text-align:right;font-size:8px;color:var(--text-muted)}.dialogue-next-prompt{animation:blink 1s infinite alternate}@keyframes blink{0%{opacity:.3}to{opacity:1}}#interaction-prompt{position:absolute;bottom:140px;left:50%;transform:translate(-50%);background:#0f172ae6;border:2px solid var(--accent-green);border-radius:6px;padding:8px 12px;display:flex;align-items:center;gap:8px;z-index:14;box-shadow:0 4px 12px #00000080;font-family:var(--font-retro);font-size:10px;animation:bounce 1.2s infinite ease-in-out}@keyframes bounce{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,-6px)}}.prompt-key{background:var(--accent-green);color:#0f172a;padding:2px 6px;border-radius:4px;font-weight:700}.prompt-text{color:var(--text-main)}#splash-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#090d16;z-index:20;display:flex;justify-content:center;align-items:center;text-align:center;transition:opacity .5s ease}.splash-content{display:flex;flex-direction:column;align-items:center;gap:24px}.game-title{font-family:var(--font-retro);font-size:28px;color:var(--panel-accent);text-shadow:0 0 10px rgba(56,189,248,.5),0 0 20px rgba(56,189,248,.2);letter-spacing:2px;animation:TitlePulse 2s infinite ease-in-out}@keyframes TitlePulse{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.03);filter:brightness(1.2)}}.pixel-art-preview{width:96px;height:96px;border:4px solid var(--panel-border);border-radius:8px;background-color:#1e293b;position:relative;overflow:hidden;box-shadow:0 8px 16px #0006}.pixel-art-preview:before{content:"";position:absolute;width:24px;height:24px;background-color:#f43f5e;border-radius:4px;top:36px;left:36px;box-shadow:0 0 8px #f43f5e;animation:PreviewIdle 1.5s infinite alternate ease-in-out}@keyframes PreviewIdle{0%{transform:translateY(0)}to{transform:translateY(-8px)}}.splash-subtitle{font-family:var(--font-retro);font-size:10px;color:var(--text-muted)}#start-btn{font-family:var(--font-retro);font-size:12px;padding:14px 28px;background:transparent;color:var(--accent-green);border:3px solid var(--accent-green);border-radius:8px;cursor:pointer;box-shadow:0 0 15px #34d3991a;transition:all .2s ease;outline:none}#start-btn:hover{background:var(--accent-green);color:#090d16;box-shadow:0 0 25px #34d39966;transform:translateY(-2px)}#start-btn:active{transform:translateY(1px)}#ui-panel{flex:1;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:20px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;min-width:280px;max-width:360px;box-shadow:0 4px 30px #0000004d}.panel-section{border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:20px}.panel-section:last-child{border-bottom:none;padding-bottom:0;margin-top:auto}h2{font-family:var(--font-retro);font-size:10px;color:var(--panel-accent);letter-spacing:1px;margin-bottom:12px;display:flex;align-items:center;gap:6px}p{font-size:13px;color:var(--text-muted);line-height:1.5;margin-bottom:12px}.controls-legend{display:flex;flex-direction:column;gap:10px;background:#0f172a66;padding:10px;border-radius:6px;border:1px solid rgba(255,255,255,.05)}.control-row{display:flex;justify-content:space-between;align-items:center;font-size:12px}.keys{font-family:var(--font-retro);font-size:8px;background:#ffffff1a;padding:4px 6px;border-radius:4px;border-bottom:2px solid rgba(255,255,255,.2);color:var(--text-main)}.desc{color:var(--text-muted)}.option-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-main);margin-bottom:10px}.option-row:last-child{margin-bottom:0}.option-row input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:36px;height:20px;background-color:#334155;border-radius:20px;position:relative;outline:none;cursor:pointer;transition:background-color .2s ease}.option-row input[type=checkbox]:checked{background-color:var(--accent-green)}.option-row input[type=checkbox]:before{content:"";position:absolute;width:14px;height:14px;border-radius:50%;top:3px;left:3px;background-color:#f8fafc;transition:transform .2s ease}.option-row input[type=checkbox]:checked:before{transform:translate(16px)}.stat-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px}.stat-row span:first-child{color:var(--text-muted)}.stat-row span:last-child{color:var(--accent-yellow);font-weight:700}.credits{font-family:var(--font-retro);font-size:6px;text-align:center;color:#ffffff40;line-height:1.8}.hidden{display:none!important}#ui-panel::-webkit-scrollbar{width:6px}#ui-panel::-webkit-scrollbar-track{background:transparent}#ui-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}#ui-panel::-webkit-scrollbar-thumb:hover{background:#fff3}#completion-modal{position:absolute;top:0;left:0;width:100%;height:100%;background:#090d16d9;z-index:30;display:flex;justify-content:center;align-items:center;padding:16px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.scroll-container{background-color:#f7ebd3;color:#3b2314;border-left:12px solid #854d0e;border-right:12px solid #854d0e;border-radius:4px;width:90%;max-height:90%;padding:24px;display:flex;flex-direction:column;align-items:center;box-shadow:0 10px 25px #00000080,inset 0 0 40px #b4530933;font-family:var(--font-ui);text-align:center;overflow-y:auto;border-top:4px solid #b45309;border-bottom:4px solid #b45309;animation:scrollUnroll .5s ease-out}@keyframes scrollUnroll{0%{transform:scaleY(.1);opacity:0}to{transform:scaleY(1);opacity:1}}.scroll-title{font-family:var(--font-retro);font-size:12px;color:#7c2d12;margin-bottom:16px;text-shadow:1px 1px 0px rgba(255,255,255,.7);letter-spacing:1px}.scroll-content{font-size:11px;line-height:1.6;margin-bottom:20px;max-width:260px;text-align:justify}.scroll-content p{color:#4a2f1b!important;margin-bottom:12px}.scroll-content p:first-child{font-style:italic;font-weight:600;text-align:center;color:#7c2d12!important;background:#b4530914;padding:8px;border-radius:4px;border:1px dashed rgba(124,45,18,.2)}#restart-btn{font-family:var(--font-retro);font-size:8px;padding:10px 20px;background:#7c2d12;color:#f7ebd3;border:2px solid #3b2314;border-radius:4px;cursor:pointer;box-shadow:0 4px 6px #0003;transition:all .2s ease;outline:none}#restart-btn:hover{background:#9a3412;color:#fff;transform:translateY(-1px);box-shadow:0 6px 8px #0000004d}#restart-btn:active{transform:translateY(1px)}
