* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  --accent-bars: #0A1F44;
  --text-accent: #CC9933;
  --facet-highlights: #FFD700;
  --accent-text: #3366CC;
  --ink: #0A1F44;
  --muted: #59677e;
  --line: #dce4f1;
  margin: 0;
  font-family: "Montserrat Variable", system-ui, sans-serif;
  background: #f7f9fd;
  color: var(--ink);
  line-height: 1.5;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 2rem;
  background: var(--accent-bars);
  color: #fff;
  border-bottom: 1px solid var(--accent-bars);
  gap: 1rem;
  flex-wrap: wrap;
}
header p { margin: 0.3rem 0 0; }
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand img { flex-shrink: 0; object-fit: contain; }
.brand h1 { color: var(--text-accent); font-weight: 900; letter-spacing: -0.05em; }
.brand p { color: var(--facet-highlights); }
.account { display: flex; align-items: center; gap: 1rem; }
#connection { font-size: 0.8rem; color: #e6edf9; }
.stack { display: grid; gap: 1rem; min-width: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-text); font-size: 0.7rem; font-weight: 800; margin: 0 0 0.5rem; }
.notice { margin: 0.5rem 1rem; }
.notice:empty { display: none; }
label:not(.toggle) { display: grid; gap: 0.4rem; margin-bottom: 0.75rem; }
fieldset { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 1rem; min-width: 0; }
select, input[type="password"], input[type="text"], input:not([type]) {
  font: inherit; padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid #899bb8;
  background: #fff; color: inherit; width: 100%; min-width: 0;
}
button, select, input { min-height: 44px; }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
header :focus-visible { outline-color: var(--facet-highlights); }
dl { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: baseline; }
dd { margin: 0; font-weight: 700; }
#profile-stats { background: #edf2fc; padding: 1rem; border-radius: 14px; }
.xp-total { font-size: 1.8rem; color: var(--accent-text); letter-spacing: -0.04em; }
.rating-stat { font-size: 0.75rem; color: var(--muted); }
dd.rating-stat { text-align: right; overflow-wrap: anywhere; }
.profile-settings { font-size: 0.85rem; }
summary { cursor: pointer; min-height: 44px; padding: 0.6rem 0; font-weight: 700; }
input[type="checkbox"] { min-height: 20px; width: 20px; flex-shrink: 0; accent-color: var(--accent-text); }
#history { list-style: none; padding: 0; max-height: 280px; overflow: auto; }
#history li { margin-bottom: 0.5rem; }
#history button { width: 100%; text-align: left; }
.completed { color: #216346; }
#guesses, #revealed-quests { padding-left: 1.2rem; }
#own-quests { list-style: none; padding: 0; }
#own-quests li { padding: 0.7rem; border: 1px solid #c8d6f3; border-left: 4px solid var(--accent-bars); border-radius: 10px; background: #f1f5fd; margin-bottom: 0.4rem; }
#own-quests li.completed { border-color: #9acfb3; background: #eef9f1; }
#own-quests strong, .quest-meta { display: block; }
.quest-meta { font-size: 0.8rem; margin-top: 0.2rem; }
#guess-error { margin: 0.5rem 0 0; font-size: 0.85rem; }
.game-dialog {
  width: min(460px, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 12px 40px #0a1f4433;
}
.game-dialog::backdrop { background: #0a1f4499; }
.game-dialog h2 { font-size: 1.5rem; }
.game-dialog > button { width: 100%; }
.quest-introduction { list-style: none; padding: 0; }
.quest-introduction li { padding: 0.75rem; background: #edf2fc; border-radius: 12px; margin-bottom: 0.5rem; }
.quest-introduction strong { display: block; }
.outcome-xp-label { margin-bottom: 0; font-weight: 700; }
#outcome-xp { font-size: 3rem; line-height: 1.2; margin: 0.5rem 0; }
#outcome-rating { font-size: 0.85rem; margin-bottom: 1.5rem; }
.player-label { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.clock { font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; background: #e6edf9; padding: 0.35rem 0.75rem; border-radius: 10px; }
.clock.running { background: var(--accent-bars); color: #fff; }
#recap { margin-top: 1rem; }
.recap-player { border-top: 1px solid var(--line); }
.xp-award { color: var(--accent-text); font-weight: 900; font-size: 1.8rem; margin: 0.5rem 0; }
.reward-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1rem; }
.reward-stat { display: grid; gap: 0.25rem; padding: 0.75rem; background: #edf2fc; border-radius: 12px; }
.reward-stat > span { font-size: 0.8rem; color: var(--muted); }
.reward-stat > strong { font-size: 1.35rem; margin: 0; white-space: nowrap; }
.rating-gain { color: #216346; }
.rating-loss { color: #ae2538; }
.reward-totals { color: var(--muted); font-size: 0.8rem; }
.recap-details { border-top: 1px solid var(--line); font-size: 0.85rem; }
.evidence { overflow-wrap: anywhere; font-size: 0.85rem; }
#move-form { display: flex; align-items: end; gap: 0.5rem; margin-bottom: 1rem; }
#move-form label { margin: 0; flex: 1; }
#auth-switch { margin-top: 1rem; }
header h1 { margin: 0; font-size: 1.8rem; line-height: 1; }
h2 { font-size: 1.15rem; margin: 0 0 0.6rem; line-height: 1.25; }
.muted { color: var(--muted); }
.error { color: #ae2538; min-height: 1.2em; }
.error:empty { display: none; }
.badge {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.4em;
  border-radius: 1em;
  background: #e6edf9;
  color: var(--accent-text);
  text-align: center;
  font-size: 0.85rem;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.25rem;
  box-shadow: 0 4px 0 #e6edf9;
}
button {
  font: inherit;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 12px;
  background: var(--accent-text);
  color: #fff;
  cursor: pointer;
}
button:hover:not(:disabled) { filter: brightness(0.94); }
button.secondary { background: #e6edf9; color: var(--accent-text); }
button.danger { background: #ae2538; }
button:disabled { opacity: 0.6; cursor: default; }

#checkin { max-width: 480px; margin: 3rem auto; padding: 2rem; }
#checkin h2 { font-size: 2rem; }
#checkin form { display: grid; gap: 0.5rem; }
#checkin input { flex: 1; }
.input-hint { font-size: 0.8rem; margin: -0.5rem 0 0.5rem; }
.quest-steps { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; padding-left: 1.2rem; font-size: 0.8rem; color: var(--accent-text); font-weight: 700; margin: 1.5rem 0; }
#lobby h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -0.04em; }
#lobby { background: linear-gradient(135deg, #fff 50%, #edf2fc); padding: 2rem; }
.game-facts { font-size: 0.8rem; color: var(--muted); }
#find-match-btn { width: 100%; font-weight: 800; font-size: 1.1rem; min-height: 54px; box-shadow: 0 4px 0 var(--accent-bars); }
#cancel-queue-btn { width: 100%; margin-top: 0.75rem; }
#online-players { border-top: 1px solid var(--line); margin-top: 1rem; }
#online-players h2 { font-size: 1rem; letter-spacing: normal; margin: 0.75rem 0 0.5rem; }
#players-empty { font-size: 0.8rem; margin: 0.5rem 0; }
#registered-total { font-size: 0.75rem; font-style: italic; }
#players:empty { display: none; }
#lobby-status:empty { display: none; }

main {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(300px, 600px) minmax(250px, 320px);
  gap: 1rem;
  padding: 1rem;
  justify-content: center;
  align-items: start;
}
body:not(.active-game):not(.reviewing) main { grid-template-columns: minmax(0, 1000px); padding: 2rem 1rem; }
body:not(.active-game):not(.reviewing) #board-area,
body:not(.active-game):not(.reviewing) #side-panel { display: none; }
body:not(.active-game):not(.reviewing) #lobby-panel { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; }
body:not(.active-game):not(.reviewing) #lobby { grid-column: 2; grid-row: 1 / span 2; }
body:not(.active-game):not(.reviewing) #history-panel { grid-column: 1; }
body:not(.active-game):not(.reviewing) #recap { grid-column: 1 / -1; }
@media (max-width: 1050px) {
  main { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin: auto; }
  #board-area { grid-row: 1; }
  #checkin { margin: 1rem; }
}

#players { list-style: none; padding: 0; margin: 0 0 1rem; }
#players li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}
#players .status { font-size: 0.8rem; color: var(--muted); }
#players .status.in_game { color: #855b12; }
#players button { padding: 0.2rem 0.6rem; font-size: 0.85rem; }
.challenge {
  background: #edf2fc;
  padding: 0.6rem;
  border-radius: 12px;
  margin-bottom: 0.5rem;
}
.challenge .actions { display: flex; gap: 0.4rem; margin-top: 0.4rem; }

#board-area { min-width: 0; }
#board-wrap { position: relative; display: flex; gap: 6px; }
#eval-bar {
  width: 14px;
  background: #222;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  visibility: hidden;
}
#eval-bar.visible { visibility: visible; }
#eval-bar.flipped { flex-direction: column; }
#eval-fill { background: #f0f0f0; height: 50%; transition: height 0.3s; }
#board {
  flex: 1;
  min-width: 0;
  container-type: inline-size;
  border-radius: 4px;
  overflow: hidden;
  user-select: none;
}
#board [data-square] { cursor: pointer; }
#board .notation-322f9 {
  font-size: clamp(6px, 2.4cqi, 14px);
  line-height: 1;
  pointer-events: none;
}
#board .alpha-d2270 { bottom: 1px; right: 1px; }
#board .numeric-fc462 { top: 1px; left: 1px; }
#board .white-1e1d7 { background: #f6f0e2; color: var(--accent-bars); }
#board .black-3c85d { background: #93a9c6; color: var(--accent-bars); }
#board .last.white-1e1d7 { background: #ffe49a; }
#board .last.black-3c85d { background: #e4c36e; }
#board .selected { box-shadow: inset 0 0 0 4px var(--accent-text); }
#board .check { background-image: radial-gradient(circle, #ff3b3b 0%, #ff3b3b55 60%, transparent 80%); }
#board .target::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
}
#board .target.capture::after {
  width: 90%;
  height: 90%;
  background: transparent;
  border: 5px solid rgba(0, 0, 0, 0.25);
}

#promotion {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.6);
}
#promotion button { padding: 0.3rem; background: #eeeed2; }
#promotion img { display: block; width: clamp(36px, 8vw, 60px); height: auto; }

.player-bar { padding: 0.4rem 0; font-weight: 600; min-height: 2rem; }
.player-bar .turn { color: var(--accent-text); }
#game-status { min-height: 1.4em; font-weight: 600; }
.controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.toggle { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
#engine-lines { padding-left: 1.2rem; font-size: 0.9rem; }
#engine-lines li { margin-bottom: 0.4rem; }
#engine-lines .score { font-weight: 700; display: inline-block; min-width: 3.5em; }
#moves {
  position: relative;
  max-height: 260px;
  overflow-y: auto;
  padding-left: 2rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}
#moves li span { display: inline-block; min-width: 4.5em; }
#moves .move-link { background: transparent; padding: 0.3rem 0.5rem; color: inherit; }
#moves .move-link:hover { background: #e6edf9; }
#moves .move-link[aria-current="step"] { background: #e6edf9; color: var(--accent-text); font-weight: 700; }
#review-controls { padding: 0.5rem 0; }
.review-buttons { display: flex; justify-content: center; gap: 0.5rem; }
.review-buttons button { min-width: 48px; }
#review-position { margin: 0.5rem 0 0; text-align: center; font-size: 0.9rem; }

#game-tools > summary { display: none; }
#challenge-form { margin-top: 1rem; }
.active-game main { grid-template-columns: minmax(0, 540px) minmax(250px, 320px); }
.active-game #lobby-panel, .active-game #moves-panel { display: none; }
.active-game #board-heading { margin-top: 0; }
.active-game #board-wrap { max-width: min(100%, calc(100dvh - 300px)); margin: auto; }
.active-game #eval-bar { display: none; }
.active-game #board-area { grid-column: 1; }
.active-game #side-panel { grid-column: 2; }
.reviewing main { grid-template-columns: minmax(0, 540px) minmax(280px, 360px); }
.reviewing #lobby-panel { display: none; }
.reviewing #board-area { grid-column: 1; }
.reviewing #side-panel { grid-column: 2; }
.reviewing #recap { margin: 0; }
.reviewing #board-wrap { max-width: min(100%, calc(100dvh - 300px)); margin: auto; }
#review-back-btn { margin-bottom: 0.75rem; }

@media (max-width: 1050px) {
  header { padding: 0.6rem 0.75rem; align-items: center; gap: 0.5rem; }
  header h1 { font-size: 1.15rem; }
  .brand { gap: 0.5rem; }
  .brand img { width: 34px; height: 34px; }
  header p { display: none; }
  .brand .brand-subtitle { display: block; font-size: 0.7rem; margin-top: 0; }
  .active-game .brand .brand-subtitle { display: none; }
  .account { gap: 0.5rem; font-size: 0.8rem; min-width: 0; }
  #connection { overflow-wrap: anywhere; }
  button, select, input { min-height: 44px; }
  main { padding: 0.75rem; gap: 0.75rem; }
  body:not(.active-game):not(.reviewing) main { padding: 0.75rem; }
  #lobby-panel { display: flex; flex-direction: column; }
  #lobby-panel > .card { width: 100%; }
  #profile-panel { padding: 0.75rem 1rem; }
  #profile-panel .eyebrow { display: none; }
  #profile-panel h2 { font-size: 1rem; margin-bottom: 0.4rem; }
  #profile-stats { margin: 0; padding: 0.5rem 0.75rem; gap: 0.15rem 1rem; font-size: 0.85rem; }
  .xp-total { font-size: 1.4rem; }
  .profile-settings summary { font-size: 0.75rem; }
  #lobby { padding: 1rem; }
  #lobby h2 { font-size: 1.65rem; }
  #lobby > .muted { font-size: 0.85rem; margin: 0.5rem 0; }
  #lobby .game-facts { font-size: 0.7rem; margin: 0.5rem 0 0.75rem; }
  #history-panel { padding: 1rem; }
  #history-panel .muted { font-size: 0.85rem; margin: 0; }
  #recap { order: -1; margin-top: 0; }
  #find-match-btn, #cancel-queue-btn, #challenge-form button { width: 100%; }
  body:not(.active-game):not(.reviewing) #board-area,
  body:not(.active-game):not(.reviewing) #side-panel { display: none; }
  .reviewing main { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .reviewing #board-area, .reviewing #side-panel { display: contents; }
  .reviewing #review-back-btn { grid-row: 1; justify-self: start; margin: 0; }
  .reviewing #play-area { grid-row: 2; }
  .reviewing #recap { grid-row: 3; padding: 0.75rem; }
  .reviewing #recap > .eyebrow { display: none; }
  .reviewing #recap > p { margin: 0.5rem 0; font-size: 0.8rem; }
  .reviewing .reward-summary { margin-top: 0.5rem; }
  .reviewing .reward-stat { padding: 0.5rem 0.75rem; }
  .reviewing #game-tools { grid-row: 4; }
  .reviewing #analysis-panel { grid-row: 5; }
  .reviewing #moves-panel { grid-row: 6; }
  .reviewing #board-wrap { max-width: min(100%, max(220px, calc(100dvh - 500px))); }
  #review-back-btn { margin-bottom: 0.75rem; }
  #game-tools > summary { display: list-item; cursor: pointer; padding: 0.75rem; min-height: 44px; }
  #game-tools:not([open]) > :not(summary) { display: none; }
  #game-tools[open] > #move-form { display: flex; }
  #game-tools[open] > .controls { display: flex; }
  #game-tools { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
  #game-tools[open] { padding: 0 0.5rem 0.5rem; }
  .active-game main { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .active-game #board-area, .active-game #side-panel { display: contents; }
  .active-game #play-area { grid-row: 1; }
  .active-game #quest-panel { grid-row: 2; padding: 0.65rem; }
  .active-game #game-tools { grid-row: 3; }
  .active-game #board-heading, .reviewing #board-heading { display: none; }
  .active-game #board-wrap { max-width: min(100%, max(220px, calc(100dvh - 500px))); }
  .active-game .player-bar, .reviewing .player-bar { padding: 0.25rem 0; }
  .active-game .player-label > span, .reviewing .player-label > span { font-size: 0.85rem; overflow-wrap: anywhere; }
  .active-game .clock, .reviewing .clock { font-size: 1.2rem; padding: 0.25rem 0.5rem; flex-shrink: 0; }
  .active-game #game-status, .reviewing #game-status { margin: 0.3rem 0; font-size: 0.9rem; }
  .active-game #quest-panel h2 { margin-bottom: 0.3rem; }
  .active-game #quest-panel > .eyebrow { display: none; }
  .active-game #own-quests { margin: 0.25rem 0; font-size: 0.85rem; }
  .active-game #own-quests li { padding: 0.35rem 0.5rem; }
  .active-game .quest-meta { font-size: 0.75rem; margin: 0; }
  .active-game #guess-count { margin: 0.3rem 0; font-size: 0.8rem; }
  .active-game #guess-form { display: grid; gap: 0.4rem; }
  .active-game #guess-form label { margin: 0; font-size: 0.85rem; gap: 0.2rem; }
  .active-game #guesses, .active-game #revealed-quests { font-size: 0.8rem; margin: 0.3rem 0; }
  .active-game #guesses:empty, .active-game #revealed-quests:empty { display: none; }
}

@media (min-width: 600px) and (max-width: 1050px) and (max-height: 600px) {
  .active-game main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .active-game #play-area { grid-column: 1; grid-row: 1; }
  .active-game #quest-panel { grid-column: 2; grid-row: 1; }
  .active-game #game-tools { grid-column: 1 / -1; grid-row: 2; }
  .active-game #board-wrap { max-width: min(100%, max(160px, calc(100dvh - 175px))); }
}