:root { --main-red: #f33; --bg-dark: #000; }
* { box-sizing: border-box; }
html, body, #game-wrapper { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; background: var(--bg-dark); color: #ccc; font-family: sans-serif; }
#game-wrapper { position: relative; height: 100dvh; overflow: hidden; background: #000; }
canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow: auto; background: rgba(0, 0, 0, .95); }
.settings-box { width: min(380px, 100%); max-height: 100%; padding: 1.25rem; overflow: auto; background: #111; border: 1px solid #333; border-radius: 15px; text-align: center; }
.lang-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: .75rem; padding-bottom: .75rem; border-bottom: 1px solid #222; }
.lang-btn { padding: 6px; border: 1px solid #444; border-radius: 6px; background: #222; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.lang-btn.active { border-color: var(--main-red); background: #300; }
.btn { width: 100%; margin-top: 1rem; padding: .8rem; border: 0; border-radius: 8px; background: var(--main-red); color: #fff; font-weight: 700; font-size: 1.1rem; cursor: pointer; }
.btn:hover { background: #b11; }
.secondary-btn { position: absolute; right: .75rem; bottom: .75rem; z-index: 15; width: auto; padding: .55rem .8rem; border: 1px solid #666; border-radius: 6px; background: #222; color: #fff; font-weight: 700; cursor: pointer; }
.diff-select { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1rem 0; }
.diff-btn { padding: 10px; border: 1px solid #444; border-radius: 5px; background: #222; color: #fff; font-size: .75rem; font-weight: 700; cursor: pointer; }
.diff-btn.active { border-color: #fff; background: var(--main-red); }
.ui-panel { position: absolute; top: 10px; z-index: 10; display: flex; width: 100%; justify-content: center; gap: 15px; color: #aaa; font-size: .75rem; font-weight: 700; pointer-events: none; }
#death-screen { display: none; z-index: 25; }
#jumpscare { position: absolute; inset: 0; z-index: 30; display: none; }
#jumpscare img { width: 100%; height: 100%; object-fit: cover; }
#mid-restart { position: absolute; top: 70%; left: 50%; z-index: 40; display: none; transform: translate(-50%, -50%); padding: .8rem 1.5rem; border: 2px solid #fff; border-radius: 50px; background: rgba(255, 0, 0, .8); color: #fff; font-weight: 700; cursor: pointer; }
.shake-effect { animation: extreme-shake .06s infinite; }
@keyframes extreme-shake { 0%, 100% { transform: translate(0); } 25% { transform: translate(-8px, 8px); } 50% { transform: translate(8px, -8px); } }
@media (max-height: 400px) { .overlay { align-items: flex-start; } .settings-box { padding: .75rem; } .lang-bar { margin-bottom: .4rem; padding-bottom: .4rem; } .diff-select { margin: .5rem 0; } .btn { margin-top: .5rem; padding: .55rem; } }
@media (prefers-reduced-motion: reduce) { .shake-effect { animation: none; } }