/* ============================================================
   《直笛音符森林》基礎樣式：色彩、字體、按鈕、頁首頁尾、對話框
   ============================================================ */
:root {
  --ink: #22372f;
  --ink-soft: #4e665b;
  --paper: #fbf7e9;
  --paper-2: #f4eeda;
  --cream: #fffdf4;
  --leaf: #2f7d5b;
  --leaf-dark: #1f5e43;
  --leaf-light: #8fca8a;
  --moss: #dfecc7;
  --sky: #3d8fae;
  --sky-light: #cfe9ef;
  --sun: #f0b94d;
  --sun-light: #fbe6aa;
  --rose: #b65c6b;
  --rose-light: #f4cbc7;
  --brown: #8a5a33;
  --line: rgba(34, 55, 47, .16);
  --shadow-sm: 0 2px 0 rgba(34, 55, 47, .12), 0 6px 18px rgba(34, 55, 47, .08);
  --shadow-md: 0 4px 0 rgba(34, 55, 47, .12), 0 18px 42px rgba(34, 55, 47, .14);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 30px;
  --footer-h: 52px;
  --topbar-h: 68px;
  --font: "Noto Sans TC", "PingFang TC", "Hiragino Sans TC", "Microsoft JhengHei", "Heiti TC", system-ui, -apple-system, sans-serif;
  --font-round: "Yuanti TC", "YuanTi TC", "PingFang TC", var(--font);
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  background:
    radial-gradient(1100px 620px at 8% -12%, #e8f1cf 0%, rgba(232, 241, 207, 0) 62%),
    radial-gradient(900px 520px at 96% 4%, #d9eef1 0%, rgba(217, 238, 241, 0) 58%),
    linear-gradient(180deg, #fbf8e9 0%, #f5f0dc 48%, #eef2dd 100%);
  background-attachment: fixed;
  overflow: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: radial-gradient(rgba(47, 125, 91, .35) .7px, transparent .7px);
  background-size: 18px 18px;
  z-index: -1;
}
img, svg { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--leaf-dark); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--leaf); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-round); line-height: 1.25; letter-spacing: .015em; }
h1 { font-size: clamp(1.8rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.2rem, 2.5vw, 1.65rem); }
h3 { font-size: 1.05rem; }
p { margin-bottom: .8em; }
ul, ol { padding-left: 1.35em; }
::selection { background: var(--sun-light); color: var(--ink); }

:focus-visible {
  outline: 3px solid #176d9b;
  outline-offset: 3px;
  border-radius: 8px;
}
.skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  transition: top .2s;
}
.skip-link:focus { top: 0; color: #fff; }
[hidden] { display: none !important; }
.muted { color: var(--ink-soft); }
.eyebrow {
  margin: 0 0 .45em;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .14em;
  color: var(--leaf-dark);
  text-transform: none;
}

/* ---------- 頁首 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--topbar-h);
  padding: 8px clamp(12px, 3vw, 28px);
  background: rgba(251, 247, 233, .9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 3px 6px 3px 2px;
  background: none;
  border: 0;
  border-radius: 12px;
  text-align: left;
}
.brand-mark { display: grid; place-items: center; flex: 0 0 auto; filter: drop-shadow(0 3px 0 rgba(34, 55, 47, .14)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-text strong { font-family: var(--font-round); font-size: clamp(1rem, 2.6vw, 1.24rem); letter-spacing: .03em; white-space: nowrap; }
.brand-text small { color: var(--ink-soft); font-size: .69rem; letter-spacing: .06em; white-space: nowrap; }
.sysbar { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 13px;
  box-shadow: 0 2px 0 rgba(34, 55, 47, .12);
  transition: transform .15s, background .15s, box-shadow .15s;
}
.icon-btn:hover { background: var(--moss); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(1px); box-shadow: none; }
.icon-btn.is-on { background: var(--leaf); color: #fff; border-color: var(--leaf-dark); }

/* ---------- 主要內容與頁尾 ---------- */
#app {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: min(1220px, 100%);
  margin: 0 auto;
  padding: clamp(14px, 2.4vw, 26px) clamp(12px, 3vw, 30px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.site-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: var(--footer-h);
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  background: rgba(34, 55, 47, .96);
  color: #f8f3df;
  border-top: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
}
.footer-line {
  margin: 0;
  max-width: 100%;
  font-size: clamp(.68rem, 1.8vw, .8rem);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  margin: -12px -4px;
  color: #ffe7a3;
  text-decoration-color: rgba(255, 231, 163, .6);
}
.site-footer a:hover { color: #fff3c9; }

/* ---------- 按鈕 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .14s, box-shadow .14s, background .14s;
  box-shadow: 0 3px 0 rgba(34, 55, 47, .16);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn-primary { background: var(--leaf); color: #fffdf4; border-color: var(--leaf-dark); }
.btn-primary:hover { background: #358d66; }
.btn-soft { background: var(--moss); color: var(--leaf-dark); border-color: rgba(47, 125, 91, .28); }
.btn-soft:hover { background: #d2e6b6; }
.btn-ghost { background: rgba(255, 253, 244, .82); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: #fff; }
.btn-danger { background: var(--rose); color: #fff; border-color: #8e3f4d; }
.btn-danger:hover { background: #c36977; }
.btn-xl { min-height: 54px; padding: 12px 26px; font-size: 1.12rem; border-radius: 17px; }
.btn-small { min-height: 44px; padding: 7px 12px; font-size: .88rem; border-radius: 11px; box-shadow: 0 2px 0 rgba(34, 55, 47, .12); }
.btn-audio { background: var(--sky-light); border-color: rgba(61, 143, 174, .3); color: #1b6079; }
.btn-hint { background: var(--sun-light); border-color: rgba(190, 135, 32, .3); color: #74510d; }
.btn[aria-expanded="true"] { background: #f6d67c; }
.btn.is-disabled, .btn:disabled { opacity: .55; transform: none; box-shadow: none; }

/* ---------- 對話框 ---------- */
.modal {
  width: min(660px, calc(100vw - 24px));
  max-height: min(86vh, 820px);
  padding: 0;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(20, 38, 30, .38);
  overflow: auto;
}
.modal::backdrop { background: rgba(22, 40, 32, .56); backdrop-filter: blur(3px); }
.modal[open] { animation: modal-in .24s ease-out; }
.modal-small { width: min(460px, calc(100vw - 24px)); }
.modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  background: #eef4df;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 { margin: 0; font-size: 1.35rem; }
.modal-close { width: 44px; height: 44px; font-size: 1rem; background: #fff; }
.modal-body { padding: 18px 20px 8px; }
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px 20px;
}
.setting-group {
  padding: 4px 0 16px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.setting-group:last-child { border-bottom: 0; margin-bottom: 0; }
.setting-group h3 { margin-bottom: 10px; color: var(--leaf-dark); }
.switch-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 6px 0;
  cursor: pointer;
}
.switch-row > span:first-child { display: flex; flex-direction: column; }
.switch-row small { color: var(--ink-soft); font-size: .78rem; line-height: 1.45; }
.switch {
  position: absolute;
  right: 0;
  width: 52px;
  height: 32px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.switch-ui {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 32px;
  border-radius: 999px;
  background: #c9c4ae;
  border: 1.5px solid rgba(34, 55, 47, .2);
  transition: background .18s;
}
.switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: transform .18s;
}
.switch:checked + .switch-ui { background: var(--leaf); }
.switch:checked + .switch-ui::after { transform: translateX(20px); }
.switch:focus-visible + .switch-ui { outline: 3px solid #176d9b; outline-offset: 3px; }
.range-row {
  display: grid;
  grid-template-columns: minmax(88px, 1fr) minmax(120px, 1.4fr) 52px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: .92rem;
}
.range-row input[type="range"] { width: 100%; min-width: 0; margin: 0; accent-color: var(--leaf); min-height: 44px; }
.range-row output { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.setting-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.steps-list { margin: 0 0 12px; padding-left: 1.3em; }
.steps-list li { margin-bottom: .55em; }
.offline-status { min-height: 1.5em; margin: 8px 0 0; font-size: .85rem; color: var(--sky); }
.setting-about p { font-size: .9rem; }
.kbd {
  display: inline-block;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  font-size: .9em;
}

/* ---------- 提示與彩帶 ---------- */
.toast-stack {
  position: fixed;
  top: calc(var(--topbar-h) + 10px);
  left: 50%;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(440px, calc(100vw - 24px));
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  width: 100%;
  padding: 10px 15px;
  color: #fffdf4;
  background: rgba(31, 94, 67, .97);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 13px;
  box-shadow: var(--shadow-md);
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
  animation: toast-in .22s ease-out;
}
.toast.toast-warm { background: rgba(138, 90, 51, .97); }
.toast.toast-bad { background: rgba(142, 63, 77, .97); }
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 95;
  overflow: hidden;
  pointer-events: none;
}
.confetti {
  position: absolute;
  top: -18px;
  width: 10px;
  height: 16px;
  border-radius: 3px;
  animation: confetti-fall var(--dur, 1.7s) ease-in forwards;
  transform: rotate(var(--rot, 0deg));
}
.noscript {
  position: fixed;
  inset: 20px;
  z-index: 300;
  padding: 24px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 16px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 560px) {
  :root { --topbar-h: 60px; --footer-h: 58px; }
  .topbar { min-height: var(--topbar-h); padding: 6px 10px; gap: 4px; }
  .brand-mark svg { width: 34px; height: 34px; }
  .brand-text small { display: none; }
  .brand-text strong { font-size: .98rem; }
  .sysbar { gap: 4px; }
  .icon-btn, .modal-close { width: 44px; height: 44px; border-radius: 11px; }
  #app { padding-left: 10px; padding-right: 10px; }
  .site-footer { min-height: var(--footer-h); }
  .footer-line { font-size: .68rem; }
  .modal-body { padding: 14px 14px 6px; }
  .modal-actions { padding: 10px 14px 16px; }
  .range-row { grid-template-columns: 1fr 50px; }
  .range-row input { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 380px) {
  .brand-text strong { font-size: .9rem; }
  .brand-mark { display: none; }
  .icon-btn, .modal-close { width: 44px; height: 44px; }
  .footer-line { font-size: .64rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}