:root {
  --bg-1: #fff8e8;
  --bg-2: #ddf7df;
  --bg-3: #ddf0ff;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-strong: rgba(255, 255, 255, 0.92);
  --panel-soft: rgba(255, 255, 255, 0.5);
  --text: #24382b;
  --muted: rgba(36, 56, 43, 0.68);
  --dark: #1f3d2a;
  --ink: #24382b;
  --cell: #fffdf6;
  --cell-border: rgba(63, 125, 74, 0.18);
  --accent: #ffd166;
  --accent-2: #8fd694;
  --accent-3: #8ecae6;
  --danger: #ff8f7a;
  --warning: #ffc078;
  --success: #78d88c;
  --shadow: 0 22px 60px rgba(65, 91, 70, 0.18);
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;

  /* Semantic UI variables */
  --ui-border: #2e2e2e;
  --ui-shadow: #181818;
  --ui-action: #6b8dc6;
  /* undo, redo, flash, erase */
  --ui-accent: #ffd166;
  /* hint, current level, active choice */
  --ui-success: #a8e6a3;
  /* completed levels, active toggle */
  --ui-danger: #ff8f7a;
  /* reset progress */

  /* Stats Palette */
  --stat-timer: #e9b796;
  --stat-filled: #a8e6a3;
  --stat-moves: #9bd5ff;
  --stat-mistakes: #ffb3c6;
  --stat-hints: #ffd166;

  /* Panel Theme Variables */
  --panel-bg: var(--cell);
  --panel-text: var(--ink);

  /* Theme-aware controls */
  --button-bg: var(--cell);
  --button-bg-hover: #fff8ea;
  --button-text: #1a1a1a;
  --button-subtext: rgba(26, 26, 26, 0.72);
  --button-primary: var(--ui-accent);
  --button-primary-hover: var(--ui-accent);
  --button-primary-text: #1a1a1a;
  --button-primary-subtext: rgba(26, 26, 26, 0.72);
  --button-round: #e9b796;
  --button-icon-action: var(--ui-action);
  --button-icon-accent: var(--ui-accent);
  --button-icon-info: #e9b796;
  --button-muted-bg: #f5f5f5;
  --level-star: var(--ui-accent);
  --complete-badge: var(--ui-success);
  --htp-board-bg: linear-gradient(160deg, #f9f4e8 0%, #f0e9d6 100%);
  --htp-board-border: rgba(180, 155, 110, 0.5);
  --htp-board-shadow: 0 8px 0 #c8a86a, 0 12px 30px rgba(100, 70, 20, 0.22), inset 0 2px 5px rgba(255, 255, 255, 0.6);
  --htp-card-bg: var(--cell);
  --htp-title: #1a1a1a;
  --htp-desc: rgba(26, 26, 26, 0.78);
  --htp-rule-border: rgba(36, 56, 43, 0.08);
  --htp-dot-bg: rgba(36, 56, 43, 0.18);
  --daily-hover-bg: linear-gradient(135deg, rgba(255, 209, 102, 0.32), rgba(142, 202, 230, 0.28));
}

body[data-theme="cream"] {
  --bg-1: #fffaf0;
  --bg-2: #ffe8c7;
  --bg-3: #fff1d8;
  --accent: #ffbe5c;
  --accent-2: #f6a46c;
  --accent-3: #c9b6ff;
  --text: #3b2b23;
  --muted: rgba(59, 43, 35, 0.65);
  --ink: #3b2b23;
  --dark: #5a3826;
  --cell-border: rgba(90, 56, 38, 0.16);
  --shadow: 0 22px 60px rgba(115, 74, 38, 0.16);

  /* Semantic UI variables */
  --ui-border: #5a3826;
  /* Deep rich cocoa brown */
  --ui-shadow: #331e13;
  /* Espresso shadow */
  --ui-action: #c9b6ff;
  /* Cozy soft lavender */
  --ui-accent: #ffbe5c;
  /* Soft warm amber */
  --ui-success: #f6a46c;
  /* Soft peach/coral */
  --ui-danger: #e06b5c;
  /* Warm terracotta red */

  /* Stats Palette */
  --stat-timer: #f6a46c;
  --stat-filled: #ffe8c7;
  --stat-moves: #c9b6ff;
  --stat-mistakes: #e06b5c;
  --stat-hints: #ffbe5c;

  /* Panel Theme Variables */
  --panel-bg: var(--cell);
  --panel-text: var(--ink);

  /* Theme-aware controls */
  --cell: #fff7e8;
  --button-bg: #fff3dc;
  --button-bg-hover: #ffe7bd;
  --button-text: #2f2119;
  --button-subtext: rgba(47, 33, 25, 0.72);
  --button-primary: #ffbe5c;
  --button-primary-hover: #ffc974;
  --button-primary-text: #1a1a1a;
  --button-primary-subtext: rgba(26, 26, 26, 0.72);
  --button-round: #f6a46c;
  --button-icon-action: #c9b6ff;
  --button-icon-accent: #ffbe5c;
  --button-icon-info: #f6a46c;
  --button-muted-bg: #f4e4cf;
  --level-star: #ffbe5c;
  --complete-badge: #f6a46c;
  --htp-board-bg: linear-gradient(160deg, #fff4db 0%, #f6dfb7 100%);
  --htp-board-border: rgba(122, 74, 32, 0.42);
  --htp-board-shadow: 0 8px 0 #a9662c, 0 12px 30px rgba(96, 54, 20, 0.25), inset 0 2px 5px rgba(255, 246, 224, 0.78);
  --htp-card-bg: #fff3dc;
  --htp-title: #2f2119;
  --htp-desc: rgba(47, 33, 25, 0.76);
  --htp-rule-border: rgba(90, 56, 38, 0.13);
  --htp-dot-bg: rgba(90, 56, 38, 0.2);
  --daily-hover-bg: linear-gradient(135deg, rgba(255, 190, 92, 0.34), rgba(246, 164, 108, 0.28));
}

body[data-theme="night"] {
  --bg-1: #10251f;
  --bg-2: #17382f;
  --bg-3: #244e41;
  --panel: rgba(255, 255, 255, 0.12);
  --panel-strong: rgba(255, 255, 255, 0.18);
  --panel-soft: rgba(255, 255, 255, 0.08);
  --text: #f7fff8;
  --muted: rgba(247, 255, 248, 0.72);
  --dark: #10251f;
  --ink: #143126;
  --cell: rgba(255, 255, 255, 0.92);
  --cell-border: rgba(16, 39, 29, 0.18);
  --accent: #ffe18f;
  --accent-2: #9dffb1;
  --accent-3: #a7d7ff;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.3);

  /* Semantic UI variables */
  --ui-border: #143126;
  /* Deep forest ink border */
  --ui-shadow: #060e0c;
  /* Pitch black forest shadow */
  --ui-action: #a7d7ff;
  /* Glowing neon blue */
  --ui-accent: #ffe18f;
  /* Glowing soft gold */
  --ui-success: #9dffb1;
  /* Glowing neon mint */
  --ui-danger: #ff8f7a;
  /* Glowing neon coral red */

  /* Stats Palette */
  --stat-timer: #ffe18f;
  --stat-filled: #9dffb1;
  --stat-moves: #a7d7ff;
  --stat-mistakes: #ff8f7a;
  --stat-hints: #ffe18f;

  /* Panel Theme Variables */
  --panel-bg: #10251f;
  --panel-text: #f7fff8;

  /* Theme-aware controls */
  --button-bg: rgba(255, 255, 255, 0.13);
  --button-bg-hover: rgba(255, 255, 255, 0.2);
  --button-text: #f7fff8;
  --button-subtext: rgba(247, 255, 248, 0.72);
  --button-primary: #ffe18f;
  --button-primary-hover: #ffecaa;
  --button-primary-text: #1a1a1a;
  --button-primary-subtext: rgba(26, 26, 26, 0.72);
  --button-round: #ffe18f;
  --button-icon-action: #a7d7ff;
  --button-icon-accent: #ffe18f;
  --button-icon-info: #9dffb1;
  --button-muted-bg: rgba(255, 255, 255, 0.1);
  --level-star: #ffe18f;
  --complete-badge: #9dffb1;
  --htp-board-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  --htp-board-border: rgba(255, 255, 255, 0.2);
  --htp-board-shadow: 0 8px 0 #060e0c, 0 12px 30px rgba(0, 0, 0, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.08);
  --htp-card-bg: rgba(255, 255, 255, 0.12);
  --htp-title: var(--text);
  --htp-desc: rgba(247, 255, 248, 0.75);
  --htp-rule-border: rgba(255, 255, 255, 0.1);
  --htp-dot-bg: rgba(247, 255, 248, 0.28);
  --daily-hover-bg: linear-gradient(135deg, rgba(255, 225, 143, 0.2), rgba(167, 215, 255, 0.16));
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-body);
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

body {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 209, 102, 0.38), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(142, 202, 230, 0.36), transparent 26%),
    radial-gradient(circle at 60% 98%, rgba(143, 214, 148, 0.42), transparent 30%),
    linear-gradient(145deg, var(--bg-1), var(--bg-2) 54%, var(--bg-3));
}

/* --- Dynamic Theme PNG Backgrounds --- */
body[data-theme] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: var(--bg-1);
  /* Fallback color while image is loading */
}

body[data-theme="garden"] {
  background-image: url('assets/backgrounds/garden_landscape.png');
}

body[data-theme="cream"] {
  background-image: url('assets/backgrounds/cream_landscape.png');
}

body[data-theme="night"] {
  background-image: url('assets/backgrounds/night_landscape.png');
}

/* Portrait orientation overrides */
@media (orientation: portrait) {
  body[data-theme="garden"] {
    background-image: url('assets/backgrounds/garden_portrait.png');
  }

  body[data-theme="cream"] {
    background-image: url('assets/backgrounds/cream_portrait.png');
  }

  body[data-theme="night"] {
    background-image: url('assets/backgrounds/night_portrait.png');
  }
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

button {
  border: 0;
  border-radius: 18px;
  padding: 12px 14px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(63, 125, 74, 0.13);
  transition: transform 120ms ease, background 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

button:focus,
button:focus-visible {
  outline: none;
}

button:hover {
  transform: translateY(-1px);
  background: var(--panel-strong);
}

button:active {
  transform: translateY(1px) scale(0.99);
}

button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

button.primary,
.big-btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--ink);
  box-shadow: 0 14px 28px rgba(143, 214, 148, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 12px;
  font-size: clamp(54px, 10vw, 120px);
  letter-spacing: -0.07em;
  line-height: 0.86;
  text-wrap: balance;
  font-family: var(--font-display);
  font-weight: 800;
}

h2 {
  margin-bottom: 8px;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: -0.04em;
  line-height: 0.96;
  font-family: var(--font-display);
  font-weight: 700;
}

h3 {
  margin: 0 0 6px;
  font-size: clamp(18px, 2vw, 25px);
  font-family: var(--font-display);
  font-weight: 700;
}

p {
  line-height: 1.45;
}

.app {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1366px;
  height: 768px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  overflow: hidden;
  z-index: 10;
}

/* Allow panel backdrops to bleed outside the 16:9 box when a panel is open */
.app:has(#panelOverlay:not(.hidden)),
.app:has(#completeModal:not(.hidden)) {
  overflow: visible;
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hidden {
  display: none !important;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--dark);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

body[data-theme="night"] .eyebrow {
  color: var(--accent);
}

.muted {
  color: var(--muted);
}

/* Main menu */
.menu-screen {
  overflow: hidden;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
}

.menu-bg {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(63, 125, 74, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(63, 125, 74, 0.06) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at 52% 24%, black, transparent 72%);
}

.menu-topbar,
.menu-stage,
.game-topbar,
.play-layout,
.action-bar {
  width: min(1180px, 100%);
  margin: 0 auto;
  position: relative;
}

.menu-topbar {
  height: 68px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.game-topbar {
  height: 68px;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr);
  align-items: center;
  gap: 10px;
}

/* Settings button positioning is handled uniformly by .game-settings rules below */

.brand-mark,
.round-btn {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 18px;
}

.brand-mark {
  color: var(--ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-size: 24px;
  font-weight: 950;
  box-shadow: 0 10px 26px rgba(63, 125, 74, 0.16);
}

.brand-copy strong {
  display: block;
  font-size: 19px;
  line-height: 1;
}

.round-btn {
  padding: 0;
  width: 50px;
  height: 50px;
  border-radius: 50% !important;
  border: 2.5px solid var(--ui-border) !important;
  background-color: var(--button-round) !important;
  box-shadow: 0 3.5px 0 var(--ui-shadow), 0 4px 8px rgba(0, 0, 0, 0.3) !important;
  display: grid;
  place-items: center;
  transition: transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 120ms ease;
  cursor: pointer;
  font-size: 26px !important;
  font-weight: 850 !important;
  color: #1a1a1a !important;
  line-height: 1 !important;
}

.round-btn:hover {
  background-color: var(--button-round) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--ui-shadow), 0 6px 12px rgba(0, 0, 0, 0.4) !important;
}

.round-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ui-shadow), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.round-btn img {
  width: 52% !important;
  height: 52% !important;
  object-fit: contain;
  display: block;
  filter: brightness(0) !important;
  /* Pure black cog */
}

.round-btn svg {
  width: 48% !important;
  height: 48% !important;
  stroke: currentColor !important;
  stroke-width: 4px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  display: block;
}

.menu-stage {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.65fr);
  gap: 16px;
  align-items: stretch;
}

.hero-panel,
.menu-command-panel,
.action-bar,
.sheet-panel,
.modal-card {
  background: var(--panel);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.54);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.hero-panel {
  min-height: 0;
  border-radius: 34px;
  padding: clamp(18px, 3vw, 42px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.52fr);
  align-items: center;
  gap: 18px;
  overflow: hidden;
}

.hero-copy {
  max-width: 620px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(15px, 2vw, 20px);
}

.continue-card {
  display: grid;
  gap: 16px;
  padding: clamp(16px, 2.4vw, 24px);
  border-radius: 28px;
  background: var(--panel-strong);
  box-shadow: inset 0 0 0 1px rgba(63, 125, 74, 0.12);
}

.menu-preview {
  width: min(260px, 100%);
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
  padding: 10px;
  border-radius: 24px;
  background: rgba(63, 125, 74, 0.08);
  box-shadow: inset 0 0 0 1px rgba(63, 125, 74, 0.12);
}

.menu-preview span {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border-radius: 9px;
  color: var(--ink);
  font-weight: 950;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 0 0 1px rgba(36, 56, 43, 0.12);
}

.menu-preview .seed {
  background: #fff5cc;
}

.menu-preview .p1 {
  background: #a8e6a3;
}

.menu-preview .p2 {
  background: #9bd5ff;
}

.menu-preview .p3 {
  background: #ffe680;
}

.menu-preview .p4 {
  background: #ffb3c6;
}

.menu-preview .p5 {
  background: #cdb4db;
}

.menu-command-panel {
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 34px;
  padding: clamp(16px, 2vw, 24px);
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 12px;
}

.menu-actions {
  display: grid;
  gap: 10px;
}

.compact-actions {
  grid-template-columns: 1fr;
}

.trio-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.big-btn {
  min-height: 88px;
  display: grid;
  place-items: center;
  gap: 7px;
  text-align: center;
  border-radius: 24px !important;
  border: 2.2px solid var(--ui-border) !important;
  background-color: var(--button-bg) !important;
  color: var(--button-text) !important;
  font-weight: 950 !important;
  box-shadow: 0 4.5px 0 var(--ui-shadow), 0 6px 12px rgba(0, 0, 0, 0.15) !important;
  transition: transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 120ms ease;
  padding: 10px !important;
}

.big-btn:hover {
  background-color: var(--button-bg-hover) !important;
  transform: translateY(-2.5px) !important;
  box-shadow: 0 7px 0 var(--ui-shadow), 0 8px 16px rgba(0, 0, 0, 0.22) !important;
}

.big-btn:active {
  transform: translateY(2.5px) !important;
  box-shadow: 0 2px 0 var(--ui-shadow), 0 3px 6px rgba(0, 0, 0, 0.12) !important;
}

.big-btn small {
  font-size: 11px;
  opacity: 0.72;
  font-weight: 800;
  margin-top: -2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#playBtn {
  min-height: 146px;
  font-size: 26px;
  background-color: var(--button-primary) !important;
  color: var(--button-primary-text) !important;
  border: 2.6px solid var(--ui-border) !important;
  box-shadow: 0 5.5px 0 var(--ui-shadow), 0 8px 16px rgba(0, 0, 0, 0.22) !important;
  border-radius: 28px !important;
}

#playBtn:hover {
  background-color: var(--button-primary-hover) !important;
  transform: translateY(-2.5px) !important;
  box-shadow: 0 8px 0 var(--ui-shadow), 0 10px 20px rgba(0, 0, 0, 0.28) !important;
}

#playBtn:active {
  transform: translateY(2.5px) !important;
  box-shadow: 0 2px 0 var(--ui-shadow), 0 3px 6px rgba(0, 0, 0, 0.12) !important;
}

#playBtn small {
  font-size: 13px;
  font-weight: 850;
  opacity: 0.76;
}

.big-icon {
  width: 42px;
  height: 42px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50%;
  border: 2px solid var(--ui-border);
  box-shadow: 0 2px 0 var(--ui-shadow);
  font-size: 20px;
  background-color: var(--button-icon-action);
}

.big-icon img {
  width: 52% !important;
  height: 52% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Individual accent colors for the menu icon circles */
#playBtn .big-icon {
  background-color: var(--button-icon-action) !important;
}

#playBtn .big-icon img {
  filter: brightness(0) !important;
  transform: translateX(1.5px);
  width: 48% !important;
  height: 48% !important;
}

#dailyMenuBtn .big-icon {
  background-color: var(--button-icon-accent) !important;
}

#levelsMenuBtn .big-icon {
  background-color: var(--button-icon-action) !important;
}

#howToPlayBtn .big-icon {
  background-color: var(--button-icon-info) !important;
}

.menu-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Gameplay */
.game-screen {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

/* Unified height and layout are defined in the .menu-topbar, .game-topbar rule above */

.game-topbar .icon-only {
  grid-column: 1;
  grid-row: 1;
}

.game-title {
  grid-column: 1;
  grid-row: 1;
  margin-left: 60px;
}

.game-topbar .board-meta {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}

.game-topbar .top-stats {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  margin-right: 60px;
}

.menu-topbar .game-settings,
.game-topbar .game-settings {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  margin-left: 10px;
}

.game-topbar .top-stats+.game-settings {
  margin-right: 0;
}

.icon-only {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50% !important;
  border: 2.5px solid var(--ui-border) !important;
  background-color: var(--button-icon-action) !important;
  box-shadow: 0 3.5px 0 var(--ui-shadow), 0 4px 8px rgba(0, 0, 0, 0.3) !important;
  transition: transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 120ms ease;
  cursor: pointer;
}

.icon-only:hover {
  background-color: var(--button-icon-action) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--ui-shadow), 0 6px 12px rgba(0, 0, 0, 0.4) !important;
}

.icon-only:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ui-shadow), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.icon-only svg {
  width: 48% !important;
  height: 48% !important;
  stroke: #000000 !important;
  stroke-width: 3.5px !important;
  fill: none !important;
}

.game-title h2 {
  margin: 0;
  font-size: clamp(24px, 4vw, 40px);
}

.game-title .eyebrow {
  margin-bottom: 3px;
}

.top-stats,
.mini-stats {
  display: grid;
  gap: 10px;
}

.top-stats {
  grid-template-columns: repeat(2, minmax(78px, 1fr));
}

.stat,
.mini-stats>div {
  padding: 10px 12px;
  border-radius: 18px;
  text-align: center;
  border: 2px solid var(--ui-border) !important;
  box-shadow: 0 3.5px 0 var(--ui-shadow), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  box-sizing: border-box;
}

.timer-stat {
  background-color: var(--stat-timer) !important;
}

.filled-stat {
  background-color: var(--stat-filled) !important;
}

.moves-stat {
  background-color: var(--stat-moves) !important;
}

.mistakes-stat {
  background-color: var(--stat-mistakes) !important;
}

.hints-stat {
  background-color: var(--stat-hints) !important;
}

.stat strong,
.mini-stats strong {
  display: block;
  font-size: 19px;
  line-height: 1;
  color: #1a1a1a !important;
  font-weight: 950;
}

.stat span,
.mini-stats span {
  display: block;
  margin-top: 4px;
  color: rgba(26, 26, 26, 0.76) !important;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.play-layout {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.board-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
  justify-items: center;
  padding: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: visible;
}

.board-meta {
  width: auto;
  display: grid;
  grid-template-columns: minmax(0, auto);
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.mini-stats {
  grid-template-columns: repeat(3, minmax(70px, 1fr));
}

.board-frame {
  position: relative;
  /* Shrink-to-fit its content (the grid) */
  display: inline-block;
  border-radius: 24px;
  /* Cream/paper board frame — like the reference image */
  padding: 15px;
  /* Eşit boşluk */
  background: linear-gradient(160deg, #f9f4e8 0%, #f0e9d6 60%, #e8dfc8 100%);
  border: 3px solid rgba(180, 155, 110, 0.55);
  /* Deep 3D shadow: thick solid base + soft ambient */
  box-shadow:
    0 12px 0 #c8a86a,
    /* thick 3D bottom edge */
    0 18px 40px rgba(100, 70, 20, 0.32),
    /* ambient depth */
    inset 0 2px 6px rgba(255, 255, 255, 0.7),
    /* top inner highlight */
    inset 0 -3px 8px rgba(120, 90, 40, 0.15);
  /* bottom inner shadow */
  overflow: visible !important;
}

.grid {
  position: relative;
  /* width & height set by JS in px for perfectly square cells */
  display: grid;
  overflow: hidden;
  border-radius: 8px;
  /* Warm cream gap background — makes cell gaps visible like the reference */
  background: #e8e0cc;
  gap: 2px;
  /* No extra shadow — board-frame handles the 3D depth */
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.12);
  touch-action: none;
  box-sizing: border-box;
  padding: 2px;
}

/* Premium overlay border outline that sits on top of all children to prevent visual overflows */
.grid::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2.5px solid rgba(100, 75, 35, 0.45);
  border-radius: 8px;
  pointer-events: none;
  z-index: 100;
  box-sizing: border-box;
}

.cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: none;
  /* Warm parchment cell background like reference */
  background: linear-gradient(145deg, #fffdf6, #faf5e8);
  color: var(--ink);
  /* No border — gap between cells is handled by grid gap + grid background */
  box-shadow: none;
  cursor: crosshair;
  transition: background 140ms ease, filter 120ms ease;
  touch-action: none;
  user-select: none;
  border-radius: 4px;
}

.cell:hover {
  filter: brightness(0.97);
}

.cell.selected {
  /* Marker class only — no visual changes.
     Overlay (z-index 3) paints on top of cells; cell stays opaque until covered. */
}

.cell.filled {
  background: transparent !important;
  box-shadow: none !important;
  z-index: 2;
}

/* Placed Patch Overlays — premium pastel blocks like reference image */
.patch-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  /* Rounded, marshmallow-like corners matching the premium reference image */
  border-radius: 10px;
  /* Organic, dark green-gray border for high definition */
  border: 2.5px solid rgba(36, 56, 43, 0.42);
  box-shadow:
    inset 0 3.5px 6px rgba(255, 255, 255, 0.65), /* bright top inner bevel */
    inset 0 -3.5px 6px rgba(0, 0, 0, 0.08),      /* bottom inner shadow */
    0 4.5px 0 rgba(36, 56, 43, 0.16),            /* 3D solid edge base */
    0 6px 12px rgba(0, 0, 0, 0.1);               /* ambient soft drop shadow */
  box-sizing: border-box;
  overflow: hidden;
}

/* Active Drag Selection Overlay - single seamless element */
.selection-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 7;
  /* Translucent warm honey/amber selection */
  background-color: rgba(255, 209, 102, 0.82);
  /* Dashed border to clearly indicate drag/selection in progress */
  border: 2.5px dashed rgba(36, 56, 43, 0.65);
  border-radius: 10px;
  box-shadow:
    inset 0 3.5px 6px rgba(255, 255, 255, 0.5),
    inset 0 -2px 6px rgba(0, 0, 0, 0.08),
    0 4.5px 0 rgba(36, 56, 43, 0.12),
    0 6px 14px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  animation: selectionPulse 1.8s infinite ease-in-out;
  /* position/size animated via JS requestAnimationFrame — no CSS transition needed */
}

@keyframes selectionPulse {

  0%,
  100% {
    opacity: 0.95;
  }

  50% {
    opacity: 0.85;
  }
}

.erase-active .cell.filled {
  cursor: pointer;
}

.cell.good {
  animation: popCell 260ms ease;
}

.cell.bad {
  animation: shakeCell 360ms ease;
  background: rgba(255, 143, 122, 0.88) !important;
}

.cell.hint {
  animation: hintPulse 1200ms ease infinite;
  box-shadow: inset 0 0 0 3px rgba(255, 209, 102, 0.95), 0 0 0 2px rgba(255, 209, 102, 0.26);
}

.cell.erase-target {
  box-shadow: inset 0 0 0 3px rgba(255, 143, 122, 0.95);
}

.clue {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Always above the selection-overlay so seed numbers stay visible */
  z-index: 8;
  /* Dark forest green like reference, bold and clear */
  color: #1e3326;
  font-weight: bold;
  /* Native bold weight for Georgia, avoids synthetic bold distortion */
  /* Font scales with actual cell pixel size set by JS via --cell-size */
  font-size: clamp(12px, calc(var(--cell-size, 60px) * 0.44), 40px);
  /* Removed 3D emboss shadow for completely clean, flat look */
  text-shadow: none;
  pointer-events: none;
  font-family: var(--font-display), Georgia, serif;
  /* Elegant original Georgia Serif */
  line-height: 1;
  /* Prevents visual offset from inherited line-height */
  margin-top: -0.22em;
  /* Perfectly centers serif numbers like 3, 5, 9 vertically */
}



.drag-meter {
  position: absolute;
  z-index: 10;
  height: 34px;
  min-width: 34px;
  padding: 0 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #1e1e1e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  font-size: 13px;
  border: none;
  /* No solid borders */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Soft premium drop shadow */
  box-sizing: border-box;
  pointer-events: none;
  white-space: nowrap;
}

.drag-meter.good {
  background-color: rgba(168, 230, 163, 0.96) !important;
  color: #1c4e24 !important;
}

.drag-meter.bad {
  background-color: rgba(255, 143, 122, 0.96) !important;
  color: #5f1b12 !important;
}

.drag-meter.warn {
  background-color: rgba(255, 209, 102, 0.96) !important;
  color: #5a3c00 !important;
}


/* Night theme: dark wooden board frame */
body[data-theme="night"] .board-frame {
  background: linear-gradient(160deg, #1e3a30 0%, #162e24 60%, #0f1f19 100%);
  border-color: rgba(60, 120, 80, 0.45);
  box-shadow:
    0 12px 0 #060e0c,
    0 18px 40px rgba(0, 0, 0, 0.55),
    inset 0 2px 6px rgba(100, 200, 130, 0.12),
    inset 0 -3px 8px rgba(0, 0, 0, 0.3);
}

body[data-theme="night"] .grid {
  background: #060e0c;
}

body[data-theme="night"] .grid::after {
  border-color: rgba(60, 120, 80, 0.4);
}

body[data-theme="night"] .cell {
  background: linear-gradient(145deg, #132a22, #0d1e18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="night"] .cell:hover {
  background: linear-gradient(145deg, #1a392e, #11281f) !important;
}

body[data-theme="night"] .selection-overlay {
  background-color: rgba(167, 215, 255, 0.24);
  border-color: rgba(255, 244, 190, 0.98);
  border-style: solid;
  box-shadow:
    inset 0 0 0 2px rgba(6, 14, 12, 0.78),
    inset 0 3px 8px rgba(255, 255, 255, 0.32),
    0 0 0 2px rgba(167, 215, 255, 0.54),
    0 0 22px rgba(167, 215, 255, 0.62);
}

body[data-theme="night"] .cell.bad {
  background: rgba(255, 96, 116, 0.92) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255, 235, 220, 0.85),
    0 0 14px rgba(255, 96, 116, 0.58) !important;
  z-index: 9;
}

body[data-theme="night"] .patch-overlay {
  border-color: rgba(255, 244, 190, 0.62);
  box-shadow:
    inset 0 3.5px 6px rgba(255, 255, 255, 0.58),
    inset 0 -3.5px 6px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(157, 255, 177, 0.25),
    0 5px 14px rgba(0, 0, 0, 0.26);
  filter: saturate(1.05) brightness(1.04);
}

body[data-theme="night"] .clue {
  color: #ffe18f !important;
  /* Soft glowing gold */
  text-shadow:
    0 1.5px 3px rgba(0, 0, 0, 0.8),
    -1px -1px 0 #060e0c,
    1px -1px 0 #060e0c,
    -1px 1px 0 #060e0c,
    1px 1px 0 #060e0c !important;
}

/* Cream theme: warm amber wooden board frame */
body[data-theme="cream"] .board-frame {
  background: linear-gradient(160deg, #fdf5e0 0%, #f4e4c0 60%, #e8d4a8 100%);
  border-color: rgba(160, 110, 60, 0.55);
  box-shadow:
    0 12px 0 #7a4a20,
    0 18px 40px rgba(120, 70, 20, 0.32),
    inset 0 2px 6px rgba(255, 240, 200, 0.8),
    inset 0 -3px 8px rgba(100, 60, 20, 0.15);
}

body[data-theme="cream"] .grid {
  background: #d4c4a0;
}

.action-bar {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  min-height: 96px;
  display: grid;
  grid-template-columns: repeat(3, 72px);
  justify-content: center;
  gap: 18px;
  padding: 0;
  border-radius: 0;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  width: fit-content !important;
  max-width: 100%;
  margin: 0 auto;
}

.action-btn.circular-btn {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: auto !important;
  color: var(--text) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  /* Made extra bold for enhanced readability */
  transition: transform 100ms ease, opacity 100ms ease !important;
}

.action-btn.circular-btn:hover {
  transform: none !important;
  opacity: 0.95;
}

.action-btn.circular-btn:hover .circle-icon {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--ui-shadow), 0 6px 12px rgba(0, 0, 0, 0.4);
}

.action-btn.circular-btn:active .circle-icon {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ui-shadow), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.action-btn.circular-btn:disabled {
  opacity: 0.35 !important;
  transform: none !important;
}

.action-btn.circular-btn:disabled .circle-icon {
  transform: none !important;
  box-shadow: 0 2px 0 var(--ui-shadow) !important;
}

.circle-icon {
  position: relative;
  width: clamp(44px, 8vw, 56px);
  height: clamp(44px, 8vw, 56px);
  border-radius: 50%;
  border: 2.5px solid var(--ui-border);
  box-shadow: 0 3.5px 0 var(--ui-shadow), 0 4px 8px rgba(0, 0, 0, 0.3);
  display: grid;
  place-items: center;
  transition: transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 120ms ease;
  background-color: var(--ui-action);
  /* Default Blue */
}

/* Specific background colors matching the theme */
.action-btn.undo .circle-icon,
.action-btn.flash .circle-icon,
.action-btn.erase .circle-icon {
  background-color: var(--ui-action) !important;
}

.action-btn.hint .circle-icon {
  background-color: var(--stat-hints) !important;
}

.action-btn.hint.ad-hint .circle-icon {
  background: linear-gradient(135deg, #b16cff, #ffd166) !important;
}

.action-btn.hint.ad-hint .btn-badge {
  width: 24px;
  border-radius: 999px;
  font-size: 8px;
}

/* Center SVGs/images inside circle */
.circle-icon img {
  width: 52%;
  height: 52%;
  object-fit: contain;
  display: block;
  filter: brightness(0);
  /* Pure black stroke */
}

/* Badge for Kontrol / Hint button */
.btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background-color: var(--button-icon-action);
  border: 2px solid var(--ui-border);
  border-radius: 50%;
  color: #1e1e1e;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Erase Active State */
.action-btn.erase.active .circle-icon {
  border-color: #ffd166;
  box-shadow: 0 3.5px 0 var(--ui-shadow), 0 0 10px rgba(255, 209, 102, 0.4);
}

/* Panels */
.panel-overlay,
.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100vw / var(--app-scale, 1));
  height: calc(100dvh / var(--app-scale, 1));
  transform: translate(-50%, -50%);
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(36, 56, 43, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.panel-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.panel-backdrop:hover {
  transform: none;
  background: transparent;
}

.sheet-panel,
.modal-card {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: min(100%, 690px);
  border-radius: 32px !important;
  padding: clamp(18px, 3vw, 28px);
  overflow: hidden;
  background-color: var(--panel-bg) !important;
  /* Premium theme-specific background */
  border: 3.5px solid var(--ui-border) !important;
  /* Thick solid outer border */
  box-shadow: 0 12px 0 var(--ui-shadow), 0 20px 40px rgba(0, 0, 0, 0.35) !important;
  /* Robust 3D bottom shadow */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-sizing: border-box;
  color: var(--panel-text) !important;
}

.levels-sheet {
  width: min(760px, 100%);
}

.panel-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.panel-header h2 {
  margin-bottom: 0;
  color: var(--panel-text) !important;
}

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

.toggle-btn,
.wide-setting,
.theme-choice {
  min-height: 68px;
  display: grid;
  align-content: center;
  gap: 6px;
  text-align: left;
  background-color: var(--button-bg) !important;
  border-radius: 20px !important;
  border: 2px solid var(--ui-border) !important;
  box-shadow: 0 4px 0 var(--ui-shadow), 0 6px 12px rgba(0, 0, 0, 0.08) !important;
  transition: transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 120ms ease;
  padding: 12px 16px !important;
  color: var(--button-text) !important;
}

.toggle-btn:hover,
.wide-setting:hover,
.theme-choice:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--ui-shadow), 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

.toggle-btn:active,
.wide-setting:active,
.theme-choice:active {
  transform: translateY(2px);
  box-shadow: 0 1.5px 0 var(--ui-shadow), 0 3px 6px rgba(0, 0, 0, 0.05) !important;
}

.toggle-btn span,
.wide-setting span {
  color: var(--button-subtext) !important;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.toggle-btn strong,
.wide-setting strong {
  font-size: 20px;
  font-weight: 950;
}

.toggle-btn.off {
  background-color: var(--button-muted-bg) !important;
  opacity: 0.75;
}

.toggle-btn:not(.off) {
  background-color: var(--ui-success) !important;
  color: var(--button-primary-text) !important;
  /* Premium light green when ON */
}

.toggle-btn:not(.off) span,
.toggle-btn:not(.off) strong,
.theme-choice.active,
.track-choice.active,
.wide-setting.active {
  color: var(--button-primary-text) !important;
}

.toggle-btn:not(.off) span,
.wide-setting.active span {
  color: var(--button-primary-subtext) !important;
}

.panel-block {
  margin-top: 16px;
}

.small-label {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.theme-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.theme-choice {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 58px !important;
  font-weight: 900 !important;
  font-size: 14px !important;
}

.theme-choice.active {
  background-color: var(--ui-accent) !important;
  /* Rich highlight when active */
  box-shadow: 0 4px 0 var(--ui-shadow), 0 6px 12px rgba(0, 0, 0, 0.12) !important;
}

.theme-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  border: 1.8px solid var(--ui-border) !important;
  box-shadow: 0 1.5px 0 var(--ui-shadow);
  flex-shrink: 0 !important;
}

.garden-dot {
  background: linear-gradient(135deg, #8fd694, #8ecae6);
}

.cream-dot {
  background: linear-gradient(135deg, #ffbe5c, #ffe8c7);
}

.night-dot {
  background: linear-gradient(135deg, #10251f, #9dffb1);
}

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

.track-choice {
  min-height: 48px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  background-color: var(--button-bg) !important;
  border-radius: 16px !important;
  border: 2px solid var(--ui-border) !important;
  box-shadow: 0 4px 0 var(--ui-shadow), 0 6px 12px rgba(0, 0, 0, 0.08) !important;
  transition: transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 120ms ease;
  padding: 6px 4px !important;
  color: var(--button-text) !important;
}

.track-choice:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 var(--ui-shadow), 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

.track-choice:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1.5px 0 var(--ui-shadow), 0 3px 6px rgba(0, 0, 0, 0.05) !important;
}

.track-choice.active {
  background-color: var(--ui-accent) !important;
  box-shadow: 0 4px 0 var(--ui-shadow), 0 6px 12px rgba(0, 0, 0, 0.12) !important;
}

.wide-setting {
  width: 100%;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-top: 12px;
  padding: 12px 18px !important;
}

.wide-setting.active {
  background-color: var(--ui-accent) !important;
  color: var(--button-primary-text) !important;
  /* Premium Amber Yellow when reduced motion is on */
}

.settings-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.danger-zone {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 2.5px dashed var(--ui-border);
}

.danger-outline {
  width: 100%;
  min-height: 52px;
  border-radius: 20px !important;
  border: 2.2px solid var(--ui-border) !important;
  background-color: var(--ui-danger) !important;
  /* Premium soft red/pink */
  color: #1a1a1a !important;
  font-weight: 950 !important;
  font-size: 15px !important;
  box-shadow: 0 4px 0 var(--ui-shadow), 0 6px 12px rgba(0, 0, 0, 0.1) !important;
  transition: transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 120ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.danger-outline:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 var(--ui-shadow), 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

.danger-outline:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1.5px 0 var(--ui-shadow), 0 3px 6px rgba(0, 0, 0, 0.05) !important;
}

.pack-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.pack-tab {
  min-height: 54px;
  padding: 8px;
  border-radius: 16px;
  font-size: 12px;
}

.pack-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--ink);
}

.pack-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.levels-progress-chip {
  display: inline-block;
  font-size: 18px;
  font-weight: 750;
  color: var(--muted) !important;
  /* Soft, elegant muted text */
  margin-left: 10px;
  vertical-align: middle;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: var(--font-body);
}

.level-select {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-auto-rows: minmax(62px, 1fr);
  gap: 10px;
  max-height: min(360px, 45vh);
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: -16px;
  padding-right: 16px;
  padding-bottom: 30px;
  -webkit-overflow-scrolling: touch;
}

/* Premium theme-aware custom scrollbar for level select grid */
.level-select::-webkit-scrollbar {
  width: 8px;
}
.level-select::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 99px;
}
.level-select::-webkit-scrollbar-thumb {
  background-color: var(--ui-border);
  border-radius: 99px;
  border: 1px solid var(--panel-bg);
}
.level-select::-webkit-scrollbar-thumb:hover {
  background-color: var(--muted);
}

.level-button {
  position: relative;
  min-height: 62px;
  border-radius: 16px !important;
  border: 2px solid var(--ui-border) !important;
  background-color: var(--button-bg) !important;
  color: var(--button-text) !important;
  box-shadow: 0 3px 0 var(--ui-shadow), 0 4px 6px rgba(0, 0, 0, 0.06) !important;
  transition: transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 120ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px !important;
}

.level-stars {
  font-size: 11px;
  color: var(--level-star);
  line-height: 1;
  margin-top: 1px;
  margin-bottom: 3px;
  letter-spacing: 0.5px;
  text-shadow: 0.5px 0.5px 0 var(--ui-shadow);
}

.level-time {
  font-size: 10.5px;
  font-weight: 850;
  color: rgba(26, 26, 26, 0.76) !important;
  line-height: 1;
}

.level-button:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--ui-shadow), 0 6px 10px rgba(0, 0, 0, 0.12) !important;
}

.level-button:not(:disabled):active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ui-shadow), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

.level-button.completed {
  background-color: var(--ui-success) !important;
  /* Premium light green */
}

.level-button.completed::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: var(--ui-border) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 65%;
  background-position: center;
  background-repeat: no-repeat;
}

.level-button.current {
  background-color: var(--ui-accent) !important;
  /* Premium Amber Yellow */
}

.level-button.current .level-stars {
  color: var(--ink) !important;
  text-shadow: none !important;
}

.level-button:disabled {
  opacity: 0.52 !important;
  background-color: var(--button-muted-bg) !important;
  border-color: #a0a0a0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-theme="night"] .levels-sheet .level-button {
  color: #1a1a1a !important;
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(16, 39, 29, 0.18) !important;
  box-shadow: 0 3px 0 rgba(8, 22, 16, 0.55), 0 4px 6px rgba(0, 0, 0, 0.14) !important;
}

body[data-theme="night"] .levels-sheet .level-button.current {
  background-color: var(--ui-accent) !important;
}

body[data-theme="night"] .levels-sheet .level-button.completed {
  background-color: var(--ui-success) !important;
}

body[data-theme="night"] .levels-sheet .level-button small {
  color: rgba(20, 49, 38, 0.72) !important;
}

body[data-theme="night"] .levels-sheet .level-button.current,
body[data-theme="night"] .levels-sheet .level-button.completed {
  color: #1a1a1a !important;
}

body[data-theme="night"] .levels-sheet .level-button.current small,
body[data-theme="night"] .levels-sheet .level-button.completed small {
  color: rgba(36, 56, 43, 0.72) !important;
}

body[data-theme="night"] .levels-sheet .level-button:disabled {
  opacity: 0.9 !important;
}

body[data-theme="night"] .levels-sheet .level-button:disabled small {
  color: rgba(20, 49, 38, 0.6) !important;
}

.level-button:disabled::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  inset: auto 7px 6px auto;
  opacity: 0.75;
  background-image: url('assets/lock.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

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

.rule {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px !important;
  border-radius: 20px !important;
  background-color: var(--button-bg) !important;
  border: 2px solid var(--ui-border) !important;
  box-shadow: 0 4px 0 var(--ui-shadow), 0 6px 12px rgba(0, 0, 0, 0.05) !important;
}

.rule strong {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ui-accent) !important;
  /* Premium Amber Yellow */
  color: var(--button-primary-text) !important;
  font-weight: 950 !important;
  font-size: 16px !important;
  border: 2px solid var(--ui-border) !important;
  box-shadow: 0 2px 0 var(--ui-shadow) !important;
}

.rule span {
  font-size: 13px !important;
  font-weight: 750 !important;
  color: var(--button-text) !important;
  line-height: 1.35 !important;
}

/* ===== How To Play Carousel ===== */
.htp-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.htp-carousel {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.htp-slide {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 20px 4px 16px;
  animation: htpFadeIn 280ms ease;
}

.htp-slide.active {
  display: grid;
}

@keyframes htpFadeIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes htpFadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.htp-slide.slide-left {
  animation: htpFadeInLeft 280ms ease;
}

/* Visual side */
.htp-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.htp-board {
  width: min(180px, 100%);
  height: min(180px, 100%);
  border-radius: 18px;
  background: var(--htp-board-bg);
  border: 2.5px solid var(--htp-board-border);
  box-shadow: var(--htp-board-shadow);
  padding: 8px;
  overflow: visible;
}

/* HTML cell values embedded in SVGs via foreignObject for pixel-perfect crispness matching the main page font */
.htp-cell-value {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display), Georgia, serif;
  /* Styled with the elegant gameplay cell Georgia Serif font */
  font-weight: bold;
  /* Flat, clean bold weight */
  font-size: 14px;
  color: var(--ink);
  line-height: 1;
  text-align: center;
  user-select: none;
  pointer-events: none;
}

.htp-clue-value {
  font-size: 16px;
}

.htp-p-value {
  font-size: 13px;
}

/* Clue card grid (slide 3) */
.htp-clues-demo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: min(200px, 100%);
}

.htp-clue-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 16px;
  background: var(--htp-card-bg);
  border: 2px solid var(--ui-border);
  box-shadow: 0 3px 0 var(--ui-shadow), 0 4px 10px rgba(0, 0, 0, 0.08);
}

.htp-clue-svg {
  width: 52px;
  height: 52px;
}

.htp-clue-label {
  font-size: 11px;
  font-weight: 950;
  color: var(--htp-title);
  letter-spacing: 0.02em;
}

.htp-clue-sub {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* Text side */
.htp-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.htp-step {
  margin: 0;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.htp-title {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 900;
  color: var(--htp-title);
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.htp-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--htp-desc);
  font-weight: 750;
}

.htp-desc strong {
  color: var(--htp-title);
  font-weight: 950;
}

/* Navigation */
.htp-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0 4px;
  border-top: 1.5px solid var(--htp-rule-border);
  margin-top: 4px;
}

.htp-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  border: 2px solid var(--ui-border) !important;
  background-color: var(--button-bg) !important;
  box-shadow: 0 3px 0 var(--ui-shadow) !important;
  display: grid;
  place-items: center;
  padding: 0 !important;
  transition: transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 120ms ease;
}

.htp-arrow:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 0 var(--ui-shadow) !important;
}

.htp-arrow:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1.5px 0 var(--ui-shadow) !important;
}

.htp-arrow svg {
  width: 18px;
  height: 18px;
  stroke: var(--button-text);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.htp-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.htp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50% !important;
  border: none !important;
  background-color: var(--htp-dot-bg) !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: background-color 200ms ease, transform 200ms ease, width 200ms ease;
}

.htp-dot.active {
  background-color: var(--ui-accent) !important;
  border: 1.5px solid var(--ui-border) !important;
  width: 22px;
  border-radius: 4px !important;
}

body[data-theme="night"] .htp-dot.active {
  background-color: var(--accent) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22) !important;
}


.cell[data-shape]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(36, 56, 43, 0.28);
  background: rgba(255, 255, 255, 0.48);
  z-index: 0;
  transition: border 140ms ease, background 140ms ease;
  pointer-events: none;
}

.cell[data-shape="square"]::before {
  width: 72%;
  height: 72%;
  border-radius: 6px;
}

.cell[data-shape="wide"]::before {
  width: 86%;
  height: 52%;
  border-radius: 5px;
}

.cell[data-shape="tall"]::before {
  width: 52%;
  height: 86%;
  border-radius: 5px;
}

.cell[data-shape="any"]::before {
  width: 82%;
  height: 48%;
  border-radius: 5px;
}

.cell[data-shape="any"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(36, 56, 43, 0.28);
  background: rgba(255, 255, 255, 0.48);
  z-index: 0;
  width: 48%;
  height: 82%;
  border-radius: 5px;
  transition: border 140ms ease, background 140ms ease;
  pointer-events: none;
}

.cell.filled::before,
.cell.filled::after {
  display: none !important;
}

/* Night theme variables adapt */
body[data-theme="night"] .cell[data-shape]::before,
body[data-theme="night"] .cell[data-shape]::after {
  border-color: rgba(247, 255, 248, 0.32);
  background: rgba(255, 255, 255, 0.08);
}

/* Complete modal */
.modal {
  z-index: 30;
}

.modal-card {
  width: min(520px, 100%);
  text-align: center;
}

.modal-card p {
  color: var(--muted);
}

.complete-stars {
  margin: 2px auto 10px;
  color: var(--accent);
  font-size: clamp(28px, 8vw, 44px);
  letter-spacing: 0.08em;
  text-shadow: 0 8px 26px rgba(255, 209, 102, 0.24);
}

.complete-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  margin-top: 12px;
}

.complete-badges span {
  display: inline-grid;
  place-items: center;
  min-height: 32px;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background-color: var(--complete-badge) !important;
  color: #1a1a1a !important;
  /* Bold black text */
  font-size: 12px !important;
  font-weight: 950 !important;
  border: 2px solid var(--ui-border) !important;
  box-shadow: 0 3px 0 var(--ui-shadow) !important;
}

/* Complete modal stats cards */
#completeEyebrow {
  font-size: 18px !important;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}

.complete-stats-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 18px auto 8px;
  width: 100%;
  max-width: 440px;
}

.complete-stat-card {
  flex: 1;
  min-height: 94px;
  border-radius: 20px !important;
  border: 2.2px solid var(--ui-border) !important;
  box-shadow: 0 4.5px 0 var(--ui-shadow), 0 6px 12px rgba(0, 0, 0, 0.1) !important;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.complete-stat-card .stat-card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 850;
  color: rgba(26, 26, 26, 0.8) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.complete-stat-card .stat-card-title .stat-icon {
  width: 14px;
  height: 14px;
  stroke-width: 3px;
  display: inline-block;
  color: rgba(26, 26, 26, 0.8) !important;
}

.complete-stat-card strong {
  display: block;
  font-size: 26px;
  font-weight: 950;
  color: #1a1a1a !important;
  line-height: 1;
}

.complete-time-card {
  background-color: var(--stat-timer) !important;
}

.complete-moves-card {
  background-color: var(--stat-moves) !important;
}

.complete-mistakes-card {
  background-color: var(--stat-mistakes) !important;
}

/* Horizontal buttons layout */
.modal-actions.horizontal-layout {
  display: flex;
  flex-direction: row !important;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.modal-actions.horizontal-layout button {
  flex: 1;
  max-width: 170px !important;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.modal-actions button {
  flex: 1;
  max-width: 160px;
  min-height: 54px;
  border-radius: 20px !important;
  border: 2.2px solid var(--ui-border) !important;
  background-color: var(--button-bg) !important;
  color: var(--button-text) !important;
  font-weight: 950 !important;
  font-size: 15px !important;
  box-shadow: 0 4px 0 var(--ui-shadow), 0 6px 12px rgba(0, 0, 0, 0.15) !important;
  transition: transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 120ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px !important;
}

.modal-actions button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 var(--ui-shadow), 0 8px 16px rgba(0, 0, 0, 0.22) !important;
}

.modal-actions button:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1.5px 0 var(--ui-shadow), 0 3px 6px rgba(0, 0, 0, 0.12) !important;
}

.modal-actions button.primary {
  background-color: var(--button-primary) !important;
  color: var(--button-primary-text) !important;
}

.modal-actions button .btn-icon-left,
.modal-actions button .btn-icon-right {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0);
  flex-shrink: 0;
  display: block;
}

body[data-theme="night"] .modal-actions button:not(.primary) .btn-icon-left,
body[data-theme="night"] .modal-actions button:not(.primary) .btn-icon-right {
  filter: brightness(0) invert(1);
}

body[data-theme="night"] .modal-actions button.primary {
  color: #10251f !important;
}

body[data-theme="night"] .modal-actions button.primary .btn-icon-left,
body[data-theme="night"] .modal-actions button.primary .btn-icon-right {
  filter: brightness(0);
}

@keyframes popCell {
  0% {
    transform: scale(0.92);
  }

  70% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes shakeCell {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-3px);
  }

  75% {
    transform: translateX(3px);
  }
}

@keyframes hintPulse {

  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.18);
  }
}

@media (max-width: 920px) {
  .menu-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .hero-panel {
    grid-template-columns: 1fr auto;
  }

  .menu-command-panel {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto auto;
  }

  #playBtn {
    min-height: 98px;
  }

  .compact-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .menu-meta {
    grid-column: 1 / -1;
  }

  .big-btn {
    min-height: 78px;
  }

  .play-hero {
    max-width: 100%;
    justify-self: stretch;
  }

  .refreshed-menu .menu-command-panel {
    grid-column: auto;
    justify-self: center;
  }
}

@media (orientation: portrait) {

  .panel-overlay,
  .modal {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }

  .menu-screen {
    gap: 10px;
  }

  .menu-topbar {
    height: 52px;
  }

  .game-topbar {
    height: auto;
  }

  .brand-mark,
  .round-btn,
  .icon-only {
    width: 46px;
    height: 46px;
    border-radius: 16px;
  }

  .menu-stage {
    grid-template-rows: 1fr;
    place-items: center;
  }

  .hero-panel {
    grid-template-columns: 1fr;
    padding: 18px;
    align-content: center;
  }

  .continue-card {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .menu-preview {
    width: min(132px, 30vw);
    padding: 6px;
    border-radius: 18px;
    gap: 3px;
  }

  h1 {
    font-size: clamp(48px, 18vw, 90px);
  }

  .hero-copy {
    font-size: 15px;
  }

  .menu-command-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-self: center;
    padding: 12px;
    border-radius: 26px;
  }

  .play-hero {
    max-width: 100%;
    justify-self: stretch;
  }

  .refreshed-menu .menu-command-panel {
    grid-column: auto;
    justify-self: center;
    width: min(360px, 100%);
  }

  #playBtn {
    min-height: 82px;
  }

  .compact-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .big-btn {
    min-height: 68px;
    padding: 9px 6px;
    border-radius: 18px;
    font-size: 12px;
  }

  .big-icon {
    width: 31px;
    height: 31px;
    font-size: 17px;
  }

  .chip {
    min-height: 28px;
    padding: 6px 8px;
    font-size: 9px;
  }

  .game-screen {
    gap: 8px;
  }

  .menu-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .game-topbar {
    grid-template-columns: auto 1fr auto auto;
    grid-template-rows: 52px auto;
    gap: 7px;
  }

  .menu-topbar .game-settings,
  .game-topbar .game-settings {
    grid-column: 4;
    grid-row: 1;
    margin-left: 0;
  }

  .game-topbar .icon-only {
    grid-column: 1;
    grid-row: 1;
  }

  .game-title {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
  }

  .game-topbar .top-stats {
    grid-column: 3;
    grid-row: 1;
    margin-right: 0;
  }

  .game-title .eyebrow {
    display: none;
  }

  .game-title h2 {
    font-size: clamp(21px, 6vw, 31px);
  }

  .top-stats {
    grid-template-columns: repeat(2, minmax(56px, 1fr));
  }

  .stat {
    padding: 7px 8px;
    border-radius: 14px;
  }

  .stat strong {
    font-size: 14px;
  }

  .stat span {
    font-size: 9px;
  }

  .play-layout {
    align-items: center;
  }

  .board-card {
    padding: 0;
    align-content: center;
  }

  .game-topbar .board-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-self: stretch;
  }

  .board-meta {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
  }

  .mini-stats {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }

  .mini-stats>div {
    padding: 7px 8px;
    border-radius: 14px;
  }

  .mini-stats strong {
    font-size: 14px;
  }

  .board-frame {
    align-self: center;
    padding: 10px;
    border-radius: 16px;
  }


  .action-bar {
    min-height: 67px;
    grid-template-columns: repeat(3, 62px);
    gap: 12px;
    padding: 6px;
    border-radius: 20px;
  }

  .action-btn {
    min-height: 55px;
    padding: 7px 3px;
    border-radius: 15px;
    font-size: 10px;
  }

  .action-btn .circle-icon {
    width: 42px;
    height: 42px;
  }

  .drag-meter {
    top: auto;
    right: auto;
    min-width: 38px;
    padding: 7px 9px;
    font-size: 12px;
  }

  .level-select {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(48px, 1fr);
    max-height: min(320px, 50vh);
  }

  .pack-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rules-grid {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-actions button {
    max-width: none;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .menu-screen {
    gap: 8px;
  }

  .menu-topbar,
  .game-topbar {
    height: 42px;
  }

  .brand-mark,
  .round-btn,
  .icon-only {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .brand-copy .eyebrow {
    display: none;
  }

  h1 {
    font-size: clamp(44px, 10vw, 82px);
  }

  .hero-panel {
    padding: 16px;
  }

  .menu-preview {
    width: 170px;
  }

  #playBtn {
    min-height: 84px;
  }

  .big-btn {
    min-height: 58px;
  }

  .big-icon {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  .game-screen {
    gap: 6px;
  }

  .game-title h2 {
    font-size: 24px;
  }

  .stat {
    padding: 6px 8px;
  }

  .board-card {
    padding: 0;
  }

  .mini-stats>div {
    padding: 6px 8px;
  }

  .board-container {
    inline-size: 100%;
    padding: 0;
    border-radius: 18px;
  }

  .action-bar {
    min-height: 54px;
    grid-template-columns: repeat(3, 56px);
    padding: 5px;
    gap: 10px;
    border-radius: 18px;
  }

  .action-btn {
    min-height: 44px;
    padding: 5px;
    border-radius: 14px;
    font-size: 9px;
  }

  .action-btn .circle-icon {
    width: 38px;
    height: 38px;
  }

  .sheet-panel {
    max-height: 96dvh;
    padding: 16px;
  }

  .level-select {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: 43px;
    gap: 7px;
    max-height: min(280px, 45vh);
  }

  .level-button {
    min-height: 43px;
  }
}

/* --- Square board fix: keeps container size restricted but allows board-frame to shrink-wrap --- */
.board-container {
  --board-size: min(73vmin, 780px);
  --board-aspect: 1 / 1;
  inline-size: var(--board-size);
  block-size: auto;
  width: var(--board-size);
  height: auto;
  aspect-ratio: var(--board-aspect);
  max-inline-size: 100%;
  max-block-size: none;
  max-width: 100%;
  max-height: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (orientation: portrait) {
  .board-container {
    --board-size: min(94vw, 780px);
  }
}

@media (orientation: landscape) {
  .play-layout {
    place-items: center;
  }

  .board-card {
    align-content: center;
  }

  .board-container {
    --board-size: min(100%, 556px);
    max-inline-size: 100%;
    max-block-size: none;
    max-width: 100%;
    max-height: none;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .board-container {
    --board-size: min(100%, 624px);
    border-radius: 18px;
  }
}

/* Improvement pass: clearer main menu, visible level packs, stronger progression UI. */
.refreshed-menu {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
}

.play-hero {
  grid-template-columns: minmax(0, 0.92fr) minmax(270px, 0.62fr);
  position: relative;
  max-width: 860px;
  justify-self: end;
  display: none;
}

.play-hero .hero-text h1 {
  display: none;
}

.refreshed-menu .menu-command-panel {
  grid-column: auto;
  width: min(480px, 100%);
  justify-self: center;
}

.menu-title-block {
  text-align: center;
  height: 52px;
  /* Fixed height to preserve exact spacing and button positions */
  position: relative;
  top: -125px;
  /* Shifting visually upwards */
}

.menu-title-block .eyebrow {
  margin-bottom: 2px !important;
  font-size: 14px !important;
  /* Larger eyebrow font size */
  letter-spacing: 0.18em !important;
  color: var(--dark) !important;
}

body[data-theme="night"] .menu-title-block .eyebrow {
  color: var(--accent) !important;
}

.menu-title-block h1 {
  font-size: 58px !important;
  /* Larger title font size */
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  line-height: 0.95 !important;
  margin-bottom: 0 !important;
}

@media (orientation: portrait) {
  .menu-title-block {
    top: -85px;
    /* Slightly smaller upward shift for portrait layouts */
    height: 44px;
  }

  .menu-title-block .eyebrow {
    font-size: 12px !important;
  }

  .menu-title-block h1 {
    font-size: 48px !important;
  }
}

.play-hero::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -70px;
  bottom: -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 209, 102, 0.34), transparent 68%);
  pointer-events: none;
}

.play-card {
  position: relative;
  z-index: 1;
  min-height: 420px;
  align-content: start;
  grid-template-rows: auto auto auto 1fr;
  gap: 14px;
}

.continue-main h2 {
  margin-bottom: 10px;
  font-size: clamp(31px, 4.4vw, 52px);
}

.continue-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.strong-chip {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--ink);
}

.progress-track {
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-soft);
  box-shadow: inset 0 0 0 1px rgba(36, 56, 43, 0.08);
}

.progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--accent-3));
  transition: width 320ms ease;
}

.play-card .menu-preview {
  width: min(310px, 100%);
  justify-self: center;
  align-self: end;
  animation: previewFloat 4.8s ease-in-out infinite;
}

.play-card .menu-preview span {
  animation: previewGrow 3.6s ease-in-out infinite;
}

.play-card .menu-preview span:nth-child(2n) {
  animation-delay: 160ms;
}

.play-card .menu-preview span:nth-child(3n) {
  animation-delay: 300ms;
}

.play-card .menu-preview span:nth-child(5n) {
  animation-delay: 460ms;
}

.action-stack {
  grid-template-rows: auto auto auto auto;
  align-content: stretch;
}

.play-now {
  min-height: 174px !important;
  font-size: 42px;
  letter-spacing: -0.02em;
}

.play-now small {
  font-size: 15px !important;
  opacity: 0.85;
  font-weight: 800;
  margin-top: 2px;
}

.play-now .big-icon {
  width: 50px;
  height: 50px;
  font-size: 25px;
  box-shadow: 0 10px 20px rgba(36, 56, 43, 0.12);
}

.daily-card-button {
  min-height: 86px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--panel-strong);
}

.daily-card-button:hover {
  background: var(--daily-hover-bg);
}

.daily-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: var(--ink);
  font-size: 23px;
}

.daily-copy strong,
.daily-copy small {
  display: block;
}

.daily-copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

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

.secondary-actions .big-btn {
  min-height: 82px;
}

.pack-tabs {
  align-items: stretch;
}

.pack-tab {
  display: grid;
  align-content: center;
  gap: 3px;
  text-align: left;
  min-height: 70px;
}

.pack-tab strong,
.pack-tab span,
.pack-tab small {
  display: block;
  line-height: 1.08;
}

.pack-tab strong {
  font-size: 13px;
  letter-spacing: -0.02em;
}

.pack-tab span,
.pack-tab small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.pack-tab.active span,
.pack-tab.active small {
  color: rgba(36, 56, 43, 0.74);
}

.pack-tab.locked {
  opacity: 0.58;
}

.pack-tab.locked::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 7px;
  width: 14px;
  height: 14px;
  background-image: url('assets/lock.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.8;
}

.pack-tab.completed::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--accent-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
}

.level-button {
  align-content: center;
  gap: 3px;
  padding: 8px 6px;
}

.level-button strong,
.level-button small {
  display: block;
  line-height: 1;
}

.level-button strong {
  font-size: 17px;
}

.level-button small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.level-button.current small,
.level-button.completed small {
  color: rgba(36, 56, 43, 0.68);
}

/* Modal action primary and complete badges styles moved to main rules */

@keyframes previewFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes previewGrow {

  0%,
  100% {
    filter: brightness(1);
    transform: scale(1);
  }

  45% {
    filter: brightness(1.04);
    transform: scale(1.025);
  }
}

@media (max-width: 920px) {
  .refreshed-menu {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .play-hero {
    grid-template-columns: 1fr auto;
  }

  .action-stack {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto auto auto;
  }

  .daily-card-button {
    min-height: 98px;
  }

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

  .menu-meta {
    grid-column: 1 / -1;
  }
}

@media (orientation: portrait) {
  .play-hero {
    grid-template-columns: 1fr;
  }

  .play-card {
    min-height: auto;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .play-card .menu-preview {
    width: min(128px, 30vw);
    grid-row: 1 / span 4;
    grid-column: 2;
    align-self: center;
  }

  .continue-main,
  .continue-stats,
  .progress-track {
    grid-column: 1;
  }

  .continue-main h2 {
    font-size: clamp(25px, 8vw, 40px);
  }

  .action-stack {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }

  .play-now {
    min-height: 88px !important;
  }

  .daily-card-button {
    min-height: 68px;
  }

  .secondary-actions .big-btn {
    min-height: 66px;
  }

  .pack-tab {
    min-height: 58px;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .play-card {
    min-height: 300px;
  }

  .play-card .menu-preview {
    width: 180px;
  }

  .play-now {
    min-height: 88px !important;
  }

  .daily-card-button {
    min-height: 64px;
  }

  .pack-tab {
    min-height: 56px;
  }
}

.pack-tab {
  position: relative;
}

/* ─── Level 1 Tutorial Styles ──────────────────────────────────────────────── */
@keyframes tutorialPulse {

  0%,
  100% {
    background-color: rgba(255, 209, 102, 0.22) !important;
    box-shadow: inset 0 0 0 4px #ffd166, 0 0 12px rgba(255, 209, 102, 0.8);
    transform: scale(1);
  }

  50% {
    background-color: rgba(168, 230, 163, 0.35) !important;
    box-shadow: inset 0 0 0 4px #a8e6a3, 0 0 20px rgba(168, 230, 163, 0.9);
    transform: scale(1.03);
  }
}

.cell.tutorial-highlight {
  animation: tutorialPulse 1.6s infinite ease-in-out !important;
  z-index: 6 !important;
  cursor: pointer !important;
  background: none !important;
}

@keyframes targetPulse {

  0%,
  100% {
    background-color: rgba(168, 230, 163, 0.08) !important;
    box-shadow: inset 0 0 0 3px rgba(63, 125, 74, 0.35);
  }

  50% {
    background-color: rgba(168, 230, 163, 0.22) !important;
    box-shadow: inset 0 0 0 3px rgba(63, 125, 74, 0.8);
  }
}

.cell.tutorial-target {
  animation: targetPulse 1.6s infinite ease-in-out !important;
  z-index: 4 !important;
  background: none !important;
}

/* Custom dashed visual indicator arrow pointing where to drag */
.tutorial-drag-arrow {
  position: absolute;
  pointer-events: none;
  z-index: 100;
  stroke: #ffbe5c;
  stroke-width: 4px;
  stroke-dasharray: 8, 4;
  fill: none;
  animation: arrowDash 1.2s infinite linear;
}

@keyframes arrowDash {
  to {
    stroke-dashoffset: -24;
  }
}

/* --- Added level-system clues: mystery (?) and exact dimension seeds --- */
.cell[data-clue-mode="hidden"] {
  background: linear-gradient(145deg, #fff0bd, #fff8db);
}

.cell[data-clue-mode="dimension"] {
  background: linear-gradient(145deg, #eef8ff, #fffdf6);
}

.clue.mystery-clue {
  font-size: clamp(16px, calc(var(--cell-size, 60px) * 0.54), 46px);
  color: #5c3b00;
  margin-top: -0.18em;
}

.clue.dimension-clue {
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: clamp(9px, calc(var(--cell-size, 60px) * 0.26), 24px);
  font-weight: 950;
  letter-spacing: -0.04em;
  margin-top: -0.08em;
}

body[data-theme="night"] .cell[data-clue-mode="hidden"] {
  background: linear-gradient(145deg, #3c3212, #241d0c);
}

body[data-theme="night"] .cell[data-clue-mode="dimension"] {
  background: linear-gradient(145deg, #153044, #0d2232);
}

body[data-theme="night"] .clue.mystery-clue,
body[data-theme="night"] .clue.dimension-clue {
  color: #ffe18f !important;
}

/* Developer tools styles */
.dev-unlock-btn {
  background: rgba(220, 53, 69, 0.1) !important;
  border: 2px dashed rgba(220, 53, 69, 0.6) !important;
  color: #dc3545 !important;
  margin-top: 14px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.dev-unlock-btn:hover {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

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

body[data-theme="night"] .dev-unlock-btn {
  background: rgba(220, 53, 69, 0.15) !important;
  border-color: rgba(220, 53, 69, 0.8) !important;
  color: #ff6b6b !important;
}

body[data-theme="night"] .dev-unlock-btn:hover {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
}

/* --- Levels panel portrait styling and overflow fixes --- */
@media (orientation: portrait) {

  /* Prevent header title text wrapping below, keep progress chip beside it, scale font size down nicely */
  .levels-sheet .panel-header h2 {
    font-size: clamp(17px, 5.2vw, 22px) !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  .levels-sheet .levels-progress-chip {
    font-size: clamp(13px, 4vw, 16px) !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
  }

  /* Make level select grid a highly readable 5 columns for portrait mode */
  .level-select {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(50px, 1fr) !important;
    gap: 8px !important;
    max-height: min(340px, 48vh) !important;
    margin-right: -12px !important;
    padding-right: 12px !important;
    padding-bottom: 20px !important;
  }

  /* Scale down level buttons padding and text sizes so content NEVER overflows or overlaps */
  .level-button {
    min-height: 50px !important;
    padding: 3px 2px !important;
    gap: 1px !important;
    overflow: hidden;
  }

  .level-button strong {
    font-size: 14px !important;
    line-height: 1 !important;
    margin-top: 2px !important;
  }

  .level-stars {
    font-size: 8.5px !important;
    margin-top: 0px !important;
    margin-bottom: 1px !important;
    letter-spacing: 0px !important;
  }

  .level-time {
    font-size: 8.5px !important;
    line-height: 1 !important;
  }

  /* Reposition checkmark tick to be smaller and not overlap level numbers */
  .level-button.completed::after {
    width: 10px !important;
    height: 10px !important;
    right: 5px !important;
    top: 5px !important;
    background-size: 70% !important;
  }

  /* Reposition lock icon on disabled buttons to not overlap */
  .level-button:disabled::before {
    width: 10px !important;
    height: 10px !important;
    inset: auto 4px 4px auto !important;
  }

  /* Make action bar bigger and shift it upwards in portrait mode */
  .action-bar {
    grid-template-columns: repeat(3, 80px) !important;
    gap: 22px !important;
    margin-bottom: 20px !important;
    /* Shift upwards to avoid mobile swipe indicators and look premium */
  }

  .action-btn.circular-btn {
    font-size: 13px !important;
    gap: 7px !important;
  }

  .circle-icon {
    width: 55px !important;
    height: 55px !important;
  }

  .btn-badge {
    width: 19px !important;
    height: 19px !important;
    font-size: 10px !important;
    right: -3px !important;
    top: -3px !important;
  }

  /* Make the drag selection count badge (drag-meter) smaller and properly scaled in portrait mode */
  .drag-meter {
    height: 23px !important;
    min-width: 23px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  }
}

.single-toggle {
  display: block !important;
}

.wide-toggle {
  width: 100% !important;
}


/* YouTube Playables verification helper: visible, non-interactive tap feedback. */
.playable-input-pulse {
  position: fixed;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  margin-top: -26px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.95);
  background: rgba(116, 242, 157, 0.28);
  box-shadow: 0 0 20px rgba(116, 242, 157, 0.45);
  opacity: 0;
  transform: scale(0.55);
  pointer-events: none;
  z-index: 99999;
}

.playable-input-pulse.active {
  animation: playable-input-pulse 360ms ease-out;
}

@keyframes playable-input-pulse {
  0% { opacity: 0.95; transform: scale(0.55); }
  70% { opacity: 0.55; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.45); }
}

/* --- Near-square landscape header fix (Mediacube square-resolution review) ---
   A viewport can be reported as landscape even when it is visually square-ish
   (for example 698x633 after platform chrome is deducted). The desktop one-row
   header cannot fit in that width, so reuse the proven two-row portrait header
   only for landscape viewports up to 5:4. Wide landscape layouts are untouched. */
@media (orientation: landscape) and (max-aspect-ratio: 5 / 4) {
  .game-topbar {
    height: auto;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: 52px auto;
    gap: 7px;
  }

  .game-topbar .icon-only {
    grid-column: 1;
    grid-row: 1;
  }

  .game-title {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin-left: 0;
  }

  .game-title .eyebrow {
    display: none;
  }

  .game-title h2 {
    font-size: clamp(21px, 4.4vw, 31px);
    white-space: nowrap;
  }

  .game-topbar .top-stats {
    grid-column: 3;
    grid-row: 1;
    margin-right: 0;
  }

  .game-topbar .game-settings {
    grid-column: 4;
    grid-row: 1;
    margin-left: 0;
  }

  .game-topbar .board-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  .board-meta {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
  }

  .mini-stats {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mini-stats > div {
    min-width: 0;
    padding: 7px 8px;
    border-radius: 14px;
  }

  .mini-stats strong {
    font-size: 14px;
  }

  .top-stats {
    grid-template-columns: repeat(2, minmax(52px, 1fr));
  }

  .stat {
    min-width: 0;
    padding: 7px 8px;
    border-radius: 14px;
  }

  .stat strong {
    font-size: 14px;
  }

  .stat span {
    font-size: 9px;
  }
}


/* --- Near-square landscape home-screen fix (Mediacube review) ---
   Square-ish viewports such as 698x633 are reported as landscape, which caused
   the <=920px two-column menu grid to place the title and Play card side by side.
   Reuse the proven centered single-column menu only for near-square landscape
   viewports. Portrait and wide landscape layouts remain unchanged. */
@media (orientation: landscape) and (max-aspect-ratio: 5 / 4) {
  .refreshed-menu {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
  }

  .refreshed-menu .menu-command-panel,
  .refreshed-menu .action-stack {
    width: min(470px, calc(100vw - 36px));
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-self: center;
    align-content: center;
    justify-self: center;
    gap: 10px;
    padding: 10px 12px 14px;
  }

  .refreshed-menu .menu-title-block {
    position: relative;
    top: 0;
    height: auto;
    min-height: 0;
    margin: 0 0 2px;
    text-align: center;
  }

  .refreshed-menu .menu-title-block .eyebrow {
    margin-bottom: 2px !important;
    font-size: 11px !important;
    line-height: 1.1;
  }

  .refreshed-menu .menu-title-block h1 {
    margin: 0 !important;
    font-size: clamp(42px, 7.4vw, 52px) !important;
    line-height: 0.95 !important;
    white-space: nowrap;
  }

  .refreshed-menu .play-now,
  .refreshed-menu #playBtn {
    width: 100%;
    min-height: clamp(104px, 19vh, 124px) !important;
    font-size: clamp(27px, 4.5vw, 34px);
  }

  .refreshed-menu .play-now .big-icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }

  .refreshed-menu .trio-actions {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }

  .refreshed-menu .trio-actions .big-btn {
    min-width: 0;
    min-height: clamp(84px, 15vh, 100px);
    padding: 8px 5px !important;
    border-radius: 20px !important;
  }

  .refreshed-menu .trio-actions .big-icon {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}

/* --- Narrow portrait layout (YouTube minimum-width safety) -----------------
   Very narrow portrait canvases (for example 318x647) cannot fit Back, title,
   Time/Filled and Settings on a single row. Split the header into three compact
   rows while preserving 48px touch targets and leaving the board sizing logic
   to the existing play-layout measurement. */
@media (orientation: portrait) and (max-width: 360px) {
  .game-screen {
    gap: 5px;
    padding: max(8px, env(safe-area-inset-top))
             max(8px, env(safe-area-inset-right))
             max(8px, env(safe-area-inset-bottom))
             max(8px, env(safe-area-inset-left));
  }

  .game-topbar {
    height: auto;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 48px auto auto;
    column-gap: 7px;
    row-gap: 5px;
  }

  .game-topbar .icon-only {
    grid-column: 1;
    grid-row: 1;
  }

  .game-title {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin-left: 0;
  }

  .game-title .eyebrow {
    display: none;
  }

  .game-title h2 {
    overflow: hidden;
    font-size: clamp(20px, 7.4vw, 24px);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .game-topbar .game-settings {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
  }

  .game-topbar .top-stats {
    grid-column: 1 / -1;
    grid-row: 2;
    width: min(166px, 62vw);
    margin: 0;
    justify-self: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .game-topbar .board-meta {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  .game-topbar .stat,
  .game-topbar .mini-stats > div {
    min-width: 0;
    padding: 6px 5px;
    border-radius: 13px;
  }

  .game-topbar .stat strong,
  .game-topbar .mini-stats strong {
    font-size: 13px;
  }

  .game-topbar .stat span,
  .game-topbar .mini-stats span {
    margin-top: 3px;
    font-size: 8px;
  }

  .game-topbar .mini-stats {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .game-topbar .icon-only,
  .game-topbar .round-btn {
    width: 46px;
    height: 46px;
  }

  .board-frame {
    padding: 9px;
    border-radius: 17px;
  }

  .action-bar {
    min-height: 58px;
    grid-template-columns: repeat(3, 56px);
    gap: 9px;
    padding: 4px;
  }

  .action-btn {
    min-height: 52px;
    padding: 4px 2px;
  }

  .action-btn .circle-icon {
    width: 40px;
    height: 40px;
  }

  /* Home: keep the established portrait hierarchy but remove fixed negative
     title positioning, which can crop the heading on very narrow canvases. */
  .refreshed-menu .menu-command-panel,
  .refreshed-menu .action-stack {
    width: min(286px, calc(100vw - 20px));
    max-width: 100%;
    gap: 8px;
    padding: 8px 9px 10px;
  }

  .refreshed-menu .menu-title-block {
    position: relative;
    top: 0;
    height: auto;
    min-height: 0;
    margin: 0 0 2px;
  }

  .refreshed-menu .menu-title-block .eyebrow {
    font-size: 9px !important;
  }

  .refreshed-menu .menu-title-block h1 {
    font-size: clamp(38px, 14vw, 46px) !important;
    line-height: 0.94 !important;
  }

  .refreshed-menu .play-now,
  .refreshed-menu #playBtn {
    min-height: 84px !important;
    font-size: 25px;
  }

  .refreshed-menu .trio-actions {
    gap: 7px;
  }

  .refreshed-menu .trio-actions .big-btn {
    min-height: 68px;
    padding: 6px 3px !important;
    border-radius: 17px !important;
    font-size: 10px;
  }

  .refreshed-menu .trio-actions .big-icon {
    width: 29px;
    height: 29px;
    font-size: 15px;
  }
}

/* --- Short near-square landscape layout -----------------------------------
   Short landscape canvases (for example 522x430 / 548x490) previously fell
   into the desktop one-row header and two-column home layout. Use a compact
   two-row gameplay header and centered home hierarchy only in this narrow,
   short range. Normal 16:9 landscape and 512x512 remain untouched. */
@media (orientation: landscape) and (max-width: 760px) and (max-height: 520px) {
  .game-screen {
    gap: 4px;
    padding: max(7px, env(safe-area-inset-top))
             max(9px, env(safe-area-inset-right))
             max(7px, env(safe-area-inset-bottom))
             max(9px, env(safe-area-inset-left));
  }

  .game-topbar {
    height: auto;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: 44px auto;
    column-gap: 6px;
    row-gap: 4px;
  }

  .game-topbar .icon-only {
    grid-column: 1;
    grid-row: 1;
  }

  .game-title {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin-left: 0;
  }

  .game-title .eyebrow {
    display: none;
  }

  .game-title h2 {
    overflow: hidden;
    font-size: clamp(19px, 4.6vw, 25px);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .game-topbar .top-stats {
    grid-column: 3;
    grid-row: 1;
    width: auto;
    margin: 0;
    grid-template-columns: repeat(2, minmax(48px, 1fr));
    gap: 5px;
  }

  .game-topbar .game-settings {
    grid-column: 4;
    grid-row: 1;
    margin: 0;
  }

  .game-topbar .board-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  .game-topbar .mini-stats {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .game-topbar .stat,
  .game-topbar .mini-stats > div {
    min-width: 0;
    padding: 5px 5px;
    border-radius: 12px;
  }

  .game-topbar .stat strong,
  .game-topbar .mini-stats strong {
    font-size: 12px;
  }

  .game-topbar .stat span,
  .game-topbar .mini-stats span {
    margin-top: 2px;
    font-size: 7px;
  }

  .game-topbar .icon-only,
  .game-topbar .round-btn {
    width: 42px;
    height: 42px;
  }

  .board-frame {
    padding: 8px;
    border-radius: 16px;
  }

  .action-bar {
    min-height: 50px;
    grid-template-columns: repeat(3, 52px);
    gap: 8px;
    padding: 2px;
  }

  .action-btn {
    min-height: 48px;
    padding: 2px;
    font-size: 8px;
  }

  .action-btn .circle-icon {
    width: 36px;
    height: 36px;
  }

  /* Home screen in short landscape: title, Play and trio remain centered in a
     single compact stack. This replaces the <=920px side-by-side auto-flow. */
  .refreshed-menu {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
  }

  .refreshed-menu .menu-command-panel,
  .refreshed-menu .action-stack {
    width: min(430px, calc(100vw - 24px));
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-self: center;
    align-content: center;
    justify-self: center;
    gap: 7px;
    padding: 7px 10px 9px;
  }

  .refreshed-menu .menu-title-block {
    position: relative;
    top: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    text-align: center;
  }

  .refreshed-menu .menu-title-block .eyebrow {
    margin-bottom: 1px !important;
    font-size: 9px !important;
    line-height: 1;
  }

  .refreshed-menu .menu-title-block h1 {
    margin: 0 !important;
    font-size: clamp(36px, 8.5vw, 45px) !important;
    line-height: 0.92 !important;
    white-space: nowrap;
  }

  .refreshed-menu .play-now,
  .refreshed-menu #playBtn {
    width: 100%;
    min-height: clamp(76px, 20vh, 92px) !important;
    font-size: clamp(24px, 5.5vw, 29px);
  }

  .refreshed-menu .play-now .big-icon {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }

  .refreshed-menu .trio-actions {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .refreshed-menu .trio-actions .big-btn {
    min-width: 0;
    min-height: clamp(62px, 15vh, 76px);
    padding: 5px 4px !important;
    border-radius: 17px !important;
    font-size: 10px;
  }

  .refreshed-menu .trio-actions .big-icon {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }
}