/* ===========================================
   PAGE LAYOUTS — Shared game & tool page chrome
   Merged from page-game.css + page-tool.css
   =========================================== */

/* ---- Game Layout ---- */

/* Back bar */
.game-back-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  margin-bottom: var(--space-lg);
}

.game-back-bar a {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--border-subtle);
  transition: all var(--duration-fast) ease;
}

@media (hover: hover) {
  .game-back-bar a:hover {
    background: var(--surface);
    border-color: var(--accent);
    color: var(--text);
  }
}

/* Game container */
.game-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.game-container canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Tool Layout ---- */

/* Tool header */
.tool-header {
  padding: var(--space-xl) 0 var(--space-2xl);
  border-bottom: var(--border-width) solid var(--border-subtle);
  margin-bottom: var(--space-2xl);
}

.tool-header h1 {
  font-size: clamp(36px, 6vw, 56px);
  letter-spacing: -1px;
  margin: 0 0 var(--space-sm);
}

.tool-header .tool-subtitle {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tool-header .tool-subtitle::before {
  content: '> ';
  color: var(--accent-tertiary);
}

/* Tool content area */
.tool-content-area {
  min-height: 60vh;
}