* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #05030a; font-family: Georgia, "Times New Roman", serif; }
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; color: #e8d8b8; }
#vignette { position: absolute; inset: 0; opacity: 0.25; background: radial-gradient(ellipse at center, transparent 45%, rgba(30,0,8,0.9) 100%); transition: opacity .3s; }
#flash { position: absolute; inset: 0; opacity: 0; background: #ff2010; pointer-events: none; }
#crosshair { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 20px; color: rgba(240,220,180,0.55); }
#topbar { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; align-items: center; gap: 14px; }
#timer { font-size: 26px; letter-spacing: 2px; text-shadow: 0 0 12px #000; }
#timer.danger { color: #ff4422; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
#sigils .pip { font-size: 20px; color: #3a2f3f; margin-right: 6px; }
#sigils .pip.on { color: #ff7a1e; text-shadow: 0 0 12px #ff5500; }
#btn-pause { pointer-events: auto; margin-left: auto; background: rgba(20,12,24,.7); color: #e8d8b8; border: 1px solid #55405a; border-radius: 8px; font-size: 16px; padding: 6px 10px; }
#objective { position: absolute; top: 46px; left: 12px; right: 12px; max-width: 620px; font-size: 14px; color: #b9a27e; text-shadow: 0 1px 3px #000; }
#prompt { position: absolute; left: 50%; top: 57%; transform: translateX(-50%); font-size: 17px; color: #ffd9a0; text-shadow: 0 0 8px #000; white-space: nowrap; }
#msg { position: absolute; left: 50%; top: 15%; transform: translateX(-50%); font-size: 18px; color: #ffe9c8; text-shadow: 0 0 10px #000; opacity: 0; transition: opacity .4s; text-align: center; width: 92%; }
#msg.show { opacity: 1; }
#stamina { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); width: 180px; height: 7px; background: rgba(10,6,14,.7); border-radius: 4px; }
#stamina-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #7a4a9a, #d67a2e); border-radius: 4px; }
#touch-controls { position: fixed; inset: auto 0 0 0; pointer-events: none; }
#stick { pointer-events: auto; position: fixed; left: 18px; bottom: 18px; width: 128px; height: 128px; border-radius: 50%; background: rgba(30,18,40,.4); border: 2px solid rgba(140,100,160,.35); touch-action: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: rgba(220,170,120,.45); border: 2px solid rgba(255,200,140,.5); }
#btn-sprint, #btn-interact { pointer-events: auto; position: fixed; right: 20px; width: 74px; height: 74px; border-radius: 50%; font: bold 17px Georgia; color: #ffe0b0; background: rgba(40,20,30,.45); border: 2px solid rgba(200,120,90,.45); }
#btn-interact { bottom: 112px; }
#btn-sprint { bottom: 22px; }
#overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(3,2,8,0.72); z-index: 10; }
#overlay.show { display: flex; }
#overlay-box { max-width: 560px; width: 92%; padding: 34px 30px; text-align: center; background: linear-gradient(180deg, #17101d, #0c0812); border: 1px solid #4a3355; border-radius: 14px; box-shadow: 0 0 60px rgba(120,40,10,.35); }
#overlay-title { font-size: 34px; letter-spacing: 6px; color: #ffb066; text-shadow: 0 0 22px rgba(255,110,20,.6); margin-bottom: 16px; }
#overlay-text { color: #cbb492; line-height: 1.65; font-size: 15.5px; margin-bottom: 22px; }
#overlay-btn { pointer-events: auto; cursor: pointer; font: bold 17px Georgia; letter-spacing: 2px; color: #140a06; background: linear-gradient(180deg, #ffb066, #d67a2e); border: none; border-radius: 9px; padding: 13px 34px; }
#overlay-btn:hover { filter: brightness(1.15); }
@media (pointer: fine) and (min-width: 700px) { #touch-controls { display: none; } }