/* UI refresh (docs/design/refresh): game. Loaded after style.css; see refresh/base.css for the tokens. */

/* game screen */
#screen-game.active,
#screen-review.active,
#screen-puzzle.active { /* puzzle/review/drills/coords moved below or shell.css handles */
  background: var(--rf-bg, var(--rf-bg));
  color: var(--rf-text, var(--rf-text));
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

#screen-game .game-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

#screen-game .nav-back {
  color: var(--rf-text, var(--rf-text));
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

#screen-game .type-badge {
  border: 1px solid var(--rf-border, var(--rf-line-2));
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--rf-muted, var(--rf-sub));
  text-transform: uppercase;
}

#screen-game .speech {
  /* The game page stays dark in every theme, so the bubble does too (light themes' --card is white). */
  background: var(--rf-surface);
  border: 1px solid var(--accent, var(--rf-line-2));
  border-radius: 16px 16px 16px 4px;
  padding: 12px 16px;
  font: italic 400 14px/20px var(--rf-font-sans);
  margin: 0;
  color: var(--rf-text, var(--rf-text));
  text-align: left;
}
#screen-game .speech::before {
  top: auto;
  bottom: -6.5px;
  right: auto;
  left: 20px;
  background: inherit;
  border-right: 1px solid var(--accent, var(--rf-line-2));
  border-bottom: 1px solid var(--accent, var(--rf-line-2));
  transform: rotate(45deg);
}

#screen-game .player-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

#screen-game .player-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

#screen-game .avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background-color: var(--rf-card, var(--rf-surface-elevated)) !important;
  border: 1px solid var(--rf-border, var(--rf-line-2)) !important;
  color: var(--rf-text, var(--rf-text)) !important;
  font-size: 20px;
  font-weight: 600;
}

#screen-game .player-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#screen-game .player-info .name {
  font-weight: 700;
  font-size: 16px;
  color: var(--rf-text, var(--rf-text));
}

#screen-game .player-info .rating {
  font-size: 14px;
  color: var(--rf-muted, var(--rf-sub));
}

#screen-game .board-wrap {
  margin: 8px 0;
  display: flex;
  justify-content: center;
}

#screen-game .status-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

#screen-game .status {
  margin: 0;
  padding: 4px 12px;
  background: var(--rf-danger-bg, rgba(232, 131, 107, 0.16));
  color: var(--rf-danger, #E8836B);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap; /* "Opponent's turn" next to a clock: one line, the name gives way */
  flex-shrink: 0;
}
#screen-game .status:empty { display: none; }
#screen-game .status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rf-danger, #E8836B);
}

#screen-game .opening {
  text-align: left;
  color: var(--rf-muted, var(--rf-sub));
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  padding: 0;
}
#screen-game .opening:empty { display: none; }

#screen-game .actions {
  margin-top: auto;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#screen-game .action-btns {
  display: flex;
  gap: 12px;
}

#screen-game .btn-sec {
  background: transparent;
  border: 1px solid var(--rf-border, var(--rf-line-2));
  color: var(--rf-text, var(--rf-text));
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#screen-game .btn-sec.danger {
  color: var(--rf-danger, #E8836B);
  border-color: var(--rf-danger-border, rgba(232, 131, 107, 0.3));
}
#screen-game .nav-back::before {
  content: '<';
  margin-right: 4px;
  font-size: 16px;
}

/* Top bars */
.review-top, .drills-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
}
.title {
  font-family: serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--rf-text, var(--rf-text));
  margin: 0;
}
.top-actions {
  display: flex;
  gap: 8px;
}

/* Accuracy Pill */
.accuracy-row {
  display: flex;
  gap: 16px;
  padding: 0 16px;
  margin-bottom: 8px;
}
.acc-pill {
  flex: 1;
  background: transparent;
  border: 1px solid var(--rf-border, var(--rf-line-2));
  border-radius: 12px;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--rf-muted, var(--rf-sub));
  font-size: 14px;
}
.acc-val {
  color: var(--rf-accent, var(--rf-accent));
  font-weight: 700;
  font-size: 16px;
}

/* Controls */
.controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}
.rv-controls {
  display: flex;
  gap: 8px;
}

.review-top button, .top-actions button, .rv-controls button {
  background: var(--rf-surface) !important;
  border: 1px solid color-mix(in srgb, var(--rf-text) 10%, transparent) !important;
  color: var(--rf-text) !important;
  border-radius: 50% !important;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

/* UI REFRESH: Puzzles (#screen-puzzles) */
#screen-puzzles #puz-kinds.segmented {
  background: var(--rf-surface);
  border: 1px solid var(--rf-line);
  border-radius: 16px;
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 16px 16px;
}
#screen-puzzles #puz-kinds.segmented button {
  border-radius: 12px;
  padding: 1px 6px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 15px/normal var(--rf-font-sans);
  color: var(--rf-text-2);
  background: transparent;
  border: none;
}
#screen-puzzles #puz-kinds.segmented button.on {
  background: var(--rf-accent, var(--rf-accent)) !important;
  color: var(--rf-accent-text) !important;
  font-weight: 800;
}

#screen-puzzles #mode-daily {
  background: linear-gradient(160deg, #1D1933 0%, #110F1B 100%);
  border-radius: 22px;
  border: 1px solid #2D2943;
  padding: 20px;
  margin: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
#screen-puzzles #mode-daily .label {
  font: 800 11px/normal var(--rf-font-sans);
  color: var(--rf-accent, var(--rf-accent));
  letter-spacing: 1.98px;
  text-transform: uppercase;
}
#screen-puzzles #puz-daily-title {
  font: 700 30px/31.5px var(--rf-font-display);
  color: var(--rf-text);
  margin: 0;
}
#screen-puzzles #puz-daily-sub {
  font: 400 13px/normal var(--rf-font-sans);
  color: var(--rf-text-2);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
#screen-puzzles #puz-daily-sub::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e8836b"><path d="M12 2c0 0-5 6-5 12a5 5 0 0 0 10 0c0-6-5-12-5-12z"/></svg>') no-repeat center;
}
#screen-puzzles #mode-daily .go {
  margin-top: 9.5px;
  padding: 0 24px;
  height: 44px;
  background: var(--rf-accent, var(--rf-accent)) !important;
  border-radius: 12px;
  color: var(--rf-accent-text) !important;
  font: 800 14px/normal var(--rf-font-sans);
  letter-spacing: 0.84px;
  text-transform: uppercase;
  box-shadow: 0px 8px 24px 0px color-mix(in srgb, var(--rf-accent) 22%, transparent);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#screen-puzzles #daily-mini-board {
  position: absolute;
  right: -20px;
  bottom: 20px;
  width: 125px;
  height: 125px;
  border-radius: 12px;
  box-shadow: 0px 18px 40px 0px rgba(0, 0, 0, 0.5), 0px 0px 0px 4px color-mix(in srgb, var(--rf-accent) 25%, transparent);
  transform: perspective(600px) rotateX(15deg) rotateZ(-10deg);
}

#screen-puzzles .section-title {
  margin: 4px 16px 0;
  font: 800 12px/normal var(--rf-font-sans);
  color: var(--rf-sub);
  letter-spacing: 1.68px;
  text-transform: uppercase;
}
#screen-puzzles .modes.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 16px 24px;
}
#screen-puzzles .modes.grid button {
  background: var(--rf-surface);
  border: 1px solid var(--rf-card-line);
  border-radius: 20px;
  padding: 16px;
  height: 132px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
#screen-puzzles .modes.grid button .icon {
  background: var(--rf-surface-2);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rf-text);
}
#screen-puzzles .modes.grid button .text {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#screen-puzzles .modes.grid button .text b {
  font: 800 16px/normal var(--rf-font-sans);
  color: var(--rf-text);
}
#screen-puzzles .modes.grid button .text .mode-sub {
  font: 400 12px/normal var(--rf-font-sans);
  color: var(--rf-sub);
}


/* UI REFRESH: Solving a puzzle (#screen-puzzle) */
#screen-puzzle .chips {
  display: flex;
  gap: 8px;
  padding: 0 20px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
#screen-puzzle .chips.hidden { display: none !important; }
#screen-puzzle .chips span {
  height: 32px;
  padding: 0 12px;
  background: var(--rf-surface);
  border: 1px solid var(--rf-card-line);
  border-radius: 15px;
  color: var(--rf-text-2);
  font: 700 12px/normal var(--rf-font-sans);
  display: flex;
  align-items: center;
}

#screen-puzzle .board-wrap {
  padding: 0 20px;
  display: flex;
  justify-content: center;
}
#screen-puzzle .board-wrap .board, #screen-puzzle .board-wrap .ck-board {
  border-radius: 6px;
  box-shadow: 0px 18px 40px 0px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px var(--rf-line-2);
  overflow: hidden;
}

#screen-puzzle .status-box {
  background: var(--rf-surface);
  border: 1px solid var(--rf-card-line);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 16px 20px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
#screen-puzzle .status-icon {
  background: var(--rf-surface-2);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 24px;
  color: var(--rf-text);
}
#screen-puzzle .status-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#screen-puzzle .status-sub {
  order: 1;
  font: 800 16px/normal var(--rf-font-sans);
  color: var(--rf-text);
  margin: 0;
}
#screen-puzzle p.status {
  order: 2;
  font: 400 13px/normal var(--rf-font-sans);
  color: var(--rf-sub);
  margin: 0;
  background: none;
  padding: 0;
}
#screen-puzzle p.status::before { display: none; }

#screen-puzzle .pz-actions {
  display: flex;
  gap: 10px;
  padding: 0 20px;
  margin-top: auto;
  margin-bottom: 24px;
}
#screen-puzzle .pz-actions button {
  flex: 1;
  height: 52px;
  background: var(--rf-surface);
  border: 1px solid var(--rf-line-2);
  border-radius: 14px;
  color: var(--rf-text);
  font: 700 15px/normal var(--rf-font-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
#screen-puzzle .pz-actions #pz-skip {
  color: var(--rf-text-2);
}

/* UI REFRESH: Drills (#screen-drills) */
#screen-drills #dr-vs { margin: 0 0 14px; }
#screen-drills .drill-opp-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0;
  background: var(--rf-surface); border: 1px solid var(--rf-card-line); border-radius: 16px;
}
#screen-drills .drill-opp-card .avatar-sm {
  width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 32%, var(--rf-ava-a) 0%, var(--rf-ava-b) 75%); box-shadow: 0 0 0 2px var(--rf-line-2);
  font: 700 15px var(--rf-font-display); color: var(--rf-text);
}
#screen-drills .drill-opp-card .avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
#screen-drills .drill-opp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#screen-drills .drill-opp-title { font: 800 14px var(--rf-font-sans); color: var(--rf-text); }
#screen-drills .drill-opp-sub { font: 400 12px var(--rf-font-sans); color: var(--rf-sub); }
#screen-drills .drill-change { flex: none; height: 44px; padding: 0 4px !important; background: none; border: 0; color: var(--rf-accent); font: 800 13px var(--rf-font-sans); }
#screen-drills .drills-list {
  list-style: none; margin: 0;
  padding: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#screen-drills .drills-list li {
  margin: 0;
}
#screen-drills .drills-list button {
  width: 100%;
  background: var(--rf-surface);
  border: 1px solid var(--rf-card-line);
  border-radius: 18px;
  padding: 10px 12px 10px 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
}
#screen-drills .dr-icon {
  flex: none; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden;
  width: 68px;
  height: 68px;
  border-radius: 6px;
  box-shadow: 0px 18px 40px 0px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px var(--rf-line-2);
}
#screen-drills .dr-icon i {
  display: grid; place-items: center; font-style: normal;
  background: #B9A57C;
}
#screen-drills .dr-icon i > * { width: 100%; height: 100%; }
#screen-drills .dr-icon i.d {
  background: var(--rf-line-2);
}
#screen-drills .dr-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#screen-drills .dr-name {
  font: 800 16px/normal var(--rf-font-sans);
  color: var(--rf-text);
}
#screen-drills .dr-sub {
  font: 400 13px/normal var(--rf-font-sans);
  color: var(--rf-sub);
}
#screen-drills .dr-stars {
  margin-top: 2px;
  display: flex;
  gap: 4px;
}
#screen-drills .dr-stars > div {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--rf-line-2);
}
#screen-drills .dr-chevron {
  display: grid; place-items: center;
  font-size: 20px;
  color: var(--rf-text-2);
  margin-right: 2px;
}


/* UI REFRESH: Coordinates (#screen-coords) */
#screen-coords.active {
  display: flex !important;
  flex-direction: column;
}
#screen-coords .segmented {
  background: var(--rf-surface);
  border: 1px solid var(--rf-line);
  border-radius: 14px;
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 14px 0;
}
#screen-coords .segmented button {
  border-radius: 10px;
  padding: 1px 6px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 14px/normal var(--rf-font-sans);
  color: var(--rf-text-2);
  background: transparent;
  border: none;
}
#screen-coords .segmented button.on {
  background: var(--rf-accent, var(--rf-accent)) !important;
  color: var(--rf-accent-text) !important;
  font-weight: 800;
}
#screen-coords .time-bar {
  margin: 0 0 14px 0;
  height: 8px;
  background: var(--rf-surface-2);
  border-radius: 4px;
  overflow: hidden;
}
#co-fill {
  height: 100%;
  background: linear-gradient(90deg, #E8836B, var(--rf-accent));
}
#screen-coords #co-board {
  margin: 0 0 14px 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  box-shadow: 0px 18px 40px 0px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px var(--rf-line-2);
  overflow: hidden;
}
#screen-coords #co-target {
  font: 900 120px/normal var(--rf-font-display);
  color: var(--rf-text);
  text-shadow: none;
}
#screen-coords .cr-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0;
  margin: 0;
}
#screen-coords .stat-card {
  background: var(--rf-surface);
  border: 1px solid var(--rf-card-line);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
#screen-coords .stat-card .val {
  font: 800 24px/normal var(--rf-font-sans);
  color: var(--rf-accent, var(--rf-accent));
  margin: 0;
}
#screen-coords .stat-card:nth-child(2) .val {
  color: var(--rf-text); /* The second stat card (30s) is white in design */
}
#screen-coords .stat-card .lbl {
  font: 400 12px/normal var(--rf-font-sans);
  color: var(--rf-sub);
  text-transform: none; /* remove any inherited uppercase */
  letter-spacing: 0;
}
#screen-coords .cr-actions {
  margin-top: auto;
}
#screen-coords .btn-primary-large {
  background: var(--rf-accent, var(--rf-accent));
  color: var(--rf-accent-text);
  border: none;
  border-radius: 16px;
  padding: 1px 6px;
  height: 54px;
  font: 800 16px/normal var(--rf-font-sans);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  width: 100%;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* UI REFRESH: Game review (#screen-review) */
#screen-review .rv-list.styled {
  /* Scrolls inside itself, in the space left under the buttons, so stepping
     through a long game never scrolls the page (review.js). */
  position: relative;
  max-height: max(96px, calc(100dvh - 728px));
  overflow-y: auto;
  align-content: start;
  background: var(--rf-surface);
  border: 1px solid var(--rf-card-line);
  border-radius: 14px;
  margin: 0 0 24px 0;
  padding: 4px;
  display: grid;
  grid-template-columns: 24px 1fr 1fr;
  gap: 2px 6px;
  color: var(--rf-text);
}
#screen-review .rv-list.styled .rv-n {
  color: var(--rf-sub);
  font: 400 13px/normal var(--rf-font-sans);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#screen-review .rv-list.styled .rv-move {
  background: transparent;
  border: none;
  color: inherit;
  padding: 6px 8px;
  border-radius: 10px;
  font: 700 14px/normal var(--rf-font-sans);
  cursor: pointer;
  text-align: left;
}
#screen-review .rv-list.styled .rv-move.on {
  background: var(--rf-accent, var(--rf-accent));
  box-shadow: none;
  color: var(--rf-accent-text);
  font-weight: 800;
}

#screen-review .controls-row {
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 14px 0;
}
#screen-review .rv-controls {
  display: flex;
  gap: 8px;
  flex: none;
}
#screen-review .controls-row button, #screen-review .rv-controls button {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-card-line) !important;
  border-radius: 12px !important;
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--rf-text) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  cursor: pointer;
}
#screen-review .controls-row .btn-primary-small {
  background: var(--rf-accent, var(--rf-accent)) !important;
  color: var(--rf-accent-text) !important;
  border: none !important;
  font: 800 14px/normal var(--rf-font-sans);
  gap: 6px;
  flex: 1;
  width: auto;
  border-radius: 12px !important;
  padding: 0 12px !important;
}

#screen-review #rv-note {
  margin: 10px 0;
  padding: 10px 14px;
  background: rgba(232, 131, 107, 0.1);
  border-radius: 14px;
  border: 1px solid rgba(232, 131, 107, 0.4);
  font: 400 14px/18.9px var(--rf-font-sans);
  color: var(--rf-text);
  height: 60px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
#screen-review #rv-note:empty {
  visibility: hidden;
}
#screen-review #rv-note b {
  font: 700 14px/18.9px var(--rf-font-sans);
}

#screen-puzzle .board-wrap .board, #screen-puzzle .board-wrap .ck-board {
  width: 100%;
  aspect-ratio: 1;
}
#screen-review .board-wrap .board, #screen-review .board-wrap .ck-board {
  width: 100%;
  aspect-ratio: 1;
}

/* MISSING FROM SHELL.CSS: Apply to puzzle & review */
#screen-puzzle.active, #screen-review.active {
  padding: 16px 20px 24px;
  min-height: 100vh;
  box-sizing: border-box;
  background: var(--rf-gradient-bg);
  color: var(--rf-text);
  font-family: var(--rf-font-sans);
}
#screen-puzzle > .rf-head, #screen-review > .rf-head {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 44px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
#screen-puzzle > .rf-head > button:first-child,
#screen-review > .rf-head > button:first-child {
  flex: none !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  margin: -1px 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-card-line) !important;
  color: var(--rf-text) !important;
  font-size: 20px !important;
  box-shadow: none !important;
}
#screen-puzzle > .rf-head > button:first-child svg,
#screen-review > .rf-head > button:first-child svg { width: 20px; height: 20px; }
#screen-puzzle > .rf-head > :is(b, h1, .title),
#screen-review > .rf-head > :is(b, h1, .title) {
  flex: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font: 700 26px var(--rf-font-display) !important;
  color: var(--rf-text) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#screen-puzzle > .rf-head > :is(.chip, .badge, .chip-badge),
#screen-review > .rf-head > :is(.chip, .badge, .chip-badge) {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line-2) !important;
  color: var(--rf-accent) !important;
  font: 800 15px/normal var(--rf-font-sans) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#screen-review .top-actions {
  display: flex;
  gap: 8px;
}
#screen-review .top-actions button {
  width: 46px !important;
  height: 46px !important;
  background: var(--rf-surface) !important;
  border-radius: 14px !important;
  border: 1px solid var(--rf-card-line) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#screen-review .accuracy-row {
  margin: 0 0 16px 0;
  padding: 0;
  display: flex;
  gap: 12px;
}
#screen-review .acc-pill {
  flex: 1;
  background: transparent !important;
  border: 1px solid var(--rf-card-line) !important;
  border-radius: 12px !important;
  padding: 8px 16px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--rf-sub) !important;
  font: 400 14px/normal var(--rf-font-sans) !important;
}
#screen-review .acc-pill:first-child .acc-val {
  color: var(--rf-accent, var(--rf-accent)) !important;
}
#screen-review .acc-val {
  color: var(--rf-text) !important;
  font: 800 16px/normal var(--rf-font-sans) !important;
}

#screen-puzzle .board-wrap, #screen-review .board-wrap {
  padding: 0;
  margin: 0;
}

#screen-review #rv-opening {
  text-align: left !important;
  color: var(--rf-sub) !important;
  font: 400 13px/18px var(--rf-font-sans) !important;
  margin: 0 0 14px 0 !important;
  height: 18px !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#screen-review #rv-evalbar {
  margin: 0 0 14px 0 !important;
  height: 24px !important;
  background: #1B2740 !important; /* black's side, in every theme */
  border-radius: 4px !important;
  border: 1px solid var(--rf-line) !important;
  box-sizing: border-box !important;
}
#screen-review #rv-evalbar .eval-fill {
  inset: 2px auto 2px 2px !important;
  border-radius: 2px !important;
  background: #F3F6FA !important; /* white's side */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Layout (decision #65, docs/GAMEPLAY-BRIEF.md part A). The board takes the width (4 px each
   side) or what the height leaves, whichever is less; everything else has a
   fixed height, so the board never moves during a game. The space left over
   is split above and below it: the opponent's speech uses the upper part.
   --g-chrome is the height of everything but the board. Loaded before
   play.css and shell.css, hence the body prefix where they set the same. */
#screen-game {
  --g-pad: 14px;
  --g-row: 52px;
  --g-strip: 40px;
  --g-extra: 0px; /* the preview banner and buy bar, when they show */
  /* 134 px: padding, header, gaps, the actions row and 10 px to spare. */
  --g-chrome: calc(134px + 2 * var(--g-row) + var(--g-strip) + var(--g-extra) + env(safe-area-inset-bottom));
  --g-board: min(100vw - 8px, 100dvh - var(--g-chrome));
}
/* A tall phone has room to spare under a full-width board: roomier rows. */
@media (min-height: 760px) {
  #screen-game { --g-row: 58px; --g-strip: 46px; }
}
#screen-game:has(#game-preview-banner:not(.hidden)) { --g-extra: 58px; }
#screen-game:has(#game-preview-cta:not(.hidden)) { --g-extra: 60px; }
#screen-game:has(#game-preview-banner:not(.hidden)):has(#game-preview-cta:not(.hidden)) { --g-extra: 118px; }
body #screen-game.active {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  padding: 6px 0 calc(8px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow: hidden;
}
#screen-game .game-upper,
#screen-game .game-lower {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: min-content;
}
body #screen-game .game-top { height: 40px; margin: 0; padding: 0 var(--g-pad); flex: none; }
body #screen-game #game-preview-banner:not(.hidden) { margin: 4px var(--g-pad) 0; padding: 8px 12px; height: 54px; flex: none; }
#screen-game #game-preview-banner p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#screen-game .game-upper > .speech {
  /* Above the opponent's row, in the free space; on a short screen it lies
     over the header for its few seconds and lets taps through. */
  position: absolute; bottom: calc(var(--g-row) + 12px); left: var(--g-pad); z-index: 30;
  max-width: calc(100% - 2 * var(--g-pad)); width: fit-content; box-sizing: border-box;
  padding: 8px 14px; font-size: 14px; line-height: 19px; pointer-events: none;
}

/* Player rows: one height for a plain row, a name card or a wardrobe card. */
body #screen-game .player-row,
body #screen-game .player-row.name-card,
body #screen-game .player-row.wardrobe-card-row {
  position: relative; flex: none; height: var(--g-row); min-height: 0; box-sizing: border-box;
  margin: 0 var(--g-pad); padding: 0 10px 0 6px;
}
body #screen-game .player-row:not(.name-card):not(.wardrobe-card-row) { padding: 0 2px; }
/* body prefix: as specific as the name card rule above, and later. */
body #screen-game .game-upper > .opp-row { margin-top: auto; margin-bottom: 6px; }
body #screen-game .player-row.me-row { margin-top: 6px; margin-bottom: 8px; }
#screen-game .player-main { flex: 1; min-width: 0; }
#screen-game .player-info { flex: 1; min-width: 0; }
#screen-game .rating-line { display: flex; align-items: center; gap: 8px; min-width: 0; height: 18px; }
#screen-game .rating-line .rating { flex: none; }
#screen-game .status-wrap { flex: none; }
#screen-game .game-upper > #evalbar { position: static; margin: 0 var(--g-pad) 6px; flex: none; }

/* Captured pieces, grouped by kind, and the material lead (+2). */
#screen-game .taken { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
#screen-game .taken:empty { display: none; }
#screen-game .tk-group { display: inline-flex; flex: none; }
#screen-game .tk { width: 17px; height: 17px; display: block; }
#screen-game .tk + .tk { margin-left: -9px; }
#screen-game .tk-b { filter: drop-shadow(0 0 .6px #EDE4D0) drop-shadow(0 0 .6px #EDE4D0); }
#screen-game .tk-w { filter: drop-shadow(0 0 .6px rgba(0, 0, 0, .7)); }
#screen-game .tk-lead { flex: none; font: 800 12px var(--rf-font-sans); color: var(--rf-text-2, var(--rf-text-2)); }

#screen-game .board-wrap {
  flex: none; position: relative; display: block;
  width: var(--g-board); height: var(--g-board); margin: 0 auto;
}
#screen-game .board-wrap > .board { width: 100%; height: 100%; }
#screen-game .board-wrap > #board-view,
#screen-game .board-wrap > #ck-view { position: absolute; inset: 0; z-index: 6; }
/* The view board wears the arena's rim as the game board does (arenas.css). */
html:is([data-theme="canvas"], [data-theme="dojo"], [data-theme="noir"], [data-theme="toon"], [data-theme="carnival"], [data-theme="void"], [data-theme="throne"], [data-theme="lab"], [data-theme="ember"], [data-theme="mirror"], [data-theme="parlor"], [data-theme="longnight"], [data-theme="meadow"]) #board-view::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: var(--rim-in, none); border: var(--rim-w, 0) solid transparent; border-image: var(--rim-img, none) 1;
}
#screen-game.looking-back #board,
#screen-game.looking-back #ck-board { visibility: hidden; }
#screen-game.looking-back .board-wrap > :is(#board-view, #ck-view) { box-shadow: 0 0 0 2px var(--rf-accent, var(--rf-accent)), var(--board-glow, none); }

/* Looking back: the way back to the game takes the actions row's place
   (resigning can wait until the player is back). */
#screen-game .game-nav-chip { display: none; }
body #screen-game.looking-back .game-lower > .actions { display: none; }
#screen-game.looking-back .game-nav-chip {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; margin: auto var(--g-pad) 0; padding: 0 16px !important; box-sizing: border-box;
  border: 1px solid var(--rf-line-2, var(--rf-line-2)); border-radius: 14px !important; white-space: nowrap; cursor: pointer;
  background: var(--rf-surface, var(--rf-surface)) !important; color: var(--rf-text, var(--rf-text)) !important; box-shadow: none !important;
  font: 800 14px var(--rf-font-sans); text-transform: none; letter-spacing: 0;
}
#screen-game .game-nav-chip .gn-new { display: none; }
#screen-game .game-nav-chip.new { background: var(--rf-accent, var(--rf-accent)) !important; color: var(--rf-accent-text, #1A1408) !important; }
#screen-game .game-nav-chip.new .gn-new { display: inline; }
#screen-game .game-nav-chip.new .gn-new::after { content: " ·"; }
#screen-game .game-nav-chip.new { animation: gn-pulse 1.6s ease-in-out infinite; }
@keyframes gn-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rf-accent, var(--rf-accent)) 30%, transparent), 0 8px 24px rgba(0, 0, 0, .5); } }

/* The move strip: ◀ the moves, one line, the latest in view ▶. */
#screen-game .move-strip {
  flex: none; display: flex; align-items: center; gap: 4px; height: var(--g-strip); margin: 6px var(--g-pad) 0;
  background: var(--rf-surface, var(--rf-surface)); border: 1px solid var(--rf-line, var(--rf-card-line)); border-radius: 12px; box-sizing: border-box;
}
#screen-game .nav-step {
  flex: none; width: 44px; height: calc(var(--g-strip) - 2px); display: grid; place-items: center; padding: 0 !important; margin: 0;
  background: none !important; border: 0; border-radius: 11px !important; color: var(--rf-text, var(--rf-text)) !important; box-shadow: none !important;
  position: relative; cursor: pointer;
}
#screen-game .nav-step:disabled { opacity: .3; cursor: default; }
/* a hold jumps to the start or the end: no text selection, callout or zoom */
#screen-game .nav-step { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#screen-game .nav-step.new { background: var(--rf-accent, var(--rf-accent)) !important; color: var(--rf-accent-text, #1A1408) !important; opacity: 1; }
#screen-game .move-list {
  flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 2px;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  padding: 0 10px;
}
#screen-game .move-list::-webkit-scrollbar { display: none; }
#screen-game .move-list .mv-n { flex: none; margin: 0 1px 0 6px; font: 600 12px var(--rf-font-sans); color: var(--rf-sub, var(--rf-sub)); }
#screen-game .move-list .mv-n:first-child { margin-left: 0; }
#screen-game .move-list .mv {
  flex: none; height: 30px; padding: 0 6px !important; margin: 0; border: 0; border-radius: 8px !important;
  background: none !important; color: var(--rf-text, var(--rf-text)) !important; box-shadow: none !important;
  font: 700 14px var(--rf-font-sans); text-transform: none; letter-spacing: 0; cursor: pointer;
}
#screen-game .move-list .mv.on { background: var(--rf-accent, var(--rf-accent)) !important; color: var(--rf-accent-text, #1A1408) !important; }
#screen-game .move-list:empty::before { content: ""; }

/* Overlays in the lower part: queued premoves in the opening name's place,
   the draw offer over the actions. */
#screen-game .game-lower > .premove-wrap {
  position: absolute; bottom: 0; left: var(--g-pad); z-index: 5; height: 44px; margin: 0; display: flex; align-items: center;
}
#screen-game:has(#game-preview-cta:not(.hidden)) .game-lower > .premove-wrap { bottom: 60px; }
#screen-game:has(#premove-chip:not(.hidden)) .actions .opening { visibility: hidden; }
#screen-game.looking-back .game-lower > .premove-wrap { display: none; }
#screen-game .game-lower > .premove-wrap .chip { margin: 0; }
#screen-game .game-lower > #draw-bar {
  position: absolute; bottom: 0; left: var(--g-pad); right: var(--g-pad); z-index: 10; margin: 0; width: auto; box-sizing: border-box; min-height: 44px;
}
body #screen-game .actions {
  flex: none; height: 44px; margin: auto var(--g-pad) 0; padding: 0; gap: 10px;
}
#screen-game .actions .opening {
  flex: 1; min-width: 0; line-height: 16px !important;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
body #screen-game .actions .btn-sec { height: 42px; }
body #screen-game #game-preview-cta:not(.hidden) { flex: none; height: 52px; margin: 8px var(--g-pad) 0; padding: 0 12px; }
#screen-game #game-preview-cta .cta-text p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  #screen-game .game-nav-chip.new { animation: none; }
}

/* Character stickers in game */
.game-sticker {
  width: 96px;
  height: 96px;
  pointer-events: none;
  z-index: 35;
}
.game-sticker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}
#screen-game .game-upper > #opp-sticker {
  position: absolute;
  bottom: calc(var(--g-row) + 8px);
  right: var(--g-pad);
}
#screen-game .game-lower > #me-sticker {
  position: absolute;
  bottom: calc(var(--g-row) + 8px);
  right: var(--g-pad);
}
.game-sticker.pop {
  animation: sticker-pop 220ms ease-out forwards;
}
.game-sticker.fade-out {
  animation: sticker-fade 250ms ease-in forwards;
}
@keyframes sticker-pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes sticker-fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .game-sticker.pop {
    animation: none;
    transform: scale(1);
    opacity: 1;
  }
}

/* In-game sticker tray */
.sticker-tray {
  position: absolute;
  bottom: 56px;
  left: var(--g-pad);
  right: var(--g-pad);
  background: var(--rf-surface, #181920);
  border: 1px solid var(--accent, var(--rf-line-2, #333));
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
}
.sticker-tray-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rf-line-2, #2a2b36);
}
.sticker-tray-title {
  font-weight: 700;
  font-size: 14px;
}
.sticker-tray-close {
  background: none;
  border: none;
  color: var(--muted, #888);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
}
.sticker-char-group {
  margin-bottom: 10px;
}
.sticker-char-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #aaa);
  margin-bottom: 6px;
}
.sticker-char-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.sticker-item-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 4px;
  cursor: pointer;
  flex: none;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, background-color 0.1s;
}
.sticker-item-btn:active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.1);
}
.sticker-item-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Wardrobe stickers tile and preview */
.wd-item-sticker {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.stickers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px;
  padding: 12px 0 24px;
}
.sticker-preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--card, rgba(255,255,255,0.05));
  border: 1px solid var(--line, rgba(255,255,255,0.1));
  border-radius: 12px;
  padding: 10px 6px;
}
.sticker-preview-card img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}
.sticker-preview-card span {
  font-size: 11px;
  margin-top: 6px;
  color: var(--muted, #aaa);
  text-transform: capitalize;
  text-align: center;
}