/* ==========================================================================
   NIDDAK — public site
   Extends the game's design system rather than inventing a second one:
   night-indigo grounds, brass ornament, Cairo carrying both languages, and
   logical properties everywhere so [dir="rtl"] mirrors without a second sheet.
   ========================================================================== */

:root{
  color-scheme: dark;

  --void:        #07080f;
  --bg-0:        #0b0d17;
  --bg-1:        #12162a;
  --bg-2:        #1a2038;
  --panel:       #1b2138;
  --panel-hi:    #232b47;
  --hairline:    #ffffff14;
  --hairline-hi: #ffffff26;

  --ink:       #f4efe6;
  --ink-dim:   #c7c2d6;
  --ink-faint: #8489a6;

  --gold:        #d4a24e;
  --gold-bright: #f2c572;
  --gold-dim:    #8a6b34;
  --gold-ink:    #241a06;

  --ember: #e4572e;
  --tide:  #2fb6a5;
  --gale:  #8fa6d6;
  --stone: #93a066;

  --font: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  clamp(1.75rem, 2.4vw + 1rem, 2.6rem);
  --fs-hero: clamp(2.5rem, 7.2vw + .5rem, 5.4rem);

  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem; --sp-12: 3rem;
  --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  --radius: 14px;
  --radius-lg: 22px;
  --wrap: 1140px;

  --shadow-lg: 0 24px 60px -16px #000c, 0 4px 16px #0009;
  --ease: cubic-bezier(.16,.84,.44,1);

  /* An eight-point star, the recurring motif in the card art borders. Used at
     low opacity as a ground texture rather than as decoration in its own right. */
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23d4a24e' stroke-width='1' opacity='.5'%3E%3Cpath d='M30 6 36 18 48 12 42 24 54 30 42 36 48 48 36 42 30 54 24 42 12 48 18 36 6 30 18 24 12 12 24 18Z'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body{
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; height: auto; display: block; }
h1, h2, h3{ line-height: 1.12; margin: 0; text-wrap: balance; }
p{ margin: 0; text-wrap: pretty; }
ul{ margin: 0; padding: 0; list-style: none; }

a{ color: var(--gold-bright); text-decoration: none; }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px;
}

.wrap{ width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.narrow{ max-width: 68ch; }
.center{ text-align: center; margin-inline: auto; }

.skip{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--gold); color: var(--gold-ink);
  font-weight: 700; z-index: 100;
}
.skip:focus{
  width: auto; height: auto; overflow: visible; clip-path: none;
  inset-inline-start: var(--sp-4); top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}

/* ---- buttons ------------------------------------------------------------ */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: .7rem 1.35rem;
  border-radius: 999px;
  font-weight: 700; font-size: var(--fs-sm);
  border: 1px solid transparent;
  transition: transform var(--ease) .18s, box-shadow var(--ease) .18s, background .18s;
  white-space: nowrap;
}
.btn-lg{ padding: .95rem 2rem; font-size: var(--fs-md); }
.btn-gold{
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--gold-ink);
  box-shadow: 0 6px 22px -8px #d4a24ecc;
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px -8px #d4a24ecc; }
.btn-ghost{ border-color: var(--hairline-hi); color: var(--ink); background: #ffffff0a; }
.btn-ghost:hover{ background: #ffffff14; transform: translateY(-2px); }

/* ---- header ------------------------------------------------------------- */
.site-head{
  position: sticky; top: 0; z-index: 50;
  background: #0b0d17e6;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.head-inner{
  display: flex; align-items: center; gap: var(--sp-6);
  min-height: 66px;
}
.brand{ display: flex; align-items: center; gap: var(--sp-3); color: var(--ink); }
.brand-mark{
  width: 26px; height: 26px; flex: none;
  /* The real mark, so the header, the tab icon and the home-screen icon are
     one file and cannot drift apart. Relative so it resolves wherever the
     site is mounted. */
  background: url("./favicon.svg") center / contain no-repeat;
}
.brand-text{ display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong{ font-size: var(--fs-md); font-weight: 900; letter-spacing: .12em; }
.brand-sub{ font-size: .6875rem; color: var(--ink-faint); letter-spacing: .04em; }

.nav{ display: flex; gap: var(--sp-6); margin-inline-start: auto; }
.nav a{ color: var(--ink-dim); font-size: var(--fs-sm); font-weight: 600; }
.nav a:hover{ color: var(--gold-bright); }

.head-actions{ display: flex; align-items: center; gap: var(--sp-3); }
.lang{
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-dim);
  padding: .4rem .7rem; border: 1px solid var(--hairline-hi); border-radius: 999px;
}
.lang:hover{ color: var(--gold-bright); border-color: var(--gold-dim); }

@media (max-width: 900px){
  .nav{ display: none; }
  .head-actions{ margin-inline-start: auto; }
}

/* ---- hero: the duel screen ------------------------------------------------
   A duel in progress, not a picture of one. The painting is split down the
   middle so the two champions face each other across a brass seam, behind a
   pierced screen that is dense at the edges and opens in the centre.

   The art is never mirrored: Kessa is painted on the left and stays there in
   both languages. So the two cartouches are anchored with PHYSICAL left/right
   while the rest of the page uses logical properties and mirrors normally.
   --------------------------------------------------------------------------*/
.hero{ position: relative; }
.duel{
  position: relative; isolation: isolate; overflow: hidden;
  height: min(84svh, 660px); min-height: 520px;
  background: var(--void);
  display: grid; place-items: center;
}
.duel-half{ position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.duel-l{ left: 0; }
.duel-r{ right: 0; }
.duel-half img{
  position: absolute; top: 0; height: 100%; width: 200%; max-width: none;
  object-fit: cover;
  /* Kessa is dark-armoured against her own flame and reads as a silhouette at
     the veil natural strength; this lift is legibility, not styling. */
  filter: brightness(1.14) saturate(1.05);
}
.duel-l img{ left: 0;  transform: scale(1.14) translateX(-4%); transform-origin: 30% 45%; }
.duel-r img{ right: 0; transform: scale(1.14) translateX(4%);  transform-origin: 70% 45%; }

.duel-screen{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--lattice); background-size: 26px 26px; opacity: .34;
  -webkit-mask-image: radial-gradient(56% 76% at 50% 50%, transparent 6%, #000 70%);
          mask-image: radial-gradient(56% 76% at 50% 50%, transparent 6%, #000 70%);
}
.duel-veil{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(46% 60% at 50% 50%, rgba(7,8,15,.9), rgba(7,8,15,.5) 58%, transparent 80%),
    linear-gradient(180deg, rgba(11,13,23,.34), transparent 24%, rgba(11,13,23,.3) 68%, var(--bg-0));
}
.duel-seam{
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; z-index: 3;
  transform: translateX(-1px); pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--gold-bright) 14%, #fff2d4 50%, var(--gold-bright) 86%, transparent);
  box-shadow: 0 0 22px rgba(242,197,114,.6), 0 0 60px rgba(242,197,114,.22);
}

/* ---- champion cartouches ---- */
.champ{
  position: absolute; top: var(--sp-6); z-index: 4;
  display: flex; flex-direction: column; gap: 6px; width: 220px;
}
.champ-l{ left: var(--sp-6); }
.champ-r{ right: var(--sp-6); text-align: right; align-items: flex-end; }
.champ-fac{
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold-bright); text-shadow: 0 1px 5px #000;
}
.champ-r .champ-fac{ letter-spacing: 0; text-transform: none; }
.champ-name{ font-size: 1.45rem; font-weight: 900; letter-spacing: -.01em; text-shadow: 0 2px 9px #000; }
.hp{ display: flex; gap: 3px; width: 100%; }
.hp b{ height: 5px; flex: 1; border-radius: 2px; background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.hp b.on{ background: var(--ember); box-shadow: none; }
.champ-r .hp b.on{ background: var(--tide); }
.hp-n{ font-size: var(--fs-xs); font-weight: 700; color: var(--ink-dim); text-shadow: 0 1px 5px #000; }

/* ---- centre column ---- */
.duel-core{ position: relative; z-index: 4; text-align: center; padding-block: var(--sp-8); }
.orn{ display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.orn s{ display: block; width: 62px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.orn s + s{ background: linear-gradient(90deg, var(--gold), transparent); }
.orn b{
  width: 14px; height: 14px; background: var(--gold-bright); display: block;
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 96%,50% 72%,21% 96%,32% 57%,2% 35%,39% 35%);
}
.hero-title{
  font-size: var(--fs-hero); font-weight: 900; letter-spacing: -.025em;
  display: grid; gap: .04em;
  text-shadow: 0 2px 10px #000, 0 0 52px rgba(0,0,0,.95);
}
.hero-title span:last-child{ color: var(--gold-bright); }
.hero-sub{
  margin: var(--sp-4) auto 0; max-width: 46ch;
  font-size: var(--fs-lg); color: var(--ink);
  text-shadow: 0 2px 8px #000, 0 0 30px rgba(0,0,0,.9);
}
.cta-row{ display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); }

.marks{ display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-6); }
.marks i{ width: 13px; height: 13px; display: block; transform: rotate(45deg); border: 1.5px solid var(--gold); border-radius: 2px; }
.marks i.won{ background: var(--gold-bright); box-shadow: 0 0 14px rgba(242,197,114,.85); }
.marks u{
  text-decoration: none; font-size: var(--fs-xs); font-weight: 700; color: var(--gold-bright);
  letter-spacing: .1em; text-transform: uppercase; margin-inline-start: var(--sp-2);
  text-shadow: 0 1px 6px #000;
}

/* ---- board strip: the three real duel territories ----
   direction:ltr on purpose. This strip sits directly under a painting that is
   never mirrored, so if the grid flowed RTL in Arabic the cell beneath Kessa
   would be labelled "Right Flank". The Arabic text inside each cell still
   shapes and orders correctly on its own; only the column order is pinned. */
.board{
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
  direction: ltr;
  display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 1px;
  background: var(--hairline); border-top: 1px solid var(--hairline);
}
.terr{ background: rgba(7,8,15,.92); padding: var(--sp-3) var(--sp-6); display: flex; align-items: center; gap: var(--sp-2); }
.terr-n{ font-size: var(--fs-xs); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.throne{ background: linear-gradient(180deg, rgba(212,162,78,.2), rgba(7,8,15,.94)); justify-content: center; }
.throne .terr-n{ color: var(--gold-bright); }
.star{
  width: 11px; height: 11px; background: var(--gold-bright); flex: none;
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 96%,50% 72%,21% 96%,32% 57%,2% 35%,39% 35%);
}
.pips{ display: flex; gap: 3px; margin-left: auto; }
.terr-e{ justify-content: flex-start; }
.terr-e .pips{ margin-left: 0; margin-right: auto; order: -1; }
.pips b{ width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.24); display: block; }
.pips b.lit{ background: var(--gold-bright); }

/* ---- proof row ---- */
.proofs{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--sp-4); padding-block: var(--sp-8);
}
@media (min-width: 760px){ .proofs{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.proof{ display: grid; gap: 2px; }
.proof-v{ font-size: var(--fs-xl); font-weight: 900; color: var(--gold-bright); }
.proof-l{ font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.35; }

.kicker{
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-bright); text-shadow: 0 1px 6px #000;
}
[dir="rtl"] .kicker{ text-transform: none; letter-spacing: .04em; }

/* The cartouches need room a phone does not have; below this the split, the
   seam and the board carry the idea on their own. */
@media (max-width: 900px){
  .champ{ display: none; }
  .duel{ height: min(80svh, 560px); min-height: 460px; }
}
@media (max-width: 640px){
  /* Let the hero grow to its content rather than clip it. At 390px the stacked
     buttons and a four-line lede are taller than any fixed height worth
     setting, and the Marks track was landing on top of the board strip. The
     end padding is what keeps it clear of that strip. */
  .duel{ height: auto; min-height: min(78svh, 520px); }
  .duel-core{ padding-block: var(--sp-12) calc(var(--sp-10) + 40px); }
  .duel-half img{ transform: scale(1.3); }
  .duel-l img{ transform-origin: 26% 42%; }
  .duel-r img{ transform-origin: 74% 42%; }
  .hero-sub{ font-size: var(--fs-md); max-width: 34ch; }
  .terr{ padding: var(--sp-2) var(--sp-3); }
  .terr-n{ font-size: 9px; letter-spacing: .06em; }
  .pips{ display: none; }
  .marks u{ font-size: 9.5px; letter-spacing: .05em; }
  .cta-row{ flex-direction: column; }
  .cta-row .btn{ width: 100%; }
}

/* ---- bands -------------------------------------------------------------- */
/* The header is sticky, so an anchor jump would otherwise put the heading it
   was aiming at underneath it. */
section[id]{ scroll-margin-block-start: 84px; }
.band{ padding-block: var(--sp-24); position: relative; }
.band-alt{
  background: var(--bg-1);
  border-block: 1px solid var(--hairline);
}
.band-alt::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--lattice); background-size: 90px 90px;
  opacity: .035; pointer-events: none;
}
.band > .wrap{ position: relative; z-index: 1; }

.band h2{
  font-size: var(--fs-2xl); font-weight: 900; letter-spacing: -.015em;
}
.lead{
  margin-top: var(--sp-4); font-size: var(--fs-lg); color: var(--ink-dim);
  max-width: 62ch;
}
.center .lead{ margin-inline: auto; }
.note{
  margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-faint);
  max-width: 62ch;
}

/* ---- how ---------------------------------------------------------------- */
.how-grid{
  display: grid; gap: var(--sp-6); margin-top: var(--sp-12);
  grid-template-columns: minmax(0,1fr);
}
@media (min-width: 780px){ .how-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.how-card{
  background: var(--panel); border: 1px solid var(--hairline-hi);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--ease) .25s, border-color .25s;
}
.how-card:hover{ transform: translateY(-4px); border-color: var(--gold-dim); }
.how-art{ aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); }
.how-art img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.how-body{ padding: var(--sp-6); position: relative; }
.how-n{
  position: absolute; inset-block-start: calc(var(--sp-6) * -1 - 6px);
  inset-inline-end: var(--sp-6);
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--gold); color: var(--gold-ink);
  font-weight: 900; font-size: var(--fs-md);
  border-radius: 50%; border: 3px solid var(--panel);
}
.how-body h3{ font-size: var(--fs-lg); font-weight: 800; padding-inline-end: 44px; }
.how-body p{ margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-dim); }

/* ---- climb -------------------------------------------------------------- */
.climb{ display: grid; gap: var(--sp-12); }
@media (min-width: 900px){
  .climb{ grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: start; }
}
.climb-stats{
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-8);
}
.climb-stats li{
  font-size: var(--fs-xs); font-weight: 700;
  padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid var(--gold-dim); color: var(--gold-bright);
  background: #d4a24e14;
}
.climb-list{ display: grid; gap: var(--sp-6); }
.climb-item{
  padding-inline-start: var(--sp-6);
  border-inline-start: 2px solid var(--gold-dim);
}
.climb-item h3{ font-size: var(--fs-md); font-weight: 800; color: var(--gold-bright); }
.climb-item p{ margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-dim); }

/* ---- world -------------------------------------------------------------- */
.world{ display: grid; gap: var(--sp-12); align-items: center; }
@media (min-width: 900px){ .world{ grid-template-columns: 1.1fr .9fr; gap: var(--sp-16); } }
.crests{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--sp-4);
}
.crests img{
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--hairline-hi);
  background: var(--bg-2);
  transition: transform var(--ease) .3s, border-color .3s;
}
.crests img:hover{ transform: scale(1.03); border-color: var(--gold-dim); }

/* ---- fair --------------------------------------------------------------- */
.fair{ }
.fair-chips{
  display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8);
}
.fair-chips li{
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 700;
  padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--tide); color: #63e6d4; background: #2fb6a516;
}
.fair-chips li::before{ content: "✓"; font-weight: 900; }

/* ---- closer ------------------------------------------------------------- */
.closer{
  background:
    radial-gradient(80% 120% at 50% 0%, #12162a 0%, var(--bg-0) 70%);
  padding-block: var(--sp-24);
}
.closer .btn{ margin-top: var(--sp-8); }

/* ---- footer ------------------------------------------------------------- */
.site-foot{
  border-top: 1px solid var(--hairline);
  background: var(--void);
  padding-block: var(--sp-10);
}
.foot-inner{ display: grid; gap: var(--sp-4); }
.foot-note{ font-size: var(--fs-sm); color: var(--ink-dim); max-width: 62ch; }
.foot-meta{
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  font-size: var(--fs-xs); color: var(--ink-faint);
}

/* ---- small screens ------------------------------------------------------ */
@media (max-width: 640px){
  .band{ padding-block: var(--sp-16); }
  .hero-inner{ padding-block: var(--sp-16) var(--sp-12); }
  .hero-art img{ object-position: 50% 38%; }
  .hero-sub{ font-size: var(--fs-md); }
  .btn-lg{ width: 100%; }
  .cta-row{ flex-direction: column; }
}