:root{
    --pink: #ff99b1;
    --red: #d22a52;
    --lightRed: #f53765;
    --teal: #1EA2AA;
  }
  
  .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 15px;
    margin-bottom: 15px;
  }
  
  .button-container button {
    border: 2px solid var(--red);
    padding: 10px;
    color: var(--red);
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    background-color: white;
    transition: background-color .2s, color .2s;
    position: relative;
  }
  
  .button-container button:hover,
  .button-container button.active {
    background-color: var(--red);
    color: white;
  }
  
  #timer {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    text-align: -webkit-center;
    margin-bottom: 10px;
  }
  
  #record {
    font-size: 1.2em;
    text-align: center;
    text-align: -webkit-center;
    margin-bottom: 15px;
    color: var(--teal);
  }
  
  #numberPicker.show {
    transform: scale(1) translate(0, 50%);
    transition: transform 0.2s cubic-bezier(0.6, 1, 0.7, 1.5), opacity 0.2s;
    opacity: 1;
  }
  
  #numberPicker {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 150px;
    width: 100%;
    box-shadow: 0 0 20px #b3b3b3;
    border-radius: 8px;
    overflow: hidden;
    top: -100%;
    right: 200%;
    position: absolute;
    background: white;
    opacity: 0;
    transition: transform 0s ease, opacity 0s;
    transform: scale(0.8) translate(0, 50%);
    z-index: 10;
  }
  
  @media (max-width: 767px) {
    #numberPicker {
      max-width: 100%;
      position: fixed;
      transform: revert !important;
    }
  
    #numberPicker.show {
      top: revert !important;
      bottom: 0 !important;
      left: 0 !important;
    }
  
    #numberPicker button {
      aspect-ratio: 16/9 !important;
    }
  }
  
  #numberPicker button {
    background: none;
    border: none;
    aspect-ratio: 1.1;
    font-weight: 500;
    font-size: 1.2em;
    transition: box-shadow 0.3s;
    cursor: pointer;
  }
  
  #numberPicker button:hover {
    box-shadow: 0px -1px 6px 0px #dddddd inset;
  }
  
  #numberPicker button:active {
    box-shadow: 0px -1px 6px 0px #999999 inset;
  }
  
  #game {
    position: relative;
    margin-inline: var(--padding);
  }
  
  #board {
    --cellSize: 50px;
    max-width: calc(var(--cellSize) * var(--boardSize));
    width: 100%;
    display: grid;
    grid-template-columns: repeat(var(--boardSize), 1fr);
    border-radius: 8px;
    overflow-x: auto;
    margin-inline: auto;
    scrollbar-color: #F98DA7 #E8E8E8;
    scrollbar-width: thin;
  }
  
  #board::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  
  #board::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #E8E8E8;
    border-radius: 5px;
  }
  
  #board::-webkit-scrollbar-thumb {
    background: #F98DA7;
    border-radius: 5px;
  }
  
  .cell {
    border: 1px solid #fdb7c7;
    width: 100%;
    height: 100%;
    min-width: 40px;
    max-width: var(--cellSize);
    max-height: var(--cellSize);
    aspect-ratio: 1;
    display: flex;
    font-weight: 600;
    flex-direction: column;
    position: relative;
    justify-content: space-between;
  }
  
  .number {
    align-items: center;
    justify-content: center;
    transition: background 0.2s, box-shadow 0.4s;
    cursor: pointer;
  }
  
  .number:hover {
    border-color: var(--red);
    background-color: #ffd8e1;
  }
  
  .number.active {
    border: 3px solid #1ea2aa;
    background-color: white;
    box-shadow: 0 0 10px 0px #1ea2aa8c, 0 0 10px 0px #1ea2aa8c inset;
    z-index: 1;
  }
  
  .hint {
    background-color: var(--red);
    color: white;
  }
  
  .hint:before {
    content: "";
    display: block;
    width: 140%;
    height: 0px;
    position: absolute;
    border-top: 3px var(--pink) solid;
    transform: rotate(45deg);
    transform-origin: top left;
  }
  
  .cell span {
    display: flex;
    justify-content: center;
    width: 50%;
    cursor: pointer;
    position: relative;
  }
  
  .cell span:first-of-type {
    align-self: end;
  }
  
  .border {
    background-color: var(--red);
  }
  
  .mobile-only {
    display: none;
  }
  
  [role="tooltip"] {
    box-shadow: 0 0 5px rgb(81, 81, 81);
    color: black;
    background: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 13px;
    z-index: 10;
    width: max-content;
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(100%, 0);
    line-height: 1.4;
    list-style: none;
    text-shadow: none;
    text-align: center;
    text-align: -webkit-center;
  }
  
  [role="tooltip"] li {
    padding-block: 2px;
  }
  
  [role="tooltip"] li:not(:last-of-type) {
    border-bottom: 1px solid rgba(204, 204, 204, 0.7);
  }
  
  [role="tooltip"].left {
    right: unset;
    left: 0;
    transform: translate(-100%, 0);
  }
  
  [role="tooltip"].longList {
    columns: 2;
  }
  
  [role="tooltip"].top {
    transform: translate(100%, -100%);
  }
  
  [role="tooltip"].top.left {
    transform: translate(-100%, -100%);
  }
  
  .cell span.show {
    text-shadow:
      2px 2px 2px var(--teal),
      -2px 2px 2px var(--teal),
      2px -2px 2px var(--teal),
      -2px -2px 2px var(--teal);
  }
  
  .cell span.show [role="tooltip"] {
    display: block;
  }
  
  @media (max-width: 767px) {
    .button-container {
      max-width: 250px;
      margin-inline: auto;
    }
  
    .button-container button:not(.mobile) {
      display: none;
    }
  
    .button-container button.mobile-only {
      display: block;
    }
  
    .show [role="tooltip"] {
      position: fixed;
      bottom: 0;
      top: revert;
      transform: none !important;
      left: 0;
      width: 100%;
      margin: 0;
      height: 100%;
      padding: 15px 15px 20px 15px;
      max-height: 23vh;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      justify-items: center;
      gap: 10px;
    }
  
    .show [role="tooltip"].longList {
      grid-template-columns: 1fr 1fr 1fr;
    }
  
    .show [role="tooltip"].longHints {
      grid-template-columns: 1fr 1fr;
    }
  
    [role="tooltip"] li:not(:last-of-type) {
      border-bottom: 0;
    }
  }