/* ============================================================
 * style.css — 上下分割版面，手機優先，桌面置中
 * ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --kitchen-bg:#fff3e0; --study-bg:#1f2233; --accent:#e8645a; --good:#6fae5a;
  --wall:#efdcbc; --counterA:#b06a31; --counterB:#a25c28;   /* 店面背景主題可覆寫 */
  /* 安全區（瀏海／home indicator）：各畫面一律用 max(基準, var(--safe-*)) */
  --safe-top:env(safe-area-inset-top, 0px); --safe-right:env(safe-area-inset-right, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px); --safe-left:env(safe-area-inset-left, 0px);
}
html,body{ height:100vh; height:100dvh; }
body{
  font-family:"Noto Sans TC","Malgun Gothic",system-ui,sans-serif;
  background:var(--kitchen-bg); color:#222; overflow:hidden;
  -webkit-tap-highlight-color:transparent; user-select:none;
}

#app{
  max-width:100%; width:100%; height:100vh; height:100dvh; margin:0 auto;
  padding:0 var(--safe-right) 0 var(--safe-left);
  display:flex; flex-direction:column; background:var(--kitchen-bg);
  box-shadow:0 0 40px rgba(0,0,0,.5);
}

/* ===== 上方廚房 ===== */
#kitchen{
  flex:1 1 54%; display:flex; flex-direction:column;
  background:var(--wall); position:relative; min-height:0; overflow:hidden;
}
/* 場景背景層：暖色牆 + 木質櫃台 */
#scene{ position:absolute; inset:0; z-index:0; pointer-events:none; }
#scene:before{ content:""; position:absolute; left:0; right:0; top:0; height:50%; background:var(--wall); }
#counter{ position:absolute; left:0; right:0; bottom:0; height:52%;
  background:linear-gradient(var(--counterA),var(--counterB)); }
#counter:before{ content:""; position:absolute; left:0; right:0; top:-14px; height:16px;
  background:#d59353; border-radius:5px 5px 0 0; box-shadow:0 2px 4px rgba(90,48,16,.25); }
#counter:after{ content:""; position:absolute; left:0; right:0; top:30px; height:2px; background:#8f4f1f; opacity:.35; }
.deco{ position:absolute; }
#deco-window{ width:66px; top:12%; left:7%; opacity:.95; }
/* 互動層疊在場景之上 */
#kitchen > #hud, #kitchen > #customers, #kitchen > #workbench, #kitchen > #inventory{
  position:relative; z-index:1;
}
#hud{
  display:flex; gap:10px; align-items:center;
  padding:max(8px, var(--safe-top)) 12px 8px;
  background:rgba(255,255,255,.55); font-weight:700; font-size:14px; backdrop-filter:blur(2px);
}
.hud-item{ display:flex; align-items:center; gap:3px; }
.hud-progress{ flex:1; }
.hud-btn{ background:#fff; border:2px solid #e0c8a8; border-radius:10px; font-size:16px;
  padding:6px 10px; cursor:pointer; line-height:1.4; min-height:44px; min-width:44px;
  display:flex; align-items:center; justify-content:center; }
.hud-btn:active{ transform:scale(.94); }
.hud-chip{ background:transparent; border:none; font:inherit; font-weight:700; color:inherit;
  cursor:pointer; padding:6px 8px; border-radius:8px; min-height:44px;
  display:inline-flex; align-items:center; gap:4px; }
.hud-chip:active{ transform:scale(.94); }
.bar{ width:100%; height:8px; background:#e3d3bf; border-radius:5px; overflow:hidden; }
#topik-bar{ height:100%; width:0; background:linear-gradient(90deg,#f3a64b,#e8645a); transition:width .4s; }

/* 客人（最多 3 位並排）*/
#customers{ min-height:104px; display:flex; justify-content:center; align-items:flex-end;
  gap:6px; padding:6px 8px 0; width:100%; max-width:430px; margin:0 auto; }
.customer{ display:flex; flex-direction:column; align-items:center; gap:1px;
  flex:0 1 116px; max-width:120px; min-height:44px;
  position:relative; cursor:pointer; padding:2px 4px; border-radius:14px; transition:transform .15s; }
.customer::after{ content:""; position:absolute; bottom:-15px; left:50%; transform:translateX(-50%);
  width:38px; height:7px; background:rgba(90,48,16,.20); border-radius:50%; }
.customer.ready{ filter:drop-shadow(0 0 9px rgba(111,174,90,.85)); }
.customer.ready .avatar{ animation:bobY .7s ease-in-out infinite; }
.customer:active{ transform:scale(.96); }
.serve-hint{ display:none; position:absolute; top:-13px; left:50%;
  background:var(--good); color:#fff; font-size:11px; font-weight:700; white-space:nowrap;
  padding:2px 9px; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.25); z-index:3;
  animation:bobHint .7s ease-in-out infinite; }
.customer.ready .serve-hint{ display:block; }
@keyframes bobY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes bobHint{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-5px); } }
/* 進場：從櫃台下方滑入（帶一點彈跳）*/
.customer.enter{ animation:custEnter .42s cubic-bezier(.34,1.45,.5,1); }
@keyframes custEnter{ from{ opacity:0; transform:translateY(36px) scale(.7); } to{ opacity:1; transform:translateY(0) scale(1); } }
/* 退場：滿意=向上彈出淡出；不耐煩=搖頭後往下沉 */
.customer.leave{ animation:custLeave .4s ease-in forwards; pointer-events:none; }
@keyframes custLeave{ from{ opacity:1; transform:translateY(0) scale(1); } to{ opacity:0; transform:translateY(-26px) scale(1.12); } }
.customer.leave-angry{ animation:custLeaveAngry .5s ease-in forwards; pointer-events:none; }
@keyframes custLeaveAngry{ 0%{ opacity:1; transform:translate(0,0); } 18%{ transform:translate(-5px,0); }
  36%{ transform:translate(5px,0); } 54%{ transform:translate(-3px,0); } 100%{ opacity:0; transform:translate(0,36px) scale(.78); } }
.bubble{
  background:#fff; border:2px solid #e0c8a8; border-radius:12px;
  padding:5px 9px; box-shadow:0 3px 8px rgba(0,0,0,.12); position:relative; text-align:center;
}
.bubble:after{ content:""; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:#fff; }
/* 難度：泡泡邊色 + 片數標籤色 */
.customer.diff-simple .bubble{ border-color:#7bbd8a; }
.customer.diff-normal .bubble{ border-color:#e8a34c; }
.customer.diff-hard   .bubble{ border-color:#e2655a; }
.diff-tag{ font-size:10px; font-weight:700; margin-top:2px; color:#888; }
.customer.diff-simple .diff-tag{ color:#4f9e4a; }
.customer.diff-normal .diff-tag{ color:#cf8c2e; }
.customer.diff-hard   .diff-tag{ color:#d8453a; }
.bubble-order{ display:flex; justify-content:center; align-items:center; gap:5px; flex-wrap:wrap; }
.order-item{ display:inline-flex; align-items:center; gap:1px; font-size:13px; font-weight:700; color:#555; }
.order-item .ic{ width:21px; height:21px; }
.patience{ width:100%; height:5px; background:#eee; border-radius:3px; margin-top:5px; overflow:hidden; }
.patience-bar{ height:100%; width:100%; background:#6fae5a; transition:width .1s linear; }
.avatar{ width:60px; height:60px; margin-bottom:-12px; filter:drop-shadow(0 3px 3px rgba(90,48,16,.18));
  animation:idleBob 3s ease-in-out infinite; }
.avatar .ic{ width:100%; height:100%; }
/* 客人輕微晃動（錯開節奏，ready 時改用更明顯的 bobY）*/
.customer:nth-child(2) .avatar{ animation-delay:.6s; }
.customer:nth-child(3) .avatar{ animation-delay:1.2s; }
@keyframes idleBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }

/* 工作檯 */
#workbench{ position:relative; flex:1; display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden; padding:4px 0; }
/* 以可用高度為主、寬度為上限 → 矮螢幕自動縮小不溢出 */
#pizza-wrap{ position:relative; height:100%; max-height:min(46vw,220px); width:auto; max-width:90%; aspect-ratio:1/1; }
@supports not (aspect-ratio:1/1){ #pizza-wrap{ width:46vw; max-width:220px; height:auto; } }
#pizza{ width:100%; height:100%; filter:drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
/* 蒸氣 */
.steam{ position:absolute; left:50%; top:6%; transform:translateX(-50%);
  width:54%; height:46%; pointer-events:none; z-index:2; }
.steam span{ position:absolute; bottom:0; width:11px; height:11px; border-radius:50%;
  background:rgba(255,255,255,.55); filter:blur(3px); opacity:0; animation:steam 3s ease-in infinite; }
.steam span:nth-child(1){ left:24%; animation-delay:0s; }
.steam span:nth-child(2){ left:50%; animation-delay:1s; }
.steam span:nth-child(3){ left:74%; animation-delay:2s; }
@keyframes steam{
  0%{ opacity:0; transform:translateY(0) scale(.5); }
  25%{ opacity:.55; }
  100%{ opacity:0; transform:translateY(-48px) scale(1.6); }
}
.placed{
  position:absolute; transform:translate(-50%,-50%); width:34px; height:34px; cursor:pointer;
  /* 白色亮框：兩層白色描邊勾勒輪廓 + 一層暗影做立體，放上披薩後清楚跳出來 */
  filter:drop-shadow(0 0 1.4px #fff) drop-shadow(0 0 1.4px #fff) drop-shadow(0 1px 2px rgba(0,0,0,.45));
  transition:transform .1s;
}
.placed .ic{ width:100%; height:100%; display:block; }
.placed:active{ transform:translate(-50%,-50%) scale(1.2); }
/* 暫停提示（翻面/看圖鑑時）→ 置於工作檯中央(披薩上)，不蓋到客人 */
#pause-indicator{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  max-width:90%; white-space:nowrap; text-align:center;
  background:rgba(40,30,20,.82); color:#fff; padding:7px 16px; border-radius:20px;
  font-size:14px; font-weight:700; z-index:5; pointer-events:none;
  box-shadow:0 3px 10px rgba(0,0,0,.3);
}

/* 寵物（主標題＋廚房右下角）*/
.pet-badge{ position:absolute; z-index:3; pointer-events:none; }
.pet-badge.hidden{ display:none; }
.pet-badge svg{ width:54px; height:54px; filter:drop-shadow(0 3px 3px rgba(90,48,16,.28));
  animation:idleBob 3s ease-in-out infinite; }
#pet-ingame{ right:6px; bottom:70px; }                              /* 廚房右下角，庫存上方 */
#pet-title{ right:16px; bottom:calc(16px + var(--safe-bottom)); }    /* 主標題右下角 */

/* 食材庫存（木碗，放在櫃台上）*/
#inventory{
  display:flex; gap:9px; padding:8px 12px 12px; overflow-x:auto;
  background:transparent; min-height:62px; align-items:center;
}
.inv-item{
  position:relative; background:#cf9a5a; border:2px solid #9c6a2f;
  border-radius:9px 9px 18px 18px; padding:5px 7px 7px; cursor:grab; flex:0 0 auto; touch-action:none;
  box-shadow:inset 0 3px 0 #e2b878, 0 2px 3px rgba(90,48,16,.25);
}
.inv-icon{ display:block; width:34px; height:34px; pointer-events:none; }
.inv-icon .ic{ width:100%; height:100%; }
.inv-item:active{ cursor:grabbing; transform:scale(1.08); }
.inv-count{ position:absolute; top:-6px; right:-6px; background:var(--accent); color:#fff;
  font-size:11px; font-weight:700; border-radius:10px; padding:1px 6px; box-shadow:0 1px 2px rgba(0,0,0,.3); }
.inv-empty{ color:#f1e1c4; font-size:13px; font-weight:700; text-shadow:0 1px 2px rgba(90,48,16,.5); }

/* ===== 下方學習 ===== */
#study{
  flex:1 1 46%; background:var(--study-bg); color:#eee;
  display:flex; flex-direction:column; padding:12px 12px max(12px, var(--safe-bottom));
  min-height:0; position:relative;
}
/* 連擊計量器 */
#combo-meter{ position:absolute; top:10px; right:74px; z-index:6; pointer-events:none;
  text-align:center; line-height:1; }
/* 正面收藏星：答題後出現於卡片右上角（連擊計量器讓到左邊） */
.front-fav{ position:absolute; top:6px; right:8px; z-index:7; background:none; border:none;
  font-size:25px; color:#5b6080; cursor:pointer; line-height:1;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center; padding:0; }
.front-fav.on{ color:#f3c64b; }
.front-fav:active{ transform:scale(.9); }
#combo-meter.hidden{ display:none; }
.combo-num{ font-size:26px; font-weight:800; color:#f3c64b; text-shadow:0 0 10px currentColor; }
.combo-seg{ font-size:11px; font-weight:800; letter-spacing:1px; margin-top:1px; }
#combo-meter.t1{ color:#f3c64b; } #combo-meter.t2{ color:#f0913b; } #combo-meter.t3{ color:#e8645a; }
#combo-meter.t4{ color:#5b8def; } #combo-meter.t5{ color:#3df0c8; } #combo-meter.t6{ color:#ffd24a; }
#combo-meter .combo-num, #combo-meter .combo-seg{ color:inherit; }
@keyframes comboPop{ 0%{transform:scale(1);} 40%{transform:scale(1.32);} 100%{transform:scale(1);} }
#combo-meter.pop{ animation:comboPop .25s ease; }
/* 翻面卡片：display 切換 + opacity 淡入（最大相容，不依賴 3D/transition 合成） */
#card.flip-card{ flex:1; min-height:0; position:relative; }
.flip-inner{ position:relative; width:100%; height:100%; }
.flip-front, .flip-back{
  position:absolute; inset:0;
  background:#2a2e44; border-radius:16px; padding:13px;
  display:flex; flex-direction:column; box-shadow:0 -4px 16px rgba(0,0,0,.3);
  overflow-y:auto; overflow-x:hidden;
}
.flip-back{ display:none; }
#card.flipped .flip-front{ display:none; }
#card.flipped .flip-back{ display:flex; animation:cardIn .28s ease; }
@keyframes cardIn{ from{ opacity:0; } to{ opacity:1; } }

#front-actions{ display:flex; gap:10px; margin-top:8px; }
#front-actions button{ flex:1; border:none; border-radius:12px; padding:10px; font-size:14px;
  font-weight:700; cursor:pointer; }
#flip-to-back{ background:#3a4060; color:#fff; }
#next-btn{ background:var(--good); color:#fff; }
#front-actions button:active{ transform:scale(.97); }

/* 卡背 */
.flip-back{ border-top:4px solid var(--theme,#888); }
.bc{ position:absolute; font-size:12px; color:#9aa; }
.bc.tl{ top:12px; left:14px; }
.bc.tr{ top:8px; right:12px; }
.bc.bl{ bottom:12px; left:14px; }
.bc.br{ bottom:12px; right:14px; }
.theme-tag{ background:var(--theme,#555); color:#fff; padding:2px 10px; border-radius:10px; font-weight:700; }
.fav-btn{ background:none; border:none; font-size:24px; color:#5b6080; cursor:pointer; line-height:1;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.fav-btn.on{ color:#f3c64b; }
.lvl-dots{ display:flex; gap:2px; margin-top:3px; }
.lvl-dot{ width:6px; height:6px; border-radius:50%; background:#3a4060; }
.lvl-dot.on{ background:var(--theme,#6fae5a); }
/* flex:1 0 auto → 內容多時不縮、改由卡片捲動，避免擠到「下一題」；內容少時 grow 置中 */
.back-center{ flex:1 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:26px 8px 6px; }
.back-icon{ width:56px; height:56px; margin-bottom:1px; }
.back-icon .ic{ width:100%; height:100%; }
.back-ko{ font-size:32px; font-weight:700; color:#fff; display:flex; align-items:center; gap:10px; }
.back-pos{ font-size:12px; color:var(--theme,#9aa); border:1px solid var(--theme,#555); border-radius:8px; padding:1px 8px; }
.back-zh{ font-size:19px; color:#dfe2ee; }
.back-ex{ margin-top:4px; text-align:center; color:#cfd3e6; }
.back-ex-ko{ font-size:16px; }
.back-ex-zh{ font-size:13px; color:#9aa; margin-top:2px; }
.back-next{ align-self:center; background:var(--good); color:#fff; border:none; border-radius:14px;
  padding:9px 26px; font-size:14px; font-weight:700; cursor:pointer; margin:2px 0; }
.back-next:active{ transform:scale(.97); }

.flip-front{ border-top:4px solid var(--theme,#3a4060); }
/* 詞性/等級/複習標記靠左成一排，右上角讓給連擊計量器，避免重疊 */
#card-top{ display:flex; justify-content:flex-start; align-items:center; gap:8px; font-size:12px; color:#9aa; margin-bottom:6px; padding-right:58px; min-height:22px; }
#card-badge{ background:var(--theme,#3a4060); color:#fff; padding:2px 10px; border-radius:10px; font-weight:700; }
#card-streak{ color:#f3c64b; font-weight:700; display:flex; align-items:center; }
.review-badge{ background:#f0a83c; color:#3a2400; padding:1px 8px; border-radius:8px; font-size:11px; margin-right:6px; }
#card-body{ flex:1; display:flex; flex-direction:column; justify-content:center; min-height:0; }

.q-prompt{ text-align:center; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:3px; }
.q-ko{ font-size:33px; font-weight:700; color:#fff; }
.q-zh-big{ font-size:33px; font-weight:700; color:#fff; }
.q-sentence{ font-size:22px; color:#fff; }
.q-hint{ text-align:center; color:#9aa; font-size:13px; margin-bottom:9px; }
.speak-btn{ background:#3a4060; color:#fff; border:none; border-radius:10px; padding:9px 14px;
  font-size:15px; cursor:pointer; min-height:44px; display:inline-flex; align-items:center; }
.speak-btn.big{ font-size:17px; padding:12px 22px; min-height:48px; }

.options{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.opt{
  background:#363c5c; color:#fff; border:2px solid transparent; border-radius:12px;
  padding:11px 6px; font-size:17px; cursor:pointer; transition:.15s; min-height:46px;
}
.opt.ko{ font-size:21px; }
.opt:active{ transform:scale(.97); }
.opt.right{ background:var(--good); border-color:#fff; }
.opt.wrong{ background:var(--accent); border-color:#fff; }
.opt:disabled{ cursor:default; }

.fb{ text-align:center; margin-top:8px; padding:6px; border-radius:10px; font-size:14px; }
.fb.good{ background:rgba(111,174,90,.2); color:#bfe6a8; }
.fb.bad{ background:rgba(232,100,90,.2); color:#f2b3ad; }
.weight-tag{ display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:9px; margin:0 3px; }
.weight-tag.due{ background:#f0a83c; color:#3a2400; }
.weight-tag.fresh{ background:#5bb0e0; color:#04263a; }
.weight-tag.hard{ background:#9b8cd6; color:#1a1430; }
.coin-gain{ color:#f3c64b; font-weight:800; }

/* ===== 共用 ===== */
.hidden{ display:none !important; }
#toast-layer{ position:fixed; top:max(18%, calc(var(--safe-top) + 12px)); left:0; right:0; display:flex; flex-direction:column;
  align-items:center; gap:6px; pointer-events:none; z-index:130; }
.toast{ background:rgba(0,0,0,.8); color:#fff; padding:8px 16px; border-radius:20px;
  font-size:14px; font-weight:700; animation:floatUp 1.4s forwards;
  display:inline-flex; align-items:center; gap:5px; }
.toast .ic{ width:20px; height:20px; vertical-align:middle; }
.toast.good{ background:rgba(111,174,90,.95); }
.toast.bad{ background:rgba(232,100,90,.95); }
@keyframes floatUp{ 0%{opacity:0;transform:translateY(10px);} 15%{opacity:1;transform:translateY(0);}
  80%{opacity:1;} 100%{opacity:0;transform:translateY(-16px);} }

.drag-ghost{ position:fixed; transform:translate(-50%,-50%); width:46px; height:46px; pointer-events:none;
  z-index:100; filter:drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.drag-ghost .ic{ width:100%; height:100%; }

/* ===== 單字圖鑑 / 複習 ===== */
.overlay{ position:absolute; inset:0; z-index:60; background:#1b1e2e;
  display:flex; flex-direction:column; }
#collection{ z-index:70; }   /* 從結算頁開圖鑑時需蓋在結算之上 */
#app{ position:relative; }
.overlay-head{ display:flex; align-items:center; justify-content:space-between;
  padding:max(12px, var(--safe-top)) max(14px, var(--safe-right)) 12px max(14px, var(--safe-left));
  background:#23273c; }
.overlay-title{ font-size:17px; font-weight:700; color:#fff; }
.icon-btn{ background:none; border:none; color:#cfd3e6; font-size:20px; cursor:pointer;
  min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; padding:8px; }
#collection-filters{ display:flex; gap:6px; overflow-x:auto;
  padding:10px max(12px,var(--safe-right)) 10px max(12px,var(--safe-left)); }
.chip{ flex:0 0 auto; border:1.5px solid #3a4060; background:#2a2e44; color:#cfd3e6;
  border-radius:14px; padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer;
  white-space:nowrap; min-height:42px; display:flex; align-items:center; }
.chip.on{ background:var(--theme,#5b8def); border-color:var(--theme,#5b8def); color:#fff; }
.chip.fav.on{ background:#f3c64b; border-color:#f3c64b; color:#3a2e08; }
#collection-stats{ padding:0 14px 8px; font-size:12px; color:#9aa; }
.stat-due{ color:#f0a83c; font-weight:700; }
#collection-grid{ flex:1; overflow-y:auto; padding:0 12px max(16px,var(--safe-bottom));
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-content:start; }
.col-card{ position:relative; background:#2a2e44; border-radius:12px; padding:10px 6px 8px;
  text-align:center; border-bottom:3px solid var(--theme,#555); cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; }
.col-card.unseen{ opacity:.45; }
.col-card:active{ transform:scale(.97); }
.col-fav{ position:absolute; top:0; right:0; background:none; border:none;
  font-size:15px; color:#5b6080; cursor:pointer;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
.col-fav.on{ color:#f3c64b; }
.col-visual{ height:42px; display:flex; align-items:center; justify-content:center; }
.col-visual .ic{ width:38px; height:38px; }
.col-hangul{ font-size:24px; font-weight:700; color:#fff; }
.col-card.no-icon .col-visual{ height:auto; }
.col-card.no-icon .col-hangul{ font-size:27px; }
.col-ko{ font-size:17px; font-weight:700; color:#fff; margin-top:2px; }
.col-zh{ font-size:12px; color:#aeb2c6; }
.col-lv{ font-size:11px; color:var(--theme,#9aa); margin-top:2px; }
.col-empty{ grid-column:1/-1; text-align:center; color:#9aa; padding:30px; }

/* ===== 金幣商店 ===== */
#shop-balance{ margin-left:auto; margin-right:10px; font-size:14px; font-weight:700; color:#f3c64b; }
#shop-tabs{ display:flex; gap:6px; overflow-x:auto;
  padding:10px max(12px,var(--safe-right)) 10px max(12px,var(--safe-left)); }
.shop-tab{ flex:0 0 auto; border:1.5px solid #3a4060; background:#2a2e44; color:#cfd3e6;
  border-radius:14px; padding:9px 14px; font-size:13px; font-weight:700; cursor:pointer;
  min-height:44px; display:flex; align-items:center; justify-content:center; white-space:nowrap; }
.shop-tab.on{ background:#3a4060; color:#fff; }
#shop-grid{ flex:1; overflow-y:auto; padding:0 12px max(16px,var(--safe-bottom));
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px; align-content:start; }
.shop-item{ position:relative; background:#2a2e44; border-radius:12px; padding:12px 10px;
  text-align:center; border:2px solid #3a4060; }
.shop-item.equipped{ border-color:var(--good); }
.shop-swatch{ width:100%; height:42px; border-radius:8px; margin-bottom:8px; display:flex;
  align-items:center; justify-content:center; font-size:24px; }
.shop-swatch svg{ width:38px; height:38px; }
.shop-swatch .ic{ width:34px; height:34px; }
.shop-name{ font-size:14px; font-weight:700; color:#fff; }
.shop-desc{ font-size:11px; color:#9aa; margin-top:2px; min-height:14px; }
.shop-buy{ margin-top:8px; width:100%; border:none; border-radius:10px; padding:9px;
  font-size:13px; font-weight:700; cursor:pointer; background:#f3c64b; color:#3a2e08; min-height:44px; }
.shop-buy.owned{ background:#3a4060; color:#cfd3e6; }
.shop-buy.equipped{ background:var(--good); color:#fff; }
.shop-buy:disabled{ opacity:.5; cursor:default; }
.shop-buy.cantafford{ background:#5a4a4a; color:#caa; }

/* 食材皮膚（套在食材圖示）*/
.ingfx-neon .inv-icon .ic, .ingfx-neon .placed .ic, .ingfx-neon .order-item .ic{
  filter:saturate(1.55) brightness(1.08) drop-shadow(0 0 2px rgba(255,240,160,.85)); }
.ingfx-pastel .inv-icon .ic, .ingfx-pastel .placed .ic, .ingfx-pastel .order-item .ic{
  filter:saturate(.6) brightness(1.16); }
.ingfx-retro .inv-icon .ic, .ingfx-retro .placed .ic, .ingfx-retro .order-item .ic{
  filter:sepia(.42) saturate(1.3) contrast(.95); }

/* 標題連續複習徽章 */
#title-streak{ margin-top:8px; background:#fff2d6; color:#c8682f; font-weight:700;
  font-size:13px; padding:4px 14px; border-radius:14px; box-shadow:0 2px 6px rgba(90,48,16,.15); }

/* HUD 回合進度條 */
#round-bar{ height:100%; width:0; background:linear-gradient(90deg,#f3a64b,#f3c64b); transition:width .3s; }

/* ===== 回合目標選擇 ===== */
#round-streak-line{ text-align:center; padding:6px; color:#f0a83c; font-weight:700; font-size:14px; min-height:10px; }
#round-options{ display:flex; flex-direction:column; gap:12px; padding:10px 16px; flex:1 1 auto; overflow-y:auto; }
.round-opt{ display:flex; align-items:center; gap:14px; background:#2a2e44; border:2px solid #3a4060;
  border-radius:16px; padding:14px 18px; min-height:44px; cursor:pointer; color:#fff; text-align:left; transition:transform .12s; }
.round-opt:active{ transform:scale(.98); }
.ro-stars{ font-size:26px; font-weight:800; color:#f3c64b; min-width:64px; }
.ro-mid{ flex:1; }
.ro-label{ font-size:16px; font-weight:700; }
.ro-meta{ font-size:12px; color:#9aa; margin-top:2px; }
.round-hint{ text-align:center; font-size:12px; color:#9aa; padding:8px 24px max(8px,var(--safe-bottom)); }

/* ===== 結算畫面 ===== */
#settle-body{ flex:1; overflow-y:auto; padding:6px 16px max(8px,var(--safe-bottom)); }
.settle-h{ font-size:12px; font-weight:800; color:#9aa; margin:12px 0 8px; letter-spacing:1px; }
.settle-learn{ background:#22324a; border-radius:14px; padding:14px; }
.settle-biz{ background:#2a2e44; border-radius:14px; padding:14px; }
.settle-rate{ text-align:center; font-size:34px; font-weight:800; color:#bfe6a8; line-height:1; }
.settle-rate small{ font-size:13px; color:#9aa; font-weight:700; }
.settle-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.settle-stat{ background:rgba(255,255,255,.05); border-radius:10px; padding:8px; text-align:center; }
.settle-stat .v{ font-size:20px; font-weight:800; color:#fff; }
.settle-stat .k{ font-size:11px; color:#9aa; margin-top:1px; }
.settle-coins{ margin-top:10px; font-size:13px; color:#cfd3e6; }
.settle-coins .row{ display:flex; justify-content:space-between; padding:2px 0; }
.settle-coins .total{ border-top:1px solid #3a4060; margin-top:4px; padding-top:6px; font-weight:800; color:#f3c64b; }
.settle-msg{ text-align:center; font-size:14px; color:#ffe2a8; padding:10px 12px 2px; line-height:1.5; }
.settle-next{ text-align:center; font-size:12px; color:#7fb0e0; padding:6px; }
#settle-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px 16px max(16px,var(--safe-bottom)); }
#settle-actions button{ border:none; border-radius:12px; padding:13px; font-size:14px; font-weight:700; cursor:pointer; background:#3a4060; color:#fff; min-height:48px; }
#settle-actions button.primary{ background:var(--good); }

/* ===== 結束回合確認 ===== */
#endround-confirm{ position:absolute; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:rgba(20,14,8,.5); }
#endround-confirm.hidden{ display:none; }
.erc-card{ background:#fff; border-radius:18px; padding:22px 20px; width:82%; max-width:300px;
  text-align:center; box-shadow:0 12px 30px rgba(40,20,8,.35); }
.erc-title{ font-size:17px; font-weight:800; color:#3a2e1e; }
.erc-sub{ font-size:12px; color:#8a7a62; margin:8px 0 16px; line-height:1.5; }
.erc-actions{ display:flex; gap:10px; }
.erc-actions button{ flex:1; border:none; border-radius:12px; padding:12px; font-size:14px; font-weight:700; cursor:pointer; min-height:44px; }
#erc-no{ background:#ece1cf; color:#5a4a32; }
#erc-yes{ background:var(--accent); color:#fff; }

/* ===== 主標題介面 ===== */
#title{ position:absolute; inset:0; z-index:60; background:#f4e7d0;
  display:flex; align-items:center; justify-content:center; text-align:center; }
#title.hidden{ display:none; }
.title-topbar{ position:absolute; top:max(12px, var(--safe-top)); right:max(12px, var(--safe-right)); display:flex; gap:8px; z-index:2; }
.title-inner{ display:flex; flex-direction:column; align-items:center; padding:0 24px; }
.title-hero{ position:relative; width:46vw; max-width:200px; aspect-ratio:1; margin-bottom:6px;
  animation:idleBob 3.4s ease-in-out infinite; }
.title-hero svg{ width:100%; height:100%; filter:drop-shadow(0 8px 12px rgba(90,48,16,.3)); }
.title-name{ font-size:46px; font-weight:800; color:#c8462f; letter-spacing:2px;
  text-shadow:0 2px 0 #fff, 0 3px 6px rgba(90,48,16,.25); }
.title-sub{ font-size:16px; color:#9a6b3a; font-weight:700; margin-top:2px; }
#start-btn{ margin-top:22px; background:var(--good); color:#fff; border:none; border-radius:26px;
  padding:14px 44px; font-size:20px; font-weight:800; cursor:pointer;
  box-shadow:0 5px 0 #4f8c3f, 0 8px 14px rgba(0,0,0,.2); transition:transform .1s; }
#start-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 #4f8c3f, 0 4px 8px rgba(0,0,0,.2); }
.title-meta{ font-size:12px; color:#b08a5e; font-weight:700; margin-top:16px; }

/* ===== 設定 ===== */
#settings{ position:absolute; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:rgba(40,28,16,.5); }
#settings.hidden{ display:none; }
.settings-card{ width:84%; max-width:330px; background:#fff; border-radius:18px; padding:16px 20px 20px;
  box-shadow:0 12px 30px rgba(0,0,0,.3); }
.settings-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.settings-title{ font-size:18px; font-weight:800; color:#7a4a2a; }
.settings-head .icon-btn{ color:#9a8c78; font-size:20px; }
.setting-row{ display:flex; align-items:center; justify-content:space-between;
  padding:11px 2px; min-height:44px; font-size:16px; font-weight:700; color:#5a4636; }
.switch{ width:50px; height:28px; border-radius:16px; border:none; background:#d3cabb; position:relative;
  cursor:pointer; transition:background .2s; padding:0; flex:0 0 auto; }
.switch.on{ background:#6fae5a; }
.switch .knob{ position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .2s; }
.switch.on .knob{ left:25px; }
.setting-sep{ height:1px; background:#eee; margin:8px 0 12px; }
.settings-danger{ width:100%; background:#fbeaea; color:#c0392b; border:2px solid #e8b4b0;
  border-radius:12px; padding:13px; min-height:44px; font-size:15px; font-weight:700; cursor:pointer; }
.settings-danger:active{ transform:scale(.98); }
.settings-note{ text-align:center; font-size:12px; color:#b08a5e; margin-top:14px; }

/* ===== 學習輔助（卡背高亮 + 變化說明） ===== */
.ex-hi{ background:rgba(243,198,75,.26); color:#ffe39a; border-radius:5px; padding:0 3px; font-weight:700; }
.learn-note{ margin-top:9px; width:100%; max-width:320px; background:rgba(91,141,224,.12);
  border:1px solid rgba(91,141,224,.32); border-radius:12px; padding:9px 12px; text-align:center; }
.ln-head{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; }
.ln-chg{ font-size:15px; font-weight:700; color:#cfe0ff; }
.ln-rule{ font-size:11px; font-weight:700; background:#3a4060; color:#bcd; padding:2px 8px; border-radius:8px; }
.ln-tip{ font-size:12px; color:#aeb6cc; margin-top:5px; line-height:1.55; }
/* 韓語學習要點：純 emoji 圖示，置於卡背左上角 TOPIK 下方（避免與「下一題」重疊）*/
.guide-icon{ position:absolute; top:32px; left:10px; z-index:2; background:none; border:none;
  font-size:22px; line-height:1; cursor:pointer; padding:5px; }
.guide-icon:active{ transform:scale(.9); }

/* ===== 韓語學習要點 overlay ===== */
#guide-body{ flex:1; overflow-y:auto; padding:12px 16px calc(24px + var(--safe-bottom, 0px)); }
.guide-sec{ background:#23273c; border-radius:14px; padding:12px 14px; margin-bottom:12px; }
.guide-sec h3{ font-size:15px; color:#fff; margin-bottom:8px; }
.guide-sec p{ font-size:13.5px; color:#cfd3e6; line-height:1.7; }
.guide-sec ul{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.guide-sec li{ font-size:13.5px; color:#cfd3e6; line-height:1.65; padding-left:15px; position:relative; }
.guide-sec li:before{ content:"·"; position:absolute; left:4px; color:#5b8def; font-weight:800; }
.guide-sec b{ color:#fff; }
.guide-sec .hl{ color:#f3c64b; }
.guide-eg{ background:rgba(243,198,75,.1); border-radius:8px; padding:7px 10px; margin-top:5px; }
.guide-note{ font-size:11px; color:#8a93a8; }
.guide-sec li.guide-warn{ color:#f0b38a; }
.guide-sec li.guide-warn:before{ content:"⚠"; font-size:10px; top:2px; }

/* ===== 每日（任務/幸運字/登入/複習提醒） ===== */
#daily-btn{ position:relative; }
#daily-dot{ position:absolute; top:3px; right:3px; width:9px; height:9px; border-radius:50%;
  background:#e8645a; border:1.5px solid #fff; }
#daily-dot.hidden{ display:none; }
#daily-body{ flex:1; overflow-y:auto; padding:12px 14px calc(20px + var(--safe-bottom,0px)); }
.daily-sec{ background:#23273c; border-radius:14px; padding:12px 14px; margin-bottom:10px; }
.daily-login{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dl-title{ font-size:15px; font-weight:700; color:#fff; }
.dl-sub{ font-size:12px; color:#aeb6cc; margin-top:2px; }
.daily-claim, .daily-go{ border:none; border-radius:12px; padding:9px 16px; font-size:13px; font-weight:700;
  cursor:pointer; background:var(--good); color:#fff; min-height:40px; flex:0 0 auto; }
.daily-claim:active, .daily-go:active{ transform:scale(.96); }
.daily-claimed{ font-size:12px; color:#7fae5a; font-weight:700; }
.daily-review{ display:flex; align-items:center; gap:10px; font-size:14px; color:#cfd3e6; }
.daily-review .due-on{ color:#f0a83c; font-size:17px; }
.daily-review .due-off{ color:#7fae5a; }
.daily-review .daily-go{ margin-left:auto; background:#3a4060; }
.daily-lucky .dlk-head{ font-size:14px; color:#fff; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dlk-hint{ font-size:12px; color:#9aa; font-weight:400; }
.dlk-word{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.dlk-ko{ font-size:26px; font-weight:700; color:#ffe39a; }
.dlk-zh{ font-size:15px; color:#cfd3e6; }
.daily-lucky.done{ opacity:.85; }
.quest{ background:#2a2e44; border-radius:12px; padding:10px 12px; margin-bottom:8px; }
.quest.done{ opacity:.72; }
.quest-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.quest-label{ font-size:14px; color:#fff; font-weight:700; }
.quest-reward{ font-size:13px; color:#f3c64b; font-weight:700; flex:0 0 auto; }
.quest-bar{ height:7px; background:#1b1e2e; border-radius:4px; overflow:hidden; margin:6px 0 3px; }
.quest-fill{ height:100%; background:linear-gradient(90deg,#f3a64b,#6fae5a); transition:width .3s; }
.quest.done .quest-fill{ background:#6fae5a; }
.quest-prog{ font-size:11px; color:#9aa; text-align:right; }

/* ===== 한글 40音表 ===== */
#hangul-body{ flex:1; overflow-y:auto; padding:12px 14px calc(20px + var(--safe-bottom,0px)); }
.hg-note{ font-size:12.5px; color:#aeb6cc; line-height:1.6; margin-bottom:12px; }
.hg-sec{ margin-bottom:16px; }
.hg-sec h3{ font-size:14px; color:#fff; margin-bottom:8px; }
.hg-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.hg-cell{ background:#2a2e44; border:1.5px solid #3a4060; border-radius:10px; padding:8px 2px;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; min-height:54px; }
.hg-cell:active{ background:#3a4060; }
.hg-c{ font-size:24px; font-weight:700; color:#fff; }
.hg-r{ font-size:11px; color:#9fb4e0; }
@keyframes hgTap{ 0%{transform:scale(1);} 40%{transform:scale(1.12);} 100%{transform:scale(1);} }
.hg-cell.tapped{ animation:hgTap .22s ease; background:#3a4060; border-color:var(--good); }

/* ===== 客人圖鑑 ===== */
.chip.mode{ background:#1b1e2e; border-color:#5b6080; }
.chip.mode.on{ background:#5b8def; border-color:#5b8def; color:#fff; }
.cust-card{ border-bottom-color:#5b8def; }
.cust-visual{ height:56px; }
.cust-visual svg{ width:50px; height:50px; }
.col-card.locked{ opacity:.62; }
.col-card.locked .cust-visual{ filter:grayscale(.85) brightness(.9); }
.col-card.cust-card .col-zh{ font-size:11px; color:#aeb2c6; margin-top:2px; }

/* ===== 拼字題 ===== */
.spell-build{ min-height:54px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center;
  background:#1b1e2e; border-radius:12px; padding:8px; margin-bottom:12px; }
.spell-placeholder{ color:#6b7290; font-size:14px; }
.spell-slot{ min-width:44px; min-height:44px; font-size:24px; font-weight:700; background:#3a4060; color:#fff;
  border:2px solid #5b6080; border-radius:10px; cursor:pointer; }
.spell-slot.right{ background:var(--good); border-color:#fff; }
.spell-slot.wrong{ background:var(--accent); border-color:#fff; }
.spell-tray{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.spell-tile{ min-width:48px; min-height:48px; font-size:24px; font-weight:700; background:#363c5c; color:#fff;
  border:2px solid transparent; border-radius:12px; cursor:pointer; transition:transform .12s; }
.spell-tile.used{ opacity:.22; pointer-events:none; }
.spell-tile:active{ transform:scale(.93); }

/* 極窄手機（≤380px）：次要小字與大字微縮，避免擠壓/換行 */
@media(max-width:380px){
  .diff-tag, .col-lv, .serve-hint, .weight-tag{ font-size:12px; }
  .order-item{ font-size:12px; }
  .opt{ padding:9px 4px; font-size:16px; }
  .opt.ko{ font-size:18px; }
  .settle-stat .v{ font-size:17px; }
}
@media(max-width:360px){
  .q-ko, .q-zh-big{ font-size:28px; }
  .q-sentence{ font-size:18px; }
  .title-name{ font-size:40px; }
}

/* 桌面：置中手機框 + 兩側留白 */
@media(min-width:520px){
  body{ background:#15161f; }
  #app{ max-width:480px; height:92vh; margin:4vh auto; border-radius:20px; overflow:hidden; }
}