/* 大屏端：竖屏 1080×1920 立式触摸机。
   电脑上：屏幕装进立式机外壳，居中，背景是音乐节夜景，两侧放说明。
   真机（竖屏窗口或 ?kiosk=1）：只显示屏幕本身，铺满。 */
html, body { width: 100%; height: 100%; overflow: hidden; background: #050506; }

/* ---------- 演示场景 ---------- */
@property --glow { syntax: "<color>"; inherits: true; initial-value: #e2ff2e; }
#scene { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 100%; align-items: center; overflow: clip; /* 一行就是窗口高度，两侧再长也推不动立式机；clip：程序滚动也推不动外壳 */
  background: #070605; --glow: #e2ff2e; transition: --glow 0.6s var(--ease); }
/* 首次打开时先隐藏，缩放和首屏海报都就绪后淡入 */
#kioskSlot, .side, .scene-dots { transition: opacity 0.35s var(--ease); }
body.booting #kioskSlot, body.booting .side, body.booting .scene-dots { opacity: 0; }
.scene-dots, .scene-haze, .scene-shade { position: absolute; pointer-events: none; }
/* 底：品牌的点阵纹理，越往四周越淡 */
.scene-dots { inset: -3%; background: radial-gradient(circle, rgba(243,243,239,0.11) 1.8px, transparent 2.3px) 0 0 / 30px 30px; transform-origin: 50% 60%;
  -webkit-mask-image: radial-gradient(62% 58% at 50% 52%, #000 10%, transparent 88%); mask-image: radial-gradient(62% 58% at 50% 52%, #000 10%, transparent 88%); }
.scene-haze { inset: 0; mix-blend-mode: screen; opacity: 0.6; transition: opacity 1.4s ease-in-out;
  background: radial-gradient(40% 58% at 50% 48%, color-mix(in srgb, var(--glow) 34%, transparent), transparent 72%),
    radial-gradient(90% 80% at 50% 60%, color-mix(in srgb, var(--glow) 13%, transparent), transparent 80%),
    radial-gradient(46% 18% at 50% 96%, color-mix(in srgb, var(--glow) 40%, transparent), transparent 70%); } /* 立式机身后、整个背景和脚下的光都跟着屏幕的颜色走 */
#scene.flash .scene-haze { animation: hazeFlash 0.9s var(--ease); }
#scene.flash .k-glow { animation: hazeFlash 0.9s var(--ease); }
@keyframes hazeFlash { 12% { opacity: 1; filter: brightness(1.9); } }
/* 两侧压暗给说明文字让位，上下压暗收住画面 */
.scene-shade { inset: 0; background:
  linear-gradient(90deg, rgba(7,6,5,0.86) 0%, rgba(7,6,5,0.5) 24%, rgba(7,6,5,0.08) 40%, rgba(7,6,5,0.08) 60%, rgba(7,6,5,0.5) 76%, rgba(7,6,5,0.86) 100%),
  linear-gradient(180deg, rgba(7,6,5,0.55) 0%, rgba(7,6,5,0) 26%, rgba(7,6,5,0) 72%, rgba(7,6,5,0.9) 100%); }
@media (prefers-reduced-motion: no-preference) {
  .scene-dots { animation: drift 40s ease-in-out infinite alternate; }
  @keyframes drift { to { transform: scale(1.06) translateY(-1%); } }
}
#kioskSlot { position: relative; z-index: 1; grid-column: 2; } /* 两侧说明收起时也留在中间一栏 */
#kiosk { position: absolute; left: 0; top: 0; width: 1220px; height: 2254px; transform-origin: 0 0; display: flex; flex-direction: column; align-items: center; z-index: 1; }

/* 外壳：阳极氧化的深色铝机身（左右暗、中间亮，像圆角柱面受光），顶部点阵灯牌，屏下是装着六罐的展示窗，底座 */
.k-head, .k-body {
  width: 1128px;
  background: linear-gradient(90deg, #0f0f11 0%, #1c1c20 7%, #26262b 50%, #1c1c20 93%, #0f0f11 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.09), inset 0 -2px 0 rgba(0,0,0,0.6);
}
.k-head { height: 28px; border-radius: 40px 40px 0 0; } /* 顶盖只留一道边，屏幕尽量大 */
.k-screen { position: relative; width: 1128px; padding: 24px; background: #0a0a0b;
  box-shadow: inset 0 0 0 2px #2a2a2e, 0 0 120px color-mix(in srgb, var(--glow) 26%, transparent); }
/* 屏幕玻璃：一道很淡的斜向反光，不挡点击 */
.k-screen::after { content: ""; position: absolute; inset: 24px; border-radius: 6px; pointer-events: none; z-index: 20;
  background: linear-gradient(115deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 22%, rgba(255,255,255,0) 40%); }
.k-body { height: 230px; border-radius: 0 0 40px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.k-window { position: relative; width: 760px; height: 170px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(80% 120% at 50% 100%, color-mix(in srgb, var(--glow) 22%, #0b0b0d), #070708 70%);
  box-shadow: inset 0 0 0 2px #2c2c31, inset 0 18px 30px rgba(0,0,0,0.6);
  display: flex; align-items: flex-end; justify-content: center; gap: 30px; padding-bottom: 6px; }
@property --lvl { syntax: "<number>"; inherits: true; initial-value: 0; }
/* 台面：罐子图下面那截是倒影（50 宽时约 34px），台面上沿和罐身底部齐平，倒影落在台面上，罐子是站着的 */
.k-window::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.16), rgba(255,255,255,0.05) 2px, color-mix(in srgb, var(--glow) 10%, #141417) 3px, #0a0a0c); }
.k-can { z-index: 1; }
.k-can { position: relative; display: block; transform-origin: 50% 100%; --lvl: 0; transition: transform 0.42s var(--ease), --lvl 0.6s var(--ease); }
.k-can.pouring { transition: transform 0.42s var(--ease), --lvl 1.5s cubic-bezier(0.2, 0.7, 0.3, 1); } /* 和屏幕里的液面一样先快后慢、1.5 秒涨满 */
.k-window img { width: 50px; height: auto; display: block; transition: filter 0.42s var(--ease); filter: brightness(0.82); }
.k-can.on { transform: translateY(-6px) scale(1.06); } /* 罐子 50 宽约 145 高，抬起放大后也要整罐留在 170 高的展示窗里 */
.k-can.on img { filter: brightness(1.08) drop-shadow(0 0 14px color-mix(in srgb, var(--glow) 70%, transparent)); }
/* 罐身里的液面：一块人格色的半透明液面盖在罐身上，顶上一道亮线，高度跟着步骤涨 */
.k-fill { position: absolute; left: 13%; right: 13%; bottom: 25%; height: calc(var(--lvl) * 69%); border-radius: 3px 3px 7px 7px; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(to top, color-mix(in srgb, var(--glow) 75%, transparent), color-mix(in srgb, var(--glow) 40%, transparent));
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.95), 0 0 10px color-mix(in srgb, var(--glow) 60%, transparent); opacity: calc(var(--lvl) * 8); }
.k-plate { font-family: var(--font-cn); font-size: 30px; font-weight: 700; color: var(--brand); letter-spacing: 0.08em; }
.k-base { width: 1220px; height: 28px; border-radius: 24px; background: linear-gradient(180deg, #24242a, #0e0e10); box-shadow: inset 0 2px 0 rgba(255,255,255,0.08), 0 40px 80px rgba(0,0,0,0.75); }
/* 地面反光：屏幕的光落在机器脚下，颜色跟着屏幕走 */
.k-glow { position: absolute; left: -30%; right: -30%; bottom: -6%; height: 16%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 50%, transparent), transparent); }

/* 两侧说明 */
.side { position: relative; z-index: 1; padding: 0 48px; display: flex; flex-direction: column; gap: 18px; font-family: var(--font-cn); max-width: 400px; }
.side-left { justify-self: end; align-self: start; margin-top: 12vh; }
.side-right { justify-self: start; align-self: start; margin-top: 12vh; }
body.touring .side-left > *:not(#tourBtn) { opacity: 0.18; transition: opacity 0.26s var(--ease); } /* 指引时左栏让位给气泡 */
body.touring.tour-end .side-left #demoLinks { opacity: 1; } /* 最后一步指的就是这几个链接 */
.side-logo { font-size: 22px; }
.side-logo .logo-mark { display: inline-flex; width: 1.3em; height: 1.3em; }
.side-title { font-size: 44px; font-weight: 900; line-height: 1.15; }
.side-text { font-size: 18px; color: var(--text-2); line-height: 1.6; }
.side-note { font-size: 14px; color: #9a9a95; line-height: 1.5; }
.side-step { font-size: 22px; color: var(--brand); }
.side-timer { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--text-2); }
.side-btn { height: 48px; padding: 0 20px; font-size: 16px; }
.side-btn:hover { filter: brightness(1.12); }
.side > .side-btn { align-self: flex-start; }
.side-ask { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 18px; border-radius: var(--r);
  background: rgba(18,18,20,0.78); box-shadow: inset 0 0 0 1px rgba(226,255,46,0.4); }
.side-ask p { font-size: 15px; line-height: 1.55; }
.side-ask .side-btn { width: 100%; }
.side-ask .btn-primary { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.side-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.side-links a, .side-links button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 15px; color: var(--text-2); transition: color 0.16s; }
.side-links a:hover, .side-links button:hover { color: var(--brand); }
/* 右侧手机：真实的分享页和预填页，按 360 宽的手机渲染再缩小；鼠标移上去放大看清 */
.side-phone { margin: 6px 0 0; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 0.42s var(--ease), transform 0.42s var(--ease); }
.side-phone.on { opacity: 1; transform: none; pointer-events: auto; }
.phone { position: relative; width: 240px; height: 498px; border-radius: 36px; transform-origin: 0 30%; transition: transform 0.32s var(--ease); overflow: hidden; background: #111113;
  box-shadow: inset 0 0 0 2px #2c2c31, 0 30px 60px rgba(0,0,0,0.55), 0 0 60px color-mix(in srgb, var(--glow) 14%, transparent); }
.phone iframe { position: absolute; left: 8px; top: 8px; width: 360px; height: 777px; border: 0; border-radius: 46px; transform: scale(0.62); transform-origin: 0 0; background: var(--bg); transition: opacity 0.3s var(--ease); }
.phone iframe.loading { opacity: 0; }
.side-phone.on:hover .phone { transform: scale(1.4); z-index: 3; }
.side-phone figcaption { max-width: 300px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
@media (max-height: 820px) {
  .phone { width: 208px; height: 430px; border-radius: 32px; }
  .phone iframe { transform: scale(0.533); }
}
body.narrow .side, body.tight .side-phone, body.tight #demoText { display: none; }
/* 窗口矮：左栏放不下先收起介绍文字，右栏放不下先收起小手机下面的说明，还放不下再收起底部说明、两栏往上提 */
body.short1 #demoText, body.shortR .side-phone figcaption { display: none; }
body.short2 #demoNote { display: none; }
body.short2 .side-left, body.short2 .side-right { margin-top: 4vh; }

/* 放大展位屏：电脑上只留屏幕，按窗口高度放大；右上角退出 */
.booth-exit { display: none; }
body.booth .side, body.booth .k-head, body.booth .k-body, body.booth .k-base { display: none; }
body.booth #kiosk { width: 1080px; height: 1920px; }
body.booth .k-screen { width: 1080px; padding: 0; }
body.booth .k-screen::after { inset: 0; }
body.booth .booth-exit { display: inline-flex; position: fixed; right: 24px; top: 20px; z-index: 30; height: 44px; padding: 0 16px; font-size: 15px; }
body.booth .copyright { display: none; }

/* 真机模式：去掉外壳和场景 */
body.real .scene-dots, body.real .scene-haze, body.real .scene-shade, body.real .side, body.real .k-head, body.real .k-body, body.real .k-base, body.real .k-glow { display: none; }
body.real .k-screen::after { display: none; }
body.real #scene { display: flex; align-items: center; justify-content: center; background: #000; } /* 真机模式：屏幕居中，四周纯黑 */
body.real #kiosk { width: var(--sw, 1080px); height: 1920px; }
body.real .k-screen { width: var(--sw, 1080px); padding: 0; box-shadow: none; }

/* ---------- 屏幕本体 ---------- */
#stage {
  position: relative; width: var(--sw, 1080px); height: 1920px; overflow: hidden; border-radius: 6px;
  background: var(--bg); font-family: var(--font-cn); user-select: none; -webkit-user-select: none;
}
body.real #stage { border-radius: 0; }

.btn-hero { height: 176px; font-size: 64px; width: 100%; }
.btn-xl { height: 128px; padding: 0 56px; font-size: 48px; }
.btn-lg { height: 112px; padding: 0 44px; font-size: 38px; }
.btn .ico { font-size: 1.05em; flex: none; }
.icon-btn { width: 88px; height: 88px; border-radius: 999px; background: var(--bg-3); display: grid; place-items: center; font-size: 42px; }
.icon-btn:active { transform: scale(0.95); }
.screen-title { font-size: 104px; font-weight: 900; line-height: 1.08; letter-spacing: -0.01em; }
.step-eyebrow { font-size: 40px; font-weight: 900; color: var(--brand); letter-spacing: 0.08em; margin-bottom: 6px; } /* 三个选择屏的步骤号 */

.screen { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: translateY(28px); transition: opacity 0.12s linear, transform 0.42s var(--ease); } /* 离开的屏 0.12 秒淡出 */
#stage[data-dir="back"] .screen { transform: translateY(-28px); } /* 往回走时新屏从上面下来 */
#stage[data-screen="idle"] .s-idle,
#stage[data-screen="persona"] .s-persona,
#stage[data-screen="style"] .s-style,
#stage[data-screen="input"] .s-input,
#stage[data-screen="gen"] .s-gen,
#stage[data-screen="result"] .s-result { opacity: 1; pointer-events: auto; transform: none; }
#stage[data-screen] .screen:not([inert]) { transition: opacity 0.3s 0.1s var(--ease), transform 0.42s 0.1s var(--ease); } /* 进来的屏等旧屏淡出再淡入，两屏不叠影 */
.nowrap { white-space: nowrap; }

/* ---------- 顶栏 ---------- */
.topbar { position: absolute; left: 0; right: 0; top: 0; height: 152px; z-index: 5; padding: 28px 48px 0; display: flex; align-items: flex-start; justify-content: space-between; }
#stage[data-screen="idle"] .topbar { display: none; }
.topbar .logo { font-size: 38px; height: 88px; }
.logo-mark { display: inline-flex; width: 1.3em; height: 1.3em; }
.logo-mark svg { width: 100%; height: 100%; }
.topbar-right { display: flex; align-items: center; gap: 24px; }
/* 顶栏进度：四段小声纹柱，走过的段亮成品牌黄；每点一下屏幕柱子跳一下 */
.steps { position: absolute; left: 48px; right: 48px; top: 120px; height: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.steps i { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.steps b { width: 6px; height: calc(var(--h) * 100%); border-radius: 3px; background: var(--bg-3); transition: background 0.3s; transform-origin: 50% 50%; }
.steps i.on b { background: var(--brand); }
@media (prefers-reduced-motion: no-preference) {
  .steps.bump i b { animation: stepBump 0.42s cubic-bezier(0.2, 1.6, 0.4, 1) both; animation-delay: calc(var(--k) * 14ms); }
  @keyframes stepBump { 35% { transform: scaleY(1.6); } }
}
.timer { position: relative; width: 88px; height: 88px; display: grid; place-items: center; }
.timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 7; }
.timer-track { stroke: var(--bg-3); }
.timer-fill { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 213.6; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke 0.3s; }
.timer span { font-size: 38px; position: relative; }
.timer.warn .timer-fill { stroke: var(--danger); }
.timer.warn span { color: var(--danger); animation: blink 1s steps(2) infinite; }
.timer.last .timer-fill { stroke: var(--danger); }
.timer.last span { color: var(--danger); }
.timer.beat { animation: beat 0.32s var(--ease); }
@keyframes beat { 40% { transform: scale(1.16); } }
.icon-btn.off { color: var(--text-2); }
/* 按下和选中时冒出的小气泡（脚本生成，动画完就删） */
.fx-bubble { position: absolute; z-index: 7; border-radius: 50%; border: 5px solid #fff; background: rgba(255,255,255,0.14); pointer-events: none; }
.fx-bubble::after { content: ""; position: absolute; left: 20%; top: 20%; width: 28%; height: 28%; border-radius: 50%; background: rgba(255,255,255,0.85); }
@keyframes blink { 50% { opacity: 0.35; } }
.queue-chip { display: flex; align-items: center; gap: 10px; font-size: 30px; color: var(--text-2); }
.queue-chip .ico { font-size: 34px; }

/* ---------- 底栏：手够得着的区域 ---------- */
.bottombar { position: absolute; left: 0; right: 0; bottom: 0; height: 200px; z-index: 5; display: flex; align-items: center; gap: 20px; padding: 0 48px 24px; }
.bottombar #nextBtn { margin-left: auto; flex: 1; max-width: 520px; }
#nextBtn.nope { animation: nope 0.32s ease-in-out; }
#nextBtn.wait { color: rgba(243,243,239,0.66); } /* 灰着的下一步上写着还差什么，字要看得清 */
#nextBtn.wait .ico { display: none; }
#nextBtn.auto { background-image: linear-gradient(90deg, rgba(255,255,255,0.5) 50%, transparent 50%); background-size: 200% 100%; background-position: 100% 0; animation: autoFill 0.9s linear forwards; } /* 马上自动往下走 */
@keyframes autoFill { to { background-position: 0 0; } }
@keyframes nope { 25% { transform: translateX(-12px); } 75% { transform: translateX(12px); } }
/* 退出要点两下：第一下按钮旁边冒出提示 */
#exitBtn { position: relative; }
.exit-tip { position: absolute; right: 0; top: calc(100% + 14px); padding: 12px 20px; border-radius: 16px; background: var(--danger); color: #fff; font-size: 30px; font-weight: 800; white-space: nowrap;
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.16s, transform 0.16s var(--ease); }
#exitBtn.armed { background: var(--danger); color: #fff; }
#exitBtn.armed .exit-tip { opacity: 1; transform: none; }
#stage:not([data-screen="persona"]):not([data-screen="style"]):not([data-screen="input"]) .bottombar { display: none; }
#stage:not([data-screen="persona"]) #randomBtn { display: none; }

/* ---------- S0 待机 ---------- */
.idle-bg { position: absolute; inset: 0; transition: background 1.2s var(--ease); }
/* 气泡照片垫在海报后面，慢慢往上浮：声汽的「汽」 */
.idle-fizz { position: absolute; left: 0; right: 0; top: 0; height: 1240px; overflow: hidden; pointer-events: none; opacity: 0.32; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 46%, #000 30%, transparent 78%); mask-image: radial-gradient(70% 60% at 50% 46%, #000 30%, transparent 78%); }
.idle-fizz::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200%; background: url("../assets/brand/fizz-1.webp") center top / 100% 50% repeat-y; }
@media (prefers-reduced-motion: no-preference) {
  .idle-fizz::before { animation: fizzRise 26s linear infinite; }
  @keyframes fizzRise { to { transform: translateY(-50%); } }
}
.idle-logo { position: absolute; left: 64px; top: 64px; font-size: 44px; }
.idle-sound { position: absolute; right: 312px; top: 48px; }
.lang-toggle { position: absolute; right: 64px; top: 48px; display: flex; background: var(--bg-2); border-radius: 999px; padding: 6px; }
.lang-toggle button { height: 76px; min-width: 108px; border-radius: 999px; font-size: 32px; font-weight: 700; color: var(--text-2); }
.lang-toggle button.on { background: var(--bg-3); color: var(--text); }
.idle-help { margin-top: 12px; color: var(--brand); border-radius: 999px; padding: 0 28px 0 20px; margin-left: -20px; }
@media (prefers-reduced-motion: no-preference) {
  .idle-help.fresh { animation: helpBreath 2.2s 1.2s ease-in-out infinite; }
  @keyframes helpBreath { 50% { box-shadow: 0 0 0 16px rgba(226,255,46,0.18); } }
}
.idle-fan { position: absolute; left: 0; right: 0; top: calc(170px + var(--xh, 0px) * 0.38); height: 900px; }
.idle-fan canvas {
  position: absolute; left: 50%; top: 0; width: 450px; height: 800px; margin-left: -225px;
  border-radius: var(--r); box-shadow: 0 40px 90px rgba(0,0,0,0.6);
  transition: transform 0.9s var(--ease), opacity 0.9s var(--ease);
}
.idle-fan canvas:nth-child(1) { transform: translate(-270px, 60px) rotate(-10deg) scale(0.82); opacity: 0.7; }
.idle-fan canvas:nth-child(2) { transform: translate(270px, 60px) rotate(10deg) scale(0.82); opacity: 0.7; }
.idle-fan canvas:nth-child(3) { transform: none; z-index: 2; }
.idle-copy { position: absolute; left: 64px; right: 64px; top: calc(1060px + var(--xh, 0px) * 0.8); }
.idle-title { font-size: 120px; line-height: 1.08; font-weight: 900; white-space: pre-line; letter-spacing: -0.02em; }
.idle-sub { margin-top: 28px; font-size: 40px; color: var(--text-2); font-weight: 500; }
.idle-actions { position: absolute; left: 64px; right: 64px; bottom: 64px; display: flex; flex-direction: column; gap: 28px; }
.idle-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: stretch; }
.idle-row .btn-lg { height: auto; min-height: 112px; white-space: normal; text-align: left; line-height: 1.2; } /* 英文按钮字长，宁可折行也别把右边的排队框挤窄 */
.idle-queue > div { white-space: nowrap; }
.idle-queue { display: flex; gap: 24px; align-items: center; background: var(--bg-2); border-radius: var(--r); padding: 18px 32px 18px 18px; }
.idle-queue-title { font-size: 34px; font-weight: 800; }
.idle-queue-n { margin-top: 10px; font-size: 30px; color: var(--brand); font-weight: 700; }
.idle-today { margin-top: 6px; font-size: 30px; color: var(--text-2); font-weight: 600; }
.idle-today:empty { display: none; }

.qr { background: #f3f3ef; border-radius: var(--r-in); padding: 12px; width: 160px; height: 160px; display: grid; place-items: center; flex: none; }
.qr svg { width: 100%; height: 100%; display: block; }
.qr-lg { width: 340px; height: 340px; padding: 20px; background: #e6e6de; } /* 结果页的码：比海报暗一档、小一点，海报才是主角 */

/* ---------- S1 选人格 ---------- */
.s-persona, .s-style { padding: 196px 48px 200px; display: flex; flex-direction: column; }
/* 选中一派，屏幕底部泛起这一派的颜色 */
@property --pc { syntax: "<color>"; inherits: true; initial-value: rgba(0,0,0,0); }
#stage { --pc: rgba(0,0,0,0); transition: --pc 0.42s var(--ease); }
.s-persona::before, .s-style::before, .s-input::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 55% at 50% 100%, color-mix(in srgb, var(--pc) 34%, transparent), transparent 72%); }
.s-persona > *, .s-style > *, .s-input > * { position: relative; } /* 内容压在泛色层上面 */
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 6px; }
.title-row .step-eyebrow { margin-bottom: 0; }
.tap-btn { flex: none; height: 84px; padding: 0 30px; border-radius: 999px; background: var(--bg-3); display: inline-flex; align-items: center; gap: 12px; font-size: 30px; font-weight: 700; color: var(--text); }
.tap-btn .ico { font-size: 38px; color: var(--brand); }
/* 拍节奏的鼓面：每拍一下缩一下、往外推一圈光 */
.tap-card { gap: 28px; }
.tap-pad { width: 440px; height: 440px; margin: 12px 0; border-radius: 50%; border: 10px solid var(--brand); background: radial-gradient(circle at 36% 30%, #3a3a3e, #19191b 70%);
  color: var(--brand); font-size: 112px; font-weight: 900; display: grid; place-items: center; touch-action: manipulation; }
.tap-pad.hit { animation: padHit 0.34s var(--ease); }
@keyframes padHit { from { transform: scale(0.93); box-shadow: 0 0 0 0 rgba(226,255,46,0.55); } to { transform: scale(1); box-shadow: 0 0 0 70px rgba(226,255,46,0); } }
.tap-dots { display: flex; gap: 22px; }
.tap-dots i { width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--text-2); transition: background 0.16s, border-color 0.16s; }
.tap-dots i.on { background: var(--brand); border-color: var(--brand); }
.tap-result { min-height: 60px; font-size: 44px; font-weight: 800; color: var(--brand); }
.persona-grid { margin-top: 44px; flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 24px; padding-bottom: 24px; }
.p-card {
  position: relative; border-radius: var(--r); padding: 32px 32px; text-align: left;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.p-card .p-name { font-size: 60px; font-weight: 900; line-height: 1.1; }
.p-card .p-en { margin-top: 8px; font-size: 34px; font-weight: 900; opacity: 0.92; }
.p-card .p-motto { position: relative; z-index: 1; margin-top: auto; font-size: 32px; font-weight: 600; padding-right: 110px; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; } /* 只在短语之间断行（<wbr>），两行长短接近 */
.p-card .p-flavor { position: relative; z-index: 1; align-self: flex-start; margin-top: 18px; font-size: 30px; font-weight: 700; padding: 8px 18px; border-radius: 999px; background: rgba(0,0,0,0.22); }
.p-card .p-name, .p-card .p-en { position: relative; z-index: 1; }
.p-card .p-beat { position: absolute; left: 32px; right: 136px; top: 50%; height: 84px; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; opacity: 0.3; pointer-events: none; }
.p-card .p-beat i { flex: 1; height: calc(10% + var(--a) * 90%); border-radius: 4px; background: currentColor; transform-origin: 50% 50%; }
.p-card.sel .p-beat { opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
  .p-card.sel .p-beat i { animation: pBeat 0.52s cubic-bezier(0.2, 1.5, 0.4, 1) both; animation-delay: calc(var(--k) * 16ms); }
  @keyframes pBeat { 35% { transform: scaleY(1.8); } }
}
/* 口味罐斜靠在卡片右下角，选中时立起来、往上一跳 */
.p-card .p-can { position: absolute; right: 22px; top: 50%; width: 92px; height: auto; transform: translateY(-46%) rotate(12deg); transform-origin: 50% 50%;
  filter: drop-shadow(-10px 14px 18px rgba(0,0,0,0.35)); transition: transform 0.42s var(--ease); pointer-events: none; }
.p-card.sel .p-can { transform: translateY(-54%) rotate(0deg) scale(1.08); }
.p-card.sel { transform: scale(1.02); box-shadow: 0 0 0 8px var(--brand); }
.persona-grid.has-sel .p-card:not(.sel) { filter: brightness(0.62) saturate(0.85); }
.p-card { transition: filter 0.26s var(--ease), transform 0.26s var(--ease), box-shadow 0.26s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  #stage[data-screen="persona"]:not(.picked) .tap-btn { animation: beckon 2.4s 3s ease-in-out infinite; }
  @keyframes beckon { 50% { box-shadow: 0 0 0 14px rgba(226,255,46,0.16); } }
  #nextBtn.lit { animation: lit 0.6s var(--ease); }
  @keyframes lit { 0% { box-shadow: 0 0 0 0 rgba(226,255,46,0.7); } 100% { box-shadow: 0 0 0 36px rgba(226,255,46,0); } }
}
.modal-sub .num { font-family: var(--font-display); font-weight: 900; font-size: 1.3em; color: var(--brand); }
.field-label em { font-size: 1.15em; }
.p-card .p-check { position: absolute; right: 24px; top: 24px; z-index: 2; width: 64px; height: 64px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); display: none; place-items: center; font-size: 36px; }
.p-card.sel .p-check { display: grid; }
.p-card:active { transform: scale(0.98); }

/* ---------- S2 选风格 ---------- */
.style-grid { margin-top: 44px; flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 24px; padding-bottom: 24px; }
.s-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: var(--r); padding: 20px; background: var(--bg-2); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.s-card canvas { height: calc(468px + var(--xh, 0px) * 0.3); width: auto; aspect-ratio: 9 / 16; border-radius: var(--r-in); margin-bottom: 14px; }
.s-card .s-name { font-size: 44px; font-weight: 800; line-height: 1.15; }
.s-card .s-desc { font-size: 30px; font-weight: 600; color: var(--text-2); line-height: 1.2; }
.s-card.sel { box-shadow: 0 0 0 8px var(--brand); }

/* ---------- S3 输入：上面预览，下面表单 ---------- */
.s-input { padding: 184px 64px 200px; display: flex; flex-direction: column; align-items: center; }
.input-preview canvas { height: calc(600px + var(--xh, 0px) * 0.6); width: auto; aspect-ratio: 9 / 16; border-radius: var(--r); box-shadow: 0 30px 80px rgba(0,0,0,0.5); display: block; }
.input-form { width: 100%; margin-top: 40px; display: flex; flex-direction: column; }
.input-form .screen-title { font-size: 88px; margin-bottom: 28px; }
.field { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
/* 声纹条：打一个字长出两根柱子，点喇叭整句弹一遍 */
.type-voice { display: flex; align-items: center; gap: 20px; margin: -12px 0 24px; }
.tv-play { flex: none; width: 76px; height: 76px; border-radius: 999px; background: var(--bg-3); color: var(--brand); display: grid; place-items: center; font-size: 36px; }
.tv-play:active { transform: scale(0.94); }
.tv-bars .tv-mine { flex: none; margin-right: 10px; font-size: 30px; font-weight: 800; color: var(--brand); }
.tv-mic { flex: none; position: relative; overflow: hidden; height: 76px; padding: 0 28px 0 22px; border-radius: 999px; background: var(--bg-3); color: var(--text); display: flex; align-items: center; gap: 10px; font-size: 30px; font-weight: 800; }
.tv-mic .ico { font-size: 34px; color: var(--brand); }
.tv-mic.rec { background: var(--danger); color: #fff; }
.tv-mic.rec .ico { color: #fff; }
.tv-mic.rec::after { content: ""; position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; background: #fff; transform-origin: left; animation: micFill 3s linear both; } /* 3 秒进度条 */
@keyframes micFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tv-bars { flex: 1; height: 76px; display: flex; align-items: center; gap: 4px; overflow: hidden; }
.tv-bars i { flex: 0 0 8px; height: calc(8% + var(--a) * 92%); border-radius: 4px; background: color-mix(in srgb, var(--pc, var(--brand)) 55%, var(--brand)); }
.tv-bars .tv-hint { font-size: 30px; font-weight: 600; color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
  .tv-bars i.new { animation: barGrow 0.32s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
  @keyframes barGrow { from { transform: scaleY(0); } }
  .tv-bars.playing i { animation: barLit 0.38s var(--ease) both; }
  @keyframes barLit { 40% { transform: scaleY(1.45); background: #fff; } }
}
.field-label { display: flex; justify-content: space-between; align-items: center; font-size: 34px; font-weight: 700; color: var(--text-2); }
.field-label em { font-style: normal; font-size: 30px; }
.field input { height: 104px; border-radius: var(--r); border: 3px solid var(--field-line); background: var(--bg-2); padding: 0 28px; font-size: 46px; font-weight: 700; outline: none; transition: border-color 0.2s; }
.field input:focus { border-color: var(--brand); }
.field input.bad { border-color: var(--danger); }
@media (prefers-reduced-motion: no-preference) {
  .field input.bad.shake { animation: nope 0.32s ease-in-out; }
}
.field-error { font-size: 30px; color: var(--danger); font-weight: 600; margin: -8px 0 12px; }
.field-error:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .field-label em.shake { animation: shake 0.3s ease-in-out; }
  @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
}
.field-label em { display: inline-block; }
.presets { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 16px; } /* 示例句放不下就排第二行，每句完整露出 */
.presets button { flex: none; white-space: nowrap; }
.presets button { height: 80px; padding: 0 30px; border-radius: 999px; background: var(--bg-3); font-size: 32px; font-weight: 600; }
.presets.hint button { box-shadow: 0 0 0 4px var(--brand); }
.toggle { margin-top: 28px; display: flex; align-items: center; gap: 20px; font-size: 32px; font-weight: 600; min-height: 80px; }
.toggle input { position: absolute; opacity: 0; }
.toggle i { width: 104px; height: 60px; border-radius: 999px; background: var(--bg-3); position: relative; transition: background 0.2s; flex: none; }
.toggle i::after { content: ""; position: absolute; left: 6px; top: 6px; width: 48px; height: 48px; border-radius: 999px; background: var(--text-2); transition: transform 0.25s var(--ease), background 0.2s; }
.toggle input:checked + i { background: var(--brand); }
.toggle input:checked + i::after { transform: translateX(44px); background: var(--brand-ink); }
/* 昵称那一行里的小开关：大屏不显示昵称 */
.field-label .toggle-sm { margin: 0 24px 0 auto; min-height: 0; gap: 14px; font-size: 30px; color: var(--text-2); }
.toggle-sm i { width: 80px; height: 46px; }
.toggle-sm i::after { width: 34px; height: 34px; }
.toggle-sm input:checked + i::after { transform: translateX(34px); }
.toggle-sm input:checked ~ span { color: var(--text); }

/* ---------- S4 生成中 ---------- */
.s-gen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 56px; padding-top: 120px; }
#genCanvas { height: calc(1320px + var(--xh, 0px) * 0.7); width: auto; aspect-ratio: 9 / 16; border-radius: var(--r); }
.gen-text { font-size: 72px; font-weight: 900; min-height: 90px; }
.gen-text.in { animation: genIn 0.36s var(--ease) both; }
@keyframes genIn { from { opacity: 0; transform: translateY(18px); } }
/* 生成画面上的海报飞到结果页的位置：飞行时结果页自己的那张先藏着，落地再换上 */
.fly-poster { position: absolute; z-index: 6; transform-origin: 0 0; border-radius: var(--r); box-shadow: 0 40px 100px rgba(0,0,0,0.6); pointer-events: none;
  transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1); animation: posterFlash 0.5s ease-out; }
@keyframes posterFlash { 0% { filter: brightness(1.8) saturate(1.2); box-shadow: 0 0 0 0 rgba(226,255,46,0.6), 0 40px 100px rgba(0,0,0,0.6); } 100% { box-shadow: 0 0 0 60px rgba(226,255,46,0), 0 40px 100px rgba(0,0,0,0.6); } }
#stage.flip .result-poster canvas { visibility: hidden; }

/* ---------- S5 结果 ---------- */
.s-result { padding: 176px 48px 40px; display: flex; flex-direction: column; align-items: center; }
.result-poster { position: relative; }
.result-poster canvas { height: calc(1040px + var(--xh, 0px) * 0.5); width: auto; aspect-ratio: 9 / 16; border-radius: var(--r); box-shadow: 0 40px 100px rgba(0,0,0,0.6); display: block; }
/* 口味罐站在海报右下，海报落定后滑进来：凭海报领的就是这一罐 */
.result-can { position: absolute; left: calc(100% + 24px); bottom: -2px; width: 150px; height: auto; pointer-events: none;
  filter: drop-shadow(-16px 24px 30px rgba(0,0,0,0.55)); }
#stage[data-screen="result"] .result-can { animation: canIn 0.6s 0.45s cubic-bezier(0.3, 0, 0.4, 1) both; }
@keyframes canIn { 0% { transform: translate(60px, -260px) rotate(18deg); opacity: 0; } 30% { opacity: 1; } 78% { transform: translate(0, 10px) rotate(-3deg); } 100% { transform: none; } } /* 从上面掉下来，落地压一下再站直 */
#stage.thud { animation: thud 0.3s ease-out; }
@keyframes thud { 30% { transform: translateY(5px); } 60% { transform: translateY(-2px); } }
#stage[data-screen="result"] .result-scan { animation: rise 0.5s 0.42s var(--ease) both; }
#stage[data-screen="result"] .result-actions { animation: rise 0.5s 0.52s var(--ease) both; }
#stage[data-screen="result"] .link-btn { animation: rise 0.5s 0.6s var(--ease) both; }
@keyframes rise { from { transform: translateY(36px); opacity: 0; } }
.result-scan { width: 100%; margin-top: 44px; display: flex; gap: 40px; align-items: center; }
.result-scan-text { display: flex; flex-direction: column; gap: 20px; }
.result-title { font-size: 72px; font-weight: 900; line-height: 1.1; }
.result-gift { font-size: 34px; font-weight: 700; line-height: 1.4; }
.result-gift b { color: var(--brand); }
.result-back { display: flex; align-items: center; gap: 12px; font-size: 32px; color: #8f8f89; font-weight: 600; } /* 次要说明比主文案暗一档 */
.result-back .ico { font-size: 36px; color: var(--brand); }
.result-actions { width: 100%; margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* 手机上看演示：二维码换成保存和打开分享页两个按钮，罐子贴在海报右下角 */
body.kiosk #openLocalBtn { display: none; } /* 展位真机上不出现演示用的「在本机打开分享页」 */
.result-phone, .result-title .for-phone { display: none; }
body.phone .result-phone { width: 100%; margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
body.phone .result-title .for-phone { display: inline; }
body.phone .result-title .for-kiosk, body.phone #resultQr, body.phone #openLocalBtn { display: none; }
body.phone #stage[data-screen="result"] .timer, body.phone .result-back { display: none; } /* 手机上结果页不倒计时 */
body.phone .result-can { left: auto; right: -128px; bottom: 0; width: 112px; } /* 罐子站在海报右边外面，不压海报 */
#stage[data-screen="result"] .result-phone { animation: rise 0.5s 0.5s var(--ease) both; }
/* 手机上看演示：大屏缩到 0.36 倍，屏幕里的小字放大到手机上 12px 以上 */
body.phone .p-card .p-flavor, body.phone .tap-btn, body.phone .link-btn, body.phone .toggle, body.phone .presets button, body.phone .tv-bars .tv-hint { font-size: 34px; }
body.phone .field-label { font-size: 36px; }
/* 手机横着拿：盖一层提示，请竖过来 */
.rotate-tip { display: none; }
body.landscape-phone .rotate-tip { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(7,6,5,0.94); color: var(--text); font-size: 18px; font-weight: 700; text-align: center; padding: 24px; }
body.landscape-phone .rotate-tip .ico { font-size: 48px; color: var(--brand); transform: rotate(90deg); }
.link-btn { margin-top: 20px; display: inline-flex; align-items: center; gap: 12px; min-height: 72px; font-size: 30px; color: var(--text-2); text-decoration: underline; text-underline-offset: 6px; }

/* ---------- 弹层 ---------- */
.modal { position: absolute; inset: 0; z-index: 10; background: rgba(8,8,9,0.82); display: grid; place-items: center; }
.modal-bottom { place-items: end center; }
.modal-card { position: relative; width: min(960px, calc(var(--sw, 1080px) - 96px)); background: var(--bg-2); border-radius: var(--r); padding: 56px 56px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.modal-bottom .modal-card { border-radius: var(--r) var(--r) 0 0; padding-bottom: 72px; }
.modal-title { font-size: 88px; font-weight: 900; }
.modal-sub { font-size: 36px; color: var(--text-2); }
.modal-close { position: absolute; right: 28px; top: 28px; }
.code-slots { display: flex; gap: 20px; margin-top: 8px; }
.code-slots i { width: 128px; height: 152px; border-radius: var(--r); background: var(--bg-3); font-style: normal; font-size: 88px; display: grid; place-items: center; color: var(--brand); }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; }
.numpad button { height: 120px; border-radius: var(--r); background: var(--bg-3); font-family: var(--font-display); font-weight: 900; font-size: 56px; display: grid; place-items: center; }
.numpad button:active { transform: scale(0.96); }
.numpad .go { background: var(--brand); color: var(--brand-ink); font-family: var(--font-cn); font-size: 40px; }

/* ---------- 状态细节 ---------- */
.field-label em.over { color: var(--danger); }
.peak-note { display: none; font-size: 34px; font-weight: 700; color: var(--brand-ink); background: var(--brand); border-radius: var(--r); padding: 20px 28px; }
#stage.peak .peak-note { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .btn-primary.nudge { animation: nudge 1.4s var(--ease) infinite; }
  @keyframes nudge { 50% { transform: scale(1.04); box-shadow: 0 0 0 14px rgba(226,255,46,0.18); } }
  #stage[data-screen="idle"] #startBtn { animation: attract 2.8s ease-in-out infinite; }
  @keyframes attract { 50% { box-shadow: 0 0 0 18px rgba(226,255,46,0.14); } }
}

/* 图片还没到时的占位：同色底 + 轻微呼吸，画好后（.ready）停止 */
.idle-fan canvas, .s-card canvas, .input-preview canvas, #resultCanvas { background: var(--bg-3); }
@media (prefers-reduced-motion: no-preference) {
  .idle-fan canvas:not(.ready), .s-card canvas:not(.ready), .input-preview canvas:not(.ready), #resultCanvas:not(.ready) { animation: waiting 1.2s ease-in-out infinite; }
  @keyframes waiting { 50% { opacity: 0.55; } }
}

/* ---------- 新手指引：发光框圈住要点的东西，黄色气泡写「点这里」，虚线箭头指过去 ---------- */
.tour-ring { position: fixed; z-index: 60; pointer-events: none; border-radius: 18px;
  box-shadow: 0 0 0 3px var(--brand), 0 0 26px 4px rgba(226,255,46,0.45), 0 0 0 100vmax rgba(5,5,6,0.3);
  transition: left 0.26s var(--ease), top 0.26s var(--ease), width 0.26s var(--ease), height 0.26s var(--ease); }
.tour-ring::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid var(--brand); opacity: 0; }
.tour-arrow { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 61; pointer-events: none; overflow: visible; }
.tour-arrow line { stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 7; }
.tour-bubble { position: fixed; z-index: 62; max-width: 300px; padding: 16px 18px; border-radius: 16px; background: var(--brand); color: var(--brand-ink);
  font-family: var(--font-cn); box-shadow: 0 18px 40px rgba(0,0,0,0.5); transition: left 0.26s var(--ease), top 0.26s var(--ease); }
.tour-bubble p { font-size: 17px; font-weight: 800; line-height: 1.45; }
.tour-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.tour-go { height: 40px; padding: 0 16px; font-size: 15px; background: var(--brand-ink); color: var(--brand); }
.tour-quit { min-height: 32px; font-size: 13px; color: rgba(12,12,13,0.72); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .tour-ring::after { animation: tourPulse 1.4s ease-out infinite; }
  @keyframes tourPulse { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.1); } }
  .tour-arrow line { animation: tourDash 0.6s linear infinite; }
  @keyframes tourDash { to { stroke-dashoffset: -14; } }
  .tour-bubble.in { animation: tourIn 0.26s var(--ease) both; }
  @keyframes tourIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
}

/* 版权行：电脑上放左下角，手机上放在屏幕下方的黑边里；?kiosk=1 的真机不显示 */
body:has(#codeModal:not([hidden])) .copyright, body:has(#tapModal:not([hidden])) .copyright { display: none; }
.copyright { position: fixed; left: 24px; bottom: 12px; z-index: 2; pointer-events: none; font-size: 12px; color: #8a8a85; letter-spacing: 0.02em; }
body.real .copyright { left: 0; right: 0; bottom: 4px; text-align: center; font-size: 12px; }
body.real:not(.on-idle) .copyright { display: none; }
body.kiosk .copyright { display: none; }

/* 大屏和外壳的大标题用得意黑；小字（风格名）留系统黑体，斜体在小字号下会糊 */
.idle-title, .screen-title, .p-card .p-name, .result-title, .modal-title, .gen-text, .side-title {
  font-family: var(--font-head); font-weight: 400; font-synthesis: none; letter-spacing: 0.01em; line-height: 1.1; }
.p-card .p-name { -webkit-text-stroke: 1.4px currentColor; } /* 得意黑只有一个字重，浅色卡上补一点粗细 */
.idle-title .qm, .screen-title .qm, .modal-title .qm { margin-left: -0.32em; }

/* 手机和竖着的平板上看大屏（手机上画面逻辑宽 900、整块约缩到 0.43 倍）：
   能点的东西看得见的大小就到 108 以上（375 宽的小手机上也有 45px），说明小字不小于 32（约 14px） */
body.real:not(.kiosk) .icon-btn, body.real:not(.kiosk) .timer { width: 108px; height: 108px; }
body.real:not(.kiosk) .topbar .logo { height: 108px; }
body.real:not(.kiosk) .topbar { padding-top: 20px; }
body.real:not(.kiosk) .steps { top: 140px; }
body.real:not(.kiosk) .lang-toggle button { height: 108px; min-width: 108px; }
body.real:not(.kiosk) .idle-sound { right: 300px; }
body.phone .idle-queue .qr, body.phone .idle-queue-title { display: none; } /* 手机上扫不了自己屏幕上的码：排队框只留人数和今天印了几张 */
body.phone .input-preview canvas { height: 470px; } /* 手机上输入框和按钮更高，预览收矮一点，示例句两行都露得出来 */
body.real:not(.kiosk) .idle-logo { font-size: 40px; }
body.real:not(.kiosk) .link-btn { min-height: 108px; }
body.real:not(.kiosk) .presets button { height: 108px; }
body.real:not(.kiosk) .btn-lg { height: 130px; }
body.real:not(.kiosk) .tap-btn { height: 108px; }
body.real:not(.kiosk) .field input { height: 128px; }
body.real:not(.kiosk) .tv-play { width: 108px; height: 108px; }
body.real:not(.kiosk) .tv-mic { height: 108px; font-size: 32px; }
body.real:not(.kiosk) .field-label .toggle-sm { min-height: 108px; }
body.real:not(.kiosk) .field-label em, body.real:not(.kiosk) .idle-queue-n, body.real:not(.kiosk) .s-card .s-desc { font-size: 32px; }
body.real:not(.kiosk) .numpad button { height: 128px; }
body.phone #backBtn { flex: none; width: 108px; padding: 0; justify-content: center; } /* 手机宽度放不下三个带字的按钮：上一步只留箭头 */
body.phone #backBtn > span:not(.ico) { display: none; }
@media (prefers-reduced-motion: no-preference) {
  body.phone #nextBtn.lit { animation-name: litSm; } /* 手机上按钮挨得近，亮一圈的光收小，不压旁边的按钮 */
  @keyframes litSm { 0% { box-shadow: 0 0 0 0 rgba(226,255,46,0.7); } 100% { box-shadow: 0 0 0 14px rgba(226,255,46,0); } }
}
body.phone .idle-row .btn-lg { white-space: nowrap; padding: 0 28px; } /* 手机宽度：取号码按钮一行写完，排队框的码收小一点 */
body.phone .idle-queue .qr { width: 136px; height: 136px; padding: 10px; }
body.phone .idle-queue { gap: 18px; padding-right: 24px; }