/* screens.css — login, create, cultivation, sect, prep, trial */
#login{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:12px;background:linear-gradient(180deg,rgba(18,10,36,.35),rgba(8,4,18,.85)),url(../assets/visual/maps/thanh_thien/map_thanh_thien_bg_v01.webp) center/cover no-repeat}
.login-box{width:min(380px,100%);text-align:center;padding:22px;border-radius:22px;background:linear-gradient(170deg,rgba(40,18,76,.78),rgba(14,7,30,.88));border:1px solid var(--cv-line-gold);box-shadow:0 0 60px rgba(123,63,242,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.logo{font-family:var(--cv-font-display);font-weight:800;font-size:22px;letter-spacing:6px;color:#d9b8ff;text-shadow:0 0 14px rgba(184,108,255,.8)}
.logo span{font-size:44px;letter-spacing:4px;color:var(--cv-lightgold);text-shadow:0 0 22px rgba(217,164,65,.8),0 0 40px rgba(123,63,242,.6)}
.login-box .tag{background:none;color:var(--cv-muted);font-size:12px;font-weight:400;margin:4px 0 10px}
.login-box input,.cr-form input{width:100%;margin:5px 0;padding:11px 12px;border-radius:var(--cv-radius-sm);border:1px solid var(--cv-line);background:rgba(10,5,22,.6);color:#fff;font-size:16px;font-family:var(--cv-font-ui)}
.login-box .row{margin-top:6px}.login-box .row .btn{flex:1}.login-box .btn.ghost{margin-top:8px;width:100%}
.login-art{display:flex;justify-content:center;margin:-6px 0 4px;height:150px}
.login-art img{height:150px;filter:drop-shadow(0 0 14px rgba(184,108,255,.7))}.login-art img+img{margin-left:-30px}
.announce{font-size:12px;color:#ffe9a8;background:rgba(255,214,107,.08);border-radius:10px;padding:6px 8px;margin-bottom:10px}.announce:empty{display:none}
.err{color:var(--cv-crimson);font-size:13px;min-height:18px;margin-top:6px}
.glass{background:linear-gradient(160deg,rgba(58,23,104,.55),rgba(18,10,36,.78));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ttl{font-family:var(--cv-font-display);font-size:24px;font-weight:800;color:#fff;margin:0}.ttl2{font-family:var(--cv-font-display);font-size:19px;margin:2px 0 4px}
.tip{background:rgba(255,214,107,.08);border-radius:10px;padding:8px;font-size:13px}
.qi{font-size:20px}

/* Character creation — dual figure dynamic focus */
#create{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:12px;background:linear-gradient(180deg,rgba(18,10,36,.55),rgba(8,4,18,.9)),url(../assets/visual/maps/thanh_thien/map_thanh_thien_bg_v01.webp) center/cover}
.create-box{width:min(920px,100%);max-height:100%;overflow:auto;display:grid;grid-template-columns:1fr 1.1fr;gap:18px;padding:18px;border-radius:var(--cv-radius-lg);background:linear-gradient(170deg,rgba(40,18,76,.85),rgba(14,7,30,.92));border:1px solid var(--cv-line-gold);box-shadow:0 0 60px rgba(123,63,242,.45);backdrop-filter:blur(10px)}
.cr-art{position:relative;border-radius:var(--cv-radius-md);background:radial-gradient(circle at 50% 60%,rgba(123,63,242,.55),#0d0818 75%);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;min-height:340px;touch-action:manipulation}
.cr-fig{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;cursor:pointer;transform-origin:50% 90%;transform:scale(.9);opacity:.5;filter:saturate(.6) brightness(.8);transition:transform 350ms cubic-bezier(.2,.8,.2,1),opacity 350ms,filter 350ms;will-change:transform}
.cr-fig img,.cr-fig canvas{max-height:320px;max-width:100%;object-fit:contain;filter:drop-shadow(0 0 22px rgba(184,108,255,.7))}
.cr-fig.on{transform:scale(1.1);opacity:1;filter:none;z-index:2}
.cr-fig.on::after{content:'';position:absolute;bottom:4px;left:15%;right:15%;height:26px;border-radius:50%;background:radial-gradient(rgba(217,164,65,.55),transparent 70%);z-index:-1}
.cr-fig .cr-tag{position:absolute;bottom:8px;left:0;right:0;margin:auto;width:max-content;font-family:var(--cv-font-display);font-weight:800;color:var(--cv-lightgold);background:rgba(12,6,26,.75);padding:3px 12px;border-radius:999px;border:1px solid var(--cv-line-gold);white-space:nowrap;font-size:13px}
.cr-age{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.cr-age button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;border-radius:var(--cv-radius-sm);border:1px solid var(--cv-line);background:rgba(10,5,22,.5);color:#fff;font-family:var(--cv-font-ui);touch-action:manipulation;transition:border-color .25s,transform .25s}
.cr-age button img,.cr-age button canvas{height:64px;object-fit:contain}
.cr-age button.on{border-color:var(--cv-lightgold);box-shadow:var(--cv-glow-gold);transform:translateY(-2px)}
.cr-age small{font-size:10.5px;color:var(--cv-muted)}
.cr-trait,.cr-path{margin-top:10px;font-size:13px;padding:8px 10px;border-radius:var(--cv-radius-sm);background:rgba(58,23,104,.35);border:1px solid var(--cv-line);display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* Tu Luyện — Đạo Đài center-locked: only opacity/scale/rotate animate */
.hero-row{display:flex;gap:16px;align-items:flex-start}
.meditate{position:relative;width:200px;height:230px;flex:none;display:grid;place-items:end center;margin:0 auto}
.meditate>img,.meditate>canvas{grid-area:1/1;position:relative;max-height:220px;max-width:190px;z-index:1;filter:drop-shadow(0 0 16px rgba(184,108,255,.7));animation:float 3s ease-in-out infinite}
.aura-ring{position:absolute;left:0;right:0;bottom:6px;margin:0 auto;width:180px;height:56px;border-radius:50%;border:2px dashed rgba(217,164,65,.7);box-shadow:0 0 30px rgba(123,63,242,.6),inset 0 0 20px rgba(116,231,255,.3);transform-origin:50% 50%;animation:ring-breathe 3.2s ease-in-out infinite;pointer-events:none}
.aura-ring::before{content:'';position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(116,231,255,.45);animation:spin 10s linear infinite}
@keyframes ring-breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.03);opacity:1}}
.realm-fx{position:absolute;inset:0;pointer-events:none;z-index:2}

.sect-head{display:flex;gap:10px;align-items:center}.sect-head .ic.xl{filter:drop-shadow(0 0 10px var(--c))}.sect-head h4{margin-bottom:4px}
.align-row{display:grid;grid-template-columns:22px 80px 1fr 40px;gap:8px;align-items:center;margin:6px 0;font-size:13px}.align-row b{text-align:right}

/* Prep / areas */
.stagepick{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0 10px}.stagepick .btn{width:48px;font-size:18px}
.sn{font-family:var(--cv-font-display);font-weight:800;font-size:30px;color:#FFE7A0;text-shadow:0 0 16px rgba(184,108,255,.9)}.sr{font-size:13px;color:var(--cv-muted)}
.preptools{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.areas{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.area{position:relative;height:64px;border-radius:var(--cv-radius-sm);border:1px solid var(--cv-line);background-size:cover!important;background-position:center!important;display:flex;align-items:flex-end;justify-content:center;padding:4px;font-weight:700;font-size:11.5px;text-shadow:0 1px 3px #000}
.area.on{border-color:var(--cv-lightgold);box-shadow:var(--cv-glow-gold)}.area.locked{opacity:.5}.area .ic{position:absolute;top:6px;right:6px}
.seg.diff button{min-width:70px}
.dart .emo{font-size:96px}
.evo{display:flex;gap:6px;margin-top:8px}.evo div{flex:1;text-align:center}.evo img{width:100%;border-radius:8px;background:rgba(0,0,0,.3)}.evo small{font-size:10px;color:var(--cv-muted)}

/* Loadout */
.loadout{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:8px 0}
.lo-slot{position:relative;min-height:70px;border-radius:var(--cv-radius-sm);border:1px dashed var(--cv-line);background:rgba(10,5,22,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;text-align:center;padding:4px}
.lo-slot.fill{border-style:solid;border-color:var(--cv-line-gold)}
.lo-slot.sel{box-shadow:var(--cv-glow-gold)}
.lo-slot img{width:34px;height:34px;border-radius:8px}
.lo-slot em{font-style:normal;color:var(--cv-muted);font-size:9.5px;text-transform:uppercase;letter-spacing:.5px}
.skicon-sm{width:30px;height:30px;border-radius:7px;vertical-align:middle}

/* Trial */
.trial{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:#07040f}
.trial-top{display:flex;align-items:center;gap:12px;padding:10px 14px;padding-top:calc(10px + var(--sat))}.trial-top .bar.tn{flex:1;height:16px}.trial-top .bar.tn i{background:linear-gradient(90deg,#7B3FF2,#74E7FF)}.trial.tamma .trial-top .bar.tn i{background:linear-gradient(90deg,#8e1330,#B86CFF)}
.trial-top .t-num{font-size:20px;color:var(--cv-lightgold)}
#trialCv{flex:1;width:100%;min-height:0;display:block;cursor:pointer;touch-action:none}
.trial-hint{text-align:center;padding:4px}.trial-ctl{display:flex;gap:10px;justify-content:center;padding:10px;padding-bottom:calc(12px + var(--sab))}.trial-ctl .btn{width:88px;min-height:56px;font-size:22px}
/* Emotion/state library fallbacks */
img.st-defeated{filter:grayscale(.7) brightness(.7) drop-shadow(0 0 12px rgba(216,58,88,.6))!important}
img.st-victorious,img.st-breakthrough{filter:drop-shadow(0 0 24px rgba(217,164,65,.9))!important}
img.st-meditate{animation:float 4s ease-in-out infinite}
/* V3.1 Next Goal card */
#nextGoal{position:fixed;z-index:8;left:calc(12px + var(--sal));top:calc(128px + var(--sat));width:250px;padding:10px 12px 12px;border-radius:var(--cv-radius-md);background:linear-gradient(180deg,rgba(28,14,52,.9),rgba(12,6,26,.88));border:1px solid rgba(217,164,65,.55);box-shadow:0 6px 24px rgba(0,0,0,.45),0 0 18px rgba(184,108,255,.25);font-size:13px;animation:fade .4s both}
#nextGoal .ng-h{display:flex;align-items:center;gap:6px;font-family:var(--cv-font-num);font-weight:700;font-size:11px;letter-spacing:1.2px;color:var(--cv-lightgold)}#nextGoal .ng-h .ic{width:16px;height:16px}
#nextGoal .ng-x{margin-left:auto;background:none;border:0;color:#fff;opacity:.6;font-size:16px;line-height:1;cursor:pointer;padding:0 4px}
#nextGoal .ng-t{display:block;margin-top:4px;font-family:var(--cv-font-display);font-size:16px;color:#fff}#nextGoal .ng-s{font-size:11px;opacity:.7;margin-bottom:4px}
#nextGoal ul{list-style:none;margin:4px 0 8px;padding:0}#nextGoal li{color:#ff9db0;padding:1px 0}#nextGoal li.ok{color:#5BE0C6}
#nextGoal .ng-cta{width:100%}
#nextGoal.mini{width:auto}#nextGoal.mini>*:not(.ng-h){display:none}
@media (max-width:640px){#nextGoal{top:calc(208px + var(--sat));left:10px;width:min(210px,52vw);padding:8px 10px;font-size:12px}#nextGoal .ng-t{font-size:14px}#nextGoal li:nth-child(n+4){display:none}}
@media (max-height:460px){#nextGoal{display:none}}
/* V3.1 tutorial coach marks */
#tutBox{position:fixed;inset:0;z-index:60}
.tut-hole{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(6,3,14,.68),0 0 0 3px var(--cv-lightgold),0 0 24px var(--cv-lightgold);animation:glow 1s infinite alternate;cursor:pointer}
.tut-tip{position:fixed;width:280px;padding:12px 14px;border-radius:var(--cv-radius-md);background:linear-gradient(180deg,#2a1452,#140a28);border:1px solid var(--cv-gold);box-shadow:0 10px 30px rgba(0,0,0,.6);animation:pop .25s}
.tut-tip b{font-family:var(--cv-font-display);font-size:17px;color:var(--cv-lightgold)}.tut-tip p{margin:6px 0 10px;font-size:13.5px;line-height:1.45}