:root {
  /* Paletă & UI */
  --bg1:#0f2027; --bg2:#203a43; --bg3:#2c5364;
  --text:#ffffff; --muted:rgba(255,255,255,.72); --line:rgba(255,255,255,.18);
  --focus:#22d3ee; --accent:#1ec5d8; --accent-2:#67e8f9; --danger:#ef4444;
  --card-glass:rgba(255,255,255,.05);
  --card-grad1:rgba(15,32,39,.85); --card-grad2:rgba(32,58,67,.85); --card-grad3:rgba(44,83,100,.85);
  --radius:14px;

  /* Tile generator = 42px; afișare default păstrează 42px (claritate maximă) */
  --spriteH:42px;
}

*{box-sizing:border-box}
html,body{height:100%}
.hidden{display:none!important}

body{
  margin:0;color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(135deg,var(--bg1),var(--bg2) 50%,var(--bg3));
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Helvetica Neue",sans-serif;
  -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:center;min-height:100svh;padding:24px;
  overflow-x:hidden;
}

.wrap{width:100%;max-width:328px}

.card{
  border-radius:var(--radius); padding:22px 18px; border:1px solid var(--line);
  backdrop-filter:blur(10px); box-shadow:0 8px 26px rgba(0,0,0,.32);
  background:
    linear-gradient(135deg,var(--card-grad1),var(--card-grad2) 50%,var(--card-grad3)),
    linear-gradient(0deg,var(--card-glass),var(--card-glass));
}

.icon-wrap{display:flex;justify-content:center;margin-bottom:10px}
.icon-wrap.small{margin:16px 0 8px}

h1{margin:0 0 10px;font-size:clamp(20px,2.2vw,26px);line-height:1.2;font-weight:700;text-align:center}
.sub{margin:0 0 14px;color:var(--muted);font-size:13px;text-align:center}

form{display:grid;gap:10px;margin-top:8px}
label{font-size:12px;margin-bottom:6px;display:block}
.field{display:flex;flex-direction:column}

input{
  width:100%;height:42px;border-radius:10px;border:1px solid var(--line);
  background:rgba(0,0,0,.24);color:var(--text);padding:0 12px;font-size:14px;outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
input::placeholder{color:rgba(255,255,255,.6)}
input:focus{border-color:var(--focus);box-shadow:0 0 0 2px rgba(34,211,238,.2);background:rgba(0,0,0,.18)}

.btn{
  height:40px;border:0;border-radius:10px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;font-size:14px;letter-spacing:.2px;text-decoration:none;
  transition:transform .06s,background .15s,box-shadow .15s;
}
.btn-primary{background:var(--accent);color:#05131a;box-shadow:0 6px 20px rgba(30,197,216,.22)}
.btn-primary:hover{background:var(--accent-2)}
.btn:active{transform:translateY(1px)}

.error{display:none;margin:6px 0 0;color:var(--danger);font-size:12px;text-align:center}
.error.show{display:block}
.helper{margin-top:10px;font-size:11.5px;color:var(--muted);text-align:center;line-height:1.5}

/* Telegram card */
.tg-card{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;
  padding:12px;border-radius:12px;background:rgb(239 0 58 / 50%);
  border:1px solid var(--line);text-decoration:none;color:#fff;margin-bottom:12px;
}
.tg-left{display:flex;flex-direction:column}
.tg-label{color:#00ff12;font-size:11px;margin-bottom:2px;letter-spacing:.3px;text-transform:uppercase}
.tg-name{font-weight:700;font-size:15px}
.tg-sep{height:1px;background:rgba(255,255,255,.12);margin:8px 0 6px}
.tg-btn{text-align:center;letter-spacing:.3px;font-weight:800;color:#f4efef;font-size:12px}
.tg-card:hover .tg-btn{text-decoration:underline}
.tg-avatar{width:52px;height:52px;border-radius:10px;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.1) inset}

/* OTP */
#otpBlock input{
  background:rgba(0,0,0,.24);border:1px solid var(--line);border-radius:10px;height:42px;font-size:14px;padding:0 12px
}

/* Carusel sprite: clar, cu gap în sprite, direcție L→R */
.thumbs-sprite{
  margin-top:10px;height:var(--spriteH);
  border-top:1px solid rgba(255,255,255,.14);padding-top:8px;

  background-image:image-set(
    url("/assets/img/carousel/sprite.webp") type("image/webp"),
    url("/assets/img/carousel/sprite.png") type("image/png")
  );
  background-repeat:repeat-x;
  background-size:auto var(--spriteH);      /* fără scalare verticală => clar */
  animation:thumbs-bg-rtl 34s linear infinite; /* X pozitiv => L→R vizual */
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  will-change:background-position;
  border-radius:8px; overflow:hidden;      /* colțuri pe bandă */
}
@keyframes thumbs-bg-rtl{
  from{ background-position-x:0 }
  to  { background-position-x:50% }
}

/* Desktop: fă thumbs ~65% din mărimea curentă (42px → ~27px) */
@media (min-width:769px){
  :root{ --spriteH:27px; }
}

/* A11y */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Mobile */
@media (max-width:480px){
  .wrap{max-width:300px}
  body{align-items:flex-start;padding-top:16px;overflow-y:hidden}
  .card{padding:14px 12px;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.25);backdrop-filter:none}
  h1{font-size:20px;margin-bottom:8px}
  .sub{font-size:12.5px;margin-bottom:10px}
  form{gap:8px;margin-top:6px}
  label{font-size:12px;margin-bottom:4px}
  input{height:40px;font-size:16px;padding:0 10px} /* anti-zoom iOS */
  .btn{height:38px;font-size:13.5px;border-radius:10px}
  .tg-card{padding:10px;gap:10px;border-radius:10px}
  .tg-name{font-size:14px}
  .tg-avatar{width:42px;height:42px}

  /* sprite mai mic pe mobil */
  :root{ --spriteH:24px; }
  .thumbs-sprite{ animation-duration:36s; }
}

/* Very narrow phones */
@media (max-width:360px){
  .wrap{max-width:280px}
  .card{padding:12px 10px}
  input{height:38px;font-size:15px}
  .btn{height:36px;font-size:13px}
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .thumbs-sprite{animation:none}
}