:root {
  --paper: #f4ecdc;
  --ink: #24302b;
  --muted: #637069;
  --panel: #fffaf0;
  --tile: #fffdf6;
  --tile-edge: #c8ad7f;
  --accent: #176b5b;
  --accent-ink: #ffffff;
  --focus: #bd4b26;
  --shadow: rgba(50, 43, 31, .2);
  --tile-scale: 1;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background-color: var(--paper);
  background-image: linear-gradient(rgba(255,250,240,.74), rgba(244,236,220,.76)), url("garden-background.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
}

body[data-contrast="high"] {
  --paper: #ffffff; --ink: #000000; --muted: #222222; --panel: #ffffff;
  --tile: #ffffff; --tile-edge: #000000; --accent: #005a46; --shadow: rgba(0,0,0,.35);
}

body[data-contrast="high"] { background-image: none; }

body[data-contrast="dark"] {
  --paper: #14201c; --ink: #f8f2e7; --muted: #c3cec8; --panel: #1f302a;
  --tile: #f7eedb; --tile-edge: #b99a62; --accent: #62cfb5; --accent-ink: #10201b;
  --shadow: rgba(0,0,0,.5);
  background-image: linear-gradient(rgba(20,32,28,.9), rgba(20,32,28,.92)), url("garden-background.png");
}

button, input, select { font: inherit; }
button { cursor: pointer; }

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: #fff; color: #000; padding: 1rem; }
.skip-link:focus { top: 1rem; }

main { width: min(100%, 960px); margin: auto; padding: max(18px, env(safe-area-inset-top)) 18px 32px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.eyebrow { margin: 0 0 2px; color: var(--muted); font-size: .92rem; font-weight: 750; letter-spacing: .04em; }
h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 600; letter-spacing: -.035em; text-shadow: 0 2px 0 rgba(255,255,255,.7); }
.round-button, .close-button { min-height: 48px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--panel); }

.status-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 18px 0 10px; }
.status-panel p { margin: 0; }
.counter { flex: none; color: var(--muted); }
.game-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; flex: none; }
.layout-picker { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .92rem; font-weight: 800; }
.layout-picker select { min-height: 42px; padding: 0 32px 0 12px; border: 2px solid var(--accent); border-radius: 12px; color: var(--ink); background: var(--panel); }
.compact-button { min-height: 42px; padding: 0 14px; border: 2px solid var(--accent); border-radius: 12px; color: var(--accent); background: var(--panel); font-weight: 800; }

.board-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 7px 0 10px;
  scrollbar-color: var(--accent) transparent;
}

.board {
  position: relative;
  width: min(100%, 720px);
  flex: none;
  aspect-ratio: 1.42;
  margin: 0 auto;
  border: 3px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.2), transparent 52%),
    linear-gradient(145deg, #286f5f, #174d43 72%);
  box-shadow: inset 0 2px 22px rgba(0,0,0,.22), 0 12px 38px rgba(64, 50, 31, .18);
  overflow: hidden;
}

.board.stuck {
  border-color: #a9472f;
  box-shadow: inset 0 2px 22px rgba(0,0,0,.24), 0 0 0 5px rgba(169,71,47,.18), 0 12px 38px rgba(64,50,31,.18);
}

.celebration {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: hidden;
  background: rgba(20, 47, 39, .72);
  backdrop-filter: blur(5px);
}

.celebration-card {
  position: relative;
  z-index: 2;
  width: min(92vw, 430px);
  padding: 30px;
  border: 3px solid #c49b4b;
  border-radius: 28px;
  text-align: center;
  color: #26342e;
  background: #fff9e9;
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
  animation: celebration-arrive .55s cubic-bezier(.18,.8,.3,1.2) both;
}

.celebration-mark { margin: 0; color: #d46669; font-size: 4rem; line-height: .9; }
.celebration-card h2 { margin: 12px 0 8px; font-family: Georgia, serif; font-size: clamp(2rem, 8vw, 3rem); }
.celebration-card p:not(.celebration-mark) { margin: 0 0 22px; font-size: 1.08rem; }
.celebration-card button { min-height: 52px; margin: 5px; padding: 0 20px; border: 2px solid var(--accent); border-radius: 14px; color: var(--accent); background: #fffdf7; font-weight: 800; }
.celebration-card button.primary { color: var(--accent-ink); background: var(--accent); }
.celebration-petal { position: absolute; top: -12%; width: 15px; height: 10px; border-radius: 70% 20% 70% 30%; background: var(--petal); animation: celebration-fall var(--fall-time) linear var(--delay) forwards; }

@keyframes celebration-arrive { from { opacity: 0; transform: translateY(25px) scale(.88); } }
@keyframes celebration-fall { to { transform: translate(var(--drift), 120vh) rotate(720deg); } }
body.reduce-motion .celebration-card { animation: none; }
body.reduce-motion .celebration-petals { display: none; }

.tile {
  position: absolute;
  width: 8.25%;
  height: 14.15%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid #ad8d59;
  border-radius: 14%;
  color: #202823;
  background:
    radial-gradient(circle at 24% 17%, rgba(255,255,255,.95), transparent 28%),
    linear-gradient(145deg, #fffef9 4%, #f6ecd6 88%);
  box-shadow: 2px 3px 0 #9a7543, 4px 6px 9px var(--shadow), inset 0 0 0 3px rgba(199,166,105,.18);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 5.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  transition: transform .14s ease, filter .14s ease, opacity .18s ease;
}

.tile-glyph {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  line-height: .92;
}

.tile-glyph { font-size: clamp(1.1rem, 3.5vw, 2.35rem); }
.shorthand-face.character .tile-glyph,
.shorthand-face.dot .tile-glyph,
.shorthand-face.bamboo .tile-glyph {
  max-width: 92%;
  font-size: clamp(.72rem, 2.05vw, 1.38rem);
  letter-spacing: -.1em;
  transform: translateX(-.04em);
}

.character-face {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .02em;
  color: #233e70;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", serif;
  font-size: clamp(.72rem, 2.05vw, 1.38rem);
  font-weight: 900;
  white-space: nowrap;
}
.character-face .wan-mark { color: #a9342d; font-size: .82em; }

.pip-face,
.bamboo-face {
  position: relative;
  z-index: 1;
  display: grid;
  width: 68%;
  height: 72%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
}

.pip {
  width: clamp(4px, 1.05vw, 9px);
  aspect-ratio: 1;
  border: max(1px, .12vw) solid currentColor;
  border-radius: 50%;
  color: #176c5a;
  background: radial-gradient(circle, #fff8e9 0 20%, currentColor 23% 40%, transparent 44%);
}
.pip:nth-child(3n+1) { color: #276a99; }
.pip:nth-child(4n) { color: #b53a32; }
.pip-count-1 .pip { grid-area: 2 / 2; width: clamp(10px, 2vw, 17px); color: #b53a32; }
.pip-count-2 .pip:first-child { grid-area: 1 / 1; }
.pip-count-2 .pip:last-child { grid-area: 3 / 3; }
.pip-count-3 .pip:nth-child(1) { grid-area: 1 / 1; }
.pip-count-3 .pip:nth-child(2) { grid-area: 2 / 2; color: #b53a32; }
.pip-count-3 .pip:nth-child(3) { grid-area: 3 / 3; }
.pip-count-4 .pip:nth-child(1), .pip-count-5 .pip:nth-child(1) { grid-area: 1 / 1; }
.pip-count-4 .pip:nth-child(2), .pip-count-5 .pip:nth-child(2) { grid-area: 1 / 3; }
.pip-count-4 .pip:nth-child(3), .pip-count-5 .pip:nth-child(3) { grid-area: 3 / 1; }
.pip-count-4 .pip:nth-child(4), .pip-count-5 .pip:nth-child(4) { grid-area: 3 / 3; }
.pip-count-5 .pip:nth-child(5) { grid-area: 2 / 2; color: #b53a32; }

.bamboo-stick {
  width: clamp(3px, .55vw, 6px);
  height: 78%;
  border-radius: 45%;
  background: repeating-linear-gradient(to bottom, #17725b 0 27%, #f5ead4 28% 36%, #17725b 37% 64%, #f5ead4 65% 73%, #17725b 74%);
  transform: rotate(var(--lean, 0deg));
}
.bamboo-stick:nth-child(3n) { --lean: 5deg; background-color: #b93f35; filter: hue-rotate(115deg) saturate(1.4); }
.bamboo-bird { position: relative; z-index: 1; color: #1a715b; font-family: "Microsoft YaHei", serif; font-size: clamp(1rem, 3vw, 2rem); font-weight: 900; text-shadow: 1px 1px 0 #c34b39; }

.tile::after {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(151, 112, 56, .2);
  border-radius: 10%;
  pointer-events: none;
}

.tile.character { color: #243f72; }
.tile.dot { color: #285d87; }
.tile.bamboo { color: #21705c; }
.tile.wind { color: #224f47; }
.tile.dragon { color: #b23d32; }
.tile.dragon[data-symbol="發"] { color: #16705b; }
.tile.dragon[data-symbol="白"] { color: #35463f; }
.tile.flower { color: #815391; }
.tile.season { color: #b05c32; }

.accessible-face {
  border-color: #26342e;
  background: #fffef8;
  box-shadow: 2px 3px 0 #6f6047, 4px 6px 9px var(--shadow), inset 0 0 0 3px rgba(33,48,42,.12);
}
.accessible-face:not(:disabled) { outline: 2px solid rgba(255,255,255,.78); outline-offset: -4px; }
.accessible-face:disabled { filter: grayscale(.55) contrast(1.08); opacity: .76; }
.accessible-face .character-face,
.accessible-face .tile-glyph,
.accessible-face .bamboo-bird { transform: scale(1.08); }
.readability-marker {
  position: absolute;
  z-index: 3;
  top: 3px;
  left: 3px;
  min-width: 1.25em;
  padding: 1px 2px;
  border: 1px solid #26342e;
  border-radius: 4px;
  color: #111b17;
  background: rgba(255,255,255,.94);
  font-family: Arial, sans-serif;
  font-size: clamp(.42rem, .9vw, .68rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
}

.tile:hover:not(:disabled) { transform: translateY(-3px); }
.tile:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.tile:disabled { cursor: default; filter: grayscale(.7) opacity(.7); }
.tile.selected { outline: 5px solid var(--focus); outline-offset: -5px; transform: translateY(-4px); }
.tile.hint {
  outline: 5px solid #ffd24a;
  outline-offset: -3px;
  filter: brightness(1.12) saturate(1.18) !important;
  box-shadow: 0 0 0 5px rgba(255,210,74,.42), 0 0 24px 9px rgba(255,210,74,.72), 3px 5px 0 #9a7543;
  animation: hint-pulse .65s ease-in-out 4;
}
.tile.hint::before {
  content: "HINT";
  position: absolute;
  z-index: 5;
  top: 2px;
  right: 2px;
  padding: 2px 3px;
  border: 1px solid #2c260f;
  border-radius: 3px;
  color: #171407;
  background: #ffd24a;
  font-family: Arial, sans-serif;
  font-size: clamp(.32rem, .7vw, .52rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}
.tile.removing { opacity: 0; transform: scale(.7); }

.bloom {
  position: absolute;
  z-index: 60;
  width: 15px;
  height: 10px;
  margin: -4px 0 0 -6px;
  border-radius: 70% 20% 70% 30%;
  background: var(--petal, #ec8e91);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  pointer-events: none;
  animation: bloom-out 1250ms cubic-bezier(.18,.75,.25,1) forwards;
}

@keyframes bloom-out {
  0% { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--spin)); }
}

@keyframes hint-pulse {
  50% {
    transform: translateY(-4px) scale(1.08);
    outline-color: #fff1a8;
    box-shadow: 0 0 0 8px rgba(255,210,74,.65), 0 0 30px 12px rgba(255,210,74,.82), 3px 5px 0 #9a7543;
  }
}
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; }
body.reduce-motion .bloom:not(.stationary-bloom) { display: none; }
.stationary-bloom {
  display: grid;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  place-items: center;
  border-radius: 50%;
  color: var(--petal);
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--petal) 45%, transparent);
  font-size: 28px;
  animation: none;
}

.controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px auto; max-width: 720px; }
.controls button { min-height: 54px; border: 2px solid var(--accent); border-radius: 14px; color: var(--accent); background: var(--panel); font-weight: 800; }
.controls button:disabled { opacity: .45; cursor: not-allowed; }
.controls .primary { color: var(--accent-ink); background: var(--accent); }
.help { max-width: 720px; margin: 16px auto 0; padding: 14px 18px; border-radius: 14px; background: var(--panel); }
.help summary { cursor: pointer; font-weight: 800; }
.help p { line-height: 1.55; }
.progress-panel { max-width: 720px; margin: 12px auto 0; padding: 14px 18px; border-radius: 14px; background: var(--panel); }
.progress-panel > summary { cursor: pointer; font-weight: 800; }
.progress-count { float: right; color: var(--muted); font-size: .9rem; }
.progress-content h2 { margin: 22px 0 10px; font-family: Georgia, serif; font-size: 1.25rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.section-heading select { min-height: 40px; border: 2px solid var(--accent); border-radius: 10px; color: var(--ink); background: var(--panel); }
.statistics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.stat-card { padding: 12px; border-radius: 12px; text-align: center; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.stat-card strong { display: block; font-family: Georgia, serif; font-size: 1.45rem; }
.stat-card span { color: var(--muted); font-size: .78rem; }
.challenge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.achievement-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.progress-card { min-height: 92px; padding: 12px; border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.progress-card.complete { border-color: #b68a35; background: color-mix(in srgb, #edcb72 18%, var(--panel)); }
.progress-card.locked { opacity: .68; }
.progress-card h3 { margin: 0 0 5px; font-size: .94rem; }
.progress-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.progress-card .badge-mark { display: block; margin-bottom: 5px; font-size: 1.35rem; }
.achievement-card { position: relative; display: grid; min-height: 104px; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; overflow: hidden; }
.achievement-card .badge-mark {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0;
  place-items: center;
  border: 3px solid #817d72;
  border-radius: 50%;
  color: #77746b;
  background: linear-gradient(145deg, #d9d5ca, #aaa69b);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.28);
  font-size: 1.55rem;
}
.achievement-card.complete .badge-mark { border-color: #9b6f19; color: #563b09; background: linear-gradient(145deg, #ffe59a, #c9952d); }
.achievement-card.category-1.complete .badge-mark { border-color: #737b85; color: #26323a; background: linear-gradient(145deg, #eef4f7, #99a9b3); }
.achievement-card.category-2.complete .badge-mark { border-color: #347263; color: #173e35; background: linear-gradient(145deg, #bde8d8, #58a891); }
.achievement-card.category-3.complete .badge-mark { border-color: #935849; color: #542a21; background: linear-gradient(145deg, #f5c2ad, #ca755b); }
.achievement-card.category-4.complete .badge-mark { border-color: #66558b; color: #342750; background: linear-gradient(145deg, #d9cef2, #9480c1); }
.achievement-copy h3 { margin: 0 0 4px; }
.achievement-date { display: block; margin-top: 6px; color: var(--muted); font-size: .72rem; font-weight: 800; }

.achievement-toast {
  position: fixed;
  z-index: 400;
  right: 18px;
  bottom: 18px;
  display: grid;
  width: min(360px, calc(100vw - 36px));
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 2px solid #bd8b2c;
  border-radius: 15px;
  color: #f9f4e7;
  background: #19372f;
  box-shadow: 0 15px 48px rgba(0,0,0,.4);
  animation: toast-in .38s ease-out both;
}
.achievement-toast strong, .achievement-toast span span { display: block; }
.achievement-toast strong { color: #f2cf72; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.achievement-toast span span { margin-top: 3px; }
.toast-trophy { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; color: #5b3d08; background: linear-gradient(145deg, #ffe59a, #c9952d); font-size: 1.5rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(20px); } }

dialog { width: min(92vw, 480px); padding: 0; border: 0; border-radius: 24px; color: var(--ink); background: var(--panel); box-shadow: 0 20px 80px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(14, 24, 20, .62); }
dialog form { padding: 24px; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.dialog-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 1.7rem; }
dialog label:not(.check-row) { display: grid; gap: 10px; margin-top: 24px; font-weight: 800; }
dialog input[type="range"], dialog select { width: 100%; min-height: 46px; }
.range-heading { display: flex; justify-content: space-between; gap: 1rem; }
.range-heading output { color: var(--muted); font-variant-numeric: tabular-nums; }
.check-row { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-weight: 800; }
.check-row input { width: 24px; height: 24px; }
.settings-note { color: var(--muted); line-height: 1.45; }
.settings-action, .dialog-primary { width: 100%; min-height: 50px; margin-top: 18px; border: 2px solid var(--accent); border-radius: 13px; color: var(--accent-ink); background: var(--accent); font-weight: 900; }
.version-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.version-panel p { margin: 0; color: var(--muted); font-size: .88rem; }
.version-panel button { min-height: 42px; border: 2px solid var(--accent); border-radius: 11px; color: var(--accent); background: var(--panel); font-weight: 800; }
.update-banner { position: fixed; z-index: 500; left: 50%; bottom: 18px; display: grid; width: min(660px, calc(100vw - 28px)); grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 15px 18px; border: 2px solid #d0a64d; border-radius: 16px; color: #f9f4e7; background: #19372f; box-shadow: 0 18px 60px rgba(0,0,0,.45); transform: translateX(-50%); }
.update-banner p { margin: 3px 0 0; color: #dbe6df; font-size: .84rem; }
.update-banner button { min-height: 42px; padding: 0 14px; border: 2px solid #f2cf72; border-radius: 10px; color: #fff7df; background: transparent; font-weight: 850; }
.update-banner #installUpdateButton { color: #20352e; background: #f2cf72; }
@media (max-width: 560px) { .update-banner { grid-template-columns: 1fr 1fr; } .update-banner > div { grid-column: 1 / -1; } }
.tutorial-content { padding: 28px; }
.tutorial-content h2 { font-family: Georgia, serif; font-size: 1.8rem; }
.tutorial-content p, .tutorial-content li { line-height: 1.55; }
.tutorial-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 22px; }
.tutorial-actions button { min-height: 48px; border: 2px solid var(--accent); border-radius: 12px; color: var(--accent); background: var(--panel); font-weight: 800; }
.tutorial-actions .dialog-primary { margin: 0; color: var(--accent-ink); background: var(--accent); }
body[data-hand="left"] .controls { margin-left: 0; margin-right: auto; max-width: 560px; }
body[data-hand="right"] .controls { margin-left: auto; margin-right: 0; max-width: 560px; }

.tile-preview {
  display: grid;
  max-width: 720px;
  min-height: 74px;
  margin: 0 auto 12px;
  padding: 10px 14px;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent));
}
.tile-preview p { margin: 3px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.35; }
.preview-face { display: grid; width: 52px; height: 58px; place-items: center; border: 2px solid #cfb989; border-radius: 9px; color: #19372f; background: #fffaf0; box-shadow: 0 4px 0 #b7a373; font-family: Georgia, serif; font-size: 1.55rem; font-weight: 800; }
.journey-panel { margin: 18px 0; padding: 16px; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, var(--panel)), var(--panel)); }
.journey-panel .eyebrow, .journey-panel h2 { margin: 0; }
.journey-panel progress { width: 100%; height: 14px; accent-color: var(--accent); }
.garden-scene { display: grid; min-height: 118px; margin: 14px 0 10px; place-items: center; align-content: center; gap: 8px; border-radius: 14px; text-align: center; color: #183c31; background: linear-gradient(#dcefdc, #b9dab7 70%, #8cb177 70%); overflow: hidden; }
.garden-scene span { font-size: clamp(1.8rem, 6vw, 3rem); letter-spacing: .12em; }
.garden-scene strong { padding: 4px 9px; border-radius: 20px; background: rgba(255,255,255,.75); font-size: .78rem; text-transform: capitalize; }
.garden-stage-2, .garden-stage-3, .garden-stage-4, .garden-stage-5 { background: linear-gradient(#cce8ec, #b9dab7 68%, #7da269 68%); }
.board-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0; }
.board-summary div { padding: 9px 5px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 9%, var(--panel)); text-align: center; }
.board-summary dt { color: var(--muted); font-size: .72rem; }
.board-summary dd { margin: 3px 0 0; font-family: Georgia, serif; font-size: 1.2rem; font-weight: 800; }
.save-slots { margin-top: 22px; padding: 12px; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 13px; }
.save-slots legend { padding: 0 6px; font-weight: 800; }
.slot-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot-buttons button { min-height: 58px; border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 10px; color: var(--ink); background: var(--panel); font-weight: 800; }
.slot-buttons button.active { color: var(--accent-ink); background: var(--accent); }
.slot-buttons span { display: block; margin-top: 3px; font-size: .7rem; opacity: .8; }
.changelog-body { max-height: 45vh; overflow: auto; }
.changelog-body li { margin: 10px 0; line-height: 1.45; }
.credits-list { max-height: 50vh; overflow: auto; }
.credits-list p { padding: 12px 0; margin: 0; line-height: 1.5; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.credits-list a { color: var(--accent); font-weight: 800; }
.achievement-tier { display: inline-block; margin-bottom: 4px; color: var(--accent); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.achievement-progress { display: grid; grid-template-columns: minmax(90px, 1fr) auto; gap: 8px; align-items: center; margin: 9px 0 5px; }
.achievement-progress progress { width: 100%; height: 10px; accent-color: var(--accent); }
.achievement-progress span { font-size: .72rem; font-weight: 800; white-space: nowrap; }
.achievement-card.tier-gold .badge-mark { color: #9b6a12; }
.achievement-card.tier-platinum .badge-mark { color: #466c72; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 0 0 2px rgba(70,108,114,.18); }
.corner-version { position: fixed; z-index: 40; right: 9px; bottom: 7px; padding: 4px 7px; border-radius: 8px; color: color-mix(in srgb, var(--ink) 65%, transparent); background: color-mix(in srgb, var(--panel) 82%, transparent); box-shadow: 0 2px 10px rgba(0,0,0,.08); font-size: .7rem; font-weight: 800; pointer-events: none; }
body[data-preset="motor"] .controls button,
body[data-preset="motor"] dialog button,
body[data-preset="motor"] .compact-button,
body[data-preset="motor"] .round-button { min-height: 58px; }

@media (max-width: 640px) {
  main { padding-inline: 10px; }
  .board { aspect-ratio: 1.2; border-radius: 20px; }
  .tile { width: 8.25%; height: 14.15%; border-radius: 12%; }
  .tile-glyph { font-size: clamp(.82rem, 4.9vw, 1.35rem); }
  .shorthand-face.character .tile-glyph,
  .shorthand-face.dot .tile-glyph,
  .shorthand-face.bamboo .tile-glyph { font-size: clamp(.64rem, 3.35vw, .92rem); }
  .character-face { font-size: clamp(.62rem, 3.25vw, .9rem); }
  .pip { width: clamp(3px, 1.65vw, 6px); }
  .pip-count-1 .pip { width: clamp(7px, 3vw, 11px); }
  .bamboo-stick { width: clamp(2px, .9vw, 4px); }
  .readability-marker { top: 2px; left: 2px; font-size: clamp(.34rem, 1.7vw, .52rem); }
  .controls { grid-template-columns: repeat(2, 1fr); }
  .challenge-grid, .achievement-grid { grid-template-columns: 1fr; }
  .statistics-grid { grid-template-columns: repeat(2, 1fr); }
  .status-panel { align-items: flex-start; font-size: .94rem; }
  .tile-preview { grid-template-columns: 48px 1fr; }
  .preview-face { width: 44px; height: 50px; }
  .board-summary { grid-template-columns: repeat(2, 1fr); }
  .slot-buttons { grid-template-columns: 1fr; }
  .game-options { align-items: flex-end; flex-direction: column; gap: 5px; }
  .layout-picker { flex-direction: column; align-items: flex-start; gap: 2px; }
  .layout-picker select { min-height: 40px; max-width: 145px; }
}
.support-form { display: grid; gap: .8rem; }
.support-form label { display: grid; gap: .35rem; font-weight: 700; }
.support-form input, .support-form textarea { box-sizing: border-box; width: 100%; font: inherit; padding: .7rem; border: 2px solid var(--jade); border-radius: .65rem; background: var(--paper); color: var(--ink); }
.support-form small, .optional { font-weight: 400; color: var(--muted); }
.bot-field { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.turnstile-slot { min-height: 65px; }