/* Not a clue!? — shared look for splash, TV and phones. A late-night parlour:
   deep indigo, cream paper slips for the clues, a red rubber stamp for NOT
   (and for LIE), and sand-gold for the timer. */
:root {
  --night: #1d1340; --night2: #271a55; --night3: #33246b; --deep: #120b2a;
  --paper: #fff6e0; --paper2: #f1e4c3; --inkd: #2a1f3d;
  --ink: #f5efff; --dim: #a99cc9; --red: #e8364f; --red2: #b81f37; --gold: #ffc93c;
  --good: #3fdc8a; --bad: #ff5a6e; --sand: #f2c45a; --wood: #8a5a2b;
  --display: "Bungee", "Arial Black", system-ui, sans-serif;
  --hand: "Patrick Hand", "Comic Sans MS", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; }
body {
  color: var(--ink); font: 600 16px/1.4 var(--body);
  background: var(--night) radial-gradient(ellipse at 50% 0%, var(--night3), var(--night) 70%) fixed;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .5px; }
h1 { color: var(--paper); font-size: 44px; line-height: 1.05; text-shadow: 3px 3px 0 var(--red2); }
h2 { color: var(--gold); font-size: 20px; }
button { background: var(--night3); border: 2px solid #4a3a8a; color: var(--ink); padding: 10px 14px;
  border-radius: 12px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
button.primary { background: var(--red); border-color: var(--red); color: #fff; }
button.gold { background: var(--gold); border-color: var(--gold); color: var(--inkd); }
button:disabled { opacity: .35; cursor: default; }
select, input { font: inherit; padding: 8px; border-radius: 8px; background: var(--night2); color: var(--ink); border: 2px solid #4a3a8a; }
.muted { color: var(--dim); } .small { font-size: 13px; }
.tagg { color: var(--dim); font-size: 13px; margin-left: 6px; }
.good { color: var(--good); } .bad { color: var(--bad); }
.av { border-radius: 50%; vertical-align: middle; margin-right: 4px; }

#toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(140px); background: var(--paper);
  color: var(--inkd); padding: 10px 18px; border-radius: 10px; transition: transform .25s; z-index: 50; max-width: 92vw; font-weight: 800; }
#toast.show { transform: translateX(-50%) translateY(0); }
#conn { position: fixed; top: 8px; right: 8px; background: var(--red); color: #fff; padding: 4px 10px; border-radius: 8px;
  font-size: 13px; display: none; z-index: 60; }
#conn.show { display: block; }

/* ---- kit phone shell: join + lobby ---------------------------------------- */
.join, .lobbyv { max-width: 480px; margin: 0 auto; padding: 28px 18px; display: grid; gap: 14px; }
.join input { font-size: 20px; padding: 12px; }
.join button, .lobbyv button { font-size: 18px; padding: 14px; }
.hint { color: var(--dim); }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; }
.seat-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px;
  background: #00000030; border-radius: 10px; margin: 4px 0; }

/* ---- the title mark ----------------------------------------------------------- */
.mark { font-family: var(--display); line-height: 1; color: var(--paper); white-space: nowrap; }
.mark .not { display: inline-block; color: var(--red); border: .09em solid var(--red); border-radius: .12em; padding: 0 .12em;
  transform: rotate(-7deg); margin-right: .1em; background: #e8364f14; }
.mark .q { color: var(--gold); }

/* ---- clue slips ---------------------------------------------------------------- */
.slip { position: relative; background: var(--paper); color: var(--inkd); border-radius: 6px; padding: 8px 12px 6px;
  box-shadow: 0 3px 0 var(--paper2), 0 6px 14px #0006; transform: rotate(var(--tilt, -.6deg)); }
.slip:nth-child(2n) { --tilt: .7deg; } .slip:nth-child(3n) { --tilt: -.2deg; }
.slip .sn { font-family: var(--hand); font-size: 24px; line-height: 1.1; overflow-wrap: anywhere; }
.slip .itsnot { font-family: var(--display); font-size: .62em; color: var(--red); letter-spacing: .5px; vertical-align: .15em; }
.slip .sb2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #6b5a86; margin-top: 2px; }
.slip .by { font-weight: 800; }
.slip .xoff { color: var(--red2); font-weight: 800; }
.slip .tag { background: #2a1f3d14; border-radius: 99px; padding: 0 7px; font-weight: 800; }
.slip .tag.useless { background: #6b5a86; color: #fff; }
.slip .yawn { margin-left: auto; padding: 2px 9px; font-size: 13px; background: #2a1f3d10; border: 1.5px solid #2a1f3d33; color: var(--inkd); border-radius: 99px; }
.slip .yawn.on { background: #6b5a86; color: #fff; border-color: #6b5a86; }
.slip.out { opacity: .55; } .slip.out .ct { text-decoration: line-through 3px #6b5a86; }
.slip.lie { box-shadow: 0 0 0 3px var(--red), 0 6px 14px #0006; }
.slip .stamp { position: absolute; right: 10px; top: 50%; transform: translateY(-50%) rotate(-12deg); font-family: var(--display);
  color: var(--red); border: 3px solid var(--red); border-radius: 6px; padding: 0 8px; font-size: 22px; opacity: .9; background: #fff6e0cc; }
.slip.fresh { animation: drop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes drop { from { transform: translateY(-30px) rotate(-8deg) scale(1.1); opacity: 0 } }

/* ---- sand timer, pips, badges ------------------------------------------------------ */
.sand { display: block; filter: drop-shadow(0 4px 8px #0008); }
.sand.low { animation: pulse .6s infinite alternate; }
@keyframes pulse { to { filter: drop-shadow(0 0 14px var(--red)); } }
.clock { font-family: var(--display); color: var(--gold); }
.clock.low { color: var(--bad); }
.pips { display: inline-flex; gap: 4px; }
.pips i { font-style: normal; font-family: var(--display); width: 1.4em; height: 1.4em; display: inline-grid; place-items: center;
  border-radius: 50%; background: #ffffff14; color: #ffffff30; font-size: .9em; }
.pips i.on { background: var(--gold); color: var(--inkd); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: .78em;
  font-weight: 800; letter-spacing: .3px; text-transform: uppercase; background: #ffffff1a; color: var(--ink); white-space: nowrap; }
.badge.liar { background: var(--red); color: #fff; } .badge.truth { background: var(--good); color: var(--inkd); }
.badge.guesser { background: var(--gold); color: var(--inkd); }
@keyframes shake { 20%, 60% { transform: translateX(-6px) } 40%, 80% { transform: translateX(6px) } }
@keyframes pop { from { transform: scale(.3); opacity: 0 } 70% { transform: scale(1.08); opacity: 1 } }

/* ---- phone screens ---------------------------------------------------------------------- */
.screen { max-width: 520px; margin: 0 auto; padding: 12px 14px 28px; display: flex; flex-direction: column; gap: 12px; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; color: var(--dim); }
.bar .mark { font-size: 17px; }
.bar .code { font-family: var(--display); letter-spacing: 3px; color: var(--gold); font-size: 16px; }
.card { background: #00000030; border-radius: 14px; padding: 10px; }
.btncol { display: grid; gap: 10px; } .btncol button { font-size: 18px; padding: 14px; }
.secret { background: var(--paper); color: var(--inkd); border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; text-align: center;
  box-shadow: 0 4px 0 var(--paper2); }
.secret .lbl { font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #6b5a86; }
.secret .word { font-family: var(--display); font-size: 40px; line-height: 1; overflow-wrap: anywhere; }
.secret.hidden .word { filter: blur(14px); }
.secret .role { font-weight: 800; }
.secret.liar { box-shadow: 0 0 0 4px var(--red), 0 4px 0 var(--paper2); }
.secret .peek { font-size: 12px; color: #6b5a86; text-decoration: underline; background: none; border: 0; padding: 0; }
.rolecard { text-align: center; padding: 26px 14px; display: grid; gap: 10px; animation: pop .5s; }
.rolecard .big { font-family: var(--display); font-size: 44px; line-height: 1; }
.rolecard .big.liar { color: var(--red); } .rolecard .big.truth { color: var(--good); } .rolecard .big.guesser { color: var(--gold); }
.rolecard p { font-size: 17px; }
.compose { background: #00000035; border: 2px solid var(--gold); border-radius: 14px; padding: 10px; display: grid; gap: 8px; }
.compose.wait { border-color: #4a3a8a; }
.compose .row { display: flex; gap: 8px; align-items: center; }
.compose .pre { font-family: var(--display); color: var(--red); white-space: nowrap; font-size: 15px; background: var(--paper); padding: 9px 8px; border-radius: 8px; }
.compose input { flex: 1; min-width: 0; font-size: 19px; padding: 10px; background: var(--paper); color: var(--inkd); border-color: var(--paper2); }
.compose .send { font-size: 17px; padding: 10px 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { font-size: 13px; padding: 5px 10px; border-radius: 99px; background: var(--night3); }
.chips button.used { opacity: .35; }
.liebox { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--bad); }
.liebox input { width: 22px; height: 22px; accent-color: var(--red); }
.turnline { display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.turnline b { color: var(--gold); }
.feed { display: grid; gap: 10px; }
.feed .slip .sn { font-size: 21px; }
.ask { background: var(--gold); color: var(--inkd); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; animation: pop .35s; }
.ask .q { font-weight: 800; }
.ask .row { display: flex; gap: 8px; } .ask button { flex: 1; background: var(--inkd); border-color: var(--inkd); color: #fff; }
.ask button.on { background: var(--red); border-color: var(--red); }
.guessbox { display: grid; gap: 8px; }
.guesses { display: flex; flex-wrap: wrap; gap: 6px; }
.guesses .g { background: #00000040; border-radius: 8px; padding: 3px 10px; font-weight: 800; }
.guesses .g.x { color: var(--bad); text-decoration: line-through; } .guesses .g.ok { color: var(--good); }
.callbtn { font-family: var(--display); font-weight: 400; font-size: 22px; padding: 14px; background: var(--red); border-color: var(--red2); color: #fff;
  box-shadow: 0 4px 0 var(--red2); letter-spacing: .5px; }
.callbtn.used { background: var(--night3); box-shadow: none; border-color: #4a3a8a; font-size: 15px; font-family: var(--body); font-weight: 800; }
.sheet { position: fixed; inset: 0; background: #0b0620e8; z-index: 30; display: flex; flex-direction: column; padding: 18px 14px; gap: 12px; overflow: auto; animation: pop .25s; }
.sheet h2 { text-align: center; font-size: 26px; color: var(--red); }
.suspect { text-align: left; display: grid; gap: 6px; padding: 12px; font-size: 20px; background: var(--night3); }
.suspect .said { font-family: var(--hand); font-size: 17px; color: var(--dim); font-weight: 400; }
.maybes { display: flex; flex-wrap: wrap; gap: 8px; }
.maybes .m { background: var(--paper); color: var(--inkd); padding: 4px 12px; border-radius: 8px; font-family: var(--hand); font-size: 20px; position: relative; }
.maybes .m.x { opacity: .55; text-decoration: line-through 3px var(--red); }
.maybes label.m { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.maybes label.m input { width: 18px; height: 18px; accent-color: var(--red); }
.maybes label.m.sel { box-shadow: 0 0 0 3px var(--red); }
.bigword { font-family: var(--display); font-size: 34px; text-align: center; line-height: 1.05; color: var(--gold); }
.bigword.bad { color: var(--bad); } .bigword.good { color: var(--good); }
.reveal { display: grid; gap: 10px; text-align: center; }
.reveal .was { font-size: 14px; font-weight: 900; letter-spacing: 1px; color: var(--dim); text-transform: uppercase; }
.reveal .word { font-family: var(--display); font-size: 44px; color: var(--paper); line-height: 1; overflow-wrap: anywhere; }
.pts { display: grid; gap: 4px; }
.pts .ln { display: flex; justify-content: space-between; gap: 10px; background: #00000030; border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.pts .ln b.p { color: var(--good); } .pts .ln b.n { color: var(--bad); }
.heck { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .heck button { font-size: 14px; padding: 7px 11px; }
.score-row { display: flex; justify-content: space-between; gap: 10px; }
/* grid/flex children may shrink below their content (else the input pushes the box wider than the phone) */
.compose { grid-template-columns: minmax(0, 1fr); }
.compose > *, .compose .row > * { min-width: 0; }
.compose .row > button { flex: none; }
.liebox { justify-content: flex-start; cursor: pointer; }
.liebox input { flex: none; width: 22px; height: 22px; padding: 0; margin: 0; }
.maybes label.m input { padding: 0; margin: 0; flex: none; }