* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #20242e; }
body.game-page { font-family: system-ui, "Segoe UI", sans-serif; color: #fff; }
body.game-page canvas { display: block; }
#hud { position: fixed; top: 8px; left: 8px; right: 8px; pointer-events: none; z-index: 5; }
.hud-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.hud-bar span { background: rgba(24, 26, 20, 0.65); border: 1px solid rgba(255, 210, 120, 0.35);
  border-radius: 10px; padding: 6px 12px; font-size: 15px; font-weight: 600; backdrop-filter: blur(3px); }
#hud-time.low { color: #ff8f6b; }
#hud-upgrades { margin-top: 6px; display: flex; gap: 6px; }
#hud-upgrades .upg { background: rgba(120, 160, 90, 0.75); border-radius: 8px; padding: 3px 8px;
  font-size: 12px; font-weight: 700; }
#prompt { position: fixed; left: 50%; bottom: 22%; transform: translateX(-50%);
  background: rgba(20, 22, 16, 0.78); border: 1px solid rgba(255, 220, 150, 0.4);
  padding: 8px 16px; border-radius: 10px; font-size: 15px; font-weight: 600;
  opacity: 0; transition: opacity 0.15s; pointer-events: none; z-index: 6; }
#prompt.show { opacity: 1; }
#toasts { position: fixed; left: 50%; top: 30%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 7; pointer-events: none; }
.toast { font-size: 20px; font-weight: 800; color: #ffd97a; text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  animation: rise 1.2s forwards; }
@keyframes rise { 0% { transform: translateY(10px); opacity: 0; } 15% { opacity: 1; }
  100% { transform: translateY(-46px); opacity: 0; } }
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(16, 18, 14, 0.62); z-index: 20; backdrop-filter: blur(2px); }
.overlay.hidden, .hidden { display: none; }
.panel { background: linear-gradient(160deg, #2e3324, #23271c); border: 1px solid rgba(255, 210, 120, 0.35);
  border-radius: 16px; padding: 22px 26px; max-width: min(520px, 92vw); max-height: 88vh; overflow: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); }
.panel h1 { margin: 0 0 4px; font-size: 34px; color: #ffd97a; letter-spacing: 1px; }
.panel h2 { margin: 0 0 10px; color: #ffd97a; }
.panel .tag { color: #cfe0b0; margin: 0 0 12px; }
#controls p { font-size: 14px; line-height: 1.55; color: #e8e6d8; }
.btn-big, .btn { background: linear-gradient(160deg, #f0a836, #d97e2b); color: #221a08; border: 0;
  border-radius: 12px; font-size: 17px; font-weight: 800; padding: 12px 26px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(240, 168, 54, 0.35); }
.btn { font-size: 14px; padding: 8px 18px; }
.btn-big:hover, .btn:hover { filter: brightness(1.1); }
#shop-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.shop-item { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 210, 120, 0.25);
  border-radius: 10px; padding: 8px 12px; }
.shop-item .desc { font-size: 14px; }
.shop-item .desc small { color: #a8bb90; display: block; }
.shop-item button { white-space: nowrap; }
.shop-item .owned { color: #9fd06f; font-weight: 700; font-size: 13px; }
.hint { font-size: 12px; color: #a8bb90; }
#touch-controls { position: fixed; inset: auto 0 0 0; display: none; z-index: 15;
  padding: 0 12px 14px; justify-content: space-between; pointer-events: none; }
.dpad { display: grid; grid-template-areas: ". u ." "l . r" ". d ."; gap: 6px; pointer-events: auto; }
.tacts { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: auto; }
.tbtn { width: 56px; height: 56px; border-radius: 14px; border: 1px solid rgba(255, 220, 150, 0.4);
  background: rgba(40, 44, 32, 0.6); color: #fff; font-size: 16px; font-weight: 700;
  touch-action: none; user-select: none; -webkit-user-select: none; }
.tbtn.big { width: 76px; height: 76px; font-size: 13px; background: rgba(120, 90, 30, 0.55); }
.tbtn:active { background: rgba(240, 168, 54, 0.5); }
@media (pointer: coarse) { #touch-controls { display: flex; } }