:root {
  --bg: #12141a;
  --panel: #1b1e27;
  --line: #2c313d;
  --text: #eef1f7;
  --muted: #939bad;
  --correct: #4f9d5d;
  --present: #c2a63b;
  --absent: #3a4050;
  --accent: #63a4ff;
  --radius: 12px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  /* dvh, not vh: mobile browser chrome and Discord's own frame both change
     the usable height, and vh keeps measuring the height it had at load. */
  height: 100dvh;
  /* The whole game is meant to sit on one screen. If something does overflow
     the fix is to make it smaller, not to let the player hunt for the
     keyboard. */
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

/* --- Top bar --------------------------------------------------------- */
.topbar {
  width: 100%;
  max-width: 520px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: 0.16em;
  font-weight: 800;
}
.wordmark span { color: var(--accent); }

.icon-btn {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.15rem;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
}
.icon-btn:hover { color: var(--text); background: var(--panel); }

/* --- Layout ---------------------------------------------------------- */
main {
  width: 100%;
  max-width: 520px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
}

.boot { color: var(--muted); margin-top: 3rem; }

/* --- Photo ----------------------------------------------------------- */
/* The photo is the only elastic part of the layout: the board and keyboard
   need the room they need, and whatever is left over is the picture. That way
   the game fits any screen without ever scrolling. */
.viewer {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  justify-content: center;
}

.frame {
  position: relative;
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  max-width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The zoom-out reads as a camera pulling back rather than an image swap. */
  animation: pullback 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes pullback {
  from { transform: scale(1.35); opacity: 0.55; }
  to   { transform: scale(1);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .frame img { animation: none; }
}

.zoom-pips {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.pip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}
.pip.on { background: var(--accent); }

/* --- Board ----------------------------------------------------------- */
.board {
  flex: 0 0 auto;
  --tile: min(46px, 6vh, 14vw);
  display: grid;
  gap: 5px;
  width: max-content;
  max-width: 100%;
}
.row {
  display: grid;
  grid-template-columns: repeat(var(--len, 5), var(--tile));
  grid-auto-rows: var(--tile);
  gap: 5px;
}

.tile {
  display: grid;
  place-items: center;
  font-size: calc(var(--tile) * 0.52);
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: transparent;
  transition: background 180ms, border-color 180ms, transform 120ms;
}
.tile.filled { border-color: #4c5468; transform: scale(1.04); }
.tile.correct { background: var(--correct); border-color: var(--correct); }
.tile.present { background: var(--present); border-color: var(--present); color: #1b1e27; }
.tile.absent  { background: var(--absent);  border-color: var(--absent); }

.row.invalid { animation: shake 380ms; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(4px); }
  50% { transform: translateX(-6px); }
}

.message {
  flex: 0 0 auto;
  min-height: 1.15em;
  margin: 0;
  font-size: 0.92rem;
  color: var(--accent);
  text-align: center;
}
.message.error { color: #ff8f8f; }

/* --- Keyboard -------------------------------------------------------- */
.keyboard {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-bottom: env(safe-area-inset-bottom, 8px);
}
.krow { display: flex; gap: 5px; justify-content: center; }

.key {
  flex: 1 1 auto;
  min-width: 0;
  height: min(44px, 5.5vh);
  border: 0;
  border-radius: 6px;
  background: #454c5e;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 140ms;
}
.key.wide { flex: 1.6 1 auto; font-size: 0.72rem; }
.key:active { filter: brightness(1.25); }
.key.correct { background: var(--correct); }
.key.present { background: var(--present); color: #1b1e27; }
.key.absent  { background: #262b36; color: #6d7488; }

/* --- Dialogs --------------------------------------------------------- */
.sheet {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius);
  max-width: 420px;
  width: calc(100% - 32px);
  padding: 20px;
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.65); }
.sheet h2 { margin: 0 0 12px; font-size: 1.15rem; letter-spacing: 0.04em; }
.sheet h3 { margin: 18px 0 8px; font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.sheet ul { padding-left: 18px; line-height: 1.55; }
.sheet p { line-height: 1.55; }

.legend { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; font-size: 0.9rem; }
.legend span { display: flex; align-items: center; gap: 10px; }
.legend .tile { width: 34px; aspect-ratio: 1; font-size: 1rem; }

.fine { color: var(--muted); font-size: 0.82rem; }

.stat-row { display: flex; justify-content: space-between; gap: 8px; text-align: center; }
.stat-row div { flex: 1; }
.stat-row b { display: block; font-size: 1.6rem; }
.stat-row small { color: var(--muted); font-size: 0.72rem; }

.dist { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.dist .bar-row { display: flex; align-items: center; gap: 8px; }
.dist .bar {
  background: var(--absent);
  padding: 2px 7px;
  border-radius: 4px;
  min-width: 24px;
  text-align: right;
  font-weight: 700;
}
.dist .bar.best { background: var(--correct); }

.share-preview {
  background: #0e1016;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: pre-wrap;
  margin: 14px 0 10px;
}

button.primary, button.ghost {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  margin-top: 12px;
  border: 0;
}
button.primary { background: var(--accent); color: #0e1016; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }

.legend .tile { width: 34px; height: 34px; font-size: 1rem; }

/* Roomy screens: let the photo breathe. */
@media (min-height: 900px) {
  .frame { height: min(340px, 32vh); }
  .board { --tile: min(56px, 6vh, 15vw); }
}

/* Discord Activity: the client draws its own chrome over the top of the
   iframe, so keep the header out from under it. Set by discord.js, so it only
   applies when the game is actually running inside Discord. */
body.in-discord {
  padding-top: max(env(safe-area-inset-top, 0px), 8px);
}