/* OS99 Games. One stylesheet for every page.
   Layout idea: a fighting-game character select. The roster picks the game, the stage shows it. */

@font-face { font-family: "Plex Sans Arabic"; src: url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-024F, U+2010-205F, U+20AC, U+2190-21FF, U+25A0-25FF; }
@font-face { font-family: "Plex Sans Arabic"; src: url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-024F, U+2010-205F, U+20AC, U+2190-21FF, U+25A0-25FF; }
@font-face { font-family: "Plex Sans Arabic"; src: url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex Sans Arabic"; src: url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex Mono"; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "VT323"; src: url(fonts/vt323-latin-400-normal.woff2) format("woff2"); font-display: swap; }

:root {
  --bg: #0b0b0d;
  --panel: #131317;
  --ink: #f2f2f2;
  --ink-2: #a8a8b0;
  --line: #2a2a31;
  --hot: #ff5a1f;          /* the P1 colour: selection, buttons, focus */
  --sans: "Plex Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
  --mono: "Plex Mono", ui-monospace, Consolas, monospace;
  --pixel: "VT323", "Plex Mono", monospace;
  --pad: clamp(1.25rem, 4.5vw, 4rem);
  --head: 4.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); }
:lang(ar) body, body:lang(ar) { line-height: 1.85; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: #fff; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.1; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: -999px; top: .5rem; z-index: 20; background: var(--hot); color: #000; padding: .5rem 1rem; font-weight: 600; }
.skip:focus { inset-inline-start: .5rem; }

/* pixel type: VT323 has no Arabic, so Arabic pages swap to the sans at a matching size */
.wordmark, .chip, .start, .r-name, .sheet h2, .press h3, .trailer-btn { font-family: var(--pixel); font-weight: 400; }
:lang(ar) .chip, :lang(ar) .start, :lang(ar) .sheet h2, :lang(ar) .press h3, :lang(ar) .trailer-btn { font-family: var(--sans); font-weight: 600; }

/* ---------- header ---------- */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; min-height: var(--head); padding: .75rem var(--pad); border-bottom: 1px solid var(--line); }
.wordmark { font-size: 2rem; line-height: 1; text-decoration: none; letter-spacing: .02em; }
.wordmark:hover { color: var(--hot); }
.top ul { display: flex; flex-wrap: wrap; gap: .35rem 1.6rem; list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.top nav a { color: var(--ink-2); text-decoration: none; }
.top nav a:hover { color: #fff; }
.top nav a[aria-current] { color: #fff; box-shadow: 0 2px 0 var(--hot); }
.lang:lang(ar) { font-family: var(--sans); }

/* ---------- the select screen ---------- */
.select { display: flex; flex-direction: column; min-height: calc(100svh - var(--head)); }
.stages { flex: 1; display: flex; flex-direction: column; }
.stage { position: relative; flex: 1; display: flex; align-items: center; min-height: clamp(28rem, calc(100svh - var(--head) - 10.75rem), 48rem); overflow: hidden; }
.js .stage:not(.on) { display: none; }

.stage-pic { position: absolute; inset-block: 0; inset-inline-end: 0; width: 66%; background: #000; }
.stage-pic img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
[dir="rtl"] .stage-pic img { clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%); }
.stage-pic { background: none; }
.stage-pic::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, var(--bg) 0, rgba(11,11,13,.55) 22%, rgba(11,11,13,0) 45%); }
[dir="rtl"] .stage-pic::after { background: linear-gradient(to left, var(--bg) 0, rgba(11,11,13,.55) 22%, rgba(11,11,13,0) 45%); }

.stage-text { position: relative; z-index: 1; width: min(100%, 44rem); padding: 3rem var(--pad); }
.chip { display: inline-block; margin: 0 0 1.1rem; padding: .2rem .6rem .05rem; background: var(--hot); color: #000; font-size: 1.6rem; line-height: 1; }
:lang(ar) .chip { font-size: 1rem; padding: .25rem .7rem; }
.back { display: inline-block; margin-bottom: 1.1rem; font: 400 1.5rem/1 var(--pixel); color: var(--ink-2); text-decoration: none; }
.back::before { content: "\25C0\00a0"; color: var(--hot); }
[dir="rtl"] .back::before { content: "\25B6\00a0"; }
:lang(ar) .back { font: 600 1rem/1.4 var(--sans); }
.title { font-size: clamp(3rem, 7.4vw, 6.75rem); line-height: .92; letter-spacing: -.035em; margin: 0 0 1.25rem; overflow-wrap: anywhere; }
.title.long { font-size: clamp(2.6rem, 5.4vw, 5rem); }
.proto .title, .proto .title.long { font-size: clamp(2.2rem, 4.2vw, 3.75rem); }
.proto .hook { font-size: 1.125rem; max-width: 34ch; }
:lang(ar) .title { letter-spacing: 0; line-height: 1.15; }
.hook { font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.4; max-width: 26ch; margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.6rem 0 0; padding: 0; max-width: 34rem; }
.tags li { font: 400 .8125rem/1.3 var(--mono); padding: .4rem .65rem; border: 1px solid #3b3b44; background: rgba(11,11,13,.82); color: #d6d6dc; }
:lang(ar) .tags li { font: 400 .875rem/1.4 var(--sans); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin: 2rem 0 0; }
.start { display: inline-block; padding: .55rem 1.1rem .4rem; background: var(--hot); color: #000; font-size: 1.75rem; line-height: 1; text-decoration: none; }
.start:hover { background: #fff; color: #000; }
:lang(ar) .start { font-size: 1.0625rem; padding: .7rem 1.2rem; }
.more { color: var(--ink); font-size: .9375rem; }
.stamp { display: inline-block; margin: 0 0 1rem .5rem; padding: .15rem .5rem; border: 2px solid var(--hot); color: var(--hot); font: 400 .75rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-3deg); vertical-align: middle; }
:lang(ar) .stamp { font: 600 .8125rem/1.4 var(--sans); letter-spacing: 0; }

/* prototypes have no screenshot here: a dim pixel grid with the name, like an unlit slot */
.proto-pic { display: grid; place-items: center; }
.proto-pic::before { content: ""; position: absolute; inset: 0; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); background-color: #101013;
  background-image: linear-gradient(#1c1c22 1px, transparent 1px), linear-gradient(90deg, #1c1c22 1px, transparent 1px); background-size: 28px 28px; }
[dir="rtl"] .proto-pic::before { clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%); }
.proto-pic span { position: relative; font: 400 clamp(3.5rem, 8vw, 7.5rem)/1 var(--pixel); color: #2c2c34; text-align: center; padding: 0 2rem; }

/* one moment of motion: the new pick slides into place */
@media (prefers-reduced-motion: no-preference) {
  .js .stage.on .stage-pic img, .js .stage.on .proto-pic span { animation: slide-in .26s cubic-bezier(.2, .7, .2, 1); }
  .js .stage.on .title { animation: blink-in .18s steps(3); }
  @keyframes slide-in { from { transform: translateX(5%); opacity: .3; } }
  @keyframes blink-in { from { opacity: 0; } }
  [dir="rtl"] .js .stage.on .stage-pic img { animation-name: slide-in-rtl; }
  @keyframes slide-in-rtl { from { transform: translateX(-5%); opacity: .3; } }
}

/* ---------- roster ---------- */
.roster { background: #000; border-top: 3px solid var(--hot); padding: .55rem var(--pad) .7rem; }
.roster-hint { margin: 0 0 .35rem; font: 400 .75rem var(--mono); color: #9a9aa3; }
:lang(ar) .roster-hint { font: 400 .8125rem var(--sans); }
.tiles { display: flex; align-items: flex-end; gap: .6rem; overflow-x: auto; padding: .35rem .2rem .3rem; scrollbar-width: thin; scrollbar-color: #333 #000; }
.r { flex: none; position: relative; display: block; width: 8.75rem; aspect-ratio: 16 / 10; overflow: hidden; border: 3px solid #34343b; background: #141418; text-decoration: none; }
.r img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.75) brightness(.7); }
.r-name { position: absolute; inset-inline: 0; bottom: 0; padding: .2rem .4rem .05rem; background: rgba(0,0,0,.78); color: #fff; font-size: 1.1rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:lang(ar) .r-name { font-family: var(--pixel), var(--sans); line-height: 1.35; font-size: 1rem; }
.r:hover img, .r:focus-visible img { filter: none; }
.r:hover { border-color: #6a6a74; }
.r.on { width: 11rem; border-color: var(--hot); }
.r.on img { filter: none; }
.r.on::after { content: "P1"; position: absolute; top: 0; inset-inline-start: 0; padding: .15rem .35rem 0; background: var(--hot); color: #000; font: 400 1.1rem/1 var(--pixel); }
.r.p { width: 6.75rem; aspect-ratio: 4 / 3; display: grid; place-items: center; background: #111114; }
.r.p .r-name { position: static; background: none; white-space: normal; text-align: center; color: #8a8a93; font-size: 1.05rem; padding: .3rem; }
.r.p.on { width: 8rem; }
.r.p.on .r-name, .r.p:hover .r-name { color: #fff; }

/* ---------- studio strip under the select ---------- */
.studio { padding: clamp(3rem, 6vw, 5rem) var(--pad); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.studio .intro { font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.35; max-width: 32ch; margin: 0; }
.hello { color: var(--ink-2); margin: 0; }
.hello a { color: var(--ink); font-weight: 600; }

/* ---------- game page ---------- */
.profile .stage { min-height: clamp(30rem, 70svh, 44rem); }
.profile .stage-text { padding-top: 2.5rem; }
.sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: 3rem clamp(2rem, 5vw, 5rem); padding: clamp(3rem, 6vw, 5rem) var(--pad); border-top: 3px solid var(--hot); }
.sheet h2 { font-size: 2rem; line-height: 1; color: var(--hot); margin: 3rem 0 1rem; }
.sheet > div > h2:first-child, .sheet aside > h2:first-child { margin-top: 0; }
:lang(ar) .sheet h2 { font-size: 1.3rem; line-height: 1.5; }
.sheet p { max-width: 64ch; color: #d4d4da; }
.list { list-style: none; margin: 0; padding: 0; max-width: 64ch; }
.list li { position: relative; padding: .3rem 0; padding-inline-start: 1.5rem; color: #d4d4da; }
.list li::before { content: "\25B8"; position: absolute; inset-inline-start: 0; color: var(--hot); }
[dir="rtl"] .list li::before { content: "\25C2"; }

.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem 1.25rem; margin: 0; font-size: .9375rem; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; }
.note { border-inline-start: 3px solid var(--hot); padding-inline-start: 1rem; font-size: .9375rem; }
.credits p { font-size: .9375rem; color: var(--ink-2); }
.credits a { color: var(--ink); }
.fine { font-size: .8125rem; color: var(--ink-2); margin-top: .6rem; }

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.gallery figure { margin: 0; }
.gallery img { border: 1px solid var(--line); width: 100%; }
.gallery a:hover img { border-color: var(--hot); }
.gallery figcaption { font-size: .8125rem; color: var(--ink-2); margin-top: .45rem; }

.trailer { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); max-width: 56rem; }
.trailer img, .trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.trailer img { opacity: .6; }
.trailer-btn { position: absolute; inset-inline-start: 1.25rem; bottom: 1.25rem; padding: .5rem 1rem .35rem; background: var(--hot); color: #000; font-size: 1.75rem; line-height: 1; text-decoration: none; }
.trailer-btn:hover { background: #fff; color: #000; }
:lang(ar) .trailer-btn { font-size: 1rem; padding: .65rem 1.1rem; }

/* ---------- press kit ---------- */
.press { padding: clamp(2.5rem, 5vw, 4.5rem) var(--pad) 4rem; }
.press-head h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: -.03em; margin-bottom: 1rem; }
:lang(ar) .press-head h1 { letter-spacing: 0; }
.lede { font-size: 1.15rem; max-width: 60ch; color: #d4d4da; }
.press-studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; margin-top: 2.5rem; padding: 1.75rem; border: 1px solid var(--line); background: var(--panel); }
.press-studio p { max-width: 54ch; }
.jump ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 0; margin: 2rem 0 0; }
.jump a { font-weight: 600; }
.press-game { margin-top: 4.5rem; padding-top: 2.5rem; border-top: 3px solid var(--hot); }
.press-game > h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.02em; margin-bottom: 1.5rem; }
:lang(ar) .press-game > h2 { letter-spacing: 0; }
.press h3 { font-size: 1.6rem; color: var(--hot); margin: 2rem 0 .6rem; }
:lang(ar) .press h3 { font-size: 1.15rem; }
.press-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 4rem; }
.press-grid > div > h3:first-child { margin-top: 0; }
.press p { max-width: 64ch; color: #d4d4da; }
.press .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.files { list-style: none; padding: 0; margin: 0; }
.files li { padding: .25rem 0; }
.files span { color: var(--ink-2); font-size: .8125rem; }
.dl { font-weight: 600; }
.press .start { font-size: 1.5rem; margin-top: 1.25rem; }
.press .trailer { max-width: 40rem; }

/* ---------- footer ---------- */
.foot { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding: 2rem var(--pad) 2.5rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-2); }
.foot a { color: var(--ink); }

/* ---------- phones and narrow windows ---------- */
@media (max-width: 860px) {
  :root { --head: 4rem; }
  .select { min-height: 0; }
  .roster { order: -1; border-top: 0; border-bottom: 3px solid var(--hot); padding-block: .6rem .7rem; }
  .roster-hint { display: none; }
  .r { width: 7.5rem; } .r.on { width: 9rem; } .r.p { width: 5.5rem; } .r.p.on { width: 6.5rem; }
  .stage { display: block; min-height: 0; }
  .stage-pic { position: relative; width: 100%; aspect-ratio: 16 / 9; }
  .stage-pic img, [dir="rtl"] .stage-pic img, .proto-pic::before, [dir="rtl"] .proto-pic::before { clip-path: none; }
  .stage-pic::after { background: linear-gradient(to top, var(--bg) 0, rgba(11,11,13,0) 35%); }
  [dir="rtl"] .stage-pic::after { background: linear-gradient(to top, var(--bg) 0, rgba(11,11,13,0) 35%); }
  .stage-text { padding: 1.25rem var(--pad) 2.5rem; margin-top: -2.5rem; }
  .profile .stage { min-height: 0; }
  .studio, .sheet, .press-studio, .press-grid { grid-template-columns: 1fr; }
  .press .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .gallery, .press .gallery { grid-template-columns: 1fr; }
  .top ul { gap: .3rem 1.1rem; }
}