/* Price the Market — Polymarket calibration game (2026-06-03).
   Mobile-first, dark-capable. Self-contained; shares the app's auth-bar. */
:root{
  --ptm-bg:#0b1020; --ptm-surface:#141c33; --ptm-surface2:#1b2440;
  --ptm-border:rgba(255,255,255,0.10); --ptm-border-bright:rgba(255,255,255,0.18);
  --ptm-text:#eef2ff; --ptm-dim:#9aa6c4; --ptm-faint:#6b7799;
  --ptm-accent:#10b981; --ptm-cyan:#2dd4bf;
  --ptm-you:#2dd4bf; --ptm-mkt:#fbbf24;
  --ptm-good:#34d399; --ptm-mid:#fbbf24; --ptm-bad:#fb7185;
}
@media (prefers-color-scheme: light){
  :root{
    --ptm-bg:#eef1f8; --ptm-surface:#ffffff; --ptm-surface2:#f4f6fc;
    --ptm-border:rgba(15,23,42,0.10); --ptm-border-bright:rgba(15,23,42,0.18);
    --ptm-text:#0f172a; --ptm-dim:#475069; --ptm-faint:#7a85a3; --ptm-accent:#059669;
  }
}
.ptm-page{ background:var(--ptm-bg); color:var(--ptm-text);
  font-family:'Space Grotesk',system-ui,sans-serif; min-height:100vh; }
.ptm-page *,.ptm-page *::before,.ptm-page *::after{ box-sizing:border-box; }
.ptm-wrap{ max-width:560px; margin:0 auto; padding:16px 16px 72px; }

.ptm-head h1{ font-size:clamp(22px,5vw,30px); margin:6px 0 4px; letter-spacing:-.02em; }
.ptm-sub{ color:var(--ptm-faint); font-size:13.5px; margin:0 0 14px; line-height:1.45; }

.ptm-tally{ display:flex; gap:10px; margin-bottom:14px; }
.ptm-tally > div{ flex:1; background:var(--ptm-surface); border:1px solid var(--ptm-border);
  border-radius:12px; padding:10px; text-align:center; }
.ptm-tally .t-num{ display:block; font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:20px; color:var(--ptm-text); }
.ptm-tally .t-lbl{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ptm-dim); }

.ptm-card{ background:linear-gradient(165deg,var(--ptm-surface2),var(--ptm-surface));
  border:1px solid var(--ptm-border-bright); border-radius:18px; padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,0.28); }

.ptm-meta{ display:flex; gap:8px; margin-bottom:10px; min-height:0; }
.ptm-chip{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 9px; border-radius:7px; background:rgba(129,140,248,0.16);
  color:var(--ptm-accent); }
.ptm-chip-dim{ background:rgba(255,255,255,0.06); color:var(--ptm-faint); }
.ptm-q{ font-size:20px; line-height:1.3; margin:0 0 18px; letter-spacing:-.01em; }

/* estimate stage */
.ptm-readout{ text-align:center; font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:54px; line-height:1; color:var(--ptm-you); }
.ptm-readout .pct{ font-size:26px; color:var(--ptm-dim); margin-left:2px; }
.ptm-readout-lbl{ text-align:center; font-size:12.5px; color:var(--ptm-dim); margin:6px 0 16px; }
#ptm-slider{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:99px;
  background:linear-gradient(90deg,#fb7185,#fbbf24,#34d399); outline:none; margin:4px 0 6px; }
#ptm-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:30px; height:30px;
  border-radius:50%; background:#fff; border:3px solid var(--ptm-you); cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.35); }
#ptm-slider::-moz-range-thumb{ width:30px; height:30px; border-radius:50%; background:#fff;
  border:3px solid var(--ptm-you); cursor:pointer; }
.ptm-scale{ display:flex; justify-content:space-between; font-size:11px; color:var(--ptm-faint);
  font-family:'JetBrains Mono',monospace; margin-bottom:16px; }

.ptm-btn{ display:block; width:100%; padding:14px; border:0; border-radius:13px; cursor:pointer;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; }
.ptm-btn.primary{ background:linear-gradient(90deg,var(--ptm-accent),var(--ptm-cyan)); color:#0b1020; }
.ptm-btn.primary:hover{ filter:brightness(1.06); }
.ptm-btn:disabled{ opacity:.55; cursor:default; }
.ptm-btn.ghost{ background:transparent; border:1px solid var(--ptm-border-bright); color:var(--ptm-dim);
  margin-top:10px; font-size:13px; padding:10px; }
.ptm-btn.ghost:hover{ border-color:var(--ptm-accent); color:var(--ptm-accent); }
.ptm-hint-out{ font-size:12.5px; color:var(--ptm-dim); margin:8px 2px 0; line-height:1.5;
  background:var(--ptm-surface2); border:1px solid var(--ptm-border); border-radius:10px; padding:9px 11px; }
.ptm-hint-out b{ color:var(--ptm-text); }

/* related markets — play next */
.ptm-related{ margin:6px 0 14px; }
.ptm-related-k{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ptm-faint); margin-bottom:8px; }
.ptm-related-list{ display:flex; flex-direction:column; gap:7px; }
.ptm-related-item{ text-align:left; background:var(--ptm-surface2); border:1px solid var(--ptm-border);
  border-radius:11px; padding:11px 13px; color:var(--ptm-text); font-family:'Space Grotesk',sans-serif;
  font-size:13.5px; cursor:pointer; line-height:1.4; }
.ptm-related-item:hover{ border-color:var(--ptm-accent); }

/* reveal stage */
.ptm-bar{ margin:6px 0 18px; }
.ptm-bar-track{ position:relative; height:46px; border-radius:10px;
  background:linear-gradient(90deg,rgba(251,113,133,0.25),rgba(251,191,36,0.22),rgba(52,211,153,0.25));
  border:1px solid var(--ptm-border); }
.ptm-marker{ position:absolute; top:0; bottom:0; transform:translateX(-50%); display:flex;
  flex-direction:column; align-items:center; transition:left .5s cubic-bezier(.2,.7,.2,1); }
.ptm-marker i{ width:3px; height:30px; margin-top:2px; border-radius:2px; }
.ptm-marker span{ font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700;
  letter-spacing:.04em; margin-top:1px; }
.ptm-marker.you i{ background:var(--ptm-you); } .ptm-marker.you span{ color:var(--ptm-you); }
.ptm-marker.mkt i{ background:var(--ptm-mkt); } .ptm-marker.mkt span{ color:var(--ptm-mkt); }
.ptm-bar-axis{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--ptm-faint);
  font-family:'JetBrains Mono',monospace; margin-top:4px; }

.ptm-score{ display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.ptm-points{ flex:0 0 auto; text-align:center; }
.ptm-points span:first-child{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:40px;
  line-height:1; color:var(--ptm-good); }
.ptm-points .ppts{ display:block; font-size:11px; color:var(--ptm-faint); letter-spacing:.1em; text-transform:uppercase; }
.ptm-score-detail{ font-size:13px; color:var(--ptm-dim); line-height:1.5; }
.ptm-score-detail b{ color:var(--ptm-text); font-family:'JetBrains Mono',monospace; }
.ptm-verdict{ font-weight:600; margin-top:3px; }
.ptm-rating{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ptm-accent); margin-top:4px; }
.ptm-stale{ font-size:11.5px; color:var(--ptm-mid); margin-top:6px; line-height:1.4; }

.ptm-foot{ font-size:11.5px; color:var(--ptm-faint); margin-top:18px; line-height:1.5; text-align:center; }
.ptm-foot a{ color:var(--ptm-accent); }