/* ===========================================================================
   GOAL GAPPAY — 90s doodle / VHS / arcade stylesheet
   =========================================================================== */

/* ----------------------------------------------------------------- fonts
   Self-hosted: no Google Fonts call, works offline, nothing to configure. */

@font-face { font-family: 'Permanent Marker'; src: url('../fonts/permanent-marker-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Press Start 2P'; src: url('../fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

@font-face { font-family: 'Caveat'; src: url('../fonts/caveat-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('../fonts/caveat-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('../fonts/caveat-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

@font-face { font-family: 'Noto Nastaliq Urdu'; src: url('../fonts/noto-nastaliq-urdu-arabic-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Noto Nastaliq Urdu'; src: url('../fonts/noto-nastaliq-urdu-arabic-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Noto Nastaliq Urdu'; src: url('../fonts/noto-nastaliq-urdu-arabic-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ------------------------------------------------------------------ tokens */
:root {
  --p-950: #14041c;
  --p-900: #23092f;
  --p-800: #340f45;
  --p-700: #4b1170;
  --p-600: #7b2fa8;
  --p-500: #9b3fd1;
  --p-400: #b45ce4;
  --p-300: #cd8bf2;
  --p-200: #e5c4fb;
  --p-100: #f5eafe;

  --pink: #ff3d8b;
  --cyan: #2fe3e3;
  --mango: #ffb37a;
  --lime: #b6f24a;
  --orange: #ff7a2f;

  --ink: #4b1170;
  --paper: #fffaf0;
  --paper-2: #fff4e2;

  --f-marker: 'Permanent Marker', 'Comic Sans MS', cursive;
  --f-hand: 'Caveat', 'Comic Sans MS', cursive;
  --f-pixel: 'Press Start 2P', monospace;
  --f-body: 'Space Grotesk', system-ui, sans-serif;

  --bd: 3px solid var(--ink);
  --bd-2: 4px solid var(--ink);
  --sh: 6px 6px 0 var(--ink);
  --sh-sm: 4px 4px 0 var(--ink);
  --sh-lg: 10px 10px 0 var(--ink);

  --r: 14px;
  --r-lg: 24px;

  --wrap: 1240px;
  --gut: clamp(1rem, 4vw, 2.5rem);
  --hdr: 74px;
}

/* Urdu typography swaps */
html[lang="ur"] {
  --f-marker: 'Noto Nastaliq Urdu', serif;
  --f-hand: 'Noto Nastaliq Urdu', serif;
  --f-body: 'Noto Nastaliq Urdu', serif;
}
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3 { line-height: 1.9; }
html[lang="ur"] .gg-marq-item, html[lang="ur"] .gg-ttl-scroll span { line-height: 2; }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr) + 14px);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-body);
  font-size: clamp(1rem, .95rem + .2vw, 1.08rem);
  line-height: 1.65;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--mango); outline-offset: 3px; border-radius: 6px; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------------- page background
   Three fixed layers that drift against the scroll, each at its own depth.
   --sy is the raw scroll offset in px and --sp is 0..1 progress through the
   page; both are written once per frame by initParallax() in ui.js.
   The base stays white on purpose — the tint sweep is barely-there, just
   enough to keep the page from feeling like a blank document. The nostalgia
   comes from .bg-grain, now a scattered Memphis doodle print (the same
   triangles/squiggles/rings as the room's carpet) instead of soft colour
   blobs, so the site and the room read as the same world. */
.bg-fixed {
  position: fixed; inset: 0; z-index: -3;
  background-color: #fff;
  background-image: linear-gradient(168deg,
    #ffffff 0%, #fffdfb 20%, #fefbff 45%, #fffcf9 70%, #ffffff 100%);
  background-size: 100% 340%;
  background-position: 0% calc(var(--sp, 0) * 100%);
}

.bg-grain {
  position: fixed; inset: -35vh 0; z-index: -2; pointer-events: none; opacity: .9;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz4KPGcgZmlsbD0nbm9uZScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz4KPHBhdGggZD0nTTE4IDM0IFEyOCAxNCAzOCAzNCBUNTggMzQnIHN0cm9rZT0nIzRiMTE3MCcgc3Ryb2tlLXdpZHRoPSczJyBvcGFjaXR5PScuMTAnLz4KPHBhdGggZD0nTTExOCAxNDIgTDEzMiAxMTYgTDE0NiAxNDIgWicgc3Ryb2tlPScjZmY3YTJmJyBzdHJva2Utd2lkdGg9JzMnIG9wYWNpdHk9Jy4xMScvPgo8Y2lyY2xlIGN4PScxNTAnIGN5PSczOCcgcj0nMTEnIHN0cm9rZT0nI2ZmM2Q4Yicgc3Ryb2tlLXdpZHRoPSczJyBvcGFjaXR5PScuMTAnLz4KPHBhdGggZD0nTTM2IDEyMiBRNDYgMTA2IDU2IDEyMiBRNjYgMTM4IDc2IDEyMicgc3Ryb2tlPScjMmZlM2UzJyBzdHJva2Utd2lkdGg9JzMnIG9wYWNpdHk9Jy4xMScvPgo8cGF0aCBkPSdNOTYgNTggTDEwNCA2NiBMOTYgNzQgTDEwNCA4Micgc3Ryb2tlPScjNGIxMTcwJyBzdHJva2Utd2lkdGg9JzMnIG9wYWNpdHk9Jy4wOScvPgo8cGF0aCBkPSdNMTUwIDEwMCBMMTYwIDkwIEwxNzAgMTAwIFonIHN0cm9rZT0nI2I2ZjI0YScgc3Ryb2tlLXdpZHRoPSczJyBvcGFjaXR5PScuMTInLz4KPGNpcmNsZSBjeD0nMjQnIGN5PScxNTAnIHI9JzcnIHN0cm9rZT0nIzRiMTE3MCcgc3Ryb2tlLXdpZHRoPSczJyBvcGFjaXR5PScuMDknLz4KPC9nPgo8L3N2Zz4=");
  background-size: 180px 180px;
  background-repeat: repeat;
  background-position: 0 calc(var(--sp, 0) * -30vh);
  transform: translate3d(0, calc(var(--sp, 0) * 42vh), 0);
  will-change: transform;
}

/* faint notebook grid over everything */
.bg-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(75,17,112,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75,17,112,.09) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: 0 calc(var(--sy, 0px) * 0.18), 0 0;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 78%);
}

@media (prefers-reduced-motion: reduce) {
  .bg-grain { transform: none; }
  .bg-grid { background-position: 0 0; }
}

/* --------------------------------------------------------------- layout */
.wrap { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; }
.wrap-narrow { --wrap: 860px; }

.sec { position: relative; padding-block: clamp(3rem, 2rem + 5vw, 6.5rem); }
.sec-tight { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem); }

.stack > * + * { margin-top: 1rem; }

/* --------------------------------------------------------------- header */
.hdr {
  position: sticky; top: 0; z-index: 900;
  background: rgba(20, 4, 28, .8);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 4px solid var(--ink);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.hdr.hdr-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .hdr { transition: none; } }
.hdr-in { display: flex; align-items: center; gap: .75rem; min-height: var(--hdr); }

.brand { display: inline-flex; align-items: center; gap: .65rem; flex: none; }
.brand img {
  width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid var(--mango); background: #fff;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover img { transform: rotate(-10deg) scale(1.08); }
.brand-txt { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--f-marker); font-size: 1.2rem; color: #fff; letter-spacing: .01em; }
.brand-sub { font-family: var(--f-pixel); font-size: .46rem; color: var(--mango); letter-spacing: .12em; margin-top: 5px; }

.nav { display: flex; align-items: center; gap: .15rem; margin-inline-start: auto; }
.nav .nav-cta { display: none; }
.nav a {
  padding: .5rem .7rem; border-radius: 10px;
  font-family: var(--f-hand); font-weight: 700; font-size: 1.2rem;
  color: var(--p-200); white-space: nowrap; transition: background .16s, color .16s, transform .16s;
}
.nav a:hover { background: rgba(255,255,255,.14); color: #fff; transform: rotate(-1.5deg); }
.nav a.is-here { background: var(--mango); color: var(--ink); }
.nav a.nav-cta { font-family: var(--f-marker); font-weight: 400; font-size: 1rem; }

.hdr-right { display: flex; align-items: center; gap: .5rem; flex: none; margin-inline-start: auto; }

/* language switcher — styled like little cassette buttons */
.langs { display: flex; gap: 3px; padding: 3px; background: var(--p-950); border: 3px solid var(--ink); border-radius: 10px; }
.langs button {
  font-family: var(--f-pixel); font-size: .5rem; letter-spacing: .06em;
  padding: .5rem .55rem; border: 0; border-radius: 6px;
  background: var(--p-700); color: var(--p-100); transition: transform .12s, background .16s;
}
.langs button:hover { background: var(--p-500); transform: translateY(-2px); }
.langs button[aria-pressed="true"] { background: var(--mango); color: var(--ink); }

.burger {
  display: none; width: 48px; height: 42px; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--mango); border: 3px solid var(--ink); border-radius: 10px; box-shadow: var(--sh-sm);
}
.burger span { width: 20px; height: 3px; background: var(--ink); border-radius: 2px; transition: transform .22s, opacity .18s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1080px) {
  .burger { display: flex; order: 3; }
  .hdr-right { order: 2; }
  .nav .nav-cta { display: inline-flex; margin-top: .8rem; justify-content: center; }
  .nav {
    position: fixed; inset: var(--hdr) 0 auto 0; flex-direction: column; align-items: stretch;
    gap: .2rem; padding: 1rem var(--gut) 1.75rem; margin: 0;
    background: var(--p-950); border-bottom: 4px solid var(--ink);
    max-height: calc(100dvh - var(--hdr)); overflow-y: auto;
    transform: translateY(-14px); opacity: 0; visibility: hidden;
    transition: opacity .22s, transform .22s, visibility .22s;
  }
  .nav.open { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: .85rem 1rem; font-size: 1.3rem; border-radius: 12px; }
  .nav a.nav-cta { font-size: 1rem; }
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--f-marker); font-size: 1rem; line-height: 1;
  padding: .95rem 1.5rem; border: var(--bd); border-radius: 999px;
  background: var(--mango); color: var(--ink); box-shadow: var(--sh);
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s, background .18s;
}
html[lang="ur"] .btn{ font-size: 1.05rem; padding-block: .8rem; }
.btn:hover { transform: translate(-3px,-3px) rotate(-1deg); box-shadow: 9px 9px 0 var(--ink); }
.btn:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--ink); }
.btn-yt { background: #ff2d2d; color: #fff; }
.btn-pink { background: var(--pink); color: #fff; }
.btn-cyan { background: var(--cyan); }
.btn-lime { background: var(--lime); }
.btn-white { background: #fff; }
.btn-sm { padding: .55rem 1rem; font-size: .85rem; box-shadow: var(--sh-sm); }
.btn-lg { padding: 1.1rem 1.9rem; font-size: 1.15rem; }
.btn svg { width: 1.15em; height: 1.15em; fill: currentColor; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.btn-row.center { justify-content: center; }

/* ------------------------------------------------------------- headings */
.kick {
  display: inline-block; font-family: var(--f-pixel); font-size: .55rem; letter-spacing: .14em;
  padding: .55rem .85rem; background: var(--cyan); color: var(--ink);
  border: var(--bd); border-radius: 8px; box-shadow: var(--sh-sm);
  transform: rotate(-2deg); margin-bottom: 1rem;
}
.kick.pink { background: var(--pink); color: #fff; }
.kick.mango { background: var(--mango); }
.kick.lime { background: var(--lime); }
html[lang="ur"] .kick{ font-family: var(--f-body); font-size: .8rem; font-weight: 700; }

h1, h2, h3, h4 { font-family: var(--f-marker); font-weight: 400; margin: 0 0 .5em; line-height: 1.08; color: var(--ink); }
h1 { font-size: clamp(2.6rem, 1.5rem + 5vw, 5.4rem); }
h2 { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.6rem); }
h3 { font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.9rem); }
h4 { font-size: 1.15rem; }

.sec-head { max-width: 800px; margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head p { color: var(--p-700); font-size: 1.06rem; }

.show-intro {
  max-width: 74ch; margin: -.8rem 0 clamp(1.75rem, 1rem + 2.5vw, 3rem);
  font-family: var(--f-hand); font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  line-height: 1.5; color: var(--p-700);
}

/* scrolling title strip */
.ttl-scroll {
  position: relative; overflow: hidden; margin-block: .2rem 1.2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ttl-scroll-track { display: flex; width: max-content; will-change: transform; }
.ttl-scroll span {
  font-family: var(--f-marker); font-size: clamp(2.2rem, 1.4rem + 4vw, 4.6rem);
  line-height: 1; white-space: nowrap; padding-inline-end: .5em;
  color: transparent; -webkit-text-stroke: 2px rgba(75,17,112,.4);
}
.ttl-scroll span:nth-child(even) { color: var(--orange); -webkit-text-stroke: 0; }
html[lang="ur"] .ttl-scroll span { font-size: clamp(1.5rem, 1rem + 2.2vw, 2.8rem); line-height: 2.1; padding-block: .1em; }

/* marquee ticker */
.marq {
  position: relative; overflow: hidden; z-index: 3;
  background: var(--p-700); border-block: var(--bd-2);
  padding-block: .6rem; transform: rotate(-1.4deg) scale(1.04);
}
.marq.pink { background: var(--p-600); transform: rotate(1.2deg) scale(1.04); }
.marq.cyan { background: var(--p-800); transform: rotate(-.8deg) scale(1.04); }
.marq-track { display: flex; width: max-content; animation: marq 30s linear infinite; }
.marq:hover .marq-track { animation-play-state: paused; }
.marq-group { display: flex; align-items: center; gap: 2rem; padding-inline-end: 2rem; }
.marq-item {
  font-family: var(--f-marker); font-size: clamp(1rem, .9rem + .5vw, 1.4rem);
  color: #fff; white-space: nowrap; display: inline-flex; align-items: center; gap: 2rem;
}
.marq-item::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: currentColor; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[dir="rtl"] .marq-track { animation-name: marq-rtl; }
@keyframes marq-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ---------------------------------------------------------------- cards */
.card {
  position: relative; background: var(--paper); color: var(--ink);
  border: var(--bd); border-radius: var(--r-lg); box-shadow: var(--sh);
  padding: clamp(1.3rem, 1rem + 1.4vw, 2.1rem);
}
.card h2, .card h3, .card h4 { color: var(--ink); }
.card-dark { background: var(--p-900); color: var(--p-100); border-color: var(--ink); }
.card-dark h2, .card-dark h3 { color: #fff; }

/* sticky-tape strip on the top corner */
.tape::before {
  content: ''; position: absolute; top: -12px; inset-inline-start: 22px;
  width: 88px; height: 26px; background: rgba(255,179,122,.75);
  border: 2px solid rgba(23,6,31,.35); transform: rotate(-6deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.tape.tape-r::before { inset-inline-start: auto; inset-inline-end: 22px; transform: rotate(5deg); }

.grid { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.7rem); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* --------------------------------------------------------------- hero */
.hero { position: relative; min-height: clamp(560px, 88vh, 900px); display: flex; align-items: center; overflow: hidden; }
.hero-in { position: relative; z-index: 2; padding-block: clamp(2rem,4vw,4rem); pointer-events: none; }
.hero-in > * { pointer-events: auto; }

.hero-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(1.5rem, 2vw, 3rem); align-items: center; }
.hero-art { position: relative; justify-self: end; width: 100%; max-width: 580px; transform: rotate(1.5deg); }
.hero-art img {
  width: 100%; height: auto; display: block; border: var(--bd-2); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); background: var(--p-800);
}
.hero-art::after {
  content: '90s CREW'; position: absolute; top: -14px; inset-inline-end: 18px;
  font-family: var(--f-pixel); font-size: .5rem; letter-spacing: .1em; color: var(--ink);
  background: var(--cyan); border: var(--bd); border-radius: 999px; padding: .4rem .7rem;
  transform: rotate(-6deg); box-shadow: var(--sh-sm);
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { justify-self: center; max-width: 300px; transform: none; }
}

.hero-title { margin: 0 0 1rem; }
.hero-title span {
  display: block; font-family: var(--f-marker);
  font-size: clamp(2.4rem, 1rem + 7.4vw, 7rem); line-height: .92; color: var(--ink);
  text-shadow: 6px 6px 0 var(--mango);
  opacity: 0;
  animation: hero-pop .95s cubic-bezier(.2, .8, .3, 1) forwards;
}
/* Each line slams down a beat after the last, overshooting past its resting
   tilt and rocking back into place — a much bigger, punchier entrance than
   a plain fade, closer to a stamp hitting paper than a UI transition. */
.hero-title span:nth-child(1) { animation-name: hero-pop-1; animation-delay: .1s; }
.hero-title span:nth-child(2) { animation-name: hero-pop-2; animation-delay: .32s; text-shadow: 6px 6px 0 var(--pink); }
.hero-title span:nth-child(3) { animation-name: hero-pop-3; animation-delay: .54s; text-shadow: 6px 6px 0 var(--cyan); }
@keyframes hero-pop-1 {
  0%   { opacity: 0; transform: translateY(110px) scale(.45) rotate(-30deg); }
  50%  { opacity: 1; transform: translateY(-18px) scale(1.16) rotate(7deg); }
  72%  { opacity: 1; transform: translateY(7px) scale(.95) rotate(-6deg); }
  88%  { opacity: 1; transform: translateY(-3px) scale(1.03) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(-2deg); }
}
@keyframes hero-pop-2 {
  0%   { opacity: 0; transform: translateY(110px) scale(.45) rotate(28deg) translateX(.06em); }
  50%  { opacity: 1; transform: translateY(-18px) scale(1.16) rotate(-6deg) translateX(.06em); }
  72%  { opacity: 1; transform: translateY(7px) scale(.95) rotate(5deg) translateX(.06em); }
  88%  { opacity: 1; transform: translateY(-3px) scale(1.03) rotate(-1deg) translateX(.06em); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(1.2deg) translateX(.06em); }
}
@keyframes hero-pop-3 {
  0%   { opacity: 0; transform: translateY(110px) scale(.45) rotate(-28deg); }
  50%  { opacity: 1; transform: translateY(-18px) scale(1.16) rotate(6deg); }
  72%  { opacity: 1; transform: translateY(7px) scale(.95) rotate(-5deg); }
  88%  { opacity: 1; transform: translateY(-3px) scale(1.03) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(-1deg); }
}
html[lang="ur"] .hero-title span { font-size: clamp(2rem, 1rem + 5vw, 4.6rem); line-height: 1.55; }
@media (prefers-reduced-motion: reduce) {
  .hero-title span { opacity: 1; animation: none; }
  .hero-title span:nth-child(1) { transform: rotate(-2deg); }
  .hero-title span:nth-child(2) { transform: rotate(1.2deg) translateX(.06em); }
  .hero-title span:nth-child(3) { transform: rotate(-1deg); }
}

.hero-sub {
  max-width: 46ch; font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem); font-weight: 500;
  color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); margin: 0 0 1.7rem;
  background: rgba(20,4,28,.35); padding: .7rem .95rem; border-radius: 14px;
  border-inline-start: 5px solid var(--mango); backdrop-filter: blur(3px);
}

.scroll-hint {
  position: relative; z-index: 3; font-family: var(--f-hand); font-size: 1.25rem; color: var(--p-700); opacity: .9;
  display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none;
  text-align: center; margin: .4rem auto 1.6rem;
}
.scroll-hint::after { content: '▾'; font-size: 1.4rem; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes sway { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* --------------------------------------------------------- about worlds */
.worlds { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(.75rem,.5rem + 1.5vw,1.6rem); align-items: stretch; }
@media (max-width: 820px) { .worlds { grid-template-columns: 1fr; } .worlds-amp { justify-self: center; } }
.worlds-amp {
  align-self: center; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%;
  background: var(--pink); border: var(--bd); box-shadow: var(--sh);
  font-family: var(--f-marker); font-size: 1.7rem; color: #fff; transform: rotate(-7deg);
}
.world-flag { font-size: 2.1rem; line-height: 1; display: block; margin-bottom: .5rem; }

/* character cards */
.who { display: flex; flex-direction: column; gap: .85rem; text-align: center; }
.who-face {
  width: 132px; height: 132px; margin-inline: auto; border-radius: 50%;
  border: var(--bd); background: var(--p-200); display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 0 0 6px var(--mango); font-family: var(--f-marker); font-size: 2.6rem; color: var(--p-800);
}
.who-face img { width: 100%; height: 100%; object-fit: cover; }
.who-role { font-family: var(--f-pixel); font-size: .5rem; letter-spacing: .08em; color: var(--p-600); }
html[lang="ur"] .who-role{ font-family: var(--f-body); font-size: .8rem; font-weight: 700; }
.who .btn { align-self: center; margin-top: auto; }

/* pillars */
.pillar { position: relative; overflow: hidden; padding: 1.35rem 1.25rem; }
.pillar .e { font-size: 2.5rem; line-height: 1; display: block; margin-bottom: .5rem; }
.pillar h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.pillar p { font-size: .93rem; margin: 0; color: #4a3355; }
.pillar .tag {
  position: absolute; top: 10px; inset-inline-end: -6px; transform: rotate(6deg);
  font-family: var(--f-pixel); font-size: .42rem; letter-spacing: .08em;
  padding: .35rem .6rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--lime);
}
.pillar .tag.soon { background: var(--pink); color: #fff; }
html[lang="ur"] .pillar .tag{ font-family: var(--f-body); font-size: .65rem; font-weight: 700; }
.pillar::before {
  content: ''; position: absolute; top: -34px; inset-inline-end: -34px; width: 96px; height: 96px;
  border-radius: 50%; background: var(--p-100); z-index: 0;
}
.pillar > * { position: relative; z-index: 1; }
.pillar:nth-child(4n+2)::before { background: #ffe9d8; }
.pillar:nth-child(4n+3)::before { background: #ffe0ec; }
.pillar:nth-child(4n+4)::before { background: #d5fbf6; }

/* ------------------------------------------------- the show: an old 90s TV
   Used to be a cinema screen behind a drag-open curtain. Now it's a proper
   box TV: a chunky plastic shell, rabbit-ear antenna, channel knobs, and a
   power button that snaps the tube on/off instead of pulling back fabric. */
.show-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .95fr); gap: clamp(1.25rem, .8rem + 2vw, 2.25rem); align-items: start; }
@media (max-width: 980px) { .show-grid { grid-template-columns: 1fr; } }

.stage { position: relative; }

.tv {
  position: relative; border: 6px solid var(--ink); border-radius: 26px;
  background: linear-gradient(160deg, #d9c7a8, #b9a488);
  padding: 18px 18px 44px; box-shadow: var(--sh-lg);
  margin-top: 30px;
}

/* rabbit-ear antenna, the single most "90s TV" silhouette there is */
.tv-antenna { position: absolute; top: -34px; inset-inline-start: 20%; width: 60%; height: 40px; pointer-events: none; }
.tv-antenna i {
  position: absolute; bottom: 0; left: 50%; width: 4px; height: 38px;
  background: #7a6549; border-radius: 2px; transform-origin: bottom center;
}
.tv-antenna i::after {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--mango); border: 2px solid var(--ink);
}
.tv-antenna i:nth-child(1) { transform: rotate(-32deg); }
.tv-antenna i:nth-child(2) { transform: rotate(32deg); }

.tv-screen {
  position: relative; aspect-ratio: 16/9; width: 100%; overflow: hidden;
  border: 5px solid #1a1118; border-radius: 16px; background: #07030a;
}
.tv-screen iframe, .tv-screen img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.tv-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: .35;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.09) 0 1px, transparent 1px 3px);
}
.tv-glare {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, transparent 32%);
}
.tv-badge {
  position: absolute; bottom: 12px; inset-inline-start: 24px; display: flex; align-items: center; gap: 10px;
  font-family: var(--f-pixel); font-size: .5rem; color: #3b2c22;
}
.tv-badge i { width: 11px; height: 11px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; animation: blink 1.6s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.tv-knobs { position: absolute; bottom: 10px; inset-inline-end: 22px; display: flex; gap: 10px; }
.tv-knobs i { width: 22px; height: 22px; border-radius: 50%; background: #7a6549; border: 3px solid #4b3c2b; }

/* the power overlay: a dead, static-hissing tube until you switch it on */
.tv-power-overlay {
  position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .8rem;
  background: #050208; border: 0; padding: 0; margin: 0; border-radius: 12px;
  cursor: pointer; overflow: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.stage.on .tv-power-overlay { opacity: 0; visibility: hidden; pointer-events: none; }
.tv-static {
  position: absolute; inset: -20%; z-index: 0; opacity: .22; mix-blend-mode: screen;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.6px);
  background-size: 3px 3px;
  animation: tv-static-jitter .15s steps(2) infinite;
}
@keyframes tv-static-jitter {
  0% { transform: translate(0,0); } 50% { transform: translate(-3px,2px); } 100% { transform: translate(2px,-3px); }
}
.tv-power-btn {
  position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mango); border: 3px solid var(--ink); box-shadow: var(--sh-sm);
  color: var(--ink); transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.tv-power-overlay:hover .tv-power-btn, .tv-power-overlay:focus-visible .tv-power-btn { transform: scale(1.1) rotate(-8deg); }
.tv-power-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tv-power-hint {
  position: relative; z-index: 1; font-family: var(--f-hand); font-weight: 700; font-size: 1.15rem; color: #f5eafe;
}

/* the CRT snap: a bright line blooms open on power-up, and collapses shut
   on power-down — the classic tube warm-up/cool-down, not a fade. */
.tv-screen.flash-on { animation: tv-flash-on .5s ease-out both; }
/* No fill-mode here on purpose: tv-flash-off's last frame clips the screen
   down to a thin CRT-collapse line via clip-path. If that held after the
   animation ended (fill-mode "both"/"forwards"), the power button living
   inside this same clipped box would be clipped along with it — leaving
   only a ~2%-tall sliver of it actually clickable, so the TV could never
   be turned back on. Letting the animation end with no fill means the
   element snaps back to its normal (unclipped) styles the instant the
   flash finishes, which is also when the dark "off" overlay should be
   fully visible and tappable again. */
.tv-screen.flash-off { animation: tv-flash-off .38s ease-in; }
@keyframes tv-flash-on {
  0%   { filter: brightness(4) saturate(0); clip-path: inset(49% 0 49% 0); }
  45%  { filter: brightness(2.1) saturate(.5); clip-path: inset(0 0 0 0); }
  100% { filter: brightness(1) saturate(1); clip-path: inset(0 0 0 0); }
}
@keyframes tv-flash-off {
  0%   { filter: brightness(1); clip-path: inset(0 0 0 0); }
  55%  { filter: brightness(2.6); clip-path: inset(0 0 0 0); }
  100% { filter: brightness(4); clip-path: inset(49% 0 49% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tv-power-overlay, .tv-power-btn { transition: none; }
  .tv-static { animation: none; opacity: .12; }
  .tv-screen.flash-on, .tv-screen.flash-off { animation: none; }
}

.stage-meta { margin-top: 1.1rem; }
.ep-label { font-family: var(--f-pixel); font-size: .55rem; color: var(--orange); letter-spacing: .1em; }
html[lang="ur"] .ep-label { font-family: var(--f-body); font-size: .85rem; font-weight: 700; }
.ep-title { font-family: var(--f-marker); font-size: clamp(1.2rem, 1rem + .8vw, 1.75rem); color: var(--ink); margin: .35rem 0 .5rem; line-height: 1.15; }
.ep-blurb { color: var(--p-700); font-size: .98rem; margin-bottom: .9rem; }

/* --------------------------------------------------- the VHS cabinet */
.cabinet {
  background: linear-gradient(180deg, #fffdf7, #f0e9dc);
  border: var(--bd-2); border-radius: 18px; box-shadow: var(--sh-lg);
  padding: 1rem 1rem 1.2rem;
}
.cabinet-top { display: flex; align-items: center; gap: .6rem; padding-bottom: .7rem; border-bottom: 3px dashed #d8cbb5; margin-bottom: .9rem; }
.cabinet-top h3 { margin: 0; font-size: 1.2rem; color: var(--ink); }
.cabinet-top .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--pink); border: 2px solid var(--ink); }
.cabinet-sub { font-family: var(--f-hand); font-size: 1.1rem; color: #6b5a4a; margin: -.5rem 0 .9rem; }

.shelf { display: grid; gap: .55rem; padding: .55rem .5rem .8rem; background: #efe6d6; border: 3px solid #cbbca3; border-radius: 12px; box-shadow: inset 0 -8px 0 #dfd2bd; }
.shelf + .shelf { margin-top: .8rem; }

/* a VHS cassette spine */
.vhs {
  position: relative; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: .6rem;
  padding: .6rem .7rem; min-height: 62px; width: 100%; text-align: start;
  background: linear-gradient(100deg, #241826 0%, #3a2440 45%, #241826 100%);
  border: 3px solid var(--ink); border-radius: 6px; color: #fff;
  box-shadow: 3px 3px 0 rgba(0,0,0,.35); cursor: pointer;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, filter .18s;
}
.vhs::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 8px; bottom: 8px; width: 7px;
  background: repeating-linear-gradient(180deg, var(--mango) 0 6px, var(--pink) 6px 12px, var(--cyan) 12px 18px);
  border-inline-end: 2px solid rgba(0,0,0,.5);
}
.vhs:hover, .vhs:focus-visible { transform: translateX(8px) rotate(-.6deg); box-shadow: 7px 5px 0 rgba(0,0,0,.4); filter: brightness(1.12); }
html[dir="rtl"] .vhs:hover, html[dir="rtl"] .vhs:focus-visible { transform: translateX(-8px) rotate(.6deg); }
.vhs[aria-current="true"] { background: linear-gradient(100deg, #4b1170, #7b2fa8 55%, #4b1170); box-shadow: 0 0 0 3px var(--mango), 4px 4px 0 rgba(0,0,0,.4); }
.vhs-reel {
  width: 26px; height: 26px; border-radius: 50%; background: #0e0810;
  border: 3px solid #6b5a72; margin-inline-start: 6px; position: relative;
}
.vhs-reel::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #cbb9d4; }
.vhs[aria-current="true"] .vhs-reel::after { animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.vhs-body { min-width: 0; }
.vhs-name {
  font-family: var(--f-body); font-weight: 700; font-size: .88rem; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vhs-meta { font-family: var(--f-pixel); font-size: .42rem; color: var(--mango); letter-spacing: .06em; margin-top: 5px; }
html[lang="ur"] .vhs-meta{ font-family: var(--f-body); font-size: .7rem; }
.vhs-dur { font-family: var(--f-pixel); font-size: .45rem; color: #cbb9d4; }
html[lang="ur"] .vhs-dur{ font-family: var(--f-body); font-size: .72rem; }

/* --------------------------------------------------------- shorts rack */
.rack { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 215px); gap: 1rem; overflow-x: auto; padding: .4rem .3rem 1.4rem; scroll-snap-type: x mandatory; }
.rack::-webkit-scrollbar { height: 10px; }
.rack::-webkit-scrollbar-track { background: rgba(255,255,255,.25); border-radius: 99px; }
.rack::-webkit-scrollbar-thumb { background: var(--mango); border-radius: 99px; border: 2px solid var(--ink); }
.short {
  position: relative; scroll-snap-align: start; aspect-ratio: 9/16; overflow: hidden;
  border: var(--bd); border-radius: 14px; background: #120818; box-shadow: var(--sh-sm);
  color: #fff; transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.short:hover { transform: translate(-3px,-4px) rotate(-1.2deg); box-shadow: 8px 9px 0 var(--ink); }
.short img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.short::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,3,14,.9)); }
.short-t { position: absolute; inset: auto .6rem .6rem; z-index: 2; font-weight: 700; font-size: .88rem; line-height: 1.2; }
.short-b {
  position: absolute; top: .55rem; inset-inline-start: .55rem; z-index: 2;
  font-family: var(--f-pixel); font-size: .42rem; padding: .3rem .5rem;
  background: #ff2d2d; border: 2px solid #fff; border-radius: 99px;
}

.empty {
  background: rgba(255,250,240,.94); border: 3px dashed var(--p-600); border-radius: var(--r-lg);
  padding: clamp(1.5rem,1rem + 2vw,2.75rem); text-align: center; color: #4a3355;
}
.empty h3 { color: var(--ink); margin-bottom: .3rem; }

/* -------------------------------------------------- profile pages */
.pro-hero { display: grid; grid-template-columns: minmax(0, 255px) 1fr auto; gap: clamp(1.5rem,1rem + 2.5vw,3rem); align-items: center; }
@media (max-width: 980px) { .pro-hero { grid-template-columns: minmax(0, 220px) 1fr; } .pro-door { grid-column: 1 / -1; justify-self: center; margin-top: .5rem; } }
@media (max-width: 820px) {
  .pro-hero { grid-template-columns: 1fr; text-align: center; }
  .pro-photo { margin-inline: auto; }
  .pro-hero .btn-row { justify-content: center; }
  .pro-door { justify-self: center; }
}
.pro-photo {
  position: relative; width: 100%; max-width: 255px; aspect-ratio: 1; border-radius: 50%;
  border: 5px solid var(--ink); box-shadow: 0 0 0 10px var(--mango), var(--sh-lg);
  overflow: hidden; background: var(--p-300); display: grid; place-items: center;
  font-family: var(--f-marker); font-size: 4.5rem; color: var(--p-800);
}
.pro-photo img { width: 100%; height: 100%; object-fit: cover; }
.pro-tag { font-size: clamp(1.05rem,1rem + .4vw,1.25rem); color: var(--p-700); font-weight: 600; margin-bottom: 1.3rem; }

/* the door into the 3D bedroom — a real drawn door with a tacked-on warning
   note, standing in for what used to be a plain "step into my room" button */
.pro-door {
  position: relative; justify-self: end; display: inline-flex; flex-direction: column;
  align-items: center; gap: .6rem; text-decoration: none; color: inherit;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.pro-door:hover, .pro-door:focus-visible { transform: translateY(-5px) rotate(-1.5deg); }
.pro-door:hover .pro-door-sign, .pro-door:focus-visible .pro-door-sign { transform: translate(-50%,-50%) rotate(-8deg) translateY(-3px); }
.pro-door:hover .pro-door-knob, .pro-door:focus-visible .pro-door-knob { background: var(--pink); }

/* a little hand-painted plaque nailed above the doorway */
.pro-door-label {
  display: inline-block; text-align: center; white-space: nowrap;
  font-family: var(--f-hand); font-weight: 700; font-size: 1.05rem; line-height: 1.1;
  color: var(--ink); background: #fff6df; border: 2px solid rgba(23,6,31,.55);
  padding: .35rem .85rem .4rem; border-radius: 4px; transform: rotate(-2deg);
  box-shadow: var(--sh-sm);
}

.pro-door-frame {
  position: relative; display: block; width: clamp(104px, 5vw + 76px, 152px);
  aspect-ratio: 4 / 7; border-radius: 16px 16px 6px 6px;
  background: linear-gradient(160deg, #d19457, #8a5a30 78%);
  border: var(--bd-2); box-shadow: var(--sh-lg);
}
.pro-door-panel {
  position: absolute; inset-inline: 15%; border: 3px solid rgba(23,6,31,.4); border-radius: 8px;
  background: rgba(255,255,255,.08);
}
.pro-door-panel:nth-child(1) { top: 9%; height: 34%; }
.pro-door-panel:nth-child(2) { top: 51%; height: 34%; }
.pro-door-knob {
  position: absolute; inset-inline-end: 11%; top: 53%; width: 13px; height: 13px; border-radius: 50%;
  background: var(--mango); border: 2px solid var(--ink); transition: background .16s;
}

/* the warning note, tacked to the middle of the door itself rather than
   hanging off to the side */
.pro-door-sign {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-4deg);
  z-index: 2; display: block; text-align: center; white-space: nowrap;
  font-family: var(--f-hand); font-weight: 700; font-size: .92rem; line-height: 1.12;
  color: var(--ink); background: #fff6df; border: 2px solid rgba(23,6,31,.55);
  padding: .4rem .65rem .48rem; border-radius: 4px;
  box-shadow: var(--sh-sm); transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.pro-door-sign::before {
  content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  width: 48px; height: 16px; background: rgba(255,179,122,.75);
  border: 2px solid rgba(23,6,31,.35); box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
@media (prefers-reduced-motion: reduce) { .pro-door, .pro-door-sign { transition: none; } }

/* favourites (countries / cities / sport chips) */
.fav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1rem,.6rem + 1.4vw,1.6rem); }
.fav-group h3 { font-family: var(--f-marker); font-size: 1.1rem; color: var(--ink); margin: 0 0 .8rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-block; font-weight: 700; font-size: .92rem; color: var(--ink);
  background: var(--p-100); border: 2px solid var(--ink); border-radius: 999px;
  padding: .4rem .85rem; box-shadow: var(--sh-sm);
}
.fav-group:nth-child(2) .chip { background: #ffe9d8; }
.fav-group:nth-child(3) .chip { background: #d5fbf6; }

.t10-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: clamp(1rem,.6rem + 1.4vw,1.6rem); }
.t10 {
  background: var(--paper);
  border: var(--bd); border-radius: 16px; box-shadow: var(--sh); padding: 1.15rem 1.2rem 1.4rem;
  position: relative;
}
.t10-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .8rem; }
.t10-head .e { font-size: 1.6rem; }
.t10-head h3 { margin: 0; font-size: 1.15rem; color: var(--ink); }

/* The ruled paper and its margin line are painted on the <ol> itself rather
   than the card, so the rules stay locked to the rows however tall the
   heading above happens to be. One row = exactly one rule (--rule), which
   means a wrapped entry quietly takes two rules and never breaks the rhythm.
   --shift drops the rules to sit under the text baseline instead of mid-row. */
.t10 ol {
  --rule: 31px;
  --margin-x: 34px;
  --shift: -10px;
  counter-reset: n;
  position: relative; z-index: 1;
  display: grid; gap: 0;
  background-image:
    linear-gradient(90deg,
      transparent 0 var(--margin-x),
      rgba(58,120,200,.55) var(--margin-x),
      rgba(58,120,200,.55) calc(var(--margin-x) + 1px),
      transparent calc(var(--margin-x) + 1px)),
    repeating-linear-gradient(180deg,
      transparent 0 calc(var(--rule) - 1px),
      rgba(96,140,190,.3) calc(var(--rule) - 1px) var(--rule));
  background-size: 100% 100%, 100% var(--rule);
  background-position: 0 0, 0 var(--shift);
  background-repeat: no-repeat, repeat;
}
/* RTL: 270deg measures the margin line in from the right edge instead. */
html[dir="rtl"] .t10 ol {
  background-image:
    linear-gradient(270deg,
      transparent 0 var(--margin-x),
      rgba(58,120,200,.55) var(--margin-x),
      rgba(58,120,200,.55) calc(var(--margin-x) + 1px),
      transparent calc(var(--margin-x) + 1px)),
    repeating-linear-gradient(180deg,
      transparent 0 calc(var(--rule) - 1px),
      rgba(96,140,190,.3) calc(var(--rule) - 1px) var(--rule));
}
html[lang="ur"] .t10 ol { --rule: 46px; --shift: -15px; }
/* The number is taken out of flow on purpose: as a grid cell its marker font
   has taller metrics than the body text and stretched every row to 34px,
   which slowly drifted out of step with the 31px rules. Absolute keeps each
   row an exact multiple of --rule. */
.t10 li {
  counter-increment: n;
  position: relative; display: block;
  padding: 0; padding-inline-start: calc(var(--margin-x) + 6px);
  line-height: var(--rule); min-height: var(--rule);
  font-weight: 600; font-size: .97rem;
}
.t10 li:hover { background: rgba(255,179,122,.3); }
.t10 li::before {
  content: counter(n);
  position: absolute; inset-inline-start: 0; top: 0;
  width: calc(var(--margin-x) - 9px); text-align: end;
  line-height: var(--rule);
  font-family: var(--f-marker); font-size: .95rem; color: var(--p-700);
}
.t10 li:nth-child(1)::before { color: var(--ink); font-size: 1.15rem; }
.t10 li:nth-child(2)::before { color: var(--orange); }
.t10 li:nth-child(3)::before { color: var(--p-500); }

.t10 li span[contenteditable] {
  border-radius: 5px; padding: 1px 5px; outline-offset: 2px;
  cursor: text; transition: background .15s;
}
.t10 li span[contenteditable]:hover { background: rgba(123,47,168,.1); }
.t10 li span[contenteditable]:focus { background: #fff; box-shadow: 0 0 0 2px var(--p-500); outline: none; }
.t10-head { justify-content: space-between; }
.t10-edit-hint {
  margin-inline-start: auto; font-family: var(--f-hand); font-size: 1rem; color: var(--p-600);
  display: flex; align-items: center; gap: .5rem;
}
.t10-reset {
  font-family: var(--f-pixel); font-size: .4rem; letter-spacing: .06em; color: var(--p-700);
  background: none; border: 2px solid var(--p-600); border-radius: 999px; padding: .3rem .55rem;
  cursor: pointer;
}
.t10-reset:hover { background: var(--p-600); color: #fff; }
html[lang="ur"] .t10-edit-hint,
html[lang="ur"] .t10-reset{ font-family: var(--f-body); font-size: .78rem; font-weight: 700; }

/* favourite city — polaroid */
.polaroid {
  display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: clamp(1.25rem,1rem + 1.5vw,2.5rem); align-items: center;
}
@media (max-width: 820px) { .polaroid { grid-template-columns: 1fr; } }
.polaroid-pic {
  background: #fff; border: var(--bd); box-shadow: var(--sh-lg); padding: 14px 14px 54px;
  transform: rotate(-2.5deg); position: relative;
}
.polaroid-pic .frame {
  aspect-ratio: 4/3; background: linear-gradient(160deg, var(--p-500), var(--p-950)); display: grid; place-items: center;
  font-size: 4.5rem; border: 2px solid rgba(0,0,0,.3);
}
.polaroid-pic figcaption {
  position: absolute; bottom: 12px; inset-inline-start: 0; inset-inline-end: 0; text-align: center;
  font-family: var(--f-hand); font-size: 1.5rem; color: #2b1b33;
}
.city-country { font-family: var(--f-pixel); font-size: .55rem; letter-spacing: .12em; color: var(--mango); }
html[lang="ur"] .city-country{ font-family: var(--f-body); font-size: .85rem; font-weight: 700; }

/* ------------------------------------------- corner intro TV (draggable) */
.mini-tv {
  position: fixed; z-index: 950; inset-inline-end: 16px; bottom: 16px; width: 224px;
  background: linear-gradient(160deg, #d9c7a8, #ab9476); border: 4px solid var(--ink); border-radius: 16px;
  padding: 10px 10px 8px; box-shadow: var(--sh); touch-action: none;
}
.mini-tv.dragging { cursor: grabbing; }
.mini-tv .grip {
  position: absolute; top: -13px; inset-inline-start: 12px; padding: 2px 9px; cursor: grab;
  font-family: var(--f-pixel); font-size: .38rem; background: var(--mango); border: 3px solid var(--ink); border-radius: 6px;
}
.mini-tv .antenna { position: absolute; top: -26px; inset-inline-end: 26px; width: 40px; height: 26px; pointer-events: none; }
.mini-tv .antenna::before, .mini-tv .antenna::after {
  content: ''; position: absolute; bottom: 0; width: 3px; height: 26px; background: var(--ink); border-radius: 2px;
}
.mini-tv .antenna::before { left: 8px; transform: rotate(-28deg); transform-origin: bottom; }
.mini-tv .antenna::after { right: 8px; transform: rotate(28deg); transform-origin: bottom; }
.mini-tv video { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; border: 3px solid #1a1118; border-radius: 8px; }
.mini-tv .bar { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.mini-tv .bar button {
  flex: 1; padding: .32rem; border: 2px solid var(--ink); border-radius: 6px; background: #f3e6cd;
  font-family: var(--f-pixel); font-size: .38rem; color: var(--ink);
}
.mini-tv .bar button:hover { background: var(--mango); }
.mini-tv.min video, .mini-tv.min .antenna { display: none; }
.mini-tv.min { width: 130px; }
@media (max-width: 620px) { .mini-tv { width: 168px; inset-inline-end: 10px; bottom: 10px; } }

/* --------------------------------------------------------------- footer */
.ftr { position: relative; z-index: 2; background: var(--p-950); border-top: 5px solid var(--ink); padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem); color: var(--p-200); }
.ftr a:hover { color: var(--mango); }
.ftr h4 { font-family: var(--f-pixel); font-size: .55rem; letter-spacing: .12em; color: var(--mango); margin-bottom: .9rem; }
html[lang="ur"] .ftr h4{ font-family: var(--f-body); font-size: .9rem; font-weight: 700; }
.ftr-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(1.5rem,1rem + 2vw,3rem); }
@media (max-width: 820px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr-grid { grid-template-columns: 1fr; } }
.ftr-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.ftr-brand img { width: 62px; height: 62px; border-radius: 50%; border: 3px solid var(--mango); }
.ftr-brand strong { font-family: var(--f-marker); font-size: 1.3rem; color: #fff; font-weight: 400; }
.ftr ul { display: grid; gap: .5rem; }
.socials { display: flex; gap: .55rem; margin-top: 1rem; flex-wrap: wrap; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--p-800); border: 3px solid var(--ink); color: #fff; transition: transform .18s, background .18s; }
.socials a:hover { transform: translateY(-4px) rotate(-7deg); background: var(--p-600); color: #fff; }
.socials svg { width: 21px; height: 21px; fill: currentColor; }
.disclaimer { margin-top: 1.4rem; font-size: .84rem; line-height: 1.65; color: var(--p-300); max-width: 92ch; }
.disclaimer strong { color: var(--mango); font-weight: 700; }
.colophon {
  margin-top: clamp(1.5rem,1.2rem + 1.5vw,2.5rem); padding-top: 1.2rem; border-top: 2px solid var(--p-800);
  display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; justify-content: space-between; align-items: center; font-size: .85rem;
}
.powered { display: inline-flex; align-items: center; gap: .45rem; }
.powered a {
  font-family: var(--f-marker); font-size: 1.05rem; color: var(--mango);
  border-bottom: 3px solid transparent; transition: border-color .2s, transform .2s; display: inline-block;
}
.powered a:hover { border-color: var(--mango); transform: rotate(-2deg); }

/* ------------------------------------------------- konami easter egg */
.gg-party { position: fixed; inset: 0; z-index: 980; pointer-events: none; overflow: hidden; }
.gg-party img {
  position: absolute; top: -90px; will-change: transform;
  animation: gg-fall linear forwards;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
@keyframes gg-fall {
  to { transform: translateY(112vh) rotate(var(--spin, 360deg)); }
}
.gg-toast {
  position: fixed; left: 50%; bottom: 12%; transform: translateX(-50%); z-index: 985;
  font-family: var(--f-pixel); font-size: .62rem; letter-spacing: .1em; color: var(--ink);
  background: var(--lime); border: var(--bd); border-radius: 999px;
  padding: .9rem 1.4rem; box-shadow: var(--sh); pointer-events: none;
  animation: gg-toast-in .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes gg-toast-in { from { opacity: 0; transform: translate(-50%, 22px) scale(.85); } }

@media (prefers-reduced-motion: reduce) { .gg-party { display: none; } }

/* ------------------------------------------------------------- reveal */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* Titles get their own, much bigger entrance than the generic fade-up above:
   a real slam-and-rock-back, like the heading got thrown onto the page and
   bounced twice before settling. Same IntersectionObserver drives it (see
   initReveal in ui.js) — .in just switches from the hidden state to running
   the keyframe animation instead of a plain transition. */
.rv-pop { opacity: 0; }
.rv-pop.in { animation: title-slam .9s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes title-slam {
  0%   { opacity: 0; transform: translateY(100px) scale(.4) rotate(-16deg); }
  50%  { opacity: 1; transform: translateY(-20px) scale(1.14) rotate(6deg); }
  72%  { opacity: 1; transform: translateY(8px) scale(.96) rotate(-4deg); }
  88%  { opacity: 1; transform: translateY(-3px) scale(1.03) rotate(1.5deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .rv-pop { opacity: 1; animation: none; } }

/* doodle divider */
.doodle-line { width: 100%; height: 26px; opacity: .8; }
.doodle-line path { fill: none; stroke: var(--mango); stroke-width: 4; stroke-linecap: round; }

/* back to top */
.to-top {
  position: fixed; inset-inline-start: 16px; bottom: 16px; z-index: 940;
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--cyan); border: 3px solid var(--ink); box-shadow: var(--sh-sm);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s, transform .25s, visibility .25s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 9px 13px 9px; border-color: transparent transparent var(--ink) transparent; }


/* ---- phone header: keep it to brand + language + burger ---------------- */
@media (max-width: 700px) {
  :root { --hdr: 66px; }
  .hdr-right .btn { display: none; }
  .brand img { width: 44px; height: 44px; }
  .brand-name { font-size: 1.02rem; }
  .brand-sub { font-size: .4rem; }
  .langs button { padding: .45rem .45rem; font-size: .45rem; }
}
@media (max-width: 400px) {
  .brand-txt { display: none; }
}

/* ---- small-screen polish ---------------------------------------------- */
@media (max-width: 520px) {
  .hero .btn-row .btn { width: 100%; justify-content: center; }
  .btn-lg { font-size: 1.02rem; padding: .95rem 1.2rem; }
  .btn { max-width: 100%; }
  .mini-tv { width: 150px; }
  .mini-tv .bar button { font-size: .34rem; }
}
@media (max-width: 380px) {
  .mini-tv { width: 132px; }
}

/* ---- air-hockey pucks --------------------------------------------------
   Full-viewport overlay. The layer itself never blocks clicks; the canvas
   only becomes hit-testable right on top of a puck (toggled in JS), so the
   rest of the site stays perfectly clickable underneath. */
#gg-pucks {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
}
#gg-pucks-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; cursor: grab; touch-action: none;
}
#gg-pucks.gg-pucks--grabbing #gg-pucks-canvas { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) {
  #gg-pucks-canvas { cursor: default; }
}

/* ------------------------------------------------------------- the wall
   A corkboard of post-its: stories, feedback, shoutouts. No backend yet —
   everything here lives in this browser's localStorage — so the notice
   banner is load-bearing, not decorative. Keep it honest. */
.postits-notice {
  display: flex; gap: .7rem; align-items: flex-start; max-width: 760px; margin: 0 auto 2.5rem;
  background: #fff6df; border: var(--bd); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  padding: 1rem 1.3rem; font-family: var(--f-hand); font-size: 1.15rem; line-height: 1.4; color: var(--ink);
}
.postits-notice .e { font-size: 1.4rem; line-height: 1; flex: none; }

.postit-form {
  max-width: 560px; margin: 0 auto 3rem; padding: clamp(1.3rem,1rem + 1.4vw,2rem);
  display: grid; gap: 1rem;
}
.postit-form label { font-family: var(--f-marker); font-size: .9rem; color: var(--ink); display: block; margin-bottom: .4rem; }
.postit-form input[type="text"], .postit-form textarea {
  width: 100%; font-family: var(--f-body); font-size: 1rem; color: var(--ink);
  background: #fff; border: var(--bd); border-radius: 12px; padding: .8rem 1rem;
  resize: vertical; box-shadow: inset 2px 2px 0 rgba(75,17,112,.08);
}
.postit-form textarea { min-height: 110px; }
.postit-form input[type="text"]:focus, .postit-form textarea:focus { outline: 3px solid var(--cyan); outline-offset: 1px; }
.postit-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.postit-charcount { font-family: var(--f-hand); font-size: 1rem; color: var(--p-600); }
.postit-toast {
  display: inline-block; font-family: var(--f-hand); font-size: 1.1rem; color: var(--ink);
  background: var(--lime); border: var(--bd); border-radius: 8px; padding: .3rem .8rem;
  transform: rotate(-2deg); opacity: 0; transition: opacity .25s;
}
.postit-toast.show { opacity: 1; }

.postits-board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(1.2rem, 1rem + 1vw, 2rem);
}
.postit {
  position: relative; border: var(--bd); border-radius: 4px; box-shadow: var(--sh-sm);
  padding: 1.3rem 1.2rem 1.1rem; min-height: 170px; display: flex; flex-direction: column;
  font-family: var(--f-hand); color: #241033; transition: transform .18s;
}
.postit:hover { transform: translateY(-4px) rotate(0deg) !important; z-index: 2; }
.postit:nth-child(6n+1) { background: var(--mango); transform: rotate(-2deg); }
.postit:nth-child(6n+2) { background: var(--lime); transform: rotate(1.5deg); }
.postit:nth-child(6n+3) { background: #ffe0ec; transform: rotate(-1deg); }
.postit:nth-child(6n+4) { background: var(--cyan); transform: rotate(2deg); }
.postit:nth-child(6n+5) { background: #d5c8ff; transform: rotate(-1.5deg); }
.postit:nth-child(6n+6) { background: #fff3b0; transform: rotate(1deg); }
.postit::before {
  content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 34px; height: 16px; background: rgba(255,255,255,.55); border: 2px solid rgba(23,6,31,.35);
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.postit-msg { font-size: 1.2rem; line-height: 1.35; margin: 0 0 .8rem; flex: 1; white-space: pre-wrap; word-break: break-word; }
.postit-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-family: var(--f-body); font-size: .8rem; font-weight: 700; color: rgba(36,16,51,.75); }
.postit-del {
  font-family: var(--f-body); font-size: .72rem; font-weight: 700; color: rgba(36,16,51,.6);
  background: rgba(255,255,255,.5); border: 2px solid rgba(23,6,31,.3); border-radius: 999px;
  padding: .2rem .55rem; cursor: pointer; transition: background .15s;
}
.postit-del:hover { background: #fff; }
.postits-empty {
  grid-column: 1 / -1; text-align: center; font-family: var(--f-hand); font-size: 1.3rem;
  color: var(--p-700); padding: 2rem 1rem;
}
@media (prefers-reduced-motion: reduce) { .postit { transition: none; } }