@font-face{font-family:"Bricolage";src:url(fonturi/BricolageGrotesque-Bold.woff2) format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"Outfit";src:url(fonturi/Outfit-Regular.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Outfit";src:url(fonturi/Outfit-Bold.woff2) format("woff2");font-weight:600 800;font-display:swap}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

:root{
  --bg0:#0d1126; --bg1:#171d3b; --glass:rgba(255,255,255,.07); --glass2:rgba(255,255,255,.12); --line:rgba(255,255,255,.16);
  --txt:#f6efe2; --mut:#aab0cb; --amber:#ffc44d; --amber2:#ff9d2e; --accent:#46628F;
  --display:"Bricolage","Outfit",system-ui,sans-serif; --body:"Outfit","Segoe UI",system-ui,sans-serif;
  --rx:0deg; --ry:0deg; --mx:50%; --my:30%;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{background:var(--bg0);color:var(--txt);font:400 17px/1.5 var(--body);-webkit-text-size-adjust:100%;overscroll-behavior:none;overflow-x:hidden}
/* fundal viu */
body:before,body:after{content:"";position:fixed;z-index:-2;width:70vmax;height:70vmax;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 26s ease-in-out infinite alternate}
body:before{background:radial-gradient(circle,#46628F,transparent 65%);left:-25vmax;top:-20vmax}
body:after{background:radial-gradient(circle,#a2492b88,transparent 65%);right:-30vmax;bottom:-25vmax;animation-duration:32s}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.15)}}
#grain{position:fixed;inset:0;z-index:-1;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}

h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
h1{font-size:clamp(34px,10vw,44px)} h2{font-size:28px}
p{margin:0;color:var(--mut)}
#app{max-width:480px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column;padding:max(18px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom))}
.screen{flex:1;display:flex;flex-direction:column;gap:16px;animation:rise .45s cubic-bezier(.2,.9,.25,1) both}
.screen.l{animation-name:fromR}.screen.r{animation-name:fromL}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fromR{from{opacity:0;transform:translateX(46px) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes fromL{from{opacity:0;transform:translateX(-46px) rotate(-2deg)}to{opacity:1;transform:none}}
.sp{flex:1}
.small{font-size:13px;color:var(--mut)}
.err{color:#ffb4a0;font-weight:600;min-height:1.4em;text-align:center}

/* butoane */
.btn{position:relative;display:block;width:100%;border:0;cursor:pointer;font:700 18px/1 var(--body);color:#2a1c00;border-radius:20px;padding:19px;text-align:center;
  background:linear-gradient(135deg,var(--amber),var(--amber2));box-shadow:0 10px 28px -8px rgba(255,157,46,.7),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .15s,filter .15s,opacity .2s;touch-action:manipulation}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.35;box-shadow:none;cursor:default}
.btn.ghost{background:var(--glass);color:var(--txt);border:1px solid var(--line);box-shadow:none;padding:15px;font-size:16px;font-weight:600;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.hero{width:96px;height:96px;display:grid;place-items:center;border-radius:30px;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:1px solid var(--line);box-shadow:0 18px 40px -16px #000a;backdrop-filter:blur(8px);animation:float 4s ease-in-out infinite}
.hero svg,.hero .ico{width:64px;height:64px}
@keyframes float{50%{transform:translateY(-6px) rotate(-2deg)}}

/* PIN */
.pin{display:flex;gap:10px;justify-content:center;margin:8px 0;position:relative}
.pin i{width:60px;height:72px;border-radius:20px;background:var(--glass);border:1px solid var(--line);display:grid;place-items:center;font:800 32px var(--display);font-style:normal;transition:.2s;backdrop-filter:blur(8px)}
.pin i.on{border-color:var(--amber);box-shadow:0 0 0 4px rgba(255,196,77,.22)}
.pin input{position:absolute;inset:0;opacity:0;width:100%;height:100%;font-size:16px}

/* glass */
.pre{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:14px 16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pre span{font-size:13px;color:var(--mut)} .pre b{display:block;font:700 17px var(--body);color:var(--txt)}
.pre em{font-style:normal;color:var(--amber);font-weight:800;font-size:11px;letter-spacing:.08em;white-space:nowrap;background:rgba(255,196,77,.12);padding:4px 9px;border-radius:99px}
select,.text{width:100%;background:var(--glass);color:var(--txt);border:1px solid var(--line);border-radius:16px;padding:14px;font:inherit;font-size:16px;backdrop-filter:blur(8px)}
select option{color:#111}
.text{min-height:130px;resize:vertical}
.text:focus,select:focus{outline:2px solid var(--amber);outline-offset:1px}
label.f{display:block;font-size:13px;color:var(--mut);margin:2px 0 6px}

/* roluri */
.roles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.role{position:relative;border-radius:24px;padding:16px 10px 14px;text-align:center;font:700 15px/1.2 var(--body);cursor:pointer;color:var(--txt);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);transition:transform .2s,border-color .2s,background .2s}
.role svg{width:62px;height:62px;display:block;margin:0 auto 8px;filter:drop-shadow(0 8px 10px #0006)}
.role.on{transform:translateY(-3px) scale(1.03);border-color:var(--amber);background:linear-gradient(160deg,rgba(255,196,77,.22),rgba(255,255,255,.06));box-shadow:0 14px 30px -14px var(--amber)}
.role:active{transform:scale(.96)}

/* progres */
.prog{display:flex;gap:5px}
.prog i{flex:1;height:6px;border-radius:9px;background:rgba(255,255,255,.16);overflow:hidden}
.prog i.d{background:linear-gradient(90deg,var(--amber),var(--amber2));box-shadow:0 0 10px rgba(255,196,77,.6)}

/* cartea holografica */
.stage{perspective:900px}
.tcg{--ang:0deg;position:relative;border-radius:30px;padding:3px;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform;
  background:conic-gradient(from var(--ang),#ffd36b,#ff7ab6,#7aa7ff,#6fe3c1,#ffd36b);animation:spin 6s linear infinite;box-shadow:0 30px 60px -24px #000c,0 0 40px -10px rgba(255,196,77,.35)}
@keyframes spin{to{--ang:360deg}}
.tcg .in{position:relative;border-radius:27px;background:linear-gradient(180deg,#1b2145,#121733);padding:14px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.tcg .in:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;mix-blend-mode:color-dodge;opacity:.35;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.9),transparent 45%),linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 48%,transparent 62%);background-size:100% 100%,250% 250%}
.top{display:flex;justify-content:space-between;align-items:center}
.top .rl{display:flex;align-items:center;gap:8px;font:700 13px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.top .rl svg{width:22px;height:22px}
.top .cnt{font:800 13px var(--display);background:rgba(255,255,255,.1);border:1px solid var(--line);padding:4px 12px;border-radius:99px}
.art{height:170px;border-radius:20px;position:relative;overflow:hidden;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18)}
.art:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 55%)}
.art .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.28) 1.4px,transparent 1.6px);background-size:18px 18px;opacity:.5;mask-image:radial-gradient(circle,#000 25%,transparent 75%);-webkit-mask-image:radial-gradient(circle,#000 25%,transparent 75%)}
.art .ico{width:118px;height:118px;position:relative;z-index:2;filter:drop-shadow(0 16px 14px rgba(0,0,0,.45));animation:float 3.6s ease-in-out infinite;transform:translateZ(40px)}
.art b{position:absolute;border-radius:50%;background:rgba(255,255,255,.16)}
.art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3}
.q{font:800 23px/1.15 var(--display);letter-spacing:-.02em;margin:0;color:#fff}
.hint{font-size:13px;color:var(--mut)}
.opts{display:grid;gap:9px}
.chip{display:flex;gap:12px;align-items:center;min-height:58px;padding:12px 14px;border-radius:18px;text-align:left;cursor:pointer;color:var(--txt);font:600 16px/1.25 var(--body);
  background:var(--glass);border:1px solid var(--line);transition:transform .18s cubic-bezier(.3,1.6,.5,1),background .2s,border-color .2s,box-shadow .2s;touch-action:manipulation}
.chip:active{transform:scale(.97)}
.chip .box{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.35);display:grid;place-items:center;font-size:15px;font-weight:800;color:transparent;transition:.2s}
.chip.multi .box{border-radius:8px}
.chip.on{background:linear-gradient(135deg,rgba(255,196,77,.95),rgba(255,157,46,.95));color:#2a1c00;border-color:transparent;box-shadow:0 12px 26px -12px var(--amber2);transform:scale(1.015)}
.chip.on .box{background:#2a1c00;border-color:#2a1c00;color:var(--amber);animation:pop .3s cubic-bezier(.3,1.8,.5,1)}
@keyframes pop{from{transform:scale(.3)}}
.other{min-height:0!important}
.nav{display:flex;gap:10px;position:sticky;bottom:0;padding:26px 0 6px;margin-top:-10px;background:linear-gradient(to top,var(--bg0) 58%,rgba(13,17,38,0));z-index:5}
.nav .btn.ghost{width:auto;flex:none;padding:19px 24px}
.swipe{font-size:12px;text-align:center;color:var(--mut);letter-spacing:.02em}

/* final */
.result{position:relative;border-radius:32px;padding:3px;background:conic-gradient(from var(--ang),#ffd36b,#ff7ab6,#7aa7ff,#6fe3c1,#ffd36b);animation:spin 6s linear infinite;box-shadow:0 30px 60px -24px #000c}
.result .in{border-radius:29px;background:linear-gradient(160deg,#1f2b57,#16385a 60%,#14362e);padding:26px 20px 20px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.result .hero{width:120px;height:120px;border-radius:36px}.result .hero .ico{width:84px;height:84px}
.result h2{font-size:28px}
.tr{display:flex;justify-content:space-between;font:600 15px var(--body);width:100%;text-align:left;margin-top:8px}
.bar{height:12px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden;width:100%;margin-top:5px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),#ff7ab6);width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 14px rgba(255,196,77,.7)}
.foot{font-size:12px;color:var(--mut);text-align:center}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media (hover:hover){.chip:hover{border-color:rgba(255,255,255,.4)}.btn:hover:not(:disabled){filter:brightness(1.06)}}