: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.webp");
  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.webp");
}

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; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.seasonal-garden-button { border-color: #d6aa58; color: #fff4cd; background: linear-gradient(145deg, #315e50, #694a2d); }
.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; }
#status { flex: 1 1 320px; min-height: 2.7em; align-content: center; }
.counter { flex: none; color: var(--muted); }
.game-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; flex: none; }
#fitBoardButton.active { color: var(--accent-ink); background: var(--accent); }
#fitBoardButton:focus-visible { outline: 4px solid color-mix(in srgb, var(--accent) 55%, white); outline-offset: 2px; }
.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; }
body.static-celebrations .celebration-card { animation: none; }
body.static-celebrations .celebration-petals { display: none; }

.tile {
  position: absolute;
  width: var(--board-tile-width, 8.25%);
  height: var(--board-tile-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); }
.match-ghost { position: absolute; z-index: 90 !important; pointer-events: none; animation: match-gather 620ms cubic-bezier(.2,.8,.2,1) forwards; }
.board.match-ripple::after { content: ""; position: absolute; z-index: 70; left: var(--ripple-x, 50%); top: var(--ripple-y, 50%); width: 30px; height: 30px; margin: -15px; border: 4px solid color-mix(in srgb, var(--petal, #ef8f9b) 75%, white); border-radius: 50%; pointer-events: none; animation: board-ripple .8s ease-out forwards; }
.board.last-pair { box-shadow: inset 0 0 35px rgba(255,225,120,.24), 0 0 0 3px color-mix(in srgb, #ffe078 55%, var(--accent)); animation: last-pair-breathe 1.8s ease-in-out infinite; }
.board.board-milestone { animation: garden-milestone 1.1s ease-out; }
.board.dealing .tile { opacity: 0; animation: tile-deal .48s cubic-bezier(.2,.75,.25,1) forwards; animation-delay: min(calc(var(--deal-index) * 18ms), 700ms); }
.game-moment { position: fixed; z-index: 350; left: 50%; top: max(18px, env(safe-area-inset-top)); width: max-content; max-width: calc(100vw - 30px); padding: 10px 17px; border: 2px solid #d5ad52; border-radius: 999px; color: #fff9e8; background: rgba(24,58,50,.96); box-shadow: 0 10px 35px rgba(0,0,0,.3); font-family: Georgia, serif; font-weight: 800; text-align: center; transform: translateX(-50%); animation: moment-in 2.4s ease both; }
.challenge-grid .progress-card.complete::after { content: "✓ DAILY"; position: absolute; right: 7px; top: 7px; padding: 3px 6px; border: 2px solid #8d6421; border-radius: 6px; color: #704c16; background: #ffebad; font-size: .58rem; font-weight: 900; letter-spacing: .08em; transform: rotate(4deg); }
.challenge-grid .progress-card { position: relative; overflow: hidden; }
@keyframes match-gather { 0% { opacity: 1; transform: translate(0,0) scale(1); } 58% { opacity: 1; transform: translate(var(--gather-x),var(--gather-y)) scale(1.1) rotate(var(--gather-rotate)); } 100% { opacity: 0; transform: translate(var(--gather-x),var(--gather-y)) scale(.3) rotate(var(--gather-rotate)); filter: blur(3px); } }
@keyframes board-ripple { to { opacity: 0; transform: scale(9); } }
@keyframes last-pair-breathe { 50% { box-shadow: inset 0 0 48px rgba(255,225,120,.38), 0 0 18px rgba(255,224,120,.32); } }
@keyframes garden-milestone { 35% { filter: brightness(1.18) saturate(1.2); transform: scale(1.008); } }
@keyframes tile-deal { from { opacity: 0; transform: translateY(-18px) scale(.82); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes moment-in { 0%,100% { opacity: 0; transform: translate(-50%,-12px) scale(.94); } 15%,82% { opacity: 1; transform: translate(-50%,0) scale(1); } }

.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; }
body.reduce-motion .match-ghost, body.reduce-motion .board.match-ripple::after { display: none; }
body.reduce-motion .board.last-pair, body[data-effects="off"] .board.last-pair { animation: none; }
body[data-effects="off"] .bloom, body[data-effects="off"] .match-ghost, body[data-effects="off"] .game-moment, body[data-effects="off"] .board.match-ripple::after { 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; }
.achievements-dialog { width: min(920px, calc(100% - 24px)); max-width: 920px; max-height: min(88vh, 900px); }
.achievements-dialog-content { padding: 24px; }
.achievements-dialog .progress-panel { max-width: none; margin: 0; padding: 0; background: transparent; }
.achievements-dialog .progress-panel > summary { display: none; }
.statistics-dialog { width: min(760px, calc(100% - 24px)); max-width: 760px; }
.statistics-dialog-content { padding: 24px; }
.statistics-intro { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
#achievementsButton { display: flex; min-height: 68px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; text-align: center; }
.achievement-button-label { display: block; }
.achievement-button-count { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; color: #fff; background: #183a32; font-size: .78rem; font-weight: 900; line-height: 1.2; }
body[data-contrast="high"] .achievement-button-count { outline: 2px solid currentColor; background: #000; }
.celebration .board-summary { color: #26342e; }
.celebration .board-summary dt { color: #56655e; }
.celebration .board-summary dd { color: #26342e; }
.celebration:not([data-seasonal="true"]) .board-summary div { border: 1px solid #d9ddd4; background: #eef0e9; }
.celebration:not([data-seasonal="true"]) .board-summary dt { color: #53635b; }
.celebration:not([data-seasonal="true"]) .board-summary dd { color: #20312a; }
.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: 16px 12px; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); 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; gap: 20px; }
.achievement-tier-group { display: grid; gap: 10px; }
.achievement-group-title { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin: 0; padding: 10px 8px; border: 2px solid color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 10px; cursor: pointer; font-family: Georgia, serif; font-size: 1.12rem; }
.achievement-group-title:hover { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.achievement-group-title:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }
.achievement-group-count { color: var(--muted); font-family: system-ui, sans-serif; font-size: .8rem; font-weight: 800; }
.achievement-tier-group:not([open]) .achievement-group-title { margin-bottom: 0; }
.achievement-tier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#achievementFilter { width: min(100%, 14rem); min-width: 10rem; min-height: 42px; padding: 0 34px 0 12px; align-self: end; }
.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.tier-welcome.complete .badge-mark { border-color: #347263; color: #173e35; background: linear-gradient(145deg, #c9eee1, #58a891); }
.achievement-card.tier-bronze.complete .badge-mark { border-color: #935849; color: #542a21; background: linear-gradient(145deg, #f5c2ad, #ca755b); }
.achievement-card.tier-silver.complete .badge-mark { border-color: #737b85; color: #26323a; background: linear-gradient(145deg, #eef4f7, #99a9b3); }
.achievement-card.tier-gold.complete .badge-mark { border-color: #9b6f19; color: #563b09; background: linear-gradient(145deg, #ffe59a, #c9952d); }
.achievement-card.tier-platinum.complete .badge-mark { border-color: #52758a; color: #173845; background: linear-gradient(145deg, #dff6f7, #79aeb8); }
.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; }
.achievement-toast.revealing { animation: trophy-card-reveal .58s cubic-bezier(.2,.8,.2,1) both; }
.achievement-toast.revealing .toast-trophy { animation: trophy-medal-reveal .85s cubic-bezier(.2,.9,.2,1) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(20px); } }
@keyframes trophy-card-reveal { from { opacity: 0; transform: translateY(28px) rotate(1deg) scale(.94); } }
@keyframes trophy-medal-reveal { 0% { opacity: 0; transform: rotate(-35deg) scale(.3); } 65% { transform: rotate(8deg) scale(1.16); } }
.celebration[data-season="spring"] .celebration-card { box-shadow: 0 0 0 5px rgba(239,143,155,.25), 0 24px 80px rgba(0,0,0,.42); }
.celebration[data-season="summer"] .celebration-card { box-shadow: 0 0 0 5px rgba(240,185,79,.28), 0 24px 80px rgba(0,0,0,.42); }
.celebration[data-season="autumn"] .celebration-card { box-shadow: 0 0 0 5px rgba(214,106,53,.28), 0 24px 80px rgba(0,0,0,.42); }
.celebration[data-season="winter"] .celebration-card { box-shadow: 0 0 0 5px rgba(216,241,243,.3), 0 24px 80px rgba(0,0,0,.42); }
.celebration[data-seasonal="true"] .celebration-card { color: #fffaf0; border-color: #e0bc69; background: linear-gradient(155deg, #285f52, #173b34 62%, #253c34); }
.celebration[data-seasonal="true"][data-season="spring"] .celebration-card { border-color: #eda8bd; background: linear-gradient(155deg, #356f60, #493b4b); }
.celebration[data-seasonal="true"][data-season="summer"] .celebration-card { border-color: #f0c95f; background: linear-gradient(155deg, #276557, #41482e); }
.celebration[data-seasonal="true"][data-season="autumn"] .celebration-card { border-color: #dc944f; background: linear-gradient(155deg, #315b50, #49352f); }
.celebration[data-seasonal="true"][data-season="winter"] .celebration-card { border-color: #b8e0e7; background: linear-gradient(155deg, #315b64, #39455c); }
.celebration[data-seasonal="true"] .celebration-mark { color: #ffe29a; }
.celebration[data-seasonal="true"] .board-summary div { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.12); }
.celebration[data-seasonal="true"] .board-summary dt { color: #e4eee8; }
.celebration[data-seasonal="true"] .board-summary dd { color: #fff; }
.celebration[data-seasonal="true"] .celebration-card button:not(.primary) { color: #fff; border-color: #8bd7c4; background: transparent; }
.celebration[data-seasonal="true"] .celebration-card button.primary { color: #10201b; border-color: #69d0b7; background: #69d0b7; }

dialog { box-sizing: border-box; width: min(92vw, 480px); max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px); max-height: calc(var(--mobile-vh, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); margin: auto; padding: 0; border: 0; border-radius: 24px; color: var(--ink); background: var(--panel); box-shadow: 0 20px 80px rgba(0,0,0,.35); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
dialog::backdrop { background: rgba(14, 24, 20, .62); }
.player-notice-dialog { width: min(92vw, 540px); }
.player-notice-panel { display: grid; gap: 16px; padding: clamp(22px, 5vw, 32px); border-top: 5px solid var(--accent); background: radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 34%), var(--panel); }
.player-notice-panel h2, .player-notice-panel p { margin: 0; }
.player-notice-message { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.player-notice-ends { color: var(--muted); font-size: .92rem; }
.notice-unread-mark { display: inline-block; width: .55rem; height: .55rem; margin-left: .28rem; border-radius: 50%; background: #fff0a3; box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel) 65%, transparent); }
.notice-menu-status { color: var(--muted); font-size: .82em; }
.player-notice-button { white-space: nowrap; }
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; }
.install-web-app { margin-top: 18px; padding: 16px; border: 2px solid color-mix(in srgb, var(--accent) 58%, var(--panel)); border-radius: 15px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.install-web-app h3, .install-web-app p { margin-top: 0; }
.install-web-app .settings-action { margin-top: 8px; }
.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-accessibility-card { margin-top: 20px; padding: 16px; border: 2px solid var(--accent); border-radius: 15px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.tutorial-accessibility-card .eyebrow, .tutorial-accessibility-card h3 { margin: 0; }
.tutorial-accessibility-card h3 { margin-top: 3px; font-family: Georgia, serif; font-size: 1.25rem; }
.tutorial-accessibility-card p:not(.eyebrow) { margin: 9px 0 13px; }
.tutorial-accessibility-card button { width: 100%; min-height: 50px; border: 2px solid var(--accent); border-radius: 12px; color: var(--accent-ink); background: var(--accent); font-weight: 900; }
.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; overflow: hidden; border: 2px solid #cfb989; border-radius: 9px; color: #19372f; background: #fffaf0; box-shadow: 0 4px 0 #b7a373; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 800; line-height: 1; white-space: nowrap; word-break: keep-all; }
.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)); }
.seasonal-collection { position: relative; margin: 0 0 18px; padding: 16px; border: 2px solid #a86f45; border-radius: 18px; color: #fff8e9; background: linear-gradient(160deg, #182e2d 0%, #3e302b 58%, #6d3e2b 100%); overflow: hidden; }
.seasonal-garden-dialog { width: min(980px, calc(100% - 24px)); max-width: 980px; max-height: min(90vh, 960px); }
.seasonal-garden-dialog-content { padding: 24px; }
.seasonal-garden-dialog .seasonal-collection { margin: 0; }
.seasonal-collection h2, .seasonal-collection .eyebrow { margin: 0; color: #fff8e9; }
.seasonal-collection progress { width: 100%; height: 14px; accent-color: #e49a55; }
.seasonal-free-promise { padding: 9px 12px; border-left: 4px solid #ffd27c; border-radius: 7px; color: #fff5d8; background: rgba(13,24,23,.45); }
.seasonal-progress-summary { display: grid; gap: 8px; margin: 16px 0 10px; padding: 14px; border: 1px solid rgba(255,235,197,.35); border-radius: 14px; background: rgba(5,22,21,.27); }
.seasonal-progress-summary h3, .seasonal-progress-summary p { margin: 0; }
.seasonal-progress-summary .section-heading { align-items: baseline; }
.seasonal-progress-summary .section-heading strong { color: #ffd27c; font-variant-numeric: tabular-nums; }
.seasonal-details { margin-top: 10px; border: 1px solid rgba(255,235,197,.32); border-radius: 13px; background: rgba(5,22,21,.26); }
.seasonal-details summary { display: flex; min-height: 48px; align-items: center; padding: 0 14px; cursor: pointer; color: #fff8e9; font-weight: 850; }
.seasonal-details summary::marker { color: #ffd27c; }
.seasonal-details[open] summary { border-bottom: 1px solid rgba(255,235,197,.24); }
.seasonal-details-content { padding: 4px 14px 14px; }
.seasonal-details-content > h3 { margin: 14px 0 5px; }
.seasonal-help-details .seasonal-calendar-status { margin-top: 10px; }
.seasonal-sky { position: relative; height: 105px; margin: 12px 0; border: 1px solid rgba(255,226,174,.35); border-radius: 14px; background: radial-gradient(circle at 76% 28%, rgba(255,221,145,.18), transparent 18%), linear-gradient(#142a31, #49332e); overflow: hidden; }
.seasonal-sky::before, .seasonal-sky::after { position: absolute; z-index: 2; content: ""; pointer-events: none; opacity: 0; }
.seasonal-sky::before { top: -16px; left: 10%; width: 8px; height: 12px; border-radius: 80% 15% 80% 15%; background: #e49a55; box-shadow: 92px -18px #c2673f, 188px 5px #f0b15f, 286px -23px #b95135, 390px 2px #dd8a45, 510px -14px #c2673f; }
.seasonal-sky::after { left: 31%; bottom: 18px; width: 4px; height: 4px; border-radius: 50%; background: #fff4a8; box-shadow: 78px -34px #fff4a8, 164px -10px #ffe985, 258px -45px #fff4a8, 348px -19px #ffe985; filter: drop-shadow(0 0 5px #ffe985); }
.seasonal-moon { position: absolute; top: 14px; right: 15%; width: 48px; height: 48px; border-radius: 50%; background: #ffe3a0; box-shadow: 0 0 24px rgba(255,216,126,.55); }
.seasonal-branch { position: absolute; left: -10px; bottom: 17px; width: 58%; height: 8px; border-radius: 99px; background: #311d19; transform: rotate(-7deg); }
.seasonal-branch::before, .seasonal-branch::after { position: absolute; content: ""; width: 24px; height: 17px; border-radius: 80% 15% 80% 15%; background: #c2673f; box-shadow: 38px -16px #dd8a45, 78px 4px #a84332, 118px -20px #e7a34d, 158px 2px #b95135, 198px -14px #d87840; }
.seasonal-branch::before { left: 26px; top: -10px; }.seasonal-branch::after { left: 48px; top: 3px; transform: scaleY(-1); }
.seasonal-lantern { position: absolute; left: 22%; top: 18px; width: 28px; height: 42px; border: 3px solid #873c2b; border-radius: 9px; background: #f3a74e; box-shadow: 0 0 18px rgba(255,174,78,.6); }
.seasonal-lantern::before { position: absolute; top: -21px; left: 11px; width: 2px; height: 18px; content: ""; background: #d7aa72; }
.seasonal-pin-intro { margin-top: -5px; color: #f1d4ad; font-size: .88rem; }
.weekly-event-card { display: grid; gap: 10px; margin: 14px 0; padding: 16px; border: 1px solid rgba(255,235,197,.48); border-radius: 15px; background: radial-gradient(circle at 92% 8%, rgba(255,220,126,.18), transparent 28%), rgba(5,22,21,.42); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.weekly-event-card h3, .weekly-event-card p { margin: 0; }
.weekly-event-card .eyebrow { color: #f1d4ad; }
.weekly-event-countdown { padding: 9px 11px; border-radius: 9px; color: #fff8e9; background: rgba(0,0,0,.22); font-variant-numeric: tabular-nums; font-weight: 850; text-align: center; }
.weekly-reward-preview { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 10px; border: 1px solid rgba(255,235,197,.3); border-radius: 12px; background: rgba(255,255,255,.06); }
.weekly-reward-preview > span:last-child { display: grid; min-width: 0; gap: 3px; }
.weekly-reward-preview small { color: #f1d4ad; }
.weekly-reward-art { position: relative; display: grid; flex: 0 0 auto; width: 76px; height: 76px; place-items: center; }
.weekly-keepsake-svg { width: 72px; height: 72px; overflow: visible; filter: drop-shadow(0 1px 1px #5d361b) drop-shadow(0 5px 5px rgba(0,0,0,.32)); }
.weekly-keepsake-cabinet { margin-top: 16px; padding: 12px; border: 1px solid rgba(255,235,197,.32); border-radius: 14px; background: rgba(5,22,21,.3); }
.weekly-keepsake-cabinet summary { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; color: #fff8e9; font-weight: 850; }
.weekly-keepsake-cabinet summary #weeklyKeepsakeCount { margin-left: auto; padding: 3px 8px; border: 1px solid rgba(255,210,124,.52); border-radius: 999px; color: #ffe2a3; font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 360px) { .weekly-keepsake-cabinet summary { align-items: flex-start; flex-wrap: wrap; padding: 9px 0; } .weekly-keepsake-cabinet summary #weeklyKeepsakeCount { margin-left: 0; } }
.weekly-keepsakes { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 10px; margin-top: 12px; }
.weekly-keepsake { position: relative; display: grid; min-width: 0; min-height: 142px; padding: 11px 8px; place-items: center; align-content: start; gap: 4px; border: 1px solid rgba(255,235,197,.28); border-radius: 13px; text-align: center; background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(0,0,0,.22)); }
.weekly-keepsake.current { border-color: #ffd27c; box-shadow: inset 0 0 0 1px rgba(255,210,124,.2), 0 0 15px rgba(255,210,124,.12); }
.weekly-keepsake strong { max-width: 14ch; color: #fff9e7; font-family: Georgia,serif; font-size: .8rem; line-height: 1.15; }
.weekly-keepsake small { color: #f1d4ad; font-size: .67rem; line-height: 1.2; }
.weekly-keepsake-select { display: grid; width: 100%; min-height: 118px; padding: 0; place-items: center; align-content: start; gap: 4px; border: 0; border-radius: 10px; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.weekly-keepsake-select:focus-visible { outline: 3px solid #fff1a6; outline-offset: 2px; }
.weekly-keepsake-select:hover .weekly-keepsake-svg { transform: translateY(-2px); filter: saturate(1.08) drop-shadow(0 2px 1px #5d361b) drop-shadow(0 7px 7px rgba(0,0,0,.35)); }
.keepsake-detail-select { display: grid; width: 100%; min-width: 0; padding: 0; place-items: center; align-content: start; gap: 5px; border: 0; border-radius: 10px; color: inherit; background: transparent; font: inherit; text-align: inherit; cursor: pointer; }
.keepsake-detail-select:focus-visible { outline: 3px solid #fff1a6; outline-offset: 3px; }
.keepsake-detail-select:hover .keepsake-collection-art { transform: translateY(-2px); filter: saturate(1.06) brightness(1.03); }
.keepsake-collection-art { width: 72px; height: 72px; margin-bottom: 4px; transition: transform .2s ease, filter .2s ease; }
.keepsake-collection-art .weekly-keepsake-svg { width: 72px; height: 72px; }
body.reduce-motion .keepsake-collection-art { transition: none; }
.weekly-keepsake.locked { opacity: .7; }
.weekly-keepsake.locked .weekly-keepsake-svg { filter: grayscale(1) contrast(.8) drop-shadow(0 4px 4px rgba(0,0,0,.28)); }
.weekly-keepsake.locked .keepsake-lock { position: absolute; display: block; width: 18px; height: 15px; border: 3px solid #d5d8cf; border-radius: 4px; background: #3d4944; }
.weekly-keepsake.locked .keepsake-lock::before { position: absolute; left: 2px; top: -13px; width: 9px; height: 11px; border: 3px solid #d5d8cf; border-bottom: 0; border-radius: 8px 8px 0 0; content: ""; }
.weekly-keepsake-detail-dialog { width: min(720px, calc(100% - 24px)); max-width: 720px; max-height: min(90dvh, 780px); padding: 0; overflow: hidden auto; border-color: #c89b3b; color: #fff8e9; background: radial-gradient(circle at 50% 34%, rgba(56,129,101,.28), transparent 42%), linear-gradient(155deg, #102a22, #071b16); }
.weekly-keepsake-detail-content { display: grid; padding: 24px; gap: 14px; }
.weekly-keepsake-detail-art { display: grid; width: min(100%, 430px); aspect-ratio: 1.1; margin-inline: auto; place-items: center; border: 1px solid rgba(232,190,91,.4); border-radius: 24px; background: radial-gradient(circle, rgba(35,102,80,.55), rgba(4,24,18,.4) 66%); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.weekly-keepsake-detail-art .weekly-keepsake-svg { width: min(88%, 360px); height: auto; filter: drop-shadow(0 1px 1px #6a4216) drop-shadow(0 0 5px rgba(250,205,91,.55)) drop-shadow(0 14px 10px rgba(0,0,0,.42)); }
.weekly-keepsake-detail-description { max-width: 48ch; margin: 0 auto; color: #f1dfbd; font-size: 1rem; line-height: 1.55; text-align: center; }
.weekly-keepsake-detail-type { width: fit-content; margin: 0 auto; padding: 7px 12px; border: 1px solid rgba(255,218,117,.45); border-radius: 999px; color: #ffe09a; font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 560px) {
  .weekly-keepsake-detail-dialog { width: min(100% - 16px, 520px); max-height: calc(var(--mobile-vh, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); }
  .weekly-keepsake-detail-content { padding: 16px; }
  .weekly-keepsake-detail-art { width: min(100%, 390px); max-height: 52dvh; }
}
@media (max-width: 360px) {
  .weekly-keepsake-detail-content { padding: 12px; gap: 10px; }
  .weekly-keepsake-detail-art { width: 100%; max-height: 46dvh; border-radius: 18px; }
  .weekly-keepsake-detail-description { font-size: .92rem; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .weekly-keepsake-detail-content { grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.1fr); align-items: center; }
  .weekly-keepsake-detail-content .dialog-heading { grid-column: 1 / -1; }
  .weekly-keepsake-detail-art { grid-row: 2 / span 2; max-height: 48dvh; }
  .weekly-keepsake-detail-description { text-align: left; }
  .weekly-keepsake-detail-type { margin-left: 0; }
}
.seasonal-keepsakes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 13px; }
.seasonal-keepsake { position: relative; display: grid; min-height: 222px; padding: 18px 12px 14px; place-items: center; align-content: start; gap: 5px; border: 1px solid rgba(255,235,197,.32); border-radius: 16px; text-align: center; background: linear-gradient(155deg, rgba(255,255,255,.09), rgba(5,17,16,.38)); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 7px 18px rgba(0,0,0,.16); }
.seasonal-keepsake.current-season { border-color: rgba(255,224,154,.62); }
.founder-keepsake { border-color: rgba(245,207,112,.78); background: radial-gradient(circle at 50% 26%, rgba(246,201,92,.2), transparent 45%), linear-gradient(155deg, rgba(47,114,95,.58), rgba(15,43,37,.72)); }
.founder-keepsake .keepsake-pin { background: radial-gradient(circle at 30% 25%, #fff4b1, #276957 72%); }
.founder-keepsake .keepsake-pin::before { background: radial-gradient(circle, rgba(246,201,92,.48), transparent 68%); }
.founder-keepsake.reserved { opacity: .88; }
.founder-keepsake-svg { filter: drop-shadow(0 0 2px #fff0a2) drop-shadow(0 0 7px rgba(245,207,112,.76)) drop-shadow(0 6px 4px rgba(0,0,0,.38)); }
.founder-keepsake-claim { min-height: 38px; margin-top: 3px; padding: 7px 12px; border: 2px solid #ffe49a; border-radius: 10px; color: #18342d; background: #f5cf72; font-weight: 900; }
.keepsake-pin { position: relative; display: grid; width: 126px; height: 126px; margin-bottom: 4px; place-items: center; color: #fff9df; isolation: isolate; }
.keepsake-pin::before { position: absolute; inset: 14px; z-index: -1; border-radius: 50%; content: ""; background: radial-gradient(circle, rgba(255,238,178,.2), transparent 68%); filter: blur(8px); }
.keepsake-art { display: block; transform: translateY(-1px); }
.keepsake-svg { display: block; width: 112px; height: 112px; overflow: visible; filter: drop-shadow(0 0 1px #6f431e) drop-shadow(0 0 3px #efc968) drop-shadow(0 6px 4px rgba(0,0,0,.38)); }
.season-spring .keepsake-pin::before { background: radial-gradient(circle, rgba(246,180,202,.32), transparent 68%); }
.season-summer .keepsake-pin::before { background: radial-gradient(circle, rgba(242,207,101,.3), transparent 68%); }
.season-autumn .keepsake-pin::before { background: radial-gradient(circle, rgba(223,162,89,.3), transparent 68%); }
.season-winter .keepsake-pin::before { background: radial-gradient(circle, rgba(200,232,237,.3), transparent 68%); }
.keepsake-season { color: #f1d4ad; font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.seasonal-keepsake strong { max-width: 16ch; color: #fff9e7; font-family: Georgia, serif; font-size: .88rem; line-height: 1.15; }
.seasonal-keepsake small { color: #f1d4ad; font-size: .72rem; }
.seasonal-keepsake.locked { opacity: .82; }
.seasonal-keepsake.locked .keepsake-pin { color: transparent; filter: grayscale(1) saturate(0) contrast(.8); }
.seasonal-keepsake.locked .keepsake-art { opacity: .5; }
.keepsake-lock { display: none; }
.seasonal-keepsake.locked .keepsake-lock { position: absolute; display: block; width: 22px; height: 18px; border: 3px solid #d5d8cf; border-radius: 4px; background: #3d4944; box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.seasonal-keepsake.locked .keepsake-lock::before { position: absolute; left: 3px; top: -15px; width: 10px; height: 13px; border: 3px solid #d5d8cf; border-bottom: 0; border-radius: 9px 9px 0 0; content: ""; }
.seasonal-keepsake.earned .keepsake-pin { transition: transform .2s ease, filter .2s ease; }
.seasonal-keepsake.earned:hover .keepsake-pin { transform: translateY(-3px) rotate(-2deg); filter: saturate(1.08) brightness(1.04); }
body.reduce-motion .seasonal-keepsake.earned .keepsake-pin { transition: none; }
.seasonal-archive { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.seasonal-archive-card { display: grid; gap: 3px; padding: 11px; border: 1px solid rgba(255,235,197,.32); border-radius: 10px; background: rgba(10,24,24,.3); }
.seasonal-archive-card small { color: #f2d8b3; }
.seasonal-collection[data-season="spring"] { border-color: #d78ca6; background: linear-gradient(160deg, #173b35, #4d3a4a 58%, #764b61); }
.seasonal-collection[data-season="spring"] .seasonal-sky { background: radial-gradient(circle at 76% 28%, rgba(255,240,207,.25), transparent 18%), linear-gradient(#8db9c0, #e4a8b8); }
.seasonal-collection[data-season="spring"] .seasonal-sky::before { border-radius: 70% 30% 70% 30%; background: #ffd4df; box-shadow: 92px -18px #f7a9c0, 188px 5px #fff0f4, 286px -23px #e887aa, 390px 2px #ffdce6, 510px -14px #ee9ab5; }
.seasonal-collection[data-season="spring"] .seasonal-branch::before, .seasonal-collection[data-season="spring"] .seasonal-branch::after { background: #ffd4df; box-shadow: 38px -16px #f7a9c0, 78px 4px #fff0f4, 118px -20px #e887aa, 158px 2px #ffdce6, 198px -14px #ee9ab5; }
.seasonal-collection[data-season="summer"] { border-color: #d8b654; background: linear-gradient(160deg, #163b32, #31452d 58%, #635a25); }
.seasonal-collection[data-season="summer"] .seasonal-sky { background: radial-gradient(circle at 76% 28%, rgba(255,239,153,.35), transparent 18%), linear-gradient(#2c5960, #647441); }
.seasonal-collection[data-season="summer"] .seasonal-sky::before { width: 5px; height: 5px; border-radius: 50%; background: #fff4a8; box-shadow: 92px -18px #ffe985, 188px 5px #fff4a8, 286px -23px #ffe985, 390px 2px #fff4a8, 510px -14px #ffe985; filter: drop-shadow(0 0 5px #ffe985); }
.seasonal-collection[data-season="winter"] { border-color: #9ecbd3; background: linear-gradient(160deg, #18333d, #35455b 58%, #4b5872); }
.seasonal-collection[data-season="winter"] .seasonal-sky { background: radial-gradient(circle at 76% 28%, rgba(240,253,255,.35), transparent 18%), linear-gradient(#243c53, #738aa0); }
.seasonal-collection[data-season="winter"] .seasonal-sky::before { width: 7px; height: 7px; border-radius: 50%; background: #eefcff; box-shadow: 92px -18px #cceef3, 188px 5px #fff, 286px -23px #b4dce5, 390px 2px #eefcff, 510px -14px #fff; }
.seasonal-collection[data-season="winter"] .seasonal-branch::before, .seasonal-collection[data-season="winter"] .seasonal-branch::after { background: #eefcff; box-shadow: 38px -16px #cceef3, 78px 4px #fff, 118px -20px #b4dce5, 158px 2px #e8f8fb, 198px -14px #c5e7ed; }
body.seasonal-board .board { box-shadow: inset 0 0 60px rgba(255,255,255,.12); }
body.seasonal-board .board::after { position: absolute; right: 4%; top: 4%; color: rgba(255,255,255,.8); font-family: Georgia, serif; font-size: clamp(1.6rem, 4vw, 2.7rem); line-height: 1; pointer-events: none; }
body.seasonal-board[data-calendar-season="spring"] .board { background: radial-gradient(circle at 18% 15%, rgba(255,221,230,.26), transparent 25%), linear-gradient(155deg, #286555, #624454); }
body.seasonal-board[data-calendar-season="spring"] .board::after { content: "\273f"; }
body.seasonal-board[data-calendar-season="summer"] .board { background: radial-gradient(circle at 80% 18%, rgba(255,228,123,.24), transparent 23%), linear-gradient(155deg, #1f6655, #435b2f); }
body.seasonal-board[data-calendar-season="summer"] .board::after { content: "\2726"; color: rgba(255,239,141,.86); text-shadow: 0 0 12px rgba(255,230,94,.65); }
body.seasonal-board[data-calendar-season="autumn"] .board { background: radial-gradient(circle at 80% 18%, rgba(255,222,147,.19), transparent 19%), linear-gradient(155deg, #224f47, #382d2b); }
body.seasonal-board[data-calendar-season="autumn"] .board::after { content: "\2740"; color: rgba(255,228,178,.78); }
body.seasonal-board[data-calendar-season="winter"] .board { background: radial-gradient(circle at 72% 14%, rgba(232,250,255,.26), transparent 22%), linear-gradient(155deg, #285762, #34445e); }
body.seasonal-board[data-calendar-season="winter"] .board::after { content: "\2744"; }
body[data-effects="lively"] .seasonal-moon, body[data-effects="full"] .seasonal-moon { animation: seasonal-moon-glow 4.8s ease-in-out infinite alternate; }
body[data-effects="lively"] .seasonal-lantern, body[data-effects="full"] .seasonal-lantern { transform-origin: 50% -20px; animation: lantern-sway 3.4s ease-in-out infinite alternate; }
body[data-effects="lively"] .seasonal-sky::after, body[data-effects="full"] .seasonal-sky::after { opacity: .7; animation: seasonal-sparkle 3.2s ease-in-out infinite alternate; }
body[data-effects="full"] .seasonal-branch { transform-origin: left center; animation: seasonal-branch-sway 5.5s ease-in-out infinite alternate; }
body[data-effects="full"] .seasonal-sky::before { opacity: .9; animation: seasonal-leaf-fall 8s linear infinite; }
.seasonal-calendar-status, .seasonal-event-status { padding: 7px 10px; border-radius: 8px; background: rgba(0,0,0,.2); }
.seasonal-countdown { margin: 12px 0; padding: 11px 12px; border: 1px solid rgba(255,235,197,.45); border-radius: 10px; color: #fff8e9; background: rgba(6,20,20,.48); font-variant-numeric: tabular-nums; font-size: clamp(1rem, 3vw, 1.35rem); font-weight: 850; letter-spacing: .04em; text-align: center; }
.seasonal-archive-card.closed { opacity: .72; }
.seasonal-archive-card.current { border-color: #ffd27c; box-shadow: inset 0 0 0 1px rgba(255,210,124,.22); }
.tile.autumn-maple-tile::after, .tile.autumn-chrysanthemum-tile::after { position: absolute; right: 3px; top: 2px; z-index: 3; color: #a53e2d; font-size: clamp(.55rem, 1.4vw, .78rem); text-shadow: 0 1px #fff; pointer-events: none; }
.tile.autumn-maple-tile::after { content: "◆"; transform: rotate(25deg); }
.tile.autumn-chrysanthemum-tile::after { content: "✿"; color: #b56b18; }
@keyframes seasonal-moon-glow { to { filter: brightness(1.08); box-shadow: 0 0 38px rgba(255,216,126,.78); } }
@keyframes lantern-sway { 50% { filter: brightness(1.18); box-shadow: 0 0 28px rgba(255,190,90,.82); } to { transform: rotate(2.5deg); } }
@keyframes seasonal-branch-sway { to { transform: rotate(-5.5deg); } }
@keyframes seasonal-leaf-fall { from { transform: translate3d(-35px,-15px,0) rotate(0); } to { transform: translate3d(90px,135px,0) rotate(290deg); } }
@keyframes seasonal-sparkle { to { opacity: .25; transform: translateY(-5px); } }
@media (max-width: 560px) { .seasonal-keepsakes, .seasonal-archive { grid-template-columns: 1fr; }.seasonal-keepsake { min-height: 68px; grid-template-columns: auto 1fr; column-gap: 10px; text-align: left; }.seasonal-keepsake small { grid-column: 2; }.seasonal-keepsake .keepsake-detail-select { grid-column: 1 / -1; grid-template-columns: auto 1fr; justify-items: start; column-gap: 10px; }.seasonal-keepsake .keepsake-detail-select .keepsake-collection-art { grid-row: 1 / span 3; }.seasonal-keepsake .keepsake-detail-select .keepsake-season,.seasonal-keepsake .keepsake-detail-select strong,.seasonal-keepsake .keepsake-detail-select small { grid-column: 2; }.weekly-keepsakes { grid-template-columns: repeat(2, minmax(0,1fr)); }.weekly-keepsake { min-height: 132px; }.weekly-event-card { padding: 13px; } }
.choice-dialog-content { box-sizing: border-box; display: grid; gap: 14px; width: min(90vw, 520px); max-width: 100%; padding: 24px; color: var(--ink); background: var(--panel); }
.choice-dialog-content h2, .choice-dialog-content p { margin: 0; }
.choice-dialog-actions { display: grid; gap: 10px; }
.after-board-dialog { width: min(92vw, 520px); max-width: calc(100vw - 24px); overflow: hidden; border: 2px solid color-mix(in srgb, var(--accent) 65%, #f0d38b); background: var(--panel); }
.after-board-dialog .choice-dialog-content { width: 100%; min-width: 0; padding: clamp(22px, 5vw, 34px); gap: 16px; overflow: hidden; background: radial-gradient(circle at 88% 7%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 30%), var(--panel); }
.after-board-dialog .choice-dialog-mark { display: grid; width: 54px; height: 54px; place-items: center; border: 2px solid color-mix(in srgb, var(--accent) 70%, #f0d38b); border-radius: 50%; color: color-mix(in srgb, var(--accent) 70%, #f0d38b); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); font-size: 1.8rem; line-height: 1; }
.after-board-dialog .eyebrow { color: var(--muted); }
.after-board-dialog h2 { max-width: 19ch; font-family: Georgia, serif; font-size: clamp(1.65rem, 6vw, 2.25rem); line-height: 1.08; overflow-wrap: anywhere; }
.after-board-dialog p { max-width: 46ch; line-height: 1.55; overflow-wrap: anywhere; }
.after-board-dialog .choice-dialog-actions { min-width: 0; margin-top: 4px; }
.after-board-dialog button { min-width: 0; margin-top: 0; padding: 12px 16px; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.after-board-dialog .settings-action { color: var(--ink); background: transparent; }
.journey-relaunch-dialog { width: min(92vw, 540px); max-width: calc(100vw - 24px); border-color: color-mix(in srgb, var(--accent) 62%, #d9b967); box-shadow: 0 24px 70px rgba(4, 22, 18, .45), 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.journey-relaunch-dialog .journey-relaunch-content { gap: 15px; background: radial-gradient(circle at 82% 4%, color-mix(in srgb, #eacb72 16%, transparent), transparent 29%), radial-gradient(circle at 5% 94%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 30%), var(--panel); }
.journey-relaunch-mark { border-color: color-mix(in srgb, #e1bd61 72%, var(--accent)); color: color-mix(in srgb, #e1bd61 76%, var(--accent)); background: color-mix(in srgb, #e1bd61 10%, var(--panel)); box-shadow: 0 7px 18px rgba(0,0,0,.16); }
.journey-relaunch-dialog .eyebrow { color: color-mix(in srgb, var(--muted) 72%, #e1bd61); font-weight: 800; letter-spacing: .02em; }
.journey-relaunch-dialog h2 { max-width: 16ch; }
.journey-relaunch-note { display: grid; gap: 4px; padding: 12px 14px; border-left: 4px solid color-mix(in srgb, #e1bd61 72%, var(--accent)); border-radius: 0 12px 12px 0; background: color-mix(in srgb, #e1bd61 8%, var(--panel)); }
.journey-relaunch-note strong { color: var(--ink); }
.journey-relaunch-note span { color: var(--muted); }
.journey-relaunch-dialog .choice-dialog-actions { margin-top: 5px; }
.journey-relaunch-dialog .dialog-primary { width: 100%; }
.season-welcome-dialog { width: min(92vw, 560px); max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); margin: auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.seasonal-welcome-card { width: auto; padding: clamp(20px, 4vw, 30px); gap: 18px; }
.seasonal-welcome-card .dialog-heading { align-items: flex-start; }
.seasonal-welcome-card .dialog-heading h2 { margin-top: 3px; }
.seasonal-welcome-card .close-button { flex: 0 0 auto; min-height: 44px; }
.season-welcome-art { position: relative; display: grid; min-height: 170px; overflow: hidden; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 55%, white); border-radius: 20px; color: #fff8e9; background: radial-gradient(circle at 70% 25%, rgba(255,244,186,.72) 0 8%, transparent 9%), linear-gradient(155deg, #3a7967, #263d35); box-shadow: inset 0 0 45px rgba(255,255,255,.08); font-size: clamp(4rem, 18vw, 7rem); text-shadow: 0 5px 18px rgba(0,0,0,.28); }
.season-welcome-art::before, .season-welcome-art::after { content: ""; position: absolute; width: 55%; height: 55%; bottom: -27%; border-radius: 50% 50% 0 0; background: color-mix(in srgb, var(--accent) 32%, #5f875f); opacity: .85; }
.season-welcome-art::before { left: -8%; transform: rotate(8deg); }
.season-welcome-art::after { right: -7%; transform: rotate(-9deg); }
.season-welcome-art span { position: relative; z-index: 1; filter: drop-shadow(0 8px 7px rgba(0,0,0,.24)); animation: season-welcome-breathe 3.8s ease-in-out infinite; }
.season-welcome-dialog[data-season="spring"] .season-welcome-art { background: radial-gradient(circle at 72% 22%, #fff7c7 0 8%, transparent 9%), linear-gradient(155deg, #8dc9b1, #365e53); }
.season-welcome-dialog[data-season="summer"] .season-welcome-art { background: radial-gradient(circle at 72% 22%, #ffe395 0 9%, transparent 10%), linear-gradient(155deg, #397f70, #263d35); }
.season-welcome-dialog[data-season="autumn"] .season-welcome-art { background: radial-gradient(circle at 72% 22%, #fff1b8 0 9%, transparent 10%), linear-gradient(155deg, #9d603b, #3d352b); }
.season-welcome-dialog[data-season="winter"] .season-welcome-art { background: radial-gradient(circle at 72% 22%, #fff 0 8%, transparent 9%), linear-gradient(155deg, #7197a0, #30464e); }
.season-welcome-copy { display: grid; gap: 12px; line-height: 1.55; }
.season-welcome-copy p { margin: 0; }
.season-welcome-dates { padding: 12px 14px; border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; color: var(--muted); background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 700; }
.seasonal-welcome-card .dialog-primary { width: 100%; min-height: 54px; margin-top: 0; }
@keyframes season-welcome-breathe { 50% { transform: translateY(-5px) scale(1.04); } }
body.reduce-motion .season-welcome-art span, body[data-effects="off"] .season-welcome-art span { animation: none; }
.journey-panel .eyebrow, .journey-panel h2 { margin: 0; }
.journey-panel progress { width: 100%; height: 14px; accent-color: var(--accent); }
.journey-explore-button { width: 100%; min-height: 44px; margin-top: 10px; }
.journey-map-control { display: grid; grid-template-columns: auto minmax(190px, 1fr); align-items: center; gap: 10px; margin-top: 12px; color: var(--muted); font-size: .8rem; font-weight: 850; }
.journey-map-control select { min-width: 0; min-height: 42px; }
.garden-scene { position: relative; min-height: 220px; margin: 14px 0 10px; border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 18px; color: #183c31; background: #dcefdc; box-shadow: inset 0 0 28px rgba(29,84,68,.1); overflow: hidden; }
.living-garden { display: block; width: 100%; min-height: 190px; }
.garden-sun { fill: #f4d978; opacity: .85; }
.garden-hills { fill: #a7c99b; }
.garden-ground { fill: #719d63; }
.garden-feature { opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center bottom; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.journey-feature { opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center bottom; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.journey-stage-1 .journey-feature-1,
.journey-stage-2 :is(.journey-feature-1,.journey-feature-2),
.journey-stage-3 :is(.journey-feature-1,.journey-feature-2,.journey-feature-3),
.journey-stage-4 :is(.journey-feature-1,.journey-feature-2,.journey-feature-3,.journey-feature-4),
.journey-stage-5 :is(.journey-feature-1,.journey-feature-2,.journey-feature-3,.journey-feature-4,.journey-feature-5),
.journey-stage-6 :is(.journey-feature-1,.journey-feature-2,.journey-feature-3,.journey-feature-4,.journey-feature-5,.journey-feature-6),
.journey-stage-7 .journey-feature { opacity: 1; pointer-events: auto; }
.journey-feature:focus-visible { outline: 4px solid #fff; outline-offset: 4px; filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 8px #0a7160); }
.journey-sky stop:first-child { stop-color: #8db9b6; }.journey-sky stop:last-child { stop-color: #e1e8c8; }.journey-moon { fill: #fff0ae; filter: drop-shadow(0 0 12px rgba(255,238,166,.45)); }.journey-land { fill: #668e65; }
.garden-scene[data-journey-chapter="courtyard"] .journey-sky stop:first-child { stop-color: #315e65; }.garden-scene[data-journey-chapter="courtyard"] .journey-sky stop:last-child { stop-color: #78928a; }
.garden-scene[data-journey-chapter="sanctuary"] .journey-sky stop:first-child { stop-color: #a8cbc1; }.garden-scene[data-journey-chapter="sanctuary"] .journey-land { fill: #527654; }
.garden-scene[data-journey-chapter="mountain"] .journey-sky stop:first-child { stop-color: #9eb9c3; }.garden-scene[data-journey-chapter="mountain"] .journey-land { fill: #647965; }
.garden-scene[data-journey-chapter="lakeside"] .journey-sky stop:first-child { stop-color: #91c3c8; }.garden-scene[data-journey-chapter="lakeside"] .journey-land { fill: #5e9672; }
.garden-scene[data-journey-chapter="village"] .journey-sky stop:first-child { stop-color: #314f5b; }.garden-scene[data-journey-chapter="village"] .journey-sky stop:last-child { stop-color: #9c7258; }.garden-scene[data-journey-chapter="village"] .journey-land { fill: #5e6751; }
.journey-stones, .moss-stones { fill: #b7b5a8; stroke: #70776c; stroke-width: 3; }.moon-gate { fill: #d9cfc0; stroke: #8d7560; stroke-width: 3; }
.journey-bamboo, .lake-reeds, .tea-terraces, .willow-island { fill: none; stroke: #286f45; stroke-width: 7; stroke-linecap: round; }.bamboo-leaf { fill: #4d925c; stroke-width: 2; }
.stone-lanterns, .forest-shrine, .tea-house, .bell-tower { fill: #9a9a86; stroke: #5d625a; stroke-width: 4; }.journey-lantern-light { fill: #ffd86b; stroke: #bd713c; stroke-width: 2; filter: drop-shadow(0 0 8px #ffd86b); }
.journey-water path { fill: none; stroke: rgba(255,255,255,.8); stroke-width: 3; }.journey-water .stream, .journey-water .waterfall, .journey-water .lake { stroke: #69b5c2; stroke-width: 18; }.journey-water .koi { fill: #e88748; stroke: #9c4d32; stroke-width: 2; }
.arbor, .journey-pavilion .frame, .forest-shrine .frame, .tea-house .frame { fill: none; stroke: #70513b; stroke-width: 7; }.wisteria { fill: #9c77bd; }.journey-pavilion > path:first-child, .forest-shrine > path:first-child, .tea-house > path:first-child { fill: #315d54; stroke: #193b35; stroke-width: 3; }
.red-bridge { fill: #c55d49; stroke: #78372e; stroke-width: 3; }.red-bridge .rail { fill: none; stroke-width: 5; }.journey-bird { fill: #f0eee1; stroke: #4e5b52; stroke-width: 4; }
.journey-mist, .journey-cloud { fill: none; stroke: rgba(255,255,255,.72); stroke-width: 17; stroke-linecap: round; }.mountain-trail, .village-path { fill: none; stroke: #d8c59f; stroke-width: 20; stroke-dasharray: 8 8; }.pine-trees { fill: #35664d; stroke: #274d3b; stroke-width: 5; }
.little-boat { fill: #9e5c3e; stroke: #613927; stroke-width: 3; }.little-boat .mast { fill: #efe2b6; }.lotus-bed { fill: #ef91b1; stroke: #3e8d63; stroke-width: 3; }.willow-island ellipse { fill: #668d5f; }
.village-house, .market-stall { fill: #c4875d; stroke: #633e31; stroke-width: 4; }.village-house .door { fill: #68443a; }.market-stall .awning { fill: none; stroke: #f3d390; stroke-width: 5; }.festival-banners { fill: none; stroke: #e6b85e; stroke-width: 4; }.lantern-festival { fill: #ffd86b; }
.journey-marker { fill: #f6ead1; stroke: #456d61; stroke-width: 3; }
body[data-effects="lively"] .journey-feature, body[data-effects="full"] .journey-feature { animation: garden-arrive .8s cubic-bezier(.2,.8,.2,1) both; }
body[data-effects="lively"] :is(.journey-plant,.journey-bamboo), body[data-effects="full"] :is(.journey-plant,.journey-bamboo) { animation: garden-sway 3.8s ease-in-out infinite alternate; }
body[data-effects="full"] :is(.journey-plant,.journey-bamboo) { animation-name: journey-sway-full; animation-duration: 2.8s; }
body[data-effects="lively"] :is(.journey-lantern-light,.lantern-festival), body[data-effects="full"] :is(.journey-lantern-light,.lantern-festival) { animation: garden-lantern-glow 2.7s ease-in-out infinite alternate; }
body[data-effects="lively"] .journey-water, body[data-effects="full"] .journey-water { animation: pond-shimmer 4.2s ease-in-out infinite alternate; }
body[data-effects="full"] .journey-water path:not(.koi) { stroke-dasharray: 14 9; animation: journey-water-flow 2.4s linear infinite; }
body[data-effects="lively"] .journey-bird, body[data-effects="full"] .journey-bird { animation: bird-hop 2.8s ease-in-out infinite; }
body[data-effects="lively"] :is(.journey-cloud,.journey-mist), body[data-effects="full"] :is(.journey-cloud,.journey-mist) { animation: journey-drift 8s ease-in-out infinite alternate; }
body[data-effects="off"] .journey-feature, body[data-effects="off"] .journey-feature * { animation: none !important; transition: none !important; }
@keyframes journey-drift { to { transform: translateX(18px); opacity: .62; } }
@keyframes journey-sway-full { from { transform: rotate(-1.2deg) translateX(-1px); } to { transform: rotate(2.6deg) translateX(3px); } }
@keyframes journey-water-flow { to { stroke-dashoffset: -46; } }
/* Journey storybook renderer: each stage restores a connected environment. */
.garden-scene:has(.storybook-scene) { min-height: clamp(230px, 38vw, 330px); background: #324b42; border-color: color-mix(in srgb, var(--accent) 52%, #efe0b9); box-shadow: inset 0 0 45px rgba(15,38,31,.25), 0 12px 30px rgba(5,24,19,.18); }
.journey-relaunch-dialog { max-width:min(620px,calc(100vw - 28px)); }.journey-relaunch-content { display:grid; gap:1rem; padding:.35rem; }.journey-relaunch-content h2,.journey-relaunch-content p { margin:0; }.journey-relaunch-content h2 { font-size:clamp(1.8rem,6vw,3rem); }
.storybook-scene { width: 100%; min-height: 230px; aspect-ratio: 8 / 3; }
.sky-top { stop-color: #7faaa7; }.sky-bottom { stop-color: #e7d6ad; }
.storybook-sun { fill: #ffedb2; opacity: .82; filter: drop-shadow(0 0 18px rgba(255,235,168,.6)); }
.storybook-far-hills { fill: #829b83; opacity: .78; }.storybook-near-hills { fill: #58745c; }
.storybook-wash { fill: #f4dfb1; opacity: calc(.16 - var(--journey-restoration, 0) * .015); mix-blend-mode: soft-light; pointer-events: none; }
.storybook-scene[data-stage="1"] { --journey-restoration: 1; filter: saturate(.72) brightness(.89); }
.storybook-scene[data-stage="2"] { --journey-restoration: 2; filter: saturate(.79) brightness(.92); }
.storybook-scene[data-stage="3"] { --journey-restoration: 3; filter: saturate(.86) brightness(.95); }
.storybook-scene[data-stage="4"] { --journey-restoration: 4; filter: saturate(.93) brightness(.98); }
.storybook-scene[data-stage="5"] { --journey-restoration: 5; filter: saturate(1); }
.storybook-scene[data-stage="6"] { --journey-restoration: 6; filter: saturate(1.06) contrast(1.02); }
.storybook-scene[data-stage="7"] { --journey-restoration: 7; filter: saturate(1.1) contrast(1.03); }
.journey-layer { opacity: 0; transform: translateY(7px) scale(.99); }
.journey-stage-1 .journey-layer[data-stage="1"],
.journey-stage-2 .journey-layer[data-stage="1"],.journey-stage-2 .journey-layer[data-stage="2"],
.journey-stage-3 .journey-layer[data-stage="1"],.journey-stage-3 .journey-layer[data-stage="2"],.journey-stage-3 .journey-layer[data-stage="3"],
.journey-stage-4 .journey-layer[data-stage="1"],.journey-stage-4 .journey-layer[data-stage="2"],.journey-stage-4 .journey-layer[data-stage="3"],.journey-stage-4 .journey-layer[data-stage="4"],
.journey-stage-5 .journey-layer[data-stage="1"],.journey-stage-5 .journey-layer[data-stage="2"],.journey-stage-5 .journey-layer[data-stage="3"],.journey-stage-5 .journey-layer[data-stage="4"],.journey-stage-5 .journey-layer[data-stage="5"],
.journey-stage-6 .journey-layer:not([data-stage="7"]),.journey-stage-7 .journey-layer { opacity: 1; transform: none; pointer-events: auto; }
.storybook-path { fill: none; stroke: #d9c09b; stroke-width: 31; stroke-linecap: round; filter: drop-shadow(0 3px 0 rgba(72,57,43,.3)); }
.storybook-trunk { fill: none; stroke: #69503d; stroke-width: 12; stroke-linecap: round; }.storybook-canopy { fill: #4e8058; stroke: #315c46; stroke-width: 2; }.storybook-pine { fill: #285444; stroke: #1e4439; stroke-width: 3; }
.storybook-sprout,.storybook-grass { fill: none; stroke: #276b43; stroke-width: 9; stroke-linecap: round; }.storybook-flowers { fill: #eb8ca3; stroke: #407c51; stroke-width: 5; }.storybook-flowers circle:nth-of-type(2) { fill: #b78fd0; }.storybook-flowers circle:nth-of-type(3) { fill: #f1bd6f; }
.storybook-water,.storybook-lake { fill: #62aaa9; stroke: #bce4db; stroke-width: 3; }.water-edge { stop-color: #498f93; }.water-light { stop-color: #c4e7dd; }.water-ripple { fill: none; stroke: rgba(244,255,247,.82); stroke-width: 3; }.storybook-lotus,.lotus-bed { fill: #ed94b2; stroke: #397655; stroke-width: 4; }
.storybook-post { fill: none; stroke: #675541; stroke-width: 8; }.storybook-lantern { fill: #9c5937; stroke: #58382d; stroke-width: 3; }.window-glow { fill: #ffdda0; filter: drop-shadow(0 0 12px rgba(255,215,134,.75)); }
.storybook-bridge { fill: #bd5d4a; stroke: #72382f; stroke-width: 4; }.storybook-bridge .bridge-rail { fill: none; stroke: #7d3c32; stroke-width: 7; }
.storybook-pavilion .roof,.tea-house .roof,.forest-shrine .roof,.bell-tower .roof { fill: #294c45; stroke: #163832; stroke-width: 4; }.storybook-pavilion .frame,.tea-house .frame,.forest-shrine .frame { fill: none; stroke: #704f38; stroke-width: 9; }.storybook-pavilion .floor { fill: #72513d; }
.journey-fireflies,.lantern-festival { fill: #fff09a; filter: drop-shadow(0 0 7px #ffdf76); }.journey-stones,.moss-stones { fill: #a9aaa0; stroke: #68746b; stroke-width: 3; }.storybook-moss { fill: none; stroke: #668b5b; stroke-width: 6; }
.moon-gate { fill: #d6cab7; stroke: #88735e; stroke-width: 4; }.journey-bamboo,.lake-reeds { fill: none; stroke: #28684a; stroke-width: 9; stroke-linecap: round; }.bamboo-leaf { fill: #4a8a5b; }.wisteria { fill: #9873b7; }.arbor { fill: none; stroke: #6f5039; stroke-width: 9; }
.storybook-stream,.storybook-waterfall { fill: none; stroke: #72b7b7; stroke-width: 24; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(207,245,236,.35)); }.storybook-distant-mountain { fill: #5f7774; opacity: .75; }.tea-terraces { fill: none; stroke: #8da86d; stroke-width: 9; stroke-linecap: round; }
.sun-rays { fill: none; stroke: rgba(255,239,178,.18); stroke-width: 45; }.koi { fill: #d97949; stroke: #8c462f; stroke-width: 2; }.little-boat { fill: #96563f; stroke: #58352c; stroke-width: 4; }.little-boat .mast { fill: #efe0b4; }
.willow-island ellipse { fill: #607f58; }.willow-fronds { fill: none; stroke: #315f42; stroke-width: 10; stroke-linecap: round; }.village-house,.market-stall,.bell-tower { fill: #bb8060; stroke: #613d31; stroke-width: 5; }.village-house .door { fill: #654136; }.market-stall .awning { fill: none; stroke: #efd08e; stroke-width: 7; }.festival-banners { fill: none; stroke: #e8b754; stroke-width: 5; }
.journey-mist,.journey-cloud { fill: none; stroke: rgba(246,245,220,.5); stroke-width: 19; stroke-linecap: round; filter: blur(1.3px); }.journey-petals { fill: #f2b0b6; }.tea-steam { fill: none; stroke: rgba(248,239,211,.62); stroke-width: 8; stroke-linecap: round; }
.storybook-moonlit .sky-top { stop-color: #294b55; }.storybook-moonlit .sky-bottom { stop-color: #788e82; }.storybook-moonlit .storybook-sun { fill: #fff0b8; }
.storybook-forest .sky-top { stop-color: #729b88; }.storybook-forest .sky-bottom { stop-color: #c7d1a8; }.storybook-forest .storybook-near-hills { fill: #42664c; }
.storybook-mountain .sky-top { stop-color: #829ca8; }.storybook-mountain .sky-bottom { stop-color: #dfc59c; }.storybook-mountain .storybook-far-hills { fill: #6f8685; }.storybook-mountain .storybook-near-hills { fill: #435f55; }
.storybook-mountain > .storybook-paint > .storybook-far-hills,.storybook-mountain > .storybook-paint > .storybook-near-hills { opacity: .15; }
.mountain-ridge.ridge-far { fill: #789091; opacity: .72; }.mountain-ridge.ridge-mid { fill: #637a73; opacity: .87; }.mountain-ridge.ridge-near { fill: #405c53; }
.path-stones { fill: #e3cfad; stroke: #9a8163; stroke-width: 2; }.mountain-grass { fill: none; stroke: #243f32; stroke-width: 5; stroke-linecap: round; }.mountain-sunbeam { fill: #f7e6ad; opacity: .1; }
.pine-grove.back { opacity: .72; }.pine-grove.front .storybook-pine { fill: #173f34; }.waterfall-cliff-shadow { fill: #314b49; }.waterfall-cliff { fill: #68766e; stroke: #405852; stroke-width: 3; }.rock-lines { fill: none; stroke: #465c56; stroke-width: 5; opacity: .78; }
.fall-wide { stroke-width: 20; }.waterfall-highlight { fill: none; stroke: rgba(244,255,247,.9); stroke-width: 6; stroke-linecap: round; }.water-rocks { fill: #485f58; stroke: #304943; stroke-width: 3; }
.terrace-earth { fill: #526c4d; stroke: #395740; stroke-width: 3; }.tea-bushes { fill: #285239; stroke: #628052; stroke-width: 2; }.lantern-aura,.house-aura { fill: #ffdc7b; opacity: .14; filter: blur(5px); }.lantern-ground-light { fill: #ffdc87; opacity: .2; }
.detailed-house .foundation { fill: #594534; }.detailed-house .wall { fill: #d2c19f; stroke: #80674e; stroke-width: 3; }.detailed-house .roof-back { fill: #29463f; }.detailed-house .roof-ridge,.detailed-house .window-lattice,.detailed-house .deck-rail { fill: none; stroke: #6b4936; stroke-width: 4; }.detailed-house .window-lattice { stroke-width: 2; }.detailed-house .door { fill: #724e3b; }
.storybook-lakeside .sky-top { stop-color: #7fb2b2; }.storybook-lakeside .sky-bottom { stop-color: #e7d6a7; }.storybook-lakeside .storybook-near-hills { fill: #56806a; }
/* Locations 2–5: persistent landscapes restored cumulatively across stages. */
.storybook-restoration-place .restoration-environment { transform-origin:center; }
.storybook-restoration-place .courtyard-distant-wall { fill:#667b72; stroke:#415c55; stroke-width:3; }.storybook-restoration-place .courtyard-wall-cap { fill:none; stroke:#b5a98e; stroke-width:8; }.storybook-restoration-place .courtyard-ground { fill:#496653; }.storybook-restoration-place .courtyard-empty-basin { fill:#344f48; stroke:#807764; stroke-width:5; }.storybook-restoration-place .courtyard-shadow { fill:#304e40; opacity:.75; }.storybook-restoration-place .courtyard-moon { opacity:.92; }
.storybook-restoration-place .sanctuary-distant-canopy { fill:#52745a; opacity:.82; }.storybook-restoration-place .sanctuary-forest-floor { fill:#42654a; }.storybook-restoration-place .sanctuary-stream-bed { fill:none; stroke:#344f47; stroke-width:31; stroke-linecap:round; }.storybook-restoration-place .sanctuary-foreground { fill:#2f553f; }.storybook-restoration-place .sanctuary-light { opacity:.65; }
.storybook-restoration-place .mountain-distance { fill:#718687; opacity:.78; }.storybook-restoration-place .mountain-slope { fill:#4b675d; }.storybook-restoration-place .mountain-foreground { fill:#304f43; }.storybook-restoration-place .mountain-morning-sun { opacity:.76; }
.storybook-restoration-place .lakeside-far-shore { fill:#789078; opacity:.75; }.storybook-restoration-place .lakeside-bank { fill:#52745b; }.storybook-restoration-place .lakeside-water-bed { fill:#3f7776; opacity:.7; }.storybook-restoration-place .lakeside-foreground { fill:#355c49; }
/* Locations 6–15: distinct terrain and landmarks share the approved 8:3
   restoration frame without introducing location-specific responsive rules. */
.storybook-restoration-place :is(.village-ridge,.cedar-ridge,.plum-hills,.onsen-ridge,.crane-distant-islands,.maple-ridge,.snow-ridge) { fill:#718679; opacity:.78; }
.storybook-restoration-place :is(.village-ground,.cedar-ravine,.plum-hollow,.onsen-bank,.crane-tidal-flat,.maple-slope,.temple-floor,.snow-ground) { fill:#4d6d55; }
.storybook-restoration-place :is(.village-lane,.storybook-path) { fill:#d3bd98; stroke:#8b765c; stroke-width:3; }
.storybook-restoration-place :is(.cedar-chasm,.plum-brook-bed,.snow-brook-bed) { fill:none; stroke:#344f48; stroke-width:34; stroke-linecap:round; }
.storybook-restoration-place :is(.onsen-empty-pool,.maple-terrace-base) { fill:#52635b; stroke:#897d6c; stroke-width:5; }
.storybook-restoration-place .crane-island { fill:#436b51; }.storybook-restoration-place .seaside-cliffs { fill:#596f5c; }.storybook-restoration-place .seaside-water { fill:#3d7d83; }.storybook-restoration-place .seaside-headland { fill:#486b53; }
.storybook-restoration-place .temple-canopy { fill:#3e654b; opacity:.88; }.storybook-restoration-place .temple-stair-cut { fill:#756f60; }.storybook-restoration-place .market-silhouette { fill:#405458; }.storybook-restoration-place .market-street { fill:#6b6961; }.storybook-restoration-place .market-canal-bed { fill:#365b62; }
.storybook-restoration-place :is(.mountain-ridge,.cedar-ridge,.snow-ridge) { stroke:#405a52; stroke-width:2; }
.storybook-restoration-place :is(.village-cottages,.market-awnings,.clock-pavilion,.snow-inn,.cliff-shrine,.onsen-bathhouse) { stroke-linejoin:round; }
.storybook-restoration-place :is(.village-cottage,.storybook-landmark.house,.storybook-landmark.market,.storybook-landmark.temple) { fill:#c7aa83; stroke:#67503f; stroke-width:5; }
.storybook-restoration-place :is(.village-cottage .roof,.storybook-landmark .roof,.clock-pavilion .roof) { fill:#314c44; }
.storybook-restoration-place :is(.market-awnings,.umbrella-visitors) { fill:#b75e54; stroke:#70463e; stroke-width:4; }.storybook-restoration-place .market-awnings path:nth-child(2) { fill:none; stroke:#efce8a; }
.storybook-restoration-place :is(.village-banners,.plum-petals,.maple-leaves) { fill:#d97670; }.storybook-restoration-place .plum-petals { fill:#efadc0; }
.storybook-restoration-place :is(.cedar-bridge,.snow-bridge,.onsen-footbath,.maple-bench) { fill:#9b7048; stroke:#60452f; stroke-width:5; }
.storybook-restoration-place :is(.prayer-gate,.seaside-torii-gate) { fill:none; stroke:#a64d3e; stroke-width:15; stroke-linecap:square; }
.storybook-restoration-place :is(.guardian-stones,.storybook-bridge) { fill:#8f9589; stroke:#59675e; stroke-width:4; }.storybook-restoration-place .storybook-bridge { fill:#a8784b; stroke:#654630; }
.storybook-restoration-place :is(.onsen-pool,.storybook-lake,.storybook-water,.storybook-stream,.frozen-brook) { stroke:#b8ded6; stroke-width:4; }
.storybook-restoration-place :is(.crane-pair,.crane-flock,.shorebirds) { fill:none; stroke:#f3eee0; stroke-width:5; stroke-linecap:round; }
.storybook-restoration-place :is(.onsen-macaque,.maple-owl,.temple-deer) { fill:#82634c; stroke:#4e3e32; stroke-width:3; }
.storybook-restoration-place .rabbit-tracks { fill:#77837c; }.storybook-restoration-place .snow-pines .storybook-pine { fill:#31594d; stroke:#eff2e8; stroke-width:3; }
.storybook-restoration-place .seaside-pines .storybook-pine { fill:#244f43; }.storybook-restoration-place .seaside-sunset-glow { fill:#ffd889; opacity:.24; }
.storybook-restoration-place .rain-reflections .journey-lantern-light,.storybook-restoration-place .window-glow { fill:#ffe39a; }.storybook-restoration-place .journey-rain { fill:none; stroke:#b9d8d9; stroke-width:4; opacity:.62; }
.storybook-restoration-place .journey-snow circle { fill:#fffdf0; }.storybook-restoration-place .tea-steam { fill:none; stroke:#f0eee0; stroke-width:7; stroke-linecap:round; opacity:.68; }
/* Locations 16–20: final static landscapes. These selectors only paint the
   established 8:3 scene geometry; animation belongs to a later dedicated pass. */
.storybook-restoration-place :is(.cloud-highlands,.rice-distant-hills,.returning-distant-land) { fill:#748b7e; opacity:.8; }
.storybook-restoration-place :is(.cloud-terrace,.rice-valley-floor,.returning-garden-land,.wisteria-ravine-floor,.observatory-hill) { fill:#4d7058; }
.storybook-restoration-place .cloud-shelf-base { fill:#526b62; }.storybook-restoration-place .cloud-shelves { fill:none; stroke:#755a42; stroke-width:7; }
.storybook-restoration-place .cloud-reading-bridge,.storybook-restoration-place .rice-harvest-bridge { stroke-linejoin:round; }
.storybook-restoration-place .cloud-paper-birds { fill:#f5edcf; stroke:#6d7c78; stroke-width:2; }.storybook-restoration-place .cloud-windows { fill:#f4f1da; opacity:.72; }
.storybook-restoration-place .cloud-library-glow { fill:#ffe29a; opacity:.2; }
.storybook-restoration-place .wisteria-cliffs { fill:#50635c; }.storybook-restoration-place .wisteria-stream-bed { fill:none; stroke:#344f48; stroke-width:34; stroke-linecap:round; }
.storybook-restoration-place .wisteria-vines { fill:none; stroke:#74536f; stroke-width:8; stroke-linecap:round; }.storybook-restoration-place .wisteria-hanging-bridge { fill:none; stroke:#7a5d43; stroke-width:7; stroke-linecap:round; }
.storybook-restoration-place .wisteria-swallows { fill:none; stroke:#f2ead9; stroke-width:5; stroke-linecap:round; }.storybook-restoration-place .wisteria-curtains { fill:#a278b4; stroke:#704f78; stroke-width:3; }
.storybook-restoration-place .rice-field-lines { fill:none; stroke:#a79252; stroke-width:6; opacity:.72; }.storybook-restoration-place .rice-paddies { fill:none; stroke:#5c874f; stroke-width:7; stroke-linecap:round; }
.storybook-restoration-place .rice-egrets { fill:none; stroke:#f6f0dc; stroke-width:6; stroke-linecap:round; }.storybook-restoration-place .rice-golden-fields { fill:#d6ad52; stroke:#c09642; stroke-width:7; }
.storybook-restoration-place .observatory-peaks { fill:#334c5d; }.storybook-restoration-place .observatory-platform { fill:#46575a; }.storybook-restoration-place .observatory-moon { fill:#fff0b8; }
.storybook-restoration-place .observatory-stairs { fill:none; stroke:#9d9a8b; stroke-width:12; stroke-linecap:round; }.storybook-restoration-place .observatory-owl { fill:#8a6b53; stroke:#4b3d35; stroke-width:3; }
.storybook-restoration-place .observatory-meteors { fill:#f8efc9; stroke:#ffeaa2; stroke-width:5; stroke-linecap:round; }
.storybook-restoration-place .returning-river-bed { fill:#365f62; }.storybook-restoration-place .returning-dawn-sun { fill:#ffdda0; }
.storybook-restoration-place .returning-trees { opacity:.96; }.storybook-restoration-place .returning-lantern-river .storybook-lantern { fill:#b66c43; }
.storybook-restoration-place .returning-bridges { stroke-linejoin:round; }.storybook-restoration-place .returning-birds { fill:none; stroke:#f6ead7; stroke-width:5; stroke-linecap:round; }
.storybook-restoration-place .returning-dawn { fill:none; stroke:rgba(255,226,157,.28); stroke-width:34; }.storybook-restoration-place .returning-light-glow { fill:#ffe0a0; opacity:.18; }
.storybook-restoration-place[data-stage="1"] .restoration-environment { filter:saturate(.75) brightness(.9); }.storybook-restoration-place[data-stage="7"] .restoration-environment { filter:saturate(1.08) contrast(1.02); }
body.reduce-motion .storybook-restoration-place *,body[data-effects="off"] .storybook-restoration-place * { animation:none !important; transition:none !important; }
.storybook-village .sky-top { stop-color: #263f4d; }.storybook-village .sky-bottom { stop-color: #a46e55; }.storybook-village .storybook-sun { fill: #ffd88c; }
.storybook-blossom .sky-top { stop-color:#9bb8ae; }.storybook-blossom .sky-bottom { stop-color:#f0c8c0; }.storybook-blossom .storybook-canopy { fill:#b86f84; }
.storybook-onsen .sky-top { stop-color:#769897; }.storybook-onsen .sky-bottom { stop-color:#dfc6a3; }
.storybook-coast .sky-top { stop-color:#6d9eae; }.storybook-coast .sky-bottom { stop-color:#f0c78f; }.storybook-coast .storybook-near-hills { fill:#46716b; }
.storybook-autumn .sky-top { stop-color:#7f8793; }.storybook-autumn .sky-bottom { stop-color:#e6b275; }.storybook-autumn .storybook-canopy { fill:#b65e40; }
.storybook-rain .sky-top { stop-color:#526f77; }.storybook-rain .sky-bottom { stop-color:#9eaaa1; }
.storybook-snow .sky-top { stop-color:#a9bcc5; }.storybook-snow .sky-bottom { stop-color:#e7e2d2; }.storybook-snow .storybook-near-hills { fill:#78918c; }
.storybook-sky .sky-top { stop-color:#6d8eaa; }.storybook-sky .sky-bottom { stop-color:#d8d1b4; }
.storybook-harvest .sky-top { stop-color:#89a7a1; }.storybook-harvest .sky-bottom { stop-color:#edca77; }.storybook-harvest .storybook-near-hills { fill:#8d8a46; }
.storybook-night .sky-top { stop-color:#152d47; }.storybook-night .sky-bottom { stop-color:#596779; }.storybook-night .storybook-sun { fill:#fff0b8; }
.storybook-dawn .sky-top { stop-color:#6d8f9b; }.storybook-dawn .sky-bottom { stop-color:#f2b58f; }
.storybook-landmark { fill:#c29a70; stroke:#634a39; stroke-width:6; }.storybook-landmark .roof { fill:#294c45; }.storybook-landmark.torii { fill:none; stroke:#a64f3f; stroke-width:15; }.storybook-landmark.library path,.storybook-landmark.observatory path { fill:#ac8c69; }.storybook-landmark .awning { fill:none; stroke:#efd08e; stroke-width:8; }
.journey-stars circle,.journey-snow circle { fill:#f7f4d4; filter:drop-shadow(0 0 5px rgba(255,244,182,.7)); }.journey-rain circle { fill:#b8d8dc; }.storybook-blossom .journey-petals circle,.storybook-autumn .journey-petals circle { fill:#ef9cad; }
body[data-effects="lively"] :is(.mist-one,.cloud-one),body[data-effects="full"] :is(.mist-one,.cloud-one) { animation: storybook-drift 11s ease-in-out infinite alternate; }
body[data-effects="lively"] :is(.mist-two,.cloud-two),body[data-effects="full"] :is(.mist-two,.cloud-two) { animation: storybook-drift 14s -4s ease-in-out infinite alternate-reverse; }
body[data-effects="lively"] :is(.journey-lantern-light,.window-glow,.journey-fireflies),body[data-effects="full"] :is(.journey-lantern-light,.window-glow,.journey-fireflies) { animation: storybook-glow 3.4s ease-in-out infinite alternate; }
body[data-effects="full"] .waterfall-highlight { stroke-dasharray: 17 10; animation: storybook-water 2.8s linear infinite; }
body[data-effects="full"] .storybook-scene .storybook-waterfall,body[data-effects="full"] .storybook-scene .storybook-stream { stroke-dasharray: none; animation: none; }
body[data-effects="lively"] .water-ripple,body[data-effects="full"] .water-ripple { animation: storybook-ripple 3.8s ease-in-out infinite alternate; }
body[data-effects="lively"] .tea-steam,body[data-effects="full"] .tea-steam { animation: storybook-steam 5s ease-in-out infinite; }
body[data-effects="lively"] :is(.journey-petals,.journey-snow,.journey-rain,.journey-stars),body[data-effects="full"] :is(.journey-petals,.journey-snow,.journey-rain,.journey-stars) { animation: storybook-fall 7s linear infinite; }
@keyframes storybook-drift { to { transform: translateX(24px); opacity: .62; } }
@keyframes storybook-glow { to { opacity: .78; filter: drop-shadow(0 0 15px #ffec9a); } }
@keyframes storybook-water { to { stroke-dashoffset: -54; } }
@keyframes storybook-ripple { to { opacity: .46; transform: translateX(4px); } }
@keyframes storybook-steam { 50% { transform: translate(-4px,-8px); opacity: .34; } }
@keyframes storybook-fall { 50% { transform:translate(10px,9px); opacity:.68; } to { transform:translate(-5px,18px); } }
body.reduce-motion .storybook-scene *,body[data-effects="off"] .storybook-scene * { animation: none !important; transition: none !important; }
/* Journey motion is opt-in per restored environment below. */
@media (forced-colors: active) { .storybook-scene * { forced-color-adjust: auto; }.storybook-path,.storybook-waterfall,.storybook-stream,.storybook-trunk,.storybook-pavilion .frame { stroke: CanvasText; }.storybook-water,.storybook-lake,.storybook-pine,.storybook-canopy { fill: Canvas; stroke: CanvasText; } }
@media (max-width: 620px) { .garden-scene:has(.storybook-scene) { min-height: 210px; }.storybook-scene { min-height: 210px; aspect-ratio: 4 / 2.15; } }
/* Location 1 proof of concept: one environment that grows richer by stage. */
.storybook-garden-poc .garden-environment-sun { fill:#ffe7a1; opacity:.84; filter:drop-shadow(0 0 17px rgba(255,225,143,.55)); }
.storybook-garden-poc .garden-distant-ridge { fill:#78947d; opacity:.72; }.storybook-garden-poc .garden-middle-ground { fill:#668665; }.storybook-garden-poc .garden-ground-plane { fill:#4f7356; }
.storybook-garden-poc .garden-pond-basin { fill:#465f55; opacity:.78; }.storybook-garden-poc .garden-unrestored-path { fill:none; stroke:#756f5e; stroke-width:25; stroke-linecap:round; opacity:.5; }
.storybook-garden-poc .garden-foreground-bank { fill:#355d49; opacity:.95; }.storybook-garden-poc .garden-restored-path { fill:none; stroke:#d9c39f; stroke-width:28; stroke-linecap:round; filter:drop-shadow(0 3px 0 rgba(67,54,42,.3)); }
.storybook-garden-poc .garden-path-stones { fill:#d8c8aa; stroke:#8d7e65; stroke-width:2; }.storybook-garden-poc .garden-young-tree { fill:none; stroke:#6c5540; stroke-width:8; stroke-linecap:round; }
.storybook-garden-poc .garden-pond-water { stroke:#c7e8dd; stroke-width:3; }.storybook-garden-poc .garden-water-reflection { fill:none; stroke:rgba(245,255,247,.78); stroke-width:3; }
.storybook-garden-poc .garden-reeds,.storybook-garden-poc .garden-bank-grass { fill:none; stroke:#2f754e; stroke-width:6; stroke-linecap:round; }.storybook-garden-poc .garden-bank-grass { stroke-width:7; }
.storybook-garden-poc .garden-shrub-bank { fill:#386b4c; stroke:#28533d; stroke-width:2; }.storybook-garden-poc .garden-flowering-grove .storybook-canopy { fill:#57855e; }
.storybook-garden-poc .garden-bank-stones { fill:#879182; stroke:#56675c; stroke-width:2; }.storybook-garden-poc .garden-main-bridge { filter:drop-shadow(0 5px 2px rgba(54,40,31,.34)); }
.storybook-garden-poc .garden-lantern-aura { fill:#ffe08b; opacity:.17; filter:blur(5px); }.storybook-garden-poc .garden-songbird { fill:#bf4f53; stroke:#74383d; stroke-width:3; }
.storybook-garden-poc .garden-mature-canopy .storybook-canopy { fill:#3f7451; }.storybook-garden-poc .garden-pavilion .roof-back { fill:#203f3a; }.storybook-garden-poc .garden-pavilion .window-glow { opacity:.82; }
.storybook-garden-poc .garden-evening-light { opacity:.52; mix-blend-mode:soft-light; }.storybook-garden-poc .garden-lotus-bed { fill:#ed9eb6; stroke:#397354; stroke-width:3; }.storybook-garden-poc .garden-final-mist { opacity:.45; }
.storybook-garden-poc[data-stage="1"] .garden-environment { filter:saturate(.78) brightness(.9); }.storybook-garden-poc[data-stage="7"] .garden-environment { filter:saturate(1.08) contrast(1.02); }
/* Location 1 motion primitives. Motion is intentionally limited to small
   environmental details; terrain, bridge, pavilion and framing stay still. */
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc * { animation:none; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc[data-stage="2"] .journey-layer[data-stage="2"],
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc[data-stage="3"] .journey-layer[data-stage="3"],
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc[data-stage="4"] .journey-layer[data-stage="4"],
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc[data-stage="5"] .journey-layer[data-stage="5"],
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc[data-stage="6"] .journey-layer[data-stage="6"],
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc[data-stage="7"] .journey-layer[data-stage="7"] { animation:journey-restoration-reveal .78s cubic-bezier(.2,.72,.25,1) both; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc[data-stage]:not([data-stage="1"]) .garden-water-reflection { animation:journey-water-breathe 7.4s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc .garden-flowering-grove { transform-box:fill-box; transform-origin:center bottom; animation:journey-foliage-breathe 10.8s -2.1s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc .garden-shrub-bank { transform-box:fill-box; transform-origin:center bottom; animation:journey-foliage-breathe 13.2s -6.4s ease-in-out infinite alternate-reverse; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc .garden-lantern-aura { animation:journey-lantern-breathe 5.8s -1.7s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc .journey-fireflies { animation:journey-firefly-breathe 6.7s -3.2s ease-in-out infinite; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc .garden-songbird { transform-box:fill-box; transform-origin:center bottom; animation:journey-wildlife-stir 9.6s -4.3s ease-in-out infinite; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc .garden-final-mist .mist-one { animation:journey-mist-drift 18s -5s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc .garden-final-mist .mist-two { animation:journey-mist-drift 23s -13s ease-in-out infinite alternate-reverse; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-garden-poc .journey-petals { animation:journey-petal-drift 14s -7s ease-in-out infinite; }
@keyframes journey-restoration-reveal { from { opacity:0; transform:translateY(7px) scale(.992); } to { opacity:1; transform:none; } }
@keyframes journey-water-breathe { from { opacity:.62; transform:translateX(-2px); } to { opacity:.88; transform:translateX(3px); } }
@keyframes journey-foliage-breathe { from { transform:rotate(-.35deg); } to { transform:rotate(.45deg); } }
@keyframes journey-lantern-breathe { from { opacity:.12; transform:scale(.96); } to { opacity:.24; transform:scale(1.04); } }
@keyframes journey-firefly-breathe { 0%,100% { opacity:.48; } 38% { opacity:.82; } 72% { opacity:.6; } }
@keyframes journey-wildlife-stir { 0%,68%,100% { transform:none; } 73% { transform:translateY(-2px) rotate(-1deg); } 79% { transform:translateY(0) rotate(1deg); } }
@keyframes journey-mist-drift { from { transform:translateX(-9px); opacity:.31; } to { transform:translateX(13px); opacity:.48; } }
@keyframes journey-petal-drift { 0%,100% { transform:translate(0,0); opacity:.58; } 45% { transform:translate(8px,5px); opacity:.78; } 76% { transform:translate(-3px,11px); opacity:.62; } }
body.reduce-motion .storybook-garden-poc *,body[data-effects="off"] .storybook-garden-poc * { animation:none !important; transition:none !important; }

/* Locations 2-10 animation propagation. Each scene first neutralizes legacy
   global motion, then opts existing environmental details into slow, staged
   ambience. Fixed landmarks and broad landscape planes remain still. */
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) :is(.storybook-courtyard,.storybook-sanctuary,.storybook-mountain,.storybook-lakeside,.storybook-village,.storybook-cedar-pass,.storybook-plum-hollow,.storybook-onsen,.storybook-crane-island) * { animation:none; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) :is(.storybook-courtyard,.storybook-sanctuary,.storybook-mountain,.storybook-lakeside,.storybook-village,.storybook-cedar-pass,.storybook-plum-hollow,.storybook-onsen,.storybook-crane-island)[data-stage="2"] .journey-layer[data-stage="2"],
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) :is(.storybook-courtyard,.storybook-sanctuary,.storybook-mountain,.storybook-lakeside,.storybook-village,.storybook-cedar-pass,.storybook-plum-hollow,.storybook-onsen,.storybook-crane-island)[data-stage="3"] .journey-layer[data-stage="3"],
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) :is(.storybook-courtyard,.storybook-sanctuary,.storybook-mountain,.storybook-lakeside,.storybook-village,.storybook-cedar-pass,.storybook-plum-hollow,.storybook-onsen,.storybook-crane-island)[data-stage="4"] .journey-layer[data-stage="4"],
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) :is(.storybook-courtyard,.storybook-sanctuary,.storybook-mountain,.storybook-lakeside,.storybook-village,.storybook-cedar-pass,.storybook-plum-hollow,.storybook-onsen,.storybook-crane-island)[data-stage="5"] .journey-layer[data-stage="5"],
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) :is(.storybook-courtyard,.storybook-sanctuary,.storybook-mountain,.storybook-lakeside,.storybook-village,.storybook-cedar-pass,.storybook-plum-hollow,.storybook-onsen,.storybook-crane-island)[data-stage="6"] .journey-layer[data-stage="6"],
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) :is(.storybook-courtyard,.storybook-sanctuary,.storybook-mountain,.storybook-lakeside,.storybook-village,.storybook-cedar-pass,.storybook-plum-hollow,.storybook-onsen,.storybook-crane-island)[data-stage="7"] .journey-layer[data-stage="7"] { animation:journey-restoration-reveal .78s cubic-bezier(.2,.72,.25,1) both; }

/* Location 2: Moonlit Courtyard — bamboo, water, lanterns and wisteria. */
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-courtyard:not([data-stage="1"]):not([data-stage="2"]) .journey-bamboo { transform-box:fill-box; transform-origin:center bottom; animation:journey-foliage-breathe 12.6s -4.1s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-courtyard:not([data-stage="1"]):not([data-stage="2"]):not([data-stage="3"]) .journey-lantern-light { animation:journey-lantern-breathe 6.2s -2.3s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-courtyard:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 8.1s -3.7s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-courtyard:is([data-stage="6"],[data-stage="7"]) .journey-wisteria .wisteria { transform-box:fill-box; transform-origin:center top; animation:journey-hanging-breathe 11.7s -6.2s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-courtyard[data-stage="7"] .journey-atmosphere .mist-one { animation:journey-mist-drift 22s -11s ease-in-out infinite alternate; }

/* Location 3: Bamboo Sanctuary — stream, crane and filtered morning light. */
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-sanctuary:not([data-stage="1"]) .journey-bamboo { transform-box:fill-box; transform-origin:center bottom; animation:journey-foliage-breathe 13.8s -7.4s ease-in-out infinite alternate-reverse; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-sanctuary:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 7.8s -1.8s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-sanctuary:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .journey-bird > g { transform-box:fill-box; transform-origin:center bottom; animation:journey-wildlife-stir 11.4s -7.1s ease-in-out infinite; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-sanctuary[data-stage="7"] .sun-rays { animation:journey-light-breathe 9.2s -4.6s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-sanctuary[data-stage="7"] .journey-atmosphere .mist-two { animation:journey-mist-drift 24s -9s ease-in-out infinite alternate-reverse; }

/* Location 4: Mountain Tea House — waterfall, pines, cloud and steam. */
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-mountain:not([data-stage="1"]):not([data-stage="2"]) .pine-grove.front { transform-box:fill-box; transform-origin:center bottom; animation:journey-foliage-breathe 14.4s -5.3s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-mountain:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .waterfall-highlight { stroke-dasharray:17 10; animation:journey-water-flow 5.8s linear infinite; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-mountain:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 7.1s -2.6s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-mountain:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) :is(.lantern-aura,.journey-fireflies) { animation:journey-lantern-breathe 6.6s -3.1s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-mountain:is([data-stage="6"],[data-stage="7"]) .window-glow { animation:journey-lantern-breathe 7.3s -5.2s ease-in-out infinite alternate-reverse; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-mountain[data-stage="7"] .cloud-one { animation:journey-mist-drift 21s -8s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-mountain[data-stage="7"] .cloud-two { animation:journey-mist-drift 27s -17s ease-in-out infinite alternate-reverse; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-mountain[data-stage="7"] .tea-steam { animation:journey-steam-rise 8.8s -4.2s ease-in-out infinite; }

/* Location 5: Lotus Lakeside — broad reflection, boat, heron and willow. */
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-lakeside:not([data-stage="1"]) .lake-reeds { transform-box:fill-box; transform-origin:center bottom; animation:journey-foliage-breathe 12.9s -3.8s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-lakeside:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 8.7s -5.1s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-lakeside:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .little-boat { transform-box:fill-box; transform-origin:center bottom; animation:journey-boat-bob 9.8s -6.3s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-lakeside:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .journey-bird > g { transform-box:fill-box; transform-origin:center bottom; animation:journey-wildlife-stir 12.2s -8.6s ease-in-out infinite; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-lakeside:is([data-stage="6"],[data-stage="7"]) .willow-fronds { transform-box:fill-box; transform-origin:center top; animation:journey-hanging-breathe 15.2s -9.1s ease-in-out infinite alternate-reverse; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-lakeside[data-stage="7"] .journey-atmosphere .mist-one { animation:journey-mist-drift 25s -14s ease-in-out infinite alternate; }

/* Location 6: Lantern Village — inhabited windows, stream and festival light. */
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-village:not([data-stage="1"]) .window-glow { animation:journey-lantern-breathe 7.8s -3.7s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-village:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .storybook-stream { animation:journey-water-breathe 9.1s -4.6s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-village:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .journey-layer[data-stage="4"] .journey-lantern-light { animation:journey-lantern-breathe 7.2s -3.4s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-village:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .festival-banners { transform-box:fill-box; transform-origin:center top; animation:journey-hanging-breathe 13.5s -7.8s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-village[data-stage="7"] .lantern-festival { animation:journey-firefly-breathe 7.9s -5.2s ease-in-out infinite; }

/* Location 7: Cedar Pass — cedar breath, stream, fox and rolling mist. */
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-cedar-pass:not([data-stage="1"]) .storybook-pine { transform-box:fill-box; transform-origin:center bottom; animation:journey-foliage-breathe 15.6s -8.2s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-cedar-pass:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 8.4s -2.9s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-cedar-pass:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .cedar-fox > g { transform-box:fill-box; transform-origin:center bottom; animation:journey-wildlife-stir 13.7s -10.1s ease-in-out infinite; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-cedar-pass:is([data-stage="6"],[data-stage="7"]) .window-glow { animation:journey-lantern-breathe 8.2s -4.4s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-cedar-pass[data-stage="7"] .mist-one { animation:journey-mist-drift 20s -5s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-cedar-pass[data-stage="7"] .mist-two { animation:journey-mist-drift 27s -16s ease-in-out infinite alternate-reverse; }

/* Location 8: Plum Blossom Hollow — brook, blossoms, butterflies and petals. */
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-plum-hollow:not([data-stage="1"]) .storybook-canopy { transform-box:fill-box; transform-origin:center bottom; animation:journey-foliage-breathe 13.1s -6.9s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-plum-hollow:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 8.6s -3.3s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-plum-hollow:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .plum-butterflies { transform-box:fill-box; transform-origin:center; animation:journey-wildlife-stir 10.9s -7.2s ease-in-out infinite; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-plum-hollow[data-stage="7"] .journey-petals { animation:journey-petal-drift 15.1s -8.8s ease-in-out infinite; }

/* Location 9: Riverstone Onsen — water, maple shelter, steam and warm light. */
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-onsen:not([data-stage="1"]) .water-ripple { animation:journey-water-breathe 7.6s -4.5s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-onsen:not([data-stage="1"]):not([data-stage="2"]) .storybook-canopy { transform-box:fill-box; transform-origin:center bottom; animation:journey-foliage-breathe 14.7s -9.4s ease-in-out infinite alternate-reverse; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-onsen:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .onsen-macaque > g { transform-box:fill-box; transform-origin:center bottom; animation:journey-wildlife-stir 14.2s -11.7s ease-in-out infinite; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-onsen:is([data-stage="6"],[data-stage="7"]) .window-glow { animation:journey-lantern-breathe 6.9s -2.8s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-onsen[data-stage="7"] .tea-steam path { animation:journey-steam-rise 9.7s -5.9s ease-in-out infinite; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-onsen[data-stage="7"] .journey-lantern-light { animation:journey-lantern-breathe 7.4s -4.1s ease-in-out infinite alternate-reverse; }

/* Location 10: Crane Island — tidal reflection, reeds, cranes and sky flock. */
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-crane-island:not([data-stage="1"]) .lake-reeds { transform-box:fill-box; transform-origin:center bottom; animation:journey-foliage-breathe 14.1s -4.9s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-crane-island:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 9.3s -6.1s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-crane-island:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .crane-pair > g:first-child { transform-box:fill-box; transform-origin:center bottom; animation:journey-wildlife-stir 13.3s -8.7s ease-in-out infinite; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-crane-island:is([data-stage="6"],[data-stage="7"]) .window-glow { animation:journey-lantern-breathe 8.6s -5.6s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-crane-island[data-stage="7"] .crane-flock path { transform-box:fill-box; transform-origin:center; animation:journey-flock-drift 16.8s -9.3s ease-in-out infinite alternate; }

@keyframes journey-hanging-breathe { from { transform:rotate(-.28deg) translateX(-1px); } to { transform:rotate(.36deg) translateX(1px); } }
@keyframes journey-light-breathe { from { opacity:.58; } to { opacity:.86; } }
@keyframes journey-water-flow { to { stroke-dashoffset:-54; } }
@keyframes journey-steam-rise { 0%,100% { transform:translateY(0); opacity:.42; } 48% { transform:translate(-3px,-6px); opacity:.7; } 76% { transform:translate(2px,-9px); opacity:.48; } }
@keyframes journey-boat-bob { from { transform:translateY(-1px) rotate(-.2deg); } to { transform:translateY(2px) rotate(.25deg); } }
@keyframes journey-flock-drift { from { transform:translate(-2px,1px); opacity:.72; } to { transform:translate(6px,-3px); opacity:.92; } }
body.reduce-motion :is(.storybook-courtyard,.storybook-sanctuary,.storybook-mountain,.storybook-lakeside,.storybook-village,.storybook-cedar-pass,.storybook-plum-hollow,.storybook-onsen,.storybook-crane-island) *,
body[data-effects="off"] :is(.storybook-courtyard,.storybook-sanctuary,.storybook-mountain,.storybook-lakeside,.storybook-village,.storybook-cedar-pass,.storybook-plum-hollow,.storybook-onsen,.storybook-crane-island) * { animation:none !important; transition:none !important; }

/* Locations 11-20 animation propagation. Every scene starts from a static
   baseline, then restored environmental details opt into restrained motion. */
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) :is(.storybook-maple-terrace,.storybook-temple-steps,.storybook-rain-market,.storybook-snow-hamlet,.storybook-seaside-torii,.storybook-cloud-library,.storybook-wisteria-ravine,.storybook-rice-valley,.storybook-observatory,.storybook-returning-light) * { animation:none; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) :is(.storybook-maple-terrace,.storybook-temple-steps,.storybook-rain-market,.storybook-snow-hamlet,.storybook-seaside-torii,.storybook-cloud-library,.storybook-wisteria-ravine,.storybook-rice-valley,.storybook-observatory,.storybook-returning-light)[data-stage="2"] .journey-layer[data-stage="2"],
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) :is(.storybook-maple-terrace,.storybook-temple-steps,.storybook-rain-market,.storybook-snow-hamlet,.storybook-seaside-torii,.storybook-cloud-library,.storybook-wisteria-ravine,.storybook-rice-valley,.storybook-observatory,.storybook-returning-light)[data-stage="3"] .journey-layer[data-stage="3"],
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) :is(.storybook-maple-terrace,.storybook-temple-steps,.storybook-rain-market,.storybook-snow-hamlet,.storybook-seaside-torii,.storybook-cloud-library,.storybook-wisteria-ravine,.storybook-rice-valley,.storybook-observatory,.storybook-returning-light)[data-stage="4"] .journey-layer[data-stage="4"],
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) :is(.storybook-maple-terrace,.storybook-temple-steps,.storybook-rain-market,.storybook-snow-hamlet,.storybook-seaside-torii,.storybook-cloud-library,.storybook-wisteria-ravine,.storybook-rice-valley,.storybook-observatory,.storybook-returning-light)[data-stage="5"] .journey-layer[data-stage="5"],
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) :is(.storybook-maple-terrace,.storybook-temple-steps,.storybook-rain-market,.storybook-snow-hamlet,.storybook-seaside-torii,.storybook-cloud-library,.storybook-wisteria-ravine,.storybook-rice-valley,.storybook-observatory,.storybook-returning-light)[data-stage="6"] .journey-layer[data-stage="6"],
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) :is(.storybook-maple-terrace,.storybook-temple-steps,.storybook-rain-market,.storybook-snow-hamlet,.storybook-seaside-torii,.storybook-cloud-library,.storybook-wisteria-ravine,.storybook-rice-valley,.storybook-observatory,.storybook-returning-light)[data-stage="7"] .journey-layer[data-stage="7"] { animation:journey-restoration-reveal .78s cubic-bezier(.2,.72,.25,1) both; }

/* Location 11: Maple Moon Terrace. */
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-maple-terrace:not([data-stage="1"]) .storybook-canopy { transform-box:fill-box; transform-origin:center bottom; animation:journey-foliage-breathe 14.8s -7.2s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-maple-terrace:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 8.7s -3.4s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-maple-terrace:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .maple-owl > g { transform-box:fill-box; transform-origin:center bottom; animation:journey-wildlife-stir 15.4s -11.2s ease-in-out infinite; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-maple-terrace:is([data-stage="6"],[data-stage="7"]) .storybook-pavilion { animation:journey-light-breathe 9.6s -4.8s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-maple-terrace[data-stage="7"] .maple-leaves circle { animation:journey-petal-drift 16.2s -9.4s ease-in-out infinite; }

/* Location 12: Hidden Temple Steps. */
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-temple-steps:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 8.2s -5.1s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-temple-steps:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .temple-deer > g { transform-box:fill-box; transform-origin:center bottom; animation:journey-wildlife-stir 16.1s -12.6s ease-in-out infinite; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-temple-steps:is([data-stage="6"],[data-stage="7"]) .temple { animation:journey-light-breathe 10.1s -5.7s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-temple-steps[data-stage="7"] .mist-one { animation:journey-mist-drift 23s -8s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-temple-steps[data-stage="7"] .mist-two { animation:journey-mist-drift 29s -18s ease-in-out infinite alternate-reverse; }

/* Location 13: Rainy Market Street. */
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-rain-market:not([data-stage="1"]) .market-awnings { transform-box:fill-box; transform-origin:center top; animation:journey-hanging-breathe 13.9s -8.1s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-rain-market:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 7.9s -4.3s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-rain-market:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .umbrella-visitors { transform-box:fill-box; transform-origin:center bottom; animation:journey-wildlife-stir 13.1s -9.8s ease-in-out infinite; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-rain-market:is([data-stage="6"],[data-stage="7"]) .clock-pavilion { animation:journey-light-breathe 8.8s -3.2s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-rain-market[data-stage="7"] .journey-rain { animation:journey-rain-fall 6.8s -2.9s linear infinite; }

/* Location 14: Snow Lantern Hamlet. */
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-snow-hamlet:not([data-stage="1"]) .storybook-pine { transform-box:fill-box; transform-origin:center bottom; animation:journey-foliage-breathe 17.2s -10.3s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-snow-hamlet:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 11.2s -6.4s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-snow-hamlet:is([data-stage="6"],[data-stage="7"]) .window-glow { animation:journey-lantern-breathe 7.6s -4.9s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-snow-hamlet[data-stage="7"] .journey-snow circle { animation:journey-snow-fall 17.8s -11.6s linear infinite; }

/* Location 15: Seaside Torii. */
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-seaside-torii:not([data-stage="1"]) .storybook-pine { transform-box:fill-box; transform-origin:center bottom; animation:journey-foliage-breathe 15.3s -6.7s ease-in-out infinite alternate-reverse; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-seaside-torii:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 7.7s -3.9s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-seaside-torii:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .shorebirds { transform-box:fill-box; transform-origin:center; animation:journey-flock-drift 17.4s -12.1s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-seaside-torii:is([data-stage="6"],[data-stage="7"]) .cliff-shrine { animation:journey-light-breathe 9.4s -6.1s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-seaside-torii[data-stage="7"] .sunset-waves .storybook-waterfall { stroke-dasharray:20 13; animation:journey-water-flow 7.2s linear infinite; }

/* Location 16: Cloud Library. */
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-cloud-library:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 9.2s -5.8s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-cloud-library:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .cloud-paper-birds { transform-box:fill-box; transform-origin:center; animation:journey-flock-drift 18.3s -13.4s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-cloud-library:is([data-stage="6"],[data-stage="7"]) .cloud-library-landmark { animation:journey-light-breathe 10.7s -7.2s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-cloud-library[data-stage="7"] .cloud-library-glow { animation:journey-lantern-breathe 8.6s -3.6s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-cloud-library[data-stage="7"] .cloud-windows path { animation:journey-mist-drift 27s -16s ease-in-out infinite alternate; }

/* Location 17: Wisteria Ravine. */
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-wisteria-ravine:not([data-stage="1"]) .wisteria-vines { transform-box:fill-box; transform-origin:center top; animation:journey-hanging-breathe 15.7s -9.6s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-wisteria-ravine:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 8.4s -2.1s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-wisteria-ravine:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .wisteria-swallows { transform-box:fill-box; transform-origin:center; animation:journey-flock-drift 15.9s -10.7s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-wisteria-ravine:is([data-stage="6"],[data-stage="7"]) .wisteria-pavilion { animation:journey-light-breathe 9.9s -5.4s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-wisteria-ravine[data-stage="7"] .wisteria-curtains circle { animation:journey-petal-drift 18.1s -12.8s ease-in-out infinite; }

/* Location 18: Golden Rice Valley. */
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-rice-valley:not([data-stage="1"]) .rice-paddies { transform-box:fill-box; transform-origin:center bottom; animation:journey-field-wave 12.8s -7.7s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-rice-valley:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 8.8s -4.7s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-rice-valley:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .rice-egrets > g:first-child { transform-box:fill-box; transform-origin:center bottom; animation:journey-wildlife-stir 14.9s -10.4s ease-in-out infinite; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-rice-valley:is([data-stage="6"],[data-stage="7"]) .window-glow { animation:journey-lantern-breathe 8.4s -5.5s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-rice-valley[data-stage="7"] .rice-golden-fields { animation:journey-field-wave 15.6s -11.3s ease-in-out infinite alternate-reverse; }

/* Location 19: Starlight Observatory. */
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-observatory:not([data-stage="1"]) .storybook-pine { transform-box:fill-box; transform-origin:center bottom; animation:journey-foliage-breathe 17.6s -8.8s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-observatory:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 10.1s -6.9s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-observatory:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .observatory-owl > g { transform-box:fill-box; transform-origin:center bottom; animation:journey-wildlife-stir 17.8s -14.1s ease-in-out infinite; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-observatory:is([data-stage="6"],[data-stage="7"]) .observatory-landmark { animation:journey-light-breathe 11.3s -4.2s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-observatory[data-stage="7"] .observatory-meteors > path { animation:journey-meteor-pass 21s -15s ease-in-out infinite; }

/* Location 20: Garden of Returning Light. Familiar motifs move sparingly. */
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-returning-light:not([data-stage="1"]) :is(.storybook-canopy,.storybook-pine) { transform-box:fill-box; transform-origin:center bottom; animation:journey-foliage-breathe 18.2s -12.3s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-returning-light:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .water-ripple { animation:journey-water-breathe 9.7s -5.2s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-returning-light:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"]) .journey-lantern-light { animation:journey-lantern-breathe 8.9s -6.6s ease-in-out infinite alternate; }
:is(body[data-effects="lively"],body[data-effects="full"]) .storybook-returning-light:is([data-stage="5"],[data-stage="6"],[data-stage="7"]) .returning-birds { transform-box:fill-box; transform-origin:center; animation:journey-flock-drift 19.6s -13.7s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-returning-light[data-stage="7"] .returning-light-glow { animation:journey-lantern-breathe 10.8s -7.1s ease-in-out infinite alternate; }
:is(body[data-effects="gentle"],body[data-effects="lively"],body[data-effects="full"]) .storybook-returning-light[data-stage="7"] .returning-dawn > path { animation:journey-light-breathe 12.7s -9.2s ease-in-out infinite alternate; }

@keyframes journey-rain-fall { 0%,100% { transform:translate(0,-3px); opacity:.48; } 52% { transform:translate(-4px,8px); opacity:.76; } }
@keyframes journey-snow-fall { 0%,100% { transform:translate(0,-2px); opacity:.6; } 48% { transform:translate(6px,7px); opacity:.82; } 78% { transform:translate(-3px,12px); opacity:.66; } }
@keyframes journey-field-wave { from { transform:skewX(-.35deg) translateX(-1px); } to { transform:skewX(.45deg) translateX(1px); } }
@keyframes journey-meteor-pass { 0%,68%,100% { transform:translate(0,0); opacity:.64; } 73% { transform:translate(7px,-4px); opacity:.94; } 80% { transform:translate(12px,-7px); opacity:.56; } }
body.reduce-motion :is(.storybook-maple-terrace,.storybook-temple-steps,.storybook-rain-market,.storybook-snow-hamlet,.storybook-seaside-torii,.storybook-cloud-library,.storybook-wisteria-ravine,.storybook-rice-valley,.storybook-observatory,.storybook-returning-light) *,
body[data-effects="off"] :is(.storybook-maple-terrace,.storybook-temple-steps,.storybook-rain-market,.storybook-snow-hamlet,.storybook-seaside-torii,.storybook-cloud-library,.storybook-wisteria-ravine,.storybook-rice-valley,.storybook-observatory,.storybook-returning-light) * { animation:none !important; transition:none !important; }
/* Shared Journey portrait shell: Location 1 established this approved wide
   presentation contract. Every restored location uses it without changing
   its artwork, SVG framing, desktop layout, or landscape composition. */
@media (max-width:620px) {
  html[data-mobile-runtime="true"] .journey-panel:has(.garden-scene .storybook-scene) {
    margin:10px -10px 18px;
    padding:12px 10px 14px;
    border-radius:0;
  }
  html[data-mobile-runtime="true"] .journey-panel:has(.garden-scene .storybook-scene) .section-heading { gap:8px; }
  html[data-mobile-runtime="true"] .journey-panel:has(.garden-scene .storybook-scene) .section-heading h2 { font-size:clamp(1.35rem,6.2vw,1.75rem); }
  html[data-mobile-runtime="true"] .journey-panel:has(.garden-scene .storybook-scene) .section-heading strong { font-size:.78rem; white-space:nowrap; }
  html[data-mobile-runtime="true"] .journey-panel:has(.garden-scene .storybook-scene) .journey-map-control {
    grid-template-columns:auto minmax(0,1fr);
    gap:8px;
    margin-top:8px;
  }
  html[data-mobile-runtime="true"] .journey-panel:has(.garden-scene .storybook-scene) .journey-map-control select { min-height:38px; }
  html[data-mobile-runtime="true"] .garden-scene:has(.storybook-scene) {
    width:calc(100% + 20px);
    min-height:0;
    margin:10px -10px 8px;
    border-inline:0;
    border-radius:0;
  }
  html[data-mobile-runtime="true"] .storybook-scene {
    display:block;
    width:100%;
    min-height:0;
    /* The approved shallow cinematic viewport enlarges each illustration
       without distortion; centered meet framing keeps its landmarks together. */
    aspect-ratio:2 / 1;
  }
  html[data-mobile-runtime="true"] .journey-panel:has(.garden-scene .storybook-scene) #gardenProgressText { margin:7px 0; font-size:.9rem; }
  html[data-mobile-runtime="true"] .journey-panel:has(.garden-scene .storybook-scene) progress { height:10px; }
  html[data-mobile-runtime="true"] .journey-panel:has(.garden-scene .storybook-scene) .journey-explore-button { min-height:40px; margin-top:7px; }
}

/* A short mobile landscape viewport gets its own compact shell. This query is
   deliberately height- and pointer-scoped so wide desktop windows are untouched. */
@media (orientation:landscape) and (max-height:620px) {
  html[data-mobile-runtime="true"] .journey-panel:has(.garden-scene[data-journey-chapter="garden"]) {
    display:grid;
    grid-template-columns:minmax(170px,.72fr) minmax(0,2.28fr);
    grid-template-areas:
      "heading scene"
      "map scene"
      "status scene"
      "progress scene"
      "explore scene";
    align-items:center;
    gap:5px 12px;
    margin:8px 0 12px;
    padding:10px;
    border-radius:14px;
  }
  html[data-mobile-runtime="true"] .journey-panel:has(.garden-scene[data-journey-chapter="garden"]) .section-heading { grid-area:heading; }
  html[data-mobile-runtime="true"] .journey-panel:has(.garden-scene[data-journey-chapter="garden"]) .journey-map-control { grid-area:map; grid-template-columns:1fr; margin:0; gap:2px; }
  html[data-mobile-runtime="true"] .journey-panel:has(.garden-scene[data-journey-chapter="garden"]) #gardenProgressText { grid-area:status; margin:0; font-size:.78rem; }
  html[data-mobile-runtime="true"] .journey-panel:has(.garden-scene[data-journey-chapter="garden"]) progress { grid-area:progress; }
  html[data-mobile-runtime="true"] .journey-panel:has(.garden-scene[data-journey-chapter="garden"]) .journey-explore-button { grid-area:explore; min-height:36px; margin:0; padding:5px 8px; font-size:.76rem; }
  html[data-mobile-runtime="true"] .garden-scene:has(.storybook-garden-poc) {
    grid-area:scene;
    width:100%;
    min-height:0;
    margin:0;
    border:2px solid color-mix(in srgb, var(--accent) 52%, #efe0b9);
    border-radius:14px;
  }
}
.garden-feature:focus-visible { outline: 4px solid #fff; outline-offset: 4px; filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 8px #0a7160); }
.garden-stage-1 .feature-sprout,
.garden-stage-2 :is(.feature-sprout,.feature-grass,.feature-flowers),
.garden-stage-3 :is(.feature-sprout,.feature-grass,.feature-flowers,.feature-pond),
.garden-stage-4 :is(.feature-sprout,.feature-grass,.feature-flowers,.feature-pond,.feature-lanterns,.feature-bird),
.garden-stage-5 :is(.feature-sprout,.feature-grass,.feature-flowers,.feature-pond,.feature-lanterns,.feature-bird,.feature-tree,.feature-bridge),
.garden-stage-6 .garden-feature,
.garden-stage-7 .garden-feature { opacity: 1; pointer-events: auto; }
.garden-stage-6 .feature-pavilion { opacity: 0; pointer-events: none; }
.feature-sprout, .feature-grass { fill: none; stroke: #286f45; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.feature-flowers .stem { fill: none; stroke: #347c4d; stroke-width: 5; }
.flower { fill: #ef7790; }.flower-two { fill: #d895e8; }.flower .center { fill: #f7d45d; }
.pond-ripple { fill: none; stroke: rgba(255,255,255,.78); stroke-width: 3; stroke-linecap: round; }
.lotus { fill: #ef91b1; stroke: #3e8d63; stroke-width: 2; }
.post { fill: none; stroke: #604a35; stroke-width: 7; stroke-linecap: round; }.lantern-glow { fill: #ffd867; filter: drop-shadow(0 0 8px #ffd867); }.lantern-frame { fill: none; stroke: #9d4c35; stroke-width: 4; }
.bird-body { fill: #d34f5d; }.bird-wing { fill: #9f3445; }.bird-beak { fill: #e5b240; }.bird-legs { fill: none; stroke: #5d4431; stroke-width: 3; }
.tree-trunk { fill: none; stroke: #72503a; stroke-width: 11; stroke-linecap: round; }.tree-crown { fill: #6da55c; }.tree-blossoms { fill: #f297ad; }
.bridge-rail { fill: none; stroke: #b34e3e; stroke-width: 5; }.bridge-deck { fill: #c66b50; stroke: #7c3e32; stroke-width: 3; }
.firefly { fill: #fff5a5; filter: drop-shadow(0 0 6px #fff081); }.firefly-1,.firefly-4,.firefly-7 { animation-delay: -.8s; }.firefly-2,.firefly-5 { animation-delay: -1.5s; }
.pavilion-roof { fill: #315d54; stroke: #193b35; stroke-width: 3; }.pavilion-frame { fill: none; stroke: #8d4938; stroke-width: 8; }.pavilion-floor { fill: #9d6048; }
.garden-stage-6 .garden-sky, .garden-stage-7 .garden-sky { fill: #7ba9ad; opacity: .85; }.garden-stage-6 .garden-sun, .garden-stage-7 .garden-sun { fill: #fff4c5; }
.garden-path { fill: none; stroke: #dfc79b; stroke-width: 17; stroke-linecap: round; stroke-dasharray: 5 7; }.garden-path-marker { fill: #e9dfc7; stroke: #567365; stroke-width: 3; filter: none; }
.garden-next { position: absolute; right: 10px; bottom: 9px; padding: 5px 10px; border-radius: 999px; color: #173a32; background: rgba(255,255,255,.88); box-shadow: 0 2px 10px rgba(0,0,0,.12); font-size: .74rem; font-weight: 800; }.garden-next span { color: #81621c; }
body[data-effects="lively"] .garden-feature, body[data-effects="full"] .garden-feature { animation: garden-arrive .8s cubic-bezier(.2,.8,.2,1) both; }
body[data-effects="lively"] .lantern-glow, body[data-effects="full"] .lantern-glow { animation: garden-lantern-glow 2.7s ease-in-out infinite alternate; }
body[data-effects="lively"] .pond-ripple, body[data-effects="full"] .pond-ripple { stroke-dasharray: 22 8; animation: pond-shimmer 4.2s linear infinite; }
body[data-effects="lively"] .bird-wing, body[data-effects="full"] .bird-wing { transform-box: fill-box; transform-origin: right center; animation: bird-wing-breathe 2.4s ease-in-out infinite alternate; }
body[data-effects="lively"] .firefly, body[data-effects="full"] .firefly { animation: firefly-glow 2.2s ease-in-out infinite alternate; }
body[data-effects="lively"] .garden-path-marker, body[data-effects="full"] .garden-path-marker { animation: path-marker-breathe 2.6s ease-in-out infinite alternate; }
body[data-effects="full"] .feature-flowers .flower, body[data-effects="full"] .feature-tree :is(.tree-crown,.tree-blossoms) { transform-box: fill-box; transform-origin: center bottom; animation: garden-sway 3.5s ease-in-out infinite alternate; }
body[data-effects="full"] .feature-bird { animation: bird-hop 2.8s ease-in-out infinite; }
@keyframes garden-arrive { from { opacity: 0; transform: translateY(14px) scale(.86); } }
@keyframes garden-sway { to { transform: rotate(1.5deg); } }
@keyframes bird-hop { 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes bird-wing-breathe { to { transform: rotate(-7deg); } }
@keyframes garden-lantern-glow { to { filter: drop-shadow(0 0 14px #fff1a0); opacity: .82; } }
@keyframes pond-shimmer { to { stroke-dashoffset: -60; opacity: .55; } }
@keyframes path-marker-breathe { to { fill: #f5edda; transform: translateY(-2px); } }
@keyframes firefly-glow { to { opacity: .3; transform: translateY(-4px); } }
.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; }
body[data-contrast="high"] .achievement-card { border-width: 3px; opacity: 1; }
body[data-contrast="high"] .achievement-group-title,
body[data-contrast="high"] :is(.journey-feature,.garden-feature):focus-visible { outline-color: currentColor; border-color: currentColor; }
body[data-preset="lowvision"] .achievement-card,
body[data-preset="large"] .achievement-card,
body[data-preset="maximum"] .achievement-card { grid-template-columns: 72px minmax(0, 1fr); font-size: 1.08rem; }
@media (forced-colors: active) {
  * { forced-color-adjust: auto; }
  :focus-visible { outline: 4px solid Highlight !important; outline-offset: 3px; }
  .tile, .tile.free, .tile.blocked, .tile.selected, .tile.hinted { border: 2px solid ButtonText; color: ButtonText; background: ButtonFace; box-shadow: none; opacity: 1; }
  .tile.selected { outline: 4px solid Highlight; }
  .tile.hinted::after { content: "HINT"; color: HighlightText; background: Highlight; }
  .achievement-group-title:focus-visible, :is(.journey-feature,.garden-feature):focus-visible { outline: 4px solid Highlight; }
  .achievement-card, .achievement-card.complete, .achievement-card.locked { border: 2px solid CanvasText; background: Canvas; color: CanvasText; opacity: 1; }
  .achievement-card .badge-mark, .achievement-card.complete .badge-mark { border: 2px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  .seasonal-keepsake, .seasonal-keepsake.locked { border: 2px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; opacity: 1; }
  .seasonal-keepsake .keepsake-pin, .seasonal-keepsake.locked .keepsake-pin { border: 3px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; filter: none; }
  .seasonal-keepsake strong, .seasonal-keepsake small { color: CanvasText; }
  .seasonal-keepsake.locked .keepsake-lock, .seasonal-keepsake.locked .keepsake-lock::before { border-color: CanvasText; background: Canvas; box-shadow: none; }
  .weekly-event-card, .weekly-keepsake-cabinet, .weekly-keepsake, .weekly-reward-preview, .weekly-keepsake-detail-art { border: 2px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; opacity: 1; }
  .weekly-keepsake-select { color: ButtonText; background: ButtonFace; }
  .weekly-keepsake-detail-dialog { border: 2px solid CanvasText; color: CanvasText; background: Canvas; }
  .weekly-keepsake strong, .weekly-keepsake small, .weekly-event-countdown, .weekly-reward-preview small { color: CanvasText; }
}

/* --------------------------------------------------------------------------
   v0.9.8 RC mobile composition
   --------------------------------------------------------------------------
   A purpose-built presentation of the existing game for real phone runtimes.
   Every selector is gated by the pre-style mobile runtime flag, so the
   approved desktop composition, geometry, typography, and controls cannot
   inherit these rules at narrow desktop window sizes. */
html[data-mobile-runtime="true"] body main {
  min-height: var(--mobile-vh, 100dvh);
  padding:
    max(12px, calc(env(safe-area-inset-top) + 8px))
    max(8px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
}
html[data-mobile-runtime="true"] body[data-display-mode="standalone"] main {
  padding-top: max(14px, calc(env(safe-area-inset-top) + 10px));
}
html[data-mobile-runtime="true"] body .topbar {
  min-height: 46px;
  padding: 0 5px 6px;
}
html[data-mobile-runtime="true"] body .topbar h1 {
  max-width: 7.2rem;
  font-size: clamp(1.15rem, 5.4vw, 1.45rem) !important;
}
html[data-mobile-runtime="true"] body .topbar-actions {
  gap: 7px;
}
html[data-mobile-runtime="true"] body .topbar-actions .round-button {
  min-height: 42px;
  padding-inline: clamp(10px, 3.4vw, 15px);
  font-size: clamp(.72rem, 3.45vw, .9rem);
}
html[data-mobile-runtime="true"] body .status-panel {
  min-height: 38px;
  margin-inline: 0 !important;
  padding: 6px 11px 11px;
  border-radius: 18px 18px 0 0;
}
html[data-mobile-runtime="true"] body #status {
  font-size: clamp(.76rem, 3.25vw, .9rem);
}
html[data-mobile-runtime="true"] body .counter {
  font-size: clamp(.78rem, 3.3vw, .92rem);
}
html[data-mobile-runtime="true"] body .board {
  border-radius: 14px 14px 5px 5px;
}
html[data-mobile-runtime="true"] body .controls {
  gap: 9px;
  padding: 10px 8px max(10px, env(safe-area-inset-bottom)) !important;
  border-radius: 0 0 22px 22px;
}
html[data-mobile-runtime="true"] body .controls button {
  min-height: 58px;
  border-width: 2px;
  border-radius: 17px;
  font-size: clamp(.96rem, 4.5vw, 1.16rem);
}

/* In landscape the board and controls become one deliberate game surface.
   The existing elements move; no duplicate controls or alternate game exist. */
@media (orientation: landscape) {
  html[data-mobile-runtime="true"] body main {
    display: grid;
    width: 100%;
    max-width: none;
    height: var(--mobile-vh, 100dvh);
    min-height: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) clamp(174px, 27vw, 230px);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "header header"
      "status controls"
      "board controls"
      "board guide";
    gap: 0 10px;
    padding:
      max(5px, env(safe-area-inset-top))
      max(9px, env(safe-area-inset-right))
      max(7px, env(safe-area-inset-bottom))
      max(9px, env(safe-area-inset-left));
  }
  html[data-mobile-runtime="true"] body .topbar {
    grid-area: header;
    min-height: 38px;
    padding-bottom: 3px;
  }
  html[data-mobile-runtime="true"] body .topbar h1 {
    max-width: none;
    font-size: clamp(1rem, 3.3vh, 1.35rem) !important;
    white-space: nowrap;
  }
  html[data-mobile-runtime="true"] body .topbar-actions .round-button {
    min-height: 34px;
    font-size: clamp(.68rem, 2.5vh, .84rem);
  }
  html[data-mobile-runtime="true"] body .status-panel {
    grid-area: status;
    z-index: 5;
    min-height: 34px;
    margin: 0 -4px -7px 0 !important;
    border-right: 0;
    border-radius: 16px 0 0 0;
  }
  html[data-mobile-runtime="true"] body .board-scroll {
    grid-area: board;
    align-self: stretch;
    display: flex;
    min-height: 0;
    height: 100%;
  }
  html[data-mobile-runtime="true"] body .board {
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px 0 0 12px;
  }
  html[data-mobile-runtime="true"] body .controls {
    grid-area: controls;
    align-self: stretch;
    display: grid;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(111, 224, 194, .28);
    border-radius: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(48px, 1fr));
  }
  html[data-mobile-runtime="true"] body .controls button {
    min-width: 0;
    min-height: 48px;
    padding-inline: 3px;
    overflow-wrap: anywhere;
    font-size: clamp(.78rem, 3.2vh, 1rem);
  }
  html[data-mobile-runtime="true"] body .mobile-tile-guide-button {
    grid-area: guide;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    margin: 7px 0 0;
  }
  html[data-mobile-runtime="true"] body .tile-preview,
  html[data-mobile-runtime="true"] body .help {
    position: fixed;
    z-index: 120;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    width: min(340px, 46vw);
  }
  html[data-mobile-runtime="true"] body .help:not([open]),
  html[data-mobile-runtime="true"] body .tile-preview[hidden] {
    display: none;
  }
}
.game-notices { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px 12px; margin: 18px auto 8px; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); color: color-mix(in srgb, var(--ink) 72%, transparent); font-size: .72rem; font-weight: 800; text-align: center; }
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 (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .celebration-petals, .bloom:not(.stationary-bloom), .match-ghost { display: none !important; }
}

@media (max-width: 320px) {
  main { padding-inline: 6px; }
  .statistics-grid { grid-template-columns: 1fr; }
  .achievement-card { grid-template-columns: 56px minmax(0, 1fr); }
  dialog form, .achievements-dialog-content, .statistics-dialog-content, .seasonal-garden-dialog-content { padding: 14px; }
}

@media (max-width: 640px) {
  main { padding: max(10px, env(safe-area-inset-top)) 10px max(20px, env(safe-area-inset-bottom)); }
  .topbar { align-items: center; flex-wrap: wrap; gap: 8px 12px; }
  .topbar > div:first-child { flex: 1 1 190px; min-width: 0; }
  .topbar h1 { font-size: clamp(2rem, 9vw, 2.7rem); line-height: .96; }
  .topbar .eyebrow { font-size: .75rem; }
  .topbar-actions { flex: 1 1 100%; width: 100%; gap: 7px; }
  .topbar-actions .round-button { flex: 1 1 0; min-width: 0; }
  .status-panel { gap: 6px; margin: 12px 0 7px; }
  .board-scroll { max-height: min(var(--board-visible-height, calc(var(--mobile-vh, 100dvh) - 235px)), 560px); overflow: auto; scroll-padding: 8px; }
  .board { max-width: none; aspect-ratio: 1.2; border-radius: 20px; }
  .tile { border-radius: 12%; }
  .tile-glyph { font-size: clamp(calc(.82rem * var(--tile-size-scale, 1)), calc(4.9vw * var(--tile-size-scale, 1)), calc(1.35rem * var(--tile-size-scale, 1))); }
  .shorthand-face.character .tile-glyph,
  .shorthand-face.dot .tile-glyph,
  .shorthand-face.bamboo .tile-glyph { font-size: clamp(calc(.64rem * var(--tile-size-scale, 1)), calc(3.35vw * var(--tile-size-scale, 1)), calc(.92rem * var(--tile-size-scale, 1))); }
  .character-face { font-size: clamp(calc(.62rem * var(--tile-size-scale, 1)), calc(3.25vw * var(--tile-size-scale, 1)), calc(.9rem * var(--tile-size-scale, 1))); }
  .pip { width: clamp(calc(3px * var(--tile-size-scale, 1)), calc(1.65vw * var(--tile-size-scale, 1)), calc(6px * var(--tile-size-scale, 1))); }
  .pip-count-1 .pip { width: clamp(calc(7px * var(--tile-size-scale, 1)), calc(3vw * var(--tile-size-scale, 1)), calc(11px * var(--tile-size-scale, 1))); }
  .bamboo-stick { width: clamp(calc(2px * var(--tile-size-scale, 1)), calc(.9vw * var(--tile-size-scale, 1)), calc(4px * var(--tile-size-scale, 1))); }
  .readability-marker { top: 2px; left: 2px; font-size: clamp(calc(.34rem * var(--tile-size-scale, 1)), calc(1.7vw * var(--tile-size-scale, 1)), calc(.52rem * var(--tile-size-scale, 1))); }
  .controls { grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 7px auto 12px; }
  .controls button { min-height: 50px; }
  .challenge-grid, .achievement-tier-grid { grid-template-columns: 1fr; }
  .achievement-heading { align-items: stretch; flex-direction: column; }
  #achievementFilter { width: 100%; min-width: 0; align-self: stretch; }
  .journey-map-control { grid-template-columns: 1fr; }
  .statistics-grid { grid-template-columns: repeat(2, 1fr); }
  .status-panel { align-items: flex-start; font-size: .9rem; }
  .tile-preview { grid-template-columns: 42px 1fr; gap: 9px; padding: 8px 10px; margin: 7px 0; }
  .tile-preview p { margin: 2px 0 0; font-size: .82rem; line-height: 1.25; }
  .preview-face { width: 38px; height: 44px; font-size: 1.05rem; }
  .board-summary { grid-template-columns: repeat(2, 1fr); }
  .slot-buttons { grid-template-columns: 1fr; }
  .seasonal-welcome-card { padding: 20px; }
  .seasonal-welcome-card .dialog-heading { align-items: stretch; flex-direction: column-reverse; }
  .seasonal-welcome-card .close-button { align-self: flex-end; }
  .season-welcome-art { min-height: clamp(120px, 28dvh, 170px); }
  .game-options { align-items: center; flex-direction: row; gap: 8px; }
  .layout-picker { flex-direction: column; align-items: flex-start; gap: 2px; }
  .layout-picker select { min-height: 40px; max-width: 145px; }
  dialog, .achievements-dialog, .statistics-dialog, .seasonal-garden-dialog { max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px); max-height: calc(var(--mobile-vh, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .celebration { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .celebration-card { max-height: calc(var(--mobile-vh, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px); padding: 22px; overflow-y: auto; }
}
.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); }
.support-inbox { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--jade); }
.support-messages { display: grid; gap: .7rem; max-height: 20rem; overflow: auto; }
.support-message { padding: .8rem; border: 1px solid var(--jade); border-radius: .8rem; background: color-mix(in srgb, var(--paper) 92%, var(--jade)); }
.support-message-keeper { border-inline-start-width: .4rem; }
.support-message h4, .support-message p { margin: 0 0 .35rem; }
.support-message time { color: var(--muted); font-size: .9rem; }
.bot-field { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.turnstile-slot { min-height: 65px; }
.recovery-queue-panel { margin: 18px 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.recovery-queue-panel p { margin-bottom: 0; }
.recovery-queue-panel .settings-action { margin-top: 10px; }
.recovery-code { display: block; margin: 12px 0; padding: 12px; border: 2px solid var(--accent); border-radius: 10px; background: var(--panel); font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }
.account-panel { max-height: min(72vh, 680px); overflow-y: auto; overscroll-behavior: contain; padding: 0 2px 6px; }
.account-panel h3 { margin: 24px 0 8px; font-family: Georgia, serif; }
.account-panel > p { line-height: 1.5; }
.account-panel input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid var(--accent); border-radius: 10px; color: var(--ink); background: var(--panel); font: inherit; }
.account-panel output { margin-top: 0; font-weight: 700; }
.danger-zone { margin-top: 24px; padding: 13px; border: 2px solid #a43c30; border-radius: 12px; }
.danger-zone summary { cursor: pointer; font-weight: 900; }
.danger { width: 100%; min-height: 50px; margin-top: 16px; border: 2px solid #a43c30; border-radius: 12px; color: #fff; background: #8f3026; font-weight: 900; }

/* Mobile/PWA foundation shared by Safari, Chrome, iPhone and Android wrappers. */
html { min-height: 100%; background: var(--background, #14201c); -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); overscroll-behavior-y: none; }
button, select, input, textarea { touch-action: manipulation; }
.board-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; }
.controls { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
.update-banner { bottom: max(18px, env(safe-area-inset-bottom)); }
@media (hover: none) and (pointer: coarse) {
  button, select, input:not([type="range"]) { min-height: 48px; }
  .tile { -webkit-tap-highlight-color: transparent; }
}

/* Mobile-browser comfort treatment. Detection is applied in game.js so resizing a desktop window cannot enable it. */
body[data-mobile-browser="true"] {
  background-color: #173127;
  background-image:
    linear-gradient(rgba(20, 55, 42, .82), rgba(12, 37, 29, .9)),
    url("garden-background.webp");
}

/* Mobile-first RC recovery proof of concept. Every visible rule is gated by
   runtime phone detection; narrow desktop windows and desktop PWAs keep the
   established desktop presentation. */
.mobile-tile-guide-button,
.mobile-board-complete { display: none; }

body[data-mobile-recovery="true"] {
  --mobile-stage: #153b2f;
  --mobile-stage-deep: #0d281f;
  --mobile-line: rgba(123, 225, 197, .42);
  background:
    linear-gradient(180deg, rgba(18, 63, 47, .82), rgba(8, 30, 23, .96)),
    url("garden-background.webp") center / cover fixed;
}
body[data-mobile-recovery="true"] main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-height: 100dvh;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
body[data-mobile-recovery="true"][data-display-mode="standalone"] main {
  padding-top: max(12px, calc(env(safe-area-inset-top) + 6px));
}
body[data-mobile-recovery="true"] .topbar {
  order: 1;
  min-height: 48px;
  padding: 2px 2px 5px;
  flex-wrap: nowrap;
  gap: 8px;
}
body[data-mobile-recovery="true"] .topbar > div:first-child { flex: 1 1 auto; min-width: 0; }
body[data-mobile-recovery="true"] .topbar .eyebrow { display: none; }
body[data-mobile-recovery="true"] .topbar h1 {
  overflow: hidden;
  font-size: clamp(1.28rem, 6.4vw, 1.72rem);
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 2px rgba(0,0,0,.25);
  white-space: nowrap;
}
body[data-mobile-recovery="true"] .topbar-actions {
  flex: 0 1 auto;
  width: auto;
  flex-wrap: nowrap;
  gap: 6px;
}
body[data-mobile-recovery="true"] .topbar-actions .round-button {
  min-height: 42px;
  padding: 0 10px;
  border-width: 1.5px;
  font-size: clamp(.7rem, 3.15vw, .86rem);
  line-height: 1.05;
}
body[data-mobile-recovery="true"] .status-panel {
  order: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  min-height: 36px;
  margin: 0;
  padding: 4px 5px 6px;
}
body[data-mobile-recovery="true"] #status {
  min-height: 0;
  overflow: hidden;
  font-size: .78rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-mobile-recovery="true"] .game-options { flex-wrap: nowrap; gap: 7px; }
body[data-mobile-recovery="true"] #fitBoardButton {
  display: none;
}
body[data-mobile-recovery="true"] .counter { font-size: .76rem; white-space: nowrap; }
body[data-mobile-recovery="true"] .board-scroll {
  order: 3;
  width: calc(100% + 4px);
  margin-inline: -2px;
  padding: 2px 0 6px;
  overflow: hidden;
  scrollbar-gutter: auto;
}
body[data-mobile-recovery="true"] .board {
  width: 100%;
  max-width: none;
  aspect-ratio: .9;
  border: 2px solid rgba(125, 225, 197, .62);
  border-radius: 24px;
  background:
    radial-gradient(circle at 52% 36%, rgba(137, 217, 164, .26), transparent 48%),
    linear-gradient(160deg, #28745a, #154d3c 62%, #12382e);
  box-shadow: inset 0 0 28px rgba(4, 27, 20, .34), 0 10px 24px rgba(0,0,0,.26);
}
body[data-mobile-recovery="true"] .tile {
  border-color: #9d733c;
  color: #1d2a24;
  background: linear-gradient(145deg, #fffdf6 0%, #f4e6c7 88%);
  box-shadow: 2px 3px 0 #8c6433, 3px 6px 9px rgba(3,20,14,.44), inset 0 0 0 2px rgba(255,255,255,.56);
}
body[data-mobile-recovery="true"] .tile:not(:disabled) {
  border-color: #d1a455;
  background: linear-gradient(145deg, #fffef8, #f7eaca 88%);
  box-shadow: 2px 4px 0 #966a32, 4px 8px 12px rgba(3,18,13,.48), inset 0 0 0 2px rgba(255,255,255,.7);
}
body[data-mobile-recovery="true"] .tile:disabled {
  opacity: .68;
  filter: saturate(.48) brightness(.74);
}
/* Family identity must survive the generic mobile free/blocked treatment. */
body[data-mobile-recovery="true"] .tile.character { color: #243f72; }
body[data-mobile-recovery="true"] .tile.dot { color: #285d87; }
body[data-mobile-recovery="true"] .tile.bamboo { color: #21705c; }
body[data-mobile-recovery="true"] .tile.wind { color: #224f47; }
body[data-mobile-recovery="true"] .tile.dragon { color: #b23d32; }
body[data-mobile-recovery="true"] .tile.dragon[data-symbol="發"] { color: #16705b; }
body[data-mobile-recovery="true"] .tile.dragon[data-symbol="白"] { color: #35463f; }
body[data-mobile-recovery="true"] .tile.flower { color: #815391; }
body[data-mobile-recovery="true"] .tile.season { color: #b05c32; }
body[data-mobile-recovery="true"] .tile.selected {
  outline: 4px solid #ff7b51;
  outline-offset: -3px;
  transform: translateY(-3px);
}
body[data-mobile-recovery="true"] .tile.hint {
  outline-width: 4px;
  box-shadow: 0 0 0 4px rgba(255,210,74,.4), 0 0 18px 7px rgba(255,210,74,.64), 2px 4px 0 #8c6433;
}
body[data-mobile-recovery="true"] .controls {
  order: 4;
  position: sticky;
  bottom: 0;
  z-index: 30;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  margin: 0;
  padding: 7px 0 max(7px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--mobile-line);
  background: color-mix(in srgb, var(--mobile-stage-deep) 94%, transparent);
  box-shadow: 0 -8px 20px rgba(7,27,20,.35);
  backdrop-filter: blur(8px);
}
body[data-mobile-recovery="true"] .controls button { min-height: 52px; }
body[data-mobile-recovery="true"] .mobile-tile-guide-button {
  order: 5;
  display: block;
  width: max-content;
  min-height: 44px;
  margin: 5px 2px;
  padding: 0 14px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  font-weight: 850;
}
body[data-mobile-recovery="true"] .tile-preview {
  order: 6;
  margin: 2px 0 7px;
  border-width: 1px;
}
body[data-mobile-recovery="true"] .help { order: 7; }
body[data-mobile-recovery="true"] .game-notices { order: 20; }
body[data-mobile-recovery="true"] .mobile-board-complete {
  position: relative;
  display: grid;
  min-height: min(58dvh, 540px);
  overflow: hidden;
  place-items: center;
  border: 2px solid rgba(125,225,197,.62);
  border-radius: 24px;
  background: radial-gradient(circle at 77% 18%, #ffe59d 0 7%, transparent 7.5%), linear-gradient(#3e7d6b 0 58%, #658b58 59% 100%);
  box-shadow: inset 0 0 34px rgba(255,255,255,.1), 0 10px 24px rgba(0,0,0,.26);
}
body[data-mobile-recovery="true"] .board.is-cleared { display: none; }
.mobile-complete-moon { position:absolute; top:9%; right:15%; width:52px; aspect-ratio:1; border-radius:50%; background:#ffe59d; box-shadow:0 0 24px rgba(255,225,137,.45); }
.mobile-complete-hill { position:absolute; bottom:-12%; width:75%; height:48%; border-radius:55% 55% 0 0; background:#5b956f; }
.mobile-complete-hill.hill-left { left:-19%; transform:rotate(7deg); }
.mobile-complete-hill.hill-right { right:-18%; transform:rotate(-8deg); background:#4d8063; }
.mobile-complete-bloom { position:relative; z-index:2; color:#fff7d8; font-size:5rem; text-shadow:0 8px 18px rgba(0,0,0,.24); }
.mobile-complete-copy { position:absolute; z-index:3; left:16px; right:16px; bottom:16px; display:grid; gap:2px; padding:12px; border-radius:14px; color:#fff9e8; background:rgba(10,40,30,.78); text-align:center; }
.mobile-complete-copy strong { font-family:Georgia,serif; font-size:1.25rem; }
.mobile-complete-copy span { font-size:.82rem; }

@media (orientation: landscape) {
  body[data-mobile-recovery="true"] main { grid-template-columns: minmax(0, 1fr); }
  body[data-mobile-recovery="true"] .topbar { min-height: 42px; }
  body[data-mobile-recovery="true"] .board { aspect-ratio: 1.72; }
  body[data-mobile-recovery="true"] .controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body[data-mobile-recovery="true"] .mobile-board-complete { min-height: min(62dvh, 360px); }
}
@media (forced-colors: active) {
  body[data-mobile-recovery="true"] .mobile-tile-guide-button,
  body[data-mobile-recovery="true"] .mobile-board-complete { border: 2px solid CanvasText; color: CanvasText; background: Canvas; box-shadow: none; }
  body[data-mobile-recovery="true"] .mobile-complete-moon,
  body[data-mobile-recovery="true"] .mobile-complete-hill,
  body[data-mobile-recovery="true"] .mobile-complete-bloom { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-mobile-recovery="true"] .mobile-board-complete * { animation: none !important; transition: none !important; }
}
body[data-mobile-browser="true"] main { padding-inline: 5px; }
body[data-mobile-browser="true"][data-display-mode="standalone"] main {
  padding-top: max(58px, calc(env(safe-area-inset-top) + 18px));
}
body[data-mobile-browser="true"] .topbar { gap: 6px; }
body[data-mobile-browser="true"] .topbar h1 {
  max-width: 100%;
  font-size: clamp(1.75rem, 8vw, 2.15rem);
  line-height: 1;
  white-space: nowrap;
}
body[data-mobile-browser="true"] .topbar .eyebrow { font-size: .68rem; }
body[data-mobile-browser="true"] .topbar-actions .round-button {
  min-height: 44px;
  padding-inline: 10px;
}
body[data-mobile-browser="true"] .status-panel { margin-block: 8px 5px; }
body[data-mobile-browser="true"] #status { min-height: 0; font-size: .82rem; }
body[data-mobile-browser="true"] .tile-preview {
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 6px 8px;
}
body[data-mobile-browser="true"] .preview-face { width: 32px; height: 38px; }
body[data-mobile-browser="true"] .tile-preview p { font-size: .74rem; line-height: 1.15; }
body[data-mobile-browser="true"] .board-scroll { padding-block: 4px 8px; }
body[data-mobile-browser="true"] .board {
  border-color: rgba(116, 211, 177, .7);
  background:
    radial-gradient(circle at 48% 35%, rgba(115, 193, 144, .3), transparent 50%),
    linear-gradient(155deg, #2b765d 0%, #19503f 62%, #153c31 100%);
  box-shadow: inset 0 2px 18px rgba(7, 28, 21, .28), 0 10px 24px rgba(4, 22, 16, .28);
}
body[data-mobile-browser="true"] .tile {
  border-color: #a98145;
  border-radius: 15%;
  color: #1c2923;
  background:
    linear-gradient(125deg, rgba(255,255,255,.68), transparent 30%),
    linear-gradient(155deg, #fffaf0 0%, #f2e3c4 100%);
  box-shadow: 2px 3px 0 #8e6937, 3px 5px 8px rgba(8, 24, 18, .42), inset 0 0 0 2px rgba(255,255,255,.42);
  text-shadow: 0 1px rgba(255,255,255,.55);
}
body[data-mobile-browser="true"] .tile:not(:disabled) {
  border-color: #c99b4d;
  background:
    linear-gradient(125deg, rgba(255,255,255,.82), transparent 31%),
    linear-gradient(155deg, #fffdf5 0%, #f5e7c8 100%);
  box-shadow: 2px 4px 0 #946c32, 4px 7px 11px rgba(5, 22, 15, .48), inset 0 0 0 2px rgba(255,255,255,.56);
}
body[data-mobile-browser="true"] .tile:disabled {
  opacity: .76;
  filter: saturate(.52) brightness(.78);
  box-shadow: 1px 2px 0 #755f3e, 2px 3px 5px rgba(5, 22, 15, .32), inset 0 0 0 2px rgba(255,255,255,.2);
}
body[data-mobile-browser="true"] .controls button { min-height: 46px; }
body[data-mobile-browser="true"][data-contrast="high"] .tile,
body[data-mobile-browser="true"][data-contrast="high"] .tile:not(:disabled),
body[data-mobile-browser="true"][data-contrast="high"] .tile:disabled {
  border-color: #000;
  color: #000;
  background: #fff;
  box-shadow: 0 0 0 2px #000;
  opacity: 1;
  filter: none;
  text-shadow: none;
}
@media (forced-colors: active) {
  body[data-mobile-browser="true"] .board { border-color: CanvasText; background: Canvas; box-shadow: none; }
  body[data-mobile-browser="true"] .tile,
  body[data-mobile-browser="true"] .tile:not(:disabled),
  body[data-mobile-browser="true"] .tile:disabled {
    border-color: ButtonText;
    color: ButtonText;
    background: ButtonFace;
    box-shadow: none;
    opacity: 1;
    filter: none;
    text-shadow: none;
  }
}
body[data-display-mode="standalone"] main { min-height: calc(var(--mobile-vh, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
body.keyboard-open dialog[open] { max-height: calc(var(--mobile-vh, 100dvh) - 10px); }
body.keyboard-open .controls { position: static; }
.celebration-card, dialog form, .dialog-heading, .choice-dialog-actions { min-width: 0; }
.celebration-card { box-sizing: border-box; max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 20px); }
@media (max-width: 420px) {
  dialog { width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px); max-width: none; max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); border-radius: 18px; }
  dialog form { padding: 18px; }
  .topbar h1 { font-size: clamp(1.85rem, 10vw, 2.35rem); }
  .controls { position: sticky; bottom: 0; z-index: 30; padding: 7px 0 max(7px, env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 0 -8px 18px color-mix(in srgb, var(--paper) 75%, transparent); backdrop-filter: blur(10px); }
}

@media (max-width: 640px) and (orientation: landscape) {
  main { width: min(100%, 900px); }
  .topbar { flex-wrap: nowrap; }
  .topbar > div:first-child { flex-basis: 180px; }
  .topbar-actions { flex: 0 1 330px; width: auto; }
  .status-panel { margin-block: 7px 4px; }
  .tile-preview { display: none; }
  .board-scroll { max-height: var(--board-visible-height, calc(var(--mobile-vh, 100dvh) - 170px)); }
  .board { aspect-ratio: 1.7; }
  .controls { grid-template-columns: repeat(4, 1fr); position: sticky; bottom: 0; z-index: 30; }
}

/* v0.9.0 player-experience consolidation */
.home-dialog { width: min(92vw, 540px); }
.home-dialog-content { box-sizing: border-box; display: grid; gap: 14px; padding: clamp(24px, 6vw, 38px); background: radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%), var(--panel); }
.home-dialog-content h2, .home-dialog-content p { margin: 0; }
.home-dialog-content h2 { max-width: 15ch; font-family: Georgia, serif; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.04; }
.home-actions { display: grid; gap: 10px; margin-top: 8px; }
.home-actions button { margin: 0; min-height: 54px; }
.settings-category-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 20px 0 8px; }
.settings-category-tabs button { min-width: 0; min-height: 46px; padding: 8px; overflow-wrap: anywhere; border: 2px solid color-mix(in srgb, var(--accent) 48%, transparent); border-radius: 11px; color: var(--ink); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); font-weight: 850; }
.settings-category-tabs button[aria-selected="true"] { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 24%, transparent); }
.settings-category-panels { min-height: 210px; }
.settings-category { display: grid; gap: 2px; padding: 4px 2px 12px; animation: settings-panel-in .18s ease-out; }
.settings-category[hidden] { display: none; }
.settings-category > :first-child { margin-top: 12px; }
.empty-state, .loading-state { padding: 18px; border: 2px dashed color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 13px; color: var(--muted); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); text-align: center; line-height: 1.5; }
.seasonal-archive-card { position: relative; overflow: hidden; }
.seasonal-state-badge { justify-self: start; padding: 3px 8px; border-radius: 999px; text-transform: capitalize; font-size: .7rem; font-weight: 900; letter-spacing: .04em; background: rgba(255,255,255,.12); }
.seasonal-archive-card.state-available { border-color: #7be1c5; box-shadow: inset 4px 0 #7be1c5; }
.seasonal-archive-card.state-completed { border-color: #ffd27c; box-shadow: inset 4px 0 #ffd27c; }
.seasonal-archive-card.state-locked { opacity: .68; filter: saturate(.65); }
.seasonal-archive-card.state-returning { border-style: dashed; opacity: .86; }
.seasonal-keepsake.season-spring .keepsake-pin { background: radial-gradient(circle at 32% 25%, #fff5fb, #d77ba9 72%); }
.seasonal-keepsake.season-summer .keepsake-pin { background: radial-gradient(circle at 32% 25%, #fff3a8, #27745f 72%); }
.seasonal-keepsake.season-autumn .keepsake-pin { background: radial-gradient(circle at 32% 25%, #ffe0a1, #9a4935 72%); }
.seasonal-keepsake.season-winter .keepsake-pin { background: radial-gradient(circle at 32% 25%, #ffffff, #568695 72%); }

/* Premium collection artwork owns its 72px silhouette. Keep the collection
   card, labels, and lock state, but do not restore the retired image-tile
   backdrop from the older seasonal pin presentation. */
.seasonal-keepsake .keepsake-pin.keepsake-collection-art {
  width: 72px;
  height: 72px;
  background: transparent;
}
.seasonal-keepsake .keepsake-pin.keepsake-collection-art::before { content: none; }
.seasonal-keepsake .keepsake-collection-art .keepsake-svg,
.seasonal-keepsake .keepsake-collection-art .weekly-keepsake-svg {
  width: 72px;
  height: 72px;
}
.achievement-card.complete { animation: trophy-settle .45s ease-out both; }
@keyframes settings-panel-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes trophy-settle { from { opacity: .6; transform: translateY(6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .settings-category, .achievement-card.complete { animation: none; } }
@media (max-width: 420px) { .settings-category-tabs { grid-template-columns: 1fr; } .settings-category-tabs button { text-align: left; } }
/* v0.9.1: decorative motion sleeps with a hidden page; absolute countdowns recompute on return. */
body.page-hidden *, body.page-hidden *::before, body.page-hidden *::after { animation-play-state: paused !important; }
.version-panel { align-items: stretch; flex-direction: column; }
.version-panel .version-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.version-panel button { width: 100%; padding: 10px 12px; color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
@media (max-width: 420px) { .version-panel .version-actions { grid-template-columns: 1fr; } }
.founder-pin-card { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; margin:12px 0; padding:12px; border:1px solid rgba(245,207,114,.42); border-radius:14px; background:radial-gradient(circle at 18% 15%,rgba(246,201,92,.14),transparent 42%),linear-gradient(145deg,rgba(255,255,255,.06),rgba(5,17,16,.35)); }
.founder-pin-card.eligible { border-color:#f5cf72; box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 16px rgba(245,207,114,.12); }
.founder-pin-card > span:last-of-type { display:grid; gap:4px; min-width:0; }
.founder-pin-card strong { color:#fff9e7; font-family:Georgia,serif; }
.founder-pin-card small { color:#f1d4ad; }
.founder-pin-card button { grid-column:1 / -1; }
.founder-pin-art { display:grid; width:72px; height:72px; place-items:center; filter:drop-shadow(0 2px 1px #5d361b) drop-shadow(0 5px 5px rgba(0,0,0,.32)); }
.founder-pin-art svg { width:68px; height:68px; overflow:visible; }
/* v0.9.5: layered but calm visual feedback. */
.bloom { filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--petal) 45%, transparent)); }
.bloom::after { position:absolute; inset:18% 22%; border-radius:50%; background:rgba(255,255,255,.72); content:""; opacity:.82; transform:scale(.35); animation:bloom-heart 760ms ease-out forwards; }
.celebration-card::before { position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.6), transparent 46%); content:""; opacity:.7; pointer-events:none; }
.celebration-card > :not(.celebration-petals) { position:relative; z-index:1; }
body[data-effects="lively"] .celebration-mark, body[data-effects="full"] .celebration-mark { animation:celebration-mark-bloom 1.15s cubic-bezier(.18,.8,.3,1.15) both; }
body[data-effects="full"] .celebration-card { animation:celebration-arrive .55s cubic-bezier(.18,.8,.3,1.2) both, celebration-glow 3.8s ease-in-out .55s infinite alternate; }
body[data-effects="gentle"] .garden-scene .journey-feature { transition-duration:.9s; }
@keyframes bloom-heart { 30% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.55); } }
@keyframes celebration-mark-bloom { 0% { opacity:0; transform:scale(.35) rotate(-18deg); } 62% { opacity:1; transform:scale(1.16) rotate(7deg); } 100% { transform:scale(1) rotate(0); } }
@keyframes celebration-glow { to { box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 33%, transparent), 0 24px 80px rgba(0,0,0,.4), 0 0 35px rgba(255,233,158,.18); } }
body.reduce-motion .bloom::after, body.static-celebrations .bloom::after, body.reduce-motion .celebration-card::before, body.static-celebrations .celebration-card::before { animation:none; }
body.reduce-motion .celebration-mark, body.static-celebrations .celebration-mark, body.reduce-motion .celebration-card, body.static-celebrations .celebration-card { animation:none !important; }@media (prefers-reduced-motion: reduce) { .founder-pin-card.eligible { box-shadow:none; } }
@media (forced-colors: active) { .founder-pin-card,.founder-pin-card.eligible { border:2px solid CanvasText; background:Canvas; box-shadow:none; } .founder-pin-card strong,.founder-pin-card small { color:CanvasText; } .founder-pin-art { filter:none; } }
@media (forced-colors: active) { .keepsake-detail-select { border: 1px solid ButtonText; color: ButtonText; background: ButtonFace; } .keepsake-collection-art { filter: none; } }

/* Chapter-specific seasonal boards share tested geometry while carrying their own visual identity. */
body.seasonal-board[data-calendar-season="summer"][data-seasonal-theme] .board {
  border-color: color-mix(in srgb, var(--seasonal-theme-accent) 72%, #5bd2b8);
  background: var(--seasonal-board-background);
  box-shadow: inset 0 0 60px rgba(255,255,255,.1), 0 0 0 2px color-mix(in srgb, var(--seasonal-theme-accent) 34%, transparent);
}
body.seasonal-board[data-calendar-season="summer"][data-seasonal-theme] .board:not(.match-ripple)::after {
  content: attr(data-theme-symbol);
  color: color-mix(in srgb, var(--seasonal-theme-accent) 86%, #fff);
  text-shadow: 0 0 14px color-mix(in srgb, var(--seasonal-theme-accent) 70%, transparent);
}
body.seasonal-board[data-calendar-season="summer"][data-seasonal-theme] .board.match-ripple::after { content: ""; }
body.seasonal-board[data-calendar-season="summer"][data-seasonal-theme] .tile.flower:not(:disabled),
body.seasonal-board[data-calendar-season="summer"][data-seasonal-theme] .tile.season:not(:disabled) {
  border-color: color-mix(in srgb, var(--seasonal-theme-accent) 62%, #b49a62);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--seasonal-theme-accent) 32%, transparent));
}
body.seasonal-board[data-calendar-season="summer"][data-seasonal-theme] .tile.flower:disabled,
body.seasonal-board[data-calendar-season="summer"][data-seasonal-theme] .tile.season:disabled {
  border-color: color-mix(in srgb, var(--seasonal-theme-accent) 25%, #87918b);
  filter: grayscale(.82) saturate(.3) brightness(.76);
  opacity: .68;
  box-shadow: 1px 2px 0 #5e655f, 2px 4px 7px rgba(0,0,0,.28), inset 0 0 0 3px rgba(33,48,42,.18);
}
body[data-effects="lively"].seasonal-board[data-seasonal-theme] .board:not(.match-ripple)::after,
body[data-effects="full"].seasonal-board[data-seasonal-theme] .board:not(.match-ripple)::after { animation: chapter-theme-glow 3.8s ease-in-out infinite alternate; }
@keyframes chapter-theme-glow { to { opacity: .62; filter: brightness(1.18); transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  body.seasonal-board[data-seasonal-theme] .board::after { animation: none !important; }
}
@media (forced-colors: active) {
  body.seasonal-board[data-seasonal-theme] .board,
  body.seasonal-board[data-seasonal-theme] .tile.flower,
  body.seasonal-board[data-seasonal-theme] .tile.season { border-color: CanvasText; background: Canvas; filter: none; box-shadow: none; }
  body.seasonal-board[data-seasonal-theme] .board::after { color: CanvasText; text-shadow: none; }
}

/* Keep the recovery composition authoritative after legacy mobile rules. */
body[data-mobile-browser="true"][data-mobile-recovery="true"] main { padding-inline: max(10px, env(safe-area-inset-left)); }
body[data-mobile-browser="true"][data-mobile-recovery="true"] .topbar { flex-wrap: nowrap; gap: 8px; }
body[data-mobile-browser="true"][data-mobile-recovery="true"] .topbar h1 { max-width:8rem; overflow:visible; font-size:clamp(1rem,4.6vw,1.15rem); line-height:.92; letter-spacing:-.025em; text-overflow:clip; white-space:normal; }
body[data-mobile-browser="true"][data-mobile-recovery="true"] .topbar-actions { flex: 0 1 auto; width: auto; }
body[data-mobile-browser="true"][data-mobile-recovery="true"] .status-panel { margin: 0; }
body[data-mobile-browser="true"][data-mobile-recovery="true"] #status { font-size: .78rem; }
body[data-mobile-browser="true"][data-mobile-recovery="true"] .board-scroll { padding-block: 2px 6px; }
body[data-mobile-browser="true"][data-mobile-recovery="true"] .board {
  aspect-ratio:.9;
  border-color: rgba(125,225,197,.62);
  background: radial-gradient(circle at 52% 36%, rgba(137,217,164,.26), transparent 48%), linear-gradient(160deg,#28745a,#154d3c 62%,#12382e);
  box-shadow: inset 0 0 28px rgba(4,27,20,.34),0 10px 24px rgba(0,0,0,.26);
}
body[data-mobile-browser="true"][data-mobile-recovery="true"] .tile.flower { color:#815391; }
body[data-mobile-browser="true"][data-mobile-recovery="true"] .tile.season { color:#b05c32; }
body[data-mobile-browser="true"][data-mobile-recovery="true"] .controls { position:relative; grid-template-columns:repeat(2,minmax(0,1fr)); }
body[data-mobile-browser="true"][data-mobile-recovery="true"] .controls button { min-height:52px; padding:8px 6px; }
body[data-mobile-browser="true"][data-mobile-recovery="true"] .mobile-tile-guide-button { min-height:44px; padding:0 14px; font-size:.8rem; }
@media (orientation: landscape) {
  body[data-mobile-browser="true"][data-mobile-recovery="true"] main {
    height:100dvh;
    min-height:0;
    overflow:hidden;
    grid-template-columns:minmax(0,1fr) minmax(170px,24vw);
    grid-template-rows:auto auto minmax(0,1fr) auto auto;
    grid-template-areas:"header header" "status status" "board controls" "board guide" "board help";
    gap:4px 10px;
  }
  body[data-mobile-browser="true"][data-mobile-recovery="true"] .topbar { grid-area:header; }
  body[data-mobile-browser="true"][data-mobile-recovery="true"] .status-panel { grid-area:status; }
  body[data-mobile-browser="true"][data-mobile-recovery="true"] .board-scroll { grid-area:board; align-self:stretch; display:flex; align-items:center; height:100%; padding:0; }
  body[data-mobile-browser="true"][data-mobile-recovery="true"] .board { width:auto !important; height:100%; max-width:100%; aspect-ratio:1.42; }
  body[data-mobile-browser="true"][data-mobile-recovery="true"] .controls { grid-area:controls; align-self:end; grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-mobile-browser="true"][data-mobile-recovery="true"] .controls button { min-height:46px; }
  body[data-mobile-browser="true"][data-mobile-recovery="true"] .mobile-tile-guide-button { grid-area:guide; }
  body[data-mobile-browser="true"][data-mobile-recovery="true"] .help { grid-area:help; margin:0; }
body[data-mobile-browser="true"][data-mobile-recovery="true"] .tile-preview:not([hidden]) { position:fixed; z-index:120; right:max(10px,env(safe-area-inset-right)); bottom:max(10px,env(safe-area-inset-bottom)); width:min(340px,48vw); }
}

/* v0.9.8.3 RC0: true phone board, selected before the main bundle loads.
   Desktop selectors and dimensions remain unchanged. */
html[data-mobile-runtime="true"] body main {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  width:100%;
  min-height:100dvh;
  padding:
    max(54px,calc(env(safe-area-inset-top) + 12px))
    max(10px,env(safe-area-inset-right))
    max(14px,env(safe-area-inset-bottom))
    max(10px,env(safe-area-inset-left));
}
html[data-mobile-runtime="true"] body[data-display-mode="standalone"] main { padding-top:max(62px,calc(env(safe-area-inset-top) + 18px)); }
html[data-mobile-runtime="true"] body .topbar { min-height:44px; padding:0 1px 5px; gap:7px; flex-wrap:nowrap; }
html[data-mobile-runtime="true"] body .topbar .eyebrow { display:none; }
html[data-mobile-runtime="true"] body .topbar h1 { max-width:7.6rem; overflow:visible; font-size:clamp(1rem,4.7vw,1.18rem); line-height:.94; white-space:normal; }
html[data-mobile-runtime="true"] body .topbar-actions { width:auto; flex:0 1 auto; flex-wrap:nowrap; gap:6px; }
html[data-mobile-runtime="true"] body .topbar-actions .round-button { min-height:40px; padding:5px 10px; border-width:1.5px; font-size:clamp(.68rem,3.25vw,.83rem); line-height:1.05; }
html[data-mobile-runtime="true"] body .status-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; min-height:32px; margin:0; padding:3px 2px 5px; gap:6px; }
html[data-mobile-runtime="true"] body #status { min-height:0; overflow:hidden; font-size:.74rem; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
html[data-mobile-runtime="true"] body #fitBoardButton { display:none !important; }
html[data-mobile-runtime="true"] body .counter { font-size:.78rem; white-space:nowrap; }
html[data-mobile-runtime="true"] body .mobile-tile-guide-button { display:block; width:max-content; min-height:38px; margin:3px 0 7px; padding:4px 12px; border-width:1.5px; border-radius:999px; font-size:.78rem; line-height:1; }
html[data-mobile-runtime="true"] body .tile-preview { margin:0 0 7px; padding:7px 9px; }
html[data-mobile-runtime="true"] body .board-scroll { width:100%; margin:0; padding:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
html[data-mobile-runtime="true"] body .board-scroll::-webkit-scrollbar { display:none; }
html[data-mobile-runtime="true"] body .board {
  width:100%;
  min-width:100%;
  max-width:none;
  min-height:0;
  aspect-ratio:.62;
  border-radius:26px;
}
html[data-mobile-runtime="true"] body .tile { font-size:clamp(.82rem,4.6vw,1.12rem); }
html[data-mobile-runtime="true"] body .controls { position:relative; margin:8px 0 0; padding:8px 0 max(8px,env(safe-area-inset-bottom)); grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
html[data-mobile-runtime="true"] body .controls button { min-height:54px; padding:8px 6px; font-size:clamp(.88rem,4.2vw,1.05rem); }
@media (orientation:landscape) {
  html[data-mobile-runtime="true"] body main { padding-top:max(10px,env(safe-area-inset-top)); }
  html[data-mobile-runtime="true"] body .board { aspect-ratio:1.42; }
}

/* --------------------------------------------------------------------------
   Premium phone play screen
   --------------------------------------------------------------------------
   This is the authoritative phone-only presentation layer. Runtime detection
   happens before CSS loads, so none of these rules affect desktop browsers or
   desktop-installed apps. The hierarchy is intentionally board, interaction,
   controls, then optional guidance. Accessibility state remains in the DOM. */
html[data-mobile-runtime="true"] body {
  --mobile-stage: #173d31;
  --mobile-stage-deep: #0c251d;
  --mobile-edge: rgba(111, 224, 194, .58);
  background-attachment: scroll;
  background-image:
    radial-gradient(circle at 50% 28%, rgba(81, 147, 100, .26), transparent 38%),
    linear-gradient(180deg, rgba(25, 67, 51, .86), rgba(8, 29, 22, .97)),
    url("garden-background.webp");
  background-position: center top;
  background-size: auto, auto, cover;
}

/* Safe-area header: the brand remains present without competing with play. */
html[data-mobile-runtime="true"] body main {
  gap: 0;
  max-width: 540px;
  margin-inline: auto;
  padding:
    max(8px, calc(env(safe-area-inset-top) + 4px))
    max(4px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(4px, env(safe-area-inset-left));
}
html[data-mobile-runtime="true"] body[data-display-mode="standalone"] main {
  padding-top: max(8px, calc(env(safe-area-inset-top) + 6px));
}
html[data-mobile-runtime="true"] body .topbar {
  order: 1;
  min-height: 40px;
  padding: 0 5px 4px;
}
html[data-mobile-runtime="true"] body .topbar h1 {
  max-width: 8.4rem;
  color: #fff8e8;
  font-size: clamp(1.08rem, 5vw, 1.34rem) !important;
  line-height: .96;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .42);
}
html[data-mobile-runtime="true"] body .topbar-actions .round-button {
  min-height: 38px;
  padding-inline: 10px;
  border-color: rgba(241, 241, 221, .82);
  color: #fff8e8;
  background: rgba(13, 40, 31, .8);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
}

/* Board HUD: concise visual status, with full announcements still available to
   assistive technology through the existing live regions. */
html[data-mobile-runtime="true"] body .status-panel {
  order: 2;
  position: relative;
  z-index: 4;
  min-height: 32px;
  margin: 0 3px -6px !important;
  padding: 5px 10px 10px;
  border: 1px solid rgba(111, 224, 194, .34);
  border-bottom: 0;
  border-radius: 17px 17px 0 0;
  color: #f9f3e7;
  background: rgba(11, 39, 29, .9);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .16);
  backdrop-filter: blur(8px);
}
html[data-mobile-runtime="true"] body #status {
  color: #d9e7df;
  font-size: clamp(.72rem, 3vw, .82rem);
}
html[data-mobile-runtime="true"] body .counter {
  color: #fff3ce;
  font-size: clamp(.74rem, 3.1vw, .84rem);
}

/* Primary playfield: tall, edge-to-edge, and visually integrated with the
   controls. Tile coordinates are proportionally enlarged in game.js. */
html[data-mobile-runtime="true"] body .board-scroll {
  order: 3;
  position: relative;
  z-index: 3;
  width: 100% !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
html[data-mobile-runtime="true"] body .board {
  width: 100%;
  min-width: 100%;
  height: var(--mobile-board-height, 52dvh) !important;
  min-height: 0;
  aspect-ratio: auto !important;
  border: 2px solid var(--mobile-edge);
  border-radius: 22px 22px 10px 10px;
  background:
    radial-gradient(circle at 70% 30%, rgba(174, 221, 142, .18), transparent 35%),
    radial-gradient(circle at 35% 58%, rgba(255, 255, 255, .09), transparent 48%),
    linear-gradient(155deg, #28765c, #17513f 55%, #12372d);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .1),
    inset 0 -30px 60px rgba(3, 24, 17, .25),
    0 12px 30px rgba(0, 0, 0, .3);
}

/* Authentic family colors remain untouched; these rules add physical depth
   and clearer free/blocked states without making color the only distinction. */
html[data-mobile-runtime="true"] body .tile {
  border-width: 2px;
  border-color: #a27742;
  color: #1d2a24;
  background:
    radial-gradient(circle at 24% 15%, rgba(255, 255, 255, .98), transparent 25%),
    linear-gradient(148deg, #fffef8 2%, #f7ead0 82%, #e7cf9d 100%);
  box-shadow:
    2px 4px 0 #896033,
    4px 8px 11px rgba(2, 19, 13, .48),
    inset 0 0 0 2px rgba(255, 255, 255, .58);
  font-size: clamp(.82rem, calc(var(--mobile-tile-width-px, 36px) * .48), 2rem);
}
html[data-mobile-runtime="true"] body .tile .tile-glyph,
html[data-mobile-runtime="true"] body .tile .character-face {
  font-size: clamp(.68rem, calc(var(--mobile-tile-width-px, 36px) * .4), 1.7rem);
}
html[data-mobile-runtime="true"] body .tile .bamboo-bird {
  font-size: clamp(.78rem, calc(var(--mobile-tile-width-px, 36px) * .48), 1.9rem);
}
html[data-mobile-runtime="true"] body .tile .pip {
  width: clamp(3px, calc(var(--mobile-tile-width-px, 36px) * .15), 10px);
}
html[data-mobile-runtime="true"] body .tile .bamboo-stick {
  width: clamp(2px, calc(var(--mobile-tile-width-px, 36px) * .1), 7px);
}
html[data-mobile-runtime="true"] body .tile:not(:disabled) {
  border-color: #d6aa60;
  filter: none;
  box-shadow:
    2px 5px 0 #94662f,
    5px 10px 15px rgba(2, 17, 12, .52),
    inset 0 0 0 2px rgba(255, 255, 255, .72);
}
html[data-mobile-runtime="true"] body .tile:disabled {
  /* Blocked tiles are solid, quiet pieces of the stack. Opacity stays at one
     so symbols from lower layers cannot bleed through and muddy the board. */
  opacity: 1;
  color: #53615a;
  background: linear-gradient(148deg, #d4d8d1 2%, #bdc4bc 82%, #a5ada3 100%);
  filter: saturate(.38) brightness(.78);
  box-shadow: 1px 2px 0 #6f5d43, 2px 4px 7px rgba(2, 17, 12, .3), inset 0 0 0 2px rgba(255, 255, 255, .28);
}
html[data-mobile-runtime="true"] body .tile.flower { color: #815391; }
html[data-mobile-runtime="true"] body .tile.season { color: #b05c32; }

/* Controls belong to the playfield. They remain large enough for touch and
   retain the existing accessible names, focus behavior, and disabled states. */
html[data-mobile-runtime="true"] body .controls {
  order: 4;
  position: relative !important;
  bottom: auto !important;
  z-index: 4;
  width: 100%;
  margin: -2px 0 0 !important;
  padding: 8px 6px max(8px, env(safe-area-inset-bottom)) !important;
  border: 1px solid rgba(111, 224, 194, .28);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background: rgba(8, 30, 23, .94);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
  backdrop-filter: blur(10px);
}
html[data-mobile-runtime="true"] body .controls button {
  min-height: 50px;
  border-radius: 15px;
  font-size: clamp(.86rem, 4vw, 1.05rem);
  box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}

/* Optional learning material follows play instead of consuming board space. */
html[data-mobile-runtime="true"] body .mobile-tile-guide-button {
  order: 5;
  justify-self: center;
  min-height: 40px;
  margin: 8px 0 2px;
  padding-inline: 16px;
  color: #bcebdd;
  background: rgba(12, 39, 30, .72);
}
html[data-mobile-runtime="true"] body .tile-preview {
  order: 6;
  margin: 4px 5px 8px;
  border-color: rgba(111, 224, 194, .34);
  background: rgba(15, 47, 37, .88);
}
html[data-mobile-runtime="true"] body .help { order: 7; margin-top: 4px; }

/* Completion preserves the same footprint as active play, preventing the page
   from jumping while giving the cleared board a calm garden destination. */
html[data-mobile-runtime="true"] body .mobile-board-complete {
  min-height: 0;
  height: var(--mobile-board-height, 52dvh);
  aspect-ratio: auto !important;
  border-radius: 27px 27px 13px 13px;
  background:
    radial-gradient(circle at 76% 16%, #ffe7a0 0 6%, transparent 6.6%),
    linear-gradient(176deg, transparent 0 58%, rgba(10, 51, 38, .25) 58% 59%, transparent 59%),
    linear-gradient(#3d796a 0 57%, #638e61 58% 100%);
}

/* Landscape remains compact and usable, while desktop is outside this gate. */
@media (orientation: landscape) {
  html[data-mobile-runtime="true"] body main {
    max-width: 980px;
    padding-top: max(8px, env(safe-area-inset-top));
  }
  html[data-mobile-runtime="true"] body .board {
    width: auto !important;
    min-width: 0;
    height: 100% !important;
    max-width: 100%;
    aspect-ratio: 1.42 !important;
    border-radius: 22px 10px 10px 22px;
  }
  html[data-mobile-runtime="true"] body .controls { border-radius: 0 0 20px 20px; }
}

@media (forced-colors: active) {
  html[data-mobile-runtime="true"] body .status-panel,
  html[data-mobile-runtime="true"] body .board,
  html[data-mobile-runtime="true"] body .controls,
  html[data-mobile-runtime="true"] body .mobile-tile-guide-button,
  html[data-mobile-runtime="true"] body .tile-preview {
    border: 2px solid CanvasText;
    color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }
}

/* Final phone-composition overrides. Keep this block last so older mobile
   compatibility rules cannot turn the native phone surface back into a
   compressed desktop page. */
html[data-mobile-runtime="true"] body main {
  min-height: var(--mobile-vh, 100dvh);
  padding: max(12px, calc(env(safe-area-inset-top) + 8px)) max(8px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
html[data-mobile-runtime="true"] body[data-display-mode="standalone"] main { padding-top: max(14px, calc(env(safe-area-inset-top) + 10px)); }
html[data-mobile-runtime="true"] body .topbar { min-height: 46px; padding: 0 5px 6px; }
html[data-mobile-runtime="true"] body .topbar h1 { max-width: 7.2rem; font-size: clamp(1.15rem, 5.4vw, 1.45rem) !important; }
html[data-mobile-runtime="true"] body .topbar-actions { gap: 7px; }
html[data-mobile-runtime="true"] body .topbar-actions .round-button { min-height: 42px; padding-inline: clamp(10px, 3.4vw, 15px); font-size: clamp(.72rem, 3.45vw, .9rem); }
html[data-mobile-runtime="true"] body .status-panel { min-height: 38px; margin-inline: 0 !important; padding: 6px 11px 11px; border-radius: 18px 18px 0 0; }
html[data-mobile-runtime="true"] body #status { font-size: clamp(.76rem, 3.25vw, .9rem); }
html[data-mobile-runtime="true"] body .counter { font-size: clamp(.78rem, 3.3vw, .92rem); }
html[data-mobile-runtime="true"] body .board { border-radius: 14px 14px 5px 5px; }
html[data-mobile-runtime="true"] body .board {
  border-inline: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(110, 200, 145, .25), transparent 55%),
    linear-gradient(180deg, rgba(34, 111, 82, .82), rgba(12, 58, 43, .9));
  box-shadow: inset 0 2px rgba(111, 224, 194, .5), inset 0 -2px rgba(111, 224, 194, .5), inset 0 -32px 70px rgba(3, 24, 17, .2);
}
html[data-mobile-runtime="true"] body .board .tile {
  /* The camera is intentionally fixed for the round. Matches may still use a
     small transform effect, but viewport/browser-chrome events never animate
     the entire board into a new size or position. */
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
html[data-mobile-runtime="true"] body .controls { gap: 9px; padding: 10px 8px max(10px, env(safe-area-inset-bottom)) !important; border-radius: 0 0 22px 22px; }
html[data-mobile-runtime="true"] body .controls button { min-height: 58px; border-width: 2px; border-radius: 17px; font-size: clamp(.96rem, 4.5vw, 1.16rem); }

@media (orientation: landscape) {
  html[data-mobile-runtime="true"] body main {
    display: grid;
    width: 100%;
    max-width: none;
    height: var(--mobile-vh, 100dvh);
    min-height: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) clamp(174px, 27vw, 230px);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "header header" "status controls" "board controls" "board guide";
    gap: 0 10px;
    padding: max(5px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left));
  }
  html[data-mobile-runtime="true"] body .topbar { grid-area: header; min-height: 38px; padding-bottom: 3px; }
  html[data-mobile-runtime="true"] body .topbar h1 { max-width: none; font-size: clamp(1rem, 3.3vh, 1.35rem) !important; white-space: nowrap; }
  html[data-mobile-runtime="true"] body .topbar-actions .round-button { min-height: 34px; font-size: clamp(.68rem, 2.5vh, .84rem); }
  html[data-mobile-runtime="true"] body .status-panel { grid-area: status; z-index: 5; min-height: 34px; margin: 0 -4px -7px 0 !important; border-right: 0; border-radius: 16px 0 0 0; }
  html[data-mobile-runtime="true"] body .board-scroll { grid-area: board; align-self: stretch; display: flex; min-height: 0; height: 100%; }
  html[data-mobile-runtime="true"] body .board { width: 100% !important; height: 100% !important; border-radius: 12px 0 0 12px; }
  html[data-mobile-runtime="true"] body .controls { grid-area: controls; align-self: stretch; display: grid; margin: 0 !important; padding: 8px !important; border: 1px solid rgba(111, 224, 194, .28); border-radius: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(48px, 1fr)); }
  html[data-mobile-runtime="true"] body .controls button { min-width: 0; min-height: 48px; padding-inline: 3px; overflow-wrap: anywhere; font-size: clamp(.78rem, 3.2vh, 1rem); }
  html[data-mobile-runtime="true"] body .mobile-tile-guide-button { grid-area: guide; align-self: start; justify-self: stretch; width: 100%; margin: 7px 0 0; }
  html[data-mobile-runtime="true"] body .tile-preview,
  html[data-mobile-runtime="true"] body .help { position: fixed; z-index: 120; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: min(340px, 46vw); }
  html[data-mobile-runtime="true"] body .help:not([open]),
  html[data-mobile-runtime="true"] body .tile-preview[hidden] { display: none; }
}

/* --------------------------------------------------------------------------
   Phone game surface: fixed board-first composition
   --------------------------------------------------------------------------
   This block is deliberately runtime-gated. Desktop keeps the established
   document composition; phones arrange those same live game elements as one
   stable, full-screen play surface. */
@media (orientation: portrait) {
  html[data-mobile-runtime="true"] body {
    /* The board and its approved five-action dock share one usable visual
       viewport. Legal/status text remains below this gameplay shell instead of
       forcing the controls beyond Safari or standalone-PWA safe areas. */
    min-height: var(--mobile-vh, 100dvh);
    /* The older shared "Mobile/PWA foundation" rule above (plain `body {}`)
       applies env(safe-area-inset-*) padding on all sides. main and
       .controls each own their safe-area handling for this dock layout
       already (main's padding-top, .controls' padding-bottom) — without
       this reset, body's padding stacks on top of theirs, pushing main's
       fixed-height box down and off the bottom of the real viewport. */
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  html[data-mobile-runtime="true"] body main {
    box-sizing: border-box;
    display: grid;
    width: min(100%, 560px);
    height: var(--mobile-vh, 100dvh);
    min-height: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr);
    /* The board row is capped by fitMobilePlayfield() (game.js) via
       --mobile-board-row, computed from the board's own width rather than
       from however much vertical room happens to be available. Installed
       standalone mode has no Safari toolbar to subtract, so it naturally
       reports more usable height than Safari — that surplus must not turn
       into extra board height. The 1fr fallback only applies for the brief
       moment before that JS measurement runs. */
    grid-template-rows: auto auto minmax(0, var(--mobile-board-row, 1fr)) auto;
    grid-template-areas:
      "phone-header"
      "phone-status"
      "phone-board"
      "phone-controls";
    /* start (not stretch): once the board row is capped, any real surplus
       — standalone's reclaimed toolbar space — collects below the dock
       instead of inflating the header/status/dock rows. */
    align-content: start;
    padding:
      max(5px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      0
      max(6px, env(safe-area-inset-left));
  }

  html[data-mobile-runtime="true"] body[data-display-mode="standalone"] main {
    height: var(--mobile-vh, 100dvh);
    min-height: 0;
    padding-top: max(7px, env(safe-area-inset-top));
  }

  /* A completed board is a self-contained PWA screen, not the scrollable
     active-board document. Fit its existing artwork and approved toolbar into
     the real standalone visual viewport so iOS cannot scroll the scene under
     its protected status area or reveal the page footer. */
  html[data-mobile-runtime="true"] body[data-display-mode="standalone"].mobile-completion-state {
    box-sizing: border-box;
    height: var(--mobile-vh, 100dvh);
    min-height: 0;
    /* Completion is a fixed visual-viewport shell. Let main own both safe
       areas so the global body insets are not added outside its height. */
    padding: 0;
    overflow: hidden;
  }

  html[data-mobile-runtime="true"] body[data-display-mode="standalone"].mobile-completion-state main {
    height: calc(var(--mobile-vh, 100dvh) - var(--mobile-viewport-top, 0px));
    min-height: 0;
    padding-top: max(7px, env(safe-area-inset-top), var(--mobile-viewport-top, 0px));
  }

  html[data-mobile-runtime="true"] body .topbar {
    grid-area: phone-header;
    align-self: center;
    min-width: 0;
    min-height: 48px;
    padding: 3px 7px 5px;
    gap: 7px;
  }

  html[data-mobile-runtime="true"] body .topbar h1 {
    max-width: 7.25rem;
    font-size: clamp(1.08rem, 5.2vw, 1.38rem) !important;
  }

  html[data-mobile-runtime="true"] body .topbar-actions {
    min-width: 0;
    margin-left: auto;
  }

  html[data-mobile-runtime="true"] body .topbar-actions .round-button {
    min-width: 0;
    min-height: 40px;
    padding: 5px clamp(8px, 2.8vw, 13px);
    font-size: clamp(.68rem, 3.2vw, .86rem);
  }

  html[data-mobile-runtime="true"] body .status-panel {
    grid-area: phone-status;
    align-self: end;
    min-width: 0;
    min-height: 35px;
    margin: 0 !important;
    padding: 6px 11px 7px;
    border: 1px solid rgba(111, 224, 194, .34);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
  }

  html[data-mobile-runtime="true"] body #status {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-mobile-runtime="true"] body .board-scroll {
    grid-area: phone-board;
    align-self: stretch;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    height: 100%;
    overflow: hidden;
    place-items: stretch;
  }

  html[data-mobile-runtime="true"] body .board,
  html[data-mobile-runtime="true"] body .mobile-board-complete {
    grid-area: 1 / 1;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    height: 100% !important;
    min-height: 0;
    border-radius: 0;
  }

  html[data-mobile-runtime="true"] body .controls {
    grid-area: phone-controls;
    align-self: stretch;
    display: grid;
    width: 100%;
    max-width: none !important;
    min-width: 0;
    max-width: none;
    margin: 0 !important;
    padding: 7px 5px max(7px, env(safe-area-inset-bottom)) !important;
    gap: 5px;
    border: 1px solid rgba(111, 224, 194, .28);
    border-top: 0;
    border-radius: 0 0 20px 20px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  html[data-mobile-runtime="true"] body .controls button {
    min-width: 0;
    min-height: 50px;
    padding: 7px 2px;
    overflow: hidden;
    border-radius: 13px;
    font-size: clamp(.68rem, 3.25vw, .9rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  /* The guide becomes an unobtrusive board tool. Its full accessible name and
     expanded state remain unchanged; opening it reveals the same live details
     in a mobile sheet instead of reserving permanent page space. */
  html[data-mobile-runtime="true"] body .mobile-tile-guide-button {
    position: fixed;
    z-index: 18;
    right: max(13px, calc(env(safe-area-inset-right) + 7px));
    bottom: max(69px, calc(env(safe-area-inset-bottom) + 61px));
    display: grid;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    place-items: center;
    border-radius: 50%;
    font-size: 0;
    color: #08251c;
    background: #78dac2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .32);
  }

  html[data-mobile-runtime="true"] body .mobile-tile-guide-button::before {
    content: "?";
    font: 900 1.08rem/1 system-ui, sans-serif;
  }

  html[data-mobile-runtime="true"] body .tile-preview:not([hidden]) {
    position: fixed;
    z-index: 125;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(64px, calc(env(safe-area-inset-bottom) + 58px));
    left: max(10px, env(safe-area-inset-left));
    width: auto;
    margin: 0;
    padding: 11px;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  }

  html[data-mobile-runtime="true"] body .help {
    position: fixed;
    z-index: 17;
    left: max(13px, calc(env(safe-area-inset-left) + 7px));
    bottom: max(69px, calc(env(safe-area-inset-bottom) + 61px));
    width: 40px;
    height: 40px;
    margin: 0;
    overflow: hidden;
    border: 1.5px solid rgba(111, 224, 194, .7);
    border-radius: 50%;
    color: #bcebdd;
    background: rgba(8, 30, 23, .94);
  }

  html[data-mobile-runtime="true"] body .help summary {
    box-sizing: border-box;
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    overflow: hidden;
    place-items: center;
    font-size: 0;
    list-style: none;
  }

  html[data-mobile-runtime="true"] body .help summary::-webkit-details-marker { display: none; }
  html[data-mobile-runtime="true"] body .help summary::before { content: "i"; font: 900 1rem/1 Georgia, serif; }

  html[data-mobile-runtime="true"] body .help[open] {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(64px, calc(env(safe-area-inset-bottom) + 58px));
    left: max(10px, env(safe-area-inset-left));
    width: auto;
    height: auto;
    padding: 8px 12px 12px;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  }

  html[data-mobile-runtime="true"] body .help[open] summary {
    width: 100%;
    height: 32px;
    justify-content: start;
    font-size: .86rem;
  }

  html[data-mobile-runtime="true"] body .help[open] summary::before { content: none; }

  html[data-mobile-runtime="true"] body .celebration,
  html[data-mobile-runtime="true"] body dialog[open] {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* --------------------------------------------------------------------------
   Canonical mobile gameplay controls
   --------------------------------------------------------------------------
   The live board remains unchanged. Phones replace the former web-button grid
   and floating reference bubbles with one compact, accessible game toolbar.
   Desktop keeps its established labels, geometry, and presentation. */
.mobile-control-icon,
.mobile-control-label,
.mobile-more-button,
.mobile-more-dialog,
.mobile-sheet-close {
  display: none;
}

html[data-mobile-runtime="true"] body .desktop-control-label { display: none; }
html[data-mobile-runtime="true"] body .mobile-control-label,
html[data-mobile-runtime="true"] body .mobile-control-icon { display: block; }
html[data-mobile-runtime="true"] body .mobile-tile-guide-button { display: none !important; }

html[data-mobile-runtime="true"] body .controls {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(56px, auto) !important;
  gap: 3px !important;
  /* Bottom safe-area clearance belongs on the buttons themselves (below),
     not here: container padding leaves visible dock background beneath the
     buttons that they can't fill. Safari resolves env(safe-area-inset-bottom)
     near zero (its own toolbar already occupies that area) so this never
     showed there; installed standalone mode has no toolbar, so the real
     value applies and the gap becomes visible. */
  padding: 4px 3px !important;
}

/* The button itself — not the .controls container above — owns bottom
   safe-area clearance, so its visible fill (background/border) extends
   through that space instead of leaving the dock's own background exposed
   underneath it. calc() keeps Safari's existing look exactly as it is
   (env() resolves near 0 there) while installed standalone mode grows the
   button by the real reclaimed amount. Base cushion matches this block's
   56px/5px sizing baseline. */
html[data-mobile-runtime="true"] body .controls button {
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

html[data-mobile-runtime="true"] body .controls button {
  display: flex;
  min-width: 0;
  min-height: 56px;
  padding: 5px 1px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-width: 1.5px;
  border-radius: 11px;
  font-size: clamp(.61rem, 2.9vw, .78rem);
  line-height: 1;
  white-space: nowrap;
}

html[data-mobile-runtime="true"] body .controls .mobile-control-icon {
  min-height: 15px;
  font: 800 clamp(.9rem, 4vw, 1.08rem)/.9 system-ui, sans-serif;
}

html[data-mobile-runtime="true"] body .controls .mobile-more-button:not([hidden]) {
  display: flex;
  position: relative;
}

html[data-mobile-runtime="true"] body .controls .mobile-more-button .notice-unread-mark { position: absolute; top: 6px; right: 9px; width: 7px; height: 7px; margin: 0; }
html[data-mobile-runtime="true"] body .topbar .player-notice-button { display: none !important; }
html[data-mobile-runtime="true"] body .topbar #settingsButton { display: none !important; }

html[data-mobile-runtime="true"] body .controls #newButton {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 22%, transparent);
}

html[data-mobile-runtime="true"] body .controls button:focus-visible,
html[data-mobile-runtime="true"] body .mobile-more-sheet button:focus-visible,
html[data-mobile-runtime="true"] body .mobile-more-sheet .mobile-more-link:focus-visible,
html[data-mobile-runtime="true"] body .mobile-sheet-close:focus-visible {
  outline: 3px solid #fff1a8;
  outline-offset: 2px;
}

html[data-mobile-runtime="true"] body .mobile-more-dialog[open] {
  position: fixed;
  inset: auto 0 0;
  display: block;
  width: min(100%, 560px);
  max-width: none;
  max-height: min(70dvh, 420px);
  margin: auto auto 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 24px 24px 0 0;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .55);
}

html[data-mobile-runtime="true"] body .mobile-more-dialog::backdrop {
  background: rgba(5, 18, 14, .66);
  backdrop-filter: blur(3px);
}

html[data-mobile-runtime="true"] body .mobile-more-sheet {
  display: grid;
  padding: 17px max(16px, env(safe-area-inset-right)) max(18px, calc(env(safe-area-inset-bottom) + 12px)) max(16px, env(safe-area-inset-left));
  gap: 10px;
}

html[data-mobile-runtime="true"] body .mobile-sheet-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

html[data-mobile-runtime="true"] body .mobile-sheet-heading h2 { margin: 0; }
html[data-mobile-runtime="true"] body .mobile-more-intro { margin: -4px 0 2px; color: var(--muted); }
html[data-mobile-runtime="true"] body .mobile-more-sheet > button:not(.close-button),
html[data-mobile-runtime="true"] body .mobile-more-sheet > .mobile-more-link {
  display: grid;
  min-height: 52px;
  place-items: center;
  border: 2px solid var(--accent);
  border-radius: 14px;
  color: var(--accent);
  background: var(--paper);
  font-weight: 800;
  text-decoration: none;
}

/* Roadmap and Privacy remain in the established desktop footer. Phones reach
   the same pages through More without duplicating them below gameplay. */
html[data-mobile-runtime="true"] body .game-notices .mobile-footer-more-link { display: none; }
html[data-mobile-runtime="true"] body .game-notices {
  width: min(100%, 560px);
  margin: 3px auto 0;
  padding: 3px max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  gap: 2px 8px;
  font-size: .6rem;
  line-height: 1.15;
}

html[data-mobile-runtime="true"] body .tile-preview:not([hidden]),
html[data-mobile-runtime="true"] body .help[open] {
  position: fixed;
  z-index: 126;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: min(100%, 560px);
  max-height: min(70dvh, 440px);
  margin: 0 auto;
  padding: 18px max(16px, env(safe-area-inset-right)) max(18px, calc(env(safe-area-inset-bottom) + 12px)) max(16px, env(safe-area-inset-left));
  overflow: auto;
  border: 0;
  border-radius: 24px 24px 0 0;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .55);
}

html[data-mobile-runtime="true"] body .tile-preview:not([hidden]) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
}

html[data-mobile-runtime="true"] body .tile-preview .mobile-sheet-close:not([hidden]) {
  display: block;
  grid-column: 1 / -1;
  justify-self: end;
  min-height: 44px;
  margin-bottom: 8px;
  padding-inline: 16px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  background: transparent;
  font-weight: 800;
}

html[data-mobile-runtime="true"] body .help { display: none; }
html[data-mobile-runtime="true"] body .help[open] { display: block; height: auto; }
html[data-mobile-runtime="true"] body .help[open] summary {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Canonical mobile landscape composition
   --------------------------------------------------------------------------
   Earlier responsive rules remain compatibility scaffolding for historical
   breakpoints. This final, runtime-gated block owns the approved phone
   landscape geometry. Do not merge it into desktop/aspect-ratio rules. */
@media (orientation: landscape) {
  html[data-mobile-runtime="true"] body {
    height: var(--mobile-vh, 100dvh);
    /* See the portrait block above: reset the older shared body padding so
       it doesn't stack with main's/.controls' own safe-area handling. */
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  html[data-mobile-runtime="true"] body main {
    box-sizing: border-box;
    display: grid;
    width: min(100%, 1120px);
    max-width: none;
    height: var(--mobile-vh, 100dvh);
    min-height: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) !important;
    /* See the portrait block above: --mobile-board-row (set by
       fitMobilePlayfield() in game.js) keeps standalone mode from simply
       absorbing however much height it has versus Safari's chrome-reduced
       viewport. Because .board itself is height:100% of .board-scroll in
       this orientation, capping the row here is what actually takes
       effect — a JS-only height on the item is overridden by that rule. */
    grid-template-rows: auto auto minmax(0, var(--mobile-board-row, 1fr)) auto !important;
    grid-template-areas:
      "header"
      "status"
      "board"
      "controls" !important;
    align-content: start !important;
    gap: 0 !important;
    padding:
      max(3px, env(safe-area-inset-top))
      max(7px, env(safe-area-inset-right))
      max(3px, env(safe-area-inset-bottom))
      max(7px, env(safe-area-inset-left));
  }

  html[data-mobile-runtime="true"] body[data-display-mode="standalone"].mobile-completion-state,
  html[data-mobile-runtime="true"] body[data-display-mode="standalone"].mobile-completion-state main {
    box-sizing: border-box;
    height: calc(var(--mobile-vh, 100dvh) - var(--mobile-viewport-top, 0px));
    min-height: 0;
    overflow: hidden;
  }

  html[data-mobile-runtime="true"] body[data-display-mode="standalone"].mobile-completion-state main {
    padding-top: max(3px, env(safe-area-inset-top), var(--mobile-viewport-top, 0px));
  }

  html[data-mobile-runtime="true"] body .topbar {
    grid-area: header;
    min-height: 30px;
    padding: 0 5px 2px;
  }

  html[data-mobile-runtime="true"] body .topbar h1 {
    max-width: none;
    font-size: clamp(.9rem, 4.2vh, 1.18rem) !important;
    white-space: nowrap;
  }

  html[data-mobile-runtime="true"] body .topbar-actions .round-button {
    min-height: 30px;
    padding: 2px clamp(9px, 2vw, 14px);
    font-size: clamp(.62rem, 2.8vh, .78rem);
  }

  html[data-mobile-runtime="true"] body .status-panel {
    grid-area: status;
    min-height: 28px;
    margin: 0 !important;
    padding: 3px 10px 4px;
    border-right: 1px solid rgba(111, 224, 194, .34);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
  }

  html[data-mobile-runtime="true"] body #status,
  html[data-mobile-runtime="true"] body .counter {
    font-size: clamp(.64rem, 2.8vh, .78rem);
  }

  html[data-mobile-runtime="true"] body .board-scroll {
    grid-area: board;
    align-self: stretch;
    display: grid !important;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    height: 100%;
    overflow: hidden;
    place-items: stretch;
  }

  html[data-mobile-runtime="true"] body .board,
  html[data-mobile-runtime="true"] body .mobile-board-complete {
    grid-area: 1 / 1;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: none;
    height: 100% !important;
    min-height: 0;
    aspect-ratio: auto !important;
    border-radius: 0;
  }

  html[data-mobile-runtime="true"] body .controls {
    grid-area: controls;
    align-self: stretch;
    display: grid;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(46px, auto) !important;
    gap: 4px !important;
    padding: 3px 4px max(3px, env(safe-area-inset-bottom)) !important;
    border: 1px solid rgba(111, 224, 194, .28);
    border-top: 0;
    border-radius: 0 0 16px 16px;
  }

  /* Earlier recovery rules intentionally carried a high selector weight.
     Landscape's approved single-column surface must win without weakening
     those recovery safeguards in portrait or on desktop. */
  html[data-mobile-runtime="true"] body[data-mobile-browser="true"][data-mobile-recovery="true"] .board,
  html[data-mobile-runtime="true"] body[data-mobile-browser="true"][data-mobile-recovery="true"] .mobile-board-complete {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    aspect-ratio: auto !important;
  }

  html[data-mobile-runtime="true"] body[data-mobile-browser="true"][data-mobile-recovery="true"] .controls {
    width: 100% !important;
    max-width: none !important;
  }

  html[data-mobile-runtime="true"] body .controls button {
    min-width: 0;
    min-height: 46px;
    padding: 3px 4px;
    border-radius: 10px;
    font-size: clamp(.58rem, 2.5vh, .72rem);
    white-space: nowrap;
  }

  html[data-mobile-runtime="true"] body .controls .mobile-control-icon {
    min-height: 12px;
    font-size: clamp(.76rem, 3vh, .94rem);
  }

  html[data-mobile-runtime="true"] body .mobile-more-dialog[open],
  html[data-mobile-runtime="true"] body .tile-preview:not([hidden]),
  html[data-mobile-runtime="true"] body .help[open] {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: auto;
    width: min(390px, 52vw);
    max-height: calc(100dvh - 16px);
    border-radius: 22px;
  }
}

@media (forced-colors: active) {
  html[data-mobile-runtime="true"] body .mobile-more-dialog[open],
  html[data-mobile-runtime="true"] body .tile-preview:not([hidden]),
  html[data-mobile-runtime="true"] body .help[open] {
    border: 2px solid CanvasText;
    color: CanvasText;
    background: Canvas;
  }
}