:root {
  --bg: #1d2633;
  --panel: rgba(20, 28, 40, 0.92);
  --text: #eef2f7;
  --muted: #aab6c6;
  --accent: #7fb3ff;
  --button: #2f5d9e;
  --button-text: #ffffff;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: #7aa6e6;
}

.panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 24px;
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  z-index: 10;
}

.panel[hidden], #touch[hidden] { display: none; }

.panel h1 { margin: 0 0 4px; font-size: 1.6rem; }
.panel .sub { margin: 0 0 16px; color: var(--muted); }
.panel .small { font-size: 0.9rem; color: var(--muted); margin-bottom: 0; }
.panel a { color: var(--accent); }

.bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
#bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.2s ease;
}

.controls { margin-top: 16px; }
.controls summary { cursor: pointer; color: var(--muted); }
.controls ul { margin: 8px 0 0; padding-left: 20px; }
.controls li { margin: 2px 0; }

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 5px;
  margin: 0 1px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom-width: 2px;
  border-radius: 4px;
  font: 0.85em/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}

.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 0; }

button, .button {
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--button);
  color: var(--button-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.button.secondary { background: rgba(255, 255, 255, 0.12); color: var(--text); }
button:focus-visible, .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* On-screen controls (touch-only devices). They sit above the HUD's lower
   row, which the game draws 220 px from the bottom, so the inventory and
   player boxes and the command buttons along the bottom stay uncovered. */
#touch {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(228px + env(safe-area-inset-bottom));
  padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  z-index: 5;
}
#touch button {
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: rgba(20, 28, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 10px;
  min-width: 52px;
  min-height: 52px;
  padding: 0;
  font-size: 0.95rem;
}
#touch button.held { background: rgba(127, 179, 255, 0.75); }
.pad {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(3, 56px);
  gap: 4px;
}
.pad [data-key="KeyW"] { grid-area: 1 / 2; }
.pad [data-key="KeyA"] { grid-area: 2 / 1; }
.pad [data-key="KeyD"] { grid-area: 2 / 3; }
.pad [data-key="KeyS"] { grid-area: 3 / 2; }
.actions {
  display: grid;
  grid-template-columns: repeat(3, 60px);
  gap: 6px;
}

/* Landscape phones: smaller buttons so the controls fit above the HUD. */
@media (max-height: 500px) {
  #touch { bottom: 228px; }
  #touch button { min-width: 40px; min-height: 40px; font-size: 0.8rem; }
  .pad { grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(3, 42px); gap: 3px; }
  .actions { grid-template-columns: repeat(3, 48px); gap: 4px; }
}
@media (max-height: 420px) {
  #touch { bottom: auto; top: 50%; transform: translateY(-60%); }
}
@media (max-width: 420px) {
  .pad { grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); gap: 3px; }
  .actions { grid-template-columns: repeat(3, 54px); gap: 5px; }
  #touch button { min-width: 48px; min-height: 48px; }
}