/* 兩個模式共用的樣式（index.html 接龍、cross.html 填字） */
/* 字型：全字庫正楷體（數位發展部，台灣教育部標準字形；政府資料開放授權／OFL 1.1，可商用、要標出處）
   只打包用得到的字：tools/build_font.py 產生 fonts/twkai-sub.woff2，改了文字要重跑 */
@font-face { font-family: "TW-Kai Sub"; src: url("../fonts/twkai-sub.woff2") format("woff2"); font-display: block; }
:root { --kai: "TW-Kai Sub", "BiauKai", "Kaiti TC", serif; --ink: #2b2620; --paper: #fbf7ec; --line: rgba(43, 38, 32, 0.8); --red: #b8352a; --gold: #e2a72e; --jade: #3f8f6a; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* html 自己也要有底色：iOS 26 Safari 採樣這個染狀態列，不要刪 */
html { background: #e9e4d6; }
html, body { margin: 0; height: 100%; overflow: hidden; color: var(--ink);
  font-family: "TW-Kai Sub", -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  -webkit-user-select: none; user-select: none; touch-action: none; }
body { background: #e9e4d6; }
a { text-decoration: none !important; color: inherit; }
a, button, label, input, [role="button"] { -webkit-tap-highlight-color: transparent; }
a:focus, a:focus-visible, button:focus, button:focus-visible { outline: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

button { font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--line); border-radius: 12px; padding: 7px 12px; cursor: pointer; }
button:hover { background: #ebe4d2; color: var(--ink); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: default; }

/* ── 上：女主角視窗 ── */
/* 版面：手機整個寬度；電腦上遊戲集中在中間一欄（--col-l、--col-w 由 JS 算），右邊放「打過的字」 */
#top { position: fixed; left: var(--col-l, 0px); width: var(--col-w, 100%); top: 0; padding: max(10px, env(safe-area-inset-top)) 12px 0; z-index: 5; pointer-events: none;
  display: grid; gap: 6px; }
#hudBtns { display: flex; justify-content: flex-end; align-items: center; gap: 6px; pointer-events: auto; }
#hudBtns button { font-size: 16px; padding: 8px 14px; min-height: 40px; background: rgba(251, 247, 236, 0.92); }   /* 手機點得到：至少 40px 高 */
#favor { background: rgba(251, 247, 236, 0.92); padding: 4px 10px; border-radius: 99px; color: #c0396b; font-size: 17px; }
#purse { font-size: 17px; }
#hudBtns #purse { margin-right: auto; }
#hudBtns #hearts { order: -2; }
#hudBtns #buffs { order: -1; }

/* 戰鬥資訊：怪物名字＋血量＋攻擊倒數，疊在棋盤上緣（魔王腰間），不要底色（--board-t 由 JS 每一格算） */
#hud { position: fixed; left: calc(var(--col-l, 0px) + 14px); width: calc(var(--col-w, 100%) - 28px); top: calc(var(--board-t, 300px) - 58px); z-index: 5;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; pointer-events: none; }
.barWrap { height: 10px; background: rgba(43, 38, 32, 0.28); border-radius: 99px; overflow: hidden; box-shadow: 0 0 0 1.5px rgba(251, 247, 236, 0.85); }
.bar { height: 100%; width: 100%; border-radius: 99px; transition: width 0.25s; }
#hud .barWrap:last-child { height: 6px; }              /* 下面那條是攻擊倒數，細一點 */
#hpBar { background: linear-gradient(90deg, #b8352a, #e0644f); }
#timeBar { background: #3f8f6a; transition: none; }
#timeBar.warn { background: #d28a22; }
#mName { font-size: 16px; font-weight: 700; white-space: nowrap; color: #2b2620;
  text-shadow: 0 0 3px #fbf7ec, 0 0 3px #fbf7ec, 0 0 6px #fbf7ec; }                /* 沒有底色：白邊讓字浮在魔王身上也看得清楚 */
#hearts { font-size: 20px; color: #c0396b; letter-spacing: 1px; white-space: nowrap; background: rgba(251, 247, 236, 0.92); padding: 2px 9px; border-radius: 99px; }
#hearts i { font-style: normal; color: #cfc6b4; }

#combo { position: fixed; right: 14px; z-index: 6; font-size: 30px; font-weight: 700; color: var(--red);
  text-shadow: 0 2px 0 #fff, 0 0 10px #fff; pointer-events: none; transform-origin: right center; }
#combo.pop { animation: pop 0.3s ease-out; }
@keyframes pop { from { transform: scale(1.5); } to { transform: scale(1); } }
#mode { position: fixed; left: 14px; z-index: 6; font-size: 18px; background: rgba(251, 247, 236, 0.9); border-radius: 99px; padding: 3px 10px; pointer-events: none; }

/* ── 下：按鈕 ── */
#bottom { position: fixed; left: var(--col-l, 0px); width: var(--col-w, 100%); bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; z-index: 5;
  padding: 0 12px max(10px, calc(env(safe-area-inset-bottom) - 6px)); }
#bottom button { font-size: 18px; padding: 12px 16px; min-height: 48px; background: rgba(251, 247, 236, 0.95); }
/* 應援量表：不是按鈕（滿了自動發動），所以不做成按鈕樣子 */
#ult { position: relative; overflow: hidden; align-self: center; font-size: 17px; padding: 10px 14px; border-radius: 99px; background: rgba(43, 38, 32, 0.72); color: #fff; }
#ult.full { background: #c0396b; }
#ultFill { position: absolute; left: 0; bottom: 0; height: 4px; background: #c0396b; width: 0; transition: width 0.25s; }

/* 傷害數字：彈出放大再縮回（--dz：連擊越多越大），暴擊是金色毛筆字＋「暴」字朱砂小印章 */
.dmg { position: fixed; z-index: 7; pointer-events: none; transform: translate(-50%, -50%); text-align: center; font-family: var(--kai); }
.dmg .n { display: inline-block; position: relative; font-size: calc(36px * var(--dz, 1)); font-weight: 700; color: #fff; line-height: 1;
  text-shadow: 0 0 4px #b8352a, 0 2px 0 #7a1d16, 0 0 12px rgba(184, 53, 42, 0.5); animation: dmgPop 1.2s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.dmg.crit .n { font-size: calc(50px * var(--dz, 1)); color: #ffd760; letter-spacing: 1px;
  text-shadow: 0 0 2px #7a4a0a, 0 3px 0 #6b3d08, 0 0 16px rgba(255, 190, 60, 0.85); }
.dmg .bao { position: absolute; right: -0.62em; top: -0.32em; font-style: normal; font-size: 0.36em; width: 1.35em; height: 1.35em; line-height: 1.35em;
  background: #b8352a; color: #fff3e0; border-radius: 3px; text-shadow: none; transform: rotate(12deg); box-shadow: 0 0 0 2px rgba(255, 240, 220, 0.8); }
.dmg small { display: block; font-size: 15px; color: #fff; font-weight: 700; text-shadow: 0 0 3px #7a1d16, 0 1px 0 #7a1d16; animation: dmgFade 1.2s ease-out forwards; }
@keyframes dmgPop { 0% { transform: scale(0.2); opacity: 0; } 14% { transform: scale(1.45); opacity: 1; } 30% { transform: scale(0.92); }
  42% { transform: scale(1.04); } 55% { transform: scale(1) translateY(0); opacity: 1; } 100% { transform: scale(0.9) translateY(-46px); opacity: 0; } }
@keyframes dmgFade { 0%, 55% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px); } }

/* 連擊字樣：毛筆字＋朱砂飛白，從畫面側邊刷進來 */
.combo-brush { position: fixed; right: 0; top: 36%; z-index: 8; pointer-events: none; height: 74px; width: 230px; animation: brushIn 1.35s ease-out forwards; }
.combo-brush i { position: absolute; inset: 10px 0 8px 0; transform-origin: right center; animation: brushStroke 0.32s cubic-bezier(.2, .8, .3, 1) both;
  background: linear-gradient(90deg, rgba(184, 53, 42, 0) 0%, rgba(184, 53, 42, 0.92) 30%, #b8352a 100%);
  -webkit-mask: repeating-linear-gradient(0deg, #000 0 5px, rgba(0, 0, 0, 0.55) 5px 7px, #000 7px 11px, rgba(0, 0, 0, 0.2) 11px 12px);
  mask: repeating-linear-gradient(0deg, #000 0 5px, rgba(0, 0, 0, 0.55) 5px 7px, #000 7px 11px, rgba(0, 0, 0, 0.2) 11px 12px);
  border-radius: 40% 0 0 50% / 60% 0 0 40%; }
.combo-brush b { position: absolute; right: 22px; top: 50%; transform: translateY(-52%); font-family: var(--kai); font-size: 44px; color: #fff8ea; letter-spacing: 4px;
  text-shadow: 0 2px 0 #6e1a13, 0 0 10px rgba(110, 26, 19, 0.6); animation: brushText 0.4s 0.1s cubic-bezier(.2, 1.4, .4, 1) both; }
.combo-brush.big b { font-size: 54px; color: #ffe08a; }
@keyframes brushStroke { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes brushText { from { opacity: 0; transform: translate(60px, -52%) scale(1.4); } to { opacity: 1; transform: translateY(-52%); } }
@keyframes brushIn { 0%, 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(30px); } }

/* 必殺：四周墨色暈邊往中間收縮再退開 */
.ink-vignette { position: fixed; inset: 0; z-index: 7; pointer-events: none; animation: vignette 1.25s ease-in-out forwards;
  background: radial-gradient(ellipse at center, rgba(20, 18, 24, 0) var(--vr, 70%), rgba(20, 18, 24, 0.82) 100%); }
@keyframes vignette { 0% { opacity: 0; --vr: 80%; } 30% { opacity: 1; --vr: 42%; } 65% { opacity: 1; --vr: 48%; } 100% { opacity: 0; --vr: 75%; } }
@property --vr { syntax: '<percentage>'; inherits: false; initial-value: 70%; }

/* 浮層 */
.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(233, 228, 214, 0.7); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheet { background: var(--paper); border: 2px solid var(--line); border-radius: 18px; padding: 18px 18px 16px; width: min(420px, 100%);
  max-height: 86vh; overflow: auto; box-shadow: 0 10px 30px rgba(40, 30, 20, 0.25); touch-action: pan-y; }
.sheet h1 { margin: 0 0 4px; font-size: 30px; letter-spacing: 2px; }
.sheet h2 { margin: 0 0 8px; font-size: 20px; }
.sheet p { margin: 6px 0; line-height: 1.6; }
.sheet .sub { color: #8a6d3b; font-size: 13px; }
.sheet .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.sheet .primary { background: #b8352a; color: #fff; border-color: #7a1d16; }
.sheet .primary:hover { background: #9c2b21; color: #fff; }
.line { padding: 6px 10px; background: #f1e9d5; border-radius: 10px; margin: 6px 0; }
.line b { color: #c0396b; }

/* 圖鑑 */
.tabs { display: flex; gap: 6px; margin: 4px 0 10px; }
.tabs button { font-size: 14px; padding: 4px 12px; }
.tabs button.on { background: #2b2620; color: #fff; }
.tabs button.on:hover { background: #2b2620; color: #fff; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.cell { border-radius: 10px; padding: 6px 4px; text-align: center; background: #ece6d6; font-size: 17px; cursor: pointer; }
.cell.lock { color: #b6ad99; cursor: default; }
.cell .r { display: block; font-size: 11px; color: #8a6d3b; }
.cell.r2 { background: #dfe9f1; } .cell.r3 { background: #f1e1ec; }
.detail { margin-top: 10px; padding: 10px 12px; background: #f1e9d5; border-radius: 12px; }
.detail .big { font-size: 26px; letter-spacing: 3px; }
.detail .zy { font-size: 13px; color: #8a6d3b; }
.setRow { margin: 8px 0; }
.setRow .barWrap { margin-top: 4px; }
.setRow .bar { background: #c0396b; }
.clipRow { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed #d8cfba; font-size: 15px; }
.clipRow button { font-size: 13px; padding: 3px 10px; }

#toast { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 30; background: rgba(43, 38, 32, 0.88); color: #fff;
  padding: 8px 16px; border-radius: 99px; font-size: 15px; pointer-events: none; opacity: 0; transition: opacity 0.2s; white-space: nowrap; }
#toast.on { opacity: 1; }

/* 切換模式的連結 */
.modeLinks { margin-right: auto; display: grid; gap: 4px; align-self: center; }
.modeLink { font-size: 14px; color: #8a6d3b; }
.modeLink:hover { color: #8a6d3b; background: #efe7d2; border-radius: 8px; }

/* ── 掛軸框（世界觀：畫裡只有小香是真的，用掛軸把她的影片「收進畫裡」） ── */


/* 墨染轉場 */
.ink-wipe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }
.ink-cover { background: rgb(29, 27, 32); opacity: 1; transition: opacity 0.6s cubic-bezier(.3, 0, .2, 1) 0.15s; }

/* 怪物的對話泡泡（墨線框） */
.mon-say { position: fixed; left: 50%; top: 40%; z-index: 6; transform: translate(-50%, -110%) scale(0.6); opacity: 0; pointer-events: none;
  background: #fffaf0; color: #2b2620; border: 2px solid #2b2620; border-radius: 14px; padding: 3px 11px; font-size: 16px; font-weight: 700; white-space: nowrap;
  font-family: var(--kai); transition: opacity 0.15s, transform 0.18s cubic-bezier(.3, 1.6, .5, 1); }
.mon-say::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; background: #fffaf0;
  border-right: 2px solid #2b2620; border-bottom: 2px solid #2b2620; transform: translateX(-50%) rotate(45deg); }
.mon-say.on { opacity: 1; transform: translate(-50%, -110%) scale(1); }
/* 被怪物打到：畫面邊緣閃紅 */
.hit-flash { position: fixed; inset: 0; z-index: 7; pointer-events: none; animation: hitFlash 0.45s ease-out forwards;
  background: radial-gradient(ellipse at center, rgba(184, 53, 42, 0) 45%, rgba(184, 53, 42, 0.55) 100%); }
@keyframes hitFlash { from { opacity: 1; } to { opacity: 0; } }

/* ── 小香的提示：下方一條對話框（只有文字） ── */
/* 10-29：提示框浮在畫面上方（魔王頭上那塊空的地方），不蓋到字塊台的石頭 */
#sayBox { position: fixed; left: var(--col-l, 0px); width: var(--col-w, 100%); top: var(--say-t, 80px); z-index: 5; padding: 0 12px; pointer-events: none; }
#say { background: rgba(251, 247, 236, 0.8); border: 1.5px solid rgba(43, 38, 32, 0.2); border-radius: 12px; padding: 6px 12px; font-size: 15px; line-height: 1.45;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); box-shadow: 0 4px 14px rgba(40, 30, 20, 0.12); }
/* 10-29：提示框不佔版面，浮在字塊台上；幾秒後淡掉（點穿過去還是點得到石頭） */
#sayBox { transition: opacity 0.45s, transform 0.45s; }
#sayBox.gone { opacity: 0; transform: translateY(-8px); }
#sayAgain { position: fixed; left: calc(var(--col-l, 0px) + var(--col-w, 100vw) / 2); top: var(--say-t, 80px); transform: translateX(-50%); z-index: 6;
  font-size: 17px; padding: 8px 20px; min-height: 40px; background: rgba(251, 247, 236, 0.9); border-radius: 99px; pointer-events: auto; }
#say small { display: block; color: #8a6d3b; font-size: 12px; }

/* ── 小香跳出來鼓勵：掛軸框裡的真人片段，播完收起來 ── */
#cheer { position: fixed; left: calc(var(--col-l, 0px) + 14px); top: var(--cheer-t, 120px); z-index: 8; width: min(190px, 42vw); pointer-events: none;
  opacity: 0; transform: translateX(-24px) rotate(-3deg) scale(0.92); transition: opacity 0.2s, transform 0.28s cubic-bezier(.3, 1.5, .5, 1); }
#cheer.on { opacity: 1; transform: rotate(-2deg); }
#cheerVid { position: relative; aspect-ratio: 3 / 4; width: 100%; }
#cheerLine { margin-top: 10px; background: #fffaf0; border: 2px solid #2b2620; border-radius: 12px; padding: 4px 10px; font-size: 14px; font-weight: 700; line-height: 1.4;
  font-family: var(--kai); }
#cheerLine:empty { display: none; }
/* 表情差分立繪（靜態圖）的程式動態：player.js 依片段在 .still-box img 加 still-*；transform-origin 放在腳下，晃起來像人在動 */
.still-box { overflow: hidden; }
/* 圖比框大一圈（上下各多 6%、左右各 4%），跳起來、晃起來才不會露出紙底 */
.still-box img { position: absolute; left: -4%; top: -6%; width: 108%; height: 112%; object-fit: cover; object-position: center 30%; transform-origin: 50% 100%; will-change: transform; }
.still-breathe { animation: st-breathe 3.2s ease-in-out infinite; }
.still-tilt    { animation: st-tilt 3.6s ease-in-out infinite; }
.still-sway    { animation: st-sway 2.8s ease-in-out infinite; }
.still-bounce  { animation: st-bounce 0.42s ease-out 2, st-breathe 3.2s ease-in-out 0.84s infinite; }
.still-jump    { animation: st-jump 0.55s cubic-bezier(.3, 1.6, .5, 1) 3, st-breathe 3.2s ease-in-out 1.65s infinite; }
.still-pop     { animation: st-pop 0.5s cubic-bezier(.3, 1.8, .5, 1) 1 both, st-breathe 3.2s ease-in-out 0.5s infinite; }
.still-shake   { animation: st-shake 0.36s linear 3, st-breathe 3.2s ease-in-out 1.08s infinite; }
.still-lean    { animation: st-lean 0.6s ease-out 1 forwards, st-lean-hold 3s ease-in-out 0.6s infinite; }
.still-sink    { animation: st-sink 0.8s ease-out 1 forwards, st-sink-hold 3.4s ease-in-out 0.8s infinite; }
@keyframes st-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.018); } }
@keyframes st-tilt { 0%, 100% { transform: rotate(0); } 30%, 60% { transform: rotate(-2.2deg); } }
@keyframes st-sway { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-2%) rotate(-1deg); } 75% { transform: translateX(2%) rotate(1deg); } }
@keyframes st-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 35% { transform: translateY(-4%) scale(0.98, 1.03); } 70% { transform: translateY(0) scale(1.03, 0.97); } }
@keyframes st-jump { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.04, 0.95); } 50% { transform: translateY(-9%) scale(0.97, 1.04); } }
@keyframes st-pop { 0% { transform: scale(0.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes st-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3%) rotate(-1.5deg); } 50% { transform: translateX(3%) rotate(1.5deg); } 80% { transform: translateX(-2%); } }
@keyframes st-lean { from { transform: translateY(0) scale(1); } to { transform: translateY(2%) scale(1.06); } }
@keyframes st-lean-hold { 0%, 100% { transform: translateY(2%) scale(1.06); } 50% { transform: translateY(2%) scale(1.07, 1.075); } }
@keyframes st-sink { from { transform: translateY(0) rotate(0); } to { transform: translateY(3%) rotate(-1.5deg); } }
@keyframes st-sink-hold { 0%, 100% { transform: translateY(3%) rotate(-1.5deg); } 50% { transform: translateY(3.4%) rotate(-1.5deg) scale(1.006, 1.01); } }
@media (prefers-reduced-motion: reduce) { .still-box img { animation: none !important; } }
.scroll-frame { border-radius: 2px; background: repeating-linear-gradient(45deg, #e9dcc0 0 3px, #e4d5b6 3px 6px);
  box-shadow: 0 8px 20px rgba(40, 30, 20, 0.3), inset 0 0 0 1px rgba(120, 95, 60, 0.35); }
.scroll-frame video, .scroll-frame .still-box { position: absolute; left: 7px; top: 9px; width: calc(100% - 14px); height: calc(100% - 18px); object-fit: cover; object-position: center 30%;
  opacity: 0; transition: opacity 0.12s linear; filter: saturate(0.82) sepia(0.14) contrast(0.96) brightness(1.02); }
.scroll-frame video.on, .scroll-frame .still-box.on { opacity: 1; }
.scroll-frame .paper-tone, .scroll-frame .ink-edge { position: absolute; left: 7px; top: 9px; right: 7px; bottom: 9px; z-index: 1; pointer-events: none; }
.scroll-frame .paper-tone { mix-blend-mode: multiply; opacity: 0.45; background-size: 256px 256px; }
.scroll-frame .ink-edge { box-shadow: inset 0 0 8px 3px rgba(233, 220, 192, 0.95), inset 0 0 18px 5px rgba(233, 220, 192, 0.5), inset 0 0 0 1px rgba(60, 45, 30, 0.4); }
.scroll-frame::before, .scroll-frame::after { content: ""; position: absolute; left: -8px; right: -8px; height: 9px; z-index: 3; border-radius: 5px;
  background: linear-gradient(180deg, #8a5a33, #5a361c 55%, #3e2512); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
.scroll-frame::before { top: -5px; } .scroll-frame::after { bottom: -5px; }

/* ── 右邊：打過的字（小石子，四個字一列，一直排下來） ── */
#history { position: fixed; left: var(--hist-l, auto); top: var(--hist-t, 120px); bottom: var(--hist-b, 120px); width: var(--hist-w, 80px); z-index: 4;
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 6px 5px 8px;
  background: none; border: 0; scrollbar-width: none; pointer-events: none; }   /* 不要底色、不要框：石子直接排在畫面上 */
#history .h-row { pointer-events: auto; }
#history::-webkit-scrollbar { display: none; }
.h-title { font-size: 13px; color: #8a6d3b; text-align: center; margin-bottom: 5px; letter-spacing: 1px; text-shadow: 0 0 4px rgba(251, 247, 236, 0.9); }
.h-empty { font-size: 13px; color: #a39a88; text-align: center; line-height: 1.4; }
.h-row { display: grid; grid-template-columns: repeat(4, var(--hs, 15px)); gap: 2px; justify-content: center; margin-bottom: 5px; cursor: pointer; animation: hIn 0.35s ease-out; }
.h-st { width: var(--hs, 15px); height: var(--hs, 15px); border-radius: 3px; background: #d8d1c2; box-shadow: 0 2px 0 #a99f8c; display: grid; place-items: center;
  font-family: var(--kai); font-size: calc(var(--hs, 15px) * 0.7); line-height: 1; color: #3a3330; }
.h-row.crit .h-st { background: #ecd29a; box-shadow: 0 2px 0 #b8954a; }
.h-row:active .h-st { transform: translateY(1px); }
@keyframes hIn { from { opacity: 0; transform: translateY(-6px) scale(0.9); } to { opacity: 1; transform: none; } }

/* 屬性特效的畫面閃光 */
.bolt-flash { position: fixed; inset: 0; z-index: 7; pointer-events: none; background: rgba(230, 245, 255, 0.85); animation: flashOut 0.35s ease-out forwards; }
.dark-flash { position: fixed; inset: 0; z-index: 7; pointer-events: none; background: rgba(20, 22, 40, 0.45); animation: flashOut 0.4s ease-out forwards; }
@keyframes flashOut { from { opacity: 1; } to { opacity: 0; } }

/* ── 雷雨：閃電那一下畫面閃兩次白 ── */
.storm-flash { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: #fff; animation: stormFlash 0.55s ease-out forwards; }
@keyframes stormFlash { 0% { opacity: 0.7; } 12% { opacity: 0.08; } 24% { opacity: 0.55; } 100% { opacity: 0; } }

/* 手機：打過的字排在怪物兩側，左右交錯往下排（中間空出來給怪物） */
#history.flank { padding: 0 2px; }
#history.flank .h-title { text-align: left; width: calc(var(--hs, 15px) * 4 + 6px); }
#history.flank #histRows { display: grid; grid-template-columns: repeat(2, calc(var(--hs, 15px) * 4 + 6px)); justify-content: space-between; align-content: start; }
#history.flank .h-empty { grid-column: 1; text-align: left; }

/* ── 狐妖的黑霧：蓋住小香提示的一大半，點一下吹散 ── */
.smog { position: absolute; top: -8px; bottom: -8px; left: 20%; right: 4px; border-radius: 18px; pointer-events: auto; cursor: pointer;
  background: radial-gradient(ellipse 60% 70% at 32% 50%, rgba(34, 26, 46, 0.97) 0%, rgba(34, 26, 46, 0.9) 50%, rgba(34, 26, 46, 0) 100%),
              radial-gradient(ellipse 55% 80% at 70% 45%, rgba(58, 40, 78, 0.96) 0%, rgba(30, 24, 40, 0.9) 55%, rgba(30, 24, 40, 0) 100%);
  display: grid; place-items: center; animation: smogIn 0.6s ease-out, smogDrift 3s ease-in-out 0.6s infinite alternate; }
.smog span { color: rgba(236, 226, 250, 0.8); font-size: 12px; letter-spacing: 1px; }
.smog.blow { pointer-events: none; animation: smogOut 1.5s ease-in forwards; }
@keyframes smogIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes smogDrift { from { transform: translateX(-4px); } to { transform: translateX(4px) scale(1.03); } }
@keyframes smogOut { to { opacity: 0; transform: translateX(70px) scale(1.4); filter: blur(6px); } }

/* 暫時：解析度／FPS（查字糊用，確認後拿掉） */
.perf-tag { position: fixed; left: 4px; bottom: max(2px, env(safe-area-inset-bottom)); z-index: 50; font: 10px/1.2 -apple-system, sans-serif; color: rgba(43, 38, 32, 0.6); pointer-events: none; }

/* 《成語典》釋義（原文照登）：出處另起一行、淡一點 */
.moe-src { display: block; margin-top: 2px; font-size: 11px; color: #8a6d3b; text-align: right; }
.moe-text { font-size: 13px; line-height: 1.6; text-align: left; }

/* ── 過關儀式（victory.js 的 winScene）：換場後小香站到畫面中間，背景壓暗，下面一行「點一下繼續」 ──
   層級要比墨染轉場（z 40）低，轉場才蓋得住她 */
body.win-scene #cheer { left: 50% !important; right: auto !important; top: 9vh !important; width: min(300px, 72vw) !important;
  transform: translateX(-50%) !important; z-index: 39 !important; }
body.win-scene #cheerLine { font-size: 20px; text-align: center; padding: 8px 14px; }
.win-tap { position: fixed; inset: 0; z-index: 38; background: rgba(24, 20, 14, 0.5); display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: max(40px, env(safe-area-inset-bottom)); cursor: pointer; -webkit-tap-highlight-color: transparent; animation: winTapIn 0.4s ease-out; }
.win-tap span { color: #fbf7ec; font-size: 17px; letter-spacing: 3px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); animation: winTipBlink 1.6s ease-in-out infinite; }
@keyframes winTapIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes winTipBlink { 50% { opacity: 0.45; } }

/* ── 聲音設定面板：三個開關，每一列 56px 高（手機好點） ── */
.snd-overlay { z-index: 60; }
.snd-sheet h2 { margin: 0 0 6px; }
.snd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; border-bottom: 1px dashed rgba(43, 38, 32, 0.2); }
.snd-row b { display: block; font-size: 18px; }
.snd-row small { display: block; font-size: 13px; color: #8a6d3b; margin-top: 2px; }
.snd-sw { position: relative; width: 84px; height: 44px; flex: none; padding: 0; border-radius: 99px; background: #cfc6b4; border: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; transition: background 0.2s; }
.snd-sw span { font-size: 16px; font-weight: 700; color: #fff; }
.snd-sw i { position: absolute; left: 4px; top: 4px; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
.snd-sw.on { background: #3f8f6a; justify-content: flex-start; padding-left: 12px; padding-right: 0; }
.snd-sw.on i { transform: translateX(40px); }
.snd-sw:hover { background: #cfc6b4; }
.snd-sw.on:hover { background: #3f8f6a; }
#hudBtns { flex-wrap: wrap; }