/* ============================================================
   PUZZLE.NOW — Game shell, boards, and shared game UI
   Loaded on top of main.css. The board themes expose the CSS variables
   (--pz-accent, --pz-accent-2, --pz-board-bg, --pz-cell, --pz-tile-text,
   --pz-ink) that every self-contained game engine reads, so a theme swap
   recolours all nine puzzles at once.
   ============================================================ */

/* ---- BOARD THEME VARIABLES (default + .board-theme-*) ---- */
.game-shell,
.board-theme-violet {
  --pz-accent: #7c3aed; --pz-accent-2: #a78bfa;
  --pz-board-bg: #efeafb; --pz-cell: #ffffff; --pz-cell-border: #e2dbf5;
  --pz-tile-text: #ffffff; --pz-ink: #2a2440; --pz-shell: #f6f3fe;
}
.board-theme-indigo { --pz-accent:#4f46e5; --pz-accent-2:#818cf8; --pz-board-bg:#e8ebfb; --pz-cell:#fff; --pz-cell-border:#dbe0f7; --pz-tile-text:#fff; --pz-ink:#25264a; --pz-shell:#f2f4fe; }
.board-theme-teal   { --pz-accent:#0d9488; --pz-accent-2:#5eead4; --pz-board-bg:#e2f5f1; --pz-cell:#fff; --pz-cell-border:#c9ece5; --pz-tile-text:#fff; --pz-ink:#123c37; --pz-shell:#f0fbf9; }
.board-theme-sunset { --pz-accent:#ea580c; --pz-accent-2:#fdba74; --pz-board-bg:#fdeadd; --pz-cell:#fff; --pz-cell-border:#fbd7be; --pz-tile-text:#fff; --pz-ink:#4a2410; --pz-shell:#fff5ee; }
.board-theme-slate  { --pz-accent:#334155; --pz-accent-2:#94a3b8; --pz-board-bg:#e6e9ee; --pz-cell:#fff; --pz-cell-border:#d3d9e2; --pz-tile-text:#fff; --pz-ink:#1e293b; --pz-shell:#f3f5f8; }
.board-theme-rose   { --pz-accent:#e11d48; --pz-accent-2:#fb7185; --pz-board-bg:#fce7ec; --pz-cell:#fff; --pz-cell-border:#f8cdd7; --pz-tile-text:#fff; --pz-ink:#4c1220; --pz-shell:#fff1f4; }

/* ---- GAME SHELL ---- */
.game-shell {
  background: linear-gradient(160deg, var(--pz-shell), #ffffff 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:none;
  padding: .75rem .85rem 1.1rem;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.game-shell.is-fullscreen,
.game-shell:fullscreen {
  display: flex; flex-direction: column; justify-content: flex-start;
  border-radius: 0; padding: 1rem; background: linear-gradient(160deg, var(--pz-shell), #fff 80%);
}

/* ---- TOOLBAR ---- */
.game-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap; padding: .3rem .35rem .7rem;
}
.game-stats { display: flex; gap: .5rem; align-items: stretch; }
.stat {
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .3rem .7rem; min-width: 62px;
  box-shadow:none;
}
.stat-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-light); font-weight: 700; }
.stat-val { font-size: 1.05rem; font-weight: 800; color: var(--pz-accent); font-variant-numeric: tabular-nums; }
.game-tools { display: flex; gap: .4rem; flex-wrap: wrap; }
.btn-tool {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .4rem .75rem; font-size: .82rem; font-weight: 600; cursor: pointer;
  font-family: var(--font); transition: background .15s, border-color .15s, color .15s;
  display: inline-flex; align-items: center; gap: .35rem;
}
.btn-tool:hover { background: var(--blue-light); border-color: var(--blue-border); color: var(--blue-dark); }
.btn-tool:disabled { opacity: .4; cursor: default; }
.btn-tool.btn-tool-primary { background: var(--pz-accent); border-color: var(--pz-accent); color: #fff; }
.btn-tool.btn-tool-primary:hover { background: var(--blue-dark); color: #fff; }

/* ---- BOARD HOST ---- */
.board-host {
  position: relative; width: 100%; max-width: 100%;
  display: flex; align-items: flex-start; justify-content: center;
  padding: .5rem 0 .25rem;
  /* CLS: reserve the board's eventual height so the JS-mounted board doesn't
     push the page down when it appears. --pz-bh is the board-area height on a
     ~375px-wide phone (measured per game below). Boards scale ~1:1 with the
     viewport width, so grow the reserve with 100vw and cap it once the board
     reaches its max size (desktop). Per-game --pz-bh set in the block below. */
  --pz-bh: 420px;
  min-height: min(calc(100vw + var(--pz-bh) - 375px), calc(var(--pz-bh) + 150px));
}
/* Per-game reserved board-area heights (measured at a 375px viewport, tallest
   mode). Keep in sync if a board's layout or default mode changes. */
.board-host[data-game="slidepuzzle"]  { --pz-bh: 382px; }
.board-host[data-game="2048"]         { --pz-bh: 382px; }
.board-host[data-game="lightsout"]    { --pz-bh: 382px; }
.board-host[data-game="nonogram"]     { --pz-bh: 442px; }
.board-host[data-game="memory"]       { --pz-bh: 384px; }
.board-host[data-game="blockpuzzle"]  { --pz-bh: 464px; }
.board-host[data-game="floodit"]      { --pz-bh: 496px; }
.board-host[data-game="wordsearch"]   { --pz-bh: 480px; }
.board-host[data-game="sokoban"]      { --pz-bh: 598px; }
.board-host[data-game="watersort"]    { --pz-bh: 384px; }
.board-host[data-game="simon"]        { --pz-bh: 416px; }
.board-host[data-game="rushhour"]     { --pz-bh: 445px; }
.board-host[data-game="flow"]         { --pz-bh: 421px; }
.board-host[data-game="pegsolitaire"] { --pz-bh: 443px; }
/* Fixed-height boards: the board size is capped/constant, so it does NOT grow
   with the viewport. Reserve a flat height (overrides the scaling formula
   above) — Hanoi's rods are a fixed 240px, Klotski's tray caps at 320px wide,
   and Word Scramble's tiles are clamp()-sized. */
.board-host[data-game="hanoi"]        { min-height: 305px; }
.board-host[data-game="klotski"]      { min-height: 500px; }
.board-host[data-game="wordscramble"] { min-height: 272px; }
/* Fullscreen lets the board fill the shell, so drop the reservation there. */
.game-shell.is-fullscreen .board-host, .game-shell:fullscreen .board-host { min-height: 0; }
/* Boards size themselves in viewport units, but the padded container + shell
   are narrower than the viewport - so on mobile a board could overflow and get
   clipped. Cap every board area to its real container width. */
.board-host, .pz-area { max-width: 100%; min-width: 0; }
.pz-area > * { max-width: 100%; }
.game-shell.is-fullscreen .board-host, .game-shell:fullscreen .board-host { flex: 1; align-items: center; }
.pz-area { display: flex; flex-direction: column; align-items: center; gap: .85rem; width: 100%; }
.pz-msg { font-size: .85rem; color: var(--text-muted); text-align: center; max-width: 42ch; }
.pz-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem 1rem; box-shadow:none;
}
.pz-chip {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; background: var(--blue-light); color: var(--blue-dark);
}
.pz-btn-row { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }

/* ---- WIN / END OVERLAY ---- */
.game-overlay {
  position: absolute; inset: 0; z-index: 1200;
  background: rgba(42, 36, 64, .72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
}
.game-overlay[hidden] { display: none; }
.overlay-card {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow:none; padding: 1.9rem 2.1rem; max-width: 430px;
  width: calc(100% - 2rem); text-align: center;
}
.overlay-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: .35rem; }
.overlay-card .overlay-title { font-size: 1.55rem; font-weight: 800; line-height: 1.2; margin-bottom: .4rem; color: var(--text); }
.overlay-card .overlay-sub { color: var(--text-muted); font-size: .95rem; margin-bottom: 1rem; }
.overlay-stats { display: flex; justify-content: center; gap: 1.5rem; margin: 1rem 0 .5rem; }
.ov-stat { display: flex; flex-direction: column; }
.ov-stat-val { font-size: 1.4rem; font-weight: 800; color: var(--pz-accent); font-variant-numeric: tabular-nums; }
.ov-stat-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; }
#win-rank { display: block; min-height: 1.1rem; font-size: .85rem; color: var(--blue-dark); font-weight: 600; margin-bottom: 1rem; }
.overlay-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ---- TOAST ---- */
.pz-toast {
  position: absolute; left: 50%; bottom: 1rem; transform: translate(-50%, 1.5rem);
  background: rgba(30, 27, 46, .94); color: #fff; padding: .5rem 1rem;
  border-radius: 999px; font-size: .85rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 1300; max-width: 90%;
}
.pz-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- MOBILE: pin the result overlay + toast to the viewport ----
   The game shell is taller than a phone screen, so an absolutely-positioned
   overlay centres the win card (and its "Play Again" button) on the shell,
   which lands below the fold. Fixed positioning centres it on screen instead,
   matching the settings-modal pattern, and lets a tall card scroll. */
@media (max-width: 720px) {
  .game-overlay { position: fixed; z-index: 1500; border-radius: 0; padding: 1rem; }
  .overlay-card { max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .pz-toast { position: fixed; z-index: 1600; }
}

/* ---- CONFETTI ---- */
.pz-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1250; }
.pz-confetti i {
  position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px;
  animation-name: pzFall; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes pzFall { to { transform: translateY(120%) rotate(720deg); opacity: .15; } }

/* ---- SETTINGS MODAL ---- */
.pz-modal-backdrop {
  position: fixed; inset: 0; z-index: 2000; background: rgba(30, 27, 46, .55);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.pz-modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow:none; width: 420px; max-width: 100%; max-height: 88vh; overflow-y: auto; }
.pz-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.35rem; border-bottom: 1px solid var(--border); }
.pz-modal-head h3 { font-size: 1.15rem; margin: 0; }
.pz-modal-x { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--text-muted); }
.pz-modal-body { padding: 1.1rem 1.35rem 1.4rem; }
.pz-set-group { margin-bottom: 1.1rem; }
.pz-set-label { font-weight: 700; font-size: .88rem; margin-bottom: .55rem; }
.pz-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pz-swatch {
  display: flex; align-items: center; gap: .45rem; padding: .45rem .5rem;
  border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--text); font-family: var(--font);
}
.pz-swatch span { width: 18px; height: 18px; border-radius: 5px; background: var(--sw); flex-shrink: 0; }
.pz-swatch.active { border-color: var(--pz-accent); box-shadow:none; }
.pz-toggle { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; font-size: .92rem; font-weight: 500; border-top: 1px solid var(--border); }
.pz-toggle input { width: 18px; height: 18px; accent-color: var(--pz-accent); }

/* ---- STATS STRIP ---- */
.stats-strip {
  display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .8rem 1.25rem; margin-top: 1rem; box-shadow:none;
  /* Reserve the height of one stats row so populating it from JS (and the
     authenticated server re-render) doesn't shift the content below it. */
  min-height: 3.9rem; box-sizing: border-box;
}
.ss-item { display: flex; flex-direction: column; align-items: center; min-width: 58px; }
.ss-val { font-weight: 800; font-size: 1.1rem; color: var(--pz-accent); font-variant-numeric: tabular-nums; }
.ss-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; }

/* ---- MOBILE: put the playable board directly under the header so players
   never have to scroll past the intro text to start (CSS-only visual reorder;
   the DOM keeps h1 + intro first, so SEO/reading order is unchanged). ---- */
@media (max-width: 720px) {
  .play-first { display: flex; flex-direction: column; }
  .play-first > * { order: 4; }
  .play-first .order-head { order: 1; }
  .play-first .order-play { order: 2; }
  .play-first .order-intro { order: 3; }
  .play-first .game-header { margin-bottom: .5rem; }
}

/* ---- GAME PAGE HEADER / MODE TABS ---- */
.home-intro { margin: .25rem 0 1rem; font-size: 1.05rem; line-height: 1.75; color: var(--text-muted); }
.home-intro strong { color: var(--text); }
.game-header { margin: 1.25rem 0 .75rem; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.game-header h1 { font-size: 1.5rem; }
.game-header .tagline { color: var(--text-muted); font-size: .95rem; }
.mode-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.mode-tab { padding: .32rem .85rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .82rem; font-weight: 600; }
.mode-tab:hover { border-color: var(--blue); color: var(--blue); }
.mode-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---- BELOW-THE-FOLD CONTENT ---- */
.game-content { margin-top: 2.5rem; }
.game-content h2 { margin: 2rem 0 .75rem; font-size: 1.4rem; }
.game-content h3 { margin: 1.25rem 0 .5rem; }
.howto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin: 1rem 0; }
.howto-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow:none; }
.howto-card h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--blue-dark); }
.howto-card p { font-size: .9rem; margin: 0; }
.howto-card.has-img { padding-top: 0; overflow: hidden; }
.howto-card .howto-img {
  width: calc(100% + 2.5rem); max-width: none; margin: 0 -1.25rem .95rem;
  height: 180px; object-fit: cover; object-position: center; display: block;
  border-bottom: 1px solid var(--border); background: var(--pz-board-bg, #efeafb);
}
@media (max-width: 480px) { .howto-card .howto-img { height: 158px; } }
.strategy-list { margin: .75rem 0 1rem 1.25rem; color: var(--text-muted); }
.strategy-list li { margin-bottom: .55rem; font-size: .95rem; }
ol.strategy-list.numbered { list-style: decimal; padding-left: .5rem; }
ol.strategy-list.numbered li { padding-left: .35rem; }
ol.strategy-list.numbered li::marker { color: var(--blue); font-weight: 800; }

.tldr { background: var(--blue-light); border-left: 4px solid var(--blue); border-radius: var(--radius-sm); padding: .8rem 1.1rem; font-size: .97rem; line-height: 1.65; margin: 0 0 1.25rem; color: var(--text); }
.tldr strong { color: var(--blue-dark); }
.tip-callout { background: var(--accent-light, #fffbeb); border: 1px solid #fde68a; border-radius: var(--radius-sm); padding: .75rem 1rem; font-size: .95rem; line-height: 1.6; margin: .5rem 0 1rem; }

.facts-table { width: 100%; border-collapse: collapse; margin: .5rem 0 1.5rem; font-size: .93rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.facts-table th, .facts-table td { padding: .6rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.facts-table tr:last-child th, .facts-table tr:last-child td { border-bottom: none; }
.facts-table th { width: 34%; background: var(--surface-2); font-weight: 700; color: var(--text); white-space: nowrap; }
.facts-table td { color: var(--text-muted); }
@media (max-width: 520px) { .facts-table th { width: 42%; white-space: normal; } }

/* ---- FAQ ACCORDION ---- */
.faq-accordion { margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.faq-acc-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow:none; overflow: hidden; }
.faq-acc-item summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; user-select: none; }
.faq-acc-item summary::-webkit-details-marker { display: none; }
.faq-acc-item summary h3 { font-size: 1rem; margin: 0; color: var(--text); }
.faq-acc-item[open] summary h3 { color: var(--blue-dark); }
.faq-acc-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform .2s ease; }
.faq-acc-item[open] .faq-acc-chevron { transform: rotate(180deg); }
.faq-acc-item summary:hover h3 { color: var(--blue); }
.faq-acc-body { padding: 0 1.25rem 1.15rem; }
.faq-acc-body p { font-size: .92rem; margin: 0; color: var(--text-muted); }
.faq-list { margin-top: 1rem; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: .75rem; }
.faq-item h3 { margin: 0 0 .4rem; font-size: 1rem; }
.faq-item p { font-size: .92rem; margin: 0; }

/* ---- VARIANT / GAME CARDS ---- */
.variant-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-top: 1rem; }
.variant-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow:none; transition: transform .15s, box-shadow .15s, border-color .15s; color: var(--text); }
.variant-card:hover { transform: translateY(-3px); box-shadow:none; border-color: var(--blue-border); color: var(--text); }
.variant-card .vc-name { font-weight: 700; color: var(--blue-dark); margin-bottom: .25rem; display: flex; align-items: center; gap: .4rem; }
.variant-card .vc-tag { font-size: .84rem; color: var(--text-muted); line-height: 1.45; }
.variant-card .vc-meta { margin-top: .6rem; font-size: .72rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: .04em; }

/* ---- RATING WIDGET ---- */
.rating-widget { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; padding: .7rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow:none; font-size: .9rem; }
.rating-label { font-weight: 600; color: var(--text); }
.rating-stars { display: inline-flex; }
.rating-star { background: none; border: none; cursor: pointer; padding: 0 .1rem; font-size: 1.5rem; line-height: 1; color: #d6cfe8; transition: color .1s; }
.rating-star.on { color: var(--accent); }
.rating-star:hover { color: #fcd34d; }
.rating-summary { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rating-widget.rated .rating-label::after { content: " thanks!"; color: var(--blue); font-weight: 400; }

/* ---- MULTIPLAYER ---- */
.mp-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow:none; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.mp-players { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mp-player { padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.mp-player.me { border-color: var(--blue-border); background: var(--blue-light); }
.mp-player .mp-name { font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.mp-player .mp-status { font-size: .75rem; color: var(--text-muted); }
.mp-progress-track { height: 10px; border-radius: 999px; background: var(--surface-3); margin-top: .5rem; overflow: hidden; }
.mp-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--blue), var(--accent)); border-radius: 999px; transition: width .4s ease; }
.mp-code { font-size: 1.6rem; font-weight: 800; letter-spacing: .35em; font-variant-numeric: tabular-nums; background: var(--surface-3); border-radius: var(--radius-sm); padding: .4rem .6rem .4rem .9rem; display: inline-block; }
.mp-chat { max-height: 180px; overflow-y: auto; font-size: .85rem; margin: .5rem 0; }
.mp-chat .mp-chat-line { margin-bottom: .25rem; }
.mp-chat .mp-chat-name { font-weight: 700; color: var(--blue-dark); }
.mp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mp-dot.on { background: #22c55e; }
.mp-dot.off { background: #cbd5e1; }

/* ---- 404 HERO (puzzle tiles) ---- */
.nf-hero { position: relative; text-align: center; color: #fff; background: linear-gradient(150deg, var(--blue-dark), var(--blue) 55%, #a78bfa); border-radius: var(--radius-lg); box-shadow:none; padding: 2.5rem 1.25rem 2.75rem; overflow: hidden; }
.nf-hero h1 { color: #fff; font-size: 1.7rem; margin: .25rem 0 .5rem; }
.nf-hero p { color: rgba(255,255,255,.9); max-width: 34rem; margin: 0 auto 1.5rem; line-height: 1.6; }
.nf-code { font-size: 3rem; font-weight: 800; letter-spacing: .1em; color: var(--accent); line-height: 1; margin-top: 1rem; text-shadow: 0 2px 8px rgba(0,0,0,.3); }
.nf-tiles { display: flex; justify-content: center; gap: .5rem; margin-bottom: .5rem; }
.nf-tile { width: 60px; height: 60px; border-radius: 12px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; box-shadow:none; }
.nf-tile.gap { background: transparent; border-style: dashed; box-shadow:none; }
.nf-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.btn-outline-light { background: transparent; border: 1px solid rgba(255,255,255,.55); color: #fff; padding: .55rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; }
.btn-outline-light:hover { background: rgba(255,255,255,.14); color: #fff; }
.nf-linkcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.25rem; margin-top: 1rem; text-align: left; }
.nf-linkcols h3 { font-size: 1rem; color: var(--blue-dark); margin-bottom: .5rem; }
.nf-linkcols ul { list-style: none; padding: 0; margin: 0; }
.nf-linkcols li { margin-bottom: .4rem; }
.nf-linkcols a { font-size: .92rem; }

/* ---- shared engine palette classes (colour-coded games) ---- */
.pz-color-0{background:#7c3aed}.pz-color-1{background:#f59e0b}.pz-color-2{background:#ec4899}
.pz-color-3{background:#06b6d4}.pz-color-4{background:#22c55e}.pz-color-5{background:#ef4444}
.pz-color-6{background:#3b82f6}.pz-color-7{background:#eab308}

@media (max-width: 640px) {
  .game-shell { padding: .4rem .45rem .75rem; }
  .mp-players { grid-template-columns: 1fr; }
  .game-header h1 { font-size: 1.25rem; }
  /* Trim the page gutter on phones so wide boards (10x10 nonogram, 18x18
     flood it, 13x13 word search) have room to breathe. */
  .container.page-wrap { padding-left: .7rem; padding-right: .7rem; }

  /* Compact the toolbar so the board and its play controls (e.g. Flood It's
     colour palette, Simon's Start button) sit near the top of the phone
     screen instead of being pushed below the fold by a 3-row toolbar. */
  .game-toolbar { padding: .15rem .1rem .4rem; gap: .3rem; }
  .game-stats { gap: .3rem; flex-wrap: wrap; }
  .stat { min-width: 0; padding: .18rem .5rem; border-radius: 9px; }
  .stat-label { font-size: .54rem; }
  .stat-val { font-size: .88rem; }
  .game-tools { gap: .3rem; }
  .btn-tool { padding: .32rem .5rem; font-size: .76rem; border-radius: 9px; }
  .board-host { padding: .3rem 0 .2rem; }
  .pz-area { gap: .6rem; }
  /* Give back a little more vertical room above the board. The game-page
     tagline (.order-head only) duplicates the intro paragraph shown just below
     the board on mobile, so hide it to lift the board and its controls up. */
  .order-head .tagline { display: none; }
  .game-header { margin-bottom: .35rem; }
}