/* 方塊上的字：霞鶩文楷 TC（SIL OFL 1.1），只裁出遊戲用到的八個字；授權全文在 fonts/OFL.txt */
@font-face {
  font-family: "CG Kai";
  src: url("fonts/wenkai-tc-subset.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
:root {
  --fs: 20px;
  --cream: #FFF4DC;
  --ink: #3A2313;
  --wood-hi: #C98A4B;
  --wood: #A9682F;
  --wood-lo: #7A4519;
}
:root.big { --fs: 25px; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 800 var(--fs)/1.45 "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: var(--cream);
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.05) 0 2px, transparent 2px 9px, rgba(255,255,255,.025) 9px 11px, transparent 11px 23px),
    radial-gradient(120% 80% at 50% 0%, #6B4526 0%, #4A2D17 55%, #2E1A0C 100%);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
#app { max-width: 560px; margin: 0 auto; padding: 14px 16px 28px; }
[hidden] { display: none !important; }

h1 {
  margin: 10px 0 0; text-align: center; font-size: 1.7em; letter-spacing: 2px;
  color: #FFD98A; text-shadow: 0 3px 0 #6A3A12, 0 6px 14px rgba(0,0,0,.45);
}
h1 span { display: block; font-size: .62em; color: var(--cream); letter-spacing: 8px; text-shadow: 0 2px 0 #4A2A10; }
.sub { text-align: center; margin: 8px 0 16px; font-weight: 600; font-size: .9em; color: #F3DDB8; }

/* 立體按鈕 */
.btn {
  --top: #FFE7A8; --mid: #F5B93A; --low: #B87A12; --txt: #4A2B05;
  font: inherit; color: var(--txt); cursor: pointer;
  min-height: 58px; padding: 8px 14px; border: 0; border-radius: 16px;
  background: linear-gradient(180deg, var(--top) 0%, var(--mid) 46%, var(--mid) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.65), inset 0 -3px 0 rgba(0,0,0,.12), 0 6px 0 var(--low), 0 10px 14px rgba(0,0,0,.35);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.65), 0 2px 0 var(--low), 0 4px 6px rgba(0,0,0,.3); }
.btn:disabled { filter: grayscale(.8) brightness(.8); cursor: default; }
.btn:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.btn.blue { --top: #BFE1FF; --mid: #4C9BF0; --low: #1F5FAE; --txt: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn.red { --top: #FFC9B5; --mid: #EE6B4D; --low: #A93A20; --txt: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn.green { --top: #CFF5B5; --mid: #58B947; --low: #2E7A22; --txt: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn.gold { --top: #FFF0B8; --mid: #F6BE35; --low: #B37B0C; }
.btn.wood { --top: #E9B981; --mid: #C98A4B; --low: #7A4519; --txt: #3A2313; }
.btn.small { min-height: 50px; padding: 4px 14px; }

.bar { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.bar .btn { flex: 1 1 28%; white-space: nowrap; padding-left: 6px; padding-right: 6px; }

/* 繪卷（地圖） */
.scroll {
  background: linear-gradient(180deg, #FFF8E8, #F6E6C4);
  border-radius: 20px; padding: 14px; margin-bottom: 18px; color: var(--ink);
  box-shadow: inset 0 0 0 3px #E2C592, 0 5px 0 #A8804A, 0 12px 18px rgba(0,0,0,.4);
}
.scroll.locked { filter: grayscale(.7) brightness(.82); }
.scroll h2 { margin: 0 0 10px; font-size: 1.1em; display: flex; justify-content: space-between; align-items: baseline; }
.scroll h2 small { font-size: .72em; color: #96703D; font-weight: 700; }
.scroll .row { display: flex; gap: 14px; align-items: center; }
.scroll .thumb { flex: 0 0 44%; }
.art { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #D9B981, 0 4px 8px rgba(0,0,0,.25); }
.art g[data-k] { transition: fill .9s ease; }
.lv { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lv button {
  font: inherit; font-size: 1.05em; color: #fff; cursor: pointer;
  min-height: 54px; border: 0; border-radius: 14px; padding: 0; line-height: 1.05;
  background: linear-gradient(180deg, #8BD46F, #4FAE3E);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 #2E7A22;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.lv button i { display: block; font-style: normal; font-size: .5em; letter-spacing: 1px; color: #FFF3B0; min-height: 1em; text-shadow: none; }
.lv button.next { background: linear-gradient(180deg, #FFE08A, #F5B321); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 4px 0 #B37B0C; color: #4A2B05; text-shadow: none; animation: bob 1.6s ease-in-out infinite; }
.lv button:disabled { background: #D8C7A6; box-shadow: 0 4px 0 #B39F7A; color: #9C8A68; text-shadow: none; cursor: default; }
.lv button:active:not(:disabled) { transform: translateY(3px); }
@keyframes bob { 50% { transform: translateY(-3px); } }

/* 遊戲 */
header { display: flex; align-items: center; gap: 10px; }
#title { flex: 1; font-size: .95em; line-height: 1.2; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
#title small { display: block; font-size: .78em; color: #F3D9A8; font-weight: 600; }
#moves {
  background: rgba(0,0,0,.28); border-radius: 14px; padding: 4px 12px; text-align: center;
  font-size: .78em; line-height: 1.15; box-shadow: inset 0 2px 4px rgba(0,0,0,.4);
}
#moves b { display: block; font-size: 1.7em; color: #FFD98A; }
#picWrap { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; }
#pic { flex: 0 0 42%; max-width: 200px; }
#picCap { flex: 1; font-size: .85em; font-weight: 600; color: #F3DDB8; }
#picCap b { display: block; font-size: 1.05em; color: #fff; font-weight: 800; }
.dots { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.dots i { width: 16px; height: 16px; border-radius: 5px; background: rgba(0,0,0,.35); box-shadow: inset 0 2px 3px rgba(0,0,0,.5); transition: background .4s, box-shadow .4s; }
.dots i.on { background: #FFD45A; box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 0 8px rgba(255,212,90,.8); }
#msg { min-height: 1.5em; margin: 6px 0; text-align: center; font-weight: 600; font-size: .9em; color: #FFE9C2; }
#boardWrap { display: flex; justify-content: center; }
#board { display: block; touch-action: none; border-radius: 22px; filter: drop-shadow(0 12px 14px rgba(0,0,0,.5)); cursor: grab; }

#modal, #share, #codeBox { position: fixed; inset: 0; background: rgba(24,12,4,.72); display: grid; place-items: center; padding: 16px; z-index: 30; animation: fade .25s; }
.card {
  background: linear-gradient(180deg, #FFF8E8, #F6E6C4); color: var(--ink);
  border-radius: 24px; padding: 20px; width: 100%; max-width: 400px; text-align: center;
  box-shadow: inset 0 0 0 4px #E2C592, 0 8px 0 #A8804A, 0 20px 40px rgba(0,0,0,.5);
  animation: rise .45s cubic-bezier(.2,1.4,.4,1);
}
.card h2 { margin: 0 0 10px; font-size: 1.6em; color: #C0461F; }
#mPic { margin: 0 auto; max-width: 280px; }
#mStars { font-size: 2.2em; margin: 8px 0 0; letter-spacing: 8px; color: #F2A900; text-shadow: 0 2px 0 #B37B0C; }
#mStars span { display: inline-block; animation: starIn .5s cubic-bezier(.2,1.6,.4,1) backwards; }
#mStars span:nth-child(2) { animation-delay: .18s; }
#mStars span:nth-child(3) { animation-delay: .36s; }
#mStars span.off { color: #D9C7A0; text-shadow: none; }
#mText { margin: 4px 0 14px; font-weight: 600; }
.card .btn { width: 100%; margin-top: 12px; }
#share { z-index: 40; overflow-y: auto; }
#share .card { max-height: none; margin: auto; }
#shareImg { display: block; width: 100%; max-width: 300px; margin: 0 auto; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.35); -webkit-touch-callout: default; user-select: auto; -webkit-user-select: auto; }
#shareTip { margin: 10px 0 0; font-size: .82em; font-weight: 600; color: #7A5A30; }
a.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.btn.line { --top: #9BF0B4; --mid: #06C755; --low: #04893A; --txt: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.scroll .mk { font: inherit; font-size: .8em; margin-top: 10px; width: 100%; min-height: 48px; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(40px) scale(.9); opacity: 0; } }
@keyframes starIn { from { transform: scale(0) rotate(-40deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lv button.next, .card, #mStars span, #modal { animation: none; }
}

/* 雲端存檔 */
.cloudbox { margin-top: 22px; margin-bottom: 0; }
.cloudbox p { margin: 0 0 10px; font-size: .82em; font-weight: 600; color: #7A5A30; }
#cloudCode {
  font: 900 1.7em/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 4px; text-align: center;
  background: #fff; border-radius: 14px; padding: 10px 6px; color: #3A2313; box-shadow: inset 0 0 0 3px #E2C592;
  user-select: all; -webkit-user-select: all;
}
.cloudbox .btn { width: 100%; margin-top: 14px; }
#codeBox { z-index: 40; }
#codeIn {
  width: 100%; font: 900 1.6em/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 4px; text-align: center; text-transform: uppercase;
  padding: 12px 6px; border: 3px solid #C9A56B; border-radius: 14px; background: #fff; color: #3A2313;
  user-select: text; -webkit-user-select: text;
}
#codeIn:focus { outline: 4px solid #4C9BF0; outline-offset: 2px; }
#codeMsg { min-height: 1.5em; margin: 10px 0 0; font-size: .85em; font-weight: 700; color: #B3261E; }