@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --bg:#1c130c;
  --surface:#271b11;
  --surface-2:#332415;
  --amber:#c97c2c;
  --honey:#e8a33d;
  --cream:#f2e8d8;
  --muted:#b8a88f;
  --rule:rgba(242,232,216,0.12);
  --shadow:0 20px 50px rgba(0,0,0,0.45);
  --err:#e08a8a;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    radial-gradient(circle at 20% -10%, rgba(201,124,44,0.18), transparent 55%),
    radial-gradient(circle at 100% 110%, rgba(232,163,61,0.10), transparent 45%),
    var(--bg);
  color:var(--cream);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:32px 16px 64px;
}
.wrap{ width:100%; max-width:440px; }
.wrap.wide{ max-width:620px; }
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--honey); text-align:center; margin-bottom:8px;
}
h1.title{
  font-family:'Fraunces',serif; font-weight:700; font-optical-sizing:auto;
  font-size:30px; text-align:center; margin:0 0 4px; line-height:1.15;
}
.subtitle{ text-align:center; color:var(--muted); font-size:14px; margin:0 0 28px; line-height:1.5; }
.card{
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--rule); border-radius:18px; padding:28px 22px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--amber), var(--honey), transparent);
}
.progress-row{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.glass-svg{ width:34px; height:50px; flex-shrink:0; }
.glass-outline{ fill:none; stroke:var(--muted); stroke-width:2.5; opacity:0.6; }
.liquid{ fill:var(--honey); transition:y 0.5s ease, height 0.5s ease; }
.progress-text{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em;
  color:var(--muted); text-transform:uppercase;
}
.progress-track{ height:3px; background:var(--rule); border-radius:2px; margin-top:6px; overflow:hidden; }
.progress-fill{ height:100%; background:linear-gradient(90deg, var(--amber), var(--honey)); transition:width 0.5s ease; }

label.field-label{
  display:block; font-size:12px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--muted); margin-bottom:8px; font-family:'IBM Plex Mono',monospace;
}
input[type=text], input[type=password], textarea{
  width:100%; background:rgba(0,0,0,0.2); border:1px solid var(--rule);
  border-radius:10px; padding:13px 14px; color:var(--cream);
  font-family:'Inter',sans-serif; font-size:16px; margin-bottom:16px;
}
textarea{ resize:vertical; min-height:70px; }
input::placeholder, textarea::placeholder{ color:rgba(184,168,143,0.55); }
input:focus-visible, textarea:focus-visible, button:focus-visible{
  outline:2px solid var(--honey); outline-offset:2px;
}

h2.q{ font-family:'Fraunces',serif; font-weight:600; font-size:21px; margin:0 0 6px; line-height:1.3; }
p.q-sub{ color:var(--muted); font-size:13.5px; margin:0 0 18px; }

.options{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
.options-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:8px;
}
.options-grid .opt-btn{ padding:11px 10px; font-size:13.5px; text-align:center; }
.opt-btn{
  text-align:left; background:rgba(0,0,0,0.18); color:var(--cream);
  border:1px solid var(--rule); border-radius:12px; padding:14px 16px;
  font-family:'Inter',sans-serif; font-size:15px; font-weight:500; cursor:pointer;
  transition:border-color 0.15s, background 0.15s, transform 0.1s;
}
.opt-btn:hover{ border-color:var(--amber); background:rgba(201,124,44,0.10); }
.opt-btn:active{ transform:scale(0.99); }
.opt-btn.selected{ border-color:var(--honey); background:rgba(232,163,61,0.16); }

.btn-row{ display:flex; gap:10px; margin-top:20px; }
.btn-primary, .btn-secondary{
  font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
  border-radius:12px; padding:13px 20px; cursor:pointer; border:1px solid transparent;
}
.btn-primary{ background:linear-gradient(180deg, var(--honey), var(--amber)); color:#1c130c; flex:1; }
.btn-primary:disabled{ opacity:0.4; cursor:not-allowed; }
.btn-secondary{ background:transparent; border-color:var(--rule); color:var(--muted); }

.back-link, .switch-link{
  display:block; text-align:center; margin-top:18px; color:var(--muted);
  font-size:13px; text-decoration:none; cursor:pointer; background:none;
  border:none; font-family:'Inter',sans-serif; width:100%;
}
.switch-link{ color:var(--honey); }

.review-row{ padding:10px 0; border-bottom:1px solid var(--rule); }
.review-row:last-of-type{ border-bottom:none; }
.review-q{
  font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--muted); font-family:'IBM Plex Mono',monospace;
}
.review-a{ font-size:15px; margin-top:2px; }

.thankyou{ text-align:center; padding:20px 6px; }
.thankyou .glass-svg{ width:52px; height:76px; margin:0 auto 18px; display:block; }

.err{ color:var(--err); font-size:13px; margin-top:10px; }

/* shared nav across the host-only pages */
.hostnav{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin:0 0 22px;
}
.hostnav a{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.05em;
  color:var(--muted);text-decoration:none;padding:6px 11px;
  border:1px solid var(--rule);border-radius:20px;
}
.hostnav a:hover{border-color:var(--amber);color:var(--cream);}
.hostnav a.here{border-color:var(--honey);color:var(--honey);background:rgba(232,163,61,0.08);}

/* host */
.host-header{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.host-count{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); }
.submission{
  border:1px solid var(--rule); border-radius:14px; padding:16px;
  margin-top:14px; background:rgba(0,0,0,0.15); position:relative;
}
.sub-name{ font-family:'Fraunces',serif; font-size:18px; font-weight:600; margin:0 0 10px; }
.sub-when{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); }
.match-label{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.tag-row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.tag{
  font-family:'IBM Plex Mono',monospace; font-size:11px; padding:4px 9px;
  border-radius:20px; border:1px solid rgba(232,163,61,0.4);
  color:var(--honey); background:rgba(232,163,61,0.08);
}
.tag.dim{ border-color:var(--rule); color:var(--muted); background:transparent; }
.serve-flag{
  font-size:12.5px; color:var(--muted); margin:0 0 10px;
  border:1px solid var(--rule); border-radius:9px; padding:6px 10px; display:inline-block;
}
.serve-flag b{ color:var(--cream); font-weight:600; }
.serve-flag.warn{ border-color:rgba(232,163,61,0.45); background:rgba(232,163,61,0.07); }
.sub-detail{ font-size:13px; color:var(--muted); margin:2px 0; }
.sub-detail b{ color:var(--cream); font-weight:500; }
.sub-notes{ font-size:13.5px; color:var(--muted); font-style:italic; margin-top:8px; }
.del-btn{
  background:none; border:none; color:var(--muted); font-size:12px;
  cursor:pointer; padding:4px; margin-top:10px; font-family:'Inter',sans-serif;
}
.del-btn:hover{ color:var(--err); }
.scores-detail{ margin-top:10px; }
.scores-detail summary{
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted);
  cursor:pointer; letter-spacing:0.04em;
}
.scores-detail summary:hover{ color:var(--honey); }
.scores-list{ margin-top:8px; max-height:220px; overflow-y:auto; }
.score-row{
  display:flex; justify-content:space-between; font-size:12.5px;
  padding:4px 0; border-bottom:1px solid var(--rule); color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
}
.score-row:last-child{ border-bottom:none; }
.score-row.is-match{ color:var(--honey); }
.empty-state{ text-align:center; color:var(--muted); font-size:14px; padding:30px 10px; }
.loading{ text-align:center; color:var(--muted); font-size:13px; padding:20px; }
.caveat{ font-size:11.5px; color:var(--muted); text-align:center; margin-top:16px; line-height:1.5; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}