:root{
    --bg:#0e1526;
    --panel:#131c31;
    --line:rgba(160,178,214,.16);
    --ink:#eef2fa;
    --dim:#93a1c2;
    --accent:#c8a24a;
    --accent-soft:rgba(200,162,74,.12);
    --ease:cubic-bezier(.22,.9,.28,1);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:
      radial-gradient(1200px 600px at 50% -200px, #1a2643 0%, transparent 60%),
      var(--bg);
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    min-height:100vh;
    display:flex;flex-direction:column;align-items:center;
    padding:0 20px;
    overflow-x:hidden;
  }

  /* ===== ambient canvas (subtle particles) ===== */
  #field{position:fixed;inset:0;z-index:0;opacity:.55;pointer-events:none}

  /* ===== intro overlay — the "game boot" ===== */
  #intro{
    position:fixed;inset:0;z-index:50;
    background:var(--bg);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
    transition:opacity .7s var(--ease), visibility .7s;
  }
  #intro.done{opacity:0;visibility:hidden}
  #intro .logo{
    font-family:'Fraunces',serif;font-weight:900;
    font-size:clamp(2rem,7vw,3.4rem);
    letter-spacing:.06em;color:var(--ink);
    opacity:0;animation:introFade .8s var(--ease) .1s forwards;
  }
  #intro .logo span{color:var(--accent);font-style:italic;font-weight:700}
  @keyframes introFade{to{opacity:1}}
  #intro .bar{
    width:min(300px,70vw);height:2px;background:rgba(160,178,214,.15);
    border-radius:2px;overflow:hidden;
  }
  #intro .bar i{
    display:block;height:100%;width:0;
    background:linear-gradient(90deg,var(--accent),#e8cf8e);
    box-shadow:0 0 12px rgba(200,162,74,.5);
    transition:width .25s linear;
  }
  #intro .pct{
    font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);
    font-variant-numeric:tabular-nums;
  }

  /* ===== layout ===== */
  header,main,footer{position:relative;z-index:2}
  header{
    width:min(880px,100%);
    display:flex;justify-content:space-between;align-items:center;
    padding:26px 0;
    border-bottom:1px solid var(--line);
    font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  }
  header .mark{font-family:'Fraunces',serif;font-weight:700;font-size:1.02rem;color:var(--ink);letter-spacing:.18em}
  header .mark span{color:var(--accent)}

  main{
    width:min(880px,100%);
    flex:1;display:flex;flex-direction:column;justify-content:center;
    padding:64px 0 48px;text-align:center;
  }

  /* staged reveal — elements enter one by one after intro */
  .rv{opacity:0;transform:translateY(26px)}
  body.ready .rv{
    animation:rise .8s var(--ease) forwards;
  }
  body.ready .s1{animation-delay:.05s}
  body.ready .s2{animation-delay:.22s}
  body.ready .s3{animation-delay:.4s}
  body.ready .s4{animation-delay:.58s}
  body.ready .s5{animation-delay:.76s}
  body.ready .s6{animation-delay:.94s}
  @keyframes rise{to{opacity:1;transform:translateY(0)}}

  .status{
    display:inline-flex;align-self:center;align-items:center;gap:9px;
    font-size:.78rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
    color:var(--accent);
    border:1px solid rgba(200,162,74,.4);
    background:var(--accent-soft);
    padding:10px 22px;border-radius:4px;
    position:relative;
  }
  .status .dot{
    width:7px;height:7px;border-radius:50%;background:var(--accent);
    animation:beacon 2.4s ease-out infinite;
  }
  @keyframes beacon{
    0%{box-shadow:0 0 0 0 rgba(200,162,74,.55)}
    70%{box-shadow:0 0 0 12px rgba(200,162,74,0)}
    100%{box-shadow:0 0 0 0 rgba(200,162,74,0)}
  }

  h1{
    font-family:'Fraunces',serif;
    font-weight:900;
    font-size:clamp(3.4rem,13vw,7.6rem);
    letter-spacing:-.015em;
    margin:34px 0 10px;
    color:var(--ink);
    font-variation-settings:'opsz' 144;
    text-shadow:0 2px 40px rgba(200,162,74,.18);
  }
  h1 .tld{color:var(--accent);font-style:italic;font-weight:700}
  /* letters materialize */
  h1 .ch{display:inline-block;opacity:0;transform:translateY(.35em) scale(.92);filter:blur(6px)}
  body.ready h1 .ch{animation:forge .7s var(--ease) forwards}
  @keyframes forge{
    to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  }
  /* underline draw */
  .rule{
    width:0;height:1px;margin:6px auto 0;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
  }
  body.ready .rule{animation:draw 1.1s var(--ease) .9s forwards}
  @keyframes draw{to{width:min(420px,70%)}}

  .statement{
    font-family:'Fraunces',serif;font-weight:600;
    font-variation-settings:'opsz' 30;
    font-size:clamp(1.05rem,3vw,1.35rem);
    color:var(--dim);
    margin:22px auto 0;
    max-width:560px;line-height:1.65;
  }
  .statement b{color:var(--ink);font-weight:600}

  .facts{
    margin:44px auto 0;
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--line);
    border:1px solid var(--line);border-radius:8px;overflow:hidden;
    max-width:720px;width:100%;
  }
  .fact{background:var(--panel);padding:22px 16px;transition:background .25s}
  .fact:hover{background:#16203a}
  .fact .k{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
  .fact .v{font-weight:700;font-size:1.02rem;line-height:1.35}
  .fact .v small{display:block;font-weight:500;color:var(--dim);font-size:.8rem;margin-top:3px}

  .contact{
    margin:44px auto 0;max-width:720px;width:100%;
    display:grid;grid-template-columns:1fr 1fr;gap:14px;
  }
  .card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:8px;padding:24px 22px;
    text-decoration:none;color:var(--ink);text-align:left;
    position:relative;overflow:hidden;
    transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  /* light sweep on hover — like selecting a menu item */
  .card::after{
    content:'';position:absolute;top:0;left:-120%;
    width:60%;height:100%;
    background:linear-gradient(105deg,transparent,rgba(238,242,250,.06),transparent);
    transition:left .6s var(--ease);
  }
  .card:hover::after,.card:focus-visible::after{left:160%}
  .card:hover,.card:focus-visible{
    border-color:var(--accent);outline:none;
    transform:translateY(-3px);
    box-shadow:0 14px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(200,162,74,.15);
  }
  .card .label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
  .card .value{font-weight:700;font-size:1.08rem;word-break:break-all}
  .card .hint{margin-top:8px;font-size:.82rem;color:var(--dim)}

  .assure{margin-top:36px;font-size:.86rem;color:var(--dim);line-height:1.7}
  .assure b{color:var(--ink);font-weight:600}

  footer{
    width:min(880px,100%);
    border-top:1px solid var(--line);
    padding:22px 0 30px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
    font-size:.76rem;color:var(--dim);letter-spacing:.06em;
  }

  @media (max-width:640px){
    .facts{grid-template-columns:1fr}
    .contact{grid-template-columns:1fr}
    main{padding:44px 0 36px}
  }
  @media (prefers-reduced-motion:reduce){
    #intro{display:none}
    .rv,h1 .ch{opacity:1 !important;transform:none !important;filter:none !important;animation:none !important}
    .rule{width:min(420px,70%) !important;animation:none !important}
    *{animation-duration:.01s !important}
  }

/* ===== play button (link to game) — matches game's Başla button ===== */
.play-btn{
  display:inline-block;
  margin:40px auto 0;
  padding:16px 40px;
  border-radius:8px;
  text-decoration:none;
  font-family:'Manrope',sans-serif;
  font-weight:800;font-size:1.05rem;letter-spacing:.04em;
  color:#0e1526;
  background:linear-gradient(120deg,var(--accent),#e2c476);
  box-shadow:0 8px 24px rgba(200,162,74,.28);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.play-btn:hover,.play-btn:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(200,162,74,.4);
  outline:none;
}

/* ===== language system ===== */
.head-right{display:flex;align-items:center;gap:14px}
.head-label{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.langsw{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.langsw button{
  border:0;cursor:pointer;padding:6px 11px;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.08em;
  background:transparent;color:var(--dim);transition:background .2s,color .2s;
}
.langsw button+button{border-left:1px solid var(--line)}
.langsw button.on{background:var(--accent);color:#0e1526}
.langsw button:hover{color:var(--ink)}
.langsw button.on:hover{color:#0e1526}

/* show only active language */
.lang{display:none}
body[data-lang="az"] .lang.az{display:inline}
body[data-lang="en"] .lang.en{display:inline}
/* keep block elements natural when they are the language span's parent context */
body[data-lang="az"] p .lang.az,
body[data-lang="en"] p .lang.en{display:inline}

@media (max-width:560px){
  .head-label{display:none}
}