/* =========================================================
   Draughtboard — design tokens
   Palette: charcoal/graphite grey shell, warm slate board,
   red vs near-black pieces (the game's own palette is the accent)
   Type: Oswald (display, condensed) + Inter (body/UI)
========================================================= */
:root{
  --bg-deep:      #1b1c1e;
  --bg-panel:     #26272a;
  --bg-panel-alt: #2f3033;
  --bg-raised:    #38393d;
  --border:       #414247;
  --border-soft:  #333438;
  --text-hi:      #ececea;
  --text-mid:     #b7b6b3;
  --text-low:     #7d7d80;

  --board-light:  #edd6b0;
  --board-dark:   #b88762;
  --board-edge:   #2a2a2c;

  --red:          #c1443b;
  --red-dim:      #8f332c;
  --black-piece:  #232324;
  --black-rim:    #47484c;

  --accent:       #c1443b;
  --accent-hover: #d15147;
  --success:      #5f9e6e;
  --danger:       #b04a42;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; height:100%;
  background: var(--bg-deep);
  color: var(--text-hi);
  font-family: var(--font-body);
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}
p{ margin: 0 0 12px 0; }
.hidden{ display:none !important; }
.subtle{ color: var(--text-mid); font-size: 13px; line-height: 1.5; }
.eyebrow{
  display:inline-block; font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}

/* ---------- buttons & fields ---------- */
.btn{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text-hi);
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, border-color .15s ease;
}
.btn:hover{ background: #434449; border-color: #555; }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity: .4; cursor: not-allowed; }
.btn-block{ width: 100%; }
.btn-sm{ padding: 8px 12px; font-size: 12px; }
.btn-primary{ background: var(--accent); border-color: var(--accent); }
.btn-primary:hover{ background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost{ background: transparent; }
.btn-danger{ background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover{ background: rgba(176,74,66,.15); }

.field{ display:flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; color: var(--text-mid); }
.field input, .field select{
  font-family: var(--font-body);
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text-hi);
  font-size: 14px;
}
.field input:focus, .field select:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
.form-error{ color: var(--danger); font-size: 12px; min-height: 16px; margin: -6px 0 8px 0; }

/* ---------- screens (full page states) ---------- */
.screen{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
}
#screen-app.screen{ display:block; min-height: 100vh; }

/* ---------- brand ---------- */
.brand{ display:flex; flex-direction:column; align-items:center; margin-bottom: 28px; }
.brand-mark{
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--red-dim), var(--red) 60%, #7a251f 100%);
  border: 3px solid #7a251f;
  margin-bottom: 10px;
}
.brand-mark.small{ width: 26px; height: 26px; border-width: 2px; margin-bottom:0; }
.brand-name{ font-size: 22px; letter-spacing: 0.03em; }
.brand-name.small{ font-size: 15px; }

/* ---------- auth card ---------- */
.auth-card, .onboard-card{
  width: 100%; max-width: 380px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.auth-tabs{ display:flex; margin-bottom: 20px; border-bottom: 1px solid var(--border-soft); }
.auth-tab{
  flex:1; background:none; border:none; color: var(--text-low);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  padding: 10px; cursor:pointer; border-bottom: 2px solid transparent;
}
.auth-tab.active{ color: var(--text-hi); border-bottom-color: var(--accent); }
.auth-form.hidden{ display:none; }

.btn-google{
  display:flex; align-items:center; justify-content:center; gap: 10px;
  background: #fff; color: #3c3c3c; border-color: #ddd; margin-bottom: 4px;
  text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 600;
}
.btn-google:hover{ background: #f3f3f3; }
.google-g{
  display:inline-flex; align-items:center; justify-content:center;
  width: 18px; height: 18px; border-radius: 50%;
  background: conic-gradient(#4285F4 0turn 0.25turn, #34A853 0.25turn 0.5turn, #FBBC05 0.5turn 0.75turn, #EA4335 0.75turn 1turn);
  color: #fff; font-size: 11px; font-family: var(--font-body); font-weight: 700;
}

/* ---------- onboarding ---------- */
.choice-row{ display:flex; gap: 12px; margin: 18px 0; }
.choice-card, .ruleset-card, .color-card, .mode-card, .bot-list button{
  flex:1; background: var(--bg-panel-alt); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px; cursor: pointer;
  color: var(--text-hi); text-align:left; display:flex; flex-direction:column; gap:4px;
  transition: border-color .15s ease, background .15s ease;
}
.choice-card:hover, .ruleset-card:hover, .color-card:hover, .mode-card:hover{
  border-color: var(--accent); background: var(--bg-raised);
}
.choice-card.selected, .ruleset-card.selected, .color-card.selected{
  border-color: var(--accent); background: rgba(193,68,59,0.12);
}
.choice-title{ font-family: var(--font-display); font-size: 16px; text-transform: uppercase; }
.choice-sub{ font-size: 12px; color: var(--text-low); }

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 24px; border-bottom: 1px solid var(--border-soft);
  background: var(--bg-panel);
}
.topbar-brand{ display:flex; align-items:center; gap:8px; }
.topbar-user{ display:flex; align-items:center; gap:12px; }
.elo-pill{
  background: var(--bg-raised); border:1px solid var(--border); border-radius: 20px;
  padding: 4px 10px; font-size: 12px; color: var(--text-mid); font-family: var(--font-display);
}
.username-display{ font-family: var(--font-display); font-size: 14px; letter-spacing: .02em; }

/* ---------- app layout: board left, tabs right ---------- */
.app-layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  max-width: 1200px;
  margin: 28px auto;
  padding: 0 24px;
  align-items: start;
}
@media (max-width: 880px){
  .app-layout{ grid-template-columns: 1fr; }
}

.board-pane{ display:flex; flex-direction:column; gap: 10px; }
.player-tag{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-display); font-size: 13px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-mid);
}
.clock{
  margin-left:auto; background: var(--bg-panel-alt); border:1px solid var(--border);
  padding: 4px 10px; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums;
  color: var(--text-hi);
}
.clock.low{ color: var(--danger); border-color: var(--danger); }

.piece-dot{ width: 14px; height:14px; border-radius:50%; display:inline-block; }
.piece-dot.big{ width: 26px; height: 26px; margin-bottom: 6px; }
.dot-red{ background: radial-gradient(circle at 35% 30%, #e0685d, var(--red) 60%, var(--red-dim)); }
.dot-black{ background: radial-gradient(circle at 35% 30%, #4c4c4f, var(--black-piece) 60%, #0f0f10); }
.dot-mixed{ background: linear-gradient(135deg, var(--red) 50%, var(--black-piece) 50%); }

.board-wrap{ position: relative; width: 100%; max-width: 560px; max-height: 560px; aspect-ratio: 1 / 1; margin: 0 auto; }
.board{
  position:absolute; inset:0;
  display:grid;
  background: var(--board-edge);
  border-radius: var(--radius-md);
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.board-8{
  grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  background-image: url('../assets/board-8.png');
  background-size: 100% 100%; background-origin: content-box; background-clip: content-box;
}
.board-10{
  grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr);
  background-image: url('../assets/board-10.png');
  background-size: 100% 100%; background-origin: content-box; background-clip: content-box;
}
.sq{ position:relative; display:flex; align-items:center; justify-content:center; container-type: inline-size; }
/* squares are transparent now — the checker pattern comes from the board's
   own background image above, so it aligns pixel-perfect with the grid */
.sq.legal-target::after{
  content:''; position:absolute; width: 26%; height:26%; border-radius:50%;
  background: rgba(193,68,59,.65);
}
.sq.selected{ box-shadow: inset 0 0 0 3px var(--accent); }
.sq.last-move{ box-shadow: inset 0 0 0 3px rgba(236,236,234,.5); }

.piece{
  width: 82%; height: 82%; border-radius: 50%; cursor:pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,.5);
  background-size: cover; background-position: center;
  position:relative;
  transition: opacity .15s ease, filter .15s ease;
}
.piece.red{ background-image: url('../assets/piece-red.png'); }
.piece.black{ background-image: url('../assets/piece-black.png'); }
.piece.king::after{
  content:'♛'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size: 62cqw; line-height: 1; color: rgba(255,255,255,.92); text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

.board.idle .piece{ cursor: default; }
.board.idle .sq{ cursor: default; }

.game-actions{ display:flex; gap:10px; justify-content:flex-end; }

/* ---------- right panel ---------- */
.panel-pane{
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 20px; min-height: 480px;
}
.panel-tabs{ display:flex; gap: 4px; margin-bottom: 18px; }
.panel-tab{
  flex:1; background:none; border:none; color: var(--text-low); cursor:pointer;
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  padding: 8px; border-bottom: 2px solid var(--border-soft);
}
.panel-tab.active{ color: var(--text-hi); border-bottom-color: var(--accent); }
.panel-title{ font-size: 16px; margin-bottom: 14px; }
.panel-subtitle{ font-size: 13px; margin-top: 20px; color: var(--text-mid); }

.back-link{
  background:none; border:none; color: var(--text-low); cursor:pointer;
  font-size: 12px; padding:0; margin-bottom: 14px; text-transform: uppercase;
  font-family: var(--font-display); letter-spacing: .03em;
}
.back-link:hover{ color: var(--text-hi); }

.mode-grid, .ruleset-grid, .color-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.mode-title, .ruleset-title{ font-family: var(--font-display); text-transform: uppercase; font-size: 14px; }
.mode-sub, .ruleset-sub{ font-size: 11px; color: var(--text-low); }
.color-card{ align-items:center; text-align:center; }

.bot-list{ display:flex; flex-direction:column; gap:8px; margin-bottom: 16px; }
.bot-list button{ flex-direction:row; align-items:center; justify-content:space-between; }
.bot-name{ font-family: var(--font-display); text-transform:uppercase; font-size:14px; }
.bot-elo{ font-size: 11px; color: var(--text-low); }

.time-groups{ display:flex; flex-direction:column; gap: 14px; margin-bottom: 16px; }
.time-group-label{ font-size: 11px; text-transform: uppercase; letter-spacing:.06em; color: var(--text-low); margin-bottom: 6px; font-family: var(--font-display); }
.time-options{ display:flex; gap: 8px; }
.time-opt{
  flex:1; background: var(--bg-panel-alt); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 4px; color: var(--text-hi); cursor:pointer; text-align:center; font-size: 13px;
}
.time-opt:hover{ border-color: var(--accent); }
.time-opt.selected{ border-color: var(--accent); background: rgba(193,68,59,.15); }

.matchmaking-panel{ display:flex; flex-direction:column; align-items:center; text-align:center; padding: 30px 10px; gap:6px; }
.spinner{
  width: 40px; height:40px; border-radius:50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite; margin-bottom: 12px;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.mm-status{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; }

.invite-code-box{
  font-family: var(--font-display); font-size: 32px; text-align:center; letter-spacing: .2em;
  background: var(--bg-panel-alt); border: 1px dashed var(--border); border-radius: var(--radius-md);
  padding: 18px; margin-bottom: 16px; color: var(--accent);
}
.divider-text{ text-align:center; color: var(--text-low); font-size: 11px; text-transform:uppercase; margin: 10px 0; letter-spacing:.08em; }

.profile-stat-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.stat-box{ background: var(--bg-panel-alt); border:1px solid var(--border); border-radius: var(--radius-md); padding: 14px; text-align:center; }
.stat-value{ display:block; font-family: var(--font-display); font-size: 22px; }
.stat-value.unranked{ font-size: 14px; color: var(--text-low); }
.stat-label{ font-size: 11px; color: var(--text-low); text-transform: uppercase; }

.profile-header{ display:flex; align-items:baseline; gap: 10px; }
.profile-username{ font-family: var(--font-display); font-size: 20px; text-transform: uppercase; }
.profile-id{ color: var(--text-low); font-size: 13px; }
#profile-joined{ margin-top: 2px; }

.history-list{ display:flex; flex-direction:column; gap: 8px; margin-bottom: 6px; max-height: 220px; overflow-y:auto; }
.history-row{
  display:flex; align-items:center; justify-content:space-between; gap: 8px;
  background: var(--bg-panel-alt); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 12px;
}
.history-row .h-result{ font-family: var(--font-display); text-transform: uppercase; font-size: 11px; padding: 2px 8px; border-radius: 20px; }
.history-row .h-result.win{ background: rgba(95,158,110,.2); color: var(--success); }
.history-row .h-result.loss{ background: rgba(176,74,66,.2); color: var(--danger); }
.history-row .h-result.draw{ background: rgba(183,182,179,.2); color: var(--text-mid); }
.history-row .h-opp{ flex:1; color: var(--text-hi); }
.history-row .h-meta{ color: var(--text-low); font-size: 11px; }

/* ---------- modals ---------- */
.modal-overlay{
  position:fixed; inset:0; background: rgba(10,10,11,.7);
  display:flex; align-items:center; justify-content:center; z-index: 100; padding: 20px;
}
.modal-overlay-inline{
  position:absolute; inset:0; background: rgba(10,10,11,.55);
  display:flex; align-items:center; justify-content:center; z-index: 20; padding: 16px;
  border-radius: var(--radius-md);
}
.modal-box{
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 28px; width: 100%; max-width: 440px;
}
.modal-narrow{ max-width: 340px; text-align:center; }
.diff-compare{ display:flex; gap: 20px; margin: 16px 0; }
.diff-col h4{ font-size: 13px; color: var(--accent); }
.diff-col ul{ padding-left: 18px; margin:0; font-size: 13px; color: var(--text-mid); line-height:1.6; }
.modal-btn-row{ display:flex; gap:10px; justify-content:center; margin-top: 16px; }
.modal-gameover h2{ font-size: 26px; }
#gameover-reason{ color: var(--text-mid); text-transform: uppercase; font-size: 13px; letter-spacing: .04em; }