/* The pages around the game - Play (the home page), Boards, Learn and You -
   share this sheet. The game page never loads it: styles.css belongs to the
   game, and a sheet shared with the game is the most likely way site work
   degrades it (README, "Shielding the game page"; check-surface.js holds it).

   Cart's option B, 2026-09-24: an app with a tab bar and calm cards, the
   multiplier colours as accents, set in Lexend like the board itself. */

@font-face {
  font-family: 'Lexend';
  src: url('lexend-site.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --bg: #1a1a2e;
  --card: #23233d;
  --line: #2f2f50;
  --bar: #1c1c33;
  --text: #ffffff;
  --text-2: #c9c9d8;
  --text-3: #b8b8cc;
  --muted: #9a9ab0;
  --teal: #008E97;       /* white on it only at 18.66px bold and up: 3.95:1 */
  --teal-hi: #00a8b3;
  --teal-dark: #007a82;  /* white on it at any size: 5.11:1 */
  --teal-ink: #4dc4cb;
  --gold: #f5a623;
  --green: #4CAF50;
  --blue: #2196F3;
  --orange: #FF9800;
  --red: #ff6b5f;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* One column, centred on a wide screen, with room below it for the tab bar. */
.app {
  max-width: 440px;
  min-height: 100svh;
  margin: 0 auto;
  padding: 12px 16px calc(92px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

a { color: inherit; }

/* ---- the header: the wordmark, and your name ------------------------------ */

.bar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--teal);
  -webkit-text-stroke: 1.5px #F26A1B;
  line-height: 1;
  text-decoration: none;
}
.page-title { font-size: 26px; font-weight: 900; }
.who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 65%;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who svg { flex: none; color: var(--muted); }
.who:hover, .who:hover svg { color: var(--text); }

/* ---- cards and their furniture ------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card.small { border-radius: 18px; padding: 14px; gap: 8px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
}
.big { font-size: 24px; font-weight: 900; }
.note { font-size: 13px; line-height: 1.45; color: var(--text-3); }
/* A replay's score beside the best that counts: "15 on a replay" (Cart, 2026-09-30). */
.note.replay { color: var(--text-2); font-weight: 700; }
.chip {
  font-size: 13px;
  font-weight: 800;
  color: var(--bg);
  background: var(--gold);
  border-radius: 12px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* The button. Today's board, because that is the game that counts. Its text
   stays at or above 18.66px bold, which is what lets white on this teal pass
   as large text. */
.play {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  border-radius: 29px;
  background: var(--teal);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 142, 151, 0.35);
  transition: transform 0.15s, background 0.15s;
  touch-action: manipulation;
}
.play:hover { background: var(--teal-hi); }
.play:active { transform: scale(0.97); }

/* A row that goes somewhere: an icon, two lines, a chevron. */
.row-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  text-decoration: none;
}
.row-link .icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
}
.row-link .text { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.row-link .title { font-size: 16px; font-weight: 800; }
.row-link .sub { font-size: 13px; color: var(--text-3); }
.row-link > svg { flex: none; color: var(--muted); }

/* The pitch, for someone who has never played. */
.hook-title { font-size: clamp(30px, 8.5vw, 38px); font-weight: 900; line-height: 1.12; text-align: center; }
.hook-title .exact { color: var(--green); }
.hook-sub { font-size: 17px; font-weight: 700; color: var(--red); text-align: center; margin-top: 6px; }
.rules { display: flex; flex-direction: column; gap: 10px; }
.rule { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.rule b { color: var(--text); }
.rule .n {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--teal-dark);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.legend div { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.legend span {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  color: var(--bg);
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl { background: var(--green); } .tl { background: var(--blue); }
.dw { background: var(--orange); } .tw { background: var(--red); }
.text-link {
  display: block;
  min-height: 44px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--teal-ink);
  text-align: center;
  text-decoration: none;
}
.quiet-link { color: var(--text-2); font-weight: 400; }
.quiet-link b { color: var(--teal-ink); font-weight: 800; }

/* ---- the demo board: drawn to match the game's own tiles ----------------- */

.demo { width: 100%; max-width: 260px; align-self: center; }
.scoreline { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.readout { display: flex; align-items: baseline; gap: 5px; font-weight: 900; }
.readout .now { font-size: 30px; }
.readout .sep { font-size: 20px; color: var(--muted); }
.readout .goal { font-size: 22px; color: var(--teal-ink); }
.pill { background: var(--green); color: var(--bg); border-radius: 30px; padding: 6px 14px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.board { position: relative; background: #16213e; border-radius: 16px; padding: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
/* Square, with rows sized like the columns: a percentage row gap needs a
   definite height to resolve against (v1.061). */
.grid {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  grid-template-columns: repeat(4, 22%);
  grid-template-rows: repeat(4, 22%);
  gap: 4%;
  justify-content: space-between;
}
.tile {
  position: relative;
  border-radius: 14%;
  background: linear-gradient(#3a3a5a, #2a2a4a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 5.6vw, 23px);
  font-weight: 900;
  color: #fff;
}
.tile.lit { background: linear-gradient(#ffcc66, #f5a623); color: #5a4010; }
/* Each tile's point value, tucked into its top-right corner as in the game. */
.tile .val {
  position: absolute;
  top: 3px;
  right: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #aaa;
}
.tile.lit .val { color: #7a5a20; }
.tile .badge {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 900;
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* A little board that gives nothing away: decoration for the daily card. */
.mini {
  flex: none;
  width: 112px;
  height: 112px;
  padding: 7px;
  background: #16213e;
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.mini i { border-radius: 5px; background: #2a2a4a; }
.mini i.g { background: var(--gold); } .mini i.b { background: var(--blue); }
.mini i.n { background: var(--green); } .mini i.r { background: var(--red); }

/* The week's streak: a dot a day, oldest first; today, unplayed, is dashed. */
.dots { display: flex; gap: 5px; }
.dots i { width: 14px; height: 14px; border-radius: 7px; background: #34345a; }
.dots i.on { background: var(--gold); }
.dots i.open { background: none; border: 2px dashed #4a4a70; }

/* ---- lists: leaderboards and your games ---------------------------------- */

.segments { display: flex; border-bottom: 1px solid var(--line); }
.segments button {
  flex: 1;
  min-height: 44px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.segments button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--teal-ink); }
.list { list-style: none; display: flex; flex-direction: column; }
.list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--text-2);
}
.list li:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.list .rank { width: 1.6em; text-align: right; color: var(--muted); font-weight: 800; }
.list .who-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .boards { font-weight: 800; color: var(--text); }
.list li:first-child .rank, .list li:first-child .boards { color: var(--gold); }
.list li.me { background: rgba(20, 165, 174, 0.14); color: var(--text); }
.list li.me .rank { color: var(--text-3); }
.list li.me .who-name { font-weight: 800; }
.list .you { font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--teal-ink); margin-left: 6px; }
.list .house { font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--orange); margin-left: 6px; }
.list .score { font-weight: 800; color: var(--text); min-width: 2.2em; text-align: right; }
.list .kind { flex: 1; color: var(--muted); font-size: 13.5px; }
.list .kind.daily { color: var(--teal-ink); font-weight: 700; }
.list .kind.lead { flex: none; min-width: 2.6em; }
.list a.who-name { color: var(--text); text-decoration: none; }
.list .when { color: var(--muted); font-size: 13px; }
.list li.best .score { color: var(--green); }
/* Your games: each row opens its game (site.js, fillGames). */
.list li.game { display: block; padding: 0; }
.game-row {
  display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 44px;
  padding: 11px 10px; border: 0; border-radius: 10px; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.game-row:hover { background: rgba(255, 255, 255, 0.04); }
.game-row[aria-expanded="true"] .when { color: var(--text-2); }
.game-detail { padding: 2px 10px 14px calc(2.2em + 20px); }
.game-detail .squares { font-size: 17px; line-height: 1.3; letter-spacing: 1px; white-space: nowrap; overflow-x: auto; }
.game-detail .legend { font-size: 12px; color: var(--muted); margin-top: 6px; white-space: nowrap; }
.game-detail .game-note { font-size: 14px; color: var(--text); margin-top: 8px; line-height: 1.4; }
.empty { font-size: 13.5px; color: var(--text-3); text-align: center; padding: 12px 6px 4px; }

/* ---- your name and the favorite color that makes it yours ---------------- */

.name-panel {
  display: grid;
  gap: 8px;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.name-panel label { font-size: 13px; font-weight: 700; color: var(--text-3); }
.name-panel input {
  /* 16px, or iOS zooms the page when the field is focused. */
  font: inherit;
  font-size: 16px;
  color: #fff;
  background: #12122a;
  border: 1px solid #3a3a5a;
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
  width: 100%;
}
.name-panel input:focus { outline: 2px solid var(--teal-ink); outline-offset: 1px; }
.panel-hint { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.panel-hint:empty { display: none; }
.panel-actions { display: flex; gap: 10px; margin-top: 2px; }
.panel-go, .panel-cancel, .ghost {
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  border-radius: 10px;
  min-height: 44px;
  padding: 0 16px;
  cursor: pointer;
}
.panel-go { background: var(--teal-dark); color: #fff; border: none; flex: 1; }
.panel-go:disabled { opacity: 0.6; cursor: default; }
.panel-cancel, .ghost { background: none; color: var(--text-2); border: 1px solid #3a3a5a; }
/* Sending a challenge to a player: a name, or one of the house players. */
.send-row { display: flex; gap: 8px; }
.send-row input { flex: 1; min-width: 0; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.picks .ghost { padding: 0 14px; }

/* ---- the tab bar ----------------------------------------------------------- */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--bar);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar .inner {
  max-width: 440px;
  margin: 0 auto;
  display: grid;
  /* One tab since 2026-10-24, You, in the middle (Chris): Play and Challenge
     are the Play tab's two buttons, Boards is on You, and every other page
     has a Home link at its top left. */
  grid-template-columns: minmax(0, 120px);
  justify-content: center;
  padding: 6px 8px 8px;
}
.tabbar a {
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
}
.back-home { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -6px 0 -10px;
  color: var(--teal-ink); font-size: 15px; font-weight: 700; text-decoration: none; }
.back-home:hover { color: var(--text); }
.back-home.in-bar { margin: 0; align-self: center; }
/* Read out, not shown: a page whose top row is Home and the name. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tabbar a[aria-current="page"] { color: var(--teal-ink); font-weight: 800; }
/* What is new on the Play tab: challenges waiting, answers unseen (site.js).
   White on #d32f2f is 4.98:1; the badge against the bar is 3.34:1. */
.tabbar a, .big-choice { position: relative; }
.tabbar .badge, .big-choice .badge {
  position: absolute;
  top: 3px;
  left: calc(50% + 5px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #d32f2f;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bar);
}
/* The same count on the Play tab's friends button, where the Challenge tab
   went (Cart, 2026-10-24): at its top right corner, sized for the button. */
.big-choice .badge { top: 10px; left: auto; right: 16px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; font-size: 14px; line-height: 24px; }

.version { text-align: center; font-size: 11px; color: var(--muted); letter-spacing: 0.5px; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .play { transition: none; }
}