/* =====================================================================
   LEISO — studio frame
   The frame is the same on every page: midnight nav, midnight footer,
   Jost for everything the studio says, straight edges, the signature dot.
   Each game page sets its own world tokens inside <main data-world="…">.
   ===================================================================== */

:root{
  /* studio palette */
  --l-night:#171A21;      /* footer ground */
  --l-midnight:#1F2430;   /* frame ground (nav, hero, studio band) */
  --l-slate:#2A3040;      /* raised surface on midnight */
  --l-fog:#E8E9E5;        /* light studio band */
  --l-paper:#F3F2EE;      /* raised surface on fog */
  --l-ivory:#F3F1EC;      /* text on dark */
  --l-ink:#1F2430;        /* text on light */
  --l-mute-d:#9EA6B4;     /* secondary text on dark */
  --l-mute-l:#596070;     /* secondary text on light */
  --l-line-d:rgba(243,241,236,.14);
  --l-line-l:rgba(31,36,48,.14);
  --l-sand:#C9AE7C;       /* studio accent: the resting colour of the dot */

  /* the signature dot — every world overrides --dot */
  --dot:var(--l-sand);
  --dot-swingout:#E2714F;
  --dot-umbrend:#62D8EA;

  --f-studio:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --wrap:1200px;
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  --ease:cubic-bezier(.22,.8,.3,1);

  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--l-midnight); color:var(--l-ivory);
  font:400 16.5px/1.7 var(--f-studio);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{ /* paints the phone's top safe-area band behind the sticky nav */
  content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px);
  z-index:60; background:var(--l-midnight);
}
img,video,svg{max-width:100%}
img{display:block; height:auto}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--dot); outline-offset:3px}
section{scroll-margin-top:76px}

.l-wrap{
  width:100%; max-width:calc(var(--wrap) + 64px); margin:0 auto;
  padding-left:max(24px, var(--gutter)); padding-right:max(24px, var(--gutter-r));
}
@media (max-width:520px){
  .l-wrap{padding-left:var(--gutter); padding-right:var(--gutter-r)}
}

/* ---------- the mark: an L with the signature dot ---------- */
.l-mark{display:inline-block; width:26px; height:26px; flex:0 0 auto}
.l-mark .stroke{fill:none; stroke:currentColor; stroke-width:12; stroke-linecap:round; stroke-linejoin:round}
.l-mark .dot{fill:var(--dot); transition:fill .5s var(--ease)}

/* ---------- nav ---------- */
.l-nav{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:rgba(31,36,48,.9);
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s ease;
  color:var(--l-ivory);
}
.l-nav.scrolled{border-bottom-color:var(--l-line-d)}
.l-nav > .l-wrap{display:flex; align-items:center; justify-content:space-between; gap:clamp(14px,2.4vw,30px); height:64px}
.l-brand{display:flex; align-items:center; gap:12px; min-height:44px; text-decoration:none}
.l-brand .word{font-size:15px; font-weight:500; letter-spacing:.3em; padding-left:.06em}
.l-brand .crumb{font-size:13px; color:var(--l-mute-d); letter-spacing:.04em; padding-left:12px; border-left:1px solid var(--l-line-d)}
.l-links{display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); margin-left:auto}
.l-links a{
  position:relative; font-size:12.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--l-mute-d); text-decoration:none; padding:6px 0; transition:color .2s ease;
}
.l-links a:hover,.l-links a[aria-current="page"]{color:var(--l-ivory)}
.l-links a[aria-current="page"]::after{
  content:""; position:absolute; left:50%; bottom:-5px; width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%; background:var(--dot);
}
.l-tools{display:flex; align-items:center; gap:10px}
.l-lang{
  background:none; border:1px solid var(--l-line-d); border-radius:2px; color:var(--l-ivory);
  font-size:11.5px; font-weight:500; letter-spacing:.14em; min-width:40px; height:36px; padding:0 10px; cursor:pointer;
  transition:border-color .2s ease;
}
.l-lang:hover{border-color:var(--dot)}

/* mobile menu: logo left, language + menu button right */
.l-burger{
  display:none; place-items:center; width:44px; height:44px; padding:0; cursor:pointer;
  background:none; border:1px solid var(--l-line-d); border-radius:2px; color:var(--l-ivory);
}
.l-burger:hover{border-color:var(--dot)}
.l-burger .bars{position:relative; display:block; width:18px; height:10px}
.l-burger .bars i{position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition:transform .25s var(--ease), top .25s var(--ease)}
.l-burger .bars i:first-child{top:0}
.l-burger .bars i:last-child{top:8.5px}
.l-burger[aria-expanded="true"] .bars i:first-child{top:4.25px; transform:rotate(45deg)}
.l-burger[aria-expanded="true"] .bars i:last-child{top:4.25px; transform:rotate(-45deg)}
.l-menu{border-top:1px solid var(--l-line-d); max-height:calc(100dvh - 64px - env(safe-area-inset-top, 0px)); overflow-y:auto; animation:menuIn .22s var(--ease)}
@keyframes menuIn{from{opacity:0; transform:translateY(-6px)}}
.l-menu ul{list-style:none; margin:0; padding:6px 0 22px; display:grid}
.l-menu a{
  display:flex; align-items:center; gap:14px; min-height:56px; border-bottom:1px solid var(--l-line-d);
  font-size:21px; font-weight:300; letter-spacing:-.005em; color:var(--l-ivory); text-decoration:none;
}
.l-menu a:hover{color:#fff}
.l-menu .game a::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--c); flex:0 0 auto}
.l-menu .so{--c:var(--dot-swingout)}
.l-menu .um{--c:var(--dot-umbrend)}
.l-menu a[aria-current="page"]::after{content:""; margin-left:auto; width:6px; height:6px; border-radius:50%; background:var(--dot)}
html.menu-open{overflow:hidden}
@media (max-width:760px){
  .l-links{display:none}
  .l-burger{display:grid}
  .l-lang{height:44px; min-width:44px}
  .l-brand .crumb{display:none}
}
@media (min-width:761px){ .l-menu{display:none !important} }

/* ---------- studio type ---------- */
.l-eyebrow{
  margin:0; font-size:11.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--l-sand);
}
.l-h1{
  margin:0; font-weight:300; font-size:clamp(46px,8.2vw,104px); line-height:.98; letter-spacing:-.025em;
  text-wrap:balance;
}
.l-h2{
  margin:0; font-weight:300; font-size:clamp(32px,4.6vw,56px); line-height:1.05; letter-spacing:-.02em;
  text-wrap:balance;
}
.l-lead{margin:0; font-size:clamp(17px,1.9vw,19.5px); line-height:1.6; max-width:44ch}

/* ---------- studio buttons: straight edges ---------- */
.l-btn{
  font-family:var(--f-studio);
  display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:0 22px; border-radius:2px;
  font-size:14.5px; font-weight:500; letter-spacing:.02em; text-decoration:none; border:1px solid transparent;
  transition:transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.l-btn .arr{font-size:16px; line-height:1; transition:transform .2s ease}
.l-btn:hover .arr{transform:translate(2px,-2px)}
.l-btn:hover .arr.down{transform:translateY(2px)}
.l-btn:hover .arr.right{transform:translateX(3px)}
.l-btn-solid{background:var(--l-ivory); color:var(--l-ink)}
.l-btn-solid:hover{background:#fff}
.l-btn-line{border-color:var(--l-line-d); color:var(--l-ivory)}
.l-btn-line:hover{border-color:var(--l-ivory)}
.l-link{
  font-family:var(--f-studio);
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; text-decoration:none;
  padding-bottom:3px; border-bottom:1px solid currentColor;
}
.l-link{position:relative}
.l-link::before{content:""; position:absolute; inset:-12px -6px}
.l-link .arr{transition:transform .2s ease}
.l-link:hover .arr{transform:translate(2px,-2px)}
.l-link:hover .arr.right{transform:translateX(3px)}

/* ---------- placard: the label every game wears, on every page ---------- */
.l-placard{display:grid; gap:10px; font-family:var(--f-studio)}
.l-placard .row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.l-placard .cat{font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; opacity:.7; font-variant-numeric:tabular-nums}
.l-status{
  display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
}
.l-status::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--status, var(--dot))}
.l-status.dev::before{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--status, var(--dot)) 60%, transparent)} 50%{box-shadow:0 0 0 6px transparent}}

/* compact "A LEISO game" lockup used inside worlds */
.l-byline{
  margin:0;
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--f-studio); font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
}
.l-byline .l-mark{width:18px; height:18px}
.l-byline .sep{width:18px; height:1px; background:currentColor; opacity:.35}

/* ---------- footer ---------- */
.l-foot{background:var(--l-night); color:var(--l-mute-d); font-size:14px; padding-block:64px 36px}
.l-foot a{color:var(--l-mute-d); text-decoration:none; transition:color .2s ease}
.l-foot a:hover{color:var(--l-ivory)}
.l-foot .top{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:32px 24px}
.l-foot .brand{display:grid; gap:14px; align-content:start; color:var(--l-ivory)}
.l-foot .brand .l-brand{color:var(--l-ivory)}
.l-foot .brand .l-brand .word{font-size:17px}
.l-foot .brand p{margin:0; color:var(--l-mute-d); max-width:24ch}
.l-foot .f-h{margin:0 0 14px; font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--l-ivory)}
.l-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.l-foot ul a{display:inline-flex; align-items:center; min-height:34px}
@media (max-width:760px){ .l-foot ul a{min-height:44px} }
.l-foot .bottom{
  margin-top:56px; padding-top:22px; border-top:1px solid var(--l-line-d);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; font-size:13px;
}
@media (max-width:760px){ .l-foot .top{grid-template-columns:repeat(2,minmax(0,1fr))} .l-foot .brand{grid-column:1/-1} }

/* ---------- language ---------- */
[data-lang="en"] .tr{display:none !important}
[data-lang="tr"] .en{display:none !important}

/* ---------- reveal: content is visible at rest; only below-the-fold items wait ---------- */
.rv{transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rv.wait{opacity:0; transform:translateY(18px)}

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .rv.wait{opacity:1; transform:none}
}