:root {
  --bg-color: #f0f0f0;
  --grid-color: #333;
  --cell-size: min(60px, calc((100vw - 60px) / 5));
  --border-radius: 4px;
  --cell-color-default: #e4e4e4;
  --cell-color-active: #ffd700;
  --font-color: #333;
}

body {
  background-color: var(--bg-color);
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  color: var(--font-color);
}

[hidden] {
  display: none !important;
}

#instructions {
  margin: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 16px;
}

header {
  background-color: var(--grid-color);
  color: white;
  display: flex;
  min-height: 64px;
  padding: 12px 20px;
  box-sizing: border-box;
  font-family: "Bricolage Grotesque", sans-serif;
  text-align: center;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.site-brand {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.22em;
}

header > div,
header .flex {
  display: flex;
  align-items: center;
  gap: 16px;
}

header button {
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}

header svg {
  display: block;
  width: 28px;
  height: 28px;
}

a {
  all: unset;
}

.remove_link_colour {
  a,
  a:hover,
  a:focus,
  a:active {
    color: inherit;
    text-decoration: none;
  }
}

#game-display {
  display: flex;
  flex-direction: column;
}

#welcome-intro-display {
  display: none;
}

.main-welcome {
  background-color: #f7fafc; /* bg-gray-100 - light gray background */
  display: flex; /* flex - enables flexbox */
  flex-direction: column; /* flex-col - stack children vertically */
  align-items: center; /* items-center - center items horizontally in a column */
  justify-content: center; /* justify-center - center items vertically */
  min-height: calc(100vh - 64px);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-4 {
  margin-bottom: 1rem;
}

.text-sm {
  font-size: 0.875rem;
}

.text-5xl-font-bold-mb-2 {
  font-size: 3rem; /* text-5xl - a large font size, 3rem is an approximate equivalent */
  font-weight: bold; /* font-bold - makes the font weight bold */
  margin-bottom: 0.5rem; /* mb-2 - sets a margin at the bottom, 0.5rem is an approximate equivalent */
}

.text-2xl-mb-8 {
  font-size: 1.5rem; /* text-2xl - a larger font size, 1.5rem is an approximate equivalent */
  margin-bottom: 2rem; /* mb-8 - sets a larger margin at the bottom, 2rem is an approximate equivalent */
}

.flex-gap-4-justify-center-mb-8 {
  display: flex; /* flex - enables flexbox */
  gap: 1rem; /* gap-4 - sets space between flex items, 1rem is an approximate equivalent */
  justify-content: center; /* justify-center - centers the flex items along the main axis */
  margin-bottom: 2rem; /* mb-8 - sets a larger margin at the bottom, 2rem is an approximate equivalent */
}

.text-center {
  text-align: center; /* text-center - centers the text horizontally within the element */
}

.svg-container {
  position: absolute;
  top: 0; /* Align to the top edge of the header */
  right: 0; /* Align to the right edge of the header */
  padding: 25px;
}

#game-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 0 16px 48px;
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--shape-columns, 5), var(--shape-cell-size, var(--cell-size)));
  grid-template-rows: repeat(var(--shape-rows, 5), var(--shape-cell-size, var(--cell-size)));
  grid-gap: 5px;
  justify-content: center;
  padding: 20px;
  touch-action: none;
  user-select: none;
}

.grid[data-shape="pyramid"] {
  --shape-cell-size: min(52px, calc((100vw - 80px) / 9));
}

.grid[data-shape="diamond"],
.grid[data-shape="orbit"],
.grid[data-shape="crossroads"] {
  --shape-cell-size: min(58px, calc((100vw - 70px) / 7));
}

.cell {
  width: var(--shape-cell-size, var(--cell-size));
  height: var(--shape-cell-size, var(--cell-size));
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cell-color-default);
  border-radius: var(--border-radius);
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  border: 0;
  position: relative;
  padding: 0;
  color: var(--font-color);
  font-family: inherit;
  touch-action: none;
}

.cell.active {
  background-color: var(--cell-color-active);
  font-weight: bold;
}

.cell.active::after {
  content: attr(data-step);
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
  line-height: 1;
  opacity: 0.6;
}

.cell.previous-path {
  box-shadow: inset 0 0 0 3px rgba(245, 158, 11, 0.5);
}

.cell.best-path {
  background-color: #f4bf45;
  color: #111827;
  font-weight: 800;
}

.cell-invalid {
  animation: cellShake 0.25s ease-in-out;
}

@keyframes cellShake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

#sum-display {
  font-size: 24px;
  font-weight: bold;
}

.score-row {
  display: flex;
  justify-content: space-between;
  width: min(440px, 88vw);
  margin-top: 20px;
  font-size: 20px;
  font-weight: 800;
}

#start-button {
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: var(--border-radius);
  background-color: var(--grid-color);
  color: white;
  cursor: pointer;
  display: block;
}

#timer {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.game-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(560px, 92vw);
  margin-top: 20px;
  color: #4b5563;
  font-size: 14px;
  font-weight: 700;
}

.message-display {
  min-height: 24px;
  margin: 10px 0 0;
  color: #4b5563;
  text-align: center;
}

.attempt-feedback,
.result-panel {
  width: min(520px, 92vw);
  box-sizing: border-box;
  margin-top: 20px;
  padding: 22px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
  text-align: center;
}

.feedback-kicker {
  margin: 0 0 6px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.feedback-score,
.result-score {
  display: block;
  margin: 4px 0;
  font-size: 32px;
  font-weight: 800;
}

.attempt-feedback p,
.result-panel p {
  margin-top: 8px;
}

.running-total {
  font-weight: 800;
}

.result-panel h2 {
  margin: 4px 0;
  font-size: 30px;
}

.result-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  color: #4b5563;
  font-size: 12px;
}

.result-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.result-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.attempt-feedback #next-round-button {
  min-width: min(100%, 290px);
  margin-top: 18px;
  padding-block: 12px;
}

.mobile-round-action {
  display: none;
}

.round-recap {
  margin-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.round-recap-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #e5e7eb;
}

#share-result-button {
  width: 100%;
  margin-top: 18px;
  padding-block: 12px;
}

.share-status {
  min-height: 20px;
  margin: 8px 0 0;
  color: #4b5563;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

#stats-share-status {
  margin-bottom: 0;
}

.whirlie-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding: 18px;
  background: #f7f7f7;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  text-align: left;
}

.whirlie-card-copy {
  min-width: 0;
}

.whirlie-card-eyebrow {
  margin: 0 0 4px !important;
  color: #c35f00;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.whirlie-card h3 {
  margin: 0;
  color: #111827;
  font-size: 19px;
  line-height: 1.2;
}

.whirlie-card-copy > p:last-child {
  margin: 5px 0 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.4;
}

.whirlie-card-link {
  flex: 0 0 auto;
  padding: 10px 14px;
  background: #fff;
  border: 2px solid #111827;
  border-radius: 999px;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.whirlie-card-link:hover,
.whirlie-card-link:focus-visible {
  background: #111827;
  color: #fff;
}

.legend-player { background: #f4bf45; }
.legend-optimal { background: rgb(76, 162, 76); }
.legend-overlap {
  background: linear-gradient(45deg, rgba(34, 193, 195, 1), rgba(253, 187, 45, 1));
}

.winning-cell {
  background-color: rgb(76, 162, 76);
  color: white; /* Adjust text color if needed */
  font-weight: bold;
}

.cell.overlap {
  /* Choose a color that indicates an overlap */
  background: rgb(34, 193, 195);
  background: linear-gradient(
    45deg,
    rgba(34, 193, 195, 1) 0%,
    rgba(253, 187, 45, 1) 100%
  );
  color: white; /* Adjust text color if needed */
  font-weight: bold;
}

.cell.active.overlap {
  background: rgb(34, 193, 195);
  background: linear-gradient(
    45deg,
    rgba(34, 193, 195, 1) 0%,
    rgba(253, 187, 45, 1) 100%
  );
  /* Choose a color that indicates an overlap */
  color: white; /* Adjust text color if needed */
  font-weight: bold;
}

/* Button to open the modal */
#myBtn {
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
  background-color: #f0f0f0;
  border: none;
  border-radius: 50%;
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  border-radius: 5px;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.statistics-container {
  /* Add styles for the container */
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  border-radius: 5px;
}

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

.stat-item {
  text-align: center;
}

.stat-item span:first-child {
  display: block;
  font-size: 2em;
  font-weight: bold;
}

/* Guess Distribution Bar (sample) */
.distribution-bar {
  background-color: #4caf50; /* Example color */
  color: white;
  text-align: right;
  padding-right: 10px;
  margin-bottom: 4px;
  border-radius: 5px;
}

/* Share Button */
.share-button {
  background-color: #4caf50; /* Example color */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  margin-top: 20px;
  cursor: pointer;
  display: block;
  width: 100%;
}

.title {
  color: #333;
}

.game-name {
  color: #f77f00;
}

.description {
  font-size: 1.1em;
  margin-bottom: 20px;
  color: #555;
}

.instructions-container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  background: #fbfbfb;
  margin-top: 6%;
  padding: 0.5%;
  padding-bottom: 1.6%;
  border-radius: 8px;
}

.instructions-list {
  text-align: left;
}

.instructions-list li {
  margin-bottom: 10px;
  color: #666;
  list-style: inside;
}

.letsplay-button {
  background-color: #f77f00;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1em;
  margin-top: 20px;
  transition: background-color 0.3s ease;
}

.letsplay-button:hover {
  background-color: #fc9d28;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.button-outline {
  padding: 0.5rem 1.5rem; /* py-2 and px-6 */
  border-radius: 9999px; /* rounded-full */
  border: 2px solid black; /* button-outline typically means a border */
  background-color: transparent; /* Assuming 'button-outline' has a transparent background */
  font-weight: bold; /* Tailwind buttons often have bold text */
  transition: background-color 0.2s, color 0.2s; /* Smooth transition for hover effects */
}

.button-outline:hover {
  background-color: black; /* Change as needed */
  color: white; /* Change as needed */
}

.button-solid {
  padding: 0.5rem 1.5rem; /* py-2 and px-6 */
  border-radius: 9999px; /* rounded-full */
  background-color: black; /* Assuming 'button-solid' has a solid background color */
  color: white; /* Text color for contrast */
  border: none; /* No border for a solid button */
  font-weight: bold; /* Bold text is common in Tailwind buttons */
  transition: background-color 0.2s, color 0.2s; /* Smooth transition for hover effects */
}

.button-solid:hover {
  background-color: #333; /* Darker shade on hover, adjust as needed */
  /* color: #ddd; Adjust text color on hover as needed */
}

.button-solid:disabled {
  opacity: 0.55;
  cursor: wait;
}

.max-w-sm-mx-auto-my-10-bg-white-shadow-lg-rounded-lg-overflow-hidden {
  max-width: 20rem; /* max-w-sm: Tailwind class for small max-width */
  margin-left: auto; /* mx-auto: centers the div */
  margin-right: auto; /* mx-auto: centers the div */
  margin-top: 2.5rem; /* my-10: Tailwind applies margin-top with value '10' */
  margin-bottom: 2.5rem; /* my-10: Tailwind applies margin-bottom with value '10' */
  background-color: white; /* bg-white: Background color white */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg: Large box shadow */
  border-radius: 0.5rem; /* rounded-lg: Large border radius */
  overflow: hidden; /* overflow-hidden: Cuts off any child content that goes outside the div */
  position: relative;
}

.px-6-py-4 {
  padding: 1rem 1.5rem; /* px-6 and py-4: Tailwind classes for padding */
}

.font-bold-text-xl-mb-2-text-gray-800 {
  font-weight: bold; /* font-bold: Bold font */
  font-size: 1.25rem; /* text-xl: Extra large text */
  margin-bottom: 0.5rem; /* mb-2: Margin bottom value '2' */
  color: #2d3748; /* text-gray-800: Dark grey color */
}

.grid-grid-cols-4-gap-4-mb-4 {
  display: grid; /* grid: Sets display to grid */
  grid-template-columns: repeat(4, 1fr); /* grid-cols-4: Four equal columns */
  gap: 1rem; /* gap-4: Gap between columns and rows */
  margin-bottom: 1rem; /* mb-4: Margin bottom value '4' */
}

.text-3xl-font-bold {
  font-size: 1.875rem; /* text-3xl: Three times larger than the base size */
  font-weight: bold; /* font-bold: Bold font */
}

.text-sm-text-gray-600 {
  font-size: 0.875rem; /* text-sm: Small text */
  color: #718096; /* text-gray-600: Medium grey color */
}

.flex-justify-between-mb-1 {
  display: flex; /* flex: Sets display to flex */
  justify-content: space-between; /* justify-between: Space between flex items */
  margin-bottom: 0.25rem; /* mb-1: Margin bottom value '1' */
}

.text-gray-700 {
  color: #4a5568; /* text-gray-700: Darker grey color */
}

.flex-items-center-text-sm-text-gray-600-mb-4 {
  display: flex; /* flex: Sets display to flex */
  align-items: center; /* items-center: Centers items vertically */
  font-size: 0.875rem; /* text-sm: Small text */
  color: #718096; /* text-gray-600: Medium grey color */
  margin-bottom: 1rem; /* mb-4: Margin bottom value '4' */
}

/* Share button styling */
.bg-green-500-hover-bg-green-600-text-white-font-bold-py-2-px-4-rounded-full {
  background-color: #48bb78; /* bg-green-500: Green background */
  color: white; /* text-white: White text */
  font-weight: bold; /* font-bold: Bold font */
  padding: 0.5rem 1rem; /* py-2 and px-4: Padding on Y and X */
  border-radius: 9999px; /* rounded-full: Fully rounded corners */
  transition: background-color 0.2s; /* Smooth background color transition on hover */
}

.bg-green-500-hover-bg-green-600-text-white-font-bold-py-2-px-4-rounded-full:hover {
  background-color: #38a169; /* hover:bg-green-600: Darker green on hover */
}


.h-6-w-6-mr-2 {
  height: 1.5rem; /* h-6: Height value '6' */
  width: 1.5rem; /* w-6: Width value '6' */
  margin-right: 0.5rem; /* mr-2: Right margin value '2' */
}

.flex-justify-center-mb-4 {
  display: flex; /* Enables flexbox */
  justify-content: center; /* Centers flex children horizontally within the container */
  margin-bottom: 1rem; /* Sets bottom margin, equivalent to Tailwind's 'mb-4' */
}

/* Style for the close button */
.close-button {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  border: none;
  font-size: 1.5rem; /* Adjust size as needed */
  cursor: pointer;
  padding: 0.5rem; /* Adjust padding as needed */
}

/* Optional: Style for the close button on hover */
.close-button:hover {
  color: #333; /* Darker color on hover for better user experience */
}


/* Overlay for the Modal */
.Modal-module_modalOverlay__cdZDa {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* High z-index to ensure it's on top */
}

/* Modal Content */
.Modal-module_content__TrPIX {
  background-color: white;
  padding: 32px;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  max-width: 520px;
  width: 100%;
  position: relative;
  margin: 16px;
}

/* Modal Heading */
.Modal-module_heading__u2uxI {
  margin: 4px 36px 8px;
  color: #111827;
  font-size: clamp(28px, 7vw, 38px);
  line-height: 1.05;
  text-align: center;
}

.instructions-eyebrow {
  margin: 2px 36px 8px;
  color: #f77f00;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
}

.instructions-intro {
  margin: 0 0 24px;
  color: #6b7280;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.instructions-list {
  display: grid;
  gap: 12px;
}

.instruction-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  background: #f7f7f7;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.instruction-number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: #111827;
  border-radius: 10px;
  color: white;
  font-size: 15px;
  font-weight: 800;
}

.instruction-step h3 {
  margin: 0 0 3px;
  color: #111827;
  font-size: 17px;
}

.instruction-step p {
  margin: 0;
  color: #5b6472;
  font-size: 14px;
  line-height: 1.4;
}

.instructions-challenge {
  margin: 4px 0 0;
  padding: 12px 16px;
  background: #fff5e8;
  border-radius: 10px;
  color: #7c3e00;
  font-size: 14px;
  text-align: center;
}

/* Close Button */
.Modal-module_closeIcon__TcEKb {
  position: absolute;
  top: 10px;
  right: 15px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 24px;
}

#stats-container {
  position: fixed;
  inset: 0;
  z-index: 900;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}

#stats-container .max-w-sm-mx-auto-my-10-bg-white-shadow-lg-rounded-lg-overflow-hidden {
  width: min(100%, 24rem);
  max-width: 24rem;
  margin: 0;
}

.stats-card {
  position: relative;
  width: min(100%, 430px);
  box-sizing: border-box;
  padding: 30px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  text-align: center;
}

.stats-card h2 {
  margin: 4px 28px 6px;
  color: #111827;
  font-size: 30px;
  line-height: 1.08;
}

.stats-intro {
  margin: 0 0 22px;
  color: #6b7280;
  font-size: 15px;
  font-weight: 600;
}

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

.stats-metric {
  display: grid;
  align-content: center;
  min-height: 88px;
  padding: 12px;
  background: #f7f7f7;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.stats-metric-highlight {
  background: #fff5e8;
  border-color: #fed7aa;
}

.stats-metric strong {
  color: #111827;
  font-size: 30px;
  line-height: 1;
}

.stats-metric span {
  margin-top: 7px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.stats-latest-result {
  margin-top: 16px;
  padding: 16px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.stats-latest-result .result-score {
  font-size: 28px;
}

.stats-latest-result p:last-child {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 14px;
}

.stats-share-action {
  width: 100%;
  margin-top: 16px;
  padding-block: 12px;
}

@media (max-width: 480px) {
  .whirlie-card {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
  }

  .whirlie-card-link {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
  }

  .stats-card {
    max-height: calc(100vh - 32px);
    padding: 26px 18px 20px;
    overflow-y: auto;
  }

  .stats-card h2 {
    font-size: 28px;
  }
}

@media (max-width: 640px) {
  .attempt-feedback #next-round-button {
    display: none;
  }

  #game-container.round-action-visible {
    padding-bottom: 116px;
  }

  .mobile-round-action {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 120;
    display: flex;
    justify-content: center;
    padding: 22px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, #f0f0f0 72%, rgba(240, 240, 240, 0));
    pointer-events: none;
  }

  .mobile-round-action .button-solid {
    width: min(100%, 430px);
    min-height: 52px;
    padding-inline: 24px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.24);
    font-size: 17px;
    pointer-events: auto;
  }
}

/* SVG Icon */
.game-icon {
  fill: #333; /* Color of the SVG icon */
}

/* Additional Styling for Text and Lists */
p, ol {
  color: #333;
  font-size: 16px; /* Adjust as needed */
}

ol {
  padding-left: 20px;
  text-align: left;
}

h4 {
  text-align: center;
  color: #333;
  margin-top: 20px;
}

/* Ensuring the modal is centered */
.Modal-module_paddingTop__xhWdR {
  padding-top: 32px;
}

@media (max-width: 480px) {
  .Modal-module_content__TrPIX {
    max-height: calc(100vh - 32px);
    padding: 26px 18px 20px;
    overflow-y: auto;
  }

  .Modal-module_paddingTop__xhWdR {
    padding-top: 26px;
  }

  .instruction-step {
    padding: 12px;
  }

  .instructions-intro {
    margin-bottom: 16px;
  }

  .instructions-list {
    gap: 9px;
  }

  .instructions-challenge {
    padding-block: 10px;
  }
}

/* Any additional specific styling */
/* ... */

/* Gameplay info banner */
.info-banner {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0;
  width: min(560px, 92vw);
}

.info-banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.info-banner-title {
  font-weight: 700;
}

.close-info {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.info-list {
  margin: 8px 0 6px 18px;
}

.info-actions {
  text-align: right;
}