/* Bonegarden. Tokens and buttons come from the shared SkullSeed stylesheet. */

html, body { height: 100%; background: var(--cream); }
body { padding: 12px; }

.game {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.stage-wrap { position: relative; flex: 1; min-height: 200px; display: flex; }

#stage {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: block;
  border: var(--border);
  border-radius: var(--radius-icon);
  background: var(--ink);
  image-rendering: pixelated;
  touch-action: none;
  cursor: var(--cursor);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
#stage:focus-visible { outline-offset: 3px; }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.controls .btn { padding: 6px 14px; font-size: 14px; }
.btn:disabled { border-style: dashed; cursor: var(--cursor); }
.btn-ghost:disabled:hover { background-color: transparent; color: var(--ink); }
.btn.toggle[aria-pressed="true"] { background: var(--ink); color: var(--cream); }

.status { flex: 1; min-width: 12em; margin: 0; font-weight: var(--weight-bold); font-size: 15px; }

/* The title and pause menu: a cream card over the view, like a window */
.menu {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;   /* the scene behind stays visible; only the card takes clicks */
}
.menu[hidden], .menu-panel[hidden] { display: none; }
.menu-panel {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: 22px 30px 24px;
  background: var(--cream);
  border: var(--border);
  border-radius: var(--radius-window);
  box-shadow: var(--shadow-window);
  text-align: center;
}
.logo { margin-bottom: 4px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(4px 4px 0 var(--ink)); }
.logo .fill-cream { fill: var(--cream); }
.logo .fill-ink { fill: var(--ink); stroke: none; }
.menu-title { margin: 0; font-size: 28px; line-height: 1.2; }
.menu-title--small { font-size: 22px; margin-bottom: 14px; }
.menu-sub { margin: 4px 0 18px; font-size: 15px; }
.menu-buttons { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 180px; }
.menu-buttons .btn { width: 100%; }
.menu-buttons .btn[hidden] { display: none; }
.menu-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0; }
.menu-options .btn { padding: 6px 14px; font-size: 14px; }

/* Controls: keycaps with short labels */
.keys {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  font: var(--weight-bold) 14px/1.2 var(--font);
}
.key-note { font-weight: var(--weight-regular); }
.keys li { display: flex; align-items: center; gap: 7px; }
.caps { display: inline-flex; gap: 4px; }
.keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius-small);
  box-shadow: 2px 2px 0 var(--ink);
  font: var(--weight-bold) 13px/1 var(--font);
}
.keys kbd.wide { padding: 0 12px; }
.keys kbd svg { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }