* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  font-family:-apple-system,"PingFang TC","Heiti TC",sans-serif;
  background:linear-gradient(160deg,#ffe9a8,#ffc98a);
  overscroll-behavior:none;
  -webkit-user-select:none; user-select:none;
}
button { font-family:inherit; border:none; cursor:pointer; }
.hidden { display:none !important; }
.screen { min-height:100%; padding:env(safe-area-inset-top) 12px 20px; }

/* ---------- 首頁 ---------- */
#screen-home { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:36px; min-height:100vh; }
.home-title { font-size:44px; color:#7a4a12; text-shadow:0 2px 0 #fff6; }
.home-cards { display:flex; gap:28px; flex-wrap:wrap; justify-content:center; }
.kid-card {
  width:280px; padding:30px 20px; border-radius:28px; text-align:center;
  box-shadow:0 8px 0 rgba(0,0,0,.18); transition:transform .1s;
}
.kid-card:active { transform:scale(.96) translateY(4px); box-shadow:0 4px 0 rgba(0,0,0,.18); }
.card-guang { background:linear-gradient(170deg,#8fd06f,#3e8f3e); }
.card-cheng { background:linear-gradient(170deg,#ff9d7e,#e04b3a); }
.kid-emoji { font-size:64px; }
.kid-name { font-size:52px; font-weight:800; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.25); }
.kid-score { font-size:28px; font-weight:700; color:#fff; margin-top:6px; }
.kid-theme-label { margin-top:10px; font-size:18px; color:#ffffffd0; }
#btn-admin { position:fixed; right:14px; bottom:14px; font-size:26px; background:none; opacity:.55; }

/* ---------- 棋盤 ---------- */
#screen-board { padding-left:132px; }
#score-badge {
  position:fixed; left:12px; top:50%; transform:translateY(-50%); z-index:6;
  --pct:0;
}
.badge-ring {
  width:104px; height:104px; border-radius:50%;
  background:conic-gradient(#ffd23e calc(var(--pct)*1%), #ffffff30 0);
  padding:8px; box-shadow:0 5px 14px rgba(0,0,0,.3);
}
.badge-inner {
  width:100%; height:100%; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1.05;
}
.theme-guang .badge-inner { background:#1e4d1e; }
.theme-cheng .badge-inner { background:#c03030; }
.badge-emoji { font-size:22px; }
.badge-num { font-size:30px; font-weight:800; color:#fff; }
.badge-den { font-size:13px; color:#ffffffb0; font-weight:700; }
@media (max-width:640px) {
  #screen-board { padding-left:96px; }
  .badge-ring { width:76px; height:76px; padding:6px; }
  .badge-emoji { font-size:16px; }
  .badge-num { font-size:22px; }
  .badge-den { font-size:11px; }
}

/* 橡皮擦圖示(無合適 emoji,CSS 畫) */
.eraser-icon {
  display:inline-block; width:22px; height:13px; margin-right:5px; vertical-align:-1px;
  border-radius:4px; transform:rotate(-18deg);
  background:linear-gradient(to right,#5c9ded 0 45%,#f3f0e8 45%);
  border:1.5px solid #00000030;
}

.board-header {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 4px; position:sticky; top:0; z-index:5;
}
.hdr-btn {
  font-size:19px; font-weight:700; padding:10px 16px; border-radius:14px;
  background:#ffffffe8; color:#555; box-shadow:0 3px 0 rgba(0,0,0,.15);
}
.hdr-btn:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.15); }
.board-title { font-size:26px; font-weight:800; color:#fff; text-shadow:0 2px 3px rgba(0,0,0,.35); }
.hdr-actions { display:flex; gap:8px; }
.btn-plus { background:#ffd23e; color:#7a4a12; font-size:22px; }
.btn-minus { background:#c9c9c9; color:#444; }
.btn-plus:disabled { opacity:.45; }

#stamp-banner {
  text-align:center; font-size:22px; font-weight:800; color:#fff;
  background:#00000055; border-radius:14px; padding:10px; margin:4px auto 8px; max-width:560px;
  animation:bannerPulse 1.2s infinite;
}
@keyframes bannerPulse { 50% { transform:scale(1.03); } }

.board {
  position:relative; max-width:760px; margin:6px auto; border-radius:22px; overflow:hidden;
}
.path-svg { position:absolute; left:0; top:0; z-index:0; }
.deco { position:absolute; transform:translate(-50%,-50%); z-index:0; pointer-events:none; }
.cell {
  position:absolute; transform:translate(-50%,-50%); z-index:1;
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800;
}
.cell .stamp {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.token {
  position:absolute; transform:translate(-50%,-50%); z-index:3; pointer-events:none;
  transition:left .35s, top .35s;
  animation:tokenBounce 1.6s ease-in-out infinite;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.35));
}
@keyframes tokenBounce { 50% { margin-top:-7px; } }
/* ---------- 塗圈圈 ---------- */
.paint-grid { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; padding:6px 0; }
.paint-item { position:relative; width:104px; height:104px; border-radius:50%; }
.paint-item canvas { width:104px; height:104px; display:block; touch-action:none; border-radius:50%; }
.paint-item.waiting { opacity:.3; pointer-events:none; }
.paint-item.active { animation:paintRing 1s infinite; }
@keyframes paintRing {
  0%,100% { box-shadow:0 0 0 4px #ffd23e; }
  50% { box-shadow:0 0 0 9px #ffd23ecc; }
}
.paint-item.done { animation:paintPop .55s cubic-bezier(.2,2,.4,1); }
@keyframes paintPop { 0% { transform:scale(1); } 40% { transform:scale(1.25) rotate(6deg); } 100% { transform:scale(1); } }
.paint-done-mark {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:56px; pointer-events:none;
  animation:stampIn .45s cubic-bezier(.2,2.2,.4,1);
}
.paint-actions { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:14px; }
.btn-skip {
  font-size:17px; font-weight:700; color:#4a6a8a; background:#e4eef8;
  padding:10px 16px; border-radius:14px; box-shadow:0 3px 0 #b8cbdd;
}
.btn-skip:active { transform:translateY(2px); box-shadow:0 1px 0 #b8cbdd; }
.paint-actions .btn-cancel { margin-top:0; }
.cell.just-stamped .stamp { animation:stampIn .45s cubic-bezier(.2,2.2,.4,1); }
@keyframes stampIn {
  0% { transform:scale(3) rotate(-25deg); opacity:0; }
  60% { transform:scale(.9) rotate(3deg); opacity:1; }
  100% { transform:scale(1) rotate(0); }
}
.cell.unstamping .stamp { animation:stampOut .4s forwards; }
@keyframes stampOut { to { transform:scale(2.2) rotate(20deg); opacity:0; } }
.cell.active-target { animation:targetPulse .8s infinite; cursor:pointer; z-index:2; }
@keyframes targetPulse {
  0%,100% { transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 4px #ffd23e; }
  50% { transform:translate(-50%,-50%) scale(1.14); box-shadow:0 0 0 8px #ffd23ecc; }
}
.cell.pending-next { outline:3px dashed #ffffffaa; outline-offset:2px; }

/* 主題:光=叢林 */
.theme-guang { background:linear-gradient(170deg,#2f6b2f,#5ea04f 55%,#8cc26b); }
.theme-guang .board { background:linear-gradient(160deg,#245a24,#3d7a33); box-shadow:inset 0 0 40px #00330088; }
.theme-guang .cell { background:#ece0c4; color:#6b5636; box-shadow:0 3px 0 #00000038; }
.theme-guang .cell.milestone { background:#f0a028; color:#7a4a12; }
/* 主題:程=消防 */
.theme-cheng { background:linear-gradient(170deg,#8fd0f0,#c8ecff 60%,#eaf8ff); }
.theme-cheng .board { background:linear-gradient(160deg,#bfe4f7,#e8f6ff); box-shadow:inset 0 0 40px #4a90c055; }
.theme-cheng .cell { background:#fff; color:#a03030; box-shadow:0 3px 0 #00000030; }
.theme-cheng .cell.milestone { background:#ffcf40; color:#8a5a00; }
.theme-cheng .board-title { color:#a02020; text-shadow:0 2px 3px #ffffffaa; }

/* ---------- Modal 共用 ---------- */
.modal {
  position:fixed; inset:0; background:#000000a0; z-index:20;
  display:flex; align-items:center; justify-content:center; padding:18px;
}
.modal-card {
  background:#fffdf5; border-radius:26px; padding:26px 22px; width:min(560px,94vw);
  max-height:92vh; overflow-y:auto; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.modal-card h2 { font-size:28px; color:#5a4a2a; margin-bottom:18px; }
.btn-cancel { margin-top:16px; font-size:18px; color:#999; background:none; padding:8px 14px; }

.points-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.points-grid button {
  font-size:30px; font-weight:800; padding:18px 0; border-radius:18px;
  background:#ffd23e; color:#7a4a12; box-shadow:0 4px 0 #d9a900;
}
.points-grid button:active { transform:translateY(3px); box-shadow:0 1px 0 #d9a900; }
.points-grid button:disabled { background:#eee; color:#bbb; box-shadow:0 4px 0 #ccc; }
.points-grid.minus-mode button { background:#ffb0a0; color:#8a2a1a; box-shadow:0 4px 0 #d07060; }

/* ---------- 考題 ---------- */
.quiz-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.quiz-top h2 { margin:0; font-size:22px; }
.btn-speak { font-size:18px; font-weight:700; background:#cde8ff; color:#1a5a8a; padding:10px 14px; border-radius:14px; }
.quiz-question { font-size:64px; font-weight:800; color:#333; margin:26px 0; letter-spacing:4px; }
.quiz-options { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.quiz-options button {
  font-size:40px; font-weight:800; padding:22px 0; border-radius:20px;
  background:#8fd06f; color:#fff; box-shadow:0 5px 0 #4e8f3e;
}
.quiz-options button:active { transform:translateY(3px); box-shadow:0 2px 0 #4e8f3e; }
.quiz-options button.wrong { background:#ddd; color:#aaa; box-shadow:0 5px 0 #bbb; animation:shake .4s; }
@keyframes shake { 25% { transform:translateX(-8px);} 75% { transform:translateX(8px);} }
.quiz-msg { min-height:34px; font-size:24px; font-weight:800; margin-top:16px; color:#d05a2a; }

/* ---------- 滿分 ---------- */
.win-card { animation:winPop .7s cubic-bezier(.2,1.8,.4,1); }
@keyframes winPop { 0% { transform:scale(.3); opacity:0; } 60% { transform:scale(1.08); opacity:1; } 100% { transform:scale(1); } }
.win-trophy { font-size:110px; animation:trophyGlow 1.4s ease-in-out infinite; }
@keyframes trophyGlow {
  0%,100% { transform:scale(1); filter:drop-shadow(0 0 6px #ffd23e88); }
  50% { transform:scale(1.12); filter:drop-shadow(0 0 26px #ffd23e); }
}
.win-100 {
  font-size:44px; font-weight:900; letter-spacing:2px;
  background:linear-gradient(180deg,#ffdf6b,#e8912a); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 3px 8px #e8912a33;
}
.win-card h2 { font-size:28px; margin:10px 0 4px; }
.win-sub { font-size:22px; color:#b06a10; margin-bottom:20px; }
.btn-big {
  font-size:26px; font-weight:800; padding:16px 26px; border-radius:20px;
  background:#8fd06f; color:#fff; box-shadow:0 5px 0 #4e8f3e;
}

/* ---------- PIN ---------- */
.pin-dots { font-size:34px; letter-spacing:10px; margin-bottom:18px; color:#555; }
.pin-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:300px; margin:0 auto; }
.pin-pad button {
  font-size:28px; font-weight:700; padding:16px 0; border-radius:16px;
  background:#eee; color:#333; box-shadow:0 3px 0 #ccc;
}
.pin-pad button:active { transform:translateY(2px); }

/* ---------- 後台 ---------- */
#screen-admin { background:linear-gradient(160deg,#e8eef5,#f8fafc); }
#screen-admin .board-title { color:#334; text-shadow:none; }
.admin-body { max-width:720px; margin:0 auto; }
.admin-scores { display:flex; gap:14px; margin:12px 0; }
.admin-score-box {
  flex:1; background:#fff; border-radius:16px; padding:16px; font-size:22px; text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.08); border:3px solid transparent;
}
.admin-score-box.active { border-color:#5c9ded; background:#eaf3ff; }
.admin-filter-hint { font-size:14px; color:#889; text-align:center; margin:-6px 0 10px; }
.admin-backup { background:#fff; border-radius:16px; padding:14px; margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; box-shadow:0 2px 6px rgba(0,0,0,.08); }
#backup-status { font-size:16px; color:#557; }
.admin-body h3 { color:#334; margin:10px 0 8px; }
.log-table { width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.08); }
.log-table th,.log-table td { padding:9px 8px; font-size:15px; text-align:center; border-bottom:1px solid #eef; }
.log-table th { background:#dde6f0; color:#334; }
.log-add { color:#2a8a2a; font-weight:700; }
.log-sub { color:#c04030; font-weight:700; }

/* ---------- 彩帶 ---------- */
#confetti-layer { position:fixed; inset:0; pointer-events:none; z-index:50; overflow:hidden; }
.confetti { position:absolute; top:-30px; font-size:26px; animation:confFall linear forwards; }
.confetti.dot { border-radius:3px; }
@keyframes confFall { to { transform:translateY(110vh) rotate(720deg); } }