/* Мафия на масата: денем мъгла и мастило, нощем небе и свещ. Единственото украшение е шевицата на картата. */
/* Sofia Sans (Lettersoup, OFL): шрифтовете са в fonts/; един променлив файл на подмножество */
@font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 1 1000; font-display: swap;
  src: url(fonts/sofia-sans-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 1 1000; font-display: swap;
  src: url(fonts/sofia-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sofia Sans Extra Condensed"; font-style: normal; font-weight: 1 1000; font-display: swap;
  src: url(fonts/sofia-sans-extra-condensed-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Sofia Sans Extra Condensed"; font-style: normal; font-weight: 1 1000; font-display: swap;
  src: url(fonts/sofia-sans-extra-condensed-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --indigo: #1d2340;
  --candle: #e3a64b;
  --mist: #cfcbe3;
  --fog: #dce4e8;
  --wine: #8e2c3e;
  --paper: #f2eee6;

  --bg: var(--fog);
  --fg: var(--indigo);
  --accent: var(--wine);
  --on-accent: #ffffff;
  --muted: #586078;
  --line: #b6c1c8;
  --tile: #eef2f4;

  --display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --body: "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

body[data-phase="night"] {
  --bg: var(--indigo);
  --fg: var(--mist);
  --accent: var(--candle);
  --on-accent: var(--indigo);
  --muted: #8f8cab;
  --line: #353c63;
  --tile: #262d52;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.0625rem/1.45 var(--body);
  transition: background-color 0.6s ease, color 0.6s ease;
}
main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 16px calc(6rem + env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
h1, h2, h3, .phase, .room-code, .ask, .eyebrow {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}
h1, h2, .phase, .room-code, .ask { font-weight: 800; }
h2 { font-size: 1.5rem; margin: 1.75rem 0 0.75rem; }
h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--muted); }
p { margin: 0.5rem 0; }

button, input, select { font: inherit; color: inherit; }
button {
  cursor: pointer;
  border: 1.5px solid var(--line);
  background: transparent;
  border-radius: 12px;
  padding: 0.65rem 1rem;
  min-height: 2.75rem;
}
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
button.big { width: 100%; margin-top: 1.5rem; padding: 1rem; font-size: 1.15rem; }
button.ghost { border-style: dashed; }
button.tiny { min-height: 2.25rem; padding: 0.25rem 0.7rem; border-radius: 9px; }
button.on { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
input, select {
  width: 100%;
  border: 1.5px solid var(--line);
  background: var(--tile);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  margin-top: 0.3rem;
}
label { display: block; margin: 0.9rem 0; font-weight: 600; }
label.switch { display: flex; gap: 0.6rem; align-items: center; font-weight: 400; }
label.switch input { width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--accent); }
.row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.row > * { flex: 1 1 8rem; }

/* горната лента: стая, фаза, време */
.bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: calc(0.75rem + env(safe-area-inset-top)) 0 0.75rem;
  background: var(--bg);
  border-bottom: 1.5px solid var(--line);
}
.bar .code { font-family: var(--display); font-weight: 700; letter-spacing: 0.2em; color: var(--muted); }
.bar .phase { font-size: 1.6rem; }
.bar .clock { font-family: var(--display); font-weight: 800; font-size: 2rem; font-variant-numeric: tabular-nums; }
.bar .clock.urgent { color: var(--accent); }
.bar .langs { display: flex; gap: 0.25rem; align-self: center; grid-column: 4; }
.bar .langs button { min-height: 2rem; padding: 0.1rem 0.5rem; font-size: 0.85rem; }

.notice { display: block; width: 100%; margin: 0.75rem 0; text-align: left; border-color: var(--accent); }
/* в играта съобщението плава под лентата: така не измества плочките под пръста */
.bar + .notice {
  position: fixed;
  left: 16px;
  right: 16px;
  top: calc(4.5rem + env(safe-area-inset-top));
  z-index: 2;  /* над лентата, под задържаната карта */
  width: auto;
  max-width: 32rem;
  margin: 0 auto;
  background: var(--bg);
}

/* начало */
.home { padding-top: 12vh; }
.brand { font-size: clamp(3.5rem, 18vw, 6rem); margin: 0; }
.band { position: relative; height: 1.6rem; margin: 0.75rem 0 1.25rem; background: var(--wine); border-radius: 6px; overflow: hidden; }
.lede { color: var(--muted); max-width: 26rem; }
.lang { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.lang button { min-width: 3.5rem; flex: 0 0 auto; }

/* лоби */
.code-block { text-align: center; padding: 1.25rem 0 0.5rem; }
.eyebrow { font-weight: 700; letter-spacing: 0.15em; color: var(--muted); margin: 0; }
.room-code { font-size: clamp(4rem, 26vw, 6.5rem); letter-spacing: 0.12em; margin: 0.25rem 0 0.75rem; }
.qr { width: min(15rem, 70vw); margin: 0 auto; }
.qr svg { display: block; width: 100%; height: auto; }
.qr .qr-bg { fill: #ffffff; }
.qr .qr-ink { fill: var(--indigo); }
.room-link { font-size: 0.9rem; color: var(--muted); word-break: break-all; }
.people { list-style: none; margin: 0; padding: 0; }
.people li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.people .name { font-weight: 600; }
.people .tags { flex: 1; color: var(--muted); font-size: 0.9rem; }
.people .role-tag { font-size: 0.9rem; }
.people li.dead .name { text-decoration: line-through; color: var(--muted); }
.summary { margin: 1rem 0; padding: 0.9rem 1rem; background: var(--tile); border-radius: 12px; }
.waiting, .ghost-note { color: var(--muted); font-style: italic; }
.chips { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; gap: 0.5rem; }
.chip {
  display: grid;
  grid-template-columns: 1fr auto 1.75rem auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.35rem 0.5rem 0.35rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
}
.chip.on { border-color: var(--accent); }
.chip b { text-align: center; font-variant-numeric: tabular-nums; }

/* нощ и ден: действието */
.action { margin-top: 1.25rem; }
.ask { font-size: clamp(2rem, 10vw, 2.75rem); margin: 0 0 0.25rem; }
.hint { min-height: 1.45em; color: var(--muted); margin: 0 0 0.75rem; }
.tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.tile {
  width: 100%;
  min-width: 0;
  min-height: 3.5rem;
  display: grid;
  gap: 0.3rem;
  align-content: center;
  overflow-wrap: anywhere;
  background: var(--tile);
  border-color: transparent;
  text-align: left;
  font-weight: 600;
}
.tile.picked { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.tile progress { width: 100%; height: 0.4rem; accent-color: var(--accent); }
.tile .count { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tile .voters {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  min-height: 1.2em;  /* празен или пълен, редът е еднакво висок: плочките не мърдат */
  min-width: 0;
}
.hostbar { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.hostbar > * { flex: 1; }
.voice-hint { margin: 0.75rem 0; padding: 0.75rem 1rem; border: 1.5px solid var(--accent); border-radius: 12px; }
.voice-hint p { margin: 0.25rem 0; }

/* лентите */
.feed { margin-top: 1.75rem; }
.feed ol { list-style: none; padding: 0; margin: 0; }
.feed li { padding: 0.5rem 0; border-top: 1px solid var(--line); }
.feed li i { color: var(--muted); }
.feed.private li { border-color: var(--accent); }
.roster { margin-top: 1.75rem; }
.front .feed { margin-top: 1rem; }
.front .feed li { border-color: var(--wine); }

/* край */
.end { padding-top: 1rem; }
.result { font-size: 1.35rem; margin: 0.5rem 0 1rem; }

/* картата с ролята: шевица отзад, лице при задържане */
/* без маркиране и меню по цялата карта: при задържане лицето е под пръста и маркирането би скрило картата */
.role-card { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.strip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  min-height: calc(4rem + env(safe-area-inset-bottom));
  padding: 0 0 env(safe-area-inset-bottom);
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--wine);
  color: var(--paper);
  overflow: hidden;
  touch-action: none;
}
.strip span { position: relative; font-weight: 700; background: var(--wine); padding: 0.2rem 0.7rem; border-radius: 8px; }
.stitch { position: absolute; inset: 0; width: 100%; height: 100%; }
.stitch .x { fill: none; stroke: var(--candle); stroke-width: 0.28; stroke-linecap: round; opacity: 0.85; }
.reveal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 12, 26, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.front {
  width: min(22rem, 86vw);
  min-height: min(30rem, 70vh);
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.5rem;
  background: var(--paper);
  color: var(--indigo);
  border: 0.6rem solid var(--wine);
  border-radius: 20px;
  transform: perspective(60rem) rotateY(-90deg);
  transition: transform 0.28s ease;
}
.role-card.shown .reveal { opacity: 1; pointer-events: auto; }  /* картата се превърта и не пуска докосвания към плочките */
.front h3, .front .feed li i { color: #586078; }  /* на хартията и нощем */
.role-card.shown .front { transform: none; }
.role-title { font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; text-transform: uppercase; margin: 0 0 1rem; }
.role-text { margin: 0 0 1rem; }
.team { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  body, .reveal, .front { transition: none; }
  .front { transform: none; }
}

/* „Privacy Policy“ под началния екран и самата страница */
.legal { margin-top: 2rem; font-size: 0.9rem; }
.legal a { color: var(--muted); }
.legal-page { padding-top: calc(2rem + env(safe-area-inset-top)); }
.legal-page section + section { margin-top: 3rem; padding-top: 2rem; border-top: 1.5px solid var(--line); }
.legal-page h1 { font-size: clamp(2.2rem, 10vw, 3rem); margin: 0 0 0.5rem; }
.legal-page h2 { font-size: 1.25rem; margin: 1.5rem 0 0.25rem; }