/* letters.css - Letters: a word-builder crossword-chain trail with a
   runner racing a decaying eraser along it. Reuses tokens from
   styles.css and game-shell.css's shell/bar/pause chrome, same as every
   other game. No joystick here at all (see letters.js's header comment)
   -- input is entirely the tap-based word builder below the board,
   closer to Sliders' control-free posture than the twin-stick games. */

.letters-stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  gap: 6px;
}

.letters-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .letters-stats {
    padding: 0 var(--gs-bar-right-clear) 0 var(--gs-bar-left-clear);
  }
}

.letters-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  min-width: 56px;
}

.letters-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--muted);
}

.letters-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.letters-board-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* Per-word countdown -- per explicit instruction ("each word placement
   has a 60 second countdown..." / "show the timer both as a bright line
   crossing the bottom of the player area and also as a countdown and
   the end of the line flashed red for the last 10 seconds"). A bright
   line across the BOTTOM of the board that drains left-to-right, a
   numeric readout next to it, and a blink (not a gradual color shift)
   once under 10 seconds remain -- letters.js's updateTimerBar() drives
   the width/text and toggles .is-urgent. */
.letters-timer-bar {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  z-index: 6;
}

.letters-timer-fill {
  height: 100%;
  width: 100%;
  background: #34d399;
  transition: width .2s linear;
}

.letters-timer-fill.is-urgent {
  /* Slow, per explicit instruction ("slow red flash, not fast --
     visible but not distracting") -- was 0.5s, now a gentler 1.6s. */
  animation: letters-timer-flash 1.6s ease-in-out infinite;
}

@keyframes letters-timer-flash {
  0%, 100% { background: #f87171; opacity: 1; }
  50% { background: #f87171; opacity: .35; }
}

.letters-timer-text {
  position: absolute;
  left: 10px;
  bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  z-index: 6;
  font-variant-numeric: tabular-nums;
}

/* Per explicit instruction ("on letters hide coins move score to
   bottom"): Score moves out of the top .letters-stats row (freeing more
   room there, same posture as every other game's own header-tightening
   this session) down to the bottom of the play area, mirroring the
   timer text's own bottom-left placement on the opposite corner. Coins
   is removed from the header entirely -- see letters.js's own comment
   on why the underlying award is unaffected. */
.letters-score-bottom {
  position: absolute;
  right: 10px;
  bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  z-index: 6;
  font-variant-numeric: tabular-nums;
}

.letters-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #0d1526; /* matches the canvas gradient's top in draw() */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  touch-action: none;
}

.letters-toast {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(52, 211, 153, .5);
  color: #06170f;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 5;
}

.letters-toast[hidden] { display: none; }

.letters-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}

/* -- Word builder ------------------------------------------------------- */

/* Gap/padding trimmed (was 6px/4px), per explicit instruction ("give
   the board more room") -- a few extra pixels handed back to
   .letters-board-wrap's own flex space, same "shrink the chrome, not
   the tap targets" approach as every other tightening pass in this
   project (tile/button sizes below are untouched). */
.letters-builder {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 2px;
}

.letters-submit-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.letters-submit-box {
  display: flex;
  gap: 6px;
  min-height: 40px;
  align-items: center;
  padding: 4px 10px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  transition: border-color .15s ease;
}

/* Per explicit instruction ("not allow touching letters -- the entry
   box outline turns red"): live warning that the current letters, if
   submitted right now, can't find any non-colliding placement -- see
   letters.js's currentSelectionCollides()/renderSubmitBox(). Purely a
   visual heads-up, not a hard block -- Submit still works (and still
   goes through the same real search, so it can only ever succeed where
   this preview already agreed it would). */
.letters-submit-box.is-collision {
  border-color: #f87171;
}

.letters-submit-slot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #06170f;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  /* Raised disc, same Scrabble-style bevel as the tray tiles below. */
  box-shadow: 0 2px 0 rgba(0,0,0,.45), 0 4px 8px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.15);
}

/* Reject feedback -- per explicit instruction ("if the word is rejected
   put a red x next to it for a few seconds"). letters.js toggles
   `hidden` and re-triggers a brief pulse; auto-hides itself via a
   setTimeout, this class just defines the look. */
.letters-reject-x {
  color: #f87171;
  font-size: 28px;
  font-weight: 900;
  animation: letters-reject-pulse 1.6s ease-out;
}

.letters-reject-x[hidden] { display: none; }

@keyframes letters-reject-pulse {
  0%   { opacity: 0; transform: scale(0.6); }
  15%  { opacity: 1; transform: scale(1.15); }
  25%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Per explicit instruction ("have small type in the word builder: 'Use
   only 1 anchor letter in the first three letters and the word must be
   at least four letters.'" -- later corrected to "must start with an
   anchor letter"): a small, muted reminder of the two real rules a
   submitted word has to satisfy (see onTrayTap()'s own "must start with
   an anchor letter" enforcement and MIN_WORD_LENGTH in letters.js). */
.letters-hint {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin: 0 0 4px;
  line-height: 1.25;
}

.letters-hint strong {
  color: var(--text);
}

/* The 10-letter tray -- ROUND circles, explicitly NOT square tiles (the
   board's own placed letters, drawn on the canvas, are tile-shaped --
   this contrast was explicit: "ten letters in circles, not tiles"). */
/* Tile size/gap trimmed (was 40px/8px, tiles below still match) -- per
   explicit follow-up ("use some space from the bottom to give more
   board space") -- a real, measurable amount of room across the up-to
   -3 rows this tray can wrap into (14 ordinary + several bonus tiles),
   still a comfortable real tap target. */
.letters-tray {
  position: relative; /* so .letters-level-complete-banner can overlay it exactly */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  min-height: 38px;
}

/* Per explicit instruction ("Before the animation stations spell LEVEL
   COMPLETE in the letters down below so they stop focusing on the next
   word"): covers the tray exactly (the spot a player would otherwise
   glance at to plan their next word) with the achievement text spelled
   out in SQUARE tiles -- matching the board's own tile shape, not the
   tray's round ones, since this is "in the letters" (the board's own
   tile-letter look), not a tray pick. Shown/hidden by
   showLevelCompleteBanner()/hideLevelCompleteBanner() in letters.js. */
.letters-level-complete-banner {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: #0b0f1a;
  border-radius: 10px;
}

.letters-level-complete-banner[hidden] { display: none; }

.letters-level-complete-tile {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: #34d399;
  color: #06170f;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
}

/* Raised discs -- warm paper look with a top highlight and bottom
   shadow, like physical Scrabble-style tiles sitting on the board.
   Still ROUND circles, explicitly NOT square tiles (the board's own
   placed letters, drawn on the canvas, are tile-shaped -- this
   contrast was explicit: "ten letters in circles, not tiles"). */
.letters-tile {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fdf6e3 0%, #f0dfb2 100%);
  border: 1px solid #d9c48a;
  color: #1a2733;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform .1s ease, background .15s ease;
  box-shadow: 0 3px 0 rgba(0,0,0,.45), 0 6px 10px rgba(0,0,0,.35),
    inset 0 2px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(0,0,0,.12);
}

.letters-tile:active {
  transform: scale(0.92);
}

.letters-tile.is-used {
  visibility: hidden;
}

/* "Bonus" letters -- guaranteed connectable letters from the last word
   placed (letters.js's addBonusAnchorLetters()), same gold as the
   board's own anchor ring for a consistent "you can connect with this"
   visual language. Only one may go into any single word (onTrayTap
   enforces it) -- the ring just marks which tiles qualify. */
.letters-tile.is-bonus {
  background: linear-gradient(180deg, #ffe08a 0%, #f2b134 100%);
  color: #231303;
  border-color: #f2b134;
  box-shadow: 0 3px 0 rgba(0,0,0,.45), 0 6px 10px rgba(0,0,0,.35),
    inset 0 2px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(0,0,0,.12),
    0 0 0 2px rgba(242,179,52,.45);
}

.letters-builder-actions {
  display: flex;
  gap: 10px;
  margin-top: 0;
}

.letters-action-btn {
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #1b2430;
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.letters-action-primary {
  background: var(--accent);
  color: #06170f;
  border-color: var(--accent);
}

.letters-action-primary:disabled {
  opacity: .5;
  cursor: default;
}

/* -- Overlays (start/game-over) -- same pattern as every other game. */

.letters-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 13, 16, .72);
  border-radius: var(--radius);
}

.letters-overlay[hidden] { display: none; }

.letters-overlay-card {
  text-align: center;
  padding: 24px;
  max-width: 340px;
}

.letters-overlay-title {
  font-family: Georgia, serif;
  font-size: 26px;
  color: var(--text);
  margin-bottom: 8px;
}

.letters-overlay-text {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 18px;
}

/* -- Win screen -----------------------------------------------------------
   Shown after the door-exit celebration (see showWinScreen() in
   letters.js). The finished crossword stays on the board behind this
   card, glowing gold (winGlow in draw()), so the win celebrates the
   solved puzzle itself. The overlay backdrop is lighter than the
   start/game-over overlays so the board shows through. */

.letters-win {
  background: rgba(10, 13, 16, .5);
}

.letters-win-card {
  text-align: center;
  padding: 22px 20px;
  width: calc(100% - 32px);
  max-width: 330px;
  background: linear-gradient(180deg, #16223a, #0d1526);
  border: 1px solid rgba(242, 179, 52, .55);
  border-radius: 16px;
  animation: letters-win-pulse 2.4s ease-in-out infinite;
}

@keyframes letters-win-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(242,179,52,.15), 0 18px 44px rgba(0,0,0,.55), 0 0 24px rgba(242,179,52,.18);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(242,179,52,.15), 0 18px 44px rgba(0,0,0,.55), 0 0 44px rgba(242,179,52,.38);
  }
}

.letters-win-eyebrow {
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: #f2b134;
  margin-bottom: 4px;
}

.letters-win-sub {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 12px;
}

.letters-win-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}

/* Word chips reuse the board's own length colors (yellow <5, blue
   5-7, orange >7) so the list reads as the same puzzle. */
.letters-win-word {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #1a2733;
  background: #fef08a;
  box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.7);
}

.letters-win-word.is-mid { background: #93c5fd; }
.letters-win-word.is-long { background: #fdba74; }

.letters-win-stats {
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}

.letters-win-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.letters-win-btn {
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--border);
}

.letters-win-btn.is-primary {
  background: linear-gradient(180deg, #ffd166, #f2b134);
  border-color: #f2b134;
  color: #231303;
  box-shadow: 0 3px 0 rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.35);
}

.letters-win-btn.is-secondary {
  background: #1b2430;
  color: var(--text);
  box-shadow: 0 3px 0 rgba(0,0,0,.4);
}

/* While the win screen is up, hide the per-word countdown -- the level
   is over, and the bar/text would fight the celebration. */
.letters-board-wrap.is-win .letters-timer-bar,
.letters-board-wrap.is-win .letters-timer-text {
  display: none;
}