/* ===== NEOBRUTALISM SUDOKU ===== */
    html {
      overscroll-behavior-y: none;
      height: 100%;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    :root {
      /* ── Core palette ── change --bg to retheme the whole app */
      --black: #111;
      /* stroke / shadow color */
      --white: #fff;
      /* surface color */
      --bg: #F97FD4;
      /* PRIMARY background & accent color — edit this to change the theme */
      --accent: #C8F735;
      /* legacy accent (lime) — kept for reference, currently overridden by --bg */
      --accent2: #FF6B6B;
      /* error / danger color */
      --accent3: #4ECDC4;
      /* tertiary accent (unused in current theme) */
      --accent4: #FFE66D;
      /* warning color (unused in current theme) */

      /* ── Neobrutalism shadows — offset-x offset-y blur color ── */
      --shadow: 4px 4px 0px var(--black);
      --shadow-sm: 3px 3px 0px var(--black);
      --shadow-lg: 6px 6px 0px var(--black);

      /* ── Borders & shape ── */
      --border: 2.5px solid var(--black);
      --radius: 12px;
    }

    body {
      font-family: 'Nunito', sans-serif;
      background: var(--bg);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow-x: hidden;
      overscroll-behavior-y: none;
    }

    /* ===== SCREENS ===== */
    .screen {
      width: 100%;
      max-width: 480px;
      min-height: 100vh;
      display: none;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .screen.active {
      display: flex;
    }

    .screen {
      animation: fadeIn .2s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    /* ===== WELCOME ===== */
    #screen-welcome {
      background: var(--bg);
      justify-content: center;
      padding: 40px 24px;
      gap: 0;
    }

    .welcome-deco {
      display: none;
    }

    .deco-circle {
      display: none;
    }

    .welcome-logo {
      font-size: 64px;
      margin-bottom: 8px;
      animation: float 3s ease-in-out infinite;
      filter: drop-shadow(3px 3px 0 var(--black));
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-8px);
      }
    }

    .welcome-title {
      font-size: 52px;
      font-weight: 900;
      color: var(--black);
      letter-spacing: -2px;
      text-align: center;
      margin-bottom: 4px;
      text-shadow: 4px 4px 0 rgba(0, 0, 0, .12);
    }

    .welcome-sub {
      font-size: 15px;
      font-weight: 700;
      color: var(--black);
      opacity: .6;
      text-align: center;
      margin-bottom: 36px;
    }

    /* mini board - neobrutalist */
    .mini-board {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: repeat(9, 1fr);
      width: 220px;
      height: 220px;
      border: 3px solid var(--black);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 36px;
      background: #fff;
      box-shadow: var(--shadow-lg);
    }

    .mini-cell {
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 800;
      color: var(--black);
    }

    .mini-cell.mg {
      color: #ddd;
    }

    .mini-cell[data-mc="2"] {
      border-right: 2px solid var(--black);
    }

    .mini-cell[data-mc="5"] {
      border-right: 2px solid var(--black);
    }

    .mini-cell[data-mr="2"] {
      border-bottom: 2px solid var(--black);
    }

    .mini-cell[data-mr="5"] {
      border-bottom: 2px solid var(--black);
    }

    .welcome-btn {
      width: 100%;
      max-width: 320px;
      padding: 16px 20px;
      border: var(--border);
      border-radius: var(--radius);
      font-family: 'Nunito', sans-serif;
      font-size: 18px;
      font-weight: 900;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: all .1s;
      letter-spacing: -.3px;
    }

    .btn-primary {
      background: var(--black);
      color: var(--bg);
      box-shadow: var(--shadow-lg);
      margin-bottom: 14px;
    }

    .btn-primary:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 var(--black);
    }

    .btn-primary:active {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0 var(--black);
    }

    .btn-secondary {
      background: #fff;
      color: var(--black);
      box-shadow: var(--shadow);
      margin-bottom: 14px;
    }

    .btn-secondary:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 var(--black);
    }

    .btn-secondary:active {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0 var(--black);
    }

    .welcome-footer {
      position: absolute;
      bottom: 24px;
      font-size: 12px;
      font-weight: 700;
      color: var(--black);
      opacity: .45;
    }

    /* ===== DIFFICULTY SCREEN ===== */
    #screen-difficulty {
      background: var(--bg);
    }

    .diff-header {
      width: 100%;
      padding: 18px 16px 14px;
      background: #fff;
      border-bottom: var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 3px 0 var(--black);
    }

    .back-btn {
      width: 38px;
      height: 38px;
      background: var(--bg);
      border: var(--border);
      border-radius: 10px;
      font-size: 18px;
      font-weight: 900;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-sm);
      transition: all .1s;
    }

    .back-btn:hover {
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0 var(--black);
    }

    .back-btn:active {
      transform: translate(2px, 2px);
      box-shadow: 1px 1px 0 var(--black);
    }

    .diff-header-title {
      font-size: 20px;
      font-weight: 900;
      color: var(--black);
    }

    .diff-content {
      width: 100%;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;
    }

    .diff-intro {
      font-size: 14px;
      font-weight: 700;
      color: var(--black);
      opacity: .55;
      text-align: center;
      margin-bottom: 4px;
    }

    .diff-card {
      width: 100%;
      background: #fff;
      border: var(--border);
      border-radius: var(--radius);
      padding: 18px 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 16px;
      position: relative;
      box-shadow: var(--shadow);
      transition: all .1s;
    }

    .diff-card::before {
      display: none;
    }

    .diff-card:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 var(--black);
    }

    .diff-card:active {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0 var(--black);
    }

    .diff-icon {
      font-size: 32px;
      min-width: 42px;
      text-align: center;
    }

    .diff-info {
      flex: 1;
    }

    .diff-name {
      font-size: 17px;
      font-weight: 900;
      color: var(--black);
      margin-bottom: 3px;
    }

    .diff-desc {
      font-size: 12px;
      font-weight: 700;
      color: #666;
    }

    .diff-cells {
      font-size: 12px;
      font-weight: 900;
      padding: 6px 12px;
      border-radius: 20px;
      border: 2px solid var(--black);
    }

    .diff-card[data-d="easy"] .diff-cells {
      background: #F97FD4;
      color: var(--black);
    }

    .diff-card[data-d="medium"] .diff-cells {
      background: #FFE66D;
      color: var(--black);
    }

    .diff-card[data-d="hard"] .diff-cells {
      background: #FF6B6B;
      color: #fff;
    }

    .diff-card[data-d="expert"] .diff-cells {
      background: var(--black);
      color: var(--accent);
    }

    /* color tag per card */
    .diff-card[data-d="easy"] {
      border-left: 6px solid #C8F735;
    }

    .diff-card[data-d="medium"] {
      border-left: 6px solid #FFE66D;
    }

    .diff-card[data-d="hard"] {
      border-left: 6px solid #FF6B6B;
    }

    .diff-card[data-d="expert"] {
      border-left: 6px solid var(--black);
    }

    /* ===== GAME SCREEN ===== */
    #screen-game {
      background: var(--bg);
    }

    /* HEADER */
    .header {
      width: 100%;
      max-width: 480px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px 10px;
      background: #fff;
      border-bottom: var(--border);
      box-shadow: 0 3px 0 var(--black);
      position: relative;
      z-index: 102;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }

    .header-icon {
      width: 36px;
      height: 36px;
      background: var(--bg);
      border: var(--border);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      box-shadow: var(--shadow-sm);
      font-weight: 900;
      transition: all .1s;
    }

    .header-left:hover .header-icon {
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0 var(--black);
    }

    .header-left span {
      font-weight: 900;
      font-size: 17px;
      color: var(--black);
    }

    .header-right {
      display: flex;
      gap: 8px;
    }

    .icon-btn {
      width: 36px;
      height: 36px;
      background: #fff;
      border: var(--border);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: all .1s;
    }

    .icon-btn:hover {
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0 var(--black);
    }

    .icon-btn:active {
      transform: translate(2px, 2px);
      box-shadow: 1px 1px 0 var(--black);
    }

    /* INFO BAR */
    .info-bar {
      width: 100%;
      max-width: 480px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 14px 6px;
      background: var(--bg);
    }

    .diff-badge {
      font-size: 12px;
      font-weight: 900;
      color: var(--black);
      background: #fff;
      border: 2px solid var(--black);
      border-radius: 20px;
      padding: 3px 10px;
      box-shadow: 2px 2px 0 var(--black);
    }

    .mistake-info {
      font-size: 12px;
      font-weight: 800;
      color: var(--black);
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .mistake-dots-row {
      display: flex;
      gap: 4px;
    }

    .mdot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--black);
      transition: background .2s;
    }

    .mdot.active {
      background: var(--accent2);
    }

    .timer-info {
      font-size: 14px;
      font-weight: 900;
      color: var(--black);
      font-variant-numeric: tabular-nums;
      background: #fff;
      border: 2px solid var(--black);
      border-radius: 20px;
      padding: 3px 10px;
      box-shadow: 2px 2px 0 var(--black);
    }

    /* BOARD */
    .board-wrap {
      width: 100%;
      max-width: 480px;
      padding: 8px 12px 6px;
      background: var(--bg);
    }

    .board {
      width: 100%;
      aspect-ratio: 1/1;
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: repeat(9, 1fr);
      border: 3px solid var(--black);
      border-radius: var(--radius);
      overflow: hidden;
      background: #fff;
      user-select: none;
      -webkit-user-select: none;
      box-shadow: var(--shadow-lg);
    }

    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      font-size: clamp(14px, 4vw, 22px);
      font-weight: 900;
      color: var(--black);
      cursor: pointer;
      transition: background .08s;
      position: relative;
    }

    .cell:nth-child(9n) {
      border-right: none;
    }

    .cell:nth-child(n+73) {
      border-bottom: none;
    }

    .cell[data-c="2"] {
      border-right: 2.5px solid var(--black);
    }

    .cell[data-c="5"] {
      border-right: 2.5px solid var(--black);
    }

    .cell[data-r="2"] {
      border-bottom: 2.5px solid var(--black);
    }

    .cell[data-r="5"] {
      border-bottom: 2.5px solid var(--black);
    }

    .cell.given {
      color: var(--black);
    }

    .cell.user-val {
      color: #4B6BFB;
      font-weight: 900;
    }

    .cell.error {
      color: var(--accent2);
      font-weight: 900;
    }

    .cell.selected {
      background: #F97FD4 !important;
    }

    .cell.highlight-same {
      background: #fbbde8;
    }

    .cell.highlight-zone {
      background: #fde4f5;
    }

    .cell.correct-pop {
      animation: pop .3s ease;
    }

    @keyframes pop {
      0% {
        transform: scale(1.2);
      }

      100% {
        transform: scale(1);
      }
    }

    .cell.locked {
      cursor: default;
    }

    .cell.wave {
      animation: wave .5s ease forwards;
    }

    @keyframes wave {
      0% {
        transform: scale(1);
        background: #F97FD4;
      }

      30% {
        transform: scale(1.18);
        background: #F97FD4;
      }

      60% {
        transform: scale(0.95);
        background: #fbbde8;
      }

      100% {
        transform: scale(1);
        background: transparent;
      }
    }

    .cell.shake {
      animation: shake .4s ease;
    }

    @keyframes shake {
      0% {
        transform: translateX(0);
      }

      15% {
        transform: translateX(-5px);
      }

      30% {
        transform: translateX(5px);
      }

      45% {
        transform: translateX(-4px);
      }

      60% {
        transform: translateX(4px);
      }

      75% {
        transform: translateX(-2px);
      }

      90% {
        transform: translateX(2px);
      }

      100% {
        transform: translateX(0);
      }
    }

    .notes-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      width: 100%;
      height: 100%;
      padding: 1px;
    }

    .note-n {
      font-size: clamp(7px, 1.8vw, 11px);
      font-weight: 700;
      color: #999;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    /* CONTROLS */
    .controls {
      width: 100%;
      max-width: 480px;
      padding: 8px 10px 6px;
      display: flex;
      justify-content: space-around;
      background: var(--bg);
      gap: 6px;
    }

    .ctrl-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      background: #fff;
      border: var(--border);
      border-radius: var(--radius);
      cursor: pointer;
      padding: 8px 4px;
      box-shadow: var(--shadow-sm);
      transition: all .1s;
    }

    .ctrl-btn:hover {
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0 var(--black);
    }

    .ctrl-btn:active {
      transform: translate(2px, 2px);
      box-shadow: 1px 1px 0 var(--black);
    }

    .ctrl-icon {
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      line-height: 1;
      transition: background .15s;
    }

    .ctrl-label {
      font-size: 10px;
      font-weight: 900;
      color: var(--black);
    }

    .ctrl-btn.notes-on {
      background: var(--accent);
    }

    .ctrl-btn.notes-on .ctrl-label {
      color: var(--black);
    }

    .hint-badge {
      position: absolute;
      top: -4px;
      right: -8px;
      background: var(--accent2);
      color: #fff;
      font-size: 9px;
      font-weight: 900;
      border-radius: 50%;
      border: 2px solid var(--black);
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* NUMPAD */
    .numpad {
      width: 100%;
      max-width: 480px;
      display: flex;
      justify-content: space-around;
      padding: 8px 10px 14px;
      background: var(--bg);
      gap: 5px;
    }

    .num-btn {
      flex: 1;
      padding: 8px 2px 6px;
      background: #fff;
      border: var(--border);
      border-radius: var(--radius);
      font-family: 'Nunito', sans-serif;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: all .1s;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
    }

    .num-btn:hover {
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0 var(--black);
    }

    .num-btn:active {
      transform: translate(2px, 2px);
      box-shadow: 1px 1px 0 var(--black);
    }

    .num-btn.done {
      opacity: .3;
      pointer-events: none;
    }

    .num-main {
      font-size: clamp(16px, 4.5vw, 24px);
      font-weight: 900;
      color: #4B6BFB;
      line-height: 1;
    }

    .num-btn.done .num-main {
      color: #bbb;
    }

    .num-remain {
      font-size: 9px;
      font-weight: 800;
      color: #999;
      line-height: 1;
    }

    .num-btn.done .num-remain {
      color: #ddd;
    }

    /* OVERLAY */
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
    }

    #confirm-overlay {
      z-index: 101;
    }

    /* always above other overlays */
    #pause-overlay {
      z-index: 100;
    }

    .overlay.show {
      opacity: 1;
      pointer-events: all;
    }

    .modal {
      background: #fff;
      border: 3px solid var(--black);
      border-radius: 20px;
      padding: 32px 28px;
      text-align: center;
      width: 300px;
      box-shadow: 8px 8px 0 var(--black);
      transform: scale(.85);
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
    }

    .overlay.show .modal {
      transform: scale(1);
    }

    .modal-emoji {
      font-size: 52px;
      display: block;
      margin-bottom: 8px;
    }

    .modal-title {
      font-size: 28px;
      font-weight: 900;
      color: var(--black);
      margin-bottom: 4px;
      letter-spacing: -1px;
    }

    .modal-sub {
      font-size: 13px;
      font-weight: 700;
      color: #666;
      margin-bottom: 18px;
    }

    .modal-stats {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin-bottom: 20px;
    }

    .ms {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      background: var(--bg);
      border: 2px solid var(--black);
      border-radius: 10px;
      padding: 10px 6px;
      box-shadow: 3px 3px 0 var(--black);
    }

    .ms-val {
      font-size: 20px;
      font-weight: 900;
      color: var(--black);
    }

    .ms-lbl {
      font-size: 10px;
      font-weight: 800;
      color: #666;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .modal-btn {
      width: 100%;
      padding: 14px;
      background: var(--black);
      border: var(--border);
      border-radius: var(--radius);
      color: var(--bg);
      font-family: 'Nunito', sans-serif;
      font-size: 16px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: var(--shadow);
      transition: all .1s;
      margin-bottom: 10px;
    }

    .modal-btn:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 var(--black);
    }

    .modal-btn:active {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0 var(--black);
    }

    .modal-btn-sec {
      width: 100%;
      padding: 12px;
      background: #fff;
      border: var(--border);
      border-radius: var(--radius);
      color: var(--black);
      font-family: 'Nunito', sans-serif;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: all .1s;
    }

    .modal-btn-sec:hover {
      transform: translate(-2px, -2px);
      box-shadow: 4px 4px 0 var(--black);
    }

    .modal-btn-sec:active {
      transform: translate(2px, 2px);
      box-shadow: 1px 1px 0 var(--black);
    }

    /* ===== BEST TIMES SCREEN ===== */
    #screen-besttimes {
      background: var(--bg);
    }

    .bt-header {
      width: 100%;
      padding: 18px 16px 14px;
      background: #fff;
      border-bottom: var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 3px 0 var(--black);
    }

    .bt-content {
      width: 100%;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1;
    }

    .bt-level {
      background: #fff;
      border: var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .bt-level-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px 10px;
      border-bottom: 2px solid var(--black);
    }

    .bt-level-icon {
      font-size: 22px;
    }

    .bt-level-name {
      font-size: 16px;
      font-weight: 900;
      color: var(--black);
    }

    .bt-rows {
      padding: 8px 0;
    }

    .bt-row {
      display: flex;
      align-items: center;
      padding: 8px 16px;
      gap: 12px;
    }

    .bt-row:not(:last-child) {
      border-bottom: 1px solid #eee;
    }

    .bt-rank {
      font-size: 18px;
      font-weight: 900;
      min-width: 28px;
      text-align: center;
    }

    .bt-time {
      font-size: 16px;
      font-weight: 900;
      color: var(--black);
      font-variant-numeric: tabular-nums;
      flex: 1;
    }

    .bt-mistakes {
      font-size: 12px;
      font-weight: 700;
      color: #999;
    }

    .bt-empty {
      padding: 14px 16px;
      font-size: 13px;
      font-weight: 700;
      color: #bbb;
      text-align: center;
    }

    .bt-clear-btn {
      margin: 0 16px 16px;
      padding: 10px;
      background: none;
      border: 2px solid #ddd;
      border-radius: 10px;
      font-family: 'Nunito', sans-serif;
      font-size: 13px;
      font-weight: 700;
      color: #bbb;
      cursor: pointer;
      transition: all .1s;
      width: calc(100% - 32px);
    }

    .bt-clear-btn:hover {
      border-color: var(--accent2);
      color: var(--accent2);
    }

    /* paused state — board blurs out so puzzle isn't visible */
    .board.paused {
      filter: blur(6px);
      pointer-events: none;
      user-select: none;
    }

    .timer-info.paused {
      opacity: .4;
    }

    #screen-game.game-paused .controls,
    #screen-game.game-paused .numpad {
      pointer-events: none;
      opacity: .35;
    }

    /* ===== LOADING SPINNER ===== */
    .loading-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .55);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 200;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
    }

    .loading-overlay.show {
      opacity: 1;
      pointer-events: all;
    }

    .spinner {
      width: 52px;
      height: 52px;
      border: 5px solid rgba(255, 255, 255, .25);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin .7s linear infinite;
      margin-bottom: 16px;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .loading-text {
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .05em;
      opacity: .8;
    }

    /* ===== TUTORIAL OVERLAY ===== */
    .tutorial-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 150;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
    }

    .tutorial-overlay.show {
      opacity: 1;
      pointer-events: all;
    }

    .tutorial-card {
      background: #fff;
      border: 3px solid var(--black);
      border-radius: 20px;
      padding: 28px 24px;
      width: 310px;
      box-shadow: 8px 8px 0 var(--black);
      transform: scale(.85);
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
    }

    .tutorial-overlay.show .tutorial-card {
      transform: scale(1);
    }

    .tutorial-step {
      display: none;
    }

    .tutorial-step.active {
      display: block;
    }

    .tutorial-icon {
      font-size: 40px;
      text-align: center;
      margin-bottom: 10px;
    }

    .tutorial-title {
      font-size: 18px;
      font-weight: 900;
      color: var(--black);
      margin-bottom: 6px;
      text-align: center;
    }

    .tutorial-desc {
      font-size: 13px;
      font-weight: 600;
      color: #666;
      line-height: 1.6;
      text-align: center;
      margin-bottom: 20px;
    }

    .tutorial-dots {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-bottom: 18px;
    }

    .tutorial-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ddd;
      border: 2px solid var(--black);
      transition: background .2s;
    }

    .tutorial-dot.active {
      background: var(--bg);
    }

    .tutorial-btns {
      display: flex;
      gap: 10px;
    }

    .tutorial-btn {
      flex: 1;
      padding: 12px;
      border: var(--border);
      border-radius: 12px;
      font-family: 'Nunito', sans-serif;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      transition: all .1s;
      box-shadow: var(--shadow-sm);
    }

    .tutorial-btn.primary {
      background: var(--black);
      color: #fff;
    }

    .tutorial-btn.secondary {
      background: #fff;
      color: var(--black);
    }

    .tutorial-btn:hover {
      transform: translate(-1px, -1px);
    }

    .tutorial-btn:active {
      transform: translate(1px, 1px);
      box-shadow: 1px 1px 0 var(--black);
    }

    body.dark .tutorial-card {
      background: #1e1e30;
    }

    body.dark .tutorial-title {
      color: #e0e0f0;
    }

    body.dark .tutorial-btn.secondary {
      background: #2a2a42;
      color: #e0e0f0;
    }

    /* ===== DARK MODE ===== */
    body.dark {
      --black: #c8c8e8;
      --shadow: 4px 4px 0px #c8c8e8;
      --shadow-sm: 3px 3px 0px #c8c8e8;
      --shadow-lg: 6px 6px 0px #c8c8e8;
      --border: 2.5px solid #c8c8e8;
    }

    body.dark,
    body.dark #screen-welcome,
    body.dark #screen-difficulty,
    body.dark #screen-besttimes,
    body.dark #screen-settings,
    body.dark #screen-game {
      background: #1a1a2e !important;
    }

    body.dark .welcome-title {
      color: #e0e0f0;
      text-shadow: none;
    }

    body.dark .welcome-sub {
      color: rgba(224, 224, 240, .6);
    }

    body.dark .welcome-logo {
      filter: none;
    }

    body.dark .mini-board {
      background: #2a2a42;
    }

    body.dark .mini-cell {
      color: #c0c0e0;
    }

    body.dark .mini-cell.mg {
      color: #444;
    }

    body.dark .streak-badge {
      background: #2a2a42;
      color: #e0e0f0;
    }

    body.dark .welcome-btn.btn-primary {
      background: #2a2a42;
      color: #e0e0f0;
    }

    body.dark .welcome-btn.btn-secondary {
      background: #1e1e30;
      color: #ccc;
    }

    body.dark .welcome-footer {
      color: rgba(224, 224, 240, .35);
    }

    body.dark .cell {
      background: #1e1e30;
      color: #e0e0f0;
    }

    body.dark .cell.given {
      color: #e0e0f0;
    }

    body.dark .cell.user-val {
      color: #7eb8ff;
    }

    body.dark .cell.highlight-zone {
      background: #2a2a42;
    }

    body.dark .cell.highlight-same {
      background: #333358;
    }

    body.dark .cell.selected {
      background: #4a3f8a !important;
    }

    body.dark .board {
      background: #1e1e30;
    }

    body.dark .header,
    body.dark .info-bar,
    body.dark .board-wrap,
    body.dark .controls,
    body.dark .numpad {
      background: #1e1e30;
    }

    body.dark .icon-btn,
    body.dark .header-icon,
    body.dark .back-btn,
    body.dark .ctrl-btn,
    body.dark .num-btn {
      background: #2a2a42;
    }

    body.dark .ctrl-icon {
      background: #2a2a42;
    }

    body.dark .icon-btn:hover,
    body.dark .back-btn:hover,
    body.dark .ctrl-btn:hover,
    body.dark .num-btn:hover {
      background: #3a3a5a;
    }

    body.dark .header-left span,
    body.dark .ctrl-label {
      color: #e0e0f0;
    }

    body.dark .diff-badge,
    body.dark .timer-info {
      background: #2a2a42;
      color: #e0e0f0;
    }

    body.dark .mistake-info {
      color: #aaa;
    }

    body.dark .mdot {
      background: #333;
    }

    body.dark .num-main {
      color: #7eb8ff;
    }

    body.dark .num-remain {
      color: #666;
    }

    body.dark .note-n {
      color: #556;
    }

    body.dark .modal,
    body.dark .bt-level,
    body.dark .settings-section {
      background: #1e1e30;
    }

    body.dark .modal-title,
    body.dark .bt-level-name,
    body.dark .bt-time {
      color: #e0e0f0;
    }

    body.dark .modal-sub {
      color: #888;
    }

    body.dark .modal-btn-sec {
      background: #2a2a42;
      color: #e0e0f0;
    }

    body.dark .ms {
      background: #2a2a42;
    }

    body.dark .ms-val {
      color: #e0e0f0;
    }

    body.dark .diff-header,
    body.dark .bt-header,
    body.dark .settings-header {
      background: #1e1e30;
    }

    body.dark .diff-header-title {
      color: #e0e0f0;
    }

    body.dark .diff-card {
      background: #2a2a42;
    }

    body.dark .diff-name {
      color: #e0e0f0;
    }

    body.dark .diff-desc,
    body.dark .diff-intro {
      color: #888;
    }

    body.dark .settings-label {
      color: #e0e0f0;
    }

    body.dark .settings-row {
      border-color: #333;
    }

    body.dark .settings-section-title {
      color: #aaa;
    }

    body.dark .toggle-slider {
      background: #333;
    }

    body.dark .toggle-slider::before {
      background: #2a2a42;
    }

    body.dark .bt-row:not(:last-child) {
      border-color: #333;
    }

    body.dark .bt-clear-btn {
      color: #666;
    }

    body.dark .stat-box {
      background: #2a2a42;
    }

    body.dark .stat-box-val {
      color: #e0e0f0;
    }

    /* ===== SETTINGS SCREEN ===== */
    #screen-settings {
      background: var(--bg);
    }

    .settings-header {
      width: 100%;
      padding: 18px 16px 14px;
      background: #fff;
      border-bottom: var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 3px 0 var(--black);
    }

    body.dark .settings-header {
      background: #1e1e30;
    }

    .settings-content {
      width: 100%;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;
      max-width: 480px;
    }

    .settings-section {
      background: #fff;
      border: var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    body.dark .settings-section {
      background: #2a2a42;
    }

    .settings-section-title {
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--black);
      opacity: .5;
      padding: 12px 16px 6px;
    }

    .settings-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-top: 1px solid #eee;
    }

    body.dark .settings-row {
      border-color: #333;
    }

    .settings-row:first-of-type {
      border-top: none;
    }

    .settings-label {
      font-size: 14px;
      font-weight: 700;
      color: var(--black);
    }

    .settings-desc {
      font-size: 11px;
      font-weight: 600;
      color: #999;
      margin-top: 1px;
    }

    /* toggle switch */
    .toggle {
      position: relative;
      width: 46px;
      height: 26px;
      flex-shrink: 0;
    }

    .toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      inset: 0;
      background: #ddd;
      border: 2px solid var(--black);
      border-radius: 30px;
      cursor: pointer;
      transition: background .2s;
    }

    .toggle-slider::before {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      background: #fff;
      border: 2px solid var(--black);
      border-radius: 50%;
      top: 2px;
      left: 2px;
      transition: transform .2s;
      box-shadow: 1px 1px 0 var(--black);
    }

    .toggle input:checked+.toggle-slider {
      background: var(--bg);
    }

    .toggle input:checked+.toggle-slider::before {
      transform: translateX(20px);
    }

    /* theme swatches */
    .theme-swatches {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .swatch {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2.5px solid transparent;
      cursor: pointer;
      transition: all .1s;
      box-shadow: 2px 2px 0 var(--black);
    }

    .swatch.active {
      border-color: var(--black);
      transform: scale(1.15);
    }

    .swatch:hover {
      transform: scale(1.1);
    }

    /* ===== WIN CONFETTI ===== */
    .confetti-container {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 98;
      overflow: hidden;
    }

    .confetti-piece {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 2px;
      animation: confettiFall linear forwards;
    }

    @keyframes confettiFall {
      0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 1;
      }

      100% {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0;
      }
    }

    /* ===== NUMPAD ACTIVE HIGHLIGHT ===== */
    .num-btn.active-num {
      background: var(--bg);
      border-color: var(--black);
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0 var(--black);
    }

    /* ===== STREAK BADGE on welcome ===== */
    .streak-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #fff;
      border: var(--border);
      border-radius: 20px;
      padding: 6px 14px;
      box-shadow: var(--shadow-sm);
      font-size: 13px;
      font-weight: 800;
      color: var(--black);
      margin-bottom: 16px;
    }

    /* ===== STATS in best times ===== */
    .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 12px 14px;
    }

    .stat-box {
      background: var(--bg);
      border: 2px solid var(--black);
      border-radius: 10px;
      padding: 8px 10px;
      text-align: center;
      box-shadow: 2px 2px 0 var(--black);
    }

    .stat-box-val {
      font-size: 18px;
      font-weight: 900;
      color: var(--black);
    }

    .stat-box-lbl {
      font-size: 10px;
      font-weight: 800;
      color: #666;
      text-transform: uppercase;
      letter-spacing: .04em;
    }