/* Manually copied from Bootstrap 4.4.1 */
body {
  font-size: 0.9rem;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: start;
  background-color: #f7f8fb;
  color: #1a2233;
}

a {
  color: #1b64a2;
  text-decoration: none;
  background-color: transparent; }
  a:hover {
    color: #103c60;
    text-decoration: underline; }

.nav-link:hover, .nav-link:focus {
  text-decoration: none; }

.dropdown-item:hover, .dropdown-item:focus {
  text-decoration: none; }

h1, .h1 {
  font-size: 1.5rem;
  font-weight: 700;
}

h3, .h3 {
  font-size: 1.1rem;
  font-weight: 600;
}

.mr-1 {
  margin-right: 0.25rem }

.ml-2 {
  margin-left: 0.5rem }

.ml-4 {
  margin-left: 1.5rem }

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.small {
  font-size: 80%;
  font-weight: 400;
}

.btn-sm {
  font-size: 1rem;
}

.btn-lg {
  font-size: 0.9rem;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0; }
  .no-gutters > .col,
  .no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0; }


.navbar-brand {
  display: inline-block;
}

.navbar-toggler {
  font-size: 0.9rem;
}

.navbar {
  padding: 0.1rem 1rem;
}

.nav-pills .nav-link.active {
  color: #fff;
  background-color: #1b64a2;
}

.form-group {
  margin-bottom: 1rem;
}

.btn-primary {
  color: #fff;
  background-color: #1b64a2;
  border-color: #1b64a2; }
  .btn-primary:hover {
    color: #fff;
    background-color: #165081;
    border-color: #144976; }
  .btn-primary:focus, .btn-primary.focus {
    color: #fff;
    background-color: #165081;
    border-color: #144976;
    box-shadow: 0 0 0 0.2rem rgba(61, 123, 176, 0.5); }
  .btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #1b64a2;
    border-color: #1b64a2; }
  .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
  .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #144976;
    border-color: #12426b; }
    .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
    .show > .btn-primary.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgba(61, 123, 176, 0.5); }

.btn-secondary {
  color: #fff;
  background-color: #665188;
  border-color: #665188; }
  .btn-secondary:hover {
    color: #fff;
    background-color: #544370;
    border-color: #4e3e68; }
  .btn-secondary:focus, .btn-secondary.focus {
    color: #fff;
    background-color: #544370;
    border-color: #4e3e68;
    box-shadow: 0 0 0 0.2rem rgba(125, 107, 154, 0.5); }
  .btn-secondary.disabled, .btn-secondary:disabled {
    color: #fff;
    background-color: #665188;
    border-color: #665188; }
  .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
  .show > .btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: #4e3e68;
    border-color: #483960; }
    .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
    .show > .btn-secondary.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgba(125, 107, 154, 0.5); }

.btn-outline-info {
  color: #c3eafb;
  border-color: #c3eafb; }
  .btn-outline-info:hover {
    color: #212529;
    background-color: #c3eafb;
    border-color: #c3eafb; }
  .btn-outline-info:focus, .btn-outline-info.focus {
    box-shadow: 0 0 0 0.2rem rgba(195, 234, 251, 0.5); }
  .btn-outline-info.disabled, .btn-outline-info:disabled {
    color: #c3eafb;
    background-color: transparent; }
  .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
  .show > .btn-outline-info.dropdown-toggle {
    color: #212529;
    background-color: #c3eafb;
    border-color: #c3eafb; }
    .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
    .show > .btn-outline-info.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgba(195, 234, 251, 0.5); }

@media (max-width: 575.98px) {
  .game-headline {
    font-size: 1.25rem;
  }
}

/* Custom changes to Bootstrap 4 */
#PossibilityMode {
  position: absolute;
}



/* End manual copy Bootstrap 4*/

.navbar {
  background: #12446e !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
  .navbar .navbar-nav .nav-link {
    transition: 0.2s all ease;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500; }
    .navbar .navbar-nav .nav-link:hover {
      color: #fff; }

.navbar-toggler .navbar-toggler-text {
  font-size: 0.7rem; }

.navbar-brand h1 {
  font-size: 1.5rem; }

.homepagelogo {
  font-size: 1.5rem;
  margin-bottom: .5rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  letter-spacing: -0.01em;
}

main {
  padding: 0 15px; }
  main h2 {
    text-align: center; }

ul {
  padding-left: 1.5rem; }


  /* MAYBE THIS IS BOOTSTRAP's End */

html, body {
  touch-action: manipulation;
}

aside {
  background: transparent; }
  aside .InsideBar {
    background: #fff;
    margin-bottom: 5px;
    border-radius: 3px; }
    aside .InsideBar .HeadingImage {
      margin: 0 auto 1rem; }
    aside .InsideBar h6 {
      display: inline;
      margin-left: 10px; }
  aside td {
    padding: 5px; }
  aside h6 {
    font-size: 0.9rem; }

#txtAdSkyscraper {
  text-align: center; }

#LeftSidebar {
  flex: 0 0 150px;
  min-width: 150px; }

#CentralColumn {
  min-width: 330px; }

.game-layout {
  width: 100%;
}

.game-layout > .py-2 {
  flex: 1 1 0;
  min-width: 0;
}

#Sudoku_M1 {
  display: none;
}

.game-layout > #Sidebar {
  flex: 0 0 400px;
  margin-left: 15px;
  max-width: 400px;
  min-width: 0;
}
  #Sidebar .ad-container {
    text-align: center; }

  .game-layout > #Sidebar .sidebar-content,
  .game-layout > #Sidebar [id^="sudoku_D"] {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip; }

  .game-layout > #Sidebar [id^="sudoku_D"] > div,
  .game-layout > #Sidebar [id^="sudoku_D"] iframe,
  .game-layout > #Sidebar [id^="google_ads_iframe"],
  .game-layout > #Sidebar iframe,
  .game-layout > #Sidebar ins {
    max-width: 100% !important;
    min-width: 0 !important; }


.sidebar-border-left {
  border-left: 1px solid #dee2e6;
}

@media (max-width: 971px) and (min-height: 971px) and (orientation: portrait) {
  .game-layout > #Sidebar {
    flex: 0 0 325px;
    max-width: 325px;
  }
  #Sidebar .sidebar-content {
    font-size: 0.75em;
  }
  #Sidebar .sidebar-content * {
    font-size: inherit !important;
  }
}

.nav-pills {
  margin-bottom: 1rem; }

.nav-pills > li > a {
  padding: 4px 5px;
  font-size: .82rem; }

#txtAdHeader {
  height: 90px;
  text-align: center; }

@media (min-width: 576px) {
  main {
    padding: 0 15px; }
    main h2 {
      text-align: left;
      margin-bottom: 1rem; } }

@media (min-width: 1400px) {
  #LeftSidebar {
    flex: 0 0 330px;
    min-width: 330px; } }

#playgrid-wrapper {
  max-width: 360px;
  min-width: 300px;
  margin: auto; }

#sudokutableBox {
  position: relative;
}

/* Distraction-free fullscreen: keep the entire main area available and scrollable.
   Navbar/footer live outside main so they aren't rendered in fullscreen.
   :fullscreen and :-webkit-full-screen must stay in separate rules — a browser that
   doesn't know one pseudo-class drops the whole rule if they're comma-joined. */
body > main:fullscreen {
  width: 100%;
  height: 100%;
  overflow: auto;
  font-size: 0.9rem;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: start;
  background-color: #f7f8fb;
  color: #1a2233;
}
body > main:-webkit-full-screen {
  width: 100%;
  height: 100%;
  overflow: auto;
  font-size: 0.9rem;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: start;
  background-color: #f7f8fb;
  color: #1a2233;
}
#sudokutable td {
  padding:0;
}

.puzzle-solve-rate-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  width: calc(100% - 32px);
  max-width: 460px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgb(27, 100, 162);
  color: #ffffff;
  text-align: center;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  opacity: 0;
  display: none;
  animation: none;
  font-size: 15px;
}

.puzzle-solve-rate-percent {
  color: rgb(255,204,0);
}

.puzzle-solve-rate-toast.is-visible {
  display: block;
  animation: puzzleSolveRateToastFade 4.6s ease forwards;
}

@keyframes puzzleSolveRateToastFade {
  0% {
    opacity: 0;
    transform: translate(-50%, -45%);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -56%);
  }
}

@media (max-width: 575.98px) {
  .puzzle-solve-rate-toast {
    width: calc(100% - 20px);
    padding: 9px 12px;
    font-size: 0.78rem;
  }
}

  #playgrid-wrapper #sudokutableBox {
    font-size: 1.5rem; }
  #playgrid-wrapper.board-small #sudokutableBox {
    font-size: 1.3rem; }
  #playgrid-wrapper.board-small #difficulty-label {
    display: none !important; }
  #playgrid-wrapper.number-large #sudokutableBox {
    font-size: 2rem; }
  #playgrid-wrapper.number-large.board-small #sudokutableBox {
    font-size: 1.4rem; }
  #playgrid-wrapper.number-xl #sudokutableBox {
    font-size: 2.5rem; }
  #playgrid-wrapper.number-xl.board-small #sudokutableBox {
    font-size: 1.5rem; }
  #playgrid-wrapper.number-small #sudokutableBox {
    font-size: 1.2rem; }
  #playgrid-wrapper.number-small.board-small #sudokutableBox {
    font-size: 1rem; }
  #playgrid-wrapper.possibility-small .POSSDIV,
  #playgrid-wrapper.possibility-small .posstable,
  #playgrid-wrapper.possibility-small .posstable16 {
    font-size: 10px; }
  #playgrid-wrapper.possibility-medium .POSSDIV,
  #playgrid-wrapper.possibility-medium .posstable,
  #playgrid-wrapper.possibility-medium .posstable16 {
    font-size: 12px; }
  #playgrid-wrapper.possibility-large .POSSDIV,
  #playgrid-wrapper.possibility-large .posstable,
  #playgrid-wrapper.possibility-large .posstable16 {
    font-size: 14px; }

table.sudokutable {
  border-collapse: collapse;
  width: 100%;
  height: 360px;
  margin: 0 auto 0.5rem;
  font-size: 1em;
  font-weight: 400;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(18, 68, 110, 0.10); }
  table.sudokutable .posstable,
  table.sudokutable .posstable16 {
    border-collapse: collapse;
    height: 100%;
    width: 100%; }
    table.sudokutable .posstable td,
    table.sudokutable .posstable16 td {
      padding: 0;
      line-height: 0;
      background-color: transparent; }
  table.sudokutable .bdr00,
  table.sudokutable .bdr10,
  table.sudokutable .bdr20,
  table.sudokutable .bdr01,
  table.sudokutable .bdr11,
  table.sudokutable .bdr21,
  table.sudokutable .bdr02,
  table.sudokutable .bdr12,
  table.sudokutable .bdr22 {
    width: 11%;
    height: 40px;
    line-height: 1;
    border: 1px solid #8e95a0; }
  table.sudokutable .bdr00,
  table.sudokutable .bdr10,
  table.sudokutable .bdr20 {
    border-top: 2px solid #2a3a50; }
  table.sudokutable .bdr00,
  table.sudokutable .bdr01,
  table.sudokutable .bdr02 {
    border-left: 2px solid #2a3a50; }
  table.sudokutable .bdr20,
  table.sudokutable .bdr21,
  table.sudokutable .bdr22 {
    border-right: 2px solid #2a3a50; }
  table.sudokutable .bdr02,
  table.sudokutable .bdr12,
  table.sudokutable .bdr22 {
    border-bottom: 2px solid #2a3a50; }

table.sudokutable td {
  position: relative;
  overflow: hidden; }

@keyframes sudoku-unit-complete {
  0% {
    background-color: #1995ff00;
  }
  50% {
    background-color: #1995ff33;
  }
  100% {
    background-color: #1995ff00;
  }
}

.unit-complete-anim::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #1995ff00;
  animation-name: sudoku-unit-complete;
  animation-duration: 500ms;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: var(--unit-anim-delay, 0ms);
  pointer-events: none;
  z-index: 1;
}

/* animateInfiniteBoxToCenter */
@keyframes infinite-box-to-center {
  0% {
    background-color: #2196f3;
  }
  50% {
    background-color: #1976d2;
  }
  100% {
    background-color: #2196f3;
  }
}
.anim-infinite-box-to-center {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  pointer-events: none;
  z-index: 1000;
  animation-name: infinite-box-to-center;
  animation-duration: 700ms;
  color: #fff;
}


  /* 16x16 grid special border classes */
  table.sudokutable .x16bdr00,
  table.sudokutable .x16bdr10,
  table.sudokutable .x16bdr20,
  table.sudokutable .x16bdr01,
  table.sudokutable .x16bdr11,
  table.sudokutable .x16bdr21,
  table.sudokutable .x16bdr02,
  table.sudokutable .x16bdr12,
  table.sudokutable .x16bdr22 {
    width: 6%;
    height: 25px;
    line-height: 1;
    border: 1px solid #8e95a0; }
  table.sudokutable .x16bdr00,
  table.sudokutable .x16bdr10,
  table.sudokutable .x16bdr20 {
    border-top: 2px solid #2a3a50; }
  table.sudokutable .x16bdr00,
  table.sudokutable .x16bdr01,
  table.sudokutable .x16bdr02 {
    border-left: 2px solid #2a3a50; }
  table.sudokutable .x16bdr20,
  table.sudokutable .x16bdr21,
  table.sudokutable .x16bdr22 {
    border-right: 2px solid #2a3a50; }
  table.sudokutable .x16bdr02,
  table.sudokutable .x16bdr12,
  table.sudokutable .x16bdr22 {
    border-bottom: 2px solid #2a3a50; }

table.Numbertable {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  font-size: 1.75em;}

table.Numbertable tr td {
  border: 1px solid #8e95a0;
  border-left: none;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
table.Numbertable tr td:first-child {
  border-left: 1px solid #8e95a0;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
table.Numbertable tr td:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
table.Numbertable tr td:hover {
  background: #d6e7f4;
  box-shadow: inset 0 0 0 2px #6f9fc4;
}

table.Numbertable tr td:active {
  background: #bad5ea;
  box-shadow: inset 0 0 0 2px #4f7fa5;
  font-weight: 700;
}

table.Numbertable tr td.active-number,
table.Numbertable tr td.active-number:hover {
  background: #a9cceb;
  font-weight: 700;
}

table.Numbertable tr td.used-number,
table.Numbertable tr td.used-number:hover {
  background: #d5dae0;
  box-shadow: none;
}

#priority-play-options {
  margin: auto;
  padding-bottom: 0.5em; }

#Grabber {
  width: 100%;
  text-align: center; }
  #Grabber .Numbertable {
    margin: auto;
    height: 36px;
    width: 100%;
    max-width: 360px; }

#GameControls {
  width: 100%;
  margin: auto;
  max-width: 360px;
  text-align: left; }
  #GameControls td {
    vertical-align: top; }
    #GameControls td:nth-child(2) {
      width: 150px;
      text-align: right; }
  #GameControls .GameControl-Button {
    display: inline-block;
    margin: 0 0 5px 0; }
    #GameControls .GameControl-Button .btn {
      min-width: 100px; }

#GameControls {
  max-width: 100%;
}
#GameControls .game-controls-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
#GameControls .game-controls-row .game-controls-item {
  width: 100%;
  max-width: none;
  padding: 0 !important;
}
#GameControls .game-controls-row .game-controls-item .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.85rem, 1.8vw, 0.62rem);
  line-height: 1;
  padding: 0.5rem 0;
  min-width: auto;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center;
  aspect-ratio: 4 / 1;
  font-weight: bold;
  width: 100%;
}

@media (max-width: 575.98px) {

  #GameControls .game-controls-row .game-controls-item .btn {
    font-size: clamp(0.75rem, 1.8vw, 0.62rem);
    line-height: 1;
    font-weight: bold;
  }

  #Grabber .Numbertable {
    margin-top: 8px;
  }

  #Sudoku_M1 {
    display:block;
    min-height: 50px;
    margin: 5px auto;
    max-width: 320px;
    overflow-x: hidden;
  }

  table.Numbertable tr td:hover {
      background: #c8e0f5;
  }

}

@media (max-width: 991px) {
  #GameControls .game-controls-row .game-controls-item .btn {
    aspect-ratio: 3 / 1;

  }
}
@media (min-width: 768px) {
  table.sudokutable,
  #GameControls,
  #Grabber .Numbertable {
    width: 100%;
    max-width: 500px; }
  #playgrid-wrapper.board-large {
    width: 100%;
    max-width: 500px; }
    #playgrid-wrapper.board-large.grid16x16 {
      width: 580px;
      max-width: 580px; }
    #playgrid-wrapper.board-large table.sudokutable {
      height: 450px; }
    #playgrid-wrapper.board-large .bdr00,
    #playgrid-wrapper.board-large .bdr10,
    #playgrid-wrapper.board-large .bdr20,
    #playgrid-wrapper.board-large .bdr01,
    #playgrid-wrapper.board-large .bdr11,
    #playgrid-wrapper.board-large .bdr21,
    #playgrid-wrapper.board-large .bdr02,
    #playgrid-wrapper.board-large .bdr12,
    #playgrid-wrapper.board-large .bdr22 {
      height: 50px; }
  #playgrid-wrapper.board-medium {
    width: 350px;
    max-width: 350px; }
    #playgrid-wrapper.board-medium table.sudokutable {
      height: 350px; }
    #playgrid-wrapper.board-medium .bdr00,
    #playgrid-wrapper.board-medium .bdr10,
    #playgrid-wrapper.board-medium .bdr20,
    #playgrid-wrapper.board-medium .bdr01,
    #playgrid-wrapper.board-medium .bdr11,
    #playgrid-wrapper.board-medium .bdr21,
    #playgrid-wrapper.board-medium .bdr02,
    #playgrid-wrapper.board-medium .bdr12,
    #playgrid-wrapper.board-medium .bdr22 {
      height: 40px; }
  #playgrid-wrapper.board-small {
    width: 250px;
    max-width: 250px; }
    #playgrid-wrapper.board-small table.sudokutable {
      height: 250px; }
    #playgrid-wrapper.board-small .bdr00,
    #playgrid-wrapper.board-small .bdr10,
    #playgrid-wrapper.board-small .bdr20,
    #playgrid-wrapper.board-small .bdr01,
    #playgrid-wrapper.board-small .bdr11,
    #playgrid-wrapper.board-small .bdr21,
    #playgrid-wrapper.board-small .bdr02,
    #playgrid-wrapper.board-small .bdr12,
    #playgrid-wrapper.board-small .bdr22 {
      height: 30px; }

}

@media (min-width: 992px) {
  #playgrid-wrapper.board-large {
    width: 100%;
    max-width: 500px; }
    #playgrid-wrapper.board-large table.sudokutable {
      height: 500px; }
    #playgrid-wrapper.board-large.grid16x16 {
      width: 640px;
      max-width: 640px; }
      #playgrid-wrapper.board-large.grid16x16 table.sudokutable {
        height: 640px;
        max-width: 640px; }
    #playgrid-wrapper.board-large .bdr00,
    #playgrid-wrapper.board-large .bdr10,
    #playgrid-wrapper.board-large .bdr20,
    #playgrid-wrapper.board-large .bdr01,
    #playgrid-wrapper.board-large .bdr11,
    #playgrid-wrapper.board-large .bdr21,
    #playgrid-wrapper.board-large .bdr02,
    #playgrid-wrapper.board-large .bdr12,
    #playgrid-wrapper.board-large .bdr22 {
      height: 55px; }
  #playgrid-wrapper.board-medium {
    width: 400px;
    max-width: 400px; }
    #playgrid-wrapper.board-medium table.sudokutable {
      height: 400px; }
    #playgrid-wrapper.board-medium .bdr00,
    #playgrid-wrapper.board-medium .bdr10,
    #playgrid-wrapper.board-medium .bdr20,
    #playgrid-wrapper.board-medium .bdr01,
    #playgrid-wrapper.board-medium .bdr11,
    #playgrid-wrapper.board-medium .bdr21,
    #playgrid-wrapper.board-medium .bdr02,
    #playgrid-wrapper.board-medium .bdr12,
    #playgrid-wrapper.board-medium .bdr22 {
      height: 40px; }
  #playgrid-wrapper.board-small {
    width: 300px;
    max-width: 300px; }
    #playgrid-wrapper.board-small table.sudokutable {
      height: 300px; }
    #playgrid-wrapper.board-small .bdr00,
    #playgrid-wrapper.board-small .bdr10,
    #playgrid-wrapper.board-small .bdr20,
    #playgrid-wrapper.board-small .bdr01,
    #playgrid-wrapper.board-small .bdr11,
    #playgrid-wrapper.board-small .bdr21,
    #playgrid-wrapper.board-small .bdr02,
    #playgrid-wrapper.board-small .bdr12,
    #playgrid-wrapper.board-small .bdr22 {
      height: 25px; } }

/* On wide game layouts, keep the number picker beside the board. The
   preference attribute restores the original stacked layout. */
.picker-placement-option {
  display: none;
}

.game-options-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.more-picker-options-slot {
  display: contents;
}

.game-options-group {
  min-width: 0;
  margin: 0;
  padding: 0.65rem 0.85rem 0.75rem;
  border: 1px solid #d5dae0;
  border-radius: 6px;
}

.game-options-group-title {
  float: none;
  width: auto;
  margin: 0;
  padding: 0 0.25rem;
  color: #12446e;
  font-size: 0.95rem;
  font-weight: 600;
}

.game-options-group .form-check + .form-check {
  margin-top: 0.35rem;
}

.picker-options-toggle {
  display: none;
}

.picker-options-content {
  margin-top: 0.35rem;
}

.side-picker-options-slot:empty {
  display: none;
}

.side-picker-options-slot .picker-options-group {
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.side-picker-options-slot .picker-options-static-title {
  display: none;
}

.side-picker-options-slot .picker-options-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0;
  background: #eef2f7;
  color: #12446e;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
}

.picker-options-toggle-icon {
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.side-picker-options-slot .picker-options-content {
  display: none;
  margin: 0;
  padding: 0.45rem 0.5rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.15;
}

.side-picker-options-slot .form-check {
  min-height: 1rem;
  padding-left: 1.25rem;
}

.side-picker-options-slot .form-check-input {
  margin-left: -1.25rem;
}

.side-picker-options-slot .picker-options-group.is-expanded .picker-options-content {
  display: block;
}

.side-picker-options-slot .picker-options-group.is-expanded .picker-options-toggle-icon {
  transform: rotate(225deg);
}

@media (min-width: 1280px) {
  .sudoku-game-layout .picker-placement-option {
    display: block;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) {
    --desktop-board-width: 500px;
    --desktop-picker-width: 190px;
    --desktop-picker-columns: 3;
    --desktop-picker-gap: 8px;
    --desktop-picker-font-size: 1.5rem;
    display: grid;
    grid-template-areas:
      "header ."
      "date ."
      "nav ."
      "board picker";
    grid-template-columns: minmax(0, var(--desktop-board-width)) var(--desktop-picker-width);
    column-gap: 20px;
    align-items: start;
    width: calc(var(--desktop-board-width) + var(--desktop-picker-width) + 20px);
    max-width: calc(var(--desktop-board-width) + var(--desktop-picker-width) + 20px);
  }

  .sudoku-game-layout #playgrid-wrapper.grid16x16:not([data-picker-placement="below"]) {
    --desktop-board-width: 640px;
    --desktop-picker-width: 190px;
    --desktop-picker-columns: 4;
    --desktop-picker-gap: 6px;
    --desktop-picker-font-size: 1.25rem;
  }

  .sudoku-game-layout #playgrid-wrapper.board-medium:not([data-picker-placement="below"]) {
    --desktop-board-width: 400px;
  }

  .sudoku-game-layout #playgrid-wrapper.board-small:not([data-picker-placement="below"]) {
    --desktop-board-width: 300px;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) > .game-header {
    grid-area: header;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) > .game-date {
    grid-area: date;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) > .game-nav {
    grid-area: nav;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) > .board-and-picker {
    grid-area: board;
    min-width: 0;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) > .number-picker-panel {
    grid-area: picker;
    height: var(--desktop-board-width);
    overflow: visible;
    min-width: 0;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) .number-picker-panel-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
    min-width: 0;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) #show-prize {
    margin-bottom: 0 !important;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) #choose-number-text {
    display: none;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) #Grabber .Numbertable {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    font-size: var(--desktop-picker-font-size);
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) #Grabber .Numbertable tbody {
    display: block;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) #Grabber .Numbertable tr {
    display: grid;
    grid-template-columns: repeat(var(--desktop-picker-columns), minmax(0, 1fr));
    gap: var(--desktop-picker-gap);
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) #Grabber .Numbertable tr td {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid #8e95a0;
    border-radius: 6px;
    background: #f7f8fb;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) #Grabber .Numbertable tr td.used-number,
  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) #Grabber .Numbertable tr td.used-number:hover {
    background: #d5dae0;
    box-shadow: none;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) #Num0 {
    order: 99;
    grid-column: 2;
    color: transparent;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) #Num0::before {
    content: "\00d7";
    color: #1a2233;
  }

  .sudoku-game-layout #playgrid-wrapper.grid16x16:not([data-picker-placement="below"]) #Num0 {
    grid-column: 2 / span 2;
    aspect-ratio: auto;
    min-height: 36px;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) .game-possibility-controls {
    margin: 0;
    padding: 0 0.5rem;
    font-size: 0.9rem;
  }

  .sudoku-game-layout #GameControls {
    --desktop-board-width: 500px;
    --desktop-picker-width: 190px;
    width: var(--desktop-board-width);
    max-width: var(--desktop-board-width);
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .sudoku-game-layout #playgrid-wrapper.grid16x16 ~ #GameControls {
    --desktop-board-width: 640px;
    --desktop-picker-width: 190px;
  }

  .sudoku-game-layout #playgrid-wrapper.board-medium ~ #GameControls {
    --desktop-board-width: 400px;
  }

  .sudoku-game-layout #playgrid-wrapper.board-small ~ #GameControls {
    --desktop-board-width: 300px;
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) ~ #GameControls {
    width: calc(var(--desktop-board-width) + var(--desktop-picker-width) + 20px);
    max-width: calc(var(--desktop-board-width) + var(--desktop-picker-width) + 20px);
  }

  .sudoku-game-layout #playgrid-wrapper:not([data-picker-placement="below"]) ~ #GameControls > * {
    width: var(--desktop-board-width);
    max-width: var(--desktop-board-width);
  }
}

.x16bdr00 {
  width: 6%;
  border-top: 2px solid #2a3a50;
  border-bottom: 1px solid #2a3a50;
  border-left: 2px solid #2a3a50;
  border-right: 1px solid #2a3a50; }

.x16bdr10 {
  width: 6%;
  border-top: 2px solid #2a3a50;
  border-bottom: 1px solid #2a3a50;
  border-left: 1px solid #2a3a50;
  border-right: 1px solid #2a3a50; }

.x16bdr20 {
  width: 6%;
  border-top: 2px solid #2a3a50;
  border-bottom: 1px solid #2a3a50;
  border-left: 1px solid #2a3a50;
  border-right: 2px solid #2a3a50; }

.x16bdr01 {
  width: 6%;
  border-top: 1px solid #2a3a50;
  border-bottom: 1px solid #2a3a50;
  border-left: 2px solid #2a3a50;
  border-right: 1px solid #2a3a50; }

.x16bdr11 {
  width: 6%;
  border-top: 1px solid #2a3a50;
  border-bottom: 1px solid #2a3a50;
  border-left: 1px solid #2a3a50;
  border-right: 1px solid #2a3a50; }

.x16bdr21 {
  width: 6%;
  border-top: 1px solid #2a3a50;
  border-bottom: 1px solid #2a3a50;
  border-left: 1px solid #2a3a50;
  border-right: 2px solid #2a3a50; }

.x16bdr02 {
  width: 6%;
  border-top: 1px solid #2a3a50;
  border-bottom: 2px solid #2a3a50;
  border-left: 2px solid #2a3a50;
  border-right: 1px solid #2a3a50; }

.x16bdr12 {
  width: 6%;
  border-top: 1px solid #2a3a50;
  border-bottom: 2px solid #2a3a50;
  border-left: 1px solid #2a3a50;
  border-right: 1px solid #2a3a50; }

.x16bdr22 {
  width: 6%;
  border-top: 1px solid #2a3a50;
  border-bottom: 2px solid #2a3a50;
  border-left: 1px solid #2a3a50;
  border-right: 2px solid #2a3a50; }

.btn-group-xs > .btn,
.btn-xs {
  padding: .15rem .5rem;
  font-size: .8rem;
  line-height: 1.5;
  border-radius: .2rem; }

.pwa-install-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pwa-install-button svg {
  display: block;
  flex: 0 0 auto;
}

.mobile-settings-icon {
  vertical-align: -0.125em;
}

/* Strategy practice */
.practice-page {
  min-height: calc(100vh - 160px);
}

.practice-workspace {
  max-width: 560px;
}

#PracticeAdSidebar,
#PracticeAdSidebar .sidebar-content,
#PracticeAdSidebar [id^="sudoku_D"] {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

#PracticeAdSidebar [id^="sudoku_D"] > div,
#PracticeAdSidebar [id^="sudoku_D"] iframe,
#PracticeAdSidebar [id^="google_ads_iframe"],
#PracticeAdSidebar iframe,
#PracticeAdSidebar ins {
  max-width: 100% !important;
  min-width: 0 !important;
}

.practice-strategy-link[aria-current="page"] {
  color: #1b64a2;
}

.practice-strategy-directory .list-group-item {
  padding: 0;
}

.practice-directory-link {
  padding: 0.85rem 1rem;
  color: #1b64a2;
  font-weight: 600;
}

.practice-directory-link:hover,
.practice-directory-link:focus {
  color: #134d7d;
  background: #f2f7fb;
}

.practice-hint-trigger {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.practice-hint-trigger #practice-show-hint {
  grid-column: 2;
}

.practice-pagination {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr);
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.practice-pagination .btn:last-child {
  justify-self: end;
}

.practice-pagination .btn:first-child {
  justify-self: start;
}

.practice-board-wrapper {
  margin: 0 auto;
}

.practice-board-wrapper table.sudokutable td {
  cursor: pointer;
}

.practice-server-given {
  font-weight: 700;
}

.practice-board-wrapper table.sudokutable:focus-visible {
  outline: 3px solid rgba(27, 100, 162, 0.35);
  outline-offset: 3px;
}

.practice-status {
  min-height: 1.35rem;
}

.practice-number-pad {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  width: 100%;
  max-width: 500px;
  margin-right: auto;
  margin-left: auto;
}

.practice-number-pad > .btn.practice-number-button {
  min-width: 0;
  padding: 0.5rem 0;
  color: #1a2233;
  background: #f7f8fb;
  border: 1px solid #8e95a0;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 1rem;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.practice-number-pad > .btn.practice-number-button:first-child {
  border-left: 1px solid #8e95a0;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.practice-number-pad > .btn.practice-number-button:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.practice-number-pad > .btn.practice-number-button:hover,
.practice-number-pad > .btn.practice-number-button:focus {
  z-index: 1;
  color: #1a2233;
  background: #d6e7f4;
  border-color: #8e95a0;
  box-shadow: inset 0 0 0 2px #6f9fc4;
}

.practice-number-pad
  > .btn.practice-number-button:not(:disabled):not(.disabled):active {
  margin-top: 0;
  margin-bottom: 0;
  color: #1a2233;
  background: #bad5ea;
  border-color: #8e95a0;
  box-shadow: inset 0 0 0 2px #4f7fa5;
  font-weight: 700;
}

.practice-number-pad > .btn.practice-clear-button {
  font-size: 1.25rem;
  line-height: 1;
}

.practice-candidate-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.practice-hint-panel {
  border: 1px solid #cfdbe6;
  box-shadow: 0 8px 24px rgba(18, 68, 110, 0.08);
  scroll-margin-top: 1rem;
}

.practice-hint-panel .card-body {
  padding: 0.5rem 0.75rem;
}

.practice-hint-panel[hidden] {
  display: none;
}

.practice-hint-heading {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.practice-hint-text {
  line-height: 1.25;
  font-size: 0.9rem;
  padding: 10px;
}

.practice-hint-panel .btn {
  padding: 0.2rem 0.5rem;
  line-height: 1.2;
}

@media (max-width: 575.98px) {
  .practice-page {
    padding-right: 10px;
    padding-left: 10px;
  }

  .practice-pagination {
    grid-template-columns: 48px 1fr 48px;
  }

  .practice-pagination .btn {
    width: 48px;
    padding-right: 0;
    padding-left: 0;
  }
}

.btn {
  border: 0;
  font-weight: bold;
  border-radius: 6px;
  transition: all 0.15s ease; }

.btn-secondary {
  box-shadow: 0 2px 0 #4e3e67; }
  .btn-secondary:hover, .btn-secondary.focus, .btn-secondary:focus {
    box-shadow: 0 2px 0 #3d3152;
    background: #725f92; }
  .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active {
    margin-top: 1px;
    margin-bottom: -1px;
    transition: all .1s ease-in-out;
    background: #665188;
    box-shadow: 0 1px 0 #352a47; }
    .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled):active.focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled).active.focus {
      box-shadow: 0 1px 0 #352a47; }

.btn-primary {
  box-shadow: 0 3px 0 #154c7b; }
  .btn-primary:hover, .btn-primary.focus, .btn-primary:focus {
    background: #2d70a9;
    box-shadow: 0 3px 0 #12446e; }
  .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active {
    margin-top: 1px;
    margin-bottom: -1px;
    transition: all .1s ease-in-out;
    background: #1b64a2;
    box-shadow: 0 2px 0 #0e3454; }
    .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled):active.focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled).active.focus {
      box-shadow: 0 2px 0 #0e3454; }

.btn-light {
  box-shadow: 0 2px 0 #ddd; }
  .btn-light:hover, .btn-light.focus, .btn-light:focus {
    box-shadow: 0 2px 0 #ddd; }
  .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active {
    margin-top: 1px;
    margin-bottom: -1px;
    transition: all .1s ease-in-out;
    background: #ddd;
    box-shadow: 0 1px 0 #ddd; }
    .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled):active.focus, .btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled).active.focus {
      box-shadow: 0 1px 0 #ddd; }

.btn-success {
  box-shadow: 0 3px 0 #1e7f34; }
  .btn-success:hover, .btn-success.focus, .btn-success:focus {
    background: #39ae54;
    box-shadow: 0 3px 0 #1b722f; }
  .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active {
    margin-top: 1px;
    margin-bottom: -1px;
    transition: all .1s ease-in-out;
    background: #28a745;
    box-shadow: 0 2px 0 #155724; }
    .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled):active.focus, .btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled).active.focus {
      box-shadow: 0 2px 0 #155724; }

.TeaserBox {
  border: 1px solid #eee;
  padding: 0.5rem; }
  .TeaserBox .TeaserHead {
    border-bottom: 1px solid #eee;
    font-weight: bold;
    padding-bottom: 0.5rem; }

.CommentTypes {
  margin: 1rem 0;
  width: 100%; }
  .CommentTypes td {
    vertical-align: top;
    width: auto;
    min-width: 80px;
    box-sizing: border-box;
    padding: 0 0.5rem;
    text-align: left;
    font-size: 0.8rem; }
  .CommentTypes label {
    margin-left: 0.3rem; }

.comment {
  text-align: left;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 3px solid #eee; }
  .comment .comment-poster {
    font-size: 0.8rem; }
    .comment .comment-poster b {
      font-size: 1rem; }
  .comment .comment-content {
    background: #fff;
    border-left: 2px solid #eee;
    color: #000;
    padding: 1rem;
    margin: 1rem 0; }
  .comment .comment-meta {
    font-size: 0.8rem;
    opacity: 0.7; }
    .comment .comment-meta a:before {
      content: "| "; }

@media (min-width: 768px) {
  .CommentTypes td {
    width: 33%; } }

.TimerStart svg,
.TimerPause svg {
  width: 12px;
  margin-top: -3px; }

/* Comments button styles */
#btnComments {
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
  color: white !important;
  font-size: 0.875rem;
  transition: all 0.2s ease-in-out;
}

#btnComments:hover {
  background-color: #138496 !important;
  border-color: #117a8b !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#btnComments:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Emoji in button */
#btnComments .emoji {
  margin-right: 4px;
}

.TimerStart path,
.TimerPause path {
  fill: #fff; }

#txtTimer,
#txtTimer2 {
  background: #292929;
  border-radius: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100%; }
  #txtTimer .TimerBar,
  #txtTimer2 .TimerBar {
    background: url(https://www.toptal.com/designers/subtlepatterns/patterns/absurdidad.png);
    color: #fff;
    border-radius: 0;
    text-align: center;
    margin: 0;
    width: 100%;
    display: flex;
    padding: 0; }
    #txtTimer .TimerBar .TimerLabel,
    #txtTimer2 .TimerBar .TimerLabel {
      font-size: 1rem;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 0.7rem;
      text-align: right;
      padding: 0.4rem 1rem;
      opacity: 0.5;
      line-height: 2; }
    #txtTimer .TimerBar .TimerTime,
    #txtTimer2 .TimerBar .TimerTime {
      font-size: 1.6rem;
      font-family: monospace;
      font-weight: bold;
      opacity: 0.5;
      text-align: center;
      transition: 0.2s all;
      vertical-align: middle;
      padding: 0.15rem; }
      #txtTimer .TimerBar .TimerTime.active,
      #txtTimer2 .TimerBar .TimerTime.active {
        opacity: 1; }
    #txtTimer .TimerBar .TimerButtons,
    #txtTimer2 .TimerBar .TimerButtons {
      text-align: left;
      padding: .3rem 0 .4rem 1rem; }

.TimerBar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center; }

.TimerTime {
  font-size: 0.85rem;
  font-weight: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; }

/* Mistake counter shown in the game nav, beside the timer */
.MistakeCounter {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  background-color: #e4f6e6;
  border-color: #b7e2bd;
  color: #1a7031; }
  .MistakeCounter.is-clean {
    background-color: #e4f6e6;
    border-color: #b7e2bd;
    color: #1a7031; }
  .MistakeCounter.is-low {
    background-color: #fdf4d3;
    border-color: #efdda1;
    color: #7d5a00; }
  .MistakeCounter.is-high {
    background-color: #fbdde4;
    border-color: #f2bccb;
    color: #a8123f; }
  .MistakeCounter.d-none {
    display: none; }

.MistakeCounterIcon {
  flex: 0 0 auto;
  display: block; }

@media (max-width: 767.98px) {
  .MistakeCounter {
    font-size: 0.8rem;
    padding: 0.1rem 0.35rem; } }

@media (max-width: 767.98px) {
  .game-nav {
    font-size: 0.9rem; }
    .game-nav .btn-xs {
      font-size: 0.8rem;
      padding: .1rem .4rem; }
    .game-nav .TimerTime {
      font-size: 0.85rem; } }

@media (min-width: 768px) {
  #txtTimer2 {
    position: relative;
    margin-top: 1rem; }
    #txtTimer2 .TimerBar {
      display: block; }
      #txtTimer2 .TimerBar .col-4 {
        text-align: center;
        width: 100%;
        max-width: 100%; }
      #txtTimer2 .TimerBar .TimerLabel {
        padding: 4px 0 0; }
      #txtTimer2 .TimerBar .TimerTime {
        padding: 0.5rem 0; }
      #txtTimer2 .TimerBar .TimerButtons {
        padding: 0 0 0.6rem; } }

/* Page content (CMS content below game, blog posts, guides) */
.page-content {
  line-height: 1.7;
  color: #2a3344;
  background: #fff;
  border: 1px solid #e2e6ed;
  border-radius: 8px;
  padding: 1.5rem 2rem;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  color: #1a2233;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.page-content h1 {
  font-size: 1.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #e2e6ed;
}

.page-content h2 {
  font-size: 1.35rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #e2e6ed;
}

.page-content h3 {
  font-size: 1.15rem;
}

.page-content h4 {
  font-size: 1.05rem;
}

.page-content h5,
.page-content h6 {
  font-size: 0.95rem;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.page-content p {
  margin-bottom: 1rem;
}

.page-content ul,
.page-content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.page-content li {
  margin-bottom: 0.35rem;
}

.page-content a {
  color: #1b64a2;
  text-decoration: underline;
  text-decoration-color: rgba(27, 100, 162, 0.3);
  text-underline-offset: 2px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.page-content a:hover {
  color: #12446e;
  text-decoration-color: #12446e;
}

.page-content blockquote {
  border-left: 3px solid #1b64a2;
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  background: #f0f4f8;
  border-radius: 0 6px 6px 0;
  color: #3a4a5c;
}

.page-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.page-content table th,
.page-content table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e2e6ed;
  text-align: left;
}

.page-content table th {
  background: #f0f4f8;
  font-weight: 600;
  color: #12446e;
}

.page-content hr {
  border: none;
  border-top: 1px solid #e2e6ed;
  margin: 1.5rem 0;
}

.page-content > *:first-child {
  margin-top: 0;
}

footer {
  background: #12446e;
  color: #fff;
  text-align: center;
  font-size: 0.85rem; }
  footer ul {
    margin: 0;
    li {
      cursor: pointer;
    }
  }
  footer .footer-copyright {
    color: white;
    font-size: 0.6rem; }

#BigAd img {
  height: auto;
  width: 300px; }

@media (min-width: 768px) {
  #BigAd img {
    height: auto;
    width: 456px; } }

.blogpost {
  padding-top: 0.5rem; }
  .blogpost h1 {
    margin-bottom: 1rem; }

#dgMessages {
  border: 0; }
  #dgMessages td {
    border: 0;
    border-top: 2px solid #eee; }
  #dgMessages .comment {
    margin-bottom: 1rem;
    border-bottom: 0;
    padding-bottom: 0; }

@media (min-width: 576px) {
  main {
    padding: 0 15px; }
    main h2 {
      text-align: left;
      margin-bottom: 1rem; } }

@media (min-width: 1400px) {
  #LeftSidebar {
    flex: 0 0 330px;
    min-width: 330px; } }


.prevDateLink, .nextDateLink {
    min-width: 50px;
    display: inline-block;
}

/* Timer Reset Hold Animation */
#resetMessageWrapper {
  position: absolute;
}

#resetMessage {
  position: relative;
  padding: 0px;
  right: -45px;
  top: -31px;
  z-index: 1000;
  font-size: 0.9em;
  background-color: white;
}

@keyframes resetbar {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

#resetAnimation {
    height: 3px;
    width: 0%;
    background-color: #4e3e67;
    animation: resetbar 1s linear forwards;
}

/* Comments iframe container styles */
#commentsIframeContainer {
  margin-bottom: 2rem;
}

.comments-iframe-wrapper {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.comments-iframe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #dee2e6;
  background-color: #f8f9fa;
}

.comments-iframe-header h5 {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0;
}

#commentsIframe {
  width: 100%;
  height: 600px;
  border: none;
  display: block;
}

/* Keep footer copy centered when language selector is present */
.footer-bar {
  width: 100%;
}

.footer-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#google-one-tap-container.google-one-tap-loading {
  opacity: 0.65;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.ot-floating-button {
  display: none !important;
}

.calendar-icon-btn {
  border: none;
  background: transparent;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.calendar-icon-btn:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

.calendar-icon-btn img {
  display: block;
}

#streak-calendar-loading img {
  width: 48px;
  height: 48px;
}

#streak-calendar-modal .modal-content {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(116, 164, 255, 0.28);
  background:
    radial-gradient(circle at 22% 25%, rgba(136, 207, 255, 0.22), transparent 52%),
    radial-gradient(circle at 78% 20%, rgba(255, 230, 140, 0.16), transparent 60%),
    radial-gradient(circle at 45% 85%, rgba(72, 136, 255, 0.18), transparent 58%),
    linear-gradient(160deg, #07122c 0%, #0a1d44 40%, #030b1f 100%);
  box-shadow: 0 18px 40px rgba(8, 18, 48, 0.65);
}

#streak-calendar-modal .modal-body {
  padding: 2.25rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  position: relative;
}

#streak-calendar-modal .modal-header {
  border: 0;
  background: transparent;
  padding: 1.25rem 1.25rem 0 1.25rem;
  justify-content: flex-end;
  color: white;
}

#streak-calendar-modal .btn-close {
  filter: invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.streak-dot-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}

.streak-label {
  grid-column: 1;
  justify-self: right;
  font-weight: 600;
  color: #c3eafb;
  margin-right: 20px;
  text-align: right;
}

.streak-summary {
  grid-column: 2;
  justify-self: center;
  min-width: 60px;
  min-height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(140deg, rgba(118, 198, 255, 0.9), rgba(40, 124, 255, 0.82));
  border: 1px solid rgba(164, 218, 255, 0.65);
  box-shadow:
    inset 0 0 20px rgba(220, 244, 255, 0.45),
    0 12px 22px rgba(20, 70, 168, 0.48);
  color: #ebf9ff;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.4rem;
  text-shadow: 0 2px 4px rgba(10, 35, 70, 0.45);
  backdrop-filter: blur(8px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.streak-calendar--ready .streak-summary {
  transform: translateY(-2px);
}

#streak-calendar-modal.streak-calendar--loading .streak-dot-row,
#streak-calendar-modal.streak-calendar--loading .streak-calendar-grid {
  opacity: 0.35;
  pointer-events: none;
}

#streak-calendar-modal.streak-calendar--logged-out .streak-dot-row,
#streak-calendar-modal.streak-calendar--logged-out .streak-calendar-grid {
  opacity: 0.2;
  filter: grayscale(1);
  pointer-events: none;
}

#streak-calendar-modal.streak-calendar--error .streak-dot-row {
  opacity: 0.35;
  filter: saturate(0.4);
}

#streak-calendar-modal.streak-calendar--error .streak-summary {
  box-shadow:
    inset 0 0 14px rgba(255, 200, 200, 0.28),
    0 10px 20px rgba(180, 70, 80, 0.35);
  background: linear-gradient(140deg, rgba(200, 120, 140, 0.7), rgba(110, 60, 120, 0.65));
}

#streak-calendar-modal.streak-calendar--error .streak-calendar-grid {
  border: 1px solid rgba(255, 125, 125, 0.28);
  box-shadow: 0 0 0 2px rgba(255, 95, 95, 0.16);
}

.streak-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 34px;
  gap: 0.5rem;
  width: 100%;
  max-width: 320px;
  border: 1px solid rgba(96, 146, 220, 0.1);
  border-radius: 16px;
  padding: 0.65rem;
  backdrop-filter: blur(6px);
  background: linear-gradient(145deg, rgba(24, 46, 92, 0.35), rgba(10, 26, 56, 0.45));
  box-shadow: inset 0 0 18px rgba(6, 18, 48, 0.45);
}

#streak-calendar-difficulties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

#streak-calendar-difficulties .btn {
  font-weight: 600;
  text-transform: capitalize;
  font-size: 0.8em;
}

#streak-calendar-difficulties .btn.active {
  background: linear-gradient(135deg, rgba(255, 200, 120, 0.85), rgba(255, 160, 80, 0.9));
  border-color: rgba(255, 210, 140, 0.9);
  color: #1a253d;
  box-shadow: 0 0 12px rgba(255, 185, 85, 0.4);
}

#streak-calendar-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

#streak-calendar-controls .btn {
  min-width: 2.5rem;
}

.calendar-nav-btn {
  background-color: #665188;
  color: white;
  border: 1px solid #665188;
  border-radius: 6px;
  padding: 6px 12px;
  min-width: 2.5rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.calendar-nav-btn:hover,
.calendar-nav-btn:focus,
.calendar-nav-btn:active {
  background-color: #665188;
  color: white;
  border-color: #665188;
  outline: none;
  box-shadow: none;
}

.calendar-nav-btn:disabled {
  background-color: #665188;
  color: white;
  border-color: #665188;
  opacity: 0.6;
  cursor: not-allowed;
}

.streak-calendar-nav-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  font-weight: 600;
  color: #ebf9ff;
}

.streak-calendar-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(28, 62, 122, 0.34);
  border: 1px solid rgba(110, 165, 255, 0.18);
  aspect-ratio: 1;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: inset 0 0 12px rgba(10, 28, 70, 0.35);
}

.streak-calendar-cell.empty {
  background-color: transparent;
  border-style: dashed;
  cursor: default;
  pointer-events: none;
}

.streak-calendar-cell.completed {
  background: linear-gradient(135deg, rgba(110, 198, 255, 0.75), rgba(46, 132, 255, 0.9));
  border-color: rgba(158, 218, 255, 0.65);
  box-shadow: inset 0 0 18px rgba(210, 238, 255, 0.38), 0 8px 16px rgba(24, 94, 230, 0.42);
  color: #dff4ff;
}

.streak-calendar-cell.missed {
  color: white;
  text-decoration: none;
  background: rgba(40, 66, 116, 0.32);
  border-color: rgba(120, 160, 210, 0.18);
}

.streak-calendar-cell.future {
  color: gray;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(170, 190, 220, 0.08);
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
  transform: none;
}

.streak-calendar-cell.today {
  color: white;
  text-decoration: none;
  box-shadow:
    0 0 0 2px rgba(130, 210, 255, 0.75),
    0 0 18px rgba(90, 180, 255, 0.55);
  transform: translateY(-1px);
}

.streak-calendar-cell.completed::after {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23dff9ff' d='M9.172 17.243L4.93 13l1.414-1.414l2.828 2.829l8.485-8.486l1.414 1.414z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 4px rgba(10, 35, 70, 0.45));
  animation: streak-check-pop 280ms ease;
}

.streak-calendar-cell:not(.empty):not(.future):hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow:
    0 12px 24px rgba(15, 35, 76, 0.45),
    inset 0 0 14px rgba(110, 180, 255, 0.25);
  border-color: rgba(150, 200, 255, 0.35);
}

@keyframes streak-starfield {
  to {
    transform: rotate(360deg);
  }
}

@keyframes streak-check-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  80% {
    transform: scale(1.12);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #streak-calendar-modal .modal-content::before {
    animation: none;
  }

  .streak-summary,
  .streak-calendar-cell,
  .streak-calendar-cell.completed::after {
    transition: none;
    animation: none;
  }

  .streak-calendar-cell:not(.empty):hover {
    transform: none;
  }
}

/* shared base for all levels */
.streak-summary {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  text-shadow: 0 0 5px #00d4ff, 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff, 0 0 80px #00d4ff;
  animation: flicker 2s infinite alternate ease-in-out;
}

@keyframes flicker {
  0% {
    text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff, 0 0 80px #00d4ff, 0 0 160px #00d4ff;
  }
  100% {
    text-shadow: 0 0 5px #665188, 0 0 10px #665188, 0 0 20px #665188, 0 0 40px #665188, 0 0 80px #665188;
  }
}

/* Ignite explosion animation */
.streak-ignite {
  animation: ignite-explosion 2s ease-out forwards;
  position: relative;
  z-index: 10;
}

@keyframes ignite-explosion {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(255, 69, 0, 0.8),
      0 0 0 0 rgba(255, 140, 0, 0.6),
      0 0 0 0 rgba(255, 215, 0, 0.4);
    filter: brightness(1) saturate(1);
  }

  10% {
    transform: scale(1.05);
    box-shadow:
      0 0 20px 5px rgba(255, 69, 0, 0.9),
      0 0 40px 10px rgba(255, 140, 0, 0.7),
      0 0 60px 15px rgba(255, 215, 0, 0.5);
    filter: brightness(1.2) saturate(1.3);
  }

  25% {
    transform: scale(1.1) rotate(2deg);
    box-shadow:
      0 0 40px 15px rgba(255, 69, 0, 1),
      0 0 80px 25px rgba(255, 140, 0, 0.8),
      0 0 120px 35px rgba(255, 215, 0, 0.6),
      inset 0 0 20px rgba(255, 255, 0, 0.3);
    filter: brightness(1.4) saturate(1.5) contrast(1.2);
  }

  50% {
    transform: scale(1.15) rotate(-1deg);
    box-shadow:
      0 0 60px 25px rgba(255, 69, 0, 0.9),
      0 0 120px 40px rgba(255, 140, 0, 0.7),
      0 0 180px 50px rgba(255, 215, 0, 0.5),
      0 0 240px 60px rgba(255, 255, 0, 0.3),
      inset 0 0 30px rgba(255, 255, 255, 0.2);
    filter: brightness(1.6) saturate(1.8) contrast(1.4);
  }

  75% {
    transform: scale(1.08) rotate(1deg);
    box-shadow:
      0 0 40px 20px rgba(255, 69, 0, 0.6),
      0 0 80px 30px rgba(255, 140, 0, 0.4),
      0 0 120px 40px rgba(255, 215, 0, 0.3),
      0 0 160px 50px rgba(255, 255, 0, 0.2);
    filter: brightness(1.3) saturate(1.4) contrast(1.1);
  }

  90% {
    transform: scale(1.02) rotate(0deg);
    box-shadow:
      0 0 20px 10px rgba(255, 69, 0, 0.3),
      0 0 40px 15px rgba(255, 140, 0, 0.2),
      0 0 60px 20px rgba(255, 215, 0, 0.1);
    filter: brightness(1.1) saturate(1.1);
  }

  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(255, 69, 0, 0),
      0 0 0 0 rgba(255, 140, 0, 0),
      0 0 0 0 rgba(255, 215, 0, 0);
    filter: brightness(1) saturate(1);
  }
}

#congratsModal {
  z-index: 1000000000;
}

#congratsModal .modal-footer {
  gap: 0.4rem;
  justify-content: center;
  padding: 0.5rem 0.75rem 0.65rem;
}

#congratsModal .modal-footer > * {
  margin: 0;
}

#congratsModal .modal-footer .btn {
  align-items: center;
  display: inline-flex;
  font-size: 0.82rem;
  justify-content: center;
  line-height: 1.2;
  min-height: 2.2rem;
  padding: 0.4rem 0.5rem;
  text-align: center;
  white-space: nowrap;
}

#congrats-leaderboard-table-wrapper {
  max-height: 350px;
  overflow-y: scroll;
}

@media (max-width: 575.98px) {
  #congratsModal .modal-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.55rem 0.65rem 0.7rem;
  }

  #congratsModal .modal-footer .btn {
    font-size: 0.72rem;
    min-width: 0;
    padding: 0.38rem 0.25rem;
    width: 100%;
  }
}

@media (max-width: 767.98px) and (orientation: portrait) {
  #congratsModal .modal-content {
    max-height: 550px;
    max-height: min(550px, calc(100vh - 2rem));
    display: flex;
    flex-direction: column;
  }

  #congratsModal .modal-body {
    overflow-y: auto;
    min-height: 0;
  }
}

#congrats-leaderboard-table {
  font-size: 0.95rem;
}

#congrats-leaderboard-table th,
#congrats-leaderboard-table td {
  padding: 0.25rem 0.5rem;
  vertical-align: middle;
}

.congrats-leaderboard-rank {
  font-weight: 600;
  width: 2.5rem;
}

.congrats-leaderboard-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.congrats-leaderboard-current-user {
  border: 2px solid gold;
}

.congrats-leaderboard-divider {
  padding: 0.25rem 0.5rem;
}

.congrats-leaderboard-divider-bar {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  margin: 0.25rem 0;
}

.congrats-leaderboard-heading {
  cursor: pointer;
  user-select: none;
}

.congrats-leaderboard-heading::after {
  content: " [-]";
  font-size: 0.85em;
  margin-left: 0.25rem;
}

.congrats-leaderboard-heading.collapsed::after {
  content: " [+]";
}
.killer-cell-wrapper {
  --killer-candidate-grid-width: 80%;
  --killer-candidate-grid-height: 70%;
  --killer-candidate-grid-top: 20%;
  --killer-candidate-grid-left: 10%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.killer-cell-content {
  width: 100%;
  height: 100%;
}

.killer-cell-wrapper .posstable {
  width: var(--killer-candidate-grid-width) !important;
  height: var(--killer-candidate-grid-height) !important;
  position: absolute;
  top: var(--killer-candidate-grid-top);
  left: var(--killer-candidate-grid-left);
}

.killer-cage-sum {
  position: absolute;
  top: 0;
  left: 2px;
  font-size: 11px;
  color: #2554a1;
  line-height: 1;
  padding: 0 2px;
  pointer-events: none;
  z-index: 2;
}

.killer-cage-border {
  position: absolute;
  border-style: dashed;
  border-color: #2554a1;
  border-width: 0;
  z-index: 1;
  pointer-events: none;
}

.killer-border-top {
  top: 1px;
  left: 1px;
  right: 1px;
  height: 0;
  border-width: 1px 0 0 0;
}

.killer-cell-has-sum .killer-border-top {
  top: 1px;
  left: 20px;
}

.killer-border-top-full-left {
  left: 0;
}

.killer-border-top-full-right {
  right: 0;
}

.killer-border-right {
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 0;
  border-width: 0 1px 0 0;
}

.killer-border-bottom {
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 0;
  border-width: 0 0 1px 0;
}

.killer-border-left {
  top: 1px;
  bottom: 1px;
  left: 1px;
  width: 0;
  border-width: 0 0 0 1px;
}

.killer-cell-has-sum .killer-border-left {
  top: 12px;
}

.killer-border-left-full-top {
  top: 0;
}

.killer-border-left-full-bottom {
  bottom: 0;
}

.killer-border-bottom-full-left {
  left: 0;
}

.killer-border-bottom-full-right {
  right: 0;
}

.killer-border-right-full-top {
  top: 0;
}

.killer-border-right-full-bottom {
  bottom: 0;
}

.killer-cage-highlighted .killer-border-top {
  border-top-width: 2px;
}

.killer-cage-highlighted .killer-border-right {
  border-right-width: 2px;
}

.killer-cage-highlighted .killer-border-bottom {
  border-bottom-width: 2px;
}

.killer-cage-highlighted .killer-border-left {
  border-left-width: 2px;
}

.killer-corner {
  position: absolute;
  width: 2px;
  height: 2px;
  border-color: #2554a1;
  border-style: dashed;
  border-width: 0;
  z-index: 1;
  pointer-events: none;
}

.killer-corner-top-left {
  top: 0;
  left: 0;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

.killer-corner-top-right {
  top: 0;
  right: 0;
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.killer-corner-bottom-right {
  bottom: 0;
  right: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}

.killer-corner-bottom-left {
  bottom: 0;
  left: 0;
  border-top-width: 1px;
  border-right-width: 1px;
}

.killer-cage-highlighted .killer-corner-top-left {
  border-bottom-width: 2px;
  border-right-width: 2px;
}

.killer-cage-highlighted .killer-corner-top-right {
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.killer-cage-highlighted .killer-corner-bottom-right {
  border-top-width: 2px;
  border-left-width: 2px;
}

.killer-cage-highlighted .killer-corner-bottom-left {
  border-top-width: 2px;
  border-right-width: 2px;
}

@media (max-width: 768px) {
  .killer-cage-sum {
    font-size: 8px;
    font-weight: bold;
  }
}

.trophy-wrapper {
  position: relative;
}

.trophy-image {
  width: 50px;
  aspect-ratio: 2 / 3;
}

.trophy-prestige {
  display: inline-block;
  padding: 2px;
  border-radius: 999px;
  background: #161616;
  color: #ffd66c;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
  position: absolute;
  font-size: 8px;
  left: 19px;
  bottom: 2px;
}

.solver-steps-list {
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
  max-height: 100px;
  overflow-y: auto;
}

.solver-step-item {
  cursor: pointer;
  margin-bottom: 0.25rem;
  list-style: decimal;
  list-style-position: inside;
}

.solver-step-item--disabled {
  cursor: default;
}

.solver-step-item.is-active {
  font-weight: 600;
}

.solver-steps-overlay {
  position: absolute;
  display: none;
  z-index: 1100;
}

.solver-steps-panel {
  background: #ffffff;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
  gap: 0.5rem;
  outline: none;
}

.solver-steps-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.solver-steps-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.solver-steps-close {
  border: none;
  background: transparent;
  color: #333;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
}

.solver-steps-close:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

.solver-steps-body {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.solver-steps-nav {
  background: #eff3ff;
  border: none;
  border-radius: 999px;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f3c88;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.solver-steps-nav:hover:not(:disabled) {
  background: #dbe5ff;
}

.solver-steps-nav:disabled {
  opacity: 0.4;
  cursor: default;
}

.solver-steps-nav:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

.solver-steps-content {
  flex: 1;
  padding-right: 0.25rem;
}

.solver-steps-list::-webkit-scrollbar {
  width: 6px;
}

.solver-steps-list::-webkit-scrollbar-thumb {
  background: rgba(31, 60, 136, 0.35);
  border-radius: 3px;
}

.solver-steps-note {
  font-size: 0.8rem;
  color: #b00020;
  margin: 0;
}

@media (max-width: 576px) {
  .solver-steps-panel {
    border-radius: 12px 12px 0 0;
  }

  .solver-steps-body {
    gap: 0.4rem;
  }

  .solver-steps-nav {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }
}


@media (max-height: 900px) and (max-width: 750px) {
  .hide-on-sm {
    display: none !important;
  }
}

@media (min-height: 900px), (min-width: 750px) {
  .show-on-sm{
    display: none !important;
  }
}

@media (max-width: 750px) {
  body > main:fullscreen .mobile-settings-dropdown,
  body > main:-webkit-full-screen .mobile-settings-dropdown {
    display: inline-block !important;
  }
}

#mobileControlsDropdownlist .dropdown-item {
  white-space: normal;
}
#HighlightActiveNumber::before {
  font-weight: lighter;
  font-size: 10px;
  line-height: 10px;
  content: "1";
  position: relative;
  top: -8px;
}

#HighlightActiveNumber.option-1::before {
  font-weight: bold;
  font-size: 10px;
  line-height: 10px;
  content: "1";
  position: relative;
  top: -8px;
}

#HighlightActiveNumber.option-2 {
  background-color: #fff59b;
}

#HighlightActiveNumber.option-2::before {
  font-weight: bold;
  font-size: 10px;
  line-height: 10px;
  content: "1";
  position: relative;
  top: -8px;
}

.sudokuEmbedWrap {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  container-type: inline-size;
}

.sudokuEmbedFrame {
  width: 100%;
  max-width: 800px;
  height: 600px;
  text-align: center;
  margin: 0 auto;
  display: block;
  border: 0;
}

@media (min-width: 784px) {
  .sudokuEmbedFrame {
    height: 750px;
  }
}

@supports (container-type: inline-size) {
  .sudokuEmbedWrap .sudokuEmbedFrame {
    max-width: none;
    min-height: 540px;
    height: calc(17cqw + 490px);
  }

  @container (min-width: 784px) {
    .sudokuEmbedWrap .sudokuEmbedFrame {
      height: 750px;
    }
  }
}

/* Candidate hover overlay */
.candidate-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  cursor: pointer;
}

.candidate-hover-grid {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.candidate-hover-grid-killer {
  width: var(--killer-candidate-grid-width);
  height: var(--killer-candidate-grid-height);
  top: var(--killer-candidate-grid-top);
  right: auto;
  bottom: auto;
  left: var(--killer-candidate-grid-left);
}

.candidate-hover-overlay .candidate-number {
  position: absolute;
  width: 33.33%;
  height: 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6em;
  color: #999;
  opacity: 0;
  transition: none;
  pointer-events: none;
}

.candidate-hover-overlay .candidate-number.candidate-number-visible {
  animation: candidateFadeIn 0.25s ease-out forwards;
}

.candidate-hover-overlay .candidate-number.is-possibility {
  color: #1a73e8;
  font-weight: 700;
}

@keyframes candidateFadeIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

.openpass-inline-container {
  height: 370px;
  width: 100%;
}

.openpass-inline-container iframe {
  border: 0;
  display: block;
  height: 100%;
  margin: 0 auto;
  max-width: 648px;
  width: 100%;
}

.openpass-callback-page {
  align-items: center;
  background: #f5f7fa;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  text-align: center;
}

.openpass-callback-card {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
  max-width: 32rem;
  padding: 2rem;
  width: 100%;
}