/*
 * paper-plane-post 主题（neon-toy-arcade：霓虹只给 UI 与特效，场景是夜街与暖窗）。
 *
 * ① 令牌覆盖（`--gs-*`）——换皮只动这一段，**绝不覆盖 `.gs-*` 选择器**：
 *    覆盖组件选择器会把 44×44 触控下限、安全区、焦点环一起改坏。
 * ② 本作自己的结构类（`.ppp-*`）——分区、舞台、折法栏、街区卡、邮票格这些组件库没有的形态。
 *
 * 版式只有一套：手机竖屏。视口比手机宽时由共用库末尾的「手机画布锁定」把 #app 收成 540×960 居中。
 * 本文件里**没有任何不带 max-height 的 @media (min-width: …)**；手机横屏统一写成
 * `(orientation: landscape) and (max-height: 560px)`（560 的唯一真值是 shared/phone-canvas.json），
 * 结构性的横屏重排则挂在 `#app[data-orient='landscape']` 上——朝向由 ui.mjs 量 #app 的矩形得出，
 * 不读视口（桌面上视口是横的、画布是竖的）。
 *
 * **分区的几何不在这里**：每屏的 zones 由 game.config.json（从 SCREEN_SPEC 机械同步）给出，
 * ui.mjs 写成内联百分比。这里只给盒模型与分区里面的排版。
 * 配色取自 ART_PLAN style_tokens.palette（S2 冻结）。
 */

:root {
  /* ══════════ ① 令牌覆盖 ══════════ */
  --gs-ink: #fbf8f0;                              /* paper */
  --gs-ink-soft: rgba(251, 248, 240, 0.78);
  --gs-ink-dim: rgba(220, 216, 245, 0.55);
  --gs-ink-on-light: #1a1633;                     /* ink */
  --gs-surface: rgba(34, 28, 74, 0.92);           /* panel */
  --gs-surface-raised: rgba(38, 30, 88, 0.97);
  --gs-surface-sunken: rgba(13, 11, 36, 0.72);    /* night-0 */
  --gs-hairline: rgba(53, 242, 255, 0.42);        /* cyan */
  --gs-accent: #35f2ff;
  --gs-accent-2: #d92f86;
  --gs-gold: #ffd66b;                             /* glow-1 */
  --gs-danger: #ff4d6a;
  --gs-glow-accent: 0 0 0 1px rgba(53, 242, 255, 0.55), 0 0 24px rgba(53, 242, 255, 0.32);
  --gs-glow-gold: 0 0 22px rgba(255, 185, 56, 0.55);
  --gs-shadow-card: 0 18px 40px rgba(6, 4, 20, 0.55);
  --gs-shadow-button: 0 5px 0 rgba(90, 10, 60, 0.55), 0 0 22px rgba(255, 79, 163, 0.45);
  --gs-shadow-press: 0 2px 0 rgba(6, 4, 20, 0.5), 0 6px 14px rgba(6, 4, 20, 0.45);
  --gs-cta: linear-gradient(180deg, #ff8fcb 0%, #ff4fa3 48%, #e03587 100%);   /* 霓虹粉胶囊 */
  --gs-radius-md: 18px;
  --gs-radius-lg: 28px;
  --gs-text-hero: 46px;
  --gs-bg-focus: 50% 30%;
  /* 底部安全区至少留 24px（SPEC safe_area：底部按钮离安全区下沿 ≥ 24 CSS px）。 */
  --gs-safe-bottom: max(env(safe-area-inset-bottom, 0px), 24px);

  /* ══════════ 本作的色板（画布 render.mjs 用同一组值） ══════════ */
  --ppp-night0: #0d0b24;
  --ppp-night1: #1b1747;
  --ppp-night2: #34286e;
  --ppp-panel: #221c4a;
  --ppp-cyan: #35f2ff;
  --ppp-pink: #ff4fa3;
  --ppp-lit: #ffd66b;
  --ppp-glow: #ffb938;
  --ppp-lime: #b6ff4a;
  --ppp-paper: #fbf8f0;
  --ppp-ink: #1a1633;
  --ppp-violet: #8a6eff;
}

/* 深色按钮上的图标是白的；霓虹粉主按钮上的图标要是墨色（只改变量，不改 .gs-icon）。 */
.ppp-ico-dark { --gs-icon-tint: brightness(0) saturate(100%) invert(8%) sepia(28%) saturate(2400%) hue-rotate(230deg); }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--ppp-night0);
  color: var(--gs-ink);
  font-family: 'Avenir Next Rounded', 'Nunito', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

/* 手机画布根容器：position: fixed; inset: 0 是共用库那套锁定的前提。 */
#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ppp-night0) 0%, var(--ppp-night1) 55%, #2a1d52 100%);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#app [hidden] { display: none !important; }

.ppp-screen *, .ppp-screen *::before, .ppp-screen *::after { box-sizing: border-box; }

.ppp-bg { z-index: 0; }
.ppp-scenes, .ppp-overlays { position: absolute; inset: 0; }
.ppp-scenes { z-index: 1; }
.ppp-overlays { z-index: 5; pointer-events: none; }
.ppp-overlays > .ppp-screen { pointer-events: auto; }

.ppp-screen {
  position: absolute;
  inset: 0;
  color: var(--gs-ink);
}

/* 分区层：inset 就是安全区，里面每个分区按 zones 的 0~1 比例定位（百分比由 ui.mjs 写成内联）。 */
.ppp-zones {
  position: absolute;
  top: var(--gs-safe-top);
  right: var(--gs-safe-right);
  bottom: var(--gs-safe-bottom);
  left: var(--gs-safe-left);
}

.ppp-zone {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 0 14px;
}

.ppp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
  overflow: visible;
}

.ppp-heading {
  margin: 0;
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-shadow: 0 0 14px rgba(138, 110, 255, 0.85), 0 2px 0 rgba(13, 11, 36, 0.8);
}

.ppp-subheading {
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--gs-ink-soft);
}

.ppp-btn__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ppp-btn__inner img { width: 22px; height: 22px; flex: none; }

.ppp-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.ppp-row > button {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 6px;
  font-size: 13px;
}

.ppp-row > button .ppp-btn__inner { gap: 5px; }
.ppp-row > button .ppp-btn__inner img { width: 18px; height: 18px; }

/* ════════════════════════ 游玩屏 ════════════════════════ */

.ppp-screen--play .ppp-zone { padding: 0; }

.ppp-screen--play .ppp-zone--hud {
  padding: 0 10px;
  background: linear-gradient(180deg, rgba(27, 23, 71, 0.92), rgba(27, 23, 71, 0.55));
  border-bottom: 1px solid rgba(53, 242, 255, 0.55);
  box-shadow: 0 1px 12px rgba(53, 242, 255, 0.18);
}

.ppp-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
}

.ppp-hud__score {
  min-width: 56px;
  font-size: 26px;
  font-weight: 900;
  color: var(--ppp-lit);
  text-shadow: 0 0 12px rgba(255, 185, 56, 0.7), 0 2px 0 rgba(90, 40, 0, 0.6);
  font-variant-numeric: tabular-nums;
}

.ppp-hud__streak,
.ppp-hud__chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.ppp-hud__streak {
  background: var(--ppp-pink);
  color: var(--ppp-ink);
  box-shadow: 0 0 12px rgba(255, 79, 163, 0.6);
}

.ppp-hud__chip {
  background: rgba(47, 111, 220, 0.4);
  border: 1.5px solid rgba(53, 242, 255, 0.7);
}

.ppp-hud__chip--daily { border-color: var(--ppp-pink); background: rgba(255, 79, 163, 0.18); }

.ppp-hud__spacer { flex: 1 1 auto; }

.ppp-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

/* 舞台上的一切提示层都不吃指针：手指落在哪儿，命中测试都得是舞台本身。 */
.ppp-stage-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ppp-coach-anchor { position: absolute; }

.ppp-bubble {
  position: absolute;
  transform: translate(-50%, -100%);
  width: max-content;
  max-width: 78%;
  padding: 8px 14px;
  border-radius: 16px;
  background: var(--ppp-paper);
  color: var(--ppp-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 6px 18px rgba(6, 4, 20, 0.5);
}

.ppp-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}

.ppp-toast {
  position: absolute;
  transform: translate(-50%, 0);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(60, 63, 76, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.ppp-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: 900;
  white-space: nowrap;
  animation: ppp-pop 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ppp-pop--delivered b {
  display: block;
  font-size: 24px;
  color: var(--ppp-lit);
  text-shadow: 0 0 12px rgba(255, 185, 56, 0.9), 0 2px 0 #8a4b12;
}

.ppp-pop__gain {
  display: block;
  font-size: 28px;
  color: #fff;
  text-shadow: 0 0 10px var(--ppp-cyan), 0 2px 0 var(--ppp-ink);
}

.ppp-pop--express { font-size: 16px; color: var(--ppp-cyan); text-shadow: 0 0 8px rgba(53, 242, 255, 0.8); }
.ppp-pop--missed { font-size: 20px; color: #d6d1f2; text-shadow: 0 2px 0 var(--ppp-ink); }
.ppp-pop--returned { font-size: 22px; font-style: italic; color: #ff4d6a; text-shadow: 0 2px 0 var(--ppp-ink), 0 0 10px rgba(255, 77, 106, 0.6); }

@keyframes ppp-pop {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.7); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -70%) scale(1); }
}

.ppp-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px;
  transform: skewY(-4deg);
  background: linear-gradient(90deg, rgba(11, 26, 58, 0.15), rgba(11, 26, 58, 0.94) 18%, rgba(11, 26, 58, 0.94) 82%, rgba(11, 26, 58, 0.15));
  border-block: 2px solid #1bc9d8;
  box-shadow: 0 0 24px rgba(27, 201, 216, 0.45);
  animation: ppp-sweep 1s ease-out both;
}

.ppp-banner__lead { font-size: 15px; font-weight: 800; color: #d6fbff; text-shadow: 0 0 8px rgba(53, 242, 255, 0.7); }
.ppp-banner__block { font-size: 34px; font-weight: 900; color: #ffd24d; text-shadow: 0 2px 0 #7a4a00, 0 0 14px rgba(255, 210, 77, 0.6); }

@keyframes ppp-sweep {
  from { opacity: 0; transform: skewY(-4deg) translateX(-30%); }
  to { opacity: 1; transform: skewY(-4deg) translateX(0); }
}

/* 离线横条：嵌在舞台顶部，不是模态（screen-19）。它自己要吃指针（关闭键）。 */
.ppp-offline {
  position: absolute;
  top: 6px;
  left: 8px;
  right: 8px;
  pointer-events: none;
}

.ppp-offline button { pointer-events: auto; }

/* ── 折法栏：整条就是 fold-bar，卡片离上沿留出内边距（上沿那一行归折法栏本身，§6.1 boundary-press） ── */
.ppp-foldbar {
  position: relative;
  display: flex;
  gap: 8px;
  width: 100%;
  height: 100%;
  /* 上沿留 18px：Chromium 的触摸目标校正会把落在栏沿、却离卡片不到十几像素的手指吸到卡片上，
     而 §6.1 boundary-press 要求那一行归折法栏本身（按了不选折法、不投出）。 */
  padding: 18px 8px 4px;
  background: linear-gradient(180deg, rgba(13, 11, 36, 0.3), rgba(13, 11, 36, 0.82));
  border-top: 1px solid rgba(53, 242, 255, 0.35);
  touch-action: none;
}

.ppp-fold {
  position: relative;
  flex: 1 1 0;
  min-width: 64px;
  min-height: 64px;
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: 'plane name' 'hint hint';
  align-content: start;
  gap: 2px 6px;
  padding: 7px 8px;
  border: 2px solid rgba(53, 242, 255, 0.5);
  border-radius: 18px;
  background: #241f4a var(--ppp-ui-card-fold-idle) center / 100% 100% no-repeat;
  color: var(--gs-ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease-out, box-shadow 100ms ease-out;
}

.ppp-fold:active { transform: scale(0.96); }

.ppp-fold[data-state='selected'] {
  border-color: var(--ppp-lit);
  background-image: var(--ppp-ui-card-fold-selected);
  box-shadow: 0 0 0 1px var(--ppp-lit), 0 0 18px rgba(255, 214, 107, 0.55);
  transform: translateY(-2px);
}

.ppp-fold[data-state='locked'] {
  background-image: var(--ppp-ui-card-fold-locked);
  border-color: rgba(160, 150, 200, 0.4);
  cursor: default;
}

.ppp-fold__plane { grid-area: plane; width: 30px; height: 30px; object-fit: contain; }
.ppp-fold__text { display: contents; }
.ppp-fold__name { grid-area: name; align-self: center; font-size: 15px; font-weight: 900; }
.ppp-fold__hint { grid-area: hint; font-size: 10.5px; line-height: 1.2; color: var(--gs-ink-soft); }

/* 锁着的卡：说明那一行换成「锁 + 解锁等级」，不叠在文字上（卡片照样看得见、照样说得出是什么）。 */
.ppp-fold__lock {
  grid-area: hint;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 900;
  color: #d9d4f5;
}

.ppp-fold[data-state='locked'] .ppp-fold__hint { display: none; }
.ppp-fold[data-state='locked'] .ppp-fold__plane { filter: grayscale(1) brightness(0.7); }

.ppp-fold__lock img { width: 18px; height: 18px; }

/* 拖进折法栏时的收回区：盖住整条栏，不吃指针，底下的卡片暂时压暗。 */
.ppp-cancel {
  position: absolute;
  inset: 3px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 2px dashed var(--ppp-cyan);
  border-radius: 18px;
  background: rgba(10, 15, 25, 0.8);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
}

/* ── 横屏状态条（风袋 / 邮戳环 / 信封） ── */
.ppp-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  border-radius: 16px;
  background: rgba(13, 11, 36, 0.6);
  border: 1px solid rgba(53, 242, 255, 0.3);
}

.ppp-status__wind { display: flex; align-items: center; gap: 4px; }
.ppp-status__sock { width: 46px; height: 46px; object-fit: contain; }
.ppp-status__sock[data-dir='left'] { transform: scaleX(-1); }
.ppp-status__chev { display: flex; gap: 1px; }
.ppp-status__chev img { width: 16px; height: 16px; transform: rotate(-90deg); }
.ppp-status__chev[data-dir='left'] img { transform: rotate(90deg); }

.ppp-status__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(var(--ppp-cyan) var(--ppp-ring, 360deg), rgba(255, 255, 255, 0.14) 0);
}

.ppp-status__ring::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--ppp-ink);
}

.ppp-status__ring b { position: relative; font-size: 18px; font-weight: 900; }
.ppp-status__ring[data-warn='true'] { background: conic-gradient(#ff4d6a var(--ppp-ring, 360deg), rgba(255, 255, 255, 0.14) 0); }
.ppp-status__ring[data-warn='true'] b { color: #ff4d6a; }
.ppp-status__env { display: flex; gap: 4px; }
.ppp-status__env img { width: 28px; height: 21px; object-fit: contain; }

/* ════════════════════════ 标题（screen-02 / 21） ════════════════════════ */

.ppp-titlehud {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
}

.ppp-rank {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6b3fc2, #45238a);
  border: 1.5px solid rgba(255, 214, 107, 0.7);
  font-size: 13px;
  white-space: nowrap;
}

.ppp-rank img { width: 18px; height: 18px; --gs-icon-tint: var(--gs-icon-tint-gold); }
.ppp-titlehud .gs-meter { flex: 1 1 auto; min-width: 0; }

/* 英雄区两栏：左边标志 + 游戏名，右边邮差——邮差不许压到字上。 */
.ppp-screen--title .ppp-zone--hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas: 'logo postie' 'title postie';
  align-content: center;
  align-items: center;
  justify-items: center;
  gap: 2px 4px;
  overflow: hidden;
}

.ppp-screen--title .ppp-hero__logo { grid-area: logo; }
.ppp-screen--title .ppp-hero__title { grid-area: title; font-size: 30px; }

.ppp-hero__logo { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(255, 79, 163, 0.55)); }
.ppp-hero__logo--big { width: 132px; height: 132px; }

.ppp-hero__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  color: var(--ppp-paper);
  text-shadow: 0 0 2px #fff, 0 0 14px var(--ppp-pink), 0 0 26px rgba(53, 242, 255, 0.6), 0 3px 0 #5a1a4a;
}

.ppp-hero__postie {
  grid-area: postie;
  align-self: end;
  height: 92%;
  max-height: 170px;
  max-width: 150px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(6, 4, 20, 0.6));
}

.ppp-screen--title .ppp-zone--info { justify-content: stretch; }

.ppp-title-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.ppp-title-info__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  min-width: 0;
}

.ppp-streetrow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 12px;
  border: 1.5px solid rgba(53, 242, 255, 0.55);
  border-radius: 16px;
  background: rgba(22, 50, 79, 0.88);
  color: var(--gs-ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ppp-streetrow__name { font-size: 14px; white-space: nowrap; }
.ppp-streetrow__best { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 800; color: var(--ppp-lit); }
.ppp-streetrow__go { width: 16px; height: 16px; transform: rotate(180deg); }

.ppp-errands {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  padding: 6px 10px;
  border: 1.5px solid rgba(53, 242, 255, 0.45);
  border-radius: 16px;
  background: rgba(22, 50, 79, 0.82);
}

.ppp-errands__title { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ppp-errands__title img { width: 16px; height: 16px; }
.ppp-errand { display: flex; align-items: center; gap: 8px; }

.ppp-errand__ring {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: conic-gradient(var(--ppp-lime) var(--ppp-ring, 0deg), rgba(255, 255, 255, 0.16) 0);
}

.ppp-errand__ring::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--ppp-ink); }
.ppp-errand__ring b { position: relative; font-size: 8.5px; font-weight: 900; }
.ppp-errand__text { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 1.2; }
.ppp-errand__text small { font-size: 10px; color: var(--ppp-glow); }

.ppp-daily {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 6px;
  border: 2px solid var(--ppp-pink);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(64, 22, 70, 0.9), rgba(34, 18, 60, 0.9));
  box-shadow: 0 0 14px rgba(255, 79, 163, 0.35);
  color: var(--gs-ink);
  font-family: inherit;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}

.ppp-daily--done { border-color: var(--ppp-lime); box-shadow: 0 0 14px rgba(182, 255, 74, 0.35); }
.ppp-daily__best { font-size: 12px; font-weight: 800; color: var(--ppp-lit); }

.ppp-stamp {
  display: block;
  flex: none;
  width: 56px;
  height: 56px;
  background-size: 700% 400%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 4px rgba(6, 4, 20, 0.5));
}

.ppp-screen--title .ppp-zone--play { gap: 12px; }
/* 三枚次按钮：图标在上、字在下，窄屏不折行成两截。 */
.ppp-row--three > button .ppp-btn__inner { flex-direction: column; gap: 2px; }
.ppp-row--three > button { padding-block: 6px; font-size: 12px; line-height: 1.1; }
.ppp-errands { flex: 0 1 auto; }
.ppp-daily .ppp-stamp { width: 72px; height: 72px; }
.ppp-streetrow__best { line-height: 1.15; }
.ppp-screen--title [data-role='play'] { min-height: 58px; font-size: 21px; }
.ppp-screen--title [data-role='play'] .ppp-btn__inner img { width: 26px; height: 26px; }

/* ════════════════════════ 加载（screen-01）与错误（screen-18） ════════════════════════ */

.ppp-screen--loading .ppp-zone--hero,
.ppp-screen--loading .ppp-zone--info,
.ppp-screen--loading .ppp-zone--play { align-items: center; }

.ppp-folding {
  width: 104px;
  height: 104px;
  flex: none;
  background-size: 400% 100%;
  background-repeat: no-repeat;
  animation: ppp-fold 1.2s steps(4) infinite;
}

@keyframes ppp-fold { from { background-position: 0 0; } to { background-position: 133.333% 0; } }

.ppp-screen--loading .gs-meter { width: 72%; }
.ppp-loading__label { margin: 0; font-size: 18px; font-weight: 800; color: #dcd8f5; }

/* 启动失败页：配置都没读到时的兜底版式（读到配置就被内联的 zones 覆盖）。 */
.ppp-screen--error .ppp-zone--hero { inset: 0 0 38% 0; align-items: center; }
.ppp-screen--error .ppp-zone--info { top: 62.5%; left: 0; width: 100%; height: 17%; text-align: center; }
.ppp-screen--error .ppp-zone--play { top: 80%; left: 0; width: 100%; height: 20%; }
.ppp-error__art { max-width: 88%; max-height: 100%; margin: 0 auto; object-fit: contain; }
.ppp-error__body { margin: 0; font-size: 15px; color: #c9d6ff; }

/* ════════════════════════ 浮层 ════════════════════════ */

.ppp-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 24, 0.62);
  backdrop-filter: blur(5px);
}

.ppp-panel {
  position: absolute;
  inset: calc(var(--gs-safe-top) + 4px) 6px calc(var(--gs-safe-bottom) - 16px) 6px;
  border: 2px solid rgba(138, 110, 255, 0.85);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%),
    linear-gradient(180deg, rgba(43, 33, 96, 0.97), rgba(24, 18, 60, 0.97));
  box-shadow: 0 0 26px rgba(138, 110, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.ppp-screen[data-kind='overlay'] .ppp-zone--info { justify-content: flex-start; overflow-y: auto; padding-block: 4px; }
.ppp-screen[data-kind='overlay'] .ppp-zone--play { justify-content: center; }

/* 暂停 / 设置：面板半透明，背后冻结的舞台看得见；设置行在信息区里居中，不在上半截堆成一团。 */
.ppp-screen--pause .ppp-panel,
.ppp-screen--settings .ppp-panel { opacity: 0.9; }
.ppp-screen--pause .ppp-zone--info,
.ppp-screen--settings .ppp-zone--info { justify-content: center; }
.ppp-screen--pause .ppp-zone--play { justify-content: flex-start; padding-top: 8px; }
[data-role='language']::after { content: '›'; margin-left: 4px; font-size: 22px; line-height: 1; color: var(--gs-ink-soft); }

/* 暂停 / 设置 */
.ppp-settings { display: flex; flex-direction: column; gap: 8px; }

.ppp-setting {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(13, 11, 36, 0.55);
  color: var(--gs-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.ppp-setting img { width: 22px; height: 22px; --gs-icon-tint: var(--gs-icon-tint-accent); }
.ppp-setting__label { flex: 1 1 auto; text-align: left; }
.ppp-toggle__state { font-size: 13px; color: var(--gs-ink-soft); }

.ppp-toggle {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #4a4a5e;
}

.ppp-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #cfcde0;
  transition: left 120ms ease-out;
}

.ppp-setting[aria-checked='true'] .ppp-toggle { background: var(--ppp-cyan); box-shadow: 0 0 10px rgba(53, 242, 255, 0.6); }
.ppp-setting[aria-checked='true'] .ppp-toggle::after { left: 23px; background: #fff; }

.ppp-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.ppp-lang {
  min-height: 44px;
  border: 1px solid rgba(53, 242, 255, 0.4);
  border-radius: 14px;
  background: rgba(13, 11, 36, 0.55);
  color: var(--gs-ink);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.ppp-lang[aria-pressed='true'] { border-color: var(--ppp-lit); color: var(--ppp-lit); }

/* 窄高分区可滚动，标题与标签始终保留。 */
.ppp-screen--help .ppp-zone--hud { container-type: size; gap: 8px; overflow: auto; justify-content: flex-start; }
.ppp-heading--help { font-size: 18px; line-height: 18px; flex: none; }
.ppp-tabs { flex: none; }

.ppp-tabs { display: flex; gap: 8px; width: 100%; }

.ppp-tab {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 6px;
  border: 1.5px solid var(--ppp-cyan);
  border-radius: 999px;
  background: rgba(13, 11, 36, 0.62);
  color: var(--gs-ink);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.ppp-tab[aria-selected='true'] { background: #bff8ff; color: var(--ppp-ink); box-shadow: 0 0 12px rgba(53, 242, 255, 0.5); }

.ppp-help { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.ppp-help__figure { width: 100%; height: 118px; flex: none; border: 2px solid var(--ppp-cyan); border-radius: 16px; background: rgba(13, 11, 36, 0.6); }
.ppp-help__item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; }
.ppp-help__item p { margin: 0; }
.ppp-help__item img { width: 22px; height: 22px; flex: none; margin-top: 1px; --gs-icon-tint: var(--gs-icon-tint-accent); }
.ppp-help__item--lead { color: #ffd34d; font-style: italic; }
.ppp-help__item--faq { flex-direction: column; gap: 2px; }
.ppp-help__item--faq p { font-size: 13px; color: var(--gs-ink-soft); }

/* 换街区 */
.ppp-streets { display: flex; flex-direction: column; gap: 8px; }

.ppp-street {
  display: grid;
  grid-template-columns: 34% 1fr;
  min-height: 84px;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(53, 242, 255, 0.45);
  border-radius: 18px;
  background: rgba(30, 26, 62, 0.96);
  color: var(--gs-ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ppp-street__art { background-size: cover; background-position: center 38%; }
.ppp-street__text { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; padding: 8px 10px; font-size: 12px; }
.ppp-street__text b { font-size: 18px; }
.ppp-street__text small { color: var(--gs-ink-soft); line-height: 1.25; }
.ppp-street__best { font-size: 13px; font-weight: 800; color: var(--ppp-lit); }
.ppp-street__lock { display: flex; align-items: center; gap: 4px; font-weight: 800; color: #b9b3d9; }
.ppp-street__lock img { width: 16px; height: 16px; }
.ppp-street--selected { border-color: #f5c542; box-shadow: 0 0 16px rgba(245, 197, 66, 0.45); }
.ppp-street--daily { border-color: var(--ppp-pink); }
.ppp-street[aria-disabled='true'] { filter: saturate(0.3) brightness(0.8); cursor: default; }

/* 邮票册 */
.ppp-screen--album .ppp-zone--info,
.ppp-screen--patterns .ppp-zone--info { container-type: size; align-items: center; }

.ppp-album {
  display: grid;
  grid-template-columns: repeat(4, min(19cqw, 10.5cqh));
  grid-auto-rows: min(19cqw, 10.5cqh);
  gap: min(1.6cqw, 1.2cqh);
  justify-content: center;
}

.ppp-album__cell {
  display: block;
  border-radius: 8px;
  background: #efe5cb center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(122, 96, 60, 0.3);
}

.ppp-album__cell .ppp-stamp { width: 100%; height: 100%; }
.ppp-empty { margin: 0; text-align: center; color: var(--gs-ink-soft); font-size: 14px; }

.ppp-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  font-size: 13px;
  text-align: center;
}

.ppp-next .gs-meter { width: 70%; }

/* 纸样 */
.ppp-preview {
  display: grid;
  place-items: center;
  width: 100%;
  height: min(26cqh, 130px);
  flex: none;
  background: radial-gradient(circle at 50% 60%, rgba(53, 242, 255, 0.35), transparent 62%);
}

.ppp-preview__plane { height: 88%; object-fit: contain; animation: ppp-bob 3s ease-in-out infinite; }
@keyframes ppp-bob { 50% { transform: translateY(-6px) rotate(-4deg); } }

.ppp-patterns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }

.ppp-pattern {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 76px;
  padding: 4px;
  border: 2px solid rgba(53, 242, 255, 0.35);
  border-radius: 16px;
  background: rgba(42, 37, 80, 0.96);
  color: var(--gs-ink);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ppp-pattern img { width: 42px; height: 42px; object-fit: contain; }
.ppp-pattern--on { border-color: #22d3ee; box-shadow: 0 0 14px rgba(34, 211, 238, 0.5); }
.ppp-pattern[aria-disabled='true'] { cursor: default; }
.ppp-pattern[aria-disabled='true'] > img { filter: grayscale(1) brightness(0.5); }
.ppp-pattern__lock { display: flex; align-items: center; gap: 3px; color: #b9b3d9; }
.ppp-pattern__lock img { width: 14px; height: 14px; }

.ppp-variants { display: flex; gap: 8px; justify-content: center; }

.ppp-variant {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: linear-gradient(135deg, #fbf8f0 0 45%, #35f2ff 45% 100%);
  filter: hue-rotate(var(--ppp-hue, 0deg));
  cursor: pointer;
}

.ppp-variant[aria-pressed='true'] { outline: 3px solid var(--ppp-lit); outline-offset: 2px; }

/* ════════════════════════ 结算（screen-13 / 14 / 15） ════════════════════════ */

.ppp-screen--result .ppp-scrim { background: rgba(8, 6, 24, 0.5); }
.ppp-screen--result .ppp-zone--hud { gap: 2px; }
.ppp-result__title { margin: 0; text-align: center; font-size: 24px; font-weight: 900; line-height: 1.15; text-shadow: 0 0 12px rgba(138, 110, 255, 0.8); }
.ppp-result__hero { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ppp-result__side { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

.ppp-ribbon {
  padding: 4px 14px;
  background: linear-gradient(180deg, #ffe27a, #f5b93a);
  color: #3a2300;
  font-size: 12px;
  font-weight: 900;
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
}

.ppp-result__best { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; font-weight: 800; color: #7fd9ff; }
.ppp-result__best img { width: 16px; height: 16px; --gs-icon-tint: var(--gs-icon-tint-accent); }

.ppp-misses {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 2px solid var(--ppp-pink);
  border-radius: 18px;
  background: rgba(27, 20, 64, 0.88);
  box-shadow: 0 0 14px rgba(255, 79, 163, 0.3);
}

.ppp-misses__title { font-size: 14px; }
.ppp-misses__board { position: relative; height: 150px; }
.ppp-misses__map { display: block; width: 100%; height: 100%; }
.ppp-misses__labels { position: absolute; inset: 0; pointer-events: none; }

.ppp-cause {
  position: absolute;
  transform: translate(-50%, 0);
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: var(--ppp-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.ppp-cause--timeout { border-color: #ff4d6a; color: #ffb3c0; }
.ppp-cause--row { transform: none; }

.ppp-stats { display: grid; flex: none; grid-template-columns: 1fr 1fr; gap: 8px; }

.ppp-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  padding: 6px 12px;
  border: 1.5px solid rgba(53, 242, 255, 0.5);
  border-radius: 14px;
  background: rgba(22, 50, 79, 0.88);
}

.ppp-stat img { grid-row: span 2; width: 22px; height: 22px; --gs-icon-tint: var(--gs-icon-tint-accent); }
.ppp-stat b { font-size: 20px; color: var(--ppp-lit); }
.ppp-stat small { font-size: 11px; color: var(--gs-ink-soft); }

.ppp-strips { display: flex; flex: none; flex-direction: column; gap: 6px; }

.ppp-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.ppp-strip img { width: 18px; height: 18px; flex: none; }
.ppp-strip--rank { border-color: #f5c542; background: rgba(120, 90, 10, 0.4); }
.ppp-strip--unlock { border-color: #5aa8ff; background: rgba(20, 60, 120, 0.45); }
.ppp-strip--errand { border-color: var(--ppp-lime); background: rgba(40, 90, 20, 0.45); }
.ppp-strip--tip { border-color: var(--ppp-violet); background: rgba(70, 50, 140, 0.45); }

.ppp-stampnote {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1.5px solid #00d9ff;
  border-radius: 14px;
  background: rgba(0, 60, 80, 0.5);
  font-size: 13px;
  font-weight: 700;
}

.ppp-stampnote .ppp-stamp { width: 48px; height: 48px; }
.ppp-stampnote--new .ppp-stamp { animation: ppp-slam 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes ppp-slam { from { opacity: 0; transform: scale(2.2) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(-6deg); } }

.ppp-sharelink { margin: 0; font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.ppp-sharelink__url { color: var(--ppp-cyan); }
.ppp-copied { margin: 0; text-align: center; font-size: 14px; font-weight: 800; color: var(--ppp-lime); }

/* ════════════════════════ 横屏（手机的一个朝向，不是桌面） ════════════════════════ */

#app[data-orient='landscape'] .ppp-foldbar {
  flex-direction: column;
  padding: 4px 6px 4px 18px;
  border-top: 0;
  border-left: 1px solid rgba(53, 242, 255, 0.35);
}

#app[data-orient='landscape'] .ppp-fold {
  grid-template-columns: 40px auto minmax(0, 1fr);
  grid-template-rows: 1fr;
  grid-template-areas: 'plane name hint';
  align-content: center;
  align-items: center;
  gap: 0 8px;
}

#app[data-orient='landscape'] .ppp-fold__plane { width: 40px; height: 40px; }
#app[data-orient='landscape'] .ppp-screen--play .ppp-zone--hud { border-bottom: 0; border-radius: 0 0 0 16px; }
#app[data-orient='landscape'] .ppp-hero__postie { height: 40%; }
#app[data-orient='landscape'] .ppp-screen--title .ppp-zone--hero { justify-content: flex-start; padding-top: 12px; }
#app[data-orient='landscape'] .ppp-album { grid-template-columns: repeat(7, min(12cqw, 20cqh)); grid-auto-rows: min(12cqw, 20cqh); }
#app[data-orient='landscape'] .ppp-panel { inset: 4px; }

@media (orientation: landscape) and (max-height: 560px) {
  .ppp-hud__score { font-size: 22px; }
  .ppp-hero__title { font-size: 28px; }
  .ppp-heading { font-size: 22px; }
  .ppp-result__title { font-size: 20px; }
  .ppp-misses__board { height: 120px; }
}

/* ════════════════════════ 减少动态 ════════════════════════
   系统开关或设置开关（ui.mjs 在 <html> 上写 data-motion）：去掉弹字、横幅、盖章、折纸与预览的动画；
   信息（航迹、风向、邮戳环、亮区宽度）照旧画在画布上，判定与时长一律不变（§10.5）。 */
:root[data-motion='reduce'] [class*='ppp-'] { animation: none !important; transition: none !important; }
:root[data-motion='reduce'] .ppp-folding { background-position: 100% 0; }

/* 逐屏复核：保持各屏自己的插画构图，同时仍服从冻结 zones。 */
.ppp-hero__facade {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.65;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 35%);
}
.ppp-screen--title .ppp-hero__logo,
.ppp-screen--title .ppp-hero__postie { position: relative; }
.ppp-screen--pause .ppp-panel { background: rgba(27,23,71,0.42); }
.ppp-screen--pause .ppp-scrim { backdrop-filter: none; background: rgba(8,6,24,0.3); }
.ppp-screen--result .ppp-panel { background: transparent; border: 0; box-shadow: none; }
.ppp-screen--result .ppp-scrim {
  backdrop-filter: none;
  background: linear-gradient(#0d0b2477, #0d0b24bb), var(--ppp-bg-city-far) center / cover;
}
.ppp-screen--result .ppp-zone--info { container-type: size; }
.ppp-stampnote .ppp-stamp,
.ppp-empty-stamp { width: 76px; height: 76px; flex: none; object-fit: contain; }
.ppp-screen--result[data-daily='true'] .ppp-misses__board { height: min(30cqh, 150px); }
.ppp-screen--result .ppp-zone--side { overflow: auto; }
.ppp-preview { height: 32cqh; background-size: cover; background-position: center; border-radius: 18px; }
.ppp-pattern { min-height: 100px; }
.ppp-pattern img { width: 58px; height: 58px; }
.ppp-pattern__lock img { width: 14px; height: 14px; }
.ppp-album {
  flex: none;
  padding: 10px 12px;
  border: 3px solid #a77649;
  border-radius: 12px;
  background: linear-gradient(90deg, #c6a475, #f6e9c9 8%, #e4cda5);
  box-shadow: -5px 4px 0 #644067, 0 5px 16px #0008;
  grid-template-columns: repeat(4, min(18cqw, 9cqh));
  grid-auto-rows: min(18cqw, 9cqh);
}
.ppp-album__cell--got { position: relative; }
.ppp-album__cell--got::after {
  content: '';
  position: absolute;
  width: 42%;
  height: 42%;
  right: -5%;
  bottom: -5%;
  border: 2px double #332752;
  border-radius: 50%;
  background: url('assets/icon-play.svg') center / 65% no-repeat;
  transform: rotate(-24deg);
}
.ppp-tab { min-width: 44px; padding-inline: 4px; font-size: 12px; }
.ppp-hud { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 44px; grid-template-rows: 22px 22px; align-content: center; gap: 0 8px; }
.ppp-hud__score { grid-area: 1 / 1 / 3 / 2; }
.ppp-hud__streak { grid-area: 1 / 2; padding: 2px 6px; }
.ppp-hud__chip { grid-area: 2 / 2 / 3 / 4; padding: 2px 6px; }
.ppp-hud__chip--daily { grid-area: 1 / 3; }
.ppp-hud__spacer { display: none; }
.ppp-hud [data-role='pause'] { grid-area: 1 / 4 / 3 / 5; }
.ppp-hud__score { flex-shrink: 1; }
.ppp-hud__chip--daily { font-size: 11px; padding-inline: 4px; }
#app[data-orient='landscape'] .ppp-hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 44px;
  grid-template-rows: 22px 22px;
  gap: 0 8px;
}
#app[data-orient='landscape'] .ppp-hud__score { grid-area: 1 / 1 / 3 / 2; font-size: 18px; }
#app[data-orient='landscape'] .ppp-hud__streak { grid-area: 1 / 2; font-size: 11px; padding: 2px 6px; }
#app[data-orient='landscape'] .ppp-hud__chip { grid-area: 2 / 2 / 3 / 4; font-size: 11px; padding: 2px 6px; }
#app[data-orient='landscape'] .ppp-hud__chip--daily { grid-area: 1 / 3; }
#app[data-orient='landscape'] .ppp-hud__spacer { display: none; }
#app[data-orient='landscape'] .ppp-hud [data-role='pause'] { grid-area: 1 / 4 / 3 / 5; }
#app[data-orient='landscape'] .ppp-screen--title .ppp-zone--info { overflow: auto; }
#app[data-orient='landscape'] .ppp-screen--title .ppp-zone--play { gap: 8px; }
#app[data-orient='landscape'] .ppp-screen--title [data-role='play'] { min-height: 44px; font-size: 18px; }
#app[data-orient='landscape'] .ppp-fold { min-height: 64px; padding-block: 2px; }
#app[data-orient='landscape'] .ppp-foldbar { padding-top: 0; padding-bottom: 0; }

/* ════════════════════════ 矮竖屏（站内嵌入框 342×403 那一档） ════════════════════════
   视口是竖的、却只有 403px 高：画布锁定不生效（高 ≤ 560），竖屏分区原样塞进半屏高度。
   这一档只收**尺寸**，版式、分区顺序、热区一律照旧，不是第二套设计；触控靶守住 44 / 64 不收。
   装不下触控下限的分区由 ui.mjs::fitTapFloors 按实测抬高，这里负责把其余内容收进去；
   标题屏信息区收完仍比分区高，显式改成分区内滚动（走查判据允许并统计的选择）。
   560 与横屏那一档同一个数（shared/phone-canvas.json 的 shortViewportMaxHeightPx）。 */
@media (orientation: portrait) and (max-height: 560px) {
  .ppp-rank { height: 28px; font-size: 12px; }
  .ppp-screen--title .ppp-zone--hero { gap: 0 4px; }
  .ppp-screen--title .ppp-hero__logo { width: 40px; height: 40px; }
  .ppp-screen--title .ppp-hero__title { font-size: 22px; }
  /* 邮差撑满两行栅格会把 hero 顶到 138px；矮档 hero 只有 ~99px，封顶在分区之内。 */
  .ppp-screen--title .ppp-hero__postie { height: auto; max-height: 88px; max-width: 96px; }
  .ppp-screen--title .ppp-zone--info { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .ppp-title-info { height: auto; min-height: 100%; }
  /* 信息区整体在分区里滚，委托卡自己不许再被压扁（压扁就是把最后一行拦腰切掉）。 */
  .ppp-errands { flex: none; }
  /* 站点框只有 342 宽：三张折法卡各 ~103px，30px 图标 + 15px 粗体「Swallow」会顶出卡沿。 */
  .ppp-fold { grid-template-columns: 22px minmax(0, 1fr); gap: 2px 4px; padding-inline: 6px; }
  .ppp-fold__plane { width: 22px; height: 22px; }
  .ppp-fold__name { font-size: 13px; }
  .ppp-daily { gap: 2px; padding: 4px; }
  .ppp-daily .ppp-stamp { width: 48px; height: 48px; }
  .ppp-screen--title .ppp-zone--play { gap: 8px; }
  .ppp-screen--title [data-role='play'] { min-height: 48px; font-size: 19px; }
  .ppp-row--three > button { padding-block: 2px; }
  .ppp-row--three > button .ppp-btn__inner { flex-direction: row; gap: 4px; }
}