:root {
  --nmx-accent:        #4f46e5;
  --nmx-accent-dark:   #3730a3;
  --nmx-accent-light:  #818cf8;
  --nmx-gold:          #f59e0b;
  --nmx-success:       #10b981;
  --nmx-error:         #ef4444;
  --nmx-warning:       #f59e0b;
  --nmx-bg:            #f8f7ff;
  --nmx-surface:       #ffffff;
  --nmx-surface-2:     #f1f0fc;
  --nmx-border:        rgba(79,70,229,0.14);
  --nmx-border-strong: rgba(79,70,229,0.30);
  --nmx-text:          #1e1b4b;
  --nmx-text-2:        #4c4a7a;
  --nmx-text-3:        #7c7aaa;
  --nmx-radius:        12px;
  --nmx-radius-sm:     8px;
  --nmx-radius-tile:   10px;
  --nmx-ease:          cubic-bezier(0.34, 1.56, 0.64, 1);
  --nmx-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --nmx-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --nmx-font-mono:     'Courier New', Courier, monospace;
}

/* Dark mode: when the game-wrap has nmx-dark, propagate vars to :root
   via JS (see ui-controller.js initToggles). Overlays read from :root.  */

/**
 * Numonex V4 — Main Game Stylesheet
 * Scoped entirely to .nmx-game-wrap to avoid theme conflicts.
 */

/* ── Design Tokens ──────────────────────────────────────────────────────── */
.nmx-game-wrap {
  /* Accent & brand */
  --nmx-accent:        #4f46e5;
  --nmx-accent-dark:   #3730a3;
  --nmx-accent-light:  #818cf8;
  --nmx-gold:          #f59e0b;
  --nmx-silver:        #94a3b8;
  --nmx-bronze:        #b45309;
  --nmx-success:       #10b981;
  --nmx-error:         #ef4444;
  --nmx-warning:       #f59e0b;

  /* Light mode surfaces */
  --nmx-bg:            #f8f7ff;
  --nmx-surface:       #ffffff;
  --nmx-surface-2:     #f1f0fc;
  --nmx-border:        rgba(79,70,229,0.14);
  --nmx-border-strong: rgba(79,70,229,0.30);

  /* Light mode text */
  --nmx-text:          #1e1b4b;
  --nmx-text-2:        #4c4a7a;
  --nmx-text-3:        #7c7aaa;

  /* Tile colours (light) */
  --nmx-tile-bg:       #ffffff;
  --nmx-tile-border:   #c7d2fe;
  --nmx-tile-text:     #1e1b4b;
  --nmx-tile-shadow:   0 2px 8px rgba(79,70,229,0.12);
  --nmx-blank-bg:      #ede9fe;
  --nmx-blank-border:  #4f46e5;
  --nmx-blank-text:    #4f46e5;

  /* Transitions */
  --nmx-ease:          cubic-bezier(0.34, 1.56, 0.64, 1);
  --nmx-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --nmx-radius:        12px;
  --nmx-radius-sm:     8px;
  --nmx-radius-tile:   10px;

  /* Fonts */
  --nmx-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --nmx-font-mono:     'Courier New', Courier, monospace;

  font-family: var(--nmx-font);
  background:  var(--nmx-bg);
  color:       var(--nmx-text);
  max-width:   820px;
  margin:      0 auto;
  padding:     0 0 24px;
  position:    relative;
  border-radius: var(--nmx-radius);
  overflow:    hidden;
  box-shadow:  0 4px 32px rgba(79,70,229,0.08);
}

/* ── Full screen mode ──────────────────────────────────────────────────────
   Native Fullscreen API: the browser itself stretches the element to fill
   the screen and removes page chrome (address bar, tabs, etc. on most
   platforms). We just need to remove our own width cap and rounded corners
   so the game fills that space edge-to-edge instead of floating in the
   middle of a now-black/default background with awkward margins. */
.nmx-game-wrap:fullscreen,
.nmx-game-wrap:-webkit-full-screen,
.nmx-game-wrap:-moz-full-screen,
.nmx-game-wrap:-ms-fullscreen {
  max-width:     100%;
  width:         100%;
  height:        100%;
  border-radius: 0;
  box-shadow:    none;
  overflow-y:    auto;
  display:       flex;
  flex-direction: column;
}

/* ── Full screen fallback (iPhone Safari — no Fullscreen API exists) ───────
   Expands the game to cover the full viewport using fixed positioning.
   This is the closest a web page can get to "fullscreen" on a platform
   that does not expose requestFullscreen at all. Safari's own toolbar is
   not something a web page can remove — that is a browser-level limit on
   iPhone specifically, not something fixable in CSS or JS. */
.nmx-game-wrap.nmx-fs-fallback {
  position:      fixed;
  top:           0;
  right:         0;
  bottom:        0;
  left:          0;
  z-index:       9998; /* below the gameover/tutorial overlays (9999) */
  max-width:     100%;
  width:         100%;
  height:        100%;
  border-radius: 0;
  box-shadow:    none;
  overflow-y:    auto;
  display:       flex;
  flex-direction: column;
}

/* ── Dark Mode ──────────────────────────────────────────────────────────── */
.nmx-game-wrap.nmx-dark {
  --nmx-bg:            #0f0e1a;
  --nmx-surface:       #1a1830;
  --nmx-surface-2:     #231f3a;
  --nmx-border:        rgba(129,140,248,0.15);
  --nmx-border-strong: rgba(129,140,248,0.35);
  --nmx-text:          #e0deff;
  --nmx-text-2:        #a09ec8;
  --nmx-text-3:        #6764a0;
  --nmx-tile-bg:       #231f3a;
  --nmx-tile-border:   #4f46e5;
  --nmx-tile-text:     #e0deff;
  --nmx-tile-shadow:   0 2px 12px rgba(79,70,229,0.25);
  --nmx-blank-bg:      #1e1b4b;
  --nmx-blank-border:  #818cf8;
  --nmx-blank-text:    #a5b4fc;
}

/* ── Top Bar ────────────────────────────────────────────────────────────── */
.nmx-topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  padding:         12px 16px;
  background:      var(--nmx-surface);
  border-bottom:   1px solid var(--nmx-border);
  flex-wrap:       wrap;
}

.nmx-level-selector {
  display: flex;
  gap:     4px;
  flex-wrap: wrap;
}

.nmx-level-btn {
  padding:       5px 12px;
  border:        1.5px solid var(--nmx-border-strong);
  border-radius: 20px;
  background:    transparent;
  color:         var(--nmx-text-2);
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
  transition:    all 0.18s ease;
  white-space:   nowrap;
  font-family:   var(--nmx-font);
}
.nmx-level-btn:hover {
  background: var(--nmx-surface-2);
  color:      var(--nmx-text);
}
.nmx-level-btn--active {
  background:    var(--nmx-accent);
  border-color:  var(--nmx-accent);
  color:         #fff;
}
.nmx-level-btn--active:hover {
  background: var(--nmx-accent-dark);
}

.nmx-topbar-right {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.nmx-icon-btn {
  width:         36px;
  height:        36px;
  border:        1.5px solid var(--nmx-border);
  border-radius: 50%;
  background:    var(--nmx-surface);
  color:         var(--nmx-text-2);
  cursor:        pointer;
  display:       -webkit-inline-flex;
  display:       inline-flex;
  -webkit-align-items:     center;
          align-items:     center;
  -webkit-justify-content: center;
          justify-content: center;
  transition:    all 0.15s ease;
  flex-shrink:   0;
}
.nmx-icon-btn:hover {
  background:   var(--nmx-surface-2);
  border-color: var(--nmx-border-strong);
}
/* Topbar SVG icons — stroke applied via CSS with !important to every child
   element so no WordPress theme rule (e.g. svg path { stroke: none }) can
   override it. HTML attribute stroke on the <svg> parent is insufficient
   because CSS always beats HTML presentation attributes. */
.nmx-topbar-icon {
  display: block;
}
.nmx-topbar-icon,
.nmx-topbar-icon path,
.nmx-topbar-icon line,
.nmx-topbar-icon polyline,
.nmx-topbar-icon polygon,
.nmx-topbar-icon circle,
.nmx-topbar-icon rect {
  stroke: #374151 !important;  /* dark charcoal — visible on light buttons */
  fill:   none    !important;  /* prevent any accidental fill from theme */
}
/* Preserve polygon fill=none explicitly (overrides SVG fill attribute) */
.nmx-topbar-icon polygon {
  fill: none !important;
}
/* Dark mode: switch to soft indigo-white so icons show on dark buttons */
.nmx-game-wrap.nmx-dark .nmx-topbar-icon,
.nmx-game-wrap.nmx-dark .nmx-topbar-icon path,
.nmx-game-wrap.nmx-dark .nmx-topbar-icon line,
.nmx-game-wrap.nmx-dark .nmx-topbar-icon polyline,
.nmx-game-wrap.nmx-dark .nmx-topbar-icon polygon,
.nmx-game-wrap.nmx-dark .nmx-topbar-icon circle,
.nmx-game-wrap.nmx-dark .nmx-topbar-icon rect {
  stroke: #c7d2fe !important;
}

/* ── Board ──────────────────────────────────────────────────────────────── */
.nmx-board {
  padding: 20px 16px 12px;
  display: none;          /* shown by JS after Start pressed */
  flex-direction: column;
  gap: 14px;
}

/* ── Player Tabs ────────────────────────────────────────────────────────── */
.nmx-player-tabs {
  display:  flex;
  gap:      6px;
  flex-wrap: wrap;
}
.nmx-player-tab {
  padding:       7px 18px;
  border-radius: 20px;
  border:        1.5px solid var(--nmx-border);
  background:    var(--nmx-surface);
  color:         var(--nmx-text-2);
  font-size:     14px;
  font-weight:   500;
  cursor:        pointer;
  transition:    all 0.15s ease;
}
.nmx-player-tab--active {
  background:   var(--nmx-accent);
  border-color: var(--nmx-accent);
  color:        #fff;
}

/* ── Progress Bar ───────────────────────────────────────────────────────── */
.nmx-progress-wrap {
  position: relative;
  height:   8px;
  background: var(--nmx-surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.nmx-progress-bar {
  height:           100%;
  background:       linear-gradient(90deg, var(--nmx-accent-light), var(--nmx-accent));
  border-radius:    4px;
  width:            0%;
  transition:       width 0.5s var(--nmx-ease-out);
}
.nmx-progress-label {
  position:  absolute;
  right:     0;
  top:       -22px;
  font-size: 12px;
  color:     var(--nmx-text-3);
}

/* ── Timer ──────────────────────────────────────────────────────────────── */
.nmx-timer-wrap {
  position:        relative;
  width:           60px;
  height:          60px;
  align-self:      center;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.nmx-timer-ring-bg   { stroke: var(--nmx-surface-2); }
.nmx-timer-ring-fill { stroke: var(--nmx-accent); transition: stroke 0.3s, stroke-dashoffset 1s linear; }
.nmx-timer-ring-fill.nmx-timer--warning { stroke: var(--nmx-warning); }
.nmx-timer-ring-fill.nmx-timer--danger  { stroke: var(--nmx-error); }
.nmx-timer-text {
  position:    absolute;
  font-size:   15px;
  font-weight: 700;
  color:       var(--nmx-text);
  font-family: var(--nmx-font-mono);
  line-height: 1;
}

/* ── Score Bar ──────────────────────────────────────────────────────────── */
.nmx-score-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  background:      var(--nmx-surface);
  border:          1px solid var(--nmx-border);
  border-radius:   var(--nmx-radius-sm);
  padding:         10px 16px;
}
.nmx-score-display, .nmx-attempts-display {
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         2px;
}
.nmx-score-label, .nmx-attempts-label {
  font-size: 11px;
  color:     var(--nmx-text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.nmx-score-value {
  font-size:   28px;
  font-weight: 800;
  color:       var(--nmx-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition:  all 0.2s var(--nmx-ease);
  font-family: var(--nmx-font-mono);
}
.nmx-score-value.nmx-score-bump {
  transform: scale(1.25);
  color:     var(--nmx-gold);
}

.nmx-streak-display {
  display:     flex;
  align-items: center;
  gap:         4px;
}
.nmx-streak-icon { font-size: 20px; }
.nmx-streak-value {
  font-size:   22px;
  font-weight: 700;
  color:       var(--nmx-gold);
  font-family: var(--nmx-font-mono);
}

.nmx-attempt-pips {
  display: flex;
  gap:     5px;
  margin-top: 4px;
}
.nmx-pip {
  width:        14px;
  height:       14px;
  border-radius: 50%;
  background:   var(--nmx-accent);
  transition:   all 0.2s ease;
}
.nmx-pip--used    { background: var(--nmx-error); }
.nmx-pip--empty   { background: var(--nmx-border-strong); }

/* ── Sequence SVG Area ──────────────────────────────────────────────────── */
.nmx-sequence-area {
  background:    var(--nmx-surface);
  border:        1px solid var(--nmx-border);
  border-radius: var(--nmx-radius);
  padding:       16px 12px 12px;
  overflow:      hidden;
}

.nmx-sequence-svg {
  width:  100%;
  height: auto;
  display: block;
}

/* SVG Tile styles (set via JS setAttribute but also need CSS fallbacks) */
.nmx-tile-rect {
  fill:   var(--nmx-tile-bg);
  stroke: var(--nmx-tile-border);
}
.nmx-tile-text-el {
  fill:        var(--nmx-tile-text);
  font-family: var(--nmx-font-mono);
  font-weight: 700;
  dominant-baseline: central;
  text-anchor: middle;
}
.nmx-blank-rect {
  fill:   var(--nmx-blank-bg);
  stroke: var(--nmx-blank-border);
  stroke-dasharray: 5 3;
}

/* ── Input Area ─────────────────────────────────────────────────────────── */
/* Players type directly on the blank SVG tiles — the separate text boxes
   have been removed. The .nmx-input-area still wraps the numpad. */
.nmx-input-area {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

/* Hidden backing inputs (never shown — only store values for JS) */
.nmx-input-slots { display: none !important; }
.nmx-input-field  { display: none !important; }

/* Blank SVG tiles: indicate interactivity with hover glow.
   Active-selected tile stroke is set via JS (setActiveSlot). */
.nmx-blank-tile {
  cursor: pointer;
  transition: opacity 0.15s;
}
.nmx-blank-tile:hover rect {
  /* Subtle hover highlight — actual active state is set via JS setAttribute */
  filter: drop-shadow(0 0 4px rgba(79,70,229,0.25));
}

@keyframes nmx-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* ── Numeric Keypad ─────────────────────────────────────────────────────── */
.nmx-numpad {
  display:               grid;
  /* Explicit pixel track sizes instead of 1fr. 1fr tracks are only resolved
     to a definite size AFTER intrinsic content sizing in some browsers,
     which can make aspect-ratio fall back to a content-based size on
     individual grid items (typically the last column) — producing
     mismatched, oversized keys exactly like the squashed/stretched bug
     seen in testing. Fixed pixel tracks are definite immediately, so
     aspect-ratio always has a reliable width to size height from. */
  grid-template-columns: 78px 78px 78px;
  grid-auto-rows:        78px;
  gap:                   8px;
  max-width:             250px;
  margin:                0 auto;
  justify-content:       center;
}
.nmx-numpad-btn {
  /* Square keys: explicit pixel size, not percentage/aspect-ratio.
     This guarantees every key is identically sized regardless of grid
     track resolution order or browser-specific intrinsic-sizing quirks. */
  width:         78px;
  height:        78px;
  min-width:     0;   /* override grid item default min-width:auto */
  min-height:    0;   /* override grid item default min-height:auto */
  box-sizing:    border-box;
  border:        1.5px solid var(--nmx-border-strong);
  border-radius: var(--nmx-radius-sm);
  background:    var(--nmx-surface);
  color:         var(--nmx-text);
  font-size:     26px;
  font-weight:   600;
  font-family:   var(--nmx-font-mono);
  cursor:        pointer;
  transition:    all 0.12s ease;
  display:       flex;
  align-items:   center;
  justify-content: center;
  user-select:   none;
  -webkit-user-select: none;
  touch-action:  manipulation;
}
.nmx-numpad-btn:hover  { background: var(--nmx-surface-2); border-color: var(--nmx-accent); }
.nmx-numpad-btn:active { transform: scale(0.94); background: var(--nmx-surface-2); }
.nmx-numpad-btn--wide  { grid-column: 1 / 3; width: 164px; } /* 2 x 78px + 1 x 8px gap */
.nmx-numpad-btn--backspace { background: var(--nmx-surface-2); color: var(--nmx-error); }
.nmx-numpad-btn--backspace:hover { background: rgba(239,68,68,0.1); border-color: var(--nmx-error); }

/* ── Action Buttons ─────────────────────────────────────────────────────── */
.nmx-action-btns {
  display:         flex;
  gap:             8px;
  justify-content: center;
  flex-wrap:       wrap;
}

.nmx-btn {
  padding:       10px 22px;
  border-radius: 24px;
  border:        1.5px solid transparent;
  font-size:     14px;
  font-weight:   600;
  font-family:   var(--nmx-font);
  cursor:        pointer;
  transition:    all 0.16s ease;
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  touch-action:  manipulation;
  white-space:   nowrap;
}
.nmx-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.nmx-btn:active:not(:disabled) { transform: scale(0.96); }

.nmx-btn--primary {
  background: var(--nmx-accent);
  color:      #fff;
  border-color: var(--nmx-accent);
}
.nmx-btn--primary:hover:not(:disabled) { background: var(--nmx-accent-dark); }

.nmx-btn--submit {
  background: var(--nmx-accent);
  color:      #fff;
  border-color: var(--nmx-accent);
  font-size:  15px;
  padding:    11px 28px;
}
.nmx-btn--submit:hover:not(:disabled) { background: var(--nmx-accent-dark); }

.nmx-btn--clue {
  background:  var(--nmx-surface);
  color:       var(--nmx-text-2);
  border-color: var(--nmx-border-strong);
}
.nmx-btn--clue:hover:not(:disabled) {
  background:  var(--nmx-surface-2);
  border-color: var(--nmx-gold);
  color:        var(--nmx-gold);
}

.nmx-btn--reveal {
  background:  transparent;
  color:       var(--nmx-text-3);
  border-color: var(--nmx-border);
  font-size:   13px;
}
.nmx-btn--reveal:hover:not(:disabled) {
  background:  rgba(239,68,68,0.08);
  border-color: var(--nmx-error);
  color:        var(--nmx-error);
}

.nmx-btn--next {
  align-self:  center;
  background:  var(--nmx-success);
  color:       #fff;
  border-color: var(--nmx-success);
  font-size:   15px;
  padding:     11px 32px;
  margin-top:  4px;
}
.nmx-btn--next:hover { filter: brightness(1.1); }

.nmx-btn--ghost {
  background:   transparent;
  color:        var(--nmx-text-2);
  border-color: var(--nmx-border-strong);
}
.nmx-btn--ghost:hover { background: var(--nmx-surface-2); color: var(--nmx-text); }

/* ── Clue Panel ─────────────────────────────────────────────────────────── */
.nmx-clue-panel {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  padding:       14px 16px;
  background:    rgba(245,158,11,0.10);
  border:        1.5px solid rgba(245,158,11,0.40);
  border-radius: var(--nmx-radius-sm);
  animation:     nmx-fadein 0.25s ease;
}
.nmx-clue-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.nmx-clue-text { margin: 0; font-size: 14px; color: var(--nmx-text); line-height: 1.5; }

/* ── Feedback Banner ────────────────────────────────────────────────────── */
.nmx-feedback {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       14px 18px;
  border-radius: var(--nmx-radius-sm);
  font-size:     15px;
  font-weight:   600;
  animation:     nmx-fadein 0.2s ease;
}
.nmx-feedback--correct {
  background:  rgba(16,185,129,0.12);
  border:      1.5px solid rgba(16,185,129,0.35);
  color:       var(--nmx-success);
}
.nmx-feedback--wrong {
  background:  rgba(239,68,68,0.10);
  border:      1.5px solid rgba(239,68,68,0.30);
  color:       var(--nmx-error);
}
.nmx-feedback--revealed {
  background:  rgba(245,158,11,0.10);
  border:      1.5px solid rgba(245,158,11,0.35);
  color:       var(--nmx-warning);
}
.nmx-feedback-icon { font-size: 20px; }
.nmx-feedback-pts  {
  margin-left: auto;
  font-size:   18px;
  font-weight: 800;
  font-family: var(--nmx-font-mono);
}

/* ── Game Over Panel ────────────────────────────────────────────────────── */
.nmx-gameover {
  position:        fixed;
  /* Explicit longhand instead of inset:0 — Safari 14 does not support inset */
  top:             0;
  right:           0;
  bottom:          0;
  left:            0;
  /* Explicit dimensions so Safari flex-centring has a real box to work with */
  width:           100%;
  min-height:      100%;
  display:         -webkit-box;
  display:         -webkit-flex;
  display:         flex;
  -webkit-box-align:   center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack:      center;
  -webkit-justify-content: center;
          justify-content: center;
  background:      rgba(15,14,26,0.80);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index:         9999;
  animation:       nmx-fadein 0.35s ease;
}
.nmx-gameover-inner {
  background:    var(--nmx-surface);
  border:        1px solid var(--nmx-border-strong);
  border-radius: 20px;
  padding:       36px 32px;
  text-align:    center;
  max-width:     440px;
  width:         90%;
  max-height:    90vh;
  max-height:    90dvh;
  overflow-y:    auto;
  display:       flex;
  flex-direction: column;
  gap:           18px;
  box-shadow:    0 20px 60px rgba(0,0,0,0.4);
  animation:     nmx-popup 0.4s var(--nmx-ease);
}
.nmx-gameover-badge {
  font-size: 56px;
  line-height: 1;
}
.nmx-gameover-title {
  margin:      0;
  font-size:   26px;
  font-weight: 800;
  color:       var(--nmx-text);
}
.nmx-gameover-stats {
  display:        grid;
  grid-template-columns: repeat(3, 1fr);
  gap:            12px;
}
.nmx-stat-block {
  background:    var(--nmx-surface-2);
  border-radius: var(--nmx-radius-sm);
  padding:       12px 8px;
}
.nmx-stat-value {
  font-size:   28px;
  font-weight: 800;
  color:       var(--nmx-accent);
  font-family: var(--nmx-font-mono);
  display:     block;
}
.nmx-stat-label {
  font-size:  12px;
  color:      var(--nmx-text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.nmx-gameover-actions {
  display: flex;
  gap:     10px;
  justify-content: center;
}
.nmx-gameover-guest-note {
  font-size: 13px;
  color:     var(--nmx-text-3);
  margin:    0;
  padding:   10px;
  background: var(--nmx-surface-2);
  border-radius: var(--nmx-radius-sm);
}

/* ── Start Screen ───────────────────────────────────────────────────────── */
.nmx-start-screen {
  padding: 32px 24px 20px;
  display: flex;          /* visible from first paint — JS hides on game start */
  align-items: center;
  justify-content: center;
  min-height: 380px;
}
.nmx-start-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            16px;
  max-width:      440px;
  width:          100%;
  text-align:     center;
}
.nmx-start-logo svg rect { fill: var(--nmx-accent); }
.nmx-start-title {
  font-size:   28px;
  font-weight: 800;
  color:       var(--nmx-text);
  margin:      0;
}
.nmx-start-subtitle {
  font-size: 16px;
  color:     var(--nmx-text-2);
  margin:    0;
}

/* Player setup */
.nmx-player-setup {
  width:          100%;
  display:        flex;
  flex-direction: column;
  gap:            12px;
  align-items:    center;
}
.nmx-setup-label {
  font-size:   14px;
  color:       var(--nmx-text-2);
  font-weight: 600;
}
.nmx-player-count-btns {
  display: flex;
  gap:     8px;
}
.nmx-player-count-btn {
  width:         48px;
  height:        48px;
  border-radius: 50%;
  border:        2px solid var(--nmx-border-strong);
  background:    var(--nmx-surface);
  color:         var(--nmx-text-2);
  font-size:     18px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all 0.15s ease;
}
.nmx-player-count-btn:hover { border-color: var(--nmx-accent); color: var(--nmx-accent); }
.nmx-player-count-btn--active {
  background:   var(--nmx-accent);
  border-color: var(--nmx-accent);
  color:        #fff;
}

.nmx-player-names { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.nmx-player-name-row { display: flex; align-items: center; gap: 10px; }
.nmx-player-name-label {
  font-size:  13px;
  color:      var(--nmx-text-3);
  white-space: nowrap;
  min-width:  72px;
  text-align: right;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Read-only player name display badge */
.nmx-player-name-display {
  flex:          1;
  padding:       9px 16px;
  border:        1.5px solid var(--nmx-border);
  border-radius: var(--nmx-radius-sm);
  background:    var(--nmx-surface-2);
  color:         var(--nmx-text);
  font-size:     15px;
  font-weight:   600;
  font-family:   var(--nmx-font);
  display:       inline-block;
  text-align:    left;
}
.nmx-btn--start { font-size: 17px; padding: 13px 40px; }

/* ── Tutorial Overlay ───────────────────────────────────────────────────── */
.nmx-tutorial-overlay {
  position:   fixed;
  /* Explicit longhand instead of inset:0 — Safari 14 does not support inset */
  top:        0;
  right:      0;
  bottom:     0;
  left:       0;
  /* Explicit dimensions so Safari flex-centring has a real box to work with */
  width:      100%;
  min-height: 100%;
  background: rgba(15,14,26,0.75);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index:    9999;
  display:    -webkit-box;
  display:    -webkit-flex;
  display:    flex;
  -webkit-box-align:    center;
  -webkit-align-items:  center;
          align-items:  center;
  -webkit-box-pack:         center;
  -webkit-justify-content:  center;
          justify-content:  center;
  padding:    16px;
  animation:  nmx-fadein 0.25s ease;
}
.nmx-tutorial-overlay[hidden] { display: none; }

.nmx-tutorial-panel {
  background:    var(--nmx-surface);
  border:        1px solid var(--nmx-border-strong);
  border-radius: 20px;
  width:         100%;
  max-width:     620px;
  /* Use dvh where supported, fall back to vh */
  max-height:    82vh;
  max-height:    82dvh;
  display:       flex;
  flex-direction: column;
  overflow:      hidden;
  box-shadow:    0 20px 60px rgba(0,0,0,0.4);
  animation:     nmx-popup 0.35s var(--nmx-ease);
}
.nmx-tutorial-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 22px 14px;
  border-bottom:   1px solid var(--nmx-border);
  flex-shrink:     0;
}
.nmx-tutorial-title {
  font-size:   18px;
  font-weight: 700;
  color:       var(--nmx-text);
  margin:      0;
}
.nmx-tutorial-close {
  background:    transparent;
  border:        none;
  color:         var(--nmx-text-3);
  cursor:        pointer;
  padding:       4px;
  border-radius: 6px;
  transition:    all 0.15s;
}
.nmx-tutorial-close:hover { background: var(--nmx-surface-2); color: var(--nmx-text); }

.nmx-tutorial-body {
  overflow-y:  auto;
  padding:     20px 22px;
  display:     flex;
  flex-direction: column;
  gap:         24px;
  flex:        1;
}
.nmx-tutorial-section h3 {
  font-size:   15px;
  font-weight: 700;
  color:       var(--nmx-accent);
  margin:      0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nmx-tutorial-steps {
  margin:      0;
  padding:     0 0 0 20px;
  display:     flex;
  flex-direction: column;
  gap:         6px;
}
.nmx-tutorial-steps li {
  font-size:   14px;
  color:       var(--nmx-text-2);
  line-height: 1.55;
}
.nmx-tutorial-intro { font-size: 13px; color: var(--nmx-text-3); margin: 0 0 12px; }

/* Scoring table */
.nmx-scoring-table  { display: flex; flex-direction: column; gap: 5px; }
.nmx-score-row {
  display:       flex;
  justify-content: space-between;
  align-items:   center;
  padding:       8px 14px;
  border-radius: var(--nmx-radius-sm);
  font-size:     14px;
  font-weight:   600;
}
.nmx-score-row--gold    { background: rgba(245,158,11,0.12); color: #b45309; }
.nmx-score-row--silver  { background: rgba(148,163,184,0.12); color: var(--nmx-text-2); }
.nmx-score-row--bronze  { background: rgba(180,83,9,0.10);  color: #92400e; }
.nmx-score-row--penalty { background: rgba(239,68,68,0.08);  color: var(--nmx-error); }
.nmx-score-row--streak  { background: rgba(79,70,229,0.08);  color: var(--nmx-accent); }
.nmx-dark .nmx-score-row--gold   { color: var(--nmx-gold); }
.nmx-dark .nmx-score-row--bronze { color: #fbbf24; }

/* Example groups */
.nmx-example-groups { display: flex; flex-direction: column; gap: 18px; }
.nmx-example-group-title {
  font-size:   13px;
  font-weight: 700;
  color:       var(--nmx-text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin:      0 0 8px;
}
.nmx-example-cards { display: flex; flex-direction: column; gap: 8px; }
.nmx-example-card {
  border:        1px solid var(--nmx-border);
  border-radius: var(--nmx-radius-sm);
  padding:       12px 14px;
  cursor:        pointer;
  transition:    all 0.15s ease;
  background:    var(--nmx-surface);
}
.nmx-example-card:hover { border-color: var(--nmx-accent); background: var(--nmx-surface-2); }
.nmx-example-card-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   6px;
}
.nmx-example-card-title {
  font-size:   14px;
  font-weight: 700;
  color:       var(--nmx-text);
}
.nmx-example-card-toggle {
  font-size: 12px;
  color:     var(--nmx-accent);
}
.nmx-example-seq {
  display:  flex;
  gap:      6px;
  flex-wrap: wrap;
}
.nmx-ex-num {
  min-width:     38px;
  height:        38px;
  border:        1.5px solid var(--nmx-tile-border);
  border-radius: var(--nmx-radius-sm);
  background:    var(--nmx-tile-bg);
  color:         var(--nmx-tile-text);
  font-size:     14px;
  font-weight:   700;
  font-family:   var(--nmx-font-mono);
  display:       flex;
  align-items:   center;
  justify-content: center;
  padding:       0 6px;
}
.nmx-example-card-explanation {
  font-size:   13px;
  color:       var(--nmx-text-2);
  margin:      8px 0 0;
  line-height: 1.45;
  display:     none;
}
.nmx-example-card.nmx-expanded .nmx-example-card-explanation { display: block; }
.nmx-example-card.nmx-expanded .nmx-example-card-toggle { color: var(--nmx-text-3); }

.nmx-tutorial-footer {
  padding:       16px 22px;
  border-top:    1px solid var(--nmx-border);
  flex-shrink:   0;
  display:       flex;
  justify-content: center;
}

/* ── Footer Brand ───────────────────────────────────────────────────────── */
.nmx-footer-brand {
  text-align:  center;
  padding:     14px 16px 4px;
  font-size:   12px;
  color:       var(--nmx-text-3);
  letter-spacing: 0.05em;
  border-top:  1px solid var(--nmx-border);
  margin-top:  8px;
}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes nmx-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes nmx-popup {
  from { opacity: 0; transform: scale(0.90) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes nmx-tile-appear {
  from { opacity: 0; transform: translateY(-16px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}
@keyframes nmx-tile-correct {
  0%   { transform: scale(1);    filter: brightness(1); }
  40%  { transform: scale(1.18); filter: brightness(1.3); }
  100% { transform: scale(1);    filter: brightness(1); }
}
@keyframes nmx-tile-wrong {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
@keyframes nmx-score-bump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes nmx-streak-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* ── Accessibility ──────────────────────────────────────────────────────── */
.nmx-game-wrap *:focus-visible {
  outline:        2px solid var(--nmx-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .nmx-game-wrap *, .nmx-game-wrap *::before, .nmx-game-wrap *::after {
    animation-duration:   0.01ms !important;
    transition-duration:  0.01ms !important;
  }
}

/* ── Score notification banner (leaderboard.js) ─────────────────────────── */
.nmx-score-banner {
  position:      fixed;
  bottom:        24px;
  left:          50%;
  transform:     translateX(-50%);
  z-index:       200;
  padding:       14px 28px;
  border-radius: 30px;
  font-size:     15px;
  font-weight:   600;
  font-family:   var(--nmx-font, sans-serif);
  box-shadow:    0 6px 28px rgba(0,0,0,0.25);
  max-width:     90vw;
  text-align:    center;
  transition:    opacity 0.4s ease;
  animation:     nmx-fadein 0.3s ease;
  pointer-events: none;
}
.nmx-score-banner--success {
  background: var(--nmx-success, #10b981);
  color:      #fff;
}
.nmx-score-banner--info {
  background: var(--nmx-accent, #4f46e5);
  color:      #fff;
}

/* ── Leaderboard (standalone shortcode & in-game) ───────────────────────── */
.nmx-leaderboard-wrap {
  font-family: var(--nmx-font, sans-serif);
  max-width:   700px;
  margin:      0 auto;
  padding:     0 0 24px;
}

.nmx-lb-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
  margin-bottom:   16px;
}
.nmx-lb-title {
  font-size:   20px;
  font-weight: 700;
  margin:      0;
}

.nmx-lb-filters {
  display: flex;
  gap:     6px;
  flex-wrap: wrap;
}
.nmx-lb-filter-btn {
  padding:       5px 14px;
  border-radius: 16px;
  border:        1.5px solid #c7d2fe;
  background:    #fff;
  color:         #4c4a7a;
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
  transition:    all 0.15s;
}
.nmx-lb-filter-btn:hover { background: #f1f0fc; border-color: #4f46e5; }
.nmx-lb-filter-btn--active {
  background:   #4f46e5;
  border-color: #4f46e5;
  color:        #fff;
}

.nmx-lb-table-wrap { overflow-x: auto; }

.nmx-lb-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       14px;
}
.nmx-lb-table thead tr {
  background: #f1f0fc;
}
.nmx-lb-table th {
  padding:     10px 14px;
  text-align:  left;
  font-size:   12px;
  font-weight: 700;
  color:       #4c4a7a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid #c7d2fe;
}
.nmx-lb-table td {
  padding:    11px 14px;
  border-bottom: 1px solid #ede9fe;
  color:      #1e1b4b;
}
.nmx-lb-row--top td { background: #fdfcff; }
.nmx-lb-rank  { font-size: 18px; width: 48px; }
.nmx-lb-score { font-weight: 700; font-family: 'Courier New', monospace; color: #4f46e5; }
.nmx-lb-level { font-size: 12px; color: #7c7aaa; }
.nmx-lb-streak{ font-size: 13px; color: #374151; }
.nmx-lb-empty { text-align: center; padding: 28px; color: #9ca3af; font-style: italic; }

.nmx-lb-note {
  margin:      16px 0 0;
  font-size:   13px;
  color:       #6b6b9a;
  text-align:  center;
  line-height: 1.5;
}
.nmx-lb-note a { color: #4f46e5; }

/* ═══════════════════════════════════════════════════════════════════════════
   CROSS-BROWSER COMPATIBILITY FIXES
   Targets: Safari (WebKit), Firefox, Chrome, Edge, Kindle Fire Silk
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Safari / WebKit ────────────────────────────────────────────────────── */

/* Safari doesn't support gap on older flex — use margin fallback */
@supports not (gap: 8px) {
  .nmx-level-selector > * + *  { margin-left: 4px; }
  .nmx-topbar-right    > * + *  { margin-left: 6px; }
  .nmx-action-btns     > * + *  { margin-left: 8px; }
  .nmx-input-slots     > * + *  { margin-left: 10px; }
  .nmx-numpad          > * + *  { margin: 3px; }
}

/* backdrop-filter is now correctly applied on the overlay containers above.
   The inner cards (gameover-inner, tutorial-panel) should NOT have it —
   it was previously misapplied here and has been moved to the containers. */

/* Safari: smooth scrolling in tutorial body */
.nmx-tutorial-body {
  -webkit-overflow-scrolling: touch;
}

/* Safari: font rendering fix for monospace numbers */
.nmx-input-field,
.nmx-score-value,
.nmx-streak-value,
.nmx-timer-text {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Safari SVG text rendering */
.nmx-sequence-svg text {
  -webkit-user-select: none;
          user-select: none;
}

/* Safari: remove default button styling */
.nmx-btn,
.nmx-icon-btn,
.nmx-level-btn,
.nmx-numpad-btn,
.nmx-player-count-btn,
.nmx-tutorial-close {
  -webkit-appearance: none;
          appearance: none;
}

/* No aspect-ratio dependency: .nmx-numpad-btn now uses explicit pixel
   width/height (see rule above), so no browser-support fallback is
   needed here — every browser, old or new, sizes keys identically. */

/* Safari: input styling */
.nmx-input-field,
.nmx-player-name-input {
  -webkit-appearance: none;
          appearance: none;
  border-radius: var(--nmx-radius-tile, 10px);
}

/* ── Firefox ────────────────────────────────────────────────────────────── */

/* Firefox: remove number input spinners */
.nmx-input-field {
  -moz-appearance: textfield;
}

/* Firefox: focus-visible polyfill — FF supports it natively but older FF needs */
.nmx-game-wrap *:focus:not(:focus-visible) {
  outline: none;
}

/* ── Kindle Fire Silk (WebKit-based, ~2012-era engine on older tablets) ─── */
/* Silk doesn't support CSS custom properties on very old devices — provide
   hardcoded fallbacks BEFORE the var() declarations so old engines use them */

.nmx-game-wrap {
  background-color: #f8f7ff; /* fallback before var(--nmx-bg) */
  color: #1e1b4b;            /* fallback before var(--nmx-text) */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

.nmx-btn--submit,
.nmx-btn--primary {
  background-color: #4f46e5; /* fallback */
  color: #ffffff;
}

.nmx-input-field {
  background-color: #ede9fe; /* fallback */
  border-color: #4f46e5;
  color: #1e1b4b;
}

/* Silk: avoid CSS animations on elements that cause repaints on low-power devices */
@media (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  .nmx-gameover-inner,
  .nmx-tutorial-panel {
    animation: none;
  }
}

/* ── Edge Legacy (pre-Chromium) ─────────────────────────────────────────── */
/* Edge 16-18: no support for CSS custom properties in media queries */
@supports (-ms-ime-align: auto) {
  .nmx-game-wrap {
    background-color: #f8f7ff;
    color: #1e1b4b;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   OFFLINE STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.nmx-offline-banner {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         10px 16px;
  background:      rgba(245,158,11,0.12);
  border-bottom:   1px solid rgba(245,158,11,0.30);
  font-size:       13px;
  color:           #92400e;
  font-family:     var(--nmx-font, sans-serif);
}
.nmx-game-wrap.nmx-dark .nmx-offline-banner {
  color:       #fbbf24;
  background:  rgba(245,158,11,0.08);
}
.nmx-offline-icon { font-size: 16px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT — hide the game entirely
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .nmx-game-wrap,
  .nmx-leaderboard-wrap { display: none !important; }
}

/* ── Critical: ensure [hidden] always wins over position:absolute overlays ── */
.nmx-game-wrap [hidden],
.nmx-gameover[hidden],
.nmx-tutorial-overlay[hidden] {
  display: none !important;
}

/* Dark mode fallback for overlays outside .nmx-game-wrap */
@media (prefers-color-scheme: dark) {
  :root {
    --nmx-surface:       #1a1830;
    --nmx-surface-2:     #231f3a;
    --nmx-border:        rgba(129,140,248,0.15);
    --nmx-border-strong: rgba(129,140,248,0.35);
    --nmx-text:          #e0deff;
    --nmx-text-2:        #a09ec8;
    --nmx-text-3:        #6764a0;
  }
}