/* DAGmate — clean, minimal flat-2D theme (docs/DAGMATE_SPEC.md §10). */

:root {
  --bg: #0f1115;
  --bg-elev: #14171d;
  --panel: #181b22;
  --panel-2: #1e222a;
  --panel-border: #2a2f3a;
  --panel-border-soft: #23272f;
  --text: #eef0f3;
  --muted: #8992a3;
  --muted-2: #626a78;
  --accent: #46c774;
  --accent-dim: #2f8a52;
  --accent-hover: #58dd88;
  --accent-ink: #06210f;
  --danger: #e0685f;
  --danger-hover: #ea7d74;
  --danger-ink: #2c0b08;
  --board-light: #f0ead6;
  --board-dark: #6f9a58;
  --board-select: #f7f169;
  --board-legal: rgba(20, 20, 20, 0.28);
  /* Board scales from one variable so mobile just shrinks it. Desktop = 8×52px. */
  --board-size: 416px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.55);
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(70, 199, 116, 0.07), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(111, 154, 88, 0.06), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* ── topbar ─────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--panel-border-soft);
  background: rgba(20, 23, 29, 0.85);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.brand-mark {
  height: 32px; width: auto; display: block;
  filter: drop-shadow(0 0 7px rgba(64, 208, 208, 0.4));
}

.tabs { display: flex; gap: 2px; flex: 1; }
.tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 8px 14px 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  transition: color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

.wallet-area { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wallet-badge {
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-family: var(--font-mono);
  white-space: nowrap;
  color: var(--text);
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

main { max-width: 1120px; margin: 0 auto; padding: 28px 24px 80px; }

@media (max-width: 640px) {
  .topbar { gap: 8px; padding: 10px 12px; }
  .brand-name { display: none; }
  .tabs { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { padding: 8px 8px 10px; font-size: 12.5px; white-space: nowrap; }
  .wallet-badge { font-size: 11px; padding: 6px 10px; max-width: 40vw; }
  /* Play area: shrink the board to fit the phone and stack the side panel below it. */
  main { padding: 16px 12px 60px; }
  .card { padding: 16px 14px; }
  :root { --board-size: min(416px, calc(100vw - 56px)); }
  .board-wrap { gap: 16px; }
  .board-side { min-width: 0; width: 100%; }
  .board-header { gap: 10px; }
  /* Leaderboard: tighten, and drop the W/L/D detail columns so #/Player/Rating/Win% fit a phone cleanly
     (the .lb-scroll box is still there as a fallback if a name is very long). */
  .leaderboard { font-size: 13px; }
  .leaderboard th, .leaderboard td { padding: 8px 7px; }
  .leaderboard th { font-size: 10.5px; letter-spacing: 0.02em; }
  .leaderboard th:nth-child(1), .leaderboard td:nth-child(1) { width: 26px; }
  .leaderboard th:nth-child(n+4):nth-child(-n+6),
  .leaderboard td:nth-child(n+4):nth-child(-n+6) { display: none; }  /* hide W, L, D on mobile */
}

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadein 0.18s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── cards / layout ─────────────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}
.card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.card h2 + p.muted { margin-top: 0; margin-bottom: 16px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

.muted { color: var(--muted); font-size: 13px; font-weight: normal; }

/* ── forms ──────────────────────────────────────────────────────────── */
label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; font-weight: 500; }
label.grow { flex: 1; }
input[type="text"], input[type="number"], select {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px rgba(70, 199, 116, 0.15);
}
input::placeholder { color: var(--muted-2); }
label.checkbox { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); font-weight: 500; }
label.checkbox input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

.row { display: flex; gap: 14px; }

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  transition: filter 0.12s, transform 0.05s, border-color 0.12s;
}
.btn:hover { border-color: var(--muted-2); }
.btn:active { transform: translateY(1px); }
.btn.full { width: 100%; margin-top: 4px; }
.btn-primary { background: linear-gradient(145deg, var(--accent), var(--accent-dim)); color: var(--accent-ink); border-color: transparent; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-danger { background: var(--danger); color: var(--danger-ink); border-color: transparent; }
.btn-danger:hover { background: var(--danger-hover); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.settings-row { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--panel-border-soft); }

/* ── lists ──────────────────────────────────────────────────────────── */
.list { display: flex; flex-direction: column; gap: 8px; }
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.12s;
}
.list-item:hover { border-color: var(--panel-border); }
.list-item .meta { color: var(--muted); font-size: 12px; font-weight: 500; margin-top: 2px; }
.list-item .actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Learn tier separator — groups the 30 levels into their six difficulty tiers. */
.tier-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 4px 6px;
  border-bottom: 1px solid var(--panel-border-soft);
}
.tier-head:first-child { padding-top: 0; }
.tier-head .tier-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.tier-head .meta { color: var(--muted); font-size: 12px; margin-top: 3px; }

/* ── board card ─────────────────────────────────────────────────────── */
.board-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.board-header h2 { margin: 0; }
.board-meta { color: var(--muted); font-size: 12.5px; flex: 1; }
.board-actions { display: flex; gap: 8px; }

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

.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: var(--board-size);
  height: var(--board-size);
  border-radius: var(--radius-sm);
  overflow: hidden;
  user-select: none;
  box-shadow: var(--shadow-card), 0 0 0 1px var(--panel-border-soft);
}
.sq {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--board-size) / 8 * 0.62);
  cursor: pointer;
  position: relative;
  transition: background-color 0.1s;
  touch-action: manipulation;   /* no 300ms tap delay / double-tap zoom on the board */
}
.sq.light { background: var(--board-light); }
.sq.dark { background: var(--board-dark); }
.sq.selected { box-shadow: inset 0 0 0 3px var(--board-select); }
.sq.legal::after {
  content: "";
  position: absolute;
  width: calc(var(--board-size) / 8 * 0.3);
  height: calc(var(--board-size) / 8 * 0.3);
  border-radius: 50%;
  background: var(--board-legal);
  pointer-events: none;
}
.sq.legal.has-piece::after {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 0 0 4px var(--board-legal);
  box-sizing: border-box;
}
.sq .coord {
  position: absolute;
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  opacity: 0.55;
  pointer-events: none;
}
.sq .coord.file { right: 3px; bottom: 1px; }
.sq .coord.rank { left: 3px; top: 1px; }
.sq.light .coord { color: var(--board-dark); }
.sq.dark .coord { color: var(--board-light); }

/* chessnut piece set (Apache-2.0) — see assets/pieces/ATTRIBUTION.md. The SVGs
   carry their own black outline, so no text-stroke trick is needed for contrast.
   Sized by CSS, so swapping in another set with the same 12 filenames just works. */
.piece {
  width: 86%;
  height: 86%;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

.board-side { min-width: 220px; flex: 1; }

/* Both clocks, opponent above and you below. Only the side to move is running,
   so only that one gets any emphasis — a glance should answer "whose time is
   burning" without having to read the digits. */
.clocks { margin-bottom: 14px; }
.clocks:empty { display: none; }
.clock {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.clock + .clock { margin-top: 6px; }
.clock-who {
  font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clock-time {
  font-family: var(--font-mono); font-size: 20px; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.clock.ticking { border-color: var(--accent); }
.clock.ticking .clock-time { color: var(--text); }
.clock.low .clock-time { color: var(--danger); }
.clock-label { font-size: 10.5px; color: var(--muted); opacity: 0.7; margin-top: 6px; text-align: right; }

/* The claim panel. This is the only screen in the app where money moves, so
   the payout figure is the largest thing on it and the fee breakdown sits
   directly underneath — a player should be able to check the arithmetic
   before they sign, not after. */
.claim-panel { margin-bottom: 14px; }
.claim-panel:empty { display: none; }
.claim-panel:not(:empty) {
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.claim-title { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.claim-amount {
  font-family: var(--font-mono); font-size: 24px; font-weight: 700;
  color: var(--text); margin: 4px 0 10px; font-variant-numeric: tabular-nums;
}
.claim-fees { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.claim-fees div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.claim-fees div:last-child { color: var(--text); }
.claim-note { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.claim-note code { font-size: 10.5px; word-break: break-all; }

/* Fee promise: quiet, but present wherever a player is about to commit money. */
.fee-note { font-size: 11.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.site-footer {
  max-width: 1180px; margin: 32px auto 24px; padding: 18px 20px 0;
  border-top: 1px solid var(--panel-border-soft);
}
.fee-disclaimer { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin: 0 0 6px; }

.escrow-info {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
  margin-bottom: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  line-height: 1.6;
}
/* Per-player deposit progress inside .escrow-info, while a match waits to be
   funded. The tick is the whole status signal, so it stays legible: grey dots
   while we're still waiting, accent check once that side's stake confirmed. */
.deposit-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.deposit-row + .deposit-row { border-top: 1px solid var(--panel-border-soft); }
.deposit-tick {
  flex: 0 0 18px; text-align: center; font-size: 13px;
  color: var(--muted); font-family: var(--font-sans);
}
.deposit-tick.ok { color: var(--accent); font-weight: 800; }
.deposit-row > div { min-width: 0; }
.deposit-row .deposit-addr { color: var(--muted); opacity: 0.75; font-size: 10.5px; margin-top: 2px; }
.escrow-info .meta { margin-top: 10px; font-family: var(--font-sans); word-break: normal; }

.move-log { font-family: var(--font-mono); font-size: 13px; color: var(--text); max-height: 200px; overflow-y: auto; }

/* ── learn ──────────────────────────────────────────────────────────── */
.learn-content { font-size: 14.5px; line-height: 1.7; color: var(--text); }
.learn-content ul { padding-left: 20px; margin: 0; }
.learn-content li { margin-bottom: 8px; }
.learn-content b { color: var(--accent); }

.badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--panel-border);
  color: var(--muted);
}
.badge.locked { color: var(--danger); background: rgba(224, 104, 95, 0.12); }
.badge.unlocked { color: var(--accent); background: rgba(70, 199, 116, 0.12); }

/* ── toast ──────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 100;
  max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 999px; }

/* deposit-confirming spinner (a slowly turning knight) */
@keyframes dm-spin { to { transform: rotate(360deg); } }
.dm-spin { display: inline-block; animation: dm-spin 1.1s linear infinite; color: var(--accent, #49EACB); font-size: 1.15em; }

/* "More games" coming-soon cards */
.soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.soon-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
}
.soon-mark { font-size: 34px; line-height: 1; }
.soon-body h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.soon-body p { margin: 0; font-size: 13px; }

/* Wallet chooser (multiple extensions installed) */
.wallet-chooser-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.wallet-chooser {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--radius); padding: 20px; width: 100%; max-width: 320px;
  display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card);
}
.wallet-chooser-title { font-weight: 600; margin-bottom: 4px; }
.wallet-choice { width: 100%; }
/* Leaderboard */
.lb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.leaderboard { width: 100%; border-collapse: collapse; font-size: 14px; }
.leaderboard th, .leaderboard td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--panel-border-soft); }
.leaderboard th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.leaderboard th:nth-child(1), .leaderboard td:nth-child(1) { text-align: center; width: 42px; color: var(--muted); }
.leaderboard th:nth-child(2), .leaderboard td.who { text-align: left; }
.leaderboard td.who { font-weight: 600; }
.leaderboard td:nth-child(3) { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.leaderboard tbody tr:hover { background: var(--bg-elev); }
.leaderboard tr.me { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.leaderboard tr.me td.who::after { content: " (you)"; color: var(--muted); font-weight: 400; font-size: 12px; }

/* Mobile connect sheet (no injected provider on a phone → guide to the wallet's in-app browser) */
.wallet-sheet { max-width: 360px; }
.wallet-sheet-text { font-size: 13.5px; line-height: 1.5; margin: 2px 0 8px; }
.wallet-sheet-steps { margin: 0 0 10px; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.wallet-sheet-steps li { margin-bottom: 3px; }

/* In-match chat (private, off-chain) */
.chat-panel { margin-top: 16px; border-top: 1px solid var(--panel-border-soft); padding-top: 12px; }
.chat-title { font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.chat-log { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.chat-log:empty::after { content: "No messages yet — say hi."; color: var(--muted-2); font-size: 12.5px; }
.chat-msg { padding: 6px 10px; border-radius: 10px; max-width: 85%; font-size: 13.5px; line-height: 1.4; word-break: break-word; }
.chat-msg.mine { align-self: flex-end; background: var(--accent-dim); color: #eafff0; }
.chat-msg.theirs { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--panel-border-soft); }
.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1; min-width: 0; }