/* ======================================================================
   Imposter – party-game look (purple, big card, neon red for the imposter)
   ====================================================================== */
.ip-screen.active { background: radial-gradient(ellipse at 50% 0%, #3b1d6e 0%, #1a0f33 55%, #0d0820 100%); }

/* Menu card & logo */
.gc-ip { background: linear-gradient(160deg, #5b21b6, #1e0b3d); display: flex !important; flex-direction: column; gap: 0; }
.gc-ip span { font-size: 30px; line-height: 1; }
.gc-ip b { font-size: 13px; letter-spacing: 3px; color: #ff4d6d; font-weight: 900; }
.ip-logo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ip-logo-ico { font-size: 64px; line-height: 1; animation: ip-sneak 3s ease-in-out infinite; }
@keyframes ip-sneak { 0%, 100% { transform: translateX(-6px) rotate(-4deg); } 50% { transform: translateX(6px) rotate(4deg); } }
.ip-logo-word {
  font: 900 46px/1 system-ui, sans-serif; letter-spacing: 4px; color: #fff;
  text-shadow: 0 0 18px rgba(255, 60, 100, .8), 0 3px 0 #7a1030;
}
.ip-logo-sub { font-size: 14px; color: #c4b5fd; letter-spacing: .5px; }

/* Options */
.ip-optrow { margin-bottom: 12px; }
.ip-step { max-width: 320px; }
.seg.five { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.seg.five .seg-btn { text-align: center; align-items: center; padding: 10px 2px; }
.seg.five .seg-btn b::after, .seg.three .seg-btn b::after { content: none; }
.ip-all { appearance: none; border: 0; background: none; color: #a78bfa; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; margin-left: 6px; }
.ip-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-cat {
  appearance: none; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1.5px solid var(--line); transition: all 120ms;
}
.ip-cat.on { color: #fff; background: rgba(139, 92, 246, .28); border-color: #8b5cf6; }
.ip-cat:disabled { cursor: default; }

/* ---------- Game screen ---------- */
#screen-ip-game.active { display: flex; flex-direction: column; height: 100dvh; padding: var(--safe-top) max(12px, var(--safe-right)) max(10px, var(--safe-bottom)) max(12px, var(--safe-left)); }
#screen-ip-game .topbar { padding: 8px 0 4px; }
.ip-top { flex: 1; display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.ip-chip { padding: 5px 10px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid var(--line); font-size: 12.5px; color: #ddd6fe; white-space: nowrap; }
.ip-chip-btn { appearance: none; font: inherit; font-size: 12.5px; cursor: pointer; color: #fff; }
.ip-main { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 0; }
.ip-main > div { width: min(480px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; animation: fade-in 220ms ease-out; }
.ip-kicker { margin: 0; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: #a78bfa; font-weight: 800; }
.ip-pass { margin: 0; text-align: center; font-size: 18px; font-weight: 600; color: #ddd6fe; line-height: 1.35; }
.ip-pass b { display: block; font-size: 34px; color: #fff; font-weight: 900; }
.ip-wide { width: 100%; }
.ip-start { margin: 0; text-align: center; font-size: 24px; line-height: 1.3; }
.ip-instr { margin: 0; text-align: center; color: #ddd6fe; line-height: 1.5; }

/* The card: hold → flips over */
.ip-card {
  position: relative; width: min(300px, 78vw); aspect-ratio: 3 / 4; max-height: 46dvh;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
  perspective: 1000px;
}
.ip-back, .ip-front {
  position: absolute; inset: 0; border-radius: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; text-align: center;
  transition: transform 260ms cubic-bezier(.3,.7,.3,1.15);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.ip-back {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, #7c3aed, #4c1d95);
  border: 2px solid rgba(255,255,255,.25);
}
.ip-back .ip-b-ico { font-size: 64px; }
.ip-back b { font-size: 20px; }
.ip-back small { color: #ddd6fe; font-size: 14px; }
.ip-front { background: linear-gradient(160deg, #fdfcff, #e9e3ff); color: #1e1238; transform: rotateY(180deg); border: 2px solid #c4b5fd; }
.ip-card.open .ip-back { transform: rotateY(-180deg); }
.ip-card.open .ip-front { transform: rotateY(0deg); }
.ip-f-cat { font-size: 14px; color: #6d28d9; font-weight: 700; }
.ip-f-word { font-size: clamp(28px, 9vw, 44px); font-weight: 900; line-height: 1.1; word-break: break-word; }
.ip-f-sub { font-size: 13px; color: #5b4b80; }
.ip-front.imp { background: linear-gradient(160deg, #2a0710, #120308); color: #fff; border-color: #ff4d6d; box-shadow: 0 0 40px rgba(255, 60, 100, .45), 0 16px 40px rgba(0,0,0,.5); }
.ip-front.imp .ip-f-ico { font-size: 54px; }
.ip-f-imp { font-size: clamp(30px, 9vw, 42px); font-weight: 900; letter-spacing: 3px; color: #ff4d6d; text-shadow: 0 0 16px rgba(255, 60, 100, .8); }
.ip-front.imp .ip-f-sub { color: #fda4af; }
.ip-front.imp .ip-f-cat { color: #fecdd3; }
.ip-front.imp .ip-f-cat b { color: #fff; }
.ip-peekbox { display: flex; justify-content: center; }

/* Timer */
.ip-timer { position: relative; width: 150px; height: 150px; }
.ip-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ip-timer circle { fill: none; stroke-width: 10; }
.ip-timer .bg { stroke: rgba(255,255,255,.1); }
.ip-timer .fg { stroke: #a78bfa; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 0; transition: stroke-dashoffset 250ms linear; }
.ip-timer b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ip-timer.urgent .fg { stroke: #ff4d6d; }
.ip-timer.urgent b { color: #ff4d6d; animation: urgent 500ms ease-in-out infinite alternate; }

/* Voting */
.ip-plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; width: 100%; }
.ip-pbtn {
  appearance: none; font: inherit; font-weight: 800; font-size: 16px; color: #fff; cursor: pointer;
  padding: 14px 10px; border-radius: 16px; background: rgba(139, 92, 246, .22); border: 2px solid rgba(167, 139, 250, .5);
  transition: transform 100ms, background 120ms;
}
.ip-pbtn:active { transform: scale(.96); }
.ip-pbtn.on { background: #ff4d6d; border-color: #ff8fa3; }

/* Result */
.ip-counts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ip-counts span { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 13px; }
.ip-secret { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.ip-secret > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid var(--line); text-align: center; }
.ip-secret small { font-size: 12px; color: #c4b5fd; }
.ip-secret b { font-size: 22px; font-weight: 900; }
.ip-secret b.imp { color: #ff4d6d; }
.ip-guess { width: 100%; padding: 14px; border-radius: 18px; background: rgba(255, 77, 109, .12); border: 1.5px solid rgba(255, 77, 109, .5); text-align: center; }
.ip-guess p { margin: 0 0 10px; }
.ip-guess-form { display: flex; gap: 8px; margin-bottom: 10px; }
.ip-guess-form input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: rgba(255,255,255,.08); color: #fff; font: 700 17px/1 system-ui, sans-serif; }
.ip-guess-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn.good-btn { background: #16a34a; color: #fff; border-color: transparent; }
.ip-win { width: 100%; text-align: center; padding: 16px; border-radius: 18px; font-size: 22px; font-weight: 900; display: flex; flex-direction: column; gap: 4px; animation: qd-pop 300ms cubic-bezier(.2,.9,.3,1.2); }
.ip-win small { font-size: 14px; font-weight: 600; opacity: .85; }
.ip-win.crew { background: linear-gradient(160deg, #16a34a, #0b5c2a); }
.ip-win.imp { background: linear-gradient(160deg, #e11d48, #7a1030); }
.ip-board { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ip-board span { padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 14px; }
.ip-board span.imp { box-shadow: inset 0 0 0 1.5px #ff4d6d; }
.ip-board b { color: #ffd23f; margin-left: 3px; }

@media (min-aspect-ratio: 4001/3000) and (max-height: 500px) {
  .ip-card { width: auto; height: 62dvh; }
  .ip-main > div { gap: 8px; }
  .ip-pass b { font-size: 26px; }
  .ip-timer { width: 110px; height: 110px; }
}

#screen-ip-game .toasts { top: max(56px, calc(var(--safe-top) + 52px)); bottom: auto; flex-direction: column; }
.ip-secret .hidden-word b { letter-spacing: 4px; color: #a78bfa; }