/* The game panel and every board in it. Structure and layout only: colors come
   from the skin variables, so a board looks like it belongs in whichever skin
   is on. */

.game-panel {
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 6px 6px 0;
  background: var(--transcript-bg);
  border: 1px solid var(--transcript-border);
  border-radius: var(--transcript-radius);
  overflow: hidden;
  /* The board takes the top of the tab and the transcript keeps the rest, so
     you can still talk while you play. */
  max-height: 58%;
}

.game-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--toolbar-border);
}
.game-name { font-weight: bold; color: var(--accent-strong); }
.game-status { flex: 1; min-width: 0; color: var(--muted); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-actions { flex: none; display: flex; gap: 5px; }
.game-actions .button { min-width: 0; padding: 2px 10px; font-size: 11px; }

.game-body { flex: 1; overflow: auto; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.game-body .hint { color: var(--muted); font-size: 11px; text-align: center; }
.game-turn-mine { color: var(--accent-strong); font-weight: bold; }

/* ---------- the challenge card in the transcript ---------- */

.actcard {
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 3px 0; padding: 7px 10px;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 5px;
}
.actcard .actname { font-weight: bold; }
.actcard .actwhat { color: var(--muted); }

/* Waiting on the other person: a ring and three dots, so a challenge nobody
   has answered yet reads as pending rather than as stuck. */
.actwait { display: inline-flex; align-items: center; gap: 6px; }
.actwait .spinner {
  width: 11px; height: 11px; flex: none;
  border: 2px solid var(--card-border);
  border-top-color: var(--accent-strong);
  border-radius: 50%;
  animation: bm-spin .8s linear infinite;
}
@keyframes bm-spin { to { transform: rotate(360deg); } }

.dots3 { display: inline-flex; margin-left: -2px; }
.dots3 i { font-style: normal; animation: bm-dot 1.2s ease-in-out infinite; }
.dots3 i:nth-child(2) { animation-delay: .2s; }
.dots3 i:nth-child(3) { animation-delay: .4s; }
@keyframes bm-dot {
  0%, 60%, 100% { opacity: .25; }
  30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .actwait .spinner { animation: none; border-top-color: var(--card-border); }
  .dots3 i { animation: none; opacity: 1; }
}
.actcard .button { min-width: 0; padding: 2px 12px; font-size: 11px; }
.actcard.done { opacity: .85; }

/* ---------- the game picker ---------- */

.game-picker-lead { margin: 0 0 12px; color: var(--muted); }

.game-grid {
  display: grid;
  /* Fills whatever width the window gives it and wraps, so it never scrolls
     sideways and never leaves one lonely tile on a row of its own. */
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 8px;
}

.game-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 8px 10px;
  text-align: center;
  font: inherit;
  color: var(--text);
  background: var(--card-bg);
  /* Visible at rest, so every tile reads as its own thing rather than as words
     floating on the panel. Only the colour changes on hover and selection, so
     nothing shifts by a pixel. */
  border: 2px solid var(--card-border);
  border-radius: 7px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.game-tile:hover { border-color: var(--accent); background: var(--hover-bg); }
.game-tile:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.game-tile.chosen {
  border-color: var(--btn-default-border);
  background: var(--selected-bg);
}
.game-tile.chosen .game-tile-name { color: var(--accent-strong); }

.game-tile-art { width: 48px; height: 48px; flex: none; }
.game-tile:hover .game-tile-art { transform: scale(1.06); transition: transform .12s ease; }
.game-tile-name { font-weight: bold; font-size: 12px; line-height: 1.2; }
.game-tile-blurb {
  font-size: 10px; line-height: 1.3; color: var(--muted);
  /* Three lines at most, so one wordy blurb cannot make its tile twice the
     height of everything beside it. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 560px) {
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .game-tile-art { width: 40px; height: 40px; }
}

/* ---------- scoreboard ---------- */

.headtohead { color: var(--muted); font-size: 11px; }
.headtohead b { color: var(--accent-strong); }

/* ---------- shared board furniture ---------- */

.board { display: grid; gap: 2px; margin: 0 auto; }
.cell {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  border-radius: 3px;
  font-size: 15px; line-height: 1;
  cursor: default;
  padding: 0;
}
.cell.playable { cursor: pointer; }
.cell.playable:hover { border-color: var(--accent); background: var(--hover-bg); }
.cell.win { animation: bm-flash 1s ease-in-out infinite; }
@keyframes bm-flash { 0%, 100% { filter: none; } 50% { filter: brightness(1.5); } }

.scorebar { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }
.scorebar .who { display: flex; align-items: center; gap: 5px; }
.scorebar .pip { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); }
.scorebar .num { font-weight: bold; font-size: 15px; }
.scorebar .who.up .num { color: var(--accent-strong); }

/* Seat colors are deliberately not from the skin: they have to stay apart from
   each other and mean the same thing in both skins. */
.seat0 { --seat: #d0392b; }
.seat1 { --seat: #1f6fc4; }

/* ---------- four in a row ---------- */

.four-board { background: var(--card-border); padding: 5px; border-radius: 5px; }
.four-board .cell { border-radius: 50%; background: var(--transcript-bg); }
.four-board .cell.p0 { background: #d0392b; }
.four-board .cell.p1 { background: #f0c419; }
.four-col:hover .cell.empty:last-of-type { background: var(--hover-bg); }

/* ---------- reversi ---------- */

.reversi-board { background: #2e7d32; padding: 4px; border-radius: 4px; }
.reversi-board .cell { background: #388e3c; border-color: #1b5e20; }
.reversi-board .cell.p0::after,
.reversi-board .cell.p1::after {
  content: ""; width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.35);
}
.reversi-board .cell.p0::after { background: #1a1a1a; }
.reversi-board .cell.p1::after { background: #fafafa; }
.reversi-board .cell.legal::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); }

/* ---------- checkers ---------- */

.checkers-board { border: 2px solid var(--card-border); }
.checkers-board .cell { border: none; border-radius: 0; width: 34px; height: 34px; }
.checkers-board .cell.dark { background: #8d6e63; }
.checkers-board .cell.light { background: #efebe9; }
.checkers-board .cell.sel { box-shadow: inset 0 0 0 3px var(--accent); }
.checkers-board .cell.target { box-shadow: inset 0 0 0 3px #4caf3d; cursor: pointer; }
.checkers-board .piece {
  width: 24px; height: 24px; border-radius: 50%;
  box-shadow: inset 0 -3px 4px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #ffd54f;
}
.checkers-board .piece.p0 { background: #c62828; }
.checkers-board .piece.p1 { background: #37474f; }

/* ---------- dots and boxes ---------- */

.dots-grid { display: grid; margin: 0 auto; }
.dots-grid .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text); margin: auto; }
.dots-grid .edge { background: transparent; border: none; padding: 0; cursor: pointer; }
.dots-grid .edge.h { width: 34px; height: 8px; }
.dots-grid .edge.v { width: 8px; height: 34px; }
.dots-grid .edge:hover::after { background: var(--accent); }
.dots-grid .edge::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 3px; background: transparent; }
.dots-grid .edge.taken::after { background: var(--seat, var(--accent-strong)); }
.dots-grid .box { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 13px; color: #fff; }
.dots-grid .box.p0 { background: rgba(208,57,43,.75); }
.dots-grid .box.p1 { background: rgba(31,111,196,.75); }

/* ---------- mine flags ---------- */

.mine-board { gap: 1px; }
.mine-board .cell {
  width: 22px; height: 22px; font-size: 12px; font-weight: bold; border-radius: 2px;
  background: var(--btn-face); border-color: var(--btn-border);
}
.mine-board .cell.covered.playable:hover { background: var(--hover-bg); }
.mine-board .cell.open { background: var(--transcript-bg); border-color: var(--card-border); cursor: default; }
.mine-board .cell.flag0 { background: #d0392b; color: #fff; }
.mine-board .cell.flag1 { background: #1f6fc4; color: #fff; }
.mine-board .n1 { color: #1565c0; }
.mine-board .n2 { color: #2e7d32; }
.mine-board .n3 { color: #c62828; }
.mine-board .n4 { color: #4527a0; }
.mine-board .n5 { color: #8d6e63; }
.mine-board .n6 { color: #00838f; }
.mine-board .n7 { color: #37474f; }
.mine-board .n8 { color: #6d4c41; }

/* ---------- rock paper scissors ---------- */

.rps-picks { display: flex; gap: 10px; justify-content: center; }
.rps-btn {
  width: 84px; padding: 10px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: inherit; font-size: 12px;
  background: var(--btn-face); color: var(--btn-text);
  border: 1px solid var(--btn-border); border-radius: 6px; cursor: pointer;
}
.rps-btn:hover:not(:disabled) { border-color: var(--btn-border-hover); background: var(--btn-face-hover); }
.rps-btn:disabled { opacity: .5; cursor: default; }
.rps-btn.chosen { border-color: var(--accent); box-shadow: var(--focus-ring); }
.rps-btn .throw { font-family: var(--emoji-font); font-size: 30px; line-height: 1; }
.rps-reveal { display: flex; gap: 18px; align-items: center; justify-content: center; font-family: var(--emoji-font); font-size: 34px; }
.rps-reveal .vs { font-family: var(--font); font-size: 13px; color: var(--muted); }

/* ---------- dice ---------- */

.dice-buttons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.dice-log { width: 100%; max-width: 380px; }
.dice-log div { padding: 2px 0; border-bottom: 1px solid var(--card-border); font-size: 12px; }
.dice-log b { color: var(--accent-strong); }

/* ---------- 20 questions ---------- */

.twenty-log { width: 100%; max-width: 420px; }
.twenty-log .q { font-weight: bold; }
.twenty-log .a { color: var(--accent-strong); margin-left: 8px; }
.twenty-answers { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.twenty-count { font-size: 22px; font-weight: bold; color: var(--accent-strong); }

/* ---------- word duel ---------- */

.word-rows { display: grid; gap: 4px; }
.word-row { display: flex; gap: 4px; justify-content: center; }
.word-tile {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 17px; text-transform: uppercase;
  border: 1px solid var(--card-border); border-radius: 3px; background: var(--transcript-bg);
}
.word-tile.exact { background: #4caf3d; border-color: #3d8c31; color: #fff; }
.word-tile.present { background: #e8a020; border-color: #c98815; color: #fff; }
.word-tile.absent { background: var(--muted); border-color: var(--muted); color: #fff; }
.word-tile.blank { color: transparent; }
.word-entry { display: flex; gap: 6px; justify-content: center; align-items: center; }
.word-entry input { width: 150px; text-transform: uppercase; letter-spacing: 3px; text-align: center; }
.word-them { opacity: .8; }
.word-them .word-tile { width: 20px; height: 20px; }

/* ---------- canvas ---------- */

.doodle-wrap { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.doodle-canvas {
  width: 100%; max-width: 560px; aspect-ratio: 7 / 4;
  background: #ffffff; border: 1px solid var(--transcript-border); border-radius: 3px;
  touch-action: none; cursor: crosshair;
}
.doodle-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.doodle-tools .swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.doodle-tools .swatch.on { border-color: var(--accent-strong); }
.doodle-tools .sizes { display: flex; gap: 4px; align-items: center; }
.doodle-word { font-size: 15px; font-weight: bold; letter-spacing: 2px; color: var(--accent-strong); }
.doodle-clock { font-weight: bold; }
.doodle-clock.low { color: #c0392b; }

/* ---------- decks ---------- */

.deck-card {
  width: 100%; max-width: 460px; padding: 16px;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px;
  text-align: center; font-size: 15px;
}
.deck-answers { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 6px; }
.deck-answers .said { padding: 6px 9px; background: var(--transcript-bg); border: 1px solid var(--card-border); border-radius: 4px; }
.deck-answers .said b { color: var(--accent-strong); }
.deck-waiting { color: var(--muted); font-style: italic; }

/* ---------- photo swap ---------- */

.swap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; width: 100%; }
.swap-grid a { display: block; border: 1px solid var(--card-border); border-radius: 3px; overflow: hidden; line-height: 0; }
.swap-grid img { width: 100%; height: 96px; object-fit: cover; }
.swap-drop {
  width: 100%; padding: 14px; text-align: center; color: var(--muted);
  border: 2px dashed var(--card-border); border-radius: 6px; cursor: pointer;
}
.swap-drop.over { border-color: var(--accent); color: var(--accent-strong); }

/* ---------- notepad ---------- */

.notepad {
  width: 100%; min-height: 150px; resize: vertical;
  font: inherit; color: var(--text); background: var(--transcript-bg);
  border: 1px solid var(--transcript-border); border-radius: 3px; padding: 7px;
}
.notepad:focus { outline: none; border-color: var(--accent); }

@media (max-width: 820px) {
  .game-panel { max-height: 55%; }
  .cell { width: 26px; height: 26px; }
  .mine-board .cell { width: 17px; height: 17px; font-size: 10px; }
  .checkers-board .cell { width: 30px; height: 30px; }
}

/* ---------- Memory Match ---------- */

.memory-board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  max-width: 280px; margin: 0 auto;
}
.memory-card {
  aspect-ratio: 1; font: inherit; font-size: 20px; font-weight: bold;
  color: var(--accent-strong); background: var(--btn-face);
  border: 2px solid var(--btn-border); border-radius: 5px; cursor: pointer;
}
.memory-card:not(:disabled):hover { border-color: var(--accent); background: var(--btn-face-hover); }
.memory-card.face-up { background: var(--selected-bg); border-color: var(--selected-border); }
.memory-card.won { background: var(--card-bg); border-color: var(--card-border); color: var(--muted); cursor: default; }
.memory-card.won.mine { border-color: var(--btn-default-border); color: var(--accent-strong); }
.memory-score { display: flex; gap: 14px; justify-content: center; margin-top: 10px; font-size: 12px; }
.memory-score-one.me { font-weight: bold; color: var(--accent-strong); }

/* ---------- Last Match Loses ---------- */

.match-pile {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
  min-height: 54px; align-items: flex-end; padding: 8px 0;
}
.match-stick {
  display: block; width: 5px; height: 42px; border-radius: 1px;
  background: linear-gradient(90deg, #e0c48a, #c9a86a);
  position: relative;
}
.match-head {
  position: absolute; top: -5px; left: -1px;
  width: 7px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a5c, #c0392b);
}
.match-say { text-align: center; color: var(--muted); font-size: 12px; margin: 6px 0 10px; }
.match-take { display: flex; gap: 8px; justify-content: center; }

/* ---------- Story Builder ---------- */

.story-head { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.story-body { max-height: 190px; overflow-y: auto; margin-bottom: 8px; }
.story-line { margin: 0 0 6px; line-height: 1.45; }
.story-last {
  padding: 8px 10px; background: var(--card-bg);
  border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0;
  font-style: italic;
}
.story-write { display: flex; gap: 6px; margin-bottom: 8px; }
.story-write .field { flex: 1; }

/* ---------- Two Truths and a Lie ---------- */

.ttl-head { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.ttl-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.ttl-row .field { flex: 1; }
.ttl-mark {
  width: 20px; height: 20px; flex: none; cursor: pointer; padding: 0;
  background: var(--btn-face); border: 2px solid var(--btn-border); border-radius: 50%;
}
.ttl-mark.chosen { background: var(--accent); border-color: var(--btn-default-border); }
.ttl-option {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font: inherit; padding: 8px 10px; margin-bottom: 6px; cursor: pointer;
  color: var(--text); background: var(--card-bg);
  border: 2px solid var(--card-border); border-radius: 5px;
}
.ttl-option:not(:disabled):hover { border-color: var(--accent); background: var(--hover-bg); }
.ttl-option.waiting { cursor: default; }
.ttl-num {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: bold;
  background: var(--selected-bg); color: var(--accent-strong);
}
.ttl-option.is-lie { border-color: #c0392b; }
.ttl-option.is-lie .ttl-num { background: #c0392b; color: #fff; }
.ttl-option.guessed { box-shadow: var(--focus-ring); }
.ttl-verdict { font-weight: bold; color: var(--accent-strong); margin: 8px 0 0; }
.ttl-score, .trivia-score { display: flex; gap: 14px; justify-content: center; margin: 10px 0; font-size: 12px; }
.ttl-score-one.me, .trivia-score-one.me { font-weight: bold; color: var(--accent-strong); }

/* ---------- Trivia Night ---------- */

.trivia-q { font-weight: bold; margin-bottom: 10px; line-height: 1.4; }
.trivia-option {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font: inherit; padding: 7px 10px; margin-bottom: 5px; cursor: pointer;
  color: var(--text); background: var(--card-bg);
  border: 2px solid var(--card-border); border-radius: 5px;
}
.trivia-option:not(:disabled):hover { border-color: var(--accent); background: var(--hover-bg); }
.trivia-letter {
  width: 20px; height: 20px; flex: none; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: bold;
  background: var(--selected-bg); color: var(--accent-strong);
}
.trivia-option.picked { border-color: var(--btn-default-border); }
.trivia-option.correct { border-color: #4e9021; background: var(--hover-bg); }
.trivia-option.correct .trivia-letter { background: #4e9021; color: #fff; }
.trivia-option.wrong .trivia-letter { background: #c0392b; color: #fff; }
.trivia-option.theirs::after { content: "them"; margin-left: auto; font-size: 10px; color: var(--muted); }
.trivia-say { text-align: center; font-size: 12px; color: var(--muted); margin: 8px 0; min-height: 16px; }