:root {
  color-scheme: dark;
  --bg:#08090d;
  --bg-soft:#0e1017;
  --panel:#141620;
  --panel2:#1a1c28;
  --panel3:#202332;
  --text:#f2eee5;
  --muted:#aaa49a;
  --line:#34303a;
  --line-gold:#5b4a2e;
  --accent:#c9a35f;
  --accent-bright:#e0bf7b;
  --danger:#8f3f4c;
  --danger-bright:#b85564;
  --ok:#6f9b7a;
  --shadow:rgba(0,0,0,.42);
}

* { box-sizing:border-box; }

html { min-height:100%; background:var(--bg); }

body {
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 50% -8rem,rgba(91,65,105,.22),transparent 32rem),
    radial-gradient(circle at 92% 18%,rgba(112,77,52,.12),transparent 28rem),
    linear-gradient(180deg,#0c0d13 0,var(--bg) 58%);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.34;
  background:
    linear-gradient(112deg,transparent 0 18%,rgba(201,163,95,.07) 18.08% 18.18%,transparent 18.26% 100%),
    linear-gradient(68deg,transparent 0 72%,rgba(143,63,76,.07) 72.08% 72.18%,transparent 72.26% 100%),
    repeating-linear-gradient(90deg,transparent 0 9rem,rgba(255,255,255,.012) 9rem 9.05rem);
}

.shell {
  width:min(780px,calc(100% - 32px));
  margin:0 auto;
  padding:28px 0 48px;
  position:relative;
  z-index:1;
}

.site-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:54px;
  padding-bottom:15px;
  border-bottom:1px solid rgba(201,163,95,.18);
}

.brand {
  color:var(--text);
  text-decoration:none;
  display:inline-flex;
  flex-direction:column;
  gap:1px;
}

.brand-name {
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.07em;
}

.fate-mark {
  color:#6f6253;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.76rem;
  letter-spacing:.18em;
  padding-top:5px;
}

.hero { margin-bottom:25px; }
.hero h1 {
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.15rem,7vw,4.15rem);
  font-weight:600;
  letter-spacing:-.025em;
  line-height:.98;
  margin:.28rem 0 1rem;
  text-wrap:balance;
}
.hero p { color:var(--muted); font-size:1.05rem; line-height:1.62; }

.fate-hero { position:relative; padding-top:4px; }
.fate-hero::after {
  content:"";
  display:block;
  width:min(270px,55%);
  height:1px;
  margin-top:24px;
  background:linear-gradient(90deg,var(--accent),rgba(201,163,95,0));
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem!important;
  color:var(--accent)!important;
  font-weight:800;
}

.card {
  background:linear-gradient(180deg,rgba(28,30,43,.96),rgba(18,20,29,.97));
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  margin:14px 0;
  box-shadow:0 20px 55px var(--shadow),inset 0 1px rgba(255,255,255,.02);
  position:relative;
}

.card::before {
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,163,95,.16),transparent);
}

.card h2 {
  margin-top:0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:600;
}

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wide { grid-column:1/-1; }

label { display:flex; flex-direction:column; gap:7px; font-weight:650; }

input,textarea {
  width:100%;
  border:1px solid var(--line);
  background:#0d0f16;
  color:var(--text);
  border-radius:10px;
  padding:12px 13px;
  font:inherit;
}
textarea { resize:vertical; }
input:focus,textarea:focus {
  outline:2px solid rgba(201,163,95,.24);
  border-color:var(--accent);
}

button,.button-link {
  border:1px solid transparent;
  border-radius:10px;
  padding:12px 16px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
}
button:hover,.button-link:hover { transform:translateY(-1px); }
button:focus-visible,.button-link:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }

.primary {
  background:linear-gradient(180deg,var(--accent-bright),var(--accent));
  color:#17120a;
  border-color:#d2ad67;
}

.danger {
  background:linear-gradient(180deg,var(--danger-bright),var(--danger));
  color:white;
  border-color:#a84b59;
}
.danger:disabled { opacity:.38; cursor:not-allowed; transform:none; }
.compact { padding:8px 12px; font-size:.86rem; }

.copyrow { display:flex; gap:8px; }
.copyrow input { min-width:0; }
.copyrow button { background:#282a37; border-color:#3b3b49; color:var(--text); }

.flash {
  padding:12px 14px;
  margin-bottom:14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(16,17,24,.88);
}
.flash.error { border-color:var(--danger-bright); }
.flash.success { border-color:var(--ok); }

.warning { color:#d8b572; }
.muted { color:var(--muted); font-weight:400; }

.facts { display:flex; gap:10px; flex-wrap:wrap; }
.facts span,.badge {
  background:#1e202b;
  border:1px solid var(--line);
  padding:7px 10px;
  border-radius:999px;
}
.badge { color:#d8c7a7; font-size:.88rem; white-space:nowrap; }

.rules,.wishlist {
  white-space:pre-wrap;
  background:#0d0f16;
  border:1px solid var(--line);
  padding:14px;
  border-radius:11px;
  margin-top:16px;
}

.row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.row h2 { margin-bottom:0; }

.participants {
  list-style:none;
  counter-reset:participant;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px;
  margin:18px 0 0;
  padding:0;
}

.participant-row {
  counter-increment:participant;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px 10px 12px;
  border:1px solid #2f303b;
  border-radius:11px;
  background:rgba(11,12,18,.48);
}

.participant-name {
  min-width:0;
  overflow-wrap:anywhere;
  font-weight:650;
}
.participant-name::before {
  content:counter(participant) ". ";
  color:var(--accent);
  font-weight:700;
}

.participant-remove { flex:0 0 auto; margin:0; }
.participant-remove button { white-space:nowrap; }

.important { border-color:var(--line-gold); }
.success-panel { border-color:#45634d; }
.danger-zone { border-color:#4e2d35; margin-top:28px; }

.reveal {
  text-align:center;
  padding:40px 24px;
  border-color:var(--line-gold);
}
.reveal h2 {
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.35rem,9vw,4.8rem);
  font-weight:600;
  margin:.3rem 0 1.5rem;
}
.reveal .wishlist,.reveal .rules { text-align:left; }

footer {
  margin-top:42px;
  padding-top:20px;
  border-top:1px solid rgba(201,163,95,.12);
  color:#77736d;
  text-align:center;
  font-size:.82rem;
  display:flex;
  flex-direction:column;
  gap:7px;
}
footer .fates {
  color:#94856f;
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:.08em;
}

@media (max-width:620px) {
  .shell { width:min(100% - 22px,780px); padding-top:20px; }
  .site-header { margin-bottom:38px; }
  .form-grid { grid-template-columns:1fr; }
  .wide { grid-column:1; }
  .copyrow { flex-direction:column; }
  .participants { grid-template-columns:1fr; }
  .participant-row { padding:10px; }
  .row { align-items:flex-start; }
  .badge { white-space:normal; text-align:right; }
}