/* The play screen. Mobile first: the app's puzzle screen. From 1180px wide
   it becomes the three-column desktop layout (progress and words, game, ad). */

/* The page is the shared frame: header, then the game filling the rest of
   the first screen, then the footer, reached by scrolling. --below-game is
   what sits under the game on that first screen: nothing, or the anchored
   mobile ad bar when it is shown. */
.play-page { --header-height: 68px; --below-game: 0px; overflow-x: hidden; }

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

/* Header plus this block is the first screen; the footer starts below it. */
.play-screen {
  /* svh, not dvh: the small viewport height stays fixed while mobile Safari's
     toolbars slide away during a scroll. With dvh the game area resized each
     time the toolbar moved, which made the page jump when a scroll ended. */
  min-height: calc(100vh - var(--header-height) - var(--below-game)); /* without svh (Safari before 15.4) */
  min-height: calc(100svh - var(--header-height) - var(--below-game));
}

.play {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - var(--header-height) - var(--below-game)); /* without svh */
  height: calc(100svh - var(--header-height) - var(--below-game));
  min-height: 440px;
  padding: 0 var(--frame-pad);
  /* The game is tapped fast: no text selection, no double-tap zoom. */
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.play-side { display: flex; flex-direction: column; flex-shrink: 0; }

.play-progress { padding: 8px 0 0; }

/* ── Found words: RECENT strip (mobile) / YOUR WORDS panel (desktop) ── */

.words { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; min-height: 0; }

.words-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 15px;
}

.words-label-all { display: none; }

.see-all { display: flex; align-items: center; margin: -12px -8px -12px 0; padding: 12px 8px 12px 12px; }

/* On phones the strip runs to both screen edges, past the frame's gutter. */
.words-strip { position: relative; margin: 0 calc(-1 * var(--gutter)); }

.words-list {
  display: flex;
  height: 56px;
  padding: 6px 48px 14px var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.words-list::-webkit-scrollbar { display: none; }

.words-list .pill-slot { display: inline-flex; flex-shrink: 0; margin-right: 8px; }

.words-list .pill-slot:last-child { margin-right: 0; }

/* Edge fades: words run off the right edge, and fade under the left gutter
   once scrolled. */
.words-strip.has-words::before,
.words-strip.has-words::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.words-strip.has-words::before {
  left: 0;
  width: var(--gutter);
  background: linear-gradient(90deg, var(--canvas), rgba(248, 247, 244, 0));
}

.words-strip.has-words::after {
  right: 0;
  width: 44px;
  background: linear-gradient(90deg, rgba(248, 247, 244, 0), var(--canvas));
}

/* ── Centre: word line, grid, action row ── */

.play-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  container-type: size;
}

.input-bar { position: relative; width: 100%; height: 38px; flex-shrink: 0; }

.input-centre {
  position: absolute;
  inset: 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.coaching { font-size: 16px; font-weight: 500; line-height: 22px; color: var(--cool-gray); overflow: hidden; text-overflow: ellipsis; }

.coaching b { font-weight: 700; }

.input-hint { font-size: 16px; font-weight: 600; line-height: 22px; color: var(--hint); overflow: hidden; text-overflow: ellipsis; }

.input-word {
  display: flex;
  transform: translateY(2px);
  transform-origin: center;
  font-size: 17px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 2.5px;
  color: var(--charcoal);
}

.input-word.invalid { color: var(--error); }

.input-word.suppressed { visibility: hidden; }

.input-word span { display: inline-block; }

.input-word span.enter { animation: letter-in 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }

@keyframes letter-in { from { transform: scale(0.5); } to { transform: scale(1); } }

.input-icon { position: absolute; right: 12px; top: 7px; width: 24px; height: 24px; }

.input-icon svg { display: block; width: 24px; height: 24px; }

.hints-button { left: 0; }

.shuffle-button { right: 0; }

/* The round buttons at each end of the word line: hints left, shuffle right. */
.hints-button,
.shuffle-button {
  position: absolute;
  top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 17px;
  background: var(--white);
  box-shadow: var(--shadow-flat);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

/* The grid is sized from the space it is given: the app's rule (width minus
   52px) with a height cap so it never pushes the action row off screen. */
.grid {
  position: relative;
  flex-shrink: 0;
  /* Without container query units (Safari before 16): the same sum from the
     window size. 100px is the two gutters plus 60; 279px is the progress
     and RECENT rows (145) plus the word line, buttons and gaps (134). */
  width: min(100vw - 100px, 100vh - var(--header-height) - var(--below-game) - 279px, 368px);
  width: min(100vw - 100px, 100svh - var(--header-height) - var(--below-game) - 279px, 368px);
  /* 60px here with the 20px frame gutter gives the app's grid: screen width
     minus 100. */
  width: min(100cqw - 60px, 100cqh - 134px, 368px);
  min-width: 150px;
  aspect-ratio: 1;
  container-type: inline-size;
}

.tile {
  position: absolute;
  left: 0;
  top: 0;
  width: calc((100% - 2 * var(--grid-gap)) / 3);
  height: calc((100% - 2 * var(--grid-gap)) / 3);
  will-change: transform;
}

.tile-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: var(--radius-tile);
  background: var(--white);
  box-shadow: var(--shadow-flat);
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: 32px; /* the app's size; used as is where cqw is not supported */
  font-size: min(32px, 12.5cqw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.64px;
  transition: transform 200ms linear, background-color 200ms linear, color 200ms linear,
    box-shadow 200ms linear, border-color 200ms linear;
}

.tile.center .tile-face { background: var(--accent); color: var(--white); }

/* Part of the current word: pressed in 3px, shadow gone. */
.tile.used .tile-face { transform: translateY(3px); box-shadow: none; }

.tile.used .tile-face { background: #BFBFBF; color: rgba(26, 26, 26, 0.5); cursor: default; }

.tile.center.used .tile-face {
  background: color-mix(in srgb, #000 45%, var(--accent));
  color: rgba(255, 255, 255, 0.5);
}

/* Pangram: the whole grid flashes gold for 2.5s. */
.grid.gold .tile .tile-face {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.4);
  color: var(--confetti-gold);
}

.grid.gold .tile.center .tile-face {
  background: var(--confetti-gold);
  border-color: transparent;
  color: var(--white);
}

.actions { display: flex; align-items: center; gap: 10px; width: 100%; flex-shrink: 0; }

.action-back,
.action-clear,
.action-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  box-shadow: var(--shadow-flat);
  color: var(--cool-gray);
  font-weight: 700;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, filter 120ms ease-out;
}

.action-back { width: 44px; height: 44px; border-radius: 22px; flex-shrink: 0; }

.action-clear {
  height: 44px;
  padding: 0 24px;
  border-radius: 22px;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.5px;
}

.action-submit {
  flex: 1 1 0;
  height: 48px;
  border-radius: 24px;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: 0.08px;
}

.action-submit.ready { background: var(--accent); color: var(--white); }

.action-submit.invalid { background: var(--error); color: var(--white); }

.kbd-hints { display: none; }

.play-ad { display: none; }

/* ── Message when there is no puzzle ── */

.play-message {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  min-height: calc(100vh - var(--header-height) - var(--below-game)); /* without svh */
  min-height: calc(100svh - var(--header-height) - var(--below-game));
  padding: 24px var(--frame-pad);
  text-align: center;
  -webkit-user-select: text;
  user-select: text;
}

.play-message p { max-width: 320px; font-size: 16px; line-height: 24px; color: var(--mid-gray); }

/* ── Banners (rank-up, pangram) ── */

.banner-layer {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 12px;
  right: 12px;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.banner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 366px;
  padding: 16px 24px;
  border-radius: var(--radius-banner);
  background: var(--banner);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--banner) 30%, transparent), 0 2px 6px rgba(26, 26, 26, 0.1);
  color: var(--white);
  pointer-events: auto;
  cursor: pointer;
  will-change: transform, opacity;
}

.banner-title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

.banner-sub {
  font-family: var(--font-serif);
  font-style: italic;
  white-space: nowrap;
}

.banner.rank-up .banner-sub { margin-top: 2px; font-size: 13px; line-height: 17px; color: rgba(255, 255, 255, 0.7); }

.banner.pangram .banner-sub,
.banner.definition .banner-sub { font-size: 11px; line-height: 14px; color: rgba(255, 255, 255, 0.54); }

.banner-rule { flex-shrink: 0; width: 1px; background: rgba(255, 255, 255, 0.2); }

.banner.rank-up .banner-rule { height: 40px; margin: 0 14px; }

.banner.pangram .banner-rule,
.banner.definition .banner-rule { height: 36px; margin: 0 12px; }

.banner-side { flex: 1 1 0; min-width: 0; }

.banner-eyebrow {
  font-size: 10px;
  font-weight: 600;
  line-height: 13px;
  letter-spacing: 1.8px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.banner-steps { display: flex; gap: 5px; margin-top: 10px; }

.banner-steps i { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); }

.banner-steps i.on { background: var(--white); }

.banner-text { font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, 0.8); }

/* A definition runs to three lines at most. */
.banner.definition .banner-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* ── Flying pill (submitted word travelling to the strip) and confetti ── */

.fly-pill {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.4px;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}

.fly-pill svg { width: 14px; height: 14px; }

.confetti { position: fixed; inset: 0; z-index: 55; width: 100%; height: 100%; pointer-events: none; }

/* ── "Your words" dialog (all_words_dialog.dart) ── */

.dialog.words-dialog {
  height: clamp(420px, 66vh, 580px); /* without svh */
  height: clamp(420px, 66svh, 580px);
}

.words-dialog .segmented { margin: 2px 24px 18px; flex-shrink: 0; }

.words-dialog-body { flex: 1 1 0; min-height: 0; overflow-y: auto; padding-bottom: 22px; }

.words-dialog-body .word-section { padding: 0 24px 18px; }

.dialog-empty { padding: 4px 24px 8px; font-size: 14px; font-style: italic; color: var(--cool-gray); font-synthesis: style; }

/* Pangram hint (lib/features/puzzle/hints_screen.dart), fixed above the tabs */

.pangram-hint { display: flex; flex-direction: column; gap: 8px; padding: 0 24px 14px; flex-shrink: 0; }

.pangram-hint-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 1.2px;
  color: var(--cool-gray);
}

.pangram-hint-label svg { width: 13px; height: 13px; margin-bottom: 1.5px; }

.hint-tiles {
  display: flex;
  gap: 4px;
  padding: 10px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 3px 10px rgba(26, 26, 26, 0.06);
}

.hint-tiles i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  height: 30px;
  border-radius: 6px;
  background: var(--silver);
  font-family: var(--font-mono);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.64px;
  color: var(--cool-gray);
}

.hint-tiles i.shown { background: var(--brand); font-size: 16px; color: var(--white); }

/* ── "Puzzle complete" dialog ── */

.complete-body { display: flex; flex-direction: column; gap: 18px; padding: 6px 24px 0; }

.complete-body p { font-size: 14px; line-height: 20px; color: var(--charcoal); }

.complete-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 24px 24px; }

/* ── Short phones: tighten the strip so the grid keeps its size ── */

@media (max-height: 640px) and (max-width: 1179.98px) {
  .words { padding-top: 10px; }
  .words-list { height: 48px; padding-bottom: 6px; }
  .grid {
    width: min(100vw - 100px, 100vh - var(--header-height) - var(--below-game) - 241px, 368px); /* without cq units */
    width: min(100vw - 100px, 100svh - var(--header-height) - var(--below-game) - 241px, 368px);
    width: min(100cqw - 60px, 100cqh - 110px, 368px);
  }
}

/* ── Tablets: the phone layout as a centred column inside the frame ── */

@media (min-width: 800px) and (max-width: 1179.98px) {
  .play-page { --header-height: 78px; }
  .play-side, .play-centre { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; }
  .words-strip { margin: 0; }
  .words-list { padding-left: 0; }
  .words-strip.has-words::before { display: none; }
}

/* ── Desktop ── */

@media (min-width: 1180px) {
  .play-page {
    --header-height: 78px;
    /* The grid shrinks on short windows so the action row stays in view. */
    --grid: clamp(220px, 100vh - 300px, 368px);
  }

  .play {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    height: auto;
    min-height: 0;
    padding: 32px var(--frame-pad) 0;
  }

  .words-strip { margin: 0; }

  .play-side {
    width: 300px;
    height: calc(var(--grid) + 134px);
    padding-top: 2px;
    gap: 32px;
  }

  .play-progress { padding: 0; }

  .words { flex: 1 1 0; gap: 10px; padding-top: 0; }

  .words-head { height: 14px; }

  .words-label-recent { display: none !important; }

  .words-label-all { display: inline; }

  .words-strip { flex: 1 1 0; min-height: 0; }

  .words-strip.has-words::before,
  .words-strip.has-words::after { display: none; }

  /* Room on the left and top for the pills' shadows inside the scroller. */
  .words-list {
    flex-wrap: wrap;
    align-content: flex-start;
    height: 100%;
    margin: -2px 0 0 -6px;
    padding: 2px 5px 8px 6px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #CFCEC9 transparent;
    overscroll-behavior: contain;
  }

  .words-list::-webkit-scrollbar { display: block; width: 3px; }

  .words-list::-webkit-scrollbar-thumb { border-radius: 2px; background: #CFCEC9; }

  .words-list .pill-slot,
  .words-list .pill-slot:last-child { margin: 0 8px 8px 0; }

  /* On desktop pills hug their word. */
  .words-list .pill { min-width: 0 !important; }

  .play-centre {
    flex: 0 0 420px;
    width: 420px;
    padding: 0;
    gap: 24px;
    justify-content: flex-start;
    container-type: normal;
  }

  .grid { width: var(--grid); }

  .kbd-hints {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    font-size: 13px;
    line-height: 16px;
    color: var(--cool-gray);
  }

  .kbd-hints span { display: flex; align-items: center; gap: 6px; }

  .kbd-hints kbd { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--mid-gray); }

  .play-ad { display: block; width: 300px; flex-shrink: 0; }

  /* Banners sit over the top of the left column, covering the rank line
     and progress bar as they do in the app. An overlay: nothing moves. */
  .banner-layer {
    position: absolute;
    top: 98px; /* 12px above the left column, which starts at 78 + 32 */
    left: var(--frame-pad);
    right: auto;
    width: 300px;
  }

  .banner { max-width: none; }

  .play-ad-row { padding: 44px 0 40px; }

  .play-message { min-height: 60vh; }
}

/* Tall desktop windows: the left column's content sits lower, leaving a slot
   at the top of that column where banners land, level with the word line,
   so they no longer cover the rank line and progress bar. The grid and the
   ad do not move. Shorter windows keep the overlay above. */
@media (min-width: 1180px) and (min-height: 820px) {
  .play-side { padding-top: 92px; }

  /* The ad starts level with the left column's content, not the banner slot. */
  .play-ad { margin-top: 92px; }

  .banner-layer { top: 110px; } /* the top of the column: 78 header + 32 */
}

/* Reduced motion skips only the big effects (confetti and the gold grid
   flash, both in JS). Small feedback such as these transitions still plays. */