/* /css/pyramid.css
   Number Pyramid — responsive, minimalist, grid-based layout

   SAFE VERSION:
   - Scoped to .py-page so it cannot affect other games/pages.
   - Frameless: .py-page covers viewport.
   - Keypad grid defined for ALL sizes (PC + mobile).
   - FIXES (mobile):
     1) Modal centered and never exceeds right edge.
     2) No horizontal overflow from modal content.
     3) “Levels” button hidden in modal.
     4) In-game Correct/Wrong pill fixed width and does not touch right edge.

   THEME FIX:
   - Uses variables from /css/colors.css:
     --color-page-bg, --color-page-text, --color-grid-area-bg,
     --color-cell-bg, --color-cell-text,
     --color-cell-hover-bg, --color-cell-hover-text,
     --color-header-border
*/

/* =========================
   GLOBAL (SCOPED TO PYRAMID PAGE)
   ========================= */
.py-page,
.py-page *,
.py-page *::before,
.py-page *::after {
  box-sizing: border-box;
}

.py-page {
  position: fixed;
  inset: 0;

  height: 100vh;
  height: 100svh;
  height: 100dvh;

  margin: 0;
  padding: 0;

  /* >>> THEME: use variables that actually exist in colors.css <<< */
  background: var(--color-page-bg);
  color: var(--color-page-text);

  overflow: hidden;
  overflow-x: hidden;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --py-cell-size: 50px;
  --py-gap: 10px;

  /* Brand accent (used for active outline / buttons) */
  --py-accent: #e67e00;

  display: grid;
  grid-template-rows: auto 1fr;
}

/* =========================
   WRAP: desktop two panels, mobile stacked
   ========================= */
.py-wrap {
  min-height: 0;
  padding: var(--gap, 16px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--gap, 16px);
}

@media (min-width: 900px) {
  .py-wrap {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: 1fr;
    align-items: stretch;
  }
}

/* =========================
   SR ONLY
   ========================= */
.py-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================
   LEFT PANEL
   ========================= */
.py-left {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.py-left-head { display: grid; gap: 10px; }

.py-level-buttons {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}

.py-level-btn {
  border: none;
  border-radius: 999px;
  padding: 8px 10px;

  /* >>> THEME <<< */
  background: var(--color-cell-bg);
  color: var(--color-cell-text);

  font-weight: 700;
  cursor: pointer;

  box-shadow:
    inset 0 0 0 1px var(--color-header-border),
    0 6px 18px rgba(0, 0, 0, 0.12);

  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.py-level-btn:hover {
  background: var(--color-cell-hover-bg);
  color: var(--color-cell-hover-text);
  transform: translateY(-1px);
}

.py-level-btn.is-active {
  background: color-mix(in srgb, var(--py-accent) 22%, var(--color-cell-bg));
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--py-accent) 65%, transparent),
    0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Fallback if color-mix is unsupported */
@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
  .py-level-btn.is-active {
    background: rgba(230, 126, 0, 0.26);
    box-shadow: inset 0 0 0 2px rgba(230, 126, 0, 0.40);
  }
}

/* =========================
   PYRAMID
   ========================= */
.py-pyramid {
  min-height: 0;
  display: grid;
  align-content: center;
  justify-content: center;
  gap: var(--py-gap);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.py-row {
  display: grid;
  gap: var(--py-gap);
  justify-content: center;
  grid-auto-flow: column;
  grid-auto-columns: var(--py-cell-size);
}

.py-cell {
  width: var(--py-cell-size);
  height: var(--py-cell-size);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.05rem;

  /* >>> THEME <<< */
  background: var(--color-cell-bg);
  color: var(--color-cell-text);

  box-shadow:
    inset 0 0 0 1px var(--color-header-border),
    0 10px 26px rgba(0, 0, 0, 0.14);
}

/* Given cells: slightly tinted */
.py-cell--given {
  background: color-mix(in srgb, var(--color-cell-bg) 88%, var(--color-cell-hover-bg));
}

@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
  .py-cell--given { background: var(--color-cell-bg); }
}

.py-cell--input { border: none; cursor: pointer; }

.py-cell--input:hover {
  background: var(--color-cell-hover-bg);
  color: var(--color-cell-hover-text);
}

.py-cell--input.is-active {
  box-shadow:
    inset 0 0 0 3px rgba(230, 126, 0, 0.65),
    0 10px 26px rgba(0, 0, 0, 0.14);
}

.py-cell--input.is-correct {
  background: color-mix(in srgb, #34A853 22%, var(--color-cell-bg));
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, #34A853 45%, transparent),
    0 10px 26px rgba(0, 0, 0, 0.14);
}

.py-cell--input.is-wrong {
  background: color-mix(in srgb, #EA4335 18%, var(--color-cell-bg));
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, #EA4335 40%, transparent),
    0 10px 26px rgba(0, 0, 0, 0.14);
}

@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
  .py-cell--input.is-correct { background: rgba(52, 168, 83, 0.22); }
  .py-cell--input.is-wrong   { background: rgba(234, 67, 53, 0.18); }
}

/* =========================
   RIGHT PANEL
   ========================= */
.py-right {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;
  align-content: start;
  justify-items: stretch;
}

/* Status: 4 pills + message (ONE ROW) */
.py-status {
  display: grid;
  grid-template-columns: max-content max-content max-content max-content minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 10px;
  align-items: center;
  min-width: 0;
}

.py-pill {
  padding: 6px 10px;
  border-radius: 999px;

  /* >>> THEME: readable on light + dark <<< */
  background: color-mix(in srgb, var(--color-grid-area-bg) 70%, var(--color-cell-bg));
  color: var(--color-page-text);

  font-size: 13px;
  white-space: nowrap;
  min-height: 28px;
  display: inline-grid;
  align-items: center;
  margin: 0;

  box-shadow: inset 0 0 0 1px var(--color-header-border);
}

@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
  .py-pill {
    background: rgba(0, 0, 0, 0.10);
  }
}

/* Message pill: fixed width, never collapses */
.py-message {
  min-width: 0;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 28px;

  width: 120px;
  justify-self: end;
}

.py-message.is-ok  { color: #34A853; }
.py-message.is-bad { color: #EA4335; }

/* =========================
   KEYPAD (BASE — PC + mobile)
   ========================= */
.py-keypad {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 140px; /* numbers | actions */
  gap: 12px;
  align-items: start;
  justify-content: stretch;
}

.py-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  gap: 12px;
}

.py-actions {
  display: grid;
  grid-template-rows: repeat(3, auto);
  gap: 12px;
  align-content: start;
}

.py-key {
  border: none;
  border-radius: 14px;
  padding: 10px 12px;

  /* >>> THEME <<< */
  background: var(--color-cell-bg);
  color: var(--color-cell-text);

  font: 800 15px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;

  box-shadow:
    inset 0 0 0 1px var(--color-header-border),
    0 8px 22px rgba(0, 0, 0, 0.14);

  min-height: 44px;
  width: 100%;
  min-width: 0;
  white-space: nowrap;

  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.py-key:hover {
  background: var(--color-cell-hover-bg);
  color: var(--color-cell-hover-text);
  transform: translateY(-1px);
}

/* Action buttons: friendly bright colors (independent of scheme, but look great in modern) */
.py-key--ok {
  background: color-mix(in srgb, #34A853 30%, var(--color-cell-bg));
}
.py-key--check {
  background: color-mix(in srgb, #FBBC05 32%, var(--color-cell-bg));
}
.py-key--restart {
  background: color-mix(in srgb, #4285F4 18%, var(--color-cell-bg));
}

@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
  .py-key--ok      { background: rgba(52, 168, 83, 0.26); }
  .py-key--check   { background: rgba(251, 188, 5, 0.26); }
  .py-key--restart { background: rgba(66, 133, 244, 0.18); }
}

/* =========================
   MODAL (end-of-game) — ROBUST MOBILE CENTERING + NO OVERFLOW
   ========================= */

/* Make sure dialog and its children are border-box even if it is outside .py-page for any reason */
.stats-modal,
.stats-modal *,
.stats-modal *::before,
.stats-modal *::after {
  box-sizing: border-box;
}

.stats-modal::backdrop { background: rgba(0, 0, 0, 0.62); }

/* Critical: the <dialog> itself must be the full-screen overlay */
.stats-modal[open],
.stats-modal.open {
  position: fixed !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;

  border: none !important;
  margin: 0 !important;

  /* symmetric padding, so centering is truly centered */
  padding-top:    max(14px, env(safe-area-inset-top)) !important;
  padding-right:  max(16px, env(safe-area-inset-right)) !important;
  padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  padding-left:   max(16px, env(safe-area-inset-left)) !important;

  background: rgba(0, 0, 0, 0.62) !important;

  /* center the card */
  display: grid !important;
  place-items: center !important;

  /* allow vertical scroll, NEVER horizontal */
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* “Levels” button removal:
   1) Hide any button whose attributes suggest levels.
   2) Fallback: hide the first button in stats-actions (common “Levels” position). */
.stats-actions button[id*="level" i],
.stats-actions button[class*="level" i],
.stats-actions button[name*="level" i],
.stats-actions button[data-action*="level" i],
.stats-actions button[aria-label*="level" i],
.stats-actions button[title*="level" i],
.stats-actions a[id*="level" i],
.stats-actions a[class*="level" i],
.stats-actions a[data-action*="level" i],
#statsLevels,
.stats-btn--levels {
  display: none !important;
}

.stats-actions > :first-child {
  display: none !important;
}

/* Card width: explicitly limited so it can NEVER exceed the viewport padding */
.stats-card {
  width: min(520px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px) !important;

  border-radius: 18px;

  /* >>> THEME <<< */
  background: var(--color-cell-bg);
  color: var(--color-cell-text);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);

  padding: 16px;

  min-width: 0;
  overflow-x: hidden;

  max-height: calc(100dvh - 32px);
  overflow-y: auto;

  margin: 0 auto;

  border: 1px solid var(--color-header-border);
}

.stats-title,
.stats-message,
.stats-row span,
.stats-row strong,
.stats-btn {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.stats-title {
  font-family: "Oswald", system-ui, -apple-system, sans-serif;
  font-size: 1.2rem;
  margin: 0 0 10px;
}

.stats-grid { display: grid; gap: 8px; margin-bottom: 10px; }

.stats-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-grid-area-bg) 65%, var(--color-cell-bg));
  border: 1px solid var(--color-header-border);
}

@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
  .stats-row { background: rgba(0, 0, 0, 0.06); }
}

.stats-row span { opacity: 0.85; }
.stats-row strong { font-weight: 800; }

.stats-message {
  min-height: 22px;
  font-size: 0.95rem;
  opacity: 0.9;
  margin: 8px 0 12px;
}

/* Actions grid: mobile-safe */
.stats-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

@media (min-width: 600px) {
  .stats-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.stats-btn {
  border: none;
  border-radius: 12px;
  padding: 10px 10px;

  /* >>> THEME <<< */
  background: var(--color-cell-bg);
  color: var(--color-cell-text);

  font-weight: 800;
  cursor: pointer;
  white-space: normal;
  min-width: 0;

  box-shadow: inset 0 0 0 1px var(--color-header-border);
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.stats-btn:hover {
  background: var(--color-cell-hover-bg);
  color: var(--color-cell-hover-text);
  transform: translateY(-1px);
}

.stats-btn--primary {
  background: color-mix(in srgb, var(--py-accent) 28%, var(--color-cell-bg));
}

@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
  .stats-btn--primary { background: rgba(230, 126, 0, 0.26); }
}

@media (max-width: 520px) {
  .stats-btn--primary { grid-column: 1 / -1; }
}

/* =========================
   MOBILE: tighten spacing (keep pills in one line)
   ========================= */
@media (max-width: 899px) {
  .py-wrap {
    padding-top: 4px;
    padding-bottom: 8px;
    gap: 8px;
  }

  .py-page { --py-gap: 8px; }

  .py-level-btn {
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 800;
  }

  .py-key {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 14px;
  }

  .py-keypad {
    grid-template-columns: 1fr 108px;
    gap: 10px;
  }

  .py-pad, .py-actions { gap: 10px; }

  .py-status { column-gap: 8px; row-gap: 8px; }

  .py-pill {
    min-height: 26px;
    font-size: 12px;
    padding: 5px 9px;
  }

  /* Message pill: fixed width + right breathing room (matches pill padding) */
  .py-message {
    min-height: 26px;
    width: 104px;
    margin-right: 9px;
  }

  /* Make modal card use the clamp above; slightly smaller internal padding */
  .stats-card {
    padding: 14px;
    width: min(520px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
  }

  /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
     PYRAMID CELL RESPONSIVE SIZING FIX!
     <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

  .py-row {
    --py-cell-mobile: calc(100vw / 9.5);
    grid-auto-columns: var(--py-cell-mobile);
    gap: 4px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .py-cell {
    width: var(--py-cell-mobile) !important;
    height: 32px !important;
    min-width: var(--py-cell-mobile) !important;
    min-height: 32px !important;
    max-width: var(--py-cell-mobile) !important;
    max-height: 32px !important;
    font-size: 1.05rem;
  }
}

@media (max-width: 420px) {
  .py-keypad { grid-template-columns: 1fr 100px; gap: 9px; }
  .py-pad, .py-actions { gap: 9px; }
  .py-status { column-gap: 7px; }

  .py-message { width: 96px; margin-right: 9px; }

  .stats-card {
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
  }
}