:root {
  --ink: #1d1e33; --paper: #f2ecdd; --brass: #d9a441; --coral: #ff8a5c;
  --moss: #6f8f6a; --plum: #3c3f5c;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; background: var(--ink); color: var(--paper); }

/* ---------- game page ---------- */
#app { position: fixed; inset: 0; }
#app canvas { display: block; }
#hud { position: fixed; top: 0; left: 0; right: 0; display: flex; gap: 14px;
  align-items: center; padding: 10px 14px; pointer-events: none; flex-wrap: wrap;
  font-weight: bold; letter-spacing: 1px; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.hud-block { background: rgba(20,20,40,.55); border: 1px solid rgba(217,164,65,.5);
  border-radius: 10px; padding: 6px 10px; }
.bar { width: 150px; height: 12px; background: rgba(0,0,0,.5); border-radius: 6px; overflow: hidden; }
.bar > div { height: 100%; border-radius: 6px; transition: width .15s; }
#hp-fill { width: 100%; background: linear-gradient(90deg, #7fd08a, #b8e07a); }
#hp-fill.low { background: linear-gradient(90deg, #ff5d47, #ff9a5c); }
#reload-fill { width: 100%; background: var(--brass); }
.bar-label { font-size: 11px; opacity: .8; margin-bottom: 3px; }
#banner { position: fixed; top: 18%; left: 50%; transform: translateX(-50%);
  font-size: clamp(22px, 5vw, 44px); font-weight: 900; letter-spacing: 4px;
  color: var(--brass); text-shadow: 0 0 18px rgba(255,170,90,.6), 0 3px 8px #000;
  pointer-events: none; }
.hidden { display: none !important; }

.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(30,28,60,.82), rgba(10,10,24,.94));
  padding: 20px; }
.overlay h2 { font-size: clamp(26px, 6vw, 52px); letter-spacing: 3px; color: var(--brass); }
.overlay h2.lose { color: #ff6a4a; }
.overlay p, .overlay li { max-width: 560px; line-height: 1.55; color: #e8e2d2; }
.overlay ul { list-style: none; text-align: left; }
.overlay li::before { content: "▸ "; color: var(--coral); }
.big-btn { display: inline-block; border: none; cursor: pointer; font-weight: 900;
  font-size: 20px; letter-spacing: 2px; padding: 14px 34px; border-radius: 12px;
  color: #23203a; background: linear-gradient(180deg, #ffd27a, #d9a441);
  box-shadow: 0 6px 22px rgba(255,180,90,.35); font-family: inherit; }
.big-btn:active { transform: translateY(2px); }

/* touch controls */
#touch-controls { position: fixed; bottom: 0; left: 0; right: 0; display: flex;
  justify-content: space-between; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  pointer-events: none; user-select: none; -webkit-user-select: none; touch-action: none; }
.tc-cluster { display: flex; gap: 10px; pointer-events: auto; align-items: flex-end; }
.tc-btn { width: 58px; height: 58px; border-radius: 14px; font-size: 20px; font-weight: 800;
  color: #ffe9c4; background: rgba(30,30,55,.55); border: 1px solid rgba(217,164,65,.55);
  backdrop-filter: blur(2px); touch-action: none; cursor: pointer; }
.tc-btn.tc-on { background: rgba(217,164,65,.65); }
.tc-fire { width: 74px; height: 74px; border-radius: 50%; font-size: 15px;
  background: rgba(160,60,40,.55); border-color: rgba(255,140,90,.7); }
@media (hover: hover) and (pointer: fine) { .tc-btn { opacity: .45; } }