/* ==========================================================================
   小狼與小煎餅 — 版面樣式
   由 index.html 的 <style> 拆出來，內容原封不動。
   區塊索引：
     [CSS-1] 基礎與變數        [CSS-5] 話語卡（常駐）
     [CSS-2] 直式外框          [CSS-6] 下方操作鈕
     [CSS-3] 上方 HUD          [CSS-7] 覆蓋畫面（開始 / 勝 / 敗）
     [CSS-4] 舞台（畫布）
   ========================================================================== */

/* ==========================================================================
   [CSS-1] 基礎與變數
   ========================================================================== */
:root{
  --night-0:#120b1f;      /* 最深夜色 */
  --night-1:#1e1233;      /* 舞台底 */
  --night-2:#2c1c4a;      /* 舞台上緣 */
  --ink:#f3ecff;          /* 主要文字 */
  --ink-dim:#a795c4;      /* 次要文字 */
  --love:#ff6f9c;         /* 愛心粉 */
  --warm:#ffc46b;         /* 應援暖光 */
  --calm:#8be0d4;         /* 話語青 */
  --bad:#5a2f7a;          /* 惡意泡泡 */
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;}
body{
  background:var(--night-0);
  color:var(--ink);
  font-family:"PingFang TC","Noto Sans TC","Hiragino Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
  display:flex;justify-content:center;
}

/* ==========================================================================
   [CSS-2] 直式外框：手機滿版，桌機收成一條直式
   ========================================================================== */
#app{
  position:relative;width:100%;max-width:460px;height:100dvh;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--night-2) 0%,var(--night-1) 45%,var(--night-0) 100%);
  overflow:hidden;
}

/* ==========================================================================
   [CSS-3] 上方 HUD：血條 / 分數 / 倒數 / 語言切換
   ========================================================================== */
#hud{padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 8px;flex:0 0 auto;}
.hud-row{display:flex;align-items:center;gap:10px;}
.hud-stat{font-size:12px;color:var(--ink-dim);letter-spacing:.06em;}
.hud-val{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);}
#timeVal.urgent{color:var(--love);}
.spacer{flex:1;}
#langBtn{
  border:1px solid rgba(243,236,255,.28);background:rgba(243,236,255,.06);
  color:var(--ink);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;
  /* 覆蓋層是 z-index:20，語言鈕要比它高，否則開始／勝利／失敗畫面一蓋上去就選不了語言 */
  position:relative;z-index:30;
}
/* 有覆蓋層時底色加重一點，才不會浮在暗畫面上看不清楚 */
#app.veiled #langBtn{
  background:rgba(243,236,255,.14);border-color:rgba(243,236,255,.45);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
#hpTrack{
  margin-top:8px;height:12px;border-radius:999px;
  background:rgba(0,0,0,.35);border:1px solid rgba(243,236,255,.14);overflow:hidden;
}
#hpFill{
  height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,#ff8fb3,#ff5e8e);
  transition:width .22s ease;
}
#hpFill.low{background:linear-gradient(90deg,#ff7a5e,#e0344f);}

/* ==========================================================================
   [CSS-4] 舞台（畫布）
   ========================================================================== */
#stage{flex:1 1 auto;position:relative;min-height:0;transition:filter .5s ease;}
/* 血量低於 LOW_HP：整個舞台去飽和，世界看起來失去顏色 */
/* 只套在舞台、不套整個 #app，是為了讓上方血條維持紅色可讀 */
#stage.weak{filter:saturate(.22) brightness(.92);}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;}
#stage.shake{animation:shake .22s ease;}
@keyframes shake{
  0%,100%{transform:translate(0,0);}
  25%{transform:translate(-5px,2px);}
  75%{transform:translate(5px,-2px);}
}
#hintLine{
  position:absolute;left:0;right:0;bottom:8px;text-align:center;
  font-size:11px;color:var(--ink-dim);opacity:.75;pointer-events:none;
}

/* ==========================================================================
   [CSS-5] 話語卡（常駐在畫面上，直接點就丟出去）
   ========================================================================== */
/* 常駐在畫面上，橫向捲動即可；不再有展開／收合 */
#cardWrap{flex:0 0 auto;position:relative;padding:8px 0 6px;}
#cardTray{
  display:flex;gap:8px;padding:0 12px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
#cardTray::-webkit-scrollbar{display:none;}
.card{
  flex:0 0 auto;min-width:96px;max-width:150px;padding:8px 11px;
  border-radius:13px;border:1px solid rgba(139,224,212,.45);
  background:linear-gradient(160deg,rgba(139,224,212,.16),rgba(139,224,212,.05));
  color:var(--calm);font-size:12px;line-height:1.35;text-align:left;
  font-family:inherit;transition:opacity .18s ease;
}
.card:active{transform:scale(.96);}
/* 冷卻中：卡片變暗且不能點，下方細線顯示還要等多久 */
#cardTray.cooling .card{opacity:.32;}
.card:disabled{pointer-events:none;}
#wordCd{
  position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;
  background:rgba(139,224,212,.12);overflow:hidden;opacity:0;transition:opacity .2s ease;
}
#wordCd.on{opacity:1;}
#wordCd i{display:block;height:100%;width:0;background:var(--calm);}

/* ==========================================================================
   [CSS-6] 下方操作鈕（愛心 / 應援）
   ========================================================================== */
#controls{
  flex:0 0 auto;display:flex;gap:10px;
  padding:10px 12px calc(12px + var(--safe-b));
}
.btn{
  position:relative;flex:1;height:76px;border-radius:20px;border:1px solid rgba(243,236,255,.16);
  background:rgba(243,236,255,.07);color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-family:inherit;overflow:hidden;
}
.btn .ico{font-size:24px;line-height:1;}
.btn .lbl{font-size:12px;font-weight:600;letter-spacing:.03em;}
.btn:active{transform:scale(.97);}
.btn[disabled]{opacity:.45;}
#btnHeart{border-color:rgba(255,111,156,.5);background:linear-gradient(180deg,rgba(255,111,156,.22),rgba(255,111,156,.06));}
#btnCheer{border-color:rgba(255,196,107,.5);background:linear-gradient(180deg,rgba(255,196,107,.2),rgba(255,196,107,.05));}
/* 冷卻遮罩：由下往上退去 */
.cool{
  position:absolute;left:0;right:0;bottom:0;height:0%;
  background:rgba(6,3,14,.68);pointer-events:none;
}
.cool-num{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;color:var(--ink);pointer-events:none;
}
.cool-num.show{display:flex;}
/* 應援蓄力環 */
#chargeRing{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:conic-gradient(var(--warm) calc(var(--p,0) * 1%),transparent 0);
  mix-blend-mode:screen;
}
#chargeRing.on{opacity:.5;}

/* ==========================================================================
   [CSS-7] 覆蓋畫面：開始 / 勝 / 敗
   ========================================================================== */
.overlay{
  position:absolute;inset:0;z-index:20;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:32px 26px;text-align:center;
  background:rgba(10,5,20,.9);backdrop-filter:blur(6px);
}
.overlay.show{display:flex;}
.ov-art{font-size:64px;line-height:1;}
.ov-art .doll{font-size:38px;margin-left:-10px;vertical-align:-6px;}
.ov-title{font-size:24px;font-weight:800;letter-spacing:.02em;margin:0;}
.ov-text{font-size:15px;line-height:1.6;color:var(--ink-dim);margin:0;max-width:20em;}
.ov-stat{font-size:13px;color:var(--ink-dim);font-variant-numeric:tabular-nums;}
.ov-btn{
  margin-top:6px;padding:13px 30px;border-radius:999px;border:none;
  background:linear-gradient(90deg,var(--love),#ff9f6b);color:#2a0f1c;
  font-family:inherit;font-size:16px;font-weight:800;
}
.ov-btn:active{transform:scale(.97);}
/* 勝利畫面的按鈕先藏著，讓玩家有時間把信讀完（JS 三秒後移除 .pending）*/
.ov-btn.pending{opacity:0;transform:translateY(8px);pointer-events:none;}
.ov-btn{transition:opacity .6s ease,transform .6s ease;}

/* ---- 這局送出的話語，排成一封信 ---- */
.letter{
  width:100%;max-width:300px;text-align:left;
  padding:16px 18px 14px;border-radius:14px;
  background:linear-gradient(170deg,rgba(255,246,232,.96),rgba(248,235,215,.94));
  border:1px solid rgba(255,196,107,.5);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.8);
  color:#4a3524;font-family:"Songti TC","Noto Serif TC",Georgia,serif;
}
.letter-head{font-size:14px;font-weight:700;margin-bottom:8px;}
.letter-body{
  font-size:13px;line-height:1.95;
  max-height:31vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.letter-body p{margin:0;text-indent:1em;}
.letter-body p::before{content:"「";}
.letter-body p::after{content:"」";}
.letter-body .empty{text-indent:0;color:#8a7358;font-style:italic;}
.letter-body .empty::before,.letter-body .empty::after{content:"";}
.letter-sign{margin-top:10px;font-size:12px;text-align:right;color:#7a6146;}
/* 失敗畫面比勝利畫面多一段文案，信要矮一點才塞得下小螢幕 */
#loseOv .letter-body{max-height:20vh;}
/* 勝利畫面多了輸入框，信紙本文也要讓位，否則小螢幕會被擠爆 */
#winOv .letter-body{max-height:18vh;}

/* ---- 信的最後一行：玩家自己寫的那句 ---- */
.compose{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(122,97,70,.4);}
.compose[hidden]{display:none;}
.compose-lb{display:block;font-size:12px;color:#7a6146;margin-bottom:6px;}
.compose textarea,.compose input{
  width:100%;font-family:inherit;font-size:13px;line-height:1.6;color:#4a3524;
  background:rgba(255,255,255,.55);border:1px solid rgba(122,97,70,.35);
  border-radius:8px;padding:7px 9px;resize:none;
}
.compose textarea::placeholder,.compose input::placeholder{color:#a28b6d;}
.compose textarea:focus,.compose input:focus{outline:2px solid rgba(255,196,107,.7);outline-offset:1px;}
/* 剩餘字數：疊在輸入框右下角，快滿了才出現，平常不干擾 */
.compose-field{position:relative;}
.compose-left{
  position:absolute;right:8px;bottom:6px;pointer-events:none;
  font-size:11px;font-variant-numeric:tabular-nums;color:#a28b6d;
}
.compose-left.low{color:#a33b4a;font-weight:700;}
.compose-row{display:flex;gap:8px;margin-top:8px;}
.compose-row input{flex:1;min-width:0;}
.compose-send{
  flex:0 0 auto;padding:0 18px;border:none;border-radius:8px;
  background:linear-gradient(90deg,#c9704f,#d89a5a);color:#2a0f1c;
  font-family:inherit;font-size:13px;font-weight:800;
}
.compose-send:active{transform:scale(.97);}
.compose-send[disabled]{opacity:.5;}
/* 送出結果／錯誤訊息，成功和失敗共用同一行，靠 class 換顏色 */
.compose-msg{margin:8px 0 0;font-size:12px;line-height:1.6;color:#6b5a3f;min-height:0;}
.compose-msg.err{color:#a33b4a;}
.compose-msg a{color:#8a5a2a;}
#winOv .ov-title{color:var(--warm);}
#loseOv .ov-title{color:var(--love);}
.rules{font-size:12px;color:var(--ink-dim);line-height:1.7;max-width:22em;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* 蜜罐欄位。用「移出畫面」而不是 display:none，因為部分機器人會跳過
   display:none 的欄位——移出畫面它們仍然會填，我們才抓得到。 */
.vc-hp{
  position:absolute !important;left:-9999px !important;top:auto !important;
  width:1px !important;height:1px !important;opacity:0 !important;
  pointer-events:none !important;
}

/* 送出中的轉圈。用 currentColor 畫，所以套在任何按鈕上顏色都會自己對。
   減少動態偏好開啟時不轉，但環還在——文字已經寫著「送出中…」，
   靜止的環仍然是一個「有事情在進行」的訊號。 */
.sending::before{
  content:"";display:inline-block;
  width:.78em;height:.78em;margin-right:.45em;vertical-align:-.08em;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:vc-spin .7s linear infinite;
}
@keyframes vc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .sending::before{animation:none;opacity:.6;}
}