:root {
  --ink: #141414; --R: #FC4A55; --O: #FFB045; --Y: #FFFA6D; --G: #30FD2F; --B: #3BA9FE; --P: #965DED;
  --orange: #F2541B; --crt: #1E58F5; --navy: #0B1D6B; --night: #070B24;
  --cn: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --u: 1px;                         /* design unit, set by core.js: 390 x 760 design box */
  --top: env(safe-area-inset-top, 0px); --bot: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #111 url(../assets/room.jpg) center/cover; }
body { font-family: var(--cn); color: var(--ink); -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; -webkit-user-select: text; user-select: text; }
#app { position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100vw, 520px); overflow: hidden; background: #000; box-shadow: 0 0 60px rgba(0,0,0,.6); touch-action: none; }
#pages { position: absolute; inset: 0; }
#app::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.28)); }

/* ---------- pages & transitions ---------- */
.page { position: absolute; inset: 0; overflow: hidden; visibility: hidden; transform: translate3d(0, 100%, 0); display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--top) + var(--u) * 58) calc(var(--u) * 18) calc(var(--bot) + var(--u) * 62); }
/* the last two pages have no floating "我要上墙" button */
.p-make, .p-wall { padding-bottom: calc(var(--bot) + var(--u) * 18); }
.page.cur { visibility: visible; transform: none; }
.page.anim { visibility: visible; transition: transform .55s cubic-bezier(.65, 0, .25, 1), filter .55s; }
.page.away { filter: brightness(.45); }
.bg-room { background: #d8d4cc url(../assets/room.jpg) center / cover; }

.in, .drop { opacity: 0; }
.page.play .in { animation: popIn .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: var(--d, 0s); }
.page.play .drop { animation: dropIn .7s cubic-bezier(.3, 1.35, .5, 1) both; animation-delay: var(--d, 0s); }
@keyframes popIn { 0% { opacity: 0; transform: scale(1.25); } 100% { opacity: 1; transform: none; } }
@keyframes dropIn { 0% { opacity: 0; transform: translateY(-140%); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- shared pieces ---------- */
.pix { display: block; line-height: 0; }
.pix canvas { display: block; image-rendering: pixelated; }
.hd { position: absolute; top: calc(var(--top) + var(--u) * 16); left: calc(var(--u) * 18); right: calc(var(--u) * 18); display: flex; align-items: center; white-space: nowrap; font-size: calc(var(--u) * 13); }
.hd b { font-weight: 900; }
.hd > span:not(.logo) { font-weight: 600; margin-left: calc(var(--u) * 2); overflow: hidden; text-overflow: ellipsis; }
/* official logo PNG has transparent padding: visible box = x 9.46–88.56 %, y 24.94–74.57 %; crop to it, never redraw */
.logo { position: relative; margin-left: auto; flex: none; width: calc(var(--u) * 99.8); height: calc(var(--u) * 20); }
.logo img { position: absolute; height: calc(var(--u) * 40.3); left: calc(var(--u) * -11.93); top: calc(var(--u) * -10.05); }

.win { position: relative; background: #fff; border: calc(var(--u) * 3) solid #111; box-shadow: calc(var(--u) * 6) calc(var(--u) * 6) 0 #111; }
.win > .bar { background: var(--c, var(--R)); color: #fff; font-weight: 900; font-size: calc(var(--u) * 14); padding: calc(var(--u) * 6) calc(var(--u) * 10);
  border-bottom: calc(var(--u) * 3) solid #111; display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 8); white-space: nowrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); font: 900 calc(var(--u) * 17) / 1 var(--cn); color: #111; text-decoration: none;
  background: var(--Y); border: calc(var(--u) * 3) solid #111; box-shadow: calc(var(--u) * 5) calc(var(--u) * 5) 0 #111; padding: calc(var(--u) * 13) calc(var(--u) * 18); transition: transform .06s, box-shadow .06s; }
.btn:active, .btn.down { transform: translate(calc(var(--u) * 4), calc(var(--u) * 4)); box-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #111; }
.btn-2 { background: #fff; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-mini { font: 800 calc(var(--u) * 13) / 1 var(--cn); background: rgba(255,255,255,.9); color: #111; border: calc(var(--u) * 2) solid #111; padding: calc(var(--u) * 7) calc(var(--u) * 12); }

/* TV: screen box of tv.png = [40,45,287,224] on 336 x 308 */
.tv { position: relative; aspect-ratio: 336 / 308; flex: none; }
.tv > img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.tv > .scr { position: absolute; left: 11.905%; top: 14.61%; width: 73.51%; height: 58.12%; border-radius: 3% / 4%; overflow: hidden; display: block; background: #000; }
.tv[data-tap] { cursor: pointer; }
.tv[data-tap]:active { transform: scale(.97); }

/* ---------- overlay UI ---------- */
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; image-rendering: pixelated; }
#osd { position: absolute; z-index: 45; top: calc(var(--top) + var(--u) * 44); left: calc(var(--u) * 18); display: flex; align-items: center; gap: calc(var(--u) * 8);
  color: var(--G); font: 800 calc(var(--u) * 12) / 1 var(--cn); text-shadow: 0 0 4px rgba(48,253,47,.6); pointer-events: none; opacity: 0; transition: opacity .3s; }
#osd.show { opacity: 1; }
#dots { position: absolute; z-index: 30; right: calc(var(--u) * 6); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: calc(var(--u) * 7); }
#dots button { width: calc(var(--u) * 7); height: calc(var(--u) * 7); padding: 0; border: calc(var(--u) * 1.5) solid #111; background: rgba(255,255,255,.75); }
#dots button.on { background: var(--orange); height: calc(var(--u) * 16); }
#musicBtn { position: absolute; z-index: 30; left: calc(var(--u) * 12); bottom: calc(var(--bot) + var(--u) * 12); width: calc(var(--u) * 38); height: calc(var(--u) * 38); border-radius: 50%;
  border: calc(var(--u) * 2.5) solid #111; background: var(--Y); padding: 0; display: none; }
#musicBtn span { display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle, #111 0 18%, transparent 19%), repeating-conic-gradient(var(--orange) 0 25%, var(--Y) 0 50%); }
#musicBtn.on span { animation: spin 2s linear infinite; }
#musicBtn:not(.on)::after { content: ''; position: absolute; left: 50%; top: 8%; bottom: 8%; width: calc(var(--u) * 3); background: #111; transform: rotate(45deg); }
@keyframes spin { to { transform: rotate(360deg); } }
#fab { position: absolute; z-index: 30; right: calc(var(--u) * 20); bottom: calc(var(--bot) + var(--u) * 14); font: 900 calc(var(--u) * 13) / 1 var(--cn); color: #fff; background: var(--R);
  border: calc(var(--u) * 2.5) solid #111; box-shadow: calc(var(--u) * 3) calc(var(--u) * 3) 0 #111; padding: calc(var(--u) * 9) calc(var(--u) * 11); display: none; }
#hint { position: absolute; z-index: 30; left: 50%; bottom: calc(var(--bot) + var(--u) * 10); transform: translateX(-50%); text-align: center; color: #111; font: 900 calc(var(--u) * 11) / 1.1 var(--cn);
  pointer-events: none; animation: hint 1.4s ease-in-out infinite; display: none; text-shadow: 0 0 6px #fff; }
@keyframes hint { 50% { transform: translate(-50%, calc(var(--u) * -8)); } }
body.booted #musicBtn, body.booted #hint { display: block; }
body:not(.booted) #dots { display: none; }
body.booted.fab #fab { display: block; }
body.on-dark #hint { color: #fff; text-shadow: none; }

/* ---------- ① cover + boot ---------- */
.p-cover { align-items: stretch; }
.cv-title { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 10); }
.cv-city { display: flex; align-items: flex-end; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 2); }
.cv-city span { display: flex; flex-direction: column; gap: calc(var(--u) * 5); padding-bottom: calc(var(--u) * 4); }
.cv-city em { font-style: normal; font-weight: 800; font-size: calc(var(--u) * 13); }
.cv-slogan { margin: calc(var(--u) * 4) 0 0; font-weight: 900; font-size: calc(var(--u) * 17); }
.cv-venue { margin: 0; font-weight: 700; font-size: calc(var(--u) * 14); color: #333; }
.tv-stack { position: relative; flex: 1; min-height: calc(var(--u) * 240); }
.tv-stack .tv { position: absolute; }
.tv-a { width: calc(var(--u) * 146); left: calc(var(--u) * 0); bottom: calc(var(--u) * 0); }
.tv-b { width: calc(var(--u) * 196); right: calc(var(--u) * 0); bottom: calc(var(--u) * 0); }
/* tv-c sits on the short left TV: on the tall right one it rose into the venue line (stack is only ~251u tall at 390x760) */
.tv-c { width: calc(var(--u) * 118); left: calc(var(--u) * 14); bottom: calc(var(--u) * 120); }
.tv-stack .tip { position: absolute; right: calc(var(--u) * 14); bottom: calc(var(--u) * 192); font-weight: 900; font-size: calc(var(--u) * 13); background: #fff; border: calc(var(--u) * 2) solid #111; padding: calc(var(--u) * 5) calc(var(--u) * 8); }

.boot { position: absolute; inset: 0; z-index: 20; background: #000; display: flex; align-items: center; justify-content: center; }
.boot.gone { animation: bootOut .45s ease-in forwards; }
@keyframes bootOut { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.boot-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.boot-ui { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 18); color: #fff; text-align: center; }
.boot-ui.gone { display: none; }
.boot-tv { width: calc(var(--u) * 230); }
.btn-power { background: var(--R); color: #fff; font-size: calc(var(--u) * 22); padding: calc(var(--u) * 16) calc(var(--u) * 34); }
.boot-tip { margin: 0; font-size: calc(var(--u) * 12); color: #aaa; }
.boot-inv { margin: 0; font-size: calc(var(--u) * 15); font-weight: 800; color: var(--Y); max-width: calc(var(--u) * 300); line-height: 1.5; white-space: pre-line; }

/* ---------- ② 1024 + cities ---------- */
.p-what { justify-content: center; }
.wt-a { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 12); width: 100%; transition: transform .7s cubic-bezier(.6, 0, .3, 1), opacity .5s; }
.wt-count { display: flex; align-items: flex-end; gap: calc(var(--u) * 8); }
.wt-sub { margin: 0; font-weight: 800; font-size: calc(var(--u) * 15); }
.wt-sub b { color: var(--orange); font-size: 1.2em; }
.tv-grid { width: calc(var(--u) * 300); }
.wt-days { display: flex; gap: calc(var(--u) * 14); }
.day { width: calc(var(--u) * 158); opacity: 0; transform: scale(.6); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; }
.day.on { opacity: 1; transform: none; }
.day .bar { font-size: calc(var(--u) * 12); }
.day b { display: block; padding: calc(var(--u) * 8) calc(var(--u) * 10); font-size: calc(var(--u) * 18); }
.btn-hold { font-size: calc(var(--u) * 20); padding: calc(var(--u) * 16) calc(var(--u) * 38); background: var(--O); touch-action: none; }
.btn-hold.full { background: var(--G); }
.wt-b { position: absolute; inset: 0; background: #10237A; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 50) calc(var(--u) * 16) calc(var(--u) * 40); opacity: 0; transform: scale(.3); pointer-events: none; transition: transform .6s cubic-bezier(.5, 0, .3, 1.2), opacity .4s; }
.p-what.done .wt-b { opacity: 1; transform: none; pointer-events: auto; }
.p-what.done .wt-a { transform: scale(2.6); opacity: 0; }
.cw-title { display: flex; align-items: flex-end; gap: calc(var(--u) * 14); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 6); width: 100%; max-width: calc(var(--u) * 360); }
.tile { height: calc(var(--u) * 44); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: calc(var(--u) * 15); color: #111;
  background: var(--c); box-shadow: calc(var(--u) * 4) calc(var(--u) * 4) 0 #0A1650; opacity: 0; transform: scale(.4); }
.p-what.done .tile { animation: popIn .35s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: var(--d); }
.tile.zz { outline: calc(var(--u) * 4) solid #fff; }
.p-what.done .tile.zz { animation: popIn .35s cubic-bezier(.3, 1.6, .5, 1) both, zz .5s steps(1) 1.6s infinite; animation-delay: var(--d), 1.6s; }
.tile.hn { color: #fff; background: var(--orange) !important; }
@keyframes zz { 50% { outline-color: transparent; } }
.cw-sub { margin: 0; color: var(--Y); font-weight: 900; font-size: calc(var(--u) * 18); }
.cw-sub2 { margin: 0; color: #C9D3FF; font-weight: 700; font-size: calc(var(--u) * 13); text-align: center; }

/* ---------- ③ tracks ---------- */
.p-tracks { gap: calc(var(--u) * 12); }
.tr-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.tr-head span { font-weight: 800; font-size: calc(var(--u) * 12); text-align: right; color: #333; }
.tv-track { width: calc(var(--u) * 272); touch-action: none; }
.tr-card { width: 100%; --c: #F2541B; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tr-card .bar { font-size: calc(var(--u) * 15); }
.tr-card .bar span:last-child { font-size: calc(var(--u) * 12); font-weight: 700; opacity: .95; overflow: hidden; text-overflow: ellipsis; }
.tr-body { padding: calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 8); overflow: hidden; }
.tr-body p { margin: calc(var(--u) * 8) 0 calc(var(--u) * 6); font-weight: 700; font-size: calc(var(--u) * 14); line-height: 1.45; }
.tr-body ul { margin: 0; padding: 0; list-style: none; }
.tr-body li { position: relative; padding-left: calc(var(--u) * 16); font-size: calc(var(--u) * 13); line-height: 1.5; font-weight: 600; color: #333; }
.tr-body li::before { content: ''; position: absolute; left: 0; top: .5em; width: calc(var(--u) * 7); height: calc(var(--u) * 7); background: var(--c); outline: calc(var(--u) * 1.5) solid #111; }
.tr-card.flash { animation: flash .3s steps(2); }
@keyframes flash { 50% { filter: invert(1); } }
.remote { display: flex; gap: calc(var(--u) * 5); width: 100%; justify-content: center; }
.remote button { flex: none; width: calc(var(--u) * 35); height: calc(var(--u) * 36); font: 900 calc(var(--u) * 14) / 1 var(--cn); border: calc(var(--u) * 2.5) solid #111; background: #fff;
  box-shadow: calc(var(--u) * 3) calc(var(--u) * 3) 0 #111; padding: 0; color: #111; }
.remote button.on { background: var(--c, var(--Y)); color: #fff; }
.remote button.rand { width: auto; padding: 0 calc(var(--u) * 8); background: var(--Y); color: #111; margin-left: calc(var(--u) * 3); }
.remote button:active { transform: translate(calc(var(--u) * 2), calc(var(--u) * 2)); box-shadow: none; }

/* ---------- ④ prize ---------- */
.p-prize { gap: calc(var(--u) * 12); }
.pz-head { display: flex; align-items: flex-end; gap: calc(var(--u) * 8); }
.scratch { width: 100%; }
.sc-body { position: relative; padding: calc(var(--u) * 12) calc(var(--u) * 10) calc(var(--u) * 12); text-align: center; background: #FFF8E6; }
.sc-body p { margin: calc(var(--u) * 6) 0 0; font-size: calc(var(--u) * 13); font-weight: 600; }
.sc-body p b { font-size: calc(var(--u) * 15); font-weight: 900; }
.big-num { display: block; margin: 0 auto; width: calc(var(--u) * 300); height: calc(var(--u) * 92); }
.sc-cover { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; transition: opacity .5s; }
.sc-cover.gone { opacity: 0; pointer-events: none; }
.skip { border: none; background: none; font: 800 calc(var(--u) * 12) / 1 var(--cn); color: #444; text-decoration: underline; padding: 0; margin-top: calc(var(--u) * -2); }
.pz-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: calc(var(--u) * 7); }
.pz-list li { display: flex; align-items: center; gap: calc(var(--u) * 10); background: #fff; border: calc(var(--u) * 2.5) solid #111; padding: calc(var(--u) * 6) calc(var(--u) * 8);
  font-size: calc(var(--u) * 12.5); font-weight: 600; opacity: 0; transform: translateX(-30%); transition: transform .4s cubic-bezier(.3, 1.5, .5, 1), opacity .3s; }
.pz-list li b { flex: none; background: var(--c); color: #111; font-weight: 900; font-size: calc(var(--u) * 13); padding: calc(var(--u) * 4) calc(var(--u) * 7); border: calc(var(--u) * 2) solid #111; }
.p-prize.open .pz-list li { opacity: 1; transform: none; }
.pz-time { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12); font-weight: 800; text-align: center; opacity: 0; transition: opacity .4s 1s; }
.pz-time i { font-style: normal; color: var(--orange); }
.p-prize.open .pz-time { opacity: 1; }

/* ---------- ⑤ days ---------- */
.p-days { background: #101628; color: #fff; justify-content: space-between; padding-top: calc(var(--top) + var(--u) * 22); }
.sky { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.dy-top { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; padding-right: calc(var(--u) * 6); }
.dy-main { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 14); width: 100%; padding: 0 calc(var(--u) * 6); }
.dy-label { margin: 0 0 calc(var(--u) * 10); font-weight: 900; font-size: calc(var(--u) * 15); color: #fff; background: rgba(7, 11, 36, .45); border: calc(var(--u) * 2) solid #fff; padding: calc(var(--u) * 5) calc(var(--u) * 10); }
.dy-sub { margin: 0; font-size: calc(var(--u) * 16); font-weight: 800; color: #fff; text-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 rgba(7, 11, 36, .55); line-height: 1.5; min-height: 3em; }
.dy-ctrl { position: relative; width: 100%; display: flex; flex-direction: column; gap: calc(var(--u) * 14); }
.dy-tabs { display: flex; gap: calc(var(--u) * 8); }
.dy-tabs button { flex: 1; font: 900 calc(var(--u) * 13) / 1 var(--cn); padding: calc(var(--u) * 10) 0; border: calc(var(--u) * 2.5) solid #fff; background: transparent; color: #fff; }
.dy-tabs button.on { background: #fff; color: #101628; }
.dy-tabs #dyPlay { flex: .7; background: var(--orange); border-color: var(--orange); }
.slider { position: relative; height: calc(var(--u) * 46); touch-action: none; cursor: pointer; }
.slider .rail { position: absolute; left: 0; right: 0; top: calc(var(--u) * 19); height: calc(var(--u) * 8); background: rgba(255,255,255,.2); outline: calc(var(--u) * 2) solid #fff; }
.slider .fill { height: 100%; width: 0; background: var(--Y); }
.slider .ticks i { position: absolute; top: calc(var(--u) * 32); width: calc(var(--u) * 3); height: calc(var(--u) * 8); background: #fff; transform: translateX(-50%); }
.slider .ticks i.d2 { background: var(--B); }
.slider .ticks i.sep { top: calc(var(--u) * 8); height: calc(var(--u) * 30); width: calc(var(--u) * 2); background: var(--orange); }
.slider .knob { position: absolute; top: calc(var(--u) * 8); width: calc(var(--u) * 26); height: calc(var(--u) * 30); background: var(--Y); border: calc(var(--u) * 3) solid #111; transform: translateX(-50%);
  box-shadow: calc(var(--u) * 3) calc(var(--u) * 3) 0 #000; }
.dy-hint { margin: 0; text-align: center; font-size: calc(var(--u) * 12); color: #8FA6FF; font-weight: 700; }

/* ---------- ⑥ crew ---------- */
.p-crew { gap: calc(var(--u) * 10); }
.cr-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.judges { display: flex; gap: calc(var(--u) * 9); width: 100%; }
.judge { flex: 1; background: #fff; border: calc(var(--u) * 3) solid #111; box-shadow: calc(var(--u) * 4) calc(var(--u) * 4) 0 #111; position: relative; text-align: center; cursor: pointer;
  opacity: 0; transform: translateX(var(--from, -60%)); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; transition-delay: var(--d); }
.page.play .judge { opacity: 1; transform: none; }
.judge canvas { display: block; width: 100%; aspect-ratio: 10 / 9; image-rendering: pixelated; border-bottom: calc(var(--u) * 3) solid #111; }
.judge b { display: block; font-size: calc(var(--u) * 17); font-weight: 900; margin: calc(var(--u) * 6) 0 calc(var(--u) * 2); }
.judge small { display: block; font-size: calc(var(--u) * 10.5); line-height: 1.35; color: #444; font-weight: 600; padding: 0 calc(var(--u) * 5) calc(var(--u) * 7); min-height: 4.1em; }
.judge .ready { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%) rotate(-12deg) scale(0); background: var(--Y); border: calc(var(--u) * 2.5) solid #111;
  font: 900 calc(var(--u) * 13) / 1 var(--cn); padding: calc(var(--u) * 5) calc(var(--u) * 7); transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); white-space: nowrap; }
.judge.sel { outline: calc(var(--u) * 4) solid var(--R); }
.judge.sel .ready { transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
.cr-head2 { width: 100%; display: flex; align-items: baseline; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 6); }
.cr-head2 b { font-size: calc(var(--u) * 20); font-weight: 900; }
.cr-head2 span { font-size: calc(var(--u) * 11); font-weight: 700; color: #444; }
.logos { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 6); }
.logos .sec { grid-column: 1 / -1; font-size: calc(var(--u) * 11); font-weight: 900; color: #fff; background: #111; padding: calc(var(--u) * 3) calc(var(--u) * 8); justify-self: start; opacity: 0; }
.lg { font: inherit; color: inherit; height: calc(var(--u) * 38); background: #fff; border: calc(var(--u) * 2) solid #111; display: flex; align-items: center; justify-content: center; padding: calc(var(--u) * 3); position: relative; opacity: 0; }
.lg img { max-width: 100%; max-height: 100%; pointer-events: none; }
.lg.loc::after { content: '郑'; position: absolute; right: calc(var(--u) * -5); top: calc(var(--u) * -6); background: var(--orange); color: #fff; font: 900 calc(var(--u) * 9) / 1 var(--cn); padding: calc(var(--u) * 2) calc(var(--u) * 3); border: calc(var(--u) * 1.5) solid #111; }
.page.play .lg, .page.play .logos .sec { animation: logoDrop .5s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: var(--d); }
@keyframes logoDrop { 0% { opacity: 0; transform: translateY(calc(var(--u) * -260)); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.lg.jump { animation: jump .35s cubic-bezier(.3, 1.8, .5, 1) !important; opacity: 1; }
@keyframes jump { 40% { transform: translateY(calc(var(--u) * -12)) scale(1.08); } }
.cr-foot { margin: auto 0 calc(var(--u) * 2); font-size: calc(var(--u) * 12); line-height: 1.5; font-weight: 800; color: #333; text-align: center; }
.cr-foot .tech, .mk-note .tech { display: block; }
.cr-foot .tech { color: #111; }
.mk-note .tech { margin-top: calc(var(--u) * 3); font-weight: 800; color: #333; }
.toast { position: absolute; left: 50%; bottom: calc(var(--bot) + var(--u) * 64); transform: translateX(-50%); z-index: 5; background: #111; color: #fff; font-weight: 800; font-size: calc(var(--u) * 13);
  padding: calc(var(--u) * 9) calc(var(--u) * 14); white-space: nowrap; border: calc(var(--u) * 2) solid var(--Y); }

/* ---------- ⑦ make ---------- */
.p-make { gap: calc(var(--u) * 10); }
.mk-head { width: 100%; display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
.mk-head span { font-size: calc(var(--u) * 13); font-weight: 700; color: #333; }
.mk-top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); }
.seg { display: flex; flex: none; border: calc(var(--u) * 2.5) solid #111; box-shadow: calc(var(--u) * 3) calc(var(--u) * 3) 0 #111; }
.seg button { font: 900 calc(var(--u) * 13) / 1 var(--cn); padding: calc(var(--u) * 8) calc(var(--u) * 12); border: none; background: #fff; color: #111; }
.seg button.on { background: #111; color: var(--Y); }
.p-make:not(.biz) .only-biz, .p-make.biz .only-me { display: none; }
.tv-logo { width: calc(var(--u) * 216); cursor: pointer; }
.tv > .logo-scr, .btv .bscr { background: #fff; display: flex; align-items: center; justify-content: center; }
.logo-scr::after, .bscr::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg, transparent 38%, rgba(255,255,255,.4) 48%, transparent 58%), repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px); }
.logo-scr .ph-empty { color: #111; }
.logo-scr .ph-empty small { color: #555; }
.lg-img { max-width: 78%; max-height: 64%; object-fit: contain; }
.lg-img[hidden] { display: none; }
.tv.on > .scr, .btv.on .bscr { animation: crtOn .7s ease-out both; animation-delay: var(--dl, 0s); }
@keyframes crtOn { 0% { transform: scale(.5, .015); filter: brightness(6); } 35% { transform: scale(1, .015); filter: brightness(4); } 70% { transform: none; filter: brightness(1.6); } 100% { transform: none; filter: none; } }
.biz-form .mk-row > label { width: calc(var(--u) * 42); }
.btn-biz { background: var(--B); color: #fff; text-shadow: calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 #111; }
.tv-photo { width: calc(var(--u) * 236); cursor: pointer; touch-action: none; }
.tv > .photo-scr { background: #1E58F5; }
.ph-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 6); color: #fff; text-align: center; }
.ph-empty b { font-size: calc(var(--u) * 15); animation: blink 1.2s steps(1) infinite; }
.ph-empty small { font-size: calc(var(--u) * 11); color: #C9D3FF; }
.ph-empty[hidden] { display: none; }
.ph-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; pointer-events: none; }
/* framing guide only: the whole visible photo goes to the AI */
.ph-ring { position: absolute; left: 50%; top: 44%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%); border: calc(var(--u) * 2.5) dashed #fff; border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(0,0,0,.35); pointer-events: none; }
.ph-ring span { position: absolute; left: 50%; top: calc(100% + var(--u) * 2); transform: translateX(-50%); white-space: nowrap; color: #fff; font-size: calc(var(--u) * 10.5); font-weight: 800; }
.mk-form { width: 100%; padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 6); }
.mk-row { display: flex; align-items: flex-start; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 8); }
.mk-row > label { flex: none; width: calc(var(--u) * 34); font-weight: 900; font-size: calc(var(--u) * 13); padding-top: calc(var(--u) * 6); }
.mk-row input { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; padding: calc(var(--u) * 7) calc(var(--u) * 9); border: calc(var(--u) * 2.5) solid #111; outline: none; border-radius: 0; background: #FFFBE0; }
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); }
.chips button { font: 800 calc(var(--u) * 12.5) / 1 var(--cn); color: #111; background: #fff; border: calc(var(--u) * 2) solid #111; padding: calc(var(--u) * 6) calc(var(--u) * 8); }
.chips button.on { background: var(--c, var(--Y)); color: #fff; box-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 #111; }
.chips button.on.dark { color: #111; }
.mk-btns { display: flex; gap: calc(var(--u) * 12); width: 100%; }
.mk-btns .btn { flex: 1.25; padding-left: 0; padding-right: 0; }
.mk-btns .btn-2 { flex: 1; font-size: calc(var(--u) * 15); }
.mk-note { margin: 0; font-size: calc(var(--u) * 10.5); color: #555; text-align: center; font-weight: 600; text-wrap: balance; padding-bottom: calc(var(--u) * 26); }
.mk-layer { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 16);
  background: rgba(16, 22, 40, .92); color: #fff; padding: calc(var(--u) * 30); }
.mk-layer[hidden] { display: none; }
.tv-load { width: calc(var(--u) * 260); }
.ld-tip { margin: 0; font-weight: 900; font-size: calc(var(--u) * 16); color: var(--Y); min-height: 1.5em; text-align: center; }
.ld-tech { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 72); margin: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6);
  font-size: calc(var(--u) * 10); letter-spacing: .1em; color: #fff; opacity: .42; pointer-events: none; }
.ld-tech img { height: calc(var(--u) * 20); width: auto; }
.res-stage { position: relative; width: calc(var(--u) * 300); height: calc(var(--u) * 380); display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(ellipse 60% 8% at 50% 96%, rgba(0,0,0,.45), transparent 70%), radial-gradient(circle at 50% 45%, rgba(255,250,109,.35), transparent 60%); }
.res-stage img { max-width: 100%; max-height: 96%; animation: popIn .5s cubic-bezier(.3, 1.6, .5, 1) both, bob 1s ease-in-out .5s infinite; image-rendering: auto; }
.res-title { margin: 0; font-weight: 900; font-size: calc(var(--u) * 20); }
.res-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 12); }
.res-btns .btn { font-size: calc(var(--u) * 15); padding: calc(var(--u) * 12) calc(var(--u) * 14); }
.res-btns #resPost { width: 100%; font-size: calc(var(--u) * 20); background: var(--G); }

/* ---------- ⑧ wall ---------- */
.p-wall { gap: calc(var(--u) * 8); }
.wl-head { width: 100%; display: flex; align-items: center; }
.wl-bar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); }
.wl-count { display: flex; flex: none; align-items: center; gap: calc(var(--u) * 5); font-weight: 900; font-size: calc(var(--u) * 13); white-space: nowrap; }
.wl-modes { display: flex; flex: none; border: calc(var(--u) * 2.5) solid #111; box-shadow: calc(var(--u) * 3) calc(var(--u) * 3) 0 #111; }
.wl-modes button { font: 900 calc(var(--u) * 13) / 1 var(--cn); padding: calc(var(--u) * 8) calc(var(--u) * 11); border: none; background: #fff; color: #111; white-space: nowrap; }
.wl-modes button.on { background: #111; color: var(--Y); }
.crowd { position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--top) + var(--u) * 150); bottom: calc(var(--bot) + var(--u) * 84); }
.ava { position: absolute; transform: translateX(-50%); transform-origin: 50% 100%; transition: left .7s cubic-bezier(.5, 0, .3, 1), bottom .7s cubic-bezier(.5, 0, .3, 1), height .7s, opacity .4s; cursor: pointer; }
.ava img, .ava canvas { display: block; height: 100%; width: auto; pointer-events: none; animation: bob 1s ease-in-out infinite; animation-delay: var(--bd, 0s); }
.ava.me::before { content: '我'; position: absolute; left: 50%; top: calc(var(--u) * -26); transform: translateX(-50%); background: var(--R); color: #fff; font: 900 calc(var(--u) * 12) / 1 var(--cn);
  padding: calc(var(--u) * 4) calc(var(--u) * 6); border: calc(var(--u) * 2) solid #111; z-index: 2; animation: bob 1s ease-in-out infinite; }
.ava.new { animation: avaIn .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.ava.ghost { opacity: .55; }
.ava.hide { opacity: 0; pointer-events: none; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5%); } }
@keyframes avaIn { 0% { transform: translateX(-50%) translateY(-60%) scale(.3); opacity: 0; } 100% { transform: translateX(-50%); opacity: 1; } }
.cell1024 { position: absolute; background: var(--c); border: calc(var(--u) * 1.5) solid #111; opacity: 0; transition: opacity .4s; }
.crowd.m1024 .cell1024 { opacity: .9; }
.wl-bubble { position: absolute; z-index: 8; transform: translate(-50%, -100%); background: #fff; border: calc(var(--u) * 2.5) solid #111; box-shadow: calc(var(--u) * 3) calc(var(--u) * 3) 0 #111;
  padding: calc(var(--u) * 7) calc(var(--u) * 10); font-size: calc(var(--u) * 13); font-weight: 800; white-space: nowrap; pointer-events: none; }
.wl-bubble small { display: block; font-size: calc(var(--u) * 11); color: #555; font-weight: 700; margin-top: calc(var(--u) * 2); }
.wl-bubble.wrap { white-space: normal; width: max-content; max-width: calc(var(--u) * 250); line-height: 1.35; }
/* company TV wall: a grid of TVs sized by wall.js (--cols, --tw) to fit the whole list */
.bizwall { position: absolute; z-index: 1; left: calc(var(--u) * 14); right: calc(var(--u) * 14); top: calc(var(--top) + var(--u) * 154); bottom: calc(var(--bot) + var(--u) * 84);
  display: none; grid-template-columns: repeat(var(--cols, 3), var(--tw, 33%)); justify-content: center; align-content: center; gap: calc(var(--u) * 8); }
.p-wall.biz .bizwall { display: grid; }
.p-wall.biz .crowd { visibility: hidden; }
.btv { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); min-width: 0; padding: 0; border: none; background: none; font: inherit; color: #111; cursor: pointer; }
.btv .tv { display: block; width: 100%; }
.btv .bscr img { max-width: 80%; max-height: 66%; object-fit: contain; }
.btv .bscr em { font-style: normal; font-weight: 900; font-size: clamp(calc(var(--u) * 9), calc(var(--tw) * .11), calc(var(--u) * 15)); text-align: center; line-height: 1.25; padding: 0 6%; }
.btv > b { max-width: 100%; font-size: clamp(calc(var(--u) * 9), calc(var(--tw) * .1), calc(var(--u) * 12)); font-weight: 900; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #fff; border: calc(var(--u) * 1.5) solid #111; padding: calc(var(--u) * 1.5) calc(var(--u) * 5); }
.btv.me > b { background: var(--R); color: #fff; }
.btv.me::before { content: '我们'; position: absolute; z-index: 2; right: calc(var(--u) * -2); top: calc(var(--u) * -8); background: var(--R); color: #fff; font: 900 calc(var(--u) * 11) / 1 var(--cn);
  padding: calc(var(--u) * 3) calc(var(--u) * 5); border: calc(var(--u) * 2) solid #111; animation: bob 1s ease-in-out infinite; }
.btv.cta .bscr { background: var(--B); }
.btv.cta .bscr em { color: #fff; animation: blink 1.2s steps(1) infinite; }
.btv.cta > b { background: transparent; border-style: dashed; color: #444; }
.btv:active .tv { transform: scale(.96); }
.wl-btns { position: absolute; left: calc(var(--u) * 60); right: calc(var(--u) * 24); bottom: calc(var(--bot) + var(--u) * 18); display: flex; gap: calc(var(--u) * 10); z-index: 9; }
.wl-btns .btn { flex: 1.3; padding-left: 0; padding-right: 0; font-size: calc(var(--u) * 16); }
.wl-btns .btn-2 { flex: 1; font-size: calc(var(--u) * 14); }

/* ---------- share overlay ---------- */
.share { position: absolute; inset: 0; z-index: 35; background: rgba(8, 10, 20, .9); display: flex; align-items: center; justify-content: center; padding: calc(var(--top) + var(--u) * 16) calc(var(--u) * 16) calc(var(--bot) + var(--u) * 16); }
.share[hidden] { display: none; }
.sh-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 12); width: 100%; height: 100%; justify-content: center; }
.sh-img { position: relative; height: min(72%, calc((100vw - var(--u) * 32) * 16 / 9)); aspect-ratio: 9 / 16; background: #222; border: calc(var(--u) * 3) solid #fff; display: flex; align-items: center; justify-content: center; }
.sh-img img { display: block; width: 100%; height: 100%; -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; pointer-events: auto; }
.sh-wait { position: absolute; color: #fff; font-weight: 800; font-size: calc(var(--u) * 14); }
.sh-tip { margin: 0; color: var(--Y); font-weight: 900; font-size: calc(var(--u) * 15); }
.sh-btns, .sh-links { display: flex; gap: calc(var(--u) * 12); width: calc(var(--u) * 320); max-width: 100%; }
.sh-btns .btn { flex: 1; font-size: calc(var(--u) * 14); padding: calc(var(--u) * 11) 0; }
.sh-links { margin-top: calc(var(--u) * 4); }
.sh-links .btn { flex: 1; font-size: calc(var(--u) * 18); padding: calc(var(--u) * 14) 0; color: #fff; text-shadow: calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 #111; }
.sh-links .btn i { width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #fff; border-width: calc(var(--u) * 6) 0 calc(var(--u) * 6) calc(var(--u) * 9);
  filter: drop-shadow(calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 #111); animation: nudge .9s ease-in-out infinite; }
.btn-go { background: var(--R); }
.btn-info { background: var(--B); }
@keyframes nudge { 50% { transform: translateX(calc(var(--u) * 4)); } }
.sh-close { position: absolute; top: 0; right: 0; width: calc(var(--u) * 38); height: calc(var(--u) * 38); border: calc(var(--u) * 2.5) solid #fff; background: transparent; color: #fff; font-size: calc(var(--u) * 24); line-height: 1; padding: 0; }