/* Tema padrão (tenebroso): pergaminho e vinho no claro, quase preto com vinho no
   escuro. Sangue para correta, osso (com letra escura) para presente e chama de vela
   para letra descartada. Correta, presente, ausente e tecla livre diferem também na
   claridade, para quem não distingue as cores. */
:root {
  --bg: #f2ebe3;
  --text: #2a1a1e;
  --muted: #7a6569;
  --tile-border: #cdbfb8;
  --tile-empty: #faf6f1;
  --key-bg: #ddd0c8;
  --correct: #9e1b2a;
  --present: #c9ad74;
  --absent: #857a7c;
  --on-color: #ffffff;
  --on-present: #2a1a1e;
  --danger: #b35a12;
  --bar-bg: #e3d7cf;
  /* Vida e guilhotina: sangue (cheio → no fim), madeira, aço, pele, lápide e véu do fim */
  --blood: #b0182a;
  --blood-dark: #4f0a12;
  --trail: #e8c9a0;
  --wood: #6b4a3a;
  --steel: #9a9396;
  --steel-edge: #d6d0d3;
  --skin: #e2c2b0;
  --stone: #6f676a;
  --scrim: rgba(20, 8, 10, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #140d0f;
    --text: #eadfe1;
    --muted: #a08a8f;
    --tile-border: #3f2c31;
    --tile-empty: #1a1114;
    --key-bg: #736268;
    --present: #d6c49c;
    --absent: #2e2024;
    --on-color: #f3eae6;
    --danger: #c06a1c;
    --bar-bg: #2a1a1e;
    --blood: #c41e33;
    --blood-dark: #5c0b15;
    --trail: #8a6e55;
    --wood: #7d5a48;
    --steel: #8c8588;
    --steel-edge: #c9c3c6;
    --stone: #4d4447;
    --scrim: rgba(8, 3, 4, 0.7);
  }
}

/* Tema argila (botão ◐): inspirado na paleta da Anthropic. O seletor com
   atributo ganha do :root, inclusive na variante escura do padrão. */
:root[data-theme="argila"] {
  --bg: #faf9f5;
  --text: #141413;
  --muted: #6b6a64;
  --tile-border: #d9d6cc;
  --tile-empty: #ffffff;
  --key-bg: #e8e6dc;
  --correct: #788c5d;
  --present: #d97757;
  --absent: #87867f;
  --on-color: #ffffff;
  --on-present: var(--on-color);
  --danger: #b53333;
  --bar-bg: #e8e6dc;
  --blood: #a3201f;
  --blood-dark: #4a0e0c;
  --trail: #e3cfa6;
  --wood: #6e5640;
  --stone: #77756d;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="argila"] {
    --bg: #141413;
    --text: #faf9f5;
    --muted: #a8a69e;
    --tile-border: #3d3d3a;
    --tile-empty: #1f1e1d;
    --key-bg: #3d3d3a;
    --present: #c96442; /* argila mais escura: #d97757 não chega a 3:1 com o texto marfim */
    --absent: #2e2d2a;
    --on-color: #faf9f5;
    --danger: #e5534b;
    --bar-bg: #2e2d2a;
    --blood: #c4342b;
    --blood-dark: #5a1410;
    --trail: #8a7655;
    --wood: #7e6650;
    --stone: #4a4944;
  }
}


* { box-sizing: border-box; }

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

/* Layout igual em todos os modos: cabeçalho, fim de partida e teclado numa coluna
   fixa e centralizada; só o tabuleiro se alarga com o número de colunas. As peças
   têm o mesmo tamanho máximo em todos os modos e só encolhem quando não cabem. */
body {
  /* --row-columns: colunas por linha do tabuleiro (no celular, o tenebrosíssimo usa
     2 por faixa); --cost-slots: 2 com 1 coluna (custo à direita e espaço igual à
     esquerda), 1 com várias (custo no meio). */
  --row-columns: 1;
  --cost-slots: 2;
  --gap: 6px;
  --group-gap: 6px;
  --cost-width: 2.5rem;
  --pad: 16px;
  --tile-max: 52px;
  --board-max: 1200px;
  --tile: min(var(--tile-max), calc(
    (min(100vw, var(--board-max)) - 2 * var(--pad) - var(--cost-slots) * var(--cost-width)
      - (var(--row-columns) + var(--cost-slots) - 1) * var(--group-gap) - var(--row-columns) * 4 * var(--gap))
    / (5 * var(--row-columns))));
  display: flex;
  flex-direction: column;
  height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.top, .end, .keyboard { width: min(100% - 32px, 488px); margin-inline: auto; }

body.columns-2, body.columns-4 {
  --row-columns: 2;
  --cost-slots: 1;
  --gap: clamp(3px, 0.8vw, 6px);
  --group-gap: clamp(8px, 2.5vw, 32px);
  --cost-width: 2.25rem;
  --pad: 12px;
}
@media (min-width: 601px) {
  body.columns-4 { --row-columns: 4; --gap: clamp(3px, 0.4vw, 5px); }
}
body:not(.columns-1) .row-cost { font-size: 0.75rem; }

/* Cabeçalho e saldo de pontos */
.top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tile-border);
}
.top h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; letter-spacing: 0.02em; }

/* Modo treino: selo ao lado do nome e botão de nova partida */
[hidden] { display: none !important; }
.brand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mode {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--present);
  color: var(--on-present);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.new-game {
  padding: 6px 12px;
  border: 1px solid var(--tile-border);
  border-radius: 6px;
  background: var(--key-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.brand .new-game { flex-basis: 100%; max-width: max-content; padding: 2px 10px; }
.end .new-game { margin-top: 8px; font-size: 0.95rem; }
/* Botão de tema, ao lado do saldo */
.top-right { display: flex; align-items: center; gap: 12px; }
.theme {
  width: 36px;
  height: 36px;
  border: 1px solid var(--tile-border);
  border-radius: 50%;
  background: var(--key-bg);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
/* Abas de modo: segunda linha do cabeçalho */
.modes { display: flex; grid-column: 1 / -1; justify-content: center; gap: 6px; }
.tab {
  padding: 4px 10px;
  border: 1px solid var(--tile-border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.tab.active { border-color: var(--text); background: var(--text); color: var(--bg); }
.life { display: flex; align-items: center; gap: 6px; }
.points { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 8px; }
.points-label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; }
.points-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.points-bar { position: relative; grid-column: 1 / -1; width: 130px; height: 8px; border-radius: 4px; background: var(--bar-bg); overflow: hidden; }
/* Vida: sangue que escurece conforme cai (--life, de 1 a 0). O rastro mostra o dano
   do último palpite e some devagar. */
.points-fill, .points-trail { position: absolute; inset: 0 auto 0 0; }
.points-fill {
  background: color-mix(in srgb, var(--blood) calc(var(--life, 1) * 100%), var(--blood-dark));
  transition: width 0.3s, background-color 0.4s;
}
.points-trail { background: var(--trail); transition: width 0.9s ease-in 0.4s; }
.points-trail.instant { transition: none; }
/* Perigo: o próximo palpite errado pode ser fatal */
.life.danger .points-bar { animation: heartbeat 1.1s infinite; }
.life.danger .points-value { color: var(--blood); }
@keyframes heartbeat {
  0%, 40%, 100% { transform: scale(1); }
  10%, 30% { transform: scale(1.06, 1.35); }
}
/* Celular: botões e barra menores para o cabeçalho caber em 375px */
@media (max-width: 420px) {
  .top-right { gap: 6px; }
  .theme { width: 30px; height: 30px; font-size: 0.95rem; }
  .points-bar { width: 72px; }
}
/* Marca do saldo mínimo para jogar: abaixo dela, derrota */
.points-min { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--text); opacity: 0.6; }

/* Tabuleiro: cresce uma linha por palpite, com rolagem */
.game { position: relative; flex: 1; min-height: 0; }
.board {
  height: 100%;
  overflow-y: auto;
  padding: 12px var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}
.row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--group-gap);
}
/* Com 1 coluna, um espaço à esquerda do tamanho do custo centraliza as peças */
.row.single::before { content: ''; width: var(--cost-width); flex: none; }
/* Tenebrosíssimo no celular: duas faixas (2×2), cada uma com rolagem própria */
.board.banded { display: grid; grid-template-rows: 1fr 1fr; align-items: stretch; gap: 0; overflow: hidden; }
.band {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  padding: 4px 0;
}
.band + .band { border-top: 1px solid var(--tile-border); padding-top: 8px; }
/* Um grupo de 5 peças por coluna; coluna resolvida antes do palpite fica em branco */
.group { display: flex; gap: var(--gap); border-radius: 6px; }
.group.empty { visibility: hidden; }
.group.solved { outline: 2px solid var(--correct); outline-offset: 2px; }
.tile {
  position: relative;
  width: var(--tile);
  height: var(--tile);
  display: grid;
  place-items: center;
  border: 2px solid var(--tile-border);
  border-radius: 6px;
  background: var(--tile-empty);
  font-size: max(9px, calc(var(--tile) * 0.5));
  font-weight: 700;
  text-transform: uppercase;
}
.tile.filled { border-color: var(--muted); }
.tile.correct, .tile.present, .tile.absent { border-color: transparent; color: var(--on-color); }
.tile.present { color: var(--on-present); }
.tile.correct { background: var(--correct); }
.tile.present { background: var(--present); }
.tile.absent { background: var(--absent); }

/* Custo de cada letra na linha atual: letra descartada fica destacada */
.tile .cost {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted);
}
.tile.discarded { border-color: var(--danger); }
.tile.discarded .cost { color: var(--danger); }

/* Espaço selecionado na linha atual: clique em um espaço ou use as setas */
.row.current .tile { cursor: pointer; }
.tile.selected { border-bottom-width: 6px; border-bottom-color: var(--text); }

.row-cost { flex: none; width: var(--cost-width); text-align: center; font-size: 0.9rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.row-cost.repeat { visibility: hidden; }
.row.current .row-cost { color: var(--text); }
.row.shake { animation: shake 0.3s; }
@keyframes shake {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Guilhotina: --drop (0 a 1) desce a lâmina até logo acima da cabeça; na derrota ela
   cai, a cabeça rola e o sangue escorre. Sem transição na primeira pintura (.still). */
.guillotine { width: 38px; height: 42px; flex: none; overflow: hidden; }
.g-wood { fill: var(--wood); }
.g-weight { fill: var(--wood); opacity: 0.85; }
.g-steel { fill: var(--steel); }
.g-edge { fill: var(--steel-edge); transition: fill 0.2s 0.25s; }
.g-skin { fill: var(--skin); }
.g-eye { fill: var(--text); }
.g-pool, .g-spurt { fill: var(--blood); }
.g-blade { transform: translateY(calc(var(--drop, 0) * 12px)); transition: transform 0.6s cubic-bezier(0.5, 0, 0.7, 1.4); }
.g-head { transform-box: fill-box; transform-origin: center; transition: transform 0.9s ease-in 0.3s; }
.g-pool { transform-box: fill-box; transform-origin: center; transform: scaleX(0); transition: transform 1.2s ease-out 0.9s; }
.g-spurt { opacity: 0; }
.guillotine.lost .g-blade { transform: translateY(23px); transition: transform 0.22s cubic-bezier(0.6, 0, 1, 1); }
.guillotine.lost .g-edge { fill: var(--blood); }
.guillotine.lost .g-head { transform: translate(20px, 14px) rotate(140deg); }
.guillotine.lost .g-pool { transform: scaleX(1); }
.guillotine.lost .g-spurt { animation: spurt 0.8s ease-out 0.25s both; }
.guillotine.lost .g-eye { fill: var(--blood-dark); }
.guillotine.still * { transition: none !important; animation: none !important; }
.guillotine.still.lost .g-spurt { opacity: 0; }
@keyframes spurt {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* Mensagens rápidas: sobre a linha das abas, sem cobrir o tabuleiro */
.message {
  position: absolute;
  z-index: 2;
  top: -4px;
  left: 50%;
  transform: translate(-50%, -100%);
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.message.visible { opacity: 1; }

/* Fim de partida: cartão sobre o tabuleiro, com véu escuro. Fechado, fica o botão
   "Ver resultado". */
.end {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--scrim);
  animation: end-fade 0.6s ease-out both;
}
.end-card {
  position: relative;
  width: min(100%, 420px);
  max-height: 100%;
  overflow-y: auto;
  padding: 20px 20px 16px;
  border: 1px solid var(--tile-border);
  border-top: 3px solid var(--blood);
  border-radius: 10px;
  background: var(--bg);
  text-align: center;
  animation: end-rise 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.end-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.end-kicker { margin: 0; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; }
.end h2 { margin: 4px 0 12px; font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.03em; }
.end.derrota h2 { color: var(--blood); }
.end h2 { margin-bottom: 4px; }
.end-phrase { margin: 0 0 12px !important; color: var(--muted); font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.end p { margin: 6px 0; }
.end-text { line-height: 1.45; }
.end-next { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.end .new-game { margin-top: 8px; font-size: 0.95rem; }
/* Palavras secretas em peças; na derrota, as não resolvidas viram lápides */
.end-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 4px 0 10px; }
.end-word { display: flex; gap: 3px; padding: 4px; border-radius: 8px; }
.end-word .tile { --tile: 30px; font-size: 0.95rem; }
.end-word.tomb { padding: 14px 8px 8px; border-radius: 40px 40px 6px 6px; background: var(--stone); }
.end-word.tomb .tile { border-color: transparent; background: color-mix(in srgb, var(--stone) 70%, black); color: var(--on-color); }
.end-open {
  position: absolute;
  z-index: 2;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border: 1px solid var(--blood);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
@keyframes end-fade { from { opacity: 0; } }

/* Como jogar: cartão sobre a página inteira, com o mesmo véu do fim de partida */
.help {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--scrim);
  animation: end-fade 0.3s ease-out both;
}
.help-card {
  position: relative;
  width: min(100%, 460px);
  max-height: 100%;
  overflow-y: auto;
  padding: 20px 20px 16px;
  border: 1px solid var(--tile-border);
  border-top: 3px solid var(--blood);
  border-radius: 10px;
  background: var(--bg);
  line-height: 1.45;
  animation: end-rise 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.help h2 { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; text-align: center; }
.help h3 { margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--tile-border); color: var(--muted); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; }
.help p { margin: 6px 0; }
.help-note { color: var(--muted); font-size: 0.9rem; }
.help-example { margin: 10px 0; }
.help-example p { margin-top: 4px; font-size: 0.95rem; }
.help-inline { display: flex; align-items: center; gap: 12px; }
.help-inline p { margin: 0; }
.help-row { display: flex; gap: 4px; }
.help .tile { --tile: 40px; flex: none; font-size: 1.2rem; }
.help-life { flex: 1; }
.help-life .points-bar { width: 100%; height: 10px; }
.help-life .points-fill { width: 60%; --life: 0.5; }
.help-life .points-min { left: 20%; }
.help-guillotine .guillotine { width: 48px; height: 53px; }
.help-play { display: block; margin: 12px auto 0; padding: 8px 28px; font-size: 1rem; }
@keyframes end-rise { from { opacity: 0; transform: translateY(24px) scale(0.96); } }

/* Teclado virtual */
.keyboard { padding: 8px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.keyboard-row { display: flex; justify-content: center; gap: 5px; }
.key {
  position: relative;
  flex: 1;
  max-width: 44px;
  height: 52px;
  border: 0;
  border-radius: 6px;
  background: var(--key-bg);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.key.wide { flex: 1.6; max-width: 72px; font-size: 0.75rem; }
.key.correct, .key.present, .key.absent { color: var(--on-color); }
.key.present { color: var(--on-present); }
.key.correct { background: var(--correct); }
.key.present { background: var(--present); }
.key.absent { background: var(--absent); }
/* Letra descartada: mostra que custa o valor de letra descartada */
.key .cost { position: absolute; top: 2px; right: 4px; font-size: 0.6rem; font-weight: 600; opacity: 0.85; }
.key:disabled { cursor: default; opacity: 0.6; }

/* Teclado dividido (várias colunas): um segmento por coluna, por trás da letra.
   2 colunas: metades esquerda e direita; 4 colunas: quadrantes em ordem de leitura. */
.key.split { overflow: hidden; padding: 0; }
.key.split .seg { position: absolute; width: 50%; height: 100%; top: 0; }
.key.split .seg:nth-child(odd) { left: 0; }
.key.split .seg:nth-child(even) { right: 0; }
.key.split.split-4 .seg { height: 50%; }
.key.split.split-4 .seg:nth-child(n + 3) { top: 50%; }
.key.split .seg.correct { background: var(--correct); }
.key.split .seg.present { background: var(--present); }
.key.split .seg.absent { background: var(--absent); }
.key.split .label { position: absolute; inset: 0; display: grid; place-items: center; }
.key.split.marked .label { color: var(--on-color); text-shadow: 0 0 3px rgba(0, 0, 0, 0.7); }
.key.split .cost { z-index: 1; }

/* Movimento reduzido: só o estado final, sem animações nem transições */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}