/* BLACK DIAMOND: THE GLITCH CROWN -- throne.css
   THE INSTRUMENT PANEL OF CHAPTER ONE.

   Machined, not glassy. No frosted panes, no blurred rounded cards, no
   glowing borders: thin plates with real edge thickness, hairline chrome
   rules, engraved uppercase labels, gold only where power is being spent,
   and every number in the technical mono.

   IT HAS TO WORK AT BOTH SHAPES. The room behind is fitted to whatever
   aspect the frame is (throne.js reads it), and this panel does the same:
   three instruments side by side on a wide frame, stacked with the gauntlet
   first on an upright one, so the keys are always the nearest thing to a
   thumb. Nothing here ever asks anybody to turn their phone. */

/* ================================================================
   THE DOOR, ON THE TITLE SCREEN.
   A struck plate rather than a third button: it is a different kind of
   thing from THE DESCENT and it has to read that way in one glance. It
   is a full-width slab with the light of a vault seam along its top
   edge, and it is never the primary call to action, so it does not get
   the cta treatment the descent gets.
   ================================================================ */
.chapter-cta {
  display: grid;
  gap: 3px;
  justify-items: center;
  width: 100%;
  max-width: 560px;
  margin: 14px auto 0 auto;
  padding: 11px 18px 13px 18px;
  cursor: pointer;
  pointer-events: auto;
  font-family: inherit;
  color: var(--chrome);
  background:
    linear-gradient(180deg, rgba(232, 201, 138, .10), rgba(0, 0, 0, .55)),
    linear-gradient(180deg, var(--plate2), var(--plate));
  border: 1px solid rgba(201, 163, 94, .42);
  border-top: 2px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(232, 201, 138, .22), 0 10px 26px rgba(0, 0, 0, .66);
  transition: border-color .15s, transform .08s;
}
.chapter-cta:hover { border-color: rgba(255, 232, 190, .85); }
.chapter-cta:active { transform: translateY(1px); }
.chapter-cta .chapter-k {
  font-size: 8px;
  letter-spacing: .32em;
  color: var(--gold);
}
.chapter-cta .chapter-t {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(14px, 3.4vw, 21px);
  letter-spacing: .08em;
  color: #f4f7fc;
}
.chapter-cta .chapter-s {
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--chrome-dim);
  text-align: center;
}
.chapter-cta.compact {
  margin: 12px auto 0 auto;
  padding: 9px 16px 11px 16px;
  max-width: 460px;
}

#throne {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  opacity: 1;
  transition: opacity .34s ease;
}
#throne.hidden { display: none; }
#throne > * { pointer-events: auto; }

/* ---------- the top rail: seals, vitals, the way out ---------- */
.th-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 12px 0 12px;
}

.th-seals {
  display: flex;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
}
.th-seal {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px 5px 6px;
  border: 1px solid var(--rule);
  border-left: 2px solid transparent;
  background: rgba(7, 8, 13, .74);
  color: var(--chrome-dim);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.th-seal .mono { color: var(--chrome-faint); font-size: 9px; }
.th-seal.now { color: var(--chrome); border-left-color: var(--chrome); }
.th-seal.done {
  color: #0b0d13;
  background: var(--gold);
  border-color: var(--gold);
}
.th-seal.done .mono { color: rgba(11, 13, 19, .6); }

.th-vitals {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex: 0 1 auto;
}
.th-vital {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 4px 8px 6px 8px;
  border: 1px solid var(--rule);
  background: rgba(7, 8, 13, .74);
  min-width: 116px;
}
.th-vital .k { grid-column: 1 / -1; margin: 0 0 2px 0; }
.th-num {
  grid-column: 1;
  font-size: 12px;
  color: var(--chrome);
  letter-spacing: .04em;
  white-space: nowrap;
}
.th-vital .th-bar { grid-column: 2; align-self: center; }

.th-bar {
  position: relative;
  width: 62px;
  height: 6px;
  background: rgba(201, 206, 216, .10);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.th-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--bd);
  transition: width .28s ease;
}
.th-bar.lumen i { background: var(--gold); }
.th-bar.foe i { background: var(--bad); }

#thExit {
  flex: 0 0 auto;
  padding: 7px 10px;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  background: rgba(7, 8, 13, .74);
  border: 1px solid var(--rule);
  cursor: pointer;
  font-family: var(--mono);
}
#thExit:hover { color: var(--chrome); border-color: var(--chrome-dim); }

/* ---------- the warden's tell ---------- */
.th-enemy {
  align-self: center;
  margin: 0 12px;
  width: min(560px, calc(100% - 24px));
  padding: 7px 10px 8px 10px;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--bad);
  background: linear-gradient(180deg, rgba(20, 8, 10, .86), rgba(7, 8, 13, .86));
}
.th-enemy.hidden { display: none; }
.th-enemy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 3px 0 6px 0;
}
.th-enemy-name {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--bd);
  white-space: nowrap;
}
.th-enemy .th-bar.foe { flex: 1 1 auto; width: auto; }
.th-intent {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}
.th-intent.hot { color: var(--gold-bright); }

/* ---------- the foot: the appraiser line and three instruments ---------- */
.th-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px max(12px, env(safe-area-inset-bottom)) 12px;
}
.th-line {
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .05em;
  color: var(--chrome-dim);
  padding: 6px 9px;
  border-left: 2px solid var(--gold);
  background: rgba(7, 8, 13, .74);
  max-width: 720px;
}
.th-instruments {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.th-panel {
  border: 1px solid var(--rule);
  background: rgba(7, 8, 13, .80);
  padding: 7px 9px 9px 9px;
  min-width: 0;
}
.th-panel.hidden { display: none; }
.th-panel-rings { flex: 1 1 auto; }
.th-panel-coin { flex: 1 1 auto; }
.th-panel-gauntlet { flex: 1.35 1 auto; }

/* the three dials. A dial is a button: it turns the ring, and the ring in
   the room turns with it, because they are the same number. */
.th-rings { display: flex; gap: 7px; }
.th-ring {
  flex: 1 1 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 6px 4px;
  background: rgba(11, 13, 19, .8);
  border: 1px solid var(--rule);
  cursor: pointer;
  font-family: inherit;
}
.th-ring:hover { border-color: var(--chrome-dim); }
.th-ring img { width: 34px; height: 34px; image-rendering: pixelated; }
.th-ring-n { font-size: 8px; letter-spacing: .16em; color: var(--chrome-faint); }
.th-ring-g { font-size: 9px; letter-spacing: .12em; color: var(--chrome-dim); }
.th-ring.match { border-color: var(--gold); }
.th-ring.match .th-ring-g { color: var(--gold-bright); }
.th-ring.match img { box-shadow: 0 0 0 1px var(--gold); }
.th-ring.seized { border-style: dashed; border-color: rgba(255, 77, 94, .5); }
.th-ring.seized .th-ring-n { color: var(--bad); }

/* the coin: obverse says what it is worth, reverse says what the door wants */
.th-coin-face {
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--gold-bright);
  margin-bottom: 5px;
}
.th-cipher { min-height: 44px; }
.th-glyph-row { display: flex; gap: 7px; margin-bottom: 5px; }
.th-glyph {
  display: grid;
  justify-items: center;
  gap: 3px;
  flex: 0 0 auto;
  opacity: .72;
}
.th-glyph img { width: 30px; height: 30px; image-rendering: pixelated; }
.th-glyph span { font-size: 8px; letter-spacing: .12em; color: var(--chrome-dim); }
.th-glyph.match { opacity: 1; }
.th-glyph.match span { color: var(--gold-bright); }
.th-note {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--chrome-faint);
}
.th-flip {
  margin-top: 7px;
  width: 100%;
  padding: 7px 8px;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-family: var(--mono);
  color: var(--gold-bright);
  background: rgba(20, 16, 6, .7);
  border: 1px solid rgba(201, 163, 94, .45);
  cursor: pointer;
}
.th-flip:hover { border-color: var(--gold); }

/* the gauntlet: four keys, and each one says what it costs or when it is back */
.th-gauntlet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.th-key {
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 7px 3px 6px 3px;
  background: rgba(11, 13, 19, .85);
  border: 1px solid var(--rule);
  border-bottom: 3px solid var(--gold);
  cursor: pointer;
  font-family: inherit;
  color: var(--chrome);
}
.th-key:hover { background: rgba(24, 21, 12, .9); }
.th-k-key { font-size: 10px; color: var(--gold); }
.th-k-name { font-size: 9.5px; letter-spacing: .12em; }
.th-k-cost { font-size: 8px; letter-spacing: .1em; color: var(--chrome-faint); }
.th-key.cooling { border-bottom-color: var(--chrome-faint); opacity: .62; }
.th-key.dry { border-bottom-color: var(--bad); }
.th-key.dry .th-k-cost { color: var(--bad); }

/* ---------- the upgrade hand: three slabs, struck metal ---------- */
.th-cards {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(3, 4, 10, .78), rgba(1, 2, 10, .94));
  pointer-events: auto;
}
.th-cards.hidden { display: none; }
.th-card-wrap { width: min(940px, 100%); }
.th-card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.th-card {
  display: grid;
  gap: 8px;
  align-content: start;
  text-align: left;
  padding: 14px 13px 16px 13px;
  min-height: 150px;
  cursor: pointer;
  font-family: inherit;
  color: var(--chrome);
  background:
    linear-gradient(180deg, rgba(28, 24, 12, .95), rgba(9, 10, 15, .95));
  border: 1px solid rgba(201, 163, 94, .38);
  border-top: 3px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(232, 201, 138, .18), 0 14px 30px rgba(0, 0, 0, .6);
}
.th-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.th-card-name {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .10em;
  color: var(--gold-bright);
}
.th-card-text {
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: .03em;
  color: var(--chrome-dim);
}

/* ---------- the cliffhanger ---------- */
.th-prompt {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px max(18px, env(safe-area-inset-left)) 24px max(18px, env(safe-area-inset-right));
  text-align: center;
  background: radial-gradient(ellipse at 50% 44%, rgba(3, 4, 10, .52), rgba(1, 2, 10, .95));
  pointer-events: auto;
}
.th-prompt.hidden { display: none; }
.th-cliff-title {
  margin: 0;
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(22px, 5.4vw, 46px);
  line-height: 1.06;
  letter-spacing: .04em;
  color: var(--bd);
  text-shadow: 0 0 40px rgba(232, 238, 244, .22);
  max-width: 18ch;
}
.th-cliff-line {
  margin: 0;
  max-width: 58ch;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--chrome-dim);
}
.th-cliff-locked {
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--gold);
  border: 1px solid rgba(201, 163, 94, .4);
  padding: 6px 12px;
}

/* =================================================================
   UPRIGHT: THE FRAME THE PAGE IS ACTUALLY MET IN FIRST.
   Less width means the instruments stack, and the gauntlet comes first
   because it is the only one that has to answer a clock. Nothing is
   dropped and nothing is hidden: the same three instruments, in the
   order a thumb wants them.
   ================================================================= */
@media (max-aspect-ratio: 1/1) {
  .th-top { padding-top: max(8px, env(safe-area-inset-top)); }
  .th-seals { gap: 4px; }
  .th-seal { padding: 4px 6px; font-size: 8px; letter-spacing: .1em; }
  .th-vital { min-width: 92px; padding: 4px 6px 5px 6px; }
  .th-num { font-size: 11px; }
  .th-bar { width: 42px; }
  #thExit { padding: 6px 7px; font-size: 8px; letter-spacing: .1em; }

  .th-instruments { flex-direction: column; }
  .th-panel-gauntlet { order: 1; }
  .th-panel-rings { order: 2; }
  .th-panel-coin { order: 3; }
  .th-panel-rings,
  .th-panel-coin,
  .th-panel-gauntlet { flex: 0 0 auto; }

  .th-key { padding: 8px 3px; }
  .th-k-name { font-size: 9px; letter-spacing: .08em; }
  .th-ring img { width: 28px; height: 28px; }
  .th-glyph img { width: 26px; height: 26px; }

  .th-card-row { grid-template-columns: 1fr; }
  .th-card { min-height: 0; padding: 11px 12px 12px 12px; }
  .th-card-name { font-size: 15px; }
  .th-line { font-size: 10px; }
  .th-cliff-line { font-size: 11px; }
}

/* very short frames, phone on its side: the panel gets lean so the room
   keeps most of the glass */
@media (max-height: 460px) {
  .th-line { display: none; }
  .th-vital .th-bar { width: 34px; }
  .th-ring img { width: 22px; height: 22px; }
  .th-key { padding: 5px 3px; }
  .th-panel { padding: 5px 7px 6px 7px; }
}

/* reduced motion: the panel still tells you everything, it just stops
   sliding about while it does */
@media (prefers-reduced-motion: reduce) {
  #throne, .th-bar i { transition: none; }
  .th-card:hover { transform: none; }
}