/* Each skin owns its landscape, porcelain, enamel, and edge colors.
   Preview cards use the same variables as the actual board. */
:root, [data-theme="jade"], [data-skin="jade"] {
  --scene: url('./assets/themes/jade.svg');
  --bg: #f3f5eb; --ink: #263e33; --muted: #768574;
  --accent: #386d53; --accent-dark: #244e39; --soft: #e6eddd;
  --gold: #ac8b4d; --line: #d5dfca; --panel: #fffef6;
  --board: #dde8d3; --panel-glass: #fffef6d9;
  --tile-top: #fffef4; --tile-bottom: #f3edd7;
  --tile-border: #ddd4b7; --tile-inlay: #bcaa7080;
  --tile-side: #c4c9a4; --tile-foot: #7f9b71;
  --tile-selected: #e3efc9; --tile-select-border: #6a9254;
  --tile-select-side: #aec58b; --tile-select-foot: #648044;
  --face-green: #2c6e52; --face-green-light: #62916e;
  --face-red: #b3654e; --face-blue: #507d8c; --face-ink: #2f493a;
  --tile-line: #ffffffa3; --tile-shadow: #203c292b;
}
[data-theme="river"], [data-skin="river"] {
  --scene: url('./assets/themes/river.svg');
  --bg: #edf4f1; --ink: #2c4b51; --muted: #6f888a;
  --accent: #3c7881; --accent-dark: #265b64; --soft: #e0eded;
  --gold: #a18c5d; --line: #cddfde; --panel: #f7fdfa;
  --board: #d5e6e3; --panel-glass: #f7fdfbd9;
  --tile-top: #fbfffe; --tile-bottom: #e1efef;
  --tile-border: #c2d9d9; --tile-inlay: #8bb5ba80;
  --tile-side: #b2ccce; --tile-foot: #67939d;
  --tile-selected: #cdece5; --tile-select-border: #4b9591;
  --tile-select-side: #97c4bd; --tile-select-foot: #487e7d;
  --face-green: #287d75; --face-green-light: #63a194;
  --face-red: #bc7763; --face-blue: #3e6e97; --face-ink: #34566c;
  --tile-line: #ffffffb8; --tile-shadow: #20464c2b;
}
[data-theme="sakura"], [data-skin="sakura"] {
  --scene: url('./assets/themes/sakura.svg');
  --bg: #faf1ec; --ink: #69484e; --muted: #967b7c;
  --accent: #aa7080; --accent-dark: #86525f; --soft: #f1e2e3;
  --gold: #bc9161; --line: #e8d4d1; --panel: #fff9f2;
  --board: #efdfd8; --panel-glass: #fff9f4dc;
  --tile-top: #fffaf5; --tile-bottom: #f5e3dc;
  --tile-border: #e8c8bc; --tile-inlay: #cfb08080;
  --tile-side: #d6b9b6; --tile-foot: #ae8590;
  --tile-selected: #f8d8dd; --tile-select-border: #ae657c;
  --tile-select-side: #d6a3b0; --tile-select-foot: #975971;
  --face-green: #568776; --face-green-light: #88a694;
  --face-red: #b35c72; --face-blue: #6a7e9b; --face-ink: #75495b;
  --tile-line: #fffdfaab; --tile-shadow: #70404c25;
}
[data-theme="gold"], [data-skin="gold"] {
  --scene: url('./assets/themes/gold.svg');
  --bg: #f7f1e2; --ink: #625035; --muted: #97866b;
  --accent: #9f8247; --accent-dark: #75602f; --soft: #eee5ce;
  --gold: #ac853c; --line: #e1d4b8; --panel: #fffaf0;
  --board: #e7dcc2; --panel-glass: #fffaf1d9;
  --tile-top: #fff8df; --tile-bottom: #eddaaa;
  --tile-border: #d4bc82; --tile-inlay: #b99a5480;
  --tile-side: #cfb77a; --tile-foot: #a08650;
  --tile-selected: #f8e8ad; --tile-select-border: #a78738;
  --tile-select-side: #d0b05c; --tile-select-foot: #917638;
  --face-green: #546d4f; --face-green-light: #8a9560;
  --face-red: #b26645; --face-blue: #546f80; --face-ink: #645032;
  --tile-line: #fffcdfa3; --tile-shadow: #5946202c;
}
[data-theme="moon"], [data-skin="moon"] {
  --scene: url('./assets/themes/moon.svg');
  --bg: #e8edf4; --ink: #344860; --muted: #79879c;
  --accent: #657f9e; --accent-dark: #455d7b; --soft: #dfe6f1;
  --gold: #a88f63; --line: #cad4e3; --panel: #f4f7fb;
  --board: #c3cedf; --panel-glass: #f4f7fbd9;
  --tile-top: #445d7b; --tile-bottom: #2b415c;
  --tile-border: #61758e; --tile-inlay: #bfbc9680;
  --tile-side: #2b3f5b; --tile-foot: #192b46;
  --tile-selected: #53768c; --tile-select-border: #c6dec8;
  --tile-select-side: #426978; --tile-select-foot: #254858;
  --face-green: #b8dcca; --face-green-light: #8fbea9;
  --face-red: #edb19e; --face-blue: #b7d5f0; --face-ink: #f0e9d8;
  --tile-line: #a8b9cd45; --tile-shadow: #23355138;
}

body { isolation: isolate; background: var(--bg); }
.ambient { display: none; }
.garden-scene {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, #fffaf52b, transparent 72%), var(--scene);
  background-position: center top; background-size: cover;
}
.garden-scene::after {
  content: ''; position: absolute; inset: 0;
  background: url('./assets/themes/paper.svg'); opacity: .28;
}
.header { border-color: var(--line); }
.brand small, .nav-item { color: var(--muted); }
.brand-mark { box-shadow: 0 3px 0 var(--tile-side), 0 7px 17px var(--tile-shadow); }
.header .icon-button { background: var(--panel-glass); border-color: var(--line); }
.eyebrow, .chapter small, .how-card p, .level-details,
.score-item > span, .tools small, .game-footnote,
.mastery-card p, .xp-caption, .mastery-stats span,
.next-reward small, .next-reward span span, .rail-note,
.footer, .footer .text-button { color: var(--muted); }
.journey-heading > span, .chapter.active, .reward-icon { background: var(--soft); }
.chapter { color: var(--muted); }
.chapter.active { background: var(--panel-glass); box-shadow: 0 4px 17px var(--tile-shadow); }
.chapter-icon { border-color: var(--line); color: var(--accent); }
.how-card, .mastery-card {
  background: var(--panel-glass); border-color: var(--line);
  box-shadow: 0 9px 28px #40533808, inset 0 1px 0 #ffffffc4;
}
.how-card { backdrop-filter: blur(8px); }
.rank-emblem {
  background: radial-gradient(circle at 30% 20%, var(--tile-top), var(--soft));
  border-color: var(--tile-border);
  box-shadow: 0 0 0 6px var(--panel), 0 0 0 7px var(--line), 0 10px 25px var(--tile-shadow);
}
.rank-emblem .icon { color: var(--accent); }
.rank-emblem::before, .rank-emblem::after { border-color: var(--tile-inlay); }
.progress-track { background: var(--soft); }
.progress-track > div { background: linear-gradient(90deg, var(--accent), var(--gold)); }

.game-panel {
  border: 1px solid var(--line); background: var(--panel);
  box-shadow: 0 22px 65px var(--tile-shadow), 0 2px 4px #29482508, inset 0 1px 0 #fff;
}
.scorebar { background: linear-gradient(120deg, var(--panel), var(--soft)); }
.pause-button { background: var(--panel); border-color: var(--line); }
.board-stage {
  background-color: var(--board);
  background-image: radial-gradient(ellipse at 50% 42%, #fff9 0%, #fff0 75%), url('./assets/themes/paper.svg');
}
.board-stage::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: var(--scene); background-size: cover; background-position: center 76%;
  opacity: .42; pointer-events: none;
}
.board-stage::after {
  content: ''; position: absolute; inset: 12px 12px 3px;
  border: 1px solid var(--tile-inlay); border-radius: 14px;
  box-shadow: inset 0 0 0 4px #ffffff24; opacity: .65; pointer-events: none;
}
.board-watermark { display: none; }
.board { z-index: 1; }
.combo { z-index: 3; }
.board-status { background: var(--board); color: var(--accent); }
.status-dot { background: var(--accent); opacity: .6; }
.tools { background: linear-gradient(0deg, var(--panel), var(--soft)); }
.tools button { transition: background .2s, translate .2s; }
.tools button:hover:enabled { background: var(--panel); translate: 0 -1px; }

.tile {
  background: linear-gradient(140deg, var(--tile-top) 15%, var(--tile-bottom) 100%);
  border: 1px solid var(--tile-border); border-radius: 9px;
  box-shadow: inset 0 1px 0 var(--tile-line), inset 1px 0 0 var(--tile-line),
    0 4px 0 var(--tile-side), 0 6px 0 var(--tile-foot), 1px 10px 10px var(--tile-shadow);
  padding: 7px 8px;
}
.tile::before {
  content: ''; position: absolute; inset: 3px; border: 1px solid var(--tile-inlay);
  border-radius: 5px; pointer-events: none; opacity: .58;
}
.tile::after {
  content: ''; position: absolute; left: 20%; right: 20%; bottom: 4px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--tile-inlay), transparent);
  pointer-events: none;
}
.tile > svg { filter: drop-shadow(0 1px 0 var(--tile-line)); }
.tile.blocked { filter: brightness(.9) saturate(.78); }
.tile.free:hover {
  filter: brightness(1.035);
  box-shadow: inset 0 1px 0 var(--tile-line), 0 4px 0 var(--tile-side),
    0 6px 0 var(--tile-foot), 1px 12px 13px var(--tile-shadow);
}
.tile.selected, .tile.selected:hover {
  background: var(--tile-selected); border: 2px solid var(--tile-select-border);
  box-shadow: inset 0 1px 0 var(--tile-line), 0 4px 0 var(--tile-select-side),
    0 6px 0 var(--tile-select-foot), 0 0 0 3px var(--tile-inlay), 0 12px 18px var(--tile-shadow);
}
.tile.hinted { border: 2px solid var(--gold); }
@keyframes hintPulse {
  50% { box-shadow: inset 0 1px 0 var(--tile-line), 0 4px 0 var(--tile-side),
    0 6px 0 var(--tile-foot), 0 0 0 5px var(--tile-inlay); }
}
.daily-card {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  box-shadow: 0 9px 22px var(--tile-shadow);
}
.daily-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--scene) center 68% / cover; opacity: .12;
}
.daily-card-top > span:last-child, .daily-card p { color: #f4f2e2b8; }
.next-reward { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-glass); }
.reward-icon { color: var(--gold); border-color: var(--line); }

/* Collection cards show the actual surface, face colors, and scenery of each skin. */
dialog { background: var(--panel); border-color: var(--line); }
.themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0 28px; }
.theme-choice {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  border: 1px solid var(--line); border-radius: 13px; text-align: left;
  overflow: hidden; background: var(--panel); position: relative;
  box-shadow: 0 3px 8px #2a42320a; transition: box-shadow .2s, translate .2s;
}
.theme-choice:last-child { grid-column: 1 / -1; }
.theme-choice:hover { translate: 0 -2px; box-shadow: 0 6px 16px var(--tile-shadow); }
.theme-choice.selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.skin-preview {
  height: 107px; width: 100%; position: relative; display: block; overflow: hidden;
  background-color: var(--board); background-image: var(--scene);
  background-size: cover; background-position: center 74%;
}
.theme-choice:last-child .skin-preview { background-position: center 58%; }
.skin-preview::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #fff0, #fff1, #fff0);
}
.skin-badge {
  position: absolute; top: 9px; right: 9px; z-index: 1;
  border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center;
  color: var(--accent); background: var(--panel-glass); border: 1px solid var(--line);
}
.skin-badge .icon { height: 13px; width: 13px; }
.preview-tile {
  position: absolute; width: 45px; height: 59px; left: calc(50% - 34px); top: 20px;
  border: 1px solid var(--tile-border); border-radius: 6px; padding: 5px;
  background: linear-gradient(140deg, var(--tile-top), var(--tile-bottom));
  box-shadow: inset 0 1px 0 var(--tile-line), 0 3px 0 var(--tile-side), 0 5px 0 var(--tile-foot), 0 9px 12px var(--tile-shadow);
  transform: rotate(-14deg);
}
.preview-tile::before { content: ''; position: absolute; inset: 3px; border: 1px solid var(--tile-inlay); border-radius: 3px; }
.preview-tile + .preview-tile { top: 28px; left: calc(50% + 1px); transform: rotate(11deg); }
.preview-tile > svg { height: 100%; width: 100%; }
.skin-caption { display: flex; flex-direction: column; gap: 5px; padding: 12px 13px; }
.skin-caption b { font-size: 11px; font-weight: 550; line-height: 1.3; color: var(--ink); }
.skin-caption small { font-size: 9px; color: var(--muted); line-height: 1.4; }
.skin-material { position: absolute; left: 10px; bottom: 8px; font-size: 7px; letter-spacing: .6px; text-transform: uppercase; color: var(--ink); opacity: .75; }
.theme-choice:last-child .skin-material { left: 14px; bottom: 12px; }
.achievement { background: var(--soft); }
.achievement.done { background: var(--soft); border: 1px solid var(--line); }
.level-card { background: var(--soft); }
.level-card.current { background: var(--soft); }
.example-tile { background: linear-gradient(140deg, var(--tile-top), var(--tile-bottom)); border-color: var(--tile-border); box-shadow: 0 4px 0 var(--tile-foot); }

@media (max-width: 720px) {
  .garden-scene { background-position: 58% center; }
  .header { background: linear-gradient(180deg, var(--panel-glass), #ffffff00); }
  .board-stage::before { background-position: 53% bottom; opacity: .36; }
  .board-stage::after { inset: 10px 8px 3px; border-radius: 11px; }
  .tile { border-radius: 7px; padding: 5px 6px; }
  .tile::before { inset: 2px; border-radius: 4px; opacity: .45; }
  .skin-preview { height: 103px; }
  .skin-caption { padding: 11px; }
  .skin-caption b { font-size: 10px; }
  .skin-caption small { font-size: 8px; }
  .skin-material { font-size: 6px; }
  .themes { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .tools button, .theme-choice { transition: none; }
  .tools button:hover:enabled, .theme-choice:hover { translate: none; }
}