/* 螢幕鎖（第二版玩法規格 5.3）：畫成手機鎖定畫面，蓋在 #phone 最上層。沿用 app.css 的色彩變數。 */

.lock {
  position: absolute; inset: 0; z-index: 60; overflow-x: hidden; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px;
  padding: 18px 16px calc(12px + env(safe-area-inset-bottom));
  color: #fff; font-family: var(--sans); text-align: center;
  background: var(--ink);
  background: radial-gradient(130% 70% at 50% 0%, color-mix(in srgb, var(--calm) 38%, var(--ink)) 0%, var(--ink) 62%);
  /* 裡面的大小跟著鎖定畫面本身的高度縮放：桌機的手機外框、矮的手機（約 540px）都不用捲動 */
  container-type: size;
  --key: 60px;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1), opacity .45s ease;
}
@supports (height: 1cqh) {
  .lock { --key: clamp(40px, 8cqh, 72px); }
}
.lock.open { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.lock p { margin: 0; }

/* ---------- 時鐘、日期 ---------- */
.lock-top { display: flex; flex-direction: column; align-items: center; padding-top: 8px; }
.lock-icon { font-size: 15px; opacity: .8; margin-bottom: 2px !important; }
.lock-clock { font-size: 64px; font-size: clamp(44px, 10.5cqh, 88px); font-weight: 400; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lock-date { font-size: 15px; line-height: 1.4; opacity: .85; margin-top: 4px !important; }

/* ---------- 通知預覽 ---------- */
.lock-note {
  width: 100%; max-width: 340px; display: flex; gap: 10px; align-items: center; text-align: left;
  background: rgba(255, 255, 255, .16); border-radius: 16px; padding: 8px 12px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lock-app { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 17px; background: var(--accent); }
.lock-note-body { min-width: 0; flex: 1; }
.lock-note-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 1.35; }
.lock-note-head small { opacity: .7; font-size: 12px; }
.lock-note-text { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }

/* ---------- 輸入密碼 ---------- */
.lock-entry { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.lock-label { font-size: 15px; line-height: 1.4; }
.lock-field { position: relative; padding: 6px 14px; border-radius: 999px; }
/* 真的輸入框疊在圓點上、看不見：點圓點會叫出系統鍵盤，桌機的實體鍵盤也能打 */
.lock-input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  opacity: 0; font-size: 16px; color: transparent; background: transparent; caret-color: transparent; cursor: pointer;
}
.lock-field:focus-within { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.lock-dots { display: flex; gap: 16px; }
.lock-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .85); transition: background .15s; }
.lock-dots i.on { background: #fff; }
.lock-dots.shake { animation: lock-shake .4s ease; }
@keyframes lock-shake {
  20% { transform: translateX(-10px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}
.lock.busy .lock-dots i.on { animation: lock-wait 1s ease infinite; }
@keyframes lock-wait { 50% { opacity: .4; } }
.lock-msg { min-height: 1.5em; font-size: 14px; line-height: 1.5; color: var(--warm); max-width: 300px; }

/* ---------- 數字鍵盤 ---------- */
.lock-pad { display: grid; grid-template-columns: repeat(3, var(--key)); gap: 8px 22px; gap: clamp(4px, 1.2cqh, 14px) 22px; justify-content: center; }
.lock-pad button {
  width: var(--key); height: var(--key); border-radius: 50%; border: 0; padding: 0;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: calc(var(--key) * .42); font-weight: 400; line-height: 1;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background .12s;
}
.lock-pad button:active { background: rgba(255, 255, 255, .34); }
.lock-pad button[data-k="del"] { background: transparent; font-size: calc(var(--key) * .36); }
.lock-pad button[data-k="del"]:active { background: rgba(255, 255, 255, .14); }
.lock.busy .lock-pad { opacity: .5; pointer-events: none; }

/* ---------- 下方一行小字 ---------- */
.lock-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; font-size: 13px; line-height: 1.5; opacity: .8; }
.lock-foot a { color: var(--lit); }

/* 很矮的畫面：拿掉鎖頭圖示 */
@container (max-height: 600px) {
  .lock-icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lock, .lock-dots i, .lock-pad button { transition: none; }
  .lock-dots.shake, .lock.busy .lock-dots i.on { animation: none; }
}