/* Word Tower: editor rows + tower/reveal/play UI. */

/* Brick palette — warm wood tones, distinct from the other games' palettes. */
:root {
  --brick: #c98a4b;
  --brick-dark: #9c6431;
  --brick-face: #fff7ec;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brick: #b97a3e;
    --brick-dark: #7a5228;
    --brick-face: #2a2620;
  }
}

/* ---- Editor ------------------------------------------------------------ */
.field { max-width: 460px; margin-bottom: 1.25rem; }

.editor-head { display: flex; align-items: center; gap: 1rem; margin: 1.75rem 0 .5rem; }
.editor-head h2 { margin: 0; font-size: 1.1rem; }
.editor-head .btn { margin-inline-start: auto; }
.section-hint { color: var(--ink-soft); font-size: .85rem; margin: 0 0 .75rem; }

.editor-grid { display: grid; gap: .5rem; }

.player-row {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: .6rem;
  align-items: center;
  max-width: 460px;
  margin-bottom: .5rem;
}
.player-row .player-dot {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: inline-block; background: var(--accent);
}
.player-row .player-dot[data-index="1"] { background: var(--gold); }

.word-row {
  display: grid;
  grid-template-columns: 2rem 1fr 2.4rem;
  gap: .6rem;
  align-items: center;
}
.word-row .card-index { color: var(--ink-soft); text-align: center; font-variant-numeric: tabular-nums; }
.word-row .word-input { font-size: 1.15rem; }
.btn.icon { padding: .45rem; width: 2.4rem; }

/* ---- Play layout --------------------------------------------------------- */
/* Growth-only: keeps today's sizes as a floor on typical windows, but keeps
   growing past them on wider ones instead of plateauing. */
.wt-main { max-width: max(1100px, 90vw); }

.scorebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem 1.1rem; box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.scorebar .deck-name { font-weight: 700; font-size: 1.05rem; }
.turn-indicator .meta { color: var(--ink-soft); font-size: .85rem; margin-inline-end: .4rem; }
.turn-indicator strong { font-size: 1.1rem; }

.wt-instructions { color: var(--ink-soft); text-align: center; margin: 0 0 1.25rem; }

.wt-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 860px) {
  .wt-layout { grid-template-columns: 1fr; }
}

/* ---- Tower (real 3D via CSS transforms) -----------------------------------
   Real Jenga alternates each layer 90° from the one below (a criss-cross
   structure), so the tower is genuinely modelled in 3D rather than drawn as
   flat rows — a flat top-down brick grid can't show that alternation at all.

   Geometry is driven by --wt-len/--wt-wid/--wt-hei, set by play.js as inline
   custom properties on #tower (so JS's WT_LEN/WT_WID/WT_HEI constants are the
   only place sizing lives — nothing here needs to be hand-kept in sync). They
   inherit down to every descendant below. Defaults here are only a fallback
   in case JS hasn't set them yet on first paint. */
.tower-wrap {
  /* Whole-tower zoom factor, floor 1 (today's size) — grows past that once
     the viewport is wider than the 1400px reference point. Applied to
     .tower as an outer scale3d (see below), the same technique the
     mobile media query at the bottom already uses to shrink the tower as a
     unit without touching its 3D geometry constants. Computed in play.js's
     updateTowerScale() (not a CSS calc(100vw/1400px) — Firefox renders that
     division as invalid, which drops .tower's entire transform); this static
     `1` is only the pre-JS first-paint fallback. */
  --wt-scale: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4rem 1rem 2.5rem;
  min-height: calc(640px * var(--wt-scale));
  perspective: 1700px;
  perspective-origin: 50% 30%;
}

/* The rotated "rig" — this single rotation is what puts the tower at an angle
   so two faces are visible at once, rather than a flat elevation view. */
.tower {
  --wt-len: 192px;
  --wt-wid: 64px;
  --wt-hei: 44px;
  position: relative;
  transform-style: preserve-3d;
  /* translate() runs after the rotate (CSS applies right-to-left), shifting the
     already-rotated rig in screen space. It exists because the rotated tower's
     PAINTED extent (faces pushed out via translateZ) sits well off-centre from
     the box flexbox actually centres — measured empirically, re-derive by
     comparing the wrap's box to the union of all .bf rects if the angles above
     ever change. */
  transform: scale3d(var(--wt-scale, 1), var(--wt-scale, 1), var(--wt-scale, 1)) translate(55px, -56px) rotateX(-24deg) rotateY(-34deg);
  width: var(--wt-len);
  height: calc(var(--wt-hei) * 10); /* 10 layers */
}

.layer3d {
  position: absolute;
  top: 0; left: 0;
  width: var(--wt-len);
  height: var(--wt-hei);
  transform-style: preserve-3d;
  /* Pivot a rotated layer around the footprint's own vertical centre line, so
     alternating layers swap orientation without the tower appearing to shift. */
  transform-origin: calc(var(--wt-len) / 2) 50% calc(var(--wt-len) / 2);
}

.brick-slot {
  position: absolute;
  top: 0; left: 0;
  transform-style: preserve-3d;
}

.brick3d {
  position: relative;
  display: block;
  width: var(--wt-len);
  height: var(--wt-hei);
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
}
.brick3d:disabled { cursor: default; }

/* A brick is a real 5-sided box (every face but the bottom, which the camera
   never sees) — a standard centred-box construction: each face is centred on
   the box's own middle (top:50%;left:50%; plus a negative margin of half its
   own size), then pushed out and rotated to its side. Building only the faces
   that face the camera "as designed" isn't enough here, since the alternating
   layers rotate 90° and would then expose whichever face was skipped. */
.box3d {
  position: absolute;
  top: 0; left: 0;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--wt-len) / 2), calc(var(--wt-hei) / 2), calc(var(--wt-wid) / 2));
}
.bf {
  position: absolute;
  top: 50%; left: 50%;
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  transition: filter .1s ease;
}
.bf.front, .bf.back {
  width: var(--wt-len); height: var(--wt-hei);
  margin: calc(var(--wt-hei) / -2) 0 0 calc(var(--wt-len) / -2);
  background: linear-gradient(180deg, var(--brick), color-mix(in srgb, var(--brick) 75%, var(--brick-dark)));
}
.bf.front { transform: translateZ(calc(var(--wt-wid) / 2)); }
.bf.back  { transform: translateZ(calc(var(--wt-wid) / -2)) rotateY(180deg); }

.bf.left, .bf.right {
  width: var(--wt-wid); height: var(--wt-hei);
  margin: calc(var(--wt-hei) / -2) 0 0 calc(var(--wt-wid) / -2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brick-dark) 60%, var(--brick)), var(--brick-dark));
}
.bf.right { transform: translateX(calc(var(--wt-len) / 2)) rotateY(90deg); }
.bf.left  { transform: translateX(calc(var(--wt-len) / -2)) rotateY(-90deg); }

.bf.top {
  width: var(--wt-len); height: var(--wt-wid);
  margin: calc(var(--wt-wid) / -2) 0 0 calc(var(--wt-len) / -2);
  transform: translateY(calc(var(--wt-hei) / -2)) rotateX(90deg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brick) 60%, #fff), var(--brick));
}
.brick3d:hover:not(:disabled) .bf { filter: brightness(1.1); }

.brick3d.pulled { visibility: hidden; }

@keyframes tumble3d {
  to {
    transform:
      translateY(220px)
      translateZ(90px)
      rotateZ(var(--tumble-rot, 25deg))
      rotateX(35deg);
    opacity: 0;
  }
}
.brick3d.tumbling {
  animation: tumble3d .6s ease-in forwards;
  animation-delay: var(--tumble-delay, 0s);
  pointer-events: none;
}

/* ---- Side panel ------------------------------------------------------------ */
.wt-side { display: flex; flex-direction: column; gap: 1rem; }

.players-panel { display: grid; gap: .5rem; }
.player-chip {
  display: flex; align-items: center; gap: .6rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: .5rem .7rem;
}
.player-chip.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.chip-dot {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  color: #fff; font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.chip-name { font-weight: 600; flex: 1; }
.chip-pos { color: var(--ink-soft); font-size: .8rem; font-variant-numeric: tabular-nums; }

.wt-message { color: var(--ink-soft); font-size: .9rem; text-align: center; min-height: 2.5em; margin: 0; }

.wt-rules { font-size: .85rem; color: var(--ink-soft); }
.wt-rules summary { cursor: pointer; font-weight: 600; }
.wt-rules ul { margin: .5rem 0 0; padding-inline-start: 1.1rem; }
.wt-rules li { margin-bottom: .25rem; }

/* ---- Word reveal (pulled brick "zooms" up in front of the tower) -----------
   A stylized card rather than the actual 3D brick — the real brick lives deep
   in the tower's nested preserve-3d transforms (tower rig + alternating
   per-layer 90°), so reproducing "zoom toward camera, face the viewer" on the
   literal element would mean counter-rotating each ancestor exactly. A
   brick-toned card that scales/fades in over the (dimmed) tower reads the
   same to a player and is far simpler to get right. */
.tower-wrap { position: relative; }
.wt-reveal {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 16, 10, .5);
  border-radius: var(--radius);
  cursor: pointer;
  z-index: 20;
}
.wt-reveal.hidden { display: none; }

.wt-reveal-card {
  background: linear-gradient(180deg, var(--brick), color-mix(in srgb, var(--brick) 75%, var(--brick-dark)));
  border-radius: 16px;
  padding: 2rem clamp(1.75rem, 6vw, 3.5rem);
  text-align: center;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
  animation: reveal-in .22s cubic-bezier(.2, .9, .3, 1.2);
}
.wt-reveal-word {
  font-size: max(1.8rem, 5vw);
  font-weight: 700;
  color: #2a1a0a;
  direction: rtl;
}
.wt-reveal-hint {
  margin: .75rem 0 0;
  color: rgba(42, 26, 10, .75);
  font-size: .85rem;
}
@keyframes reveal-in {
  from { transform: scale(.35); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---- Game-over overlay ------------------------------------------------------ */
.wt-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 12, 16, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; z-index: 50;
  backdrop-filter: blur(3px);
}
.wt-card {
  background: var(--surface);
  border-radius: 20px;
  padding: 2rem clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  box-shadow: var(--shadow);
  max-width: 420px; width: 100%;
}
.result-emoji { font-size: 3rem; }
.wt-card h2 { margin: .25rem 0 .5rem; }
.wt-final-scores { color: var(--ink-soft); font-size: 1rem; font-variant-numeric: tabular-nums; }
.result-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem; }

@media (max-width: 520px) {
  .scorebar { justify-content: center; text-align: center; }

  /* The larger desktop tower would force a lot of scrolling on a phone —
     scale3d (not scale, which would flatten the depth axis) shrinks the
     whole rendered box uniformly without touching the geometry constants
     that JS and the rest of this file share. */
  .tower-wrap { min-height: 480px; padding: 2.5rem 1rem 1.5rem; }
  .tower { transform: scale3d(0.7, 0.7, 0.7) rotateX(-24deg) rotateY(-34deg); }
}