/* MLCY 解密數獨 — isolated visual system */
:root {
  --sudoku-bg: #080713;
  --sudoku-surface: rgba(20, 18, 36, .9);
  --sudoku-surface-strong: #17152a;
  --sudoku-line: rgba(230, 225, 255, .12);
  --sudoku-line-strong: rgba(205, 195, 245, .34);
  --sudoku-text: #f5f1ff;
  --sudoku-muted: #aaa5bf;
  --sudoku-coral: #ff6688;
  --sudoku-amber: #ffc66d;
  --sudoku-cyan: #72c7ff;
  --sudoku-violet: #a793ff;
  --sudoku-radius: 22px;
  --sudoku-cell-size: 62px;
}

#game-sudoku {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 4px 0 12px;
  color: var(--sudoku-text);
}

#game-sudoku.active {
  display: block;
}

#app.sudoku-active #header {
  width: 100%;
  max-width: 1180px;
}

.header-game-title {
  display: none;
}

#app.sudoku-active .header-game-title {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #eee9fb;
  font-size: 1.02rem;
  font-weight: 760;
  letter-spacing: .04em;
  transform: translateX(-50%);
}

#app.sudoku-active .header-game-title svg {
  width: 23px;
  height: 23px;
  color: #c8b7ff;
}

#app.sudoku-active #game-container {
  padding-inline: 0;
  overflow: hidden;
}

#app.sudoku-active #bottom-nav {
  margin-top: 6px;
}

.sudoku-shell {
  display: grid;
  grid-template-columns: 236px minmax(470px, 1fr) 246px;
  gap: 16px;
  align-items: start;
  width: 100%;
}

.sudoku-rail,
.sudoku-main {
  min-width: 0;
}

.sudoku-main {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.sudoku-rail {
  display: grid;
  gap: 12px;
}

.sudoku-panel,
.sudoku-board-frame,
.sudoku-control-deck,
.sudoku-mobile-status {
  border: 1px solid var(--sudoku-line);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)),
    var(--sudoku-surface);
  box-shadow: 0 20px 54px rgba(0, 0, 0, .24);
  backdrop-filter: blur(18px);
}

.sudoku-panel {
  border-radius: var(--sudoku-radius);
  padding: 15px;
}

.sudoku-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #d8d1eb;
  font-size: .83rem;
  font-weight: 720;
  letter-spacing: .04em;
}

.sudoku-panel-title svg,
.sudoku-action-icon svg,
.sudoku-mobile-chip svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.sudoku-case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sudoku-case-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -58px;
  bottom: -58px;
  border: 1px solid rgba(255, 102, 136, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(255, 102, 136, .025);
  pointer-events: none;
}

.sudoku-file-inset {
  position: relative;
  padding: 16px;
  border: 1px solid rgba(255, 228, 188, .18);
  border-radius: 16px;
  color: #f6ead7;
  background:
    linear-gradient(135deg, rgba(255, 211, 153, .09), rgba(255, 255, 255, .018)),
    rgba(255, 239, 215, .035);
}

.sudoku-file-inset::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 7px;
  left: 13px;
  top: 7px;
  border: 2px solid rgba(255, 210, 153, .55);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  transform: rotate(-7deg);
}

.sudoku-level-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 10px;
}

.sudoku-level-line strong {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--sudoku-text);
}

.sudoku-rank {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 102, 136, .42);
  border-radius: 999px;
  color: #ffdce5;
  background: rgba(255, 102, 136, .14);
  font-size: .7rem;
  font-weight: 720;
}

.sudoku-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: var(--sudoku-muted);
  font-size: .75rem;
}

.sudoku-stat-row strong {
  color: var(--sudoku-text);
  font-size: .88rem;
}

.sudoku-progress-card {
  padding-bottom: 17px;
}

.sudoku-progress-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--sudoku-muted);
  font-size: .72rem;
}

.sudoku-progress-copy strong {
  color: var(--sudoku-coral);
  font-size: 1.35rem;
}

.sudoku-progress-track {
  height: 5px;
  margin: 12px 0 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.sudoku-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sudoku-coral), #ff93aa);
  box-shadow: 0 0 15px rgba(255, 102, 136, .55);
  transition: width .35s ease;
}

.sudoku-boss-copy,
.sudoku-special-copy {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #c3bdd3;
  font-size: .7rem;
  line-height: 1.4;
}

.sudoku-special-copy {
  margin-top: 8px;
  color: #8f899f;
}

.sudoku-profile-button {
  width: 100%;
  margin-top: 11px;
  padding: 9px 10px;
  border: 1px solid var(--sudoku-line);
  border-radius: 12px;
  color: #d8d2e7;
  background: rgba(255, 255, 255, .035);
  font-size: .7rem;
  cursor: pointer;
}

.sudoku-profile-button:hover {
  border-color: rgba(114, 199, 255, .38);
  background: rgba(114, 199, 255, .08);
}

.sudoku-mobile-head,
.sudoku-mobile-status,
.sudoku-mobile-progress,
.sudoku-context-mobile {
  display: none;
}

.sudoku-board-frame {
  position: relative;
  width: min(100%, calc(100dvh - 220px), 636px);
  margin-inline: auto;
  padding: 8px;
  border-radius: 20px;
  overflow: hidden;
}

.sudoku-board {
  --sudoku-size: 9;
  --sudoku-box-rows: 3;
  --sudoku-box-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--sudoku-size), minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid rgba(205, 195, 245, .48);
  border-radius: 12px;
  background: #0e0d1c;
}

.sudoku-board.size-12,
.sudoku-board.size-16 {
  width: 100%;
}

.sudoku-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-right: 1px solid rgba(205, 195, 245, .14);
  border-bottom: 1px solid rgba(205, 195, 245, .14);
  border-radius: 0;
  color: #f4eadc;
  background: rgba(255, 255, 255, .012);
  font-family: ui-rounded, "SF Pro Rounded", "PingFang TC", sans-serif;
  font-size: clamp(.82rem, 2.1vw, 1.8rem);
  font-weight: 690;
  line-height: 1;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}

.sudoku-board.size-12 .sudoku-cell {
  font-size: clamp(.68rem, 1.55vw, 1.18rem);
}

.sudoku-board.size-16 .sudoku-cell {
  font-size: clamp(.56rem, 1.15vw, .92rem);
}

.sudoku-cell.box-right {
  border-right: 3px solid rgba(187, 178, 229, .42);
}

.sudoku-cell.box-bottom {
  border-bottom: 3px solid rgba(187, 178, 229, .42);
}

.sudoku-cell.related {
  background: rgba(167, 147, 255, .075);
}

.sudoku-cell.same-value {
  color: #f7dba4;
  background: rgba(255, 198, 109, .1);
}

.sudoku-cell.player-value {
  color: var(--sudoku-cyan);
}

.sudoku-cell.selected {
  z-index: 2;
  color: #fff8fb;
  background: linear-gradient(145deg, #ff7897, #d93f68);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22), 0 0 22px rgba(255, 102, 136, .35);
}

.sudoku-cell.hint-target {
  animation: sudokuHintPulse 1.1s ease-in-out 2;
}

.sudoku-cell.invalid {
  color: #ff7890;
  background: rgba(255, 74, 103, .14);
}

.sudoku-cell:focus-visible {
  z-index: 3;
  outline: 2px solid var(--sudoku-amber);
  outline-offset: -3px;
}

.sudoku-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  width: 86%;
  height: 82%;
  color: #c9c2dd;
  font-size: clamp(.32rem, .65vw, .52rem);
  font-weight: 570;
  line-height: 1;
}

.sudoku-board.size-12 .sudoku-notes,
.sudoku-board.size-16 .sudoku-notes {
  grid-template-columns: repeat(4, 1fr);
  font-size: clamp(.24rem, .45vw, .4rem);
}

.sudoku-notes span {
  display: grid;
  place-items: center;
}

.sudoku-control-deck {
  width: min(100%, calc(100dvh - 220px), 636px);
  margin: 10px auto 0;
  padding: 9px;
  border-radius: 18px;
}

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

.sudoku-key {
  min-width: 0;
  height: 42px;
  border: 1px solid var(--sudoku-line);
  border-radius: 11px;
  color: #eee8dc;
  background: rgba(255, 255, 255, .035);
  font-size: 1.02rem;
  font-weight: 720;
  cursor: pointer;
  transition: transform .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
}

.sudoku-key:hover,
.sudoku-key.active {
  color: #fff;
  border-color: rgba(255, 102, 136, .62);
  background: rgba(255, 102, 136, .16);
}

.sudoku-key:active {
  transform: scale(.94);
}

.sudoku-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 7px;
}

.sudoku-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  border: 1px solid var(--sudoku-line);
  border-radius: 11px;
  color: #cfc8df;
  background: rgba(255, 255, 255, .025);
  font-size: .72rem;
  font-weight: 680;
  cursor: pointer;
}

.sudoku-tool svg {
  width: 17px;
  height: 17px;
}

.sudoku-tool.is-on {
  color: var(--sudoku-cyan);
  border-color: rgba(114, 199, 255, .48);
  background: rgba(114, 199, 255, .1);
}

.sudoku-help-card {
  text-align: center;
}

.sudoku-help-count {
  margin-top: -2px;
  color: var(--sudoku-coral);
  font-size: 2.45rem;
  font-weight: 780;
  line-height: 1;
}

.sudoku-help-label {
  margin-top: 4px;
  color: var(--sudoku-muted);
  font-size: .7rem;
}

.sudoku-help-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 12px 0 5px;
}

.sudoku-help-dots span {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255, 198, 109, .38);
  border-radius: 50%;
  background: rgba(255, 198, 109, .08);
}

.sudoku-help-dots span.used {
  background: var(--sudoku-amber);
  box-shadow: 0 0 12px rgba(255, 198, 109, .54);
}

.sudoku-help-used {
  color: #c5bfd2;
  font-size: .7rem;
}

.sudoku-primary {
  width: 100%;
  min-height: 41px;
  margin-top: 12px;
  border: 0;
  border-radius: 12px;
  color: #190811;
  background: linear-gradient(135deg, #ff7897, #ff557b);
  box-shadow: 0 10px 24px rgba(255, 102, 136, .2);
  font-size: .79rem;
  font-weight: 780;
  cursor: pointer;
}

.sudoku-primary:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.sudoku-check-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.sudoku-day {
  min-width: 0;
  text-align: center;
  color: #777184;
  font-size: .5rem;
}

.sudoku-day-dot {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  margin: 4px auto 0;
  border: 1px solid var(--sudoku-line);
  border-radius: 50%;
  color: #777184;
  background: rgba(255, 255, 255, .025);
  font-size: .65rem;
}

.sudoku-day.done .sudoku-day-dot {
  color: #1d1304;
  border-color: var(--sudoku-amber);
  background: var(--sudoku-amber);
}

.sudoku-day.current .sudoku-day-dot {
  color: #ffdbe4;
  border-color: var(--sudoku-coral);
  background: rgba(255, 102, 136, .14);
  box-shadow: 0 0 0 3px rgba(255, 102, 136, .07);
}

.sudoku-reward-copy {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--sudoku-line);
  color: #bbb4c9;
  font-size: .68rem;
  text-align: center;
}

.sudoku-reward-copy strong {
  color: var(--sudoku-coral);
}

.sudoku-secondary {
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--sudoku-line);
  border-radius: 11px;
  color: #d6d0e3;
  background: rgba(255, 255, 255, .035);
  font-size: .7rem;
  font-weight: 660;
  cursor: pointer;
}

.sudoku-daily-status {
  color: #d9d3e7;
  font-size: .86rem;
  font-weight: 720;
}

.sudoku-daily-meta {
  margin-top: 4px;
  color: var(--sudoku-muted);
  font-size: .65rem;
  line-height: 1.4;
}

.sudoku-pause-layer {
  position: absolute;
  z-index: 8;
  inset: 8px;
  display: none;
  place-items: center;
  border-radius: 12px;
  background: rgba(8, 7, 19, .88);
  backdrop-filter: blur(13px);
}

.sudoku-pause-layer.active {
  display: grid;
}

.sudoku-pause-content {
  text-align: center;
}

.sudoku-pause-content svg {
  width: 46px;
  height: 46px;
  color: var(--sudoku-coral);
}

.sudoku-pause-content strong {
  display: block;
  margin-top: 8px;
  font-size: 1.05rem;
}

.sudoku-pause-content span {
  display: block;
  margin-top: 4px;
  color: var(--sudoku-muted);
  font-size: .72rem;
}

@keyframes sudokuHintPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(255, 198, 109, .3); }
  50% { box-shadow: inset 0 0 0 3px var(--sudoku-amber), 0 0 22px rgba(255, 198, 109, .35); }
}

/* Password, help, archive and completion surfaces */
.sudoku-overlay {
  z-index: 520;
  background: rgba(4, 3, 10, .8);
  backdrop-filter: blur(16px);
}

.sudoku-modal-card {
  width: min(92vw, 390px);
  max-width: none;
  padding: 23px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  color: var(--sudoku-text);
  background:
    radial-gradient(circle at 90% 0%, rgba(255, 102, 136, .14), transparent 36%),
    #17152a;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .5);
  text-align: left;
}

.sudoku-modal-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 102, 136, .28);
  border-radius: 15px;
  color: var(--sudoku-coral);
  background: rgba(255, 102, 136, .08);
}

.sudoku-modal-icon svg {
  width: 26px;
  height: 26px;
}

.sudoku-modal-card h2 {
  margin: 0;
  font-size: 1.2rem;
}

.sudoku-modal-card > p {
  margin: 7px 0 16px;
  color: var(--sudoku-muted);
  font-size: .75rem;
  line-height: 1.55;
}

.sudoku-password-input,
.sudoku-code-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  outline: 0;
  color: var(--sudoku-text);
  background: rgba(255, 255, 255, .045);
  font-size: 1.2rem;
  font-weight: 760;
  letter-spacing: .34em;
  text-align: center;
}

.sudoku-password-input:focus,
.sudoku-code-input:focus {
  border-color: rgba(255, 102, 136, .7);
  box-shadow: 0 0 0 4px rgba(255, 102, 136, .08);
}

.sudoku-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 8px;
  margin-top: 12px;
}

.sudoku-modal-actions button {
  min-height: 42px;
  border-radius: 12px;
  font-size: .76rem;
  font-weight: 720;
  cursor: pointer;
}

.sudoku-modal-cancel {
  border: 1px solid var(--sudoku-line);
  color: #cec8dc;
  background: rgba(255, 255, 255, .025);
}

.sudoku-modal-confirm {
  border: 0;
  color: #190811;
  background: var(--sudoku-coral);
}

.sudoku-lock-error {
  min-height: 18px;
  margin-top: 8px;
  color: #ff8da3;
  font-size: .68rem;
  text-align: center;
}

.sudoku-help-options {
  display: grid;
  gap: 8px;
}

.sudoku-help-option {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 11px;
  border: 1px solid var(--sudoku-line);
  border-radius: 14px;
  color: var(--sudoku-text);
  background: rgba(255, 255, 255, .025);
  text-align: left;
  cursor: pointer;
}

.sudoku-help-option:hover {
  border-color: rgba(255, 198, 109, .36);
  background: rgba(255, 198, 109, .06);
}

.sudoku-help-option > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--sudoku-amber);
  background: rgba(255, 198, 109, .08);
}

.sudoku-help-option strong,
.sudoku-help-option small {
  display: block;
}

.sudoku-help-option strong {
  font-size: .76rem;
}

.sudoku-help-option small {
  margin-top: 3px;
  color: var(--sudoku-muted);
  font-size: .64rem;
  line-height: 1.35;
}

.sudoku-help-option em {
  color: var(--sudoku-coral);
  font-size: .64rem;
  font-style: normal;
  font-weight: 740;
}

.sudoku-archive-code {
  padding: 14px;
  border: 1px dashed rgba(114, 199, 255, .4);
  border-radius: 14px;
  color: var(--sudoku-cyan);
  background: rgba(114, 199, 255, .06);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 1.08rem;
  font-weight: 760;
  letter-spacing: .15em;
  text-align: center;
  user-select: text;
  -webkit-user-select: text;
}

.sudoku-sync-state {
  margin-top: 8px;
  color: var(--sudoku-muted);
  font-size: .65rem;
  text-align: center;
}

.sudoku-complete-score {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 14px 0;
  color: rgba(255, 198, 109, .2);
  font-size: 1.8rem;
}

.sudoku-complete-score .earned {
  color: var(--sudoku-amber);
  filter: drop-shadow(0 0 9px rgba(255, 198, 109, .35));
}

/* Lobby-only protected entry */
.sudoku-lobby-entry {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  border-color: rgba(255, 102, 136, .2);
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 102, 136, .13), transparent 34%),
    rgba(23, 21, 42, .84);
}

.sudoku-lobby-entry::after {
  content: "9";
  position: absolute;
  right: 18px;
  bottom: -28px;
  color: rgba(255, 255, 255, .025);
  font-size: 7.6rem;
  font-weight: 850;
  pointer-events: none;
}

.sudoku-lobby-entry .sudoku-entry-top {
  display: flex;
  gap: 12px;
  align-items: center;
}

.sudoku-entry-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 102, 136, .36);
  border-radius: 13px;
  color: var(--sudoku-coral);
  background: rgba(255, 102, 136, .09);
}

.sudoku-entry-mark svg {
  width: 24px;
  height: 24px;
}

.sudoku-lobby-entry h3 {
  margin: 0;
}

.sudoku-lobby-entry p {
  margin-top: 4px;
  color: var(--text-light);
  font-size: .72rem;
}

.sudoku-entry-button {
  position: relative;
  z-index: 1;
  margin-top: 15px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 102, 136, .4);
  border-radius: 12px;
  color: #ffe9ef;
  background: rgba(255, 102, 136, .12);
  font-size: .72rem;
  font-weight: 720;
  cursor: pointer;
}

@media (max-width: 1080px) {
  .sudoku-shell {
    grid-template-columns: 190px minmax(430px, 1fr) 206px;
    gap: 11px;
  }

  .sudoku-panel {
    padding: 12px;
  }

  .sudoku-panel-title {
    font-size: .73rem;
  }
}

@media (min-width: 821px) and (max-height: 800px) {
  .sudoku-board-frame,
  .sudoku-control-deck {
    width: min(100%, calc(100dvh - 265px), 600px);
  }

  .sudoku-board-frame {
    padding: 6px;
  }

  .sudoku-control-deck {
    margin-top: 7px;
    padding: 6px;
  }

  .sudoku-key {
    height: 34px;
    font-size: .9rem;
  }

  .sudoku-tool {
    height: 32px;
    font-size: .64rem;
  }

  .sudoku-panel {
    padding: 12px;
  }
}

@media (max-width: 820px) {
  #app.sudoku-active {
    max-width: 600px;
    padding-inline: 0;
  }

  #app.sudoku-active #header,
  #app.sudoku-active #bottom-nav,
  #app.sudoku-active .app-footer {
    display: none;
  }

  #app.sudoku-active #game-container {
    padding: 0;
  }

  #game-sudoku {
    height: 100dvh;
    max-width: 600px;
    padding: 0;
    overflow: hidden;
  }

  .sudoku-shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: 100%;
    padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
  }

  .sudoku-rail {
    display: none;
  }

  .sudoku-main {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
  }

  .sudoku-mobile-head {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    min-height: 44px;
    margin-bottom: 5px;
  }

  .sudoku-mobile-back,
  .sudoku-mobile-sound {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--sudoku-line);
    border-radius: 50%;
    color: #cbc5dc;
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
  }

  .sudoku-mobile-back svg,
  .sudoku-mobile-sound svg {
    width: 19px;
    height: 19px;
  }

  .sudoku-mobile-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: .96rem;
    font-weight: 760;
  }

  .sudoku-mobile-title span {
    padding: 3px 6px;
    border: 1px solid rgba(255, 102, 136, .48);
    border-radius: 999px;
    color: #ff9db1;
    font-size: .52rem;
  }

  .sudoku-mobile-status {
    display: grid;
    grid-template-columns: 1.3fr .85fr .9fr;
    gap: 5px;
    padding: 5px;
    border-radius: 13px;
    box-shadow: none;
  }

  .sudoku-mobile-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    height: 33px;
    border: 0;
    border-radius: 9px;
    color: #d8d2e6;
    background: rgba(255, 255, 255, .035);
    font-size: .62rem;
    font-weight: 680;
    white-space: nowrap;
    cursor: pointer;
  }

  .sudoku-mobile-chip strong {
    color: var(--sudoku-coral);
  }

  .sudoku-mobile-progress {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 5px 0;
    color: #9e98ad;
    font-size: .58rem;
  }

  .sudoku-mobile-progress strong {
    color: #ddd7e8;
  }

  .sudoku-board-frame {
    flex: 0 0 auto;
    width: 100%;
    padding: 3px;
    border-radius: 13px;
  }

  .sudoku-board,
  .sudoku-board.size-12,
  .sudoku-board.size-16 {
    width: 100%;
    max-height: min(49dvh, calc(100vw - 26px));
    border-radius: 9px;
  }

  .sudoku-cell {
    font-size: clamp(.76rem, 5.1vw, 1.52rem);
  }

  .sudoku-board.size-12 .sudoku-cell {
    font-size: clamp(.55rem, 3.5vw, .95rem);
  }

  .sudoku-board.size-16 .sudoku-cell {
    font-size: clamp(.43rem, 2.55vw, .73rem);
  }

  .sudoku-notes {
    font-size: clamp(.25rem, 1.35vw, .42rem);
  }

  .sudoku-board.size-12 .sudoku-notes,
  .sudoku-board.size-16 .sudoku-notes {
    font-size: clamp(.18rem, .9vw, .3rem);
  }

  .sudoku-context-mobile {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 5px;
    align-items: center;
    min-height: 37px;
    margin: 5px 0;
    padding: 4px 5px 4px 10px;
    border: 1px solid var(--sudoku-line);
    border-radius: 12px;
    color: #bcb6ca;
    background: rgba(255, 255, 255, .025);
    font-size: .58rem;
  }

  .sudoku-context-mobile strong {
    color: var(--sudoku-coral);
  }

  .sudoku-context-button {
    min-height: 27px;
    padding: 0 8px;
    border: 1px solid var(--sudoku-line);
    border-radius: 8px;
    color: #cfc8df;
    background: rgba(255, 255, 255, .03);
    font-size: .55rem;
    cursor: pointer;
  }

  .sudoku-control-deck {
    display: flex;
    flex: 0 0 auto;
    min-height: 0;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: auto;
    padding: 6px;
    border-radius: 15px;
    box-shadow: none;
  }

  .sudoku-keypad {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .sudoku-key {
    height: clamp(38px, 6.3dvh, 52px);
    font-size: clamp(.82rem, 4.8vw, 1.25rem);
  }

  .sudoku-tools {
    gap: 5px;
    margin-top: 5px;
  }

  .sudoku-tool {
    height: clamp(34px, 5.4dvh, 46px);
    flex-direction: column;
    gap: 2px;
    font-size: .52rem;
  }

  .sudoku-tool svg {
    width: 16px;
    height: 16px;
  }

  .sudoku-key.complete-key {
    color: #fff5f7;
    background: linear-gradient(145deg, #e74c73, #bd2f58);
  }
}

@media (max-width: 820px) and (orientation: landscape) {
  #app.sudoku-active {
    max-width: none;
  }

  #game-sudoku {
    max-width: none;
  }

  .sudoku-shell {
    display: grid;
    grid-template-columns: minmax(280px, 56vh) 1fr;
    gap: 10px;
    padding-inline: 12px;
  }

  .sudoku-main {
    display: contents;
  }

  .sudoku-mobile-head,
  .sudoku-mobile-status,
  .sudoku-mobile-progress,
  .sudoku-context-mobile {
    grid-column: 2;
  }

  .sudoku-mobile-head {
    grid-row: 1;
  }

  .sudoku-mobile-status {
    grid-row: 2;
  }

  .sudoku-mobile-progress {
    grid-row: 3;
  }

  .sudoku-board-frame {
    grid-column: 1;
    grid-row: 1 / span 5;
    align-self: center;
  }

  .sudoku-board,
  .sudoku-board.size-12,
  .sudoku-board.size-16 {
    max-height: calc(100dvh - 24px);
    max-width: calc(100dvh - 24px);
  }

  .sudoku-context-mobile {
    grid-row: 4;
  }

  .sudoku-control-deck {
    grid-column: 2;
    grid-row: 5;
    align-self: stretch;
  }

  .sudoku-key {
    height: 44px;
  }

  .sudoku-tool {
    height: 40px;
  }
}

@media (max-width: 390px), (max-height: 720px) and (orientation: portrait) {
  .sudoku-shell {
    padding-inline: 7px;
  }

  .sudoku-mobile-head {
    min-height: 39px;
    margin-bottom: 3px;
  }

  .sudoku-mobile-back,
  .sudoku-mobile-sound {
    width: 32px;
    height: 32px;
  }

  .sudoku-mobile-status {
    padding: 3px;
  }

  .sudoku-mobile-chip {
    height: 29px;
    font-size: .55rem;
  }

  .sudoku-mobile-progress {
    margin: 3px 0;
  }

  .sudoku-context-mobile {
    min-height: 32px;
    margin: 3px 0;
  }

  .sudoku-control-deck {
    padding: 4px;
  }
}