@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Abril+Fatface&family=Oswald:wght@300;400&display=swap');

/* ═══════════ RESET & BASE ══════════ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Georgia', serif;
  touch-action: manipulation;
  user-select: none;
}

body {
  background: #e6e6e6;
}

/* Every button on every page gets a light shadow */
button {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border-radius: 5px; /* every button on every page: visible R5 corners */
}

/* Fixed newspaper background with grayscale filter */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('bg-newspaper.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: grayscale(100%);
  transform: rotate(180deg);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

/* Overlay for readability */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(230, 230, 230, 0.3);
  z-index: 0;
  pointer-events: none;
}

#app {
  /* Mobile-game template: phone-sized portrait frame */
  width: 100%;
  max-width: 430px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* On wider screens, present the game as a centered phone device */
@media (min-width: 481px) {
  body {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #app {
    height: min(100%, 920px);
    border: 1px solid rgba(0, 0, 0, 0.55);
    border-radius: 26px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  }
}

.screen {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  transition: opacity 0.3s;
}

.screen.hidden {
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* ══════════ MENU SCREEN - TRANSPARENT BACKGROUND ═══════════ */
.menu-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 0;
}

.menu-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px 20px;
}

/* Wooden letter tiles */
.logo-image {
  text-align: center;
  margin-bottom: 10px;
  isolation: isolate;
}

.logo-image img {
  max-width: 416px;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  display: block;
  margin: 0 auto;
}

.logo-image.small img {
  max-width: 324px; /* 35% bigger than 240px */
}

/* 3x3 Sudoku Preview Box */
.sudoku-preview-box {
  width: 100%;
  max-width: 320px;
  margin: 10px auto 20px;
  padding: 0;
}

.sudoku-grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  aspect-ratio: 1;
  background: transparent;
  border: 4px solid #000000;
  box-sizing: border-box;
}

.grid-cell {
  background: transparent;
  aspect-ratio: 1;
  position: relative;
}

/* Thin inner lines - right border */
.grid-cell::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #000000;
}

/* Thin inner lines - bottom border */
.grid-cell::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #000000;
}

/* Remove right line from last column */
.grid-cell:nth-child(3n)::after {
  display: none;
}

/* Remove bottom line from last row */
.grid-cell:nth-child(n+7)::before {
  display: none;
}

/* Menu buttons in grid */
.menu-btn-grid {
  border: none;
  background: transparent;
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(12px, 4vw, 21px);
  font-weight: 400;
  color: #000000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5px;
  line-height: 1.1;
  letter-spacing: 1px;
  transition: background 0.2s;
  width: 100%;
  height: 100%;
  overflow: hidden;
  word-break: break-word;
}

.menu-btn-grid:hover {
  background: rgba(0, 0, 0, 0.5);
}

.menu-btn-grid:active {
  background: rgba(0, 0, 0, 0.5);
}

/* PLAY button - 20% larger */
.play-btn {
  font-size: clamp(17px, 5.8vw, 30px);
}

/* ABOUT, HELP, SETTING - smaller */
.small-btn {
  font-size: clamp(10px, 3.2vw, 17px);
}

/* Menu card */
.menu-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 30px 40px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 280px;
}

.menu-btn {
  background: none;
  border: none;
  font-family: 'Georgia', serif;
  font-size: 32px;
  color: #8B4513;
  padding: 15px 20px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s;
  font-style: italic;
}

.menu-btn:active {
  transform: scale(0.95);
}

/* Sidebar buttons */
.menu-sidebar {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sidebar-btn {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #8B4513;
  font-family: 'Georgia', serif;
  font-size: 14px;
  font-weight: bold;
}

.look-icon, .gift-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.look-icon {
  background: radial-gradient(circle, #2d5016 0%, #1a3010 100%);
  border: 3px dashed rgba(255,255,255,0.5);
}

.gift-icon {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border: 3px solid #FF8C00;
}

/* ═══════════ TOP BAR ═══════════ */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  width: 100%;
}

/* Help screen: HOME on the left, BACK + NEXT grouped on the right */
.help-content .top-bar {
  justify-content: flex-start;
  gap: 10px;
}

.help-content .top-bar #btnHelpHome {
  margin-right: auto;
}

/* Price button on the No Adv Version row — two stacked lines */
button.price-btn {
  display: block; /* override .back-btn's flex row so <br> can stack the lines */
  text-align: center;
  line-height: 1.25;
}

.price-year {
  font-size: 11px;
  letter-spacing: 1px;
}

/* Back / Reset buttons — same look as the game page HOME button */
.back-btn {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.3);
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(11px, 3vw, 16px);
  color: #000000;
  padding: 6px 14px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background 0.2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.back-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.reset-btn {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.3);
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(11px, 3vw, 16px);
  color: #000000;
  padding: 6px 14px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background 0.2s;
  white-space: nowrap;
}

.reset-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.screen-title {
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(22px, 6vw, 30px);
  color: #000000;
  letter-spacing: 2px;
  text-align: center;
}

/* Colourful title banner — once a colour is picked, every page title sits on a
   50% band of that colour spanning the full page width, a few px taller than
   the words. Blank tint = no band (the rules only fire under #app.tinted).
   The -20px side margins bleed the band past the 20px content padding. */
#app.tinted .screen-title {
  background: rgba(var(--tint-rgb), 0.5);
  padding: 6px 0;
}
#app.tinted .difficulty-content .screen-title,
#app.tinted .stats-content .screen-title,
#app.tinted .options-content .screen-title,
#app.tinted .help-content .screen-title,
#app.tinted .chooselook-content .screen-title,
#app.tinted .moregames-content .screen-title {
  margin: 0 -20px;
}
#app.tinted .moregames-content .screen-title {
  align-self: stretch; /* centred flex column — stretch it across the page */
}

/* ═══════════ DIFFICULTY SCREEN ═══════════ */
.difficulty-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.difficulty-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
  flex: 1;
}

.diff-card {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #8B4513;
  border-radius: 5px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  transition: transform 0.2s;
}

.diff-card:active {
  transform: scale(0.95);
}

.diff-icon {
  font-size: 50px;
}

.diff-name {
  font-family: 'Georgia', serif;
  font-size: 24px;
  color: #8B4513;
  font-weight: bold;
}

.diff-stars {
  font-size: 21px; /* +50% for readability on the level page */
  color: #000000;
  letter-spacing: 2px;
}

.diff-clues {
  font-size: 16px;
  color: #666;
}

/* ═══════════ GAME SCREEN - HOME STYLE ═══════════ */
.game-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px; /* same page padding as the Score page */
  overflow-y: auto;
  scrollbar-width: none;
}

.game-content::-webkit-scrollbar {
  display: none;
}

/* Top row: HOME  HELP aligned left, HEARTS pinned right */
.game-top-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 500px;
  padding: 15px 20px;
  margin-bottom: 8px;
  position: relative;
  box-sizing: border-box;
}

.game-top-btn {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.3);
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(11px, 3vw, 16px);
  color: #000000;
  padding: 6px 14px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background 0.2s;
  white-space: nowrap;
}

.game-top-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.game-top-btn:active {
  background: rgba(0, 0, 0, 0.1);
}

.hint-x {
  letter-spacing: 2px;
  margin-right: 3px;
  transition: color 0.2s;
}

.hint-x.used {
  color: rgba(0, 0, 0, 0.25);
}

/* Lives hearts (next to the timer, near the middle) */
.game-hearts {
  display: flex;
  align-items: center;
  gap: 5px;
  position: absolute;
  right: 20px; /* aligns with the BACK/RESET edge of the other pages */
  top: 50%;
  transform: translateY(-50%);
}

.heart {
  position: relative;
  font-size: clamp(33.75px, 9.375vw, 48.75px); /* hearts enlarged another 50% */
  line-height: 1;
  color: var(--tint-solid, #000000); /* matches the chosen grid colour (black when blank) */
  transition: color 0.2s;
}

/* Used-up heart: faded to 15% of the chosen colour (15% black when blank) */
.heart.lost {
  color: rgba(var(--tint-rgb), 0.15);
}

/* HINTS on the left, timer on the right (under the number cubes) */
.game-hint-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 10px;
}

/* GAME OVER title */
.gameover-title {
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(28px, 8vw, 44px);
  text-align: center;
  letter-spacing: 3px;
  color: #000000;
}

/* Score row: centered score + multiplier on the right */
.game-score-row {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 30px;
  width: 100%;
  max-width: 500px;
  margin-bottom: 10px;
}

.game-score-display {
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(24px, 6vw, 38.4px); /* score enlarged 20% */
  color: #000000;
  letter-spacing: 2px;
}

/* Score glow: soft halo fades in then out over 1s each time the score changes.
   Uses --tint-rgb so the glow matches the chosen grid colour (black when blank). */
@keyframes scoreGlow {
  0%, 100% { text-shadow: none; transform: scale(1); }
  50% {
    text-shadow: 0 0 8px rgba(var(--tint-rgb), 0.85), 0 0 18px rgba(var(--tint-rgb), 0.5);
    transform: scale(1.08);
  }
}
.game-score-display.score-glow {
  animation: scoreGlow 1s ease;
}

.score-num {
  font-family: 'Abril Fatface', cursive;
}

/* Multiplier: right side on top of the grid, smaller than the score */
.game-multiplier-display {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(14px, 3.5vw, 20px);
  color: #000000;
  letter-spacing: 1px;
}

.game-timer-display {
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(18px, 4.5vw, 28px);
  color: #000000;
  letter-spacing: 1px;
}

/* Sudoku 9x9 Grid - matches home page style */
.sudoku-grid-wrap {
  width: 100%;
  max-width: 420px;
  margin: 0 auto 15px;
  padding: 0;
}

.sudoku-grid-9x9 {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  width: 100%;
  aspect-ratio: 1;
  background: transparent;
  border: 3px solid #000000;
  box-sizing: border-box;
}

/* Individual grid cells */
.sudoku-cell {
  background: transparent;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif; /* plain digits on the board */
  font-weight: 700;
  font-size: clamp(14px, 4vw, 26px);
  color: #000000;
  cursor: pointer;
  position: relative;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  box-sizing: border-box;
  transition: background 0.15s;
  user-select: none;
  -webkit-user-select: none;
}

/* Remove right border from last column */
.sudoku-cell:nth-child(9n) {
  border-right: none;
}

/* Remove bottom border from last row */
.sudoku-cell:nth-child(n+73) {
  border-bottom: none;
}

/* 3x3 box thick borders */
.sudoku-cell:nth-child(3n):not(:nth-child(9n)) {
  border-right: 2.5px solid #000000;
}

.sudoku-cell:nth-child(n+19):nth-child(-n+27),
.sudoku-cell:nth-child(n+46):nth-child(-n+54) {
  border-bottom: 2.5px solid #000000;
}

/* Clue cells (given numbers) */
.sudoku-cell.clue {
  font-weight: 400;
  color: #000000;
}

/* Player-filled cells */
.sudoku-cell.filled {
  color: #333333;
}

/* Selected cell */
.sudoku-cell.selected {
  background: #bfbfbf;
}

/* Highlighted (same row/col/box) - 25% of the chosen grid colour (black when blank) */
.sudoku-cell.highlighted {
  background: rgba(var(--tint-rgb), 0.25);
}

/* Same number as the picked digit: 50% of the chosen grid colour */
.sudoku-cell.same-number {
  background: rgba(var(--tint-rgb), 0.5);
  color: #000000;
}

/* Hint-revealed cell: white cube with black number (kept after the
   grey selection/highlight rules so it always wins visually) */
.sudoku-cell.hint,
.sudoku-cell.hint.selected,
.sudoku-cell.hint.highlighted,
.sudoku-cell.hint.same-number {
  background: #ffffff;
  color: #000000;
}

/* Error cell */
.sudoku-cell.error {
  color: #cc0000 !important;
  text-decoration: line-through;
}

/* Notes grid inside cell */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.notes-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(7px, 1.8vw, 11px);
  font-family: Arial, Helvetica, sans-serif;
  color: #555555;
}

/* Number pad */
.game-numpad {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 3px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 10px;
  padding: 0;
}

.numpad-btn {
  background: var(--tint-solid, #000000); /* cube takes the chosen grid colour */
  border: 1px solid var(--tint-solid, #000000);
  font-family: Arial, Helvetica, sans-serif; /* plain digits in the cubes */
  font-weight: 700;
  font-size: clamp(18px, 4.2vw, 26px); /* bigger digits, cube size unchanged */
  color: var(--tint-text, #ffffff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, filter 0.1s;
  padding: 0;
  height: 44px;
}

.numpad-btn:hover {
  filter: brightness(1.15);
}

.numpad-btn:active {
  filter: brightness(0.82);
}

/* Digit fully placed on the board: grey cube, no longer selectable */
.numpad-btn.completed {
  background: #8c8c8c;
  border-color: #8c8c8c;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

/* Tools row (Notes + Erase) */
.game-tools-row {
  display: flex;
  justify-content: center;
  gap: 15px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.notes-toggle-btn,
.erase-btn {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #000000; /* halved from 2px — thinner edges */
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(11px, 2.8vw, 15px);
  color: #000000;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.2s;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* black & white pencil / eraser icons — 80% bigger, from 16px */
.tool-ico {
  width: 29px;
  height: 29px;
  flex: none;
}

.notes-toggle-btn:hover,
.erase-btn:hover {
  background: #f0f0f0;
}

.notes-toggle-btn:active,
.erase-btn:active {
  background: #e0e0e0;
}

.notes-toggle-btn.active {
  background: #000000;
  color: #ffffff;
}

/* swap icon colours so it stays visible on the inverted active state */
.notes-toggle-btn.active .tool-ico {
  filter: invert(1);
}

/* Grid colour blocks (Blank / Green / Blue / Brown) */
.grid-tint-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  margin: 10px auto 0;
}

.tint-swatch {
  width: 25px;  /* colour tabs enlarged 15% (was 22px), same row position */
  height: 25px;
    border-radius: 5px; /* R5 like every other button */
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 0;
  cursor: pointer;
}

.tint-swatch[data-tint="blank"]  { background: rgba(255, 255, 255, 0.75); }
.tint-swatch[data-tint="red"]    { background: #c0392b; }
.tint-swatch[data-tint="orange"] { background: #e67e22; }
.tint-swatch[data-tint="yellow"] { background: #f1c40f; }
.tint-swatch[data-tint="green"]  { background: #3a7d44; }
.tint-swatch[data-tint="blue"]   { background: #3a5f8f; }
.tint-swatch[data-tint="purple"] { background: #8e44ad; }
.tint-swatch[data-tint="pink"]   { background: #e58ab2; }
.tint-swatch[data-tint="brown"]  { background: #8b5a2b; }

.tint-swatch.active {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

/* 15% colour wash behind the transparent grid cells (game board + home 3x3 menu grid).
   Each tint also sets --tint-rgb so the row/column guides and matching-number
   highlights inside the game grid take on the same hue. Blank keeps the
   classic black-based highlights via the default below. */
#grid { --tint-rgb: 0, 0, 0; }
#grid.tint-red, #menuGrid.tint-red    { --tint-rgb: 200, 40, 40;    --tint-text: #ffffff; }
#grid.tint-orange, #menuGrid.tint-orange { --tint-rgb: 235, 130, 20; --tint-text: #ffffff; }
#grid.tint-yellow, #menuGrid.tint-yellow { --tint-rgb: 225, 195,  0; --tint-text: #000000; }
#grid.tint-green, #menuGrid.tint-green  { --tint-rgb: 0, 140,  0;    --tint-text: #ffffff; }
#grid.tint-blue, #menuGrid.tint-blue   { --tint-rgb: 0, 90, 200;     --tint-text: #ffffff; }
#grid.tint-purple, #menuGrid.tint-purple { --tint-rgb: 125, 40, 160; --tint-text: #ffffff; }
#grid.tint-pink, #menuGrid.tint-pink   { --tint-rgb: 230, 120, 175;  --tint-text: #000000; }
#grid.tint-brown, #menuGrid.tint-brown { --tint-rgb: 139, 90, 43;    --tint-text: #ffffff; }

/* Colour-fill levels, applied only while a tint- class is present (blank = transparent).
   Game board 15%; HOME menu grid 25%, its menu buttons 50%, PLAY 75%.
   --tint-rgb / --tint-text cascade from #menuGrid onto the button children. */
#grid[class*="tint-"]     { background: rgba(var(--tint-rgb), 0.15); }
#menuGrid[class*="tint-"] { background: rgba(var(--tint-rgb), 0.25); }
#menuGrid[class*="tint-"] .menu-btn-grid { background: rgba(var(--tint-rgb), 0.5); color: #000000; }
#menuGrid[class*="tint-"] .play-btn      { background: rgba(var(--tint-rgb), 0.75); }
#menuGrid[class*="tint-"] .small-btn     { background: rgba(var(--tint-rgb), 0.15); }

/* App-wide colour wash: once a colour is chosen on the home page, the buttons on
   EVERY page and the Score / Help / Settings boards fade to 25% of that colour.
   #app carries class "tinted" + an inline --tint-rgb (set in applyGridTint);
   Blank removes them, so the default transparent look is untouched.
   Bespoke tiles are intentionally excluded: game numpad cubes, the home 3x3
   menu grid and the colour swatches keep their own fills. */
#app.tinted .back-btn,
#app.tinted .reset-btn,
#app.tinted .game-top-btn,
#app.tinted .erase-btn,
#app.tinted .notes-toggle-btn:not(.active),
#app.tinted .about-link,
#app.tinted .diff-popup-cell {
  background: rgba(var(--tint-rgb), 0.25);
  color: #000000;
}
#app.tinted .stats-overall,
#app.tinted .level-stat,
#app.tinted .options-section,
#app.tinted .help-instruction {
  background: rgba(var(--tint-rgb), 0.25);
}

/* Game-screen colour driver. The hearts and number cubes live OUTSIDE #grid,
   so the chosen hue is published here as --tint-solid (fills), --tint-rgb
   (for the 15% "used" heart) and --tint-text (readable digit colour).
   Blank / white keeps the classic black cubes + black hearts via the base. */
#screen-game { --tint-solid: #000000; --tint-rgb: 0, 0, 0; --tint-text: #ffffff; }
#screen-game.tint-red    { --tint-solid:#c82828; --tint-rgb:200,40,40;   --tint-text:#ffffff; }
#screen-game.tint-orange { --tint-solid:#eb8214; --tint-rgb:235,130,20;  --tint-text:#ffffff; }
#screen-game.tint-yellow { --tint-solid:#e1c300; --tint-rgb:225,195,0;   --tint-text:#000000; }
#screen-game.tint-green  { --tint-solid:#008c00; --tint-rgb:0,140,0;     --tint-text:#ffffff; }
#screen-game.tint-blue   { --tint-solid:#005ac8; --tint-rgb:0,90,200;    --tint-text:#ffffff; }
#screen-game.tint-purple { --tint-solid:#7d28a0; --tint-rgb:125,40,160;  --tint-text:#ffffff; }
#screen-game.tint-pink   { --tint-solid:#e678af; --tint-rgb:230,120,175; --tint-text:#000000; }
#screen-game.tint-brown  { --tint-solid:#8b5a2b; --tint-rgb:139,90,43;   --tint-text:#ffffff; }

/* Home intro sweep — single menu cell flashing one colour (same 15% washes) */
.grid-cell { transition: background-color 0.06s ease; }
#menuGrid .cell-tint-red    { background: rgba(200, 40, 40, 0.15); }
#menuGrid .cell-tint-orange { background: rgba(235,130, 20, 0.15); }
#menuGrid .cell-tint-yellow { background: rgba(225,195,  0, 0.15); }
#menuGrid .cell-tint-green  { background: rgba(  0,140,  0, 0.15); }
#menuGrid .cell-tint-blue   { background: rgba(  0, 90,200, 0.15); }
#menuGrid .cell-tint-purple { background: rgba(125, 40,160, 0.15); }
#menuGrid .cell-tint-pink   { background: rgba(230,120,175, 0.15); }
#menuGrid .cell-tint-brown  { background: rgba(139, 90, 43, 0.15); }

/* ══════════ STATS SCREEN ═══════════ */
.stats-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}

.stats-content .screen-title {
  margin: 4px 0 12px;
}

.stats-overall {
  background: transparent;
  border: 1px solid #000000;
  border-radius: 12px;
  padding: 16px 16px;
  margin: 8px 0 12px; /* sits a little lower under the title, like the Settings page */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.stat-row {
  font-family: 'Abril Fatface', cursive;
  font-size: 17px;
  letter-spacing: 1px;
  line-height: 1.45;
  color: #000000;
  margin-bottom: 8px;
  text-align: center;
}

.stat-val {
  font-weight: bold;
  color: #000000;
}

.stat-val.highlight {
  color: #000000;
}

.stats-levels {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.level-stat {
  background: transparent;
  border: 1px solid #000000;
  border-radius: 12px;
  padding: 14px 14px 14px 26px; /* extra left padding: nudge level + scores right */
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Level name + stars column (replaces the old emoji icon) */
.level-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 86px;
}

.level-stat-name {
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(17px, 4.5vw, 21px);
  font-weight: 400;
  color: #000000;
  letter-spacing: 1px;
}

.level-stat-stars {
  font-size: 14px;
  color: #000000;
  letter-spacing: 1.5px;
  margin: 0;
}

.level-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.level-stat-row {
  font-family: 'Abril Fatface', cursive;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1.35;
  color: #000000;
}

.level-stat-row .stat-val {
  color: #000000;
  font-weight: bold;
}

/* ═══════════ OPTIONS SCREEN ═══════════ */
.options-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow: hidden; /* whole page must fit without scrolling */
  scrollbar-width: none; /* same box width as the Score page, no scrollbar inset */
}

.options-content::-webkit-scrollbar {
  display: none;
}

.options-section {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 6px 0;
  padding: 10px 16px;
}

.section-header {
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(16px, 4.5vw, 20px);
  color: #000000;
  letter-spacing: 2px;
  padding: 0 0 6px;
  margin: 0 0 2px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.option-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.option-item:last-child {
  border-bottom: none;
}

.option-icon {
  font-size: 24px;
  width: 30px;
  text-align: center;
  filter: brightness(0); /* black silhouette — clean monochrome logo */
}

.option-info {
  flex: 1;
}

.option-name {
  font-family: 'Abril Fatface', cursive;
  font-size: 16px;
  color: #000000;
  letter-spacing: 1px;
  margin-bottom: 3px;
}

.option-desc {
  font-family: 'Georgia', serif;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.65);
  font-style: italic;
  line-height: 1.35;
}

.volume-slider {
  width: 120px;
  height: 6px;
  -webkit-appearance: none;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  outline: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  background: white;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: pointer;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  transition: 0.4s;
  border-radius: 34px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #000000;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

/* ═══════════ HELP SCREEN ══════════ */
.help-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
}

.help-content .screen-title {
  margin: 6px 0 14px;
}

.help-pages {
  flex: 1;
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 8px auto 0; /* gap under the title, like the Settings page */
}

.help-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start; /* items sit packed at the top, right under the title */
  overflow: hidden; /* every page must fit without scrolling */
}

.help-page.active {
  display: flex;
}

/* Instruction cards — same look as the stats boxes */
.help-instruction {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  color: #111111;
  padding: 9px 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.instruction-num {
  font-family: 'Abril Fatface', cursive;
  font-size: 18px;
  color: #000000;
  min-width: 26px;
}

.instruction-text {
  font-family: 'Georgia', serif;
  font-size: 13px;
  line-height: 1.4;
  text-align: justify;
  color: #111111;
  flex: 1;
}

.instruction-text p {
  margin: 0;
}

/* Illustrated figures inside the instructions */
.help-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 6px 0 0;
}

.mini-grid {
  display: grid;
  gap: 1px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #000;
}

.mini-grid.g3 { grid-template-columns: repeat(3, 30px); }

.mini-grid span {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  font-family: 'Abril Fatface', cursive;
  font-size: 13px;
  color: #000;
}

.mini-grid.g3 span { height: 30px; font-size: 15px; }

.mini-grid .hintcell { background: #ffffff; box-shadow: inset 0 0 0 2px #000; }

/* Fig. 1 — highlights follow the chosen colour (example: red picked) */
.mini-grid .rcell { background: rgba(200, 40, 40, 0.25); }
.mini-grid .r50   { background: rgba(200, 40, 40, 0.5); color: #000000; }
.mini-grid .rself { background: rgba(200, 40, 40, 0.5); color: #000000; box-shadow: inset 0 0 0 2px #000; }

/* Fig. 7 — pencil notes queued inside a cell */
.mini-grid .notecell { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; }
.mini-grid .notecell i {
  font-style: normal;
  font-size: 8px;
  color: #555555;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fig. 9 — the win page's two buttons */
.fig-btns { display: flex; gap: 8px; justify-content: center; }
.fig-btns span {
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: transparent;
  padding: 6px 14px;
  font-family: 'Abril Fatface', cursive;
  font-size: 11px;
  letter-spacing: 1px;
}

/* Fig. 10 — the nine colour blocks */
.fig-swatches { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.fig-swatches i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.fig-swatches .blanksw { background: transparent; border: 1px solid rgba(0, 0, 0, 0.35); }

/* Real 9x9 game-grid replicas for Help Fig. 1 & 2 — fixed whole-pixel cells;
   the old 1fr squeeze gave fractional cells and jagged, "broken" borders */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(9, 14px);
  grid-template-rows: repeat(9, 14px);
  border: 3px solid #000000;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.85);
}

.demo-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Abril Fatface', cursive;
  font-size: 10px;
  color: #000000;
  box-sizing: border-box;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.demo-cell:nth-child(9n) { border-right: none; }
.demo-cell:nth-child(n+73) { border-bottom: none; }
.demo-cell:nth-child(3n):not(:nth-child(9n)) { border-right: 2.5px solid #000000; }
.demo-cell:nth-child(n+19):nth-child(-n+27),
.demo-cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2.5px solid #000000; }

.demo-cell.filled { color: #333333; }

/* Fig. 1 red template / Fig. 2 blue template — same alpha levels as the live game
   (row & column 25%, matching digits 50%, selected cell 50% + black ring) */
.demo-grid.fig-red  .demo-cell.hl  { background: rgba(200, 40, 40, 0.25); }
.demo-grid.fig-red  .demo-cell.hl2 { background: rgba(200, 40, 40, 0.5);  color: #000000; }
.demo-grid.fig-blue .demo-cell.hl  { background: rgba(0, 90, 200, 0.25); }
/* selected cell: 50% + black ring — written per template so it outranks the .hl rule */
.demo-grid.fig-red  .demo-cell.sel { background: rgba(200, 40, 40, 0.5); color: #000000; box-shadow: inset 0 0 0 2px #000; }
.demo-grid.fig-blue .demo-cell.sel { background: rgba(0, 90, 200, 0.5);  color: #000000; box-shadow: inset 0 0 0 2px #000; }

.mini-numpad {
  display: flex;
  gap: 4px;
}

.mini-numpad b {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  border-radius: 4px;
  font-family: 'Abril Fatface', cursive;
  font-size: 11px;
}

.mini-numpad .picked {
  background: #fff;
  color: #000;
  border: 2px solid #000;
}

.mini-numpad .done {
  background: #8c8c8c;
  color: rgba(255, 255, 255, 0.45);
}

.mini-hearts b {
  font-size: 20px;
  font-weight: normal;
  color: #000;
  margin: 0 3px;
}

.mini-hearts .lost {
  color: rgba(0, 0, 0, 0.25);
}

.mini-score {
  font-family: 'Abril Fatface', cursive;
  font-size: 18px;
  color: #000;
}

.mini-score i {
  font-size: 13px;
  font-style: normal;
}

.fig-cap {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 10.5px;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
}

/* ═══════════ ABOUT SCREEN ═══════════ */
.about-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 80px; /* lifted buttons leave room for a bottom ad banner */
  overflow: hidden;
}

/* Paged newspaper introduction */
.about-pages {
  flex: 1;
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 10px 0;
}

.about-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  overflow: hidden; /* paged by NEXT — no scrolling */
  padding-bottom: 10px;
}

.about-page.active {
  display: block;
}

/* short viewports: shrink the About logo so each paged article fits without scrolling */
@media (max-height: 800px) {
  #screen-about .logo-image.small img {
    max-width: 190px;
  }
}

.about-article h2 {
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(18px, 5vw, 24px);
  color: #000000;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 26px; /* clear gap between the title band and the words */
}

/* About headings wear the same 50% title banner as the other pages */
#app.tinted .about-article h2 {
  background: rgba(var(--tint-rgb), 0.5);
  padding: 6px 0;
}

.article-deck {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-style: italic;
  text-align: center;
  font-size: 14px; /* 2px larger body copy */
  color: rgba(0, 0, 0, 0.65);
  margin-bottom: 14px;
}

.about-article p {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: clamp(13.5px, 3.6vw, 15.5px); /* 2px larger than before */
  letter-spacing: 0.2px;
  line-height: 1.55;
  text-align: justify;
  color: #111111;
  margin-bottom: 12px;
}

/* bold lead-in labels (features, history sections) */
.about-article strong {
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* centred sub-heading line inside the article */
.article-sub {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(13px, 3.4vw, 15px);
  color: #000000;
  margin: 4px 0 12px;
}

/* Two big buttons fixed at the bottom, side by side */
.about-bottom-btns {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin-top: 10px;
}

.about-link {
  flex: 1;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.3);
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(12px, 3.2vw, 16px);
  color: #000000;
  letter-spacing: 1px;
  padding: 14px 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.about-link:hover {
  background: rgba(0, 0, 0, 0.05);
}

.about-link:active {
  background: rgba(0, 0, 0, 0.1);
}

/* ═══════════ CHOOSE LOOK SCREEN ═══════════ */
.chooselook-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.look-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  flex: 1;
}

.look-option {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid rgba(139, 90, 43, 0.3);
  border-radius: 5px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.look-option:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 1);
}

.look-num {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  font-family: 'Georgia', serif;
}

.look-name {
  font-family: 'Georgia', serif;
  font-size: 24px;
  color: #8B4513;
  font-weight: bold;
}

.chooselook-hint {
  text-align: center;
  font-family: 'Georgia', serif;
  font-size: 18px;
  color: #8B4513;
  font-style: italic;
  padding: 20px;
}

/* ═══════════ MORE GAMES SCREEN ═══════════ */
.moregames-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.blank-message {
  text-align: center;
  margin-top: 50px;
}

.blank-message p {
  font-family: 'Abril Fatface', cursive;
  font-size: 20px;
  color: #000000;
  letter-spacing: 1px;
}

/* ═══════════ WIN OVERLAY ═══════════ */
.overlay {
  position: absolute; /* contained inside the phone frame */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.overlay.hidden {
  display: none;
}

/* Difficulty Popup */
.difficulty-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 25px;
  background: rgba(217, 217, 217, 0.95);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
  max-width: 320px;
  width: 90%;
  animation: popupSlide 0.3s ease-out;
}

@keyframes popupSlide {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Difficulty grid - same style as home grid */
.diff-popup-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  aspect-ratio: 1;
  background: transparent;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.diff-popup-cell {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  box-sizing: border-box;
  transition: background 0.2s;
  font-family: 'Abril Fatface', cursive;
}

/* Remove right border from last column */
.diff-popup-cell:nth-child(2n) {
  border-right: none;
}

/* Remove bottom border from last row */
.diff-popup-cell:nth-child(n+3) {
  border-bottom: none;
}

.diff-popup-cell:hover {
  background: #f0f0f0;
}

.diff-popup-cell:active {
  background: #e0e0e0;
}

.diff-popup-name {
  font-size: clamp(14px, 5vw, 24px);
  font-weight: 400;
  color: #000000;
  letter-spacing: 2px;
}

.diff-popup-stars {
  font-size: 21px; /* +50% for readability on the level page */
  color: #000000;
  letter-spacing: 2px;
  margin: 5px 0;
}

.diff-popup-clues {
  font-size: 11px;
  color: #666666;
  font-family: 'Georgia', serif;
}

/* HOME button */
.home-btn {
  background: none;
  border: none;
  font-family: 'Abril Fatface', cursive;
  font-size: 20px;
  color: #000000;
  letter-spacing: 3px;
  cursor: pointer;
  padding: 10px 20px;
  transition: color 0.2s;
}

.home-btn:hover {
  color: #555555;
}

.home-btn:active {
  color: #333333;
}

/* Win / Game Over sheet — same grey design language as the difficulty popup */
.win-sheet {
  background: rgba(217, 217, 217, 0.95);
  border-radius: 12px;
  padding: 25px;
  max-width: 320px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
  animation: popupSlide 0.3s ease-out;
}

.win-sheet h2 {
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(20px, 6vw, 26px);
  color: #000000;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.win-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 25px;
}

.win-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ws-num {
  font-size: 24px;
  color: #000000;
  font-family: 'Abril Fatface', cursive;
  letter-spacing: 1px;
}

.ws-lbl {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.65);
  letter-spacing: 1px;
}

/* Highest score on the win page — stands out when it's a brand-new record
   (takes the chosen grid colour, black when blank) */
.ws-num.new-best {
  color: rgb(var(--tint-rgb, 0, 0, 0));
  text-decoration: underline;
}
#winBestLbl {
  color: rgba(0, 0, 0, 0.65);
}

.win-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ═══════════ TOAST ═══════════ */
#toast {
  position: absolute; /* contained inside the phone frame */
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 15px 30px;
  border-radius: 25px;
  font-size: 16px;
  z-index: 2000;
  animation: fadeInOut 2s;
}

#toast.hidden {
  display: none;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  10%, 90% { opacity: 1; }
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 768px) {
  .wood-tile {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  
  .version-num {
    font-size: 60px;
  }
  
  .menu-btn {
    font-size: 24px;
  }
  
  .sudoku-cell {
    font-size: 22px;
  }
  
  .numpad-btn {
    height: 40px;
    font-size: 21px;
  }
}

@media (max-width: 480px) {
  .wood-tile {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }
  
  .version-num {
    font-size: 50px;
  }
  
  .sudoku-cell {
    font-size: 18px;
  }
  
  .numpad-btn {
    height: 38px;
    font-size: 19px;
  }
}