/* =====================================================================
   site.css  -  page-local CSS for the public site.

   Part 1 is the beta page's own <style> block, copied. Everything else
   (layout, tiles, chips, buttons, colours) still comes from styles.css.
   Part 2 is the marketing wrap around the game and the legal pages, and
   the utility classes that replace the beta's inline style attributes
   (an inline style attribute is blocked by this site's CSP).
   ===================================================================== */

/* ============================ PART 1 ============================== */

/* Phones read rapid taps as double taps and zoom the page. Kill tap-zoom on
   the game surface (pinch zoom still works), and stop the long-press loupe. */
html { touch-action: manipulation; }
button, .cell, .chip, .tapcol {
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.gl-stack {
  /* four columns carry big tiles, but a five word board must still fit,
     so height gets a vote too */
  --cell: clamp(44px, min(16vw, 8.2vh), 66px);
  --cell: clamp(44px, min(16vw, 8.2dvh), 66px);
  display: flex; flex-direction: column; gap: var(--gap);
  width: max-content; max-width: 100%; margin: 0 auto;
}
.gl-stack .cell { padding: 0; }
.gl-stack .grid { margin: 0; }
.gl-btnrow { justify-content: center; }
.gl-rotor { font-size: 1.15rem; }
/* styles.css zeroes every margin, so the rules list needs its own spacing */
.rulebox ol { padding-left: 1.15rem; }
.rulebox li { margin: 5px 0; }

/* the broken row: red and dashed, a small shake, a slow flicker */
.row.is-glitch { animation: gl-flicker 2.6s steps(1, end) infinite; }
.cell.is-glitch {
  border-style: dashed;
  background-image: linear-gradient(rgba(224,107,87,.13), rgba(224,107,87,.13));
  animation: gl-shake 1.7s ease-in-out infinite;
}
@keyframes gl-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-1.5px, .5px, 0); }
  40% { transform: translate3d(1.5px, -.5px, 0); }
  60% { transform: translate3d(-1px, 0, 0); }
  80% { transform: translate3d(1px, .5px, 0); }
}
@keyframes gl-flicker { 0%, 46%, 53%, 100% { opacity: 1; } 48%, 51% { opacity: .58; } }

/* the win: gold tiles lock in, column by column */
.grid.is-won { filter: drop-shadow(0 0 14px rgba(212,175,55,.22)); }
.cell.is-lock {
  animation: gl-lock .5s ease-out both;
  animation-delay: calc(var(--gl-i, 0) * 55ms);
}
@keyframes gl-lock {
  0%   { transform: translateY(-14%) scale(.88); opacity: .35; }
  60%  { transform: translateY(0) scale(1.07); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* a pinned letter: solid green with a little lock, it never moves. The
   glyph is what carries the meaning for anyone who cannot see the green. */
.cell.is-pin {
  position: relative;
  border-color: var(--green);
  background-image: linear-gradient(rgba(74,164,110,.16), rgba(74,164,110,.16));
  animation: none;
}
.cell.is-pin::after {
  content: '🔒';
  position: absolute; right: 2px; bottom: 1px;
  font-size: 10px; line-height: 1; opacity: .9;
}
.tapcol[disabled] { opacity: .55; cursor: not-allowed; }
#glSizes .chip { cursor: pointer; }
#glSizes .chip--on { background: var(--gold); border-color: var(--gold); color: var(--on); }

/* the story card: numbered blanks fill in as their rows become words */
#glStoryCard { width: 100%; text-align: left; }
#glStory { font-size: .92rem; line-height: 1.7; margin: 0; }
.blank {
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 50px; min-height: 20px; padding: 0 5px; margin: 0 1px;
  justify-content: center; vertical-align: baseline;
  border-bottom: 2px dashed var(--gold);
  font-weight: 700; letter-spacing: .04em;
}
.blank__num {
  font-family: var(--sans); font-size: .6rem; font-weight: 700; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 50%;
  width: 14px; height: 14px; flex: 0 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.blank--filled { border-bottom-style: solid; border-bottom-color: var(--green); }
.blank--filled .blank__word { color: var(--green); }
.blank--filled .blank__num { color: var(--green); border-color: var(--green); }

/* row numbers tie each word to its blank; the rotor bar shifts to match */
.rownum {
  width: 18px; flex: 0 0 18px; align-self: center; text-align: center;
  font-family: var(--sans); font-size: .82rem; font-weight: 700; color: var(--muted);
}
.gl-stack .tapbar { padding-left: calc(18px + var(--gap)); box-sizing: border-box; }

/* the tap itself. Declared after is-glitch so a spinning tile slides
   instead of shaking. */
.cell.is-turn { animation: gl-turn .22s ease-out; }
@keyframes gl-turn {
  0% { transform: translateY(-24%); opacity: .3; }
  100% { transform: none; opacity: 1; }
}

/* the mobile site, or any short window: fold the teaching text so the story
   card and the board still land on one screen. Same rule the other site uses,
   and the same copy is repeated in the how to play section below the game. */
@media (max-width: 520px), (max-height: 780px) {
  .wrap { padding-top:6px; }
  h1 { font-size:1.15rem; letter-spacing:.08em; }
  .crumb { font-size:.7rem; }
  .tagline, .hero { display:none; }
  #glStory { font-size:.86rem; line-height:1.6; }
}

/* ============================ PART 2 ==============================
   Marketing wrap, legal pages, and the classes that replace the beta's
   inline style attributes. */

/* skip link: visible only when it has focus, first thing in the tab order */
.skip {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--on);
  font-family:var(--sans); font-size:.85rem; font-weight:700;
  padding:10px 14px; border-radius:0 0 var(--r) 0; min-height:var(--tap);
  display:inline-flex; align-items:center;
}
.skip:focus { left:0; }

/* utility classes standing in for inline style attributes */
.mt-6  { margin-top:6px; }
.mt-10 { margin-top:10px; }
.mt-14 { margin-top:14px; }
.mt-24 { margin-top:24px; }
.mb-0  { margin-bottom:0; }

/* the line that says which puzzle is on the board */
.modeline {
  font-family:var(--sans); font-size:.74rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gold);
  text-align:center; min-height:1em;
}

/* marketing sections below the game */
.section { width:100%; margin-top:26px; }
.section > h2 {
  font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--edge); padding-bottom:6px; margin-bottom:10px;
}
.section p + p { margin-top:8px; }
.hero { text-align:center; }
.hero p { font-size:.95rem; line-height:1.55; }

.steps { padding-left:1.15rem; }
.steps li { margin:6px 0; }

/* store badges: honest placeholder text, no fake badge art */
.store { text-align:center; }
.store .note { font-size:.9rem; }
.storebtns { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:10px; }

/* footer */
.sitefoot {
  width:100%; margin-top:30px; padding:14px 0 8px;
  border-top:1px solid var(--edge); text-align:center;
}
.sitefoot ul { list-style:none; padding:0; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.sitefoot a { min-height:var(--tap); display:inline-flex; align-items:center; }
.sitefoot .small { margin-top:8px; }

/* legal and 404 pages read as documents, not as a game board */
.doc { text-align:left; }
.doc h2 { margin-top:20px; font-size:1.05rem; }
.doc h3 { margin-top:14px; font-size:.92rem; }
.doc p, .doc li { margin-top:8px; line-height:1.6; }
.doc ul, .doc ol { padding-left:1.2rem; }
.draftflag {
  border:1px dashed var(--gold); border-radius:var(--r);
  padding:10px 12px; margin-top:10px;
  font-family:var(--sans); font-size:.8rem; color:var(--gold);
}