/* ============================ Whose-turn cue ====================== */
/* The clock itself already gets .active from app.js (game.turn() check).
   Extend that same state to the whole player row so the active side is
   obvious at a glance, not just in the small clock chip. */
.player-card:has(.clock.active) {
  border-color: rgba(52, 211, 153, 0.4) !important;
  background: color-mix(in srgb, rgba(52, 211, 153, 0.07) 100%, var(--surface)) !important;
}

.player-card:not(:has(.clock.active)) .player-meta {
  opacity: 0.62;
}

@media (prefers-reduced-motion: no-preference) {
  .player-card { transition: border-color 200ms ease, background 200ms ease; }
  .player-meta { transition: opacity 200ms ease; }
}

/* ============================ Control bar overflow menu ====================== */
.control-overflow-wrap {
  position: relative;
  display: inline-flex;
}

.control-overflow-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 168px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--line-soft, rgba(191, 144, 120, 0.18));
  background: var(--surface, #161110);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.control-overflow-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.control-overflow-item:hover,
.control-overflow-item:focus-visible {
  background: rgba(192, 71, 63, 0.14);
}

.control-overflow-item i {
  width: 16px;
  text-align: center;
  opacity: 0.85;
}

/* ============================ Role badge: moved into player name row ====================== */
.player-name {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.player-name .role-badge {
  font-size: 9px !important;
  padding: 2px 7px !important;
  min-height: 0 !important;
  line-height: 1.6 !important;
  border-radius: 999px !important;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0.78;
}

/* ============================ Game-over actions: clear primary path ====================== */
/* "Play Again" is the action almost everyone wants next; Analyze/Download
   are secondary and shouldn't compete visually for the eye. */
.gameover-actions {
  grid-template-columns: 1fr 1fr !important;
}

.gameover-actions #btn-reset-overlay {
  grid-column: 1 / -1;
  order: -1;
  font-weight: 800;
}

.gameover-actions .ghost-button {
  min-height: 46px !important;
  font-size: 13px !important;
  opacity: 0.85;
}

@media (max-width: 620px) {
  .gameover-actions {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ============================ Game-over overlay: smaller, calmer ====================== */
/* The default app.css sizing (120px icon, up to 58px title, 720px-wide card)
   was designed for a marketing-style moment but reads as oversized and
   covers too much of the board during play. Scale everything down so the
   result is clear without dominating the screen. */
.gameover-overlay .result-box {
  max-width: min(420px, calc(100vw - 32px)) !important;
  width: min(420px, calc(100vw - 32px)) !important;
  padding: 28px 28px 24px !important;
}

.gameover-overlay .overlay-icon {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 14px !important;
}

.gameover-overlay .overlay-icon::before {
  width: 64px !important;
  height: 64px !important;
}

.gameover-overlay .overlay-icon svg {
  width: 32px !important;
  height: 32px !important;
}

.gameover-overlay .overlay-title {
  font-size: clamp(22px, 4vw, 28px) !important;
  line-height: 1.1 !important;
}

.gameover-overlay .overlay-desc {
  margin-top: 10px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  max-width: 30rem !important;
}

.gameover-actions {
  margin-top: 18px !important;
}

.result-close {
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
}

@media (max-width: 620px) {
  .gameover-overlay .result-box {
    padding: 22px 18px 16px !important;
  }
}

/* Snappy, consistent ~150ms feedback on all interactive controls */
.icon-button,
.text-button,
.primary-button,
.ghost-button,
.nav-button,
.footer-link,
.contact-link,
.time-chip,
.promotion-button,
.avatar-option,
.preview-control,
.scoresheet-ply {
  transition:
    transform 150ms var(--motion-smooth, ease),
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
}

/* Tap-friendly icon buttons: at least 44x44 (video toggle, appearance, hamburger,
   board controls, etc.). min-* is used so full-width cases (.copy-row) still work. */
.icon-button {
  min-width: 44px;
  min-height: 44px;
}

/* Pressed / active state — a subtle push-in. */
.icon-button:not(:disabled):active,
.text-button:not(:disabled):active,
.primary-button:not(:disabled):active,
.ghost-button:not(:disabled):active,
.nav-button:active,
.footer-link:active,
.contact-link:active,
.time-chip:not(:disabled):active,
.promotion-button:active,
.avatar-option:active,
.preview-control:not(:disabled):active {
  transform: translateY(0) scale(0.95);
}

/* Visible keyboard focus ring, theme-aware (oxblood in the newspaper skin). */
.icon-button:focus-visible,
.text-button:focus-visible,
.primary-button:focus-visible,
.ghost-button:focus-visible,
.nav-button:focus-visible,
.footer-link:focus-visible,
.contact-link:focus-visible,
.time-chip:focus-visible,
.promotion-button:focus-visible,
.avatar-option:focus-visible,
.preview-control:focus-visible,
.scoresheet-ply:focus-visible,
.join-input:focus-visible,
.square:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 2px;
}

/* Greyed-out disabled state for controls that aren't usable yet
   (e.g. "step forward" / "jump to live" when already at the latest move). */
.icon-button:disabled,
.text-button:disabled,
.primary-button:disabled,
.ghost-button:disabled,
.preview-control:disabled,
button:disabled {
  opacity: 0.38;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* ============================ Responsive tightening ====================== */
/* Never allow sideways scrolling on any screen. */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 860px) {
  .app-shell, .game-area, .board-column, .side-panel, .records-rail {
    overflow-x: hidden;
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 620px) {
  /* Board is the hero: full-width, centered, first in the column. */
  .board-column { order: -1; align-items: center; width: 100%; }
  .board-stage { margin-left: 0; margin-right: 0; max-width: 100%; }
  /* Side panels (scoresheet, controls, log, blog) stack in ONE clean column. */
  .side-panel, .records-rail { grid-template-columns: 1fr !important; min-width: 0; }
  .side-panel > *, .records-rail > * { min-width: 0; max-width: 100%; }
  /* Keep the room/copy rows from forcing horizontal overflow. */
  .room-id, .join-input { max-width: 100%; }
}

/* ================================ Blog =================================== */
.blog-intro {
  margin: 0 0 18px;
  max-width: 64ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.blog-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 620px) { .blog-list { grid-template-columns: 1fr; } }

.blog-card--link {
  display: grid;
  gap: 6px;
  align-content: start;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition:
    transform 150ms var(--motion-smooth, ease),
    border-color 150ms ease,
    background 150ms ease;
}
.blog-card--link:hover {
  transform: translateY(-2px);
  border-color: var(--accent-strong);
}
.blog-panel .blog-card { cursor: pointer; }
.blog-panel .blog-card:hover { border-color: var(--accent-strong); }

.blog-date {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.blog-readmore {
  margin-top: 4px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.blog-back { margin-bottom: 16px; }
.blog-article-meta {
  margin: 0 0 16px;
  color: var(--subtle);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.blog-article-body { max-width: 64ch; }
.blog-article-body p {
  margin: 0 0 15px;
  color: var(--ink-soft, var(--muted));
  font-size: 15px;
  line-height: 1.65;
}
.blog-article-body p:last-child { margin-bottom: 0; }

/* ===================== Full-scale ("focus") mode ========================= */
/* The original pins the focus layer with height:100dvh in normal flow, which
   assumes .app-shell is a direct child of <body>. Inside this React host the
   app is nested in a scrollable root, so that approach can leave the board
   cut off / scrolled out of view (body overflow:hidden blocks the centering
   scroll). Pinning the layer to the viewport fixes it on both mobile and web. */
body.chess-focus-mode .app-shell,
body.chess-focus-mode .app-shell.video-hidden {
  position: fixed;
  inset: 0;
  z-index: 200;
  height: 100dvh;
  margin: 0;
  background: var(--paper);
}

/* ================== Modern feel: rounded, soft, glowing ================== */
/* Colors are intentionally UNCHANGED — this only softens geometry and adds
   depth, an accent-tinted glow, and gentle motion so the UI feels modern. */

/* Rounded corners everywhere (no more sharp 2-3px edges). */
.icon-button,
.text-button,
.primary-button,
.ghost-button,
.start-button,
.time-chip,
.join-input,
.room-id,
.contact-link,
.promotion-button,
.avatar-option { border-radius: 13px !important; }
.nav-button, .scoresheet-status { border-radius: 11px !important; }

.panel,
.top-bar,
.blog-panel,
.video-card,
.device-panel,
.diagnostics,
.engine-panel,
.board-review-bar,
.info-sheet,
.overlay-box,
.result-box,
.match-log,
.scoresheet-moves { border-radius: 16px !important; }
.player-card.top { border-radius: 16px 16px 10px 10px !important; }
.player-card.bottom { border-radius: 10px 10px 16px 16px !important; }
.board-frame { border-radius: 16px !important; }
.board-frame::after { border-radius: 12px; }
.chessboard { border-radius: 11px; overflow: hidden; }

/* Soft depth + an accent-tinted glow (uses the existing accent / success). */
.primary-button {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 34%, transparent);
}
.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 46%, transparent);
}
.start-button {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--success) 32%, transparent);
  animation: ctaGlow 2.6s ease-in-out infinite;
}
.start-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--success) 50%, transparent);
}
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 8px 20px color-mix(in srgb, var(--success) 30%, transparent); }
  50%      { box-shadow: 0 10px 28px color-mix(in srgb, var(--success) 52%, transparent); }
}

.icon-button:hover,
.ghost-button:hover,
.text-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* Soft ambient glow around the board (existing accent color). */
.board-frame {
  box-shadow: var(--shadow), 0 0 48px color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

/* Cards lift gently on hover. */
.panel { transition: transform 180ms var(--motion-smooth, ease), box-shadow 180ms ease; }
.blog-card--link:hover,
.blog-panel .blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 16%, transparent);
}
.scoresheet-ply.active {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 26%, transparent);
}

/* Final UX pass: tighter mobile rhythm and a focus board that uses the
   available screen more generously without crowding the clock rows. */
@media (max-width: 620px) {
  .game-area {
    padding: 8px 8px max(14px, env(safe-area-inset-bottom)) !important;
  }

  .board-column {
    gap: 6px;
  }

  .top-bar {
    padding: 5px 0 !important;
  }

  .toolbar {
    gap: 7px;
  }

  .board-frame {
    width: min(100%, calc(100svw - 12px)) !important;
    max-width: calc(100svw - 12px) !important;
  }
}

/* ---- Full-scale ("focus") mode camera dock — corrected sizing ----------- *
 * The camera "block" the layout must reserve is the WHOLE dock: its header,
 * grid padding, the video tiles, and the dock margin/borders — not just the
 * tile height. The old formula reserved only the tile height, so the flex
 * column overflowed by ~the header height; the dock (overflow:hidden) was then
 * flex-shrunk and clipped the camera tiles, and the enlarged board sat on top.
 * Fixes:
 *   1. Reserve the full dock block in the board-size formula.
 *   2. Pin chrome rows (clocks, toolbar, dock) to flex:0 0 auto so they can
 *      never be squeezed — the camera is always fully visible.
 *   3. Let the board be the only flexible row, so any residual rounding error
 *      shrinks the board a hair instead of hiding the camera.
 *   4. Support a "camera hidden" state that reclaims the block for the board. */
body.chess-focus-mode {
  --focus-cam-tile: clamp(72px, 12.5dvh, 108px);   /* height of each video tile */
  --focus-cam-extra: 48px;                          /* dock head + grid pad + margin + borders */
  --focus-cam-block: calc(var(--focus-cam-tile) + var(--focus-cam-extra));
  --focus-ui-chrome: 210px;                         /* toolbar + two player cards + gaps + safe padding */
  --focus-board-size: min(94vw, calc(100dvh - var(--focus-cam-block) - var(--focus-ui-chrome)));
}

/* Camera hidden → reclaim the camera block so the board grows. */
body.chess-focus-mode.focus-camera-off {
  --focus-board-size: min(94vw, calc(100dvh - var(--focus-ui-chrome)));
}

/* The board column clips at the edges as a last resort; it never overlaps the
   camera because the camera row refuses to shrink. */
body.chess-focus-mode .board-column {
  overflow: hidden;
}

/* Chrome rows hold their natural height; only the board flexes. */
body.chess-focus-mode .top-bar,
body.chess-focus-mode .player-card,
body.chess-focus-mode .mobile-video-dock.open,
body.chess-focus-mode .board-review-bar {
  flex: 0 0 auto;
}

body.chess-focus-mode .board-stage {
  flex: 0 1 auto;
  min-height: 0;
}

body.chess-focus-mode .mobile-video-dock.open {
  display: block !important;
  width: var(--focus-board-size) !important;
  max-width: var(--focus-board-size) !important;
  margin: 0 auto;
  border-radius: 12px !important;
  overflow: hidden;
}

/* When the camera is toggled off in focus mode, drop the dock out of flow. */
body.chess-focus-mode.focus-camera-off .mobile-video-dock {
  display: none !important;
}

/* The toolbar camera toggle is hidden on wide screens normally; in focus mode
   it is the way to bring the camera back after hiding it, so always show it. */
body.chess-focus-mode #btn-video-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

body.chess-focus-mode .mobile-video-head {
  min-height: 28px;
  padding: 4px 8px;
}

body.chess-focus-mode .mobile-video-grid {
  gap: 6px;
  padding: 6px;
}

body.chess-focus-mode .mobile-video-dock .mobile-video-tile {
  height: var(--focus-cam-tile);
  aspect-ratio: auto;
}

body.chess-focus-mode .board-stage,
body.chess-focus-mode .top-bar,
body.chess-focus-mode .board-review-bar,
body.chess-focus-mode .player-card {
  width: var(--focus-board-size) !important;
  max-width: var(--focus-board-size) !important;
}

@media (max-width: 620px) {
  body.chess-focus-mode {
    --focus-cam-tile: clamp(58px, 10.5dvh, 86px);
    --focus-cam-extra: 40px;
    --focus-ui-chrome: 178px;
    --focus-board-size: min(96vw, calc(100dvh - var(--focus-cam-block) - var(--focus-ui-chrome)));
  }

  body.chess-focus-mode.focus-camera-off {
    --focus-board-size: min(96vw, calc(100dvh - var(--focus-ui-chrome)));
  }

  body.chess-focus-mode .mobile-video-dock.open {
    width: min(100%, var(--focus-board-size)) !important;
    max-width: min(100%, var(--focus-board-size)) !important;
    margin-bottom: 0;
  }

  body.chess-focus-mode .mobile-video-head {
    min-height: 26px;
    padding: 3px 7px;
  }

  body.chess-focus-mode .mobile-video-grid {
    padding: 5px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  body.chess-focus-mode {
    --focus-cam-tile: clamp(40px, 13dvh, 60px);
    --focus-cam-extra: 30px;
    --focus-ui-chrome: 96px;
    --focus-board-size: min(78vw, calc(100dvh - var(--focus-cam-block) - var(--focus-ui-chrome)));
  }

  body.chess-focus-mode.focus-camera-off {
    --focus-board-size: min(86vw, calc(100dvh - var(--focus-ui-chrome)));
  }

  body.chess-focus-mode .board-column {
    gap: 4px;
  }

  body.chess-focus-mode .top-bar {
    padding: 0;
  }

  body.chess-focus-mode .toolbar {
    gap: 5px;
  }

  body.chess-focus-mode .toolbar .icon-button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  body.chess-focus-mode .player-card {
    min-height: 32px;
    padding: 3px 8px;
  }

  body.chess-focus-mode .avatar {
    display: none;
  }

  body.chess-focus-mode .clock {
    min-width: 62px;
    padding: 4px 8px;
    font-size: 14px;
  }
}

/* Gentle entrance motion (disabled automatically under prefers-reduced-motion). */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.board-stage { animation: riseIn 0.5s var(--motion-smooth, ease) both; }
.side-panel > *, .records-rail > * { animation: riseIn 0.5s var(--motion-smooth, ease) both; }
.side-panel > *:nth-child(2), .records-rail > *:nth-child(2) { animation-delay: 0.07s; }
.side-panel > *:nth-child(3), .records-rail > *:nth-child(3) { animation-delay: 0.14s; }
.side-panel > *:nth-child(4), .records-rail > *:nth-child(4) { animation-delay: 0.21s; }

/* Final mobile board scale: polish.css loads after app.css, so this owns gutters. */
@media (max-width: 620px) {
  .game-area {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .board-column,
  .board-stage,
  .board-frame,
  .chessboard {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =====================================================================
   FLOW — welcome screen + friend-room sheet
   Chessmate Live user journey redesign. Uses existing theme vars.
   ===================================================================== */

/* ---- Welcome screen — premium redesign 2026-06-26 ---- */

/* Animated chessboard corner squares — pure CSS atmosphere */
@keyframes cm-square-fade {
  0%, 100% { opacity: 0.04; }
  50%       { opacity: 0.13; }
}
@keyframes cm-welcome-in {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes cm-crown-drop {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(3px)  scale(1.04); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes cm-btn-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-sheet, .welcome-crown, .welcome-play-btn,
  .welcome-auth-btn, .welcome-squares span { animation: none !important; }
}

.welcome-sheet {
  position: relative;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 44px 28px 32px;
  overflow: hidden;
  animation: cm-welcome-in 0.4s cubic-bezier(0.22,1,0.36,1) both;
}

/* Decorative board squares — drifting in background */
.welcome-squares {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.welcome-squares span {
  position: absolute;
  width: 72px; height: 72px;
  border-radius: 10px;
  background: var(--accent, #a93c38);
  animation: cm-square-fade 3.5s ease-in-out infinite;
}
.welcome-squares span:nth-child(1) { top: -20px; left: -20px; animation-delay: 0s; }
.welcome-squares span:nth-child(2) { top: -20px; right: -20px; animation-delay: 0.5s; }
.welcome-squares span:nth-child(3) { bottom: 60px; left: -28px; animation-delay: 1s; }
.welcome-squares span:nth-child(4) { bottom: 60px; right: -28px; animation-delay: 1.5s; }
.welcome-squares span:nth-child(5) { top: 30px; left: 30px; width: 32px; height: 32px; border-radius: 6px; animation-delay: 0.8s; }
.welcome-squares span:nth-child(6) { top: 30px; right: 30px; width: 32px; height: 32px; border-radius: 6px; animation-delay: 1.3s; }
.welcome-squares span:nth-child(7) { bottom: 120px; left: 24px; width: 20px; height: 20px; border-radius: 4px; animation-delay: 0.3s; }
.welcome-squares span:nth-child(8) { bottom: 120px; right: 24px; width: 20px; height: 20px; border-radius: 4px; animation-delay: 1.8s; }

/* All content above the decorative layer */
.welcome-brand,
.welcome-title,
.welcome-sub,
.welcome-play-btn,
.welcome-hint,
.welcome-account-row,
.welcome-account-panels,
.welcome-privacy-btn { position: relative; z-index: 1; }

.welcome-brand {
  margin-bottom: 18px;
  animation: cm-crown-drop 0.55s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
.welcome-crown {
  width: 56px; height: 56px;
  color: var(--accent);
  filter: drop-shadow(0 4px 16px color-mix(in srgb, var(--accent) 45%, transparent));
}

.welcome-title {
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 10px;
  animation: cm-btn-rise 0.4s ease 0.2s both;
}
.welcome-sub {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 28px;
  animation: cm-btn-rise 0.4s ease 0.28s both;
}

/* PRIMARY button — big, warm, magnetic */
.welcome-play-btn {
  width: 100%;
  padding: 18px 24px;
  border-radius: 18px;
  border: none;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 90%, #ff6b35) 0%,
    var(--accent) 100%);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent),
    0 2px 6px  color-mix(in srgb, var(--accent) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.15);
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.18s ease;
  margin-bottom: 16px;
  animation: cm-btn-rise 0.4s ease 0.36s both;
}
.welcome-play-btn:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 16px 40px color-mix(in srgb, var(--accent) 52%, transparent),
    0 4px 10px  color-mix(in srgb, var(--accent) 25%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.2);
}
.welcome-play-btn:active {
  transform: scale(0.97);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* SECONDARY buttons — Sign in + Create account — real buttons, not text links */
.welcome-account-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 12px;
  animation: cm-btn-rise 0.4s ease 0.44s both;
}
.welcome-auth-btn {
  flex: 1;
  padding: 13px 12px;
  border-radius: 13px;
  border: 1.5px solid var(--line, rgba(255,255,255,0.12));
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--fg);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: border-color 0.15s ease,
              background 0.15s ease,
              transform 0.15s ease;
}
.welcome-auth-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  transform: translateY(-1px);
}
.welcome-auth-btn:active { transform: scale(0.97); }

/* Create account gets a subtle accent tint to differentiate */
.welcome-auth-btn--create {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  color: var(--accent);
}
.welcome-auth-btn--create:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.welcome-hint {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0 0 0;
  animation: cm-btn-rise 0.4s ease 0.5s both;
}

.welcome-account-panels {
  width: 100%;
  text-align: left;
  padding-top: 20px;
}

.welcome-feature-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0 14px;
}

.welcome-feature-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 8px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  font-size: 0.76rem;
  font-weight: 800;
}

.welcome-feature-grid i {
  color: var(--accent);
}
@keyframes cm-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.welcome-privacy-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 0.78rem;
  display: flex; align-items: center; gap: 5px;
  margin-top: 22px; padding: 4px 0;
  transition: color 0.15s ease;
}
.welcome-privacy-btn:hover { color: var(--accent); }

/* Mobile tightening */
@media (max-width: 400px) {
  .welcome-sheet { padding: 36px 20px 24px; }
  .welcome-play-btn { font-size: 1.05rem; padding: 16px 20px; }
  .welcome-auth-btn { font-size: 0.82rem; padding: 12px 8px; }
  .welcome-title { font-size: 1.7rem; }
}

/* ---- Friend room sheet ---- */
.cm-sheet-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.cm-sheet-backdrop.open { display: flex; }
@media (min-width: 600px) {
  .cm-sheet-backdrop { align-items: center; padding: 20px; }
}

.cm-sheet {
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: cm-sheet-up 0.28s cubic-bezier(.22,1,.36,1);
}
@media (min-width: 600px) {
  .cm-sheet { border-radius: 20px; max-height: 90vh; }
}
@keyframes cm-sheet-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.cm-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 20px 20px 16px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  background: var(--surface); z-index: 2;
  border-radius: 24px 24px 0 0;
}
.cm-sheet-title { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.cm-sheet-title i { color: var(--accent); margin-right: 8px; }

/* Step track */
.cm-track {
  display: flex; align-items: center;
  padding: 16px 20px 8px;
  gap: 0;
}
.cm-track-step {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 0 0 auto;
}
.cm-track-step span {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 800; font-size: 0.82rem;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1.5px solid var(--line);
  color: var(--muted);
  transition: all 0.25s ease;
}
.cm-track-step small {
  font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
}
.cm-track-step.active span { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 40%, transparent); }
.cm-track-step.active small { color: var(--text, inherit); }
.cm-track-step.done span   { background: var(--success); color: #06281d; border-color: transparent; }
.cm-track-bar {
  flex: 1 1 auto; height: 2px; border-radius: 2px;
  background: var(--line); margin-bottom: 18px;
  transition: background 0.3s ease;
}
.cm-track-bar.done { background: color-mix(in srgb, var(--success) 55%, var(--line)); }

/* Cards */
.cm-card {
  margin: 0 16px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  overflow: hidden;
}
.cm-card-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cm-card-title { margin: 0; font-weight: 750; font-size: 0.97rem; letter-spacing: -0.01em; }
.cm-card-sub   { margin: 0; color: var(--muted); font-size: 0.83rem; }

.cm-cta { width: 100%; justify-content: center; }

/* Colour chips */
.cm-color-row { display: flex; gap: 8px; }
.cm-color-chip {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 12px;
  border: 1.5px solid var(--line);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: inherit; font-weight: 650; cursor: pointer;
  transition: all 0.18s ease;
}
.cm-color-chip.cm-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Link box */
.cm-link-box {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1.5px dashed color-mix(in srgb, var(--accent) 35%, var(--line));
}
.cm-link-icon { color: var(--accent); flex: 0 0 auto; }
.cm-link-text {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.8rem; font-family: ui-monospace, monospace;
}
/* Wait states */
.cm-wait-row { display: flex; align-items: center; gap: 12px; }
.cm-spinner {
  flex: 0 0 auto; width: 26px; height: 26px;
  border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent);
  animation: cm-spin 0.75s linear infinite;
}
@keyframes cm-spin { to { transform: rotate(360deg); } }
.cm-joined-check {
  flex: 0 0 auto; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--success); color: #fff; font-size: 1rem;
}
.cm-wait-joined .cm-card-title { color: var(--success); }

/* Time chips inside sheet */
.cm-time-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
@media (max-width: 380px) { .cm-time-grid { grid-template-columns: repeat(2, 1fr); } }

.cm-guest-wait .cm-wait-row { padding: 4px 0; }

/* Join section */
.cm-join-section {
  margin: 0 16px 12px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.cm-join-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 0.85rem; font-weight: 650;
  display: flex; align-items: center; gap: 7px;
  padding: 4px 0;
}
.cm-join-toggle:hover { color: var(--accent); }
.cm-join-body { margin-top: 10px; }
.cm-join-row { display: flex; gap: 8px; }
.cm-join-row .join-input { flex: 1 1 auto; }
.cm-join-row .primary-button { flex: 0 0 auto; }

/* Camera note */
.cm-camera-note {
  display: flex; align-items: center; gap: 10px;
  margin: 0 16px 20px;
  padding: 10px 13px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line-soft);
  color: var(--muted); font-size: 0.8rem;
}
.cm-camera-note i { color: var(--accent); flex: 0 0 auto; }
.cm-camera-note strong { color: var(--text, inherit); }


/* =====================================================================
   THREE-BUG FIX — 2026-06-25g
   1. Clock active state is now JS-driven only (no hardcoded initial).
   2. Desktop video pane: overlay, never reflows the board.
   3. Mobile dock: above board only (no layout shift).
   ===================================================================== */

/* FIX 2a — Desktop (>1180px): video pane as a fixed overlay sidebar.
   The board column NEVER changes width when camera is toggled.
   app-shell always uses the full width; video-pane floats on top. */
@media (min-width: 1181px) {
  /* Always give board the full space — video pane doesn't consume a column */
  .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Video pane sits as a fixed right panel on top of the layout */
  .video-pane {
    position: fixed !important;
    top: 68px;                  /* below header */
    right: 0;
    bottom: 0;
    width: 300px;
    z-index: 80;
    border-left: 1px solid var(--line);
    background: var(--surface);
    box-shadow: -8px 0 28px rgba(0,0,0,0.18);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(.22,1,.36,1);
  }
  /* When visible: slide in from the right */
  .app-shell:not(.video-hidden) .video-pane {
    transform: translateX(0);
    display: flex !important;
  }
  /* Keep pane hidden when video-hidden */
  .app-shell.video-hidden .video-pane {
    display: flex !important;   /* keep flex for transition */
    transform: translateX(100%);
    pointer-events: none;
  }
}

/* FIX 2b — Mobile dock: force it above the board, never causes board
   to shift. The dock is already position:static in the board-column
   flow so it appears above the board naturally — just ensure height
   is predictable and the board stays square. */
@media (max-width: 1180px) {
  .mobile-video-dock.open {
    display: block;
    /* Fixed height so board never jumps */
    max-height: 160px;
    overflow: hidden;
  }
  .mobile-video-dock .mobile-video-tile {
    height: 100px !important;
  }
  .mobile-video-dock .mobile-video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px;
  }
}

/* Final UX ownership: make the board the largest stable surface and keep
   fast drags from selecting the board UI as text on mobile browsers. */
.board-stage {
  width: var(--board-width, min(100%, 640px)) !important;
  max-width: 100% !important;
}

.board-stage .board-frame,
.board-frame {
  width: var(--board-width, min(100%, 640px)) !important;
  max-width: 100% !important;
}

.chessboard,
.chessboard *,
.board-frame,
.board-frame * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

.chessboard,
.square,
.piece-img {
  -webkit-user-drag: none !important;
}

@media (min-width: 1181px) {
  :root {
    --board-width: min(100%, clamp(640px, calc(100dvh - 220px), 760px));
  }
}

@media (max-width: 620px) {
  .board-stage,
  .board-stage .board-frame,
  .board-frame {
    width: min(100%, 100dvw) !important;
    max-width: min(100%, 100dvw) !important;
  }
}

/* =====================================================================
   ACTIVE-PLAY DESKTOP LAYOUT — 2026-06-26b
   Fixes the broken in-game desktop view reported in the screenshot:
     1. Removes the large dead void left of / around the board. The board
        column was a flexible 1fr track that centred a ~700px board inside
        a very wide column, leaving big empty gaps. We cap the whole
        play cluster and centre it so the board sits beside the rail like
        a real chess client (board-first).
     2. Caps the inline "Match video" dock height so it can no longer push
        the board down (it was uncapped above 1180px). Target ~150-170px.
     3. Makes that inline dock the single match-video surface: the duplicate
        far-right "Video Streams" overlay is hidden during play so it stops
        clipping the rail and stops showing the same two cameras twice.
        The pane stays in the DOM — app.js keeps its <video> references —
        it is only visually hidden, and the dock's own mic/camera buttons
        remain the controls. Nothing requests the camera automatically.
   Scope: desktop only (>=1181px) and normal play only (NOT focus mode),
   so mobile, tablet and full-scale focus mode are completely untouched.
   ===================================================================== */
/* Superseded on play.html by assets/css/play-final.css (the single-column,
   fixed-overlay-sidebar layout loaded last on that page) — excluded via
   :not(.play-page) so this legacy two-column cap can't reintroduce the
   dead-void bug it was originally written to fix. Still applies to any
   other page reusing .game-area/.board-column. */
@media (min-width: 1181px) {

  /* 1 — Board-first: cap + centre the play cluster, kill the void. */
  body:not(.chess-focus-mode):not(.play-page) .game-area {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 344px) !important;
    max-width: 1200px;
    margin-inline: auto;
    align-items: start !important;   /* top-align so the board isn't buried */
    gap: 20px !important;
  }

  body:not(.chess-focus-mode):not(.play-page) .board-column {
    justify-content: flex-start !important;
    min-height: 0 !important;
    padding-top: 2px;
  }

  /* 2 — Single video surface: hide the duplicate far-right pane in play. */
  body:not(.chess-focus-mode):not(.play-page) .app-shell:not(.video-hidden) .video-pane {
    display: none !important;
  }

  /* 3 — Cap the inline dock (~150-170px) so the board keeps its height,
     and line its width up with the board above it. */
  body:not(.chess-focus-mode):not(.play-page) .mobile-video-dock.open {
    width: var(--board-width, min(100%, 590px)) !important;
    max-width: 100% !important;
    max-height: 172px;
    overflow: hidden;
  }
  body:not(.chess-focus-mode):not(.play-page) .mobile-video-dock .mobile-video-grid {
    gap: 8px;
    padding: 8px;
  }
  body:not(.chess-focus-mode):not(.play-page) .mobile-video-dock .mobile-video-tile {
    aspect-ratio: auto !important;
    height: 120px !important;
  }
}

/* =====================================================================
   ACTIVE-PLAY RAIL TIDY — 2026-06-26c
   When a game is live (body.cm-playing, set by flow.js by mirroring
   app.js's own gameActive flag), keep the board the hero by removing the
   panels that just add height/noise mid-game and caused the dead void
   beside the board after scrolling:
     • Help panel       — redundant with the footer (Contact/Trust/Privacy/Terms)
     • Studio Notes blog — still fully available from the "Blog" nav button
     • Match Log         — collapsed to its header; the chevron re-opens it
   Applies at every width, so the board leads on mobile too. Nothing is
   removed from the DOM; everything returns the moment the game ends.
   ===================================================================== */
body.cm-playing .help-panel,
body.cm-playing .blog-panel {
  display: none !important;
}

/* Match Log: collapsed by default during play, re-openable via the toggle. */
body.cm-playing .log-panel .match-log {
  display: none;
}
body.cm-playing .log-panel.cm-log-open .match-log {
  display: block;
}
/* The collapse toggle only matters during play; hide it on the idle view
   so the log header looks untouched there. */
body:not(.cm-playing) #cm-log-toggle {
  display: none;
}

/* =====================================================================
   BOARD SIZE STABILITY — 2026-06-26d
   Stop the board shrinking when the Duff Engine starts. The eval bar is a
   ~20px flex sibling (+8px gap) inside .board-stage; when it appears on the
   engine's first move it stole that width from the board. Now the stage
   widens to fit the eval bar instead, so the board keeps its full size
   whether or not the engine is running. max-width:100% guards against any
   overflow on very tall screens (the board shrinks only if it truly must).
   ===================================================================== */
@media (min-width: 1181px) {
  /* Size the board from screen HEIGHT only, with no dependency on the column
     width or the eval bar. The frame is fixed and cannot shrink (flex 0 0),
     so when the 20px eval bar appears on the engine's first move the board
     stays exactly the same size — the stage just grows to hold both. The
     wider .game-area above guarantees there's room and no overflow.
     Excluded on .play-page: play-final.css owns board sizing there via
     --cm-board, which already accounts for the eval bar via .board-stage. */
  body:not(.play-page) .board-stage .board-frame,
  body:not(.play-page) .board-frame {
    width: clamp(640px, calc(100dvh - 230px), 760px) !important;
    flex: 0 0 auto !important;
  }
  body:not(.play-page) .board-stage {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* =====================================================================
   DUFF ENGINE — SPEECH BUBBLE (fixed, no layout impact) 2026-06-26k
   Lives in body, positioned by JS next to the engine avatar.
   Never fades — just updates text when something happens.
   ===================================================================== */
.duff-bubble {
  position: absolute;
  z-index: 8500;
  display: none;
  flex-direction: column;
  gap: 3px;
  background: #1e0e06;
  border: 1.5px solid #8b2f1a;
  color: #f0d5a8;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  pointer-events: none;
  white-space: nowrap;
  max-width: 240px;
  white-space: normal;
}
/* Tail pointing left toward the avatar */
.duff-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 14px;
  border: 6px solid transparent;
  border-right-color: #8b2f1a;
  border-left: 0;
}
.duff-bubble::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 15px;
  border: 5px solid transparent;
  border-right-color: #1e0e06;
  border-left: 0;
}
.duff-bubble--show { display: flex; }
.duff-bubble-name {
  font-size: 0.68rem;
  font-weight: 700;
  color: #8b2f1a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.duff-bubble-text { color: #f0d5a8; }

@media (prefers-reduced-motion: reduce) {
  .duff-bubble { transition: none; }
}

/* =====================================================================
   MOBILE PERFORMANCE — welcome screen animation fix 2026-06-26j
   The animated squares were running on the CPU every frame on mobile.
   Disable them on phones entirely; keep a single fade-in only.
   Also kill ctaGlow and riseIn stagger — not worth the CPU cost on mobile.
   ===================================================================== */
@media (max-width: 600px) {
  .welcome-squares { display: none !important; }
  .welcome-sheet   { animation: cm-welcome-in 0.28s ease both !important; }
  .welcome-brand   { animation: none !important; }
  .welcome-title,
  .welcome-sub,
  .welcome-play-btn,
  .welcome-account-row,
  .welcome-hint    { animation: none !important; opacity: 1 !important; transform: none !important; }

  /* Kill all infinite box-shadow animations — the main mobile perf killer */
  .start-button    { animation: none !important; }

  /* Kill staggered entrance animations on panels — not needed on mobile */
  .board-stage,
  .side-panel > *,
  .records-rail > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .duff-bubble { transition: opacity 0.12s ease; max-height: none; }
}

/* =====================================================================
   KING CHECKMATE SQUARE HIGHLIGHT — 2026-06-26l
   Appears immediately when checkmate is detected. Builds up over ~2s
   then pulses slowly, giving the player time to see the mated king
   before the result overlay arrives at 3.2s.
   ===================================================================== */
@keyframes cm-checkmate-reveal {
  0%   { box-shadow: inset 0 0 0 999px rgba(180, 30, 30, 0.0);  }
  30%  { box-shadow: inset 0 0 0 999px rgba(180, 30, 30, 0.45); }
  60%  { box-shadow: inset 0 0 0 999px rgba(220, 40, 40, 0.70); }
  80%  { box-shadow: inset 0 0 0 999px rgba(200, 30, 30, 0.58); }
  100% { box-shadow: inset 0 0 0 999px rgba(220, 40, 40, 0.68); }
}
@keyframes cm-checkmate-hold {
  0%, 100% { box-shadow: inset 0 0 0 999px rgba(200, 30, 30, 0.58); }
  50%       { box-shadow: inset 0 0 0 999px rgba(230, 50, 50, 0.72); }
}
@keyframes cm-badge-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.square.king-checkmate {
  position: relative;
  animation:
    cm-checkmate-reveal 2s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    cm-checkmate-hold 1.4s ease-in-out 2s infinite;
}
.square.king-checkmate::after {
  content: "♚ Checkmate";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 0, 0, 0.85);
  color: #f5c5c5;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 2px 5px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  animation: cm-badge-in 0.4s ease 1.6s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .square.king-checkmate {
    animation: none;
    box-shadow: inset 0 0 0 999px rgba(180,30,30,0.6);
  }
  .square.king-checkmate::after { opacity: 1; animation: none; }
}

/* =====================================================================
   MOBILE BOARD PERFORMANCE — 2026-06-26n-perf
   Three targeted GPU/layout fixes for smooth mobile play:
   1. CSS contain — board redraws don't trigger full-page reflow.
   2. GPU layer promotion — board and squares get their own composite
      layer so moves don't repaint the entire page.
   3. Piece images — cache-friendly rendering hints.
   None of these change any visual appearance.
   ===================================================================== */

/* 1 — Contain board layout/paint to the board element */
.board-frame {
  contain: layout style;
}
.chessboard {
  contain: strict;
  transform: translateZ(0);   /* promote to GPU layer */
  will-change: contents;
}

/* 2 — Squares: GPU composite, no text select, stable paint */
.square {
  transform: translateZ(0);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  backface-visibility: hidden;
}

/* 3 — Piece images: never show the broken-image icon while loading */
.piece-img {
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
  will-change: transform;     /* smoother drag */
}

/* 4 — Disable tap highlight flash on board (causes visible glitch on iOS) */
.chessboard,
.square {
  -webkit-tap-highlight-color: transparent;
}

/* 5 — Kill checkmate animation on mobile (too expensive on phone) */
@media (max-width: 600px) {
  .square.king-checkmate {
    animation: none !important;
    box-shadow: inset 0 0 0 999px rgba(200, 30, 30, 0.65) !important;
  }
}

/* =====================================================================
   BOARD THEME — Chessmate Red exclusive gradient 2026-06-26o
   When the Chessmate Red theme is active the dark squares get a
   subtle warm gradient to match the brand identity.
   ===================================================================== */
:root[data-theme="chessmate"] .square.dark {
  background: linear-gradient(135deg, #6e1423 0%, #8a1f31 100%);
}

/* Hide attribution paragraph from board panel — CC BY-SA credit
   is preserved in the Privacy / About info sheet (app.js line 284). */
.attribution {
  display: none !important;
}

/* =====================================================================
   GOOGLE SIGN-IN BUTTON — 2026-06-26
   ===================================================================== */
.welcome-google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, white);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)),
    color-mix(in srgb, var(--surface) 86%, #fff);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 26px rgba(0,0,0,0.18);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.welcome-google-btn:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)),
    color-mix(in srgb, var(--surface-2) 84%, #fff);
  border-color: color-mix(in srgb, var(--accent) 45%, white);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 30px rgba(0,0,0,0.24);
}
.welcome-google-btn:active { transform: scale(0.99); }
.welcome-google-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.google-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.welcome-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 10px 0 8px;
  position: relative;
  z-index: 1;
}
.welcome-divider::before,
.welcome-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line, rgba(255,255,255,0.1));
}
.welcome-divider span {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.google-error {
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  margin-top: 4px;
}

/* Google rendered button slot — centers Google's own iframe button */
.google-btn-slot {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 44px;
  position: relative;
  z-index: 1;
}

/* =====================================================================
   WELCOME SCREEN — simplified flow redesign 2026-06-27
   3 actions only: Play now → Google → email (collapsed toggle)
   ===================================================================== */

/* Email toggle link — subtle, tertiary */
.welcome-email-toggle {
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
  margin-top: 4px;
}
.welcome-email-link {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 6px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.welcome-email-link:hover {
  color: var(--fg);
  text-decoration-color: currentColor;
}

/* Tab row inside the email panel */
.welcome-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border-radius: 10px;
  padding: 4px;
}
.welcome-tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.welcome-tab.active-tab {
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* =====================================================================
   AUTH / ONBOARDING STATE POLISH — 2026-06-27
   ===================================================================== */
.cm-auth-signed-out .user-pill:not(.is-guest):not(.is-logged-in) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}

.user-pill.is-guest {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

.account-signedout-panel {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 88%, transparent) !important;
}

.account-signedout-copy {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.account-signedout-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

#account-page.is-signed-out .account-identity-card {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

.start-mode-card[hidden] {
  display: none !important;
}

.start-overlay .start-box {
  width: min(94vw, 420px) !important;
  max-width: min(94vw, 420px) !important;
  max-height: min(86dvh, 680px);
  overflow-y: auto;
  padding: 18px !important;
  border-radius: 14px !important;
}

.start-box .overlay-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  font-size: 16px;
}

.start-box .overlay-title {
  font-size: clamp(1.45rem, 3.2vw, 1.95rem);
  line-height: 1.05;
  margin-bottom: 4px;
}

.start-box .overlay-desc {
  max-width: 32ch;
  margin: 0 auto 12px;
  font-size: 0.9rem;
  line-height: 1.35;
}

.start-mode-grid {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 12px;
}

.start-mode-card {
  min-height: 66px;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 9px;
  padding: 10px;
  border-radius: 8px;
}

.start-mode-card i {
  width: 28px;
  height: 28px;
  font-size: 13px;
}

.start-mode-card span {
  font-size: 0.72rem;
  line-height: 1.1;
}

.start-mode-card small {
  font-size: 0.68rem;
  line-height: 1.2;
}

.time-control-grid {
  gap: 7px;
  margin: 0 0 12px;
}

.time-chip {
  min-height: 54px;
  padding: 8px 5px;
  border-radius: 8px;
}

.time-chip .time-chip-detail {
  font-size: 1.06rem;
}

.start-button {
  min-height: 46px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--oxblood), color-mix(in srgb, var(--oxblood) 78%, #17110d)) !important;
  border-color: color-mix(in srgb, var(--oxblood) 88%, #fff) !important;
  color: #fff6ed !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--oxblood) 24%, transparent);
}

.start-button:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--oxblood) 86%, #fff), var(--oxblood)) !important;
  color: #fff !important;
}

.tour-backdrop {
  z-index: 2700;
}

.tour-sheet {
  position: relative;
  max-width: 560px;
  overflow: hidden;
}

.tour-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 40%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, #38bdf8 18%, transparent), transparent 28%);
}

.tour-sheet > * {
  position: relative;
  z-index: 1;
}

.tour-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

.tour-copy {
  margin: 6px 0 16px;
  color: var(--muted);
  line-height: 1.5;
}

.tour-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tour-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

.tour-card i {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.tour-card strong {
  color: var(--fg);
  font-size: 0.95rem;
}

.tour-card span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.42;
}

.tour-actions {
  margin-top: 16px;
}

@media (max-width: 560px) {
  .welcome-feature-grid,
  .account-signedout-actions,
  .tour-grid {
    grid-template-columns: 1fr;
  }

  .start-overlay .start-box {
    width: min(100%, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 22px);
    padding: 14px !important;
  }

  .start-box .overlay-icon {
    display: none;
  }

  .start-mode-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .start-mode-card {
    min-height: 56px;
    padding: 8px;
  }

  .start-mode-card small {
    display: none;
  }

  .time-control-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .time-chip {
    min-height: 48px;
  }

  .tour-sheet {
    max-height: 88vh;
    overflow-y: auto;
  }
}

/* Remove old welcome-account-row styles that no longer exist */
.welcome-account-row { display: none !important; }
.welcome-hint { display: none !important; }
.welcome-dot  { display: none !important; }

/* =====================================================================
   PREMIUM START DASHBOARD — 2026-06-27
   Warm cinematic Chessmate start overlay. Scoped to avoid board changes.
   ===================================================================== */
:root {
  --cm-bg-deep: #080604;
  --cm-panel: rgba(18, 14, 10, 0.92);
  --cm-panel-soft: rgba(28, 22, 17, 0.82);
  --cm-line: rgba(191, 144, 120, 0.28);
  --cm-line-strong: rgba(216, 92, 80, 0.78);
  --cm-cream: #f4ead8;
  --cm-muted: #cdbeb0;
  --cm-gold: #b99b72;
  --cm-red: #b64038;
  --cm-red-bright: #e25249;
  --cm-red-soft: rgba(182, 64, 56, 0.18);
  --cm-shadow: 0 30px 90px rgba(0,0,0,0.55);
}

.start-overlay {
  background:
    radial-gradient(circle at 50% 26%, rgba(226, 82, 73, 0.18), transparent 28%),
    radial-gradient(circle at 50% 66%, rgba(185, 155, 114, 0.11), transparent 34%),
    linear-gradient(180deg, rgba(8, 6, 4, 0.78), rgba(8, 6, 4, 0.94)) !important;
  backdrop-filter: blur(18px) saturate(0.9);
}

.start-overlay .start-box {
  position: relative;
  width: min(92vw, 520px) !important;
  max-width: min(92vw, 520px) !important;
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px !important;
  border: 1px solid var(--cm-line) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(31, 24, 18, 0.94), rgba(13, 10, 7, 0.96)),
    var(--cm-panel) !important;
  box-shadow:
    var(--cm-shadow),
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 0 70px rgba(182,64,56,0.14) !important;
}

.start-overlay .start-box::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 0%, rgba(226,82,73,0.18), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,0.07), transparent 28%, rgba(185,155,114,0.08));
  opacity: 0.9;
}

.start-overlay .start-box > * {
  position: relative;
  z-index: 1;
}

.start-settings-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--cm-line);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  color: var(--cm-gold);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

.start-settings-btn:hover,
.start-settings-btn:focus-visible {
  border-color: var(--cm-line-strong);
  background: var(--cm-red-soft);
  color: var(--cm-cream);
  transform: translateY(-1px);
  outline: none;
}

.start-box .overlay-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  color: var(--cm-red-bright);
  background: rgba(226,82,73,0.13);
  border: 1px solid rgba(226,82,73,0.32);
}

.start-box .overlay-title {
  color: var(--cm-cream);
  font-size: clamp(2rem, 5vw, 2.85rem);
  line-height: 0.98;
  margin: 0;
  letter-spacing: 0;
}

.start-box .overlay-desc {
  max-width: 40ch;
  margin: 10px auto 18px;
  color: var(--cm-muted);
  font-size: 0.98rem;
  line-height: 1.42;
}

.start-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0 0 18px;
}

.start-mode-card[hidden] {
  display: none !important;
}

.start-mode-card {
  position: relative;
  min-height: 96px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 4px 12px;
  padding: 14px 12px;
  border: 1px solid var(--cm-line);
  border-radius: 12px;
  background: var(--cm-panel-soft);
  color: var(--cm-cream);
  text-align: left;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.start-mode-card:hover,
.start-mode-card:focus-visible {
  border-color: rgba(226,82,73,0.52);
  background: rgba(35, 27, 21, 0.92);
  transform: translateY(-1px);
  outline: none;
}

.start-mode-card.selected {
  border-color: var(--cm-line-strong);
  background:
    linear-gradient(135deg, rgba(182,64,56,0.24), rgba(28,22,17,0.9));
  box-shadow:
    0 0 0 1px rgba(226,82,73,0.18) inset,
    0 16px 34px rgba(182,64,56,0.18);
}

.start-mode-card > i:first-child {
  grid-row: 1 / span 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--cm-red-bright);
  background: rgba(182,64,56,0.18);
  font-size: 16px;
}

.start-mode-card span {
  min-width: 0;
  color: var(--cm-cream);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: 0;
  text-transform: none;
}

.start-mode-card small {
  grid-column: 2;
  min-width: 0;
  color: var(--cm-muted);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.28;
}

.start-recommended {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(226,82,73,0.18);
  color: var(--cm-red-bright);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.start-card-chevron {
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: end;
  display: inline-grid;
  place-items: center;
  color: rgba(244,234,216,0.42);
  font-size: 0.72rem;
  transition: color 170ms ease, transform 170ms ease;
}

.start-mode-card.selected .start-card-chevron,
.start-mode-card:hover .start-card-chevron {
  color: var(--cm-red-bright);
  transform: translateX(2px);
}

.start-section-title {
  margin: 2px 0 9px;
  color: var(--cm-gold);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
}

.start-section-title[hidden] {
  display: none !important;
}

.time-control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid rgba(191,144,120,0.18);
  border-radius: 14px;
  background: rgba(8,6,4,0.28);
}

.time-chip {
  min-height: 58px;
  padding: 9px 5px;
  border: 1px solid var(--cm-line);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  color: var(--cm-cream);
}

.time-chip:hover,
.time-chip:focus-visible {
  border-color: rgba(226,82,73,0.48);
  outline: none;
}

.time-chip.selected {
  border-color: var(--cm-line-strong);
  background: rgba(182,64,56,0.17);
  box-shadow: 0 0 0 1px rgba(226,82,73,0.15) inset, 0 10px 24px rgba(182,64,56,0.14);
}

.time-chip .time-chip-label {
  color: var(--cm-gold);
}

.time-chip.selected .time-chip-label {
  color: var(--cm-red-bright);
}

.time-chip .time-chip-detail {
  color: var(--cm-cream);
  font-size: 1.08rem;
}

.start-button {
  width: 100%;
  min-height: 52px;
  border: 0 !important;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--cm-red-bright), var(--cm-red)) !important;
  color: #fff9f0 !important;
  font-weight: 900;
  letter-spacing: 0.01em;
  box-shadow: 0 18px 34px rgba(182,64,56,0.32);
}

.start-button:hover,
.start-button:focus-visible {
  background: linear-gradient(135deg, #f05e55, var(--cm-red)) !important;
  color: #fff !important;
  transform: translateY(-1px);
  outline: none;
}

.start-trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.start-trust-row span {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 0 7px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(191,144,120,0.14);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  text-align: left;
}

.start-trust-row i {
  grid-row: 1 / span 2;
  color: var(--cm-gold);
  font-size: 0.8rem;
}

.start-trust-row strong {
  min-width: 0;
  color: var(--cm-cream);
  font-size: 0.67rem;
  font-weight: 900;
  line-height: 1.15;
}

.start-trust-row small {
  min-width: 0;
  color: rgba(205,190,176,0.78);
  font-size: 0.62rem;
  line-height: 1.15;
}

@media (prefers-reduced-motion: reduce) {
  .start-mode-card,
  .start-card-chevron,
  .start-button,
  .start-settings-btn {
    transition: none !important;
  }
}

@media (max-width: 560px) {
  .start-overlay {
    align-items: center !important;
    padding: 10px !important;
  }

  .start-overlay .start-box {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: min(100%, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 20px);
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .start-settings-btn {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
  }

  .start-box .overlay-icon {
    display: grid;
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
  }

  .start-box .overlay-title {
    font-size: 1.72rem;
  }

  .start-box .overlay-desc {
    margin-bottom: 13px;
    font-size: 0.86rem;
  }

  .start-mode-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }

  .start-mode-card {
    min-height: 66px;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    padding: 11px;
  }

  .start-mode-card > i:first-child {
    width: 38px;
    height: 38px;
  }

  .start-mode-card small {
    display: block;
  }

  .time-control-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .time-chip {
    min-height: 52px;
  }

  .start-button {
    min-height: 50px;
  }

  .start-trust-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .start-trust-row span {
    min-height: 40px;
  }
}

/* =====================================================================
   WHOLE-UI VISIBILITY SCALE — 2026-06-27
   Keeps Chessmate readable and fully visible on desktop, tablet and phone.
   ===================================================================== */
html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 0;
}

.app-shell,
.game-area,
.board-column,
.records-rail,
.side-panel,
.video-pane {
  min-width: 0;
}

.panel,
.device-panel,
.engine-panel,
.blog-panel,
.scoresheet-panel,
.account-section,
.info-sheet {
  overflow-wrap: anywhere;
}

@media (min-width: 1181px) {
  :root {
    --board-width: clamp(500px, min(54vw, calc(100dvh - 220px)), 700px) !important;
  }

  .app-shell {
    height: auto !important;
    min-height: calc(100dvh - 62px) !important;
    align-items: start !important;
  }

  .game-area {
    grid-template-columns: minmax(500px, 1fr) minmax(292px, 336px) !important;
    gap: clamp(12px, 1.25vw, 18px) !important;
    padding: clamp(10px, 1.2vw, 18px) !important;
    align-items: start;
    overflow: visible !important;
  }

  .board-column {
    min-height: 0 !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .player-card {
    width: var(--board-width) !important;
    max-width: var(--board-width) !important;
    min-height: 56px !important;
  }

  .board-stage,
  .engine-panel,
  .board-review-bar {
    width: var(--board-width) !important;
    max-width: var(--board-width) !important;
  }

  .records-rail {
    max-height: calc(100dvh - 86px);
    padding-right: 2px;
  }

  .panel,
  .device-panel,
  .engine-panel,
  .blog-panel {
    padding: 12px !important;
  }

  .panel-title {
    font-size: 12.5px !important;
  }
}

@media (min-width: 861px) and (max-width: 1180px) {
  :root {
    --board-width: min(100%, clamp(500px, 70vw, 660px)) !important;
  }

  .app-shell {
    height: auto !important;
    min-height: calc(100dvh - 62px);
  }

  .game-area {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  .board-column {
    min-height: 0 !important;
    justify-content: flex-start !important;
  }

  .records-rail,
  .side-panel {
    width: min(100%, var(--board-width)) !important;
    margin-inline: auto;
  }

  .records-rail {
    overflow: visible !important;
  }
}

@media (max-width: 860px) {
  .app-header {
    min-height: 56px !important;
  }

  .masthead-row {
    gap: 8px !important;
  }

  .brand-mark {
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
  }

  .brand-copy strong {
    font-size: 15px !important;
  }

  .header-actions {
    gap: 5px !important;
  }

  .header-actions .icon-button,
  .mobile-menu-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .user-pill {
    min-height: 40px !important;
    padding: 3px 8px 3px 4px !important;
  }

  .app-shell {
    height: auto !important;
    min-height: calc(100dvh - 56px);
  }
}

@media (max-width: 620px) {
  :root {
    --board-width: min(100%, calc(100dvw - 12px)) !important;
  }

  .app-header {
    padding: 7px 10px !important;
  }

  .brand-copy strong {
    font-size: 14px !important;
  }

  .header-actions .icon-button,
  .mobile-menu-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  .game-area {
    padding: 0 6px 10px !important;
    gap: 8px !important;
  }

  .board-column {
    gap: 4px !important;
    align-items: center !important;
  }

  .board-stage,
  .board-frame,
  .chessboard {
    width: var(--board-width) !important;
    max-width: var(--board-width) !important;
  }

  .player-card {
    width: var(--board-width) !important;
    max-width: var(--board-width) !important;
    min-height: 52px !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
  }

  .player-card .avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  .player-card .player-name {
    font-size: 14px !important;
    max-width: clamp(86px, 32vw, 132px) !important;
  }

  .player-card .clock {
    min-width: 68px !important;
    max-width: 78px !important;
    padding: 6px 8px !important;
    font-size: 16px !important;
  }

  .player-card-actions .icon-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .records-rail,
  .side-panel {
    width: 100% !important;
    gap: 10px !important;
  }

  .panel,
  .scoresheet-panel,
  .engine-panel,
  .device-panel,
  .blog-panel {
    margin: 8px 0 !important;
    padding: 11px !important;
    border-radius: 12px !important;
  }

  .panel-title {
    font-size: 12px !important;
  }

  .sheet-backdrop {
    padding: 10px !important;
  }

  .info-sheet,
  .auth-sheet,
  .account-sheet,
  .welcome-sheet {
    width: min(100%, calc(100dvw - 20px)) !important;
    max-width: min(100%, calc(100dvw - 20px)) !important;
    max-height: calc(100dvh - 20px) !important;
  }

  .account-page-body {
    gap: 10px !important;
  }

  .account-section {
    padding: 13px !important;
  }
}

@media (max-width: 380px) {
  :root {
    --board-width: min(100%, calc(100dvw - 8px)) !important;
  }

  .app-header {
    padding-inline: 7px !important;
  }

  .brand-copy strong {
    font-size: 13px !important;
  }

  .header-actions .icon-button,
  .mobile-menu-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .player-card .avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .player-card .player-name {
    font-size: 13px !important;
    max-width: 92px !important;
  }

  .player-card .clock {
    min-width: 62px !important;
    max-width: 70px !important;
    font-size: 15px !important;
  }
}

/* =====================================================================
   PHONE START FLOW FIX — menu first, time controls second
   ===================================================================== */
.start-back-btn[hidden],
.start-menu-step .time-control-grid,
.start-menu-step .start-section-title,
.start-menu-step .start-button,
.start-time-step .start-mode-grid,
.start-time-step .start-trust-row {
  display: none !important;
}

.start-back-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--cm-line);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  color: var(--cm-muted);
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

.start-back-btn:hover,
.start-back-btn:focus-visible {
  border-color: var(--cm-line-strong);
  color: var(--cm-cream);
  outline: none;
}

.start-time-step .start-settings-btn {
  display: none;
}

.start-time-step .start-box .overlay-title {
  font-size: clamp(1.85rem, 7vw, 2.35rem);
}

.start-time-step .time-control-grid {
  margin-top: 8px;
}

.start-time-step .start-button {
  margin-top: 2px;
}

@media (max-width: 560px) {
  .start-menu-step .start-trust-row {
    display: none !important;
  }

  .start-overlay .start-box {
    max-height: calc(100dvh - 16px) !important;
  }

  .start-back-btn {
    top: 10px;
    left: 10px;
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.74rem;
  }

  .start-menu-step .start-box .overlay-icon {
    width: 30px !important;
    height: 30px !important;
    margin-bottom: 6px !important;
  }

  .start-menu-step .start-box .overlay-title {
    font-size: 1.5rem !important;
  }

  .start-menu-step .start-box .overlay-desc {
    max-width: 30ch;
    margin-bottom: 10px !important;
    font-size: 0.8rem !important;
  }

  .start-menu-step .start-mode-grid {
    gap: 7px !important;
    margin-bottom: 0 !important;
  }

  .start-menu-step .start-mode-card {
    min-height: 58px !important;
    grid-template-columns: 34px minmax(0, 1fr) 16px !important;
    padding: 9px 10px !important;
  }

  .start-menu-step .start-mode-card > i:first-child {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
  }

  .start-menu-step .start-mode-card span {
    font-size: 0.8rem !important;
  }

  .start-menu-step .start-mode-card small {
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
  }

  .start-recommended {
    min-height: 17px;
    padding: 1px 6px;
    font-size: 0.54rem;
  }

  .start-time-step .start-box .overlay-icon {
    display: none !important;
  }

  .start-time-step .start-box .overlay-title {
    margin-top: 28px;
    font-size: 1.55rem !important;
  }

  .start-time-step .start-box .overlay-desc {
    font-size: 0.82rem !important;
    margin-bottom: 12px !important;
  }

  .start-time-step .time-control-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px !important;
    gap: 7px !important;
  }

  .start-time-step .time-chip {
    min-height: 48px !important;
    padding: 7px 4px !important;
  }

  .start-time-step .time-chip .time-chip-detail {
    font-size: 1rem !important;
  }
}

/* =====================================================================
   PHONE FLOW + BLOCKING UI FINAL GUARDRAILS — 2026-06-27
   Compact launcher, clean wrapped panels, and non-blocking gameplay notes.
   ===================================================================== */
.start-overlay .start-box {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.start-overlay .start-box::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.start-overlay .start-trust-row {
  display: none !important;
}

.start-menu-step .start-box {
  max-height: min(82dvh, 680px) !important;
  padding: clamp(16px, 2.2vw, 22px) !important;
}

.start-menu-step .start-box .overlay-title {
  font-size: clamp(1.55rem, 4.2vw, 2.25rem) !important;
  line-height: 1.04 !important;
}

.start-menu-step .start-box .overlay-desc {
  margin-bottom: 14px !important;
}

.start-menu-step .start-mode-grid {
  gap: 9px !important;
  margin-bottom: 0 !important;
}

.start-menu-step .start-mode-card {
  min-height: clamp(70px, 9dvh, 86px) !important;
  padding: 11px 12px !important;
}

.panel-copy,
.privacy-relay-row,
.privacy-relay-text,
.privacy-relay-hint,
.support-list,
.support-list li,
.support-list span,
.match-log,
.log-entry,
.scoresheet-moves,
.scoresheet-row,
.scoresheet-empty,
.room-id,
.join-input {
  min-width: 0;
  overflow-wrap: anywhere;
}

.privacy-relay-row {
  align-items: flex-start !important;
}

.privacy-relay-text {
  flex: 1 1 auto;
}

.support-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
}

.scoresheet-moves,
.match-log {
  overscroll-behavior: contain;
}

@media (max-width: 620px) {
  .start-overlay {
    padding: 8px !important;
  }

  .start-overlay .start-box {
    width: min(100%, calc(100dvw - 16px)) !important;
    max-width: min(100%, calc(100dvw - 16px)) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 14px !important;
  }

  .start-menu-step .start-box .overlay-icon {
    display: none !important;
  }

  .start-menu-step .start-box .overlay-title {
    font-size: clamp(1.28rem, 6.2vw, 1.55rem) !important;
  }

  .start-menu-step .start-box .overlay-desc {
    margin: 6px auto 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.32 !important;
  }

  .start-menu-step .start-mode-card {
    min-height: 54px !important;
    grid-template-columns: 32px minmax(0, 1fr) 14px !important;
    gap: 2px 9px !important;
    padding: 8px 9px !important;
  }

  .start-menu-step .start-mode-card > i:first-child {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }

  .start-menu-step .start-mode-card span {
    font-size: 0.78rem !important;
  }

  .start-menu-step .start-mode-card small {
    font-size: 0.66rem !important;
    line-height: 1.14 !important;
  }

  .start-recommended {
    display: none !important;
  }

  .start-time-step .start-box {
    padding-top: 42px !important;
  }

  .start-time-step .time-control-grid {
    max-height: none !important;
  }

  body.cm-playing .records-rail,
  body.cm-playing .side-panel {
    display: none !important;
  }

  body.cm-playing .app-shell,
  body.cm-playing .game-area,
  body.cm-playing .board-column {
    min-height: 0 !important;
  }

  .duff-bubble {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
    transform: translateX(-50%) !important;
    width: min(92dvw, 340px) !important;
    max-width: min(92dvw, 340px) !important;
    max-height: 58px !important;
    display: none;
    gap: 1px !important;
    padding: 8px 11px !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 1200 !important;
  }

  .duff-bubble--show {
    display: flex !important;
  }

  .duff-bubble::before,
  .duff-bubble::after {
    display: none !important;
  }

  .duff-bubble-name {
    font-size: 0.58rem !important;
    line-height: 1.1 !important;
  }

  .duff-bubble-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .toast-notification {
    width: min(92dvw, 360px) !important;
    max-width: min(92dvw, 360px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .scoresheet-moves,
  .match-log {
    min-height: 0 !important;
    max-height: min(30dvh, 220px) !important;
  }

  .privacy-relay-row {
    padding: 9px !important;
  }

  .privacy-relay-text {
    align-items: flex-start !important;
    gap: 4px 6px !important;
    line-height: 1.25 !important;
  }

  .privacy-relay-hint {
    font-size: 0.68rem !important;
    line-height: 1.28 !important;
  }

  .support-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .support-actions .text-button,
  .host-color-chip,
  .join-row .text-button {
    min-width: 0 !important;
  }

  .support-list li {
    gap: 7px !important;
    font-size: 0.76rem !important;
    line-height: 1.34 !important;
  }
}

@media (max-width: 380px) {
  .start-overlay .start-box {
    padding: 12px !important;
  }

  .start-menu-step .start-mode-card small {
    display: none !important;
  }

  .start-menu-step .start-mode-card {
    min-height: 48px !important;
  }

  .duff-bubble,
  .toast-notification {
    width: calc(100dvw - 18px) !important;
    max-width: calc(100dvw - 18px) !important;
  }
}

/* =====================================================================
   BROWSER COMMENT FIXES — nav, clocks, profile gear, phone controls
   ===================================================================== */
:root {
  --cm-clock-width: 86px;
}

.start-settings-btn {
  display: none !important;
}

.player-card.top {
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto var(--cm-clock-width) !important;
}

.player-card.bottom {
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) var(--cm-clock-width) !important;
}

.player-card .clock {
  width: var(--cm-clock-width) !important;
  min-width: var(--cm-clock-width) !important;
  max-width: var(--cm-clock-width) !important;
  justify-self: end !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

@media (max-width: 620px) {
  :root {
    --cm-clock-width: 82px;
  }

  .app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    min-height: 58px !important;
    padding: 7px 9px !important;
  }

  .edition-strip {
    display: none !important;
  }

  .masthead-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .brand-lockup {
    min-width: 0 !important;
    gap: 8px !important;
  }

  .brand-mark {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  .brand-copy strong {
    max-width: 118px !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .brand-copy span {
    display: none !important;
  }

  .header-actions {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
  }

  .user-pill {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 3px !important;
    border-radius: 12px !important;
  }

  .user-pill-info,
  .user-pill-chevron {
    display: none !important;
  }

  .user-pill-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .app-nav {
    position: fixed !important;
    top: 58px !important;
    left: 8px !important;
    right: 8px !important;
    z-index: 95 !important;
    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    max-height: calc(100dvh - 72px) !important;
    overflow: auto !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: rgba(17, 12, 9, 0.98) !important;
    border: 1px solid rgba(191, 144, 120, 0.36) !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55) !important;
  }

  .app-header.nav-open .app-nav {
    display: grid !important;
  }

  .nav-button,
  .nav-more-item {
    min-height: 42px !important;
    justify-content: center !important;
    border-radius: 10px !important;
  }

  .nav-more-wrap {
    position: relative !important;
    display: grid !important;
    min-width: 0 !important;
  }

  .nav-more-wrap.open {
    grid-column: 1 / -1 !important;
  }

  .nav-more-wrap.open .nav-more-btn {
    border-color: rgba(226, 82, 73, 0.55) !important;
  }

  .nav-more-menu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 7px !important;
    padding: 7px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    background: rgba(255,255,255,0.035) !important;
    box-shadow: none !important;
  }

  .nav-more-wrap.open .nav-more-menu:not([hidden]) {
    display: grid !important;
  }

  .player-card.top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--cm-clock-width) !important;
    grid-template-areas:
      "meta clock"
      "actions actions" !important;
    gap: 6px 8px !important;
    align-items: center !important;
  }

  .player-card.top .player-meta {
    grid-area: meta !important;
  }

  .player-card.top .clock {
    grid-area: clock !important;
  }

  .player-card.top .captured-pieces {
    display: none !important;
  }

  .player-card.top .player-card-actions {
    grid-area: actions !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 5px !important;
    margin: 0 !important;
    padding-top: 2px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .player-card.top .player-card-actions::-webkit-scrollbar {
    display: none !important;
  }

  #btn-theme:not([hidden]),
  #btn-sound:not([hidden]),
  #btn-drag:not([hidden]),
  #btn-flip:not([hidden]),
  #btn-chess-focus:not([hidden]),
  #btn-engine-hints-top:not([hidden]),
  #btn-offer-draw:not([hidden]),
  #btn-resign:not([hidden]),
  #btn-video-toggle:not([hidden]) {
    display: inline-flex !important;
  }

  .player-card-actions .role-badge.show {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    min-height: 32px !important;
    max-width: none !important;
  }

  .player-card-actions .icon-button {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  .player-card.bottom {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--cm-clock-width) !important;
  }

  .player-card.bottom .captured-pieces {
    display: none !important;
  }
}

@media (max-width: 380px) {
  :root {
    --cm-clock-width: 76px;
  }

  .brand-copy strong {
    max-width: 96px !important;
    font-size: 14px !important;
  }

  .header-actions .icon-button,
  .mobile-menu-button,
  .user-pill {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .player-card-actions .icon-button {
    flex-basis: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
}

/* Footer belongs after the board/tools, never inside the board visual field. */
.app-footer {
  grid-column: 1 / -1 !important;
  order: 100 !important;
  align-self: end !important;
  width: min(100%, var(--board-width, 100%)) !important;
  max-width: min(100%, var(--board-width, 100%)) !important;
  margin: clamp(10px, 2dvh, 18px) auto 0 !important;
  position: static !important;
  clear: both !important;
}

body.cm-playing .app-footer,
body.cm-reviewing .app-footer,
body.cm-gameover .app-footer,
body.chess-focus-mode .app-footer {
  display: none !important;
}

@media (min-width: 1181px) {
  .app-footer {
    width: 100% !important;
    max-width: calc(var(--board-width, 700px) + 356px) !important;
  }
}

@media (max-width: 620px) {
  .app-footer {
    width: calc(100% - 20px) !important;
    max-width: calc(100dvw - 20px) !important;
    margin-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

body > .app-footer {
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: min(1180px, calc(100% - 32px)) !important;
  margin: 18px auto max(18px, env(safe-area-inset-bottom, 0px)) !important;
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 620px) {
  body > .app-footer {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin-top: 12px !important;
  }
}

.google-rendered-slot {
  display: grid !important;
  place-items: center !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.google-rendered-slot > div,
.google-rendered-slot iframe {
  max-width: 100% !important;
}

.welcome-legal-links {
  margin: 10px auto 0;
  max-width: 360px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.welcome-legal-links a {
  color: var(--accent);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.public-home {
  width: min(1180px, calc(100% - 32px));
  margin: 16px auto 0;
  padding: clamp(20px, 2.5vw, 34px);
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent));
  border-radius: 28px;
  background:
    radial-gradient(circle at 86% 16%, rgba(192, 71, 63, 0.26), transparent 30%),
    radial-gradient(circle at 12% 88%, rgba(242, 236, 221, 0.08), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 88%, transparent));
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  position: relative;
}

.public-home::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(242,236,221,0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(242,236,221,0.035) 1px, transparent 1px);
  background-size: 62px 62px;
  opacity: 0.45;
  mask-image: radial-gradient(circle at 70% 48%, #000, transparent 70%);
  pointer-events: none;
}

.public-home::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -80px;
  top: -92px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 999px;
  opacity: 0.65;
  animation: cm-home-orbit 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cm-home-orbit {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.52; }
  50% { transform: translate3d(-18px, 18px, 0) scale(1.06); opacity: 0.85; }
}

.public-home-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  grid-template-areas:
    "kicker actions"
    "title actions"
    "copy actions"
    "points points";
  align-items: center;
  gap: 8px 22px;
  max-width: none;
}

.public-home-kicker {
  grid-area: kicker;
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.public-home h1 {
  grid-area: title;
  margin: 0;
  max-width: 560px;
  color: var(--text);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1;
  letter-spacing: 0;
}

.public-home-copy {
  grid-area: copy;
  margin: 6px 0 0;
  max-width: 650px;
  color: var(--muted);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.45;
}

.public-home-actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 0;
  min-width: min(360px, 34vw);
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(12px);
}

.public-home-primary,
.public-home-secondary,
.public-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;
}

.public-home-primary {
  gap: 8px;
  padding: 0 20px;
  background: linear-gradient(135deg, #cf5750, #9c2f2b);
  color: #fff;
  box-shadow: 0 14px 32px rgba(192, 71, 63, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.public-home-secondary {
  gap: 8px;
  padding: 0 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, white);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.public-home-link {
  padding: 0 14px;
  border: 1px solid transparent;
  color: var(--text);
  background: transparent;
  min-height: 34px;
  color: var(--muted);
}

.public-home-primary:hover,
.public-home-secondary:hover {
  transform: translateY(-2px);
}

.public-home-primary:hover {
  box-shadow: 0 18px 38px rgba(192, 71, 63, 0.34);
}

.public-home-secondary:hover {
  border-color: color-mix(in srgb, var(--accent) 88%, white);
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-2));
}

.public-home-points {
  grid-area: points;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.public-home-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.public-home-points li:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.public-home-points i {
  color: var(--accent);
  margin-top: 2px;
}

@media (max-width: 820px) {
  .public-home {
    width: min(100% - 20px, 680px);
    margin-top: 10px;
    padding: 26px 18px;
    border-radius: 18px;
  }

  .public-home-inner {
    display: block;
  }

  .public-home-actions,
  .public-home-primary,
  .public-home-secondary,
  .public-home-link {
    width: 100%;
  }

  .public-home-actions {
    margin-top: 18px;
  }

  .public-home-points {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1181px) {
  .masthead-row {
    display: grid !important;
    grid-template-columns: minmax(360px, auto) minmax(620px, 1fr) auto !important;
    align-items: center !important;
    gap: clamp(18px, 2vw, 34px) !important;
  }

  .app-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: end !important;
    gap: clamp(8px, 0.75vw, 14px) !important;
    min-width: 0 !important;
  }

  .app-nav .nav-button,
  .app-nav .nav-more-item {
    white-space: nowrap !important;
  }

  .nav-more-wrap {
    display: contents !important;
  }

  #btn-nav-more {
    display: none !important;
  }

  #nav-more-menu,
  #nav-more-menu[hidden] {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: clamp(8px, 1vw, 18px) !important;
  }

  .nav-more-item {
    min-height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--muted) !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
  }

  .nav-more-item i {
    display: none !important;
  }

  .nav-more-item:hover,
  .nav-more-item:focus-visible {
    color: var(--text) !important;
    outline: 0 !important;
  }

  .header-actions {
    margin-left: 0 !important;
  }
}

@media (min-width: 1181px) and (max-width: 1520px) {
  .masthead-row {
    grid-template-columns: minmax(300px, auto) minmax(520px, 1fr) auto !important;
  }

  .brand-copy strong {
    font-size: clamp(30px, 3.8vw, 54px) !important;
  }

  .app-nav {
    gap: 7px !important;
  }

  .nav-button,
  .nav-more-item {
    font-size: 11px !important;
  }
}

/* HOME + BOARD FLOW — keep the intro useful without pushing the game away */
.public-home {
  width: min(100% - clamp(28px, 5vw, 84px), 1500px) !important;
  margin: clamp(12px, 2vw, 26px) auto clamp(14px, 2vw, 24px) !important;
  padding: clamp(24px, 3vw, 42px) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(135deg, rgba(18, 14, 11, 0.96), rgba(42, 20, 17, 0.86)),
    radial-gradient(circle at 88% 15%, rgba(202, 72, 64, 0.18), transparent 30%) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32) !important;
  overflow: hidden !important;
}

.public-home::before {
  opacity: 0.42 !important;
}

.public-home::after {
  display: none !important;
}

.public-home-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px) !important;
  grid-template-areas:
    "kicker actions"
    "title actions"
    "copy actions"
    "points points" !important;
  align-items: center !important;
  gap: 10px clamp(26px, 4vw, 60px) !important;
  max-width: none !important;
}

.public-home-kicker {
  margin-bottom: 4px !important;
}

.public-home h1 {
  max-width: 720px !important;
  font-size: clamp(38px, 5vw, 72px) !important;
  line-height: 0.96 !important;
}

.public-home-copy {
  max-width: 760px !important;
  margin-top: 8px !important;
  font-size: clamp(15px, 1.3vw, 18px) !important;
  line-height: 1.5 !important;
}

.public-home-actions {
  gap: 12px !important;
  min-width: 0 !important;
  padding: 10px !important;
  border-radius: 24px !important;
  background: rgba(255, 246, 230, 0.045) !important;
}

.public-home-primary,
.public-home-secondary {
  min-height: 54px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
}

.public-home-link {
  min-height: 40px !important;
  border-radius: 14px !important;
  background: rgba(255, 246, 230, 0.035) !important;
}

.public-home-points {
  margin-top: 18px !important;
  gap: 12px !important;
}

.public-home-points li {
  min-height: 68px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: rgba(255, 246, 230, 0.035) !important;
}

.app-shell {
  padding-top: 0 !important;
}

.game-area {
  padding-top: clamp(10px, 1.6vw, 20px) !important;
}

@media (min-width: 1181px) {
  .public-home + .app-shell .game-area {
    padding-top: 0 !important;
  }
}

@media (max-width: 980px) {
  .public-home {
    width: min(100% - 20px, 760px) !important;
    margin-top: 10px !important;
    padding: 22px !important;
    border-radius: 20px !important;
  }

  .public-home-inner {
    display: block !important;
  }

  .public-home h1 {
    font-size: clamp(34px, 11vw, 48px) !important;
  }

  .public-home-copy {
    font-size: 15px !important;
  }

  .public-home-actions {
    margin-top: 18px !important;
  }

  .public-home-primary,
  .public-home-secondary,
  .public-home-link {
    width: 100% !important;
  }

  .public-home-points {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .public-home {
    padding: 18px !important;
  }

  .public-home h1 {
    font-size: clamp(31px, 10vw, 40px) !important;
  }

  .public-home-points {
    display: none !important;
  }
}