/* earlybird — 苔綠慢活自然系（依 DESIGN.md，顏色一律 token，禁止硬編 hex） */

:root {
  --font-display: 淚體, "Noto Sans TC", system-ui, -apple-system, sans-serif;
  --font-body: 金萱, "Noto Sans TC", system-ui, -apple-system, sans-serif;
  --font-ui: "jf open 粉圓", "Noto Sans TC", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  font-synthesis: none;
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  /* 全頁淡漸層：canvas ↔ surface 的柔長過渡（grain 疊在最上層防 banding） */
  background:
    linear-gradient(
      180deg,
      var(--color-canvas) 0%,
      color-mix(in srgb, var(--color-canvas) 70%, var(--color-surface-1)) 45%,
      var(--color-canvas) 100%
    )
    var(--color-canvas);
  min-height: 100vh;
  overflow-x: clip;
}

::selection {
  background: color-mix(in srgb, var(--color-primary) 24%, transparent);
}

.hidden { display: none !important; }

.view { min-height: 100vh; }

button {
  font-family: var(--font-ui);
  font-synthesis: none;
}

/* ---------- 模糊光斑（樹影、晨霧；只在背景層） ---------- */
.blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}
.blob-a {
  width: 320px; height: 260px;
  top: -4%; left: -10%;
  background: color-mix(in srgb, var(--color-surface-2) 80%, transparent);
}
.blob-b {
  width: 280px; height: 280px;
  bottom: 2%; right: -8%;
  background: color-mix(in srgb, var(--color-primary) 13%, transparent);
}

/* ---------- loading ---------- */
#view-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-ink-subtle);
  animation: breathe-dot 2s ease-out infinite;
}
@keyframes breathe-dot {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50% { transform: scale(1.35); opacity: 0.9; }
}

/* ---------- login（hero 級氛圍：長漸層＋光斑） ---------- */
#view-login {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background:
    radial-gradient(
      120% 80% at 18% 8%,
      color-mix(in srgb, var(--color-surface-1) 90%, transparent) 0%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-surface-2) 42%, var(--color-canvas)) 0%,
      var(--color-canvas) 72%
    );
}
.login-box {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 320px;
  width: 100%;
}
.login-logo {
  width: 88px;
  height: 88px;
  color: var(--color-ink);
  margin-bottom: var(--space-lg);
}
.login-title {
  font-family: var(--font-display);
  font-size: var(--type-display-xl-size);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}
.login-eyebrow {
  margin-top: var(--space-sm);
  color: var(--color-ink-muted);
}
.login-tagline {
  margin-top: var(--space-lg);
  color: var(--color-ink-muted);
  font-size: var(--type-body-size);
}
.btn-google {
  margin-top: var(--space-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 14px 24px;
  background: var(--color-surface-1);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color 0.3s ease-out, transform 0.3s ease-out;
}
.btn-google:hover { background: var(--color-surface-2); }
.btn-google:active { transform: scale(0.98); }
.btn-google svg { width: 20px; height: 20px; color: var(--color-ink-muted); }

/* ---------- layout ---------- */
.topbar {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--space-lg) + env(safe-area-inset-top)) var(--space-lg) 0;
}
.top-date { color: var(--color-ink-subtle); }
.top-greeting {
  font-family: var(--font-display);
  font-size: var(--type-headline-size);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  margin-top: 4px;
}
.top-groupline {
  font-size: var(--type-body-sm-size);
  color: var(--color-ink-muted);
  margin-top: 2px;
  min-height: 1.7em;
}

.avatar-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-hairline);
  padding: 0;
  overflow: hidden;
  background: var(--color-surface-2);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 19px;
  color: var(--color-ink-muted);
}
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }

.content {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md) calc(var(--space-xl) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* ---------- card（純色元件：1px hairline＋lg 圓角，無重投影） ---------- */
.card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.card-title {
  font-family: var(--font-display);
  font-size: var(--type-card-title-size);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  margin-bottom: var(--space-md);
}
.card-title-note {
  font-family: var(--font-ui);
  font-size: var(--type-caption-size);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-ink-subtle);
  margin-left: var(--space-xs);
}

/* ---------- 打卡 hero（氛圍最濃：柔長漸層＋光斑，無卡片邊框） ---------- */
.checkin-hero {
  position: relative;
  text-align: center;
  padding: calc(var(--space-section) / 2) var(--space-lg);
  background:
    radial-gradient(
      85% 95% at 50% 0%,
      color-mix(in srgb, var(--color-surface-1) 85%, transparent) 0%,
      transparent 72%
    );
}
.checkin-hero .blob-a {
  width: 260px; height: 210px;
  top: -8%; left: -6%;
}
.checkin-hero .blob-b {
  width: 230px; height: 230px;
  bottom: -10%; right: -4%;
}
.checkin-body {
  position: relative;
  z-index: 1;
}

.btn-big {
  width: 100%;
  max-width: 320px;
  padding: 18px 28px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease-out, transform 0.3s ease-out;
}
.btn-big:hover { background: var(--color-primary-hover); }
.btn-big:active { transform: scale(0.98); }
.btn-big:disabled {
  background: var(--color-surface-2);
  color: var(--color-ink-subtle);
  cursor: default;
  transform: none;
}
.btn-big.btn-checkout {
  background: var(--color-surface-1);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  font-size: var(--type-button-size);
  padding: 14px 24px;
}
.btn-big.btn-checkout:hover { background: var(--color-surface-2); }

.checkin-hint {
  margin-top: var(--space-md);
  font-size: var(--type-body-sm-size);
  color: var(--color-ink-muted);
}

.elapsed-label {
  font-size: var(--type-body-sm-size);
  color: var(--color-ink-muted);
}
.elapsed-time {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--color-primary);
  line-height: 1.2;
  margin: 4px 0 var(--space-lg);
}

.done-badge {
  width: 64px; height: 64px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-semantic-success) 14%, var(--color-canvas));
  color: var(--color-semantic-success);
  display: flex;
  align-items: center;
  justify-content: center;
}
.done-badge svg { width: 32px; height: 32px; }
.done-title {
  font-family: var(--font-display);
  font-size: var(--type-headline-size);
  font-weight: 400;
  line-height: 1.3;
}
.done-minutes {
  font-size: var(--type-body-size);
  color: var(--color-primary);
  margin-top: 4px;
}
.done-sub {
  margin-top: var(--space-xs);
  font-size: var(--type-body-sm-size);
  color: var(--color-ink-muted);
}

/* ---------- status ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: var(--type-caption-size);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.3s ease-out, color 0.3s ease-out, transform 0.3s ease-out;
}
.chip:active { transform: scale(0.98); }
.chip.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.status-input-row { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); }
.status-input-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  letter-spacing: 0.02em;
  background: var(--color-canvas);
  color: var(--color-ink);
}
.status-input-row input::placeholder { color: var(--color-ink-subtle); }
.status-input-row input:focus {
  outline: 2px solid var(--color-ink-subtle);
  outline-offset: 1px;
}

.btn-mini {
  padding: 10px 18px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  color: var(--color-ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.3s ease-out, transform 0.3s ease-out;
}
.btn-mini:active { transform: scale(0.98); }
.btn-mini:disabled { opacity: 0.5; }

.status-current {
  margin-top: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--type-body-sm-size);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.status-current-label { color: var(--color-ink-muted); flex-shrink: 0; }
#status-current-text { font-weight: 600; flex: 1; }
.btn-text {
  border: none;
  background: none;
  color: var(--color-ink-muted);
  cursor: pointer;
  padding: 4px;
  transition: color 0.3s ease-out;
}
.btn-text:hover { color: var(--color-ink); }

.photo-row {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-hairline);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 10px 18px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color 0.3s ease-out, transform 0.3s ease-out;
}
.btn-outline:hover { background: var(--color-surface-2); }
.btn-outline:active { transform: scale(0.98); }
.btn-outline svg { width: 20px; height: 20px; color: var(--color-ink-muted); }
.btn-outline:disabled { opacity: 0.5; }
.photo-thumb {
  width: 56px; height: 56px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  border: 1px solid var(--color-hairline);
  cursor: pointer;
}

/* ---------- presence ---------- */
.presence-list { display: flex; flex-direction: column; }
.member {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
}
.member + .member { border-top: 1px solid var(--color-hairline); }

.member-avatar-wrap { position: relative; flex-shrink: 0; }
.member-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--color-surface-2);
}
.member-avatar-fallback {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 18px;
}
/* 在線呼吸燈：2s 緩慢脈動 */
.online-dot {
  position: absolute;
  right: 0; bottom: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--color-semantic-success);
  border: 2px solid var(--color-surface-1);
  animation: breathe-ring 2s ease-out infinite;
}
@keyframes breathe-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-semantic-success) 40%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-semantic-success) 0%, transparent); }
}

.member-info { flex: 1; min-width: 0; }
.member-name { font-weight: 600; font-size: var(--type-body-size); line-height: 1.5; }
.member-meta { font-size: var(--type-body-sm-size); color: var(--color-ink-muted); line-height: 1.5; }
.member-meta.is-online { color: var(--color-semantic-success); }
.member-meta.is-done { color: var(--color-ink-muted); font-weight: 600; }
.member-status {
  font-family: var(--font-ui);
  font-size: var(--type-caption-size);
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
  background: var(--color-surface-2);
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  margin-top: 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-photo {
  width: 56px; height: 56px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid var(--color-hairline);
}

.presence-empty {
  color: var(--color-ink-muted);
  font-size: var(--type-body-sm-size);
  text-align: center;
  padding: var(--space-sm) 0;
}

/* ---------- stats ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
.stat-box {
  background: color-mix(in srgb, var(--color-canvas) 65%, var(--color-surface-1));
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stat-num small {
  font-family: var(--font-ui);
  font-size: var(--type-caption-size);
  font-weight: 400;
  color: var(--color-ink-muted);
  margin-left: 3px;
}
.stat-label {
  font-family: var(--font-ui);
  font-size: var(--type-caption-size);
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
  margin-top: 4px;
}

.board-wrap {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.board-title { color: var(--color-ink-subtle); margin-bottom: var(--space-xs); }
.board-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.board-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--type-body-sm-size);
}
.board-rank {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.board-row:first-child .board-rank {
  background: var(--color-ink);
  color: var(--color-canvas);
}
.board-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-row.is-me .board-name { font-weight: 600; }
.board-val { font-variant-numeric: tabular-nums; font-weight: 600; flex-shrink: 0; }

.footer-note {
  text-align: center;
  color: var(--color-ink-subtle);
}

/* ---------- lightbox / toast ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-ink) 80%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-lg);
}
:root[data-theme="dark"] .lightbox {
  background: color-mix(in srgb, var(--color-canvas) 86%, transparent);
}
.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: var(--radius-lg);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--color-ink);
  color: var(--color-canvas);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--type-body-sm-size);
  letter-spacing: 0.02em;
  z-index: 200;
  max-width: 90vw;
  text-align: center;
}

@media (min-width: 600px) {
  .content { padding-top: var(--space-lg); }
}

/* ---------- v2 殼層：桌機側邊欄／手機底部 tab ---------- */
.appnav {
  position: fixed;
  z-index: 50;
  background: color-mix(in srgb, var(--color-surface-1) 94%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav-item {
  display: flex;
  align-items: center;
  color: var(--color-ink-subtle);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color 0.3s ease-out, background-color 0.3s ease-out;
}
.nav-item svg { width: 22px; height: 22px; flex-shrink: 0; }
.nav-item:hover { color: var(--color-ink-muted); }
.nav-item.active { color: var(--color-ink); }

@media (max-width: 899px) {
  .appnav {
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid var(--color-hairline);
    padding: 6px var(--space-xs) calc(6px + env(safe-area-inset-bottom));
  }
  .appnav-brand { display: none; }
  .nav-item {
    flex-direction: column;
    gap: 2px;
    padding: 6px 12px;
  }
  .content { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
}

@media (min-width: 900px) {
  .appnav {
    top: 0; bottom: 0; left: 0;
    width: 210px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-xl) var(--space-md);
    border-right: 1px solid var(--color-hairline);
  }
  .appnav-brand {
    color: var(--color-ink-subtle);
    padding: 0 var(--space-sm);
    margin-bottom: var(--space-lg);
  }
  .nav-item { gap: var(--space-sm); padding: 10px var(--space-sm); }
  .nav-item.active { background: var(--color-surface-2); }
  .shell { margin-left: 210px; }
}

.page {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* ---------- 像素小屋（唯一允許像素化的區塊） ---------- */
.pixel-card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-hairline);
  overflow: hidden;
  background: var(--color-surface-1);
}
.pixel-scene {
  position: relative;
  aspect-ratio: 16 / 9;
}
.pixel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  display: block;
}
/* 背景素材未就位的降級：surface 色階的空房間 */
.pixel-card.no-bg .pixel-scene {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface-2) 45%, var(--color-surface-1)) 0%,
    var(--color-surface-1) 58%,
    var(--color-surface-2) 100%
  );
}
.pixel-seats { position: absolute; inset: 0; }
/* 座位錨點＝角色腳底（scene.json 的 x/y 百分比），高度吃 charHeight */
.seat {
  position: absolute;
  height: 30%;
  min-width: 6%;
  transform: translate(-50%, -100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* 素材降級模式：座位＝surface-2 色塊 */
.pixel-card.no-bg .seat::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  min-width: 28px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
}
.p-char {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1;
}
.p-char-img {
  height: 100%;
  width: auto;
  image-rendering: pixelated;
  display: block;
}
/* sprite="custom"：像素化自訂頭像小方框 */
.p-char-custom {
  height: 58%;
  aspect-ratio: 1;
  object-fit: cover;
  image-rendering: pixelated;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface-1);
}
/* 角色素材未就位的降級：編號色塊 */
.p-char-fallback {
  height: 52%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-ink);
}
.char-f1 { background: color-mix(in srgb, var(--color-primary) 42%, var(--color-surface-1)); }
.char-f2 { background: color-mix(in srgb, var(--color-semantic-success) 38%, var(--color-surface-1)); }
.char-f3 { background: color-mix(in srgb, var(--color-semantic-warning) 34%, var(--color-surface-1)); }
.char-f4 { background: color-mix(in srgb, var(--color-semantic-danger) 30%, var(--color-surface-1)); }
.char-f5 { background: color-mix(in srgb, var(--color-ink-subtle) 42%, var(--color-surface-1)); }
.char-f6 { background: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface-2)); }
.p-bubble {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  white-space: nowrap;
  color: var(--color-ink-muted);
  z-index: 2;
}

/* ---------- 月曆頁 ---------- */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.cal-title {
  font-family: var(--font-display);
  font-size: var(--type-card-title-size);
  font-weight: 400;
  letter-spacing: 0;
}
.cal-nav-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--color-hairline);
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease-out;
}
.cal-nav-btn svg { width: 18px; height: 18px; }
.cal-nav-btn:hover { background: var(--color-surface-2); }
.cal-nav-btn:disabled { opacity: 0.35; cursor: default; background: transparent; }
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  color: var(--color-ink-subtle);
  margin-bottom: var(--space-xs);
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-cell {
  aspect-ratio: 1;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: var(--type-caption-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0;
  cursor: default;
  transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
}
.cal-cell.empty { visibility: hidden; }
.cal-cell.is-today { box-shadow: inset 0 0 0 1px var(--color-hairline); }
.cal-cell.is-future { opacity: 0.35; }
/* 有效打卡日＝苔綠格＋簽到時間 */
.cal-cell.has-checkin {
  background: color-mix(in srgb, var(--color-primary) 30%, var(--color-surface-1));
  color: var(--color-ink);
  cursor: pointer;
}
.cal-cell.has-checkin:hover {
  background: color-mix(in srgb, var(--color-primary) 42%, var(--color-surface-1));
}
.cal-cell.is-selected {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}
.cal-daynum { line-height: 1.2; }
.cal-time { color: var(--color-ink-muted); line-height: 1.2; }
.cal-cell.has-checkin .cal-time { color: var(--color-ink); }
.cal-summary {
  margin-top: var(--space-md);
  text-align: center;
  font-size: var(--type-body-sm-size);
  color: var(--color-ink-muted);
}
.cal-detail-rows { display: flex; flex-direction: column; }
.cal-detail-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}
.cal-detail-row + .cal-detail-row { border-top: 1px solid var(--color-hairline); }
.cal-detail-label { color: var(--color-ink-subtle); flex-shrink: 0; min-width: 5em; }
.cal-detail-value { font-size: var(--type-body-sm-size); }
.cal-detail-photo {
  margin-top: var(--space-sm);
  width: 100%;
  max-width: 220px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-hairline);
  cursor: pointer;
  display: block;
}

/* ---------- 設定頁 ---------- */
.name-row { display: flex; gap: var(--space-xs); }
.name-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  letter-spacing: 0.02em;
  background: var(--color-canvas);
  color: var(--color-ink);
}
.name-row input::placeholder { color: var(--color-ink-subtle); }
.name-row input:focus { outline: 2px solid var(--color-ink-subtle); outline-offset: 1px; }
.sprite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: var(--space-sm);
}
.sprite-cell {
  aspect-ratio: 1;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}
.sprite-cell:active { transform: scale(0.98); }
.sprite-cell.selected { box-shadow: inset 0 0 0 2px var(--color-primary); }
.sprite-img {
  width: 80%;
  max-height: 80%;
  object-fit: contain;
  image-rendering: pixelated;
}
.sprite-img.sprite-custom {
  width: 72%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.sprite-cell .p-char-fallback { height: 60%; }
.avatar-upload-row { margin-top: var(--space-md); }
.avatar-preview-row {
  margin-top: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.avatar-preview {
  width: 72px; height: 72px;
  image-rendering: pixelated;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}
.avatar-preview-note { color: var(--color-ink-subtle); }
.settings-email {
  font-size: var(--type-body-sm-size);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-sm);
  word-break: break-all;
}

/* ---------- 管理頁 ---------- */
.admin-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.admin-add-row input {
  flex: 1;
  min-width: 140px;
  padding: 10px 14px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  letter-spacing: 0.02em;
  background: var(--color-canvas);
  color: var(--color-ink);
}
.admin-add-row input::placeholder { color: var(--color-ink-subtle); }
.admin-add-row input:focus { outline: 2px solid var(--color-ink-subtle); outline-offset: 1px; }
.admin-table { display: flex; flex-direction: column; }
.admin-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
}
.admin-row + .admin-row { border-top: 1px solid var(--color-hairline); }
.admin-row.inactive .admin-row-info { opacity: 0.5; }
.admin-row-info { flex: 1; min-width: 0; }
.admin-row-name {
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-row-sub {
  color: var(--color-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-row-actions { display: flex; gap: var(--space-xs); flex-shrink: 0; align-items: center; }
.switch {
  flex-shrink: 0;
  padding: 6px 14px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  color: var(--color-ink-subtle);
  font-family: var(--font-ui);
  font-size: var(--type-caption-size);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
.switch.on {
  background: color-mix(in srgb, var(--color-semantic-success) 16%, var(--color-surface-1));
  color: var(--color-semantic-success);
  border-color: color-mix(in srgb, var(--color-semantic-success) 40%, var(--color-hairline));
}
.btn-danger {
  padding: 6px 14px;
  border: 1px solid var(--color-semantic-danger);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-semantic-danger);
  cursor: pointer;
  transition: background-color 0.3s ease-out;
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--color-semantic-danger) 12%, transparent);
}
.btn-danger:disabled { opacity: 0.5; }
.admin-system { display: flex; flex-direction: column; }

/* v2.1：前三名獎盃獎牌＋連續早起火焰 */
.board-rank-icon,
.board-row:first-child .board-rank-icon {
  background: transparent;
}
.board-rank-icon svg { width: 18px; height: 18px; }
.board-rank-icon.rank-gold { color: var(--color-semantic-warning); }
.board-rank-icon.rank-silver { color: var(--color-ink-subtle); }
.board-rank-icon.rank-bronze { color: var(--color-semantic-danger); }

.p-flame {
  position: absolute;
  bottom: calc(100% + 32px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--color-surface-1) 88%, transparent);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  color: var(--color-semantic-warning);
  font-family: var(--font-ui);
  font-size: 11px;
  white-space: nowrap;
  animation: flame-flicker 2s ease-in-out infinite;
}
.p-flame svg { width: 13px; height: 13px; }
.p-flame span { color: var(--color-ink-muted); }
@keyframes flame-flicker {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.08); }
}

/* v2.1：登入頁日出插畫動畫（緩慢、循環一次後停在升起狀態） */
.login-logo-sunrise { width: 120px; height: 96px; }
.sunrise-sun {
  animation: sun-rise 2.4s ease-out forwards;
}
.sunrise-rays {
  transform-origin: 60px 50px;
  animation: rays-breathe 4s ease-in-out 2.4s infinite;
  opacity: 0;
  animation-fill-mode: forwards;
}
.sunrise-birds { opacity: 0; animation: birds-in 1s ease-out 2.2s forwards; }
@keyframes sun-rise {
  from { transform: translateY(34px); }
  to { transform: translateY(0); }
}
@keyframes rays-breathe {
  0%, 100% { opacity: .85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes birds-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sunrise-sun, .sunrise-rays, .sunrise-birds { animation: none; opacity: 1; transform: none; }
}

/* v2.1：管理頁時間窗編輯 */
.admin-window-ctrl { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-time {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-ink);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
}
.admin-window-dash { color: var(--color-ink-subtle); }
.admin-window-state { color: var(--color-ink-muted); }

/* v2.2：設定頁目前頭像 */
.profile-avatar-now {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-ink-muted);
}
.profile-avatar-now img { width: 100%; height: 100%; object-fit: cover; }

/* v2.3：頭像編輯器（拖曳定位＋圓形遮罩） */
.avatar-editor { margin-top: var(--space-md); display: flex; flex-direction: column; gap: 10px; }
.avatar-stage {
  position: relative;
  width: min(260px, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  touch-action: none;
  cursor: grab;
}
.avatar-stage:active { cursor: grabbing; }
.avatar-stage img {
  position: absolute;
  top: 50%; left: 50%;
  max-width: none;
  user-select: none;
  pointer-events: none;
}
.avatar-mask {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(circle closest-side at center,
    transparent 0,
    transparent calc(100% - 1.5px),
    color-mix(in srgb, var(--color-ink) 45%, transparent) 100%);
}
.avatar-mask::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--color-canvas) 85%, transparent);
}
.avatar-editor-hint { color: var(--color-ink-subtle); }
.avatar-zoom-row { display: flex; align-items: center; gap: 10px; color: var(--color-ink-muted); }
.avatar-zoom-row input[type="range"] { flex: 1; accent-color: var(--color-primary); max-width: 200px; }
.avatar-crop-row { display: flex; align-items: center; gap: 6px; color: var(--color-ink-muted); }
.avatar-crop-row input { accent-color: var(--color-primary); }
.avatar-editor-actions { display: flex; gap: 10px; }

/* v2.3：朝日光暈呼吸 */
.sunrise-halo {
  transform-origin: 60px 50px;
  animation: halo-breathe 4s ease-in-out 2.4s infinite;
}
@keyframes halo-breathe {
  0%, 100% { opacity: .8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { .sunrise-halo { animation: none; } }

/* v2.3：氣泡顯示模式切換（極簡 icon 鈕，浮在場景右上角） */
.pixel-card { position: relative; }
.bubble-mode-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-hairline);
  background: color-mix(in srgb, var(--color-surface-1) 82%, transparent);
  color: var(--color-ink-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .3s ease-out, color .3s ease-out;
  z-index: 3;
}
.bubble-mode-btn:hover { background: var(--color-surface-1); color: var(--color-ink); }
.bubble-mode-btn svg { width: 17px; height: 17px; }

/* v2.3.1：場景全螢幕（原生＋iOS 假全屏退路） */
.scene-full-btn { right: 52px; }
.pixel-card:fullscreen,
.pixel-card.fs-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #23271A; /* 深橄欖劇場底，兩主題一致 */
  border-radius: 0;
  border: none;
}
.pixel-card.fs-fallback {
  position: fixed;
  inset: 0;
  z-index: 999;
}
.pixel-card:fullscreen .pixel-scene,
.pixel-card.fs-fallback .pixel-scene {
  width: min(100vw, calc(100vh * 16 / 9));
}

/* v2.4：主圖場景選擇 */
.scene-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.scene-theme-cell {
  border: 2px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  padding: 0 0 6px;
  cursor: pointer;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .3s ease-out;
}
.scene-theme-cell.selected { border-color: var(--color-primary); }
.scene-theme-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; image-rendering: pixelated; }
.scene-theme-label { color: var(--color-ink-muted); }
.scene-theme-cell.selected .scene-theme-label { color: var(--color-ink); font-weight: 600; }

/* v2.4：主圖生命感——背景緩慢呼吸＋角色兩幀 GIF 式輕晃（各座位錯拍） */
.pixel-bg { animation: scene-breathe 10s ease-in-out infinite alternate; }
@keyframes scene-breathe {
  from { transform: scale(1); }
  to { transform: scale(1.012); }
}
.seat .p-char { animation: char-bob 1.6s steps(2, jump-none) infinite; }
.seat:nth-child(2n) .p-char { animation-delay: .4s; }
.seat:nth-child(3n) .p-char { animation-delay: .8s; }
.seat:nth-child(5n) .p-char { animation-delay: 1.2s; }
@keyframes char-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.p-bubble { animation: bubble-float 3.2s ease-in-out infinite; }
@keyframes bubble-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .pixel-bg, .seat .p-char, .p-bubble { animation: none; }
}