/* game.css — HUD, overlays and touch controls for The Pale House */
:root { --gold: #d9a441; --bone: #e8e2d0; --blood: #a4202a; --teal: #5fd4c8; }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; background: #05040a; }
body { font-family: Georgia, "Palatino Linotype", serif; color: var(--bone); }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; pointer-events: auto; }
#ui { position: fixed; inset: 0; pointer-events: none; }
.hud-top { position: fixed; top: 10px; left: 12px; right: 12px; display: flex;
  justify-content: space-between; align-items: flex-start; text-shadow: 0 2px 6px #000; }
#timer { font-size: 26px; letter-spacing: 2px; color: var(--bone); }
#timer.low { color: #ff5a4a; animation: pulse 1s infinite; }
#scorebox { font-size: 16px; color: var(--gold); text-align: right; }
#keys { display: flex; gap: 8px; margin-top: 6px; justify-content: flex-end; }
.keyslot { width: 26px; height: 26px; border: 2px solid #555; border-radius: 6px;
  background: rgba(10,8,6,0.55); position: relative; }
.keyslot.got { border-color: var(--gold); background: rgba(80,55,10,0.5); }
.keyslot.got::after { content: "\1F511"; position: absolute; inset: 0; text-align: center; line-height: 22px; font-size: 15px; }
#prompt { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%);
  font-size: 18px; color: var(--teal); text-shadow: 0 2px 8px #000; white-space: nowrap; }
#stamina { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%);
  width: 150px; height: 7px; background: rgba(255,255,255,0.12); border-radius: 4px; }
#stamina i { display: block; height: 100%; width: 100%; background: var(--teal);
  border-radius: 4px; transition: width 0.1s linear; }
#crosshair { position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px;
  border-radius: 50%; background: rgba(232,226,208,0.55); }
#vignette { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 42%, rgba(0,0,0,0.72) 100%); }
#dread { position: fixed; inset: 0; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(120,0,10,0.55) 100%); }
@keyframes pulse { 50% { opacity: 0.4; } }
.overlay { position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(15,10,22,0.92), rgba(3,2,6,0.98));
  pointer-events: auto; padding: 20px; }
.overlay.hidden, #touch.hidden { display: none; }
.overlay h1 { font-size: clamp(30px, 6vw, 54px); letter-spacing: 6px; color: var(--gold);
  text-shadow: 0 0 24px rgba(217,164,65,0.35); }
.overlay h2 { font-size: clamp(22px, 4vw, 36px); color: var(--bone); }
.overlay p { max-width: 640px; line-height: 1.65; color: #bfb8a4; font-size: 15px; }
.overlay .tag { color: var(--teal); letter-spacing: 2px; font-size: 14px; }
.bigbtn { pointer-events: auto; cursor: pointer; display: inline-block;
  padding: 14px 34px; font: inherit; font-size: 18px; letter-spacing: 2px;
  color: #14100a; background: linear-gradient(#eab958, #b97f22);
  border: 0; border-radius: 10px; box-shadow: 0 6px 22px rgba(217,164,65,0.35); text-decoration: none; }
.bigbtn.alt { background: linear-gradient(#7fd6c8, #2e8f7f); box-shadow: 0 6px 22px rgba(95,212,200,0.3); }
kbd { background: #221a12; border: 1px solid #55442e; border-radius: 5px; padding: 2px 8px;
  font-family: inherit; color: var(--bone); }
/* touch controls */
#touch { position: fixed; inset: 0; pointer-events: none; }
#stick { position: fixed; left: 18px; bottom: 24px; width: 128px; height: 128px;
  border-radius: 50%; background: rgba(232,226,208,0.08); border: 2px solid rgba(232,226,208,0.25);
  pointer-events: auto; touch-action: none; }
#stickNub { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px;
  border-radius: 50%; background: rgba(232,226,208,0.35); }
#lookPad { position: fixed; inset: 0; pointer-events: auto; touch-action: none; }
.tbtn { position: fixed; pointer-events: auto; cursor: pointer; width: 86px; height: 86px;
  border-radius: 50%; border: 2px solid rgba(232,226,208,0.3); color: var(--bone);
  background: rgba(20,14,8,0.55); font-size: 13px; letter-spacing: 1px; font-family: inherit; }
#btnAct { right: 22px; bottom: 128px; border-color: rgba(217,164,65,0.6); }
#btnRun { right: 122px; bottom: 34px; width: 72px; height: 72px; }
#touch .tbtn:active, #stick:active { background: rgba(217,164,65,0.35); }
#pauseHint { position: fixed; right: 12px; bottom: 10px; font-size: 12px; color: #7a7160; }
@media (max-width: 600px) { #prompt { bottom: 150px; } #timer { font-size: 20px; } }