/* London — chrome, screens, layout. The entry screens (home / invite /
   waiting room) are set as a Victorian playbill: one parchment sheet in the
   exact visual language of the game cards (dark border, inner gold ring,
   small-caps display type), on a dark night-cloth backdrop. Card/borough
   internals live in cards.css. */

/* IM Fell English (OFL) — the period face. Vendored in static/fonts; the
   app stays fully self-hosted. Fallback is Georgia, so nothing breaks if a
   font file goes missing. */
@font-face {
  font-family: "IM Fell English";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/im-fell-english.woff2") format("woff2");
}

@font-face {
  font-family: "IM Fell English";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/im-fell-english-italic.woff2") format("woff2");
}

@font-face {
  font-family: "IM Fell English SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/im-fell-english-sc.woff2") format("woff2");
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(212, 185, 106, 0.07), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 5px),
    linear-gradient(#22201b, #171511);
  background-attachment: fixed;
  color: #e8e0cc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.4;
}

h1, h2, h3 {
  font-family: "IM Fell English SC", Georgia, serif;
  font-weight: normal;
  letter-spacing: 0.02em;
}

button {
  font-family: inherit;
  font-size: 1em;
  background: #3d382f;
  color: #e8e0cc;
  border: 1px solid #55503f;
  border-radius: 4px;
  padding: 8px 14px;
  cursor: pointer;
}

button:hover {
  background: #4a4436;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Prompt-bar button variants (T21: b(label, action, cls)). */

button.primary {
  background: #7a5a1e;
  border-color: #a08040;
  color: #f3ead3;
  font-weight: bold;
}

button.primary:hover {
  background: #8f6a26;
}

button.ghost {
  background: transparent;
  border-style: dashed;
}

button.ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Link styled as a ghost button (e.g. "Found a new game" after game over). */
a.link-btn {
  display: inline-block;
  padding: 8px 14px;
  border: 1px dashed #55503f;
  border-radius: 4px;
  color: #e8e0cc;
  text-decoration: none;
  font-size: 1em;
}

a.link-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Destructive actions (token regeneration). */
button.danger {
  border-color: #8a4030;
  color: #e09080;
}

button.danger:hover {
  background: #4a231c;
}

.attention {
  color: #e0a030;
  font-weight: bold;
}

button.attention {
  background: #5c3a12;
  border-color: #a08040;
  color: #f3ead3;
}

button.attention:hover {
  background: #6e4618;
}

.waiting {
  color: #a89f88;
  font-style: italic;
}

/* Live-connection pulse + elapsed clock beside "Waiting for X…" — the
   difference between "opponent thinking" and "something is stuck". */
.waiting::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #d4b96a;
  animation: wait-pulse 2.2s ease-in-out infinite;
}

@keyframes wait-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.waiting-clock {
  color: #7a7362;
  font-size: 12px;
}

input {
  font-family: inherit;
  font-size: 1em;
  background: #16140f;
  color: #e8e0cc;
  border: 1px solid #3d382f;
  border-radius: 4px;
  padding: 8px;
}

/* Any element marked hidden stays hidden regardless of any display rule
   an #id selector below sets on it (screen-table, zoom, scoring all get
   both an id-scoped display and the hidden attribute at different times). */
[hidden] {
  display: none !important;
}

/* ==================================================================
   The playbill sheet — home, invitation, waiting room
   ================================================================== */

#screen-home, #screen-invite, #screen-lobby {
  padding: 5vh 16px 64px;
}

.sheet {
  max-width: 620px;
  margin: 0 auto;
  padding: 46px 54px 34px;
  text-align: center;
  color: var(--ink, #3a2d1c);
  background: var(--parchment, #f3ead3);
  background-image:
    radial-gradient(ellipse at 50% 12%, rgba(255, 255, 255, 0.55), transparent 55%),
    repeating-linear-gradient(0deg, rgba(74, 51, 32, 0.025) 0 1px, transparent 1px 3px);
  border: 3px solid var(--border-dark, #4a3320);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 5px var(--parchment, #f3ead3),
    inset 0 0 0 7px var(--gold, #a08040),
    inset 0 0 60px rgba(74, 51, 32, 0.12),
    0 22px 60px rgba(0, 0, 0, 0.55);
}

.m-over {
  margin: 0;
  font-family: "IM Fell English", Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-dim, #8a6d3b);
}

.masthead {
  margin: 4px 0 0;
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: 82px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--ink, #3a2d1c);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.masthead-sm {
  font-size: 46px;
}

.tagline {
  margin: 8px 0 0;
  font-family: "IM Fell English", Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: #6b5636;
}

/* Engraved dividers: a hairline pair with a printer's fleuron, and the
   lighter "— word —" variant. */

.rule-fleuron {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 22px 0;
  color: var(--gold-dim, #8a6d3b);
  font-size: 19px;
  line-height: 1;
}

.rule-fleuron::before,
.rule-fleuron::after {
  content: "";
  flex: 1;
  height: 5px;
  border-top: 1px solid var(--gold-dim, #8a6d3b);
  border-bottom: 1px solid rgba(138, 109, 59, 0.45);
}

.rule-word {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 18px;
  color: var(--gold-dim, #8a6d3b);
}

.rule-word::before,
.rule-word::after {
  content: "";
  flex: 1;
  border-top: 1px solid rgba(138, 109, 59, 0.55);
}

.rule-word span {
  font-family: "IM Fell English", Georgia, serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
}

/* Forms on the sheet: ledger-line inputs, letterpress buttons. */

.bill-form {
  margin: 0;
}

.bill-form h2 {
  margin: 0 0 10px;
  font-size: 24px;
  color: var(--ink, #3a2d1c);
}

.bill-form label {
  display: block;
  margin: 10px 0 2px;
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: 0.22em;
  color: #7a6340;
}

.sheet input {
  width: 100%;
  max-width: 320px;
  padding: 7px 10px;
  text-align: center;
  font-size: 17px;
  font-family: Georgia, serif;
  color: var(--ink, #3a2d1c);
  background: rgba(255, 255, 255, 0.25);
  border: none;
  border-bottom: 2px solid #9c8a63;
  border-radius: 2px 2px 0 0;
}

.sheet input:focus {
  outline: none;
  border-bottom-color: var(--ink, #3a2d1c);
  background: rgba(255, 255, 255, 0.45);
}

.duo {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.duo > div {
  flex: 1 1 140px;
  max-width: 200px;
}

.duo input {
  max-width: none;
}

#join-code {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.22em;
}

.sheet button.letterpress {
  margin-top: 16px;
  padding: 10px 26px;
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: 17px;
  letter-spacing: 0.1em;
  color: var(--parchment, #f3ead3);
  background: linear-gradient(#4a3a26, #38291a);
  border: 1px solid #241708;
  border-radius: 6px;
  box-shadow:
    0 0 0 2px var(--parchment, #f3ead3),
    0 0 0 3px var(--gold-dim, #8a6d3b),
    0 3px 8px rgba(46, 30, 12, 0.4);
}

.sheet button.letterpress:hover:not(:disabled) {
  background: linear-gradient(#5a4830, #443322);
  transform: translateY(-1px);
}

.sheet button.letterpress:disabled {
  opacity: 0.45;
}

.sheet button.letterpress.small {
  margin-top: 0;
  padding: 6px 16px;
  font-size: 13px;
}

.formnote {
  margin: 10px 0 0;
  font-family: "IM Fell English", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #8a7550;
}

.colophon {
  margin: 26px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(138, 109, 59, 0.45);
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: 0.2em;
  color: #8a7550;
}

.footnote {
  margin: 20px 0 0;
  font-family: "IM Fell English", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #8a7550;
}

.footnote a {
  color: #6b5636;
}

.invite-line {
  margin: 14px 0 8px;
  font-family: "IM Fell English", Georgia, serif;
  font-size: 16px;
  color: #5c4a2e;
}

.invite-line.alt {
  margin-top: 18px;
  font-style: italic;
  font-size: 14px;
  color: #8a7550;
}

/* Join code as letterpress tiles. */

.code-tiles {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 8px 0 6px;
}

/* Georgia, not IM Fell: the Fell figures are old-style to the point of
   ambiguity (its 5 reads as a long-ſ), and this code exists to be read
   aloud and retyped. */
.code-tiles .tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 50px;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--parchment, #f3ead3);
  background: linear-gradient(#4a3a26, #38291a);
  border: 1px solid #241708;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px rgba(160, 128, 64, 0.6),
    0 2px 5px rgba(46, 30, 12, 0.35);
}

/* Share row (waiting room). */

.share-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  margin: 4px auto 0;
  max-width: 460px;
}

.share-row input {
  flex: 1;
  max-width: none;
  text-align: left;
  font-size: 13px;
  padding: 6px 10px;
}

/* The roster: four seats, filled or awaiting. */

.roster {
  list-style: none;
  margin: 26px auto 18px;
  padding: 0;
  max-width: 360px;
  counter-reset: seat;
  text-align: left;
}

.roster li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 4px 7px;
  border-bottom: 1px solid rgba(138, 109, 59, 0.4);
  counter-increment: seat;
}

.roster li::before {
  content: counter(seat, upper-roman) ".";
  flex: 0 0 34px;
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: 15px;
  color: var(--gold-dim, #8a6d3b);
}

.roster .r-name {
  font-family: "IM Fell English", Georgia, serif;
  font-size: 19px;
  color: var(--ink, #3a2d1c);
}

.roster li.empty {
  color: #a08d66;
  font-style: italic;
  font-size: 14px;
  border-bottom-style: dashed;
}

.tag {
  font-size: 9px;
  font-variant: small-caps;
  letter-spacing: 0.16em;
  padding: 1px 8px 2px;
  border-radius: 8px;
  border: 1px solid #9c8a63;
  color: #7a6340;
}

.tag.gold {
  background: var(--gold-dim, #8a6d3b);
  border-color: #6e5527;
  color: var(--parchment, #f3ead3);
}

.waiting-line {
  margin: 8px 0 0;
  font-family: "IM Fell English", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: #6b5636;
}

/* Resume links (home). */

#resume {
  margin-top: 6px;
}

.resume-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  max-width: 340px;
  margin: 0 auto;
  padding: 5px 8px;
  font-family: "IM Fell English", Georgia, serif;
  font-size: 15px;
  color: #5c4a2e;
  text-decoration: none;
  border-bottom: 1px dotted rgba(138, 109, 59, 0.5);
}

.resume-link:hover {
  color: var(--ink, #3a2d1c);
  background: rgba(255, 255, 255, 0.3);
}

.resume-date {
  font-size: 11px;
  color: #a08d66;
}

.hint {
  color: #a89f88;
  font-size: 0.9em;
}

@media (max-width: 560px) {
  .sheet {
    padding: 30px 22px 24px;
  }

  .masthead {
    font-size: 56px;
  }
}

/* --- Table screen: layout A grid skeleton --- */

#screen-table {
  display: grid;
  grid-template-areas:
    "opps opps log"
    "center center log"
    "you you log";
  grid-template-columns: 1fr 1fr 280px;
  /* minmax floor + min-height (not height): on short viewports a hard
     100vh let the auto rows starve the centre row to nothing — market and
     dev board invisible, #you overflowing past the fold (playtest at
     1366x768). Better to let the page scroll than to hide the board. */
  grid-template-rows: auto minmax(230px, 1fr) auto;
  gap: 8px;
  min-height: 100vh;
  padding: 8px;
}

#opponents { grid-area: opps; }
#center { grid-area: center; }
#you { grid-area: you; }
#log { grid-area: log; }

#opponents, #center, #you, #log {
  background: #2a2723;
  border: 1px solid #3d382f;
  border-radius: 6px;
  padding: 10px;
  overflow: auto;
}

#center {
  display: flex;
  gap: 10px;
}

#you {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Full-screen dimmed overlays: scoring and the scry modal. (The hover zoom
   is deliberately NOT one of these — a full-screen overlay appearing under
   the cursor fires the hovered card's mouseleave and hides itself again.) */
#scoring, #scry-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 7, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

/* Hover zoom: a docked reading copy on the left edge. pointer-events: none
   so it can never swallow the cursor (which is what made hover appear
   broken: the old inset-0 overlay covered the hovered card, mouseleave
   fired, and the zoom hid itself within a frame). */
#zoom {
  position: fixed;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  pointer-events: none;
  filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.65));
}

/* app.js docks the preview on the half of the screen the cursor is NOT on. */
#zoom.dock-right {
  left: auto;
  right: 306px; /* clear of the 280px log column */
}

#zoom.dock-right .card.zoom {
  transform-origin: right center;
}

/* Short viewports: shrink the whole preview so it can't blanket the
   prompt bar (playtest at 1366x768). */
@media (max-height: 840px) {
  #zoom {
    transform: translateY(-50%) scale(0.8);
  }
}

/* --- Table screen: zone internals (card/borough visual language is
   cards.css's job; this is purely arranging those pieces within a zone). --- */

.zone-label {
  margin: 0 0 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a89f88;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #3d382f;
  border: 1px solid #55503f;
  border-radius: 10px;
  padding: 2px 9px;
  font-size: 12px;
  white-space: nowrap;
}

.chip.final {
  background: #4a3320;
  border-color: #a08040;
  color: #f3ead3;
}

/* Poverty danger ramp (thresholds in app.js's povChip). */
.chip.pov.warn {
  border-color: #a06a20;
  color: #e0a030;
}

.chip.pov.bad {
  background: #4a1f1a;
  border-color: #c05030;
  color: #f0b0a0;
}

.empty-note {
  color: #7a7362;
  font-size: 12px;
  font-style: italic;
}

/* Opponents strip */

#opponents {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.opp-panel {
  flex: 1 1 220px;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #232019;
  border: 1px solid #3d382f;
  border-radius: 6px;
  padding: 8px 10px;
}

.opp-panel.current {
  border-color: #d4b96a;
  box-shadow: 0 0 0 1px #d4b96a;
}

/* T21: choose_player prompt — clickable opponent panels. */
.opp-panel.selectable {
  cursor: pointer;
  border-color: #d4b96a;
  box-shadow: 0 0 0 2px #d4b96a;
}

.opp-panel.selectable:hover {
  background: #2a2620;
}

.opp-name {
  font-size: 13px;
  font-weight: bold;
  color: #e8e0cc;
}

.opp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.opp-stacks {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  min-height: 50px;
  /* Bound the strip: 40 built stacks otherwise grow the top row until the
     player's own area (prompt bar, final-turns chip) leaves the viewport. */
  max-height: 132px;
  overflow-y: auto;
}

/* Center strip: deck / development board / borough market */

#center {
  align-items: flex-start;
}

#deck-area {
  flex: 0 0 auto;
}

#dev-board {
  flex: 1 1 auto;
  overflow-x: auto;
}

#market {
  flex: 1 1 220px;
}

.dev-grid {
  display: grid;
  grid-template-columns: repeat(5, 120px);
  grid-auto-rows: 175px;
  gap: 8px;
}

.dev-cell {
  border: 1px dashed #55503f;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-cell.disabled {
  border-style: solid;
  border-color: #3d382f;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.25) 0 6px, transparent 6px 12px);
  opacity: 0.4;
}

/* T21: a board cell is clickable when it answers a draw, a Southwark
   exchange target, or a choose_board_card (Coffee House) prompt. */
.dev-cell.selectable {
  cursor: pointer;
  border-style: solid;
  border-color: #d4b96a;
  box-shadow: 0 0 0 2px #d4b96a;
}

.dev-cell.selectable:hover {
  background: rgba(212, 185, 106, 0.12);
}

.market-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Your area: borough pile / display / prompt / hand / stats */

#you.your-turn {
  border-color: #d4b96a;
  box-shadow: 0 0 0 1px #d4b96a;
}

#you-boroughs {
  display: flex;
  min-height: 110px;
}

.display-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  min-height: 175px;
}

/* T21: floating "New stack" develop-placement target (Target: -1). */
.new-stack-slot {
  width: 120px;
  height: 175px;
  flex-shrink: 0;
  border-radius: 7px;
  border: 2px dashed #55503f;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  color: #7a7362;
}

.new-stack-slot.selectable {
  cursor: pointer;
  border-color: #d4b96a;
  color: #d4b96a;
  box-shadow: 0 0 0 2px #d4b96a;
  transition: transform 0.1s ease-out;
}

.new-stack-slot.selectable:hover {
  transform: translateY(-4px);
}

#prompt-bar {
  flex-shrink: 0; /* never compress inside #you — squeezed, its border crossed the content and read as fake strikethrough (playtest) */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  background: #3d3320;
  border: 1px solid #a08040;
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 13px;
  min-height: 1.4em;
}

.prompt-text {
  color: #e8e0cc;
}

.hand-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#you-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Log — sticky and viewport-capped. When the grid grows past the viewport
   (min-height layout), an uncapped log column stretches to full page height
   and never scrolls INTERNALLY, so the visible slice froze on the game's
   first entries forever (endgame playtest, both seats, every game). Pinned
   with its own scrollport, the follow-the-bottom logic works again. */
#log {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 8px;
  height: calc(100vh - 16px);
  align-self: start;
}

.log-entry {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #cfc6ac;
}

.log-entry.mine {
  color: #e8e0cc;
  font-weight: bold;
}

.log-divider {
  margin: 6px 0;
  padding: 3px 0;
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d4b96a;
  border-top: 1px solid #d4b96a;
  border-bottom: 1px solid #d4b96a;
}

/* Scoring overlay */

.score-panel {
  position: relative;
  background: #2a2723;
  border: 1px solid #55503f;
  border-radius: 8px;
  padding: 0 24px;
  max-width: 90vw;
  max-height: 85vh;
  overflow: auto;
}

/* Sticky header: Close stays reachable however far a big reveal scrolls
   (it used to be absolute-positioned content that scrolled away). */
.score-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -24px;
  padding: 16px 24px 10px;
  background: #2a2723;
}

.score-head h2 {
  margin: 0;
}

/* Scroll cue, same treatment as the help panel: the reveal often continues
   below the fold. */
.score-panel::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: 30px;
  margin-top: -10px;
  background: linear-gradient(rgba(42, 39, 35, 0), #2a2723);
  pointer-events: none;
}

.winner-banner {
  font-size: 15px;
  color: #d4b96a;
  margin: 0 0 14px;
}

.score-table {
  border-collapse: collapse;
  margin-bottom: 18px;
}

.score-table th,
.score-table td {
  border: 1px solid #55503f;
  padding: 5px 12px;
  text-align: center;
  font-size: 13px;
}

.score-table th {
  color: #a89f88;
  font-weight: normal;
}

.score-table th.winner {
  color: #d4b96a;
  font-weight: bold;
}

.score-table td:first-child {
  text-align: left;
  color: #a89f88;
}

.score-table .final-row td {
  font-weight: bold;
  color: #e8e0cc;
}

.reveal-area {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.reveal-col h4 {
  margin: 0 0 6px;
  font-size: 12px;
  color: #a89f88;
}

.reveal-row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

/* --- Toast --- */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(480px, 90vw);
  background: var(--parchment, #f3ead3);
  color: var(--ink, #3a2d1c);
  border: 2px solid var(--border-dark, #4a3320);
  border-radius: 6px;
  padding: 10px 18px;
  box-shadow:
    inset 0 0 0 2px var(--parchment, #f3ead3),
    inset 0 0 0 3px var(--gold, #a08040),
    0 6px 18px rgba(0, 0, 0, 0.5);
  z-index: 100;
}

/* --- St Pancras scry modal (T21) --- */

.scry-panel {
  background: #2a2723;
  border: 1px solid #55503f;
  border-radius: 8px;
  padding: 20px 24px;
  max-width: 90vw;
  max-height: 85vh;
  overflow: auto;
  text-align: center;
}

.scry-panel h3 {
  margin-top: 0;
}

.scry-cards {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 12px;
}

.scry-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.scry-label {
  font-size: 11px;
  color: #d4b96a;
  min-height: 1.3em;
}

/* --- Fixed corner buttons: help ("?") and the creator's player-links
   popover, both available from anywhere their screen is visible. --- */

.corner-btn {
  position: fixed;
  z-index: 30;
  border-radius: 20px;
}

.help-btn {
  right: 16px;
  bottom: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 18px;
  font-weight: bold;
}

.links-btn {
  top: 8px;
  right: 8px;
}

/* --- Help panel --- */

#help {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(10, 9, 7, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.help-panel {
  position: relative;
  background: #2a2723;
  border: 1px solid #55503f;
  border-radius: 8px;
  padding: 20px 26px 0;
  max-width: 640px;
  max-height: 85vh;
  overflow: auto;
}

/* Scroll cue: a sticky bottom fade, so a skimming reader can tell the
   rules continue below the fold (playtest: loans/endgame were invisible). */
.help-panel::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: 30px;
  margin-top: -10px;
  background: linear-gradient(rgba(42, 39, 35, 0), #2a2723);
  pointer-events: none;
}

.help-panel h2 {
  margin: 18px 0 8px;
}

.help-panel h2:first-child {
  margin-top: 0;
}

.help-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.legend, .rules {
  margin: 0;
  padding-left: 22px;
}

.legend li, .rules li {
  margin-bottom: 8px;
  line-height: 1.4;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Player-links popover --- */

#links-popover {
  position: absolute;
  top: 44px;
  right: 8px;
  z-index: 30;
  width: 320px;
}

.links-panel {
  background: #2a2723;
  border: 1px solid #55503f;
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.links-panel h3 {
  margin: 0 0 10px;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid #3d382f;
}

.link-row:first-of-type {
  border-top: none;
}

.link-name {
  flex: 1 1 80px;
  font-size: 13px;
}

.link-result {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-basis: 100%;
}

.link-input {
  flex: 1;
  font-size: 11px;
  padding: 4px 6px;
}