/* 領袖榜・手機報名。設計稿 390×690；背景 bg.jpg 是機台背景縮成 1080×1920（和機台同一張底圖，比例 390×693）。
   --u ＝ 背景圖 cover 後每個設計單位的實際像素，--vh ＝ 開頁時的視窗高度（js/app.js 只在寬度改變、也就是轉向時重算）。
   內容依設計稿的 y 座標從頂端排下來、水平置中，和背景對齊。
   背景是固定大小的 .bg 圖層，頁面高度也固定：手機鍵盤彈出／收起時視窗高度會變，
   如果背景跟著視窗 cover 縮放，鍵盤收起時畫面就會跳一下，所以都不跟著視窗高度變。 */
@font-face { font-family: 'GenRyuMin'; font-weight: 700; font-display: swap; src: url('../assets/fonts/GenRyuMin-B-subset.woff2?v=25512c34') format('woff2'); }
@font-face { font-family: 'GenRyuMin'; font-weight: 900; font-display: swap; src: url('../assets/fonts/GenRyuMin-H-subset.woff2?v=b2bcdd0d') format('woff2'); }
:root { --u: 1px; --gold: #f3d27c; --serif: 'GenRyuMin', 'Noto Serif TC', 'Songti TC', serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: #0b1520; }
body { color: #fff; font-family: var(--serif); font-weight: 700; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
.page { position: relative; height: var(--vh, 100vh); overflow: hidden; }
.page > .bg { top: 0; width: calc(390 * var(--u)); height: calc(693.33 * var(--u)); transform: translateX(-50%); background: url('../assets/bg.jpg?v=a5f7ff9a') center / 100% 100% no-repeat; pointer-events: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.page > *, .view > * { position: absolute; left: 50%; transform: translate(-50%, -50%); margin: 0; text-align: center; white-space: nowrap; }
.view { position: static; transform: none; display: none; }
body[data-view="form"] #v-form, body[data-view="msg"] #v-msg, body[data-view="scan"] #v-scan { display: block; }
.glow, .kicker, .title, .msg, .foot, .score { text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }

.logo { top: calc(70 * var(--u)); width: calc(68 * var(--u)); }
.kicker { top: calc(200 * var(--u)); font-size: calc(19 * var(--u)); letter-spacing: .22em; text-indent: .22em; }
.title {
  top: calc(250 * var(--u)); font-weight: 900; font-size: calc(48 * var(--u)); line-height: 1; letter-spacing: .14em; text-indent: .14em;
  background: linear-gradient(180deg, #fff 35%, #efc3cc 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .75)); text-shadow: none;
}

.field { top: calc(318 * var(--u)); display: block; width: calc(228 * var(--u)); height: calc(40 * var(--u)); background: url('../assets/input-frame.png?v=93f8680e') center / 100% 100% no-repeat; border-radius: calc(6 * var(--u)); }
.field input {
  width: 100%; height: 100%; padding: 0 calc(14 * var(--u)); border: 0; outline: 0; background: transparent; color: #fff;
  font: 500 16px/1 system-ui, -apple-system, 'PingFang TC', 'Noto Sans TC', sans-serif; letter-spacing: .08em;   /* 16px 以上 iOS 才不會自動放大 */
}
.field input::placeholder { color: rgba(255, 255, 255, .55); font-family: var(--serif); font-weight: 700; letter-spacing: .14em; }
.field:focus-within { box-shadow: 0 0 0 1px rgba(243, 210, 124, .8), 0 0 14px rgba(243, 210, 124, .35); }
.hint { top: calc(350 * var(--u)); font-size: calc(12 * var(--u)); color: #ffb3ba; font-family: system-ui, sans-serif; font-weight: 500; letter-spacing: .06em; }
.img-btn { top: calc(386 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.img-btn img { width: calc(166 * var(--u)); }
.img-btn:active { filter: brightness(1.2); }
.img-btn:disabled { opacity: .5; }
.divider { top: calc(436 * var(--u)); width: calc(176 * var(--u)); }
.foot { top: calc(473 * var(--u)); font-size: calc(13 * var(--u)); letter-spacing: .16em; text-indent: .16em; }

.msg { font-size: calc(19 * var(--u)); letter-spacing: .2em; text-indent: .2em; }
#msg-1, #scan-1 { top: calc(330 * var(--u)); }
#msg-2, #scan-2 { top: calc(368 * var(--u)); }
.score { top: calc(400 * var(--u)); font-size: calc(15 * var(--u)); letter-spacing: .1em; color: var(--gold); }
body.has-score #msg-1 { top: calc(312 * var(--u)); }
body.has-score #msg-2 { top: calc(348 * var(--u)); font-size: calc(30 * var(--u)); letter-spacing: .06em; text-indent: .06em; color: #fff; }
.gold-btn {
  top: calc(530 * var(--u)); width: calc(166 * var(--u)); height: calc(30 * var(--u)); padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, #f6d36e 0%, #8a7a52 50%, #f6d36e 100%); box-shadow: 0 0 0 1px rgba(255, 230, 160, .7) inset, 0 2px 10px rgba(0, 0, 0, .5);
  color: #fff6dc; font: 700 calc(15 * var(--u)) var(--serif); letter-spacing: .3em; text-indent: .3em; text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.gold-btn:active { filter: brightness(1.15); }
.dots::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.dev-badge { position: fixed; left: 8px; bottom: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #9fd3ff; font: 500 12px system-ui, sans-serif; }