/* TixJudge — conversational, editorial, zero-chrome. */

:root {
  --ink: #1d1d1f;
  --ink2: #424245;
  --ink3: #6e6e73;
  --ink4: #a1a1a6;
  --surface: #fbfbfd;
  --line: #d2d2d7;
  --pop: #f26522;
  --pop2: #e05a1b;
  --good: #34c759;
  --warn: #ff9f0a;
  --bad: #ff3b30;
  --mono: "DM Mono", "SF Mono", monospace;
  --sans: "DM Sans", -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box }

/* Auth gate */
.auth-wrap {
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; padding:24px;
}
.auth-wrap .brand { font-size:28px; margin-bottom:8px }
.auth-msg { font-size:14px; color:var(--ink3) }
.auth-input {
  width:100%; max-width:300px; border:none; outline:none;
  border-bottom:2px solid var(--line); padding:10px 0;
  font-size:16px; font-family:var(--sans); color:var(--ink);
  background:transparent; text-align:center;
}
.auth-input:focus { border-color:var(--pop) }
.auth-btn {
  font-family:var(--mono); font-size:14px; font-weight:600;
  color:#fff; background:var(--pop); border:none; border-radius:6px;
  padding:10px 32px; cursor:pointer; transition:opacity .15s;
}
.auth-btn:hover { opacity:0.85 }
.auth-error { font-size:13px; color:var(--bad); min-height:20px }
body { font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased; background:#fff }
.page { display:none } .page.active { display:block }

/* ================================================================
   LANDING — full viewport, centered, minimal
   ================================================================ */
.land {
  min-height:100vh; display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.land-bg {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 20% 50%, rgba(0,113,227,0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(52,199,89,0.03) 0%, transparent 40%),
    radial-gradient(circle at 60% 80%, rgba(255,159,10,0.03) 0%, transparent 40%);
}
.land > * { position:relative; z-index:1 }

.land-nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 32px;
}
.brand {
  font-family:var(--mono); font-weight:500; font-size:22px;
  letter-spacing:0.02em; color:var(--pop);
}
.land-sellers {
  font-family:var(--mono); font-size:13px; color:var(--ink4);
  display:flex; align-items:center; gap:4px;
}

.land-center {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:0 24px; margin-top:16vh;
}
.land-above {
  font-family:var(--mono); font-size:12px; color:var(--ink4);
  letter-spacing:0.04em; margin-bottom:16px;
}
.land-center h1 {
  font-size:clamp(28px,4.5vw,44px);
  font-weight:700; text-align:center;
  letter-spacing:-0.03em; line-height:1.2;
  margin-bottom:40px; max-width:560px;
}

/* The input — full-width underline, no box */
.land-input-wrap {
  position:relative; width:100%; max-width:480px;
}
.land-input {
  width:100%; border:none; outline:none;
  border-bottom:2px solid var(--pop);
  padding:12px 60px 12px 0;
  font-size:18px; font-family:var(--sans); color:var(--ink);
  background:transparent;
  transition:border-color .2s;
}
.land-input:focus { border-color:var(--pop) }
.land-input::placeholder { color:var(--ink4) }
.land-kbd {
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:11px; color:var(--ink4);
  border:1px solid var(--line); border-radius:4px;
  padding:3px 8px; pointer-events:none;
}

.land-location {
  display:flex; align-items:center; justify-content:center; gap:4px;
  margin-top:12px; font-size:11px; color:var(--ink4);
}
.land-location svg { color:var(--pop) }
/* 3D rotating wheel */
.wheel-wrap {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:8px;
}
.wheel-label {
  font-family:var(--mono); font-size:12px; color:var(--ink4);
}
.wheel {
  height:28px; overflow:hidden;
  perspective:200px;
  width:130px;
}
.wheel-inner {
  width:100%; height:100%;
  position:relative;
  transform-style:preserve-3d;
  animation:wheelSpin 6s ease-in-out infinite;
}
.wheel-item {
  position:absolute; top:0; left:0; width:100%; height:28px;
  line-height:28px; text-align:center;
  font-family:var(--mono); font-size:14px; font-weight:500;
  color:var(--pop); white-space:nowrap;
  backface-visibility:hidden;
}

/* 6 items on a cylinder: 360/6 = 60deg apart, radius = h/2 / tan(30deg) ≈ 24px */
.wheel-item:nth-child(1) { transform:rotateX(0deg)   translateZ(24px) }
.wheel-item:nth-child(2) { transform:rotateX(-60deg)  translateZ(24px) }
.wheel-item:nth-child(3) { transform:rotateX(-120deg) translateZ(24px) }
.wheel-item:nth-child(4) { transform:rotateX(-180deg) translateZ(24px) }
.wheel-item:nth-child(5) { transform:rotateX(-240deg) translateZ(24px) }
.wheel-item:nth-child(6) { transform:rotateX(-300deg) translateZ(24px) }

@keyframes wheelSpin {
  0%,12%     { transform:rotateX(0deg) }
  16%,28%    { transform:rotateX(60deg) }
  33%,45%    { transform:rotateX(120deg) }
  50%,62%    { transform:rotateX(180deg) }
  66%,78%    { transform:rotateX(240deg) }
  83%,95%    { transform:rotateX(300deg) }
  100%       { transform:rotateX(360deg) }
}

.land-examples {
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  margin-top:20px;
}
.land-examples button {
  font-family:var(--mono); font-size:12px;
  padding:6px 14px; border-radius:100px;
  border:none; cursor:pointer;
  transition:all .15s; font-weight:500;
}
.land-examples button:nth-child(1) { background:#fff0ec; color:#d4400c }
.land-examples button:nth-child(2) { background:#ecf8f0; color:#1a8a4a }
.land-examples button:nth-child(3) { background:#f0edff; color:#5b4fc7 }
.land-examples button:nth-child(4) { background:#eef6ff; color:#2466c8 }
.land-examples button:hover { filter:brightness(0.95) }

.land-ticker {
  padding:12px 0; border-top:1px solid var(--line);
  overflow:hidden;
  position:fixed; bottom:0; left:0; right:0;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
}
.ticker-track {
  display:flex; gap:24px; white-space:nowrap;
  animation:scroll 25s linear infinite; width:max-content;
  font-family:var(--mono); font-size:11px; color:var(--ink4);
}
@keyframes scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ================================================================
   RESULTS — flowing editorial analysis
   ================================================================ */
.res-nav {
  display:flex; align-items:center; gap:12px;
  padding:16px 32px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px); z-index:10;
}
.res-back {
  font-family:var(--mono); font-size:13px; color:var(--ink3);
  border:none; background:none; cursor:pointer;
  transition:color .15s; padding:0;
}
.res-back:hover { color:var(--pop) }
.res-search-wrap { flex:1 }
.res-search {
  width:100%; border:none; outline:none;
  font-size:14px; font-family:var(--sans); color:var(--ink);
  padding:6px 0; background:transparent;
}
.res-search::placeholder { color:var(--ink4) }

.res-body {
  max-width:640px; margin:0 auto;
  padding:32px 24px 80px;
}

/* Intent — just a subtle line */
.intent-line {
  font-family:var(--mono); font-size:12px; color:var(--ink4);
  margin-bottom:24px; display:flex; gap:6px; flex-wrap:wrap; align-items:center;
}
.intent-chip {
  background:var(--surface); border:1px solid var(--line);
  padding:2px 8px; border-radius:4px; color:var(--ink2); font-weight:500;
}

/* Event block */
.ev-block {
  margin-bottom:32px;
}
.ev-block img {
  width:100%; height:200px; object-fit:cover;
  border-radius:8px; margin-bottom:16px;
}
.ev-emoji-hero { font-size:48px; margin-bottom:12px; display:block }
.ev-title { font-size:28px; font-weight:700; letter-spacing:-0.03em; line-height:1.15; margin-bottom:6px }
.ev-meta { font-size:14px; color:var(--ink3); margin-bottom:0 }

/* Verdict — BIG and editorial */
.verdict-block {
  margin:32px 0; padding:28px 0; border-top:2px solid var(--ink); border-bottom:1px solid var(--line);
}
.verdict-grade-row {
  display:flex; align-items:flex-end; gap:16px; margin-bottom:8px;
}
.verdict-letter {
  font-size:72px; font-weight:700; line-height:1;
  letter-spacing:-0.04em;
}
.verdict-number {
  font-family:var(--mono); font-size:16px; color:var(--ink3);
  margin-bottom:10px;
}
.verdict-opinion {
  font-size:22px; font-weight:700; line-height:1.3;
  letter-spacing:-0.02em; margin-bottom:12px;
}
.verdict-notes {
  display:flex; flex-direction:column; gap:4px;
}
.verdict-note {
  font-size:14px; color:var(--ink3); line-height:1.5;
  padding-left:12px; border-left:2px solid var(--line);
}
.verdict-inline {
  display:flex; align-items:center; gap:8px; margin-top:8px;
}
.verdict-signal {
  font-family:var(--mono); font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:4px; text-transform:uppercase; flex-shrink:0;
}
.verdict-signal.buy { background:#f0fdf4; color:#15803d; }
.verdict-signal.wait { background:#fefce8; color:#854d0e; }
.verdict-reason { font-size:13px; color:var(--ink3); }

/* Signal strip */
.signal-strip {
  display:flex; gap:0; margin:24px 0;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.signal-item {
  flex:1; padding:14px 16px;
  border-right:1px solid var(--line);
}
.signal-item:last-child { border-right:none }
.signal-label { font-family:var(--mono); font-size:10px; color:var(--ink4); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px }
.signal-value { font-size:15px; font-weight:700 }
.signal-sub { font-size:11px; color:var(--ink4); margin-top:2px }

/* Seller table — not cards, a TABLE */
.st-pref-note {
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink);
  background:rgba(255,159,10,0.12); border:1px solid rgba(255,159,10,0.3);
  padding:16px 20px; border-radius:8px; margin-bottom:16px;
  line-height:1.5; text-align:center;
}
.st-expand-btn {
  font-family:var(--mono); font-size:13px; font-weight:700;
  color:#fff; background:var(--pop); border:none; border-radius:6px;
  cursor:pointer; padding:10px 24px; margin-top:12px;
  display:inline-block; transition:opacity .15s;
}
.st-expand-btn:hover { opacity:0.85 }
.seller-section { margin:32px 0 }
.seller-section-title {
  font-family:var(--mono); font-size:11px; color:var(--ink4);
  text-transform:uppercase; letter-spacing:0.06em;
  margin-bottom:12px; display:flex; justify-content:space-between;
}
.seller-table { width:100%; border-collapse:collapse }
.seller-table th {
  font-family:var(--mono); font-size:10px; color:var(--ink4);
  text-transform:uppercase; letter-spacing:0.06em;
  text-align:left; padding:8px 12px;
  border-bottom:1px solid var(--line); font-weight:500;
}
.seller-table th:last-child { text-align:right }
.seller-table td {
  padding:14px 12px; border-bottom:1px solid var(--surface);
  font-size:14px; vertical-align:middle;
}
.seller-table tr:hover td { background:var(--surface) }
.seller-table tr.top-pick td { background:rgba(0,113,227,0.03) }
.seller-table tr.top-pick td:first-child { box-shadow:inset 3px 0 0 var(--pop) }
.seller-table tr.st-primary td { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface) }
.seller-table tr.st-primary .st-name { color:var(--ink3); font-weight:500 }

.st-seller { display:flex; align-items:center; gap:8px }
.st-score {
  width:28px; height:28px; border-radius:50%; border:2px solid;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; font-family:var(--mono);
}
.st-name { font-weight:700; font-size:15px }
.st-seat { font-size:13px; font-weight:500; color:var(--ink2); white-space:nowrap }
.st-tier {
  font-family:var(--mono); font-size:10px; font-weight:500;
  background:var(--surface); color:var(--ink4); padding:1px 5px;
  border-radius:3px; border:1px solid var(--line); margin-left:4px;
  vertical-align:middle;
}
.st-price { text-align:right; font-weight:700; font-size:18px; font-family:var(--mono) }
.st-fees { font-size:11px; color:var(--ink4); font-weight:400; white-space:nowrap }
.st-price-label { font-size:14px; font-weight:600; color:var(--pop) }
.st-action { text-align:right; width:140px; white-space:nowrap }
.st-buy {
  font-family:var(--mono); font-size:13px; font-weight:700;
  color:#fff; text-decoration:none;
  background:var(--pop); border:none; border-radius:6px;
  padding:8px 14px; transition:all .15s; display:inline-block;
  cursor:pointer; position:relative; z-index:1;
  white-space:nowrap;
}
.st-buy:hover { opacity:0.85 }
.st-buy:visited { color:#fff }
.st-badge {
  font-family:var(--mono); font-size:9px; font-weight:500;
  background:var(--pop); color:#fff; padding:2px 6px;
  border-radius:3px; margin-left:6px; vertical-align:middle;
}
.st-muted { background:var(--surface); color:var(--ink3); border:1px solid var(--line) }
.st-muted:hover { opacity:0.7 }
.st-link {
  font-family:var(--mono); font-size:11px; font-weight:500;
  color:var(--ink4); text-decoration:none; white-space:nowrap;
  transition:color .15s;
}
.st-link:hover { color:var(--pop) }
.seller-reminder {
  background:var(--pop); color:#fff; padding:14px 20px;
  border-radius:8px; margin-bottom:16px;
  display:flex; flex-direction:column; gap:2px;
  animation:fadeInReminder .3s ease;
  font-size:15px;
}
.seller-reminder strong { font-weight:800; }
.seller-reminder-sub { font-size:11px; opacity:0.7; }
@keyframes fadeInReminder { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.st-unavailable {
  margin-top:16px; padding:20px; border:1px solid var(--line);
  border-radius:8px; text-align:center;
}
.st-unavailable p { font-size:13px; color:var(--ink3); margin-bottom:10px }
.st-unavailable p:first-child { font-weight:500; color:var(--ink2) }
.st-seller-links {
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.st-seller-links a {
  font-family:var(--mono); font-size:12px; font-weight:500;
  color:var(--pop); text-decoration:none; padding:6px 14px;
  border:1px solid var(--line); border-radius:6px;
  transition:all .15s;
}
.st-seller-links a:hover { border-color:var(--pop); background:rgba(242,101,34,0.05) }
.st-note {
  font-family:var(--mono); font-size:11px; color:var(--ink4);
  margin-top:10px; padding-top:8px; border-top:1px solid var(--line);
}

/* Other events — compact list */
.other-section { margin-top:40px; padding-top:24px; border-top:1px solid var(--line) }
.other-section h4 {
  font-family:var(--mono); font-size:11px; color:var(--ink4);
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:12px;
}
.other-list { display:flex; flex-direction:column; gap:0 }
.other-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--surface);
  cursor:pointer; transition:background .1s;
}
.other-item:hover { background:var(--surface); margin:0 -8px; padding:10px 8px; border-radius:6px }
.other-img { width:36px; height:28px; border-radius:4px; object-fit:cover; flex-shrink:0 }
.other-emoji { font-size:18px; flex-shrink:0; width:36px; text-align:center }
.other-info { flex:1; min-width:0 }
.other-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.other-meta { font-size:11px; color:var(--ink4) }
.other-arrow { font-size:14px; color:var(--ink4) }

/* ================================================================
   LOADING
   ================================================================ */
.loading-overlay {
  position:fixed; inset:0; background:rgba(255,255,255,0.97);
  backdrop-filter:blur(12px); z-index:100;
  display:flex; align-items:center; justify-content:center;
}
.loading-inner {
  text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:20px; width:280px;
}
.loading-bar {
  width:100%; height:3px; background:var(--line);
  border-radius:2px; overflow:hidden;
}
.loading-bar-fill {
  height:100%; width:40%;
  background:linear-gradient(90deg, var(--pop), #ff9f0a, var(--pop));
  border-radius:2px;
  animation:loadSlide 1s ease-in-out infinite;
}
@keyframes loadSlide {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(350%); }
}
.loading-status {
  font-family:var(--mono); font-size:13px; color:var(--ink3); margin:0;
  animation:fadeInOut 2s ease-in-out infinite;
}
@keyframes fadeInOut {
  0%,100% { opacity:0.5; }
  50% { opacity:1; }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
/* Recent searches */
.recent {
  max-width:480px; margin:24px auto 0; padding:0 24px;
}
.recent-toggle {
  font-family:var(--mono); font-size:12px; color:var(--ink4);
  background:none; border:none; cursor:pointer; padding:0;
  display:flex; align-items:center; gap:4px;
  margin:0 auto; transition:color .15s;
}
.recent-toggle:hover { color:var(--pop) }
.recent-caret {
  display:inline-block; transition:transform .2s; font-size:14px;
}
.recent.open .recent-caret { transform:rotate(90deg) }
.recent-list {
  display:none; flex-direction:column; gap:0; margin-top:8px;
}
.recent.open .recent-list { display:flex }
.recent-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; background:transparent; border:none;
  border-bottom:1px solid var(--line); cursor:pointer;
  font-family:var(--sans); font-size:13px; color:var(--ink2);
  text-align:left; width:100%; transition:background .15s;
}
.recent-item:last-child { border-bottom:none }
.recent-item:hover { background:var(--surface) }
.recent-query { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.recent-arrow { color:var(--ink4); font-size:14px; flex-shrink:0 }
.recent-item:hover .recent-arrow { color:var(--pop) }

/* Trending */
.trending {
  max-width:480px; margin:40px auto 0; padding:0 24px; text-align:center;
}
.trending-label {
  font-family:var(--mono); font-size:11px; color:var(--ink4);
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:14px;
}
.trending-grid {
  display:flex; flex-direction:column; gap:4px;
}
.trending-card {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; background:transparent; border:none; border-bottom:1px solid var(--line);
  cursor:pointer; font-family:var(--sans);
  color:var(--ink); text-align:left; width:100%;
  transition:background .15s;
}
.trending-card:last-child { border-bottom:none }
.trending-card:hover { background:var(--surface) }
.trending-img { width:32px; height:32px; border-radius:6px; object-fit:cover; flex-shrink:0 }
.trending-emoji { font-size:18px; flex-shrink:0; width:32px; text-align:center }
.trending-info { flex:1; min-width:0; }
.trending-name { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.trending-meta { font-size:11px; color:var(--ink4) }
.trending-arrow { color:var(--ink4); font-size:14px; flex-shrink:0; transition:color .15s }
.trending-card:hover .trending-arrow { color:var(--pop) }
.trending-skeleton {
  height:44px; border-radius:6px;
  background:linear-gradient(90deg, var(--surface) 25%, #f0f0f0 50%, var(--surface) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.trending-empty {
  font-size:13px; color:var(--ink4); padding:12px 0; text-align:center;
}

/* Buy interstitial */
.buy-interstitial {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  animation:fadeInOverlay 0.2s ease;
}
@keyframes fadeInOverlay { from{opacity:0} to{opacity:1} }
.buy-inter-inner { text-align:center; }
.buy-inter-brand {
  font-family:var(--mono); font-size:16px; color:var(--pop);
  margin-bottom:16px; letter-spacing:0.02em;
}
.buy-inter-msg {
  font-size:22px; font-weight:700; color:#fff;
  margin-bottom:6px;
}
.buy-inter-sub {
  font-size:13px; color:rgba(255,255,255,0.5);
}

/* Error state */
.error-state {
  text-align:center; padding:48px 24px;
}
.error-icon {
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,59,48,0.08); color:var(--bad);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700; margin-bottom:16px;
}
.error-title {
  font-size:18px; font-weight:700; margin-bottom:6px;
  letter-spacing:-0.02em;
}
.error-msg {
  font-size:14px; color:var(--ink3); margin-bottom:20px;
  line-height:1.5;
}
.error-retry {
  font-family:var(--mono); font-size:13px; font-weight:600;
  color:var(--pop); background:none; border:1px solid var(--pop);
  border-radius:6px; padding:8px 20px; cursor:pointer;
  transition:all .15s;
}
.error-retry:hover { background:var(--pop); color:#fff }

@media(max-width:640px) {
  .land-center h1 { font-size:26px }
  .land-input { font-size:16px }
  .land-examples { gap:6px }
  .res-nav { padding:12px 16px }
  .res-body { padding:24px 16px 60px }
  .ev-title { font-size:22px }
  .verdict-letter { font-size:56px }
  .verdict-opinion { font-size:18px }
  .signal-strip { flex-direction:column }
  .signal-item { border-right:none; border-bottom:1px solid var(--line) }
  .signal-item:last-child { border-bottom:none }
  .seller-table { font-size:13px }
  .seller-table td { padding:10px 8px }
}