:root {
  color-scheme: dark;
  --ink: #f6eddc;
  --muted: #b9ad9f;
  --night: #17131e;
  --panel: rgba(38, 30, 47, .88);
  --panel-strong: #30263a;
  --gold: #e0ad64;
  --gold-light: #ffd998;
  --wine: #833e57;
  --sage: #8eae91;
  --danger: #e07b7b;
  --line: rgba(255, 225, 183, .14);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top, #34253b 0, transparent 48%),
    linear-gradient(145deg, #15111c, #211725 55%, #121018);
  overflow-x: hidden;
}

.ambient { position: fixed; border-radius: 50%; filter: blur(70px); opacity: .18; pointer-events: none; }
.ambient-one { width: 22rem; height: 22rem; background: #c7814e; right: -8rem; top: 18%; }
.ambient-two { width: 18rem; height: 18rem; background: #713d6c; left: -7rem; bottom: 4%; }
.shell { width: min(100% - 2rem, 760px); margin: 0 auto; padding: 2rem 0 4rem; position: relative; }
.brand { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; }
.brand-mark { display: grid; place-items: center; width: 3rem; height: 3rem; color: var(--gold-light); border: 1px solid var(--gold); border-radius: 50%; box-shadow: 0 0 28px rgba(224,173,100,.25); }
.brand h1 { font-family: Georgia, serif; font-weight: 500; letter-spacing: .03em; margin: .1rem 0 0; font-size: clamp(2rem, 8vw, 3.4rem); }
.eyebrow, .kicker { margin: 0; color: var(--gold); text-transform: uppercase; letter-spacing: .19em; font-size: .72rem; font-weight: 700; }
.connection { min-height: 1.4rem; color: var(--muted); font-size: .85rem; text-align: right; }
.connection.live { color: var(--sage); }
.connection.lost { color: var(--danger); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 1.4rem; padding: clamp(1.2rem, 4vw, 2rem); box-shadow: 0 20px 60px rgba(0,0,0,.27); backdrop-filter: blur(18px); }
.card + .card { margin-top: 1rem; }
.hero { padding-block: clamp(1.8rem, 6vw, 3rem); }
h2, h3 { font-family: Georgia, serif; font-weight: 500; }
h2 { font-size: clamp(1.6rem, 6vw, 2.35rem); margin: .4rem 0 .75rem; }
h3 { margin: 0 0 .8rem; }
p { line-height: 1.6; }
.lead { color: var(--muted); max-width: 52ch; }
.stack, .form-row { display: grid; gap: .8rem; }
.form-row { grid-template-columns: 1fr auto; }
label { display: grid; gap: .4rem; color: var(--muted); font-size: .88rem; }
input { width: 100%; min-width: 0; padding: .9rem 1rem; color: var(--ink); background: rgba(14,11,18,.55); border: 1px solid var(--line); border-radius: .75rem; font: inherit; outline: none; }
input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224,173,100,.12); }
button { border: 0; border-radius: .75rem; padding: .88rem 1.1rem; font: inherit; font-weight: 750; cursor: pointer; transition: transform .15s, opacity .15s, background .15s; }
button:hover { transform: translateY(-1px); }
button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.primary { color: #21171a; background: linear-gradient(135deg, var(--gold-light), var(--gold)); }
.secondary { color: var(--ink); background: var(--panel-strong); border: 1px solid var(--line); }
.ghost { color: var(--gold-light); background: transparent; border: 1px solid rgba(224,173,100,.35); }
.danger { color: #fff0f0; background: #743846; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.divider { display: flex; align-items: center; gap: .7rem; margin: 1.2rem 0; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.room-code { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1rem; }
.room-code strong { font-family: ui-monospace, monospace; font-size: 1.45rem; letter-spacing: .16em; color: var(--gold-light); }
.players { display: grid; gap: .55rem; list-style: none; padding: 0; margin: 0; }
.player { display: flex; align-items: center; gap: .7rem; padding: .72rem .8rem; border-radius: .8rem; background: rgba(17,13,21,.38); }
.player.current { outline: 1px solid var(--gold); background: rgba(224,173,100,.1); }
.player-name { flex: 1; }
.dot { width: .55rem; height: .55rem; border-radius: 50%; background: #665f68; }
.dot.online { background: var(--sage); box-shadow: 0 0 10px rgba(142,174,145,.55); }
.tag { font-size: .72rem; color: var(--muted); padding: .25rem .5rem; background: rgba(255,255,255,.05); border-radius: 999px; }
.tag.ready { color: #c9e2c9; }
.progress { height: .45rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); margin: 1rem 0; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--wine), var(--gold)); }
.secret { text-align: center; padding: 2rem 1rem; border: 1px solid rgba(224,173,100,.25); border-radius: 1rem; background: radial-gradient(circle, rgba(224,173,100,.13), transparent 70%); }
.secret-word { font-family: Georgia, serif; font-size: clamp(2rem, 10vw, 4rem); color: var(--gold-light); margin: .5rem 0; }
.warning { color: #f0b0b0; }
.clues { display: grid; gap: .6rem; margin-top: 1rem; }
.clue { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: .72rem; border-left: 2px solid var(--wine); background: rgba(16,12,20,.34); }
.clue-round { color: var(--gold); font-size: .74rem; font-weight: 800; text-transform: uppercase; }
.vote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: .7rem; margin-top: 1rem; }
.vote-button { min-height: 3.4rem; color: var(--ink); background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.vote-button.selected { border-color: var(--gold); background: rgba(224,173,100,.16); }
.result { text-align: center; }
.result-symbol { font-size: 3rem; color: var(--gold); }
.muted { color: var(--muted); }
.toast { position: fixed; right: 1rem; bottom: 1rem; max-width: min(24rem, calc(100vw - 2rem)); padding: .9rem 1rem; color: #fff3f3; background: #6d3341; border: 1px solid rgba(255,255,255,.15); border-radius: .8rem; box-shadow: 0 10px 30px rgba(0,0,0,.3); transform: translateY(130%); transition: transform .25s; }
.toast.show { transform: translateY(0); }
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1.5rem; }
.rule { padding: .8rem; border-radius: .75rem; background: rgba(255,255,255,.035); color: var(--muted); font-size: .85rem; }
.rule strong { display: block; color: var(--gold-light); margin-bottom: .25rem; }
@media (max-width: 560px) {
  .shell { width: min(100% - 1.2rem, 760px); padding-top: 1rem; }
  .form-row { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
  .room-code { align-items: flex-start; }
  .connection { margin-top: -.7rem; }
}