/* ui-choose — 10.29 设计对齐：A05 选主题 / A05b 试玩开场 / A05c 选关 / A12 欢迎页
   选择器全部限定在分页结构内，不改 .back/.btn/.text-link 的基础规则。 */

/* ============ C-054 / C-055 / C-058 · A05 选主题 ============ */
/* 整页静态铺满：?view=choose 下 main 不滚动，底部「先随便看看」固定在首屏。 */
main:has(> .choose-page){padding:0;overflow:hidden}
.choose-page{display:flex;flex-direction:column;height:100%;min-height:0;background:#fff}
.choose-head{flex:none;display:flex;flex-direction:column;gap:6px;padding:20px 20px 10px}
.choose-head .eyebrow{color:var(--accent);font-size:13px;font-weight:700;line-height:1.3;letter-spacing:0}
.choose-head h1{font-size:30px;font-weight:900;line-height:1.3;letter-spacing:-.4px}
.choose-head .muted{font-size:15px;line-height:1.55;color:#6F666B}
.choose-page .resume-card{flex:none;margin:12px 20px 0}

/* 拼贴墙容器：卡片绝对定位、铺满标题与底部按钮之间的所有空间。 */
.choose-page .card-deck{position:relative;flex:1 1 auto;min-height:0;margin:0;padding:0;display:block;overflow:hidden;background:#fff}
.choose-page .deck-dim,.choose-page .deck-bright{position:absolute;inset:0}
/* 1030 走查 #7：上下边缘都渐隐（原来只渐隐了上边）。 */
.choose-page .deck-dim{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.choose-page .deck-bright{pointer-events:none}
.choose-page .deck-bright .deck-card{pointer-events:auto}

/* 灰卡：白底、低对比、5 种字号与 5 种以上宽度，不同角度互相压叠。 */
.choose-page .deck-dim .deck-card{position:absolute;margin:0;min-height:0;width:auto;padding:16px 20px;border-radius:24px;background:#fff;color:#A89CA2;box-shadow:0 8px 22px rgba(36,24,30,.06);transform:rotate(var(--r,0deg));display:flex;flex-direction:column;gap:5px;overflow:hidden}
.choose-page .deck-dim .deck-card .pill{align-self:flex-start;background:#F4F2F3;color:#9C9298;font-size:10px;font-weight:700;padding:3px 8px}
.choose-page .deck-dim .deck-card h2{display:flex;align-items:center;gap:5px;margin:0;font-size:16px;font-weight:700;line-height:1.3;white-space:nowrap}
.choose-page .deck-dim .deck-card .lock-icon{width:14px;height:14px;flex:none;opacity:.75}
/* 5 个尺寸档位（模板按 i % 5 分配） */
.choose-page .deck-dim .deck-card.size-0{padding:12px 16px}
.choose-page .deck-dim .deck-card.size-0 h2{font-size:14px}
.choose-page .deck-dim .deck-card.size-1{padding:14px 18px}
.choose-page .deck-dim .deck-card.size-1 h2{font-size:16px}
.choose-page .deck-dim .deck-card.size-2{padding:17px 20px}
.choose-page .deck-dim .deck-card.size-2 h2{font-size:19px}
.choose-page .deck-dim .deck-card.size-3{padding:12px 16px}
.choose-page .deck-dim .deck-card.size-3 h2{font-size:15px}
.choose-page .deck-dim .deck-card.size-4{padding:18px 20px}
.choose-page .deck-dim .deck-card.size-4 h2{font-size:17px}
/* 12 个灰卡的落位：上下两带 + 左右出屏 + 亮卡身后再压一层，铺满整面。 */
.choose-page .deck-dim .deck-card:nth-child(1){left:-16%;top:-4%;width:66%;--r:-7deg}
.choose-page .deck-dim .deck-card:nth-child(2){left:32%;top:-6%;width:66%;--r:5deg}
.choose-page .deck-dim .deck-card:nth-child(3){left:66%;top:2%;width:62%;--r:-4deg}
.choose-page .deck-dim .deck-card:nth-child(4){left:-18%;top:20%;width:62%;--r:6deg}
.choose-page .deck-dim .deck-card:nth-child(5){left:58%;top:24%;width:64%;--r:-6deg}
.choose-page .deck-dim .deck-card:nth-child(6){left:-12%;top:40%;width:62%;--r:-5deg}
.choose-page .deck-dim .deck-card:nth-child(7){left:54%;top:46%;width:62%;--r:4deg}
.choose-page .deck-dim .deck-card:nth-child(8){left:-16%;top:62%;width:64%;--r:5deg}
.choose-page .deck-dim .deck-card:nth-child(9){left:40%;top:66%;width:66%;--r:-4deg}
.choose-page .deck-dim .deck-card:nth-child(10){left:4%;top:84%;width:62%;--r:-3deg}
.choose-page .deck-dim .deck-card:nth-child(11){left:58%;top:84%;width:58%;--r:6deg}
.choose-page .deck-dim .deck-card:nth-child(12){left:26%;top:44%;width:56%;--r:3deg}
/* 灰卡多于 12 张时的兜底落位（当前数据 8+4 张重复纹理，不会走到这里）。 */
.choose-page .deck-dim .deck-card:nth-child(13){left:8%;top:8%;width:58%;--r:8deg}
.choose-page .deck-dim .deck-card:nth-child(14){left:44%;top:30%;width:56%;--r:-3deg}
.choose-page .deck-dim .deck-card:nth-child(15){left:-8%;top:54%;width:58%;--r:4deg}
.choose-page .deck-dim .deck-card:nth-child(16){left:34%;top:74%;width:60%;--r:-6deg}
.choose-page .deck-dim .deck-card:nth-child(17){left:72%;top:58%;width:56%;--r:3deg}
.choose-page .deck-dim .deck-card:nth-child(18){left:20%;top:92%;width:56%;--r:-2deg}
/* 灰卡多于 18 张时的兜底落位。 */
.choose-page .deck-dim .deck-card:nth-child(n+19){left:24%;top:52%;width:54%;--r:3deg}

/* 亮卡：主题色底（tone-0 米黄 / tone-1 浅粉）+ 粉色光晕 + 左右对称。 */
.choose-page .deck-bright .deck-card{position:absolute;width:43%;margin:0;min-height:172px;padding:16px 14px 14px;border-radius:24px;display:flex;flex-direction:column;gap:6px;z-index:3;box-shadow:0 24px 46px rgba(247,61,102,.20),0 0 44px rgba(247,61,102,.18),0 10px 24px rgba(36,24,30,.07)}
/* 1030 走查 #7：两张亮卡在拼贴墙区域内上下左右居中（原来贴在顶部 12%，下半屏空）。 */
.choose-page .deck-bright .deck-card:nth-child(1){left:6%;top:50%;transform:translateY(-50%) rotate(-4deg)}
.choose-page .deck-bright .deck-card:nth-child(2){left:54%;top:50%;width:41%;transform:translateY(-50%) rotate(3deg)}
.choose-page .deck-bright .deck-card .pill{align-self:flex-start;background:#fff;color:var(--accent);font-size:10px;font-weight:700;padding:4px 9px;box-shadow:0 2px 8px rgba(247,61,102,.12)}
.choose-page .deck-bright .deck-card h2{margin:2px 0 0;font-size:21px;font-weight:900;line-height:1.35;letter-spacing:-.5px}
.choose-page .deck-bright .deck-card p{margin:2px 0 0;font-size:12px;line-height:1.7;color:#4A3F45}
.choose-page .deck-bright .deck-card b{margin-top:auto;padding-top:12px;font-size:13px;color:var(--accent)}
.choose-page .deck-bright .deck-card .scene-art{flex:none;align-self:center;width:88px;height:88px;aspect-ratio:1;margin:4px 0;background:transparent;border-radius:0}
.choose-page .deck-bright .deck-card .scene-art img{padding:0}
@media(max-height:650px){.choose-page .deck-bright .deck-card .scene-art{width:64px;height:64px;margin:0}}

/* 虚线卡：压在最下层灰卡之上、底部按钮之前。 */
.choose-page .card-deck .deck-more.dashed{position:absolute;left:36%;top:86%;width:30%;z-index:2;margin:0;padding:8px;border:1.5px dashed #DCCFBB;border-radius:16px;background:#FFF8EC;box-shadow:none;color:#9C7A46;font-size:13px;line-height:1.5;font-weight:700;text-align:center;text-wrap:balance;transform:rotate(-3deg)}

/* C-054 底部「先随便看看」：固定首屏可见的次要入口。 */
.choose-page .choose-skip{flex:none;display:flex;align-items:center;justify-content:center;height:80px;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid #F1EFF0;background:#fff;color:#6F666B;font-size:13px}

/* ============ C-059 · A05b / A05c 圆形返回按钮 ============ */
.back.back-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;flex:none;margin:0 0 16px;padding:0;border:1px solid #EFEAEC;border-radius:50%;background:#fff;font-size:0;line-height:0;text-indent:-9999px;overflow:hidden}
.back.back-icon::before{content:"";position:absolute;inset:0;background:url("/site-assets/icons/ic_back.svg") center/16px 16px no-repeat}

/* ============ C-060 / C-062 · A05b 试玩开场 ============ */
/* 试玩提示条：设计为浅粉底，左灰右主色两段；只作用于带主题标签的开场页。 */
main:has(> .tags)>.trial-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:20px 0 18px;padding:10px 12px;border-radius:10px;background:var(--pink);color:#6F666B;font-size:11px}
main:has(> .tags)>.trial-banner b{color:var(--accent);font-size:11px;font-weight:700}
/* 开场页内容不满一屏时，底部动作区贴住首屏底部（限定带说明行的试玩开场）。 */
main:has(.trial-banner):has(.trial-note){display:flex;flex-direction:column}
main:has(.trial-banner):has(.trial-note) .sticky-action{margin-top:auto}
.trial-banner ~ .tags{margin:14px 0 0}
.tags .pill{background:var(--pink);color:var(--accent);font-size:11px;font-weight:700;padding:5px 11px}
.tags + .page-title{margin:10px 0 18px;gap:8px}
.tags + .page-title h1{font-size:32px;line-height:1.28;letter-spacing:-.6px}
.tags + .page-title .muted{font-size:13px;color:#8A8186}
.people-tags .pill{background:var(--pink);color:var(--accent);font-size:11px;font-weight:700;padding:6px 12px}
.trial-banner ~ .trial-note{text-align:left;font-size:12px;line-height:1.7;color:#8A8186;margin:20px 0 0}
/* 空插图占位在开场页会挤走底部说明，设计稿本页无插图：仅在无封面时收起。 */
.trial-banner ~ .scene-art:not(:has(img)){display:none}

/* ============ C-064 · A05c 选关 ============ */
main:has(> .back + .page-title) .back.back-icon{margin-bottom:2px}
.page-title:has(+ .trial-scenes){margin:0;gap:4px}
.page-title:has(+ .trial-scenes) .eyebrow{font-size:12px;font-weight:700}
.page-title:has(+ .trial-scenes) h1{font-size:30px;line-height:1.3;letter-spacing:-.6px}
.page-title:has(+ .trial-scenes) .muted{font-size:13px;color:#8A8186}
.trial-scenes{display:flex;flex-direction:column;gap:16px;margin:20px 0 0}
.trial-scenes .trial-scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 76px;column-gap:14px;row-gap:0;align-items:start;padding:14px 18px 16px;border:0;border-radius:24px;background:var(--scene-color,#FFF2DC);box-shadow:0 8px 22px rgba(36,24,30,.06)}
.trial-scenes .trial-scene .pill{grid-column:1;grid-row:1;justify-self:start;align-self:start;width:max-content;background:#fff;color:var(--ink);font-size:12px;font-weight:700;padding:4px 11px;box-shadow:0 2px 8px rgba(36,24,30,.06)}
.trial-scenes .trial-scene .scene-art{grid-column:2;grid-row:1;width:76px;height:76px;margin:0;border:1.5px dashed #E4DCD6;border-radius:14px;background:#FFFFFF55}
.trial-scenes .trial-scene .scene-art img{border-radius:12px}
.trial-scenes .trial-scene .scene-art.has-illustration{border:0}

.trial-scenes .trial-scene h2{grid-column:1/-1;margin:4px 0 6px;font-size:22px;line-height:1.4;letter-spacing:-.3px}
.trial-scenes .trial-scene p{grid-column:1/-1;font-size:14px;line-height:1.75;color:#4A3F45}
.trial-scenes .trial-scene .section-head{grid-column:1/-1;margin:12px 0 0}
.trial-scenes .trial-scene .section-head .small{font-size:12px;color:#6F666B}
.trial-scenes .trial-scene .section-head b{background:var(--accent);color:#fff;border-radius:999px;padding:8px 18px;font-size:13px;font-weight:700}
.trial-scenes + .small{margin:18px 0 8px;text-align:center;font-size:11px;color:#8A8186}

/* ============ C-071 · A12 欢迎页示例卡 ============ */
main:has(.welcome-brand){padding-bottom:0}
main:has(.welcome-brand) .sticky-action{padding-bottom:4px}
main:has(.welcome-brand) .icp{margin-top:12px}
.welcome-brand{gap:10px;margin:2px 0 18px}
.welcome-brand img{width:44px;height:44px;border-radius:14px}
.welcome-cards{position:relative;height:auto;margin:6px 0 16px;padding:0}
.welcome-cards .welcome-example{position:relative;top:auto;left:auto;width:90%;margin:0;padding:14px 18px 24px;border:1px solid #F6F3F4;border-radius:20px;background:#fff;box-shadow:0 10px 26px rgba(36,24,30,.09);transform:rotate(var(--tilt,0deg))}
.welcome-cards .welcome-example:nth-child(odd){margin-left:1%;background:#fff}
.welcome-cards .welcome-example:nth-child(even){margin-left:8.5%;background:#fff}
.welcome-cards .welcome-example+.welcome-example{margin-top:-12px}
.welcome-cards .welcome-example .pill{background:var(--pink);color:var(--accent);font-size:11px;font-weight:700;padding:4px 10px}
/* 1030 走查 #17：台词 19 号粗体（原来是 21 号）。 */
.welcome-cards .welcome-example h2{margin:8px 0 4px;font-size:19px;font-weight:700;line-height:1.35;letter-spacing:-.4px}
.welcome-cards .welcome-example p{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.7;color:#8A8186}
.welcome-slogan{margin:14px 0 10px}
.welcome-slogan h1{font-size:28px;line-height:1.35;letter-spacing:-.5px}
.welcome-slogan p{font-size:28px;line-height:1.35;letter-spacing:-.5px}
.welcome-slogan + p.small{font-size:15px;line-height:1.9;color:#6F666B}

/* 10.31 A5：还原产品提供的密集散落卡牌墙。背景仅作装饰。 */
.choose-head{gap:10px;padding:28px 20px 8px}
.choose-head h1{font-size:28px}
.choose-page .deck-dim{opacity:.65;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 93%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 93%,transparent 100%)}
.choose-page .deck-dim .deck-card{height:80px;padding:12px 14px;border:1px solid #EEECEE;border-radius:24px;box-shadow:0 8px 22px #24181E05;gap:6px;color:#948A90}
.choose-page .deck-dim .deck-card h2{font-size:14px;line-height:1.4}
.choose-page .deck-dim .deck-card .pill{padding:2px 7px;font-size:11px;background:#EFEBED;color:#8A8186}
.choose-page .deck-dim .deck-card .lock-icon{width:12px;height:12px}
.choose-page .deck-bright .deck-card{width:43%;height:180px;min-height:0;padding:16px;border-radius:28px;gap:8px}
.choose-page .deck-bright .deck-card:nth-child(1){left:6%;top:48%;transform:translateY(-50%) rotate(-6deg)}
.choose-page .deck-bright .deck-card:nth-child(2){left:51%;top:53%;width:43%;transform:translateY(-50%) rotate(5deg)}
.choose-page .deck-bright .deck-card .pill{font-size:11px;padding:4px 9px;white-space:nowrap}
.choose-page .deck-bright .deck-card h2{font-size:22px;line-height:1.35;margin:0;letter-spacing:-.5px;white-space:nowrap}
.choose-page .deck-bright .deck-card p{font-size:14px;line-height:1.65;-webkit-line-clamp:3;flex:1;margin:0;color:#4A3F45}
.choose-page .deck-bright .deck-card>b{font-size:15px;line-height:1.4;margin-top:auto;color:var(--accent)}
.choose-page .card-deck .deck-more.dashed{left:38%;top:auto;bottom:-2px;width:30%;min-height:76px;padding:20px 10px 12px;border-color:#E6C785;border-radius:30px;background:linear-gradient(#FFF8EC,#fff);font-size:15px;line-height:1.5;text-align:left}
.choose-page .choose-skip{font-size:15px}
@media(max-width:360px){
 .choose-head{padding-top:22px;gap:8px}
 .choose-head h1{font-size:25px}
 .choose-page .deck-bright .deck-card{height:170px;padding:14px 12px;gap:6px}
 .choose-page .deck-bright .deck-card h2{font-size:19px}
 .choose-page .deck-bright .deck-card p{font-size:12px}
 .choose-page .deck-bright .deck-card .pill{font-size:10px;padding:3px 7px}
}
@media(max-height:650px){
 .choose-head{padding-top:18px;gap:6px}
 .choose-head h1{font-size:25px}
 .choose-page .choose-skip{height:64px}
 .choose-page .deck-bright .deck-card{height:164px;padding:12px;gap:6px}
 .choose-page .deck-bright .deck-card h2{font-size:19px}
 .choose-page .deck-bright .deck-card p{font-size:12px}
 .choose-page .deck-dim .deck-card{height:62px;padding:8px 10px;border-radius:18px}
 .choose-page .deck-dim .deck-card h2{font-size:12px}
 .choose-page .card-deck .deck-more.dashed{min-height:52px;padding-top:8px;font-size:12px}
}

.choose-page .deck-dim .deck-card[class*="size-"]{height:90px;padding:12px 14px}
.choose-page .deck-dim .deck-card[class*="size-"] h2{font-size:14px}
.choose-page .deck-bright .deck-card p{min-height:0}
@media(max-height:650px){.choose-page .deck-dim .deck-card[class*="size-"]{height:66px;padding:8px 10px}.choose-page .deck-dim .deck-card[class*="size-"] h2{font-size:12px}}

/* A5-b / B3：背景设定与人物标签按开场页稿；动作区贴底。 */
main:has(> .scene-intro){padding-top:12px;padding-bottom:0}
.scene-intro{display:flex;flex-direction:column;min-height:100%}
.scene-intro>.back{margin-bottom:0}
.scene-intro>.trial-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0 0;padding:9px 12px;border-radius:12px;background:#FFE8EF;color:var(--muted);font-size:12px;line-height:1.5}
.scene-intro>.trial-banner b{font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap}
.scene-intro>.tags{margin:16px 0 0}
.scene-intro .tags>.pill{background:#FFF2DC;color:var(--ink);padding:3px 9px;font-size:11px}
.scene-intro .tags>.pill-access{background:#E6F5EE}
.scene-intro>.page-title{margin:10px 0 18px;gap:18px}
.scene-intro>.page-title h1{font-size:32px;line-height:1.3}
.scene-intro>.page-title .muted{font-size:13px;color:var(--faint)}
.scene-intro>.setup{margin:0;padding:18px;border:1px solid var(--line);border-radius:24px;background:#fff}
.scene-intro>.setup h2{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--faint)}
.scene-intro>.setup p{font-size:15px;line-height:1.85;color:var(--muted)}
.scene-intro>.people-tags{margin-top:16px;gap:8px}
.scene-intro>.people-tags .pill{padding:6px 12px;background:#FFE5EC;color:#4A3F45;font-size:13px;font-weight:400;line-height:1.4}
.scene-intro>.trial-note{margin:20px 0 24px;text-align:left;font-size:12px;line-height:1.7;color:var(--faint)}
.scene-intro>.sticky-action{position:sticky;bottom:0;margin:auto -20px 0;padding:12px 20px calc(24px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.scene-intro>.sticky-action .btn{width:100%}