/* Sudoku Slam base styles */
:root {
  color-scheme: light;
  --bg-color: #ffffff;
  --text-color: #000000;
  --accent-color: #004cbd;
  --surface-muted: #ddddff;
  --surface-plain: #ffffff;
  --font-stack: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --cell-size: 52px;
  --cell-inner-size: calc(var(--cell-size) - 4px);
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-stack);
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Legacy layout --------------------------------------------------------- */

#page-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 20px 48px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 250px;
  grid-template-areas:
    "logo . timer"
    "left board right";
  gap: 24px;
  box-sizing: border-box;
}

#left-column,
#right-column,
#board-column {
  position: static;
  width: auto;
  margin: 0;
}

#board-column {
  text-align: center;
}

#logo-bar {
  grid-area: logo;
  display: flex;
  align-items: center;
  justify-content: center;
}

#timer-block {
  grid-area: timer;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
}

#left-column {
  grid-area: left;
}

#board-column {
  grid-area: board;
}

#right-column {
  grid-area: right;
}

#dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 501;
  background: rgba(102, 102, 102, 0.6);
  display: none;
}

#tab-box {
  width: 250px;
  border: 1px solid rgba(16, 32, 56, 0.14);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(244, 248, 255, 0.95), rgba(232, 240, 255, 0.9));
  box-shadow: 0 2px 12px rgba(12, 21, 46, 0.12);
  overflow: hidden;
}

#inner-tab-box {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: smaller;
}

#inner-tab-box td {
  position: relative;
  padding: 10px 0;
  font-weight: 600;
  color: #123b85;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

#inner-tab-box td:hover,
#inner-tab-box td:focus {
  background: rgba(0, 76, 189, 0.12);
  color: #0b295c;
}

#inner-tab-box td::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 999px;
  background: transparent;
  transition: background 0.2s ease;
}

#inner-tab-box td.active::after,
#inner-tab-box td.selected::after {
  background: var(--accent-color);
}

#inner-tab-box td[style*="teal"] {
  color: #0b295c !important;
}

#inner-tab-box td[style*="teal"]::after {
  background: var(--accent-color);
}

.panel {
  display: none;
  font-size: 0.9rem;
  color: #1b2740;
}

.panel.visible {
  display: block;
}

#panel {
  position: relative;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(16, 32, 56, 0.12);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 18px 32px rgba(12, 21, 46, 0.14);
}

#panel-help {
  position: absolute;
  top: 12px;
  right: 12px;
  cursor: pointer;
  z-index: 10;
}

.action {
  cursor: pointer;
}

.actioninput {
  cursor: pointer;
}

.highlight {
  border-collapse: collapse;
  border: 1px solid #000;
  width: 11%;
  cursor: pointer;
  font-size: large;
}

.highlight:hover,
.action:hover,
.action:focus {
  color: blue;
}

.optiontable {
  width: 250px;
  margin: 0;
  border-collapse: collapse;
  border: 1px solid rgba(16, 32, 56, 0.12);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(12, 21, 46, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 247, 255, 0.9));
}

.optionheader {
  padding: 10px 14px;
  background: rgba(0, 76, 189, 0.08);
  color: #0f2448;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.optionbody {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #1b2740;
  font-size: 0.9rem;
}

.recent-bookmarks {
  text-align: center;
  padding: 4px;
}

.mode-box {
  border: 2px solid #000;
  width: 100px;
  text-align: center;
  background: #bbb;
  cursor: pointer;
  font-size: larger;
}

.off-display {
  position: absolute;
  right: 35px;
}

/* Grid ------------------------------------------------------------------ */

.grid {
  border: 3px solid #000;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 auto;
}

#grid > tbody > tr {
  height: var(--cell-size);
}

.gridtd {
  width: var(--cell-size);
  height: var(--cell-size);
  min-width: var(--cell-size);
  min-height: var(--cell-size);
  border: 1px solid #000;
  padding: 0;
}

.numtd {
  width: 100%;
  height: 100%;
  min-width: var(--cell-inner-size);
  min-height: var(--cell-inner-size);
  padding: 0;
  font-size: 22pt;
  text-align: center;
  vertical-align: middle;
}

.num,
.const {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.num {
  color: #0000ff;
}

.celltable {
  border: 2px solid #fff;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 11px;
  margin: auto;
  width: 100%;
  height: 100%;
}

.celltd,
.celltdhigh {
  width: 33%;
  height: 33%;
  border: 0;
  padding: 0;
  text-align: center;
  cursor: pointer;
}

.celltdmissing {
  color: rgba(30, 50, 80, 0.35) !important;
}

.celltdhigh.celltdmissing {
  color: rgba(30, 50, 80, 0.45) !important;
}

.celltdinvalid {
  color: rgba(180, 56, 56, 0.55) !important;
}

.celltdhigh.celltdinvalid {
  color: rgba(180, 56, 56, 0.7) !important;
}

.celltdhigh:hover {
  background: #ccc;
}

.absolute-tooltip {
  position: absolute;
}

.tooltip {
  position: absolute;
  z-index: 1500;
  display: none;
  max-width: 280px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 76, 189, 0.24);
  border-radius: 10px;
  background: rgba(15, 29, 54, 0.94);
  color: #f5f7ff;
  font-size: 0.85rem;
  line-height: 1.45;
  box-shadow: 0 18px 38px rgba(12, 21, 46, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

.tooltipshadow {
  position: absolute;
  z-index: 1400;
  display: none;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(6, 10, 24, 0.55);
  opacity: 0.75;
}

.closebutton {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(0, 76, 189, 0.4);
  background: linear-gradient(135deg, #f3f6ff, #dbe7ff);
  color: #123b85;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(12, 21, 46, 0.18);
  transition: transform 0.15s ease, box-shadow 0.24s ease, background 0.18s ease, border-color 0.18s ease;
}

.closebutton::before {
  content: "\00D7";
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.closebutton:hover,
.closebutton:focus {
  background: linear-gradient(135deg, #e6efff, #cfe0ff);
  border-color: rgba(0, 76, 189, 0.52);
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(12, 21, 46, 0.24);
}

.closebutton:active {
  transform: translateY(0);
  box-shadow: 0 10px 18px rgba(12, 21, 46, 0.2);
}

.closebutton:focus-visible {
  outline: 3px solid rgba(0, 76, 189, 0.35);
  outline-offset: 2px;
}

.closebutton img {
  display: none;
}

.box {
  display: none;
  overflow: auto;
  position: absolute;
  max-width: min(520px, 90vw);
  max-height: min(90vh, 640px);
  padding: 24px;
  border: 1px solid #000;
  background: #fff;
  box-shadow: 0 2px 12px rgba(12, 21, 46, 0.26);
  border-radius: 12px;
  z-index: 1200;
}

/* Dialog buttons ------------------------------------------------------- */

button,
input[type="submit"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  margin: 12px 8px 0;
  border: 1px solid var(--accent-color);
  border-radius: 999px;
  background: linear-gradient(135deg, #1d66d6, var(--accent-color));
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.14s ease, box-shadow 0.24s ease, border-color 0.16s ease;
  box-shadow: 0 12px 28px rgba(0, 76, 189, 0.2);
}

.box button:hover,
.box input[type="submit"]:hover,
.box input[type="button"]:hover,
.box button:focus,
.box input[type="submit"]:focus,
.box input[type="button"]:focus {
  background: linear-gradient(135deg, #174fa8, #003a8c);
  border-color: #0f3b7b;
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(7, 54, 126, 0.28);
  outline: none;
}

.box button:active,
.box input[type="submit"]:active,
.box input[type="button"]:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(7, 54, 126, 0.26);
}

.box button:focus-visible,
.box input[type="submit"]:focus-visible,
.box input[type="button"]:focus-visible {
  outline: 3px solid rgba(0, 76, 189, 0.36);
  outline-offset: 2px;
}

.box button[id$="cancel"],
.box input[type="submit"][id$="cancel"],
.box input[type="button"][id$="cancel"] {
  background: #f5f6fb;
  color: var(--accent-color);
  border-color: rgba(0, 76, 189, 0.35);
  box-shadow: none;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.box button[id$="cancel"]:hover,
.box input[type="submit"][id$="cancel"]:hover,
.box input[type="button"][id$="cancel"]:hover,
.box button[id$="cancel"]:focus,
.box input[type="submit"][id$="cancel"]:focus,
.box input[type="button"][id$="cancel"]:focus {
  background: #e6ecfb;
  border-color: rgba(0, 76, 189, 0.55);
  color: #003a8c;
  box-shadow: 0 6px 16px rgba(0, 76, 189, 0.2);
}

.hidden {
  display: none !important;
}

#logo {
  width: 180px;
  height: auto;
}

#timer {
  width: 250px;
  max-width: 100%;
  margin-bottom: 6px;
  border-collapse: collapse;
}

#timer td {
  padding: 4px 6px;
}

#timer img {
  vertical-align: middle;
}

#messages {
  margin-top: 12px;
}

#messagebox {
  font-size: smaller;
  height: 85px;
  vertical-align: top;
}

/* Modal ----------------------------------------------------------------- */

#modal-alert-message {
  font-size: 0.95rem;
}

#modal-alert-ok,
#modal-alert-cancel {
  margin-top: 16px;
}

#modal-alert-cancel {
  margin-left: 8px;
}

/* Responsive adjustments ------------------------------------------------- */

@media (max-width: 980px) {
  #page-container {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "logo timer"
      "board board"
      "right right"
      "left left";
  }

  #left-column,
  #right-column,
  #board-column {
    margin: 0 auto 24px;
    width: 100%;
  }

  #timer-block {
    justify-content: flex-end;
    align-items: center;
  }

  #logo-bar {
    justify-content: flex-start;
    margin: 0;
  }

  #timer,
  #highlight,
  #hints,
  #messages {
    width: 100%;
  }

  .off-display {
    position: static;
    display: inline-flex;
    gap: 8px;
    margin-left: 8px;
    font-size: 0.8rem;
  }
}

@media (max-width: 720px) {
  body,
  html {
    font-size: 15px;
  }

  :root {
    --cell-size: 44px;
    --cell-inner-size: calc(var(--cell-size) - 4px);
  }

  #tab-box,
  .optiontable,
  #timer {
    width: 100%;
  }

  .numtd {
    font-size: 20pt;
  }

  .highlight {
    width: 100%;
  }
}

@media (max-width: 460px) {
  :root {
    --cell-size: 36px;
    --cell-inner-size: calc(var(--cell-size) - 4px);
  }

  .numtd {
    font-size: 18pt;
  }

  #logo {
    width: 150px;
  }
}

@media (min-width: 981px) {
  #mobile-keypad {
    display: none !important;
  }
}
.need-hint-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.need-hint-text {
  flex: 1 1 auto;
}

.need-hint-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(0, 76, 189, 0.4);
  background: linear-gradient(135deg, #f3f7ff, #dbe7ff);
  color: #123b85;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
  box-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.24s ease, background 0.18s ease, border-color 0.18s ease;
}

.need-hint-close:hover,
.need-hint-close:focus {
  background: linear-gradient(135deg, #e6efff, #cfe0ff);
  border-color: rgba(0, 76, 189, 0.52);
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(12, 21, 46, 0.2);
}

.need-hint-close:active {
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(12, 21, 46, 0.18);
}

.need-hint-close:focus-visible {
  outline: 3px solid rgba(0, 76, 189, 0.35);
  outline-offset: 2px;
}

.mobile-keypad {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(220px, 60vw);
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(16, 32, 56, 0.16);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 30px rgba(12, 21, 46, 0.25);
  z-index: 1700;
}

.mobile-keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.mobile-keypad button {
  min-height: 44px;
  font-size: 1.05rem;
  border-radius: 10px;
  border: 1px solid rgba(16, 32, 56, 0.18);
  background: linear-gradient(135deg, #f4f7ff, #e4edff);
  color: #10243a;
  box-shadow: none;
  margin: 0;
}

.mobile-keypad-button-missing {
  background: linear-gradient(135deg, #f9fbff, #eef1f7);
  color: #7b879d;
  border-style: dashed;
}

.mobile-keypad-button-error {
  background: linear-gradient(135deg, #fcd6d6, #f79c9c) !important;
  border-color: rgba(180, 40, 40, 0.6) !important;
  color: #651010 !important;
}

.mobile-keypad-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.mobile-keypad-action[data-action="clear"] {
  background: #f8f9fd;
}