/* Shared shell styling for individual game pages */

.game-shell { padding: 26px 0 60px; }

.game-shell__back {
  display: inline-block;
  margin-bottom: 14px;
  font-weight: 700;
  color: var(--color-text-soft);
}

.game-shell__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.game-shell__title-group h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: 4px; }
.game-shell__title-group p { color: var(--color-text-soft); margin: 0; }
.game-shell__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.game-shell__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 900px) {
  .game-shell__layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.game-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px;
}
.game-panel:fullscreen,
.game-panel:-webkit-full-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  max-width: none;
  border-radius: 0;
  border: none;
  background: var(--color-surface);
  overflow: auto; /* safety net: scroll rather than clip if a game ever measures larger than the viewport */
  position: relative; /* anchors .game-shell__actions once game-page.js relocates it here */
}
/* game-page.js moves .game-shell__actions (the Full Screen toggle, plus this game's own
   Retry/Rebuild/New Game/New Battle button) into .game-panel for the duration of fullscreen,
   since anything left in the page header falls outside the fullscreen element and the browser
   simply doesn't paint it. Pin it as a floating bar rather than leaving it inline, so it doesn't
   get sucked into the flex-centering above and shove the scaled game off-center. */
.game-panel:fullscreen > .game-shell__actions,
.game-panel:-webkit-full-screen > .game-shell__actions {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
  margin: 0;
}
/* game-page.js wraps every one of .game-panel's children (.stats-row, #game-root,
   .game-message, ...) in this element once, at setup time -- see the comment in
   game-page.js for why. In the normal (non-fullscreen) page it's just a plain
   block div around block children, identical to unwrapped. */
.game-panel__fs-scale #game-root {
  max-width: 100%;
  max-height: 100%;
}
/* game-page.js scales this single wrapper once it can measure real available
   space; this transition just smooths that jump and any later resize/orientation
   change. */
.game-panel:fullscreen .game-panel__fs-scale,
.game-panel:-webkit-full-screen .game-panel__fs-scale {
  transition: transform 0.15s ease;
}

#game-root {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  user-select: none;
}

.stats-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.stat-pill {
  background: rgba(79, 216, 224, 0.14);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 800;
  font-size: 0.9rem;
}

.side-stack { display: flex; flex-direction: column; gap: 18px; }

.instructions-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.instructions-panel h2 { font-size: 1.02rem; margin-bottom: 10px; }
.instructions-panel ol, .instructions-panel ul { margin: 0; padding-left: 1.2em; }
.instructions-panel li { margin-bottom: 6px; }

.recommend-section { margin-top: 54px; }
.recommend-section h2 { font-size: 1.2rem; margin-bottom: 16px; }

.game-message {
  font-weight: 700;
  text-align: center;
  min-height: 1.4em;
}
.game-message--win { color: var(--color-success); }