/*
 * Daily-Wordle layout. Rewritten (2026-08-19) to drop the ported Django
 * page's `zoom:` hacks and JS-measured `--keyboard-space`/board-size
 * variables in favor of a plain flex column (header / board-area /
 * keyboard, each sized by its own content) plus CSS container query units
 * for the board - the board area is a size container, so
 * `.game-board`'s height can read the container's own live height/width
 * (`cqh`/`cqw`) directly in `calc()`, without any resize listener.
 * Requires tokens.css + components.css to be loaded first (site header,
 * buttons, `--paper`/`--surface`/`--accent`/`--tile-*` tokens). The Wordle
 * tile colors (--tile-correct/present/absent) are the one thing the
 * self-serve theme picker deliberately never touches - see customTheme.js.
 */

html, body {
  height: 100%;
}

body {
  overflow: hidden;
}

.game-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.game-header {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-4);
}

.game-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.game-header .btn {
  padding: 8px 14px;
  font-size: 0.88rem;
}

.game-board-area {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 2vmin, 18px);
  container-type: size;
  container-name: board-area;
}

.game-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: clamp(4px, 1.4vmin, 10px);
  aspect-ratio: 5 / 6;
  width: min(94vw, 30rem);
  max-width: 100%;
}

/* Progressive enhancement: once the browser understands size containment,
 * size the board from the container's own live box instead of the
 * viewport, so it fills exactly the space left between header and
 * keyboard on any screen - phone or ultrawide desktop - without a JS
 * resize listener. cqh/cqw are widely supported since 2023. */
@supports (container-type: size) {
  .game-board {
    width: auto;
    height: min(100cqh, calc(100cqw * 6 / 5), 640px);
  }
}

.cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  font-size: clamp(1rem, 6cqh, 2.4rem);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  color: var(--ink);
  font-weight: 700;
}

.cell.flip {
  animation: flip 0.5s ease-in-out forwards;
}

@keyframes flip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}

.cell.correct { background: var(--tile-correct); border-color: transparent; color: #fff; }
.cell.present { background: var(--tile-present); border-color: transparent; color: #fff; }
.cell.absent  { background: var(--tile-absent);  border-color: transparent; color: #fff; }

.invalid-letter {
  color: var(--danger) !important;
}

.keyboard-area {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-1) max(var(--space-1), env(safe-area-inset-bottom));
}

.keyboard {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  gap: 7px;
}

.key-row {
  display: grid;
  gap: 3px;
}

.row-1 { grid-template-columns: repeat(13, 1fr); }
.row-2 { grid-template-columns: repeat(11, 1fr); }
.row-3 { grid-template-columns: repeat(11, 1fr); }

/* Desktop/tablet default: height off dvh, capped so keys never grow past
 * a sane size in a tall browser window (mouse input, not a tap target
 * concern the way phones are). */
.key {
  height: clamp(42px, 6.4dvh, 58px);
  font-size: clamp(0.85rem, 2.2vw, 1.4rem);
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface-sunken);
  color: var(--ink);
  font-weight: 600;
  transition: background 0.15s, transform 0.1s;
}

/*
 * Phone only: matches slivce/wordle/templates/wordle/game.html's original
 * key proportions exactly (aspect-ratio: 1/1.8, tight 1px/6px gaps) - per
 * explicit direction, replicate that sizing on phones specifically, not
 * site-wide. Desktop keeps the dvh-clamped height above untouched.
 */
@media (max-width: 640px) {
  .keyboard {
    gap: 6px;
  }

  .key-row {
    gap: 1px;
  }

  .key {
    height: auto;
    aspect-ratio: 1 / 1.8;
  }
}

.key:hover { border-color: var(--accent); }

.key.correct { background: var(--tile-correct); color: #fff; border-color: transparent; }
.key.present { background: var(--tile-present); color: #fff; border-color: transparent; }
.key.absent  { background: var(--tile-absent);  color: #fff; border-color: transparent; }

.key.pressed {
  transform: scale(0.94);
}

.action-key {
  font-weight: 700;
  font-size: clamp(0.8rem, 1.8vw, 1.1rem);
}

/* ---------- Result / rules modal ---------- */

.modal {
  display: none;
  position: fixed;
  z-index: 99999;
  inset: 0;
  background: rgba(10, 12, 20, 0.45);
  backdrop-filter: blur(2px);
}

.modal-content {
  background: var(--surface);
  color: var(--ink);
  margin: 8dvh auto;
  padding: var(--space-6) var(--space-5) var(--space-5);
  width: min(90vw, 360px);
  max-height: 80dvh;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position: relative;
  text-align: center;
  animation: popup-fadein 0.25s;
}

@keyframes popup-fadein {
  from { transform: translateY(-16px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-faint);
  background: none;
  border: none;
}

.modal-content h2 {
  color: var(--accent);
  margin: 0 0 var(--space-3);
  font-size: 1.2rem;
}

.modal-content p {
  text-align: left;
}

#resultMessage {
  font-size: 1.05rem;
  margin: var(--space-3) 0;
}

#resultEmoji {
  font-family: var(--mono);
  font-size: 1.3rem;
  background: none;
  margin: var(--space-2) 0;
}

.streak-content {
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-3);
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.rules-list {
  padding-left: 1.2rem;
  text-align: left;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ink);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  max-width: 90%;
  text-align: center;
  white-space: pre-wrap;
}

.toast.show {
  opacity: 0.95;
  transform: translateX(-50%) translateY(10px);
}