* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
canvas { display: block; }
/* WP-014: Touch control styles */
#touch-ui { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
#touch-ui .t-group { display: none; }
.t-btn {
  pointer-events: auto; position: absolute; background: rgba(255,255,255,0.12);
  color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 14px;
  font-family: monospace; font-weight: bold; font-size: 18px;
  min-width: 56px; min-height: 56px; padding: 8px 12px;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.t-btn:active, .t-btn.active { background: rgba(255,255,255,0.3); }
.t-btn.t-large { min-width: 200px; min-height: 56px; font-size: 20px; }
.t-btn.t-accent { background: rgba(51,255,153,0.2); border-color: rgba(51,255,153,0.4); color: #33ff99; }
.t-btn.t-warn { background: rgba(255,51,51,0.15); border-color: rgba(255,51,51,0.3); color: #ff6666; }
/* Dive controls */
#touch-dive-ascend { bottom: 130px; left: 20px; width: 70px; height: 70px; font-size: 28px; }
#touch-dive-descend { bottom: 40px; left: 20px; width: 70px; height: 70px; font-size: 28px; }
#touch-dive-help { bottom: 40px; right: 20px; width: 48px; height: 48px; font-size: 16px; flex-direction: column; }
#touch-gas-info { bottom: 108px; right: 20px; width: 48px; height: 48px; font-size: 16px; flex-direction: column; }
#touch-fast-forward { bottom: 176px; right: 20px; width: 48px; height: 48px; font-size: 16px; flex-direction: column; }
/* BUG-CCR-1 / BUG-CCR-2 / BUG-CCR-7: CCR-only in-dive buttons.
   Bailout sits on the right column above fast-forward.
   SP+ / SP- stack above the ascend button on the left column. */
#touch-dive-bailout { bottom: 244px; right: 20px; width: 56px; height: 56px; font-size: 14px; flex-direction: column; }
#touch-ccr-sp-up { bottom: 290px; left: 20px; width: 56px; height: 56px; font-size: 14px; }
#touch-ccr-sp-down { bottom: 220px; left: 20px; width: 56px; height: 56px; font-size: 14px; }
.t-tank-btns { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 200px; }
.t-tank-btns .t-btn { width: 52px; height: 52px; font-size: 14px; position: relative; }
/* Setup controls */
#touch-setup { display: flex; flex-direction: column; align-items: center; }
.t-setup-row { display: flex; gap: 10px; margin: 4px 0; pointer-events: auto; }
.t-setup-row .t-btn { min-width: 48px; min-height: 48px; font-size: 16px; position: relative; }
#touch-setup-start { bottom: 30px; left: 50%; transform: translateX(-50%); }
#touch-setup-presets { position: absolute; bottom: 140px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 360px; }
#touch-setup-presets .t-btn { min-width: 60px; min-height: 44px; font-size: 13px; position: relative; }
.t-setup-adj { position: absolute; display: flex; gap: 10px; }
#touch-adj-o2 { top: 18%; left: 50%; transform: translateX(-50%); }
#touch-adj-he { top: 30%; left: 50%; transform: translateX(-50%); }
#touch-adj-pres { top: 42%; left: 50%; transform: translateX(-50%); }
#touch-adj-tank { top: 52%; left: 50%; transform: translateX(-50%); }
#touch-setup-extras { position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
/* Surface / gameover / postdive */
#touch-surface-btn { bottom: 25%; left: 50%; transform: translateX(-50%); }
#touch-gameover-btn { bottom: 12%; left: 50%; transform: translateX(-50%); }
#touch-postdive-btn { bottom: 6%; left: 50%; transform: translateX(-50%); }
/* WP-016: HTML gas-setup overlay for touch devices */
#html-gas-setup {
  display: none;
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.95);
  z-index: 5;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#html-gas-setup .gs-content {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 16px 40px;
  min-height: 100%;
  font-family: monospace;
  color: #fff;
}
#html-gas-setup .gs-title {
  font-size: 24px; font-weight: bold; margin-bottom: 20px;
}
#html-gas-setup .gs-value {
  font-size: 32px; font-weight: bold; margin: 8px 0 4px;
}
#html-gas-setup .gs-hint {
  font-size: 11px; color: #666; margin-bottom: 12px;
}
#html-gas-setup .gs-row {
  display: flex; gap: 10px; align-items: center; justify-content: center; margin: 6px 0; flex-wrap: wrap; max-width: 300px;
}
#html-gas-setup .gs-switch-depth-row {
  display: flex; align-items: center; gap: 8px; margin: 6px 0;
}
#html-gas-setup .gs-btn {
  background: rgba(255,255,255,0.12);
  color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 10px;
  font-family: monospace; font-weight: bold; font-size: 16px;
  min-width: 48px; min-height: 44px; padding: 6px 14px;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
#html-gas-setup .gs-btn:active { background: rgba(255,255,255,0.3); }
#html-gas-setup .gs-btn.gs-accent {
  background: rgba(51,255,153,0.2); border-color: rgba(51,255,153,0.4); color: #33ff99;
  min-width: 200px; min-height: 50px; font-size: 18px; margin-top: 16px;
}
#html-gas-setup .gs-presets {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  max-width: 360px; margin: 10px 0;
}
#html-gas-setup .gs-label { font-size: 14px; color: #aaa; }
#html-gas-setup .gs-section { margin: 8px 0; text-align: center; }
#html-gas-setup .gs-extras {
  display: flex; gap: 10px; margin: 10px 0;
}
/* WP-017: HTML help overlay */
#html-help-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.92); z-index: 20;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#html-help-overlay .help-content {
  padding: 20px 20px 60px; font-family: monospace; color: #fff; max-width: 800px; margin: 0 auto;
}
#html-help-overlay .help-title { font-size: 20px; font-weight: bold; margin-bottom: 8px; border-bottom: 1px solid #33ff99; padding-bottom: 8px; }
#html-help-overlay .help-section { margin-bottom: 14px; }
#html-help-overlay .help-section-title { font-size: 12px; font-weight: bold; margin-bottom: 4px; }
#html-help-overlay .help-section-text { font-size: 11px; color: #bbb; line-height: 1.5; }
#html-help-overlay .help-close-btn {
  display: block; margin: 20px auto; padding: 12px 40px;
  background: rgba(255,255,255,0.12); color: #888; border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px; font-family: monospace; font-weight: bold; font-size: 14px; cursor: pointer;
  touch-action: manipulation;
}
#html-help-overlay .help-close-btn:active { background: rgba(255,255,255,0.3); }
/* TASK-031D: Gas info overlay card styles */
.gas-info-card { background: rgba(0,40,60,0.8); border: 1px solid #336; border-radius: 6px; padding: 10px 14px; margin: 8px 0; }
.gas-info-card.active { border-color: #33ff99; background: rgba(0,60,40,0.6); }
.gas-info-card .best-tag { color: #33ff99; font-weight: bold; font-size: 12px; }
@media (max-width: 480px) {
  .t-tank-btns .t-btn { width: 44px; height: 44px; font-size: 12px; }
  #html-gas-setup .gs-btn { min-width: 40px; min-height: 38px; padding: 4px 10px; font-size: 14px; }
  #html-gas-setup .gs-btn.gs-accent { min-width: 160px; min-height: 44px; font-size: 16px; }
  #html-gas-setup .gs-value { font-size: 26px; }
  #html-gas-setup .gs-title { font-size: 20px; }
  #touch-dive-ascend { width: 60px; height: 60px; font-size: 24px; bottom: 110px; left: 10px; }
  #touch-dive-descend { width: 60px; height: 60px; font-size: 24px; bottom: 30px; left: 10px; }
  #touch-dive-help { bottom: 30px; right: 10px; }
  #touch-gas-info { bottom: 96px; right: 10px; }
  #touch-fast-forward { bottom: 162px; right: 10px; }
  /* BUG-CCR-1/2/7: tighter mobile layout for CCR buttons */
  #touch-dive-bailout { bottom: 228px; right: 10px; width: 52px; height: 52px; }
  #touch-ccr-sp-up { bottom: 250px; left: 10px; width: 52px; height: 52px; }
  #touch-ccr-sp-down { bottom: 190px; left: 10px; width: 52px; height: 52px; }
}