/**
 * style.css — Memphis / Y2K 視覺系統
 *
 * 三個構成規則，其餘都從這裡長出來：
 *   1. 每個實體元素都是「貼紙」：粗黑描邊 + 實心黑色偏移陰影，圓角 10px。
 *      陰影是實心不透明的方塊，不是模糊光暈——模糊會讓整體立刻變回一般的現代 UI。
 *   2. 顏色只用飽和的粉彩，且一律配純黑文字與描邊。中間調的灰不屬於這套系統。
 *   3. 拉丁字母走 Roboto Flex 的高字重全大寫、行高壓到 0.85；中文沒有大小寫，
 *      靠字重與字級撐出同樣的份量。
 */

/* Roboto Flex：自帶而非走 Google Fonts CDN。這是密碼管理器，能少一個
   每次載入都要連線的第三方就少一個；順帶讓離線安裝後字體照樣正確。
   授權 SIL OFL 1.1，見 fonts/OFL.txt。 */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/RobotoFlex-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/**
 * 作者樣式的 display 會蓋過 UA 的 [hidden]{display:none}（作者來源優先於 UA，
 * 與特異性無關）。像 `dialog label { display: block }` 就讓對話框裡設了 hidden 的
 * 欄位照樣顯示——解鎖時把「確認主密碼」也一起露出來。這條把 hidden 釘死。
 */
[hidden] { display: none !important; }

:root {
  --paper:  #f4f4f4;
  --lilac:  #e9dae6;
  --mint:   #f1f3ed;
  --acid:   #d7dd44;
  --pink:   #eaa0cd;
  --orange: #f09341;
  --blue:   #7ca8d2;
  --green:  #00966e;
  --danger: #ff5c5c;
  --ink:    #000;

  --edge: 3px;
  --pop: 4px;
  --radius: 10px;
  --wrap: 720px;

  --sans: 'Roboto Flex', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei',
          system-ui, -apple-system, sans-serif;
  --mono: 'SF Mono', ui-monospace, 'Roboto Mono', Menlo, Consolas, monospace;
  /* 轉輪隨可用空間縮放。固定 34x52 時，320px 螢幕上一列只放得下 4 個轉輪，
     64 字元的密碼會拉出將近 1000px 高的一片格子。
     slot.js 是在執行時量測實際格高來算位移的，所以改尺寸不需要動 JS。
     這裡是 vw 版的後備值，實際採用的是下面的容器查詢版本。 */
  --reel-w: clamp(24px, 7vw, 34px);
  --reel-h: clamp(36px, 10vw, 52px);
  --reel-font: clamp(.85rem, 2.6vw, 1.25rem);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  /* 底紋是 Markdown 語法符號與密碼字元（見 pattern.svg），不是通用方格紙。
     淡到幾乎看不見，但少了它整個畫面會顯得空。 */
  background-image: url('../pattern.svg');
  background-size: 140px 140px;
}

/* ---------- 貼紙 ---------- */

.sticker {
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
  background: #fff;
}

/* ---------- 頁首 ---------- */

.app-header, .tabs-bar {
  padding: 1.5rem 1.25rem .5rem;
  max-width: var(--wrap);
  margin: 0 auto;
}
.tabs-bar { padding-top: 0; }

.app-header h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.6rem, 12vw, 4.5rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.03em;
  text-transform: uppercase;
  /* 黑色描邊字：用四向 text-shadow 疊出來，比 -webkit-text-stroke 更穩定跨瀏覽器 */
  color: var(--acid);
  text-shadow:
     3px  3px 0 var(--ink), -3px  3px 0 var(--ink),
     3px -3px 0 var(--ink), -3px -3px 0 var(--ink),
     0 3px 0 var(--ink), 0 -3px 0 var(--ink),
     3px 0 0 var(--ink), -3px 0 0 var(--ink),
     6px 6px 0 var(--pink);
}

/* 跑馬燈標語。標語在 HTML 裡只寫兩份，其餘副本由 js/app.js 依視窗寬度補足 */
.marquee {
  overflow: hidden;
  /* clip 而非 hidden：hidden 的盒子仍然可以被程式捲動，瀏覽器的「在頁面中尋找」
     跳到後面某一份副本時就會把軌道捲走，整條變成一片空白的黃底。
     不支援 clip 的瀏覽器會沿用上一行的 hidden。 */
  overflow: clip;
  border-top: var(--edge) solid var(--ink);
  border-bottom: var(--edge) solid var(--ink);
  background: var(--acid);
  margin-bottom: 1.25rem;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 24s linear infinite;
}
.marquee-track > span {
  padding: .3rem 0;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  /* 純裝飾的文字，不該被「全選並複製」整段帶進剪貼簿 */
  user-select: none;
}
/* 分隔點由這裡補，兩側間距對稱。寫進標語文字裡的話，接縫處會變成
   「緊貼上一句、離下一句 3rem」，看起來像句尾標點而不是分隔符 */
.marquee-track > span::after { content: '·'; margin: 0 1.5rem; }
/* 產品名不跟著全大寫：畫面其他地方都寫 Google Drive，只有這裡變成 GOOGLE DRIVE 很突兀 */
.marquee .brand { text-transform: none; }
/* 軌道是兩個相同半段，位移剛好一個半段就無縫接回起點。
   每個半段還必須寬過視窗，否則每一圈的尾巴都會露出空白——份數由 js/app.js 量測後補足 */
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 分頁 ---------- */

.tabs { display: flex; gap: .6rem; }

.tab-btn {
  flex: 1;
  padding: .7rem .5rem;
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
  transition: transform .08s, box-shadow .08s, background .12s;
}
.tab-btn:hover { background: var(--mint); }
.tab-btn.active {
  background: var(--acid);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

main { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem 4rem; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.card {
  background: var(--lilac);
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  /* 面板保留方格紙——它代表的是「文件用紙」。與底層的符號底紋分成兩種紋理，
     疊在一起才不會糊成一片雜訊 */
  background-image:
    repeating-linear-gradient(to right, rgba(0,0,0,.06) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.06) 0 1px, transparent 1px 60px);
}

/* ---------- 拉霸機 ---------- */

.slot {
  background: var(--ink);
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  padding: .75rem;
  margin-bottom: .9rem;
}

/* 轉輪視窗。overflow:hidden 把上下多餘的符號裁掉，只露出一格 */
.reels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  min-height: var(--reel-h);
}

.reel {
  /* content-box 是必要的：轉輪的「視窗」高度必須等於一格的高度，
     否則 border-box 會把 52px 的格子塞進 48px 的內容區，每個字元底部被裁掉 4px。 */
  box-sizing: content-box;
  width: var(--reel-w);
  height: var(--reel-h);
  overflow: hidden;
  background: var(--mint);
  border: 2px solid var(--ink);
  border-radius: 5px;
  position: relative;
}

/* 轉動中的模糊與微微加深，讓「還沒停」一眼看得出來 */
.reel.spinning { background: var(--blue); }

.reel-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.reel-cell {
  height: var(--reel-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: var(--reel-font);
  font-weight: 700;
  line-height: 1;
}

/* 中央的中獎線，跟真的拉霸機一樣橫過所有轉輪 */
.slot-payline {
  height: 3px;
  background: repeating-linear-gradient(to right, var(--acid) 0 10px, transparent 10px 20px);
  margin: .6rem 0 .3rem;
}

.slot-actions { display: flex; gap: .5rem; }

/* ---------- 按鈕 ---------- */

.primary-btn, .secondary-btn, .danger-btn {
  display: block;
  width: 100%;
  padding: .85rem 1rem;
  margin-bottom: .6rem;
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
  transition: transform .08s, box-shadow .08s, filter .12s;
}
.primary-btn { background: var(--acid); }
.secondary-btn { background: #fff; }
.danger-btn { background: var(--danger); }

.primary-btn:hover, .secondary-btn:hover, .danger-btn:hover { filter: brightness(1.06); }

/* 按下去真的往內陷：陰影縮短、本體位移，位移量與陰影差一致才不會抖動 */
.primary-btn:active, .secondary-btn:active, .danger-btn:active {
  transform: translate(var(--pop), var(--pop));
  box-shadow: 0 0 0 var(--ink);
}

.primary-btn:disabled, .secondary-btn:disabled, .danger-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
}

/* 拉霸桿：頁面上最大的那顆按鈕，理應如此 */
.lever-btn {
  font-size: 1.35rem;
  padding: 1.1rem 1rem;
  background: var(--pink);
}

/* 小尺寸文字按鈕。原本這裡放 emoji，改成文字後仍要維持 44px 的觸控高度 */
.mini-btn {
  width: auto;
  min-height: 44px;
  padding: .5rem .9rem;
  margin: 0;
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .08s, box-shadow .08s, background .12s;
}
.mini-btn:hover { background: var(--mint); }
.mini-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

/* ---------- 選項 ---------- */

.options { display: grid; gap: .5rem; margin-bottom: 1.1rem; }

.options label {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .7rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.options input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--green); }
.options label:has(input:checked) { background: var(--acid); }

.range-row { display: flex; align-items: center; gap: .7rem; }
.range-row input[type="range"] { flex: 1; accent-color: var(--pink); }
#length-value {
  display: inline-block;
  min-width: 2.4em;
  padding: .1rem .4rem;
  background: var(--ink);
  color: var(--acid);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ---------- 強度計 ---------- */

/* 分段方塊而不是平滑長條：這套視覺裡沒有漸層，只有明確的格子 */
.strength-meter {
  display: flex;
  gap: 5px;
  margin: .2rem 0 .4rem;
}
.strength-seg {
  flex: 1;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fff;
}
.strength-meter[data-level="1"] .strength-seg:nth-child(-n+1),
.strength-meter[data-level="2"] .strength-seg:nth-child(-n+2),
.strength-meter[data-level="3"] .strength-seg:nth-child(-n+3),
.strength-meter[data-level="4"] .strength-seg:nth-child(-n+4) { background: var(--fill, var(--acid)); }
.strength-meter[data-level="1"] { --fill: var(--danger); }
.strength-meter[data-level="2"] { --fill: var(--orange); }
.strength-meter[data-level="3"] { --fill: var(--acid); }
.strength-meter[data-level="4"] { --fill: var(--green); }

.strength-text {
  font-size: .85rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

/* ---------- 文字 ---------- */

h2 {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 .75rem;
}

.hint { font-size: .9rem; line-height: 1.6; margin: 0 0 1rem; }
.hint code { background: var(--acid); padding: .1rem .3rem; border-radius: 3px; font-family: var(--mono); }

.error {
  color: #a1000a;
  background: var(--danger);
  font-size: .88rem;
  font-weight: 600;
  margin: .6rem 0 0;
  padding: 0;
  border-radius: 6px;
  min-height: 0;
}
.error:not(:empty) { padding: .5rem .7rem; border: 2px solid var(--ink); }

.warning {
  background: var(--orange);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: .7rem .85rem;
  margin: .25rem 0 0;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.6;
}

/* ---------- 保險庫 ---------- */

.vault-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  background: var(--mint);
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
  padding: .75rem;
  margin-bottom: 1.25rem;
}
.vault-toolbar .primary-btn,
.vault-toolbar .secondary-btn,
.vault-toolbar .danger-btn {
  width: auto;
  margin: 0;
  padding: .5rem .8rem;
  font-size: .8rem;
  box-shadow: 3px 3px 0 var(--ink);
}
.vault-toolbar .primary-btn:active,
.vault-toolbar .secondary-btn:active,
.vault-toolbar .danger-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

.doc-name {
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 700;
  background: var(--pink);
  border: 2px solid var(--ink);
  border-radius: 5px;
  padding: .3rem .55rem;
}

.doc-view {
  background: #fff;
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
  padding: 1.25rem;
  overflow-wrap: anywhere;
}

.doc-view h1 { font-size: 1.7rem; font-weight: 800; text-transform: uppercase; line-height: .95; margin: .3rem 0 .9rem; }
.doc-view h2 {
  font-size: 1.15rem;
  margin: 1.5rem 0 .5rem;
  padding-bottom: .3rem;
  border-bottom: var(--edge) solid var(--ink);
}
.doc-view h3, .doc-view h4, .doc-view h5, .doc-view h6 { font-size: 1rem; font-weight: 700; margin: 1.2rem 0 .4rem; }
.doc-view p { margin: .4rem 0; }
.doc-view ul, .doc-view ol { margin: .4rem 0; padding-left: 1.3rem; }
.doc-view li { margin: .2rem 0; }
.doc-view blockquote {
  margin: .8rem 0;
  padding: .6rem .9rem;
  background: var(--lilac);
  border: 2px solid var(--ink);
  border-radius: 6px;
}
.doc-view hr { border: none; border-top: var(--edge) solid var(--ink); margin: 1.4rem 0; }
.doc-view a { color: var(--ink); text-decoration-thickness: 2px; }

.doc-view code {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--acid);
  border: 2px solid var(--ink);
  border-radius: 5px;
  padding: .1rem .35rem;
}
/* 點擊複製只發生在保險庫那份文件裡，所以手指游標也只給它。
   privacy.html 共用 .doc-view 的排版，但那裡的 code 點了不會有事，
   給 pointer 等於在騙人 */
#doc-view code { cursor: pointer; }
#doc-view code:hover { background: var(--pink); }
.doc-view pre {
  background: var(--mint);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: .8rem;
  overflow-x: auto;
}
.doc-view pre code { background: none; border: none; padding: 0; cursor: auto; }

/* 密碼遮蔽：模糊而非換成圓點，滑鼠移上去仍看不清，點了才複製 */
.doc-view.mask-pw p code, .doc-view.mask-pw li code {
  filter: blur(5px);
  user-select: none;
}
.doc-view.mask-pw p code:hover, .doc-view.mask-pw li code:hover { filter: blur(3px); }

/* 表格。內建的 Markdown 渲染器不產生表格，這條是給手寫的靜態頁用的（privacy.html） */
.doc-view table {
  width: 100%;
  border-collapse: collapse;
  margin: .8rem 0;
  font-size: .9rem;
}
.doc-view th, .doc-view td {
  border: 2px solid var(--ink);
  padding: .5rem .6rem;
  text-align: left;
  vertical-align: top;
}
.doc-view th { background: var(--acid); font-weight: 700; }

#doc-editor { margin-top: 1rem; }
#doc-textarea {
  width: 100%;
  min-height: 55vh;
  padding: 1rem;
  background: #fff;
  color: var(--ink);
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
  font-family: var(--mono);
  font-size: .9rem;
  line-height: 1.6;
  resize: vertical;
}
#doc-textarea:focus { outline: 3px solid var(--pink); outline-offset: 2px; }
.editor-actions { display: flex; gap: .6rem; margin-top: 1rem; }
.editor-actions button { flex: 1; margin: 0; }

/* ---------- 對話框 ---------- */

dialog {
  width: min(92vw, 30rem);
  padding: 1.5rem;
  background: var(--paper);
  color: var(--ink);
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--ink);
}
dialog::backdrop { background: rgba(234, 160, 205, .55); }
dialog h2 { margin-top: 0; }
dialog label { display: block; margin-bottom: .9rem; font-size: .85rem; font-weight: 700; text-transform: uppercase; }
dialog input, dialog textarea {
  width: 100%;
  margin-top: .3rem;
  padding: .65rem .75rem;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
}
dialog input:focus, dialog textarea:focus { outline: 3px solid var(--pink); outline-offset: 1px; }

.pw-field { display: flex; align-items: center; gap: .4rem; }
.pw-field input { flex: 1; }

.dialog-actions { display: flex; gap: .6rem; margin-top: 1.25rem; }
.dialog-actions button { flex: 1; margin: 0; }

.picker-list { list-style: none; padding: 0; margin: 1rem 0; }
.picker-list li { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.picker-list .secondary-btn { width: auto; flex: 1; margin: 0; }
.picker-meta { font-size: .78rem; font-weight: 600; }

#conflict-dialog { width: min(94vw, 64rem); }
.conflict-panes { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .conflict-panes { grid-template-columns: 1fr 1fr; } }
.conflict-panes h3 { font-size: .85rem; text-transform: uppercase; margin: 0 0 .4rem; }
.conflict-panes pre {
  max-height: 45vh;
  overflow: auto;
  margin: 0;
  padding: .8rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: .8rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.conflict-actions { flex-wrap: wrap; }
.conflict-actions button { flex: 1 1 10rem; }

#master-dialog { width: min(92vw, 27rem); }
#master-strength-row { margin: -.5rem 0 .9rem; }
#master-strength-row .strength-text { margin: .35rem 0 0; }

/* 頁尾。只有一條連結，但 Play 與 OAuth 同意畫面都要求隱私權政策找得到 */
.app-footer {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25rem 2.5rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.app-footer a { color: var(--ink); text-decoration-thickness: 2px; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(1rem);
  padding: .7rem 1.2rem;
  background: var(--acid);
  color: var(--ink);
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
  font-weight: 700;
  font-size: .9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Memphis 貼紙裝飾 ---------- */

.decor {
  position: fixed;
  pointer-events: none;
  z-index: -1;
}
.decor svg { display: block; }
/* 位置要避開跑馬燈：貼紙半掩在它後面會像是排版出錯，而不是刻意的裝飾 */
.decor-1 { top: 32vh; left: 2vw; width: 90px; }
.decor-2 { top: 62vh; right: 2vw; width: 78px; }
.decor-3 { bottom: 8vh; left: 4vw; width: 70px; }
@media (max-width: 60rem) { .decor { display: none; } }

/* ---------- 無障礙 ---------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/**
 * 使用者要求減少動態時，關掉轉輪與跑馬燈。
 * 拉霸動畫純粹是裝飾——密碼在動畫開始前就已經產生完畢，
 * 所以直接跳到定位不會少掉任何東西。
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* 軌道靜止，就只看得到第一份。維持不換行的話，窄螢幕會把標語從中間切掉
     而且永遠不會捲進來，所以改成單獨一份、可換行、置中。 */
  .marquee-track { animation: none; width: 100%; }
  .marquee-track > span { flex: 1; white-space: normal; text-align: center; padding: .3rem .75rem; }
  .marquee-track > span:not(:first-child) { display: none; }
  .marquee-track > span::after { content: none; }
}


/* ---------- 響應式 ---------- */

/**
 * 轉輪要跟著「機台的寬度」縮放，不是跟著視窗。
 * 用 vw 會在雙欄版面出錯：欄寬被砍半，轉輪卻仍照整個視窗寬計算，
 * 結果 768px 的每列轉輪數反而比 360px 還少。改用容器查詢就沒有這個問題。
 * 不支援 cqw 的瀏覽器會整條宣告失效，自動落回 :root 的 vw 版本。
 */
@supports (container-type: inline-size) {
  .slot { container-type: inline-size; }
  .reels {
    --reel-w: clamp(24px, 8cqw, 34px);
    --reel-h: clamp(36px, 12cqw, 52px);
    --reel-font: clamp(.85rem, 3.2cqw, 1.25rem);
  }
}

/**
 * 只有兩個真正的斷點：
 *   48rem — 拉霸機與控制項並排（此時單欄已經高得需要捲動才看得完）
 *   72rem — 放寬容器，讓保險庫的文件有足夠行寬
 * 其餘尺寸靠 clamp() 與 flex-wrap 自行連續調整，不再切更多斷點。
 */

@media (min-width: 48rem) {
  :root { --wrap: 960px; }

  /* 左邊機台、右邊控制。minmax(0,…) 是必要的：格線項目預設 min-width:auto，
     轉輪那一欄會被內容撐開而擠爆版面 */
  .gen-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }
  /* 兩欄高度不一致是必然的（機台高度隨密碼長度變）。讓較矮的機台在欄內
     垂直置中，剩餘空間就平均分到上下，看起來是刻意的留白而不是漏排版。 */
  .gen-display { align-self: center; }
  .gen-controls { display: flex; flex-direction: column; }
  .gen-controls .options { flex: 1; }

  .app-header { display: flex; align-items: flex-end; gap: 1.5rem; }
  .app-header h1 { margin-bottom: 0; }
}

@media (min-width: 72rem) {
  :root { --wrap: 1120px; }
  .gen-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem; }
}

/* 極窄螢幕：把各層 padding 收一點，換給轉輪更多寬度 */
@media (max-width: 22.5rem) {
  main, .app-header, .tabs-bar, .app-footer { padding-left: .75rem; padding-right: .75rem; }
  .card { padding: .9rem; }
  .slot { padding: .5rem; }
}

/* 橫向手機：畫面很矮，別讓編輯區佔滿整個高度 */
@media (max-height: 30rem) and (orientation: landscape) {
  #doc-textarea { min-height: 40vh; }
}