/* Hokm's look: the coffeehouse of the game itself. In the light it is the game's tile wall, cream
   with cobalt and gold; in the dark it is the felt its other pages are laid on. The studio's bar
   and foot stay where they are and take these colours, so the whole page is one place.

   The colours are the game's own (Goud.Hokm, scripts/Look.cs): cobalt for what matters most,
   cream for what stands beside it, red for the hearts and diamonds and for nothing else. */

:root{
  --bg:#0f3526;
  --ink:#f6ecd4;
  --dim:#c2cdb9;
  --line:rgba(246,236,212,.18);
  --accent:#e6b655;
  --gold:#e6b655;
  --rubric:#e8705c;
  --glow:rgba(230,182,85,.20);
  --glow-soft:rgba(230,182,85,.06);
  --plate:#0b281c;
  --cobalt:#2a4fb0;
  --panel:rgba(246,236,212,.05);
  --tile:rgba(0,0,0,.10);
}
:root[data-theme="light"]{
  --bg:#f2e5c6;
  --ink:#2b2117;
  --dim:#6b5b45;
  --line:rgba(43,33,23,.18);
  --accent:#1f3f95;
  --gold:#b88a2c;
  --rubric:#b3312a;
  --glow:rgba(184,138,44,.24);
  --glow-soft:rgba(184,138,44,.08);
  --plate:#fbf4e1;
  --cobalt:#1f3f95;
  --panel:rgba(255,250,236,.62);
  --tile:rgba(120,88,36,.11);
}

/* the wall's tiles, as faint seams; on the felt they are barely there */
body{
  background-image:
    linear-gradient(var(--tile) 1px, transparent 1px),
    linear-gradient(90deg, var(--tile) 1px, transparent 1px);
  background-size:220px 220px;
  background-position:center top;
}

main{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:clamp(28px,5vw,60px) clamp(18px,5vw,56px) clamp(48px,7vw,90px)}

/* the plaque every boxed thing on these pages is: cream, a cobalt rule, a gold one outside it */
.get,.ingame,.points li,.roster li a,.promise{
  background:var(--panel);
  border:1.5px solid var(--cobalt);
  border-radius:12px;
  box-shadow:0 0 0 3px var(--glow-soft), 0 0 0 4px var(--gold);
}

/* ---- the head of the game's own page ---- */

.title{text-align:center;margin-bottom:clamp(22px,3.5vw,36px)}
.title .k{
  display:inline-block;padding:6px 16px;border-radius:999px;
  background:var(--rubric);color:#fff7e6;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
}
:root[dir="rtl"] .title .k{letter-spacing:0;font-size:15px;text-transform:none}
.title h1{margin:16px 0 0;font-weight:400;font-size:clamp(32px,5.6vw,56px);line-height:1.15;color:var(--accent);text-align:center}
:root[dir="rtl"] .title h1{line-height:1.5;text-align:center}
/* the kings at their table carry the name; the heading is the painting */
.title h1 img{
  display:block;width:100%;height:auto;margin:0 auto;border-radius:14px;
  box-shadow:0 0 0 2px var(--cobalt), 0 0 0 6px var(--gold), 0 0 0 8px var(--cobalt), 0 24px 54px rgba(0,0,0,.35);
}
.title .sub{margin:22px auto 0;max-width:44ch;color:var(--ink);font-size:clamp(19px,2.4vw,24px);line-height:1.45}
:root[dir="rtl"] .title .sub{line-height:1.8}

/* ---- how the game is got ---- */

.get{margin:0 auto;max-width:620px;padding:22px 24px 20px;text-align:center}
.get .soon{margin:0;font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--rubric)}
:root[dir="rtl"] .get .soon{letter-spacing:0;text-transform:none;font-size:18px}
.get .why{margin:8px 0 0;color:var(--dim);font-size:16px}
.get form{margin:16px 0 0;display:flex;flex-direction:column;gap:8px;align-items:stretch}
.get label{color:var(--dim);font-size:14px;text-align:start}
.get .row{display:flex;gap:10px;flex-wrap:wrap}
.get input[type="email"]{
  flex:1 1 220px;min-width:0;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--plate);color:var(--ink);font:inherit;font-size:17px;
}
.get input[type="email"]:focus{outline:2px solid var(--gold);outline-offset:1px}
/* a box no person sees: whatever fills it in is not one */
.get .unseen{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}
.get button,.get .store{
  flex:0 0 auto;padding:12px 24px;border:1.5px solid var(--cobalt);border-radius:10px;
  background:var(--cobalt);color:#fff7e6;font:inherit;font-size:17px;cursor:pointer;text-decoration:none;
  transition:filter .2s ease;
}
.get .store{display:inline-block;font-size:19px;padding:14px 30px}
.get button:hover,.get button:focus-visible,.get .store:hover,.get .store:focus-visible{filter:brightness(1.15)}
.get .kept{margin:12px 0 0;color:var(--dim);font-size:13px}
:root[dir="rtl"] .get .kept{font-size:14px}
.get .kept a{color:var(--accent)}
.get .thanks{margin:12px 0 0;color:var(--ink);font-size:18px}
.get .wrong{margin:12px 0 0;color:var(--rubric);font-size:15px}

/* ---- a film of the game ---- */

figure{margin:0}
.film{margin:clamp(26px,4vw,44px) auto 0}
.film video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;background:#000;cursor:pointer;
  box-shadow:0 0 0 2px var(--cobalt), 0 0 0 5px var(--gold), 0 18px 44px rgba(0,0,0,.3);
}
.film figcaption,.shot figcaption{margin-top:14px;text-align:center;color:var(--dim);font-size:15px}
:root[dir="rtl"] .film figcaption,:root[dir="rtl"] .shot figcaption{font-size:16px}

/* ---- running text ---- */

.lead{margin:clamp(22px,3vw,30px) auto 0;max-width:62ch;color:var(--ink);font-size:19px}
.lead + .lead{margin-top:1em}
/* a stressed word leans and nothing more: on these pages a colour would make it look like a door */
.lead em{font-style:italic}
:root[dir="rtl"] .lead{max-width:58ch}
:root[dir="rtl"] .lead em{font-style:normal}

/* a part of the page: its heading, cobalt and tracked like the name over the door */
h2.subheading{
  margin:clamp(52px,7vw,84px) 0 0;text-align:center;font-weight:400;
  font-size:clamp(22px,3.2vw,30px);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
:root[dir="rtl"] h2.subheading{letter-spacing:0;text-transform:none;font-size:clamp(26px,3.8vw,34px)}
h2.subheading::after{
  content:"";display:block;width:64px;height:3px;margin:14px auto 0;border-radius:2px;
  background:linear-gradient(90deg,var(--rubric) 0 50%,var(--gold) 50% 100%);
}

.shamsa{display:block;margin:clamp(34px,5vw,56px) auto 0;width:40px;height:40px;color:var(--gold);opacity:.8}
.shamsa.large{width:60px;height:60px;opacity:1}

/* ---- the four houses: a king's card each ---- */

.pair{
  margin-top:clamp(24px,3.5vw,38px);
  display:grid;gap:clamp(14px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  align-items:start;
}
.frame{position:relative;border-radius:10px;overflow:hidden;background:var(--plate);
  box-shadow:0 0 0 1.5px var(--cobalt), 0 10px 26px rgba(0,0,0,.28)}
.frame img{display:block;width:100%;height:auto}
.frame[data-full]{cursor:zoom-in}
.frame[data-full]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.corner{display:none}
.plate,.wide-card{margin:clamp(26px,4vw,40px) auto 0;max-width:340px}
.wide-card{max-width:760px}
.plate figcaption{margin-top:14px;text-align:center;color:var(--dim);font-size:15px}

.name{margin-top:14px;text-align:center;display:flex;flex-direction:column;align-items:center}
.name .big{font-size:23px;line-height:1.3;color:var(--accent);border-bottom:0}
:root[dir="rtl"] .name .big{font-size:26px}
.name .small{font-size:15px;color:var(--dim)}
.name .small[dir="ltr"]{font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.name .say{margin:8px auto 0;font-size:15px;color:var(--dim);max-width:30ch}
:root[dir="rtl"] .name .say{font-size:16px}

/* ---- pictures of the game ---- */

.shots{
  margin-top:clamp(24px,3.5vw,38px);
  display:grid;gap:clamp(16px,2.6vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.shots.one{grid-template-columns:1fr}
.shots.one .frame{box-shadow:0 0 0 2px var(--cobalt), 0 0 0 5px var(--gold), 0 18px 44px rgba(0,0,0,.3);border-radius:12px}
/* the seven chapters in a row: small, all on one line where there is room for them */
.shots.small{grid-template-columns:repeat(7,1fr);gap:clamp(6px,1.2vw,12px)}
.shots.small .frame{border-radius:6px;box-shadow:0 0 0 1px var(--gold), 0 6px 16px rgba(0,0,0,.22)}
.shots.small figcaption{display:none}

/* ---- things said one after another ---- */

.points{
  margin:clamp(24px,3.5vw,38px) 0 0;padding:0;list-style:none;
  display:grid;gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.points li{padding:18px 20px}
.points h3{margin:0 0 6px;font-weight:400;font-size:20px;line-height:1.35;color:var(--accent)}
:root[dir="rtl"] .points h3{font-size:22px;line-height:1.6}
.points p{margin:0;color:var(--dim);font-size:16px}
.points p + p{margin-top:.7em}
:root[dir="rtl"] .points p{font-size:17px}
/* the steps of a round are counted, each number on a red seal */
.points.counted{counter-reset:step;grid-template-columns:1fr;max-width:720px;margin-inline:auto}
.points.counted li{counter-increment:step;position:relative;padding-inline-start:74px}
.points.counted li::before{
  content:counter(step);
  position:absolute;inset-inline-start:18px;top:18px;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--rubric);color:#fff7e6;font-size:19px;line-height:1;
  box-shadow:0 0 0 2px var(--gold);
}
:root[lang="fa"] .points.counted li::before{content:counter(step, persian)}

/* ---- buttons to somewhere ---- */

.ask{margin:clamp(22px,3.4vw,36px) 0 0;text-align:center}
.ask a{
  display:inline-block;margin:0 6px 10px;padding:11px 24px;
  border:1.5px solid var(--cobalt);border-radius:10px;background:var(--plate);
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;
  transition:background .2s ease,color .2s ease;
}
.ask a:hover,.ask a:focus-visible{background:var(--cobalt);color:#fff7e6}
:root[dir="rtl"] .ask a{letter-spacing:0;text-transform:none;font-size:17px}
.ask .under{display:block;margin-top:6px;font-size:13px;color:var(--dim)}

.credit{margin:clamp(40px,6vw,64px) 0 0;text-align:center;font-size:14px;color:var(--dim)}
:root[dir="rtl"] .credit{font-size:15px}
.credit a{color:var(--accent)}

.promise{margin:clamp(30px,4.5vw,48px) auto 0;max-width:60ch;padding:20px 24px;text-align:center;color:var(--dim);font-size:16px}
.promise em{color:var(--ink);font-style:normal}

/* ---- a painting, full size ---- */

.lightbox{
  position:fixed;inset:0;z-index:50;
  display:none;align-items:center;justify-content:center;
  padding:clamp(12px,4vw,48px);
  background:rgba(6,14,10,.93);
  cursor:zoom-out;
}
.lightbox.on{display:flex}
.lightbox img{max-width:100%;max-height:100%;height:auto;width:auto;border-radius:8px;box-shadow:0 0 0 3px var(--gold), 0 30px 80px rgba(0,0,0,.6)}
.lightbox .close{position:absolute;top:18px;right:22px;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:#e9dfc6}
:root[dir="rtl"] .lightbox .close{right:auto;left:22px;letter-spacing:0;font-size:15px}

/* ---- a name's own page: the card it is painted on ---- */

.crumb{text-align:center;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
:root[dir="rtl"] .crumb{letter-spacing:0;text-transform:none;font-size:14px}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover,.crumb a:focus-visible{color:var(--accent)}

.face{
  width:clamp(190px,30vw,260px);aspect-ratio:2/3;
  margin:clamp(18px,3vw,26px) auto 0;border-radius:14px;overflow:hidden;cursor:zoom-in;
  background:var(--plate);
  box-shadow:0 0 0 1.5px var(--cobalt), 0 0 0 5px var(--glow-soft), 0 20px 46px rgba(0,0,0,.34);
}
.face img{display:block;width:100%;height:100%;object-fit:cover}
.face:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

.head{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.head h1{margin:0;font-weight:400;line-height:1.2;font-size:clamp(32px,5.4vw,54px);color:var(--accent);text-align:center}
:root[dir="rtl"] .head h1{font-size:clamp(38px,7vw,62px);line-height:1.4;text-align:center}
.head .small{font-size:clamp(17px,2.4vw,22px);color:var(--dim);line-height:1.3}
.head .small[dir="ltr"]{letter-spacing:.14em;text-transform:uppercase}
.head .gloss{margin:12px auto 0;max-width:46ch;color:var(--dim);font-size:17px}

.ingame{margin:clamp(30px,4.5vw,46px) auto 0;max-width:58ch;padding:18px 22px}
.ingame h2{margin:0 0 6px;font-weight:400;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--rubric)}
:root[dir="rtl"] .ingame h2{letter-spacing:0;text-transform:none;font-size:16px}
.ingame p{margin:0;color:var(--ink);font-size:17px}
.ingame p + p{margin-top:.8em}

.also{margin:clamp(34px,5vw,52px) auto 0;max-width:62ch;text-align:center}
.also h2{margin:0 0 14px;font-weight:400;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
:root[dir="rtl"] .also h2{letter-spacing:0;text-transform:none;font-size:16px}
.also a{
  display:inline-block;margin:0 5px 8px;padding:8px 16px;
  border:1px solid var(--line);border-radius:999px;
  color:var(--ink);text-decoration:none;font-size:15px;
  transition:color .2s ease,border-color .2s ease;
}
.also a:hover,.also a:focus-visible{color:var(--accent);border-color:var(--accent)}

/* the card, larger: zoom.js builds this, and here it keeps a card's shape */
.zoom{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:rgba(6,14,10,.93);cursor:zoom-out;
}
.zoom[hidden]{display:none}
.zoom-ring{height:min(78vh,120vw);aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:var(--plate);box-shadow:0 0 0 3px var(--gold), 0 30px 80px rgba(0,0,0,.6)}
.zoom-ring img{display:block;width:100%;height:100%;object-fit:cover}
.zoom-cap{margin:0;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#e9dfc6}
:root[dir="rtl"] .zoom-cap{letter-spacing:0;text-transform:none;font-size:17px}

/* ---- every name, house by house ---- */

.part{margin:clamp(40px,5.5vw,64px) 0 0;text-align:center;font-weight:400;font-size:clamp(20px,2.8vw,26px);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
:root[dir="rtl"] .part{letter-spacing:0;text-transform:none;font-size:clamp(24px,3.4vw,30px)}
.partnote{margin:8px auto 0;max-width:56ch;text-align:center;color:var(--dim);font-size:16px}

.roster{margin:clamp(18px,3vw,28px) 0 0;padding:0;list-style:none;display:grid;gap:clamp(14px,2vw,20px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.roster li a{display:flex;gap:16px;align-items:center;height:100%;padding:14px 16px;text-decoration:none;color:inherit;transition:transform .25s ease}
@media (prefers-reduced-motion:no-preference){
  .roster li a:hover{transform:translateY(-2px)}
}
/* the card itself, small, where nard has a face in a ring */
.mug{flex:0 0 auto;width:68px;height:102px;border-radius:6px;overflow:hidden;background:var(--plate);box-shadow:0 0 0 1px var(--cobalt), 0 6px 14px rgba(0,0,0,.25)}
.mug img{display:block;width:100%;height:100%;object-fit:cover}
.mug.empty{box-shadow:none;border:1px dashed var(--line)}
.who{display:flex;flex-direction:column;min-width:0}
.roster .big{font-size:22px;line-height:1.3;color:var(--accent)}
.roster .small{font-size:14px;color:var(--dim);line-height:1.4}
.roster .small[dir="ltr"]{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
:root[dir="rtl"] .roster .small{text-align:right}
:root[dir="ltr"] .roster .small{text-align:left}
.roster .what{margin:6px 0 0;color:var(--dim);font-size:15px;line-height:1.5}
:root[dir="rtl"] .roster .what{line-height:1.8}

.bar .project{color:var(--accent)}
.bar .project i{font-style:normal;color:var(--dim)}

@media (max-width:820px){
  .shots{grid-template-columns:1fr}
  /* seven across is too small to read on a phone: four and three */
  .shots.small{grid-template-columns:repeat(4,1fr)}
  .points{grid-template-columns:1fr}
  .roster{grid-template-columns:1fr}
  .pair{grid-template-columns:repeat(2,1fr)}
  .title h1 img{border-radius:10px;box-shadow:0 0 0 2px var(--cobalt), 0 0 0 4px var(--gold), 0 14px 30px rgba(0,0,0,.3)}
}

@media (prefers-reduced-motion:no-preference){
  .title,.head,.face{animation:rise .7s ease-out both}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}