/* ================= Имаджинариум · веб ================= *
 * Единый «ночной» сюрреалистичный мир: глубокая сливовая ночь,
 * янтарный свет, розовый акцент, тёплый пергамент текста.       */

:root{
  --night:#141020; --night2:#1b1530; --panel:#221a35;
  --surface:#271f3d; --surface2:#2f2648;
  --ink:#f0eadd; --muted:#a89fbb; --faint:#7c7492;
  --amber:#edb45a; --amber-soft:#3a2c17;
  --rose:#e07aa8; --teal:#57c6b6; --danger:#e0698a;
  --line:rgba(240,234,221,.12); --line2:rgba(240,234,221,.22);
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --glow:0 0 0 3px rgba(237,180,90,.25), 0 0 30px rgba(237,180,90,.35);
  --serif:"Iowan Old Style","Palatino Linotype","Palatino","Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--night); color:var(--ink);
  font-family:var(--sans); line-height:1.55; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
#stars{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%, #241a3e 0%, #14101f 55%, #0e0b18 100%);}
#app{position:relative; z-index:1; max-width:1040px; margin:0 auto;
  padding:24px 20px 64px; min-height:100vh;}

/* --------- типографика --------- */
h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:-.01em;
  text-wrap:balance; margin:0;}
.brand{font-family:var(--serif); font-size:clamp(2.6rem,7vw,4rem); line-height:1;
  background:linear-gradient(120deg,#f6e2b8,var(--amber) 55%,var(--rose));
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.eyebrow{font-family:ui-monospace,monospace; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--amber);}
.muted{color:var(--muted)} .faint{color:var(--faint)}

/* --------- кнопки / инпуты --------- */
button{font-family:var(--sans); cursor:pointer; border:none; border-radius:999px;
  padding:13px 24px; font-size:1rem; font-weight:600; transition:.16s;
  background:var(--surface); color:var(--ink);}
button:hover{transform:translateY(-1px)}
button:active{transform:translateY(0)}
button:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn-primary{background:linear-gradient(120deg,#f2c06a,var(--amber)); color:#2a1e08;
  box-shadow:0 6px 20px rgba(237,180,90,.3)}
.btn-ghost{background:transparent; border:1px solid var(--line2); color:var(--ink)}
.btn-rose{background:linear-gradient(120deg,#ec8fba,var(--rose)); color:#3a1226}
.btn-sm{padding:9px 16px; font-size:.9rem}
input{font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--night2); border:1px solid var(--line2); border-radius:12px;
  padding:13px 16px; width:100%; outline:none; transition:.16s;}
input:focus{border-color:var(--amber); box-shadow:0 0 0 3px rgba(237,180,90,.18)}
input::placeholder{color:var(--faint)}
label{display:block; font-size:.82rem; color:var(--muted); margin:0 0 6px 2px}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow);}
.row{display:flex; gap:12px; flex-wrap:wrap}
.hidden{display:none !important}

/* --------- HOME --------- */
#screen-home{max-width:520px; margin:6vh auto 0; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;}
#screen-home .tagline{font-family:var(--serif); font-size:1.2rem; color:var(--ink);
  max-width:34ch; margin:2px auto 4px}
#screen-home .tagline b{color:var(--amber)}
.home-card{width:100%; padding:26px 24px; margin-top:20px; text-align:left;
  display:flex; flex-direction:column; gap:14px;}
.home-card h3{font-size:1.15rem; margin-bottom:2px}
.divider{display:flex; align-items:center; gap:14px; color:var(--faint);
  font-size:.8rem; margin:4px 0}
.divider::before,.divider::after{content:""; height:1px; flex:1; background:var(--line)}

/* --------- LOBBY --------- */
.lobby-head{display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px; flex-wrap:wrap; margin-bottom:18px}
.code-box{display:flex; align-items:center; gap:12px}
.code{font-family:ui-monospace,monospace; font-size:2rem; letter-spacing:.32em;
  color:var(--amber); padding-left:.32em}
.players{display:flex; flex-direction:column; gap:8px; margin:8px 0 20px}
.pill{display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;}
.dot{width:20px; height:20px; border-radius:50%; flex:none; box-shadow:0 0 12px}
.pill .nm{font-weight:600} .pill .tag{margin-left:auto; font-size:.78rem}
.tag-host{color:var(--amber)} .tag-off{color:var(--faint)}
.crown{color:var(--amber)}

/* --------- GAME --------- */
.game-head{display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-bottom:14px}
.phase-title{font-family:var(--serif); font-size:clamp(1.4rem,4vw,2rem)}
.round-chip{font-family:ui-monospace,monospace; font-size:.78rem; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; white-space:nowrap}
.clue-banner{margin:0 0 18px; padding:16px 20px; border-radius:14px;
  background:linear-gradient(120deg,rgba(237,180,90,.14),rgba(224,122,168,.12));
  border:1px solid var(--line2); text-align:center}
.clue-banner .lbl{font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber); font-family:ui-monospace,monospace}
.clue-banner .txt{font-family:var(--serif); font-size:clamp(1.3rem,4vw,1.9rem);
  font-style:italic; margin-top:2px}

/* карты */
.cards{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
.card{position:relative; aspect-ratio:2 / 3; border-radius:14px; overflow:hidden;
  border:2px solid var(--line2); background:var(--surface2); cursor:pointer;
  transition:.18s; box-shadow:0 6px 18px rgba(0,0,0,.35);}
.card img{width:100%; height:100%; object-fit:cover; display:block}
.card:hover{transform:translateY(-4px) scale(1.015); border-color:var(--amber)}
.card.selectable:hover{box-shadow:var(--glow)}
.card.selected{border-color:var(--amber); box-shadow:var(--glow); transform:translateY(-4px)}
.card.disabled{cursor:not-allowed; filter:grayscale(.5) brightness(.6)}
.card.disabled:hover{transform:none; border-color:var(--line2)}
.card .num{position:absolute; top:8px; left:8px; width:30px; height:30px;
  border-radius:50%; background:rgba(12,9,20,.8); color:var(--amber);
  display:grid; place-items:center; font-family:ui-monospace,monospace;
  font-weight:700; font-size:.9rem; border:1px solid var(--amber)}
.card .mine-tag{position:absolute; bottom:0; left:0; right:0; padding:6px;
  background:rgba(12,9,20,.82); color:var(--faint); font-size:.72rem; text-align:center}
.card .owner{position:absolute; bottom:0; left:0; right:0; padding:8px;
  background:linear-gradient(transparent,rgba(10,7,16,.92)); color:var(--ink);
  font-size:.82rem; text-align:center; font-weight:600}
.card.leader-card{border-color:var(--amber); box-shadow:var(--glow)}
.card .crown-badge{position:absolute; top:8px; right:8px; font-size:1.3rem;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.vote-chips{position:absolute; top:6px; right:6px; display:flex; gap:3px; flex-wrap:wrap;
  max-width:60%; justify-content:flex-end}
.vote-chips .vc{width:16px; height:16px; border-radius:50%; box-shadow:0 0 6px}

/* блок выбора ассоциации */
.clue-compose{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.clue-compose input{flex:1; min-width:220px}

/* ожидание */
.waiting{display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:40px 20px; text-align:center}
.moon{width:74px; height:74px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fbefd0, var(--amber) 70%, #c98a2e);
  box-shadow:0 0 40px rgba(237,180,90,.5); animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1); opacity:.85} 50%{transform:scale(1.08); opacity:1}}
.waiting .who{font-size:.9rem; color:var(--muted)}
.dots-wait::after{content:"…"; animation:dots 1.4s steps(4) infinite; }
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* scoreboard */
.scoreboard{margin-top:22px; padding:18px 20px}
.scoreboard h3{font-size:1.05rem; margin-bottom:12px}
.sb-row{display:grid; grid-template-columns:132px 1fr auto; align-items:center;
  gap:12px; padding:7px 0}
.sb-name{display:flex; align-items:center; gap:8px; font-size:.92rem; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sb-track{height:16px; border-radius:8px; background:var(--surface2); overflow:hidden}
.sb-fill{height:100%; border-radius:8px; transition:width .6s cubic-bezier(.2,.7,.3,1)}
.sb-score{font-family:ui-monospace,monospace; font-size:.86rem; color:var(--muted);
  min-width:52px; text-align:right}
.gain{color:var(--teal); font-weight:700; animation:rise .8s ease}
@keyframes rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* reveal / finish */
.reveal-note{text-align:center; font-family:var(--serif); font-size:1.15rem;
  margin:0 0 16px}
.reveal-actions{display:flex; justify-content:center; gap:12px; margin-top:20px}
.countdown{font-family:ui-monospace,monospace; color:var(--faint); font-size:.85rem;
  text-align:center; margin-top:8px}
.winner{text-align:center; padding:30px 20px}
.winner .trophy{font-size:3.4rem}
.winner h2{font-size:2rem; margin:8px 0 4px}
.winner .who{color:var(--amber); font-family:var(--serif); font-size:1.6rem}

/* toast */
#toasts{position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:50; display:flex; flex-direction:column; gap:8px; align-items:center}
.toast{background:var(--surface); border:1px solid var(--line2); color:var(--ink);
  padding:11px 18px; border-radius:999px; box-shadow:var(--shadow);
  animation:rise .3s ease; font-size:.9rem}

@media(max-width:560px){
  .cards{grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px}
  .sb-row{grid-template-columns:104px 1fr auto}
  .code{font-size:1.5rem}
}

/* --------- ссылка на правила на главной --------- */
.home-links{margin-top:16px}
.btn-link{background:transparent; color:var(--amber); padding:8px 12px; font-weight:600;
  border-radius:999px; border:1px solid transparent}
.btn-link:hover{background:var(--amber-soft); border-color:var(--line2)}

/* --------- ПРАВИЛА --------- */
#screen-rules{max-width:640px; margin:5vh auto 0; display:flex;
  flex-direction:column; align-items:center; text-align:center; gap:8px}
.brand-sm{font-size:clamp(2rem,6vw,3rem)}
#screen-rules .tagline{font-family:var(--serif); font-size:1.12rem; max-width:40ch; color:var(--ink)}
#screen-rules .tagline b{color:var(--rose)}
.rules-flow{width:100%; display:flex; flex-direction:column; gap:12px; margin:18px 0 6px}
.rule-step{display:flex; gap:14px; align-items:flex-start; text-align:left;
  background:linear-gradient(120deg,var(--surface),var(--surface2));
  border:1px solid var(--line); border-radius:var(--r); padding:15px 18px;
  box-shadow:var(--shadow)}
.rule-step .rn{flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--serif); font-weight:700;
  color:#2a1e08; background:linear-gradient(135deg,#f6e2b8,var(--amber));
  box-shadow:0 0 16px rgba(237,180,90,.4)}
.rule-step b{color:var(--amber)}
.rules-score{width:100%; text-align:left; padding:20px 22px; margin-top:6px;
  background:linear-gradient(160deg,#2a2140,#231a37)}
.rules-score h3{font-size:1.2rem; margin-bottom:10px; color:var(--teal)}
.rules-score ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:9px}
.rules-score li{color:var(--ink)} .rules-score li b{color:var(--amber)}
.pts{display:inline-block; font-weight:700; color:#2a1e08; font-size:.85rem;
  background:linear-gradient(120deg,#f2c06a,var(--amber)); padding:1px 9px; border-radius:999px}
.rules-secret{margin:14px 0 0; padding:13px 16px; border-radius:12px;
  background:rgba(224,122,168,.12); border:1px solid rgba(224,122,168,.35); color:var(--ink)}
.rules-secret b{color:var(--rose)}
#screen-rules .reveal-actions{margin-top:20px}

/* --------- ОТКРЫТЫЕ СТОЛЫ --------- */
.open-tables{width:100%; margin-top:14px; padding:14px 16px; text-align:left;
  background:linear-gradient(160deg,#2a2140,#221a37)}
.ot-head{font-family:var(--serif); font-size:.98rem; color:var(--amber); margin-bottom:8px}
.ot-row{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 4px; border-top:1px solid var(--line)}
.ot-row:first-of-type{border-top:none}
.ot-info{display:flex; align-items:center; gap:7px; min-width:0}
.ot-info b{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ot-dot{font-size:1rem}

/* --------- РЕЙТИНГ --------- */
#screen-board{max-width:640px; margin:5vh auto 0; display:flex;
  flex-direction:column; align-items:center; text-align:center; gap:10px}
.board-controls{width:100%; display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; margin:6px 0 4px}
.seg{display:inline-flex; background:var(--night2); border:1px solid var(--line);
  border-radius:999px; padding:4px; gap:2px}
.seg button{background:transparent; color:var(--muted); border-radius:999px;
  padding:8px 14px; font-size:.86rem; font-weight:600}
.seg button:hover{color:var(--ink); transform:none}
.seg button.on{background:linear-gradient(120deg,#f2c06a,var(--amber)); color:#2a1e08;
  box-shadow:0 3px 12px rgba(237,180,90,.28)}
.board-list{width:100%; display:flex; flex-direction:column; gap:8px; margin-top:4px}
.board-empty{padding:34px 16px; color:var(--muted); font-family:var(--serif);
  font-size:1.05rem}
.brow{display:grid; grid-template-columns:46px 1fr auto; align-items:center;
  gap:10px 12px; text-align:left; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; padding:12px 16px}
.brow .bpos{font-size:1.4rem; text-align:center}
.brow .bpos .rk{font-family:var(--serif); font-weight:700; color:var(--muted); font-size:1.05rem}
.brow .bname{font-family:var(--serif); font-size:1.08rem; color:var(--ink);
  font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.brow .bstat{grid-column:2; font-size:.76rem; color:var(--faint)}
.brow .bmain{grid-row:1 / span 2; grid-column:3; text-align:right;
  font-family:var(--serif); color:var(--amber); line-height:1}
.brow .bmain b{font-size:1.5rem}
.brow .bmain .u{display:block; font-size:.66rem; color:var(--faint); font-family:var(--sans)}
.brow.me{border-color:var(--amber); box-shadow:var(--glow);
  background:linear-gradient(120deg,#2a2140,#241b39)}
.brow.me .bname{color:var(--amber)}
.brow.ghost{opacity:.7}
.board-me{width:100%; margin-top:2px}
.board-me .brow{margin-top:6px}
#screen-board .reveal-actions{margin-top:18px}

/* --------- ВОРОТА (только подписчик) --------- */
#screen-gate{max-width:460px; margin:10vh auto 0}
.gate-card{padding:34px 28px; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:14px; background:linear-gradient(165deg,#2a2140,#201830)}
.gate-emoji{font-size:3.4rem; filter:drop-shadow(0 0 18px rgba(237,180,90,.5))}
.gate-card .tagline{font-family:var(--serif); font-size:1.1rem; color:var(--ink); max-width:32ch}
a.btn-primary{text-decoration:none; display:inline-block}