/* 小新的牌语手账 · 原型样式（夜空紫 + 米金，柔和对对比） */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { background:#14101f; font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:#e9e3f6; }
html,body { height:100%; overflow:hidden; }
button { font-family:inherit; border:none; background:none; color:inherit; cursor:pointer; }
input,textarea,select { font-family:inherit; }
input,textarea { font-size:16px; }   /* 防 iOS 聚焦自动放大 */

/* ===== 手机全屏布局 ===== */
.phone { display:flex; flex-direction:column; height:100%; max-width:520px; margin:0 auto; }
.screen { flex:1; overflow-y:auto; background:linear-gradient(180deg,#1e1733 0%,#231a3d 60%,#1d1631 100%); padding-bottom:10px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.screen::-webkit-scrollbar{width:0;}

/* ===== TabBar ===== */
.tabbar { display:none; border-top:1px solid #2f2550; background:#181128; padding:8px 10px calc(10px + env(safe-area-inset-bottom)); }
.tabbar.show { display:flex; align-items:flex-end; }
.tab-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; color:#7d739e; padding-top:4px; }
.tab-item.on { color:#d8b878; }
.tab-item svg { width:21px; height:21px; }
.tab-new { flex:1; display:flex; justify-content:center; align-items:flex-start; }
.tab-new button { width:50px; height:50px; border-radius:50%; background:linear-gradient(145deg,#d3ae6e,#a8823f); color:#241a08; margin-top:-22px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(200,160,90,.35); }
.tab-new button svg { width:24px; height:24px; }

/* ===== 通用 ===== */
.page-pad { padding:14px 14px 8px; }
.sec-title { font-size:15px; font-weight:700; color:#efe8d9; margin:16px 0 10px; display:flex; align-items:center; gap:8px; }
.sec-title svg { width:16px; height:16px; color:#c9a86a; }
.hint { font-size:11.5px; color:#7b719c; line-height:1.7; }

/* 顶部导航（子页） */
.navbar { display:flex; align-items:center; gap:10px; padding:12px 14px 6px; }
.navbar .back { width:30px; height:30px; border-radius:50%; background:#292046; display:flex; align-items:center; justify-content:center; color:#cbbfe8; }
.navbar .back svg{width:15px;height:15px;}
.navbar .nav-title { font-size:16px; font-weight:700; color:#efe8d9; flex:1; }
.navbar .nav-act { font-size:12.5px; color:#c9a86a; }

/* chips */
.chips { display:flex; gap:8px; overflow-x:auto; padding:4px 14px 10px; scrollbar-width:none; }
.chips::-webkit-scrollbar{display:none;}
.chip { flex:none; padding:6px 13px; border-radius:999px; font-size:12px; color:#a99ecb; background:#2a2148; border:1px solid #382c5c; }
.chip.on { background:#3a2f60; color:#eed9ac; border-color:#8a744d; }

/* 卡片 */
.card { background:#271f45; border:1px solid #362b5c; border-radius:14px; padding:13px 14px; margin-bottom:10px; }

/* 记录条目 */
.rec-item { display:flex; gap:12px; cursor:pointer; }
.rec-item:active{ opacity:.8; }
.rec-spread { flex:none; width:76px; height:76px; border-radius:10px; background:#1e1736; border:1px solid #3a2e63; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.rec-spread .sp-name { font-size:10.5px; color:#bfb3e2; }
.rec-spread .sp-n { font-size:17px; font-weight:700; color:#e8d9b0; }
.rec-spread svg{width:18px;height:18px;color:#8d7fc0;}
.rec-main { flex:1; min-width:0; }
.rec-q { font-size:13.5px; font-weight:600; color:#ece6f8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rec-meta { margin-top:5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tag { font-size:10px; padding:2.5px 8px; border-radius:999px; }
.tag.fortune { background:#2c3a5e; color:#9db7e8; }
.tag.event { background:#4a2f4f; color:#dfa8cf; }
.tag.sub { background:#334258; color:#a8bdd8; }
.tag.audio { background:#3d3355; color:#c4b48e; display:inline-flex; align-items:center; gap:4px; }
.tag.audio svg{width:10px;height:10px;}
.rec-time { font-size:10.5px; color:#7b719c; margin-top:6px; }
.rec-person { font-size:11.5px; color:#b9aee0; }

/* 人物 */
.p-item { display:flex; align-items:center; gap:12px; cursor:pointer; }
.avatar { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; color:#241a08; flex:none; }
.p-name { font-size:14.5px; font-weight:700; color:#ece6f8; display:flex; align-items:center; gap:8px; }
.p-sub { font-size:11.5px; color:#8b80b0; margin-top:4px; }
.stat-row { display:flex; gap:10px; }
.stat-box { flex:1; background:#271f45; border:1px solid #362b5c; border-radius:12px; text-align:center; padding:11px 4px; }
.stat-box .n { font-size:19px; font-weight:800; color:#e8d9b0; }
.stat-box .l { font-size:10.5px; color:#8b80b0; margin-top:3px; }

/* ===== 牌面 ===== */
.cardface { width:100%; height:100%; border-radius:8px; border:1px solid #4d4080; background:linear-gradient(160deg,#2f2554,#241b42); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; position:relative; overflow:hidden; }
.cardface .cn { font-size:11px; color:#e7defa; letter-spacing:1px; }
.cardface .no { font-size:8.5px; color:#8d80c0; }
.cardface .rev-badge { position:absolute; top:3px; right:3px; font-size:8.5px; background:#5c3550; color:#f0c9dd; border-radius:6px; padding:1px 5px; }
.cardface .glyph { font-size:13px; color:#c9a86a; }
.cardface.major { border-color:#8a744d; background:linear-gradient(160deg,#3a2f52,#2c2344); }
.cardface.wands { border-color:#8a5c3a; } .cardface.cups { border-color:#3a5c8a; }
.cardface.swords { border-color:#5a5f7a; } .cardface.pentacles { border-color:#3a7a5c; }

/* 牌阵布局区 */
.spread-stage { position:relative; width:100%; aspect-ratio:4/3; background:#1e1736; border:1px solid #352a5c; border-radius:14px; margin-top:4px; }
.slot { position:absolute; width:56px; height:92px; transform:translate(-50%,-50%); cursor:pointer; }
.slot.vert { width:92px; height:56px; }
.slot-in { width:100%; height:100%; }
.slot-in.rot { transform:rotate(90deg) scaleY(1); transform-origin:center; width:56px; height:92px; position:absolute; left:50%; top:50%; margin-left:-28px; margin-top:-46px; }
.slot-empty { width:100%; height:100%; border:1.5px dashed #4d4080; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#6f6790; font-size:9.5px; text-align:center; padding:2px; background:rgba(40,32,70,.4); }
.slot-empty svg{width:14px;height:14px;}
.slot-label { position:absolute; top:calc(100% + 3px); left:50%; transform:translateX(-50%); font-size:9px; color:#8b80b0; white-space:nowrap; }

/* 向导 */
.wiz-steps { display:flex; gap:6px; padding:12px 14px 4px; }
.wiz-steps .st { flex:1; height:3.5px; border-radius:2px; background:#332a52; }
.wiz-steps .st.on { background:#c9a86a; }
.wiz-h { padding:8px 16px 12px; }
.wiz-h .t { font-size:18px; font-weight:800; color:#f0e7d4; }
.wiz-h .s { font-size:11.5px; color:#8b80b0; margin-top:4px; }
.opt { width:100%; text-align:left; background:#271f45; border:1px solid #362b5c; border-radius:12px; padding:12px 13px; margin-bottom:9px; cursor:pointer; }
.opt.on { border-color:#c9a86a; background:#33285a; }
.opt .ot { font-size:13.5px; font-weight:700; color:#ece6f8; display:flex; justify-content:space-between; align-items:center; }
.opt .od { font-size:11px; color:#8b80b0; margin-top:4px; line-height:1.6; }
.opt .pick { font-size:10px; color:#c9a86a; }
.big-btn { display:block; width:100%; text-align:center; padding:13px; border-radius:13px; font-size:14.5px; font-weight:700; background:linear-gradient(145deg,#d3ae6e,#a8823f); color:#241a08; margin-top:12px; }
.ghost-btn { display:block; width:100%; text-align:center; padding:11px; border-radius:13px; font-size:13px; border:1px solid #4d4080; color:#cbbfe8; margin-top:10px; }

/* 输入 */
.q-input { width:100%; background:#221a3c; border:1px solid #3a2e63; border-radius:11px; color:#ece6f8; font-size:13.5px; padding:11px 12px; resize:none; outline:none; }
.q-input:focus { border-color:#8a744d; }

/* 抽卡抽屉 */
.drawer-mask { position:absolute; inset:0; background:rgba(10,7,20,.6); z-index:30; display:flex; align-items:flex-end; }
.drawer { width:100%; background:#231b3e; border-top:1px solid #3a2e63; border-radius:18px 18px 0 0; padding:14px 14px 20px; }
.drawer .dh { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.drawer .dh .t { font-size:14px; font-weight:700; color:#efe8d9; }
.drawer .dh .x { color:#7b719c; font-size:12px; }
.draw-row { display:flex; gap:10px; justify-content:center; }
.draw-card { width:72px; height:116px; cursor:pointer; position:relative; }
.draw-card:active{ transform:scale(.96); }
.fliper { width:100%; height:100%; }
.back-face { width:100%; height:100%; border-radius:8px; border:1px solid #6d5a3a; background:repeating-linear-gradient(45deg,#2b2246 0 6px,#251d3e 6px 12px); display:flex; align-items:center; justify-content:center; color:#c9a86a; font-size:20px; }
.rev-toggle { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#cbbfe8; background:#2a2148; border:1px solid #3a2e63; padding:7px 12px; border-radius:999px; margin-top:10px; }
.rev-toggle.on { color:#f0c9dd; border-color:#7a4a68; background:#3d2a4a; }

/* 录音 */
.audio-item { display:flex; align-items:center; gap:10px; background:#221a3c; border:1px solid #3a2e63; border-radius:11px; padding:10px 12px; margin-top:8px; }
.play-btn { width:34px; height:34px; border-radius:50%; background:#3a2f60; display:flex; align-items:center; justify-content:center; color:#e8d9b0; flex:none; }
.play-btn svg{width:13px;height:13px;}
.a-info { flex:1; min-width:0; }
.a-name { font-size:12px; color:#d9d1ef; }
.a-track { height:3px; background:#332a52; border-radius:2px; margin-top:7px; overflow:hidden; }
.a-prog { height:100%; background:#c9a86a; width:0%; }
.a-dur { font-size:10.5px; color:#8b80b0; }

/* 总结/笔记 */
.sum-text { font-size:13px; color:#cfc6e6; line-height:1.8; }
.note-item { border-left:2px solid #6d5a3a; padding:2px 0 2px 10px; margin-top:9px; }
.note-item .nt { font-size:12.5px; color:#cfc6e6; line-height:1.7; white-space:pre-wrap; }
.note-item .nd { font-size:10px; color:#7b719c; margin-top:4px; }
.empty { text-align:center; color:#6f6790; font-size:12px; padding:16px 0; line-height:1.8; }

/* 牌库网格 */
.cardgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.grid-card { aspect-ratio:56/92; cursor:pointer; }
.cardface.small .cn{font-size:9.5px;} .cardface.small .glyph{font-size:11px;} .cardface.small .no{font-size:7.5px;}

/* 弹层（牌义/说明） */
.modal-mask { position:absolute; inset:0; background:rgba(10,7,20,.65); z-index:40; display:flex; align-items:center; justify-content:center; padding:22px; }
.modal { width:100%; background:#251d42; border:1px solid #3f3268; border-radius:16px; padding:16px; }
.modal .mt { font-size:15px; font-weight:800; color:#f0e7d4; display:flex; align-items:center; gap:8px; }
.modal .mm { font-size:12.5px; color:#b6abd8; line-height:1.9; margin-top:10px; }
.kw { display:inline-block; margin:2px 4px 2px 0; padding:3px 9px; border-radius:8px; font-size:11px; }
.kw.up { background:#2c3a5e; color:#9db7e8; } .kw.rev { background:#4a2f4f; color:#dfa8cf; }
.modal .close-x { float:right; color:#7b719c; font-size:12px; }

/* 分组条 */
.group-bar { font-size:11px; color:#8b80b0; margin:14px 2px 8px; letter-spacing:1px; }

/* 演示条 */

/* toast */
.toast { position:absolute; left:50%; bottom:90px; transform:translateX(-50%); background:#3a2f60; color:#efe8d9; border:1px solid #54457f; font-size:12px; padding:9px 16px; border-radius:999px; z-index:60; white-space:nowrap; }

/* 占位（占卜tab提示） */

/* ===== v2 新增：闭环操作 ===== */
.mini-act { margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:11px; color:#c9a86a; background:none; }
.mini-act.bordered { border:1px solid #8a744d; border-radius:999px; padding:5px 11px; background:rgba(200,168,106,.08); }
.mini-act.bordered:active { background:rgba(200,168,106,.18); }
.mini-act svg { width:12px; height:12px; }
.nav-act-wrap .nav-act { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:#c9a86a; background:rgba(200,168,106,.08); border:1px solid #8a744d; border-radius:999px; padding:5px 12px; }
.nav-act-wrap .nav-act:active { background:rgba(200,168,106,.18); }
.nav-act-wrap .nav-act.danger-text { color:#e08a8a; border-color:#7a4a5a; background:rgba(122,74,90,.1); }
.nav-act-wrap .nav-act svg { width:12px; height:12px; }
.danger-btn { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:11px; border-radius:13px; font-size:13px; border:1px solid #7a4a5a; color:#e0a0a0; margin-top:14px; background:rgba(122,74,90,.12); }
.danger-btn svg { width:14px; height:14px; }
.del-mini { width:26px; height:26px; border-radius:8px; color:#8b6f80; display:flex; align-items:center; justify-content:center; flex:none; background:none; }
.del-mini svg { width:12px; height:12px; }
.del-mini:hover { color:#e08a8a; }
.rate-btn { flex:none; font-size:10.5px; color:#c9a86a; border:1px solid #6d5a3a; border-radius:999px; padding:3px 8px; background:none; }
.stepper { display:inline-flex; align-items:center; gap:10px; background:#221a3c; border:1px solid #3a2e63; border-radius:11px; padding:7px 10px; font-size:13px; color:#ece6f8; }
.stepper button { width:24px; height:24px; border-radius:7px; background:#3a2f60; color:#e8d9b0; font-size:15px; line-height:1; }
.se-p { margin-bottom:6px; }

/* ===== v3 卡组模块 ===== */
.deck-prog { height:5px; background:#332a52; border-radius:3px; margin-top:7px; overflow:hidden; }
.deck-prog i { display:block; height:100%; background:linear-gradient(90deg,#a8823f,#d3ae6e); border-radius:3px; }
.photo-badge { position:absolute; top:-4px; right:-4px; width:16px; height:16px; border-radius:50%; background:#3a2f60; color:#8b80b0; font-size:9px; display:flex; align-items:center; justify-content:center; border:1px solid #4d4080; }
.photo-badge.ok { background:#3a5c42; color:#b8e8c4; border-color:#5a8a62; }
.grid-card { position:relative; }
.ce-photo { border:1.5px dashed #4d4080; border-radius:14px; padding:34px 16px; text-align:center; color:#8d80c0; cursor:pointer; background:rgba(40,32,70,.3); }
.ce-photo.has { border-style:solid; border-color:#8a744d; padding:14px; }
.ce-photo svg { width:30px; height:30px; }
.ce-photo-face { width:110px; height:180px; margin:0 auto; border-radius:10px; border:1px solid #6d5a3a; background:linear-gradient(160deg,#3a2f52,#2c2344); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.ce-photo-face .glyph { font-size:22px; color:#c9a86a; }
.ce-photo-face .cn { font-size:13px; color:#e7defa; letter-spacing:1px; }

/* 兜底：按钮内未显式定尺寸的 svg 一律 14px，防止按默认 300x150 撑爆 */
button svg { width:14px; height:14px; vertical-align:-2px; }

/* v4：卡组页导航/加号卡 */
.navbar.no-back { padding:14px 14px 4px; }
.navbar.no-back .nav-title { flex:1; font-size:17px; font-weight:800; color:#efe8d9; }
.link-btn { color:#c9a86a; background:none; font-size:11.5px; padding:0 2px; text-decoration:underline; }
.g-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:0; }

/* 卡组封面 */
.deck-cover { width:76px; height:76px; border-radius:10px; border:1px solid #3a2e63; background:#1e1736; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex:none; overflow:hidden; }
.deck-cover svg { width:18px; height:18px; color:#8d7fc0; }
.deck-cover .dc-n { font-size:17px; font-weight:700; color:#e8d9b0; line-height:1; }
.deck-cover .dc-t { font-size:10.5px; color:#bfb3e2; line-height:1; }
.deck-cover .dc-glyph { font-size:20px; line-height:1; }
.deck-cover.has { border:1px solid #6d5a3a; background:linear-gradient(150deg,#4a3260 0%,#2c2344 55%,#1a1430 100%); position:relative; }
.deck-cover.has .dc-glyph { color:#c9a86a; text-shadow:0 0 14px rgba(201,168,106,.8); }
.deck-cover.has .dc-name { font-size:9.5px; color:#efe0c0; letter-spacing:1px; }
.deck-cover.has::after { content:"封面"; position:absolute; right:3px; bottom:3px; font-size:8px; color:#9a8a6a; background:rgba(20,14,34,.6); padding:1px 4px; border-radius:4px; }
.cover-row { display:flex; }

/* 牌阵画布编辑器（视口 + 缩放平移） */
.se-canvas-wrap { position:relative; }
.se-viewport { position:relative; width:100%; height:300px; background:#1a1330; border:1px solid #352a5c; border-radius:14px; overflow:hidden; touch-action:none; }
.se-viewport.panning { cursor:move; }
.se-inner { position:absolute; left:0; top:0; width:720px; height:480px; transform-origin:0 0; background-image:linear-gradient(rgba(120,100,200,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(120,100,200,.08) 1px,transparent 1px); background-size:15px 15px; background-position:0 0; }
.se-card { position:absolute; width:60px; height:99px; border-radius:6px; border:1.5px solid #6d5a3a; background:linear-gradient(160deg,#3a2f52,#2c2344); cursor:grab; touch-action:none; }
.se-card.vert { width:99px; height:60px; }
.se-card.vert .sec-name { left:50%; right:auto; transform:translateX(-50%); }
.se-card.dragging { cursor:grabbing; border-color:#d3ae6e; box-shadow:0 8px 22px rgba(0,0,0,.5); z-index:5; }
.sec-no { position:absolute; top:2px; left:4px; font-size:9px; color:#c9a86a; font-weight:700; }
.sec-edit { position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:5px; background:rgba(58,47,96,.9); color:#cbbfe8; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sec-edit svg { width:9px; height:9px; }
.sec-name { position:absolute; left:0; right:0; bottom:calc(100% + 3px); font-size:9px; color:#b6abd8; white-space:nowrap; text-align:center; }
.se-addcard { position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:4px; padding:7px 12px; border-radius:999px; border:1px solid #8a744d; background:rgba(30,20,50,.85); color:#c9a86a; font-size:11.5px; z-index:6; }
.se-addcard svg { width:12px; height:12px; }
.se-resetview { position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; padding:7px 12px; border-radius:999px; border:1px solid #4d4080; background:rgba(30,20,50,.85); color:#cbbfe8; font-size:11.5px; z-index:6; }

/* 补充牌 */
.extra-row { display:flex; gap:10px; flex-wrap:wrap; }
.extra-card { width:64px; height:105px; cursor:pointer; }

/* 全卡组选牌抽屉 */
.drawer.picker { max-height:78vh; display:flex; flex-direction:column; }
.drawer.picker .dh { flex:none; }
.dg-chips { flex:none; padding:2px 0 8px; border-bottom:1px solid #332a52; }
.dg-grid { flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:10px 2px; scrollbar-width:thin; }
.dg-grid::-webkit-scrollbar { width:4px; }
.dg-grid::-webkit-scrollbar-thumb { background:#3a2f60; border-radius:2px; }
.dg-card { position:relative; aspect-ratio:56/92; cursor:pointer; }
.dg-card .cardface { width:100%; height:100%; }
.dg-card.used { opacity:.35; cursor:not-allowed; }
.dg-used { position:absolute; top:2px; left:2px; font-size:8px; color:#e0a0a0; background:rgba(30,15,25,.8); padding:1px 4px; border-radius:4px; }

/* 随机抽卡模式 */
.dm-row { border-bottom:1px solid #332a52; }
.rd-row { display:flex; align-items:center; gap:12px; padding:12px 0 8px; }
.rd-lab { font-size:12.5px; color:#cbbfe8; }
.rd-num { width:120px; text-align:center; }
.rd-actions { display:flex; align-items:center; gap:12px; padding-top:4px; }
.rd-hit { display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px 0 22px; }
.rd-hit .rd-hitcard { width:96px; height:158px; }

/* 放牌方式选择页 */
.mode-choose { display:flex; flex-direction:column; gap:10px; padding:6px 0 12px; }
.mode-btn { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:14px 16px; border-radius:14px; border:1px solid #4d4080; background:#2a2148; }
.mode-btn:active { background:#33285a; }
.mode-btn svg { width:22px; height:22px; color:#c9a86a; margin-bottom:4px; }
.mode-btn .mb-t { font-size:15px; font-weight:700; color:#ece6f8; }
.mode-btn .mb-d { font-size:11.5px; color:#8b80b0; }

/* 人物头像颜色选择 */
.color-row { display:flex; gap:10px; flex-wrap:wrap; }
.pe-color { width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
.pe-color.on { border-color:#efe8d9; box-shadow:0 0 0 2px rgba(239,232,217,.25); }

/* ===== 第一批手感优化：过渡与反馈 ===== */
button, .opt, .chip, .card, .grid-card, .dg-card, .extra-card, .rec-item, .p-item { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
/* 点击回弹：无论按住多久，点一下就播完整动画（手机短按也可见） */
@keyframes tapPop { 0% { transform:scale(1); } 35% { transform:scale(.94); opacity:.8; } 100% { transform:scale(1); opacity:1; } }
.tapped { animation: tapPop .3s cubic-bezier(.3,1,.5,1) both; }
:root.no-anim .tapped { animation:none; }

/* 弹层/抽屉：滑入 + 淡入 */
.modal-mask { animation: fadeIn .18s ease both; }
.modal { animation: upIn .22s cubic-bezier(.22,.9,.36,1) both; }
.drawer-mask { animation: fadeIn .18s ease both; }
.drawer { animation: sheetIn .26s cubic-bezier(.22,.9,.36,1) both; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes upIn { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes sheetIn { from { transform:translateY(100%); } to { transform:translateY(0); } }

/* 下钻页滑入：所有带 navbar 的子页 */
.navbar { animation: none; }

/* 正逆位翻牌感 */
.cardface { transition: transform .25s ease; }
.slot .cardface:active { transform: rotateY(8deg); }

/* 刚放入的牌：弹一下 */
@keyframes popIn { 0% { transform:scale(.82); opacity:.4; } 60% { transform:scale(1.05); } 100% { transform:scale(1); opacity:1; } }
.cardface.pop { animation: popIn .28s cubic-bezier(.3,1.4,.5,1) both; }
.popw { width:100%; height:100%; animation: popIn .28s cubic-bezier(.3,1.4,.5,1) both; }
.popw .cardface { width:100%; height:100%; }

/* toast 时长与动效 */
.toast { animation: upIn .2s ease both; }

/* 录音进度条平滑 */
.a-prog { transition: width .9s linear; }

/* 页面切换：整页淡入 + 下钻页右滑入（配合 tapFx 的跳转延时，避免"傻快"） */
.screen > * { animation: pageIn .16s ease both; }
@keyframes pageIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* 减速偏好：系统开了就跟随 */
@media (prefers-reduced-motion: reduce) { * { animation-duration:.01ms !important; transition-duration:.01ms !important; } }