/* 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;
}

.page-title-row {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 12px; margin-bottom: 16px;
}
.page-title-row .page-title { margin-bottom: 0; }
.page-title-row .nav-btn { font-size: 12px; }

/* ---- 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;
  border: 2px solid transparent;
  box-sizing: border-box;
  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; }
.game-player.you { color: #1e8449; }
.game-player.opponent { color: #1c64c9; }
.game-card.current { outline: 2px solid #1c64c9; outline-offset: -2px; }
.game-card.your-turn { border-color: #1e8449; }

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

.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; }

/* Fixed to the board's own width (15*34px + 14*1px gaps + 2*3px border) so
   long instruction text wraps inside the column instead of stretching it --
   an unconstrained block's max-content width (assuming no line-wrapping) is
   what a flex item's hypothetical size uses for the wrap-to-new-line check,
   which was pushing the side panel onto its own row. */
.board-column { width: 530px; }

.board {
  display: grid;
  grid-template-columns: repeat(15, 34px);
  grid-template-rows: repeat(15, 34px);
  gap: 1px;
  background: #0d1e33;
  border: 3px solid #2a4f8a;
  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-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  background: #132844;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
  z-index: 300;
}
.tile:hover .tile-tooltip {
  opacity: 1;
}

.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; }
.score-dialog.turn-indicator { color: #a0c4f0; font-weight: bold; }
.score-dialog.turn-indicator.your-turn { color: #1e8449; }

/* Board is 15 squares * 34px + 14 * 1px gaps + 2*3px border = 530px --
   the side panel is pinned to that same height (border-box, so its own
   border+padding come out of that total) so both of its tabs scroll
   within a viewport that lines up with the board, and its border frames
   the column the same way the board's border frames the grid. */
/* Fixed width (not just min-width) for the same reason board-column is
   fixed above -- without it, a flex item's own preferred size is based on
   its content's max-content (unwrapped) width, and a game card with long
   unbreakable text (e.g. "FRIEND'S TURN") in the All Games list was wide
   enough to push this column onto its own row below the board instead of
   beside it. */
.side-panel {
  width: 260px; flex-shrink: 0; height: 530px; box-sizing: border-box;
  border: 3px solid #2a4f8a; border-radius: 4px; padding: 8px;
  display: flex; flex-direction: column;
}

.side-tabs { display: flex; gap: 4px; margin-bottom: 8px; flex: none; }
.side-tab {
  flex: 1;
  background: #1e3a6e; border: 1px solid #2a4f8a; color: #7eb0e8;
  font-family: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 6px 10px; cursor: pointer; border-radius: 3px 3px 0 0;
}
.side-tab:hover { background: #2a4f8a; color: #b8d4f5; }
.side-tab.active { background: #ffffff; color: #16324f; border-color: #ffffff; }

.side-tab-panel { flex: 1; min-height: 0; overflow-y: auto; }

.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; }
.score-row.you { color: #1e8449; }
.score-row.opponent { color: #1c64c9; }

.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);
}
.move-entry { font-size: 12px; padding: 3px 0; border-bottom: 1px solid #f0f4f8; }
.move-entry:last-child { border-bottom: none; }
.move-entry.you { color: #1e8449; }
.move-entry.opponent { color: #1c64c9; }

.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; }