/* 麥塊的視覺識別是「方塊」和「厚邊」——所以全站不用圓角，
   按鈕與卡片一律用上亮下暗的雙色外框，模仿遊戲裡的方塊立體感。 */

:root {
  --bg:      #f2ede2;
  --panel:   #fffdf7;
  --ink:     #2f2a22;
  --ink-2:   #6b6255;
  --line:    #d8cfbd;
  --grass:   #4a7c3f;
  --grass-2: #6aa055;
  --dirt:    #8a6a44;
  --stone:   #8a8f98;
  --emerald: #17a55e;
  --gold:    #e0a92c;
  /* --grass 與 --gold 是「色塊」的顏色，壓在淺色底上當文字對比不足（2.1～2.7）。
     內文的重點字與小標一律用下面這兩個較深的版本。 */
  --grass-ink: #2f6b26;
  --gold-ink:  #8a6410;
  --redstone:#c4453a;
  --diamond: #2fb8c6;
  --zhuyin:  #6f675c;
  --shadow:  0 3px 0 rgba(47,42,34,.18);
  --fs: 1rem;
}

body.dark {
  --bg:      #1b1a17;
  --panel:   #262420;
  --ink:     #ece6da;
  --ink-2:   #a49d92;
  --line:    #3d3931;
  /* --grass 深色模式不跟著變亮：頁首、閱讀器標題列、主要按鈕都是白字壓在它上面，
     調亮會把對比從 5.0 拉到 3.3，反而看不清楚。要亮的地方用 --grass-2。 */
  --grass-2: #7cb46b;
  --grass-ink: #7cb46b;
  --gold-ink:  #e0a92c;
  --zhuyin:  #a49d92;
  --shadow:  0 3px 0 rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark) {
  body:not(.light) {
    --bg:#1b1a17; --panel:#262420; --ink:#ece6da; --ink-2:#a49d92; --line:#3d3931;
    --grass-2:#7cb46b; --grass-ink:#7cb46b; --gold-ink:#e0a92c;
    --zhuyin:#a49d92; --shadow:0 3px 0 rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs)/1.85 "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
body.fs-s { --fs: .9rem; }
body.fs-m { --fs: 1rem; }
body.fs-l { --fs: 1.18rem; }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 18px; }

/* ── 頁首：草地方塊 ────────────────────────────── */
.hero {
  background: var(--grass);
  color: #fff;
  padding: 40px 0 34px;
  border-bottom: 6px solid var(--dirt);
  position: relative;
}
.hero::before {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 10px;
  background: repeating-linear-gradient(90deg, var(--grass-2) 0 16px, var(--grass) 16px 32px);
}
.kicker {
  margin: 0 0 8px; font-size: .8em; letter-spacing: .18em;
  background: rgba(0,0,0,.22); display: inline-block; padding: 3px 10px;
}
.hero h1 { margin: 0 0 12px; font-size: 2.1em; line-height: 1.25; letter-spacing: .02em; }
.hero .sub { margin: 0; font-size: .96em; line-height: 1.9; color: rgba(255,255,255,.93); }
.hero rt { color: rgba(255,255,255,.92); }
.hero-stat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hero-stat span {
  background: rgba(0,0,0,.24); padding: 5px 12px; font-size: .86em;
  border-top: 2px solid rgba(255,255,255,.18); border-bottom: 2px solid rgba(0,0,0,.18);
}
.hero-stat b { font-size: 1.15em; }

/* ── 工具列 ─────────────────────────────────── */
.toolbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--panel); border-bottom: 3px solid var(--line);
}
.tb { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.tb-group { display: flex; align-items: center; gap: 5px; }
.tb-label { font-size: .78em; color: var(--ink-2); }
.tb-btn {
  font: inherit; font-size: .82em; cursor: pointer;
  background: var(--bg); color: var(--ink); padding: 4px 11px;
  border: 2px solid var(--line); border-top-color: var(--panel);
}
.tb-btn:hover { border-color: var(--grass); }
.tb-btn.on, .tb-btn[aria-pressed="true"] {
  background: var(--grass); color: #fff; border-color: var(--grass);
}

/* ── 區塊 ───────────────────────────────────── */
.sec { padding: 34px 18px 6px; }
.sec-h {
  margin: 0 0 6px; font-size: 1.4em;
  border-left: 8px solid var(--grass); padding-left: 12px;
}
.sec-p { margin: 0 0 20px; color: var(--ink-2); font-size: .92em; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 620px) { .cards { grid-template-columns: 1fr 1fr; } }

.card {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--panel); color: var(--ink);
  border: 3px solid var(--line); border-top-color: var(--panel); box-shadow: var(--shadow);
  padding: 14px 16px; position: relative;
}
.card:hover { border-color: var(--grass); transform: translateY(-1px); }
.card:active { transform: translateY(1px); box-shadow: none; }
.card .no {
  font-size: .74em; color: var(--ink-2); letter-spacing: .1em;
}
.card .ttl { display: block; font-size: 1.06em; font-weight: 700; margin: 2px 0 4px; }
.card .sb { display: block; font-size: .86em; color: var(--ink-2); line-height: 1.7; }
.card .emo {
  position: absolute; top: 12px; right: 14px; font-size: 1.5em; line-height: 1;
}
.card .bar { display: block; height: 6px; background: var(--line); margin-top: 12px; }
.card .bar i { display: block; height: 100%; background: var(--grass); width: 0; }
#lessonList .card, .games .card { border-left-width: 8px; }
.card.done { border-left-color: var(--emerald) !important; }
.card.done .emo::after {
  content: "✓"; position: absolute; right: -4px; bottom: -6px;
  background: var(--emerald); color: #fff; font-size: .46em; width: 1.5em; height: 1.5em;
  display: grid; place-items: center; font-weight: 700;
}

.games .card .sb { min-height: 3.4em; }
.games .goal {
  display: block; margin-top: 8px; font-size: .8em; color: var(--gold-ink); font-weight: 700;
}

/* ── 獎章 ───────────────────────────────────── */
.badges {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px;
}
.badge {
  background: var(--panel); border: 3px solid var(--line); border-top-color: var(--panel);
  padding: 10px 4px; text-align: center; opacity: .42; filter: grayscale(1);
}
.badge.got { opacity: 1; filter: none; border-color: var(--gold); box-shadow: var(--shadow); }
.badge .e { display: block; font-size: 1.6em; line-height: 1.3; }
.badge .t { display: block; font-size: .68em; color: var(--ink-2); line-height: 1.45; }
.badge.got .t { color: var(--ink); }

.reset-all {
  margin: 22px 0 0; font: inherit; font-size: .8em; cursor: pointer;
  background: none; color: var(--ink-2); border: 2px solid var(--line); padding: 5px 12px;
}
.reset-all:hover { color: var(--redstone); border-color: var(--redstone); }

/* ── 頁尾 ───────────────────────────────────── */
.foot {
  margin-top: 44px; padding: 26px 0 40px;
  /* 不用 --dirt：#8a6a44 太亮，米白色的字壓上去只有 4.35 */
  background: #6d5233; color: #f6efe4; border-top: 6px solid var(--dirt);
}
.foot p { margin: 0 0 10px; font-size: .88em; line-height: 1.85; }
.foot .small { font-size: .78em; color: rgba(246,239,228,.85); }
.foot a { color: #ffe08a; }
.foot rt { color: rgba(246,239,228,.9); }
.counter { display: block; margin-top: 6px; }

/* ── 閱讀器 ─────────────────────────────────── */
.reader {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg); display: flex; flex-direction: column;
}
/* 這行不能省：作者樣式的 display:flex 會蓋過瀏覽器預設的 [hidden]{display:none} */
.reader[hidden] { display: none; }

.reader-bar {
  display: flex; align-items: center; gap: 12px;
  background: var(--grass); color: #fff; padding: 10px 16px; flex: none;
}
.rd-close {
  font: inherit; font-size: 1.1em; line-height: 1; cursor: pointer;
  background: rgba(0,0,0,.2); color: #fff; border: 0; width: 34px; height: 34px; flex: none;
}
.rd-close:hover { background: rgba(0,0,0,.38); }
.rd-title { font-weight: 700; flex: 1; font-size: .96em; }
.rd-count { font-size: .8em; opacity: .85; flex: none; }
.rd-progress { height: 5px; background: var(--line); flex: none; }
.rd-progress i { display: block; height: 100%; background: var(--gold); width: 0; transition: width .2s; }

.reader-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 26px 18px 40px; }
.rd-inner { max-width: 720px; margin: 0 auto; }
.rd-h { margin: 0 0 18px; font-size: 1.28em; line-height: 1.5; }
.rd-art { display: block; width: 100%; max-width: 460px; margin: 0 auto 20px; border: 3px solid var(--line); }
.rd-art svg { display: block; width: 100%; height: auto; }
.rd-p { margin: 0 0 16px; }
.rd-p b, .quiz-why b, .g-verdict b, .g-lead b, .g-sum b { color: var(--grass-ink); }

.rd-tip {
  margin: 22px 0 0; padding: 12px 16px; background: var(--panel);
  border-left: 8px solid var(--gold); font-weight: 700; font-size: .96em;
}
.rd-tip::before { content: "重點　"; color: var(--gold-ink); font-size: .82em; letter-spacing: .1em; }

.reader-nav {
  display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--panel); border-top: 3px solid var(--line); flex: none;
}
.reader-nav button {
  flex: 1; font: inherit; cursor: pointer; padding: 11px 8px;
  background: var(--bg); color: var(--ink); border: 3px solid var(--line); border-top-color: var(--panel);
}
.reader-nav button:hover:not(:disabled) { border-color: var(--grass); }
.reader-nav button:disabled { opacity: .38; cursor: default; }
.rd-next { background: var(--grass) !important; color: #fff !important; border-color: var(--grass) !important; font-weight: 700; }

/* 測驗 */
.quiz-q { margin: 0 0 18px; font-size: 1.14em; font-weight: 700; line-height: 1.65; }
.quiz-opts { display: grid; gap: 10px; margin-bottom: 18px; }
.quiz-opt {
  font: inherit; text-align: left; cursor: pointer; padding: 12px 15px;
  background: var(--panel); color: var(--ink);
  border: 3px solid var(--line); border-top-color: var(--panel);
}
.quiz-opt:hover:not(:disabled) { border-color: var(--grass); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.right { border-color: var(--emerald); background: color-mix(in srgb, var(--emerald) 12%, var(--panel)); }
.quiz-opt.wrong { border-color: var(--redstone); background: color-mix(in srgb, var(--redstone) 12%, var(--panel)); }
.quiz-why {
  padding: 14px 16px; background: var(--panel); border-left: 8px solid var(--emerald); font-size: .95em;
}
.quiz-why.no { border-left-color: var(--redstone); }
.quiz-got {
  margin-top: 16px; padding: 16px; text-align: center;
  background: var(--gold); color: #3a2c05; font-weight: 700;
}
.quiz-got .e { font-size: 2em; display: block; line-height: 1.2; }

/* ── 遊戲畫面 ───────────────────────────────── */
.g-lead { margin: 0 0 18px; font-size: .95em; }
.g-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.g-item {
  font: inherit; cursor: pointer; text-align: center; padding: 10px 4px;
  background: var(--panel); color: var(--ink);
  border: 3px solid var(--line); border-top-color: var(--panel);
}
.g-item:hover { border-color: var(--grass); }
.g-item.is-asset { border-left: 7px solid var(--grass); }
.g-item.is-spend { border-left: 7px solid var(--stone); }
.g-item .g-e { display: block; font-size: 1.5em; line-height: 1.3; }
.g-item .g-n { display: block; font-weight: 700; font-size: .9em; }
.g-item .g-c { display: block; font-size: .78em; color: var(--gold-ink); }
.g-item .g-y { display: block; font-size: .74em; color: var(--ink-2); }

.g-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; }
.g-left { flex: 1; min-width: 160px; font-size: .88em; color: var(--ink-2); }
.g-left.g-warn { color: var(--redstone); font-weight: 700; }
.g-bar button {
  font: inherit; font-size: .9em; cursor: pointer; padding: 8px 16px;
  background: var(--panel); color: var(--ink);
  border: 3px solid var(--line); border-top-color: var(--panel);
}
.g-bar button:hover { border-color: var(--grass); }
.g-run, .g-buy { background: var(--grass) !important; color: #fff !important; border-color: var(--grass) !important; font-weight: 700; }

.g-yr { display: flex; align-items: center; gap: 10px; font-size: .84em; margin-bottom: 4px; }
.g-yr > span:first-child { flex: none; width: 4.6em; color: var(--ink-2); }
.g-track { flex: 1; height: 12px; background: var(--line); }
.g-track i { display: block; height: 100%; background: var(--emerald); }
.g-yr b { flex: none; width: 2.6em; text-align: right; }

.g-pits { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.g-pit {
  padding: 10px; text-align: center; background: var(--panel);
  border: 3px solid var(--line); border-top-color: var(--panel);
}
.g-pit.is-on { border-color: var(--grass); }
.g-pit .g-e { display: block; font-size: 1.4em; line-height: 1.2; }
.g-pit .g-n { display: block; font-size: .84em; color: var(--ink-2); margin-bottom: 6px; }
.g-stepper { display: flex; align-items: center; justify-content: center; gap: 4px; }
.g-stepper button {
  font: inherit; cursor: pointer; width: 32px; height: 32px; line-height: 1;
  background: var(--bg); color: var(--ink); border: 2px solid var(--line);
}
.g-stepper button:hover { border-color: var(--grass); }
.g-num { width: 2em; font-size: 1.1em; }

.g-round { display: flex; align-items: center; gap: 6px; font-size: .84em; margin-bottom: 4px; }
.g-round > span:first-child { flex: none; width: 4.2em; color: var(--ink-2); }
.g-round b { flex: none; width: 2.8em; text-align: right; }
.g-cell {
  flex: 1; text-align: center; padding: 3px 2px; background: var(--panel);
  border: 2px solid var(--line);
}
.g-cell.bad { color: var(--redstone); border-color: var(--redstone); font-weight: 700; }
.g-cell.great { color: var(--emerald); border-color: var(--emerald); font-weight: 700; }
.g-cell.off { color: var(--ink-2); opacity: .5; }
.g-head { color: var(--ink-2); }
.g-head .g-cell { background: none; border-color: transparent; }

.g-offer {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px; background: var(--panel);
  border: 3px solid var(--line); border-top-color: var(--panel); min-height: 96px;
}
.g-vil { font-size: 2.6em; line-height: 1; }
.g-ask { flex: 1; min-width: 150px; }
.g-ask span { display: block; font-size: .8em; color: var(--ink-2); }
.g-ask b { display: block; font-size: 1.5em; line-height: 1.4; }
.g-ask b.cheap { color: var(--emerald); }
.g-ask b.dear { color: var(--redstone); }
.g-status { width: 100%; font-size: .82em; color: var(--ink-2); border-top: 2px solid var(--line); padding-top: 8px; }

.g-log { max-height: 150px; overflow-y: auto; }
.g-note { font-size: .82em; color: var(--ink-2); padding: 3px 0; border-bottom: 1px solid var(--line); }
.g-note.ok { color: var(--emerald); }
.g-note.no { color: var(--redstone); }

.g-sum { margin: 14px 0 8px; font-size: .92em; }
.g-verdict { margin: 8px 0 0; padding: 14px 16px; background: var(--panel); border-left: 8px solid var(--stone); font-size: .95em; }
.g-verdict.ok { border-left-color: var(--emerald); }
.g-verdict.no { border-left-color: var(--gold); }

/* ── 注音 ───────────────────────────────────── */
ruby { ruby-align: center; }
rt {
  font-size: .46em; color: var(--zhuyin); line-height: 1;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
.zy-s { writing-mode: vertical-lr; display: inline-block; }
.zy-t { display: inline-block; vertical-align: bottom; margin-left: -.1em; }
.zy-t-light { vertical-align: top; }
body.zhuyin-off rt { display: none; }