/* Shared styles for the landing page, the play screen and Yesterday's
   solutions: reset, pills, rank progress bar, buttons,
   dialog shell, segmented toggle and ad slots. Values come from tokens.css. */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;
}

body {
  font-family: var(--font-sans);
  background: var(--canvas);
  color: var(--charcoal);
  font-size: 14px;
  line-height: 20px;
}

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Word pill (WordPill) ── */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--pill, var(--rank-1));
  box-shadow: var(--shadow-flat);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.pill svg { width: 12px; height: 12px; flex-shrink: 0; }

/* WordPill.large: the found-words strip. */
.pill.large {
  height: var(--pill-height);
  padding: 0 16px;
  font-size: 15px;
  line-height: 20px;
}

.pill.large svg { width: 14px; height: 14px; }

/* A missed word: flat white chip with grey text. */
.pill.missed { background: var(--white); color: var(--cool-gray); }

.pill[data-len="4"] { --pill: var(--rank-1); }
.pill[data-len="5"] { --pill: var(--rank-2); }
.pill[data-len="6"] { --pill: var(--rank-3); }
.pill[data-len="7"] { --pill: var(--rank-4); }
.pill[data-len="8"], .pill[data-len="9"] { --pill: var(--rank-5); }

/* ── Rank progress (RankProgressBar) ── */

.progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  transition: --accent 300ms linear;
}

.progress-top { display: flex; justify-content: space-between; align-items: baseline; }

.progress-rank { display: flex; align-items: baseline; white-space: pre; }

.rank-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: 0.7px;
  color: var(--accent);
}

.rank-sep { font-size: 13px; line-height: 16px; color: color-mix(in srgb, var(--accent) 50%, transparent); }

.rank-pts { font-size: 13px; font-weight: 600; line-height: 16px; color: var(--accent); }

.caps-label,
.progress-count {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 1.2px;
  color: var(--cool-gray);
  text-transform: uppercase;
  white-space: nowrap;
}

.progress-bar { display: flex; align-items: center; gap: 4px; height: 16px; }

.progress-bar i { flex: 1 1 0; height: 8px; border-radius: 3px; background: var(--track); }

.progress-bar i.on { background: var(--accent); }

.progress-bar i.marker { flex: 0 0 4px; height: 16px; border-radius: 2px; background: var(--accent); }

/* ── Buttons ── */

/* The app's flat pill button (PressableRaised flat: true): on press it sinks
   3px and loses its shadow. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  padding: 0 28px;
  border-radius: 24px;
  background: var(--brand);
  box-shadow: var(--shadow-flat);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.08px;
  white-space: nowrap;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, filter 120ms ease-out;
}

.btn:active,
.pressable:active {
  transform: translateY(3px);
  box-shadow: none;
  filter: brightness(0.96);
  transition-duration: 80ms;
}

.btn.block { display: flex; width: 100%; }

.text-link {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--cool-gray);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ── Dialog shell (LetterBoxDialog) ── */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 25px;
  background: var(--scrim);
  animation: fade-in 150ms linear;
}

.dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--dialog-width);
  max-height: 100%;
  border-radius: var(--radius-dialog);
  background: var(--snow);
  overflow: hidden;
  outline: none;
}

.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 24px 14px;
}

.dialog-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 32px;
  color: var(--charcoal);
}

.dialog-sub { margin-top: 3px; font-size: 13px; line-height: 18px; color: var(--cool-gray); }

.dialog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: var(--muted-button);
  flex-shrink: 0;
}

@keyframes fade-in { from { opacity: 0; } }

/* ── Segmented toggle (SegmentedToggle) ── */

.segmented {
  position: relative;
  display: flex;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--muted-button);
}

.segmented .knob {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--count, 3));
  border-radius: 17px;
  background: var(--white);
  box-shadow: var(--shadow-knob);
  transform: translateX(calc(var(--index, 0) * 100%));
  transition: transform 240ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.segmented button {
  position: relative;
  flex: 1 1 0;
  height: 34px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 1.5px;
  color: var(--cool-gray);
  transition: color 240ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.segmented button[aria-selected="true"] { font-weight: 600; color: var(--charcoal); }

/* ── Word list sections (all-words dialog, Yesterday's solutions) ── */

.word-section { display: flex; flex-direction: column; gap: 11px; }

.word-section .pills { display: flex; flex-wrap: wrap; gap: 7px; }

.none-yet {
  font-size: 13px;
  font-style: italic;
  line-height: 16px;
  color: rgba(138, 138, 133, 0.6);
  font-synthesis: style;
}

/* ── Ad slots ──
   No ad code is loaded. A slot takes no space at all unless the page is in
   preview (localhost, or ?ads=preview), where it shows a labelled grey box. */

[data-ad-slot],
.ad-bar,
.ad-row { display: none; }

.ads-preview [data-ad-slot] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  background: var(--ad-fill);
  color: var(--cool-gray);
}

.ads-preview [data-ad-slot]::before {
  content: 'Advertisement';
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ads-preview [data-ad-slot]::after {
  content: attr(data-ad-label);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

[data-ad-size="300x250"] { width: 300px; height: 250px; gap: 6px !important; }
[data-ad-size="300x250"]::after { font-size: 14px !important; line-height: 18px !important; }
[data-ad-size="728x90"] { width: 728px; height: 90px; }
[data-ad-size="320x50"] { width: 320px; height: 50px; }

/* Mobile banner bar along the bottom of the page. */
.ads-preview .ad-bar {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  padding: 8px 0;
  background: var(--white);
  border-top: 1px solid var(--hairline);
}

/* On the play and Yesterday pages the bar is anchored to the bottom of the
   window. The page keeps that much room free below the footer, so the bar
   never covers the footer's last lines. */
.ads-preview .play-page .ad-bar,
.ads-preview .yesterday-page .ad-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  /* Clear of the home indicator on phones without a home button. */
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 1179.98px) {
  .ads-preview .play-page,
  .ads-preview .yesterday-page { padding-bottom: calc(67px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 1180px) {
  .ads-preview .ad-bar { display: none; }
  .ads-preview .ad-row { display: flex; justify-content: center; }
}

@media (max-width: 1179.98px) {
  .ads-preview [data-ad-size="300x250"],
  .ads-preview [data-ad-size="728x90"] { display: none; }
}

/* ── Word pills that open the word's details ── */

button.pill { cursor: pointer; }

button.pill:focus-visible { outline-offset: 3px; }

/* ── Word detail dialog (word_detail_dialog.dart) ── */

.word-detail-head { display: flex; align-items: center; gap: 12px; padding: 28px 28px 0; flex-shrink: 0; }

.word-detail-title {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 42px;
  color: var(--charcoal);
  overflow-wrap: anywhere;
}

.word-detail-badges { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 28px 0; flex-shrink: 0; }

.word-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--brand);
  box-shadow: var(--shadow-flat);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.word-badge svg { width: 12px; height: 12px; }

.word-detail-body { padding: 20px 28px 24px; min-height: 0; overflow-y: auto; }

.word-pos {
  padding-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.06px;
  text-transform: uppercase;
  color: var(--cool-gray);
}

.word-definitions { list-style: none; }

.word-definitions li { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 4px; font-size: 15px; line-height: 22px; }

.word-definition-number {
  flex: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
  color: var(--cool-gray);
}

.word-no-definition { font-size: 14px; font-style: italic; line-height: 20px; color: var(--cool-gray); font-synthesis: style; }

.word-detail-rule { height: 1px; margin: 0 28px; background: var(--silver); flex-shrink: 0; }

.word-detail-actions { display: flex; justify-content: flex-end; padding: 14px 28px 22px; flex-shrink: 0; }

.word-detail-close {
  height: 38px;
  padding: 0 20px;
  border-radius: var(--radius-full);
  background: var(--muted-button);
  font-size: 13px;
  font-weight: 600;
  color: var(--cool-gray);
}