/* ============ Casual Game Arcade — shared styles ============ */
:root {
  --bg1: #667eea;
  --bg2: #764ba2;
  --accent: #f94877;
  --accent2: #ff8c42;
  --card-bg: rgba(255, 255, 255, 0.96);
  --text: #2d3748;
  --text-light: #718096;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(31, 38, 135, 0.15);
  --shadow-hover: 0 14px 40px rgba(31, 38, 135, 0.25);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.6;
}

/* ---------- Site header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(31, 38, 135, 0.08);
}

.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--bg2);
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover {
  opacity: 0.85;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--bg1);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 6px 12px;
  border: 1.5px solid rgba(102, 126, 234, 0.4);
  border-radius: 999px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.back-link:hover {
  background: var(--bg1);
  color: #fff;
}

/* ---------- Page container ---------- */
.page-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

/* ---------- Homepage hero ---------- */
.hero {
  text-align: center;
  color: #fff;
  padding: 34px 12px 28px;
}

.hero h1 {
  font-size: 2.4rem;
  letter-spacing: 1px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.hero p {
  margin-top: 10px;
  font-size: 1.05rem;
  opacity: 0.92;
}

.hero .badge {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* ---------- Game card grid ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 26px;
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 20px 18px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.game-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--bg1));
}

.game-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.game-card .icon {
  font-size: 2.6rem;
  line-height: 1.2;
  margin-bottom: 10px;
}

.game-card h3 {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--text);
}

.game-card p {
  font-size: 0.88rem;
  color: var(--text-light);
  margin-top: 6px;
  flex: 1;
}

.game-card .enter {
  margin-top: 14px;
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  padding: 6px 16px;
  border-radius: 999px;
  transition: transform 0.15s ease;
}

.game-card:hover .enter {
  transform: scale(1.05);
}

/* ---------- Shared game page layout ---------- */
.game-page {
  color: #fff;
}

.game-head {
  text-align: center;
  padding: 22px 12px 8px;
}

.game-head .game-icon {
  font-size: 3rem;
  line-height: 1.2;
}

.game-head h1 {
  font-size: 1.9rem;
  margin-top: 6px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.game-head .tagline {
  margin-top: 6px;
  font-size: 1rem;
  opacity: 0.92;
}

.game-wrap {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-top: 16px;
  color: var(--text);
}

/* How-to-play box */
.game-intro {
  background: #f7f7ff;
  border: 1px solid #e6e8ff;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
}

.game-intro h2 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--bg1);
  margin-bottom: 6px;
}

.game-intro p {
  font-size: 0.92rem;
  color: var(--text-light);
}

.game-intro kbd {
  background: #fff;
  border: 1px solid #d0d4ff;
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 0.82rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--bg2);
}

/* Scoreboard / control bar */
.hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.hud .stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.stat {
  background: #f0f2ff;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bg2);
  white-space: nowrap;
}

.stat b {
  color: var(--accent);
  font-size: 1.05rem;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* Buttons */
.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  padding: 9px 20px;
  border-radius: 999px;
  transition: transform 0.15s ease, opacity 0.15s ease;
  user-select: none;
}

.btn:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

.btn:active {
  transform: translateY(0);
}

.btn.secondary {
  background: #eef0ff;
  color: var(--bg1);
  border: 1.5px solid rgba(102, 126, 234, 0.35);
}

.btn.danger {
  background: linear-gradient(135deg, #f94877, #ff8c42);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Game stage */
.game-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

canvas.board {
  background: #10142b;
  border-radius: 12px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.35);
  display: block;
  max-width: 100%;
  height: auto;
  touch-action: none;
}

.board-note {
  font-size: 0.82rem;
  color: var(--text-light);
  text-align: center;
}

/* Status message */
.message {
  font-size: 1rem;
  font-weight: 700;
  min-height: 1.6em;
  text-align: center;
  color: var(--bg2);
}

.message.bad {
  color: var(--accent);
}

/* ---------- Game detail page ---------- */
.detail-cta {
  text-align: center;
  padding: 6px 0 22px;
  border-bottom: 1px solid #eef0f7;
  margin-bottom: 22px;
}

.btn.big {
  font-size: 1.12rem;
  padding: 14px 48px;
  box-shadow: 0 10px 24px rgba(102, 126, 234, 0.38);
}

.cta-note {
  margin-top: 10px;
  font-size: 0.84rem;
  color: var(--text-light);
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h2 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--bg1);
  margin-bottom: 10px;
}

.detail-section p {
  font-size: 0.95rem;
  color: #4a5568;
  margin-bottom: 10px;
}

.detail-section p:last-child {
  margin-bottom: 0;
}

.detail-section ul {
  list-style: none;
  padding: 0;
}

.detail-section li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  font-size: 0.93rem;
  color: #4a5568;
}

.detail-section li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  color: var(--bg1);
  font-weight: 800;
}

.detail-tip {
  background: linear-gradient(135deg, #fff9e8, #fff3d4);
  border-left: 4px solid #ffb020;
  border-radius: 10px;
  padding: 13px 18px;
  font-size: 0.92rem;
  color: #8a5a00;
}

.detail-tip b {
  color: #a86a00;
}

/* Recommendations at the bottom of a detail page (sits directly on the gradient so the white cards pop) */
.recommend-section {
  margin-top: 36px;
}

.recommend-title {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 18px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Always exactly 6 recommendations — 3 columns fills two tidy rows with no gap */
.recommend-section .card-grid {
  margin-top: 0;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 860px) {
  .recommend-section .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Play page: always fills the screen ---------- */

/* Playing should feel fullscreen. Relying on the Fullscreen API alone isn't
   enough — it needs a user gesture and iOS Safari refuses it for regular
   elements, so the game ends up in a scrollable card with the page background
   showing around it and controls cut off at the bottom.
   Instead the play page itself is locked to the viewport and never scrolls,
   which works in every browser. Native fullscreen is still requested on the
   first interaction so the browser chrome can hide too. */

html.play-html,
html.play-html body.play-page {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body.play-page {
  display: flex;
  flex-direction: column;
}

body.play-page .site-header {
  flex: 0 0 auto;
}

body.play-page .header-inner {
  padding: 7px 14px;
}

body.play-page .page-container {
  flex: 1 1 auto;
  min-height: 0;                 /* lets the flex child actually shrink */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 4px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  /* The shared rule is `max-width: 1080px; margin: 0 auto`, which in a flex
     column makes the container shrink to its content instead of filling the
     width. On a phone that squeezed the stage to ~255px, so a square board
     sized from the stage came out far smaller than the screen. Stretching to
     the full width is what lets the board grow. */
  width: 100%;
  max-width: none;
  margin: 0;
}

/* The title block earns its space on the detail page; here it competes with
   the game, so keep it to a single compact line. */
body.play-page .game-head {
  flex: 0 0 auto;
  padding: 0 12px 6px;
}

body.play-page .game-head .game-icon,
body.play-page .game-head .tagline {
  display: none;
}

body.play-page .game-head h1 {
  font-size: 1.05rem;
  margin-top: 0;
}

/* Instructions live on the detail page the player just came from */
body.play-page .game-intro,
body.play-page .game-stage > .board-note {
  display: none;
}

body.play-page .game-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 12px;
  width: 100%;
  max-width: none;
  background: #fff;              /* opaque: the page behind must not show through */
}

body.play-page .hud {
  flex: 0 0 auto;
  margin-bottom: 8px;
}

/* The stage takes whatever is left and centres the board in it */
body.play-page .game-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body.play-page .game-stage > .message {
  flex: 0 0 auto;
}

/* ---------- Board sizing ---------- */

/* play.js measures the stage and applies an explicit size that matches the
   board's own ratio (see fitBoards). These are the bounds before the first
   measurement and for the no-script fallback. */
body.play-page canvas.board {
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
}

/* A grid board is made of cells, so it only stays square if exactly one axis is
   auto. `aspect-ratio` keeps the height tied to the width, which stops a tall
   board from stretching its rows and pushing the `aspect-ratio: 1` cells out
   past the right edge. */
body.play-page .game-stage > .ms-board,
body.play-page .game-stage > .board-2048,
body.play-page .game-stage > .memory-board,
body.play-page .game-stage > .ttt-board,
body.play-page .game-stage > .puzzle-board,
body.play-page .game-stage > .simon-board,
body.play-page .game-stage > .mole-grid {
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 0 1 auto;
  align-content: center;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

/* Hanoi is a fixed-height wide board, not a square grid */
body.play-page .game-stage > .hanoi-board,
body.play-page .game-stage > .stage-row,
body.play-page .game-stage > .reaction-pad,
body.play-page .game-stage > .guess-input {
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* The viewport is the ultimate bound — nothing may be wider than the screen */
body.play-page .game-stage canvas.board,
body.play-page .game-stage > [class*="board"],
body.play-page .game-stage > .mole-grid {
  max-width: min(100%, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
}

/* ---------- Native fullscreen / focus mode ---------- */

/* The layout above is already viewport-locked, so this only removes the last
   of the chrome and lets the game use the whole screen. */
.game-wrap:fullscreen,
.game-wrap:-webkit-full-screen,
body.focus-mode .game-wrap {
  border-radius: 0;
  margin: 0;
  max-width: none;
  max-height: none;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
}

/* Focus mode pins the card over the viewport (iOS Safari has no element
   fullscreen). The body is already locked, so nothing can scroll. */
body.focus-mode {
  overflow: hidden;
  overscroll-behavior: none;
}

body.focus-mode .game-wrap {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

/* Floating fullscreen toggle — also the "close" button in focus mode */
.fs-btn {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 1001;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(45, 55, 72, 0.7);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.15s ease;
  touch-action: manipulation;
}

.fs-btn:hover {
  background: rgba(45, 55, 72, 0.9);
  transform: scale(1.06);
}

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  padding: 26px 16px 40px;
}

.site-footer a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .hero h1 {
    font-size: 1.8rem;
  }
  .game-wrap {
    padding: 14px;
  }
  .stat {
    font-size: 0.82rem;
    padding: 5px 10px;
  }
  .game-head h1 {
    font-size: 1.5rem;
  }
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
  }
  .game-card {
    padding: 16px 14px 14px;
  }
  .game-card .icon {
    font-size: 2rem;
  }
  .game-card h3 {
    font-size: 1rem;
  }
  .game-card p {
    font-size: 0.8rem;
  }
}