/* 原图主页：以 853 × 1846 母版百分比定位，旋转仅作用于原卡牌图层。 */
html { background: #030309; }
body { position: relative; width: min(100%, 540px); min-height: 0; aspect-ratio: 853 / 1846; margin: 0 auto; background: #030309; isolation: isolate; }
.original-art,.card-repair { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* 96KB 的 WebP 替代 1.7MB PNG；构图和清晰度不变，移动网络首屏明显更快。 */
.original-art { background: url('assets/home-without-card.webp') center / 100% 100% no-repeat; }
.card-repair { display: none; }
/* 同一原图通过背景定位显示原卡牌，没有替换卡面图案。 */
.original-card { position: absolute; left: 35.4%; top: 14.3%; width: 29.3%; height: 28.5%; perspective: 1200px; perspective-origin:50% 48%; z-index: 3; pointer-events:none; transform-style:preserve-3d; }
/*
 * 正反两面分开渲染，避免单张裁剪纹理在接近90°时触发 WebView 背面重采样。
 * 旋转只改变合成层 transform，不重算背景与 clip-path，因此中段更连贯。
 */
.original-card__face { position:relative; width:100%; height:100%; transform-origin:50% 50%; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; will-change:transform; }
.original-card__face::before,.original-card__face::after { position:absolute; inset:0; background:url('assets/home-card-crop.webp') center / 100% 100% no-repeat; clip-path:polygon(5% 0,96% 3%,100% 6%,99% 97%,95% 100%,5% 100%,0 97%,0 5%); content:""; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(.35px); }
.original-card__face::after { transform:rotateY(180deg) translateZ(.35px); }
.ambient-light,.temple-scene,.brand,.eyebrow,.intro,.hero__visual,.page-footer { display: none; }
.starfield { display:block; position:absolute; z-index:4; opacity:.46; mix-blend-mode:screen; pointer-events:none !important; touch-action:none; -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),rgba(0,0,0,.25) 72%,transparent); mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),rgba(0,0,0,.25) 72%,transparent); }
.page-shell { position:absolute; inset:0; z-index:20; display:block; width:auto; min-height:0; padding:0; margin:0; pointer-events:none; }
.hero,.hero__copy { position:static; display:block; width:auto; min-height:0; padding:0; margin:0; pointer-events:none; }
/*
 * 主页视觉以原图为底，但真实表单拥有独立的顶层命中区域。
 * 不再依赖 position:static 元素上无效的 z-index，避免 Android / 抖音 WebView
 * 把下方 Canvas 或透明浮层判定为触摸目标。
 */
.question-form { position:absolute; inset:0; z-index:30; display:block; width:auto; min-height:0; padding:0; margin:0; pointer-events:none; }
#page-title,.notice,.field-heading,#question-help { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.input-wrap { position: absolute; left: 8.5%; top: 77.2%; z-index:31; width: 83%; height: 11.2%; border: 0; border-radius:clamp(22px,5vw,36px); background: none; box-shadow: none; overflow: visible; contain: none; isolation:isolate; transform: none !important; pointer-events:auto; touch-action:manipulation; }
.input-wrap::before,.input-wrap::after,.input-wrap__aura,.input-wrap__glyph { display: none; }
.input-wrap:focus-within { border-radius:clamp(22px,5vw,36px); background:rgba(84,48,112,.045); box-shadow:inset 0 0 0 1px rgba(242,216,155,.68), inset 0 0 28px rgba(120,70,150,.16), 0 0 34px rgba(218,181,105,.24); }
textarea { position:relative; z-index:32; width: 100%; height: 100%; min-height: 0; margin: 0; padding:clamp(17px,4vw,25px) clamp(22px,5.2vw,32px) clamp(38px,8vw,48px); border:0; border-radius:inherit; box-sizing:border-box; background: transparent; color: #f4e7c9; resize: none; font-size: clamp(16px,3.7vw,18px); line-height: 1.6; outline: none !important; pointer-events:auto !important; touch-action:manipulation; -webkit-user-select:text; user-select:text; -webkit-appearance:none; appearance:none; }
textarea::placeholder { color: #b8abc4; }
.input-wrap__meta { position: absolute; right: 5%; bottom: 5%; z-index:33; padding: 0; pointer-events:none; }
#char-count { padding: 3px 7px; border-radius:8px; background:rgba(7,5,16,.78); color:#ddcfae; font-size:clamp(10px,2.7vw,14px); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
#char-count.is-over-limit { color:#ffc4b8; box-shadow:0 0 14px rgba(255,150,135,.12); }
#start-button { position:absolute; left:13%; top:90.4%; z-index:31; width:75%; height:6.5%; min-height:44px; padding:0; margin:0; border:0; border-radius:22px; background:transparent; box-shadow:none; clip-path:none; transform:translateY(0); transition:transform 250ms cubic-bezier(.16,1,.3,1),box-shadow 250ms ease,background 250ms ease,opacity 250ms ease; pointer-events:auto !important; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#start-button span,#start-button::before { display: none; }
#start-button:focus-visible { outline: 1px solid #e1c992; outline-offset: 3px; }
#start-button:hover { background:rgba(234,207,153,.055); filter:none; box-shadow:0 0 28px rgba(224,186,109,.28),0 16px 34px rgba(2,1,8,.28); transform:translateY(-3px); }
#start-button:active { background:rgba(234,207,153,.13); box-shadow:0 0 38px rgba(239,207,137,.38); transform:translateY(1px) scale(.988); }
#start-button:disabled { cursor:not-allowed; opacity:.48; }
#question-error { position: absolute; top: 88.5%; left: 10%; z-index:31; width: 80%; margin: 0; color: #ffd4c1; text-align: center; font-size: 12px; pointer-events:none; }

/* 隐藏态浮层彻底脱离命中树，兼容 visibility/pointer-events 实现不完整的旧 WebView。 */
.access-gate[hidden],.access-gate.is-approved,.transition-layer:not(.is-visible) { display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; }
.transition-layer.is-visible { display:grid !important; pointer-events:auto !important; }
.settings-dock { z-index:60; pointer-events:none; }
.settings-button,.settings-panel { pointer-events:auto; }
.question-form.has-error .input-wrap { border: 0; box-shadow: none; }
/* 12 秒完成一周，背面沿用同一装饰卡背，不引入未选择的卡牌内容。 */
@media(prefers-reduced-motion: no-preference) {
 .original-art { animation:home-art-enter 760ms cubic-bezier(.16,1,.3,1) both; }
 .original-card { animation:home-card-enter 820ms 150ms cubic-bezier(.16,1,.3,1) both; }
 .original-card__face { animation:original-card-turn 12s 1.1s linear infinite; }
 .input-wrap { animation:home-control-enter 700ms 420ms cubic-bezier(.16,1,.3,1) both; }
 #start-button { animation:home-control-enter 700ms 560ms cubic-bezier(.16,1,.3,1) both; }
 .hero__copy > * { animation: none; }
}
/* 小尺寸独立纹理只在合成层匀速旋转，消除 90° 附近重新采样整张大图造成的顿挫。 */
@keyframes original-card-turn {
  0% { transform:translate3d(0,0,0) rotateY(0deg); }
  100% { transform:translate3d(0,0,0) rotateY(360deg); }
}
@keyframes home-art-enter { from { opacity:0; transform:translateY(10px) scale(1.012); filter:blur(7px); } to { opacity:1; transform:none; filter:none; } }
@keyframes home-card-enter { from { opacity:0; transform:translateY(18px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes home-control-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

@media(max-width:420px) {
 .settings-dock { right:12px; bottom:12px; }
 .settings-button { width:44px; height:44px; background:rgba(7,5,16,.88); }
}