/* SnapPuzzles — "cozy" skin for the game (html[data-skin="cozy"]).
   Warm linen, terracotta, sage, rose; serif headings; wooden puzzle table; cat illustrations.
   It re-colours the existing Tailwind utility classes, the same way the light theme does. */
html[data-skin="cozy"],
:root[data-skin="cozy"][data-theme] {
  --bg-primary: #f7f1e8;
  --bg-secondary: #fffdf8;
  --bg-tertiary: #f1e8db;
  --text-primary: #2b2320;
  --text-secondary: #66574f;
  --text-tertiary: #8a7b72;
  --border-color: #e4d8c6;
  --accent-yellow: #a8481f;
  --accent-yellow-hover: #8f3c18;
  --cz-primary: #a8481f;
  --cz-primary-2: #8f3c18;
  --cz-sage: #6f7f63;
  --cz-sage-soft: #e3e8dc;
  --cz-rose-soft: #f3dfd7;
  --cz-honey: #e2a93b;
  --cz-line: #e4d8c6;
}
html[data-skin="cozy"] body,
html[data-skin="cozy"] #root {
  background:
    radial-gradient(rgba(168, 72, 31, 0.06) 1.2px, transparent 1.4px) 0 0 / 22px 22px,
    #f7f1e8 !important;
  color: #2b2320 !important;
  font-family: 'Nunito Sans', 'Inter', system-ui, sans-serif;
}
html[data-skin="cozy"] h1,
html[data-skin="cozy"] h2,
html[data-skin="cozy"] h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600 !important; letter-spacing: -0.01em; }

/* surfaces: dark glass → white cards with a soft stitched edge */
html[data-skin="cozy"] .bg-slate-900\/60,
html[data-skin="cozy"] .bg-slate-900\/80,
html[data-skin="cozy"] .bg-slate-900,
html[data-skin="cozy"] .bg-black\/40,
html[data-skin="cozy"] .bg-black\/60 { background-color: #fffdf8 !important; }
html[data-skin="cozy"] .bg-slate-800,
html[data-skin="cozy"] .bg-slate-800\/50,
html[data-skin="cozy"] .bg-slate-800\/60,
html[data-skin="cozy"] .bg-slate-700 { background-color: #f6eee3 !important; }
html[data-skin="cozy"] .bg-slate-950\/95 { background-color: rgba(247, 241, 232, 0.97) !important; }
html[data-skin="cozy"] .bg-black\/80,
html[data-skin="cozy"] .bg-black\/85,
html[data-skin="cozy"] .bg-black\/90 { background-color: rgba(70, 48, 32, 0.45) !important; }
html[data-skin="cozy"] .border-white\/10,
html[data-skin="cozy"] .border-white\/5 { border-color: var(--cz-line) !important; }
html[data-skin="cozy"] .rounded-\[2rem\] { border: 2px dashed #e6c9bd !important; }
html[data-skin="cozy"] .text-white { color: #2b2320 !important; }
html[data-skin="cozy"] .text-slate-200,
html[data-skin="cozy"] .text-slate-300,
html[data-skin="cozy"] .text-slate-400,
html[data-skin="cozy"] .text-slate-500 { color: #66574f !important; }

/* yellow accents → terracotta */
html[data-skin="cozy"] .bg-yellow-400 { background-color: var(--cz-primary) !important; color: #fff !important; border-color: var(--cz-primary) !important; }
html[data-skin="cozy"] .bg-yellow-400 svg,
html[data-skin="cozy"] .bg-yellow-400 .text-black,
html[data-skin="cozy"] .bg-yellow-400.text-black { color: #fff !important; }
html[data-skin="cozy"] .hover\:bg-yellow-300:hover { background-color: var(--cz-primary-2) !important; }
html[data-skin="cozy"] .text-yellow-400,
html[data-skin="cozy"] .text-yellow-300,
html[data-skin="cozy"] .text-yellow-200,
html[data-skin="cozy"] .text-yellow-500 { color: var(--cz-primary) !important; }
html[data-skin="cozy"] .border-yellow-400,
html[data-skin="cozy"] .border-yellow-400\/30,
html[data-skin="cozy"] .border-yellow-400\/40 { border-color: #d9a48c !important; }
html[data-skin="cozy"] .bg-yellow-400\/5,
html[data-skin="cozy"] .bg-yellow-400\/10,
html[data-skin="cozy"] .bg-yellow-400\/20,
html[data-skin="cozy"] .bg-yellow-500\/20 { background-color: var(--cz-rose-soft) !important; }
html[data-skin="cozy"] .fill-yellow-400 { fill: var(--cz-honey) !important; }
html[data-skin="cozy"] .ring-yellow-400\/60 { --tw-ring-color: rgba(168, 72, 31, .45) !important; }

/* indigo / blue-purple → sage */
html[data-skin="cozy"] .bg-indigo-500,
html[data-skin="cozy"] .bg-indigo-600 { background-color: var(--cz-sage) !important; }
html[data-skin="cozy"] .bg-indigo-500\/10,
html[data-skin="cozy"] .bg-indigo-500\/20 { background-color: var(--cz-sage-soft) !important; }
html[data-skin="cozy"] .text-indigo-100,
html[data-skin="cozy"] .text-indigo-200,
html[data-skin="cozy"] .text-indigo-300,
html[data-skin="cozy"] .text-indigo-400 { color: #4f5c45 !important; }
html[data-skin="cozy"] .border-indigo-400\/60,
html[data-skin="cozy"] .border-indigo-500\/20 { border-color: #b9c4ae !important; }
html[data-skin="cozy"] .bg-gradient-to-r.from-blue-500 { background-image: none !important; background-color: var(--cz-sage) !important; color: #fff !important; box-shadow: none !important; }
html[data-skin="cozy"] .bg-gradient-to-r.from-blue-500 svg { color: #fff !important; }

/* secondary buttons + chips */
html[data-skin="cozy"] .bg-slate-800\/80 { background-color: #fffdf8 !important; color: #2b2320 !important; border: 1px solid var(--cz-line) !important; box-shadow: 0 4px 12px rgba(77, 52, 33, .08) !important; }
html[data-skin="cozy"] button.bg-slate-800\/80 span { color: #2b2320 !important; }
html[data-skin="cozy"] .bg-slate-600 { background-color: #efe6d8 !important; color: #2b2320 !important; }
html[data-skin="cozy"] .bg-slate-700 { color: #2b2320 !important; }
html[data-skin="cozy"] .bg-white\/5 { background-color: #fffdf8 !important; }
html[data-skin="cozy"] .rounded-xl,
html[data-skin="cozy"] .rounded-2xl { border-radius: 18px; }
html[data-skin="cozy"] button.rounded-xl.font-bold,
html[data-skin="cozy"] button.rounded-full { border-radius: 999px; }

/* the puzzle table becomes a wooden table */
html[data-skin="cozy"] .sp-table {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 52px),
    linear-gradient(180deg, #c8a27c, #b38b63) !important;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, .2), 0 10px 30px rgba(77, 52, 33, .15) !important;
  border-color: #a98560 !important;
}
html[data-skin="cozy"] .sp-table .jz-board { background: rgba(255, 253, 248, .55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 4px 14px rgba(60, 40, 20, .25); }
html[data-skin="cozy"] .sp-table .jz-piece { filter: drop-shadow(0 3px 3px rgba(60, 40, 20, .35)); }
html[data-skin="cozy"] .sp-table .jz-piece.jz-placed { filter: none; }
html[data-skin="cozy"] .sp-table .jz-piece.jz-selected { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 4px #fff) drop-shadow(0 6px 10px rgba(60, 40, 20, .4)); }

/* cat illustrations only show in the cozy skin */
.cz-only { display: none !important; }
html[data-skin="cozy"] .cz-only { display: block !important; }
html[data-skin="cozy"] .cz-hide { display: none !important; }
.cz-hand { font-family: 'Caveat', cursive; color: #a8481f; font-size: 24px; line-height: 1.1; }