/* Pixel Secreto — styles on the Lab shell. Accent: indigo #6366f1. */

/* Override the Lab's shared --accent so the "?" help button + modal
   pick up this toy's own color (Lab pattern). */
:root { --accent: #6366f1; }

.px-intro { text-align: center; margin: 0 auto 1.6rem; max-width: 720px; }
.px-intro__title { font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin: 0 0 .45rem; }
.px-intro__lead { color: var(--text-muted, #94a3b8); font-size: 1.02rem; margin: 0; }
.px-nojs { color: var(--text-muted, #94a3b8); padding: 1rem; }

.px-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.px-title { font: 600 .8rem ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #94a3b8); }
.px-title b { color: #818cf8; }
.px-timer { font: 700 .9rem ui-monospace, monospace; color: var(--text-main, #f8fafc); }

.px-board { max-width: 480px; margin: 0 auto; }
.px-grid { display: grid; gap: 2px; }
.px-corner { }
.px-clue { display: flex; align-items: center; justify-content: flex-end; font: 700 .68rem ui-monospace, monospace;
  color: var(--text-muted, #94a3b8); transition: color .2s; }
.px-clue--col { align-items: flex-end; justify-content: center; text-align: center; padding-bottom: .25rem; line-height: 1.25; }
.px-clue--row { padding-right: .4rem; letter-spacing: .12em; }
.px-clue.is-sat { color: #6366f1; }

.px-cell { aspect-ratio: 1; min-width: 0; border-radius: 4px; cursor: pointer; padding: 0;
  border: 1px solid var(--border, rgba(148,163,184,.25)); background: var(--surface-2, #243349);
  color: var(--text-muted, #94a3b8); font: 700 .8rem ui-monospace, monospace;
  transition: background .1s, transform .05s; touch-action: manipulation; }
.px-cell:active { transform: scale(.92); }
.px-cell.is-fill { background: #6366f1; border-color: #6366f1; }
.px-cell.is-mark { color: rgba(148,163,184,.7); }
.px-cell:disabled { cursor: default; }
.px-board.is-won .px-cell.is-fill { background: #818cf8; box-shadow: 0 0 8px rgba(99,102,241,.5); }
.px-board.is-won .px-cell.is-mark { color: transparent; }

.px-tools { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.px-tool { display: inline-flex; align-items: center; gap: .4rem; min-height: 42px; cursor: pointer;
  border-radius: 999px; padding: .45rem 1rem; font: 700 .85rem 'Inter', sans-serif;
  border: 1px solid var(--border, rgba(255,255,255,.14)); background: transparent; color: var(--text-main, #f8fafc);
  transition: border-color .15s, background .15s; }
.px-tool.is-on { background: rgba(99,102,241,.2); border-color: #6366f1; color: #a5b4fc; }
.px-tool--ghost { color: var(--text-muted, #94a3b8); }
.px-tool:hover { border-color: #6366f1; }

.px-result { text-align: center; margin-top: 1.4rem; }
.px-result__stamp { font: 700 .68rem ui-monospace, monospace; letter-spacing: .22em; color: #818cf8; }
.px-result__name { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 5vw, 2.2rem); margin: .25rem 0 .2rem; }
.px-result__sub { color: var(--text-muted, #94a3b8); margin: 0 0 .8rem; }
.px-result__sub b { color: var(--text-main, #f8fafc); }
.px-btn { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; border-radius: 999px;
  font: 700 .85rem 'Inter', sans-serif; padding: .55rem 1.2rem; border: 1px solid #6366f1;
  background: #6366f1; color: #fff; transition: background .15s; }
.px-btn:hover { background: #4f46e5; }