/* ============================================================
   ENGINE — styling for the generalized GameRuntime surfaces
   (engine-views.jsx). Mirrors the existing overlay / liquid-glass
   conventions. Scoped under .eng-* so it never touches legacy UI.
   ============================================================ */

/* floating launcher / end button (player + host) */
.eng-fab{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:60; padding:.6rem 1.1rem; border-radius:999px;
  background:linear-gradient(180deg, hsl(38 90% 56%), hsl(28 84% 46%));
  color:#2a1a06; font-weight:700; font-size:.86rem; letter-spacing:.02em;
  border:1px solid hsl(38 90% 70% / .6); box-shadow:0 6px 22px hsl(28 80% 20% / .5);
  cursor:pointer;
}
.eng-fab.end{ background:linear-gradient(180deg, hsl(0 0% 26%), hsl(0 0% 16%)); color:#f3e7d6; border-color:hsl(0 0% 40% / .6); }
.eng-fab:active{ transform:translateX(-50%) translateY(1px); }

/* picker modal */
.eng-modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  background:hsl(20 20% 4% / .72); backdrop-filter:blur(6px); padding:1rem; }
.eng-modal-card{ width:min(560px, 96vw); max-height:88vh; overflow:auto; border-radius:18px; padding:1.2rem 1.3rem; }
.eng-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.eng-modal-head h2{ margin:0; font-size:1.4rem; }
.eng-beta{ font-size:.6rem; vertical-align:super; color:hsl(38 90% 60%); letter-spacing:.08em; }
.eng-x{ background:none; border:none; color:#cab9a6; font-size:1.1rem; cursor:pointer; }
.eng-game-list{ margin-top:.9rem; display:flex; flex-direction:column; gap:.6rem; }
.eng-game-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem .85rem; border-radius:12px; background:hsl(34 16% 12% / .6); border:1px solid hsl(34 20% 30% / .4); }
.eng-game-meta{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.eng-game-meta b{ font-size:1rem; }
.eng-game-meta .muted{ font-size:.76rem; text-transform:none; letter-spacing:0; }
.eng-game-tag{ font-size:.66rem; color:hsl(38 60% 60%); letter-spacing:.04em; text-transform:uppercase; }

/* MAIN — phase frames. Extra top padding clears the PartyStrip that sits at
   the top of the shared display, so the title/countdown never hide behind it. */
.eng-main{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; text-align:center; padding:11rem 3rem 3rem; z-index:5; }
.eng-title{ font-size:2.6rem; color:#f4e4c8; text-shadow:0 2px 18px hsl(28 60% 20% / .6); }
.eng-brief-cue{ font-size:1.2rem; color:#d8c4a4; max-width:30ch; }
.eng-countdown{ font-variant-numeric:tabular-nums; font-size:3rem; font-weight:800; color:hsl(38 90% 62%); }
.eng-countdown.small{ font-size:1.6rem; opacity:.8; }
.eng-countdown.low{ color:hsl(4 80% 60%); animation:engpulse 1s ease-in-out infinite; }
@keyframes engpulse{ 50%{ opacity:.5; } }
.eng-q-head{ display:flex; align-items:center; gap:1.4rem; }
.eng-q-hint{ font-size:1rem; color:#cdb89a; max-width:46ch; }
.eng-loc-board{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; max-width:60ch; margin-top:.6rem; }
.eng-loc-chip{ padding:.32rem .7rem; border-radius:999px; font-size:.82rem; color:#e9d8ba;
  background:hsl(34 18% 16% / .8); border:1px solid hsl(38 30% 40% / .4); }

/* MAIN — reveal */
.eng-reveal .eng-verdict{ font-size:2.2rem; font-weight:800; max-width:24ch; }
.eng-verdict.good{ color:hsl(150 55% 60%); } .eng-verdict.evil{ color:hsl(4 78% 62%); }
.eng-reveal-facts{ display:flex; flex-direction:column; gap:.3rem; font-size:1.15rem; color:#e7d6b8; }
.eng-reveal-cta{ margin-top:.4rem; font-size:.85rem; }

/* PLAYER overlay */
.eng-pov{ position:fixed; inset:0; z-index:55; display:flex; align-items:center; justify-content:center;
  padding:1.2rem; background:hsl(20 22% 5% / .82); backdrop-filter:blur(8px); }
.eng-pov-inner{ width:min(420px, 94vw); display:flex; flex-direction:column; gap:1rem; }
.eng-card{ border-radius:18px; padding:1.4rem 1.2rem; text-align:center; border:1px solid hsl(38 30% 40% / .4);
  background:radial-gradient(circle at 50% 20%, hsl(34 24% 18%), hsl(24 22% 9%)); }
.eng-card.spy{ background:radial-gradient(circle at 50% 20%, hsl(2 40% 22%), hsl(2 30% 9%)); border-color:hsl(4 60% 50% / .5); }
.eng-card-eyebrow{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#b39b7c; }
.eng-card-loc{ font-size:2rem; color:#f4e4c8; margin:.2rem 0; }
.eng-card-role{ font-size:1rem; color:#d8c4a4; }
.eng-card-role b{ color:#f4e4c8; }
.eng-card.spy .eng-card-role{ font-size:1.8rem; color:hsl(4 80% 66%); }
.eng-callvote{ align-self:center; }
.eng-guess{ background:hsl(20 18% 10% / .7); border-radius:14px; padding:.8rem; }
.eng-guess-label{ font-size:.8rem; color:#cdb89a; margin-bottom:.5rem; }
.eng-guess-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.eng-guess-btn{ padding:.5rem; border-radius:9px; font-size:.8rem; color:#ecdcbe; cursor:pointer;
  background:hsl(34 18% 16%); border:1px solid hsl(38 30% 38% / .4); }
.eng-guess-btn:active{ transform:translateY(1px); }
.eng-pov-reveal .eng-pov-verdict{ font-size:1.5rem; font-weight:800; text-align:center; }
.eng-pov-verdict.good{ color:hsl(150 55% 62%); } .eng-pov-verdict.evil{ color:hsl(4 78% 64%); }