/* 版面以原始截圖 602 x 1207（內容區 1130 + 分頁列 77）為基準；
   --u = 1 個設計像素，依螢幕寬或可用高取較小者縮放，垂直位置依內容區高度比例分配 */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --u: min(calc(100vw / 602), calc((100vh - var(--sat) - var(--sab)) / 1207));
  --fg: #ebebeb;
  --blue: #3a82f7;
  --gray: #757575;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue",
          Roboto, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
@supports (height: 100dvh) {
  :root { --u: min(calc(100vw / 602), calc((100dvh - var(--sat) - var(--sab)) / 1207)); }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: #000; color: var(--fg); overflow: hidden;
  font-family: var(--font); font-weight: 400;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  overscroll-behavior: none; touch-action: manipulation;
}
body { position: fixed; inset: 0; }
img, svg { -webkit-user-drag: none; }

#main {
  position: absolute; left: 0; right: 0;
  top: var(--sat);
  bottom: calc(var(--sab) + var(--u) * 77);
}
#main > * { position: absolute; left: 50%; transform: translate(-50%, -50%); }

.logo { top: calc(152 / 1130 * 100%); width: calc(var(--u) * 449); height: calc(var(--u) * 184); }
.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.txt { white-space: nowrap; line-height: 1; text-align: center; font-variant-numeric: proportional-nums; }
.title { top: calc(333.5 / 1130 * 100%); font-size: calc(var(--u) * 67); }
.num   { top: calc(456 / 1130 * 100%);   font-size: calc(var(--u) * 63); }
.date  { top: calc(549 / 1130 * 100%);   font-size: calc(var(--u) * 81); }
.time  { top: calc(654.5 / 1130 * 100%); font-size: calc(var(--u) * 102); }
/* 數字的視覺中心略高於行框中心，微調 */
.num, .date, .time { margin-top: calc(var(--u) * 2); }

.cam {
  top: calc(933 / 1130 * 100%);
  margin-left: calc(var(--u) * -0.8);
  width: calc(var(--u) * 376.2); height: calc(var(--u) * 361.8);
  cursor: pointer; overflow: visible;
}
.cam .ban { display: none; }
.cam.locked .ban { display: inline; }

.spinner {
  top: calc(681 / 1130 * 100%);
  width: calc(var(--u) * 320); height: calc(var(--u) * 320);
  pointer-events: none; display: none; overflow: visible;
}
.spinner.on { display: block; }
.spinner.on #spokes { animation: spin 1s steps(12) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.ver {
  left: auto !important; right: calc(var(--u) * 26); transform: translateY(-50%) !important;
  top: calc(1112.5 / 1130 * 100%);
  font-size: calc(var(--u) * 24.5); color: #fafafa; white-space: nowrap; line-height: 1;
  padding: calc(var(--u) * 14) 0 calc(var(--u) * 14) calc(var(--u) * 30); /* 擴大點擊範圍 */
  margin-right: 0;
}

.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--u) * 77 + var(--sab));
  padding-bottom: var(--sab);
  display: flex; background: #000; pointer-events: none;
}
.tab { flex: 1; position: relative; color: var(--gray); }
.tab.active { color: var(--blue); }
.tab svg {
  position: absolute; left: 50%; top: calc(var(--u) * 3);
  width: calc(var(--u) * 40); height: calc(var(--u) * 40); transform: translateX(-50%);
}
.tab span {
  position: absolute; left: 0; right: 0; top: calc(var(--u) * 54); transform: translateY(-50%);
  text-align: center; font-size: calc(var(--u) * 14); line-height: 1; font-weight: 500; white-space: nowrap;
}

/* 「更多功能」需接收長按（登出），但外觀無任何反應 */
#tabMore { pointer-events: auto; -webkit-touch-callout: none; }

/* 登入畫面 */
.login { display: none; }
.need-login .login {
  display: flex; flex-direction: column; align-items: center;
  position: fixed; inset: 0; z-index: 20; background: #000;
  padding: calc(var(--sat) + var(--u) * 250) 24px 24px;
}
.need-login #main, .need-login .tabbar { visibility: hidden; }
.l-title { margin-top: 0; font-size: calc(var(--u) * 60); line-height: 1; color: var(--fg); }
.l-sub { margin-top: calc(var(--u) * 18); font-size: calc(var(--u) * 28); color: #9a9a9a; }
.login input {
  margin-top: calc(var(--u) * 70); width: calc(var(--u) * 449); max-width: 100%;
  font-size: max(16px, calc(var(--u) * 34)); padding: calc(var(--u) * 20) calc(var(--u) * 24);
  border-radius: 12px; border: 1px solid #3a3a3c; background: #1c1c1e; color: #fff;
  text-align: center; letter-spacing: .25em; outline: none; font-family: var(--font);
  -webkit-user-select: text; user-select: text;
}
.login input:focus { border-color: var(--blue); }
.login input::placeholder { color: #6e6e73; letter-spacing: 0; }
.l-hint {
  margin-top: calc(var(--u) * 18); min-height: 1.4em; text-align: center;
  font-size: max(13px, calc(var(--u) * 24)); color: #9a9a9a;
}
.l-hint.err { color: #ff453a; }
.login.shake input { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.login button {
  margin-top: calc(var(--u) * 40); width: calc(var(--u) * 449); max-width: 100%;
  font-size: max(17px, calc(var(--u) * 34)); padding: calc(var(--u) * 20);
  border: 0; border-radius: 12px; background: var(--blue); color: #fff; font-family: var(--font);
}
.login button:active { opacity: .8; }

/* 彈窗（iOS 風格） */
.modal {
  position: fixed; inset: 0; z-index: 10; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  -webkit-user-select: auto; user-select: auto;
}
.modal[hidden] { display: none; }
.sheet {
  width: min(78vw, 300px); background: rgba(44,44,46,.97); border-radius: 14px;
  padding: 18px 16px 0; text-align: center; color: #fff; overflow: hidden;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.m-title { font-size: 17px; font-weight: 600; }
.m-msg { font-size: 13px; color: #c7c7cc; margin: 6px 0 12px; line-height: 1.35; }
.sheet input {
  width: 100%; font-size: 18px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid #48484a; background: #1c1c1e; color: #fff; text-align: center;
  font-family: var(--font); -webkit-user-select: text; user-select: text; outline: none;
}
.m-err { min-height: 18px; font-size: 12px; color: #ff6961; margin-top: 6px; }
.m-btns { display: flex; margin: 8px -16px 0; border-top: 1px solid #48484a; }
.m-btns button {
  flex: 1; background: none; border: 0; color: #0a84ff; font-size: 17px; padding: 12px 4px;
  font-family: var(--font);
}
.m-btns button + button { border-left: 1px solid #48484a; }
.m-btns button.primary { font-weight: 600; }
.m-btns button.warn { color: #ff9f0a; }