/* Hallmark · shape: app screen · genre: playful · theme: custom · idea: "every focused minute grows a Vietnamese plant with a face" · vibe: "flat soft garden, sunny, kawaii, calm" · hero: none, app scope
 * paper: oklch(97% 0.018 155) · accent: oklch(80% 0.13 62) · display: Baloo 2 · body: Nunito
 * nav: top bar over a five-tab bar (Trồng cây, Thở, Chơi, Rừng, Nhật ký), avatar at top right opens Hồ sơ · footer: none, app scope · signature: the timer ring with the plant in its pot on a little hill, growing seed to tree · states: default, hover, focus-visible, pressed, disabled, loading, selected, error, empty
 * axes: light/rounded-sans/chromatic-orange · posture: full-palette · modes: light+dark+auto · contrast: pass (DESIGN.md) · POC v3 shell: a 390 x 844 phone frame beside a POC panel; on a phone the app fills the screen and the panel is a fixed bottom sheet · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R3 V4 · weakest: R, forty-four screens of cute can drift; every screen reuses base.css, one apricot primary per screen, faces only on plants */
/* Hallmark · answered F25 · the POC panel is a tool beside the phone frame on desktop; on a phone the same panel opens from the POC button as a fixed bottom sheet */
/* Hallmark · dismissed 3 · .pz-cell.bt and .pz-cell.bl are the 3px walls between pond regions in Sen Nở, the 2 × 3 boxes in Sudoku Trái Cây and the beds in Chia Luống, drawn between cells, not a stripe on a card */

/* ---------- Token riêng của khung POC (không phải màu của app) ---------- */
:root {
  --poc-bezel: oklch(27% 0.05 165);
  --poc-bezel-ink: oklch(97% 0.018 155);
  --poc-panel-w: 340px;
  --device-w: 390px;
  --device-h: 844px;
  --bezel: 12px;
  --poc-shadow: 0 -8px 30px oklch(27% 0.05 165 / 0.25);
  --poc-away: oklch(27% 0.05 165 / 0.82);
}
html, body { min-height: 100%; }
body { background: var(--color-paper-2); }

/* ---------- Khung: điện thoại giữa trang, bảng POC bên cạnh ---------- */
.poc { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-lg); min-height: 100dvh; padding: var(--space-md); }
.stage { flex: 0 0 auto; width: calc((var(--device-w) + 2 * var(--bezel)) * var(--s, 1)); height: calc((var(--device-h) + 2 * var(--bezel)) * var(--s, 1)); }
.device { width: calc(var(--device-w) + 2 * var(--bezel)); height: calc(var(--device-h) + 2 * var(--bezel)); padding: var(--bezel); border-radius: 56px; background: var(--poc-bezel); transform: scale(var(--s, 1)); transform-origin: 0 0; }
.screen { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; width: var(--device-w); height: var(--device-h); overflow: clip; border-radius: 44px; background: var(--color-paper); color: var(--color-ink); isolation: isolate; }
.view { position: relative; min-width: 0; min-height: 0; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.view:focus { outline: none; }
.view:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: -4px; }
#view h1[tabindex="-1"]:focus, #layer h2[tabindex="-1"]:focus { outline: none; }
.nojs { display: grid; gap: var(--space-sm); padding: var(--space-xl) var(--space-lg); }
.tabs { position: relative; z-index: var(--z-sticky); padding: var(--space-2xs) var(--space-xs) var(--space-md); background: var(--color-card); box-shadow: 0 -1px 0 var(--color-rule); }
.layer { position: absolute; inset: 0; z-index: var(--z-modal); display: grid; align-items: end; overflow: clip; }
.layer--center { align-items: center; justify-items: center; padding: var(--space-md); }
.layer__scrim { position: absolute; inset: 0; background: var(--color-scrim); animation: fade var(--dur-long) var(--ease-out); }
.layer > .sheet, .layer > .dialog { position: relative; z-index: 1; max-height: calc(100% - var(--space-xl)); overflow-y: auto; }
.layer > .sheet { width: 100%; animation: rise var(--dur-long) var(--ease-out); }
.layer > dialog.dialog { position: relative; inset: auto; margin: 0; width: min(100%, 24rem); animation: rise var(--dur-long) var(--ease-out); }
.toasts { position: absolute; left: var(--space-md); right: var(--space-md); bottom: calc(var(--tabs-h, 0px) + var(--space-md)); z-index: var(--z-toast); display: grid; gap: var(--space-xs); pointer-events: none; }
.toasts .toast { pointer-events: auto; }
.sfx-cue { position: absolute; top: var(--space-xs); right: var(--space-lg); z-index: var(--z-tooltip); display: inline-flex; align-items: center; gap: var(--space-3xs); padding: 0 var(--space-xs); min-height: 24px; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: 12px; font-weight: var(--weight-strong); opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
.sfx-cue.is-on { opacity: 0.9; }
.sfx-cue .icon { width: 14px; height: 14px; }

/* ---------- Bảng POC ---------- */
.panel { flex: 0 0 var(--poc-panel-w); position: sticky; top: var(--space-md); display: grid; gap: var(--space-sm); max-height: calc(100dvh - 2 * var(--space-md)); overflow-y: auto; padding: var(--space-md); border-radius: 22px; background: var(--color-card); color: var(--color-ink); box-shadow: var(--shadow-card); font: 500 14px/1.45 var(--font-body); scrollbar-width: thin; }
.panel:focus { outline: none; }
.panel h2 { max-width: none; font: 800 18px/1.3 var(--font-body); }
.panel h3 { max-width: none; margin: 0 0 var(--space-2xs); font: 800 14px/1.3 var(--font-body); }
.panel p { max-width: none; }
.p-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.p-note { color: var(--color-muted); font-size: 13px; }
.p-now { font-weight: 800; }
.p-sec { display: grid; gap: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--color-rule); }
.p-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.p-btn { min-height: 36px; padding: var(--space-2xs) var(--space-sm); border: 0; border-radius: 12px; background: var(--color-paper-2); color: var(--color-ink); font: 700 13px/1.25 var(--font-body); text-align: left; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.p-btn:active { transform: translateY(1px); }
.p-btn[aria-pressed="true"], .p-btn[aria-current="true"] { background: var(--color-select); color: var(--color-select-ink); }
.p-btn[data-armed="1"] { background: var(--color-error-wash); color: var(--color-error); }
.p-jump details { border-radius: 12px; background: var(--color-paper); }
.p-jump summary { min-height: 36px; padding: var(--space-xs) var(--space-sm); font-weight: 800; cursor: pointer; }
.p-jump .p-row { padding: 0 var(--space-xs) var(--space-xs); }
.p-close { display: none; }
.p-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3xs) var(--space-sm); margin: 0; font-size: 13px; }
.p-stat dt { color: var(--color-muted); }
.p-stat dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .p-btn:hover { background: var(--color-rule); } .p-btn[aria-pressed="true"]:hover { background: var(--color-select); } }
.panel-fab { display: none; }

/* Trên điện thoại: app đầy màn, bảng POC là tấm trượt cố định ở đáy. Khai báo SAU luật .panel ở trên, nên position: fixed thắng sticky; khi đóng thì display: none, không thêm chiều cao trang. */
@media (max-width: 859px) {
  .poc { display: block; padding: 0; min-height: 0; }
  .stage { width: 100%; height: 100dvh; }
  .device { width: 100%; height: 100%; padding: 0; border-radius: 0; transform: none; }
  .screen { width: 100%; height: 100%; border-radius: 0; }
  .panel { display: none; position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: var(--z-tooltip); max-height: 82dvh; border-radius: 22px 22px 0 0; box-shadow: var(--poc-shadow); }
  .panel.is-open { display: grid; animation: rise var(--dur-long) var(--ease-out); }
  .p-close { display: inline-flex; }
  .panel-fab { position: fixed; right: 0; top: 42%; z-index: var(--z-tooltip); display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; padding: 0 var(--space-xs); border: 0; border-radius: 16px 0 0 16px; background: var(--poc-bezel); color: var(--poc-bezel-ink); font: 800 13px/1 var(--font-body); cursor: pointer; opacity: 0.88; }
  html.panel-open .panel-fab, html.is-clean .panel-fab { display: none; }
}
html.is-clean .poc { padding: 0; }
html.is-clean .panel { display: none; }

/* ---------- Khung màn chung ---------- */
.scr { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-md); min-height: 100%; padding: 0 var(--space-md) var(--space-xl); }
.scr--field { background: var(--color-field); color: var(--color-field-ink); }
.scr--sky { background: var(--color-sky); color: var(--color-sky-ink); }
.scr--center { align-content: center; justify-items: center; text-align: center; }
.scr > * { min-width: 0; }
.top { display: flex; align-items: center; gap: var(--space-xs); min-height: var(--bar-h); padding-top: var(--space-lg); flex-wrap: wrap; }
.top__title { flex: 1 1 auto; min-width: 0; font-size: var(--text-xl); }
.top__title--s { font-size: var(--text-lg); }
.top__end { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-2xs); margin-left: auto; min-width: 0; }
.avatar { display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; overflow: clip; background: var(--av-bg, var(--tag-1)); color: var(--tag-ink); font-weight: var(--weight-strong); font-size: var(--text-lg); line-height: 1; flex-shrink: 0; transition: transform var(--dur-micro) var(--ease-out); }
.avatar:active { transform: scale(0.94); }
.avatar--l { width: 96px; height: 96px; font-size: var(--text-3xl); }
.avatar img, .avatar svg { width: 100%; height: 100%; object-fit: cover; }
.sec { display: grid; gap: var(--space-sm); }
.sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); flex-wrap: wrap; }
.sec__head h2 { font-size: var(--text-lg); }
.lead { font-size: var(--text-lg); line-height: var(--leading-ui); }
.muted { color: var(--color-muted); }
.stack { display: grid; gap: var(--space-xs); }
.actions { display: grid; gap: var(--space-xs); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.empty { display: grid; justify-items: center; gap: var(--space-sm); padding: var(--space-xl) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); text-align: center; }
.empty svg.plant { width: 96px; height: auto; }
.figure-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.fig { display: grid; gap: var(--space-3xs); padding: var(--space-sm); border-radius: var(--radius-chip); background: var(--color-card); box-shadow: var(--shadow-card); }
.fig b { font-size: var(--text-xl); font-variant-numeric: tabular-nums; line-height: 1.1; }
.fig span { color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-ui); }
.chip.is-pop .chip__art { animation: sprout-pop var(--dur-pop) var(--ease-spring); }
:root[data-text="200"] .grid2, :root[data-text="200"] .figure-row { grid-template-columns: minmax(0, 1fr); }

/* ---------- A: chào mừng ---------- */
.welcome { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-lg); min-height: 100%; padding: var(--space-xl) var(--space-lg) var(--space-xl); background: var(--color-sky); color: var(--color-sky-ink); position: relative; overflow: clip; isolation: isolate; }
.welcome__art { position: relative; display: grid; align-content: center; justify-items: center; gap: var(--space-md); text-align: center; }
.welcome__art .island { width: 100%; max-width: 330px; height: auto; }
.welcome__name { font-size: var(--text-4xl); line-height: 1.05; }
.welcome__line { font-size: var(--text-lg); line-height: var(--leading-ui); max-width: 22ch; }
.cloud { position: absolute; top: var(--top, 10%); left: -30%; width: 120px; height: 36px; border-radius: var(--radius-pill); background: var(--art-cloud); opacity: 0.85; animation: drift var(--dur-cloud) var(--ease-linear) infinite; animation-delay: var(--delay, 0ms); z-index: -1; }
.cloud::before { content: ""; position: absolute; left: 22px; top: -18px; width: 54px; height: 44px; border-radius: 50%; background: inherit; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(560px); } }
.acct { display: flex; align-items: center; gap: var(--space-sm); }
.acct .avatar { width: 40px; height: 40px; font-size: var(--text-md); }

/* ---------- T: trồng cây ---------- */
.focus { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: center; gap: var(--space-sm); min-height: 100%; padding: 0 var(--space-md) var(--space-lg); background: var(--color-field); color: var(--color-field-ink); position: relative; isolation: isolate; overflow: clip; }
.focus > .top { width: 100%; }
.focus__hello { font-size: var(--text-lg); text-align: center; }
.ring-scene .ring__sky { fill: var(--color-sky); }
.ring-scene .ring__hill { fill: var(--art-grass); }
.ring-scene .ring__hill2 { fill: var(--art-grass-2); }
.ring .ring__plant .plant { width: 70%; margin-top: 10%; }
.focus__time-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md); }
.focus__step { background: var(--color-card); font-variant-numeric: tabular-nums; }
.focus__time { font-weight: var(--weight-strong); font-size: var(--text-figure); line-height: 1.2; font-variant-numeric: tabular-nums; }
.focus__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }
.focus__cheer { min-height: 2lh; max-width: 26ch; text-align: center; font-weight: var(--weight-strong); }
.focus .btn--primary { min-width: 12rem; }
.focus__quiet { display: flex; gap: var(--space-xs); flex-wrap: wrap; justify-content: center; }
.coach-layer { position: absolute; inset: 0; z-index: var(--z-dropdown); display: grid; background: var(--color-veil); }
.coach-layer .coach { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: 80%; }
.coach-layer .coach::after { content: ""; position: absolute; left: 50%; width: 14px; height: 14px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.coach--down::after { bottom: -6px; }
.coach--up::after { top: -6px; }
.leave-banner { position: absolute; left: var(--space-md); right: var(--space-md); top: var(--space-md); z-index: var(--z-toast); }
.species-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); list-style: none; }
.species { display: grid; justify-items: center; gap: var(--space-3xs); width: 100%; padding: var(--space-xs) var(--space-2xs) var(--space-sm); border: var(--rule-bar) solid transparent; border-radius: var(--radius-card); background: var(--color-card); color: var(--color-ink); box-shadow: var(--shadow-card); font-weight: var(--weight-strong); line-height: var(--leading-ui); text-align: center; transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.species svg.plant { width: 84%; height: auto; }
.species:active { transform: scale(0.97); }
.species[aria-pressed="true"] { border-color: var(--color-select); }
.species.is-locked svg.plant { opacity: 0.5; }
.species small { display: inline-flex; align-items: center; gap: var(--space-3xs); color: var(--color-muted); font-size: var(--text-sm); }
.species small .chip__art { width: 18px; height: 18px; }
:root[data-text="200"] .species-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.done { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: var(--space-md); min-height: 100%; padding: var(--space-xl) var(--space-lg); background: var(--color-field); color: var(--color-field-ink); text-align: center; position: relative; isolation: isolate; overflow: clip; }
.done__plant .plant { width: 200px; height: auto; }
.done h1 { font-size: var(--text-2xl); }
.done__gains { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }
.done .actions { width: 100%; }
.wilt-scene .plant { width: 180px; height: auto; }
.breakring { line-height: 1.2; font-size: var(--text-figure); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
.swatch-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.swatch-row button { width: var(--tap); height: var(--tap); border-radius: 50%; border: var(--rule-bar) solid var(--color-rule); background: var(--chip-bg); }
.swatch-row button[aria-pressed="true"] { border-color: var(--color-select); box-shadow: inset 0 0 0 3px var(--color-card); }

/* ---------- B: thở ---------- */
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.quick .tile { display: grid; justify-items: start; align-content: space-between; gap: var(--space-sm); min-height: 104px; padding: var(--space-sm); border: 0; border-radius: var(--radius-card); background: var(--color-card); color: var(--color-ink); box-shadow: var(--shadow-card); font-weight: var(--weight-strong); line-height: var(--leading-ui); text-align: left; transition: transform var(--dur-micro) var(--ease-out); }
.quick .tile:active { transform: scale(0.97); }
.quick .tile .icon { width: 30px; height: 30px; color: var(--color-select); }
:root[data-text="200"] .quick { grid-template-columns: minmax(0, 1fr); }
.breath { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: var(--space-md); min-height: 100%; padding: 0 var(--space-md) var(--space-xl); background: var(--color-sky); color: var(--color-sky-ink); position: relative; isolation: isolate; overflow: clip; }
.breath > .top { width: 100%; }
.breath__flower { width: min(78%, 290px); aspect-ratio: 1; }
.breath__flower .bloom { width: 100%; height: 100%; }
.bloom .bl-petal { transform-box: view-box; transform-origin: 100px 100px; transform: scale(var(--open, 0.45)); transition: transform var(--phase-ms, 4000ms) var(--ease-breath); }
.bloom .bl-petal--in { transform: scale(calc(var(--open, 0.45) * 0.85 + 0.15)); }
.bloom .bl-ring { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(calc(var(--open, 0.45) * 30deg)); transition: transform var(--phase-ms, 4000ms) var(--ease-breath); }
.breath__phase { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-3xl); line-height: 1.28; min-height: 1.1em; }
.breath__left { font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
.med-ring { position: relative; width: 240px; aspect-ratio: 1; display: grid; place-items: center; }
.med-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.med-ring .ring__fill { stroke: var(--color-select); }
.med-ring .ring__track { stroke: var(--color-sky-2); }
.med-ring b { font-size: var(--text-figure); font-variant-numeric: tabular-nums; position: relative; }
.bell-wave { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--color-select); opacity: 0; }
.bell-wave.is-on { animation: bellwave 1.6s var(--ease-out); }
@keyframes bellwave { 0% { opacity: 0.9; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.25); } }
.captions { display: grid; gap: var(--space-xs); width: 100%; padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-card); color: var(--color-ink); min-height: 7lh; }
.captions p { color: var(--color-muted); }
.captions p.is-now { color: var(--color-ink); font-weight: var(--weight-strong); font-size: var(--text-lg); }
.progress { width: 100%; height: 10px; border-radius: var(--radius-pill); background: var(--color-sky-2); overflow: clip; }
.progress i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--color-select); transform-origin: left; transform: scaleX(var(--v, 0)); }
.sounds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.sound { display: grid; justify-items: start; gap: var(--space-sm); min-height: 110px; padding: var(--space-md); border: var(--rule-bar) solid transparent; border-radius: var(--radius-card); background: var(--color-card); color: var(--color-ink); box-shadow: var(--shadow-card); font-weight: var(--weight-strong); text-align: left; }
.sound .icon { width: 32px; height: 32px; }
.sound[aria-pressed="true"] { border-color: var(--color-select); background: var(--color-success-wash); }
.sound .eq { display: flex; gap: var(--space-2xs); align-items: end; height: 16px; }
.sound .eq i { width: 4px; height: 100%; border-radius: 2px; background: var(--color-select); transform-origin: bottom; transform: scaleY(0.3); }
.sound[aria-pressed="true"] .eq i { animation: eq 1.1s var(--ease-in-out) infinite alternate; }
.sound .eq i:nth-child(2) { animation-delay: 0.2s; } .sound .eq i:nth-child(3) { animation-delay: 0.45s; }
@keyframes eq { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
:root[data-text="200"] .sounds { grid-template-columns: minmax(0, 1fr); }

/* ---------- C: câu đố ---------- */
.games { display: grid; gap: var(--space-sm); list-style: none; }
.game { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm); border: 0; border-radius: var(--radius-card); background: var(--color-card); color: var(--color-ink); box-shadow: var(--shadow-card); text-align: left; line-height: var(--leading-ui); transition: transform var(--dur-micro) var(--ease-out); }
.game:active { transform: scale(0.98); }
.game__art { width: 64px; height: 64px; border-radius: var(--radius-chip); background: var(--color-paper-2); display: grid; place-items: center; }
.game__art svg { width: 48px; height: 48px; }
.game b { display: block; font-size: var(--text-lg); }
.game__state { display: inline-flex; align-items: center; gap: var(--space-3xs); color: var(--color-muted); font-size: var(--text-sm); }
.game__state.is-done { color: var(--color-success); font-weight: var(--weight-strong); }
.game__streak { display: grid; justify-items: center; font-weight: var(--weight-strong); font-size: var(--text-sm); }
.game__streak .chip__art { width: 24px; height: 24px; }
:root[data-text="200"] .game { grid-template-columns: 48px minmax(0, 1fr); }
:root[data-text="200"] .game__streak { grid-column: 2; justify-items: start; }
.pz-cell[data-r] { --cell-bg: var(--pz-region-1); }
.pz-cell[data-r="1"] { --cell-bg: var(--pz-region-2); } .pz-cell[data-r="2"] { --cell-bg: var(--pz-region-3); } .pz-cell[data-r="3"] { --cell-bg: var(--pz-region-4); }
.pz-cell[data-r="4"] { --cell-bg: var(--pz-region-5); } .pz-cell[data-r="5"] { --cell-bg: var(--pz-region-6); } .pz-cell[data-r="6"] { --cell-bg: var(--pz-region-7); } .pz-cell[data-r="7"] { --cell-bg: var(--pz-region-8); }
.pz-cell.bt { border-top: 3px solid var(--pz-wall); } .pz-cell.bl { border-left: 3px solid var(--pz-wall); }
.pz-cell .num { position: absolute; display: grid; place-items: center; inset: 22%; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-md); font-weight: var(--weight-strong); line-height: 1; }
.pz-cell.on-path { --cell-bg: var(--tag-6); }
.pz-cell.is-head { box-shadow: inset 0 0 0 var(--focus-width) var(--color-select); }
.pz-grid--path { position: relative; }
.pz-path { position: absolute; inset: var(--pz-gap); pointer-events: none; z-index: 1; overflow: visible; }
.pz-path polyline { fill: none; stroke: var(--color-accent-deep); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.pz-cell.is-peer { --cell-bg: var(--color-paper-2); }
.pad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2xs); }
.pad .btn { min-height: var(--tap); padding: 0; }
.pad .btn svg { width: 30px; height: 30px; }
.pz-cell.rect-a { --cell-bg: var(--tag-1); } .pz-cell.rect-b { --cell-bg: var(--tag-2); } .pz-cell.rect-c { --cell-bg: var(--tag-3); } .pz-cell.rect-d { --cell-bg: var(--tag-4); } .pz-cell.rect-e { --cell-bg: var(--tag-5); } .pz-cell.rect-f { --cell-bg: var(--tag-6); }
.pz-cell.is-drag { box-shadow: inset 0 0 0 var(--focus-width) var(--color-accent-deep); }
.pz-cell .clue { position: relative; z-index: 1; display: grid; place-items: center; width: 70%; aspect-ratio: 1; border-radius: 30%; background: var(--color-card); color: var(--color-ink); font-weight: var(--weight-strong); }
.win { position: relative; display: grid; place-items: center; min-height: 200px; border-radius: var(--radius-card); background: var(--color-field); overflow: clip; isolation: isolate; }
.win svg { width: 100%; height: 200px; }
.win .w-pop { transform-box: fill-box; transform-origin: center; animation: pop var(--dur-pop) var(--ease-spring) both; animation-delay: var(--d, 0ms); }
.win .w-hop { transform-box: fill-box; transform-origin: bottom center; animation: hop 0.9s var(--ease-in-out) var(--d, 0ms) 3 both; }
.win .w-fly { offset-rotate: auto; animation: fly 2.6s var(--ease-in-out) both; }
.win .w-tilt { transform-box: view-box; transform-origin: 150px 120px; animation: tilt 2.4s var(--ease-in-out) both; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px) scale(1.05); } }
@keyframes tilt { 0% { transform: rotate(-8deg); } 30% { transform: rotate(6deg); } 60% { transform: rotate(-3deg); } 100% { transform: rotate(0deg); } }
@keyframes fly { 0% { transform: translate(-130px, 40px) rotate(-10deg); } 50% { transform: translate(0, -30px) rotate(8deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
.share-text { margin: 0; padding: var(--space-md); border-radius: var(--radius-chip); background: var(--color-paper-2); white-space: pre-wrap; font: inherit; font-weight: var(--weight-strong); }
.pz-tools .btn { gap: var(--space-2xs); padding-inline: var(--space-2xs); }
:root[data-text="200"] .pz-tools { grid-template-columns: minmax(0, 1fr); }

/* ---------- R: rừng ---------- */
.forest-stage { position: relative; display: grid; place-items: center; padding: var(--space-md) var(--space-xs); border-radius: var(--radius-sheet); background: var(--color-sky); }
.forest-stage .island { width: 100%; height: auto; }
.forest-stage .isl-hit { position: absolute; width: 44px; height: 44px; transform: translate(-50%, -90%); border: 0; border-radius: 50%; background: transparent; padding: 0; }
.period { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.period b { text-align: center; flex: 1 1 auto; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3xs); }
.week__day { display: grid; align-content: start; justify-items: center; gap: var(--space-3xs); min-height: 220px; padding: var(--space-xs) 0; border: 0; border-radius: var(--radius-chip); background: var(--color-card); color: var(--color-ink); box-shadow: var(--shadow-card); font-weight: var(--weight-strong); font-size: var(--text-sm); line-height: 1.2; }
.week__day.is-today { box-shadow: inset 0 0 0 var(--rule-bar) var(--color-select); }
.week__day svg.plant { width: 100%; height: auto; }
.week__more { font-size: var(--text-xs); color: var(--color-muted); }
:root[data-text="200"] .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3xs); }
.month__wd { text-align: center; font-size: var(--text-xs); color: var(--color-muted); font-weight: var(--weight-strong); }
.month__day { position: relative; display: grid; justify-items: center; align-content: start; aspect-ratio: 0.8; padding: var(--space-3xs) 0 0; border: 0; border-radius: var(--radius-cell); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-xs); font-weight: var(--weight-strong); }
.month__day.has { background: var(--color-card); box-shadow: var(--shadow-card); }
.month__day svg.plant { width: calc(40% + var(--sz, 0) * 50%); height: auto; margin-top: auto; }
.month__day.is-today { box-shadow: inset 0 0 0 var(--rule-bar) var(--color-select); }
:root[data-text="200"] .month { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:root[data-text="200"] .month__wd { display: none; }
.yearwrap { overflow-x: auto; padding: var(--space-sm); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--shadow-card); scrollbar-width: thin; }
.year { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs); width: max-content; }
.year__wd { display: grid; grid-template-rows: repeat(7, 12px); gap: var(--space-2xs); font-size: 10px; line-height: 12px; color: var(--color-muted); font-weight: var(--weight-strong); }
.year__months { display: flex; font-size: 11px; color: var(--color-muted); height: 16px; position: relative; }
.year__months span { position: absolute; }
.heat button { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 3px; background: var(--heat-0); display: grid; place-items: center; }
.heat button[data-l="1"] { background: var(--heat-1); } .heat button[data-l="2"] { background: var(--heat-2); } .heat button[data-l="3"] { background: var(--heat-3); } .heat button[data-l="4"] { background: var(--heat-4); }
.heat button[data-leaf]::after { content: ""; width: 5px; height: 5px; border-radius: 50% 0; background: var(--heat-ink); transform: rotate(-20deg); }
.heat button[data-l="3"][data-leaf]::after, .heat button[data-l="4"][data-leaf]::after { background: var(--heat-ink-strong); }
.heat button.is-future { visibility: hidden; }
.heat button:focus-visible { outline-offset: 1px; outline-width: 2px; }
.legend { display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-muted); }
.legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--heat-0); }
.legend i[data-l="1"] { background: var(--heat-1); } .legend i[data-l="2"] { background: var(--heat-2); } .legend i[data-l="3"] { background: var(--heat-3); } .legend i[data-l="4"] { background: var(--heat-4); }
.hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: end; gap: var(--space-3xs); height: 110px; padding-top: var(--space-xs); }
.hours i { display: block; height: 100%; border-radius: 3px 3px 0 0; background: var(--heat-3); transform-origin: bottom; transform: scaleY(var(--v, 0.02)); }
.hours-axis { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-muted); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3xs); }
.cal span { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-cell); background: var(--color-paper-2); font-size: var(--text-xs); font-weight: var(--weight-strong); }
.cal span.is-tick { background: var(--color-success-wash); }
.cal span.is-rest { background: var(--color-sky); }
.cal span.is-today { box-shadow: inset 0 0 0 var(--rule-bar) var(--color-select); }
.cal span svg { position: absolute; inset: 14%; width: 72%; height: 72%; }
.cal span b { position: absolute; top: 2px; left: 4px; font-size: 10px; }
.badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); list-style: none; }
.badges li { display: grid; justify-items: center; gap: var(--space-3xs); font-size: var(--text-sm); text-align: center; line-height: 1.2; }
.badges li svg { width: 100%; max-width: 64px; height: auto; }
.badges li.is-locked svg { opacity: 0.35; }
:root[data-text="200"] .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.big-streak { display: grid; justify-items: center; gap: var(--space-2xs); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-field); color: var(--color-field-ink); text-align: center; }
.big-streak b { font-size: var(--text-figure); line-height: 1.2; font-variant-numeric: tabular-nums; }
.big-streak svg { width: 72px; height: 72px; }
.list-tree { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; }
.list-tree svg.plant { width: 48px; height: auto; }

/* ---------- N: nhật ký ---------- */
.search { position: relative; }
.search .icon { position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.search .field__input { padding-left: calc(var(--space-md) + 28px); }
.day-group { display: grid; gap: var(--space-xs); }
.day-group h2 { font-size: var(--text-md); color: var(--color-ink-2); font-family: var(--font-body); }
.entry { display: grid; gap: var(--space-xs); width: 100%; padding: var(--space-md); border: 0; border-radius: var(--radius-card); background: var(--color-card); color: var(--color-ink); box-shadow: var(--shadow-card); text-align: left; line-height: var(--leading-body); }
.entry__meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; color: var(--color-muted); font-size: var(--text-sm); }
.entry__thumbs { display: flex; gap: var(--space-2xs); }
.entry__thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-cell); }
.entry__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fab { position: absolute; right: var(--space-md); bottom: calc(var(--tabs-h, 0px) + var(--space-md)); z-index: var(--z-raised); }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs); list-style: none; }
.thumbs li { position: relative; }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-cell); }
.thumbs .btn { position: absolute; top: 2px; right: 2px; min-height: 36px; width: 36px; padding: 0; background: var(--color-card); }
.voices { display: grid; gap: var(--space-xs); list-style: none; }
.voice { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); }
.voice span { flex: 1 1 auto; font-variant-numeric: tabular-nums; font-weight: var(--weight-strong); }
.moods { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2xs); }
.moods button { display: grid; justify-items: center; gap: var(--space-3xs); padding: var(--space-2xs) 0; border: var(--rule-bar) solid transparent; border-radius: var(--radius-chip); background: transparent; font-size: var(--text-xs); font-weight: var(--weight-strong); line-height: 1.2; }
.moods button svg { width: 40px; height: 40px; }
.moods button[aria-pressed="true"] { border-color: var(--color-select); background: var(--color-paper-2); }
:root[data-text="200"] .moods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rec { display: grid; justify-items: center; gap: var(--space-md); text-align: center; }
.rec__btn { width: 96px; height: 96px; border-radius: 50%; border: 0; background: var(--color-error); color: var(--color-card); display: grid; place-items: center; box-shadow: inset 0 calc(-1 * var(--lip)) 0 var(--color-error-deep); transition: transform var(--dur-micro) var(--ease-out); }
.rec__btn .icon { width: 40px; height: 40px; }
.rec__btn:active { transform: scale(0.95); }
.rec__btn.is-rec { background: var(--color-ink); }
.rec__time { font-size: var(--text-2xl); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
.rec canvas { width: 100%; height: 72px; border-radius: var(--radius-chip); background: var(--color-paper-2); }
.carousel { display: flex; gap: var(--space-xs); overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius-card); scrollbar-width: thin; }
.carousel img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; scroll-snap-align: center; border-radius: var(--radius-card); }
.album { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); list-style: none; }
.album button { padding: 0; border: 0; border-radius: var(--radius-cell); overflow: clip; background: var(--color-paper-2); }
.album img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.card-preview { width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.mood-art { width: 36px; height: 36px; }

/* ---------- P: hồ sơ ---------- */
.profile-head { display: grid; justify-items: center; gap: var(--space-sm); text-align: center; }
.danger-zone { display: grid; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-error-wash); }

/* ---------- Đảo rừng: cây đung đưa, chớp mắt ---------- */
.isl-box { position: relative; width: 100%; }
.island .pl-sway { transform-box: fill-box; transform-origin: 50% 100%; }
.island .pl-eyes { transform-box: fill-box; transform-origin: center; }
.island.is-alive .pl-sway { animation: sway var(--dur-sway) var(--ease-in-out) infinite alternate; }
.island.is-alive .isl-tree:nth-of-type(2n) .pl-sway { animation-delay: -1600ms; }
.island.is-alive .isl-tree:nth-of-type(3n) .pl-sway { animation-delay: -2900ms; }
.island.is-alive .pl-eyes { animation: blink var(--dur-blink) var(--ease-linear) infinite; }
.art-icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }

/* ---------- Giảm chuyển động riêng của POC ---------- */
@media (prefers-reduced-motion: reduce) { .cloud, .sound .eq i, .bell-wave, .win *, .island .pl-sway, .island .pl-eyes { animation: none !important; } .panel.is-open { animation: none; } }
:root[data-motion="reduce"] .cloud, :root[data-motion="reduce"] .sound .eq i, :root[data-motion="reduce"] .bell-wave, :root[data-motion="reduce"] .win *, :root[data-motion="reduce"] .island .pl-sway, :root[data-motion="reduce"] .island .pl-eyes { animation: none !important; }

/* ---------- v3.1 (spec/00 mục 13): nhãn, cài đặt, trồng lại, giả lập điện thoại, hướng dẫn câu đố ---------- */
/* Nhãn dùng chung: mọi nhãn cùng chiều cao 44px, bo tròn, khoảng đệm; chấm màu và chữ canh giữa theo chiều dọc; một hàng cuộn ngang */
.tagrow { display: flex; flex-wrap: nowrap; gap: var(--space-xs); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--space-md)); padding: var(--space-3xs) var(--space-md); scroll-padding-inline: var(--space-md); scrollbar-width: none; }
.tagrow::-webkit-scrollbar { display: none; }
.tagrow > * { flex: 0 0 auto; scroll-snap-align: start; }
.tagrow--center { justify-content: safe center; margin-inline: 0; padding-inline: 0; }
.tag { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md) 0 var(--space-sm); border: 0; border-radius: var(--radius-pill); background: var(--chip-bg, var(--tag-6)); color: var(--tag-ink); box-shadow: none; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-strong); line-height: 1.2; white-space: nowrap; text-decoration: none; }
.tag--plain { padding-inline: var(--space-md); background: var(--color-paper-2); color: var(--color-ink); }
.tag svg { width: 18px; height: 18px; flex: 0 0 auto; }
.tag__dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: color-mix(in oklch, var(--chip-bg, var(--tag-1)), var(--tag-ink) 38%); box-shadow: 0 0 0 var(--rule-bar) var(--color-card); }
button.tag { cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
button.tag:active { transform: translateY(1px); }
/* Nhãn bấm để lọc hoặc chọn: chưa chọn là nền thẻ có chấm màu, đã chọn là nền màu nhãn có viền đậm */
button.tag[aria-pressed="false"] { background: var(--color-card); color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
button.tag[aria-pressed="true"] { box-shadow: inset 0 0 0 var(--rule-bar) var(--tag-ink); }
button.tag--plain[aria-pressed="true"] { background: var(--color-select); color: var(--color-select-ink); box-shadow: none; }
@media (hover: hover) { button.tag:hover { box-shadow: inset 0 0 0 var(--rule-bar) var(--color-edge); } button.tag[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 var(--rule-bar) var(--tag-ink); } }
.row__main > .tag { justify-self: start; }
.focus .tagrow { justify-content: safe center; max-width: calc(100% + 2 * var(--space-md)); }
.top .tag { min-height: 36px; }
.labels-list li { display: flex; align-items: center; padding-right: var(--space-xs); }
.labels-list .row { flex: 1 1 auto; min-width: 0; }
.row__end { display: inline-flex; align-items: center; gap: var(--space-2xs); }

/* Hồ sơ và cài đặt: hàng thẳng, nhãn trái, giá trị và công tắc phải, thanh trượt nằm trong thẻ */
.name-edit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); width: 100%; }
.name-edit__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: stretch; }
.name-edit__row .field__input { flex: 1 1 10rem; width: auto; min-width: 0; }
.name-edit__row .btn { flex: 0 0 auto; min-height: var(--tap-l); }
.row--stack { display: grid; align-items: stretch; gap: var(--space-2xs); }
.row__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); min-width: 0; }
.row__label { min-width: 0; }
.row--stack .seg { margin-block: var(--space-2xs); }
.profile-head { width: 100%; }

/* Trồng lại */
.replant-note { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm); border-radius: var(--radius-chip); background: var(--color-card); color: var(--color-ink); box-shadow: var(--shadow-card); text-align: left; }
.replant-note p { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); line-height: var(--leading-ui); }
.replant-note svg { flex: 0 0 auto; width: 32px; height: 40px; }
.isl-tag { position: absolute; z-index: var(--z-base); transform: translate(-50%, 4px); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: clamp(11px, var(--text-xs), 14px); font-weight: var(--weight-strong); line-height: 1.2; white-space: nowrap; pointer-events: none; }
.isl-tag--done { background: var(--color-select); color: var(--color-select-ink); }
.isl-hole { animation: fade var(--dur-long) var(--ease-out); }
.isl-tree .plant-mini { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 700ms var(--ease-out), opacity 700ms var(--ease-out); }
.isl-tree.is-lift .plant-mini { transform: translateY(-36px) rotate(8deg); opacity: 0; }
.isl-tree.is-fade { opacity: 0; transition: opacity 400ms var(--ease-out); }
.isl-tree.is-pop .plant-mini { animation: sprout-pop var(--dur-pop) var(--ease-spring) both; }
.dig { position: absolute; z-index: var(--z-raised); width: 64px; height: 72px; transform: translate(-50%, -92%); pointer-events: none; }
.dig__shovel { position: absolute; left: 24px; top: -8px; width: 34px; height: 46px; transform-origin: 50% 90%; animation: dig 650ms var(--ease-in-out) 2; }
.dig__soil i { position: absolute; left: 50%; bottom: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--art-earth); opacity: 0; animation: soil 700ms var(--ease-out) var(--d, 0ms) both; }
@keyframes dig { 0%, 100% { transform: translate(14px, -18px) rotate(28deg); } 50% { transform: translate(0, 8px) rotate(-10deg); } }
@keyframes soil { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
.month__day.is-wilt { box-shadow: none; background: var(--color-paper-2); }
.heat button[data-wilt]::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--art-wilt-2); }

/* Giả lập điện thoại: màn hình chính, màn hình khóa, thông báo có tương tác, Live Activity (bảng POC) */
.phone { position: absolute; inset: 0; z-index: var(--z-tooltip); display: grid; align-content: start; gap: var(--space-md); padding: var(--space-md) var(--space-md) var(--space-lg); overflow-y: auto; background: linear-gradient(170deg, var(--color-sky-2), var(--color-field-3)); color: var(--color-ink); animation: fade var(--dur-short) var(--ease-out); }
.phone--lock { justify-items: center; text-align: center; background: var(--poc-bezel); color: var(--poc-bezel-ink); }
.phone__bar { display: flex; justify-content: space-between; align-items: center; width: 100%; font-weight: var(--weight-strong); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.phone__sim { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-xs); }
.phone--lock .phone__sim { background: var(--poc-bezel-ink); color: var(--poc-bezel); }
.phone__notes { display: grid; gap: var(--space-xs); width: 100%; }
.phone__notes:empty { display: none; }
.phone__apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md) var(--space-xs); list-style: none; margin-top: var(--space-sm); }
.phone__apps li, .phone__vv { display: grid; justify-items: center; align-content: start; gap: var(--space-2xs); font-size: var(--text-xs); font-weight: var(--weight-strong); line-height: 1.2; text-align: center; }
.phone__vv { width: 100%; min-height: var(--tap); padding: 0; border: 0; border-radius: var(--radius-chip); background: transparent; color: inherit; font: inherit; font-size: var(--text-xs); font-weight: var(--weight-strong); cursor: pointer; }
.phone__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--color-card); color: var(--color-ink-2); box-shadow: var(--shadow-card); }
.phone__icon svg { width: 26px; height: 26px; }
.phone__icon--vv { background: var(--color-field); box-shadow: inset 0 0 0 var(--rule-bar) var(--color-select), var(--shadow-card); }
.phone__icon--vv svg { width: 40px; height: 40px; }
.phone__hint { font-size: var(--text-sm); line-height: var(--leading-ui); text-align: center; }
.phone__clock { margin-top: var(--space-md); font-size: calc(var(--text-figure) * 1.4); font-weight: var(--weight-strong); line-height: 1; font-variant-numeric: tabular-nums; }
.phone__date { font-weight: var(--weight-strong); }
.note-card { display: grid; gap: var(--space-2xs); width: 100%; padding: var(--space-sm) var(--space-md) var(--space-md); border-radius: var(--radius-card); background: var(--color-card); color: var(--color-ink); box-shadow: var(--shadow-card); text-align: left; animation: note-in var(--dur-long) var(--ease-spring) both; }
@keyframes note-in { from { opacity: 0; transform: translateY(-110%); } to { opacity: 1; transform: none; } }
.note-card__head { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
.note-card__head b { color: var(--color-ink); }
.note-card__head span:last-child { margin-left: auto; }
.note-card__app { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--color-field); color: var(--color-field-ink); }
.note-card__app svg { width: 18px; height: 18px; }
.note-card__art { position: relative; height: 120px; margin-block: var(--space-2xs); border-radius: var(--radius-chip); overflow: clip; }
.note-card__art > svg { display: block; width: 100%; height: 100%; }
.note-card__plant { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); }
.note-card__plant svg { display: block; width: 74px; height: auto; }
.note-card__title { font-weight: var(--weight-strong); }
.note-card__body { color: var(--color-ink-2); font-size: var(--text-sm); }
.note-card .btn { margin-top: var(--space-xs); }
.live { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-card); color: var(--color-ink); text-align: left; }
.live__plant svg { display: block; width: 56px; height: auto; }
.live__main { display: grid; flex: 1 1 auto; gap: var(--space-2xs); min-width: 0; }
.live__time { font-size: var(--text-2xl); font-weight: var(--weight-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
.live__bar { height: 8px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: clip; }
.live__bar i { display: block; height: 100%; background: var(--color-select); transform-origin: left center; transform: scaleX(var(--v, 0)); transition: transform var(--dur-short) linear; }

/* Hướng dẫn câu đố (C09): lưới tập 4 × 4 và bàn tay chỉ */
.tut { position: relative; justify-self: center; width: min(100%, 248px); }
.tut .pz-grid { --pz-cell: 56px; }
.tut__text { min-height: 2lh; font-weight: var(--weight-strong); }
.tut__hand { position: absolute; z-index: var(--z-raised); width: 40px; height: 48px; margin: calc(-1 * var(--space-2xs)) 0 0 calc(-1 * var(--space-sm)); pointer-events: none; animation: tut-tap 1.2s var(--ease-in-out) infinite; }
.tut__hand[hidden] { display: none; }
.tut__hand svg { display: block; width: 100%; height: 100%; }
@keyframes tut-tap { 0%, 100% { transform: translateY(8px); } 50% { transform: translateY(0) scale(0.92); } }
.tut__pad { justify-self: center; width: min(100%, 16rem); }
.pz-cell.is-target { box-shadow: inset 0 0 0 var(--focus-width) var(--color-accent-deep); }
:root[data-motion="reduce"] .tut__hand, :root[data-motion="reduce"] .note-card, :root[data-motion="reduce"] .dig__shovel { animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .tut__hand, .note-card, .dig__shovel { animation: none; transition: none; } .isl-tree .plant-mini { transition: none; } }
.phone--lock .btn--secondary { border-color: var(--poc-bezel-ink); background: transparent; color: var(--poc-bezel-ink); }
.tut__pad .btn { border: var(--rule-bar) solid var(--color-rule); background: var(--color-card); }

/* ---------- v3.2 (sửa 10/11): lưới lựa chọn B03, cặp nút màn "Xong rồi", bảng chia sẻ giả lập ---------- */
/* Lưới lựa chọn: ô bằng nhau, chữ xuống dòng trong ô, không bao giờ tràn */
.opts { display: grid; gap: var(--space-xs); min-width: 0; margin: 0; padding: 0; border: 0; }
.opts > legend { padding: 0; margin-bottom: var(--space-xs); }
.opts__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); }
.opts__grid input { position: absolute; opacity: 0; pointer-events: none; }
.opts__grid label { display: grid; justify-items: center; align-content: center; gap: var(--space-2xs); min-width: 0; min-height: var(--tap-l); padding: var(--space-xs) var(--space-2xs); border-radius: var(--radius-chip); background: var(--color-card); color: var(--color-ink); font-weight: var(--weight-strong); font-size: var(--text-sm); line-height: var(--leading-ui); text-align: center; overflow-wrap: anywhere; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.opts__grid label .icon { width: 24px; height: 24px; }
.opts__num { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.opts__grid input:checked + label { background: var(--color-select); color: var(--color-select-ink); }
.opts__grid input:focus-visible + label { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
@media (hover: hover) { .opts__grid input:not(:checked) + label:hover { background: var(--color-paper-2); } }
:root[data-text="200"] .opts--sound .opts__grid { grid-template-columns: minmax(0, 1fr); }
:root[data-text="200"] .opts--sound .opts__grid label { grid-auto-flow: column; justify-content: start; justify-items: start; gap: var(--space-sm); padding-inline: var(--space-md); text-align: left; }
:root[data-text="200"] .opts__num { font-size: var(--text-md); }

/* Cặp nút ở màn "Xong rồi" (B06, T06, C08): hai nút bằng nhau cạnh nhau; chữ 200% thì xếp dọc */
.actions--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.actions--pair > .btn { min-height: var(--tap-l); padding-inline: var(--space-sm); font-size: var(--text-md); white-space: normal; }
.actions--pair > .btn--wide { grid-column: 1 / -1; }
:root[data-text="200"] .actions--pair { grid-template-columns: minmax(0, 1fr); }

/* Bảng chia sẻ giả lập */
.sim-tag { justify-self: start; display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-xs); border: var(--rule-hair) dashed currentColor; border-radius: var(--radius-pill); color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-strong); }
.share-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.share-thumb { display: block; width: 100%; max-height: 220px; object-fit: contain; border-radius: var(--radius-card); background: var(--color-paper-2); }
.share-files { display: flex; align-items: center; gap: var(--space-xs); min-height: var(--tap); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); font-weight: var(--weight-strong); }
.share-post { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); }
.share-post .field__input { min-height: 5.5em; resize: vertical; }
.share-done { display: grid; justify-items: center; gap: var(--space-sm); text-align: center; }
.share-done .icon { width: 48px; height: 48px; color: var(--color-select); }

/* Sửa bố cục tìm thấy khi rà màn (sửa 10/11) */
.top__title { flex: 1 1 0; overflow-wrap: break-word; } /* chữ 200%: tiêu đề xuống dòng, nút ở cuối thanh không bị đẩy xuống hàng dưới */
.row__main, .row__sub { overflow-wrap: anywhere; } /* P03: email dài không tràn ra ngoài màn */
:root[data-text="200"] .labels-list .row { flex-wrap: wrap; } /* T08: "Đang chọn" xuống dòng thay vì đè lên tên nhãn */
.range { margin-inline: 0; } /* B05, P02: thanh âm lượng rộng hơn ô chứa 2px vì lề mặc định của trình duyệt */
.share-ava { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--color-paper-2); color: var(--color-ink); font-weight: var(--weight-strong); }
.share-ava .icon { width: 20px; height: 20px; }
.q-drop { color: var(--color-error); }
.share-done .sim-tag { justify-self: center; }
/* T01 chữ 200%: giờ nằm trên, hai nút −5 và +5 cân hai bên ở hàng dưới (trước đó −5 đứng cạnh giờ, +5 rơi xuống dòng) */
:root[data-text="200"] .focus__time-row { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; }
:root[data-text="200"] .focus__time { grid-column: 1 / -1; grid-row: 1; text-align: center; }
:root[data-text="200"] .focus__step { width: auto; min-width: var(--tap); padding-inline: var(--space-sm); }

/* ---------- App iPhone (Capacitor): chừa vùng tai thỏ và thanh home ---------- */
html.is-app, html.is-app body { height: 100%; overflow: hidden; background: var(--color-paper); }
html.is-app .stage { height: 100vh; height: 100dvh; }
html.is-app .screen { padding-top: env(safe-area-inset-top); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.is-app .screen input, html.is-app .screen textarea { -webkit-user-select: text; user-select: text; }
html.is-app .tabs { padding-bottom: max(var(--space-md), env(safe-area-inset-bottom)); }
html.is-app .screen:has(> .tabs[hidden]) .view { padding-bottom: env(safe-area-inset-bottom); }
html.is-app .sheet { padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom)); }
html.is-app * { -webkit-tap-highlight-color: transparent; }
html.is-app .screen:has(> .tabs[hidden]) .toasts, html.is-app .screen:has(> .tabs[hidden]) .fab { bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); }