/* คัมภีร์บำเพ็ญ — อนิเมชันฉากพอร์ตจากต้นแบบ (cm-*) + เลย์เอาต์ */
/*----*/

/* Golden scripture tide — a restrained, grade-driven field behind the insight core. */
.cm-runes{position:absolute;z-index:0;inset:3px 7px;overflow:hidden;border-radius:8px;pointer-events:none;opacity:.2;transition:opacity .45s ease,filter .45s ease;mask-image:linear-gradient(90deg,transparent 1%,#000 14%,#000 86%,transparent 99%);-webkit-mask-image:linear-gradient(90deg,transparent 1%,#000 14%,#000 86%,transparent 99%)}
.cm-wave{--waveTime:7.6s;display:none;position:absolute;left:-9%;width:118%;align-items:center;justify-content:space-around;color:#d9aa50;font:11px/1 serif;letter-spacing:.06em;white-space:nowrap;text-shadow:0 0 5px rgba(226,177,79,.48);animation:cm_runeLineDrift var(--waveTime) ease-in-out infinite alternate}
.cm-wave span{display:inline-block;opacity:.32;animation:cm_runeGoldWave var(--waveTime) ease-in-out infinite;animation-delay:calc(var(--i)*-.24s)}
.cm-wave:nth-child(1){top:19%;transform:translateX(-2%)}
.cm-wave:nth-child(2){top:39%;animation-direction:alternate-reverse;--waveTime:6.8s}
.cm-wave:nth-child(3){top:61%;--waveTime:6.1s}
.cm-wave:nth-child(4){top:80%;animation-direction:alternate-reverse;--waveTime:5.6s}
.cm-runes:after{content:"";position:absolute;inset:-20% -45%;opacity:0;background:linear-gradient(105deg,transparent 42%,rgba(255,215,126,.03) 47%,rgba(255,225,151,.42) 50%,rgba(255,215,126,.03) 53%,transparent 58%);transform:translateX(-38%);animation:cm_runeSweep 5.8s ease-in-out infinite}
.cm-fold,.cm-copy,.cm-flare,.cm-core{z-index:2}
.cm-stage[data-grade="common"] .cm-wave:nth-child(1){display:flex}
.cm-stage[data-grade="common"] .cm-wave:nth-child(1) span:nth-child(n+6){display:none}
.cm-stage[data-grade="common"] .cm-runes{opacity:.12;filter:saturate(.6)}
.cm-stage[data-grade="rare"] .cm-wave:nth-child(-n+2){display:flex}
.cm-stage[data-grade="rare"] .cm-wave span:nth-child(n+8){display:none}
.cm-stage[data-grade="rare"] .cm-runes{opacity:.22}
.cm-stage[data-grade="excellent"] .cm-wave:nth-child(-n+3){display:flex}
.cm-stage[data-grade="excellent"] .cm-wave span:nth-child(n+10){display:none}
.cm-stage[data-grade="excellent"] .cm-runes{opacity:.3}
.cm-stage[data-grade="excellent"] .cm-runes:after{opacity:.45}
.cm-stage[data-grade="legendary"] .cm-wave{display:flex}
.cm-stage[data-grade="legendary"] .cm-runes{opacity:.43;filter:brightness(1.12)}
.cm-stage[data-grade="legendary"] .cm-runes:after{opacity:.7}
.cm-stage[data-grade="legendary"] .cm-wave span{opacity:.45;text-shadow:0 0 7px #dba744}
.cm-stage[data-grade="sacred"] .cm-wave{display:flex}
.cm-stage[data-grade="sacred"] .cm-runes{opacity:.58;filter:brightness(1.35)}
.cm-stage[data-grade="sacred"] .cm-runes:after{opacity:1;animation-duration:4.3s}
.cm-stage[data-grade="sacred"] .cm-wave{color:#ffe6a0;text-shadow:0 0 8px #e9ac3e,0 0 14px rgba(255,224,153,.42)}
.cm-stage[data-grade="sacred"] .cm-wave span{opacity:.58}
/*----*/

/* Selected direction: unfurling scripture with grade-driven insight absorption */
.cm-stage{position:relative;height:250px;border-radius:18px;overflow:hidden;--grade:#68b9e8;--grade2:#d8eefb;--gradeGlow:rgba(104,185,232,.22);background:radial-gradient(circle at 50% 35%,var(--gradeGlow),transparent 42%),#0d0f0d;transition:background .45s ease}
.cm-stage[data-grade="common"]{--grade:#aaa69d;--grade2:#e1ddd4;--gradeGlow:rgba(170,166,157,.12)}
.cm-stage[data-grade="rare"]{--grade:#68b9e8;--grade2:#d8eefb;--gradeGlow:rgba(104,185,232,.22)}
.cm-stage[data-grade="excellent"]{--grade:#b986ef;--grade2:#ead8ff;--gradeGlow:rgba(185,134,239,.23)}
.cm-stage[data-grade="legendary"]{--grade:#e0ac4d;--grade2:#fff0b8;--gradeGlow:rgba(224,172,77,.28)}
.cm-stage[data-grade="sacred"]{--grade:#ed786f;--grade2:#fff2cc;--gradeGlow:rgba(237,120,111,.25)}
.cm-prev{position:absolute;left:50%;top:38%;width:270px;height:220px;transform:translate(-50%,-50%)}
.cm-scrollbox{position:absolute;left:50%;top:50%;width:230px;height:142px;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--grade) 62%,transparent);border-radius:11px;background:linear-gradient(90deg,rgba(17,19,15,.96),color-mix(in srgb,var(--grade) 10%,#11130f) 47%,rgba(17,19,15,.96));box-shadow:0 0 46px var(--gradeGlow),inset 0 0 26px rgba(0,0,0,.35);animation:cm_gradeScrollBreath 4.2s ease-in-out infinite}
.cm-scrollbox:before,.cm-scrollbox:after{content:"";position:absolute;top:-9px;bottom:-9px;width:13px;border:1px solid var(--grade);border-radius:10px;background:linear-gradient(#302818,#11130f,#302818);box-shadow:0 0 12px var(--gradeGlow)}
.cm-scrollbox:before{left:-7px}
.cm-scrollbox:after{right:-7px}
.cm-fold{position:absolute;left:50%;top:13px;bottom:13px;width:1px;background:linear-gradient(transparent,color-mix(in srgb,var(--grade) 44%,transparent),transparent)}
.cm-copy{position:absolute;inset:21px 28px;display:grid;grid-template-columns:1fr 1fr;gap:36px}
.cm-copy div{display:grid;align-content:center;gap:10px}
.cm-copy i{height:1px;background:linear-gradient(90deg,transparent,var(--grade),transparent);opacity:.46;transform:scaleX(.25);animation:cm_copyReveal 4s ease-in-out infinite}
.cm-copy i:nth-child(2){animation-delay:.35s}
.cm-copy i:nth-child(3){animation-delay:.7s}
.cm-copy i:nth-child(4){animation-delay:1.05s}
.cm-core{position:absolute;left:50%;top:50%;width:51px;height:51px;transform:translate(-50%,-50%);border:1px solid var(--grade);border-radius:50%;display:grid;place-items:center;color:var(--grade2);font:24px serif;background:#11130f;box-shadow:0 0 29px var(--gradeGlow);animation:cm_insightCore 3.1s ease-in-out infinite}
.cm-core:after{content:"";position:absolute;inset:-8px;border:1px solid color-mix(in srgb,var(--grade) 35%,transparent);border-radius:50%;animation:cm_coreRipple 3.1s ease-out infinite}
.cm-ac{display:none;position:absolute;color:var(--grade2);font:15px serif;text-shadow:0 0 9px var(--grade);opacity:0;animation:cm_charAbsorb 4.2s cubic-bezier(.38,.05,.2,1) infinite;animation-delay:var(--delay)}
.cm-ac:nth-child(1){left:20px;top:18px;--dx:115px;--dy:92px;--rot:55deg;--delay:0s}
.cm-ac:nth-child(2){left:18px;top:66px;--dx:117px;--dy:44px;--rot:-35deg;--delay:.65s}
.cm-ac:nth-child(3){left:35px;top:111px;--dx:100px;--dy:-1px;--rot:70deg;--delay:1.3s}
.cm-ac:nth-child(4){right:20px;top:18px;--dx:-115px;--dy:92px;--rot:-55deg;--delay:.3s}
.cm-ac:nth-child(5){right:18px;top:66px;--dx:-117px;--dy:44px;--rot:38deg;--delay:.95s}
.cm-ac:nth-child(6){right:35px;top:111px;--dx:-100px;--dy:-1px;--rot:-70deg;--delay:1.6s}
.cm-ac:nth-child(7){left:69px;top:8px;--dx:66px;--dy:102px;--rot:45deg;--delay:2s}
.cm-ac:nth-child(8){right:69px;top:8px;--dx:-66px;--dy:102px;--rot:-45deg;--delay:2.35s}
.cm-ac:nth-child(9){left:72px;bottom:5px;--dx:63px;--dy:-105px;--rot:-50deg;--delay:2.65s}
.cm-ac:nth-child(10){right:72px;bottom:5px;--dx:-63px;--dy:-105px;--rot:50deg;--delay:2.95s}
.cm-ac:nth-child(11){left:2px;top:39px;--dx:133px;--dy:71px;--rot:90deg;--delay:3.2s}
.cm-ac:nth-child(12){right:2px;top:39px;--dx:-133px;--dy:71px;--rot:-90deg;--delay:3.45s}
.cm-stage[data-grade="common"] .cm-ac:nth-child(-n+4),.cm-stage[data-grade="rare"] .cm-ac:nth-child(-n+6),.cm-stage[data-grade="excellent"] .cm-ac:nth-child(-n+8),.cm-stage[data-grade="legendary"] .cm-ac:nth-child(-n+10),.cm-stage[data-grade="sacred"] .cm-ac:nth-child(-n+12){display:block}
.cm-orbit{display:none;position:absolute;left:50%;top:50%;border:1px solid color-mix(in srgb,var(--grade) 42%,transparent);border-radius:50%;transform:translate(-50%,-50%);animation:cm_gradeOrbit 17s linear infinite}
.cm-o1{width:255px;height:184px}
.cm-o1:before,.cm-o1:after{content:"玄";position:absolute;color:var(--grade);font:12px serif;background:#0d0f0d;padding:2px}
.cm-o1:before{left:16px;top:22px}
.cm-o1:after{content:"道";right:16px;bottom:22px}
.cm-o2{width:274px;height:204px;border-style:dashed;animation-direction:reverse;animation-duration:25s}
.cm-stage[data-grade="rare"] .cm-o1,.cm-stage[data-grade="excellent"] .cm-o1,.cm-stage[data-grade="legendary"] .cm-orbit,.cm-stage[data-grade="sacred"] .cm-orbit{display:block}
.cm-stage[data-grade="common"] .cm-core:after{display:none}
.cm-stage[data-grade="excellent"] .cm-scrollbox{box-shadow:0 0 52px var(--gradeGlow),inset 0 0 28px rgba(0,0,0,.35)}
.cm-flare{display:none;position:absolute;left:50%;top:50%;width:78px;height:78px;transform:translate(-50%,-50%) rotate(45deg);border:1px solid color-mix(in srgb,var(--grade) 38%,transparent);animation:cm_sealFlare 4.2s ease-in-out infinite}
.cm-stage[data-grade="legendary"] .cm-flare,.cm-stage[data-grade="sacred"] .cm-flare{display:block}
.cm-axis{display:none;position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:linear-gradient(transparent,var(--grade),var(--grade2),var(--grade),transparent);box-shadow:0 0 12px var(--grade);animation:cm_axisPulse 3.2s ease-in-out infinite}
.cm-stage[data-grade="sacred"] .cm-axis{display:block}
.cm-stage[data-grade="sacred"] .cm-scrollbox{border-color:var(--grade2);box-shadow:0 0 58px var(--gradeGlow),0 0 18px rgba(255,235,183,.12),inset 0 0 30px rgba(0,0,0,.38)}
@keyframes cm_runeGoldWave{0%,100%{transform:translateY(4px) scale(.84);opacity:.14;filter:blur(.2px)}38%{transform:translateY(-4px) scale(1.08);opacity:.94;filter:brightness(1.5)}68%{transform:translateY(2px) scale(.92);opacity:.3}}
@keyframes cm_runeLineDrift{0%{margin-left:-4px}100%{margin-left:9px}}
@keyframes cm_runeSweep{0%,18%{transform:translateX(-38%);opacity:0}42%{opacity:1}72%,100%{transform:translateX(38%);opacity:0}}
@keyframes cm_gradeScrollBreath{50%{transform:translate(-50%,-50%) scale(1.025);filter:brightness(1.12)}}
@keyframes cm_copyReveal{0%,14%{transform:scaleX(.18);opacity:.2}44%,78%{transform:scaleX(1);opacity:.74}100%{transform:scaleX(.18);opacity:.2}}
@keyframes cm_insightCore{50%{transform:translate(-50%,-50%) scale(1.12);filter:brightness(1.3)}}
@keyframes cm_coreRipple{0%{transform:scale(.72);opacity:.75}100%{transform:scale(1.42);opacity:0}}
@keyframes cm_charAbsorb{0%{transform:translate(0,0) rotate(0) scale(.68);opacity:0}16%{opacity:.95}72%{opacity:.82}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.18);opacity:0}}
@keyframes cm_gradeOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes cm_sealFlare{0%,100%{transform:translate(-50%,-50%) rotate(45deg) scale(.82);opacity:.15}52%{transform:translate(-50%,-50%) rotate(135deg) scale(1.08);opacity:.56}}
@keyframes cm_axisPulse{50%{opacity:.38;transform:scaleY(.82)}}
/* ═══ คัมภีร์บำเพ็ญ — การ์ดหน้าแรก หน้า overlay คลัง รายละเอียด หอคัมภีร์ ═══ */
.cm-home{display:flex;gap:10px;align-items:center;margin-top:8px;padding:9px 11px;border-radius:12px;background:var(--surface-panel-2);border:1px solid var(--border-soft);border-left:3px solid var(--cg,#68b9e8);cursor:pointer;transition:opacity .3s}
.cm-home.cm-paused{opacity:.62}
.cm-home.cm-empty{border-left-color:var(--border-soft)}
.cm-h-t{flex:1;min-width:0;display:grid;gap:4px}
.cm-h-t b{font-size:12.5px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cm-h-t small{font-size:11px;color:var(--text-mute)}
.cm-h-r{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}
.cm-h-lv{font-size:11px;color:var(--cg,#68b9e8);font-weight:700;white-space:nowrap}
.cm-h-sub{font-size:10.5px;color:var(--text-mute)}
.cm-h-st{display:flex;gap:6px;flex-wrap:nowrap;overflow:hidden;color:var(--text-dim)}
.cm-h-st span{white-space:nowrap}
.cm-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.cm-bar.big{height:7px}
.cm-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--cg,#68b9e8) 55%,transparent),var(--cg,#68b9e8));box-shadow:0 0 8px color-mix(in srgb,var(--cg,#68b9e8) 60%,transparent);transition:width .6s ease}
.cm-bic{flex:none;display:grid;place-items:center;border-radius:10px;color:var(--cg);background:color-mix(in srgb,var(--cg) 13%,var(--surface-page-2));border:1px solid color-mix(in srgb,var(--cg) 45%,transparent)}
.cm-bic svg{width:58%;height:58%}
.cm-gtag{flex:none;font-size:10px;font-weight:700;padding:1px 7px;border-radius:99px;color:var(--cg);border:1px solid color-mix(in srgb,var(--cg) 55%,transparent);background:color-mix(in srgb,var(--cg) 10%,transparent);white-space:nowrap}
html.cm-lock,html.cm-lock body{overflow:hidden}
.cm-page{position:fixed;inset:0;z-index:180;display:none;flex-direction:column;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.cm-sheet{margin-top:auto;height:94vh;height:94dvh;display:flex;flex-direction:column;background:var(--surface-page);border-radius:18px 18px 0 0;border-top:1px solid var(--border-soft);overflow:hidden}
.cm-top{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border-soft)}
.cm-top h2{flex:1;margin:0;font-size:16px;color:var(--text-primary)}
.cm-back{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-soft);background:var(--surface-panel-2);color:var(--text-primary);display:grid;place-items:center}
.cm-frag{font-size:12px;color:var(--t-fbbf24);display:flex;gap:4px;align-items:center}
.cm-scroll{flex:1;overflow-y:auto;padding:12px 14px calc(20px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.cm-hero{border-radius:18px;overflow:hidden;border:1px solid color-mix(in srgb,var(--cg,#3d3320) 40%,var(--border-soft));margin-bottom:10px;background:#0d0f0d}
.cm-prev{top:50%!important}
.cm-stage.paused *,.cm-stage.paused *:before,.cm-stage.paused *:after{animation-play-state:paused!important}
.cm-stage.paused{filter:saturate(.55) brightness(.8)}
.cm-seals{display:flex;gap:4px;justify-content:center;padding:8px 12px 0;background:#0d0f0d}
.cm-seals i{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);border:1px solid rgba(233,187,97,.35)}
.cm-seals i.on{background:#e9bb61;box-shadow:0 0 6px #e9bb61}
.cm-info{padding:10px 12px 12px;display:grid;gap:6px;background:#0d0f0d}
.cm-nm{font-size:15px;color:#f5ecd7}
.cm-info .cm-mute,.cm-info .cm-h-r{color:#b8b1a0}
.cm-mute{color:var(--text-mute);font-size:11.5px}
.cm-status{display:flex;gap:6px;align-items:center;font-size:11.5px;color:#9a9486}
.cm-status i{width:7px;height:7px;border-radius:50%;background:#6b6b60}
.cm-status.on{color:#bef264}.cm-status.on i{background:#84cc16;box-shadow:0 0 8px #84cc16;animation:cm_dot 1.6s ease-in-out infinite}
@keyframes cm_dot{50%{opacity:.35}}
.cm-card{background:var(--surface-panel-2);border:1px solid var(--border-soft);border-radius:14px;padding:11px 12px;margin-bottom:10px}
.cm-center{text-align:center}
.cm-sec{display:flex;justify-content:space-between;align-items:center;margin:2px 0 8px;font-size:12.5px;color:var(--text-primary)}
.cm-link{background:none;border:0;color:var(--t-fbbf24);font-size:11.5px;padding:0}
.cm-chips{display:flex;flex-wrap:wrap;gap:6px}
.cm-chip{font-size:12px;font-weight:700;padding:4px 10px;border-radius:9px;background:rgba(104,185,232,.1);border:1px solid rgba(104,185,232,.35);color:var(--t-7dd3fc)}
.cm-perm{margin-top:10px;padding-top:9px;border-top:1px dashed var(--border-soft);display:grid;gap:3px;font-size:11.5px;color:var(--text-mute)}
.cm-perm b{color:var(--t-fbbf24);font-size:12px;line-height:1.6}
.cm-next small{font-size:10.5px;color:var(--t-fbbf24)}
.cm-next b{display:block;font-size:13.5px;color:var(--text-primary);margin:2px 0}
.cm-next p,.cm-tl p{margin:0;font-size:11.5px;color:var(--text-dim);line-height:1.55}
.cm-acts{display:flex;gap:8px;margin:4px 0 12px}
.cm-btn{flex:1;min-height:40px;border-radius:11px;border:1px solid var(--border-soft);background:var(--surface-panel-2);color:var(--text-primary);font:600 12.5px inherit;font-family:inherit}
.cm-btn.pri{background:linear-gradient(180deg,#e9bb61,#c9922e);color:#1b1305;border-color:#e9bb61}
.cm-btn.sm{flex:none;min-height:32px;padding:0 10px;font-size:11.5px;white-space:nowrap}
.cm-filt{display:flex;gap:5px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.cm-filt::-webkit-scrollbar{display:none}
.cm-filt button{flex:none;font:600 11.5px inherit;font-family:inherit;padding:5px 11px;border-radius:99px;border:1px solid var(--border-soft);background:var(--surface-panel-2);color:var(--text-dim)}
.cm-filt button.on{border-color:#e9bb61;color:#fde68a;background:rgba(233,187,97,.1)}
.cm-item{display:flex;gap:10px;align-items:center;padding:10px;margin-bottom:8px;border-radius:13px;background:var(--surface-panel-2);border:1px solid var(--border-soft);border-left:3px solid var(--cg);position:relative}
.cm-item.eq{box-shadow:0 0 0 1px color-mix(in srgb,var(--cg) 50%,transparent),0 0 14px color-mix(in srgb,var(--cg) 22%,transparent)}
.cm-item.lock{opacity:.72}
.cm-item.lock .cm-bic{filter:grayscale(.7)}
.cm-it{flex:1;min-width:0;display:grid;gap:4px}
.cm-it b{font-size:12.5px;color:var(--text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-src{font-size:11px;color:var(--text-mute);line-height:1.5;margin:0}
.cm-pity{font-size:10.5px;color:var(--t-fbbf24)}
.cm-msdot{position:absolute;top:6px;right:8px;color:#e9bb61;width:13px;height:13px}
.cm-owned{font-size:11px;color:var(--t-4ade80)}
.cm-dhero{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.cm-dhero .cm-nm{color:var(--text-primary);display:block;margin-bottom:4px}
.cm-desc{font-size:12.5px;color:var(--text-dim);line-height:1.6;margin:0 0 10px}
.cm-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.cm-tbl td{padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text-dim)}
.cm-tbl td:first-child{color:var(--text-mute);width:50px}
.cm-tbl td:nth-child(3){width:18px;color:var(--text-mute)}
.cm-tbl td:nth-child(3) svg{width:10px;height:10px}
.cm-tbl .cm-full{color:var(--t-fbbf24);font-weight:700;text-align:right}
.cm-tl{display:grid;gap:8px}
.cm-tlr{display:flex;gap:10px;align-items:flex-start;opacity:.66}
.cm-tlr.u{opacity:1}
.cm-tlr>i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 11px sans-serif;border:1px solid rgba(233,187,97,.45);color:#e9bb61}
.cm-tlr.u>i{background:#e9bb61;color:#1b1305;box-shadow:0 0 10px rgba(233,187,97,.5)}
.cm-tlr>i svg{width:13px;height:13px}
.cm-tlr small{font-size:10.5px;color:var(--text-mute)}
.cm-tlr b{display:block;font-size:12.5px;color:var(--text-primary)}
.cm-seal-done{margin:6px auto 14px;width:92px;height:92px;border-radius:14px;border:2px solid #4ade80;color:#4ade80;display:grid;place-items:center;font:34px serif;transform:rotate(-8deg);box-shadow:0 0 18px rgba(74,222,128,.25)}
.cm-seal-done small{font:600 10px sans-serif;margin-top:-18px}
.cm-wallet{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.cm-wallet>span{font-size:11px;color:var(--text-mute);background:var(--surface-panel-2);border:1px solid var(--border-soft);border-radius:10px;padding:6px 8px;display:flex;gap:5px;align-items:center;min-width:0}
.cm-wallet b{margin-left:auto;color:var(--text-primary)}
.cm-note{margin-top:6px;line-height:1.55}
#cm-modal .cm-mbg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1}
#cm-modal .cm-mbox{position:fixed;left:16px;right:16px;top:50%;transform:translateY(-50%);z-index:2;background:var(--surface-raised);border:1px solid var(--border-soft);border-radius:16px;padding:16px;display:grid;gap:8px}
#cm-modal .cm-mbox b{font-size:14px;color:var(--text-primary)}
#cm-modal .cm-mbox p{margin:0;font-size:12.5px;color:var(--text-dim);line-height:1.55}
.cm-reveal,.cm-master{position:fixed;inset:0;z-index:190;display:grid;place-items:center;background:radial-gradient(circle,color-mix(in srgb,var(--cg) 22%,rgba(0,0,0,.75)),rgba(0,0,0,.85) 70%);animation:cm_fadeio 2.6s ease forwards}
.cm-master{animation-duration:3.2s}
@keyframes cm_fadeio{0%{opacity:0}12%,80%{opacity:1}100%{opacity:0}}
.cm-rv-in{display:grid;gap:8px;justify-items:center;text-align:center;padding:0 24px}
.cm-rv-in small{font-size:12px;color:#d6cfbf;letter-spacing:.1em}
.cm-rv-in b{font-size:19px;color:#fff5dc;text-shadow:0 0 14px var(--cg)}
.cm-rv-scroll{width:180px;height:14px;border-radius:7px;border:1px solid var(--cg);background:linear-gradient(90deg,#302818,#11130f,#302818);box-shadow:0 0 22px var(--cg);animation:cm_unfurl .8s cubic-bezier(.2,.8,.3,1) both}
@keyframes cm_unfurl{from{transform:scaleX(.05)}}
.cm-ms-ring{position:absolute;width:230px;height:230px;animation:cm_ringin 3.2s ease forwards}
.cm-ms-ring i{position:absolute;left:50%;top:50%;font:18px serif;color:#fff2cc;text-shadow:0 0 10px var(--cg);transform:rotate(var(--a)) translateY(-104px) rotate(calc(-1*var(--a)))}
@keyframes cm_ringin{0%{transform:scale(1.8) rotate(-40deg);opacity:0}35%{transform:scale(1) rotate(0);opacity:1}100%{transform:scale(1) rotate(30deg);opacity:.9}}
.cm-ms-seal{width:96px;height:96px;border-radius:16px;border:2px solid var(--cg);display:grid;place-items:center;font:48px serif;color:#fff2cc;text-shadow:0 0 16px var(--cg);box-shadow:0 0 34px var(--cg);transform:rotate(-8deg);animation:cm_stamp 3.2s ease forwards}
@keyframes cm_stamp{0%,30%{transform:rotate(-8deg) scale(2.2);opacity:0}45%{transform:rotate(-8deg) scale(.92);opacity:1}55%,100%{transform:rotate(-8deg) scale(1)}}
.cm-ms-t{position:absolute;bottom:22%;text-align:center;display:grid;gap:4px}
.cm-ms-t small{color:#d6cfbf;font-size:12px}.cm-ms-t b{color:#fff5dc;font-size:18px}
/* มรดกรูปลักษณ์: ปีกเพลิงนิพพาน / เกล็ดมังกร บนกล่องผู้เล่น — pseudo-element ไม่เปลี่ยนขนาดกล่อง */
.cpop-unit.cm-wings{overflow:visible}
.cpop-unit.cm-wings:before,.cpop-unit.cm-wings:after{content:"";position:absolute;top:8%;width:46%;height:84%;z-index:-1;pointer-events:none;border-radius:60% 10% 70% 30%;background:radial-gradient(ellipse at 100% 50%,rgba(251,146,60,.85),rgba(239,68,68,.45) 45%,transparent 72%);filter:blur(1px);animation:cm_flap 1.4s ease-in-out infinite}
.cpop-unit.cm-wings:before{right:88%;transform-origin:100% 50%}
.cpop-unit.cm-wings:after{left:88%;transform-origin:0 50%;transform:scaleX(-1)}
@keyframes cm_flap{50%{opacity:.6;filter:blur(2px) brightness(1.3)}}
.cpop-unit.cm-scales{box-shadow:0 0 0 1px rgba(251,191,36,.7),0 0 14px rgba(251,191,36,.45),inset 0 0 18px rgba(251,191,36,.18);background-image:repeating-linear-gradient(60deg,rgba(251,191,36,.07) 0 4px,transparent 4px 9px)}
.cm-orbit-seal{position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;pointer-events:none;animation:cm_spin 26s linear infinite}
.cm-orbit-seal i{position:absolute;left:50%;top:50%;font:12px serif;color:#a5f3fc;text-shadow:0 0 8px #38bdf8;transform:rotate(var(--a)) translateY(-118px)}
@keyframes cm_spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cm-stage *,.cm-stage *:before,.cm-stage *:after,.cm-orbit-seal,.cpop-unit.cm-wings:before,.cpop-unit.cm-wings:after,.cm-status.on i{animation:none!important}}