/* 共用元件樣式 — 只能用 tokens.css 的 var(--xxx),不可寫死顏色/陰影/圓角數值 */
@import url('tokens.css');

/* ---- 全域重置(比對 prototype <style> 區塊) ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-page);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--red-primary); text-decoration: none; }
a:hover { color: var(--red-primary-hover); }
::-webkit-scrollbar { width: 0; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ---- App 外殼(RWD:手機全屏 / 桌機手機框,T-047) ----
   手機(窄螢幕)= 滿版全屏,不畫假邊框,用 100dvh 避開 iOS 網址列吃高度;
   桌機(≥480px)= 置中畫黑色手機框當展示殼。
   高度單位一律「先 vh 後 dvh」漸進增強:不支援 dvh 的舊瀏覽器退回 vh。 */
.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
/* 手機預設:全屏,無邊框、無圓角、無陰影 */
.app-frame {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #000;
  overflow: hidden;
}
.app-screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(180deg, var(--bg-app-top) 0%, var(--bg-app-mid) 40%, var(--bg-app-bottom) 100%);
  /* 避開瀏海與底部 home bar / 手勢區(viewport-fit=cover 才生效) */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  /* T-075:改成 flex 直欄,讓「導覽列以下的剩餘高度」對頁面可見。
     在此之前頁面要撐滿一屏只能寫 height:100%,但那是對 .app-screen 算的 —— 沒扣掉
     sticky 導覽列的 62px,結果是每頁都固定溢出一個導覽列的高度。改成 flex 之後
     .screen 靠 flex:1 0 auto 拿到「剩下多少就是多少」,頁面內部才排得出貼底的 CTA。 */
  display: flex;
  flex-direction: column;
}

/* 桌機(≥480px):恢復手機框展示殼 */
@media (min-width: 480px) {
  .app-frame {
    width: min(100vw, 412px);
    height: min(100vh, 880px);
    border-radius: 46px;
    box-shadow: var(--shadow-phone);
    border: 2px solid #2a2a2a;
  }
  .app-screen {
    inset: 5px;
    border-radius: 42px;
    /* 桌機框內不需要 safe-area 內距 */
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* 畫面容器(T-075)。刻意只設 flex 相關屬性、**不設 display** ——
   app.js 靠 inline style 切換 display 做路由,見 LESSONS_LEARNED T-011 條目。

   `flex: 1 0 0`(basis 0 + grow)不是 `1 0 auto`:basis 取 0 才能讓畫面高度變成
   **確定值**(= 導覽列以下的剩餘高度),頁面內部的 height:100% / max-height:100% 才解析得出來。
   basis auto 會先去量內容高,內容又反過來依賴容器高,循環之下瀏覽器只好當成 auto,
   結果就是「頁面照長、該收斂的圖不收斂」。
   min-height:0 也不能少:flex item 的預設 min-height:auto 是「內容有多高就至少多高」,
   不歸零的話畫面高度會被內容頂回去,又變成不確定值。
   內容真的比一屏高的頁面(08/09)照樣往外溢,.app-screen 的 overflow-y:auto 會接住去捲。 */
.screen {
  flex: 1 0 0;
  min-height: 0;
}

/* ---- 頂部導覽(除 Landing 外每頁使用) ---- */
.top-nav[hidden] { display: none; } /* author 的 display:flex 優先權高於瀏覽器對 [hidden] 的預設值,要顯式蓋回去 */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  flex: none; /* T-075:.app-screen 改 flex 直欄後,導覽列不可被壓縮 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
  background: linear-gradient(180deg, rgba(255, 198, 26, .96) 60%, rgba(255, 198, 26, 0));
}
.top-nav__back {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 2.5px solid var(--ink);
  background: #fff;
  box-shadow: var(--shadow-hard-btn-sm);
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.top-nav__dots { display: flex; gap: 6px; }
.top-nav__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: #fff;
}
.top-nav__dot--done { background: var(--red-divider); }
.top-nav__spacer { width: 40px; }

/* ---- 按鈕 ----
   共用不變的視覺(邊框/圓角/陰影/字重);寬度、padding、字級每頁差異大,
   用 CSS 變數當可覆寫的插槽,預設值取 prototype 中最常見的數值。
   頁面覆寫範例:<button class="btn" style="--btn-width:78%;--btn-font-size:21px;--btn-padding:16px 0">
*/
.btn {
  display: block;
  width: var(--btn-width, 82%);
  padding: var(--btn-padding, 15px 0);
  margin: 0 auto;
  border-radius: var(--radius-pill);
  border: 3px solid var(--ink);
  background: var(--red-primary);
  color: #fff;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: var(--btn-font-size, 20px);
  box-shadow: var(--shadow-hard-btn);
  cursor: pointer;
  text-align: center;
}
.btn--secondary {
  background: #fff;
  color: var(--ink);
  border-width: 2.5px;
  box-shadow: var(--shadow-hard-btn-sm);
}
.btn--success { background: var(--green-success); }

/* ---- 卡片 ---- */
.card {
  background: var(--bg-card);
  border-radius: var(--card-radius, var(--radius-card));
  box-shadow: var(--card-shadow, var(--shadow-soft-card));
}
.card--accent {
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-hard-card);
}

/* ---- 標題分隔線 ---- */
.divider {
  width: var(--divider-width, 60px);
  height: 5px;
  background: var(--red-divider);
  border-radius: 3px;
  margin: 14px auto 0;
}

/* ---- 素材佔位框(素材未到時一律用這個) ---- */
.placeholder {
  border: 2px dashed var(--placeholder-border);
  border-radius: var(--placeholder-radius, 18px);
  background: repeating-linear-gradient(45deg, #fff, #fff 9px, var(--placeholder-stripe) 9px, var(--placeholder-stripe) 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 12px ui-monospace, monospace;
  color: var(--placeholder-text);
  text-align: center;
  padding: 10px;
}
.placeholder--dark {
  border-color: var(--placeholder-border-dark);
  background: repeating-linear-gradient(45deg, var(--placeholder-bg-dark), var(--placeholder-bg-dark) 10px, var(--placeholder-stripe-dark) 10px, var(--placeholder-stripe-dark) 20px);
  color: var(--placeholder-text-dark);
}

/* ---- 狀態徽章(如「已完成 ✓」) ---- */
.badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 2px 10px;
}
.badge--success { background: var(--green-success); }

/* ---- pop 視窗(T-052:P5 / P7 過關共用)---- */
/* 掛在 .app-frame 底下(不捲動),不是 #app-screen —— 後者 overflow-y:auto,彈窗會跟著內容捲走 */
.modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--modal-backdrop);
}
.modal__card {
  width: 100%;
  max-width: 320px;
  padding: 26px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: modal-in .22s ease-out;
}
.modal__title {
  margin: 0;
  font-size: clamp(20px, 5.5vw, 24px);
  font-weight: 900;
  color: var(--green-success);
  line-height: 1.35;
}
.modal__text {
  margin: 0;
  font-size: clamp(14px, 3.8vw, 16px);
  color: var(--ink-soft);
  line-height: 1.6;
}
.modal__btn { --btn-width: 100%; --btn-font-size: 19px; }
/* open() 會把焦點移到按鈕(給讀螢幕與鍵盤使用者),但瀏覽器預設的藍色 focus 圈
   跟本專案的硬邊框語言不搭;改成用 --ink 的粗外框,鍵盤操作時才顯示 */
.modal__btn:focus { outline: none; }
.modal__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@keyframes modal-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .modal__card { animation: none; }
}