/* ============================================================================
   Boom! Boom! Usa 全站共用的樣式：/play、/play-easy.html，牆（/、/wall）也用這裡的顏色和字型。
   顏色、字型、字級、行高、間距、圓角都在 :root 定一次；下面的元件和各頁只用這些變數，
   不另外寫字級、行高（作者 10/26：全站統一、可以重複使用）。
   易讀版（<html data-read="easy">）用同一套元件，只換一組比較大的字級、比較霧的卡片。
   ============================================================================ */
:root{
  /* 顏色 */
  --c-bg:#050605;
  --c-text:#f4f1e6;        /* 標題、重點 */
  --c-text-2:#e2e4dc;      /* 內文 */
  --c-text-3:#a2a79c;      /* 小字：說明、署名、版權 */
  --c-line:rgba(244,241,230,.14);
  --c-card:rgba(8,9,8,.6);
  --c-pane:#0b0a08;
  --c-bamboo:#dfc58f; --c-bamboo-hi:#ead39f; --c-ink:#17120c;   /* 竹子色：按鈕、步驟編號、小標前的記號 */
  --c-warn:#f0c66b;
  /* 字型 */
  --f-text:'Noto Sans TC',-apple-system,'PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  --f-latin:'Noto Sans','Noto Sans TC',-apple-system,system-ui,sans-serif;
  --f-title:'Bpmf Huninn','Noto Sans TC',system-ui,sans-serif;   /* 只給遊戲名 Boom! Boom! Usa */
  --f-mono:'SFMono-Regular',Menlo,Consolas,monospace;
  /* 字級：全站只有這六級 */
  --fs-caption:.78rem;                       /* 版權、署名、切換鈕 */
  --fs-small:.9rem;                          /* 說明、今天一共、遊戲中的提示 */
  --fs-body:1.05rem;                         /* 內文 */
  --fs-lead:1.25rem;                         /* 小標、按鈕、遊戲中的遊戲名 */
  --fs-head:clamp(1.5rem,3.8vw,2.1rem);      /* 結果那一句 */
  --fs-title:clamp(2.3rem,6.4vw,3.6rem);     /* 遊戲名 */
  /* 行高、字距、字重 */
  --lh-tight:1.08; --lh-snug:1.35; --lh-text:1.85; --lh-latin:1.65;
  --ls-text:.02em; --ls-wide:.06em;
  --fw-strong:500;
  /* 間距、圓角、陰影、尺寸 */
  --sp-1:.4rem; --sp-2:.75rem; --sp-3:1.15rem; --sp-4:1.75rem; --sp-5:2.6rem;
  --pad-x:clamp(18px,4.5vw,52px); --pad-y:clamp(20px,4vw,44px);
  --r-card:16px; --r-pane:14px; --r-btn:12px; --r-pill:999px;
  --blur:9px; --shadow:0 24px 70px rgba(0,0,0,.5);
  --card-w:680px; --logo-h:40px; --btn-h:50px;
}
html[data-read=easy]{   /* 易讀版：字大一號、不用灰字、卡片霧得比較重（字底下接近單色） */
  --fs-caption:1rem; --fs-small:1.1875rem; --fs-body:1.3125rem; --fs-lead:1.4rem; --fs-head:clamp(1.7rem,4.4vw,2.2rem);
  --lh-text:1.6; --lh-latin:1.55; --fw-strong:700;
  --c-text-2:var(--c-text); --c-text-3:#d6d9d0;
  --c-card:rgba(14,15,13,.82); --blur:16px;
  --card-w:720px; --logo-h:44px; --btn-h:60px;
}
@media (max-width:699px){
  :root{--logo-h:34px;--pad-x:18px;--pad-y:20px}
  html[data-read=easy]{--logo-h:38px}
}

/* ---------- 基本 ---------- */
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--c-bg);color:var(--c-text-2);font:400 var(--fs-body)/var(--lh-text) var(--f-text);letter-spacing:var(--ls-text);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
[lang=en]{font-family:var(--f-latin);letter-spacing:0}
.en,p[lang=en]{line-height:var(--lh-latin)}
h1,h2,h3,p,ol,ul{margin:0}
b,strong{font-weight:var(--fw-strong)}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.seg{display:inline-block}   /* 一句分成幾段：放不下時只在段與段之間斷，不把詞斷開 */

/* ---------- 語言：一次只放一種（作者 10/26：不要中英並置）。main 的 data-l 決定；.zh／.en 是一段段的字，.lg-zh／.lg-en 是按鈕裡的字 ---------- */
.bi>span{display:block}
main[data-l=zh] .bi>.en,main[data-l=en] .bi>.zh,main[data-l=zh] .lg-en,main[data-l=en] .lg-zh,
main[data-l=zh] .cols>.en,main[data-l=en] .cols>.zh,main[data-l=zh] .sign>.en,main[data-l=en] .sign>.zh{display:none}

/* ---------- 背景：相機的一段片段滿版循環、壓暗，上面漂口簧琴竹片（play.js 的 BG_CLIP、floatOn）。字都在卡片裡，不壓在影像上 ---------- */
#bgv{position:fixed;inset:0;z-index:0;background:var(--c-bg)}
#bgv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s}
#bgv video.on{opacity:1}
#bgv::after{content:'';position:absolute;inset:0;background:rgba(5,6,5,.5);transition:background-color .6s}
main[data-screen=game] #bgv::after{background:rgba(5,6,5,.7)}   /* 遊戲時背景退後，眼睛留給滑進來的苗 */
#float{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;transition:opacity .6s}
main[data-screen=game] #float{opacity:.4}   /* 遊戲時竹片停住、變淡，不跟計時搶 */
#float img{position:absolute;left:0;top:0;will-change:transform;filter:brightness(.92)}

/* ---------- 元件 ---------- */
/* 毛玻璃卡片 */
.glass{background:var(--c-card);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));border:1px solid rgba(244,241,230,.09);border-radius:var(--r-card);box-shadow:var(--shadow)}
/* 森人的 logo（和 symposium 同一張書法字；深色背景用反白的淺色版），連到 treetreetreeperson.art */
.tlogo{display:block;width:max-content;line-height:0}.tlogo img{height:var(--logo-h);width:auto;display:block}
/* 遊戲名 */
.title{font-family:var(--f-title);font-weight:400;font-size:var(--fs-title);line-height:var(--lh-tight);letter-spacing:.01em;color:var(--c-text)}
/* 小標：前面一小段竹子色 */
.head{font-size:var(--fs-lead);font-weight:var(--fw-strong);line-height:var(--lh-snug);color:var(--c-text)}
.head::before{content:'';display:inline-block;width:.28em;height:.9em;margin-right:.5em;border-radius:2px;background:var(--c-bamboo);vertical-align:-.08em}
/* 說明小字 */
.note{font-size:var(--fs-small);line-height:var(--lh-latin);color:var(--c-text-3)}
/* 步驟：竹子色的圓裡寫數字 */
.steps{list-style:none;counter-reset:step;padding:0}
.steps li{counter-increment:step;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-2);margin:0 0 var(--sp-1)}
.steps li::before{content:counter(step);width:calc(var(--fs-caption) * 1.75);height:calc(var(--fs-caption) * 1.75);margin-top:calc((var(--fs-body) * var(--lh-text) - var(--fs-caption) * 1.75) / 2);
  display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--c-bamboo);color:var(--c-ink);font-size:var(--fs-caption);font-weight:var(--fw-strong);line-height:var(--lh-snug)}
/* 「怎麼玩」第 3 步的小圖：一根木頭、白圈、苗滑進來（play.js 換成 B 那根的苗；沒有圖時是白點） */
.fig{position:relative;height:calc(var(--fs-body) * 3.2);border-radius:10px;overflow:hidden;background:#17120c center/cover no-repeat;border:1px solid var(--c-line)}
.fig .ring,.fig .dot{position:absolute;top:50%;left:74%;transform:translate(-50%,-50%);border-radius:50%;box-sizing:border-box}
.fig .ring{height:74%;aspect-ratio:1;border:2px solid #fbf6ea;box-shadow:0 0 0 2px rgba(20,13,6,.75),inset 0 0 0 2px rgba(20,13,6,.75)}
.fig .dot{height:50%;aspect-ratio:1;background:#fbf6ea;border:2px solid rgba(20,13,6,.8);animation:fig 2.4s linear infinite}
.fig .dot.plant{height:90%;aspect-ratio:1/2;border:0;border-radius:0;background:center/contain no-repeat}
@keyframes fig{0%{left:-6%}62%{left:74%;opacity:1}78%{left:74%;opacity:0}100%{left:74%;opacity:0}}
@media (prefers-reduced-motion:reduce){.fig .dot{animation:none}}
/* 按鈕：竹子色、實心、深色字（和背景的竹片同一種顏色）；.ghost 是第二個 */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);box-sizing:border-box;margin:0;padding:0 1.3em;
  border:1px solid var(--c-bamboo);border-radius:var(--r-btn);background:var(--c-bamboo);color:var(--c-ink);
  font-family:var(--f-text);font-size:var(--fs-lead);font-weight:var(--fw-strong);line-height:var(--lh-snug);letter-spacing:var(--ls-text);
  cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .08s,background-color .15s}
.btn::after{content:'';position:absolute;inset:-6px}   /* 手指能點的範圍大一圈 */
.btn:hover{background:var(--c-bamboo-hi);border-color:var(--c-bamboo-hi)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--c-text);outline-offset:3px}
.btn:disabled{color:#d9d5c9;background:#3b3a35;border-color:#3b3a35;box-shadow:none;cursor:default;transform:none}
@media (max-width:699px){ html[data-read=easy] .btn{width:100%} }
/* 小的切換：易讀版／一般版、語言 */
.chip{display:inline-flex;align-items:center;border:1px solid rgba(244,241,230,.32);border-radius:var(--r-pill);padding:.15em .85em;
  font-size:var(--fs-caption);line-height:var(--lh-latin);color:var(--c-text);text-decoration:none;background:rgba(244,241,230,.05)}
.chip:hover{background:rgba(244,241,230,.12)}
.lang{display:flex;border:1px solid rgba(244,241,230,.22);border-radius:var(--r-pill);padding:2px}
.lang button{border:0;border-radius:var(--r-pill);padding:.15em .8em;font-size:var(--fs-caption);line-height:var(--lh-latin);color:var(--c-text-3);background:none;cursor:pointer}
.lang button[aria-pressed=true]{background:rgba(244,241,230,.16);color:var(--c-text)}
/* 署名、版權 */
.sign{font-size:var(--fs-caption);line-height:var(--lh-latin);letter-spacing:var(--ls-wide);color:var(--c-text-3)}
.sign>span>span{display:block}
.copy{position:relative;z-index:1;margin:var(--sp-3) 0;font-size:var(--fs-caption);line-height:var(--lh-snug);letter-spacing:var(--ls-wide);color:var(--c-text-3);text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.8)}

/* ---------- 畫面 ---------- */
main{position:relative;height:100dvh;box-sizing:border-box;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.screen{display:none}
main[data-screen=intro] #intro,main[data-screen=result] #result{display:flex}
/* 開始、結果畫面：一張卡片，放得下就垂直置中，放不下從上面開始捲 */
.page{position:relative;z-index:1;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;overflow:auto;padding:var(--sp-4) var(--sp-3) 0}
.page>:first-child{margin-top:auto}.page>:last-child{margin-bottom:auto}
.page>.card{position:relative;width:100%;max-width:var(--card-w);box-sizing:border-box;padding:var(--pad-y) var(--pad-x)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.card-top .tools{display:flex;align-items:center;gap:var(--sp-1)}
.page .title{margin-bottom:var(--sp-4)}
/* 內文：段與段之間、小標之前留白 */
.prose>*+*{margin-top:var(--sp-2)}
.prose>.head{margin-top:var(--sp-4)}.prose>.head:first-child{margin-top:0}
.prose>.steps{margin-top:var(--sp-2)}
#credit{margin-top:var(--sp-3)}#credit:empty{display:none}

/* 開始畫面的按鈕那一排：內容放不下要捲時一直留在下緣（.stuck 時墊一層漸層，play.js 判斷）；署名在同一排右邊 */
#intro .card{padding-bottom:0}
#intro .cta{position:sticky;bottom:0;z-index:2;display:flex;align-items:flex-end;min-height:calc(var(--fs-caption) * var(--lh-latin) * 3);
  margin:var(--sp-4) calc(-1 * var(--pad-x)) 0;padding:var(--sp-2) var(--pad-x) var(--pad-y);border-radius:0 0 var(--r-card) var(--r-card);transition:background-color .2s}
#intro .cta.stuck{background:rgba(10,11,10,.96)}   /* 貼在下緣時：按鈕那一排實心，上面一段淡出，捲過去的字不會從按鈕旁邊透出來 */
#intro .cta.stuck::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:var(--sp-4);background:linear-gradient(rgba(10,11,10,0),rgba(10,11,10,.96));pointer-events:none}
#intro .sign{position:absolute;right:var(--pad-x);bottom:var(--pad-y);text-align:right}
@media (max-width:699px){
  .page{padding:var(--sp-2) var(--sp-2) 0}
  .page>.card{border-radius:var(--r-pane)}
  #intro .cta{min-height:0;padding-bottom:calc(var(--sp-2) + env(safe-area-inset-bottom))}
  #intro .sign{position:static;text-align:left;padding:var(--sp-1) 0 var(--pad-y)}
}

/* 結果：只說這一回苗被吃了幾株、今天一共被吃了幾株（作者 10/26），按「再一次」回到開頭 */
#result .result-main{font-size:var(--fs-head);font-weight:var(--fw-strong);line-height:var(--lh-snug);color:var(--c-text)}
#result .note{margin-top:var(--sp-2)}#result .note:empty{display:none}
#result .actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}

/* ---------- 遊戲 ----------
   背景和開始畫面同一套。直的螢幕由上而下：一行 logo＋遊戲名＋被吃幾株、牧師示範的手、敲的琴鍵、版權；
   橫的螢幕：左欄上面一張卡片（logo、遊戲名、示範者、說明），下面示範影片；右欄琴鍵從頂到底。動物的片段只在牆上的電視放 */
#game{display:none;position:relative;z-index:1}
main[data-screen=game] #game{display:grid;height:100%;box-sizing:border-box;padding:var(--sp-2);gap:var(--sp-2);
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(200px,1fr) auto;grid-template-areas:"hud" "demo" "bars" "copy"}
.pane{position:relative;border-radius:var(--r-pane);overflow:hidden;border:1px solid var(--c-line);background:var(--c-pane);box-shadow:0 18px 50px rgba(0,0,0,.55)}
#hud{grid-area:hud;display:flex;align-items:center;gap:var(--sp-2);min-width:0;padding:0 var(--sp-1);color:var(--c-text);text-shadow:0 1px 3px rgba(0,0,0,.8)}
#hud .tlogo img{height:calc(var(--logo-h) * .8)}
#hud .by{display:none}
.gtitle{font-family:var(--f-title);font-size:var(--fs-lead);line-height:var(--lh-snug);letter-spacing:.01em;white-space:nowrap;margin-right:auto}
#eaten{font-size:var(--fs-small);color:var(--c-text-2);font-variant-numeric:tabular-nums;text-align:right}
#demo{grid-area:demo}
#hand{width:100%;aspect-ratio:16/9;max-height:40dvh;object-fit:cover;display:block;background:#000}
/* 四根琴鍵是牧師那把琴的實拍（手部影片最後一格切出來），排法和影片一樣：上面 A（最低）、下面 D（最高）。
   照影片裡的粗細比例分高度，每根填滿自己那一列、兩頭伸出面板（只看得到中段），一根挨著一根。
   苗沿著那一根滑進判定圈，整根都可以敲。圈在敲的那隻手那一側（預設右邊、苗從左邊來；練習時敲在左半邊就換邊）。
   圖檔在 song.json 的 barImages */
#bars{grid-area:bars;display:flex;flex-direction:column;padding:4px 0 6px;min-height:0;background:#17120c center/cover no-repeat;box-shadow:inset 0 12px 16px -10px rgba(0,0,0,.75),0 18px 50px rgba(0,0,0,.55)}
.bar{flex:1;position:relative;border:0;border-radius:0;padding:0;touch-action:none;background:transparent center/auto 100% no-repeat;filter:drop-shadow(0 3px 3px rgba(0,0,0,.6));transition:filter .06s}
.bar.down{filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) brightness(1.2)}
.bar:focus-visible{outline:none}
#lane{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#check{position:absolute;right:var(--sp-3);bottom:var(--sp-2);font-family:var(--f-mono);font-size:var(--fs-caption);color:var(--c-warn);pointer-events:none}
.gcopy{grid-area:copy;margin:0}
/* 一般版：數拍時琴鍵中間一行提示；練習說明像字幕壓在示範影片下緣 */
#prep{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 2 * var(--sp-3));box-sizing:border-box;text-align:center;padding:var(--sp-1) var(--sp-3);
  border-radius:var(--r-pane);background:rgba(8,9,8,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--c-line);
  color:var(--c-text);font-size:var(--fs-small);line-height:var(--lh-snug);letter-spacing:var(--ls-wide);pointer-events:none}
#prep:empty{display:none}
#practice{grid-area:demo;align-self:end;position:relative;z-index:2;pointer-events:none;text-align:center;padding:var(--sp-4) var(--sp-2) var(--sp-2);border-radius:0 0 var(--r-pane) var(--r-pane);
  background:linear-gradient(rgba(8,9,8,0),rgba(8,9,8,.88) 55%);color:var(--c-text)}
#plabel{font-size:var(--fs-caption);line-height:var(--lh-snug);letter-spacing:var(--ls-wide);color:var(--c-bamboo)}#plabel:empty{display:none}
#ptitle{font-size:var(--fs-body);line-height:var(--lh-snug);text-shadow:0 1px 3px rgba(0,0,0,.7)}
/* 易讀版：說明都在上面的說明卡（#msg），不壓在影片或琴鍵上 */
html[data-read=easy] #hud{align-items:flex-start;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-pane);text-shadow:none}
html[data-read=easy] #hud .gtitle{display:none}
#msg{flex:1;min-width:0;--lines:2;min-height:calc(var(--lines) * var(--lh-snug) * 1em);line-height:var(--lh-snug)}   /* 固定高度：換說明時琴鍵不會跟著跳 */
main[data-l=en] #msg{--lines:3}
#msg .lab{font-weight:var(--fw-strong)}
@media (orientation:landscape) and (min-aspect-ratio:5/4){
  main[data-screen=game] #game{padding:var(--sp-3);gap:var(--sp-3);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;grid-template-areas:"hud bars" "demo bars" "copy copy"}
  #hud,html[data-read=easy] #hud{flex-direction:column;align-items:flex-start;gap:var(--sp-1);min-height:0;overflow:hidden;padding:var(--pad-y) var(--pad-x);text-shadow:none;
    background:var(--c-card);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));border:1px solid rgba(244,241,230,.09);border-radius:var(--r-card);box-shadow:var(--shadow)}
  #hud .tlogo img{height:var(--logo-h)}
  #hud .gtitle,html[data-read=easy] #hud .gtitle{display:block;font-size:var(--fs-title);line-height:var(--lh-tight);margin:var(--sp-2) 0 0}   /* 和開始畫面的遊戲名一樣大、一樣的位置 */
  #hud .by{display:block;font-size:var(--fs-small);color:var(--c-text-3)}
  #eaten{margin-top:auto;text-align:left;font-size:var(--fs-lead)}
  #msg{flex:none;margin-top:auto}
  #hand{max-height:60dvh}
  #practice{grid-area:hud;padding:0 var(--pad-x) var(--pad-y);background:none;text-align:left;border-radius:0}
  #ptitle{font-size:var(--fs-lead)}

  /* 開始、結果畫面和遊戲畫面用同一個格子：卡片在左欄（就是遊戲時說明卡＋示範影片那一欄），右欄留給背景；
     logo、遊戲名的位置和大小跟遊戲時一模一樣，按「戴好耳機了」時不跳（作者 10/26）。卡片放不下就自己捲，按鈕留在卡片下緣 */
  main[data-screen=intro] #intro,main[data-screen=result] #result{display:grid}
  .page{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:var(--sp-3);padding:var(--sp-3);overflow:hidden}
  .page>:first-child,.page>:last-child{margin:0}
  .page>.card{grid-column:1;grid-row:1;max-width:none;min-height:0;overflow:auto;display:flex;flex-direction:column}
  .page>.copy{grid-column:1 / -1;grid-row:2}
  .card-top{margin-bottom:calc(var(--sp-1) + var(--sp-2))}   /* = 遊戲時 logo 和遊戲名之間的距離 */
  #intro .cta{margin-top:auto}   /* 開始畫面的按鈕在卡片下緣；結果頁的按鈕緊接著結果 */
  #intro .cols{margin-bottom:var(--sp-4)}
  #intro .cta{min-height:0;padding-bottom:var(--sp-2)}
  #intro .sign{position:static;text-align:left;padding:var(--sp-1) 0 var(--pad-y)}   /* 卡片會自己捲：署名跟在按鈕下面，不釘在角落 */
}