@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/space-grotesk.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --canvas: #e6e6e3;
  --surface: #ffffff;
  --ink: #0d0d0d;
  --ink-2: #55554f;
  --muted: #8a8a84;
  --line: #c9c9c4;
  --green: #2e7d4f;
  --red: #e8563f;
  --pink: #efa8d2;
  --yellow: #f2b23a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}

.brand {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}

nav a {
  background: var(--ink);
  color: var(--canvas);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 99px;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 16px 64px;
}

.headline {
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 14px 0 18px;
}

.headline em { font-style: italic; }

.micro {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* --- scoreboard color blocks --- */
.blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.block { padding: 18px 16px; color: #fff; }
.block .micro { color: inherit; opacity: 0.8; }
.block .value {
  font-size: clamp(38px, 11vw, 52px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-top: 6px;
}

.block.green { background: var(--green); }
.block.red { background: var(--red); }
.block.pink { background: var(--pink); color: var(--ink); }
.block.pink .micro { opacity: 0.65; }
.block.yellow { background: var(--yellow); color: var(--ink); }
.block.yellow .micro { opacity: 0.65; }

/* --- panels / cards --- */
.card {
  background: var(--surface);
  padding: 16px;
  margin-top: 8px;
}

.active-bet .behavior {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 6px 0 4px;
}

.countdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.countdown {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.countdown.urgent { color: var(--red); }

.meta { color: var(--muted); font-size: 13px; margin-top: 6px; }
.meta a { color: var(--ink); font-weight: 500; }

.banner {
  background: var(--yellow);
  color: var(--ink);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.section-label { margin: 24px 0 4px; }

/* --- history --- */
.history-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.chip {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}

.chip.w { background: var(--green); }
.chip.l { background: var(--red); }
.chip.pending { background: var(--ink-2); }

.history-item .text { flex: 1; min-width: 0; }
.history-item .behavior { font-size: 14px; font-weight: 500; }
.history-item .sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.history-item .sub a { color: var(--ink-2); }

.flag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  background: var(--ink);
  color: var(--canvas);
  vertical-align: 1px;
}

.flag.unpaid { background: var(--red); color: #fff; }

/* --- forms --- */
form label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 16px 0 5px;
}

form input, form textarea, form select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid transparent;
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  transition: border-color 0.2s;
}

form input:focus, form textarea:focus {
  outline: none;
  border-color: var(--ink);
}

form textarea { min-height: 68px; resize: vertical; }

form ::placeholder { color: var(--muted); font-weight: 400; }

form .field-warn { border-left: 5px solid var(--yellow); }
form .field-pass { border-left: 5px solid var(--green); }

.hint { color: var(--muted); font-size: 12px; margin-top: 5px; }

/* probability slider */
.prob-row {
  background: var(--surface);
  position: relative;
  height: 48px;
  overflow: hidden;
}

.prob-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--pink);
  pointer-events: none;
}

.prob-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.prob-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 6px;
  height: 48px;
  background: var(--ink);
  border: 0;
  border-radius: 0;
}

.prob-row input[type="range"]::-moz-range-thumb {
  width: 6px;
  height: 48px;
  background: var(--ink);
  border: 0;
  border-radius: 0;
}

.prob-value {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 17px;
  pointer-events: none;
}

/* --- buttons --- */
button.primary {
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  border: 0;
  border-radius: 99px;
  background: var(--ink);
  color: var(--canvas);
  cursor: pointer;
}

button.primary.armed { background: var(--red); color: #fff; }
button.primary.win { background: var(--green); color: #fff; }
button.primary.loss { background: var(--red); color: #fff; }
button.primary:disabled { opacity: 0.5; cursor: default; }

button.ghost {
  width: 100%;
  margin-top: 20px;
  padding: 13px;
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

button.ghost:disabled { opacity: 0.5; cursor: default; }

/* --- verdict W/L panels --- */
.vpanels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}

.vpanel {
  border: 0;
  padding: 24px 0 18px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  font: inherit;
  transition: opacity 0.2s;
}

.vpanel .big { font-size: 44px; font-weight: 700; line-height: 1; display: block; }
.vpanel .micro { color: inherit; opacity: 0.85; display: block; margin-top: 6px; }
.vpanel.w { background: var(--green); }
.vpanel.l { background: var(--red); }
.vpanels.picked .vpanel:not(.sel) { opacity: 0.35; }

/* evidence drop zone look */
input[type="file"] {
  border: 2px dashed var(--line);
  background: var(--surface);
  padding: 18px 14px;
  font-size: 13px;
  color: var(--muted);
}

/* --- AI review --- */
.review-card {
  margin-top: 12px;
  padding: 16px;
  background: var(--surface);
}

.check-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: 14px;
}

.check-row strong { font-weight: 700; letter-spacing: -0.01em; }
.check-icon { flex: none; width: 20px; height: 20px; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; }
.check-icon.check-pass { background: var(--green); }
.check-icon.check-warn { background: var(--yellow); color: var(--ink); }
.check-comment { color: var(--ink-2); font-size: 13px; margin-top: 2px; font-weight: 400; }

.rewrite { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }

.rewrite button {
  margin-top: 10px;
  padding: 8px 18px;
  font: inherit;
  font-weight: 500;
  font-size: 12px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.error { color: var(--red); font-weight: 500; font-size: 14px; margin-top: 12px; }
.empty { color: var(--ink-2); text-align: center; padding: 28px 16px; }

/* --- modal --- */
#modal {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 13, 0.85);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 10;
}

#modal[hidden] { display: none; }
#modal img { max-width: 100%; max-height: 80vh; }
#modal button {
  margin-top: 14px;
  padding: 10px 28px;
  font: inherit;
  font-weight: 500;
  border: 0;
  border-radius: 99px;
  background: var(--canvas);
  color: var(--ink);
  cursor: pointer;
}