/* YYUKA Studio — site styles
   Black and white only. Airy, classical, Aegean: hairline rules, generous
   space, serif headings, and interlacing bands that echo the studio mark.
   Patterns are SVG masks, so they take the ink colour in either theme.
   No web fonts and nothing loaded from another domain: the only script on the
   page is the inline theme toggle, allowed by its hash in the CSP. */

/* ------------------------------------------------------------------ tokens */

/* Dark is the site's own default, not the operating system's preference, so
   the palette below is the dark one and light is the opt-in. The theme button
   writes data-theme on <html>; nothing here reads prefers-color-scheme. */

:root {
  --paper: #0b0b0b;
  --paper-2: #131312;
  --ink: #eeeeea;
  --ink-2: #c2c2bd;
  --ink-3: #909089;
  --rule: #333331;
  --rule-2: #212120;
  color-scheme: dark;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;

  --measure: 36rem;
  --wide: 62rem;
  --step: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --fade: 900ms;
}

:root[data-theme="light"] {
  --paper: #ffffff;
  --paper-2: #fbfbfa;
  --ink: #111111;
  --ink-2: #414141;
  --ink-3: #6f6f6f;
  --rule: #d6d6d4;
  --rule-2: #ebebe9;
  color-scheme: light;
}

/* The cross-fade. The script adds `theming` to <html> only while a switch is
   running, so this never touches hover states or the first paint — a global
   transition left on permanently would make every hover feel a second late. */

:root.theming,
:root.theming *,
:root.theming *::before,
:root.theming *::after {
  transition: background-color var(--fade) ease,
              color var(--fade) ease,
              border-color var(--fade) ease,
              outline-color var(--fade) ease,
              fill var(--fade) ease,
              stroke var(--fade) ease,
              opacity var(--fade) ease,
              text-decoration-color var(--fade) ease !important;
}

@media (prefers-reduced-motion: reduce) {
  :root.theming,
  :root.theming *,
  :root.theming *::before,
  :root.theming *::after { transition: none !important; }
}

/* ------------------------------------------------------------------- reset */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.7 var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--rule);
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 10;
  background: var(--paper); color: var(--ink);
  padding: 0.6rem 1rem; border: 1px solid var(--ink);
  text-decoration: none;
}

.muted { color: var(--ink-3); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
}

/* ---------------------------------------------------------- pattern bands */

.band {
  height: 16px;
  background-color: var(--ink);
  opacity: 0.22;
  -webkit-mask-image: url(pattern-band.38188568e2.svg);
  mask-image: url(pattern-band.38188568e2.svg);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 40px 16px;
  mask-size: 40px 16px;
}

/* ------------------------------------------------------------------ header */

.site-head {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.75rem 1.5rem 0;
}

.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 2rem;
  padding-bottom: 1.35rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
}
/* The two logo files are stacked and cross-faded by opacity rather than
   swapped with display, so the mark changes with the rest of the page instead
   of popping halfway through the fade. */
.brand-mark {
  position: relative;
  width: 36px;
  height: 36px;
  display: block;
  flex: none;
}
.brand-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
svg.brand-mark { width: 36px; height: 36px; display: block; flex: none; }

.brand-mark .mark-light { opacity: 0; }
.brand-mark .mark-dark { opacity: 1; }
:root[data-theme="light"] .brand-mark .mark-light { opacity: 1; }
:root[data-theme="light"] .brand-mark .mark-dark { opacity: 0; }

/* ------------------------------------------------------------ theme toggle */

.theme-toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: -6px 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  flex: none;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--rule); }
.theme-toggle svg {
  position: absolute;
  width: 19px;
  height: 19px;
  display: block;
}

/* Show the icon for the theme the button switches *to*: a sun while the page
   is dark, a moon while it is light. Cross-faded, like the logo. */
.theme-toggle .icon-sun { opacity: 1; }
.theme-toggle .icon-moon { opacity: 0; }
:root[data-theme="light"] .theme-toggle .icon-sun { opacity: 0; }
:root[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; }

.brand-name {
  font: 400 1.1rem/1 var(--serif);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-name em {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-left: 0.5em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.6rem;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.site-nav a.current { color: var(--ink); border-bottom-color: var(--ink); }

.site-nav .lang {
  color: var(--ink-3);
  border-left: 1px solid var(--rule);
  padding-left: 1.6rem;
  margin-left: -0.7rem;
}

/* -------------------------------------------------------------------- page */

.page {
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--step) 1.5rem 4.5rem;
}

.page > h1 {
  font: 400 clamp(2rem, 1.5rem + 2vw, 2.75rem)/1.15 var(--serif);
  letter-spacing: -0.01em;
  margin: 0 0 1.75rem;
  max-width: var(--measure);
}

h2 {
  font: 400 clamp(1.3rem, 1.15rem + 0.7vw, 1.55rem)/1.3 var(--serif);
  margin: 3.25rem 0 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-2);
  max-width: var(--measure);
  position: relative;
}
h2::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 2.5rem; height: 2px;
  background: var(--ink);
}
.page > h2:first-of-type { border-top: none; padding-top: 0; margin-top: 2.5rem; }
.page > h2:first-of-type::before { display: none; }

h3 {
  font: 600 1.0625rem/1.4 var(--sans);
  margin: 2rem 0 0.6rem;
}

p { max-width: var(--measure); margin: 0 0 1.15rem; }

.lead {
  font: 400 clamp(1.0625rem, 1rem + 0.45vw, 1.25rem)/1.6 var(--serif);
  color: var(--ink-2);
  max-width: 40rem;
  margin-bottom: 2.25rem;
}

.bullets {
  max-width: var(--measure);
  margin: 0 0 1.5rem;
  padding-left: 1.2rem;
}
.bullets li { margin-bottom: 0.65rem; }
.bullets li::marker { color: var(--ink-3); }
.bullets strong { font-weight: 600; }

/* -------------------------------------------------------------------- hero */

.hero { margin-bottom: 3.25rem; }
.hero h1 {
  font: 400 clamp(2.4rem, 1.6rem + 3.4vw, 3.6rem)/1.05 var(--serif);
  letter-spacing: 0.01em;
  margin: 0 0 1rem;
}
.hero-sub {
  font: 400 clamp(1.0625rem, 1rem + 0.55vw, 1.35rem)/1.55 var(--serif);
  color: var(--ink-2);
  max-width: 32rem;
  margin: 0;
}

/* --------------------------------------------------------------- ornament */

.ornament {
  color: var(--ink);
  opacity: 0.3;
  margin: 3rem 0;
  max-width: var(--measure);
}
.ornament svg { display: block; width: 100%; height: auto; max-width: 20rem; }

/* -------------------------------------------------------------- game card */

.gamecard {
  --card-pad: 2.25rem;
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 2rem var(--card-pad);
  margin: 0 0 1.75rem;
  max-width: 50rem;
}
.gamecard::before, .gamecard::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  background-color: var(--ink);
  opacity: 0.5;
  -webkit-mask-image: url(pattern-key.8a9d5f171b.svg);
  mask-image: url(pattern-key.8a9d5f171b.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
}
.gamecard::before { top: 7px; left: 7px; }
.gamecard::after {
  bottom: 7px; right: 7px;
  transform: rotate(180deg);
}

.gamecard-title {
  font: 400 1.6rem/1.2 var(--serif);
  margin: 0 0 0.6rem;
}

.gamecard-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.8125rem;
  margin: 0 0 1.25rem;
  max-width: none;
}
.gamecard-meta .sep { color: var(--ink-3); }
/* No uppercasing here: the platform names are trademarks, and Turkish
   uppercases "i" as "İ", which would turn iOS into İOS on the /tr/ pages. */
.gamecard-meta .muted { letter-spacing: 0.04em; }

.pill {
  display: inline-block;
  padding: 0.2em 0.75em;
  border: 1px solid var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gamecard-summary { margin-bottom: 1.35rem; }

.gamecard-features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  max-width: var(--measure);
}
.gamecard-features li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.gamecard-features li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border: 1px solid var(--ink);
  transform: rotate(45deg);
}

/* Store links. Plain text buttons rather than the official badges: the badges
   are trademarks with their own artwork rules, and text links with the
   stores' own wording are explicitly allowed by both. Filled, so they read as
   the primary action on the card. */
.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 0.6rem;
  max-width: none;
}
.store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.35rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.store-btn:hover { background: transparent; color: var(--ink); }
.store-note { font-size: 0.875rem; margin: 0 0 1.75rem; }

/* Clickable game cards. The title link is stretched over the whole card, so
   the card is one target; store buttons are lifted above it and stay
   separately clickable. The link keeps its own focus outline, so keyboard
   users always see where they are. */
.gamecard-teaser:hover { border-color: var(--ink-3); }
.teaser-link { color: inherit; text-decoration: none; }
.teaser-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gamecard-teaser .store-btn { position: relative; z-index: 2; }
.teaser-more {
  margin: 1.1rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.gamecard-teaser:hover .teaser-more { color: var(--ink); }

/* Download tiles: one large link per store. The whole tile is the link; the
   button inside it is a styled span, not a second link. */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  max-width: 42rem;
  margin: 0 0 2.25rem;
}
.store-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.6rem 1.6rem 1.4rem;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
  text-decoration: none;
}
.store-tile::before {
  content: "";
  position: absolute;
  top: 7px; left: 7px;
  width: 20px; height: 20px;
  background-color: var(--ink);
  opacity: 0.45;
  -webkit-mask-image: url(pattern-key.8a9d5f171b.svg);
  mask-image: url(pattern-key.8a9d5f171b.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
}
.store-tile:hover { border-color: var(--ink); color: var(--ink); }
.store-tile-name { font: 400 1.65rem/1.2 var(--serif); }
.store-tile-req { font-size: 0.875rem; color: var(--ink-2); }
.store-tile-cta {
  align-self: flex-start;
  margin-top: 1rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.875rem;
  font-weight: 600;
}
.store-tile:hover .store-tile-cta { background: transparent; color: var(--ink); }

/* A game's own page. --card-pad is zero because the screenshot strip is no
   longer inside a card that it could bleed to the edges of. */
.gamepage { --card-pad: 0px; }
.gamepage > .gamecard-meta { margin-bottom: 1.25rem; }

.crumb {
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--ink); }

/* Released games get a filled status pill; games in development keep the
   outlined one, so the difference reads at a glance in either theme. */
.pill-live { background: var(--ink); color: var(--paper); }

.gamecard-announce {
  font-size: 0.9375rem;
  border-top: 1px solid var(--rule-2);
  padding-top: 1.15rem;
  margin-bottom: 0;
}

/* Screenshot strip. It bleeds to the card's edges and scrolls sideways with
   snap points, the way store listings do; the page itself never scrolls
   horizontally. */
.shots {
  margin: 0 calc(-1 * var(--card-pad)) 1.75rem;
  padding: 0 var(--card-pad);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--card-pad);
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.shots:focus-visible { outline-offset: -3px; }
.shots-strip {
  list-style: none;
  display: flex;
  gap: 1rem;
  width: max-content;
  margin: 0;
  padding: 0.25rem 0 1rem;
}
.shot {
  flex: none;
  width: clamp(9.5rem, 38vw, 13.5rem);
  scroll-snap-align: start;
}
.shot figure { margin: 0; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 1.1rem;
  background: var(--paper);
}
.shot figcaption {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-3);
}

@media (max-width: 34rem) {
  .gamecard { --card-pad: 1.35rem; padding: 1.5rem var(--card-pad); }
}

/* ------------------------------------------------------------------ facts */

.facts {
  margin: 0 0 1.75rem;
  max-width: 42rem;
  border-top: 1px solid var(--rule);
}
.fact {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  gap: 0.25rem 1.75rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule-2);
}
.fact dt {
  color: var(--ink-3);
  font-size: 0.8125rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-top: 0.18em;
}
.fact dd { margin: 0; }

@media (max-width: 34rem) {
  .fact { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ table */

.table-wrap { overflow-x: auto; margin: 0 0 1.75rem; max-width: 46rem; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.9375rem;
}
thead th {
  text-align: start;
  font: 600 0.75rem/1.4 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 1.25rem 0.6rem 0;
  border-bottom: 1px solid var(--ink);
}
tbody td {
  padding: 0.85rem 1.25rem 0.85rem 0;
  border-bottom: 1px solid var(--rule-2);
  vertical-align: top;
  line-height: 1.6;
}
tbody tr td:first-child { width: 12rem; }
thead th:last-child, tbody td:last-child { padding-right: 0; }

/* ------------------------------------------------------------------- note */

.note {
  max-width: var(--measure);
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  background: var(--paper-2);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* ------------------------------------------------------------------ button */

.cta-row { margin: 0 0 1.75rem; }

.btn {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.btn:hover { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------- contacts */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
  max-width: 42rem;
  margin: 0 0 2rem;
}
.contact-card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 1.5rem 1.6rem;
}
.contact-card::before {
  content: "";
  position: absolute;
  top: 7px; left: 7px;
  width: 20px; height: 20px;
  background-color: var(--ink);
  opacity: 0.45;
  -webkit-mask-image: url(pattern-key.8a9d5f171b.svg);
  mask-image: url(pattern-key.8a9d5f171b.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
}
.contact-card h3 {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  padding-left: 1.9rem;
}
.contact-card .mail {
  margin: 0 0 0.6rem;
  font: 400 1.125rem/1.4 var(--serif);
}
.contact-card .mail a { word-break: break-word; }
.contact-card .muted { margin: 0; font-size: 0.9375rem; line-height: 1.6; }

/* --------------------------------------------------------------------- faq */

.faq { max-width: 44rem; margin: 0 0 2rem; border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule-2); }
.faq-item summary {
  cursor: pointer;
  padding: 1rem 2.25rem 1rem 0;
  position: relative;
  font-weight: 500;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem; top: 50%;
  transform: translateY(-50%);
  font: 400 1.25rem/1 var(--serif);
  color: var(--ink-3);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-body { padding: 0 0 1.15rem; }
.faq-body p { margin: 0; color: var(--ink-2); }

/* ----------------------------------------------------------------- updated */

.updated {
  margin-top: 3rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ footer */

.site-foot {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.5rem 3.5rem;
  font-size: 0.8125rem;
}
.site-foot .band { margin-bottom: 1.75rem; }

.foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.foot-links, .foot-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.foot-links a, .foot-social a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover, .foot-social a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.foot-legal {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.9;
  max-width: none;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------- print */

@media print {
  .site-head, .site-foot, .skip, .band, .ornament { display: none; }
  body { background: #fff; color: #000; }
  .page { max-width: none; }
  .faq-body { display: block; }
}