/* =========================================================================
   site.css：正式網站對設計稿 base.css 的少量覆寫（載入順序在所有 theme.css 之後）
   ========================================================================= */

/* 揭曉頁待機：盒身一律靜置（不整顆漂浮），只有盒蓋輕輕上浮暗示可點。
   設計稿在「有寫實背景圖」時才這樣做；正式版所有主題（含 CSS 背景的水彩）統一。 */
.gb-wrap{animation:none}
:where([data-screen="reveal"]) .gb-lid-group{animation:lid-breathe 3.6s ease-in-out infinite}
.is-playing .gb{cursor:default}

/* 下一輪：禮盒柔和淡入回到桌上（不位移，避免離開桌面） */
.is-entering .gb-wrap{animation:box-enter .6s var(--ease-out) both}
@keyframes box-enter{from{opacity:0}to{opacity:1}}

/* 場景主題：桌機依「開放的主題數」自動等分成一列（目前四套＝4 欄）；
   手機照設計稿改 2×2（四個名稱完整顯示，不截斷），只剩 1–2 套時自動變一列。 */
.tp[hidden]{display:none}
.tp-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
@media (max-width:760px){
  .tp-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;gap:6px}
  .tp{gap:8px;padding:8px 10px;min-height:42px;font-size:13px;letter-spacing:.02em}
  .tp-sw{width:18px;height:18px}
}

/* 手機矮螢幕（390×667）：揭曉頁按鈕距底再收一點 */
@media (max-width:760px) and (max-height:700px){
  .reveal-cta{margin-bottom:16px}
}

/* 卡牌頂列：揭曉畫面不放任何數字（拿掉 NO.），改成「Prize ——」：
   英文標記靠左、細線延伸到右緣，與下方左對齊的獎品名同一條軸線，頂部不會空一塊。
   威士忌卡面本身已有一道橫線（theme.css .pc-front::after），不再加線。 */
.pc-top{justify-content:flex-start;align-items:center;gap:3.6em}
.pc-top::after{content:"";flex:1;height:.25em;background:var(--card-ink-3,#8a8076);opacity:.35}
[data-theme="whisky"] .pc-top::after{display:none}

/* 卡牌正面：內容（恭喜獲得＋細線＋獎品名）在頂列與頁腳之間垂直置中、略偏上。
   上下 margin:auto 置中；padding-bottom 讓視覺重心比幾何中心高一點。
   名稱 1–3 行都由 flex 自動置中。 */
.pc-body{margin-top:auto;margin-bottom:auto;padding-bottom:7em}
.pc-foot{margin-top:0}

/* 大數字跳動（.is-bump 的 transform）時，字型的字身框（Bodoni 很高）會蓋到下方的 −／＋ 鈕，
   連點時第二下會點到數字而失效。數字本身不可互動，直接讓滑鼠穿透。 */
.count-num{pointer-events:none}

/* v7：接觸陰影素材已收在畫布內（四套右／下緣 alpha=0），不再需要 base.css 第 17 節為「陰影被畫布切掉」
   加的右／下緣遮罩淡出；取消遮罩讓陰影完整顯示。base.css 保持與 ../ui/shared/base.css 相同，所以在這裡覆寫。
   v8 起 marble 的陰影補強也已移除，四套都直接用素材陰影。 */
.gb-layer[data-layer="contact-shadow"].is-img > picture{-webkit-mask-image:none;mask-image:none}

/* 手機設定頁：捲到底時最後一列主題選項和警語列之間留一點空隙（390×667 原本剛好貼齊） */
@media (max-width:760px){
  .screen-setup .theme-pick{margin-bottom:16px}
}

/* =========================================================================
   v11：QA 第 1 輪修正（qa/QA-report.md）
   ========================================================================= */

/* QA-14：dvh 退路。--vh100 在支援 dvh 的瀏覽器＝100dvh，舊瀏覽器（iOS ≤15.3、舊 WebView）＝100vh。
   本檔新寫的高度計算一律用 var(--vh100)；base.css 原本的 dvh 規則在舊瀏覽器會整條失效，
   由最下方 @supports not 區塊用 100vh 補回。 */
:root{--vh100:100vh}
@supports (height:100dvh){:root{--vh100:100dvh}}

/* QA-03：iPhone 安全區（viewport-fit=cover）。
   --footer-h 直接把 Home 指示條的高度算進去，所有「100dvh − footer」的版面計算自動扣掉；
   警語列文字留在原本的高度內，下方的 inset 只是延伸的底色。 */
:root{--footer-h:calc(clamp(44px,1vw + 34px,58px) + env(safe-area-inset-bottom,0px))}
.warning-bar{padding-bottom:env(safe-area-inset-bottom,0px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.app{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
[data-screen^="reveal"] .topbar{padding-top:max(clamp(10px,1vw,20px),env(safe-area-inset-top,0px));padding-right:max(clamp(10px,1vw,20px),env(safe-area-inset-right,0px))}
@media (max-width:760px){
  .topbar{padding-top:max(14px,env(safe-area-inset-top,0px))}
  [data-screen^="reveal"] .topbar{padding:max(6px,env(safe-area-inset-top,0px)) max(6px,env(safe-area-inset-right,0px)) 6px 6px}
}

/* QA-02：減少手機往下拉誤觸重新整理（進度本身已存 localStorage，重新整理也會還原） */
html,body{overscroll-behavior-y:none}

/* QA-04：不支援全螢幕 API（iPhone Safari）：html.no-fs-api。揭曉頁不放沒作用的圖示；其他頁點圖示顯示「加入主畫面」提示。
   已從主畫面以 standalone 開啟時 JS 加 hidden；.fs-btn 有 display:grid，要明確蓋掉。 */
.fs-btn[hidden],.no-fs-api[data-screen^="reveal"] .fs-btn{display:none}
.fs-hint{position:fixed;z-index:60;left:50%;top:max(12px,env(safe-area-inset-top,0px));translate:-50% -8px;width:min(92vw,420px);padding:12px 16px;border-radius:10px;
  background:rgba(20,16,14,.92);color:#f4ede4;font:500 14px/1.6 var(--ff-body);letter-spacing:.02em;box-shadow:0 8px 28px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .25s,translate .25s}
.fs-hint.is-on{opacity:1;translate:-50% 0}

/* QA-06（v12）：結果總覽「盡量一屏放得下」。js/app.js 的 fitResult() 依序試密度 × 欄數（--cols 1～3），取第一個放得下的：
   同欄數先縮字級（一般 → .is-dense（11–20 筆的起點）→ .is-compact → .is-tight），再加欄（欄寬 ≥140px 才加到 2、3 欄；.is-cols3 收窄欄距）。
   文字一律換行、不截斷（QA-07 的 overflow-wrap）。都放不下時桌機保留捲動＋底部淡出（.has-more），手機整頁捲動。
   position:relative 讓 JS 用 li.offsetTop 量內容高（不受進場動畫 transform 影響 → QA-16）。 */
.result-list{position:relative}
.result-list.is-dense .result-item{min-height:0;padding:8px 0}
.result-list.is-dense .result-item .num,.result-list.is-dense .result-item .name{font-size:calc(var(--fs-input) * .9)}
.result-list.is-compact .result-item{min-height:0;padding:5px 0;gap:10px;line-height:1.25}
.result-list.is-compact .result-item .num,.result-list.is-compact .result-item .name{font-size:calc(var(--fs-input) * .8)}
.result-list.is-compact .result-item .name{line-height:1.25}
.result-list.is-tight .result-item{min-height:0;padding:3px 0;gap:8px;line-height:1.2}
.result-list.is-tight .result-item .num,.result-list.is-tight .result-item .name{font-size:max(13px,calc(var(--fs-input) * .7))}
.result-list.is-tight .result-item .name{line-height:1.2}
.result-list.is-cols3{column-gap:clamp(16px,1.6vw,36px)}
.result-list.has-more{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 56px),transparent)}
/* 手機直式：base.css 固定單欄，這裡改成跟著 --cols（短名稱 20 筆可以排 2 欄放進一屏）。
   .is-tight-head：一般標題放不下時（例如 20 筆 24 字長名稱），JS 把標題／說明／間距縮小再試一次。 */
@media (max-width:760px){
  .result-list{grid-template-columns:repeat(var(--cols,1),minmax(0,1fr))}
  .screen-result.is-tight-head{padding-top:12px}
  .screen-result.is-tight-head .display{font-size:28px;margin-top:.15em}
  .screen-result.is-tight-head .lede{font-size:13px;line-height:1.55;margin-top:.5em}
  .screen-result.is-tight-head .list-wrap{margin-top:12px}
  .screen-result.is-tight-head .aside-actions{padding-top:14px}
}
/* 手機橫式等矮視窗（橫向且高 ≤ 540，含寬 ≤ 760 的 667×390）：結果頁一律左右版面——左欄標題＋按鈕（縮小），右欄列表自己捲動；
   列表高度＝可視高 − 警語列 − 列表上緣（--result-top 由 JS 量測，不受進場動畫影響），不留 260px 下限，整頁不捲動。 */
@media (orientation:landscape) and (max-height:540px){
  [data-screen="result"] .screen-result{display:grid;grid-template-columns:minmax(170px,32%) minmax(0,1fr);column-gap:clamp(18px,3vw,40px);align-items:start;padding-top:8px}
  .screen-result .result-aside{display:flex;flex-direction:column;grid-column:1!important;grid-row:1;min-height:0}   /* !important：蓋過手機版 .grid12>*{grid-column:1/-1!important} */
  .screen-result .list-wrap{grid-column:2!important;grid-row:1;margin-top:0}
  .screen-result .display{font-size:clamp(24px,8vh,40px);margin-top:.25em}
  .screen-result .lede{font-size:13px;line-height:1.6;margin-top:.6em}
  .screen-result .aside-actions{padding-top:14px}
  .result-list{overflow:auto;max-height:calc(var(--vh100) - var(--footer-h) - var(--result-top,120px) - 10px)}
}

/* QA-07：沒有空格的長字串（WWWW…、網址）在結果頁與輸入頁都要能斷行 */
.result-item .name{min-width:0;overflow-wrap:anywhere}
.result-item{min-width:0}

/* QA-12：重複名稱只提示不擋送出：欄位右側「與 01 同名」＋左欄一句說明 */
.field .field-dup{display:none;flex:none;font-size:var(--fs-small);font-family:var(--ff-body);color:var(--accent);white-space:nowrap}
.field.is-dup:not(.is-error) .field-dup{display:block}
.field.is-dup:not(.is-error) .counter{display:none}
.form-note{color:var(--ink-2);margin-top:.8em;font-size:var(--fs-small);line-height:1.6}
.form-note[hidden]{display:none}
@media (max-width:760px){ .screen-input .form-note{order:2} }

/* QA-01：手機橫式／矮視窗（高 ≤ 540px）的揭曉頁。
   - 拿掉 min-height（520／560px），揭曉頁高度＝可視高度 − 警語列，頁面不能捲動。
   - 卡牌高度跟著可視高度縮：卡高 = 可視高 − 警語列 − 按鈕 − 3 個間距（卡寬 = 卡高 / 1.4）。
   - 卡牌（含落地柔光、地面影、彩帶）整體上移半個按鈕高（--card-lift），按鈕留在卡牌正下方、不壓卡、不出界。
   - 禮盒寬度改看高度（寬度 760 以下原本套手機直式的 108vw 會太大），盒底照樣用 --gb-shift 坐在寫實背景桌面上。 */
@media (orientation:landscape) and (max-height:540px){
  :root{
    --cta-h:44px;--cta-gap:10px;
    --card-w:clamp(140px,calc((var(--vh100) - var(--footer-h) - var(--cta-h) - var(--cta-gap) * 3) / 1.4),300px);
    --box-w:clamp(220px,min(44vw,calc(var(--vh100) * .92)),460px);
    --card-lift:calc((var(--cta-h) + var(--cta-gap)) / 2);
  }
  .screen-reveal,[data-screen^="reveal"] .screen-reveal{height:calc(var(--vh100) - var(--footer-h));min-height:0;overflow:hidden;overflow:clip}   /* 落地柔光（卡寬 2.6 倍的圓）在矮畫面會超出、讓頁面可捲 */
  .reveal-cta{width:min(320px,56vw);min-height:var(--cta-h);margin-bottom:var(--cta-gap)}
  .reveal-cta .btn{min-height:var(--cta-h);font-size:15px}
  .pc{translate:-50% calc(-50% - var(--card-lift))}
  .ambient,.fx{translate:-50% calc(-50% - var(--card-lift))}
  .floor-shadow{translate:-50% calc(var(--card-w) * .82 - var(--card-lift)) !important}
  .warning-bar{font-size:12px}
  /* 寬扁畫面裡照片被 cover 裁得很扁，地平線落在偏下的位置，盒子會貼到警語列：
     多往上延伸一點照片（等於把地平線往上提，裁掉天花板），盒底照樣用 --gb-shift 坐在桌面上。主題可用 --ph-lift-short 微調。 */
  [data-reveal-bg="desktop"]{--ph-ll:calc(var(--ph-lift,0) + var(--ph-lift-short,.14))}
}
/* 卡牌飛出起點跟著 --card-lift 補回（一般尺寸 --card-lift 未設定＝0，與 base.css 相同） */
@keyframes card-fly{0%{opacity:0;transform:translateY(calc(22em + var(--gb-shift,0px) + var(--card-lift,0px))) scale(.16)}12%{opacity:1}70%{transform:translateY(-5em) scale(1.04)}100%{opacity:1;transform:none}}

/* QA-14（續）：不支援 dvh 的瀏覽器會丟掉 base.css 裡所有含 dvh 的宣告，這裡用 100vh 補回同樣的規則。
   支援 dvh 的瀏覽器完全不會套用這一段。 */
@supports not (height:100dvh){
  body,.app{min-height:100vh}
  .screen-setup{min-height:calc(100vh - var(--top-h) - var(--footer-h) - 24px)}
  .input-aside,.result-aside{min-height:min(640px,calc(100vh - var(--top-h) - var(--footer-h) - 80px))}
  .prize-list,.result-list{max-height:max(260px,calc(100vh - var(--top-h) - var(--footer-h) - 120px))}
  .screen-reveal{height:calc(100vh - var(--footer-h))}
  [data-reveal-bg] .stage{--gb-shift:calc(var(--hs) * 100vh + var(--ph-gap) * var(--box-w) / 100 - (100vh - var(--footer-h)) / 2 - var(--box-w) * .16)}
  @media (max-width:760px){
    .screen-setup,.input-aside,.result-aside{min-height:0}
    .prize-list,.result-list{max-height:none}
  }
}

/* 手機橫式（寬 761–1100、高 ≤540）設定頁：左欄很窄，四個主題名稱排一列會被截斷 → 改 2×2 */
@media (orientation:landscape) and (max-height:540px) and (min-width:761px) and (max-width:1100px){
  .tp-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;gap:6px}
  .tp{min-height:42px}
}