/* ============================================================
   Twin Signal Towers — storm-coast skin over the shared engine CSS.
   Warm lamp-gold beams against cold storm blues; found documents
   restyled as keeper's-log pages and chart cards; a lighthouse
   silhouette on the title; and the two-player role-select screen.
   ============================================================ */

:root {
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --bg-0: #05080f;
  --bg-1: #0a1622;
  --bg-2: #0e2436;
  --stone-1: #2b3547;
  --stone-2: #1c2431;
  --torch: #ffe6a6;          /* lamp beam warm */
  --torch-deep: #ffcf6a;
  --gold: #c9a227;
  --gold-bright: #e8c85a;
  --parchment: #e8dcc0;
  --ink: #10202c;
}

/* title screen: a dark headland + a lighthouse throwing a beam */
#title-screen {
  background:
    radial-gradient(1200px 700px at 50% 128%, #10314c 0%, transparent 60%),
    radial-gradient(900px 520px at 18% -8%, #0c2136 0%, transparent 55%),
    linear-gradient(180deg, #05080f 0%, #0a1622 58%, #0e2436 100%);
}
#title-bg {
  background:
    /* the sweeping beam */
    conic-gradient(from 210deg at 78% 30%,
      transparent 0deg, rgba(255,230,166,0.16) 8deg, transparent 20deg);
}
#title-bg::after {
  clip-path: polygon(38% 100%, 46% 12%, 54% 12%, 62% 100%);
  left: 74%;
  bottom: 0;
  width: 20vw;
  height: 62vh;
  background: linear-gradient(180deg, #e8dcc0 0%, #8a7f6a 40%, #2b3547 100%);
  filter: drop-shadow(0 0 26px rgba(255,230,166,0.35));
  opacity: 0.5;
}

#game-title {
  background: linear-gradient(180deg, #fff6df 0%, #ffcf6a 46%, #c9a227 100%);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.06em;
  font-weight: 700;
  filter: drop-shadow(0 6px 30px rgba(255,207,106,0.28));
}
.title-kicker { letter-spacing: 0.34em; }
.title-foot { letter-spacing: 0.2em; }

/* embers become drifting cold spray/rain motes */
.ember { background: radial-gradient(circle, #dff0ff 0%, #9fc7dd 55%, transparent 75%); }

/* HUD: instrument-ish */
#room-title { letter-spacing: 0.14em; 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(255,207,106,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(--gold-bright); }
.role-note em { color: var(--parchment); font-style: italic; }
.role-cards {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
}
.role-card {
  width: 240px;
  padding: 26px 20px 22px;
  background: linear-gradient(170deg, #12253540 0%, #0a141f 100%);
  border: 1px solid rgba(255,207,106,0.28);
  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(--gold-bright);
  box-shadow: 0 18px 46px rgba(0,0,0,0.5), 0 0 30px rgba(255,207,106,0.18);
}
.role-card-badge {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.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 ---------- */
/* keeper's log page — the maritime .parchment-note counterpart */
.logbook {
  position: relative;
  margin: 6px auto;
  padding: 20px 24px;
  max-width: 520px;
  background: linear-gradient(170deg, #efe6cf 0%, #ddd0b2 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.5);
  font-size: 15px;
  line-height: 1.75;
  animation: fadeUp 0.5s var(--ease-out) both;
}
.logbook .log-title {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 10px;
  color: #6b4f2c;
}
.logbook.aged { filter: sepia(0.25) brightness(0.97); }

/* chart / diagram card — dark instrument panel */
.chartcard {
  position: relative;
  margin: 6px auto;
  padding: 18px 22px;
  max-width: 560px;
  background: linear-gradient(170deg, #0e2032 0%, #0a1622 100%);
  color: #cfe4f0;
  border: 1px solid rgba(159,199,221,0.35);
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5), inset 0 0 30px rgba(159,199,221,0.05);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 14px;
  line-height: 1.7;
}
.chartcard .chart-title {
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11.5px;
  margin-bottom: 10px;
  color: #9fc7dd;
}
.chartcard .warn { color: var(--torch-deep); }
.chartcard .bad { color: #ff8f8f; }
.chartcard .ok { color: #8fe0a0; }
.chartcard b, .chartcard strong { color: #fff6df; }

/* 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(255,207,106,0.5);
  border-radius: 8px;
  background: rgba(255,207,106,0.06);
  color: var(--gold-bright);
  font-size: 13.5px;
  letter-spacing: 0.02em;
}
.relay::before { content: "\1F4E3  "; }

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

/* Gus's dock glow: warm lamp-light */
#gus-dock { filter: drop-shadow(0 0 14px rgba(255,207,106,0.4)); }
#gus-dock:hover { filter: drop-shadow(0 0 24px rgba(255,207,106,0.7)); }
#gus-dock::after { color: var(--parchment); border-color: rgba(255,207,106,0.45); }
.gus-portrait { filter: drop-shadow(0 0 18px rgba(255,207,106,0.32)); }
.gus-tier.next { border-color: rgba(255,207,106,0.4); }