* { box-sizing: border-box; }

:root {
  --green: #538d4e;
  --yellow: #b59f3b;
  --grey: #3a3a3c;
  --bg: #121213;
  --fg: #ffffff;
  --key: #818384;
  --gap: 5px;
  /* Row count is set by ui.js from game.mode.maxGuesses when a game starts;
     8 (Fibble, the default mode) is the fallback before JS runs. */
  --rows: 8;
  /* header + 3-row keyboard + endgame row + padding, see task-6-report.md */
  --reserved: 260px;
  /* 100vh first as a fallback for browsers without dvh support, then
     100dvh so iOS Safari's address-bar chrome doesn't get counted as
     visible space. Tile shrinks as row count grows so up to 10 rows
     plus the keyboard always fit without scrolling. clamp()'s floor keeps
     the tile from going negative on a viewport shorter than --reserved
     (e.g. a phone in landscape) - the max is clamp's own 62px ceiling,
     so it doesn't need to be repeated inside the min() below. */
  --tile: clamp(18px, min(13vw, calc((100vh - var(--reserved)) / var(--rows) - var(--gap))), 62px);
  --tile: clamp(18px, min(13vw, calc((100dvh - var(--reserved)) / var(--rows) - var(--gap))), 62px);
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: max(4px, env(safe-area-inset-top)) 6px
           max(6px, env(safe-area-inset-bottom));
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

header {
  width: 100%;
  max-width: 520px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--grey);
  padding-bottom: 4px;
}

h1 { font-size: clamp(18px, 5vw, 26px); margin: 0; letter-spacing: 1px; }
h1 .dk { color: var(--green); margin-left: 4px; }

#session-badge {
  font-size: clamp(10px, 2.8vw, 13px);
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--grey);
  color: #d7dadc;
}

#session-badge.daily { background: #2b4a2a; color: #a8d5a2; }
#session-badge.done  { background: #4a4520; color: #e0d48a; }

.controls { display: flex; gap: 6px; align-items: center; }

.controls select,
.controls button,
#endgame button,
#help button {
  background: var(--grey);
  color: var(--fg);
  border: 0;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

main { display: flex; align-items: center; flex: 1; min-height: 0; }

#board { display: grid; gap: var(--gap); }
.row { display: grid; grid-template-columns: repeat(5, var(--tile)); gap: var(--gap); }

.tile {
  position: relative;
  width: var(--tile);
  height: var(--tile);
  display: grid;
  place-items: center;
  font-size: calc(var(--tile) * 0.52);
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid var(--grey);
  background: transparent;
  /* Long-press is a marking gesture here, not text selection - without this
     iOS shows its selection callout mid-press, fighting the gesture. */
  -webkit-touch-callout: none;
}

.tile.filled { border-color: var(--key); }
.tile.green  { background: var(--green);  border-color: var(--green); }
.tile.yellow { background: var(--yellow); border-color: var(--yellow); }
.tile.grey   { background: var(--grey);   border-color: var(--grey); }

/* Marks a tile that lied, once the game is over. */
.tile.lie::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px dashed #ff5d5d;
}

/* Player annotations (long-press / right-click, see src/marks.js) - a small
   corner glyph via ::before, deliberately left free by .tile.lie's ::after,
   so the tile's own colour and letter stay fully readable. */
.tile.mark-suspect::before,
.tile.mark-trusted::before {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: calc(var(--tile) * 0.32);
  font-weight: 700;
  line-height: 1;
}
.tile.mark-suspect::before { content: "✗"; color: #ff5d5d; }
.tile.mark-trusted::before { content: "✓"; color: #a8d5a2; }

#keyboard { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 520px; }
.krow { display: flex; gap: 4px; justify-content: center; }

.key {
  flex: 1 1 0;
  min-width: 0;
  height: min(8vh, 52px);
  border: 0;
  border-radius: 4px;
  background: var(--key);
  color: var(--fg);
  font-size: clamp(11px, 3.4vw, 15px);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.key.wide { flex: 1.6 1 0; font-size: clamp(10px, 3vw, 13px); }
.key.green  { background: var(--green); }
.key.yellow { background: var(--yellow); }
.key.grey   { background: #232324; color: #8d8d8d; }

#toast {
  position: fixed;
  top: 14%;
  background: #e4e4e4;
  color: #121213;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
  z-index: 10;
  text-align: center;
}
#toast.show { opacity: 1; }

#endgame {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 15px;
}
#endgame[hidden] { display: none; }
#endgame-text { margin: 0; font-weight: 600; }
#endgame .answer { color: var(--green); text-transform: uppercase; }

#help {
  max-width: 420px;
  background: #1a1a1b;
  color: var(--fg);
  border: 1px solid var(--grey);
  border-radius: 8px;
  line-height: 1.45;
  font-size: 15px;
}
#help::backdrop { background: rgba(0, 0, 0, 0.6); }
#help ul { padding-left: 18px; }
#help li { margin-bottom: 6px; }

.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  vertical-align: -2px;
  margin-right: 4px;
}
.swatch.green { background: var(--green); }
.swatch.yellow { background: var(--yellow); }
.swatch.grey { background: var(--grey); }