*{box-sizing:border-box;margin:0;padding:0}
.head{max-width:1000px;margin:0 auto 24px;text-align:center}
.head h1{font-family:'Cinzel Decorative';font-weight:900;font-size:34px;background:linear-gradient(180deg,#fff1c2,#d9a441 55%,#9a6a1c);-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{color:#a8977d;font-size:15px;margin-top:6px}
.cards{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;max-width:1040px;margin:0 auto}
.card{cursor:pointer;width:300px;border-radius:30px;outline:2px solid transparent;transition:transform .3s}
.card:hover{transform:translateY(-5px)}
.card.selected{outline:2px solid #f0c46a;box-shadow:0 0 0 6px rgba(240,196,106,.15)}
.card-body{padding:12px 6px 0;text-align:center}
.card-body h3{font-size:17px;font-weight:800;color:#f6e7cc}
.card-body p{font-size:13px;color:#a8977d;margin-top:4px;line-height:1.5}
.letter{display:inline-block;font-weight:800;font-size:12px;color:#1a1006;background:#f0c46a;border-radius:20px;padding:2px 10px;margin-bottom:6px}

.phone{position:relative;height:600px;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.07);isolation:isolate}
.top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:16px;z-index:6}
.logo b{display:block;font-family:'Cinzel Decorative';font-weight:900;font-size:21px;line-height:1;background:linear-gradient(180deg,#fff3c8,#e0ad4a 55%,#9a6a1c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(255,150,40,.35))}
.logo small{font-family:Cinzel;font-weight:600;font-size:9.5px;letter-spacing:2px;color:#c8a35a}
.streak{display:flex;align-items:center;gap:5px;font-weight:800;font-size:12px;padding:6px 11px;border-radius:14px;color:#ffcf73;background:linear-gradient(#2a1a0a,#140c05);border:1px solid #7a5420;box-shadow:0 0 14px rgba(255,140,40,.25)}
.hero{position:absolute;top:56px;left:0;right:0;height:268px;z-index:3}
.mascot{position:absolute;left:14px;bottom:4px;width:178px;height:220px}
.fire{position:absolute;left:68%;bottom:14px;width:84px;height:96px;transform:translateX(-50%)}
.fl{position:absolute;bottom:0;left:50%;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;transform-origin:50% 100%;animation:flame 1.1s ease-in-out infinite}
.fl.a{width:64px;height:88px;margin-left:-32px;background:radial-gradient(ellipse at 50% 80%,#ffe08a 0%,#ff9a2e 45%,#e2481c 75%,rgba(160,30,10,0) 100%)}
.fl.b{width:40px;height:66px;margin-left:-14px;background:radial-gradient(ellipse at 50% 80%,#fff3c4 0%,#ffc14d 50%,rgba(255,110,30,0) 100%);animation-duration:.9s;animation-delay:-.3s}
.fl.c{width:30px;height:48px;margin-left:-30px;background:radial-gradient(ellipse at 50% 80%,#ffd27a 0%,#ff7a2a 60%,rgba(255,80,20,0) 100%);animation-duration:1.3s;animation-delay:-.6s}
.logs{position:absolute;bottom:-4px;left:50%;width:100px;height:18px;margin-left:-50px}
.logs i{position:absolute;height:12px;width:76px;border-radius:6px;background:linear-gradient(#3a2416,#140a05);box-shadow:inset 0 2px 0 rgba(255,120,40,.5);bottom:2px}
.logs i:first-child{left:0;transform:rotate(14deg)}.logs i:last-child{right:0;transform:rotate(-14deg)}
.glow{position:absolute;left:68%;bottom:-50px;width:360px;height:320px;transform:translateX(-50%);background:radial-gradient(closest-side at 50% 60%,rgba(255,110,30,.45),rgba(255,70,10,.12) 55%,rgba(0,0,0,0) 100%);animation:flicker 2.2s infinite;pointer-events:none}
.stones{position:absolute;left:68%;bottom:128px;transform:translateX(-50%);display:flex;gap:10px}
.stone{width:32px;height:36px;border-radius:9px 11px 8px 12px;display:flex;align-items:center;justify-content:center;font-family:Cinzel;font-weight:800;font-size:16px;animation:floaty 3s ease-in-out infinite;background:linear-gradient(145deg,#2c2c2c,#080808);color:#ffb04a;border:1px solid #4a3218;box-shadow:0 0 14px rgba(255,120,30,.4),inset 0 1px 0 rgba(255,255,255,.08);text-shadow:0 0 8px #ff7a1a}
.stone:nth-child(2){animation-delay:-1s}.stone:nth-child(3){animation-delay:-2s}
.ember{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffb347;box-shadow:0 0 6px #ff8a2a;bottom:40px;animation:ember linear infinite;opacity:0}
.cracks{position:absolute;inset:0;pointer-events:none;z-index:1}
.cracks path{fill:none;stroke:#ff6a1a;stroke-width:1.6;filter:drop-shadow(0 0 4px #ff6a1a);animation:lava 3.2s ease-in-out infinite}
.cracks path:nth-child(2n){animation-delay:-1.2s}.cracks path:nth-child(3n){animation-delay:-2.1s}
.tablet{position:absolute;left:14px;right:14px;top:330px;border-radius:16px;padding:14px 15px 12px;z-index:5;transform:perspective(800px) rotateX(6deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover .tablet{transform:perspective(800px) rotateX(0) rotateY(-6deg) translateZ(10px)}
.t-h{display:flex;justify-content:space-between;font-family:Cinzel;font-weight:600;font-size:10.5px;letter-spacing:1px;color:#c8a35a;margin-bottom:6px}
.leg{display:flex;justify-content:space-between;align-items:center;padding:7px 0}
.leg+.leg{border-top:1px solid rgba(240,196,106,.18)}
.leg .m{font-family:Cinzel;font-weight:800;font-size:12.5px;color:#f1e3c8}
.leg .s{font-size:11px;color:#b9a382;margin-top:2px}
.gold{background:linear-gradient(180deg,#fff1c2,#d9a441 60%,#a8741f);-webkit-background-clip:text;background-clip:text;color:transparent}
.leg .o{font-family:Cinzel;font-weight:800;font-size:21px}
.tot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:6px;padding-top:8px;border-top:1px solid rgba(240,196,106,.25)}
.tot .k{font-size:10px;letter-spacing:1px;color:#b9a382;font-weight:700}
.tot .v{font-family:'Cinzel Decorative';font-weight:900;font-size:32px;line-height:1}
.tot .p{font-weight:800;font-size:17px;color:#f1e3c8}
.btn{position:absolute;left:14px;right:14px;bottom:16px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;font-family:Cinzel;font-weight:800;font-size:15px;letter-spacing:1px;z-index:6}
@keyframes flame{0%,100%{transform:scaleY(1) skewX(0)}25%{transform:scaleY(1.12) skewX(-4deg)}50%{transform:scaleY(.93) skewX(3deg)}75%{transform:scaleY(1.07) skewX(-2deg)}}
@keyframes flicker{0%{opacity:.8}18%{opacity:1}35%{opacity:.78}52%{opacity:.95}70%{opacity:.83}100%{opacity:.9}}
@keyframes ember{0%{transform:translate(0,0);opacity:0}12%{opacity:1}100%{transform:translate(var(--dx),-270px);opacity:0}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(4deg)}}
@keyframes lava{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes eyes{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes flow{to{stroke-dashoffset:-60}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* V1: lavă vie */
.V1 .phone{background:radial-gradient(120% 70% at 70% 60%,#2a1208 0%,#0f0806 55%,#050403 100%)}
.V1 .cracks path{stroke-width:2.2;stroke-dasharray:14 6;animation:flow 2.6s linear infinite,lava 3.2s ease-in-out infinite}
.V1 .pool{position:absolute;left:-20px;right:-20px;bottom:-40px;height:150px;z-index:2;background:radial-gradient(60% 60% at 50% 100%,rgba(255,110,20,.55),rgba(200,50,10,.25) 50%,rgba(0,0,0,0) 75%);animation:pulse 3s infinite}
.V1 .tablet{background:linear-gradient(160deg,rgba(28,24,22,.95),rgba(8,7,6,.98));border:1px solid rgba(255,140,50,.45);box-shadow:0 0 0 1px #000,0 0 26px rgba(255,100,20,.35),0 20px 40px rgba(0,0,0,.8)}
.V1 .btn{background:linear-gradient(180deg,#ff9a3c,#d9461a);color:#2a0c02;box-shadow:0 6px 0 #7a2408,0 0 26px rgba(255,110,30,.5)}

/* V2: obsidian lustruit */
.V2 .phone{background:linear-gradient(165deg,#1d1d1f 0%,#0b0b0c 45%,#050505 100%)}
.V2 .phone::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,.05) 44%,rgba(255,255,255,0) 56%,rgba(255,255,255,.03) 78%,rgba(255,255,255,0) 90%)}
.V2 .facets{position:absolute;inset:0;z-index:1;opacity:.5}
.V2 .cracks path{stroke:#ffb04a;stroke-width:1.1;filter:drop-shadow(0 0 3px #ff8a2a)}
.V2 .tablet{background:linear-gradient(160deg,#1f1f21,#070707);border:1px solid #6b4a1a;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 4px rgba(0,0,0,.6),inset 0 0 0 5px rgba(217,164,65,.35),0 22px 44px rgba(0,0,0,.85)}
.V2 .btn{background:linear-gradient(180deg,#fff0b8,#e2ad4a 50%,#a8741f);color:#1a1006;box-shadow:0 6px 0 #5e3e10,inset 0 1px 0 rgba(255,255,255,.7)}

/* V3: vulcanul */
.V3 .phone{background:radial-gradient(90% 55% at 50% 0%,#5a1406 0%,#2a0904 40%,#0a0504 75%)}
.V3 .volcano{position:absolute;left:0;right:0;top:40px;height:200px;z-index:1}
.V3 .ash{position:absolute;inset:0;z-index:1;background:radial-gradient(1px 1px at 20% 30%,rgba(255,200,160,.5),transparent),radial-gradient(1px 1px at 70% 20%,rgba(255,200,160,.4),transparent),radial-gradient(1px 1px at 40% 60%,rgba(255,200,160,.35),transparent),radial-gradient(1px 1px at 85% 55%,rgba(255,200,160,.4),transparent)}
.V3 .tablet{background:linear-gradient(160deg,#141010,#060404);border:2px solid transparent;background-clip:padding-box;box-shadow:0 0 0 2px #ff5a14,0 0 22px rgba(255,80,20,.55),0 20px 40px rgba(0,0,0,.85)}
.V3 .btn{background:#0c0806;color:#ffb04a;border:2px solid #ff6a1a;box-shadow:0 0 22px rgba(255,90,20,.45),inset 0 0 14px rgba(255,90,20,.25);text-shadow:0 0 8px #ff6a1a}

/* L1: râul de lavă */
.L1 .phone{background:radial-gradient(120% 70% at 70% 55%,#2a1208 0%,#0f0806 55%,#050403 100%)}
.L1 .cracks path{stroke-width:2.2;stroke-dasharray:14 6;animation:flow 2.6s linear infinite,lava 3.2s ease-in-out infinite}
.L1 .river{position:absolute;left:0;right:0;top:268px;height:80px;z-index:2}
.L1 .river path{fill:none;stroke-linecap:round}
.L1 .tablet{background:linear-gradient(160deg,rgba(28,24,22,.96),rgba(8,7,6,.98));border:1px solid rgba(255,140,50,.45);box-shadow:0 0 0 1px #000,0 0 30px rgba(255,100,20,.45),0 20px 40px rgba(0,0,0,.8)}
.L1 .btn{background:linear-gradient(180deg,#ff9a3c,#d9461a);color:#2a0c02;box-shadow:0 6px 0 #7a2408,0 0 26px rgba(255,110,30,.5)}
/* L2: magmă și aur */
.L2 .phone{background:radial-gradient(110% 70% at 60% 60%,#3a1406 0%,#140906 55%,#060403 100%)}
.L2 .cracks path{stroke:#ffb04a;stroke-width:2;stroke-dasharray:16 5;animation:flow 3s linear infinite,lava 3s ease-in-out infinite}
.L2 .pool{position:absolute;left:-20px;right:-20px;bottom:-40px;height:150px;z-index:2;background:radial-gradient(60% 60% at 50% 100%,rgba(255,150,40,.55),rgba(200,70,10,.25) 50%,rgba(0,0,0,0) 75%);animation:pulse 3s infinite}
.L2 .tablet{background:linear-gradient(160deg,#1c1714,#070606);border:1px solid #c9973e;box-shadow:inset 0 0 0 3px rgba(0,0,0,.6),inset 0 0 0 4px rgba(255,140,40,.45),0 0 28px rgba(255,120,30,.35),0 20px 40px rgba(0,0,0,.85)}
.L2 .btn{background:linear-gradient(180deg,#fff0b8,#f0b04a 45%,#e0641c);color:#2a1004;box-shadow:0 6px 0 #7a3a0c,0 0 28px rgba(255,130,40,.55),inset 0 1px 0 rgba(255,255,255,.7)}
/* L3: lespede de lavă răcită */
.L3 .phone{background:linear-gradient(180deg,#2a0d05 0%,#120806 40%,#060403 100%)}
.L3 .cracks path{stroke-width:2;stroke-dasharray:12 6;animation:flow 3.4s linear infinite,lava 3.2s ease-in-out infinite}
.L3 .tablet{background:#0d0907;border:0;overflow:hidden;box-shadow:0 0 0 2px #1a0f0a,0 0 30px rgba(255,90,20,.4),0 20px 40px rgba(0,0,0,.85)}
.L3 .tablet::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 270 230'><g fill='none' stroke='%23ff6a1a' stroke-width='1.6' opacity='.85'><path d='M0 40 L40 52 L60 30 L100 60 L130 48'/><path d='M270 120 L230 134 L214 118 L180 150'/><path d='M60 230 L80 196 L72 170 L100 150'/><path d='M150 0 L160 26 L144 50'/></g></svg>") center/cover;filter:drop-shadow(0 0 3px #ff6a1a);animation:lava 3s infinite;opacity:.55}
.L3 .tablet>*{position:relative}
.L3 .btn{background:#140a06;color:#ffb04a;box-shadow:0 0 0 2px #ff6a1a,0 6px 0 #3a1406,0 0 24px rgba(255,90,20,.5);text-shadow:0 0 8px #ff6a1a}


.card{width:300px;cursor:default}
.card:hover{transform:none}
.phone{height:640px}
.L1 .tablet{transform:none}
.card:hover .tablet{transform:none}
.cracks{z-index:1}
.tabs{position:absolute;left:0;right:0;bottom:0;height:64px;z-index:9;display:flex;justify-content:space-around;align-items:center;background:linear-gradient(#141010,#070505);border-top:1px solid rgba(255,120,40,.35);box-shadow:0 -6px 20px rgba(255,90,20,.18)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:Cinzel;font-weight:600;font-size:9.5px;color:#8f7a5e}
.tab svg{width:21px;height:21px}
.tab.on{color:#ffcf73}.tab.on svg{color:#ffb04a;filter:drop-shadow(0 0 6px #ff6a1a)}
.hdr{position:absolute;left:16px;right:16px;top:20px;z-index:6}
.hdr h2{font-family:'Cinzel Decorative';font-weight:900;font-size:26px;line-height:1}
.hdr p{font-size:12.5px;color:#b9a382;margin-top:6px}
.slab{position:absolute;left:14px;right:14px;z-index:5;border-radius:16px;padding:12px 14px;background:linear-gradient(160deg,rgba(28,24,22,.96),rgba(8,7,6,.98));border:1px solid rgba(255,140,50,.45);box-shadow:0 0 0 1px #000,0 0 24px rgba(255,100,20,.3),0 16px 30px rgba(0,0,0,.8)}
.lbl{font-family:Cinzel;font-weight:600;font-size:10.5px;letter-spacing:1px;color:#c8a35a}
.row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:13px;color:#f1e3c8;font-weight:700}
.row+.row{border-top:1px solid rgba(240,196,106,.16)}
.row small{display:block;font-weight:500;color:#b9a382;font-size:11px;margin-top:2px}
.val{font-family:Cinzel;font-weight:800;color:#ffcf73}
.tog{width:40px;height:22px;border-radius:11px;background:#2a1a10;position:relative;border:1px solid #6b4a1a}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#6b5a48}
.tog.on{background:linear-gradient(90deg,#d9461a,#ff9a3c);border-color:#ff9a3c;box-shadow:0 0 10px rgba(255,110,30,.5)}
.tog.on::after{left:20px;background:#fff0c8}
.sc{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center}
.tm{font-size:12px;font-weight:800;color:#f1e3c8;display:flex;flex-direction:column;align-items:center;gap:5px}
.flag{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px #2a1a10,0 0 10px rgba(255,120,40,.3)}
.score{font-family:'Cinzel Decorative';font-weight:900;font-size:30px}
.min{display:block;font-size:11px;font-weight:800;color:#ff9a3c;margin-top:2px}
.cond{margin-top:9px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,90,20,.08);border:1px solid rgba(255,120,40,.2);font-size:12px;font-weight:700;color:#f1e3c8}
.cond small{display:block;font-weight:500;color:#b9a382;font-size:10.5px}
.okc{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;background:radial-gradient(#ffd27a,#ff7a1a);color:#2a0c02;font-size:12px;font-weight:900;box-shadow:0 0 10px #ff6a1a}
.wait{width:20px;height:20px;border-radius:50%;flex:none;border:2.5px solid #ffb04a;border-right-color:transparent;animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.big8{position:absolute;left:18px;top:62px;z-index:5;font-family:'Cinzel Decorative';font-weight:900;font-size:120px;line-height:.85;background:linear-gradient(180deg,#fff1c2,#ff9a3c 55%,#c8461a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(255,100,20,.5))}
.herd{position:absolute;left:14px;right:14px;top:196px;z-index:5;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.herd svg{width:100%;height:34px;filter:drop-shadow(0 0 5px rgba(255,100,20,.6))}
.herd .nx{border:1.5px dashed rgba(255,160,80,.5);border-radius:10px;height:34px;display:grid;place-items:center;font-family:Cinzel;font-size:11px;color:#ffcf73}
.me{align-self:flex-end;max-width:78%;padding:9px 12px;border-radius:16px 16px 4px 16px;background:linear-gradient(180deg,#ff9a3c,#d9461a);color:#2a0c02;font-size:13px;font-weight:800;box-shadow:0 0 14px rgba(255,100,20,.4)}
.him{align-self:flex-start;max-width:88%;padding:10px 12px;border-radius:16px 16px 16px 4px;font-size:13px;line-height:1.5;color:#f1e3c8;background:linear-gradient(160deg,rgba(28,24,22,.96),rgba(8,7,6,.98));border:1px solid rgba(255,140,50,.4)}
.msgs{position:absolute;left:12px;right:12px;top:88px;bottom:164px;z-index:5;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.chips{position:absolute;left:12px;right:12px;bottom:122px;z-index:5;display:flex;gap:6px;overflow:hidden}
.chips span{flex:none;padding:7px 10px;border-radius:14px;font-size:11.5px;font-weight:800;color:#ffcf73;border:1px solid #7a5420;background:#120b06}
.ask{position:absolute;left:12px;right:12px;bottom:76px;z-index:5;display:flex;gap:8px}
.ask div{flex:1;height:40px;border-radius:20px;background:#0c0806;border:1px solid rgba(255,120,40,.35);display:flex;align-items:center;padding:0 14px;font-size:12.5px;color:#8f7a5e}
.ask b{width:40px;height:40px;border-radius:50%;background:radial-gradient(#ffd27a,#ff6a1a);box-shadow:0 0 12px #ff6a1a}
.ava{width:44px;height:44px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 70%,#ff7a2a,#2a0c04);box-shadow:0 0 0 2px #7a5420,0 0 14px rgba(255,100,20,.5)}
.bar2{height:6px;border-radius:3px;background:#1d140e;margin-top:6px;overflow:hidden}.bar2 i{display:block;height:100%;background:linear-gradient(90deg,#d9461a,#ffcf73);box-shadow:0 0 8px #ff6a1a}
.chipf{display:inline-block;padding:3px 8px;border-radius:8px;font-size:11px;font-weight:800;margin:2px 3px 0 0}
.w{background:rgba(255,140,40,.18);color:#ffcf73}.l{background:rgba(120,120,120,.18);color:#b9a382}
.wa{position:absolute;left:14px;right:14px;bottom:76px;height:44px;border-radius:12px;z-index:6;display:grid;place-items:center;font-weight:800;font-size:14px;color:#06341a;background:linear-gradient(#3fe07f,#1fb35a);box-shadow:0 5px 0 #0d6b33}
.acts{position:absolute;left:14px;right:14px;top:520px;z-index:6;display:flex;gap:8px}
.acts div{height:44px;border-radius:12px;display:grid;place-items:center;font-family:Cinzel;font-weight:800;font-size:13px}
.acts .a1{flex:1.5;background:linear-gradient(180deg,#ff9a3c,#d9461a);color:#2a0c02;box-shadow:0 5px 0 #7a2408,0 0 20px rgba(255,110,30,.45)}
.acts .a2{flex:1;color:#ffcf73;border:1px solid #7a5420;background:#120b06}