/*
 * Cloud Night Market 版面样式（选择器全是 .cn-*，不覆盖 .gs-* 组件选择器）。
 *
 * 位置不在这里：每个元素的矩形由 ui.mjs 按 art/SCREEN_SPEC.json 的 zones / rect 现算（screen-rects.mjs），
 * 游玩屏由 layout.mjs 按 §6.1 的 px 公式现算；竖屏 / 横屏按画布（.cn-safe 的 getBoundingClientRect）判，不按视口判。
 * 字号按画布缩放：--u = min(画布长边的 1%, 短边的 2%)，并有 px 下限——不写任何按视口宽度放大的规则。
 * 画在画布上的东西（顾客、排班卡、摊位、示范手、效果）不接收指针：命中一律落在舞台 [data-role=stage]。
 * 九宫格素材（ui-panel / ui-btn-* / ui-night-card*）用 @2x 一套做 border-image：小图、矢量感边缘，不随 DPR 换。
 */

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

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--cn-ink);
  color: var(--gs-ink);
  font-family: var(--cn-font);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cn-root { position: absolute; inset: 0; overflow: hidden; }
.cn-root :focus { outline: none; }
.cn-root :focus-visible { outline: 2px solid var(--cn-cyan); outline-offset: 2px; }

.cn-bg {
  position: absolute;
  inset: 0;
  background-color: var(--cn-night);
  background-image: linear-gradient(180deg, var(--cn-night) 0%, var(--cn-night-hi) 55%, var(--cn-dusk) 100%);
  background-size: cover;
  background-position: var(--gs-bg-focus);
}
.cn-bg[data-bg='none'] {
  background-image:
    radial-gradient(circle at 82% 9%, rgba(255, 243, 196, 0.9) 0 2.2%, rgba(255, 243, 196, 0.18) 2.4% 6%, transparent 6.2%),
    linear-gradient(180deg, var(--cn-night) 0%, var(--cn-night-hi) 60%, var(--cn-dusk) 100%);
}

.cn-safe {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  left: env(safe-area-inset-left, 0px);
  --sh: 8.44px;
  --sw: 3.9px;
  --u: min(var(--sh), calc(var(--sw) * 2));
}

.cn-scene, .cn-overlay-host, .cn-screen { position: absolute; inset: 0; }
/* 从标题页开的浮层：底下那一页退到后面（遮罩之外再压暗），不和浮层自己的按钮抢视线 */
.cn-scene.is-covered { opacity: 0.28; transition: opacity var(--gs-normal); }
.cn-overlay-host:empty { display: none; }

/* 分区容器（ui.mjs zoned）：只承载坐标，不接指针；子节点照常接 */
.cn-zone { position: absolute; pointer-events: none; box-sizing: border-box; }
:where(.cn-zone) > :where(*) { pointer-events: auto; }
/* 矮画布上的流式排法：分区本身不动，里面一列排开；装不下就在分区里滚（走查记为「靠滚动容纳」） */
.cn-zone--flow {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: 8px;
  padding: 4px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}
.cn-flow-row { display: flex; gap: 8px; min-height: 0; flex: 0 1 auto; align-items: stretch; }
.cn-flow-row--fixed { flex: 0 0 auto; }
.cn-flow-row--media { flex: 1 1 auto; min-height: 24px; justify-content: center; }
.cn-flow-row--media > * { min-height: 0; object-fit: contain; }
/* 圆钮进了流式行也保持正圆：按矩形宽度比例分 flex 会把标题页的帮助 / 设置拉成 144×44 的椭圆（320×568 实测）；只有圆钮的一行靠右排 */
.cn-flow-row > .cn-round { flex: 0 0 auto !important; width: 48px; height: 48px; align-self: center; }
.cn-flow-row--fixed:not(:has(> :not(.cn-round))) { justify-content: flex-end; gap: 12px; }
.cn-zone--flow .cn-logo { max-height: 100%; min-height: 0; object-fit: contain; }
/* 面板里的流式分区：离开面板的九宫格边框；可滚的分区底部渐隐，看得出下面还有 */
.cn-overlay .cn-zone--flow { padding: 12px 22px; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent); }
/* 面板盖住的那一区（body / 结算 card）下沿压在面板 16px 的边框上：渐隐要在边框之前走完，否则滚动内容从边框底下露头；
   底部多留出边框那一截，滚到底时最后一个按钮完整可见 */
.cn-overlay .cn-zone--flow:is([data-zone='body'], [data-zone='card']) {
  padding-bottom: 32px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent calc(100% - 16px));
  mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent calc(100% - 16px));
}
/* 「下面还有」的箭头（ui.mjs scrollCues）：不接指针、不进读屏，滚到底收起 */
.cn-more {
  position: absolute;
  width: 28px;
  height: 20px;
  border-radius: 10px;
  background: rgba(34, 26, 90, 0.85);
  box-shadow: 0 0 10px rgba(255, 201, 74, 0.5);
  pointer-events: none;
  transition: opacity var(--gs-fast, 120ms);
}
.cn-more::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-right: 3px solid var(--cn-gold, #FFC94A);
  border-bottom: 3px solid var(--cn-gold, #FFC94A);
  transform: rotate(45deg);
}
.cn-more.is-end { opacity: 0; }
.cn-safe[data-short='true'] .cn-overlay .cn-subline { display: none; }
/* 暂停的副行是本局夜号 + 分数（SPEC bind session.score），矮画布上不藏：和标题并成一行 */
.cn-safe[data-short='true'] .cn-overlay--pause .cn-zone--flow[data-zone='head'] { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.cn-safe[data-short='true'] .cn-overlay--pause .cn-subline { display: flex; white-space: nowrap; flex: none; }

.cn-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.cn-icon, .cn-btn-icon, .cn-chip-icon, .cn-card-icon, .cn-toggle-icon, .cn-stat-icon, .cn-unlock-icon, .cn-tip-icon, .cn-night-rule, .cn-task-check {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  filter: var(--gs-icon-tint-ink);
  pointer-events: none;
}
.cn-btn-icon { margin-inline-end: 0.4em; }

/* ── 按钮：本作皮肤（只加 .cn-* 类，不改 .gs-*；44 下限仍由 .gs-btn 保证）── */
.cn-root button { font-family: var(--cn-font); }
.cn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  box-sizing: border-box;
  padding: 0 1em;
  font-size: max(14px, calc(var(--u) * 2));
  line-height: 1.1;
  text-align: center;
  overflow: hidden;
}
.cn-btn.cn-btn--primary {
  color: var(--cn-text-dark);
  background: var(--gs-cta);
  border: 2px solid rgba(255, 228, 160, 0.9);
  border-image: url('./assets/ui-btn-primary@2x.webp') 0 64 fill / 0 32px stretch;
  box-shadow: 0 0 22px rgba(255, 154, 60, 0.45);
  font-weight: 900;
}
.cn-btn.cn-btn--primary:active { border-image-source: url('./assets/ui-btn-primary-press@2x.webp'); }
.cn-btn.cn-btn--secondary {
  color: var(--cn-cream);
  background: var(--cn-glass);
  border: 1.5px solid var(--cn-glass-edge);
  border-image: url('./assets/ui-btn-secondary@2x.webp') 0 64 fill / 0 32px stretch;
}
/* 九宫格位图两端是透明的圆头：底色交给位图，不再垫一层 CSS 胶囊（不然两端露出第二个框） */
.cn-btn.cn-btn--primary, .cn-btn.cn-btn--secondary { background-color: transparent; background-image: none; }
.cn-btn--primary .cn-btn-icon { filter: brightness(0) opacity(0.78); }
.cn-btn-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* 窄格子里的次按钮：图标在上、字在下 */
.cn-btn.cn-btn--compact { flex-direction: column; gap: 2px; padding: 2px 4px; font-size: max(11px, calc(var(--u) * 1.4)); }
.cn-btn--compact .cn-btn-icon { margin: 0; width: 1.5em; height: 1.5em; }
.cn-btn--compact .cn-btn-label { max-width: 100%; }
.cn-btn-play { flex-direction: row; font-size: max(20px, calc(var(--u) * 3.6)) !important; }
.cn-btn-sub { display: block; font-size: 0.5em; font-weight: 800; opacity: 0.85; margin-inline-start: 0.6em; }
.cn-btn-badge {
  font-size: 0.7em;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: rgba(12, 8, 38, 0.55);
  color: var(--cn-gold);
  margin-inline-start: 0.4em;
}

.cn-round {
  border-radius: 50%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, var(--cn-panel-hi), var(--cn-panel));
  border: 2px solid var(--cn-gold);
  box-shadow: 0 0 14px rgba(255, 201, 74, 0.35), inset 0 0 0 2px rgba(42, 26, 72, 0.6);
  box-sizing: border-box;
}
.cn-round img { width: 52%; height: 52%; filter: var(--gs-icon-tint-ink); }

@keyframes cn-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.is-nudged { animation: cn-nudge 240ms ease-out 2; }
:root[data-reduced-motion='on'] .is-nudged { animation: none; outline: 2px solid var(--cn-gold); }

/* ── 品牌、标题、加载 ── */
.cn-logo { object-fit: contain; filter: drop-shadow(0 0 18px rgba(255, 95, 180, 0.55)); pointer-events: none; }
.cn-wordmark {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 900 max(20px, calc(var(--u) * 4.4)) / 1 var(--cn-font);
  color: var(--cn-gold);
  -webkit-text-stroke: 1.5px #6B3A12;
  text-shadow: 0 3px 0 #C98A12, 0 0 20px rgba(255, 95, 180, 0.65);
  letter-spacing: 0.01em;
}
.cn-tagline, .cn-status {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 800 max(13px, calc(var(--u) * 1.9)) / 1.2 var(--cn-font);
  color: var(--cn-cream);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}
.cn-loading-meter.gs-meter {
  height: 100%;
  min-height: 12px;
  border: 1.5px solid #C98A4A;
  box-shadow: 0 0 12px rgba(255, 154, 60, 0.5);
}
.cn-loading-meter .gs-meter__fill { background: linear-gradient(90deg, #FFD27A, #FF9A3C); }

.cn-chip {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  box-sizing: border-box;
  padding: 0 0.9em;
  border-radius: 999px;
  background: rgba(36, 26, 99, 0.86);
  border: 1px solid var(--cn-glass-edge);
  font: 800 max(13px, calc(var(--u) * 1.8)) / 1 var(--cn-font);
  color: var(--cn-cream);
  white-space: nowrap;
}
.cn-chip-icon { filter: none; }
.cn-chip-num { color: var(--cn-gold); }
.cn-chip--stars span { color: var(--cn-gold); font-weight: 900; }

.cn-screen-title {
  margin: 0;
  display: flex;
  align-items: center;
  font: 900 max(20px, calc(var(--u) * 3.6)) / 1 var(--cn-font);
  color: var(--cn-paper);
  text-shadow: 0 3px 0 rgba(42, 26, 72, 0.9), 0 0 16px rgba(255, 201, 74, 0.45);
}
/* 暂停面板的标题与副行居中（SPEC 的 title / subline 格子左右对称）；任务 / 外观 / 设置 / 帮助的标题格子靠左、右边让给关闭钮，照旧左对齐。
   矮画布暂停把两者并成一行时另说 */
.cn-overlay--pause .cn-screen-title, .cn-overlay--pause .cn-subline { justify-content: center; text-align: center; }
.cn-safe[data-short='true'] .cn-overlay--pause .cn-screen-title { justify-content: flex-start; }
.cn-subline, .cn-note {
  margin: 0;
  display: flex;
  align-items: center;
  font: 700 max(12px, calc(var(--u) * 1.6)) / 1.3 var(--cn-font);
  color: var(--cn-muted);
}
.cn-note { align-items: flex-start; overflow: auto; }

/* 模式卡（Nights / Daily Market） */
.cn-mode-card {
  display: flex;
  align-items: center;
  gap: 0.7em;
  box-sizing: border-box;
  padding: 0 0.9em;
  border-radius: 20px;
  border: 1.5px solid var(--cn-glass-edge);
  background: linear-gradient(180deg, rgba(59, 50, 112, 0.97), rgba(36, 28, 92, 0.97));
  box-shadow: 0 0 16px rgba(255, 154, 60, 0.25);
  color: var(--cn-cream);
  text-align: start;
  cursor: pointer;
  font-size: max(13px, calc(var(--u) * 1.8));
  overflow: hidden;
}
.cn-card-icon { width: 2em; height: 2em; filter: var(--gs-icon-tint-gold); }
.cn-card-text { display: flex; flex-direction: column; gap: 0.15em; flex: 1 1 auto; min-width: 0; }
.cn-card-title { font-weight: 900; font-size: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-card-desc { font-weight: 700; font-size: 0.8em; line-height: 1.15; color: var(--cn-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cn-card-desc:empty { display: none; }
.cn-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25em; flex: 0 1 auto; max-width: 40%; }
/* 短竖屏的模式卡只有 44 px 高：只留标题与右侧数字，说明句交给帮助页 */
.cn-safe[data-short='true'] .cn-card-desc:not(.cn-lock-hint) { display: none; }
.cn-safe[data-short='true'] .cn-card-title { white-space: normal; font-size: 1.05em; line-height: 1.05; }
.cn-card-chevron { flex: none; font-size: 1.6em; font-weight: 900; color: var(--cn-gold); line-height: 1; }
.cn-pill { display: inline-flex; align-items: center; gap: 0.25em; padding: 0.15em 0.6em; border-radius: 999px; background: rgba(12, 8, 38, 0.55); color: var(--cn-gold); font-weight: 800; font-size: 0.85em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cn-pill--soft { color: var(--cn-muted); }
.cn-pill-star { width: 1.1em; height: 1.1em; }
.cn-mode-card.is-locked { filter: saturate(0.25) brightness(0.8); }
.cn-card-lock { width: 1.8em; height: 1.8em; flex: none; }

/* 存档损坏的页内条（InlineBar，不遮罩、不圈焦点） */
.cn-save-notice { box-sizing: border-box; border-radius: 18px !important; }
.cn-save-notice .gs-inline-bar__text { color: var(--cn-cream); font-size: max(12px, calc(var(--u) * 1.5)); }
.cn-save-notice .gs-inline-bar__icon { filter: none; width: 36px; height: 36px; object-fit: contain; }
.cn-save-close { width: 44px !important; height: 44px !important; }
/* 条是按 SPEC 矩形定高摆的：共用库 ≤380px 的 flex-wrap 会把正文挤到第二行、掉出条外压住 Play，关闭钮也落到条下（375×812 坏存档实测）。
   本作不换行，正文在图标与关闭钮之间折行；字号随条高收（cqh），最小 10px */
.cn-save-notice { flex-wrap: nowrap !important; container-type: size; overflow: hidden; }
.cn-save-notice .gs-inline-bar__actions { width: auto !important; }
.cn-save-notice .gs-inline-bar__text { font-size: clamp(10px, 22cqh, max(12px, calc(var(--u) * 1.5))); line-height: 1.2; }

/* ── 夜晚选择 ── */
/* 夜晚卡：框是位图（顶上一排小灯笼），内容从灯笼带下面开始；规则图标居中放大，锁在右上角，提示字可以折两行 */
.cn-night-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1px;
  box-sizing: border-box;
  /* 顶上让开灯笼穗子、底下让开云朵花边（花边画进了 fill 区，border 宽度盖不住它）；用 em 跟着卡片字号缩，342 档也放得下 */
  padding: 0.3em 2px 0.75em;
  border-style: solid;
  border-color: transparent;
  border-width: 24px 9px 13px;
  border-image: url('./assets/ui-night-card@2x.webp') 72 48 56 48 fill / 24px 9px 13px stretch;
  background: none;
  color: var(--cn-cream);
  cursor: pointer;
  font-size: max(11px, calc(var(--u) * 1.45));
  overflow: hidden;
}
.cn-night-card.is-locked { border-image-source: url('./assets/ui-night-card-locked@2x.webp'); }
.cn-night-card.is-locked > :not(.cn-night-lock, .cn-night-foot) { opacity: 0.6; }
/* 解锁条件是锁着的卡上唯一要读的字：不跟着压暗，用奶白 */
.cn-night-card.is-locked .cn-night-foot { color: var(--cn-cream); }
.cn-night-card.is-new { outline: 3px solid #FF5FB4; outline-offset: -3px; border-radius: 14px; box-shadow: 0 0 16px rgba(255, 95, 180, 0.85); }
/* 锁着的卡：锁放在规则图标的位置（居中），不再压到标题 */
.cn-night-card.is-locked .cn-night-rule { display: none; }
.cn-night-card .cn-night-label { order: 0; }
.cn-night-card .cn-night-rule, .cn-night-card .cn-night-lock { order: 1; }
.cn-night-card .cn-night-stars { order: 2; }
.cn-night-card .cn-night-foot, .cn-night-card .cn-night-breeze { order: 3; padding: 0 6px; }
.cn-night-label { font-weight: 900; font-size: 1.1em; white-space: nowrap; line-height: 1.1; }
.cn-night-rule { width: auto; height: auto; flex: 1 1 0; min-height: 0; max-height: 2.6em; aspect-ratio: 1; filter: var(--gs-icon-tint-gold); }
.cn-night-stars { display: flex; gap: 1px; justify-content: center; flex: none; }
.cn-night-star { width: 1.45em; height: 1.45em; }
.cn-night-lock { position: static; width: auto; height: auto; flex: 1 1 0; min-height: 0; max-height: 2.4em; aspect-ratio: 1; object-fit: contain; }
.cn-night-foot { text-align: center; font-weight: 700; font-size: 0.8em; line-height: 1.1; color: var(--cn-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex: none; }
.cn-night-breeze { display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 0.72em; color: var(--cn-cyan); flex: none; }
.cn-breeze-icon { width: 1.3em; height: 1.3em; }

/* ── 新规则开场演示 ── */
.cn-screen--intro { cursor: pointer; }
.cn-scrim { position: absolute; inset: 0; background: rgba(12, 8, 38, 0.6); }
.cn-scrim--intro { background: rgba(12, 8, 38, 0.55); pointer-events: none; }
.cn-intro-night {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 max(13px, calc(var(--u) * 1.8)) / 1 var(--cn-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cn-muted);
  pointer-events: none;
}
.cn-intro-title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 900 max(22px, calc(var(--u) * 4.6)) / 1.05 var(--cn-font);
  color: var(--cn-gold);
  -webkit-text-stroke: 2px #4A2208;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #C98A12, 0 0 3px #2A1A48, 0 0 22px rgba(12, 8, 38, 0.95);
  pointer-events: none;
}
.cn-intro-demo { pointer-events: none !important; }

/* ── 游玩屏 ── */
.cn-stage {
  position: absolute;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}
.cn-stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.cn-screen--play .cn-zone[data-zone='hud'] { transition: opacity var(--gs-normal); }
/* 浮层 / 结算盖在游玩屏上时，顶栏退到后面（遮罩之外再压一层，不和浮层抢视线） */
.cn-screen--play.is-covered .cn-zone, .cn-screen--play.is-ended .cn-zone { opacity: 0.2; }
.cn-root .cn-stage:focus, .cn-root .cn-stage:focus-visible { outline: none; }
.cn-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 16px;
  background: rgba(34, 26, 90, 0.82);
  border: 1px solid rgba(179, 169, 230, 0.45);
  pointer-events: none;
  overflow: hidden;
}
.cn-score-label { font: 800 max(11px, calc(var(--u) * 1.3)) / 1.1 var(--cn-font); color: var(--cn-muted); white-space: nowrap; }
.cn-score-value { font: 900 max(18px, calc(var(--u) * 3)) / 1 var(--cn-font); color: var(--cn-paper); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-moon-track {
  position: relative;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1.5px solid #C98A4A;
  background: rgba(12, 8, 38, 0.7);
  pointer-events: none;
  margin-block: auto;
  max-height: 22px;
  align-self: center;
}
.cn-moon-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(69, 233, 255, 0.35), rgba(69, 233, 255, 0.85)); }
.cn-moon { position: absolute; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); filter: drop-shadow(0 0 6px rgba(255, 243, 196, 0.8)); }
.cn-lanterns { display: flex; align-items: center; justify-content: space-evenly; pointer-events: none; }
.cn-lantern { position: relative; height: 100%; aspect-ratio: 1; max-width: 33%; }
.cn-lantern img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity var(--gs-normal); }
.cn-lantern-out { opacity: 0; }
.cn-lantern.is-out .cn-lantern-lit { opacity: 0; }
.cn-lantern.is-out .cn-lantern-out { opacity: 1; }
.cn-queue-label {
  margin: 0;
  display: flex;
  align-items: center;
  font: 800 max(11px, calc(var(--u) * 1.3)) / 1 var(--cn-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cn-muted);
  pointer-events: none !important;
}
/* 读屏用的摊位代理按钮：1 px、不接指针——真实命中区只有舞台（ACCEPTANCE §3.3） */
.cn-proxy {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  opacity: 0;
  pointer-events: none !important;
}

/* ── 浮层 ── */
.cn-overlay { position: absolute; inset: 0; }
.cn-overlay .cn-scrim { pointer-events: auto; }
.cn-scrim--result { background: rgba(12, 8, 38, 0.62); }
.cn-panel {
  border: 16px solid transparent;
  border-image: url('./assets/ui-panel@2x.webp') 96 fill / 16px stretch;
  background: rgba(34, 26, 90, 0.35);
  box-sizing: border-box;
  border-radius: 28px;
  box-shadow: 0 0 32px rgba(255, 154, 60, 0.22);
  pointer-events: none;
}

/* 开关行（暂停 / 设置 / 结算的微风提议）：整行可点 */
.cn-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 4px 0.6em;
  box-sizing: border-box;
  padding: 0 0.9em;
  border-radius: 18px;
  border: 1px solid rgba(179, 169, 230, 0.4);
  background: rgba(51, 40, 127, 0.82);
  color: var(--cn-cream);
  font: 800 max(13px, calc(var(--u) * 1.8)) / 1.15 var(--cn-font);
  cursor: pointer;
  text-align: start;
  overflow: hidden;
}
.cn-toggle-icon { width: 1.6em; height: 1.6em; }
img.cn-toggle-icon[src*='obj-'] { filter: none; }
/* 横屏的开关是 186 px 宽的小方块：标签先占满一行，状态字与开关不够放就换到下一行（不裁字） */
.cn-toggle-label { flex: 1 1 5em; min-width: 0; overflow-wrap: anywhere; }
.cn-toggle-state { flex: none; font-size: 0.85em; color: var(--cn-muted); }
.cn-toggle {
  flex: none;
  width: 3.3em;
  height: 1.85em;
  border-radius: 999px;
  background: url('./assets/ui-toggle-off@2x.webp') center / contain no-repeat, #6E6A9A;
}
.cn-toggle.is-on { background: url('./assets/ui-toggle-on@2x.webp') center / contain no-repeat, var(--cn-go); }
.cn-offer { background: rgba(30, 90, 100, 0.85); border-color: rgba(69, 233, 255, 0.55); }

/* 结算 */
.cn-result-title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 900 max(22px, calc(var(--u) * 4)) / 1 var(--cn-font);
  color: var(--cn-paper);
  text-shadow: 0 3px 0 rgba(42, 26, 72, 0.9);
}
.cn-result-title.is-clear { color: var(--cn-gold); -webkit-text-stroke: 1px #6B3A1A; text-shadow: 0 3px 0 #C98A12, 0 0 18px rgba(255, 201, 74, 0.6); }
.cn-result-stars { display: flex; align-items: center; justify-content: center; gap: 4%; }
.cn-result-star, .cn-result-lantern { height: 100%; max-height: 64px; min-height: 0; aspect-ratio: 1; object-fit: contain; }
.cn-result-star.is-got { filter: drop-shadow(0 0 10px rgba(255, 201, 74, 0.8)); animation: cn-pop 420ms ease-out both; }
:root[data-reduced-motion='on'] .cn-result-star.is-got { animation: none; }
@keyframes cn-pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.cn-result-lantern { filter: grayscale(0.4) brightness(0.8); }
.cn-hero-score {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 max(26px, calc(var(--u) * 5.2)) / 1 var(--cn-font);
  color: var(--cn-paper);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 rgba(42, 26, 72, 0.9), 0 0 18px rgba(255, 201, 74, 0.45);
  white-space: nowrap;
}
.cn-badge {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--cn-pink);
  color: #fff;
  font: 900 max(12px, calc(var(--u) * 1.6)) / 1 var(--cn-font);
  box-shadow: 0 0 14px rgba(255, 95, 180, 0.6);
}
.cn-stat-rows { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.cn-stat-row {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0 0.8em;
  flex: 1 1 0;
  min-height: 18px;
  max-height: 44px;
  border-radius: 999px;
  background: rgba(38, 43, 90, 0.78);
  border: 1px solid rgba(60, 67, 128, 0.9);
  font: 800 max(12px, calc(var(--u) * 1.6)) / 1 var(--cn-font);
  color: var(--cn-cream);
}
img.cn-stat-icon[src*='obj-'], img.cn-unlock-icon[src*='obj-'] { filter: none; }
.cn-to-star {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(38, 43, 90, 0.78);
  font: 800 max(12px, calc(var(--u) * 1.6)) / 1 var(--cn-font);
  color: var(--cn-gold);
}
.cn-unlocks { display: flex; gap: 8px; overflow-x: auto; align-items: center; }
.cn-unlock {
  margin: 0;
  flex: 1 0 30%;
  min-width: max(30%, 10.5em);   /* 三张挤不下时横向滚，不把字压成四行被 max-height 裁掉（320×568「New stall look: Peach Paper」实测） */
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.6em;
  max-height: 60px;
  box-sizing: border-box;
  border-radius: 14px;
  background: rgba(38, 43, 90, 0.88);
  border: 1px solid rgba(255, 201, 74, 0.55);
  font: 800 max(11px, calc(var(--u) * 1.4)) / 1.15 var(--cn-font);
  color: var(--cn-cream);
}
.cn-unlock-icon { width: 1.8em; height: 1.8em; }
.cn-cause, .cn-cause-tip {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6em;
  box-sizing: border-box;
  padding: 0 0.9em;
  border-radius: 16px;
  background: rgba(51, 40, 127, 0.82);
  border: 1px solid rgba(179, 169, 230, 0.4);
  font: 700 max(12px, calc(var(--u) * 1.6)) / 1.25 var(--cn-font);
  color: var(--cn-cream);
  overflow: hidden;
}
.cn-cause-tip { background: rgba(47, 90, 102, 0.85); border: 1px solid rgba(95, 181, 184, 0.8); }
.cn-tip-icon { width: 1.6em; height: 1.6em; filter: var(--gs-icon-tint-accent); }

/* 任务 */
.cn-task {
  display: flex;
  align-items: center;
  gap: 0.7em;
  box-sizing: border-box;
  padding: 0.4em 0.9em;
  border-radius: 18px;
  background: rgba(58, 49, 112, 0.86);
  border: 1px solid rgba(179, 169, 230, 0.45);
  font-size: max(12px, calc(var(--u) * 1.6));
  overflow: hidden;
}
.cn-task.is-done { background: rgba(120, 86, 24, 0.55); border-color: var(--cn-gold); box-shadow: 0 0 12px rgba(255, 201, 74, 0.35); }
.cn-task-star { width: 2.6em; height: 2.6em; flex: none; padding: 0.3em; border-radius: 50%; background: rgba(12, 8, 38, 0.55); box-sizing: content-box; }
.cn-task-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.25em; }
.cn-task-name { margin: 0; font-weight: 900; color: var(--cn-cream); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cn-task-progress { margin: 0; font-weight: 800; color: var(--cn-gold); }
.cn-task-meter.gs-meter { height: 10px; }
.cn-task-done { margin: 0; flex: none; display: flex; align-items: center; gap: 0.3em; font-weight: 900; color: var(--cn-go); }
.cn-task-check { filter: var(--gs-icon-tint-accent); }

/* 外观 */
/* 外观卡：上面是整座摊棚（绝对定位、等比装进去），下面是名字 + 状态——名字与状态永远露出来 */
.cn-look-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  box-sizing: border-box;
  padding: 6px 6px 8px;
  border-radius: 18px;
  background: rgba(35, 48, 110, 0.88);
  border: 1.5px solid rgba(111, 139, 224, 0.6);
  color: var(--cn-cream);
  cursor: pointer;
  overflow: hidden;
  font-size: max(11px, calc(var(--u) * 1.5));
}
.cn-look-card.is-using { border-color: var(--cn-gold); box-shadow: 0 0 16px rgba(255, 201, 74, 0.55); }
.cn-look-card.is-locked .cn-look-art, .cn-look-card.is-locked .cn-look-keeper { filter: saturate(0.3) brightness(0.7); }
.cn-look-art { position: absolute; left: 10%; width: 80%; top: 6px; bottom: 3.9em; height: auto; object-fit: contain; object-position: center bottom; }
/* 摊主站在柜台前（脚落在名字带上沿），不站到雨棚顶上 */
.cn-look-keeper { position: absolute; left: 30%; width: 40%; bottom: 3.6em; height: 40%; object-fit: contain; object-position: center bottom; }
.cn-look-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4em; border-top: 1px solid rgba(255, 201, 74, 0.35); background: rgba(16, 20, 62, 0.94); pointer-events: none; }
.cn-look-name { position: relative; z-index: 1; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cn-look-status { position: relative; z-index: 1; padding: 0.15em 0.7em; border-radius: 999px; background: rgba(74, 63, 200, 0.9); font-weight: 800; font-size: 0.9em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cn-look-status.is-using { background: var(--cn-gold); color: var(--cn-text-dark); }
.cn-look-status.is-locked { background: transparent; color: var(--cn-muted); }
.cn-look-lock { position: absolute; z-index: 1; top: 8px; right: 8px; width: 1.8em; height: 1.8em; }

/* 帮助 */
.cn-help-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 6px 12px;
  box-sizing: border-box;
  color: var(--cn-cream);
  font-size: max(13px, calc(var(--u) * 1.65));
  line-height: 1.4;
}
.cn-help-section { margin-bottom: 14px; }
.cn-help-h { margin: 0 0 6px; font-size: 1.15em; font-weight: 900; color: var(--cn-gold); }
.cn-help-p { margin: 0 0 6px; }
.cn-help-q { margin: 8px 0 2px; font-weight: 900; color: var(--cn-paper); }
.cn-diagram { margin: 8px 0; padding: 8px; border-radius: 16px; background: rgba(36, 26, 99, 0.7); border: 1px solid rgba(185, 138, 192, 0.6); }
.cn-diagram-street { display: flex; gap: 6px; justify-content: center; }
.cn-diagram-cell {
  position: relative;
  width: 54px;
  height: 84px;
  border-radius: 10px;
  display: grid;
  place-items: end center;
}
.cn-diagram-stall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.cn-diagram-cell.is-gap .cn-diagram-stall { opacity: 0.35; }
.cn-diagram-cell.is-lit { box-shadow: 0 0 0 2px var(--cn-cyan), 0 0 12px rgba(69, 233, 255, 0.6); }
.cn-diagram-keeper { position: relative; width: 40px; height: 40px; object-fit: contain; margin-bottom: 22px; }
.cn-diagram-drop { position: absolute; top: -18px; animation: cn-drop 1.6s ease-in-out infinite; }
.cn-help-body { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); }
:root[data-reduced-motion='on'] .cn-diagram-drop { animation: none; top: 4px; }
@keyframes cn-drop { 0%, 30% { transform: translateY(0); opacity: 0.4; } 60%, 100% { transform: translateY(30px); opacity: 1; } }
.cn-diagram-orders { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.cn-diagram-order { display: flex; gap: 2px; padding: 4px 8px; border-radius: 12px; background: var(--cn-paper); }
.cn-diagram-food { width: 32px; height: 32px; object-fit: contain; }

/* 错误页（screen-17）：背景 mode:none = 纯渐变（加载失败时背景图可能根本没到） */
.cn-screen--error { text-align: center; background: linear-gradient(180deg, var(--cn-night), var(--cn-dusk)); }
.cn-error-art { object-fit: contain; filter: saturate(0.4) brightness(0.9); pointer-events: none; }
.cn-error-title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 max(18px, calc(var(--u) * 3)) / 1.15 var(--cn-font);
  color: var(--cn-paper);
}
.cn-error-body {
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  color: var(--cn-muted);
  font: 600 max(13px, calc(var(--u) * 1.9)) / 1.35 var(--cn-font);
}
/* 连 ui.mjs 都没拿到时（runtime/en/index.html 静态兜底）分区由 screen-rects.mjs 现算；那份也拿不到时才退回居中排版 */
.cn-screen--error.is-static:not([data-placed]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
}
.cn-screen--error.is-static:not([data-placed]) .cn-error-art { width: 40%; max-width: 200px; }

/* 手机横屏（高 ≤ 560，画布不锁）：字号按短边收一点，分区由 SCREEN_SPEC 横屏矩形摆 */
@media (orientation: landscape) and (max-height: 560px) {
  .cn-safe { --u: calc(var(--sw) * 1.9); }
  .cn-moon { width: 26px; height: 26px; }
}

/* 短竖屏（站点盒子 342×403）：画布不锁、按比例的分区很矮——ui.mjs 按需切成流式排法，这里只收字号 */
@media (orientation: portrait) and (max-height: 560px) {
  .cn-safe { --u: calc(var(--sw) * 1.15); }
}