*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#05070d;color:#dfe3ee;
  font-family:Georgia,'Times New Roman',serif}
#game-canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
#hud{position:fixed;top:10px;left:12px;right:12px;pointer-events:none;z-index:5}
.hud-row{display:flex;gap:8px;flex-wrap:wrap}
.hud-chip{background:rgba(8,10,18,.72);border:1px solid #3a4462;border-radius:8px;
  padding:6px 10px;font-size:13px;letter-spacing:.08em}
.hud-chip b{color:#f2c14e}
.flamebar{display:inline-block;width:80px;height:9px;background:#1c2233;border-radius:5px;
  overflow:hidden;vertical-align:middle;margin-left:6px}
#hud-flame-fill{display:block;height:100%;width:100%;
  background:linear-gradient(90deg,#ff5a2a,#ffb45e,#ffe9c4)}
#hud-msg{margin-top:10px;max-width:520px;background:rgba(8,10,18,.8);
  border-left:3px solid #ffb45e;padding:8px 12px;border-radius:0 8px 8px 0;
  font-size:14px;transition:opacity .6s;opacity:0}
.screen[hidden]{display:none}
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;
  background:radial-gradient(ellipse at center,rgba(15,18,32,.92) 0%,rgba(3,4,8,.97) 80%);
  padding:20px}
.screen h1{font-size:clamp(34px,7vw,64px);letter-spacing:.22em;color:#f2c14e;
  text-shadow:0 0 24px rgba(255,180,94,.45)}
.screen p{max-width:520px;line-height:1.6;color:#a8b2cc}
.tag{font-style:italic}
.howto{list-style:none;display:flex;flex-direction:column;gap:7px;max-width:560px;
  font-size:14.5px;color:#c6cde0;line-height:1.5}
.howto b{color:#f2c14e}
.keys-info{font-size:13px;color:#8fa0c0}
.bigbtn{font:inherit;font-size:17px;letter-spacing:.12em;cursor:pointer;
  background:linear-gradient(#ffb45e,#e7913a);color:#1a1206;border:none;
  border-radius:10px;padding:13px 34px;box-shadow:0 0 26px rgba(255,180,94,.35)}
.bigbtn:hover{filter:brightness(1.12)}
#tc-joy,#tc-look{display:none}
@media (pointer:coarse),(max-width:820px){
  #tc-joy{display:block;position:fixed;left:14px;bottom:16px;z-index:8;width:104px;height:104px;
    border-radius:50%;background:rgba(20,25,40,.5);border:1.5px solid #3a4462;
    touch-action:none}
  #tc-knob{width:44px;height:44px;margin:28px;border-radius:50%;
    background:rgba(242,193,78,.65);pointer-events:none}
  #tc-look{display:block;position:fixed;right:0;top:0;bottom:0;width:46%;z-index:6;
    touch-action:none}
  #tc-act{display:block;position:fixed;right:16px;bottom:20px;z-index:8;width:64px;height:64px;
    border-radius:50%;font-size:22px;background:rgba(242,193,78,.6);color:#14100a;
    border:1.5px solid #f2c14e}
  #tc-pause{display:block;position:fixed;right:16px;top:58px;z-index:8;width:44px;height:44px;
    border-radius:10px;background:rgba(20,25,40,.65);color:#dfe3ee;border:1px solid #3a4462}
}
@media (pointer:fine) and (min-width:821px){#tc-act,#tc-pause{display:none}}