/* =======================================================================
   PUNMANTOU WEBSITE — site.css
   Shared by index.html and privacy.html.

   PALETTE: every color on the site is in the block below.
   Change these lines to re-skin both pages at once.
   Matches the game's current approved palette, with one exception noted.
   ======================================================================= */
:root{
  --bg:        #F5F7FA;  /* page background (never pure white) */
  --panel:     #FFFFFF;  /* cards */
  --ink:       #1C222B;  /* main text, tile outlines */
  --ink-dim:   #636F80;  /* secondary text. Game uses #697586, which is
                            slightly too faint to read on --bg (fails the
                            accessibility contrast test). One shade darker. */
  --line:      #CBD4DE;  /* card borders */
  --accent:    #7B3B4E;  /* wordmark, buttons, links, step numbers */
  --on-accent: #FFFFFF;  /* text on accent buttons */
  --green:     #3D8361;  /* tile: right letter, right spot */
  --on-green:  #FFFFFF;
  --yellow:    #FFC933;  /* tile: right letter, wrong spot */
  --on-yellow: #1C222B;
  --halo:      #FFC933;  /* soft glow behind the guru. Use "transparent" to remove */

  /* FONTS. The two named fonts load from files in this folder
     (no Google Fonts). If a file is missing, the next font in line is used. */
  --font-brand: "Yatra One", Georgia, serif;
  --font-tile:  "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-body:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@font-face{
  font-family: "Yatra One";
  src: local("Yatra One"), local("YatraOne-Regular"),
       url("YatraOne-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face{
  font-family: "Atkinson Hyperlegible";
  font-weight: 700;
  src: local("Atkinson Hyperlegible Bold"), local("AtkinsonHyperlegible-Bold"),
       url("AtkinsonHyperlegible-Bold.ttf") format("truetype");
  font-display: swap;
}

/* ---------- Base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.55 var(--font-body);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
img{ display: block; max-width: 100%; }
a{ color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, .btn:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
p{ margin: 0; }
h1, h2, .tagline, .sub, .step-text, .lede, .who{ text-wrap: balance; }

/* One centered column on every screen size. */
.wrap{ width: min(100% - 40px, 560px); margin-inline: auto; }

/* ---------- Small pieces ---------- */
.beta{
  display: inline-block;
  font: 700 0.6875rem/1 var(--font-body);
  letter-spacing: 0.12em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 4px 8px 3px;
  vertical-align: middle;
}
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 240px;
  padding: 0 32px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font: 600 1.0625rem/1 var(--font-body);
  text-decoration: none;
}
.btn:hover{ filter: brightness(1.12); }
.fineprint{ font-size: 0.875rem; color: var(--ink-dim); }

/* ---------- Hero ---------- */
.hero{ text-align: center; padding-top: 36px; }
.guru{
  position: relative;
  display: inline-block;
  height: clamp(200px, 36svh, 320px);
  aspect-ratio: 367 / 705;
}
.guru::before{                      /* the halo */
  content: "";
  position: absolute;
  left: 50%; top: 44%;
  width: 230%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--halo) 34%, transparent),
    color-mix(in srgb, var(--halo) 12%, transparent) 55%,
    transparent);
  pointer-events: none;
}
.guru img{ position: relative; width: 100%; height: 100%; }

.wordmark{
  margin: 18px 0 0;
  font: 400 clamp(2.5rem, 12vw, 3.25rem)/1 var(--font-brand);
  color: var(--accent);
}
.wordmark .beta{ margin-left: 6px; position: relative; top: -0.6em; }
.tagline{
  margin-top: 14px;
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hero .sub{ margin: 10px auto 0; max-width: 32ch; color: var(--ink-dim); }
.hero .btn{ margin-top: 24px; }
.hero .fineprint{ margin-top: 12px; }

/* ---------- Sections ---------- */
section{ padding-top: 64px; }
h2{
  margin: 0 0 20px;
  font: 700 1.5rem/1.25 var(--font-body);
  letter-spacing: -0.01em;
}
.lede{ color: var(--ink-dim); margin-top: -8px; margin-bottom: 20px; }

/* ---------- How to play ---------- */
.steps{ list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.step-text{ display: flex; gap: 12px; align-items: baseline; font-weight: 600; }
.num{ color: var(--accent); font-weight: 700; min-width: 1ch; }
.step-sub{ margin: 4px 0 0 calc(1ch + 12px); color: var(--ink-dim); font-weight: 400; }

.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-top: 12px;
  /* Tile size: always sized so a 10-letter word fits, like the game.
     Same size for every word length. */
  --tile: clamp(22px, calc((min(100vw - 40px, 560px) - 34px - 36px) / 10), 44px);
}
.speak{ display: flex; align-items: center; gap: 14px; }
.speak .head{ height: 104px; width: auto; flex: none; }
.clue{ font-size: 1.25rem; line-height: 1.3; font-weight: 500; }
.card-cap{ text-align: center; font-size: 0.9375rem; color: var(--ink-dim); }
.card-cap b{ color: var(--ink); letter-spacing: 0.06em; }

.tiles{ display: flex; justify-content: center; gap: 4px; margin-top: 14px; }
.card-cap + .tiles{ margin-top: 10px; }
.tile{
  width: var(--tile);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--panel);
  color: var(--ink);
  font: 700 calc(var(--tile) * 0.56)/1 var(--font-tile);
}
.tile.g{ background: var(--green);  color: var(--on-green); }
.tile.y{ background: var(--yellow); color: var(--on-yellow); }

.legend{
  display: grid; justify-content: center;
  gap: 6px; margin-top: 14px;
  font-size: 0.875rem; color: var(--ink-dim);
}
.legend span{ display: inline-flex; align-items: center; gap: 6px; }
.sw{ width: 14px; height: 14px; border: 1.5px solid var(--ink); border-radius: 2px; flex: none; }
.sw.g{ background: var(--green); }
.sw.y{ background: var(--yellow); }

.blend{ margin-top: 12px; text-align: center; color: var(--ink-dim); }
.blend .plus{ color: var(--accent); font-weight: 700; padding: 0 4px; }

/* ---------- Why it's different ---------- */
.points{ display: grid; gap: 18px; }
.points strong{ display: block; }
.points p span{ color: var(--ink-dim); }
.who{ margin-top: 24px; font-weight: 500; }

/* ---------- Install ---------- */
.how-install{ display: grid; gap: 12px; margin: 0; }
.how-install div{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}
.how-install dt{ font-weight: 700; }
.how-install dd{ margin: 2px 0 0; color: var(--ink-dim); }
.install-play{ text-align: center; margin-top: 28px; }

/* ---------- Beta note ---------- */
.note{
  margin-top: 64px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: flex; gap: 12px; align-items: flex-start;
}
.note .beta{ margin-top: 2px; flex: none; }

/* ---------- Footer ---------- */
footer{
  padding: 40px 0 48px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-dim);
}
footer p + p{ margin-top: 6px; }
footer a{ color: var(--ink-dim); }

/* ---------- Privacy page ---------- */
.topbar{ display: flex; align-items: center; gap: 10px; padding-top: 24px; }
.topbar a.brand{ font: 400 1.75rem/1 var(--font-brand); color: var(--accent); text-decoration: none; }
.doc h1{ margin: 40px 0 16px; font: 700 2rem/1.2 var(--font-body); letter-spacing: -0.01em; }
.doc p + p, .doc ul + p{ margin-top: 14px; }
.doc ul{ margin: 14px 0 0; padding-left: 1.2em; }
.doc li + li{ margin-top: 6px; }
.doc .updated{ margin-top: 28px; }
.back{ display: inline-block; margin-top: 28px; }

/* ---------- Larger screens: just more breathing room ---------- */
@media (min-width: 720px){
  .hero{ padding-top: 64px; }
  section{ padding-top: 88px; }
  .tagline{ font-size: 1.625rem; }
}