/* SQUEEZE THE ORBS — the game's own look.

   Standalone on purpose. It does not import or extend the studio's style.css:
   the house look is light, flat and brutalist, and this game is a dark warm
   jar with the light going out. A player arriving from a store listing should
   recognise where they have landed before they read a word.

   The palette is lifted from the game itself, lib/render/palette.dart, which
   was emitted by the art tuner and not hand-edited. Same rule here: if a
   colour needs to move, move it in the game's tuner and copy the value across.

   Same constraints as the rest of the site — no build step, no JavaScript, no
   web fonts, no external requests of any kind. These pages have to load for a
   store reviewer years from now with nothing else alive to serve them. */

:root {
  /* Straight out of Palette. */
  --ground:     #0B0806;
  --sky-top:    #100B07;
  --sky-bottom: #050403;

  --ink:  #F2E6D2;              /* Palette.hudInk */
  --dim:  rgba(242, 230, 210, 0.55);   /* hudDim, 0x8C alpha */
  --dimmer: rgba(242, 230, 210, 0.34);

  /* The tier ladder: Spark through Lantern, smallest first. */
  --t0: #FF8A2B;
  --t1: #FFA93D;
  --t2: #FFC85A;
  --t3: #FFDD7A;
  --t4: #FFEC9E;
  --t5: #FFF4C4;
  --t6: #FFFBE4;
  --t7: #FFFFFF;

  --danger: #FF5A3C;            /* Palette.danger — the wall about to close */

  /* Jar furniture. The game draws glass as a hairline the colour of warm
     off-white at low alpha; these are the same values. */
  --glass-edge:  rgba(255, 226, 178, 0.43);  /* glassEdge, 0x6E */
  --glass-lip:   rgba(255, 226, 178, 0.55);  /* glassLip,  0x8C */
  --glass-fill:  rgba(255, 238, 205, 0.043); /* glassFill, 0x0B */
  --glass-sheen: rgba(255, 246, 225, 0.16);  /* glassSheen,0x29 */

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gut: clamp(1.25rem, 5vw, 3rem);
}

* { box-sizing: border-box; }

/* A floor colour under everything. body's background propagates to the canvas,
   but if it ever fails to paint the fallback must be the jar rather than white:
   this page is warm off-white ink and white ink on white is an unreadable page,
   not a slightly wrong one. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--ground);
}

body {
  margin: 0;
  /* The game's own sky: a warm near-black that lifts very slightly at the top,
     with a single amber bloom above the jar's rim. */
  /* The bloom is explicitly sized and not repeated. Percentages inside a
     gradient resolve against its own box, and an unsized layer's box is the
     whole document — so on a long page the glow would stretch down the entire
     page instead of sitting above the rim. */
  background:
    radial-gradient(120% 100% at 50% -12%,
                    rgba(255, 175, 90, 0.14) 0%,
                    rgba(255, 175, 90, 0.045) 45%,
                    transparent 76%) center top / 100% 34rem no-repeat,
    linear-gradient(180deg, var(--sky-top) 0%, var(--ground) 38%, var(--sky-bottom) 100%);
  /* Deliberately NOT background-attachment: fixed — but not for the reason it
     first looked like. A scrolled screenshot came back blank and `fixed` was
     suspected, since it promotes the propagated canvas background to its own
     composited layer. It was not the cause: the same blank capture happens
     without it, and the page renders correctly in a tall viewport with no
     scrolling. That was the preview harness failing to capture after a
     programmatic scroll, not the page.
     `fixed` is still gone, on its own merits — it janks on mobile Safari and
     the gradient spans the document anyway, so it bought nothing. Recorded in
     full because "we removed X and the symptom went away" is exactly the kind
     of false lead that costs a later session an afternoon. */
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.35vw + 0.88rem, 1.05rem);
  line-height: 1.72;
}

a { color: var(--t2); text-underline-offset: 3px; }
a:hover { color: var(--t4); }

:focus-visible { outline: 2px solid var(--t2); outline-offset: 4px; }

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  color: var(--t4);
}

/* ------------------------------------------------------------------ the jar */
/* <main> is the jar: hairline glass down both sides, a brighter lip across the
   top, and the faintest warm fill inside it. The walls do not move here. */

main {
  max-width: 42rem;
  margin: clamp(1.5rem, 5vw, 3.5rem) auto clamp(3rem, 8vw, 5rem);
  padding: clamp(2rem, 6vw, 3.25rem) var(--gut) clamp(3rem, 7vw, 4.5rem);
  border: 1px solid var(--glass-edge);
  border-top: 2px solid var(--glass-lip);
  border-radius: 2px;
  background:
    linear-gradient(180deg, var(--glass-sheen) 0%, transparent 18%),
    var(--glass-fill);
}

/* On a phone the jar's side walls sit on the screen edge and read as a box
   around the text rather than as glass, so drop them and keep the lip. */
@media (max-width: 34rem) {
  main {
    margin-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
}

.back {
  display: inline-block;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  color: var(--dim);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.back:hover { color: var(--ink); }

/* ------------------------------------------------------------- the wordmark */
/* SQUEEZE in ink, THE ORBS in the third tier — the title screen exactly. Thin
   and widely tracked, which is how the game sets every heading it draws. */

h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.9rem, 7vw, 3.1rem);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

h1 .lit { color: var(--t2); }

.sub {
  margin: 0 0 2.5rem;
  color: var(--dim);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h2 {
  margin: 3.25rem 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 226, 178, 0.16);
  color: var(--t2);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

p { margin: 0 0 1.1rem; }

strong { color: var(--t6); font-weight: 600; }

em { color: var(--ink); }

ul { padding-left: 1.15rem; margin: 0 0 1.1rem; }
li { margin-bottom: 0.4rem; }
li::marker { color: var(--t1); }

/* The one statement on the page that has to survive a skim. */
.plain {
  margin: 1.75rem 0;
  padding: 1.15rem 1.35rem;
  border-left: 2px solid var(--t1);
  background: rgba(255, 138, 43, 0.055);
  color: var(--t6);
}

/* --------------------------------------------------------------- the ladder */
/* Eight dots, Spark to Lantern, the same row the game draws under a finished
   run. Decoration, so it is hidden from anything that reads the page aloud. */

.ladder {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  justify-content: center;
  margin: 2.75rem 0 0;
}

.ladder i {
  display: block;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px 1px currentColor;
  opacity: 0.75;
}

.ladder i:nth-child(1) { width: 5px;  height: 5px;  color: var(--t0); }
.ladder i:nth-child(2) { width: 6px;  height: 6px;  color: var(--t1); }
.ladder i:nth-child(3) { width: 7px;  height: 7px;  color: var(--t2); }
.ladder i:nth-child(4) { width: 9px;  height: 9px;  color: var(--t3); }
.ladder i:nth-child(5) { width: 11px; height: 11px; color: var(--t4); }
.ladder i:nth-child(6) { width: 13px; height: 13px; color: var(--t5); }
.ladder i:nth-child(7) { width: 16px; height: 16px; color: var(--t6); }
.ladder i:nth-child(8) { width: 19px; height: 19px; color: var(--t7); }

/* ---------------------------------------------------------------- the links */

.links { list-style: none; padding: 0; margin: 1.5rem 0 0; }

.links li {
  margin: 0;
  border-top: 1px solid rgba(255, 226, 178, 0.16);
}
.links li:last-child { border-bottom: 1px solid rgba(255, 226, 178, 0.16); }

.links a {
  display: block;
  padding: 1rem 0.25rem;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.links a:hover { background: rgba(255, 226, 178, 0.05); }
.links span { display: block; color: var(--dim); font-size: 0.85rem; letter-spacing: 0; }

/* A question and its answer, on the support page. */
.q {
  margin: 1.9rem 0 0.5rem;
  color: var(--t4);
  font-size: 0.95rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------- the floor */

.updated {
  margin-top: 3.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--glass-edge);
  color: var(--dimmer);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

/* A privacy policy is a document a person may well print or save. Give them
   ink on paper rather than a black page. */
@media print {
  body { background: #fff; color: #000; }
  main { border: 0; background: none; max-width: none; }
  h1, h2, .q, strong, code, a { color: #000; }
  h1 .lit { color: #000; }
  .plain { background: none; border-left: 2px solid #000; color: #000; }
  .sub, .updated { color: #444; }
  .back, .ladder { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Nothing animates. Recorded so the next session does not add something
     that does: the page is a legal document and a help desk, not a demo. */
}