/* =====================================================================
   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 one rule the beta engine used to inject at runtime as a
   <style> element; a strict CSP with no unsafe-inline blocks that, so it
   lives here instead.
   Part 3 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 also 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
   on tiles and keys. */
html { touch-action: manipulation; }
button, .cell, .chip, .kswatch, .door {
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#kb { width:100%; max-width:24rem; display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.krow { display:flex; gap:4px; justify-content:center; width:100%; }
.key {
  flex:1 1 0; min-width:0; min-height:46px; padding:0 2px;
  font-family:var(--sans); font-size:.85rem; font-weight:700; text-transform:uppercase;
  background:var(--tile); color:var(--ink);
  border:1px solid var(--edge); border-radius:var(--r-sm);
  box-shadow:var(--shadow); cursor:pointer; user-select:none;
  transition:transform .06s ease, background .16s, border-color .16s;
}
.key:active { transform:translateY(2px); box-shadow:none; }
.key--wide { flex:1.7 1 0; font-size:.66rem; }
.key.g { background:var(--green); border-color:var(--green); color:var(--on); }
.key.y { background:var(--gold);  border-color:var(--gold);  color:var(--on); }
.key.p { background:var(--blue);  border-color:var(--blue);  color:var(--on); }
.key.x { background:var(--dim);   border-color:var(--dim);   color:var(--ink); }

/* the how to card folds away in place, it never covers anything */
details.rulebox { padding:0 14px; }
details.rulebox[open] { padding-bottom:12px; }
details.rulebox > summary {
  font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--ink);
  list-style:none; cursor:pointer; min-height:var(--tap);
  padding:12px 0; display:flex; align-items:center; justify-content:space-between; gap:8px;
}
details.rulebox > summary::-webkit-details-marker { display:none; }
details.rulebox > summary::after { content:'show'; color:var(--muted); font-weight:400; }
details.rulebox[open] > summary::after { content:'hide'; }

/* one-screen mobile fit: tiles and keys scale with the screen height */
:root { --cell:clamp(32px, min(12.6vw, 5.5vh), 52px); --cell:clamp(32px, min(12.6vw, 5.5dvh), 52px); }
.key { min-height:clamp(28px, 4.5vh, 46px); min-height:clamp(28px, 4.5dvh, 46px); }
#say:empty, #proof:empty { min-height:0; }

/* submit sits on its own centered row under the letters */
.krow--submit { justify-content:center; margin-top:2px; }
.key--submit {
  flex:0 1 auto; width:min(72%, 15rem);
  min-height:clamp(36px, 5vh, 48px); min-height:clamp(36px, 5dvh, 48px);
  font-size:.8rem; letter-spacing:.06em;
}

/* the mobile site, or any short window: fold teaching text, tighten the rest */
@media (max-width: 520px), (max-height: 780px) {
  .wrap { padding-top:6px; }
  h1 { font-size:1.15rem; letter-spacing:.08em; }
  .crumb { font-size:.7rem; }
  /* .hero folds away with the other teaching text so the board and the
     keyboard still land on one screen, which is the beta's own rule for
     small screens. The same copy is repeated in the how to play section
     below the game, which is never hidden, so nothing is lost to a
     crawler or to a reader who scrolls. */
  .tagline, .fold, .hero { display:none; }
  details.rulebox > summary { min-height:30px; padding:5px 0; }
  .rulehead { font-size:.7rem; }
  .msg { line-height:1.3; }
  .chiprow { gap:4px; }
  #rules .chip { font-size:.68rem; padding:3px 8px; min-height:30px; }
  #kb { gap:4px; margin-top:4px; }
  .krow { gap:3px; }
  .grid { margin:2px 0; --gap:4px; }
}

/* the really short screens get one more notch */
@media (max-height: 720px) {
  :root { --cell:clamp(30px, min(12.6vw, 4.7vh), 52px); --cell:clamp(30px, min(12.6vw, 4.7dvh), 52px); }
  .key { min-height:clamp(26px, 4.2vh, 46px); min-height:clamp(26px, 4.2dvh, 46px); }
  h1 { font-size:1rem; }
  .rulehead { display:none; }
  details.rulebox > summary { min-height:26px; padding:4px 0; }
  #rules .chip { font-size:.64rem; padding:2px 7px; min-height:26px; }
  .chiprow { gap:3px; }
  .grid { margin:0; }
  .key--submit { min-height:34px; }
}

/* the clue key: a clean two column legend, one row per mark */
.keycard { margin-top:14px; width:100%; text-align:left; }
.keygrid { display:grid; grid-template-columns:62px 1fr; gap:7px 10px; align-items:center; margin-top:8px; }
.keygrid > .kswatch { justify-self:center; }
.ktag {
  justify-self:center; text-align:center;
  font-family:var(--sans); font-size:.66rem; font-weight:700; line-height:1.15;
}
.ktag--good { color:var(--green); }
.ktag--bad  { color:var(--red); }
.keylabel {
  grid-column:1 / -1; margin-top:6px;
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
}
.keygrid .keylabel:first-child { margin-top:0; }
.kswatch {
  width:36px; height:36px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:700; font-size:1rem;
  border:2px solid var(--edge); background:var(--tile); color:var(--ink);
}
.kswatch.g { background:var(--green); border-color:var(--green); color:var(--on); }
.kswatch.y { background:var(--gold);  border-color:var(--gold);  color:var(--on); }
.kswatch.p { background:var(--blue);  border-color:var(--blue);  color:var(--on); }
.kswatch.x { background:var(--dim);   border-color:var(--dim);   color:var(--ink); }
.kswatch.ok { color:var(--green); font-size:1.2rem; }
.kswatch.no { color:var(--red);   font-size:1.2rem; }
.kmean { font-family:var(--sans); font-size:.8rem; color:var(--ink); line-height:1.35; }

/* wide screens: the key rides the empty side gutter, always in view. The
   content column is 28rem wide, so it never sits over the page copy. */
@media (min-width: 1120px) {
  .keycard {
    position:fixed; top:84px; left:calc(50% + 14rem + 28px);
    width:280px; margin-top:0;
    max-height:calc(100vh - 104px); overflow:auto;
  }
}

/* guess 1 always gets full clues. The gold dashes say so until it is played. */
.grid.is-fresh .row:first-child .cell { border-style:dashed; border-color:var(--gold); }

/* how to play, in pictures: a tap-through popup of real screenshots */
.pix {
  position:fixed; inset:0; z-index:50;
  background:rgba(12,11,9,.96);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:12px;
}
.pix.hide { display:none; }
#pix-img {
  max-width:min(96vw, 34rem);
  max-height:74vh; max-height:74dvh;
  border:1px solid var(--edge); border-radius:12px;
}
.pix-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }

.btnrow--center { justify-content:center; width:100%; }
/* .door sets its own color later in styles.css than .good / .bad do, so the
   verdict color needs the extra bit of specificity to land. */
.door.good { color:var(--green); }
.door.bad  { color:var(--red); }
.door .b   { font-size:1rem; line-height:1; }

/* ============================ PART 2 ==============================
   Moved out of the engine. The beta appended a <style> element at
   runtime for this single rule; CSP style-src 'self' blocks that. */
.key.r { background:var(--red); border-color:var(--red); color:var(--on); }

/* ============================ PART 3 ==============================
   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 the beta's 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; }

/* the how to strip: the five real screenshots, side by side and scrollable */
.shots { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; align-items:flex-start; }
.shots figure { flex:0 0 auto; max-width:60vw; }
/* one height for all five so the strip reads as a row, not a ragged edge */
.shots img { border:1px solid var(--edge); border-radius:var(--r-sm);
             height:220px; width:auto; max-width:none; }
.shots figcaption { max-width:170px; }
.shots figcaption {
  font-family:var(--sans); font-size:.66rem; color:var(--muted);
  margin-top:5px; line-height:1.3;
}

/* 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);
}