* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a1420;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: #f2ecdf; }
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#game-canvas:active { cursor: grabbing; }
#flash { position: fixed; inset: 0; background: #ff2f4d; opacity: 0; pointer-events: none; transition: opacity 0.1s; }

#hud { position: fixed; inset: 0; pointer-events: none; transition: opacity .3s; }
#hud-top { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; }
.hud-chip { background: rgba(10, 20, 32, 0.72); border: 1px solid rgba(255, 190, 110, .35);
  border-radius: 10px; padding: 6px 12px; display: flex; gap: 10px; align-items: center; font-weight: 700; }
#phase-label { color: #9fd8b8; font-size: .85em; letter-spacing: .12em; text-transform: uppercase; }
#phase-label.night { color: #8f7bff; }
.score-chip { color: #ffc46b; }
#bars { position: absolute; top: 58px; left: 12px; display: flex; flex-direction: column; gap: 5px; }
.bar-row { display: flex; align-items: center; gap: 6px; }
.bar-ico { width: 20px; text-align: center; font-size: 13px; }
.ico-health { color: #ff6b81; } .ico-hunger { color: #ffd166; } .ico-fuel { color: #ff8a3d; }
.bar { width: 148px; height: 12px; background: rgba(8, 14, 24, .75); border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); }
.fill { height: 100%; border-radius: 6px; transition: width .25s; }
.fill-health { background: linear-gradient(90deg, #c9274b, #ff6b81); }
.fill-hunger { background: linear-gradient(90deg, #b8860b, #ffd166); }
.fill-fuel { background: linear-gradient(90deg, #a33a06, #ffab5e); }

#inventory { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 4px;
  background: rgba(10, 20, 32, .72); border: 1px solid rgba(255, 190, 110, .35); border-radius: 10px; padding: 8px 12px; }
.inv { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.inv-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-spores { background: #6ef2c8; box-shadow: 0 0 6px #6ef2c8; }
.dot-berries { background: #ff7ab0; box-shadow: 0 0 6px #ff7ab0; }
.dot-wood { background: #c9a876; }

#hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  font-size: 12px; opacity: .85; background: rgba(8, 12, 20, .55); padding: 4px 10px; border-radius: 8px; white-space: nowrap; }
#banner { position: absolute; top: 18%; left: 50%; transform: translateX(-50%);
  font-size: clamp(15px, 2.4vw, 22px); font-weight: 800; color: #ffe0a8; text-shadow: 0 2px 10px rgba(0,0,0,.8);
  opacity: 0; transition: opacity .4s; text-align: center; width: 92%; }
#banner.show { opacity: 1; }

/* touch controls */
#stick-zone { position: absolute; left: 18px; bottom: 22px; width: 128px; height: 128px; border-radius: 50%;
  background: rgba(255, 210, 150, .10); border: 2px solid rgba(255, 210, 150, .3);
  pointer-events: auto; touch-action: none; display: none; }
#stick-knob { position: absolute; left: 42px; top: 42px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 200, 130, .45); border: 2px solid rgba(255, 220, 160, .7); }
#touch-buttons { position: absolute; right: 14px; bottom: 22px; display: none; flex-direction: column; gap: 8px; }
.tbtn { pointer-events: auto; width: 64px; height: 52px; border-radius: 14px; border: 2px solid rgba(255, 205, 140, .55);
  background: rgba(24, 40, 60, .78); color: #ffd9a1; font-weight: 700; font-size: 11px; line-height: 1.25;
  font-family: inherit; touch-action: none; }
.tbtn.pressed { background: rgba(255, 170, 90, .6); color: #14202e; }

/* overlays */
#start-screen, #end-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, rgba(30, 45, 70, .82), rgba(6, 10, 18, .95));
  z-index: 10; text-align: center; padding: 16px; }
#end-screen { display: none; }
.panel { max-width: 560px; }
.panel h1 { font-size: clamp(30px, 7vw, 54px); letter-spacing: .08em; color: #ffc46b;
  text-shadow: 0 0 24px rgba(255, 140, 60, .55); }
.tag { font-style: italic; color: #cfe0d8; margin: 6px 0 18px; }
.howto { text-align: left; background: rgba(10, 18, 30, .6); border: 1px solid rgba(255, 190, 110, .25);
  border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.55; }
.howto p + p { margin-top: 8px; }
.howto i { color: #8fe8c4; }
.big-btn { margin-top: 20px; font-size: 19px; font-weight: 800; letter-spacing: .05em; color: #14202e;
  background: linear-gradient(180deg, #ffd08a, #ff9b45); border: none; border-radius: 14px; padding: 14px 34px;
  cursor: pointer; box-shadow: 0 6px 22px rgba(255, 150, 60, .45); font-family: inherit; }
.big-btn:hover { transform: translateY(-2px); box-shadow: 0 9px 28px rgba(255, 150, 60, .6); }
#end-text { font-size: 16px; line-height: 1.6; color: #e8e2d4; }
#end-text b { color: #ffd166; }
@media (max-width: 640px) { #hint { display: none; } }