/* Shared chrome + Scrabble game styling — loaded alongside style.css on
   the new game pages (login/join/games/game). Reuses style.css's reset,
   fonts, and button base; adds page layout + board/rack/tile/nav pieces
   that the 3-panel tool app doesn't need. */

/* Any element with an explicit `display` rule below (e.g. .game-actions,
   .invite-link-box being flex) would otherwise override the browser's
   default [hidden] -> display:none, since author styles win over the
   user-agent stylesheet regardless of specificity. Keep this first. */
[hidden] { display: none !important; }

body.wgt-page {
  height: auto;
  min-height: 100vh;
  overflow: auto;
  display: block;
}

.page-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

.page-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- Nav bar ---- */

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #132844;
  border-bottom: 1px solid #0d1e33;
}

.nav-links { display: flex; gap: 16px; }

.nav-link {
  color: #7eb0e8;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  font-weight: bold;
}
.nav-link:hover { color: #b8d4f5; }

.nav-build-version {
  color: #4a7ab5;
  font-size: 10px;
}

.nav-user { display: flex; align-items: center; gap: 10px; }
.nav-username { color: #a0c4f0; font-size: 12px; }

.nav-btn {
  background: #1e3a6e;
  border: 1px solid #2a4f8a;
  color: #7eb0e8;
  font-family: inherit;
  font-size: 11px;
  padding: 4px 12px;
  cursor: pointer;
  border-radius: 3px;
  text-decoration: none;
}
.nav-btn:hover { background: #2a4f8a; color: #b8d4f5; }

/* ---- Games list ---- */

.game-list { display: flex; flex-direction: column; gap: 10px; }

.game-card {
  background: #ffffff;
  border-radius: 4px;
  padding: 12px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  gap: 12px;
  flex-wrap: wrap;
}
.game-card:hover { box-shadow: 0 2px 16px rgba(0,0,0,0.5); }

.game-players { display: flex; gap: 12px; flex-wrap: wrap; }
.game-player { font-size: 12px; color: #2d3748; }
.game-player.turn { font-weight: bold; color: #3b82f6; }

.game-status {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #718096;
}
.game-status.finished { color: #96760a; }

.new-game-form {
  background: #ffffff;
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

.opponent-checks { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.opponent-check { display: flex; align-items: center; gap: 4px; font-size: 12px; }

/* ---- Board ---- */

.board-wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }

.board {
  display: grid;
  grid-template-columns: repeat(15, 34px);
  grid-template-rows: repeat(15, 34px);
  gap: 1px;
  background: #0d1e33;
  border: 2px solid #0d1e33;
  width: fit-content;
}

.square {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.02em;
  cursor: pointer;
  background: #dce8f5; color: #6a7f99;
  position: relative;
}
.square.center { background: #f5c518; color: #7a5c00; }
.square.tw { background: #e05656; color: #fff; }
.square.dw { background: #f3a6a6; color: #6b1f1f; }
.square.tl { background: #4f8bd6; color: #fff; }
.square.dl { background: #a8cef0; color: #1b3358; }
.square.drop-hover { outline: 2px solid #3b82f6; outline-offset: -2px; }

.tile {
  width: 32px; height: 32px;
  background: #f0dcae; border: 1px solid #c9a35c; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 15px; color: #4a3410;
  position: relative;
  user-select: none;
}
.tile .tile-pts {
  position: absolute; bottom: 0px; right: 2px; font-size: 7px; font-weight: normal;
}
.tile.pending { border: 2px dashed #3b82f6; background: #fdf0c5; }

.tile-ghost {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  opacity: 0.85;
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.board-instructions {
  color: #a0c4f0; margin-top: 10px;
}

.tray-row {
  display: flex; align-items: center; gap: 14px; margin-top: 6px; flex-wrap: wrap;
}

.rack {
  display: flex; gap: 4px;
  padding: 8px; border: 2px solid #0d1e33; border-radius: 4px;
  background: #16324f; width: fit-content;
}
.rack .tile { cursor: pointer; }
.rack .tile.selected { box-shadow: 0 0 0 2px #3b82f6; }
.rack .tile-empty {
  width: 32px; height: 32px; border: 1px dashed #3a5075; border-radius: 2px;
}

.score-dialog {
  font-size: 13px; font-weight: bold; white-space: nowrap;
}
.score-dialog.invalid { color: #e57373; }
.score-dialog.valid { color: #6aaa64; }

.side-panel { min-width: 220px; }

.score-list {
  background: #ffffff; border-radius: 4px; padding: 10px 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35); margin-bottom: 12px;
}
.score-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.score-row.current-turn { font-weight: bold; color: #3b82f6; }

.game-actions { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }

.move-history {
  background: #ffffff; border-radius: 4px; padding: 10px 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35); max-height: 300px; overflow-y: auto;
}
.move-entry { font-size: 12px; padding: 3px 0; border-bottom: 1px solid #f0f4f8; }
.move-entry:last-child { border-bottom: none; }

.blank-picker {
  position: absolute; z-index: 50; background: #fff; border: 1px solid #c0cad6;
  border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  display: grid; grid-template-columns: repeat(6, 24px); gap: 2px; padding: 4px;
}
.blank-picker button { padding: 2px; font-size: 11px; }

.exchange-note { font-size: 11px; color: #718096; margin: 6px 0; }

/* ---- Auth pages (login/join) ---- */

.auth-form {
  background: #ffffff; border-radius: 4px; padding: 20px;
  max-width: 380px; margin: 40px auto; box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.auth-form input[type=text], .auth-form input[type=password] {
  width: 100%; background: #f8fafc; border: 1px solid #c0cad6; color: #1a202c;
  font-family: inherit; font-size: 13px; padding: 7px 8px; outline: none;
  border-radius: 3px; margin: 8px 0;
}
.auth-form input:focus { border-color: #4a7ab5; background: #f0f6ff; }
.username-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.username-list button { padding: 6px 14px; }

.invite-dialog-body { padding: 14px; }
.invite-dialog-body label {
  display: block; font-size: 11px; color: #718096; margin-bottom: 4px;
}
.invite-message-textarea {
  width: 100%; font-family: inherit; font-size: 12px; padding: 8px;
  border: 1px solid #c0cad6; border-radius: 3px; resize: vertical; outline: none;
  color: #1a202c;
}
.invite-message-textarea:focus { border-color: #4a7ab5; background: #f0f6ff; }