/* ==========================================================================
   Tiltrow, the landing pages (index.html, bn/index.html).
   Written by the app repo's tool/shots/site_pages.py; the privacy pages keep
   assets/site.css. "Glass and light": a night hero with the app's own
   planets, the playable Ash tray as the lit object in it, daylight ivory
   for reading, and each world on its own ground. Colours are the app's
   (lib/app/theme.dart); contrast is noted where text sits on them.
   No CDN, no trackers: one request plus images, clips load only on screen.
   ========================================================================== */

@font-face {
  font-family: "Fraunces Display";
  src: url("fonts/fraunces-display.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-700.woff2") format("woff2");
  font-weight: 700 800;
  font-display: swap;
}
@font-face {
  font-family: "Hind Siliguri";
  src: url("fonts/hind-siliguri-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Hind Siliguri";
  src: url("fonts/hind-siliguri-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ivory: #f6f1e6;      /* the reading page, Ash's face lifted */
  --paper: #fffdf8;      /* cards */
  --ink: #2a2219;        /* Palette.ash.ink, darkened: 14.2 on ivory */
  --muted: #554a3c;      /* 7.6 on ivory */
  --brass: #7a5e22;      /* links and small accents: 5.3 on ivory */
  --gold: #f2c96b;       /* on night only: 11.4 on --night */
  --night: #0f1230;      /* Galaxy's page, lifted to a blue */
  --night-2: #1b1f52;
  --violet: #5b3fd1;
  --on-night: #f3efe6;
  --on-night-dim: #c9c3d9;   /* 9.6 on --night */
  --onyx: #0f0c0a;        /* Palette.onyx.page */
  --onyx-gold: #d9b86c;   /* Palette.onyx.brass: 9.9 on --onyx */
  --line: rgba(42, 34, 25, .14);
  --shadow: 0 24px 60px rgba(28, 20, 10, .16);
  --r: 22px;
  --maxw: 1180px;
  --pad: clamp(16px, 5vw, 40px);
  --serif: "Fraunces Display", Georgia, "Times New Roman", serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
html[lang="bn"] { --sans: "Hind Siliguri", "Manrope", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 500 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html[lang="bn"] body { font-size: 18px; line-height: 1.7; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--brass); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; margin: 0; }
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3 { font-family: var(--sans); line-height: 1.3; letter-spacing: 0; }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; }
b, strong { font-weight: 700; }

.wrap { width: min(var(--maxw), 100% - 2 * var(--pad)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); color: var(--ink); padding: 8px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.night :focus-visible, .privacy-band :focus-visible { outline-color: var(--gold); }

/* --------------------------------------------------------------- header */
.site-head {
  position: sticky; top: 0; z-index: 30;
  background: rgba(15, 18, 48, .82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  color: var(--on-night);
  transition: box-shadow .2s;
}
.site-head.is-stuck { box-shadow: 0 8px 24px rgba(5, 6, 20, .35); }
.site-head .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.site-head a { color: inherit; text-decoration: none; }
.crumb { font-size: .9rem; color: var(--on-night-dim) !important; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 1.2rem var(--serif); }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: .95rem; }
.nav a { color: var(--on-night-dim) !important; }
.nav a:hover { color: var(--on-night) !important; }
.head-actions { display: flex; gap: 10px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1px solid rgba(243, 239, 230, .3); border-radius: 999px; font-size: .9rem;
}
.chip:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 900px) { .nav { display: none; } .head-actions { margin-left: auto; } }
@media (max-width: 520px) { .crumb { display: none; } .head-actions .chip.priv { display: none; } }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border-radius: 999px; font: 700 1rem var(--sans); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s, box-shadow .15s, background .15s;
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-gold { background: var(--gold); color: #1d1606; box-shadow: 0 10px 30px rgba(242, 201, 107, .28); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(242, 201, 107, .38); }
.btn-line { color: var(--on-night); border-color: rgba(243, 239, 230, .4); }
.btn-line:hover { background: rgba(255, 255, 255, .08); }
.btn-ink { background: var(--ink); color: var(--ivory); }
.btn-ink:hover { transform: translateY(-2px); }
.btn-onyx { background: var(--onyx-gold); color: var(--onyx); }

/* ------------------------------------------------------------------ hero */
.night {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--on-night);
  background:
    radial-gradient(60% 55% at 78% 30%, rgba(91, 63, 209, .55), transparent 70%),
    radial-gradient(45% 50% at 12% 85%, rgba(39, 71, 168, .55), transparent 70%),
    radial-gradient(30% 30% at 35% 10%, rgba(242, 201, 107, .12), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
}
/* A starfield of three sizes, drawn by gradients: no image request. */
.night::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .75;
  background-image:
    radial-gradient(1.2px 1.2px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 140px 90px, #dfe3ff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 80px 160px, #fff6dc 50%, transparent 51%),
    radial-gradient(1px 1px at 190px 210px, #fff 50%, transparent 51%);
  background-size: 230px 240px;
}
.hero { padding: clamp(48px, 8vw, 110px) 0 clamp(70px, 9vw, 120px); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(2.7rem, 5.6vw, 5rem); line-height: 1; }
html[lang="bn"] .hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.2; }
.hero h1 em { font-style: normal; color: var(--gold); }
.store-name { font-size: .98rem; color: var(--on-night-dim); margin: 0 0 18px; }
.hero .lead { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--on-night-dim); max-width: 34em; margin: 22px 0 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.promises { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; color: var(--on-night-dim); font-size: .95rem; }
.promises li:not(:last-child)::after { content: "·"; margin: 0 .6em; color: var(--gold); }

/* The playable tray, lit like an object on a table under a lamp. */
.stage { position: relative; }
.stage::before {
  content: ""; position: absolute; inset: -12% -8% -18%; z-index: -1;
  background: radial-gradient(closest-side, rgba(242, 201, 107, .32), transparent 75%);
  filter: blur(8px);
}
.demo {
  --board: #e9dfcb; --cell: #dcd0b8; --rim: #c6b593;
  --cream: #32291e; --muted-dim: #564e41; --gold: #7a5e22;
  position: relative; z-index: 1;
  background: #faf6ee; color: #32291e;
  border-radius: 28px; padding: 20px;
  box-shadow: 0 40px 90px rgba(4, 5, 25, .55), 0 2px 0 rgba(255, 255, 255, .7) inset;
  transform: perspective(1400px) rotateX(4deg) rotateY(-7deg);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.demo:hover, .demo:focus-within { transform: perspective(1400px) rotateX(0) rotateY(0); }
.demo .fine { font-size: .82rem; line-height: 1.5; color: #564e41; margin: 10px 0 0; }
.stat { min-width: 70px; text-align: center; background: #efe6d4; border-radius: 12px; padding: 6px 12px; line-height: 1.2; }
.stat span { display: block; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #564e41; }
html[lang="bn"] .stat span { letter-spacing: 0; text-transform: none; font-size: .75rem; }
.stat b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* The app's planets, floating at the tray's edges. Tap one and it bursts. */
.float { position: absolute; z-index: 2; animation: drift 7s ease-in-out infinite; }
.float button { all: unset; display: block; cursor: pointer; border-radius: 50%; }
.float button:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.float img { width: 100%; filter: drop-shadow(0 18px 22px rgba(3, 4, 20, .55)); }
.float.far { filter: blur(2px); opacity: .85; }
.float.popped { animation: burst .32s ease-out forwards; }
.f1 { width: 132px; right: -64px; top: -96px; animation-delay: -1s; }
.f2 { width: 96px; left: -52px; bottom: 40px; animation-delay: -3s; }
.f3 { width: 70px; right: 8%; bottom: -46px; animation-delay: -5s; }
@keyframes drift { 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes burst { to { transform: scale(1.5); opacity: 0; } }
.float.back { animation: return .5s ease-out; }
@keyframes return { from { transform: scale(.4); opacity: 0; } }
.shard { position: absolute; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; z-index: 3;
  animation: fly .7s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes fly { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .stage { max-width: 440px; margin: 10px auto 0; width: 100%; }
  .demo { transform: none; }
  .f1 { width: 90px; right: -12px; top: -40px; }
  .f2 { width: 60px; left: -10px; top: -26px; bottom: auto; }
  .f3 { display: none; }
}

/* ------------------------------------------------------------ sections */
section { padding: clamp(64px, 9vw, 120px) 0; }
.head { max-width: 40em; margin-bottom: clamp(28px, 4vw, 48px); }
.head p { font-size: 1.12rem; color: var(--muted); margin-top: 14px; }
.center { text-align: center; margin-inline: auto; }

/* ----------------------------------------------- how to play: the story */
.story { display: grid; grid-template-columns: 1fr 380px; gap: clamp(32px, 6vw, 96px); }
.steps { list-style: none; margin: 0; padding: 0; }
.step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.step:first-child { min-height: 50vh; justify-content: flex-start; padding-top: 8vh; }
.step:last-child { min-height: 60vh; }
.step .n {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  font: 700 1.3rem var(--serif); color: #fff; margin-bottom: 18px;
  background: radial-gradient(circle at 38% 34%, #8da2e8, #33619f 58%, #1c3766);
  box-shadow: 0 8px 18px rgba(51, 97, 159, .35);
}
.step:nth-child(2) .n { background: radial-gradient(circle at 38% 34%, #f19a8f, #c94a3f 58%, #7c2219); box-shadow: 0 8px 18px rgba(201, 74, 63, .35); }
.step:nth-child(3) .n { background: radial-gradient(circle at 38% 34%, #82d8d2, #3aa8a2 58%, #1c625e); box-shadow: 0 8px 18px rgba(58, 168, 162, .35); }
.step:nth-child(4) .n { background: radial-gradient(circle at 38% 34%, #f1cd80, #c9932c 58%, #7a5512); box-shadow: 0 8px 18px rgba(201, 147, 44, .35); }
.step h3 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 14px; }
html[lang="bn"] .step h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.step p { font-size: 1.15rem; color: var(--muted); max-width: 30em; }
.step .inline { display: none; }

.dock { position: sticky; top: 96px; height: calc(100vh - 128px); max-height: 760px; display: grid; place-items: center; }
.phone {
  position: relative; width: 100%; max-width: 340px; aspect-ratio: 9 / 16;
  border-radius: 44px; padding: 10px; background: #15171c;
  box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #000; }
.phone .screen > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.phone .screen > .on { opacity: 1; }
.dock .phone { max-width: min(360px, (100vh - 160px) * .5625); }

@media (max-width: 960px) {
  .story { grid-template-columns: 1fr; }
  .dock { display: none; }
  .step, .step:first-child, .step:last-child { min-height: 0; padding: 0 0 56px; }
  .step .inline { display: block; margin-top: 8px; max-width: 300px; }
}

/* ------------------------------------------------------------ the modes */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mode { border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; color: var(--on-night); box-shadow: var(--shadow); }
.mode .body { padding: 26px 26px 6px; }
.mode h3 { font-size: 2rem; margin-bottom: 4px; }
.mode .tag { font-size: .95rem; opacity: .9; margin-bottom: 14px; }
.mode p { color: inherit; opacity: .92; }
.mode .shot { margin-top: auto; padding: 0 26px; }
.mode .shot .phone { max-width: 250px; margin: 6px auto -90px; transform: rotate(-3deg); }
.mode:nth-child(2) .shot .phone { transform: rotate(2deg); }
.mode .foot { height: 110px; }
.m-classic { background: linear-gradient(160deg, #1f5a68, #0e2b36); }      /* Reef page: 13.8 */
.m-jars    { background: linear-gradient(160deg, #3b3f8f, #101116); }      /* Galaxy page: 11.9 */
.m-journey { background: linear-gradient(160deg, #8b2f33, #14121a); }      /* Lantern page: 12.6 */
.tiers { margin-top: 28px; padding: 22px 26px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; }
.tiers h3 { font-size: 1.3rem; }
.tiers p { margin: 0; color: var(--muted); }
@media (max-width: 960px) {
  .modes { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

/* ------------------------------------------------------------ the Daily */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.facts { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 18px; }
.facts li { padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.facts b { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.facts span { color: var(--muted); }
.calendar { position: relative; max-width: 380px; margin-inline: auto; }
.calendar .page {
  position: relative; border-radius: 26px; overflow: hidden; background: var(--paper);
  box-shadow: var(--shadow); transform: rotate(2.5deg);
}
.calendar .page::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 1;
  background: radial-gradient(circle at 12px 13px, var(--ivory) 6px, transparent 7px) 0 0 / 34px 26px repeat-x, #c9932c;
}
.calendar .page img { margin-top: 26px; }
.calendar .back { position: absolute; inset: 14px 0 -14px 10px; border-radius: 26px; background: #e9dfcb; transform: rotate(-3deg); z-index: -1; }
.medals { display: flex; gap: 10px; margin-top: 22px; }
.medal { flex: 1; text-align: center; padding: 14px 8px; border-radius: 16px; font-size: .92rem; color: var(--ink); }
.medal b { display: block; font: 700 1.6rem var(--serif); }
.medal span { display: block; font-weight: 700; }
.medals-cap { margin: 26px 0 0; font-weight: 700; }
html[lang="bn"] .medal b { font-family: var(--sans); }
.medal.bronze { background: #ecd2b8; }
.medal.silver { background: #e3e3e6; }
.medal.gold { background: #f3dc9c; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } .calendar { order: 2; } }

/* ------------------------------------------------------------ the worlds */
.worlds-band { background: #101116; color: var(--on-night); }
.worlds-band .head p { color: var(--on-night-dim); }
.worlds { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.world {
  position: relative; border-radius: var(--r); padding: 22px 20px 20px; overflow: hidden;
  background: linear-gradient(170deg, var(--page) 0%, var(--page) 46%, var(--face) 100%);
  color: var(--ink-w); display: flex; flex-direction: column; min-height: 330px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.world h3 { font-size: 1.7rem; }
.world .sub { font-size: .95rem; opacity: .92; margin: 6px 0 14px; }
.world .how { margin-top: auto; font-size: .92rem; font-weight: 700; }
.world .how span { display: block; font-weight: 500; opacity: .9; }
.world .set { list-style: none; padding: 12px; margin: 0 0 16px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; background: var(--face); border-radius: 18px; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .25); }
.world .set li { grid-column: span 2; min-width: 0; aspect-ratio: 1; border-radius: 50%; background: var(--well); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); display: grid; place-items: center; }
.world .set img { width: 112%; max-width: none; margin: -6%; }
.world .set li:nth-child(5) { grid-column: 2 / span 2; }
.world.given .badge { position: absolute; top: 20px; right: 18px; font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.world .names { font-size: .84rem; opacity: .9; margin: -6px 0 12px; }
.looks { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 22px; align-items: center; padding: 22px; border-radius: var(--r); background: rgba(255, 255, 255, .06); }
.looks p { margin: 0; color: var(--on-night-dim); flex: 1 1 260px; }
.looks ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.looks li { text-align: center; font-size: .85rem; color: var(--on-night-dim); }
.looks img { width: 64px; margin: 0 auto 4px; }
@media (max-width: 1100px) { .worlds { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .worlds { grid-template-columns: 1fr; } .world { min-height: 0; } }

/* -------------------------------------------------------- the long game */
.awards { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.ladder { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ladder li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); font-size: .98rem; }
.hex { flex: 0 0 34px; height: 38px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, #e8c46a, #a98437); }
.more { margin-top: 26px; display: grid; gap: 12px; }
.more p { margin: 0; color: var(--muted); }
.more b { color: var(--ink); }
.pair { position: relative; height: 620px; }
.pair img { position: absolute; width: 62%; border-radius: 26px; box-shadow: var(--shadow); border: 6px solid #fff; }
.pair img:first-child { left: 0; top: 0; transform: rotate(-4deg); }
.pair img:last-child { right: 0; bottom: 0; transform: rotate(3deg); }
@media (max-width: 960px) { .awards { grid-template-columns: 1fr; } .pair { height: 520px; max-width: 460px; width: 100%; margin-inline: auto; } .ladder { grid-template-columns: 1fr; } }

.access { margin-top: clamp(48px, 7vw, 90px); display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: var(--paper); border: 1px solid var(--line); }
.access img { border-radius: 22px; box-shadow: var(--shadow); }
.access ul { margin: 16px 0 0; padding-left: 1.1em; color: var(--muted); }
.access li { margin-bottom: 6px; }
@media (max-width: 760px) { .access { grid-template-columns: 1fr; } .access img { max-width: 280px; margin-inline: auto; } }

/* --------------------------------------------------------------- screens */
.shots { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--pad) 26px; margin: 0 calc(50% - 50vw); scrollbar-width: thin; }
.shots img { flex: 0 0 auto; width: 270px; border-radius: 18px; scroll-snap-align: center; box-shadow: 0 14px 34px rgba(28, 20, 10, .18); cursor: zoom-in; }
@media (min-width: 1200px) { .shots { justify-content: center; } .shots img { width: 252px; } }
.hint { color: var(--muted); font-size: .95rem; }

/* ------------------------------------------------------------- privacy */
.privacy-band { background: radial-gradient(70% 90% at 85% 10%, #2b2018, transparent 70%), var(--onyx); color: #f1e9dd; }
.privacy-band h2 { color: #f1e9dd; }
.privacy-band .big { font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: #d7cdbd; max-width: 36em; }
.privacy-band a:not(.btn) { color: var(--onyx-gold); }
.tiles { list-style: none; padding: 0; margin: 34px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tiles li { padding: 22px; border-radius: 18px; border: 1px solid rgba(217, 184, 108, .32); background: rgba(255, 255, 255, .03); }
.tiles svg { width: 30px; height: 30px; stroke: var(--onyx-gold); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px; }
.tiles b { display: block; color: #f1e9dd; margin-bottom: 4px; }
.tiles span { color: #cfc4b3; font-size: .95rem; }
@media (max-width: 960px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ FAQ */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 4px 22px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 1.4rem/1 var(--serif); color: var(--brass); }
.faq details[open] summary::after { content: "−"; }
.faq p { color: var(--muted); }

/* --------------------------------------------------------------- footer */
.site-foot { background: var(--night); color: var(--on-night-dim); padding: 40px 0; font-size: .95rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.site-foot a { color: var(--on-night); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.studio { display: inline-flex; gap: 8px; align-items: center; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-foot .fine { flex: 1 1 100%; font-size: .85rem; margin: 0; }

/* ------------------------------------------------------- reveal on scroll */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes rise { from { opacity: 0; transform: translateY(40px); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .float, .float.popped { animation: none; }
  .demo, .demo:hover { transform: none; transition: none; }
  .phone .screen > * { transition: none; }
}

.lead-p { font-size: 1.12rem; color: var(--muted); margin-top: 14px; }

/* The playable tray and the picture viewer, as assets/site.css draws them
   (site.js builds both). Copied, not linked: site.css is the privacy pages'. */
.tray {
  --side: 7;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--side), 1fr);
  gap: 2.2%;
  padding: 3.4%;
  aspect-ratio: 1;
  background: var(--board);
  border: 3px solid var(--rim, #c6b593);
  border-radius: 6%;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .5);
  touch-action: manipulation;
  container-type: inline-size;
}

/* The grain: the same stripes the tray bakes, a few degrees off vertical. */
.tray::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4%;
  pointer-events: none;
  background: repeating-linear-gradient(97deg,
    rgba(50, 41, 30, .055) 0 2px, rgba(50, 41, 30, 0) 2px 13px);
}

.well {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cell);
  box-shadow: inset 0 2px 3px rgba(58, 44, 28, .28),
              inset 0 -1px 0 rgba(255, 255, 255, .45);
  cursor: default;
}
.well.can { cursor: pointer; }

/* A well the picked marble can roll to: a thin ring, the app's `reach`. */
.well.reach::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 2px solid rgba(50, 41, 30, .38);
}

.marble {
  --m: #999;
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: radial-gradient(circle at 44% 41%,
    color-mix(in srgb, var(--m) 74%, #fff) 0,
    var(--m) 55%,
    color-mix(in srgb, var(--m) 60%, #000) 100%);
  box-shadow: 0 2px 2px rgba(58, 44, 28, .3);
  transition: transform .13s cubic-bezier(.33, 1, .68, 1),
              box-shadow .13s cubic-bezier(.33, 1, .68, 1);
}
/* The vane: a lens turned -35deg, in the marble's OWN colour run lighter.
   Never a second hue — a row of four has to still read as four of one. */
.marble::after {
  content: "";
  position: absolute;
  left: 7%; right: 7%; top: 27%; bottom: 27%;
  border-radius: 50%;
  transform: rotate(-35deg);
  filter: blur(1px);
  background: radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb, var(--m) 25%, #fff) 0 22%,
    color-mix(in srgb, var(--m) 55%, #fff) 58%,
    transparent 100%);
}
.marble::before {
  content: "";
  position: absolute;
  left: 15%; top: 13%; width: 19%; height: 19%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  filter: blur(1.2px);
  z-index: 1;
}
.well.picked .marble {
  transform: translateY(-7%) scale(1.07);
  box-shadow: 0 7px 7px rgba(58, 44, 28, .26);
}

/* The marbles coming next, shown small in the well they will land in. */
.ghost {
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: var(--m);
  opacity: .5;
  pointer-events: none;
}

.demo-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.demo-title { font-weight: 700; margin-right: auto; }
.demo-next {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
/* The dots live in an inner span, so that span has to lay them out too:
   an <i> is inline, and width and height do nothing to an inline box. */
.demo-next > span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.demo-next i {
  display: inline-block;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--m, #999);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .18);
}
.demo-hint {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--muted-dim);
  min-height: 1.6em;
}
.demo-hint > span { min-width: 0; }
.demo-hint button {
  /* Never squeezed and never clipped: Bangla's "নতুন ট্রে" is wider than
     "New tray", and as a flex item it shrank until the last letter was
     cut off. */
  flex: 0 0 auto;
  min-width: max-content;
  margin-left: auto;
  font: inherit;
  font-weight: 700;
  color: var(--gold);
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}
/* Bangla needs room the browser does not ask for. Chrome measured
   "নতুন ট্রে" at 50 px in the system fallback and then painted about
   105 px of it, so the last glyph ran off the panel. There is no Bangla
   face in the stack to measure against; until there is, the button is
   given the width by hand. */
:lang(bn) .demo-hint button { min-width: 7.5em; text-align: left; }

/* On a phone the demo's top row is four things on one line, and the
   Bangla title alone is most of that line. Give the title the whole
   first line and let Next, Score and Best share the second. */
@media (max-width: 560px) {
  .demo-title { flex: 1 0 100%; margin-right: 0; }
  .demo-top { gap: 10px; }
  .demo-top .stat { flex: 1 1 auto; }
  .demo-next { margin-right: auto; }
}

/* -------------------------------------------------------------- viewer --- */
/* One screen of the strip, large, in a native <dialog>. Its own dark
   ground whatever the page's palette: a lightbox is a cinema, not a page.
   Built by site.js on first use; with no JS there is no viewer and the
   strip is a plain row of pictures. */

.shots img { cursor: zoom-in; }

html:has(.shot-viewer[open]) { overflow: hidden; }

.shot-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0c0c0e;
  color: #ededf0;
}
.shot-viewer::backdrop { background: #0c0c0e; }
.shot-viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.sv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(16px, 4vw, 32px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.sv-count { margin: 0; font-size: .95rem; color: #b6b6c0; }

.shot-viewer button {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 10px;
  background: none;
  color: #ededf0;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.shot-viewer button:hover { border-color: #b6b6c0; background: rgba(255, 255, 255, .06); }
.sv-arrow { padding: 0 !important; }
.sv-arrow svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sv-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px clamp(16px, 4vw, 32px);
  min-height: 0;
}
.sv-stage img {
  margin: auto;
  width: auto;
  height: auto;
  /* Never larger than the file: a stretched screenshot is a blur. */
  max-width: min(100%, 540px);
  max-height: calc(100vh - 190px);
  max-height: calc(100dvh - 190px);
  border-radius: 10px;
  border: 0;
}

.sv-cap {
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px) 22px;
  max-width: 64ch;
  min-height: 3.2em;
  text-align: center;
  color: #b6b6c0;
  font-size: .95rem;
  line-height: 1.5;
}

/* On a phone the arrows move under the picture, where a thumb is. */
@media (max-width: 620px) {
  .sv-stage { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sv-stage img { grid-column: 1 / -1; grid-row: 1; max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); }
  .sv-arrow { grid-row: 2; width: 100%; }
}
/* The Daily's result is a card over a shaded tray: show the card. */
.calendar .page img { aspect-ratio: 540 / 640; object-fit: cover; object-position: 50% 64%; }
.dot { white-space: nowrap; }
.dot:not(:last-child)::after { content: " ·"; }
.privacy-band .big { margin-top: 18px; }

/* --------------------------------------------------------------- trailer */
.video { max-width: 960px; margin: 0 auto; }
.video-poster, .video iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--r); overflow: hidden; background: #2a2219; box-shadow: var(--shadow); }
.video-poster img { width: 100%; height: 100%; object-fit: cover; }
.video-play { position: absolute; left: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 28px); display: inline-flex;
  align-items: center; gap: 10px; padding: 14px 24px 14px 18px; border-radius: 999px; background: var(--ink); color: var(--ivory);
  font-weight: 700; white-space: nowrap; transition: transform .18s ease; }
.video-play svg { width: 24px; height: 24px; fill: currentColor; }
.video-poster:hover .video-play { transform: scale(1.05); }
.video figcaption { margin-top: 12px; text-align: center; font-size: .9rem; color: var(--muted); }
@media (max-width: 600px) {
  .video-play { padding: 13px; }
  .video-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}