/* Browser top layer; colors mirror StoryColors Grove until Flutter supplies its mode. */
@font-face { font-family: ChronosUpdate; src: url('assets/assets/fonts/NotoSansKR.ttf') format('truetype'); font-display: swap; font-weight: 100 900; }
#client-update {
  --update-bg: #fcfcfa; --update-ink: #252b28; --update-muted: #777e79;
  --update-line: #e3e6e0; --update-accent: #2f7061; --update-glow: #e5eee8;
  --update-button: #344b44; --update-on-button: #ffffff;
  box-sizing: border-box; margin: 0; border: 0; padding: 0;
  width: 100vw; max-width: none; height: 100dvh; max-height: none;
  background: var(--update-bg); color: var(--update-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", ChronosUpdate, sans-serif;
  overflow: auto; overscroll-behavior: contain;
}
#client-update[data-theme="dark"] {
  --update-bg: #1b1e1c; --update-ink: #e4e9e2; --update-muted: #9aa399;
  --update-line: #363d37; --update-accent: #9ecbb3; --update-glow: #2c3f34;
  --update-button: #d5e4d9; --update-on-button: #24312a;
}
#client-update::backdrop { background: var(--update-bg, #f7f7f5); }
#client-update[open] {
  display: grid; grid-template-rows: auto 1fr auto;
  background-image: radial-gradient(ellipse at 50% 44%, var(--update-glow), transparent 56%);
}
#client-update [hidden] { display: none !important; }
#client-update * { box-sizing: border-box; }
.update-header {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: max(28px, env(safe-area-inset-top)) max(40px, env(safe-area-inset-right)) 0 max(40px, env(safe-area-inset-left));
}
.update-brand { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 600; letter-spacing: -1px; }
.update-brand svg { width: 29px; height: 29px; }
.update-preview-close { border: 1px solid var(--update-line); border-radius: 24px; background: transparent; color: var(--update-muted); font: inherit; font-size: 12px; padding: 8px 14px; cursor: pointer; }
.update-preview-close span { margin-left: 8px; font-size: 18px; vertical-align: -1px; }
.update-main { width: min(100%, 560px); margin: auto; padding: 40px 32px 28px; text-align: center; }
.update-emblem { position: relative; display: grid; place-items: center; width: 168px; height: 168px; margin: 0 auto 30px; color: var(--update-ink); }
.update-emblem > svg { width: 72px; height: 72px; }
.update-orbit { position: absolute; inset: 0; border: 1px solid var(--update-line); border-radius: 50%; opacity: .65; }
.update-orbit-inner { inset: 18px; opacity: .8; }
.update-spark { position: absolute; top: 23px; right: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--update-accent); box-shadow: 0 0 0 7px var(--update-bg); animation: update-breathe 2s ease-in-out infinite; }
.update-eyebrow { margin: 0 0 16px; color: var(--update-accent); font-size: 10px; font-weight: 650; letter-spacing: 2.7px; }
#update-title { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 580; letter-spacing: -1.6px; line-height: 1.4; word-break: keep-all; outline: none; }
#update-description { margin: 20px 0 0; color: var(--update-muted); font-size: 14px; line-height: 1.85; word-break: keep-all; min-height: 52px; }
.update-progress { margin: 36px auto 0; max-width: 352px; text-align: left; }
.update-progress-label { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--update-accent); margin-bottom: 12px; }
.update-status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.update-track { height: 4px; border-radius: 4px; overflow: hidden; background: var(--update-line); }
.update-fill { height: 100%; width: 100%; background: var(--update-accent); border-radius: inherit; transform-origin: left; }
#client-update[data-phase="preparing"] .update-fill { animation: update-fill 3s cubic-bezier(.22,.61,.36,1) both; }
#client-update[data-phase="reloading"] .update-fill { animation: update-breathe 1.2s ease-in-out infinite; }
.update-steps { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: var(--update-muted); margin-top: 12px; }
.update-action { min-height: 72px; display: grid; place-items: center; padding-top: 24px; }
#update-wait { font-size: 12px; color: var(--update-muted); }
#update-reload { min-height: 46px; padding: 12px 28px; border: 0; border-radius: 12px; background: var(--update-button); color: var(--update-on-button); font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
#update-reload svg { width: 18px; height: 18px; }
#update-reload:hover { filter: brightness(1.12); }
#client-update button:focus-visible { outline: 2px solid var(--update-accent); outline-offset: 4px; }
.update-footer { padding: 20px 24px max(30px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--update-muted); font-size: 11px; text-align: center; }
.update-footer-line { width: 30px; height: 1px; background: var(--update-line); }
@keyframes update-fill { from { transform: scaleX(.03); } to { transform: scaleX(1); } }
@keyframes update-breathe { 50% { opacity: .45; } }
@media (max-width: 480px) {
  .update-header { padding: max(22px, env(safe-area-inset-top)) 22px 0; }
  .update-brand { font-size: 19px; }
  .update-brand svg { width: 26px; height: 26px; }
  .update-main { padding: 36px 24px 20px; }
  .update-emblem { width: 144px; height: 144px; margin-bottom: 26px; }
  .update-emblem > svg { width: 64px; height: 64px; }
  .update-spark { top: 20px; right: 14px; }
  #update-title { letter-spacing: -1.2px; }
  #update-description { font-size: 13px; }
  .update-progress { margin-top: 30px; }
  .update-preview-close { padding: 6px 10px; font-size: 11px; }
  .update-footer { gap: 10px; font-size: 10px; }
  .update-footer-line { width: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #client-update .update-fill, #client-update .update-spark { animation: none; }
}