/* ============================================================
   YUEQI 2026 — mobile.css
   仅移动端（≤760px）：触摸交互语言 / 布局 / 转场 / 进度线
   ============================================================ */

:root { --header-h: calc(62px + env(safe-area-inset-top, 0px)); }

/* 基础治理 */
* { -webkit-tap-highlight-color: transparent; }
html, body, button, a, input, textarea, select, label { cursor: auto; }

body { overflow-x: hidden; }

/* 移动端：使用动态视口高度（100dvh），让底部操作按钮避开浏览器下方工具栏；
   不支持 dvh 的旧浏览器会忽略本声明，自动回退到 shared.css 的 100vh。 */
.app, .viewport { min-height: 100dvh; }

.viewport { touch-action: pan-y; }
.track, .primary, .pill, .back { touch-action: manipulation; }

#cursor, #cursor-ring { display: none; }

/* ----------------------------------------------------------
   顶栏 / 进度
   ---------------------------------------------------------- */

.topbar {
    height: var(--header-h);
    grid-template-columns: 1fr auto;
    padding: env(safe-area-inset-top, 0px) 17px 0;
}
.progress { display: none !important; }
.back {
    grid-column: 2; grid-row: 1; margin-left: 12px;
    font-size: 14px; gap: 8px; padding: 10px 2px;
}
.back svg { width: 16px; height: 16px; }

.viewport { padding-top: var(--header-h); }

/* 垂直进度线 */
#progress-line { display: block; }
#progress-line b { top: var(--line-pos, 0%); }

/* ----------------------------------------------------------
   开屏（纵向构图）
   ---------------------------------------------------------- */

.open-top span:last-child, .open-bottom span:last-child { display: none; }
.open-top, .open-bottom { left: 18px; right: 18px; }
.open-copy h1 { font-size: 21vw; }
.open-copy p { font-size: 9px; }
.open-hint { margin-top: 30px; font-size: 9px; padding: 11px 18px; }

/* ----------------------------------------------------------
   步骤布局
   ---------------------------------------------------------- */

.step { padding: 70px 22px 28px; padding-top: calc(70px + env(safe-area-inset-top, 0px)) !important; }
.step-index {
    position: static; writing-mode: initial;
    margin-bottom: 45px;
}
.question h2 { font-size: 13vw; }
.question > p { font-size: 11px; line-height: 1.7; margin-bottom: 35px; }

.single input { font-size: 26px; }
.grid.two { grid-template-columns: 1fr; gap: 23px; }
.grid label input, .grid label select { font-size: 18px; }
.yq-select-trigger { font-size: 18px; }
.yq-select-menu li { font-size: 16px; }
textarea { font-size: 18px; }
.story-box textarea { min-height: 240px; }

/* 输入框提示文字：略放大 + 提亮对比，兼顾可读性与观感 */
input::placeholder, textarea::placeholder { color: #a3a6a5; }

/* 移动端操作栏：固定（sticky）在右下角，避开浏览器底部工具栏遮挡 */
.step { padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px)) !important; }
.step .actions {
    position: sticky;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    margin: 30px 0 0;
    width: 100% !important;
    max-width: none !important;
    justify-content: flex-end;
    gap: 12px;
    z-index: 25;
}
.step .actions > span { display: none; }
.actions .primary { font-size: 12px; }

/* ----------------------------------------------------------
   赛道页：上下两大区域
   ---------------------------------------------------------- */

.tracks {
    grid-template-columns: 1fr;
    gap: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    perspective: 1000px;
}

.track {
    flex: 1;
    min-height: 150px;
    transform: translateY(var(--lift, 0px)) scale(var(--press, 1))
               rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition:
        transform .55s var(--transition-ease),
        filter .45s ease,
        opacity .45s ease,
        border-color .35s,
        background .35s;
}

.track.tilting { transition: transform .12s linear; }

.track:active { --press: .98; filter: brightness(1.05); }

.track.selected {
    --lift: -4px;
    border-color: rgba(24,29,34,.32);
    box-shadow: 0 22px 70px rgba(40,48,56,.14);
}

.tracks:has(.track.selected) .track:not(.selected) {
    --lift: 0px;
    opacity: .42;
    filter: brightness(.78);
    transform: translateY(var(--lift,0)) scale(.97)
               rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}

.track-no { top: 12px; left: 16px; }
.track .visual { inset: 26px 16px 78px; }
.track strong { left: 16px; bottom: 44px; font-size: 26px; }
.track small { left: 18px; bottom: 26px; }
.track > b { right: 16px; bottom: 15px; }

.selected-track { font-size: 9px; }

/* ----------------------------------------------------------
   触摸交互：按压 / 扩散 / 倾斜
   ---------------------------------------------------------- */

/* 触碰扩散层 */
.ripple {
    position: fixed; z-index: 5500;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 55%, transparent 72%);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    opacity: .9;
}
.ripple.go { animation: rippleSpread 340ms var(--transition-ease) forwards; }
@keyframes rippleSpread {
    to { transform: translate(-50%, -50%) scale(26); opacity: 0; }
}

/* 按钮按压 */
.primary:active, .pill:active { transform: scale(.975); }
.pill:active { filter: brightness(.96); }
.back:active { opacity: .45; }

/* ----------------------------------------------------------
   输入框聚焦：成为视觉中心
   ---------------------------------------------------------- */

.single, .grid label {
    transition: opacity .4s ease, border-color .35s ease;
}

.grid label:focus-within, .single:focus-within {
    border-bottom-color: rgba(48,54,59,.5);
}

body.yq-focus-active .question h2,
body.yq-focus-active .question > p,
body.yq-focus-active .step-index,
body.yq-focus-active .grid label:not(:focus-within),
body.yq-focus-active .single:not(:focus-within) {
    opacity: .5;
}

body.yq-focus-active .single:focus-within,
body.yq-focus-active .grid label:focus-within { opacity: 1; }

/* ----------------------------------------------------------
   手机端步骤转场（20–32px 位移）
   ---------------------------------------------------------- */

.step.yq-enter-forward {
    opacity: 0; visibility: visible; pointer-events: none;
    transform: translate3d(26px, 0, 0) scale(.992);
    filter: blur(4px);
    z-index: 30;
    animation: mEnterForward 650ms cubic-bezier(.16,1,.3,1) forwards;
}
.step.yq-enter-back {
    opacity: 0; visibility: visible; pointer-events: none;
    transform: translate3d(-26px, 0, 0) scale(.992);
    filter: blur(4px);
    z-index: 30;
    animation: mEnterBack 650ms cubic-bezier(.16,1,.3,1) forwards;
}
.step.yq-leave-forward {
    opacity: 1; visibility: visible; pointer-events: none;
    z-index: 20;
    animation: mLeaveForward 650ms cubic-bezier(.16,1,.3,1) forwards;
}
.step.yq-leave-back {
    opacity: 1; visibility: visible; pointer-events: none;
    z-index: 20;
    animation: mLeaveBack 650ms cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes mLeaveForward {
    0%   { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translate3d(-26px,0,0) scale(.992); filter: blur(5px); }
}
@keyframes mEnterForward {
    0%   { opacity: 0; transform: translate3d(26px,0,0) scale(.992); filter: blur(5px); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
}
@keyframes mLeaveBack {
    0%   { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translate3d(26px,0,0) scale(.992); filter: blur(5px); }
}
@keyframes mEnterBack {
    0%   { opacity: 0; transform: translate3d(-26px,0,0) scale(.992); filter: blur(5px); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
}

body.yq-transitioning .next,
body.yq-transitioning .back,
body.yq-transitioning #back {
    pointer-events: none !important;
}

/* ----------------------------------------------------------
   其余移动端细节
   ---------------------------------------------------------- */

.review-card { grid-template-columns: 1fr; }
.review-card .wide-review { grid-column: auto; }
.review-card > div { min-height: 78px; }

.success-copy { padding: 25px; }
.success-copy h2 { font-size: 15vw; }
.success-copy p { font-size: 11px; }

.submitted-inner { padding: 0 20px; }
.submitted-inner h2 { font-size: 9vw; }
.submitted-inner p { font-size: 11px; }

#page-transition { filter: blur(10px); }

.dialog { padding: 26px 22px 22px; }
.dialog .d-actions { flex-direction: column-reverse; }
.dialog .d-actions .primary, .dialog .d-actions .ghost { width: 100%; }

/* 招新群卡片：纵向堆叠 */
.group-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 22px 18px;
}
.group-qr { width: 132px; height: 132px; }

/* 转场期间锁定滚动 */
body.yq-transitioning { overflow: hidden !important; }