/* ════════════════════════════════════════════════════════════════
   RESET
   Removes default browser spacing/sizing so everything behaves
   consistently across different browsers and devices.
════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* ════════════════════════════════════════════════════════════════
   THEME VARIABLES — Classic (default)
   CSS variables are like named colour slots. Every theme works by
   swapping these values out — nothing else needs to change.
   These are the warm off-white defaults (Classic theme).
════════════════════════════════════════════════════════════════ */
:root {
  --bg: #F7F5F0;
  --surface: #FFFFFF;
  --border: #E2DDD6;
  --text: #1C1917;
  --text-muted: #78716C;
  --green: #1D9E75;
  --green-light: #E1F5EE;
  --green-border: #9FE1CB;
  --red: #E24B4A;
  --red-light: #FCEBEB;
  --red-border: #F7C1C1;
  --selected-bg: #E1F5EE;
  --selected-border: #1D9E75;
  --selected-text: #0F6E56;
  --accent: #534AB7;
  --accent-light: #EEEDFE;
  --dim-bg: #F1EFE8;
  --dim-text: #B4B2A9;
  --dim-border: #E2DDD6;
  --points-color: #BA7517;
}

/* ════════════════════════════════════════════════════════════════
   THEME VARIABLES — Classic Dark
   Dark brown tones. Overrides only the variables that change —
   anything not listed here falls back to the :root defaults.
════════════════════════════════════════════════════════════════ */
body.theme-dark {
  --bg: #1C1917;
  --surface: #292524;
  --border: #44403C;
  --text: #F5F5F4;
  --text-muted: #A8A29E;
  --green: #34D399;
  --green-light: #064E3B;
  --green-border: #065F46;
  --red: #F87171;
  --red-light: #450A0A;
  --red-border: #7F1D1D;
  --selected-bg: #064E3B;
  --selected-border: #34D399;
  --selected-text: #6EE7B7;
  --accent: #818CF8;
  --accent-light: #1E1B4B;
  --dim-bg: #292524;
  --dim-text: #57534E;
  --dim-border: #44403C;
  --points-color: #FCD34D;
}

/* ════════════════════════════════════════════════════════════════
   THEME VARIABLES — Accessible (colourblind-friendly)
   Replaces green/red feedback with blue/orange, which is much
   easier to distinguish for people with colour vision differences.
   Note: this only overrides the feedback colours, not the whole
   palette — so it combines with light or dark themes.
════════════════════════════════════════════════════════════════ */
body.theme-colorblind {
  --green: #0EA5E9;
  --green-light: #E0F2FE;
  --green-border: #7DD3FC;
  --red: #F97316;
  --red-light: #FFF7ED;
  --red-border: #FDBA74;
  --selected-bg: #E0F2FE;
  --selected-border: #0EA5E9;
  --selected-text: #0369A1;
}

/* Accessible Dark — both classes applied together (theme-dark + theme-colorblind).
   These overrides take priority when both are active at once. */
body.theme-dark.theme-colorblind {
  --green: #38BDF8;
  --green-light: #0C4A6E;
  --green-border: #0369A1;
  --red: #FB923C;
  --red-light: #431407;
  --red-border: #9A3412;
  --selected-bg: #0C4A6E;
  --selected-border: #38BDF8;
  --selected-text: #7DD3FC;
}

/* ════════════════════════════════════════════════════════════════
   PRIDE THEMES
   Each pride theme comes in a light and dark variant.
   Official flag hex codes are noted above each one for reference.
════════════════════════════════════════════════════════════════ */

/* Bi Pride light — official flag: pink #D60270, purple #9B4F96, blue #0038A8 */
body.theme-bi {
  --bg: #FDF0F7;
  --surface: #FFFFFF;
  --border: #F0B8D8;
  --text: #1C1917;
  --text-muted: #7B566E;
  --green: #0038A8;
  --green-light: #E6ECFB;
  --green-border: #7FA4E0;
  --red: #D60270;
  --red-light: #FCEEF6;
  --red-border: #F0A0CC;
  --selected-bg: #E6ECFB;
  --selected-border: #0038A8;
  --selected-text: #002880;
  --accent: #9B4F96;
  --accent-light: #F5E8F5;
  --dim-bg: #F9E8F4;
  --dim-text: #C99ABF;
  --dim-border: #F0B8D8;
  --points-color: #9B4F96;
}

/* Bi Pride dark */
body.theme-bi-dark {
  --bg: #1A0D18;
  --surface: #2A1526;
  --border: #5C2A58;
  --text: #F5F0F5;
  --text-muted: #C99ABF;
  --green: #6B9FE8;
  --green-light: #0A1A40;
  --green-border: #1A3A7A;
  --red: #F060A8;
  --red-light: #3A0020;
  --red-border: #7A1040;
  --selected-bg: #0A1A40;
  --selected-border: #6B9FE8;
  --selected-text: #A0C0F0;
  --accent: #C07ABB;
  --accent-light: #2A0A28;
  --dim-bg: #220E20;
  --dim-text: #6B3A66;
  --dim-border: #4A1A46;
  --points-color: #C07ABB;
}

/* Trans Pride light — official flag: blue #5BCEFA, pink #F5A9B8, white #FFFFFF */
body.theme-trans {
  --bg: #F0FAFF;
  --surface: #FFFFFF;
  --border: #B8E8FA;
  --text: #0A2030;
  --text-muted: #5A8090;
  --green: #5BCEFA;
  --green-light: #E0F7FF;
  --green-border: #90D8F5;
  --red: #E08098;
  --red-light: #FEF0F4;
  --red-border: #F5C0CC;
  --selected-bg: #E0F7FF;
  --selected-border: #5BCEFA;
  --selected-text: #006080;
  --accent: #F5A9B8;
  --accent-light: #FEF0F4;
  --dim-bg: #E8F6FC;
  --dim-text: #90C0D0;
  --dim-border: #C8E8F8;
  --points-color: #2090B8;
}

/* Trans Pride dark */
body.theme-trans-dark {
  --bg: #0A1520;
  --surface: #102030;
  --border: #1A3A50;
  --text: #E8F6FF;
  --text-muted: #7AAABB;
  --green: #5BCEFA;
  --green-light: #0A2535;
  --green-border: #1A4560;
  --red: #F5A9B8;
  --red-light: #2A0A15;
  --red-border: #5A1A2A;
  --selected-bg: #0A2535;
  --selected-border: #5BCEFA;
  --selected-text: #90D8F5;
  --accent: #F5A9B8;
  --accent-light: #2A0A15;
  --dim-bg: #0E1E2C;
  --dim-text: #2A4A5A;
  --dim-border: #1A3040;
  --points-color: #5BCEFA;
}

/* MLM Pride light — official flag: #078D70, #26CEAA, #99E8C2, #FFFFFF, #7BADE3, #3E1A78 */
body.theme-mlm {
  --bg: #F0FBF7;
  --surface: #FFFFFF;
  --border: #A0DEC4;
  --text: #082818;
  --text-muted: #407860;
  --green: #078D70;
  --green-light: #E0F8F0;
  --green-border: #80D4B8;
  --red: #3E1A78;
  --red-light: #EEE8F8;
  --red-border: #B090D8;
  --selected-bg: #E0F8F0;
  --selected-border: #078D70;
  --selected-text: #045040;
  --accent: #3E1A78;
  --accent-light: #EEE8F8;
  --dim-bg: #E8F8F2;
  --dim-text: #90C8B8;
  --dim-border: #B8E8D8;
  --points-color: #3E1A78;
}

/* MLM Pride dark */
body.theme-mlm-dark {
  --bg: #061410;
  --surface: #0C2018;
  --border: #0A3028;
  --text: #E0F8F0;
  --text-muted: #70B8A0;
  --green: #26CEAA;
  --green-light: #042818;
  --green-border: #0A4830;
  --red: #7B5ABB;
  --red-light: #180A30;
  --red-border: #3A1A60;
  --selected-bg: #042818;
  --selected-border: #26CEAA;
  --selected-text: #80E8C8;
  --accent: #7B5ABB;
  --accent-light: #180A30;
  --dim-bg: #081A12;
  --dim-text: #1A4830;
  --dim-border: #0C2820;
  --points-color: #26CEAA;
}

/* WLW Pride light — official flag: #D62900, #FF9B55, #FFFFFF, #D461A6, #A50062 */
body.theme-wlw {
  --bg: #FFF8F0;
  --surface: #FFFFFF;
  --border: #FFCCA0;
  --text: #2A0800;
  --text-muted: #885030;
  --green: #D62900;
  --green-light: #FFF0E8;
  --green-border: #FFB888;
  --red: #A50062;
  --red-light: #FFEEF8;
  --red-border: #F0A0D0;
  --selected-bg: #FFF0E8;
  --selected-border: #D62900;
  --selected-text: #881800;
  --accent: #A50062;
  --accent-light: #FFEEF8;
  --dim-bg: #FFF4E8;
  --dim-text: #DDA880;
  --dim-border: #FFD8B0;
  --points-color: #A50062;
}

/* WLW Pride dark */
body.theme-wlw-dark {
  --bg: #1A0800;
  --surface: #2A1000;
  --border: #4A1800;
  --text: #FFF0E8;
  --text-muted: #CC8860;
  --green: #FF6633;
  --green-light: #300800;
  --green-border: #601500;
  --red: #D461A6;
  --red-light: #2A0018;
  --red-border: #601038;
  --selected-bg: #300800;
  --selected-border: #FF6633;
  --selected-text: #FF9966;
  --accent: #D461A6;
  --accent-light: #2A0018;
  --dim-bg: #200A00;
  --dim-text: #502010;
  --dim-border: #3A1000;
  --points-color: #FF9B55;
}

/* ════════════════════════════════════════════════════════════════
   LAYOUT
   Sets up the page body and the main app container.
   The game is capped at 420px wide so it feels like a phone app
   even on a desktop browser.
════════════════════════════════════════════════════════════════ */
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text);
  transition: background 0.3s, color 0.3s;
}

#app {
  width: 100%;
  max-width: 420px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.screen {
  display: none;
  flex-direction: column;
  padding: 0 16px 32px;
  flex: 1;
}

.screen.active { display: flex; }

/* ════════════════════════════════════════════════════════════════
   MAP SCREEN
   The level select screen — top bar, legend, level dots, and
   the dev tools section at the bottom.
════════════════════════════════════════════════════════════════ */
#map-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px;
}

#logo {
  font-family: 'DM Mono', monospace;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--text);
}

#logo span { color: var(--accent); }

#map-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

#points-display {
  font-size: 13px;
  font-weight: 500;
  color: var(--points-color);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.points-pill {
  font-size: 13px;
  font-weight: 500;
  color: var(--points-color);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.icon-btn:hover { background: var(--bg); }

.map-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.legend-dot.solved { background: var(--green-light); border-color: var(--green-border); }
.legend-dot.next   { background: var(--accent); border-color: var(--accent); }
.legend-dot.locked { background: var(--bg); border-color: var(--border); }

.map-section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 16px 0 8px;
}

#level-map { display: flex; flex-direction: column; }

.map-section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

.lvl-dot {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.lvl-dot:active { transform: scale(0.93); }
.lvl-dot .dot-num  { font-size: 13px; font-weight: 500; line-height: 1; }
.lvl-dot .dot-size { font-size: 9px; font-weight: 400; opacity: 0.7; line-height: 1; }
.lvl-dot.solved { background: var(--green-light); border-color: var(--green-border); color: var(--green); }
.lvl-dot.next   { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 3px var(--accent-light); }
.lvl-dot.next .dot-size { opacity: 0.8; }
.lvl-dot.locked { background: var(--bg); border-color: var(--border); color: var(--dim-text); cursor: default; }
.lvl-dot.locked:active { transform: none; }

/* Star rating shown on solved level dots (e.g. ★★☆) */
.dot-stars { font-size: 8px; line-height: 1; letter-spacing: -1px; }

/* Dev tools — "Clear all progress" button, shown at the bottom of the map.
   To be removed before public release. */
#dev-tools {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.dev-label { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; font-family: 'DM Mono', monospace; }
.btn-dev { font-size: 12px; font-family: 'DM Sans', sans-serif; color: var(--red); background: var(--red-light); border: 1px solid var(--red-border); border-radius: 8px; padding: 8px 16px; cursor: pointer; }

/* ════════════════════════════════════════════════════════════════
   GAME SCREEN
   The puzzle itself — top bar, mode buttons, lives, companion,
   grid, messages, win screen, and game over screen.
════════════════════════════════════════════════════════════════ */
#game-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

#game-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 10px;
}

.shop-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 0 16px;
}

.shop-top .screen-title {
  text-align: center;
}

.shop-top .points-pill {
  justify-self: end;
}

.back-btn {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  font-family: 'DM Sans', sans-serif;
}

#game-level-badge {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
}

#points-display-game {
  width: fit-content;
}

#mode-row { display: flex; gap: 8px; margin-bottom: 14px; }

.mode-btn {
  flex: 1;
  padding: 8px 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.mode-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }

#lives-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  min-height: 32px;
}

.heart { width: 28px; height: 28px; }

@keyframes heartbreak {
  0%  { transform: scale(1); }
  40% { transform: scale(1.3); }
  100%{ transform: scale(0.85); opacity: 0.4; }
}

.heart.lost { animation: heartbreak 0.3s ease-out forwards; }

/* ── Companion ──
   The critter that floats above the grid. It idles with a gentle
   float, bounces when a row/column is completed, and wiggles with
   a happy face when the puzzle is solved. */
#companion-area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  min-height: 0;
}

#companion-area.has-companion { min-height: 64px; }

#companion-svg {
  width: 56px;
  height: 56px;
  display: block;
  animation: companionFloat 3s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes companionFloat {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

@keyframes companionWiggle {
  0%   { transform: translateY(0px) scale(1); }
  10%  { transform: translateY(-18px) scale(1.05); }
  20%  { transform: translateY(0px) scale(0.95); }
  30%  { transform: translateY(-14px) scale(1.05); }
  40%  { transform: translateY(0px) scale(0.95); }
  50%  { transform: translateY(-10px) scale(1.05); }
  60%  { transform: translateY(0px) scale(0.95); }
  70%  { transform: translateY(-6px) scale(1.02); }
  80%  { transform: translateY(0px) scale(0.98); }
  90%  { transform: translateY(-3px) scale(1.01); }
  100% { transform: translateY(0px) scale(1); }
}

@keyframes companionRowDone {
  0%   { transform: translateY(0px) scale(1); }
  25%  { transform: translateY(-7px) scale(1.1); }
  50%  { transform: translateY(-2px) scale(0.95); }
  75%  { transform: translateY(-5px) scale(1.05); }
  100% { transform: translateY(0px) scale(1); }
}

.companion-celebrate {
  animation: companionWiggle 1s ease-in-out forwards,
             companionFloat 3s ease-in-out 1s infinite !important;
}

.companion-row-done {
  animation: companionRowDone 0.4s ease-in-out forwards,
             companionFloat 3s ease-in-out 0.4s infinite !important;
}

/* ── Grid ──
   The puzzle grid is built dynamically by game.js — this just
   sets the gap between cells. Column count is set inline. */
#grid-wrap { display: grid; gap: 5px; }

.col-label, .row-label {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EAE7E0;
  border: 1px solid #D4CFC7;
  border-radius: 10px;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  color: var(--text);
  position: relative;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

body.theme-dark .col-label,
body.theme-dark .row-label {
  background: #3C3835;
  border-color: #57534E;
  color: var(--text);
}

body.theme-colorblind .col-label,
body.theme-colorblind .row-label {
  background: #EAE7E0;
  border-color: #D4CFC7;
}

body.theme-dark.theme-colorblind .col-label,
body.theme-dark.theme-colorblind .row-label {
  background: #3C3835;
  border-color: #57534E;
}

body.theme-bi .col-label,
body.theme-bi .row-label {
  background: #F5E8F5;
  border-color: #D4A0D0;
}

body.theme-bi-dark .col-label,
body.theme-bi-dark .row-label {
  background: #3A1A38;
  border-color: #6A3A66;
}

body.theme-trans .col-label,
body.theme-trans .row-label {
  background: #D8F2FC;
  border-color: #90D0EC;
}

body.theme-trans-dark .col-label,
body.theme-trans-dark .row-label {
  background: #142838;
  border-color: #204858;
}

body.theme-mlm .col-label,
body.theme-mlm .row-label {
  background: #D8F4EC;
  border-color: #80C8B0;
}

body.theme-mlm-dark .col-label,
body.theme-mlm-dark .row-label {
  background: #0A2018;
  border-color: #103828;
}

body.theme-wlw .col-label,
body.theme-wlw .row-label {
  background: #FFE8D0;
  border-color: #FFBB88;
}

body.theme-wlw-dark .col-label,
body.theme-wlw-dark .row-label {
  background: #2A1000;
  border-color: #4A1800;
}


.col-label.exact, .row-label.exact,
body.theme-dark .col-label.exact, body.theme-dark .row-label.exact,
body.theme-colorblind .col-label.exact, body.theme-colorblind .row-label.exact,
body.theme-dark.theme-colorblind .col-label.exact, body.theme-dark.theme-colorblind .row-label.exact {
  border-color: var(--green-border);
  background: var(--green-light);
  color: var(--green);
}

.col-label.over, .row-label.over,
body.theme-dark .col-label.over, body.theme-dark .row-label.over,
body.theme-colorblind .col-label.over, body.theme-colorblind .row-label.over,
body.theme-dark.theme-colorblind .col-label.over, body.theme-dark.theme-colorblind .row-label.over {
  border-color: var(--red-border);
  background: var(--red-light);
  color: var(--red);
}

.label-sub {
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  color: inherit;
  opacity: 0.65;
  position: absolute;
  bottom: 4px;
  right: 5px;
  line-height: 1;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
  touch-action: manipulation;
}

.cell:active { transform: scale(0.94); }
.cell.selected      { background: var(--selected-bg); border-color: var(--selected-border); color: var(--selected-text); font-weight: 500; }
.cell.over-selected { background: var(--red-light); border-color: var(--red-border); color: var(--red); }
.cell.dimmed        { background: var(--dim-bg); border-color: var(--dim-border); color: var(--dim-text); }
.cell.dimmed:active { transform: none; }

/* ── Feedback message ──
   The small text that appears briefly, e.g. "Over the target — lost a life!"
   It fades in when shown and fades out when hidden. */
#msg-area { min-height: 28px; margin-top: 14px; text-align: center; }
#message  { font-size: 14px; color: var(--red); font-weight: 500; opacity: 0; transition: opacity 0.2s; }
#message.show { opacity: 1; }

/* ── Win / game over screens ──
   Hidden by default (display: none). The .show class is added
   by game.js when the puzzle is solved or all lives are lost. */
#win-screen, #gameover-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  gap: 8px;
  animation: fadein 0.4s ease-out;
}

#win-screen.show, #gameover-screen.show { display: flex; }

@keyframes fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#win-emoji  { font-size: 48px; line-height: 1; }
#win-title  { font-size: 22px; font-weight: 600; color: var(--green); margin-top: 4px; }
#gameover-title { font-size: 22px; font-weight: 600; color: var(--red); margin-top: 4px; }
.sub-text   { font-size: 14px; color: var(--text-muted); text-align: center; }

#points-earned-display {
  font-size: 15px;
  font-weight: 500;
  color: var(--points-color);
  min-height: 24px;
}

/* ════════════════════════════════════════════════════════════════
   BUTTONS
   The base .btn style is a full-width white button. Variants:
   .btn-primary — dark fill (e.g. Revive)
   .btn-green   — green fill (e.g. Next level)
════════════════════════════════════════════════════════════════ */
.btn {
  display: block;
  width: 100%;
  padding: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, transform 0.1s;
  margin-top: 10px;
}

.btn:active { transform: scale(0.97); }
.btn:hover  { background: var(--bg); }
.btn-primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-primary:hover { background: #3C3A36; }
.btn-green { background: var(--green); color: #fff; border-color: var(--green); }
.btn-green:hover { background: #0F6E56; }

/* ════════════════════════════════════════════════════════════════
   PROFILE SCREEN
   Stats cards, companion preview tile, and links to the shops.
════════════════════════════════════════════════════════════════ */
#profile-top, #shop-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px;
}

.screen-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
}

#shop-points {
  font-size: 13px;
  font-weight: 500;
  color: var(--points-color);
}

.shop-points-display {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--points-color);
}

/* Profile stat cards — the 2-column grid of numbers (levels solved, points, etc.) */
.profile-section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 20px 0 10px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label { font-size: 12px; color: var(--text-muted); }
.stat-value { font-size: 22px; font-weight: 500; color: var(--text); font-family: 'DM Mono', monospace; }
.stat-value.points { color: var(--points-color); }

.companion-preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.companion-preview svg { width: 56px; height: 56px; flex-shrink: 0; }

.companion-info { flex: 1; }
.companion-name { font-size: 15px; font-weight: 500; color: var(--text); }
.companion-desc { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.no-companion {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════
   SHOP SCREENS
   Theme and companion shop — 2-column grid of purchasable items.
   States: default, owned (green tint), active/equipped (accent
   border), locked (faded out, not clickable).
════════════════════════════════════════════════════════════════ */
.shop-section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 20px 0 10px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.shop-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.shop-item:active { transform: scale(0.97); }
.shop-item.owned  { border-color: var(--green-border); background: var(--green-light); }
.shop-item.active-item { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
.shop-item.locked-item { opacity: 0.5; cursor: default; }
.shop-item.locked-item:active { transform: none; }

.shop-item-preview { width: 56px; height: 56px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.shop-item-name  { font-size: 14px; font-weight: 500; color: var(--text); }
.shop-item-desc  { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.shop-item-price {
  font-size: 12px;
  font-weight: 500;
  color: var(--points-color);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
}
.shop-item-price.free  { color: var(--green); border-color: var(--green-border); }
.shop-item-price.owned { color: var(--green); border-color: var(--green-border); background: var(--green-light); }
.shop-item-price.equipped { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ── Companion face states ──
   All companions share .numby-normal and .numby-happy CSS classes.
   The normal face is shown by default; happy face shows on puzzle
   complete. Swapped by adding .is-happy to #companion-svg. */
.numby-happy  { display: none; }
.numby-normal { display: block; }
#companion-svg.is-happy .numby-happy  { display: block; }
#companion-svg.is-happy .numby-normal { display: none; }
.theme-swatch {
  width: 56px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: flex;
  gap: 3px;
  padding: 6px;
  align-items: center;
  justify-content: center;
}

.swatch-dot { width: 10px; height: 10px; border-radius: 50%; }

/* ════════════════════════════════════════════════════════════════
   PAGINATION
   The ← · · → row shown below each section on the level map
   when there are more levels than fit on one page.
════════════════════════════════════════════════════════════════ */
.pagination-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 6px 0 4px;
}

.page-arrow {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}

.page-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.page-arrow:not(:disabled):active { transform: scale(0.93); }
.page-arrow:not(:disabled):hover  { border-color: var(--accent); color: var(--accent); }

.page-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.page-dot.active {
  background: var(--accent);
  width: 20px;
  border-radius: 4px;
}

.page-dot:not(.active):hover { background: var(--text-muted); }

/* ════════════════════════════════════════════════════════════════
   INVENTORY PICKER
   The bottom sheet that slides up when you tap "Change companion"
   or "Change theme" on the profile screen. Clicking the dark
   overlay behind it dismisses it.
════════════════════════════════════════════════════════════════ */
.picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  animation: fadein 0.2s ease-out;
}

.picker-sheet {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 420px;
  padding: 20px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: slideup 0.25s ease-out;
}

@keyframes slideup {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.picker-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
  margin-bottom: 4px;
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.picker-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.picker-item:active { transform: scale(0.95); }
.picker-item.active-item {
  border-color: var(--accent);
  background: var(--accent-light);
}

.picker-item-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
}

.picker-none {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 80px;
  font-size: 12px;
  color: var(--text-muted);
  -webkit-tap-highlight-color: transparent;
}

.picker-cancel {
  display: block;
  width: 100%;
  padding: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
}

.inventory-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 8px;
}

.inventory-tile:active { transform: scale(0.98); }
.inventory-tile:hover  { border-color: var(--accent); }
.inventory-tile-info   { flex: 1; }
.inventory-tile-name   { font-size: 15px; font-weight: 500; color: var(--text); }
.inventory-tile-desc   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.inventory-tile-arrow  { font-size: 16px; color: var(--text-muted); }

.shop-cta-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.shop-cta-btn:active { transform: scale(0.97); opacity: 0.85; }
</style>