/* ═══════════════════════════════════════════════════════════════════════════
   The tower under construction (§1, §2, §3).

   The building is drawn in CSS around the letter tiles rather than as an image
   behind them, so the word stays selectable, tappable and legible at every
   size while the facade — piers, spandrels, sills, lit glass — is built from
   the style's custom properties. Those properties are set by tower.js from the
   same palette that draws the finished SVG building, so a tower looks like
   itself before and after it joins the neighborhood.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── The scroll container ───────────────────────────────────────────────── */
/*
  This is the fix for §1. The old layout centred the grid with
  `justify-content: flex-end`, which in every current browser makes content
  that overflows the *start* edge unreachable — so once a desktop tower grew
  past the viewport, the active floor scrolled off the top and could not be
  scrolled back to. `margin-top: auto` on the content produces the same
  bottom-anchored look and leaves the overflow scrollable.
*/
.tower-viewport {
  position: relative;
  z-index: 5;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 16px 0;
}
.tower-viewport::-webkit-scrollbar { display: none; }

.tower-scroll {
  position: relative;      /* offsetParent for revealActiveFloor() */
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin-top: auto;        /* see above */
  justify-content: flex-start;
}

.tower {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto auto 0;     /* sits on the street when short, grows upward */
  filter: drop-shadow(0 6px 14px rgba(74, 56, 38, 0.16));
}

/* ── Crown & base ───────────────────────────────────────────────────────── */
.tower-crown, .tower-base { line-height: 0; width: 100%; }
.tower-crown svg, .tower-base svg { width: 100%; display: block; }
.tower-crown {
  /* Grows with the tower rather than sitting on the first floor forever. */
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/*
  The hoarding comes down.

  Through the whole game the ground floor is a plain site hoarding (see
  siteBase in art/styles.js); tower.js swaps in the style's real entrance when
  the tower tops out. Animating that swap is what makes it read as the last
  step of construction rather than as a texture popping.

  It is the one flourish allowed to be a beat slower than the per-floor ones:
  those fire twenty times in two minutes, this fires once, at the end.
*/
.tower-base { position: relative; }
.tower.is-grounded .tower-base {
  animation: ground-floor-in 0.46s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
@keyframes ground-floor-in {
  0%   { clip-path: inset(100% 0 0 0); transform: translateY(5px); }
  70%  { clip-path: inset(0 0 0 0);    transform: translateY(-1.5px); }
  100% { clip-path: inset(0 0 0 0);    transform: none; }
}

/* ── A floor ────────────────────────────────────────────────────────────── */
.tower-floors { display: flex; flex-direction: column; width: 100%; }

.floor {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--fac, #c47a58);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.floor.is-raised { opacity: 1; transform: none; }

/* Vertical piers flanking the tiles — the facade either side of the windows. */
.pier {
  width: var(--pier, 10px);
  flex: 0 0 var(--pier, 10px);
  background: var(--fac, #c47a58);
  position: relative;
}
.pier-left::after, .pier-right::after {
  content: '';
  position: absolute;
  inset: 0;
}
.pier-left::after  { background: linear-gradient(90deg, rgba(255,250,236,0.18), transparent); }
.pier-right::after { background: linear-gradient(270deg, rgba(74,59,46,0.16), transparent); }

.floor-tiles {
  display: flex;
  gap: 5px;
  padding: 7px 6px 9px;
  background: var(--fac, #c47a58);
}

/* Sill: the line under each storey that stops the facade reading as a slab. */
.floor.is-built::after {
  content: '';
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 0;
  height: 2px;
  background: var(--trim, #f6ead4);
  opacity: 0.5;
}

/* ── Tiles ──────────────────────────────────────────────────────────────────

   A tile is a window with a letter in it, and it used to be neither: a pure
   white square with a near-black 2.5px border and a 5px radius, which is a
   Wordle cell. It is also the thing on screen for the whole two minutes of a
   game, so it set the tone for everything.

   Now it is cream, edged in the same warm ink as the buildings and the street,
   and `--tile-radius` comes from the style — Beaux Arts tiles are genuinely
   arch-headed rather than gesturing at it with a couple of extra pixels of
   corner rounding.
   ────────────────────────────────────────────────────────────────────────── */
.tile {
  width: 48px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 2.5px solid rgba(74, 59, 46, 0.78);
  border-radius: var(--tile-radius, 7px);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.tile-char {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  user-select: none;
  pointer-events: none;
}

.tile.is-cursor {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46, 125, 112, 0.26);
}

/* The day's fixed letter and a hint-revealed letter behave identically (§5);
   the hint is only tinted a little differently so the player can tell which
   help they paid for. */
.tile.is-locked          { background: #efe7d6; }
.tile.is-locked .tile-char { color: var(--accent); }
.tile.from-hint          { background: #fbeccb; }
.tile.from-hint .tile-char { color: #9a6a12; }

.tile.just-revealed { animation: hint-pop 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes hint-pop {
  0%   { transform: scale(0.6) rotateX(60deg); opacity: 0.2; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: none; }
}

/* ── Built floors: tiles become lit windows ─────────────────────────────── */
.floor.is-built .tile {
  background: var(--glass, #ffe9b8);
  border-color: rgba(74, 59, 46, 0.5);
}
.floor.is-built .tile-char {
  color: rgba(58, 45, 33, 0.55);
  font-size: 20px;
}

/* ── §3 The construction animation ──────────────────────────────────────── */
/*
   ~380ms total, and it has to survive being watched twenty times in two
   minutes: the floor drops a few pixels and settles, and the windows light in
   sequence left to right. The settle is what reads as weight; the light is
   what reads as *finished*.
*/
.floor.is-locking { animation: floor-settle 0.38s cubic-bezier(0.25, 1.1, 0.4, 1); }
@keyframes floor-settle {
  0%   { transform: translateY(-7px) scaleY(1.05); }
  55%  { transform: translateY(2px) scaleY(0.985); }
  100% { transform: none; }
}

.floor.is-locking .tile {
  animation: window-light 0.34s ease both;
  animation-delay: var(--lit-delay, 0ms);
}
@keyframes window-light {
  0%   { background: var(--paper); box-shadow: none; }
  45%  { background: #fff8e2; box-shadow: 0 0 14px 2px rgba(255, 219, 138, 0.9); }
  100% { background: var(--glass, #ffe9b8); box-shadow: none; }
}

/* Every fifth floor: a brief band of light across the whole storey. */
.floor.flourish-five::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 233, 184, 0.85), transparent);
  animation: sweep 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes sweep {
  from { transform: translateX(-100%); opacity: 0.9; }
  to   { transform: translateX(100%); opacity: 0; }
}

/* Personal best: gold, and a beat longer. Still under half a second. */
.floor.flourish-best { animation: floor-settle 0.38s cubic-bezier(0.25,1.1,0.4,1), best-glow 0.52s ease-out 0.06s; }
@keyframes best-glow {
  0%   { box-shadow: 0 0 0 0 rgba(221, 162, 63, 0.65); }
  60%  { box-shadow: 0 0 0 12px rgba(221, 162, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(221, 162, 63, 0); }
}
.floor.flourish-best::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2px solid var(--accent-warm);
  border-radius: 4px;
  animation: fade-ring 0.62s ease-out forwards;
  pointer-events: none;
}
@keyframes fade-ring { to { opacity: 0; transform: scale(1.06); } }

/* ── Rejection & teardown ───────────────────────────────────────────────── */
.floor.is-rejected { animation: floor-shake 0.4s ease; }
@keyframes floor-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.floor.is-discarded {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tower.is-topped-out { filter: drop-shadow(0 10px 22px rgba(74, 56, 38, 0.22)); }

/* ── The words become a building ────────────────────────────────────────── */
/*
  The last thing that happens on the game screen. Letters sweep out top to
  bottom and the tiles close down to window proportions, so the thing that
  then flies into the neighborhood is visibly the tower the player just built.
*/
.tower.is-finishing .tile-char {
  animation: letter-out 0.26s ease forwards;
  animation-delay: var(--fade-delay, 0ms);
}
@keyframes letter-out {
  to { opacity: 0; transform: scale(0.7); }
}

.tower.is-finishing .tile {
  animation: tile-to-window 0.34s cubic-bezier(0.3, 0.8, 0.35, 1) forwards;
  animation-delay: calc(var(--fade-delay, 0ms) + 120ms);
}
@keyframes tile-to-window {
  to {
    transform: scale(0.78, 0.66);
    border-width: 1.5px;
    border-radius: 2px;
  }
}

/* The clone in flight: no shadow of its own, and never interactive. */
.tower-ghost {
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(74, 56, 38, 0.24));
}
.tower-ghost .tile { animation: none !important; transform: scale(0.78, 0.66); }
.tower-ghost .tile-char { opacity: 0; }
/* The clone inherits `is-grounded`, and a ground floor that re-builds itself
   while the building is flying across the screen reads as a glitch. */
.tower-ghost .tower-base { animation: none !important; }

/* ── Per word-length tile sizing ────────────────────────────────────────── */
.tower[data-len='5'] .tile { width: 56px; height: 58px; }
.tower[data-len='5'] .tile-char { font-size: 27px; }
.tower[data-len='7'] .tile { width: 41px; height: 44px; }
.tower[data-len='7'] .tile-char { font-size: 20px; }
.tower[data-len='8'] .tile { width: 35px; height: 38px; }
.tower[data-len='8'] .tile-char { font-size: 17px; }

@media (max-width: 380px) {
  .tower[data-len='5'] .tile { width: 50px; height: 52px; }
  .tower[data-len='6'] .tile { width: 43px; height: 45px; }
  .tower[data-len='7'] .tile { width: 37px; height: 40px; }
  .floor-tiles { gap: 4px; padding: 6px 5px 8px; }
}
@media (min-width: 600px) {
  .tower[data-len='6'] .tile { width: 54px; height: 56px; }
  .tower[data-len='7'] .tile { width: 48px; height: 50px; }
}