/* Player screen — designed to be read from across the table. */

.player-body { overflow: hidden; touch-action: none; }

.stage, .idle {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.stage[hidden], .idle[hidden] { display: none; }

/* --- chrome ---------------------------------------------------------------- */

.conn {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  z-index: 40;
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: .8;
  transition: opacity .4s;
}
.conn.ok { opacity: .28; }

.fs-btn {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  right: 0;
  z-index: 40;
  margin: 8px;
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--ink-faint);
  opacity: .35;
}
.fs-btn:hover { opacity: 1; }

/* --- idle ------------------------------------------------------------------ */

.idle {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}
.sigil-ring { animation: flicker 5s infinite ease-in-out; margin-bottom: 8px; }
.idle h1 {
  font-size: clamp(28px, 5vw, 52px);
  margin: 0;
  color: var(--gold);
  letter-spacing: .06em;
}
.idle-note { color: var(--ink-dim); margin: 4px 0 0; font-size: clamp(14px, 1.6vw, 19px); }
.idle-hint { color: var(--ink-faint); font-size: 13px; margin-top: 22px; }
.idle-hint code { color: var(--teal); }

/* --- game frame ------------------------------------------------------------ */

.game {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(12px, 2.2vh, 26px) clamp(14px, 3vw, 40px) clamp(12px, 2vh, 24px);
  gap: clamp(8px, 1.5vh, 18px);
  animation: rise .4s ease-out;
}

.game-head { text-align: center; flex: 0 0 auto; }
.game-hint {
  margin-top: 6px;
  font-size: clamp(11px, 1.3vw, 15px);
  color: var(--ink-faint);
  letter-spacing: .06em;
  transition: opacity .6s;
}
.game-hint.gone { opacity: 0; }
.game-head h1 {
  margin: 4px 0 0;
  font-size: clamp(19px, 3.2vw, 40px);
  color: var(--ink);
}

.game-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 34px);
  min-height: 54px;
}

.stage-canvas { display: block; margin: 0 auto; touch-action: none; }

.timer {
  font-family: var(--mono);
  font-size: clamp(15px, 2vw, 24px);
  color: var(--ink-dim);
  min-width: 3ch;
  text-align: right;
}
.timer.urgent { color: var(--blood); animation: flicker 1s infinite; }

/* --- lockpick -------------------------------------------------------------- */

.lock-stage { flex: 1; min-height: 0; position: relative; }

.picks { display: flex; gap: 6px; font-size: clamp(18px, 2.4vw, 28px); min-width: 4ch; }
.pick-icon { filter: drop-shadow(0 0 6px rgba(216,178,106,.35)); }
.pick-none { font-size: 13px; color: var(--blood); letter-spacing: .1em; text-transform: uppercase; }

.turn-btn {
  background: linear-gradient(180deg, #2a3346, #171d29);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  color: var(--gold);
  padding: clamp(12px, 1.8vh, 20px) clamp(28px, 6vw, 62px);
  font-size: clamp(14px, 1.8vw, 20px);
  letter-spacing: .14em;
  text-transform: uppercase;
  touch-action: none;
  user-select: none;
}
.turn-btn:active { background: linear-gradient(180deg, #3d4a63, #232c3d); box-shadow: 0 0 24px rgba(216,178,106,.25) inset; }

/* --- pickpocket ------------------------------------------------------------ */

.pocket-stage { flex: 1; min-height: 0; position: relative; }

.susp-wrap { display: flex; align-items: center; gap: 10px; }
.susp-label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.susp-bar {
  width: clamp(120px, 26vw, 320px);
  height: 10px;
  background: #12161f;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.susp-bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .12s linear; }
.susp-bar i.hot { background: var(--blood); }

.watch-state {
  font-size: clamp(13px, 1.7vw, 20px);
  color: var(--ink-dim);
  letter-spacing: .04em;
  min-width: 12ch;
  text-align: center;
}
.watch-state.warning { color: var(--gold); }
.watch-state.watching { color: var(--blood); font-weight: 700; animation: flicker .7s infinite; }

/* --- runes ----------------------------------------------------------------- */

.rune-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(6px, 1.4vw, 16px);
  align-self: center;
  aspect-ratio: 1;
  max-width: min(92vw, 78vh);
  width: 100%;
}

.rune-cell {
  position: relative;
  display: grid;
  place-items: center;
  background: #10141d;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #3d465c;
  transition: color .12s, border-color .12s, background .12s, box-shadow .12s;
  overflow: hidden;
  touch-action: none;
}
.rune-cell .glyph { width: auto; height: min(13vh, 104px); }
.rune-cell.lit {
  color: var(--gold);
  border-color: var(--gold);
  background: #221d10;
  box-shadow: 0 0 34px rgba(216,178,106,.35), 0 0 60px rgba(216,178,106,.12) inset;
}
.rune-cell.pulse::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 12px;
  border: 2px solid var(--teal);
  animation: pulse-ring .4s ease-out forwards;
}

.score { font-family: var(--mono); font-size: clamp(15px, 2vw, 24px); color: var(--ink-dim); }
.window-bar {
  width: clamp(120px, 30vw, 380px);
  height: 8px;
  background: #12161f;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.window-bar i { display: block; height: 100%; background: var(--teal); }
.window-bar i.low { background: var(--blood); }
.strikes { display: flex; gap: 6px; font-size: clamp(15px, 2vw, 22px); color: var(--line); }
.strike.used { color: var(--blood); }

.flash-good { animation: none; box-shadow: inset 0 0 90px rgba(127,176,105,.18); }
.flash-bad { box-shadow: inset 0 0 90px rgba(212,87,74,.22); }

/* --- cipher ---------------------------------------------------------------- */

.cipher-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.6vh, 30px);
  padding: 4px;
}

.ciphertext {
  max-width: 1100px;
  text-align: center;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(216,178,106,.25);
}
.ciphertext.letters {
  font-family: var(--mono);
  letter-spacing: .22em;
  word-spacing: .5em;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.size-small .ciphertext.letters { font-size: clamp(15px, 2vw, 22px); }
.size-medium .ciphertext.letters { font-size: clamp(19px, 3.2vw, 38px); }
.size-large .ciphertext.letters { font-size: clamp(24px, 4.6vw, 60px); }

.ciphertext.glyphs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .55em 1.1em;
}
.glyph-word { display: inline-flex; gap: .38em; align-items: center; }
.glyph-space { width: .5em; }
.glyph-cell { display: inline-flex; align-items: center; }
.glyph-cell.punct { font-family: var(--mono); opacity: .6; }
.glyph { display: block; }

.legend {
  width: min(100%, 900px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(18,22,31,.7);
  padding: 14px 16px;
}
.legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.legend-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 2px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--gold);
}
.legend-letter { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
.legend-row { display: grid; gap: 2px; margin-top: 8px; }
.legend-row code {
  font-family: var(--mono);
  letter-spacing: .28em;
  font-size: clamp(11px, 1.5vw, 16px);
  color: var(--ink-dim);
}
.legend-row code:last-child { color: var(--gold); }

.dial { width: min(100%, 760px); text-align: center; }
.dial-range { width: 100%; accent-color: var(--gold); margin: 10px 0; }
.dial-out {
  font-family: var(--mono);
  letter-spacing: .2em;
  font-size: clamp(13px, 1.9vw, 22px);
  color: var(--ink-dim);
  word-break: break-word;
  white-space: pre-wrap;
}
.dial-out.match { color: var(--moss); text-shadow: 0 0 18px rgba(127,176,105,.4); }

.answer { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: min(100%, 620px); }
.answer-input { flex: 1 1 240px; font-size: clamp(15px, 2vw, 20px); }
.answer-note { text-align: center; font-size: 14px; color: var(--ink-faint); min-height: 1.2em; }
.answer .answer-note { flex-basis: 100%; }   /* own line inside the form, inline in a footer */
.answer-note.good { color: var(--moss); }
.answer-note.bad { color: var(--blood); }
.answer.shake { animation: shake .35s; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(5px); }
  50% { transform: translateX(-7px); }
}

.reveal-panel {
  border-top: 1px solid var(--line);
  padding: 14px clamp(14px, 3vw, 40px);
  text-align: center;
}
.reveal-text {
  font-family: var(--serif);
  font-size: clamp(18px, 3vw, 34px);
  color: var(--teal);
  margin-top: 4px;
}

/* --- overlays -------------------------------------------------------------- */

.banner {
  position: fixed;
  left: 50%;
  bottom: clamp(14px, 4vh, 46px);
  transform: translateX(-50%);
  z-index: 45;
  max-width: min(90vw, 900px);
  padding: 14px 26px;
  background: rgba(10,13,20,.94);
  border: 1px solid var(--gold-soft);
  border-radius: var(--r);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(16px, 2.2vw, 26px);
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  animation: rise .35s ease-out;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(4,5,8,.86);
  backdrop-filter: blur(3px);
  animation: rise .3s ease-out;
}
.overlay-card { text-align: center; padding: 30px; }
.overlay-result {
  font-family: var(--serif);
  font-size: clamp(40px, 10vw, 120px);
  letter-spacing: .06em;
}
.overlay.success .overlay-result { color: var(--moss); text-shadow: 0 0 60px rgba(127,176,105,.35); }
.overlay.failure .overlay-result { color: var(--blood); text-shadow: 0 0 60px rgba(212,87,74,.35); }
.overlay-detail { margin-top: 10px; color: var(--ink-dim); font-size: clamp(14px, 2vw, 22px); }

.pause-veil {
  position: fixed; inset: 0; z-index: 55;
  display: grid; place-items: center;
  background: rgba(5,7,11,.8);
  backdrop-filter: blur(2px);
}
.pause-card {
  font-family: var(--serif);
  font-size: clamp(30px, 7vw, 84px);
  color: var(--gold);
  letter-spacing: .18em;
  animation: flicker 3s infinite;
}

/* --- warding sigils (lights out) ------------------------------------------ */

.lights-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(6px, 1.2vw, 14px);
  align-self: center;
  aspect-ratio: 1;
  max-width: min(92vw, 74vh);
  width: 100%;
}

.light-cell {
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0e121a;
  color: #333c4f;
  transition: color .18s, background .18s, border-color .18s, box-shadow .18s;
  touch-action: none;
  overflow: hidden;
}
.light-cell .glyph { width: auto; height: min(11vh, 84px); }
.light-cell[data-state="1"] {
  color: var(--gold); border-color: var(--gold); background: #221d10;
  box-shadow: 0 0 28px rgba(216,178,106,.3);
}
.light-cell[data-state="2"] {
  color: var(--teal); border-color: var(--teal); background: #0f2422;
  box-shadow: 0 0 28px rgba(79,209,197,.28);
}
.remaining { font-size: clamp(13px, 1.7vw, 19px); color: var(--ink-dim); }

/* --- reliquary rings (towers) --------------------------------------------- */

.pillars {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 2.5vw, 34px);
  align-items: stretch;
  max-width: 1100px;
  width: 100%;
  align-self: center;
}

.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;   /* buttons default to align-items:center in the UA sheet */
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 8px;
  transition: border-color .15s, background .15s;
}
.pillar.armed { border-color: var(--gold-soft); background: rgba(216,178,106,.05); }
.pillar.source { border-color: var(--teal); background: rgba(79,209,197,.06); }
.pillar.reject { animation: shake .3s; border-color: var(--blood); }

.pillar-post {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 10%; bottom: 46px;
  width: 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, #39425a, #1b2130);
}
.pillar-stack {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 5px;
  padding-bottom: 5px;
}
.pillar-base {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(180deg, #39425a, #1b2130);
}
.pillar-name {
  margin-top: 10px;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(13px, 1.6vw, 18px);
  color: var(--ink-faint);
  letter-spacing: .2em;
}

.ring {
  display: block;
  width: var(--w);
  height: clamp(16px, 3.2vh, 30px);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.ring[data-d="1"] { background: linear-gradient(180deg, #e8c98a, #b08c46); }
.ring[data-d="2"] { background: linear-gradient(180deg, #8fdccf, #46a396); }
.ring[data-d="3"] { background: linear-gradient(180deg, #b3a0e8, #6f5bb0); }
.ring[data-d="4"] { background: linear-gradient(180deg, #e8a08f, #b0574a); }
.ring[data-d="5"] { background: linear-gradient(180deg, #a8d68f, #6b9c52); }
.ring[data-d="6"] { background: linear-gradient(180deg, #8fb6e8, #4c74ad); }
.ring[data-d="7"] { background: linear-gradient(180deg, #d6c7a8, #948263); }
.ring.floating { box-shadow: 0 0 22px rgba(79,209,197,.5); }

.held { display: flex; align-items: center; gap: 10px; min-width: 12ch; }
.held-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }

/* --- riddle ---------------------------------------------------------------- */

.riddle-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 34px);
  text-align: center;
}
.riddle-text {
  margin: 0;
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(22px, 4vw, 52px);
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}
.riddle-hint {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(14px, 1.8vw, 21px);
  color: var(--gold);
  font-style: italic;
  animation: rise .4s ease-out;
}

/* --- pressure plate -------------------------------------------------------- */

.plate-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100%, 780px);
  align-self: center;
}
.plate-gauge {
  position: relative;
  width: 100%;
  height: 16px;
  background: #0a0d14;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.plate-gauge i {
  display: block; height: 100%; width: 0;
  background: var(--gold);
  transition: width .18s ease-out;
}
.plate-gauge i.over { background: var(--blood); }
.plate-gauge i.exact { background: var(--moss); box-shadow: 0 0 22px rgba(127,176,105,.6); }

.plate-numbers {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono);
  font-size: clamp(22px, 4.4vw, 52px);
  color: var(--gold);
}
.plate-sep { color: var(--ink-faint); }
.plate-target { color: var(--ink-dim); }

.plate-zone, .stone-zone {
  width: min(100%, 900px);
  align-self: center;
  text-align: center;
}
.plate-zone { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.stone-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(8px, 1.6vw, 16px);
  margin-top: 10px;
  min-height: 60px;
}
.stone {
  width: var(--size); height: var(--size);
  border-radius: 14px;
  border: 1px solid #39425a;
  background: linear-gradient(160deg, #2a3242, #161b26);
  color: var(--ink);
  font-family: var(--mono);
  font-size: clamp(14px, 1.9vw, 22px);
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  touch-action: none;
}
.stone:hover { border-color: var(--gold-soft); }
.plate-stones .stone { border-color: var(--gold-soft); background: linear-gradient(160deg, #3a3220, #1d1a10); color: var(--gold); }
.stone-empty { color: var(--ink-faint); font-size: 14px; }

/* --- deduction ------------------------------------------------------------- */

.logic-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(14px, 3vw, 40px);
  align-items: start;
  align-content: center;
  width: 100%;
  max-width: 1500px;
  align-self: center;
}
@media (max-width: 900px), (orientation: portrait) {
  .logic-body { grid-template-columns: minmax(0, 1fr); }
}

.clues {
  margin: 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vh, 12px);
  font-size: clamp(13px, 1.7vw, 21px);
  line-height: 1.4;
  color: var(--ink);
}
.clues li::marker { color: var(--gold-soft); }

.board { display: flex; flex-direction: column; gap: 6px; }
.board-head, .board-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  align-items: stretch;
}
.board-head span {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0 4px 4px;
}
.anchor {
  display: flex; align-items: center;
  padding: 10px 12px;
  background: rgba(216,178,106,.07);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  font-size: clamp(13px, 1.6vw, 19px);
  color: var(--gold);
}
.slot {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0e121a;
  font-size: clamp(13px, 1.6vw, 19px);
  text-align: left;
  touch-action: none;
}
.slot.empty { color: var(--ink-faint); }
.slot.clash { border-color: var(--blood); color: var(--blood); }
.slot:hover { border-color: var(--gold-soft); }

.reveal-text.small { font-size: clamp(13px, 1.7vw, 20px); line-height: 1.6; }

/* --- joining a table -------------------------------------------------------- */

.conn-room {
  font-family: var(--mono);
  letter-spacing: .18em;
  color: var(--gold);
}

.join {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: rise .4s ease-out;
}
.join-row { display: flex; gap: 10px; }
#room-input {
  width: 8ch;
  font-family: var(--mono);
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
  color: var(--gold);
}
.join .btn { padding: 0 20px; font-size: clamp(14px, 1.6vw, 18px); }
.join-note { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--blood); }