:root{
  --bg-0:#05060f;
  --bg-1:#0a0c1c;
  --card:#0f1226;
  --card-2:#0b0e1e;
  --glass:rgba(255,255,255,.045);
  --stroke:rgba(150,160,255,.13);
  --stroke-2:rgba(160,170,255,.24);
  --txt:#eef0ff;
  --txt-dim:#9aa0c7;
  --txt-mut:#646a93;
  /* primary accent — indigo/violet with a cyan pop (premium, not green) */
  --acc:#8b78ff;
  --acc-2:#6a4bff;
  --cyan:#37d0ff;
  --acc-ink:#0b0620;
  --gold:#ffd166;
  --gold-2:#f2b93c;
  --danger:#ff6b7d;
  --radius:24px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --shadow:0 30px 70px -34px rgba(0,0,0,.9);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,system-ui,sans-serif;
  color:var(--txt);background:var(--bg-0);min-height:100%;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;position:relative;
}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Ambient ---- */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;filter:blur(64px)}
.aurora span{position:absolute;border-radius:50%;opacity:.55;mix-blend-mode:screen}
.aurora span:nth-child(1){width:62vw;height:62vw;left:-12vw;top:-22vw;background:radial-gradient(circle,#6a4bff,transparent 66%);animation:float1 18s ease-in-out infinite}
.aurora span:nth-child(2){width:56vw;height:56vw;right:-16vw;top:-6vw;background:radial-gradient(circle,#2f7bff,transparent 66%);animation:float2 22s ease-in-out infinite}
.aurora span:nth-child(3){width:52vw;height:52vw;left:18vw;bottom:-26vw;background:radial-gradient(circle,#c04bff,transparent 66%);opacity:.32;animation:float1 26s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(6%,5%)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-6%,4%)}}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

.app{position:relative;z-index:1;max-width:540px;margin:0 auto;
  padding:calc(14px + var(--safe-t)) 16px calc(26px + var(--safe-b));
  display:flex;flex-direction:column;gap:14px}

/* ---- Topbar ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:11px}
.logo-mark{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--acc),var(--acc-2));
  box-shadow:0 10px 26px -10px rgba(106,75,255,.85),inset 0 1px 0 rgba(255,255,255,.35)}
.logo-txt b{display:block;font-size:16px;font-weight:800;letter-spacing:.2px}
.logo-txt small{display:block;font-size:11px;color:var(--txt-dim);margin-top:1px}

.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:8px;color:var(--txt);cursor:pointer;
  background:var(--glass);border:1px solid var(--stroke);padding:8px 11px;border-radius:12px;font-size:13px;font-weight:700;backdrop-filter:blur(8px)}
.lang-btn .caret{color:var(--txt-dim)}
.fl{display:inline-flex;width:22px;height:15px;border-radius:3px;overflow:hidden;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.16);line-height:0}
.fl svg{width:100%;height:100%;display:block}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);width:186px;z-index:20;
  background:rgba(15,18,38,.97);border:1px solid var(--stroke-2);border-radius:14px;padding:6px;
  box-shadow:var(--shadow);backdrop-filter:blur(14px);display:none;overflow:hidden}
.lang-menu.open{display:block;animation:pop .18s ease both}
.lang-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;
  background:transparent;color:var(--txt);padding:10px 10px;border-radius:9px;cursor:pointer;font-size:14px;font-weight:600}
.lang-menu button:hover,.lang-menu button.active{background:rgba(139,120,255,.16)}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}

/* ---- Stat strip ---- */
.stat-strip{display:flex;gap:8px}
.chip{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--glass);border:1px solid var(--stroke);border-radius:12px;padding:9px 6px;
  font-size:11.5px;color:var(--txt-dim);backdrop-filter:blur(8px)}
.chip svg{color:var(--acc)}
.chip b{color:var(--txt);font-weight:800}

/* ---- Ticket / 3D ---- */
.stage{perspective:1600px}
.ticket{position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.7,.03,.2,1)}
.ticket.flip{transform:rotateY(180deg)}
.face{border-radius:var(--radius);padding:18px;backface-visibility:hidden;
  background:linear-gradient(168deg,var(--card),var(--card-2));
  border:1px solid var(--stroke);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;overflow:hidden}
.face.back{position:absolute;inset:0;transform:rotateY(180deg);display:flex;flex-direction:column;gap:12px}
.edge{position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--acc),var(--cyan),transparent);
  background-size:200% 100%;animation:slide 3s linear infinite}
.edge.gold{background:linear-gradient(90deg,transparent,var(--gold),transparent);background-size:200% 100%}
@keyframes slide{0%{background-position:200% 0}100%{background-position:-200% 0}}

.card-head{display:flex;align-items:center;gap:10px;margin:8px 2px 12px}
.card-head h2,.res-title h2{margin:0;font-size:15.5px;font-weight:800;letter-spacing:.2px}
.ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#cdd3ff;
  background:linear-gradient(160deg,rgba(139,120,255,.24),rgba(55,208,255,.14));border:1px solid var(--stroke-2)}
.ico.gold{color:#ffe6a3;background:linear-gradient(160deg,rgba(255,209,102,.26),rgba(242,185,60,.12))}

/* ---- Drop ---- */
.drop{position:relative;border-radius:18px;border:1.5px dashed var(--stroke-2);cursor:pointer;
  min-height:210px;display:grid;place-items:center;text-align:center;overflow:hidden;transition:.25s;
  background:radial-gradient(120% 120% at 50% 0%,rgba(139,120,255,.08),transparent 60%),rgba(255,255,255,.015)}
.drop:hover{border-color:var(--acc)}
.drop.drag{border-color:var(--cyan);background:rgba(55,208,255,.08)}
.placeholder{display:flex;flex-direction:column;align-items:center;gap:11px;padding:24px;color:var(--txt-dim)}
.up-ico{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;color:#dfe3ff;
  background:linear-gradient(160deg,rgba(139,120,255,.26),rgba(55,208,255,.16));border:1px solid var(--stroke-2);
  box-shadow:inset 0 0 22px rgba(139,120,255,.18)}
.placeholder b{color:var(--txt);font-size:15px;font-weight:700}
.placeholder span{font-size:12px}
.preview{position:absolute;inset:0;display:none}
.preview img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(5,6,15,.9))}
.pv-badge{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:#e7e9ff;background:rgba(15,10,40,.72);border:1px solid rgba(139,120,255,.45);padding:6px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.pv-badge svg{color:var(--acc)}
.pv-change{position:absolute;right:12px;top:12px;font-size:12px;color:#dfe3ff;cursor:pointer;
  background:rgba(12,14,30,.8);border:1px solid var(--stroke-2);padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px)}
.has-img .placeholder{display:none}.has-img .preview{display:block}

/* scanning */
.scanbeam{position:absolute;left:0;right:0;height:130px;top:-130px;pointer-events:none;display:none;z-index:4;
  background:linear-gradient(180deg,transparent,rgba(55,208,255,.25),rgba(139,120,255,.95),rgba(55,208,255,.25),transparent);
  box-shadow:0 0 26px 8px rgba(120,120,255,.45);mix-blend-mode:screen}
.scan-grid{position:absolute;inset:0;pointer-events:none;display:none;z-index:3;opacity:.22;
  background-image:linear-gradient(rgba(139,120,255,.42) 1px,transparent 1px),linear-gradient(90deg,rgba(139,120,255,.42) 1px,transparent 1px);
  background-size:28px 28px}
.scanning .scanbeam{display:block;animation:scan 1.15s cubic-bezier(.6,0,.4,1) infinite}
.scanning .scan-grid{display:block;animation:grid 6s linear infinite}
.scanning .drop{border-color:var(--acc)}
@keyframes scan{0%{top:-130px}100%{top:100%}}
@keyframes grid{to{background-position:28px 28px}}

/* ---- Buttons ---- */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:none;cursor:pointer;
  font-weight:800;font-size:15.5px;padding:16px;border-radius:15px;letter-spacing:.2px;transition:.16s;position:relative;overflow:hidden;margin-top:14px}
.btn:active{transform:translateY(1px) scale(.995)}
.btn.primary{color:#fff;background:linear-gradient(120deg,var(--acc-2),var(--acc) 55%,var(--cyan));
  box-shadow:0 16px 36px -14px rgba(106,75,255,.8),inset 0 1px 0 rgba(255,255,255,.28)}
.btn.primary::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-60%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%,58%{left:-60%}100%{left:130%}}
.btn:disabled{opacity:.42;filter:grayscale(.3);cursor:not-allowed}
.btn:disabled::after{display:none}
.btn .btn-ico{display:grid;place-items:center}
.spin{width:18px;height:18px;border-radius:50%;border:2.6px solid rgba(255,255,255,.3);border-top-color:#fff;animation:rot .7s linear infinite;display:none}
.btn.loading .spin{display:block}.btn.loading .btn-ico{display:none}
@keyframes rot{to{transform:rotate(360deg)}}

.secure-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;
  font-size:11px;color:var(--txt-mut);text-align:center}
.secure-note svg{color:var(--acc);opacity:.85;flex-shrink:0}

/* ---- Result ---- */
.res-head{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 2px}
.res-title{display:flex;align-items:center;gap:10px}
.verdict{font-size:10.5px;font-weight:800;letter-spacing:.7px;padding:6px 11px;border-radius:999px;
  color:#3a2a04;background:linear-gradient(90deg,#ffe6a3,var(--gold))}
.match{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--stroke);border-radius:15px}
.team{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.crest{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#cdd3ff;
  background:linear-gradient(160deg,rgba(55,208,255,.24),rgba(139,120,255,.16));border:1px solid var(--stroke-2)}
.tn{font-size:13px;font-weight:700;text-align:center;line-height:1.15}
.vs{font-size:12px;font-weight:800;color:var(--txt-mut);letter-spacing:1px}

.pick-row{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;
  background:linear-gradient(160deg,rgba(139,120,255,.15),rgba(55,208,255,.04));border:1px solid rgba(139,120,255,.32)}
.gauge{position:relative;flex-shrink:0;width:104px;height:104px}
.gauge svg{transform:rotate(-90deg)}
.g-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:9}
.g-fill{fill:none;stroke:var(--cyan);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 0 6px rgba(55,208,255,.75))}
.gauge-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.gauge-txt b{font-size:24px;font-weight:800;color:#fff}
.gauge-txt small{font-size:10px;color:var(--txt-dim)}
.pick{flex:1;min-width:0}
.pick .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:#b7abff;font-weight:700}
.pick .v{font-size:19px;font-weight:800;margin-top:3px;line-height:1.15}
.pick .market{font-size:12px;color:var(--txt-dim);margin-top:4px}

.metrics{display:flex;gap:8px}
.m{flex:1;text-align:center;padding:11px 6px;border-radius:13px;background:rgba(255,255,255,.03);border:1px solid var(--stroke)}
.ml{display:block;font-size:10px;color:var(--txt-mut);text-transform:uppercase;letter-spacing:.5px}
.mv{display:block;font-size:15px;font-weight:800;margin-top:3px}

.why{padding:13px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--stroke)}
.why-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--txt-dim);font-weight:700;margin-bottom:5px}
.why p{margin:0;font-size:13px;line-height:1.5;color:#d6dbf5}

/* ---- Attempts ---- */
.attempts{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--glass);border:1px solid var(--stroke);border-radius:15px;padding:12px 15px;backdrop-filter:blur(8px)}
.att-left{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt-dim)}
.att-left svg{color:var(--acc)}
.att-left b{color:var(--txt);font-weight:800;margin-left:2px}
.lvl{font-size:11px;font-weight:800;padding:5px 11px;border-radius:999px;color:#3a2a04;
  background:linear-gradient(90deg,#ffe08a,var(--gold-2));box-shadow:0 6px 16px -8px rgba(255,209,102,.7)}

/* ---- Lock ---- */
.lock{display:none;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px;border-radius:18px;
  background:linear-gradient(160deg,rgba(255,107,125,.12),rgba(255,107,125,.03));border:1px solid rgba(255,107,125,.3)}
.lock.show{display:flex;animation:up .5s ease both}
.lock .lk{color:#ff9aa7}
.lock h3{margin:2px 0 0;font-size:16px}
.lock p{margin:0;font-size:13px;color:var(--txt-dim);line-height:1.45;max-width:320px}
.lock .btn{margin-top:8px}

.foot{text-align:center;font-size:11px;color:var(--txt-mut);letter-spacing:.3px}
.foot b{color:var(--txt-dim)}

.toast{position:fixed;left:50%;bottom:calc(22px + var(--safe-b));transform:translateX(-50%) translateY(18px);
  background:rgba(15,18,38,.97);border:1px solid var(--stroke-2);color:var(--txt);padding:12px 18px;border-radius:12px;
  font-size:13px;z-index:60;opacity:0;pointer-events:none;transition:.34s;backdrop-filter:blur(8px);max-width:88%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal{animation:up .5s ease both}