* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f5f5f3; --surface: #fff; --border: #ccc; --border-strong: #bbb;
  --text: #111; --text-muted: #888;
  --ref-cell-bg: #f5f5f3; --ref-border: #ddd; --hover-bg: #f5f5f3;
  --match-bg: #EAF3DE; --match-border: #639922; --match-text: #3B6D11;
  --wrong-bg: #FCEBEB; --wrong-border: #E24B4A; --wrong-text: #A32D2D;
  --overlay-bg: rgba(255,255,255,0.93);
  --n1-bg: #56ab2f; --n1-fg: #ffffff;
  --n2-bg: #f4c430; --n2-fg: #3c2f00;
  --n3-bg: #2274a5; --n3-fg: #ffffff;
  --n4-bg: #ec6f66; --n4-fg: #ffffff;
  --n5-bg: #8e5ea2; --n5-fg: #ffffff;
  --n6-bg: #2a9d8f; --n6-fg: #ffffff;
  --n7-bg: #f48c06; --n7-fg: #ffffff;
  --n8-bg: #577590; --n8-fg: #ffffff;
  --n9-bg: #a44a3f; --n9-fg: #ffffff;
}

body[data-palette="tramonto"] {
  --n1-bg: #f94144; --n1-fg: #ffffff;
  --n2-bg: #f3722c; --n2-fg: #ffffff;
  --n3-bg: #f8961e; --n3-fg: #3b2a00;
  --n4-bg: #f9c74f; --n4-fg: #3b2a00;
  --n5-bg: #90be6d; --n5-fg: #16310f;
  --n6-bg: #43aa8b; --n6-fg: #ffffff;
  --n7-bg: #4d908e; --n7-fg: #ffffff;
  --n8-bg: #577590; --n8-fg: #ffffff;
  --n9-bg: #277da1; --n9-fg: #ffffff;
}

body[data-palette="oceano"] {
  --n1-bg: #006d77; --n1-fg: #ffffff;
  --n2-bg: #118ab2; --n2-fg: #ffffff;
  --n3-bg: #1d3557; --n3-fg: #ffffff;
  --n4-bg: #2a9d8f; --n4-fg: #ffffff;
  --n5-bg: #457b9d; --n5-fg: #ffffff;
  --n6-bg: #4895ef; --n6-fg: #ffffff;
  --n7-bg: #00b4d8; --n7-fg: #0a2230;
  --n8-bg: #90e0ef; --n8-fg: #0a2230;
  --n9-bg: #48cae4; --n9-fg: #0a2230;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1e1c; --surface: #2a2a28; --border: #444; --border-strong: #555;
    --text: #eee; --text-muted: #aaa;
    --ref-cell-bg: #333; --ref-border: #444; --hover-bg: #333;
    --match-bg: #173404; --match-border: #639922; --match-text: #C0DD97;
    --wrong-bg: #501313; --wrong-border: #E24B4A; --wrong-text: #F7C1C1;
    --overlay-bg: rgba(30,30,28,0.93);
  }
}

body.dark {
  --bg: #1e1e1c; --surface: #2a2a28; --border: #444; --border-strong: #555;
  --text: #eee; --text-muted: #aaa;
  --ref-cell-bg: #333; --ref-border: #444; --hover-bg: #333;
  --match-bg: #173404; --match-border: #639922; --match-text: #C0DD97;
  --wrong-bg: #501313; --wrong-border: #E24B4A; --wrong-text: #F7C1C1;
  --overlay-bg: rgba(30,30,28,0.93);
}

body.light {
  --bg: #f5f5f3; --surface: #fff; --border: #ccc; --border-strong: #bbb;
  --text: #111; --text-muted: #888;
  --ref-cell-bg: #f5f5f3; --ref-border: #ddd; --hover-bg: #f5f5f3;
  --match-bg: #EAF3DE; --match-border: #639922; --match-text: #3B6D11;
  --wrong-bg: #FCEBEB; --wrong-border: #E24B4A; --wrong-text: #A32D2D;
  --overlay-bg: rgba(255,255,255,0.93);
}