/* Hayotiy vaziyatlar — authored offline role-play */
.sk-life{--sec:#59c5d0;--sec-rgb:89,197,208;--sec-2:#a8e1e5;--f1:#206879;--f2:#1d6e79;--l1:#365259;--l2:#34585d}
.sk-quiz{--f1:#1d6e79}
:root[data-theme="light"] .sk-life{--sec:#126674;--l1:#bbd6dd;--l2:#b7dbdd}

.life-shell{display:grid;gap:18px;max-width:1100px;margin:0 auto}
.life-hero{position:relative;overflow:hidden;border:1px solid rgba(var(--sec-rgb),.34);border-radius:30px;padding:24px;background:linear-gradient(135deg,rgba(var(--sec-rgb),.16),rgba(124,91,190,.08)),var(--card);box-shadow:0 22px 55px rgba(0,0,0,.16)}
.life-hero:before{content:"";position:absolute;inset:auto -10% -55% 35%;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(var(--sec-rgb),.22),transparent 67%);pointer-events:none}
.life-head{position:relative;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.life-eyebrow{margin:0 0 6px;color:var(--sec);font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.life-head h3{margin:0;font-size:clamp(25px,4vw,42px);line-height:1.05}
.life-sub{margin:8px 0 0;max-width:690px;color:var(--muted);font-size:16px;line-height:1.55}
.life-level{min-width:150px}
.life-level label{display:block;margin-bottom:6px;font-size:12px;font-weight:900;color:var(--muted)}
.life-level select{width:100%}

.life-mission-layout{position:relative;display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:20px;align-items:stretch;margin-top:20px}
.life-scene{position:relative;min-height:420px;overflow:hidden;border-radius:25px;background:linear-gradient(180deg,rgba(var(--sec-rgb),.22),rgba(10,18,32,.22)),linear-gradient(145deg,var(--card2),var(--card));border:1px solid rgba(var(--sec-rgb),.3)}
.life-place{position:absolute;inset:18px 18px auto;display:flex;justify-content:space-between;gap:8px;align-items:center;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.life-place strong{color:var(--text);font-size:13px}
.life-stage-floor{position:absolute;left:10%;right:10%;bottom:25px;height:24px;border-radius:50%;background:rgba(0,0,0,.18);filter:blur(10px)}
.life-mascot{--mx:0px;--my:0px;position:absolute;left:50%;bottom:20px;width:220px;height:330px;transform:translateX(calc(-50% + var(--mx))) translateY(var(--my));background-image:url('/assets/abdulaziz-guide-20.png?v=20260812p20');background-size:500% 400%;background-repeat:no-repeat;filter:drop-shadow(0 18px 16px rgba(0,0,0,.24));animation:life-idle 5s ease-in-out infinite;transition:filter .2s ease;will-change:transform;backface-visibility:hidden}
.life-mascot.p0{background-position:0 0}.life-mascot.p1{background-position:25% 0}.life-mascot.p2{background-position:50% 0}.life-mascot.p3{background-position:75% 0}.life-mascot.p4{background-position:100% 0}
.life-mascot.p5{background-position:0 33.333%}.life-mascot.p6{background-position:25% 33.333%}.life-mascot.p7{background-position:50% 33.333%}.life-mascot.p8{background-position:75% 33.333%}.life-mascot.p9{background-position:100% 33.333%}
.life-mascot.p10{background-position:0 66.666%}.life-mascot.p11{background-position:25% 66.666%}.life-mascot.p12{background-position:50% 66.666%}.life-mascot.p13{background-position:75% 66.666%}.life-mascot.p14{background-position:100% 66.666%}
.life-mascot.p15{background-position:0 100%}.life-mascot.p16{background-position:25% 100%}.life-mascot.p17{background-position:50% 100%}.life-mascot.p18{background-position:75% 100%}.life-mascot.p19{background-position:100% 100%}
.life-mascot.talking{animation:life-talk-body 1s ease-in-out infinite alternate}
.life-mascot.celebrate{animation:life-celebrate .72s cubic-bezier(.2,.8,.3,1)}
.life-mouth{position:absolute;z-index:3;left:50%;top:29%;width:10px;height:4px;transform:translateX(-50%);border-radius:50%;background:#532c2c;opacity:0;pointer-events:none}
.life-mascot.talking .life-mouth{opacity:.72;animation:life-mouth .36s ease-in-out infinite}
@keyframes life-idle{0%,100%{transform:translateX(calc(-50% + var(--mx))) translateY(0)}50%{transform:translateX(calc(-50% + var(--mx))) translateY(-2px)}}
@keyframes life-talk-body{from{transform:translateX(calc(-50% + var(--mx))) translateY(0)}to{transform:translateX(calc(-50% + var(--mx))) translateY(-1px)}}
@keyframes life-mouth{0%{height:3px;width:11px}50%{height:10px;width:8px}100%{height:5px;width:12px}}
@keyframes life-celebrate{0%{transform:translateX(-50%) translateY(0) scale(1)}45%{transform:translateX(-50%) translateY(-10px) scale(1.02)}100%{transform:translateX(-50%) translateY(0) scale(1)}}

.life-dialog{position:relative;display:flex;flex-direction:column;min-height:420px;padding:22px;border-radius:25px;background:var(--card2);border:1px solid var(--line)}
.life-speaker{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--sec);font-weight:900}
.life-speaker:before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 0 6px rgba(var(--sec-rgb),.12)}
.life-bubble{margin:0;padding:18px;border-radius:19px 19px 19px 5px;background:var(--card3);border:1px solid rgba(var(--sec-rgb),.24);font-size:clamp(18px,2.4vw,24px);font-weight:750;line-height:1.45}
.life-prompt{margin:14px 0 8px;color:var(--muted);line-height:1.5}
.life-model{margin:8px 0 0;padding:10px 12px;border-left:3px solid var(--sec);border-radius:0 10px 10px 0;background:rgba(var(--sec-rgb),.09);color:var(--muted);font-size:14px}
.life-actions{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}
.life-response{display:grid;grid-template-columns:1fr auto;gap:9px;margin-top:auto}
.life-response .txt{min-width:0;background:var(--card);color:var(--text)}
.life-feedback{min-height:28px;margin-top:10px;font-weight:800;color:var(--muted)}
.life-feedback.good{color:var(--good)}.life-feedback.bad{color:var(--bad)}
.life-progress{display:flex;gap:6px;margin:0 0 14px}
.life-progress i{height:5px;flex:1;border-radius:99px;background:var(--line)}
.life-progress i.done,.life-progress i.current{background:var(--sec)}.life-progress i.current{box-shadow:0 0 0 4px rgba(var(--sec-rgb),.11)}

.life-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.life-card{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;min-height:92px;padding:14px;text-align:left;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--text);cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.life-card:hover,.life-card:focus-visible{transform:translateY(-2px);border-color:var(--sec);outline:none}
.life-card.active{background:rgba(var(--sec-rgb),.12);border-color:var(--sec);box-shadow:0 0 0 3px rgba(var(--sec-rgb),.1)}
.life-card.done:after{content:"✓";display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--good);color:#07140f;font-weight:950}
.life-card-icon{font-size:27px}.life-card-title{display:block;font-weight:900}.life-card-role{display:block;margin-top:3px;color:var(--muted);font-size:12px}.life-card-no{color:var(--muted);font-size:12px;font-weight:900}
.life-complete{padding:18px;border-radius:18px;background:linear-gradient(135deg,rgba(83,196,139,.16),rgba(var(--sec-rgb),.12));border:1px solid rgba(83,196,139,.35)}
.life-complete h4{margin:0 0 6px;font-size:22px}.life-complete p{margin:0;color:var(--muted)}

@media(max-width:820px){.life-mission-layout{grid-template-columns:1fr}.life-scene{min-height:330px}.life-mascot{width:185px;height:278px}.life-dialog{min-height:390px}.life-library{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.life-hero{padding:15px;border-radius:22px}.life-head h3{font-size:27px}.life-level{width:100%}.life-mission-layout{gap:12px;margin-top:14px}.life-scene{min-height:290px}.life-mascot{width:165px;height:248px;bottom:10px}.life-dialog{padding:16px;min-height:410px}.life-bubble{padding:14px;font-size:19px}.life-response{grid-template-columns:1fr}.life-response .btn{width:100%}.life-library{grid-template-columns:1fr}.life-card{min-height:78px}}
@media(prefers-reduced-motion:reduce){.life-mascot,.life-mascot.talking,.life-mascot.celebrate,.life-mouth{animation:none!important}.life-card{transition:none}}