/* WordSmith's page. The colours are the old WordSmith viewer's (Mijabr.AiBattle.Web's React app):
   a green board, pink and red word squares, blue letter squares, almond tiles, cadet blue panels. */
:root {
  --page: #eef6e6;
  --ink: #1d2a24;
  --board: #dfffc0;
  --grid: #ffffff;
  --dl: #a7f6fa;
  --tl: #33b3f6;
  --dw: #f998b9;
  --tw: #f40c00;
  --tile: blanchedalmond;
  --tile-edge: #c9a978;
  --placed: #ffe9a8;
  --last: #ffd27a;
  --panel: cadetblue;
  --panel-ink: #ffffff;
  --accent: #23626a;
  --bad: #b3261e;
  /* Everything scales with the window, so a big screen gets a big board: the text size (--ui),
     the side panel's width, and the board's squares (--cell), as large as fit the height (the
     board, the rack under it, the buttons and the message: about 16.4 squares and some text)
     and the width beside the panel */
  --ui: clamp(15px, calc(0.45vw + 0.45vh), 24px);
  --side: clamp(280px, calc(var(--ui) * 20), 520px);
  --cell: min(calc((100vw - 68px - var(--side)) / 15), calc((100vh - 120px - var(--ui) * 4) / 16.4));
}
/* Upright or narrow: the panel goes under the board, which takes the whole width */
@media (max-width: 700px), (orientation: portrait) {
  :root { --cell: min(calc((100vw - 32px) / 15), calc((100vh - 120px - var(--ui) * 4) / 16.4)); }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

button, .button {
  font: inherit;
  font-size: var(--ui);
  padding: 0.55em 0.95em;
  border: 0;
  border-radius: 6px;
  background: #d8e6e1;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .button:hover { background: #c6dad3; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--accent); color: #fff; }
button.primary:hover { background: #1b4f56; }
button.on { background: var(--accent); color: #fff; }

/* Start */
.start { max-width: calc(var(--ui) * 35); margin: 0 auto; padding: 32px 16px; font-size: var(--ui); }
.start h1 { margin: 0 0 4px; font-size: 2.25em; color: var(--accent); }
.field { display: block; margin: 20px 0; font-weight: 600; }
.field input { display: block; width: 100%; margin-top: 6px; padding: 10px; font: inherit; border: 1px solid #b9c9c3; border-radius: 6px; }
/* Logged in (to the site, for every game), or how to */
.account { margin: 20px 0; }
.account a, button.link { color: var(--accent); font-weight: 600; }
button.link { padding: 0; background: none; text-decoration: underline; }
button.link:hover { background: none; }
/* The ten opponents, by level: the number in a circle, the name, how many words it knows */
.opponents { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--ui) * 15), 1fr)); gap: 8px; }
.opponent {
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.7em; align-items: center;
  text-align: left; padding: 0.6em 0.8em; background: var(--panel); color: var(--panel-ink);
}
.opponent:hover { background: #4b8f92; }
.opponent.last { box-shadow: 0 0 0 3px var(--accent); }
.opponent i {
  grid-row: span 2; font-style: normal; font-weight: 800; width: 2em; height: 2em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--tile); color: var(--ink);
}
.opponent b { font-size: 1.1em; }
.opponent span { opacity: 0.85; font-size: 0.85em; }
.note { margin-top: 24px; }
/* Your games: each a row to go back to it, and a button to remove it */
#my-games h2 { font-size: 1.25em; margin: 24px 0 8px; color: var(--accent); }
.saved-games { display: grid; gap: 8px; }
.saved-game { display: flex; gap: 8px; }
.saved-game .resume {
  flex: 1; display: grid; grid-template-columns: auto 1fr auto; column-gap: 0.7em; align-items: center;
  text-align: left; padding: 0.6em 0.8em; background: var(--panel); color: var(--panel-ink);
}
.saved-game .resume:hover { background: #4b8f92; }
.saved-game.finished .resume { background: #8fa9a7; }
.saved-game i {
  grid-row: span 2; font-style: normal; font-weight: 800; width: 2em; height: 2em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--tile); color: var(--ink);
}
.saved-game b { font-size: 1.1em; }
.saved-game .score { font-weight: 800; font-size: 1.1em; }
.saved-game .state { grid-column: 2 / 4; opacity: 0.85; font-size: 0.85em; }
.saved-game .remove { padding: 0 0.9em; }
.full { color: var(--bad); font-weight: 600; }
.opponent:disabled { opacity: 0.45; }
.note a { color: var(--accent); }

/* Game: the board and rack, with the scores and moves beside (below on a narrow screen) */
.game { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding: 16px; font-size: var(--ui); }
.table { width: calc(var(--cell) * 15); }
.side { width: var(--side); max-width: 100%; display: flex; flex-direction: column; gap: 10px; }

.board {
  display: grid;
  grid-template-columns: repeat(15, var(--cell));
  grid-template-rows: repeat(15, var(--cell));
  background: var(--grid);
  border: 2px solid var(--grid);
  border-radius: 4px;
  user-select: none;
  touch-action: none;
}
.square {
  position: relative;
  border: 1px solid var(--grid);
  background: var(--board);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell) * 0.22);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}
.square.DL { background: var(--dl); }
.square.TL { background: var(--tl); color: rgba(255, 255, 255, 0.9); }
.square.DW, .square.ST { background: var(--dw); }
.square.TW { background: var(--tw); color: rgba(255, 255, 255, 0.9); }
.square.ST { font-size: calc(var(--cell) * 0.6); color: rgba(0, 0, 0, 0.45); }
.square.cursor { outline: 3px solid var(--accent); outline-offset: -3px; z-index: 1; }
.square.cursor::after {
  content: '';
  position: absolute;
  border: calc(var(--cell) * 0.12) solid transparent;
  border-left-color: var(--accent);
  right: calc(var(--cell) * -0.08);
}
.square.cursor.down::after {
  border-left-color: transparent;
  border-top-color: var(--accent);
  right: auto;
  bottom: calc(var(--cell) * -0.08);
}
.square.drop { outline: 3px dashed var(--accent); outline-offset: -3px; }

.tile {
  position: absolute;
  inset: 1px;
  background: var(--tile);
  border-radius: 3px;
  box-shadow: inset 0 -2px 0 var(--tile-edge);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell) * 0.6);
  font-weight: 800;
  color: var(--ink);
}
.tile .value {
  position: absolute;
  right: 8%;
  bottom: 6%;
  font-size: 0.36em;
  font-weight: 700;
}
.tile.blank { color: #c0392b; }
.tile.last { background: var(--last); }
.tile.pending { background: var(--placed); box-shadow: inset 0 -2px 0 var(--tile-edge), 0 0 0 2px var(--accent); cursor: grab; }

.rack-row { display: flex; justify-content: center; margin: 12px 0 8px; }
.rack {
  display: flex;
  gap: 6px;
  padding: 8px;
  min-height: calc(var(--cell) * 1.35 + 16px);
  background: var(--panel);
  border-radius: 6px;
  touch-action: none;
  user-select: none;
}
.rack .tile {
  position: relative;
  inset: auto;
  width: calc(var(--cell) * 1.35);
  height: calc(var(--cell) * 1.35);
  font-size: calc(var(--cell) * 0.8);
  cursor: grab;
}
.rack .tile.chosen { transform: translateY(-6px); box-shadow: inset 0 -2px 0 var(--tile-edge), 0 0 0 3px #fff; }
.rack .tile.swapping { transform: translateY(-6px); background: #f4c7c3; }
.rack .slot { width: calc(var(--cell) * 1.35); height: calc(var(--cell) * 1.35); border-radius: 3px; background: rgba(255, 255, 255, 0.15); }
/* While a tile is dragged: its place is left empty, and the others slide to open a space where
   it will drop (wordsmith.js openGap) */
.rack > * { transition: transform 0.15s ease; }
.tile.lifted, .slot.lifted { visibility: hidden; }

.dragging {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  width: calc(var(--cell) * 1.2);
  height: calc(var(--cell) * 1.2);
  font-size: calc(var(--cell) * 0.75);
  transform: translate(-50%, -60%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.message { min-height: 1.5em; margin-top: 10px; text-align: center; font-weight: 600; }
.message.bad { color: var(--bad); }
.message.thinking::after { content: ' …'; }

.panel { background: var(--panel); color: var(--panel-ink); border-radius: 6px; padding: 10px 12px; }
.panel-title { font-weight: 700; font-size: 1.15em; margin-bottom: 0.35em; }
.scores .player { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.scores .player b { font-size: 1.45em; }
.scores .player.turn span::before { content: '▶ '; }
.scores .player small { opacity: 0.8; margin-left: 6px; }
.bag { display: flex; justify-content: space-between; }
/* The moves fill what's left of the column beside the board, scrolling only once that's full.
   (contain: size keeps a long list from making the column, and so the page, taller than the
   board.) Under the board, where nothing sets the column's height, the list has a cap instead. */
.moves { flex: 1; min-height: 120px; display: flex; flex-direction: column; }
.moves ol { flex: 1 1 0; min-height: 0; contain: size; margin: 0; padding-left: 22px; overflow-y: auto; font-size: 0.93em; line-height: 1.45; }
@media (max-width: 700px), (orientation: portrait) {
  .moves ol { flex: none; contain: none; max-height: 40vh; }
}
.side-buttons { display: flex; gap: 8px; }
.help { font-size: 0.87em; opacity: 0.75; margin: 0; }

.dialog { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
.dialog-box { background: var(--page); border-radius: 8px; padding: 16px; max-width: calc(var(--ui) * 24); text-align: center; font-size: var(--ui); }
.dialog-box .panel-title { color: var(--ink); }
/* The page's dialogs fade in, the box rising a little */
.dialog:not([hidden]) { animation: dialog-in 0.15s ease-out; }
.dialog:not([hidden]) .dialog-box { animation: box-in 0.18s ease-out; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); }
@keyframes dialog-in { from { background: rgba(0, 0, 0, 0); } }
@keyframes box-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
/* A question (ask): its title, what it means, and the answers, the yes on the right */
.dialog-box.ask { text-align: left; width: calc(var(--ui) * 22); max-width: 100%; padding: 20px 22px; border-top: 5px solid var(--accent); }
.dialog-box.ask p { margin: 0.4em 0 0; line-height: 1.45; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
button.danger { background: var(--bad); color: #fff; }
button.danger:hover { background: #8f1e18; }
.dialog-buttons button:focus-visible { outline: 3px solid var(--last); outline-offset: 2px; }
.letters { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 10px 0 14px; }
.letters button { padding: 8px 0; font-weight: 800; background: var(--tile); }

@media (max-width: 700px) {
  .game { padding: 16px 16px 24px; }
  .side { width: 100%; }
}