/* =========== SET-UP =========== */

@font-face {
  font-family: "Poppins";
  src: url("./assets/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
 
@font-face {
  font-family: "Poppins";
  src: url("./assets/fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Or a more specific selector if preferred */
  --responsive-cell-container-size: calc(85vw / var(--cols));
  /* Example: grid takes 90% of viewport width */
  /* If you want to ensure it also fits vertically, use vmin: */
  /* --responsive-cell-container-size: calc(85vw / var(--cols));
  --responsive-cell-container-size: calc(min(90vw / var(--cols), 80vh / var(--rows))); */

  /* safe area variables here */
  --status-bar-height: 24px;
  --notch-clearance: 44px;
  --camera-clearance: 32px;
  --safe-top-minimum: 20px;
}

html,
body {
  overscroll-behavior: none;
  font-size: 1rem;
}

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body,
button {
  font-family: Poppins, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

#gameBody,
.grid,
.cell {
  /* And any other containers involved in the grid's layout */
  box-sizing: border-box;
}

h1,
h2 {
  color: #303b4c;
  margin: 0;
}

h2 {
  font-size: 2rem;
  display: inline;
  margin-top: 2vh;
}

h3 {
  margin-bottom: 8px;
}

img#logo {
  display: block;
  height: auto;
  width: 500px;
  max-height: 70px;
  max-width: 75%;
}

img.page-logo {
  width: 500px;
  max-width: 75%;
  height: auto;
  max-height: 80px;
  margin-top: 10px;
}

img#logo-mini {
  display: none;
}

#header {
  text-align: center;
  margin: 1.5vh 0 2vh;
}

/* End note - truly centered */
#end-note {
  font-weight: 500;
  font-family: "SF Mono", "Consolas", "Roboto Mono", "Menlo", "Courier New",
    monospace;
  font-size: 1.35rem;
  margin: 4px auto 0 auto;
  /* Center horizontally */
  padding: 12px 5px;
  background: #e7e9ec;
  width: 92%;
  border-radius: 12px;
  text-align: center;
  color: #525252;
  height: 42px;
}

/* For the entire body during gameplay */
body.game-activeOFF {
  touch-action: none;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100vh;
}

/* headers that have back button on side */
.page-header {
  display: flex;
  align-items: center;
  /* vertically center the items */
  gap: 0.5em;
  /* space between button and heading */
}

#gamePage .page-header {
  display: none;
}

.gotd-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  /* Equal columns */
  gap: 20px;
  align-items: flex-start;
}

.page {
  touch-action: none;
  /* Disable pinch zoom, etc. */
  overflow: hidden;
  /* Prevent scrollbars from appearing */
  position: fixed;
  /* Fix page in viewport */
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

/* Prevent scrolling on the game page specifically */
#gamePage {
  touch-action: none;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  top: 0;
  left: 0;

  padding-top: max(
    env(safe-area-inset-top),
    var(--safe-top-minimum)
  ) !important;
  padding-bottom: max(env(safe-area-inset-bottom), 10px) !important;
  padding-left: max(env(safe-area-inset-left), 0px) !important;
  padding-right: max(env(safe-area-inset-right), 0px) !important;
}

/* Prevent scrolling on the main game container */
#gameBody {
  touch-action: none;
  overflow: hidden;
}

/* Prevent scrolling and touch actions on the grid */
.grid {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Prevent touch actions on cells */
.cell {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* For the entire body during gameplay */
body.game-active {
  touch-action: none;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100vh;
}

p {
  margin-bottom: 3px;
}

img#logo {
  width: 380px;
  max-width: 75%;
  margin-bottom: 1vh;
  margin: 0 auto 1vh auto;
}

#frontPage img#logo {
  max-width: 95%;
  display: block;
}

img.page-logo {
  width: 500px;
  max-width: 75%;
  height: auto;
}

.small {
  font-size: 0.85rem;
}

/* =========== PAGE SPECIFIC =========== */

img.page-logo {
  margin-top: -5px;
}

.page-content {
  display: flex;
  flex-direction: column;
  width: 90vw;
  height: 92vh;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 5px;
  border-radius: 20px;
  overflow-y: auto;
  scrollbar-width: none;
}

#appScreen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;

  /* Remove centering that causes offset */
  align-items: stretch;
  /* Changed from center */

  /* Ensure no margins */
  margin: 0 !important;
  padding: 0 !important;
}

#resultsPage.page,
#aboutPage.page {
  margin: 0 6px;
}

#resultsPage.page {
  text-align: center;
}

#frontPage .page-content {
  border-radius: 20px;
  height: 96vh;
  justify-content: center;
  /* center horizontally */
  align-items: center;
  /* center vertically */
}

#frontPage .child {
  /* optional: styling for each div */
  padding: 1rem;
  margin-top: 1vh;
  text-align: center;
}

#aboutPage ul {
  margin-top: 0;
  /* margin-left: 0; */
  padding-left: 25px;
}

#gotd.child {
  border: 4px solid #c6c9cf;
  border-radius: 20px;
  background: white;
  font-size: 1.5rem;
  text-align: center;
  color: #39423c;
  font-weight: 700;
  width: 320px;
  max-width: 90%;
  padding: 5vh 0;
}

#gotd.child p {
  margin: -2px 0 20px 0;
}

#resulrsPage .child {
  margin-top: 2.5vh;
}

#frontPage H1 {
  font-size: 4.2rem;
  color: #505050;
}

#topBar {
  flex: 0 0 auto;
  text-align: center;
}

#gameLayout {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;

  /* Remove margins */
  margin: 0 !important;
  padding: 0;

  /* True centering */
  width: 100%;
  align-items: center;
  /* Center child elements horizontally */
}

#gameBody {
  /* Remove auto margins that cause fake centering */
  margin: 0 !important;
  padding: 0;

  /* True responsive width */
  width: min(90vw, 700px);
  /* More predictable than max-width approach */

  /* Flexbox for proper centering */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center grid and controls */
  justify-content: flex-start;

  /* Take available space */
  flex: 1;
  overflow: hidden;
}

/* Control panel - truly centered */
#controlPanel {
  display: flex;
  padding: 10px;
  justify-content: center;
  margin: 8px auto 0 auto;
  /* Center horizontally */
  width: 100%;
  max-width: 450px;
}

.score-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  align-items: center;
  /* vertically centers the label and score number */
  gap: 8px;
  /* adjust spacing as needed */
  padding-top: 20px;
}

.highest-label {
  line-height: 1;
  font-size: 1.2rem;
  /* small font size */
  color: #333;
  font-weight: 600;
}

.points {
  font-size: 32px;
  /* large bold font */
  font-weight: bold;
  color: #000;
  /* adjust color */
}

/* BUTTONS */

button {
  margin-bottom: 10px;

  display: inline-flex;
  /* allows for centering content */
  justify-content: center;
  /* center horizontally */
  align-items: center;
  /* center vertically */
  text-align: center;
  /* center multi-line text if wrapping */
  padding: 0.5em 1em;
  /* optional spacing */
  border: 1px solid #000;
  background: #fcfdff;
  touch-action: manipulation;
  /* Allows tapping, prevents double-tap zoom */
  pointer-events: auto;
  cursor: pointer;
}

button.main-button {
  color: white;
  padding: 10px 25px;
  border: 5px solid #303b4cbb;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 1.2s ease-out;
  font-weight: 700;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
}

button#playWeeklyBtn {
  color: #333;
}

button.secondary-button {
  color: #39423c;
  padding: 5px;
  border: 2px solid #39423c;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 1.2s ease-out;
  font-weight: 400;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  width: 120px;
  max-width: 45%;
}

#controlPanel button {
  width: clamp(16vw, 135px, 28vw);
  font-size: 1.2rem;
  font-weight: 700;
  color: white;
  padding: 0.6em 1.2em;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: background-color 1.2s ease-out;
  padding: 3px 10px;
  max-height: 50px;
  max-width: 210px;
}

.back-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0 none;
  background-color: transparent;
  cursor: pointer;
  margin-right: 0.5em;
  padding: 0;
}

.back-button:hover {
  background-color: #555;
}

button.main-button.results {
  border: 2px solid #39423c;
  color: #39423c;
  text-align: center;
  font-weight: 400;
  padding: 8px 0;
  width: 120px;
}

button.back-button path {
  stroke: #39423c;
  stroke-width: 3px;
}

#start {
  background: #29c058;
}

#start:active {
  background-color: #67f594;
  transition: background-color 0.05s ease-in;
}

#start:disabled {
  color: #ffffffaa;
}

#scatter {
  background: #3f6eb8;
}

#scatter:active {
  background-color: #76a6f5;
  transition: background-color 0.05s ease-in;
}

button#share {
  background: #fda501;
}

button#share {
  animation: sharewobble 0.25s 16 ease-in-out;
}

.play-game {
  background-color: #303b4c;
  color: white;
  padding: 20px 25px;
  border: none;
  border-radius: 12px;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color 1.2s ease-out;
  font-weight: 700;
}

.play-game:active {
  background-color: #76a6f5;
  /* Lighter green */
  transition: background-color 0.05s ease-in;
}

button.play-daily {
  background-color: #39423c;
  color: white;
  padding: 20px 30px 20px 0;
  border: 5px solid #48484833;
  border-radius: 20px;
  font-size: 1.8rem;
  cursor: pointer;
  transition: background-color 1.2s ease-out;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  /* <-- vertically align circle and text */
  justify-content: center;
  margin-top: 20px;
  width: 210px;
  max-width: 80%;
}

button.play-daily:active {
  background-color: #76a6f5;
  /* Lighter green */
  transition: background-color 0.05s ease-in;
}

button.play-daily.gotd-completed {
  background-color: #39423c;
  /* A darker or less vibrant shade of green */
  /* You might need to adjust this color to look good with your existing .play-daily style */
}

button.play-daily.gotd-completed .gotd-circle {
  background-color: #2abf5a;   /* bright green */
  border-color:    #2abf5a;    /* match the fill if you like */
}

button.play-game.main-button {
  margin-top: 20px;
  background: #39423c;
  color: white;
}

#game-back {
  padding: 12px 5px 0 0;
}

#resultsPage .gotd-circle {
  width: 38px;
  height: 38px;
}

#resultsPage .gotd-circle .tick-svg {
  width: 20px;
  height: 20px;
}

#resultsPage .gotd-circle {
  margin-left: 19px;
}

/* =========== TIMER & SCORE =========== */
#timer.timer-final {
  background-color: orange;
}

.circle {
  width: 135px;
  height: 35px;
  border-radius: 12px;
  box-shadow: 0px 0px 1px 1px #0000001a;
  background: #d97757fa;
}

#timer.timer-final {
  animation: pulse 1s 10, wobble 0.4s 25 ease-in-out;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 165, 0, 0.8);
  }

  100% {
    box-shadow: 0 0 0 15px rgba(255, 165, 0, 0.1);
  }
}

@keyframes wobble {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(0.9deg);
  }

  75% {
    transform: rotate(-0.9deg);
  }
}

@keyframes sharewobble {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(1.2deg);
  }

  75% {
    transform: rotate(-1.2deg);
  }
}

.gotd-circle.completed {
  background-color: #2abf5a;
  /* same green as .play-daily.gotd-completed .gotd-circle */
}

.gotd-circle.completed .tick-svg {
  display: block;
}

.result-item {
  display: flex;
  align-items: center; /* This should center everything */
  gap: 15px;
  padding: 8px 0; 
  min-height: 50px; /* Remove this if not needed */
}

#frontPage .gotd-circle {
    margin-right: 10px;
}


.result-text-combined {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  flex: 1;
    align-self: center; /* Vertically center with the circle */
  margin-left: 0;
}

.result-text-simple {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  flex: 1;
  line-height: 1; /* Add this to prevent text baseline issues */
  display: flex;
  align-items: center; /* Center the text within its container */
}


/* Circle next to Game of the Day text */
.gotd-circle {
  width: 32px;  /* Fixed width */
  height: 32px; /* Fixed height */
  flex-shrink: 0; /* Don't let it shrink */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #aab7ae;
  border: 3px solid white;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
}

/* When GotD is completed */
.play-daily.gotd-completed .gotd-circle {
  background-color: #2abf5a;
}

/* White tick icon */
.gotd-circle .tick-svg {
  display: none;
  width: 30px;
  height: 30px;
  fill: white;
}

.play-daily.gotd-completed .tick-svg {
  display: block;
}

#score {
  font-size: 1.6rem;
  font-weight: 700;
}

/* === ========  Game Grid & Cells  ======== === */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 44px);
  grid-template-rows: repeat(var(--rows), 44px);
  gap: 2px;
  touch-action: none;

  /* Remove padding and add proper centering */
  padding: 0;

  /* Center the grid content within the grid container */
  justify-content: center;
  /* Center columns horizontally */
  align-content: center;
  /* Center rows vertically if needed */

  /* Ensure the grid itself is centered */
  margin: 1vw auto;

  /* Set explicit width to contain the grid properly */
  width: fit-content;
  /* Grid will size to exactly fit its content */
}

.cell {
  width: 42px;
  height: 42px;
  position: relative;
  border-radius: 4px;
  margin: 2px;
  touch-action: none;
  /* Prevent default touch actions like scrolling/pinching on tiles */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
}

.cell.center-cell::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  border: 2px solid #12903c;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.tile {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;

  /* Prevent long-press context menu */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;

  width: 38px;
  height: 38px;
  background: #acecf5bb;
  border-radius: 4px;
  cursor: grab;
  user-select: none;
  display: flex;
  /* Keep if you have internal structure in tile, like letter and score */
  align-items: center;
  /* <<< This handles vertical centering */
  justify-content: center;
  /* Keep for internal tile content */
  transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
  touch-action: none;
  /* Prevent default touch actions like scrolling/pinching on tiles */
  width: 99%;
  /* Add this line */
  height: 99%;
  /* Add this line */
  text-align: center;
  /* <<< ADD THIS LINE TO FIX THE CENTERING */
}

.tile > span {
  display: flex;
  /* Make the span itself a flex container */
  align-items: center;
  /* Vertically center the text inside the span */
  justify-content: center;
  /* Horizontally center the text inside the span */
  width: 100%;
  /* Ensure the span fills the tile */
  height: 100%;
  /* Ensure the span fills the tile */
  font-size: 17px;
  font-weight: 500;
}

.tile .score {
  position: absolute;
  bottom: 2px;
  right: 5px;
  font-size: 9px;
  /* smaller than letter */
  color: #004d40;
  font-weight: normal;
}

.disabled .tile:not(.active) {
  opacity: 0.6;
}

.tile.touch-dragging {
  position: fixed !important;
  /* Position relative to viewport */
  z-index: 1000 !important;
  /* Ensure it's above other elements */
  opacity: 0.9;
  /* Make it slightly transparent for visual feedback */
  pointer-events: none;
  /* Ignore pointer events so elements underneath can be detected */

  /* Ensure visibility */
  visibility: visible !important;
  display: flex !important;

  /* Maintain size and styling */
  width: 38px !important;
  height: 38px !important;

  /* Optional: Add visual feedback that it's being dragged */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transform-origin: 0 0;
  /* Transform from top-left corner */

  /* Ensure it doesn't inherit problematic styles */
  margin: 0 !important;
  padding: 1px !important;
}

/* Styles for the Results Page List */

.page-content {
  margin-top: 5vh;
}

.result-score .game-number {
  font-size: 0.85em;
  color: #555;
  /* optional: muted color */
}

#gotdHighScoreDisplay {
  font-weight: bolder;
  font-size: 2.8rem;
  margin: 10px 5px;
}

ul#last7DaysList {
  list-style-type: none;
  padding-left: 0;
  margin: 25px auto; 
  width: 100%;
  max-width: 400px;
}



.timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30px; /* Fixed width for consistent alignment */
  flex-shrink: 0; /* Prevent shrinking */
  margin-right: 0; /* Remove margin since gap handles spacing */
  align-self: stretch;
  position: relative;
}

.timeline-line {
  width: 5px;
  /* Thickness of the connecting line */
  background-color: #ccc;
  /* Color of the line */
  flex-grow: 1;
  /* Allow lines to fill space between circle and item top/bottom */
}

.status-circle {
  width: 32px;
  /* Diameter of the circle */
  height: 32px;
  /* Diameter of the circle */
  border-radius: 50%;
  /* Make it a circle */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* For z-index if needed, but flex order should be fine */
  flex-shrink: 0;
  /* Prevent circle from shrinking */
  margin-top: 5px;
  /* Space from upper line to circle */
  margin-bottom: 5px;
  /* Space from circle to lower line */
  box-sizing: border-box;
  /* Include border in width/height */
}

.status-circle.played {
  background-color: #28a745;
  /* Green for played games */
  border: 2px solid #4a4a4a88;
  /* Or a slightly darker green */
}

.status-circle.not-played {
  background-color: #747474;
  /* Charcoal grey */
  border: 2px solid #4a4a4a88;
  /* Or a slightly darker charcoal */
}

.tick-mark {
  color: white;
  font-size: 20px;
  /* Oversized tick */
  font-weight: bold;
  line-height: 1;
  /* Helps center the tick vertically */
  display: none;
  /* Hidden by default, shown for played games */
}

.status-circle.played .tick-mark {
  display: inline;
  /* Show tick for played games */
}

/* ===== SETTINGS PAGE ===== */
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  max-width: 300px;
  /* Adjust as needed */
}

.setting-item span {
  font-size: 1rem;
}

/* Toggle Switch CSS */
.toggle-container {
  display: flex;
  align-items: center;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin-left: 10px;
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  /* Default off color */
  transition: 0.4s;
  border-radius: 24px;
  /* Should match height */
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  /* Knob size */
  width: 18px;
  /* Knob size */
  left: 3px;
  /* Knob padding from left */
  bottom: 3px;
  /* Knob padding from bottom */
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #29c058;
  /* Green when ON (matches your Start button) */
}

input:focus + .slider {
  box-shadow: 0 0 1px #29c058;
}

input:checked + .slider:before {
  transform: translateX(26px);
  /* (Switch Width - Knob Width - 2*Knob Padding Left) e.g., 50-18-(2*3) = 26 */
}

/* =========== TRANSITIONS & ANIMATIONS =========== */

/* Page transiitons */

.page {
  padding: 0;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Keyframe animation for tile returning to origin */

@keyframes return-to-origin {
  0% {
    /* Starting position will be set via inline styles */
    opacity: 1;
    transform: var(--start-transform) scale(1);
  }

  50% {
    /* Midpoint - slight scale down for visual interest */
    opacity: 0.9;
    transform: var(--mid-transform) scale(0.95);
  }

  100% {
    /* End position - back to normal */
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/* Alternative with a bounce effect */
@keyframes return-to-origin-bounce {
  0% {
    transform: var(--start-transform) scale(1);
  }

  60% {
    transform: translate(0, 0) scale(0.95);
  }

  80% {
    transform: translate(0, 0) scale(1.05);
  }

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

/* Class to apply the animation */
.tile.returning-to-origin {
  animation: return-to-origin-bounce 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
  pointer-events: none;
  z-index: 999;
}

/* ===========  THEMES  =========== */

/* --- Light / Standard --- */

body {
  background: #eff1f5;
}

#page-logo-light {
  display: inline-block;
}

#page-logo-dark {
  display: none;
}

.logo-mini-light {
  display: inline-block;
}

.logo-mini-dark {
  display: none;
}

.cell {
  border: 2px solid #c6c9cf;
  background: #fefefe;
  /* previous 7A7A7A */
}

.weekly-game .cell {
  border: 2px solid #b8dbc3;
}


.tile {
  background: #3576dc;
  color: #fff;
  opacity: 0.95;
}

.score {
  color: #fff !important;
}

.tile.active {
  background: #23bc50;
}

/* ---  Dark Mode  --- */

body.dark-theme {
  background: #333;
  color: #adc3a4;
}

body.dark-theme h2 {
  color: #adc3a4;
}

body.dark-theme #page-logo-light {
  display: none;
}

body.dark-theme #page-logo-dark {
  display: inline-block;
}

body.dark-theme .logo-mini-light {
  display: none;
}

body.dark-theme .logo-mini-dark {
  display: inline-block;
}

.dark-theme button.play-game.main-button,
.dark-theme button.main-button {
  background: #7e9a73;
}

.dark-theme button.play-daily.gotd-completed {
  background-color: #7e9a73;
}

body.dark-theme .gotd-circle {
  border-color: #f7fef4;
}

body.dark-theme #gotd.child {
  background: #303030;
  color: #adc3a4;
  border: 4px solid #adc3a4;
}

body.dark-theme button.main-button.results,
body.dark-theme button.secondary-button {
  background: transparent;
  color: #adc3a4;
  border-color: #adc3a4;
}

body.dark-theme .points,
body.dark-theme .highest-label,
body.dark-theme h2 {
  color: #adc3a4;
}

body.dark-theme button.back-button path {
  stroke: #769569;
}

body.dark-theme .cell {
  border: 1px solid #8bec7494;
  background: #333;
}

body.dark-theme.weekly-game .cell {
    border: 2px solid #506858;
}


body.dark-theme #score {
  background: #252525;
}

body.dark-theme #timer {
  background: #769569;
}

body.dark-theme .cell {
  background: #2b2b2b;
}

body.dark-theme .tile {
  background: #769569;
  opacity: 0.9;
}

body.dark-theme .tile.active {
  background: #76d160;
}

body.dark-theme #end-note {
  background: #39423c;
  color: #fff;
}

body.dark-theme .cell.special-2L {
  background: #b8941f;
  /* Darker, more muted version of #FFC76B */
}

body.dark-theme .cell.special-3L {
  background: #b87a1f;
  /* Darker, more muted version of #FFAE6B */
}

body.dark-theme .cell.special-2W {
  background: #b85a1f;
  /* Darker, more muted version of #FF846B */
}

body.dark-theme .cell.special-3W {
  background: #b83a4a;
  /* Darker, more muted version of #FF5474 */
}

body.dark-theme #timer.timer-final {
  /* Dark mode: use pulse-dark instead of pulse, wobble remains the same */
  animation: pulse-dark 1s 10, wobble 0.4s 25 ease-in-out;
  /* Or, if only the animation name changes for 'pulse', you could target animation-name more specifically,
     but re-declaring the full 'animation' shorthand for clarity here is fine. */
}

@keyframes pulse-dark {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.2);
    /* Lighter shadow for dark theme */
  }

  100% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }
}

/* Game Stats Container */
.game-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  /* Only margin we need */
  padding: 8px 12px;
  position: relative;

  margin-top: max(env(safe-area-inset-top, 0px), 8px);
}

/* Back Button - positioned on the left edge */
#game-back {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.back-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

.back-button svg {
  width: 35px;
  height: 35px;
  padding-right: 1px;
  border: 1px solid #333;
  border-radius: 8px;
}

/* Main content area - timer, logo, score */
.game-stats-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* Visible gaps between elements */
  flex: 1;
  max-width: 400px;
  /* Constrain the main content */
  margin: 0 auto;
}

/* Timer */
#timer {
  width: 120px;
  /* Fixed visible width */
  max-width: 120px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  background: #39423c;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}

/* Logo */
#mini-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Score */
#score {
  width: 150px;
  /* Fixed visible width */
  max-width: 150px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
}

.cell.special-2L {
  background: #ffc76b;
}

.cell.special-3L {
  background: #ffae6b;
}

.cell.special-2W {
  background: #ff846b;
}

.cell.special-3W {
  background: #ff5474;
}

.special {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
  color: #333;
  pointer-events: none;
}

/* ===========  MOBILE AD TESTING  =========== */

/* Fixed positioning for top/bottom ads */

.ad-bottom {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
  background: rgba(255, 0, 0, 0.544);
  text-align: center;
}

/* Adjust body padding when ads are present */
body.has-top-ad {
  padding-top: 50px;
  /* Adjust based on ad height */
}

/* Game page adjustments for ads */
#gamePage.has-top-ad {
  padding-top: 50px;
}

/* Ensure game content doesn't overlap with ads */
#gamePage .page-content {
  min-height: calc(100vh - 100px);
  /* Account for top and bottom ads */
}

/* For very small screens, hide ads or make them smaller */
@media (max-width: 320px) {
  .ad-banner {
    width: 100%;
    min-width: 300px;
  }
}

/* Tablet landscape adjustments */
@media (min-width: 768px) and (orientation: landscape) {
  .ad-leaderboard {
    display: block;
  }

  .ad-banner {
    display: none;
    /* Hide smaller banner, show leaderboard instead */
  }
}

@media (max-width: 768px) {
  .gotd-container {
    grid-template-columns: 1fr;
    /* Single column = stacked */
  }

  .gotd-container .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 0 26px;
    /* Add some side padding on mobile */
  }

  #last7DaysList {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }

  ul#last7DaysList {
    padding-left: 0;
    margin: 25px auto;
    max-width: 350px;
  }
    .result-text-combined {
    font-size: 1.3rem; /* Slightly smaller on mobile */
  }
}


/* bonus message for using all letters */
#allLettersBonusMsg {
  position: fixed;
  bottom: 33vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  font-weight: 700;
  color: #23bc50;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

@keyframes floatUpFade {
  0% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  20% {
    transform: translateX(-49%) translateY(-8vh);
  }
  40% {
    transform: translateX(-51%) translateY(-16vh);
  }
  60% {
    transform: translateX(-49.5%) translateY(-24vh);
    opacity: 1;
  }
  80% {
    transform: translateX(-50.5%) translateY(-32vh);
  }
  100% {
    transform: translateX(-50%) translateY(-40vh);
    opacity: 0;
  }
}


.show-float-bonus {
  animation: floatUpFade 3.5s ease-out forwards;
}





/* ===========  DEVICE SIZES & Specific Layouts  =========== */

/* Fallback for browsers without env() support */
@supports not (padding-top: env(safe-area-inset-top)) {
  #gamePage {
    padding-top: var(--status-bar-height) !important;
  }

  .game-stats {
    margin-top: 12px;
  }
}

/* ** MOBILE PHONES ** and Extra Small Devices */
@media (max-width: 600px) {
  #gameBody {
    width: 95vw;
    max-width: 550px;
  }

  #end-note {
    font-size: 0.9rem;
    width: 90%;
    max-width: 400px;
  }

  .grid {
    grid-template-columns: repeat(
      var(--cols),
      var(--responsive-cell-container-size)
    );
    grid-template-rows: repeat(
      var(--rows),
      var(--responsive-cell-container-size)
    );
    gap: calc(var(--responsive-cell-container-size) * 0.1);
    width: 100%;
    box-sizing: border-box;
  }

  .cell {
     width: 100%;
    height: 100%;
     margin: 0;
   border-width: 1px;
  }

  .tile {
    width: calc(var(--responsive-cell-container-size) - 4px);
    top: 1px;
    left: 1px;
  }

  .tile > span {
    font-size: calc(var(--responsive-cell-container-size) * 0.4);
  }

  .tile .score {
    font-size: calc(var(--responsive-cell-container-size) * 0.25);
  }

  .special {
    font-size: calc(var(--responsive-cell-container-size) * 0.35);
  }

  .game-stats {
    max-width: 95vw;
    padding: 12px 10px;
  }

  .game-stats-content {
    gap: 12px;
    max-width: 320px;
    padding-left: 20px;
  }

  #game-back {
    left: 2px;
  }

  .back-button {
    width: 32px;
    height: 32px;
  }

  .back-button svg {
    width: 27px;
    height: 27px;
  }

  #timer {
    width: 100px;
    max-width: 100px;
    font-size: 1.2rem;
    padding: 6px 8px;
  }

  #score {
    width: 130px;
    max-width: 130px;
    font-size: 1.2rem;
    padding: 6px 8px;
  }

  img.page-logo {
    max-height: 52px;
  }

  #header {
    margin: 2vh 0 0vh;
  }

  #gamePage {
    padding-top: max(env(safe-area-inset-top), 28px) !important;
    /* Slightly more for small screens */
  }

  .game-stats {
    max-width: 95vw;
    padding: 12px 10px;
    margin-top: 0;
    /* Less top margin on small screens */
  }
}

/* Small Devices */
@media (min-width: 601px) and (max-width: 900px) {
  #gameBody {
    width: 80vw;
    max-width: 700px;
  }
}

/* ** TABLETS ** and Medium Devices */
@media (min-width: 901px) and (max-width: 1200px) {
  :root {
    --font-size: 20px;
    --button-size: 56px;
    --spacing: 16px;
    --board-width: 400px;
    --responsive-cell-container-size: calc(90vw / var(--cols));
    /* 
  --responsive-cell-container-size: calc(min(90vw / var(--cols), 80vh / var(--rows))); */
  }

  #gameBody {
    width: 85vw;
    max-width: 750px;
  }

  .grid {
    grid-template-columns: repeat(var(--cols), 65px);
    grid-template-rows: repeat(var(--rows), 65px);
    gap: 3px;
  }

  .cell {
    width: 100%;
    height: 100%;
    border-width: 3px;
    border-radius: 6px;
  }

  .tile {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 6px;
  }

  .tile > span {
    font-size: 34px;
  }

  .tile .score {
    font-size: 15px;
    right: 8px;
    bottom: 4px;
  }

  .special {
    font-size: 25px;
  }

  .page-content {
    width: 800px;
    max-width: 75%;
  }
}

/* ** DESKTOP etc ** and Large Devices */
@media (min-width: 1201px) and (max-width: 1800px) {
  /* Styles for desktops */
  .game-stats {
    padding: 15px 30px;
    gap: 20px;
    font-size: 1.8rem;
    max-width: 500px;
    /* Keep the 500px constraint */
  }

  #timer,
  #score {
    font-size: 1.7rem;
    padding: 12px 18px;
    min-width: 140px;
    max-width: 210px;
  }

  /*#mini-logo img {
    width: 65px;
  }*/
}

/* Extra Large Devices */
@media (min-width: 1801px) {
  /* Styles for large desktops */
}

/* Large devices - reduce relative to screen */
@media (min-width: 1201px) {
  :root {
    --font-size: 20px;
    --button-size: 56px;
    --spacing: 16px;
    --board-width: 400px;
    --responsive-cell-container-size: calc(90vw / var(--cols));
    /* 
  --responsive-cell-container-size: calc(min(90vw / var(--cols), 80vh / var(--rows))); */
  }

  #gameBody {
    width: 85vw;
    max-width: 750px;
  }

  .grid {
    grid-template-columns: repeat(var(--cols), 75px);
    grid-template-rows: repeat(var(--rows), 75px);
    gap: 3px;
  }

  .cell {
    width: 100%;
    height: 100%;
    border-width: 3px;
    border-radius: 7px;
  }

  .tile {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 6px;
  }

  .tile > span {
    font-size: 34px;
  }

  .tile .score {
    font-size: 16px;
    right: 11px;
    bottom: 4px;
  }

  .special {
    font-size: 25px;
  }

  .game-stats {
    max-width: 600px;
    /* Fixed max width on large screens */
    padding: 12px 20px;
  }

  .game-stats-content {
    gap: 24px;
    max-width: 500px;
  }

  #game-back {
  }

  .back-button {
    width: 44px;
    height: 44px;
  }

  .back-button svg {
    width: 50px;
    height: 50px;
  }

  #timer {
    width: 180px;
    font-size: 1.6rem;
    padding: 12px 16px;
  }

  #score {
    width: 185px;
    font-size: 1.6rem;
    padding: 12px 16px;
  }

  /*#mini-logo img {
    width: 52px;
  }*/
  #controlPanel button {
    padding: 15px 10px;
  }
}

/* ** SHORTER MOBILES ** and short device */
@media (max-width: 500px) and (max-height: 800px) {
  .grid {
    grid-template-columns: repeat(var(--cols), 34px);
    grid-template-rows: repeat(var(--rows), 34px);
    gap: 1px;
  }

  #controlPanel {
    padding: 0;
    margin-top: 5px;
  }

  #controlPanel button {
    height: 25px;
    font-weight: 500;
    font-size: 0.9rem;
  }

  #score,
  #timer {
    padding: 1px 8px;
    font-size: 1rem;
  }

  #end-note {
    font-size: 0.9rem;
    height: 23px;
    margin-top: 0;
    padding-top: 4px;
    line-height: normal;
  }

  #gamePage #header {
    display: none;
  }

  img#logo-mini {
    height: 35px;
    width: auto;
  }

  img#logo-mini.logo-mini-light {
    display: inline-block;
  }

  img#logo-mini.logo-mini-dark {
    display: none;
  }

  body.dark-theme img#logo-mini.logo-mini-light {
    display: none;
  }

  body.dark-theme img#logo-mini.logo-mini-dark {
    display: inline-block;
  }

  body.dark-theme .result-text-combined {
  color: #adc3a4;
}
  /* OVERRIDE for very compact devices */
  #gamePage {
    padding-top: max(env(safe-area-inset-top), 32px) !important;
    /* More clearance for cramped screens */
  }

  .game-stats {
    margin-top: max(env(safe-area-inset-top, 0px), 2px);
    /* Minimal top margin */
  }

  #frontPage .child {
    margin-top: 0;
    padding: 0.8rem;
  }

  #gotd.child {
    padding: 4vh 0;
  }
}

/* narrow and tall*/

@media (max-width: 361px) and (max-height: 750px) {
  #controlPanel button {
    height: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 0;
  }

  #end-note {
    min-height: 38px;
    margin-top: 20px;
  }

  .game-stats {
    margin: 10px 0;
  }

  .grid {
    grid-template-columns: repeat(var(--cols), 25px);
    grid-template-rows: repeat(var(--rows), 25px);
    gap: 1px;
  }

  .game-stats {
    margin: 0;
  }

  #end-note {
    min-height: 28px;
    margin-top: 0;
  }

  #gamePage {
    padding-top: max(env(safe-area-inset-top), 28px) !important;
  }

  controlPanel button {
    height: 28px;
    font-size: 0.9rem;
    margin-top: 0;
  }

  .game-stats {
    margin: 0;
  }

  #gotd.child {
    padding: 3px;
  }

  #frontPage .child {
    padding: 0;
    margin-top: 0;
  }

  #timer {
    max-width: 70px;
  }

  #score {
    max-width: 90px;
  }
}

/* ** MEDIUM-SHORT MOBILES ** */
@media (max-width: 500px) and (min-height: 801px) and (max-height: 900px) {
  #header {
    margin: 0;
  }

  img.page-logo {
    max-height: 45px;
  }

  .game-states {
    padding: 8px 10px;
  }

  #controlPanel {
    margin-top: 0;
  }

  #controlPanel button {
    font-size: 1.1rem;
    padding: 5px 10px;
    font-weight: 500;
  }

  #score,
  #timer {
    margin: 8px 8px;
    padding: 3px;
  }

  #end-note {
    margin-top: 2px;
    padding: 8px 5px;
    height: 33px;
  }
}

/* Universal layout classes for ANY small device */
/* Add these to your CSS */

/* For very tiny devices (iPhone SE and similar) */
body.tiny-device-layout {
  /* Ultra-compact layout */
}

body.tiny-device-layout #gamePage {
  width: 97%;
}

body.tiny-device-layout .grid {
  padding: 0.3vw;
  margin: 0;

  /* Let parent center it */
  justify-self: center;
  align-self: center;
}

body.tiny-device-layout #end-note,
body.tiny-device-layout #controlPanel {
  margin: 1px auto 0 auto;
  padding: 2px;
  width: 100%;
  max-width: 350px;

  /* Perfect button centering */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

body.tiny-device-layout #gamePage #header {
  display: none !important;
}

body.tiny-device-layout #gameBody {
  width: min(98vw, 550px);
  /* More predictable sizing */
  margin: 0 !important;
  padding: 1px;

  /* Perfect centering */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

body.tiny-device-layout #controlPanel {
  margin-top: 1px;
  padding: 2px;
}

body.tiny-device-layout #controlPanel button {
  max-height: 250px;
  font-size: 0.8rem;
  padding: 4px 6px;
}

body.tiny-device-layout .game-stats {
  padding: 2px 4px;
  margin: 0 auto;
  width: 100%;
  max-width: 350px;
}

body.tiny-device-layout #timer,
body.tiny-device-layout #score {
  width: 70px;
  max-width: 70px;
  font-size: 0.9rem;
  padding: 3px 4px;
}

body.tiny-device-layout #mini-logo img {
  width: 33px;
}

body.tiny-device-layout #end-note {
  font-size: 0.9rem;
  height: 15px;
  margin: 1px auto 0 auto;
  padding-top: 0;
  width: 95%;
  max-width: 350px;
  text-align: center;
  line-height: 1.2;
}

body.tiny-device-layout #frontPage .child {
  padding: 0.3rem;
  margin-top: 0.2vh;
}

body.tiny-device-layout #gotd.child {
  padding: 2vh 0;
  font-size: 1.2rem;
}

body.tiny-device-layout button.play-daily {
  font-size: 1.4rem;
  padding: 12px 20px 12px 0;
  width: 180px;
}

/* For small devices (slightly larger than tiny) */
body.small-device-layout {
  /* Compact layout */
}

body.small-device-layout #gameBody {
  width: 98vw;
  padding: 2px;
}

body.small-device-layout .grid {
  padding: 0.4vw;
}

body.small-device-layout #controlPanel {
  margin-top: 2px;
  padding: 3px;
}

body.small-device-layout #controlPanel button {
  max-height: 35px;
  font-size: 0.9rem;
  padding: 5px 7px;
}

body.small-device-layout .game-stats {
  padding: 3px 6px;
}

body.small-device-layout #timer,
body.small-device-layout #score {
  width: 80px;
  max-width: 80px;
  font-size: 0.9rem;
  padding: 3px 5px;
}

body.small-device-layout #mini-logo img {
  width: 25px;
}

body.small-device-layout #end-note {
  font-size: 0.9rem;
  height: 18px;
  margin-top: 2px;
}

body.small-device-layout #frontPage .child {
  padding: 0.4rem;
  margin-top: 0.3vh;
}

body.small-device-layout #gotd.child {
  padding: 2.5vh 0;
  font-size: 1.3rem;
}

body.small-device-layout button.play-daily {
  font-size: 1.5rem;
  padding: 14px 22px 14px 0;
  width: 185px;
}

/* Hide page logos on all small devices to save space */
body.tiny-device-layout .page-header img.page-logo,
body.small-device-layout .page-header img.page-logo {
  display: none !important;
}

/* ===== PORTRAIT-ONLY TABLET STRATEGY ===== */
/* Adjusted ranges for portrait iPad Pro */

/* ALL TABLETS - Base styles */
@media screen and (min-width: 768px) and (max-width: 1366px) {
  /* Keep existing base styles... */
  body {
    font-size: 1.2rem;
  }

  .grid {
    grid-template-columns: repeat(var(--cols), 42px);
    grid-template-rows: repeat(var(--rows), 42px);
    gap: 2px;
    margin: 0.5vh auto;
  }

  .cell {
    width: 100%;
    height: 100%;
    border-width: 2px;
    border-radius: 4px;
  }

  .tile {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 4px;
  }

  .tile > span {
    font-size: 20px;
  }

  .tile .score {
    font-size: 9px;
    right: 3px;
    bottom: 2px;
  }

  .special {
    font-size: 16px;
  }

  .game-stats {
    padding: 6px 12px;
    max-width: 450px;
    margin-top: 2px;
  }

  .game-stats-content {
    gap: 12px;
  }

  #timer,
  #score {
    width: 110px;
    font-size: 1.2rem;
    padding: 6px 10px;
  }

  #mini-logo img {
    width: 40px;
  }

  #controlPanel {
    margin-top: 4px;
    padding: 4px;
    max-width: 380px;
  }

  #controlPanel button {
    font-size: 1rem;
    padding: 6px 12px;
    max-height: 36px;
    min-width: 90px;
    width: clamp(90px, 18vw, 130px);
  }

  #end-note {
    font-size: 0.9rem;
    height: 30px;
    padding: 6px;
    margin-top: 2px;
    max-width: 100%;
  }

  #gameBody {
    width: min(95vw, 550px);
    overflow: visible;
  }

  #gamePage #appScreen {
    height: 100vh;
    overflow-y: auto;
  }
}

/* SMALL TABLETS - iPad Mini (768px-900px) */
@media screen and (min-width: 768px) and (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(var(--cols), 48px);
    grid-template-rows: repeat(var(--rows), 48px);
    margin: 0.3vh auto;
  }

  .tile > span {
    font-size: 21px;
  }

  .tile .score {
    font-size: 10px;
  }

  .special {
    font-size: 17px;
  }

  #timer,
  #score {
    width: 115px;
    font-size: 1.25rem;
  }

  #controlPanel button {
    font-size: 1.1rem;
    min-width: 95px;
  }

  #end-note {
    font-size: 0.95rem;
    height: 28px;
  }
}

/* MEDIUM TABLETS - Standard iPad (810px-833px) */
@media screen and (min-width: 800px) and (max-width: 833px) {
  .grid {
    grid-template-columns: repeat(var(--cols), 50px);
    grid-template-rows: repeat(var(--rows), 50px);
  }

  .tile > span {
    font-size: 35px;
  }

  .tile .score {
    font-size: 16px;
  }

  .special {
    font-size: 28px;
  }

  #timer,
  #score {
    width: 180px;
    font-size: 1.9rem;
  }

  #controlPanel button {
    font-size: 1.7rem;
    min-width: 155px;
  }

  #end-note {
    font-size: 1.3rem;
    height: 45px;
  }
}

/* LARGE TABLETS - iPad Pro Portrait + Large Android Tablets (834px+) */
/* Now catches iPad Pro portrait (834px) properly */
@media screen and (min-width: 834px) and (max-width: 1366px) {
  .grid {
    grid-template-columns: repeat(var(--cols), 58px);
    grid-template-rows: repeat(var(--rows), 58px);
    gap: 2px;

    /* Enhanced centering for iPad Pro */
    margin: 0.5vh auto;
    justify-self: center;
    /* Center within its grid container */
    align-self: center;
    /* Center vertically if needed */

    /* Ensure proper width calculation */
    width: fit-content;

    /* Force centering with flexbox parent */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Alternative approach - adjust the parent container */
  #gameBody {
    width: min(95vw, 550px);
    overflow: visible;

    /* Enhanced centering */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    /* Ensure no offset */
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .tile > span {
    font-size: 31px;
  }

  .tile .score {
    font-size: 15px;
  }

  .special {
    font-size: 21px;
  }

  #timer,
  #score {
    width: 170px;
    font-size: 1.8rem;
  }

  #controlPanel button {
    font-size: 1.6rem;
    min-width: 145px;
  }

  #end-note {
    font-size: 1.15rem;
    height: 40px;

    /* Also center the end note */
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (min-width: 834px) and (max-width: 1366px) {
  .grid {
    grid-template-columns: repeat(var(--cols), 68px);
    grid-template-rows: repeat(var(--rows), 68px);
    gap: 4px;
  }
}

/* ===== DESKTOP SCREENS ===== */

/*@media screen and (min-width: 768px)  {
    .grid {
        grid-template-columns: repeat(var(--cols), 42px);
        grid-template-rows: repeat(var(--rows), 42px);
        gap: 2px;
        margin: auto 0.5vh auto;
    }
    img.page-logo {
      width: 300px;
    }
}*/

@media screen and (min-width: 834px) and (max-width: 1000px) {
  .grid {
    grid-template-columns: repeat(var(--cols), 56px);
    grid-template-rows: repeat(var(--rows), 56px);
  }
}

@media (min-width: 376px) and (max-height: 801px) {
  #end-note {
    font-size: 0.9rem;
    height: 35px;
    margin: 12px 0;
    padding-top: 8px;
  }

  .game-stats {
    margin-top: 20px;
  }

  #controlPanel button {
    height: 31px;
    font-weight: 500;
    font-size: 1rem;
  }
}

@media screen and (min-width: 834px) and (max-height: 1110px) {
  .grid {
    grid-template-columns: repeat(var(--cols), 50px);
    grid-template-rows: repeat(var(--rows), 50px);
  }
}

/* Container for the two-column layout */
.results-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

/* Individual column styling */
.results-column {
  flex: 1;
}






/* Dark theme support */
body.dark-theme .game-number-display {
  color: #bbb;
}

/* Responsive sizing */
@media (max-width: 600px) {
  .game-number-display {
    min-width: 35px;
    height: 36px;
    font-size: 1.3rem;
    padding: 0 16px;
    margin: 0 10px;
  }
}


.game-number-display {
    display: inline-flex;
  visibility: hidden; /* hidden by default */
  align-items: center;
  justify-content: center;
  min-width: 90px;
  height: 32px;
  border-radius: 8px;
  font-size: 1.5rem;
  font-weight: 600;
  color: #b1b1b1;
  padding: 18px 0 20px 0;
  margin: 0 8px;
}




/* ADD: Show game number only when body has "gotd" class */
body.gotd .game-number-display {
  display: inline-flex;
  visibility: visible;
}