/* ============================================================
   Silent Alarm — neon-noir heist skin over the shared engine CSS.
   Two worlds: The Hand's museum (marble, red laser, warm gold) and
   The Eye's van (phosphor-green console). Found documents restyled as
   manila job-file pages and green console cards; a vault dial on the
   title; and the two-player role-select screen.
   ============================================================ */

:root {
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --bg-0: #05070a;
  --bg-1: #0b1118;
  --bg-2: #12202b;
  --stone-1: #1a2430;
  --stone-2: #0e141c;
  --torch: #ffe6a6;          /* spotlight warm */
  --torch-deep: #ffcf6a;
  --gold: #c9a227;
  --gold-bright: #e8c85a;
  --phosphor: #7cffb2;       /* the Eye's console green */
  --phosphor-dim: #2fbf71;
  --laser: #ff3b57;          /* security red */
  --cyan: #57d6e6;
  --parchment: #e8e2d4;
  --ink: #10202c;
}

/* title screen: a dark vault door + a hot magenta-red security wash */
#title-screen {
  background:
    radial-gradient(1100px 640px at 50% 120%, #10203a 0%, transparent 60%),
    radial-gradient(820px 520px at 82% -6%, #1a0f1e 0%, transparent 55%),
    linear-gradient(180deg, #05070a 0%, #0b1118 58%, #12202b 100%);
}
#title-bg {
  background:
    /* a slow red sweep, like a laser crossing the frame */
    conic-gradient(from 200deg at 22% 34%,
      transparent 0deg, rgba(255,59,87,0.14) 7deg, transparent 18deg),
    /* a green console glow bottom-left */
    radial-gradient(460px 300px at 12% 96%, rgba(124,255,178,0.10) 0%, transparent 70%);
}
#title-bg::after {
  /* a vault-door disc on the right */
  content: "";
  position: absolute;
  right: 8vw;
  bottom: 12vh;
  width: 30vh;
  height: 30vh;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #1a2430 0%, #0b1118 62%, #060a0e 100%);
  border: 0.7vh solid #2b3d48;
  box-shadow: inset 0 0 4vh rgba(0,0,0,0.7), 0 0 6vh rgba(87,214,230,0.12);
  opacity: 0.55;
}

#game-title {
  background: linear-gradient(180deg, #fff6df 0%, #e8c85a 44%, #c9a227 100%);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.08em;
  font-weight: 700;
  filter: drop-shadow(0 6px 30px rgba(255,59,87,0.24));
}
.title-kicker { letter-spacing: 0.32em; color: var(--phosphor); }
.title-foot { letter-spacing: 0.2em; }

/* embers become drifting dust motes / phosphor flecks */
.ember { background: radial-gradient(circle, #eafff2 0%, #7cffb2 55%, transparent 75%); }

/* HUD: instrument-ish */
#room-title { letter-spacing: 0.13em; font-weight: 600; }
#timer { font-family: Consolas, "Cascadia Mono", monospace; letter-spacing: 0.05em; }
#room-badge { font-family: Consolas, "Cascadia Mono", monospace; letter-spacing: 0.14em; }

#message-text { font-style: normal; font-size: 15.5px; letter-spacing: 0.01em; }
#message-card { border-color: rgba(87,214,230,0.28); }

/* ---------- role select screen ---------- */
.role-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 40px 24px;
  text-align: center;
}
.role-heading {
  font-size: clamp(26px, 4vw, 40px);
  color: var(--parchment);
  letter-spacing: 0.04em;
  margin: 0;
}
.role-note {
  max-width: 620px;
  color: var(--text-dim);
  line-height: 1.7;
  font-size: 15px;
}
.role-note strong { color: var(--phosphor); }
.role-note em { color: var(--parchment); font-style: italic; }
.role-cards {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
}
.role-card {
  width: 244px;
  padding: 26px 20px 22px;
  background: linear-gradient(170deg, #12202b55 0%, #080d12 100%);
  border: 1px solid rgba(87,214,230,0.26);
  border-radius: 16px;
  cursor: pointer;
  color: var(--text);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), border-color 0.18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.role-card:hover {
  transform: translateY(-6px);
  border-color: var(--phosphor);
  box-shadow: 0 18px 46px rgba(0,0,0,0.55), 0 0 30px rgba(124,255,178,0.16);
}
#pick-hand:hover { border-color: var(--gold-bright); box-shadow: 0 18px 46px rgba(0,0,0,0.55), 0 0 30px rgba(255,207,106,0.18); }
.role-card-badge {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cyan);
}
.role-card-art { font-size: 44px; line-height: 1; margin: 4px 0; }
.role-card-name {
  font-size: 22px;
  color: var(--parchment);
  letter-spacing: 0.05em;
}
.role-card-sub { font-size: 13px; color: var(--text-dim); letter-spacing: 0.1em; }
.role-card-resume {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ok);
  border: 1px solid rgba(123,196,127,0.4);
  border-radius: 20px;
  padding: 3px 12px;
}

/* ---------- documents ---------- */
/* manila job-file page — the heist counterpart to the parchment note */
.dossier {
  position: relative;
  margin: 6px auto;
  padding: 20px 24px;
  max-width: 520px;
  background: linear-gradient(170deg, #e9e0c8 0%, #d3c6a6 100%);
  color: #33291a;
  border: 1px solid #b6a374;
  border-left: 5px solid #8a7f6a;
  border-radius: 6px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  font-size: 15px;
  line-height: 1.7;
  animation: fadeUp 0.5s var(--ease-out) both;
}
.dossier .dossier-title {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 10px;
  color: #6b4f2c;
}
.dossier.stamped::after {
  content: "CONFIDENTIAL";
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #b23b3b;
  border: 2px solid #b23b3b;
  padding: 2px 7px;
  border-radius: 3px;
  transform: rotate(8deg);
  opacity: 0.7;
}

/* green console / schematic card — The Eye's found data */
.console-card {
  position: relative;
  margin: 6px auto;
  padding: 18px 22px;
  max-width: 560px;
  background: linear-gradient(170deg, #0b1a13 0%, #06110b 100%);
  color: #c8f6dd;
  border: 1px solid rgba(124,255,178,0.32);
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5), inset 0 0 30px rgba(124,255,178,0.05);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 14px;
  line-height: 1.7;
}
.console-card .console-title {
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11.5px;
  margin-bottom: 10px;
  color: var(--phosphor);
}
.console-card .warn { color: var(--gold-bright); }
.console-card .bad { color: #ff8f8f; }
.console-card .ok { color: #8fe0a0; }
.console-card b, .console-card strong { color: #eafff2; }

/* the Client's chat feed — a cold, terse message strip */
.client-feed {
  margin: 10px auto;
  max-width: 520px;
  padding: 12px 16px;
  border-left: 3px solid var(--laser);
  background: rgba(255,59,87,0.06);
  color: #ffd3da;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 13.5px;
  letter-spacing: 0.02em;
}
.client-feed::before { content: "\25B8  CLIENT  \00B7  "; color: var(--laser); font-weight: 700; }

/* the cross-screen callout: emphasise that a clue is FOR the partner */
.relay {
  margin: 10px auto;
  max-width: 520px;
  padding: 10px 16px;
  border: 1px dashed rgba(87,214,230,0.5);
  border-radius: 8px;
  background: rgba(87,214,230,0.06);
  color: var(--cyan);
  font-size: 13.5px;
  letter-spacing: 0.02em;
}
.relay::before { content: "\1F4E1  "; }

/* puzzle dials read as steel instruments */
.dial-face { font-family: Consolas, "Cascadia Mono", monospace; }

/* photoreal puzzle-mechanism banner at the head of each modal */
.puzzle-hero {
  width: 100%; height: 132px; margin: -2px 0 18px; border-radius: 10px;
  background-size: cover; background-position: center 44%;
  border: 1px solid rgba(87, 214, 230, 0.22);
  box-shadow: inset 0 -44px 48px rgba(5, 7, 10, 0.74), 0 6px 20px rgba(0, 0, 0, 0.5);
}
.pz-keypad    { background-image: url(art/pz-keypad.webp); }
.pz-cameras   { background-image: url(art/pz-cameras.webp); }
.pz-terminal  { background-image: url(art/pz-terminal.webp); }
.pz-deposit   { background-image: url(art/pz-deposit.webp); }
.pz-clockdial { background-image: url(art/pz-clockdial.webp); }
.pz-breakers  { background-image: url(art/pz-breakers.webp); }
.pz-timelock  { background-image: url(art/pz-timelock.webp); }

/* Gus's dock glow: cool console green */
#gus-dock { filter: drop-shadow(0 0 14px rgba(124,255,178,0.4)); }
#gus-dock:hover { filter: drop-shadow(0 0 24px rgba(124,255,178,0.7)); }
#gus-dock::after { color: var(--parchment); border-color: rgba(124,255,178,0.45); }
.gus-portrait { filter: drop-shadow(0 0 18px rgba(124,255,178,0.3)); }
.gus-tier.next { border-color: rgba(124,255,178,0.4); }