/* ============================================================================
   מי השקרן?  —  mobile-first, flat & tactile. Plum + marigold, chunky cards.
   Rebuilt from scratch. RTL Hebrew. Works on a phone first, TV second.
   ========================================================================== */
:root {
  --bg: #1b1226;
  --bg-2: #22182f;
  --surface: #2b1f3b;
  --surface-2: #35284a;
  --line: #46345e;
  --line-2: #5a4574;
  --ink: #f6efe8;
  --muted: #b3a3c6;
  --amber: #ffc24d;      /* primary */
  --amber-d: #f2a92e;
  --coral: #ff5d6c;      /* liar / danger */
  --mint: #46e0ac;       /* civilian / truth / win */
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --shadow: 0 18px 40px -18px rgba(0,0,0,.7);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: 'Heebo', system-ui, sans-serif; color: var(--ink); background: var(--bg);
  overflow-x: hidden; -webkit-font-smoothing: antialiased; font-weight: 500; line-height: 1.5;
  background-image: radial-gradient(140% 60% at 50% -10%, #2a1a3a 0%, var(--bg) 55%);
  background-attachment: fixed;
}
#app { min-height: 100%; }
h1, h2, h3, .display { font-family: 'Secular One', 'Heebo', sans-serif; font-weight: 400; }
button, input { font-family: inherit; }
.mono { font-variant-numeric: tabular-nums; }
.ic { display: inline-block; vertical-align: -.15em; }

/* ---- Layout --------------------------------------------------------------- */
.screen { min-height: 100dvh; width: 100%; max-width: 560px; margin: 0 auto; padding: calc(20px + var(--safe-t)) 18px calc(20px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; animation: rise .35s var(--ease) both; }
.center { align-items: center; justify-content: center; text-align: center; }
.grow { flex: 1 1 auto; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop { from { opacity: 0; transform: scale(.9); } }
.stack { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.row { display: flex; gap: 10px; align-items: center; }
.spread { justify-content: space-between; }

/* ---- Type ----------------------------------------------------------------- */
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--amber); text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; }
.title { font-family: 'Secular One'; font-size: clamp(30px, 8vw, 40px); line-height: 1.05; }
h2.title { font-size: clamp(24px, 6vw, 32px); }
.sub { color: var(--muted); font-size: 15px; line-height: 1.55; }
.muted { color: var(--muted); }
.tiny { font-size: 12.5px; }

/* ---- Buttons -------------------------------------------------------------- */
.btn { appearance: none; cursor: pointer; border: none; border-radius: var(--r); font-weight: 800; font-size: 16px; padding: 15px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: transform .1s var(--ease), filter .15s; color: var(--ink); background: var(--surface-2); border: 1.5px solid var(--line-2); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-lg { padding: 17px 22px; font-size: 17px; }
.btn-primary { background: var(--amber); color: #35230a; border-color: transparent; }
.btn-primary:hover { filter: brightness(1.04); }
.btn-danger { background: var(--coral); color: #350a11; border-color: transparent; }
.btn-mint { background: var(--mint); color: #062617; border-color: transparent; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.btn-xl { font-size: 18px; padding: 20px; border-radius: var(--r-lg); }

/* ---- Brand / logo --------------------------------------------------------- */
.brandmark { display: grid; place-items: center; }
.brandmark svg { display: block; filter: drop-shadow(0 10px 22px rgba(255,93,108,.28)); }
.wordmark { font-family: 'Secular One'; font-size: clamp(34px, 10vw, 48px); line-height: 1; }
.wordmark .q { color: var(--amber); }

/* ---- Cards ---------------------------------------------------------------- */
.card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow); }
.tap-card { cursor: pointer; text-align: right; display: flex; gap: 14px; align-items: center; transition: border-color .15s, transform .1s var(--ease); }
.tap-card:active { transform: scale(.99); }
.tap-card:hover { border-color: var(--line-2); }
.tap-ic { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--amber); border: 1.5px solid var(--line); }
.tap-card.primary .tap-ic { background: var(--amber); color: #35230a; border-color: transparent; }
.tap-t { font-family: 'Secular One'; font-size: 19px; }
.tap-d { color: var(--muted); font-size: 13px; margin-top: 3px; line-height: 1.4; }
.tap-card .chev { margin-inline-start: auto; color: var(--muted); flex: none; }

/* ---- Inputs / stepper ----------------------------------------------------- */
.input { width: 100%; background: var(--bg-2); border: 1.5px solid var(--line-2); color: var(--ink); border-radius: 14px; padding: 15px 16px; font-size: 17px; font-weight: 600; outline: none; transition: border-color .15s, box-shadow .15s; }
.input::placeholder { color: var(--muted); }
.input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,194,77,.18); }
.input.center { text-align: center; }
.code-input { letter-spacing: .45em; text-transform: uppercase; font-weight: 800; font-size: 30px; font-family: 'Secular One'; padding-inline-start: .45em; }
.err { color: var(--coral); font-size: 13.5px; font-weight: 700; min-height: 17px; text-align: center; }
.field-label { font-weight: 700; font-size: 13.5px; color: var(--muted); }

.stepper { display: flex; align-items: center; justify-content: center; gap: 18px; }
.stepper button { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 26px; font-weight: 800; cursor: pointer; display: grid; place-items: center; }
.stepper button:active { transform: scale(.94); }
.stepper .val { font-family: 'Secular One'; font-size: 46px; min-width: 66px; text-align: center; }
.name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.name-grid .input { padding: 12px 14px; font-size: 15px; text-align: center; }

/* ---- Avatars / chips ------------------------------------------------------ */
.av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #1a0410; font-weight: 900; font-size: 14px; flex: none; }
.av-lg { width: 46px; height: 46px; font-size: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 14px 7px 7px; font-weight: 700; font-size: 14px; animation: pop .25s var(--ease) both; }

/* ---- Section head --------------------------------------------------------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.topbar .brand-sm { display: inline-flex; align-items: center; gap: 8px; font-family: 'Secular One'; font-size: 18px; }
.badge { font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.badge b { color: var(--amber); }
.round-tag { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }

/* ---- Pass-and-play / reveal (solo) ---------------------------------------- */
.pass { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; }
.pass .to { font-family: 'Secular One'; font-size: clamp(30px, 9vw, 44px); }
.pass .to b { color: var(--amber); }
.big-av { width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center; font-family: 'Secular One'; font-size: 44px; color: #1a0410; box-shadow: var(--shadow); }
.reveal { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; border-radius: var(--r-xl); padding: 30px 22px; border: 2px solid; box-shadow: var(--shadow); }
.reveal.civ { background: linear-gradient(180deg, #123a2f, #0e2b23); border-color: var(--mint); }
.reveal.liar { background: linear-gradient(180deg, #3d1622, #2c0f19); border-color: var(--coral); }
.reveal .role-label { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
.reveal.civ .role-label { color: var(--mint); }
.reveal.liar .role-label { color: var(--coral); }
.reveal .word { font-family: 'Secular One'; font-size: clamp(40px, 12vw, 60px); line-height: 1.05; }
.reveal .cat { font-size: 16px; color: var(--muted); }
.reveal .cat b { color: var(--amber); }
.reveal .note { font-size: 14px; color: var(--muted); line-height: 1.55; margin-top: 6px; max-width: 30ch; }
.reveal.liar .note { color: #f4c6cd; }

.order-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.order-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; font-weight: 700; }
.order-row .num { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 13px; color: var(--muted); flex: none; }

/* ---- Vote list ------------------------------------------------------------ */
.vote-list { display: flex; flex-direction: column; gap: 10px; }
.vote-btn { width: 100%; text-align: right; background: var(--surface); border: 1.5px solid var(--line-2); color: var(--ink); border-radius: 15px; padding: 15px 16px; font-size: 17px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: border-color .15s, transform .1s var(--ease); }
.vote-btn:active { transform: scale(.98); }
.vote-btn.sel { border-color: var(--amber); background: var(--surface-2); }
.vote-btn.sel::after { content: '✓'; margin-inline-start: auto; color: var(--amber); font-weight: 900; }

/* ---- Verdict / result ----------------------------------------------------- */
.verdict { font-family: 'Secular One'; font-size: clamp(30px, 9vw, 46px); text-align: center; }
.verdict.caught { color: var(--mint); }
.verdict.escaped { color: var(--coral); }
.liar-name { font-family: 'Secular One'; font-size: clamp(30px, 10vw, 52px); text-align: center; color: var(--coral); }
.reveal-word { font-family: 'Secular One'; color: var(--amber); }
.result-badge { width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%; margin: 0 auto; animation: pop .45s var(--ease) both; }
.result-badge.win { background: var(--mint); color: #062617; }
.result-badge.lose { background: var(--coral); color: #350a11; }

/* ---- Mode select ---------------------------------------------------------- */
.modes { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
.soon { font-size: 11px; font-weight: 800; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; margin-inline-start: 6px; vertical-align: middle; }

/* ---- Pulse / wait --------------------------------------------------------- */
.pulse { width: 58px; height: 58px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(255,194,77,.5); animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,194,77,.5);} 70% { box-shadow: 0 0 0 20px rgba(255,194,77,0);} 100% { box-shadow: 0 0 0 0 rgba(255,194,77,0);} }
.wait { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.wait .h { font-family: 'Secular One'; font-size: 24px; }

/* ============================================================================
   HOST — responsive. Phone: full-screen column. Wide screen: roomy "stage".
   ========================================================================== */
.host { min-height: 100dvh; display: flex; justify-content: center; padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b)); }
.stage { width: 100%; max-width: 1180px; display: flex; flex-direction: column; gap: 16px; }
.join-panel { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-xl); padding: 22px; text-align: center; box-shadow: var(--shadow); }
.join-panel .lbl { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.roomcode { font-family: 'Secular One'; font-size: clamp(48px, 15vw, 84px); letter-spacing: .12em; line-height: 1; color: var(--amber); margin: 4px 0 16px; }
.qr-box { width: min(200px, 60vw); aspect-ratio: 1; margin: 0 auto; background: #fff; border-radius: 16px; padding: 10px; box-shadow: var(--shadow); }
.qr-box img, .qr-box svg { width: 100%; height: 100%; display: block; }
.join-link { margin: 14px auto 0; display: flex; align-items: center; gap: 8px; max-width: 100%; font-size: 13px; font-weight: 700; color: var(--mint); background: rgba(70,224,172,.1); border: 1.5px solid rgba(70,224,172,.3); border-radius: 999px; padding: 9px 15px; cursor: pointer; }
.join-link .ic { flex: none; }
.join-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-h { font-family: 'Secular One'; font-size: 20px; display: flex; align-items: center; gap: 9px; }
.roster-h .n { color: var(--amber); }
.empty-lobby { color: var(--muted); padding: 14px 0; }
.lobby-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.stage-head { font-family: 'Secular One'; font-size: clamp(24px, 6vw, 40px); text-align: center; }
.stage-sub { color: var(--muted); text-align: center; font-size: clamp(14px, 3.5vw, 19px); line-height: 1.5; }
.clue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.clue { background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; animation: pop .25s var(--ease) both; }
.clue .who { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.clue .what { font-family: 'Secular One'; font-size: 20px; margin-top: 4px; }
.clue .what.pending { font-family: 'Heebo'; font-style: italic; color: var(--muted); opacity: .6; font-size: 14px; }
.chip-cat { font-family: 'Secular One'; font-size: clamp(22px, 6vw, 34px); color: var(--mint); text-align: center; }

/* Two-column lobby + wider clue text on real big screens */
@media (min-width: 780px) {
  .lobby-grid { grid-template-columns: 1.05fr 1fr; align-items: center; }
  .stage { gap: 22px; }
}

/* ---- Controller role card (online) ---------------------------------------- */
.role-card { width: 100%; border-radius: var(--r-xl); padding: 28px 22px; text-align: center; border: 2px solid; box-shadow: var(--shadow); animation: pop .4s var(--ease) both; }
.role-card.civilian { background: linear-gradient(180deg, #123a2f, #0e2b23); border-color: var(--mint); }
.role-card.liar { background: linear-gradient(180deg, #3d1622, #2c0f19); border-color: var(--coral); }
.role-label { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
.role-card.civilian .role-label { color: var(--mint); }
.role-card.liar .role-label { color: var(--coral); }
.role-word { font-family: 'Secular One'; font-size: 46px; margin: 12px 0 6px; }
.role-cat { font-size: 16px; color: var(--muted); }
.role-cat b { color: var(--amber); }
.role-note { margin-top: 16px; font-size: 14px; color: var(--muted); line-height: 1.55; }
.pill-cat { display: inline-flex; align-self: center; padding: 8px 16px; border-radius: 999px; background: rgba(255,194,77,.1); border: 1.5px solid rgba(255,194,77,.3); color: var(--amber); font-weight: 800; font-size: 14px; }
.section-h { font-family: 'Secular One'; font-size: 22px; text-align: center; }
.hint { color: var(--muted); font-size: 13.5px; text-align: center; line-height: 1.55; }

/* ---- Toast ---------------------------------------------------------------- */
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translate(-50%, 12px); background: var(--surface-2); border: 1.5px solid var(--line-2); color: var(--ink); padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .25s, transform .25s; z-index: 50; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }