/* BomberPhone — full-screen 240x320 layout, scaled to fit the viewport */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body {
  width: 100%; height: 100%;
  background: #000;
  overflow: hidden;
  touch-action: none;
  font-family: 'Courier New', monospace;
}

/* Fixed 240x320 logical screen, scaled up/down by fit.js to fill the
   viewport while preserving the exact pixel layout the game was designed
   at (crisp, letterboxed, never distorted). */
#screenWrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 320px;
  transform-origin: center center;
  transform: translate(-50%, -50%);
}

canvas {
  width: 240px;
  height: 320px;
  image-rendering: pixelated;
  background: #cfe0b8;
  display: block;
}

/* HTML-based screen (used by help/about pages) */
.phone-screen {
  width: 240px;
  height: 320px;
  display: flex;
  flex-direction: column;
  background: #cfe0b8;
  color: #16210d;
  overflow: hidden;
}
.status-bar {
  height: 18px;
  background: #1e2b12;
  color: #e8f0da;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  flex: 0 0 18px;
}
.content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 9px;
  font-size: 10.5px;
  line-height: 1.55;
}
.content h1 {
  font-size: 13px;
  margin: 0 0 6px;
  color: #16210d;
}
.content h2 {
  font-size: 10.5px;
  margin: 12px 0 4px;
  color: #3a5220;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.content p { margin: 0 0 8px; }
.content ul { margin: 0 0 8px; padding-left: 16px; }
.content li { margin-bottom: 4px; }
.content .key-row {
  display: flex; justify-content: space-between;
  border-bottom: 1px dashed #9db07e;
  padding: 3px 0;
}
.content .key-row b { color: #3a5220; }
.content .foot {
  text-align: center;
  color: #5c6b4a;
  font-size: 9px;
  margin-top: 10px;
}

.softkey-bar {
  flex: 0 0 30px;
  background: #16210d;
  border-top: 1px solid #33421f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  font-size: 10px;
  color: #cfe0b8;
}