:root {
    --primary-color: #d6cb72;
    --accent-color: #c67cf4;
    --background-color-1: #1a1a1a;
    --background-color-2: #282828;
    --font-family-primary: 'Press Start 2P', monospace;
    --font-family-secondary: 'Roboto', sans-serif;
    --font-size-small: 16px;
    --font-size-medium: 18px;
    --font-size-large: 22px;
    --font-size-h1: 2.8em;
}

@import url('https://fonts.googleapis.com/css2?family=Lexend+Giga&display=swap');

body {
    background: linear-gradient(135deg, var(--background-color-1), var(--background-color-2));
    font-family: var(--font-family-primary);
    color: #ffffff;
    margin: 0;
    padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Lexend+Giga&display=swap');

.window-top-bar{font-family:'Lexend Giga',sans-serif;background-color:#1e1e1e;display:flex;align-items:center;padding:6px 16px;color:#d6cb72;border-bottom:2px solid #d6cb72;width:100%;position:fixed;top:0;left:0;z-index:9999;height:42px;box-sizing:border-box}
.window-title{font-size:16px;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.window-controls{display:flex;gap:8px;align-items:center}
.window-controls button{background-color:#1e1e1e;color:#d6cb72;border:1px solid #d6cb72;font-size:16px;padding:0;height:30px;width:30px;display:flex;justify-content:center;align-items:center;border-radius:3px;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.window-controls button:hover{background-color:#c67cf4;color:#fff}
.window-controls button.mute{background:transparent;color:#04ef04;border:none}
.window-controls button.mute:hover{color:#ff4500}
.window-controls .volume-slider{-webkit-appearance:none;appearance:none;width:120px;height:6px;border-radius:10px;background:linear-gradient(90deg,#dfcc6c,#c67cf4);box-shadow:inset 0 1px 4px rgba(255,255,255,0.2),0 0 5px rgba(198,124,244,0.4);outline:none;transition:background .3s ease,box-shadow .3s ease}
.window-controls .volume-slider::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:50%;background:#fff;border:2px solid #d6cb72;box-shadow:0 0 5px #d6cb72,0 0 2px #fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.window-controls .volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 8px #d6cb72,0 0 4px #fff}
.window-controls .volume-slider::-moz-range-thumb{height:16px;width:16px;border-radius:50%;background:#fff;border:2px solid #d6cb72;box-shadow:0 0 5px #d6cb72,0 0 2px #fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.window-controls .volume-slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 0 8px #d6cb72,0 0 4px #fff}

@media (max-width:600px){
    .window-top-bar{padding:6px 10px;height:auto;min-height:42px;flex-wrap:wrap;gap:8px}
    .window-title{font-size:14px;width:100%}
    .window-controls{width:100%;justify-content:flex-end;flex-wrap:wrap}
    .window-controls button{height:28px;width:28px;font-size:14px}
    .window-controls .volume-slider{width:90px}
}

#game-wrapper { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding-top: 60px; }
#console-frame { background-color: #222222; border-radius: 20px; padding: 25px; box-shadow: 0 0 30px rgba(198,124,244,0.8); width: 85vw; max-width: 1200px; text-align: center; color: #ffffff; font-size: var(--font-size-large); }
#console-frame h1 { font-size: var(--font-size-h1); margin-bottom: 15px; font-family: var(--font-family-primary); color: var(--accent-color); text-shadow: 3px 3px 6px rgba(0,0,0,0.7); letter-spacing: 1.5px; text-transform: uppercase; }
#emulator-screen { width: 85vw; max-width: 1200px; height: 48vw; max-height: 720px; background: #000000 url('scanline-pattern.png') repeat; background-size: 100% 3px; border: 10px solid var(--accent-color); border-radius: 16px; box-shadow: 0 0 40px rgba(198,124,244,0.8); display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; margin: 0 auto; }
#emulator-screen canvas { border: none; width: 100%; height: 100%; image-rendering: pixelated; cursor: pointer; }
#emulator-screen:-webkit-full-screen, #emulator-screen:-moz-full-screen, #emulator-screen:fullscreen { width: 100vw; height: 100vh; border-radius: 0; box-shadow: none; }

/* Credits styles */
.credits-button-container { display:flex; justify-content:center; margin:30px auto; padding:20px; max-width:800px; position:relative; z-index:10; }
.credits-button { background: linear-gradient(145deg,#333,#222); border:2px solid #555; border-radius:8px; color:#fff; padding:10px 20px; font-family:'Courier New', monospace; font-size:14px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.credits-overlay { display:none; position:fixed; left:0; top:0; width:100vw; height:100vh; background:rgba(10,10,20,0.95); z-index:9999; overflow-y:auto; }
.credits-container { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px 20px; }
.credits-title { font-size:48px; margin-bottom:40px; color:#fff; font-family:'Courier New', monospace; letter-spacing:3px; }
.credits-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; max-width:1200px; width:100%; }
.credits-section { background:rgba(255,255,255,0.08); border-radius:15px; padding:25px; backdrop-filter:blur(10px); }
.credits-section h3 { color:#4CAF50; margin-bottom:15px; font-size:24px; font-family:'Courier New', monospace; text-align:center; }
.credits-section p { margin:8px 0; font-size:16px; color:#fff; text-align:center; font-family:'Courier New', monospace; }
.credits-close { position:fixed; top:24px; right:24px; font-size:32px; font-weight:bold; color:#fff; cursor:pointer; background:rgba(255,255,255,0.12); width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:2px solid rgba(255,255,255,0.25); transition:all .25s ease; z-index:10000; }
.credits-close:hover { background:rgba(255,107,107,0.25); color:#ff6b6b; transform:scale(1.08) rotate(90deg); box-shadow:0 0 12px rgba(255,107,107,0.6); }
.credits-footer { margin-top:50px; text-align:center; color:rgba(255,255,255,0.7); font-size:18px; }

/* Unity load error fallback panel */
#unity-error-panel { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#2c2c2c; padding:24px 22px 28px; border:2px solid #c67cf4; border-radius:14px; width:340px; max-width:90vw; box-shadow:0 0 22px rgba(198,124,244,0.55); display:none; font-family:'Courier New', monospace; }
#unity-error-panel .error-title { font-size:20px; margin-bottom:12px; color:#ff8585; letter-spacing:1px; }
#unity-error-panel .error-message { font-size:14px; line-height:1.4; color:#fff; margin-bottom:18px; word-break:break-word; }
#unity-error-panel button { background:#c67cf4; border:none; color:#fff; padding:10px 18px; font-size:14px; cursor:pointer; border-radius:6px; font-weight:bold; box-shadow:0 0 8px rgba(198,124,244,0.6); transition:background .25s ease, transform .25s ease; }
#unity-error-panel button:hover { background:#d6cb72; transform:translateY(-2px); }