:root { --amber:#e8a949; --parchment:#e8e2d2; --blood:#b3352b; --night:#0a0c14; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--night);
  font-family: Georgia, 'Times New Roman', serif; color: var(--parchment); }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#vignette { position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 38%, rgba(60,0,0,0.9) 100%);
  transition: opacity .25s; }
#cross { position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px;
  border-radius: 50%; border: 1px solid rgba(232,226,210,.55); pointer-events: none; }
#hud { position: fixed; inset: 0; pointer-events: none; }
.hud-top { position: absolute; top: 10px; left: 12px; right: 12px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.meter { width: 150px; }
.meter .label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(232,226,210,.75); text-shadow: 0 1px 2px #000; }
.meter .bar { height: 9px; background: rgba(0,0,0,.6); border: 1px solid rgba(232,226,210,.35);
  border-radius: 5px; overflow: hidden; }
.meter .bar i { display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #7fb3a0, #cfe8d8); transition: width .2s; }
.meter#battery .bar i { background: linear-gradient(90deg, #b8862e, #ffd98a); }
.meter.low .bar i { background: linear-gradient(90deg, #8c241d, #ff6a55) !important; }
.stat { margin-left: auto; text-align: right; text-shadow: 0 1px 3px #000; }
.stat .num { font-size: 20px; }
.stat .label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
#time.low { color: #ff7a66; }
#keys { display: flex; gap: 6px; }
.keydot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(232,169,73,.6);
  background: rgba(232,169,73,.08); }
.keydot.got { background: radial-gradient(circle, #ffe9a8, #d8a53c); box-shadow: 0 0 8px #e8a949; }
#msg { position: absolute; left: 50%; top: 16%; transform: translateX(-50%);
  max-width: 82%; text-align: center; font-size: 17px; font-style: italic;
  text-shadow: 0 2px 6px #000; opacity: 0; transition: opacity .4s; }
#msg.show { opacity: 1; }
#hint { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%);
  font-size: 15px; letter-spacing: .06em; text-shadow: 0 2px 5px #000;
  background: rgba(8,8,14,.55); padding: 4px 12px; border-radius: 12px; }
#hint:empty { display: none; }
#overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(4,5,10,0.82); z-index: 30; padding: 18px; overflow: auto; }
#overlay.hidden { display: none; }
#overlay-box { max-width: 620px; text-align: center; }
.game-title { font-size: clamp(28px, 6vw, 52px); letter-spacing: .18em; color: #f2e7cf;
  text-shadow: 0 0 18px rgba(232,169,73,.5), 0 3px 10px #000; }
h2.win { color: #d9f2df; text-shadow: 0 0 18px rgba(120,220,150,.5); }
h2.lose { color: #e8b0a4; text-shadow: 0 0 18px rgba(200,60,40,.6); }
#overlay-box .tag { margin: 14px 0; font-size: 16px; line-height: 1.55; color: #cfc8b8; }
.howto { list-style: none; margin: 14px auto; text-align: left; max-width: 500px; }
.howto li { margin: 7px 0; font-size: 14px; line-height: 1.5; color: #bfb9ac; }
.howto b { color: #e8d9b0; }
.big-btn { display: inline-block; margin-top: 12px; padding: 12px 34px; font: inherit;
  font-size: 18px; letter-spacing: .1em; cursor: pointer; color: #17120a;
  background: linear-gradient(180deg, #ffd98a, #d8a53c); border: 1px solid #a87a28;
  border-radius: 10px; box-shadow: 0 0 24px rgba(232,169,73,.35), 0 4px 12px rgba(0,0,0,.6); }
.big-btn:hover { filter: brightness(1.12); }
.end-score { font-size: 22px; margin: 10px 0; }
.end-why { color: #bdb4a4; font-style: italic; margin-bottom: 8px; }
.end-note { margin-top: 14px; font-size: 12px; opacity: .7; }
#touch-controls { position: fixed; inset: 0; z-index: 20; display: none; }
body.touch #touch-controls { display: block; }
#stick { position: absolute; left: 18px; bottom: 22px; width: 132px; height: 132px;
  border-radius: 50%; background: rgba(20,22,32,.45); border: 1px solid rgba(232,226,210,.3);
  touch-action: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; border-radius: 50%;
  background: rgba(232,226,210,.35); border: 1px solid rgba(232,226,210,.6);
  transform: translate(-50%,-50%); pointer-events: none; }
#look-zone { position: absolute; right: 0; top: 0; width: 58%; height: 76%; touch-action: none; }
#btn-act { position: absolute; right: 20px; bottom: 128px; width: 84px; height: 84px;
  border-radius: 50%; background: rgba(232,169,73,.28); border: 1px solid rgba(232,169,73,.7);
  color: #ffe9a8; font: inherit; font-size: 15px; letter-spacing: .08em; touch-action: none; }
#btn-flash { position: absolute; right: 26px; bottom: 34px; width: 64px; height: 64px;
  border-radius: 50%; background: rgba(120,140,200,.22); border: 1px solid rgba(160,180,230,.6);
  color: #cdd6ee; font: inherit; font-size: 13px; touch-action: none; }
@media (max-width: 480px) {
  .meter { width: 96px; }
  .hud-top { gap: 8px; }
  #overlay-box .tag { font-size: 14px; }
}