/* ===== ලග්න පලාපල • Styles ===== */

:root{
    --bg:#0a0a1f;
    --bg2:#13132e;
    --panel:rgba(22,22,48,0.72);
    --panel-line:rgba(212,175,55,0.22);
    --gold:#e8c66b;
    --gold-soft:#d4af37;
    --gold-dim:rgba(232,198,107,0.55);
    --star:#fef9e7;
    --text:#ece9f5;
    --text-dim:#9d9ac0;
    --accent:#7b5cff;
    --glow:rgba(123,92,255,0.35);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    font-family:'Abhaya Libre',serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
  }
  /* night sky background */
  .sky{
    position:fixed;inset:0;z-index:-2;
    background:
      radial-gradient(ellipse at 20% 10%, rgba(123,92,255,0.18), transparent 45%),
      radial-gradient(ellipse at 85% 80%, rgba(232,198,107,0.10), transparent 40%),
      linear-gradient(160deg,#0a0a1f 0%,#13132e 55%,#080816 100%);
  }
  .stars,.stars2{position:fixed;inset:0;z-index:-1;pointer-events:none}
  .stars{background-image:
    radial-gradient(1px 1px at 10% 20%,#fff,transparent),
    radial-gradient(1px 1px at 30% 70%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 55% 30%,#fef9e7,transparent),
    radial-gradient(1px 1px at 70% 60%,#fff,transparent),
    radial-gradient(1px 1px at 85% 15%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 45% 85%,#fef9e7,transparent),
    radial-gradient(1px 1px at 90% 45%,#fff,transparent),
    radial-gradient(1px 1px at 15% 50%,#fff,transparent);
    background-size:cover;
    animation:twinkle 4s ease-in-out infinite alternate;
  }
  .stars2{background-image:
    radial-gradient(1px 1px at 25% 35%,#fff,transparent),
    radial-gradient(1px 1px at 60% 80%,#fff,transparent),
    radial-gradient(1px 1px at 80% 25%,#fef9e7,transparent),
    radial-gradient(1px 1px at 40% 15%,#fff,transparent),
    radial-gradient(1px 1px at 5% 75%,#fff,transparent);
    background-size:cover;
    animation:twinkle 6s ease-in-out infinite alternate-reverse;
  }
  @keyframes twinkle{from{opacity:.4}to{opacity:1}}

  .wrap{
    max-width:540px;margin:0 auto;padding:32px 20px 60px;
    min-height:100vh;min-height:100svh;
    display:flex;flex-direction:column;justify-content:center;
  }

  header{text-align:center;margin-bottom:30px;animation:rise .9s ease both}
  .moon{
    width:64px;height:64px;margin:0 auto 14px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fff8e1,#e8c66b 60%,#b8923a);
    box-shadow:0 0 40px rgba(232,198,107,0.45),inset -8px -8px 16px rgba(120,90,30,0.5);
    position:relative;
  }
  h1{
    font-family:'Cinzel',serif;font-weight:600;letter-spacing:3px;
    font-size:15px;color:var(--gold);text-transform:uppercase;margin-bottom:4px;
  }
  .title-si{font-size:34px;font-weight:800;color:var(--star);line-height:1.2}
  .subtitle{color:var(--text-dim);font-size:16px;margin-top:8px}

  .card{
    background:var(--panel);
    border:1px solid var(--panel-line);
    border-radius:22px;
    padding:30px 26px;
    backdrop-filter:blur(14px);
    box-shadow:0 24px 60px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.04);
    animation:rise 1s ease both;
  }
  @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

  .step-label{
    font-family:'Cinzel',serif;font-size:12px;letter-spacing:2px;
    color:var(--gold-dim);text-transform:uppercase;margin-bottom:6px;
  }
  .step-title{font-size:22px;font-weight:700;color:var(--star);margin-bottom:22px}

  label{display:block;font-size:15px;color:var(--text-dim);margin:0 0 7px 2px}
  .field{margin-bottom:18px}
  input,select{
    width:100%;padding:14px 16px;font-family:'Abhaya Libre',serif;font-size:17px;
    background:rgba(8,8,24,0.6);color:var(--text);
    border:1px solid rgba(157,154,192,0.25);border-radius:13px;
    transition:.25s;outline:none;
  }
  input::placeholder{color:#5d5a82}
  input:focus,select:focus{
    border-color:var(--gold-soft);
    box-shadow:0 0 0 3px rgba(232,198,107,0.12);
    background:rgba(8,8,24,0.85);
  }
  select{appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23e8c66b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center;padding-right:42px;
  }

  .btn{
    width:100%;padding:15px;margin-top:8px;cursor:pointer;
    font-family:'Cinzel',serif;font-weight:600;font-size:15px;letter-spacing:1.5px;
    color:#1a1405;border:none;border-radius:13px;text-transform:uppercase;
    background:linear-gradient(135deg,#f2d585,#d4af37 60%,#b8923a);
    box-shadow:0 10px 30px rgba(212,175,55,0.30);
    transition:.25s;
  }
  .btn:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(212,175,55,0.45)}
  .btn:active{transform:translateY(0)}
  .btn-ghost{
    background:transparent;color:var(--text-dim);box-shadow:none;
    border:1px solid rgba(157,154,192,0.3);margin-top:14px;
  }
  .btn-ghost:hover{color:var(--gold);border-color:var(--gold-dim);transform:none;box-shadow:none}

  .hide{display:none}
  .err{color:#ff8b8b;font-size:14px;margin-top:-8px;margin-bottom:12px;min-height:18px}

  /* result */
  .res-head{text-align:center;margin-bottom:8px}
  .res-symbol{font-size:46px;margin-bottom:6px;filter:drop-shadow(0 0 14px var(--glow))}
  .res-lagna{font-size:30px;font-weight:800;color:var(--gold);line-height:1.2}
  .res-en{font-family:'Cinzel',serif;font-size:13px;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase}
  .res-meta{
    text-align:center;color:var(--text-dim);font-size:14px;margin:10px 0 22px;
    padding-bottom:18px;border-bottom:1px solid var(--panel-line);
  }
  .luck-row{display:flex;gap:10px;margin-bottom:22px}
  .luck{
    flex:1;text-align:center;background:rgba(8,8,24,0.5);
    border:1px solid var(--panel-line);border-radius:14px;padding:14px 8px;
  }
  .luck .k{font-size:12px;color:var(--gold-dim);letter-spacing:1px;margin-bottom:5px;font-family:'Cinzel',serif}
  .luck .v{font-size:17px;font-weight:700;color:var(--star)}
  .sec{margin-bottom:18px}
  .sec h3{
    font-size:16px;color:var(--gold);margin-bottom:6px;display:flex;align-items:center;gap:8px;
  }
  .sec h3::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
  .sec p{font-size:16px;line-height:1.7;color:var(--text)}
  .rating{display:flex;gap:4px;margin-top:2px}
  .star-s{color:#3a3658;font-size:18px}
  .star-s.on{color:var(--gold);text-shadow:0 0 8px var(--gold-dim)}

  /* tabs */
  .tabs{
    display:flex;gap:6px;background:rgba(8,8,24,0.5);
    border:1px solid var(--panel-line);border-radius:13px;padding:5px;margin-bottom:22px;
  }
  .tab{
    flex:1;text-align:center;padding:11px 8px;border-radius:9px;cursor:pointer;
    font-family:'Cinzel',serif;font-size:13px;letter-spacing:1px;color:var(--text-dim);
    transition:.25s;border:none;background:transparent;
  }
  .tab.active{
    background:linear-gradient(135deg,#f2d585,#d4af37 60%,#b8923a);
    color:#1a1405;font-weight:600;box-shadow:0 6px 18px rgba(212,175,55,0.30);
  }
  .week-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
  .day-row{
    display:flex;align-items:center;gap:12px;background:rgba(8,8,24,0.5);
    border:1px solid var(--panel-line);border-radius:13px;padding:13px 15px;
  }
  .day-name{font-family:'Cinzel',serif;font-size:12px;color:var(--gold-dim);
    width:42px;flex-shrink:0;letter-spacing:.5px}
  .day-si{font-size:15px;font-weight:700;color:var(--star);width:62px;flex-shrink:0}
  .day-txt{font-size:14px;color:var(--text-dim);line-height:1.5;flex:1}
  .day-rate{font-size:13px;color:var(--gold);flex-shrink:0}
  footer{text-align:center;margin-top:26px;color:#5d5a82;font-size:12.5px;line-height:1.6}
  .fade{animation:fadein .6s ease both}
  @keyframes fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* ===== OTP styles ===== */
.otp-info{
  text-align:center;color:var(--text-dim);font-size:16px;line-height:1.6;margin-bottom:22px;
}
.otp-info span{color:var(--gold);font-weight:700}
.otp-boxes{display:flex;gap:9px;justify-content:center;margin-bottom:16px}
.otp-digit{
  width:46px;height:56px;text-align:center;font-size:24px;font-weight:700;
  font-family:'Cinzel',serif;color:var(--star);
  background:rgba(8,8,24,0.6);border:1px solid rgba(157,154,192,0.25);
  border-radius:12px;outline:none;transition:.2s;padding:0;
}
.otp-digit:focus{
  border-color:var(--gold-soft);box-shadow:0 0 0 3px rgba(232,198,107,0.14);
  background:rgba(8,8,24,0.9);
}
.otp-digit.filled{border-color:var(--gold-dim)}
.demo-note{
  text-align:center;font-size:13px;color:var(--accent);margin-bottom:10px;min-height:18px;
}
.demo-note b{color:var(--gold);font-size:18px;letter-spacing:3px}
.otp-foot{
  display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:16px;
}
.link-btn{
  background:none;border:none;color:var(--text-dim);font-family:'Abhaya Libre',serif;
  font-size:14px;cursor:pointer;transition:.2s;
}
.link-btn:hover{color:var(--gold)}
#resendArea{font-size:14px;color:var(--text-dim)}
#resendArea .link-btn{color:var(--gold);font-size:14px}

/* ===== Mobile responsive ===== */

/* safe-area for notched phones + tap behaviour */
body{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
input,select,button,textarea{font-size:16px}/* prevents iOS zoom-on-focus */
.btn,.tab,.link-btn,.otp-digit{touch-action:manipulation}

/* tablets / small laptops */
@media (max-width:600px){
  .wrap{padding:24px 16px calc(48px + env(safe-area-inset-bottom))}
  .card{padding:26px 20px;border-radius:20px}
  .title-si{font-size:30px}
  .subtitle{font-size:15px}
  .step-title{font-size:20px}
}

/* phones */
@media (max-width:430px){
  .wrap{padding:20px 14px calc(40px + env(safe-area-inset-bottom));min-height:100svh}
  .moon{width:54px;height:54px}
  h1{font-size:13px;letter-spacing:2px}
  .title-si{font-size:27px}
  .subtitle{font-size:14px;margin-top:6px}

  .card{padding:22px 17px;border-radius:18px}
  .step-title{font-size:19px;margin-bottom:18px}
  label{font-size:14px}
  input,select{padding:13px 14px;font-size:16px;border-radius:11px}
  .btn{padding:14px;font-size:14px;letter-spacing:1px}

  /* OTP boxes shrink to fit small widths */
  .otp-boxes{gap:7px}
  .otp-digit{width:13.5vw;max-width:46px;height:52px;font-size:22px}
  .otp-info{font-size:15px}

  /* result */
  .res-symbol{font-size:40px}
  .res-lagna{font-size:26px}
  .sec h3{font-size:15px;flex-wrap:wrap}
  .sec p{font-size:15px}

  /* lucky cards stay in a row but tighter */
  .luck-row{gap:7px}
  .luck{padding:12px 5px}
  .luck .k{font-size:11px}
  .luck .v{font-size:15px}

  /* weekly rows reflow nicely */
  .tab{font-size:12px;padding:10px 6px}
  .day-row{gap:9px;padding:11px 12px;flex-wrap:wrap}
  .day-name{width:36px;font-size:11px}
  .day-si{width:54px;font-size:14px}
  .day-txt{font-size:13px;flex:1 1 100%;order:3;margin-top:4px}
  .day-rate{font-size:12px;margin-left:auto}
}

/* very small phones */
@media (max-width:340px){
  .title-si{font-size:24px}
  .otp-digit{height:48px;font-size:20px}
  .luck .v{font-size:14px}
}

/* landscape phones: don't force vertical centering */
@media (max-height:560px) and (orientation:landscape){
  .wrap{justify-content:flex-start;padding-top:18px}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .stars,.stars2{animation:none}
  .fade,.card,header{animation:none}
}