/* Treasure Hunters.
 *
 * The field is deep water and card-table felt at once; the hardware is brass, because the
 * physical game moves yellow chips up four printed tracks. Everything numeric is set in a
 * monospace face with tabular figures: this is a game where the number on the card IS the
 * rule, and the columns should line up like a ship's log.
 *
 * No web fonts, no external requests of any kind - the game must play with the internet
 * unplugged (docs/07-delivery.md).
 */

:root {
  --abyss: #071a24;
  --fathom: #0e2e3b;
  --brine: #1b4a5a;
  --brass: #c9922e;
  --brass-dim: #6b4f1c;
  --bone: #e8e2d3;
  --blood: #a8322d;
  --verdigris: #4fa88b;

  --ink-1: var(--bone);
  --ink-2: #9db2bb;
  /* The quietest ink still has to be readable. At #5d7883 this measured 3.78:1 on the page
     and 3.45:1 inside a panel - under AA - and it is the colour worn by the smallest text
     in the game: upgrade rungs, panel titles, pile names, the masthead meta. */
  --ink-3: #7e97a1;

  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-data: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* --font-data is for tabular numerics: card ranks, meters, ladder columns. Labels and
     prose use --font-label. Before this split, 40 of the 56 text elements on the game
     table were monospace, which is what made a painted table read as a debug overlay. */
  --font-label: var(--font-ui);

  --gap: clamp(0.75rem, 1.4vw, 1.25rem);
  --radius: 3px;
  --rule: 1px solid var(--brine);

  /* The card in play and the empty slot it leaves behind have to agree, or the
     table jumps every time a card is drawn. Sized so the illustration band has
     room to read as a picture rather than a stripe. */
  --card-w: clamp(14rem, 60vw, 20rem);
}

* {
  box-sizing: border-box;
}

/* A class with a display rule outranks the UA [hidden] rule, which silently resurrects
   anything toggled with .hidden = true. Settle it once, here. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--abyss);
  background-image: radial-gradient(ellipse at 50% -10%, #10394a 0%, var(--abyss) 62%);
  color: var(--ink-1);
  font-family: var(--font-ui);
  font-size: clamp(14px, 0.5vw + 12px, 16px);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1,
h2 {
  margin: 0;
  font-weight: 400;
}

/* ---------------------------------------------------------------- masthead */

.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* The table is a control surface, not a document. Prevent an imprecise tap or
     long-press on prompts such as “Which pile?” from opening mobile search/callouts. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.masthead {
  display: flex;
  align-items: baseline;
  gap: var(--gap);
  padding: 0.7rem clamp(0.75rem, 2vw, 1.5rem);
  border-bottom: var(--rule);
  background: linear-gradient(180deg, rgba(14, 46, 59, 0.9), transparent);
}

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  letter-spacing: 0.02em;
  color: var(--bone);
  white-space: nowrap;
}

.wordmark--large {
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.05;
  margin-bottom: 0.4rem;
}

.tally {
  display: flex;
  gap: 1.25rem;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.tally b {
  font-weight: 400;
  color: var(--ink-2);
}

.pips {
  letter-spacing: 0.18em;
  margin-left: 0.4rem;
}

.pips--won {
  color: var(--brass);
}

.pips--lost {
  color: var(--blood);
}

.masthead-meta {
  margin-left: auto;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}

/* ------------------------------------------------------------------ layout */

.layout {
  flex: 1;
  position: relative;
  display: grid;
  /* The left rail carries the four upgrade tracks side by side. At 17rem each track column
     was 54px, too narrow for "Evade 10-12" on one line at any readable size, which is what
     made the panel wrap mid-phrase. The centre of the table has room to spare. */
  grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr) minmax(15rem, 19rem);
  gap: var(--gap);
  padding: var(--gap);
  align-items: stretch;
}

.rail {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  gap: var(--gap);
  min-width: 0;
}

.rail > .panel {
  flex: 0 0 auto;
}

.panel {
  background: linear-gradient(180deg, rgba(27, 74, 90, 0.22), rgba(7, 26, 36, 0.4));
  border: var(--rule);
  border-radius: var(--radius);
  padding: 0.85rem 0.9rem 1rem;
  min-width: 0;
}

.panel-title {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.7rem;
}

.hint {
  margin: -0.35rem 0 0.7rem;
  font-size: 0.76rem;
  color: var(--ink-3);
  min-height: 1.1em;
}

/* Both belong to the phone layout, where the upgrade board takes over the screen and needs
   its own way out. On desktop the action row's "Never mind" is the way back.
   `.btn.` is load-bearing: `.btn { display: inline-flex }` is declared later in this file
   and was winning on equal specificity, so the in-panel button leaked onto desktop and the
   player was offered two different "Never mind" buttons in two different places. */
.upgrade-choice-close,
.btn.upgrade-choice-back {
  display: none;
}

/* --------------------------------------------------- health: 21 real ticks */

/* The printed tracker runs 21 down to 0, so the meter is 21 discrete marks that go
   out one at a time - not a percentage bar. */
.meter {
  display: flex;
  gap: 2px;
  height: 2.1rem;
  align-items: stretch;
}

.tick {
  flex: 1;
  border-radius: 1px;
  background: #0b2330;
  box-shadow: inset 0 0 0 1px rgba(27, 74, 90, 0.55);
  transition: background 220ms ease, box-shadow 220ms ease;
}

.tick.lit {
  background: linear-gradient(180deg, var(--verdigris), #2f7a63);
  box-shadow: none;
}

.meter.low .tick.lit {
  background: linear-gradient(180deg, #d05149, var(--blood));
}

.meter.critical .tick.lit {
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.45;
  }
}

.meter-read {
  margin: 0.5rem 0 0;
  font-family: var(--font-data);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.meter-of {
  font-size: 0.8rem;
  color: var(--ink-3);
  margin-left: 0.15rem;
}

/* ------------------------------------------- the signature: upgrade tracks */

.board {
  display: grid;
  /* minmax(0,...) rather than 1fr: a grid track will not shrink below its min-content
     width by default, so the longest upgrade note pushed the Guile column out through
     the side of the panel. That was necessary but not sufficient - see .track's
     min-width, .track-name's stacking, and .abilities' grid-column, each of which was
     independently pushing the same column out. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.track {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* A floor for the minmax(0,1fr) above: a flex item will not shrink past its content
     either, so both the grid track and the item in it have to be told they may. */
  min-width: 0;
  gap: 0.3rem;
  padding: 0.4rem 0.25rem 0.3rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: rgba(7, 26, 36, 0.5);
}

.track.pickable {
  cursor: pointer;
  border-color: var(--brass);
  background: rgba(201, 146, 46, 0.1);
}

.track.pickable:hover,
.track.pickable:focus-visible {
  background: rgba(201, 146, 46, 0.2);
}

.track.temporarily-unavailable {
  opacity: 0.32;
  filter: grayscale(0.72);
}

.track.chosen {
  border-color: var(--verdigris);
  background: rgba(79, 168, 139, 0.14);
}

.rungs {
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
}

.rung {
  min-height: 2.6rem;
  height: auto;
  padding: 0.3rem 0.25rem;
  border-radius: 1px;
  background: #0b2330;
  box-shadow: inset 0 0 0 1px rgba(27, 74, 90, 0.5);
  display: grid;
  place-items: center;
  /* "Defeat ≤4" and "Pirates → treasure" are prose, not tabular data. Monospace cost about
     a fifth of the width per line here, which is what forced the mid-phrase wrapping. */
  font-family: var(--font-label);
  /* This was 0.5rem - eight pixels of body copy carrying the game's strategy, at 3.45:1. */
  font-size: 0.7rem;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  color: var(--ink-3);
  transition: transform 260ms cubic-bezier(0.34, 1.4, 0.64, 1), background 200ms ease;
}

.rung.held {
  /* the brass chip */
  background: linear-gradient(180deg, #e8b455, var(--brass) 55%, #8f6318);
  color: #2a1c05;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* A level you have already bought is earned, not spent. This used to be --ink-3 on bare
   --brass-dim, which measured 1.62:1: the least legible thing in the app was the thing the
   player had paid for, and it sat below brighter rungs they had not bought yet. Now it is
   a settled, darker brass - clearly held, clearly quieter than the current chip. */
.rung.below {
  background: linear-gradient(180deg, #5a4116, #3d2c0e);
  color: #f3e3c0;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.rung-level--conversion {
  display: grid;
  grid-template-rows: repeat(3, auto);
  place-items: center;
  line-height: 0.9;
}

.rung-conversion-arrow {
  line-height: 0.7;
  opacity: 0.9;
}

/* In the guided combat drill every purchased rung stays fully lit so the two acquired
   Cannons levels visibly explain the +3 used in the scripted attack calculation. */
.guided-upgrades--all-bright .rung.below:not(.base) {
  background: linear-gradient(180deg, #e8b455, var(--brass) 55%, #8f6318);
  color: #2a1c05;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.rung.base {
  min-height: 0;
  height: 0.5rem;
  padding: 0;
  background: #0a1f2a;
  box-shadow: inset 0 0 0 1px rgba(27, 74, 90, 0.35);
  font-size: 0;
}

.rung.base.held {
  min-height: 0;
  height: 0.5rem;
  font-size: 0.58rem;
}

.track-name {
  font-family: var(--font-label);
  font-size: 0.78rem;
  /* CANNONS is the longest track name and the column is a quarter of the rail; any more
     tracking than this and it clips. */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-2);
}

.track-note {
  font-size: 0.6rem;
  text-align: center;
  color: var(--ink-3);
  min-height: 2.2em;
  line-height: 1.25;
}

/* Span the whole board, like .board-guide below it. Without this it is a grid item in
   column one, a quarter of the width, and its chips overflow across the other three -
   which is what put the Guile track outside the panel border. */
.abilities {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.6rem;
}

.ability {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.12rem 0.34rem;
  border: 1px solid var(--brine);
  border-radius: 2px;
  color: var(--ink-3);
}

.ability.on {
  border-color: var(--brass);
  color: var(--brass);
}

/* The flash is a moment; this is the record. It has to survive being glanced at. */
.ability.spent {
  border-color: var(--blood);
  color: var(--blood);
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------- the table */

.table {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Anchored to the top, not centred: the empty card slot collapses before the draw (see
     .table:has(#stageCard:empty)), and centring would slide the piles down and back up
     again on every turn. The piles are the tap target - they hold still. */
  justify-content: flex-start;
  gap: var(--gap);
  min-width: 0;
  padding: 0.25rem 0 1rem;
}

.piles {
  display: flex;
  gap: clamp(1rem, 4vw, 2.5rem);
}

.cooperative-turns {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--crew-count, 4), minmax(0, 5.25rem));
  gap: clamp(0.45rem, 2.4vw, 1.4rem);
  align-items: stretch;
  justify-content: space-evenly;
  width: 100%;
  padding: 0.15rem clamp(0.35rem, 2vw, 1rem) 0.35rem;
}

.cooperative-turns[hidden] {
  display: none;
}

.cooperative-turn {
  width: 100%;
  min-width: 0;
  padding: 0.25rem;
  border: 1px solid rgba(240, 217, 150, 0.28);
  border-radius: 0.55rem;
  background: rgba(5, 23, 31, 0.82);
  display: grid;
  justify-items: center;
  gap: 0.12rem;
  color: var(--ink-2);
  text-align: center;
  opacity: 0.42;
  filter: grayscale(0.72) brightness(0.72);
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;
}

.cooperative-turn.is-current {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(105, 76, 22, 0.9), rgba(12, 38, 45, 0.94));
  box-shadow: 0 0 0 2px rgba(240, 190, 72, 0.25), 0 0 0.75rem rgba(240, 190, 72, 0.36);
  opacity: 1;
  filter: none;
  transform: translateY(-0.08rem);
}

.cooperative-turn small {
  color: var(--gold-pale);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cooperative-turn strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.52rem;
  line-height: 1.05;
  text-overflow: ellipsis;
}

.cooperative-turn-portrait {
  width: clamp(2.35rem, 6vw, 3.35rem);
  height: clamp(2.35rem, 6vw, 3.35rem);
  border-radius: 0.35rem;
  object-fit: cover;
  object-position: top center;
}

.admiral-bot-portrait {
  object-fit: cover;
  object-position: center;
  box-shadow: inset 0 0 0 1px rgba(235, 213, 145, 0.6), 0 0.2rem 0.45rem rgba(0, 0, 0, 0.35);
}

.layout:has(> .cooperative-turns:not([hidden])) > .rail:first-of-type { grid-column: 1; grid-row: 2; }
.layout:has(> .cooperative-turns:not([hidden])) > .table { grid-column: 2; grid-row: 2; }
.layout:has(> .cooperative-turns:not([hidden])) > .rail:last-of-type { grid-column: 3; grid-row: 2; }

.pile {
  appearance: none;
  font: inherit;
  color: inherit;
  width: clamp(4.5rem, 9vw, 6rem);
  padding: 0;
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: default;
}

.pile-back {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  border: 1px solid var(--brine);
  background:
    repeating-linear-gradient(135deg, rgba(27, 74, 90, 0.55) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, #123443, #0a222d);
  display: grid;
  place-items: center;
  font-family: var(--font-data);
  font-size: 1.1rem;
  color: var(--ink-2);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

/* With the art installed the painted back IS the pile, so the placeholder weave and
   its border get out of the way. */
.has-art .pile-back {
  border-color: transparent;
  background: none;
}

.pile-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
}

/* The count reads over the medallion, so it carries its own plate. */
.pile-count {
  position: relative;
  z-index: 1;
}

.has-art .pile-count {
  padding: 0.05em 0.45em;
  border-radius: 999px;
  background: rgba(7, 26, 36, 0.72);
  box-shadow: inset 0 0 0 1px rgba(201, 146, 46, 0.5);
  color: var(--bone);
}

.pile[data-live="1"] {
  cursor: pointer;
}

.pile[data-live="1"] .pile-back {
  border-color: var(--brass);
  box-shadow: 0 0 0 1px rgba(201, 146, 46, 0.35), 0 8px 22px -12px rgba(201, 146, 46, 0.7);
}

.pile--mapped-treasure .pile-back,
.has-art .pile--mapped-treasure .pile-back {
  border-color: #ffd86a;
  box-shadow:
    0 0 0 2px rgba(255, 216, 106, 0.9),
    0 0 1.15rem 0.32rem rgba(255, 190, 45, 0.78),
    0 0 2.4rem 0.7rem rgba(255, 154, 20, 0.38);
  animation: treasure-map-pulse 1.6s ease-in-out infinite alternate;
}

@keyframes treasure-map-pulse {
  to {
    box-shadow:
      0 0 0 3px rgba(255, 232, 142, 1),
      0 0 1.55rem 0.5rem rgba(255, 202, 58, 0.9),
      0 0 3rem 0.9rem rgba(255, 154, 20, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pile--mapped-treasure .pile-back { animation: none; }
}

.pile[data-live="1"]:hover .pile-back,
.pile[data-live="1"]:focus-visible .pile-back {
  transform: translateY(-5px);
}

.pile-empty .pile-back {
  opacity: 0.35;
  border-style: dashed;
}

.pile-name {
  box-sizing: border-box;
  width: 100%;
  /* Letter-spacing leaves one extra space after the final character. Offset by that
     amount so the visible PILE 1 / PILE 2 lettering, not its invisible trailing space,
     is centered beneath the card. */
  padding-left: 0.14em;
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* -------------------------------------------------------------- the card */

.stage {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: calc(var(--card-w) * 5 / 4);
  position: relative;
}

.stage-card {
  position: relative;
  border-radius: 7px;
}

/* The first multiplayer turn can be announced before a card has established this
   wrapper's dimensions. Give that empty state the card's box so its label is centered. */
.stage-card--your-turn {
  width: var(--card-w);
  aspect-ratio: 4 / 5;
}

.stage-card--your-turn::before {
  content: 'Your Turn';
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff2aa;
  font: 900 clamp(1.7rem, 5vw, 3.2rem)/1 var(--font-display);
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 0 3px 5px #06141d, 0 0 1rem rgba(55, 213, 241, 0.9);
  text-transform: uppercase;
  pointer-events: none;
}

.turn-flash {
  position: fixed;
  z-index: 999;
  inset: 0;
  background: rgba(65, 221, 255, 0.42);
  box-shadow: inset 0 0 5rem 1rem rgba(255, 213, 94, 0.72);
  opacity: 0;
  pointer-events: none;
}

.turn-flash--active {
  animation: your-turn-screen-flash 850ms ease-out both;
}

@keyframes your-turn-screen-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

.card {
  width: var(--card-w);
  aspect-ratio: 4 / 5;
  border-radius: 5px;
  border: 1px solid #cfc6b0;
  background: linear-gradient(175deg, #f5f1e6, #ddd5c2);
  color: #1d2a30;
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0.6rem;
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.85);
  animation: deal 300ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* ------------------------------------------------------- the dressed card face
 *
 * Three layers: illustration, frame, live text. The frames were painted at 1600x2000
 * with the sockets in fixed places, so every position below is a percentage measured
 * off those masters - the card can be any size and the rank still lands in its socket.
 *
 * Text is sized in cqw (percent of the card's own width) rather than rem, for the same
 * reason: one set of numbers that holds from a phone to a projector.
 */

.card--dressed {
  position: relative;
  container-type: inline-size;
  width: var(--card-w);
  /* The illustrations, the frames and the back are all 4:5. */
  aspect-ratio: 4 / 5;
  display: block;
  padding: 0;
  border: none;
  border-radius: 3.5%;
  background: none;
  color: #f7ead0;
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.55));
}

.card--dressed .card-illustration,
.card--dressed .card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.card--dressed .card-illustration {
  /* Both are 4:5, so this crops nothing - the illustration is seen whole, which is
     what it was composed for. */
  object-fit: cover;
  border-radius: 3.5%;
}

/* `fill` rather than `contain`: the frame must land exactly on the card's edges, and a
   rounding difference of one pixel would float the sockets off their marks. */
.card--dressed .card-frame {
  object-fit: fill;
}

.card-rank {
  position: absolute;
  display: grid;
  place-items: center;
  font-family: var(--font-data);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* The sockets are cut out of the frame, so the rank sits on whatever the artwork is
     doing underneath. Cream with a hard shadow reads over sky and over hull alike. */
  color: #ffeec2;
  text-shadow: 0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.9), 0 0 0.3cqw rgba(0, 0, 0, 0.8);
  background: radial-gradient(
    closest-side,
    rgba(9, 28, 38, 0.88),
    rgba(9, 28, 38, 0.72) 62%,
    rgba(9, 28, 38, 0) 100%
  );
}

.card--enemy .card-rank {
  left: 5.6%;
  top: 5.5%;
  width: 20%;
  height: 16.5%;
  box-sizing: border-box;
  border: 0.65cqw solid rgba(194, 153, 75, 0.9);
  border-radius: 50%;
  font-size: 9.5cqw;
  background:
    radial-gradient(circle at 38% 32%, rgba(41, 62, 67, 0.98), rgba(8, 25, 34, 0.98) 72%);
  box-shadow:
    inset 0 0 0 0.35cqw rgba(255, 230, 166, 0.2),
    0 0.45cqw 0.8cqw rgba(0, 0, 0, 0.55);
}

.card--boon .card-rank {
  left: 6.2%;
  top: 6.5%;
  width: 23.8%;
  height: 16%;
  font-size: 8.5cqw;
}

.card--treasure .card-rank {
  left: 6.9%;
  top: 6%;
  width: 26.9%;
  height: 22.5%;
  font-size: 11cqw;
}

/* Three circular sockets down the enemy frame's left rail. */
.card-sockets img {
  position: absolute;
  left: 9.2%;
  width: 12.9%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 0.2cqw 0.4cqw rgba(0, 0, 0, 0.55));
}

.card-sockets img:nth-child(1) {
  top: 30.6%;
}

.card-sockets img:nth-child(2) {
  top: 50.6%;
}

.card-sockets img:nth-child(3) {
  top: 72.1%;
}

/* The torn parchment panel, which is part of the frame painting. */
.card-rules {
  position: absolute;
  margin: 0;
  display: grid;
  place-items: center;
  text-align: center;
  text-wrap: balance;
  line-height: 1.2;
  color: #3d2b12;
  text-shadow: none;
}

.card--enemy .card-rules {
  left: 31%;
  top: 75.5%;
  width: 62%;
  height: 18.5%;
  font-size: 4.4cqw;
}

.card--boon .card-rules {
  left: 10%;
  top: 75.5%;
  width: 79%;
  height: 16%;
  font-size: 4.6cqw;
}

@keyframes deal {
  from {
    transform: translateY(-26px) rotate(-3deg);
    opacity: 0;
  }
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-family: var(--font-data);
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.card-suit {
  font-size: 1.15rem;
}

.card.red {
  color: var(--blood);
}

.card-art {
  flex: 1;
  /* A flex child floors at its content's size, so without a min-height the illustration
     pushes past the slot it was given and the card crops it by accident. Floored at a
     band rather than 0, so the wordiest card cannot squeeze the picture out entirely. */
  min-height: 3.5rem;
  margin: 0.4rem 0;
  border-radius: 2px;
  background: rgba(29, 42, 48, 0.06);
  /* The slot is sized by the card, never by the picture inside it: pinning the image
     to these edges is what makes that true, since a percentage height would otherwise
     resolve against the illustration's own dimensions and spill. */
  position: relative;
  overflow: hidden;
}

.card-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The illustrations are portrait (4:5) and the slot is a wide band, so something
     has to give. Contained, they shrink to a stamp between two empty margins; so
     they fill the band instead, framed a third of the way down - the line that keeps
     every captain's face, both ships and the open chest inside the crop. */
  object-fit: cover;
  object-position: 50% 18%;
}

/* No illustration yet: let the name and rules text take the whole face. */
.card--textonly {
  justify-content: center;
  gap: 0.5rem;
}

.card--textonly.card--enemy .card-top > :first-child {
  display: grid;
  place-items: center;
  width: 2.35rem;
  aspect-ratio: 1;
  margin: -0.2rem 0 0 -0.15rem;
  box-sizing: border-box;
  border: 2px solid #9b7638;
  border-radius: 50%;
  background: #17313a;
  color: #fff0c9;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 183, 0.18);
}

.card--textonly .card-name {
  font-size: 0.95rem;
}

.card--textonly .card-text {
  font-size: 0.7rem;
}

.card-name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-align: center;
  color: #445159;
  padding: 0 0.2rem;
}

.card-text {
  font-size: 0.63rem;
  line-height: 1.28;
  text-align: center;
  color: #364349;
}

.card-icons {
  display: flex;
  gap: 0.22rem;
  justify-content: center;
  margin-top: 0.35rem;
}

/* Icon glyphs are illustration and belong to the deck's art set. Until those land the
   strip is a data-driven word mark, derived from cards.json exactly like the engine's
   rules are - so a card can never disagree with what beats it (R-13). */
.icon-chip {
  font-family: var(--font-data);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid #a9a08a;
  border-radius: 2px;
  padding: 0.05rem 0.24rem;
  color: #55503f;
}

.stage-empty {
  width: var(--card-w);
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--brine);
  border-radius: 5px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  color: var(--ink-3);
  font-size: 0.78rem;
}

.stage-roll {
  font-family: var(--font-data);
  text-align: center;
  /* Wide enough that the enlarged verdict below does not wrap "SUCCESS" onto two lines. */
  min-width: 9.5rem;
}

.roll-die {
  font-size: clamp(2.5rem, 7vw, 3.75rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  animation: settle 380ms cubic-bezier(0.2, 1.5, 0.4, 1);
}

@keyframes settle {
  from {
    transform: scale(1.5) rotate(-8deg);
    opacity: 0.2;
  }
}

.roll-sum {
  font-size: 0.72rem;
  color: var(--ink-2);
  margin-top: 0.3rem;
}

/* Whether the roll landed is the single thing the player is waiting to know, and it used
   to be set smaller than the sum printed above it. */
.roll-verdict {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-top: 0.3rem;
}

.roll-verdict.hit {
  color: var(--verdigris);
}

.roll-verdict.miss {
  color: var(--blood);
}

/* ------------------------------------------------------------- decisions */

.controls {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.prompt {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.3rem);
  text-align: center;
  min-height: 1.6em;
  color: var(--bone);
}

.prompt em {
  font-style: normal;
  color: var(--brass);
}

/* Short resolution prompts need a little more breathing room than full instructions.
   Lift Crew's flag call toward the card, and keep revealed-loss copy clear of its shadow. */
.prompt--crew {
  margin-top: -0.15rem;
  margin-bottom: 0.15rem;
}

.prompt--lost-card {
  margin-top: 0.25rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  max-width: 44rem;
}

/*
 * The tap has been taken and the ship has not answered yet. On a good connection this is a
 * flicker nobody sees; on a weak one it is the difference between a button that looks broken and
 * a game that is visibly waiting. Deliberately quiet - a spinner over the board every time
 * somebody draws a card would be worse than the silence it replaces.
 *
 * pointer-events is belt to the sender's braces: the in-flight guard already refuses a second
 * action, and this stops the taps that would have been refused from landing at all.
 */
.actions.is-sending {
  opacity: 0.65;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}

.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  max-width: 13rem;
}

.action--with-reason {
  max-width: 18rem;
}

.cartographer-arrange-waiting,
.cartographer-arrange-copy {
  margin: 0;
  text-align: center;
  color: var(--ink-2);
}

.cartographer-arrange-menu {
  width: min(56rem, calc(100% - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  padding: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid var(--brass);
  border-radius: calc(var(--radius) * 1.5);
  background: linear-gradient(160deg, #102f3b, #061b24);
  color: var(--ink-1);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.65);
}

.cartographer-arrange-menu::backdrop {
  background: rgba(1, 10, 14, 0.8);
  backdrop-filter: blur(3px);
}

.cartographer-map-menu {
  width: min(34rem, calc(100% - 1rem));
  max-height: calc(100dvh - 1rem);
  overflow-y: auto;
  padding: clamp(1rem, 4vw, 1.5rem);
  border: 2px solid var(--brass);
  border-radius: calc(var(--radius) * 1.5);
  color: var(--ink-1);
  background: linear-gradient(160deg, #173f4b, #071a24);
}

.cartographer-map-menu::backdrop { background: rgba(1, 10, 14, 0.82); }
.cartographer-map-copy { color: var(--ink-2); text-align: center; line-height: 1.45; }
.cartographer-map-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.55rem; margin: 1rem 0; }
.cartographer-map-card { padding: 0.7rem 0.45rem; border: 1px solid var(--brine); border-radius: var(--radius); background: rgba(4, 22, 30, 0.85); color: var(--ink-1); cursor: pointer; }
.cartographer-map-card strong,
.cartographer-map-card small { display: block; }
.cartographer-map-card strong { color: var(--bone); font: 800 1.25rem var(--font-data); }
.cartographer-map-card.is-diamond strong { color: #ef7770; }
.cartographer-map-card small { margin-top: 0.2rem; color: var(--ink-3); }
.cartographer-map-card.is-selected { border-color: var(--brass); background: rgba(105, 73, 18, 0.68); box-shadow: 0 0 0 2px rgba(214, 154, 50, 0.2); }
.cartographer-map-total { color: var(--brass); font: 800 0.9rem var(--font-data); text-align: center; }
.cartographer-map-actions { display: flex; justify-content: center; gap: 0.65rem; }

.champion-experience-menu {
  width: min(27rem, calc(100% - 1.5rem));
  padding: 1.5rem;
  border: 2px solid var(--brass);
  border-radius: calc(var(--radius) * 1.5);
  text-align: center;
  color: var(--ink-1);
  background: linear-gradient(160deg, #173f4b, #071a24);
}

.champion-experience-menu::backdrop { background: rgba(1, 10, 14, 0.82); }
.champion-experience-copy { color: var(--ink-2); }
.champion-experience-picker { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem; }
.champion-experience-picker strong { min-width: 3rem; color: var(--brass); font: 700 2rem var(--font-data); }
.champion-experience-actions { display: flex; justify-content: center; gap: 0.65rem; }

.renegade-experience-field {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
  width: min(100%, 30rem);
  box-sizing: border-box;
  margin: 0.65rem auto 0;
  border-color: rgba(89, 238, 163, 0.48);
  background: linear-gradient(180deg, rgba(21, 73, 63, 0.92), rgba(5, 30, 29, 0.96));
  box-shadow: inset 0 0 0 1px rgba(141, 255, 199, 0.08), 0 0.35rem 0.85rem rgba(0, 0, 0, 0.25);
  color: #ddffed;
  cursor: default;
  text-align: left;
}
.renegade-experience-field[hidden] { display: none; }
.renegade-experience-field .action-label { font-weight: 800; }
.renegade-experience-field strong { color: #b9ffda; font: 900 1rem var(--font-data); white-space: nowrap; }
.renegade-experience-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid rgba(141, 255, 199, 0.5); border-radius: 50%; background: rgba(2, 17, 18, 0.7); color: #9cffca; font: 900 0.62rem var(--font-data); }

.edit-identity-button { margin-inline: auto; }
.identity-menu { width: min(25rem, calc(100% - 1.5rem)); text-align: center; }
.identity-avatar-button { appearance: none; display: grid; justify-items: center; gap: 0.45rem; margin: 0.8rem auto 1rem; padding: 0.65rem; border: 1px solid var(--brine); border-radius: var(--radius); color: var(--brass); background: rgba(7, 26, 36, 0.72); cursor: pointer; }
.identity-avatar-button .captain-mode-face { width: 6rem; aspect-ratio: 1; }
.identity-menu .field { text-align: left; }

.cartographer-arrange-board {
  display: grid;
  gap: 1rem;
  margin-block: 1rem;
}

.cartographer-card-tray {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  min-height: 4.5rem;
  padding: 0.65rem;
  border: 1px solid rgba(224, 181, 75, 0.28);
  border-radius: var(--radius);
  background: rgba(20, 62, 75, 0.22);
}

.cartographer-card-tray__empty {
  grid-column: 1 / -1;
  place-self: center;
  margin: 0;
  color: var(--ink-3);
  font-size: 0.76rem;
}

.cartographer-destinations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0.75rem;
}

.cartographer-dropzone {
  min-height: 8.75rem;
  padding: 0.8rem 0.65rem;
  border: 2px dashed rgba(224, 181, 75, 0.48);
  border-radius: var(--radius);
  background: rgba(3, 21, 28, 0.62);
  transition: min-height 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.cartographer-dropzone:has(.cartographer-drag-card) {
  min-height: 10rem;
}

.cartographer-dropzone.is-locked {
  border-style: solid;
  border-color: #c84b4b;
  box-shadow: inset 0 0 0 1px rgba(200, 75, 75, 0.28), 0 0 0.7rem rgba(200, 75, 75, 0.16);
}

.cartographer-dropzone__title {
  margin: 0 0 0.55rem;
  color: var(--brass-light, #f2c76e);
  font: 600 0.9rem var(--font-ui);
  text-align: center;
}

.cartographer-dropzone__cards {
  display: grid;
  gap: 0.45rem;
  min-height: 4.25rem;
}

.cartographer-drag-card {
  appearance: none;
  min-width: 0;
  min-height: 3.2rem;
  padding: 0.55rem;
  border: 1px solid var(--brine);
  border-radius: var(--radius);
  background: rgba(20, 62, 75, 0.94);
  color: var(--ink-1);
  cursor: grab;
  touch-action: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.cartographer-drag-card .card {
  width: min(100%, 8rem);
  margin-inline: auto;
  pointer-events: none;
  animation: none;
}

.cartographer-card-shortcuts {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.4rem;
}

.cartographer-card-shortcut {
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--brine);
  border-radius: 0.25rem;
  background: rgba(7, 26, 36, 0.82);
  color: var(--ink-2);
  font: 0.62rem var(--font-ui);
  cursor: pointer;
}

.cartographer-drag-card:hover,
.cartographer-drag-card:focus-visible {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px rgba(224, 181, 75, 0.2);
}

.cartographer-drag-card.is-dragging {
  position: relative;
  z-index: 3;
  cursor: grabbing;
  opacity: 0.82;
  box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.5);
}

.cartographer-arrange-actions {
  display: flex;
  justify-content: center;
}

@media (max-width: 600px) {
  .cartographer-card-tray,
  .cartographer-destinations {
    gap: 0.4rem;
  }

  .cartographer-dropzone {
    min-height: 8.5rem;
    padding: 0.7rem 0.55rem;
  }

  .cartographer-dropzone__title {
    font-size: 0.72rem;
  }
}

@media (max-width: 480px) and (orientation: portrait) {
  .cartographer-arrange-menu {
    width: calc(100% - 0.5rem);
    padding: 0.65rem;
  }

  .cartographer-arrange-board {
    gap: 0.55rem;
    margin-block: 0.55rem;
  }

  .cartographer-card-tray,
  .cartographer-destinations {
    gap: 0.25rem;
  }

  .cartographer-card-tray,
  .cartographer-dropzone {
    padding: 0.3rem;
  }

  .cartographer-dropzone {
    min-height: 8.75rem;
  }

  .cartographer-drag-card {
    min-height: 0;
    padding: 0.22rem;
  }

  .cartographer-drag-card .card {
    width: 100%;
    max-width: 6rem;
  }

  .cartographer-card-shortcuts {
    flex-wrap: wrap;
    gap: 0.12rem;
    margin-top: 0.2rem;
  }

  .cartographer-card-shortcut {
    padding: 0.15rem 0.2rem;
    font-size: 0.52rem;
  }

  .cartographer-dropzone__title {
    font-size: 0.62rem;
  }
}

/* Boatswain and Cartographer share this chart table. On a short landscape phone the
   full-size cards push the three destinations below the fold, so compress this modal
   into a single non-scrolling workspace while leaving every other viewport untouched. */
@media (max-width: 60rem) and (max-height: 32rem) and (orientation: landscape) {
  .cartographer-arrange-menu {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    width: calc(100% - 0.5rem);
    height: calc(100dvh - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
    box-sizing: border-box;
    padding: 0.35rem 0.55rem;
    overflow: hidden;
  }

  .cartographer-arrange-menu :is(.tutorial-kicker, .tutorial-title) {
    margin-block: 0 0.12rem;
    line-height: 1;
  }

  .cartographer-arrange-menu .tutorial-kicker { font-size: 0.52rem; }
  .cartographer-arrange-menu .tutorial-title { font-size: 0.9rem; }

  .cartographer-arrange-copy {
    font-size: 0.62rem;
    line-height: 1.15;
  }

  .cartographer-arrange-board {
    grid-template-rows: minmax(0, 0.82fr) minmax(0, 1fr);
    gap: 0.3rem;
    min-height: 0;
    margin-block: 0.3rem;
    overflow: hidden;
  }

  .cartographer-card-tray,
  .cartographer-destinations {
    min-height: 0;
    gap: 0.35rem;
  }

  .cartographer-card-tray {
    align-items: start;
    padding: 0.2rem;
    overflow: hidden;
  }

  .cartographer-dropzone,
  .cartographer-dropzone:has(.cartographer-drag-card) {
    min-height: 0;
    padding: 0.2rem;
    overflow: hidden;
  }

  .cartographer-dropzone__title {
    margin-bottom: 0.15rem;
    font-size: 0.58rem;
    line-height: 1;
  }

  .cartographer-dropzone__cards {
    grid-template-columns: repeat(auto-fit, minmax(2.75rem, 1fr));
    gap: 0.15rem;
    min-height: 0;
  }

  .cartographer-drag-card {
    min-height: 0;
    padding: 0.12rem;
  }

  .cartographer-drag-card .card {
    width: clamp(3.2rem, 18dvh, 4.2rem);
    max-width: 100%;
  }

  .cartographer-card-shortcuts {
    flex-wrap: nowrap;
    gap: 0.08rem;
    margin-top: 0.1rem;
  }

  .cartographer-card-shortcut {
    min-width: 0;
    padding: 0.1rem 0.12rem;
    font-size: 0.46rem;
  }

  .cartographer-arrange-actions {
    gap: 0.4rem;
  }

  .cartographer-arrange-actions .btn {
    min-height: 0;
    padding: 0.3rem 0.65rem;
    font-size: 0.7rem;
  }
}

.btn {
  appearance: none;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius);
  border: 1px solid var(--brine);
  background: rgba(27, 74, 90, 0.35);
  color: var(--ink-1);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 90ms ease;
}

.btn:hover:not(:disabled) {
  background: rgba(27, 74, 90, 0.65);
  border-color: var(--brass);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.btn--primary {
  background: linear-gradient(180deg, #e0a63c, var(--brass));
  border-color: #8f6318;
  color: #2a1c05;
  font-weight: 600;
}

.btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #f0b950, var(--brass));
}

.btn--danger {
  border-color: #7a2723;
  color: #eba7a3;
}

.btn--crew-deep {
  border-color: #52c982;
  background: linear-gradient(180deg, rgba(34, 112, 75, 0.58), rgba(12, 62, 44, 0.72));
  box-shadow:
    inset 0 1px rgba(194, 255, 218, 0.14),
    0 0 0.55rem rgba(82, 201, 130, 0.34);
  color: #d9ffe8;
}

.btn--crew-deep:hover:not(:disabled),
.btn--crew-deep:focus-visible {
  border-color: #82e3a8;
  background: linear-gradient(180deg, rgba(45, 139, 94, 0.7), rgba(14, 75, 52, 0.82));
  box-shadow:
    inset 0 1px rgba(218, 255, 231, 0.2),
    0 0 0.8rem rgba(82, 201, 130, 0.52);
  outline: none;
}

.btn--crew-plunder {
  border-color: #d7a83e;
  background: linear-gradient(180deg, rgba(142, 96, 26, 0.58), rgba(73, 47, 13, 0.76));
  box-shadow:
    inset 0 1px rgba(255, 236, 179, 0.18),
    0 0 0.55rem rgba(215, 168, 62, 0.36);
  color: #ffedb5;
}

.btn--crew-plunder:hover:not(:disabled),
.btn--crew-plunder:focus-visible {
  border-color: #f0c65f;
  background: linear-gradient(180deg, rgba(171, 119, 34, 0.7), rgba(91, 59, 15, 0.84));
  box-shadow:
    inset 0 1px rgba(255, 243, 202, 0.24),
    0 0 0.8rem rgba(224, 177, 66, 0.55);
  outline: none;
}

.btn--treasure-haul {
  border-color: #d7a83e;
  background: linear-gradient(180deg, rgba(142, 96, 26, 0.58), rgba(73, 47, 13, 0.76));
  box-shadow:
    inset 0 1px rgba(255, 236, 179, 0.18),
    0 0 0.55rem rgba(215, 168, 62, 0.36);
  color: #ffedb5;
}

.btn--treasure-haul:hover:not(:disabled),
.btn--treasure-haul:focus-visible {
  border-color: #f0c65f;
  background: linear-gradient(180deg, rgba(171, 119, 34, 0.7), rgba(91, 59, 15, 0.84));
  box-shadow:
    inset 0 1px rgba(255, 243, 202, 0.24),
    0 0 0.8rem rgba(224, 177, 66, 0.55);
  outline: none;
}

.btn--health-restore {
  border-color: #ff5d64;
  background: linear-gradient(180deg, rgba(190, 43, 55, 0.72), rgba(105, 19, 31, 0.86));
  box-shadow:
    inset 0 1px rgba(255, 235, 232, 0.26),
    0 0 0.3rem rgba(255, 83, 91, 0.72),
    0 0 0.85rem rgba(237, 45, 59, 0.46);
  color: #fff2ef;
  text-shadow: 0 1px 2px rgba(61, 0, 5, 0.72);
}

.btn--health-restore:hover:not(:disabled),
.btn--health-restore:focus-visible {
  border-color: #ff9a9e;
  background: linear-gradient(180deg, rgba(220, 57, 68, 0.84), rgba(126, 22, 36, 0.92));
  box-shadow:
    inset 0 1px rgba(255, 242, 240, 0.34),
    0 0 0.35rem rgba(255, 110, 116, 0.86),
    0 0 1.05rem rgba(247, 55, 69, 0.62);
  outline: none;
}

.btn--heart-upgrade {
  border-color: #b98aff;
  background: linear-gradient(180deg, rgba(112, 59, 159, 0.68), rgba(56, 28, 91, 0.84));
  box-shadow:
    inset 0 1px rgba(239, 220, 255, 0.2),
    0 0 0.6rem rgba(168, 104, 235, 0.42);
  color: #f3e5ff;
}

.btn--heart-upgrade:hover:not(:disabled),
.btn--heart-upgrade:focus-visible {
  border-color: #d5b4ff;
  background: linear-gradient(180deg, rgba(137, 75, 190, 0.8), rgba(70, 35, 111, 0.92));
  box-shadow:
    inset 0 1px rgba(247, 234, 255, 0.28),
    0 0 0.9rem rgba(184, 117, 247, 0.6);
  outline: none;
}

.btn--hide {
  border-color: #c99a3b;
  background: linear-gradient(180deg, rgba(49, 59, 64, 0.96), rgba(14, 19, 22, 0.98));
  box-shadow:
    0 0 0 1px #050708,
    inset 0 0 0 1px rgba(207, 220, 224, 0.14),
    0 0 0.45rem rgba(201, 154, 59, 0.22);
  color: #f1f5f4;
  text-shadow: 0 1px 2px #000;
}

.btn--hide:hover:not(:disabled),
.btn--hide:focus-visible {
  border-color: #e4bd63;
  background: linear-gradient(180deg, rgba(67, 79, 84, 0.98), rgba(20, 27, 30, 1));
  box-shadow:
    0 0 0 1px #050708,
    inset 0 0 0 1px rgba(232, 241, 243, 0.22),
    0 0 0 2px rgba(228, 189, 99, 0.18),
    0 0 0.65rem rgba(201, 154, 59, 0.3);
  outline: none;
}

.btn--with-reason {
  flex-direction: column;
  gap: 0.12rem;
}

.btn--with-reason:disabled {
  opacity: 0.62;
}

.action-reason {
  display: block;
  margin: 0;
  font-size: 0.64rem;
  line-height: 1.15;
  text-align: center;
  color: var(--ink-2);
  white-space: nowrap;
}

.tray {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  padding: 0.6rem 0.7rem;
  border: 1px dashed var(--brass);
  border-radius: var(--radius);
  background: rgba(201, 146, 46, 0.07);
}

/* -------------------------------------------------------- card chips/strips */

.chip {
  appearance: none;
  font-family: var(--font-data);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  padding: 0.28rem 0.5rem;
  min-width: 2.6rem;
  border-radius: 2px;
  border: 1px solid #cfc6b0;
  background: linear-gradient(175deg, #f5f1e6, #ddd5c2);
  color: #1d2a30;
  cursor: default;
}

.chip.red {
  color: var(--blood);
}

.chip.chip--black-discard {
  border-color: #f5f1e6;
  background: linear-gradient(175deg, #1d2a30, #050607);
  color: #f5f1e6;
}

button.chip {
  cursor: pointer;
}

button.chip:hover,
button.chip:focus-visible {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px rgba(201, 146, 46, 0.4);
}

.cardstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  max-height: 8.5rem;
  overflow-y: auto;
}

.cardstrip--dim .chip {
  opacity: 0.62;
}

.cardstrip--piles {
  display: grid;
  gap: 0.65rem;
}

.discard-group {
  min-width: 0;
}

.discard-label {
  margin: 0 0 0.3rem;
  color: var(--ink-3);
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.discard-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.empty-note {
  font-size: 0.72rem;
  color: var(--ink-3);
  font-style: italic;
}

.haul-read {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-data);
}

.haul-total {
  font-size: 2rem;
  line-height: 1;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

.haul-goal {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.haul-bar {
  height: 4px;
  margin: 0.5rem 0 0.7rem;
  background: #0b2330;
  border-radius: 2px;
  overflow: hidden;
}

.haul-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brass-dim), var(--brass));
  transition: width 400ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.panel--haul {
  cursor: pointer;
}

.panel--haul:hover,
.panel--haul:focus-visible {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px rgba(201, 146, 46, 0.28);
  outline: none;
}

.treasure-menu {
  width: min(28rem, calc(100vw - 1.5rem));
}

.treasure-menu .treasure-summary {
  display: grid;
  gap: 0.18rem;
  margin-top: 0.35rem;
}

.treasure-summary-total {
  color: var(--brass);
  font-family: var(--font-data);
  font-size: clamp(0.95rem, 3vw, 1.2rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.treasure-inventory {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
  max-height: min(55vh, 24rem);
  overflow-y: auto;
}

.treasure-inventory-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--brine);
  border-radius: var(--radius);
  background: rgba(7, 26, 36, 0.72);
  color: var(--ink-2);
  font-size: 0.78rem;
}

.treasure-inventory-card.is-highest,
.treasure-inventory-card.is-lowest {
  border-color: var(--brass);
  color: var(--bone);
}

/* ----------------------------------------------------------------- the log */

.log {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 15rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.3rem;
  font-size: 0.72rem;
  line-height: 1.35;
}

.log li {
  color: var(--ink-2);
  border-left: 2px solid var(--brine);
  padding-left: 0.5rem;
}

.log li.k-DAMAGE,
.log li.k-STOLEN,
.log li.k-LOSE_ROUND,
.log li.k-MATCH_LOST {
  border-left-color: var(--blood);
}

.log li.k-TREASURE,
.log li.k-CREW_COLLECT,
.log li.k-RECLAIM,
.log li.k-WIN_ROUND,
.log li.k-MATCH_WON,
.log li.k-EVADED,
.log li.k-DEFEATED {
  border-left-color: var(--verdigris);
}

.log li.k-SECOND_CHANCE {
  border-left-color: var(--brass);
  color: var(--brass);
}

.log li.k-ROUND_START {
  border-left-color: var(--brass);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ seats */

.seats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.6rem clamp(0.75rem, 2vw, 1.5rem);
  border-top: var(--rule);
  background: rgba(7, 26, 36, 0.75);
}

.seat {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--brine);
  border-radius: 999px;
  font-size: 0.78rem;
}

.seat.active {
  border-color: var(--brass);
  color: var(--brass);
}

.seat.you .seat-name {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.seat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verdigris);
}

.seat.away .seat-dot {
  background: var(--ink-3);
}

.seat-role {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.seat-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.seat-captain-name {
  color: var(--brass);
  font-family: var(--font-display);
  font-size: 0.82rem;
}

.seat-trait-cue {
  margin-top: 0.12rem;
  color: var(--ink-3);
  font-size: 0.57rem;
  letter-spacing: 0.03em;
}

.seats--captains {
  align-items: stretch;
}

.seats--captains .captains-aboard-label {
  flex-basis: 100%;
  color: var(--brass);
  font: 0.62rem/1.2 var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.seats--captains .seat {
  border-radius: 0.65rem;
  padding: 0.38rem 0.55rem;
}

.seat-trait-button {
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.seat-trait-button:hover,
.seat-trait-button:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.seats--captains .seat-portrait {
  width: 3rem;
  height: 3rem;
}

.captain-trait-menu {
  width: min(25rem, calc(100vw - 1.5rem));
  text-align: center;
}

.captain-trait-live {
  display: flex;
  justify-content: center;
  margin: 0.8rem auto;
}

.captain-trait-live-portrait {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
  box-shadow: 0 0 0 2px var(--brass), 0 0.5rem 1.1rem rgba(0, 0, 0, 0.45);
}

.captain-trait-live-copy {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.55;
}

@media (max-width: 34rem) {
  .seats--captains .seat {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
  }
}

/* Low-priority crew chatter lives beneath the roster, outside the decision surface. */
.emotes {
  display: flex;
  position: relative;
  z-index: 20;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.4rem clamp(0.75rem, 2vw, 1.5rem) calc(0.4rem + env(safe-area-inset-bottom, 0px));
  overflow: visible;
  border-top: 1px solid rgba(27, 74, 90, 0.55);
  background: rgba(7, 26, 36, 0.88);
}

.emote-btn {
  appearance: none;
  flex: none;
  border: 1px solid var(--brine);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  background: rgba(27, 74, 90, 0.3);
  color: var(--ink-2);
  font: 0.72rem/1.2 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
}

.emote-btn:hover,
.emote-btn:focus-visible {
  border-color: var(--brass);
  color: var(--bone);
  background: rgba(27, 74, 90, 0.65);
}

.emote-toggle {
  position: sticky;
  left: 0;
  z-index: 1;
  border-color: var(--brass-dim);
  background: rgba(7, 26, 36, 0.97);
  color: var(--brass);
}

.emote-toggle.off {
  border-color: var(--ink-3);
  color: var(--ink-3);
}

.emote-category {
  position: relative;
  flex: none;
}

.emote-category-btn[aria-expanded="true"] {
  border-color: var(--brass);
  background: rgba(201, 146, 46, 0.18);
  color: var(--bone);
}

.emote-menu {
  position: absolute;
  z-index: 45;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translateX(-50%);
  display: flex;
  width: max-content;
  min-width: 9.5rem;
  max-height: min(19rem, 55vh);
  overflow-y: auto;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.45rem;
  border: 1px solid rgba(201, 146, 46, 0.72);
  border-radius: var(--radius);
  background: rgba(7, 26, 36, 0.98);
  box-shadow: 0 0.65rem 1.5rem rgba(0, 0, 0, 0.58);
}

.emote-menu[hidden] {
  display: none;
}

.emote-option {
  width: 100%;
  border-radius: var(--radius);
  text-align: left;
}

.emote-category:first-of-type .emote-menu {
  left: 0;
  transform: none;
}

.emote-category:last-child .emote-menu {
  right: 0;
  left: auto;
  transform: none;
}

.emote-toast {
  position: fixed;
  z-index: 44;
  top: 50%;
  left: 50%;
  max-width: min(22rem, calc(100vw - 1.5rem));
  pointer-events: none;
  padding: 0.7rem 1rem;
  border: 2px solid var(--brass);
  border-radius: 0.9rem 0.9rem 0.2rem 0.9rem;
  background: rgba(7, 26, 36, 0.96);
  box-shadow:
    0 0 0 2px rgba(201, 146, 46, 0.14),
    0 0.7rem 1.7rem rgba(0, 0, 0, 0.55);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  opacity: 0;
}

.emote-sender,
.emote-message {
  display: block;
}

.emote-sender {
  margin-bottom: 0.5rem;
  padding: 0 0.25rem 0.42rem;
  border-bottom: 1px solid rgba(201, 146, 46, 0.55);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.emote-message {
  font: inherit;
}

.emote-toast.show {
  animation: emote-pop 2400ms ease-out both;
}

@keyframes emote-pop {
  0% {
    opacity: 0;
    transform: translateY(-0.4rem) scale(0.95);
  }
  10%,
  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.2rem);
  }
}

.takeover-note {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--brass);
}

.turn-timer-note {
  margin-left: auto;
  color: #ffd477;
  font-size: 0.72rem;
  animation: pulse 1s ease-in-out infinite;
}

.turn-timer-countdown {
  display: inline-grid;
  min-width: 2.5em;
  margin-left: 0.25rem;
  padding: 0.18rem 0.38rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 0.35rem;
  background: rgba(100, 32, 20, 0.7);
  color: #fff3cf;
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1;
}

/* ------------------------------------------------------------------ veils */

.veil {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  padding: var(--gap);
  background: rgba(4, 15, 21, 0.9);
  backdrop-filter: blur(6px);
  z-index: 20;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.results-open {
  overflow: hidden;
}

.veil > * {
  /* Centres while it fits; keeps both ends reachable once it does not. */
  margin: auto;
  flex: 0 0 auto;
}

.veil[hidden] {
  display: none;
}

.sheet {
  width: min(34rem, 100%);
  background: linear-gradient(180deg, rgba(27, 74, 90, 0.3), rgba(7, 26, 36, 0.7));
  border: var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 2.25rem);
}

.tagline {
  color: var(--ink-2);
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
  max-width: 30rem;
}

.joinform {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  min-width: 11rem;
}

.field-label {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

input[type="text"],
.field input {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--brine);
  background: rgba(7, 26, 36, 0.8);
  color: var(--ink-1);
}

.field input:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}

.roster {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.choose {
  border: none;
  margin: 1.4rem 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.pick {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--brine);
  border-radius: var(--radius);
  cursor: pointer;
}

.pick:has(input:checked) {
  border-color: var(--brass);
  background: rgba(201, 146, 46, 0.09);
}

.pick:has(input:disabled) {
  cursor: not-allowed;
  filter: grayscale(0.8);
  opacity: 0.48;
}

.pick span {
  display: flex;
  flex-direction: column;
}

.pick em {
  font-style: normal;
  font-size: 0.74rem;
  color: var(--ink-3);
}

.waiting,
.share {
  font-size: 0.78rem;
  color: var(--ink-3);
  margin: 1rem 0 0;
}

.share code {
  font-family: var(--font-data);
  color: var(--brass);
}

.veil--curtain .sheet--curtain {
  text-align: center;
}

/* The map and the coins are the nice-to-have; the button out is not. It stays on screen
   however tall the rest becomes. */
.curtain-actions {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(7, 26, 36, 0.92) 35%);
  padding-bottom: 0.4rem;
}

.curtain-eyebrow {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.5rem;
}

.curtain-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  line-height: 1.1;
}

.curtain-title.won {
  color: var(--brass);
}

.curtain-title.lost {
  color: var(--blood);
}

.curtain-body {
  color: var(--ink-2);
  margin: 0.7rem 0 1.4rem;
}

.result-emotes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin: 0.3rem auto 1rem;
}

.result-emote {
  border-color: rgba(201, 146, 46, 0.62);
  background: rgba(7, 26, 36, 0.78);
  color: var(--bone);
}

.result-emote:hover,
.result-emote:focus-visible {
  border-color: #f0c86d;
  background: rgba(27, 74, 90, 0.92);
}

.result-sound {
  border-color: rgba(79, 168, 139, 0.75);
  background: rgba(18, 65, 66, 0.82);
  color: #eafff6;
}

.result-sound:hover,
.result-sound:focus-visible {
  border-color: #9ce4c6;
  background: rgba(31, 91, 84, 0.94);
}

.curtain-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.curtain-actions--versus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  width: min(100%, 35rem);
  gap: 0.7rem;
  margin-inline: auto;
}

.curtain--odyssey .curtain-mascot,
.curtain--odyssey .result-feedback,
.curtain--odyssey .ranked-result-ceremony,
.curtain--odyssey .achievement-awards,
.curtain--odyssey .result-emotes,
.curtain--long-voyage .curtain-mascot,
.curtain--long-voyage .result-feedback,
.curtain--long-voyage .ranked-result-ceremony,
.curtain--long-voyage .achievement-awards,
.curtain--long-voyage .result-emotes {
  display: none !important;
}

.curtain--odyssey-choice .curtain-eyebrow,
.curtain--long-voyage-choice .curtain-eyebrow {
  display: none;
}

.curtain--odyssey-choice .sheet--curtain,
.curtain--long-voyage .sheet--curtain {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.curtain--odyssey-choice .curtain-voyage,
.curtain--long-voyage .curtain-voyage { order: 1; }
.curtain--odyssey-choice .curtain-title,
.curtain--long-voyage .curtain-title { order: 2; margin: 0.25rem 0; font-size: clamp(1.45rem, 5vw, 2rem); }
.curtain--odyssey-choice .curtain-body,
.curtain--long-voyage .curtain-body { order: 3; margin: 0.25rem 0 0.8rem; }
.curtain--odyssey-choice .curtain-actions {
  order: 4;
  position: static;
  bottom: auto;
  background: none;
}
.curtain--long-voyage .curtain-actions {
  order: 4;
  position: static;
  bottom: auto;
  background: none;
}
.curtain--odyssey-choice .curtain-actions > .btn,
.curtain--long-voyage .curtain-actions > .btn { min-width: min(100%, 13rem); }

.pips--hides .pip { border-radius: 0.2rem; }

.pips--hides .pip:not(.pip--taken) {
  opacity: 0.62;
  filter: grayscale(0.6) brightness(1.3);
}

.curtain--odyssey .curtain-voyage {
  margin-top: 0;
}

.odyssey-addition-title,
.odyssey-docked-confirmation {
  flex-basis: 100%;
  margin: 0 auto 0.55rem;
  color: var(--bone);
  text-align: center;
}

.odyssey-addition-title {
  font: 700 1.1rem/1.3 var(--font-display);
}

.curtain--odyssey .curtain-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 34rem);
  gap: 0.75rem;
  margin-inline: auto;
}

.curtain--odyssey .curtain-actions > .btn {
  min-height: 3.5rem;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border-color: rgba(211, 169, 83, 0.78);
  background: linear-gradient(180deg, rgba(30, 68, 76, 0.98), rgba(12, 37, 47, 0.98));
  color: #fff4d2;
  box-shadow: inset 0 1px rgba(255, 239, 190, 0.18), 0 5px 12px rgba(0, 0, 0, 0.28);
}

.curtain--odyssey-choice .curtain-actions > .btn:first-of-type,
.curtain--odyssey-choice .curtain-actions > .btn--primary,
.curtain--odyssey-choice .curtain-actions > .long-voyage-choice-note {
  grid-column: 1 / -1;
}

.curtain--odyssey .btn--with-reason .action-label {
  font: 800 0.95rem/1.15 var(--font-display);
}

.curtain--odyssey .btn--with-reason .action-reason {
  max-width: 24rem;
  font-size: 0.78rem;
  line-height: 1.25;
  color: #dce9e5;
  white-space: normal;
  text-wrap: balance;
}

.odyssey-enemy-menu {
  width: min(calc(100% - 1.5rem), 38rem);
  padding: 1.2rem;
  border: 1px solid rgba(211, 169, 83, 0.85);
  border-radius: 0.8rem;
  background: linear-gradient(180deg, #163f4a, #081f2a 75%);
  color: var(--bone);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75);
  text-align: center;
}

.odyssey-enemy-menu::backdrop {
  background: rgba(2, 12, 18, 0.82);
  backdrop-filter: blur(3px);
}

.odyssey-enemy-menu h2 {
  max-width: 30rem;
  margin: 0.35rem auto 1rem;
  font: 800 clamp(1.25rem, 4.5vw, 1.75rem)/1.2 var(--font-display);
  text-wrap: balance;
}

.odyssey-enemy-choices {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.75rem, 4vw, 1.5rem);
}

.odyssey-enemy-choice {
  --card-w: clamp(8.2rem, 35vw, 12rem);
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.55rem;
  background: transparent;
  cursor: pointer;
}

.odyssey-enemy-choice:hover,
.odyssey-enemy-choice:focus-visible {
  border-color: #f1c75b;
  outline: none;
  box-shadow: 0 0 0 3px rgba(241, 199, 91, 0.22), 0 0 1.2rem rgba(241, 199, 91, 0.28);
}

@media (max-width: 32rem) {
  .curtain--odyssey .curtain-actions { grid-template-columns: 1fr; }
  .curtain--odyssey-choice .curtain-actions > .btn:first-of-type,
  .curtain--odyssey-choice .curtain-actions > .btn--primary,
  .curtain--odyssey-choice .curtain-actions > .long-voyage-choice-note { grid-column: auto; }
}

.odyssey-docked-confirmation {
  max-width: 28rem;
  color: var(--ink-2);
  line-height: 1.45;
}

.versus-end-action {
  width: 100%;
  min-height: 3.2rem;
  padding: 0.72rem 0.9rem;
  border-color: #d8a541;
  background: linear-gradient(180deg, rgba(34, 88, 103, 0.98), rgba(11, 42, 55, 0.98));
  color: #fff2ce;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 139, 0.12), 0 0.45rem 1rem rgba(0, 0, 0, 0.36);
}

.versus-end-action:hover:not(:disabled),
.versus-end-action:focus-visible {
  border-color: #f3cf74;
  background: linear-gradient(180deg, rgba(44, 111, 126, 1), rgba(15, 57, 70, 1));
  color: #fff8e7;
  box-shadow: inset 0 0 0 1px rgba(255, 230, 162, 0.22), 0 0 1.1rem rgba(216, 165, 65, 0.3);
}

.versus-end-waiting {
  grid-column: 1 / -1;
  margin-top: 0.15rem;
}

.versus-loss-dialog {
  width: min(92vw, 30rem);
  padding: clamp(1.25rem, 5vw, 2rem);
  border: 2px solid #d79a45;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 50% 0, rgba(157, 54, 43, 0.3), transparent 48%),
    linear-gradient(150deg, #102f39, #071a24 58%, #281619);
  color: #f8edcf;
  text-align: center;
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.72), inset 0 0 2rem rgba(0, 0, 0, 0.38);
}

.versus-loss-dialog::backdrop {
  background: rgba(1, 8, 12, 0.78);
  backdrop-filter: blur(3px);
}

.versus-loss-dialog .tutorial-title { margin-inline: auto; color: #e47a6d; }
.versus-loss-dialog > p:not(.tutorial-kicker) { color: #e7d8b2; line-height: 1.55; }
.versus-loss-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1.25rem;
}

@media (max-width: 30rem) and (orientation: portrait) {
  .curtain-actions--versus,
  .versus-loss-actions {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------ second chance: the beat */

.flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(201, 146, 46, 0.55), transparent 62%);
}

/* The gold wash alone was wordless, and a player who had just spent their one reprieve
   could not tell that was what had happened. */
.flash-word {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff3d6;
  text-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.85), 0 0.1rem 0.3rem rgba(0, 0, 0, 0.9);
}

.flash.fire {
  animation: flare 1600ms ease-out;
}

@keyframes flare {
  8% {
    opacity: 1;
  }
  52% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Successful attacks and evasions can finish a turn in the same network update. This
   brief shared verdict makes that result unmistakable without blocking the next player. */
.roll-success {
  position: fixed;
  z-index: 45;
  top: max(5.5rem, 16dvh);
  left: 50%;
  translate: -50% 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 0.8rem;
  padding: 0.6rem 1.35rem 0.7rem;
  border: 2px solid var(--brass);
  border-radius: 999px;
  background: rgba(7, 26, 36, 0.96);
  box-shadow: 0 0 0 4px rgba(79, 168, 139, 0.22), 0 0.8rem 2rem rgba(0, 0, 0, 0.6);
  color: #b8f2d4;
  font-family: var(--font-display);
  font-size: clamp(1rem, 3vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
}

.roll-success__label {
  grid-row: 1 / span 2;
  color: #b8f2d4;
}

.roll-success__result {
  color: #fff5c5;
  font-size: clamp(1.5rem, 4vw, 2.35rem);
  line-height: 0.95;
}

.roll-success__target {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: none;
}

.roll-success--failure {
  border-color: #d96858;
  box-shadow: 0 0 0 4px rgba(180, 54, 48, 0.28), 0 0.8rem 2rem rgba(0, 0, 0, 0.6);
  color: #ffd2ca;
}

.roll-success--failure .roll-success__label {
  color: #ff9f91;
}

.roll-success.show {
  animation: roll-success 1800ms ease-out both;
}

@keyframes roll-success {
  0% {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.88);
  }
  12%,
  68% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.35rem) scale(1.02);
  }
}

/* ------------------------------------------------------------------ errors */

.err {
  color: #eba7a3;
  font-size: 0.8rem;
}

.err--float {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 50;
  margin: 0;
  padding: 0.55rem 0.9rem;
  border: 1px solid #7a2723;
  border-radius: var(--radius);
  background: rgba(38, 12, 11, 0.96);
  max-width: min(30rem, 92vw);
  text-align: center;
}

.err[hidden] {
  display: none;
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* =========================================================== the art set ===
 *
 * Everything below is reached only when the host has the illustrations installed and
 * the client has set `.has-art` on <body>. Without it the game keeps the typographic
 * table it was built with - which is a real supported state, not a fallback nobody
 * looks at, so nothing here may be load-bearing for legibility or layout.
 */

body.has-art {
  background-image:
    linear-gradient(180deg, rgba(7, 26, 36, 0.82), rgba(7, 26, 36, 0.94)),
    image-set(url('/art/bg-gameplay.webp') 1x);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Portrait phones get the separately composed portrait plate, never a crop of the
   landscape one - the art bible is explicit about it and the compositions differ. */
@media (orientation: portrait) {
  body.has-art {
    background-image:
      linear-gradient(180deg, rgba(7, 26, 36, 0.82), rgba(7, 26, 36, 0.94)),
      image-set(url('/art/bg-gameplay-portrait.webp') 1x);
  }
}

/* -- wordmark becomes the painted logo ----------------------------------- */

.wordmark--art {
  font-size: 0;
  line-height: 0;
}

.wordmark .logo {
  display: block;
  width: auto;
  height: clamp(1.5rem, 2.6vw, 2.1rem);
}

/* Sized against the viewport's SHORTER axis as well as its width. On a 1366x768 laptop the
   width-only clamp gave the logo 208px - over a quarter of the screen - which is how the
   embark screen ended up pushing "Start the Hunt" below the fold. Wide-and-short is the
   common laptop shape, so the height term is the one that has to bind there. */
.wordmark--large .logo {
  height: clamp(5.5rem, min(20vw, 22vh), 13rem);
  margin-inline: auto;
}

/* -- panels become dark wood, cornered in gold --------------------------- */

.has-art .masthead {
  align-items: center;
  border-bottom: none;
  /* The rope divider runs the width of the masthead, seamless in the middle. */
  border-image: url('/art/ui-divider-rope.webp') 0 0 40 0 / 0 0 0.7rem 0 / 0 stretch round;
}

.has-art .panel {
  border: none;
  background: rgba(7, 26, 36, 0.55);
  /* The 9-slice: corners painted, edges tiled, middle filled with the grain. */
  border-image: url('/art/ui-panel-wood.webp') 68 fill / 1rem / 0 round;
  padding: 1rem 1.05rem 1.15rem;
}

/* Health and Treasure are the two live gauges, so keep their painted 9-slice frame
   visibly engaged even in browsers that do not paint border-image over border:none. */
.has-art :is(.panel--health, .panel--haul) {
  border: 1px solid transparent;
}

/* The upgrade board is the signature panel, so it gets the painted banner. The banner
   is 4:1 and this strip is far wider, so it is cropped to fit rather than stretched -
   squashing the wave ends into ovals is worse than losing them. */
.has-art .panel--board .panel-title {
  position: relative;
  margin: -0.4rem -0.45rem 0.85rem;
  padding: 0.55rem 0.8rem;
  color: #4a3517;
  text-shadow: none;
  border-radius: 2px;
  background: url('/art/ui-header-upgrades.webp') center / cover no-repeat;
}

.has-art .panel--board .title-icon {
  opacity: 1;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.5));
}

/* The health strip sits behind the 21 ticks rather than replacing them: the ticks are
   the reading, the plate is the furniture. */
.has-art .panel--health .meter {
  padding: 0.28rem 0.4rem;
  background: url('/art/ui-tracker-health.webp') center / 100% 100% no-repeat;
  height: 2.5rem;
}

/* The ship's-wheel marker, beside the number it marks. */
.health-token {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  vertical-align: -0.3rem;
  margin-right: 0.35rem;
}

/* The tray is where the game hands you a choice, so it is parchment, not ship's wood. */
.has-art .tray {
  border: none;
  border-image: url('/art/ui-panel-parchment.webp') 60 fill / 0.85rem / 0 round;
  color: #3d2b12;
  padding: 0.7rem 0.8rem;
}

.has-art .tray .seat-role {
  color: #6a4d1c;
}

/* -- icons beside the panel titles --------------------------------------- */

.panel-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.title-icon {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
  opacity: 0.85;
}

/* -- the upgrade board: painted chips on painted tracks ------------------ */

.rung {
  position: relative;
}

/* The painted coin that used to sit on the held rung is gone, and with it the override
   that hid the brass highlight behind it in the dressed theme. "Which level am I on" is
   the one question this panel exists to answer, and a lit rung answers it faster than a
   token you have to find. .rung.held above is now the answer in both themes. */

/* Icon above the word rather than beside it. Side by side, an icon plus CANNONS at this
   letter-spacing cannot fit a quarter-width grid column and cannot shrink either, so it
   leaned into the Guile column next door. */
.track-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  letter-spacing: 0.02em;
}

.track-icon {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
}

.ability {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.ability-icon {
  width: 0.95rem;
  height: 0.95rem;
  object-fit: contain;
  opacity: 0.5;
}

.ability.on .ability-icon {
  opacity: 1;
}

/* -- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.btn-icon {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
  flex: none;
}

.btn:disabled .btn-icon {
  opacity: 0.45;
  filter: grayscale(0.7);
}

/* -- the round tally, as coins ------------------------------------------ */

.pips--coins {
  display: inline-flex;
  gap: 0.2rem;
  align-items: center;
  letter-spacing: 0;
}

.pips--coins .pip {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
  opacity: 0.28;
  filter: grayscale(0.85);
  transition: opacity 200ms ease, filter 200ms ease, transform 200ms ease;
}

.pips--coins .pip--taken {
  opacity: 1;
  filter: none;
  transform: scale(1.06);
}

/* -- the die ------------------------------------------------------------- */

.roll-die {
  position: relative;
  display: grid;
  place-items: center;
}

.roll-d12 {
  position: absolute;
  width: 1.55em;
  height: 1.55em;
  object-fit: contain;
  opacity: 0.5;
}

.roll-number {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(7, 26, 36, 0.9);
}

/* -- the mats the piles and discards sit on ------------------------------ */

/* The mat is the rope outline the pile sits inside, so the back is inset within it
   rather than covering it. Both are card-shaped, so neither distorts. */
.has-art .pile-back {
  background: url('/art/mat-draw.webp') center / 100% 100% no-repeat;
}

.has-art .pile-face {
  inset: 8%;
}

/* An empty discard pile shows its mat - a card-shaped slot, kept card-shaped. */
.mat-slot {
  width: clamp(4rem, 26%, 5.5rem);
  aspect-ratio: 4 / 5;
  object-fit: contain;
  opacity: 0.75;
  margin-bottom: 0.35rem;
}

/* -- the lobby ----------------------------------------------------------- */

/* The title harbour before you have a seat; the prepared deck once you do. */
.has-art .veil {
  background-image:
    linear-gradient(180deg, rgba(7, 26, 36, 0.5), rgba(7, 26, 36, 0.86)),
    image-set(url('/art/bg-title.webp') 1x);
  background-size: cover;
  background-position: center;
}

.has-art .veil--seated {
  background-image:
    linear-gradient(180deg, rgba(7, 26, 36, 0.5), rgba(7, 26, 36, 0.86)),
    image-set(url('/art/bg-lobby.webp') 1x);
}

@media (orientation: portrait) {
  .has-art .veil {
    background-image:
      linear-gradient(180deg, rgba(7, 26, 36, 0.78), rgba(7, 26, 36, 0.93)),
      image-set(url('/art/bg-title-portrait.webp') 1x);
  }

  .has-art .veil--seated {
    background-image:
      linear-gradient(180deg, rgba(7, 26, 36, 0.78), rgba(7, 26, 36, 0.93)),
      image-set(url('/art/bg-lobby-portrait.webp') 1x);
  }
}

.has-art .sheet:not(.sheet--title) {
  position: relative;
  border: none;
  border-image: url('/art/ui-panel-wood.webp') 68 fill / 1.25rem / 0 round;
}

/* The corner ornament is one painting rotated into all four corners. */
.has-art .sheet:not(.sheet--title)::before,
.has-art .sheet:not(.sheet--title)::after {
  content: '';
  position: absolute;
  width: 3.2rem;
  height: 3.2rem;
  background: url('/art/ui-corner-flourish.webp') center / contain no-repeat;
  pointer-events: none;
  opacity: 0.9;
}

.has-art .sheet:not(.sheet--title)::before {
  top: 0.2rem;
  left: 0.2rem;
}

.has-art .sheet:not(.sheet--title)::after {
  bottom: 0.2rem;
  right: 0.2rem;
  transform: rotate(180deg);
}

.lobby-captain:empty {
  display: none;
}

.lobby-captain--selectable {
  cursor: pointer;
  border-radius: 1rem;
}

.lobby-captain--selectable:hover .captain-full,
.lobby-captain--selectable:focus-visible .captain-full {
  filter:
    drop-shadow(0 0 0.7rem rgba(255, 211, 92, 0.9))
    drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55));
}

.lobby-captain--selectable:focus-visible {
  outline: 3px solid #f4cf68;
  outline-offset: 0.2rem;
}

.captain-full {
  display: block;
  width: auto;
  height: clamp(12rem, 52vh, 26rem);
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55));
}

.pick .badge {
  width: 4.4rem;
  height: auto;
  object-fit: contain;
  flex: none;
  margin-right: 0.15rem;
}

/* -- the title screen ----------------------------------------------------- */

/* The lobby is a title card standing on the painting, not a form inside a box. */
.sheet--title {
  width: min(54rem, 100%);
  background: none;
  border: none;
  padding: clamp(0.75rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Everything on the title screen sits on artwork, so it carries its own contrast. */
.sheet--title .tagline,
.sheet--title .waiting,
.sheet--title .share,
.sheet--title .field-label {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.sheet--title .tagline {
  margin: 0 0 1.2rem;
  max-width: none;
  font-size: clamp(0.78rem, 1.45vw, 0.95rem);
  white-space: nowrap;
}

.sheet--title .joinform,
.sheet--title .choose,
.sheet--title .roster {
  width: 100%;
  justify-content: center;
}

.sheet--title .joinform {
  flex-direction: column;
  align-items: center;
}

.sheet--title .joinform .field {
  flex: none;
  width: min(100%, 20rem);
  text-align: center;
}

.sheet--title .joinform > .btn {
  align-self: center;
}

.sheet--title #lobbyFlowBack {
  margin-top: 1.35rem;
}

.sheet--title #mainLobbyButton {
  margin-top: 0.55rem;
}

/* In a seated setup lobby these are the last three navigation beats: Mute, Back, and
   Back to main lobby. Give Back the same breathing room on either side instead of
   leaving it visibly closer to the main-lobby action. */
.sheet--title #lobbyFlowBack:has(+ #mainLobbyButton:not([hidden])) {
  margin-top: 0.55rem;
}

.back-to-main-lobby {
  display: block;
  width: min(100%, 22rem);
  margin: 0.55rem auto 1rem;
}

.voyage-privacy {
  width: min(100%, 20rem);
  margin: 1.35rem auto 0;
}

.crewpick-row.crewpick-row--single {
  display: grid;
  grid-template-columns: minmax(0, 10rem);
  justify-content: center;
}

.crewpick-row--single .captain-carousel-window {
  width: min(100%, 10rem);
}

.voyage-privacy p,
.join-request-wait p {
  margin: 0.55rem 0 0;
  color: var(--ink-3);
  font-size: 0.76rem;
}
.spectator-access-choice { display: flex; align-items: center; justify-content: center; gap: 0.65rem; color: var(--bone); font-weight: 700; }
.spectator-access-choice input { width: 1.2rem; height: 1.2rem; accent-color: #4bbd98; }

.join-request-wait {
  width: min(100%, 22rem);
  padding: 0.8rem;
}

.join-request-wait strong {
  color: var(--brass);
}

.join-request-wait .btn {
  margin-top: 0.7rem;
}

.join-requests {
  width: 100%;
  margin-top: 0.75rem;
}

.join-requests-list {
  display: grid;
  gap: 0.4rem;
}

.join-request-row,
.join-request-identity,
.join-request-actions {
  display: flex;
  align-items: center;
}

.join-request-row {
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem;
  border-radius: var(--radius);
  background: rgba(7, 26, 36, 0.52);
}

.join-request-identity {
  min-width: 0;
  gap: 0.4rem;
  text-align: left;
}

.join-request-identity strong,
.join-request-identity small {
  display: block;
}

.join-request-identity small {
  color: var(--ink-3);
  font-size: 0.68rem;
}

.join-request-actions {
  gap: 0.3rem;
}

.join-request-actions .btn {
  padding: 0.4rem 0.55rem;
  font-size: 0.72rem;
}

@media (max-width: 28rem) {
  .join-request-row { align-items: stretch; flex-direction: column; }
  .join-request-actions .btn { flex: 1; }
}

.sheet--title .choose {
  text-align: left;
}

/* The mode cards are the first visible controls on this screen, so keep them
   close to the top edge of the dark panel instead of inheriting the form gap. */
.sheet--title #modeChoices {
  margin-top: 0.25rem;
}

/* Mode 2: preserve Mode 1 in the base .pick rule, but reclaim a little room for
   descriptions by shifting the radio and copy left without moving the border. */
.sheet--title #modeChoices.mode-layout--2 .pick {
  gap: 0.4rem;
  padding-left: 0.35rem;
}

.sheet--title #modeChoices.mode-layout--2 .pick > input {
  margin-left: 0;
}

.match-format {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem;
  border-color: rgba(201, 146, 46, 0.52);
  border-style: dashed;
  background: rgba(4, 18, 26, 0.48);
  text-align: center;
}

.match-format .pick {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  align-items: stretch;
  gap: 0;
  background: transparent;
}

.match-format legend {
  padding: 0 0.45rem;
  color: var(--brass);
  font-family: var(--font-label);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.match-format .pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.match-format .pick span {
  flex: 1;
  justify-content: center;
  min-height: 3.3rem;
  padding: 0.42rem 0.5rem;
  border-radius: 999px;
  background: rgba(19, 56, 66, 0.54);
  box-shadow: inset 0 0 0 1px rgba(110, 168, 169, 0.28);
}

.match-format .pick strong {
  color: var(--ink-2);
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.match-format .pick em {
  margin-top: 0.08rem;
  font-size: 0.66rem;
  line-height: 1.15;
}

.match-format .pick:has(input:checked) {
  border: 0;
  background: transparent;
}

.match-format .pick input:checked + span {
  background: linear-gradient(180deg, rgba(221, 176, 76, 0.28), rgba(137, 91, 22, 0.2));
  box-shadow: inset 0 0 0 1px var(--brass), 0 0 0.7rem rgba(201, 146, 46, 0.18);
}

.match-format .pick input:checked + span strong {
  color: #f4ce72;
}

.match-format .pick input:focus-visible + span {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.prepare-embark {
  margin-top: 1.35rem;
}

.sheet--title .roster {
  margin-top: 1rem;
}

.sheet--title .setup-crew {
  margin-top: 1.35rem;
}

/* Use one layout gap for the entire prepared-voyage stack. Separate margins on
   fieldsets can collapse, making equal numeric values look visibly unequal. */
#hostControls.host-controls--setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  width: 100%;
  margin-top: 1.35rem;
}

#hostControls.host-controls--setup > :is(.setup-crew, .voyage-readiness, .voyage-privacy, .bot-crew-setup, .start-hunt-scroll-button) {
  margin-top: 0;
  margin-bottom: 0;
}

.start-hunt-scroll-button {
  appearance: none;
  display: block;
  width: min(100%, 20rem);
  margin: 1.35rem auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 0.55rem 0.45rem rgba(0, 0, 0, 0.48));
  transition: filter 140ms ease, transform 100ms ease;
}

.start-hunt-scroll-button img {
  display: block;
  width: 100%;
  height: auto;
}

.start-hunt-scroll-button:hover,
.start-hunt-scroll-button:focus-visible {
  filter:
    drop-shadow(0 0 0.35rem rgba(232, 180, 77, 0.75))
    drop-shadow(0 0.6rem 0.5rem rgba(0, 0, 0, 0.5));
  transform: scale(1.025);
  outline: none;
}

.start-hunt-scroll-button:active {
  transform: scale(0.985);
}

.start-hunt-scroll-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.75) opacity(0.42);
  transform: none;
}

.voyage-readiness,
.setup-crew,
.bot-crew-setup {
  width: min(100%, 20rem);
  margin: 1.35rem auto 0;
}

.casual-play-style-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
.casual-play-style-options button {
  min-height: 5rem;
  padding: 0.8rem;
  border: 1px solid rgba(224, 181, 75, 0.48);
  border-radius: 0.75rem;
  background: rgba(8, 35, 44, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  color: var(--ink-2);
  cursor: pointer;
}
.casual-play-style-options button:hover { border-color: var(--gold); box-shadow: 0 0 0.75rem rgba(224, 181, 75, 0.22); }
.casual-play-style-options strong { color: var(--gold-pale); font-size: 0.92rem; }
.casual-play-style-options small { color: var(--ink-3); line-height: 1.3; }
.casual-versus-setup > p { color: var(--ink-3); }
.casual-versus-seats { margin: 0.9rem 0; }
.casual-versus-matchup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.7rem;
  padding: 0.85rem;
  border: 1px solid rgba(239, 196, 93, 0.5);
  border-radius: 0.9rem;
  background: linear-gradient(105deg, rgba(18, 75, 86, 0.94), rgba(7, 26, 36, 0.98) 50%, rgba(95, 29, 27, 0.9));
  box-shadow: inset 0 0 1.5rem rgba(0, 0, 0, 0.38), 0 0.4rem 1rem rgba(0, 0, 0, 0.22);
}
.casual-versus-team { display: grid; align-content: start; gap: 0.6rem; min-width: 0; }
.casual-versus-team > h3 { margin: 0; color: #d9f7f5; font: 700 0.8rem var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.casual-versus-team--rival > h3 { color: #ffd4cc; text-align: right; }
.casual-versus-vs {
  align-self: center;
  display: grid;
  place-items: center;
  width: 2.8rem;
  aspect-ratio: 1;
  border: 2px solid var(--brass);
  border-radius: 50%;
  background: #071a24;
  color: var(--brass);
  font: 900 1rem var(--display);
  box-shadow: 0 0 0.8rem rgba(239, 196, 93, 0.4);
  transform: rotate(-6deg);
}
.casual-versus-seat {
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid var(--brine);
  border-radius: 0.7rem;
  background: rgba(7, 28, 37, 0.72);
  display: grid;
  gap: 0.45rem;
}
.casual-versus-team--yours .casual-versus-seat { border-color: rgba(95, 205, 211, 0.56); background: rgba(6, 40, 50, 0.76); }
.casual-versus-team--rival .casual-versus-seat { border-color: rgba(219, 108, 91, 0.55); background: rgba(54, 20, 24, 0.7); }
.casual-versus-seat.is-player { border-color: var(--gold); }
.casual-versus-seat > small { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; }
.casual-versus-seat.is-player .bot-captain-choice { width: 100%; }
.casual-versus-seat-type { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; }
.casual-versus-seat-type button {
  padding: 0.42rem;
  border: 1px solid var(--brine);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
}
.casual-versus-seat-type button[aria-pressed="true"] { border-color: var(--gold); background: rgba(224, 181, 75, 0.18); color: var(--gold-pale); }
.versus-ready-portrait { width: 2.4rem; height: 2.4rem; border-radius: 0.45rem; object-fit: cover; object-position: top center; }

@media (max-width: 34rem) {
  .casual-play-style-options { grid-template-columns: 1fr; }
  .casual-versus-matchup { grid-template-columns: minmax(0, 1fr); }
  .casual-versus-vs { justify-self: center; }
  .casual-versus-team > h3, .casual-versus-team--rival > h3 { text-align: center; }
}
.bot-crew-setup > p { margin: 0 0 0.75rem; color: var(--ink-3); font-size: 0.72rem; }
.bot-crew-seats { display: grid; gap: 0.55rem; margin-bottom: 0.7rem; }
.bot-crew-seat { display: grid; grid-template-columns: 1fr minmax(7rem, 1.2fr) auto; align-items: center; gap: 0.45rem; }
.bot-crew-seat span { color: var(--bone); font-size: 0.72rem; }
.bot-captain-choice {
  min-width: 0;
  padding: 0.3rem 0.55rem 0.3rem 0.3rem;
  border: 1px solid rgba(224, 181, 75, 0.5);
  border-radius: 0.65rem;
  background: rgba(7, 31, 39, 0.8);
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.55rem;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
.bot-captain-choice:hover { border-color: var(--gold); box-shadow: 0 0 0.65rem rgba(224, 181, 75, 0.24); }
.bot-captain-choice-face {
  grid-row: 1 / 3;
  width: 3rem;
  height: 3rem;
  border-radius: 0.45rem;
  object-fit: cover;
  object-position: top center;
}
.bot-captain-choice span { color: var(--gold-pale); font-weight: 800; }
.bot-captain-choice small { color: var(--ink-3); font-size: 0.67rem; }
.bot-crew-seat .btn { padding: 0.45rem 0.55rem; font-size: 0.65rem; }

.readiness-toggle {
  appearance: none;
  display: grid;
  grid-template-columns: 1fr 2.5rem 1fr;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.35rem;
  border: 1px solid var(--brine);
  border-radius: 999px;
  background: rgba(7, 26, 36, 0.72);
  color: var(--ink-3);
  font: 0.62rem/1.2 var(--font-data);
  cursor: pointer;
}

.readiness-toggle i {
  position: relative;
  width: 2.5rem;
  height: 1.35rem;
  border-radius: 999px;
  background: rgba(232, 226, 211, 0.18);
}

.readiness-toggle i::after {
  content: '';
  position: absolute;
  top: 0.17rem;
  left: 0.18rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--ink-2);
  transition: translate 160ms ease, background 160ms ease;
}

.readiness-toggle.is-ready,
.readiness-toggle.is-private {
  border-color: var(--verdigris);
  color: var(--ink-2);
  box-shadow: 0 0 0.7rem rgba(79, 168, 139, 0.2);
}

.readiness-toggle.is-ready i,
.readiness-toggle.is-private i {
  background: rgba(79, 168, 139, 0.45);
}

.readiness-toggle.is-ready i::after,
.readiness-toggle.is-private i::after {
  translate: 1.12rem 0;
  background: #a9f1d5;
}

.readiness-toggle:disabled {
  cursor: default;
  opacity: 0.8;
}

.setup-crew .roster {
  margin-top: 0;
}

.tutorial-launch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.5rem 0 0.85rem;
  border-color: var(--brass);
  background: linear-gradient(180deg, rgba(27, 74, 90, 0.9), rgba(7, 26, 36, 0.92));
  color: var(--bone);
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.28);
}

.tutorial-launch:hover,
.tutorial-launch:focus-visible {
  background: linear-gradient(180deg, rgba(45, 95, 109, 0.95), rgba(14, 46, 59, 0.96));
}

.lobby-records {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  /* .tutorial-launch contributes 0.85rem below and this contributes 0.5rem above,
     matching the 1.35rem separating Guided Tutorial from Quick References. */
  margin: 0.5rem 0 0.85rem;
}

.lobby-records .btn {
  width: 100%;
  padding-inline: 0.65rem;
}

#openSocialMenu {
  grid-column: 1 / -1;
}

#feedbackLobbyButton { margin-top: 1.35rem; }

/* Home navigation uses one dependable touch target. Mute remains compact in the
   footer because it is a setting, not a step through the lobby. */
:is(#newHuntButton, #rankedHuntButton, #dailyVoyageButton, #speedRunButton, #longVoyageButton, #odysseyButton, #newPlayerButton, #guidedTutorialButton, #quickReferenceButton, #meetCaptainsButton, #statsButton, #achievementsButton, #rankingsButton, #feedbackLobbyButton, #openSocialMenu) {
  height: 2.55rem;
}

.hunt-launch-options {
  display: grid;
  width: min(100%, 35rem);
  gap: 0.7rem;
  margin-inline: auto;
}

.hunt-launch-options[hidden] {
  display: none;
}

#startHuntButton[aria-expanded="true"],
#joinHuntButton[aria-expanded="true"] {
  border-color: rgba(145, 159, 158, 0.48);
  background: linear-gradient(180deg, #3d4c50, #28363b);
  color: #c6cecc;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}

.hunt-challenges {
  width: 100%;
  border: 1px solid rgba(158, 217, 212, 0.32);
  border-radius: 0.72rem;
  background: rgba(3, 18, 27, 0.48);
  overflow: hidden;
}

.hunt-challenges > summary {
  padding: 0.78rem 1rem;
  color: #e8d9ae;
  cursor: pointer;
  font: 700 0.78rem/1 var(--font-label);
  letter-spacing: 0.06em;
  list-style: none;
  text-align: center;
  text-transform: uppercase;
}

.hunt-challenges > summary::-webkit-details-marker { display: none; }
.hunt-challenges > summary::after { content: ' ▾'; color: #9ed9d4; }
.hunt-challenges[open] > summary::after { content: ' ▴'; }

.hunt-challenges-menu {
  display: grid;
  gap: 0.7rem;
  padding: 0 0.75rem 0.8rem;
  border-top: 1px solid rgba(158, 217, 212, 0.2);
}

.hunt-launch-challenge-heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.7rem;
  margin: 0.25rem 0 0.05rem;
  color: #e8d9ae;
  font: 700 0.72rem/1 var(--font-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hunt-launch-challenge-heading::before,
.hunt-launch-challenge-heading::after {
  content: '';
  height: 1px;
  background: rgba(232, 217, 174, 0.42);
}

.hunt-launch-option {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  width: 100%;
}

.hunt-launch-option .btn {
  width: 12.5rem;
  justify-self: center;
}

.hunt-launch-option p {
  margin: 0;
  padding-left: 0.8rem;
  border-left: 1px solid rgba(195, 217, 216, 0.28);
  color: #cad9dc;
  font-size: 0.76rem;
  line-height: 1.4;
  text-align: left;
}

.hunt-challenges-menu .hunt-launch-option {
  grid-template-columns: 12rem minmax(0, 1fr);
}

.hunt-challenges-menu .hunt-launch-option .btn {
  width: 12rem;
}

@media (max-width: 430px) {
  .hunt-launch-challenge-heading {
    gap: 0.45rem;
    font-size: 0.64rem;
    letter-spacing: 0.055em;
  }

  .hunt-launch-option {
    grid-template-columns: 10.9rem minmax(0, 1fr);
    gap: 0.6rem;
  }

  .hunt-launch-option .btn {
    width: 10.9rem;
    padding-inline: 0.55rem;
    font-size: 0.82rem;
  }

  .hunt-launch-option p {
    padding-left: 0.6rem;
    font-size: 0.7rem;
  }

  .hunt-challenges-menu .hunt-launch-option {
    grid-template-columns: 10.4rem minmax(0, 1fr);
  }

  .hunt-challenges-menu .hunt-launch-option .btn {
    width: 10.4rem;
  }
}

#newPlayerButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  border-color: rgba(109, 185, 188, 0.62);
  background: linear-gradient(180deg, rgba(25, 80, 91, 0.9), rgba(6, 35, 46, 0.94));
  color: #e2f2ef;
  text-align: center;
}

#newPlayerButton:hover,
#newPlayerButton:focus-visible {
  border-color: rgba(109, 185, 188, 0.62);
  background: linear-gradient(180deg, rgba(25, 80, 91, 0.9), rgba(6, 35, 46, 0.94));
}

#newPlayerButton > .new-player-parrot {
  display: block;
  flex: 0 0 auto;
  width: 1.9rem;
  height: 2.15rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
  object-position: center;
  transform: translateX(-0.3rem);
}

#newPlayerButton > .new-player-label {
  display: inline-block;
  transform: translateX(-0.3rem);
}

.stats-menu.meet-captains-menu {
  width: min(64rem, calc(100vw - 1.5rem));
  padding-top: clamp(3.6rem, 8vw, 4.2rem);
}

.meet-captains-menu > .tutorial-title,
.meet-captains-menu > .tutorial-kicker {
  text-align: center;
}

.meet-captains-menu > .tutorial-title {
  box-sizing: border-box;
  width: 100%;
  padding-inline: 2.75rem;
}

.meet-captains-menu > .tutorial-title[hidden] {
  display: none;
}

.meet-captains-intro {
  width: min(100%, 48rem);
  margin: 0.65rem auto 1.1rem;
  color: #d8e1e2;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
}

.meet-captains-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}

.meet-captain-tile {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  min-width: 0;
  padding: 0.55rem;
  border: 1px solid rgba(224, 181, 75, 0.42);
  border-radius: 0.75rem;
  background: linear-gradient(160deg, rgba(17, 47, 58, 0.9), rgba(4, 20, 28, 0.92));
  color: #f8d979;
  cursor: pointer;
}

.meet-captain-tile:hover,
.meet-captain-tile:focus-visible {
  border-color: #82d8cc;
  background: linear-gradient(160deg, rgba(28, 83, 88, 0.92), rgba(5, 30, 39, 0.96));
  box-shadow: 0 0 1rem rgba(71, 186, 178, 0.18);
}

.meet-captain-tile-portrait {
  display: block;
  width: min(100%, 8rem);
  aspect-ratio: 1;
  object-fit: contain;
}

.meet-captain-tile strong {
  max-width: 100%;
  min-height: 2.2em;
  font: 700 0.8rem/1.1 var(--font-display);
  overflow-wrap: anywhere;
  text-align: center;
}

.meet-captain-detail[hidden],
#meetCaptainsHome[hidden],
.meet-captain-panel[hidden] {
  display: none;
}

.meet-captain-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 46rem);
  margin: 0.35rem auto 0.75rem;
}

.meet-captain-cycle {
  display: flex;
  gap: 0.45rem;
}

.meet-captain-nav-button {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(232, 226, 211, 0.38);
  border-radius: 50%;
  background: rgba(7, 26, 36, 0.56);
  color: var(--bone);
  font: 1.45rem/1 var(--font-ui);
  cursor: pointer;
}

.meet-captain-nav-button:hover,
.meet-captain-nav-button:focus-visible {
  border-color: var(--brass);
  background: rgba(7, 26, 36, 0.84);
  color: #fff1c7;
}

.meet-captain-back {
  font-size: 1.2rem;
}

.meet-captain-hero {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.9rem, 3vw, 1.5rem);
  width: min(100%, 38rem);
  margin: 0 auto;
}

.meet-captain-portrait {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(224, 181, 75, 0.38);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 111, 111, 0.68), rgba(5, 22, 30, 0.96) 72%);
}

.meet-captain-detail-portrait {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.meet-captain-identity .tutorial-kicker {
  margin: 0;
}

.meet-captain-identity h3 {
  margin: 0.15rem 0 0.3rem;
  color: #f5d27a;
  font: 700 clamp(1.5rem, 4vw, 2.3rem) var(--font-display);
}

.meet-captain-identity p:last-child {
  margin: 0;
  color: #bcd0d1;
  font-size: 0.78rem;
}

.meet-captain-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  width: min(100%, 32rem);
  margin: 1rem auto 0;
}

.meet-captain-tabs button {
  min-height: 2.65rem;
  border: 1px solid rgba(224, 181, 75, 0.32);
  border-radius: 999px;
  background: rgba(3, 17, 24, 0.78);
  color: #b9c8cc;
  font: 700 0.72rem var(--font-data);
}

.meet-captain-tabs button[aria-selected="true"] {
  border-color: rgba(242, 199, 110, 0.86);
  background: rgba(77, 51, 12, 0.74);
  color: #fff1c7;
  box-shadow: 0 0 0.8rem rgba(224, 181, 75, 0.2);
}

.meet-captain-panel {
  width: min(100%, 46rem);
  min-height: 10rem;
  margin: 0.8rem auto 0;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid rgba(224, 181, 75, 0.3);
  border-radius: 0.7rem;
  background: linear-gradient(180deg, rgba(5, 20, 28, 0.96), rgba(2, 13, 18, 0.96));
  color: #dce5e5;
}

.meet-captain-panel > h3,
.meet-captain-ability-heading h3 {
  margin: 0 0 0.55rem;
  color: #f2c76e;
  font: 700 0.9rem var(--font-data);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.meet-captain-panel > p {
  margin: 0;
  line-height: 1.58;
}

.meet-captain-ability-heading {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}

.meet-captain-ability-heading small {
  display: block;
  margin-bottom: 0.16rem;
  color: #82d8cc;
  font: 700 0.62rem var(--font-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.meet-captain-ability-heading h3 {
  margin: 0;
}

.captain-ability-mark {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(130, 216, 204, 0.58);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 112, 111, 0.7), rgba(3, 22, 29, 0.96));
  box-shadow: 0 0 0.85rem rgba(64, 181, 171, 0.2);
}

.captain-ability-mark-art {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
}

.captain-ability-mark-fallback {
  color: #f5d27a;
  font-size: 1.5rem;
}

.captain-ability-mark:has(.captain-ability-mark-art) .captain-ability-mark-fallback {
  display: none;
}

.meet-captain-demo-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: min(100%, 13rem);
  margin: 1rem auto 0;
}

.riptide-demo-menu {
  width: min(42rem, calc(100vw - 1rem));
  max-height: calc(100dvh - 1rem);
  overflow: auto;
  padding: clamp(1rem, 3vw, 1.65rem);
  border: 1px solid rgba(224, 181, 75, 0.56);
  border-radius: 0.8rem;
  background: linear-gradient(145deg, #324148, #17262d);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.76), inset 0 0 2.5rem rgba(15, 95, 108, 0.12);
  color: var(--bone);
}

.riptide-demo-menu::backdrop {
  background: rgba(1, 8, 12, 0.9);
  backdrop-filter: blur(6px);
}

.riptide-demo-menu > .tutorial-kicker,
.riptide-demo-menu > .tutorial-title {
  box-sizing: border-box;
  width: 100%;
  padding-inline: 2.6rem;
  text-align: center;
}

.riptide-demo-menu > .tutorial-title {
  color: #f4d27b;
}

.riptide-demo-stage {
  --demo-duration: 7s;
  position: relative;
  isolation: isolate;
  min-height: clamp(25rem, 66dvh, 31rem);
  margin-top: 0.8rem;
  overflow: hidden;
  border: 1px solid rgba(107, 194, 191, 0.38);
  border-radius: 0.7rem;
  background:
    radial-gradient(circle at 78% 29%, rgba(61, 148, 146, 0.2), transparent 25%),
    radial-gradient(circle at 18% 42%, rgba(201, 146, 46, 0.12), transparent 27%),
    linear-gradient(180deg, #092735, #04151e 72%);
  box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.46);
}

.riptide-demo-depth {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.32;
  background:
    repeating-linear-gradient(112deg, transparent 0 3.8rem, rgba(109, 185, 188, 0.09) 3.85rem 3.9rem),
    linear-gradient(transparent 72%, rgba(59, 142, 153, 0.13));
}

.riptide-demo-turn {
  display: flex;
  position: relative;
  z-index: 3;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 0.75rem auto 0;
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(130, 216, 204, 0.5);
  border-radius: 999px;
  background: rgba(3, 20, 28, 0.86);
  color: #d9f4ef;
  font: 700 0.67rem var(--font-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.riptide-demo-turn span {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #82d8cc;
  box-shadow: 0 0 0.65rem rgba(130, 216, 204, 0.9);
}

.riptide-demo-combat {
  display: grid;
  position: relative;
  grid-template-columns: minmax(5.5rem, 0.85fr) minmax(3.75rem, 0.42fr) minmax(7rem, 1fr);
  align-items: center;
  gap: clamp(0.25rem, 2vw, 0.9rem);
  min-height: 14.5rem;
  padding: 0.5rem clamp(0.55rem, 3vw, 1.5rem) 0;
}

.riptide-demo-captain {
  align-self: center;
  margin: 0;
  text-align: center;
}

.riptide-demo-captain img {
  display: block;
  width: min(100%, 8rem);
  aspect-ratio: 1;
  margin: auto;
  object-fit: cover;
  object-position: center top;
  border: 2px solid rgba(232, 199, 110, 0.68);
  border-radius: 50%;
  background: #0a2631;
  box-shadow: 0 0 1.2rem rgba(46, 138, 150, 0.28);
}

.riptide-demo-captain figcaption {
  margin-top: 0.3rem;
  color: #f0d389;
  font: 700 clamp(0.74rem, 2.5vw, 0.9rem) var(--font-display);
}

.riptide-demo-cannon {
  z-index: 4;
  width: min(100%, 4.5rem);
  filter: drop-shadow(0 0 0.65rem rgba(224, 166, 60, 0.25));
}

.riptide-demo-enemy {
  display: grid;
  position: relative;
  place-items: center;
  min-width: 0;
}

.riptide-demo-enemy .card {
  width: min(100%, 8.4rem);
  min-width: 0;
  box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.42);
}

.riptide-demo-roll {
  display: flex;
  position: absolute;
  bottom: 0.2rem;
  left: 50%;
  z-index: 5;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  transform: translateX(-50%);
  border: 1px solid rgba(232, 199, 110, 0.65);
  border-radius: 999px;
  background: rgba(3, 15, 21, 0.95);
  box-shadow: 0 0 0.9rem rgba(224, 181, 75, 0.24);
  color: #fff0bf;
  font: 700 clamp(0.68rem, 2.5vw, 0.82rem) var(--font-data);
  white-space: nowrap;
}

.riptide-demo-roll img {
  width: 1.6rem;
  height: 1.6rem;
  object-fit: contain;
}

.riptide-demo-blast {
  position: absolute;
  top: 31%;
  left: 65%;
  z-index: 7;
  width: clamp(6rem, 28%, 9rem);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.riptide-demo-victory {
  position: absolute;
  top: 46%;
  left: 61%;
  z-index: 8;
  width: 36%;
  color: #ffe6a2;
  font: 900 clamp(0.88rem, 4vw, 1.35rem)/1 var(--font-display);
  text-align: center;
  text-shadow: 0 2px 0 #4b2d08, 0 0 1rem rgba(224, 166, 60, 0.8);
}

.riptide-demo-heal-orb {
  position: absolute;
  top: 31%;
  left: 73%;
  z-index: 9;
  width: clamp(3.15rem, 13.5%, 4.5rem);
  pointer-events: none;
  filter: drop-shadow(0 0 0.8rem rgba(102, 228, 190, 0.8));
}

.riptide-demo-health {
  position: relative;
  z-index: 4;
  margin: 0.35rem clamp(0.8rem, 4vw, 2rem) 0;
  padding: 0.65rem 0.8rem 0.75rem;
  border: 1px solid rgba(130, 216, 204, 0.4);
  border-radius: 0.5rem;
  background: rgba(3, 18, 25, 0.9);
  box-shadow: inset 0 0 1rem rgba(43, 130, 117, 0.12);
}

.riptide-demo-health-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.45rem;
  color: #c6dddc;
  font: 700 0.7rem var(--font-data);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.riptide-demo-health-heading > span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.riptide-demo-health-heading > span img {
  width: 1.45rem;
  height: 1.45rem;
  object-fit: contain;
}

.riptide-demo-health-heading strong {
  color: #fff0bf;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.riptide-demo-health-track {
  position: relative;
  height: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(250, 211, 115, 0.5);
  border-radius: 999px;
  background: #061018;
}

.riptide-demo-health-track span {
  display: block;
  width: 38.1%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9e2e2c, #e04f42 60%, #f3a45d);
  box-shadow: 0 0 0.8rem rgba(224, 79, 66, 0.56);
}

.riptide-demo-heal-amount {
  position: absolute;
  right: 0.8rem;
  bottom: -1.45rem;
  color: #8bf0bc;
  font: 900 0.8rem var(--font-data);
  text-shadow: 0 0 0.8rem rgba(79, 231, 159, 0.8);
}

.riptide-demo-rule {
  position: relative;
  z-index: 5;
  margin: 1.8rem 1rem 0;
  color: #dce8e6;
  font-size: clamp(0.72rem, 2.5vw, 0.86rem);
  line-height: 1.45;
  text-align: center;
}

.riptide-demo-rule strong {
  color: #f4d27b;
}

.riptide-demo-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.22rem;
  overflow: hidden;
  background: rgba(3, 13, 18, 0.72);
}

.riptide-demo-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: #d8aa4d;
}

.riptide-demo-caption {
  min-height: 2.8em;
  margin: 0.7rem 0 0;
  color: #c8d8d7;
  font: 0.76rem/1.4 var(--font-data);
  text-align: center;
}

.riptide-demo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.riptide-demo-stage :is(
  .riptide-demo-turn,
  .riptide-demo-captain,
  .riptide-demo-cannon,
  .riptide-demo-enemy,
  .riptide-demo-roll,
  .riptide-demo-blast,
  .riptide-demo-victory,
  .riptide-demo-heal-orb,
  .riptide-demo-health,
  .riptide-demo-heal-amount,
  .riptide-demo-rule
) {
  opacity: 0;
}

.riptide-demo-stage.is-running .riptide-demo-turn { animation: riptide-demo-enter-down 0.45s 0.15s cubic-bezier(.16, 1, .3, 1) both; }
.riptide-demo-stage.is-running .riptide-demo-captain { animation: riptide-demo-enter-left 0.65s 0.28s cubic-bezier(.22, 1, .36, 1) both; }
.riptide-demo-stage.is-running .riptide-demo-enemy { animation: riptide-demo-enemy 3.25s 0.42s cubic-bezier(.2, .8, .2, 1) both; }
.riptide-demo-stage.is-running .riptide-demo-cannon { animation: riptide-demo-cannon 1.3s 1.15s cubic-bezier(.34, 1.56, .64, 1) both; }
.riptide-demo-stage.is-running .riptide-demo-roll { animation: riptide-demo-roll 1.35s 1.4s cubic-bezier(.16, 1, .3, 1) both; }
.riptide-demo-stage.is-running .riptide-demo-blast { animation: riptide-demo-blast 0.65s 2.22s ease-out both; }
.riptide-demo-stage.is-running .riptide-demo-victory { animation: riptide-demo-victory 1.25s 2.68s cubic-bezier(.34, 1.56, .64, 1) both; }
.riptide-demo-stage.is-running .riptide-demo-health { animation: riptide-demo-enter-up 0.55s 0.72s cubic-bezier(.16, 1, .3, 1) both; }
.riptide-demo-stage.is-running .riptide-demo-heal-orb { animation: riptide-demo-heal-orb 1.05s 3.55s cubic-bezier(.65, 0, .35, 1) both; }
.riptide-demo-stage.is-running .riptide-demo-health-track span { animation: riptide-demo-health-fill 0.85s 4.08s cubic-bezier(.22, 1, .36, 1) both; }
.riptide-demo-stage.is-running .riptide-demo-heal-amount { animation: riptide-demo-heal-number 1.4s 4.05s cubic-bezier(.34, 1.56, .64, 1) both; }
.riptide-demo-stage.is-running .riptide-demo-rule { animation: riptide-demo-enter-up 0.7s 5.12s cubic-bezier(.16, 1, .3, 1) both; }
.riptide-demo-stage.is-running .riptide-demo-progress span { animation: riptide-demo-progress var(--demo-duration) linear both; }

.riptide-demo-stage.is-reduced :is(
  .riptide-demo-turn,
  .riptide-demo-captain,
  .riptide-demo-cannon,
  .riptide-demo-roll,
  .riptide-demo-victory,
  .riptide-demo-health,
  .riptide-demo-heal-amount,
  .riptide-demo-rule
) { opacity: 1; }
.riptide-demo-stage.is-reduced .riptide-demo-enemy { opacity: 0.22; filter: grayscale(1); }
.riptide-demo-stage.is-reduced .riptide-demo-health-track span { width: 76.2%; }
.riptide-demo-stage.is-reduced .riptide-demo-progress span { transform: scaleX(1); }

.schemer-demo-menu {
  background: linear-gradient(145deg, #3b3025, #1c1713);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.76), inset 0 0 2.5rem rgba(179, 112, 35, 0.12);
}

.schemer-demo-stage {
  --demo-duration: 7s;
  position: relative;
  isolation: isolate;
  min-height: clamp(25rem, 66dvh, 31rem);
  margin-top: 0.8rem;
  overflow: hidden;
  border: 1px solid rgba(215, 166, 79, 0.4);
  border-radius: 0.7rem;
  background:
    radial-gradient(circle at 76% 29%, rgba(184, 121, 43, 0.19), transparent 25%),
    radial-gradient(circle at 18% 42%, rgba(121, 63, 44, 0.2), transparent 27%),
    linear-gradient(180deg, #2a2119, #100d0b 72%);
  box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.5);
}

.schemer-demo-turn span {
  background: #e0ad54;
  box-shadow: 0 0 0.65rem rgba(224, 173, 84, 0.9);
}

.schemer-demo-crew {
  z-index: 4;
  width: min(100%, 4.5rem);
  filter: drop-shadow(0 0 0.65rem rgba(224, 166, 60, 0.35));
}

.schemer-demo-flee {
  position: absolute;
  top: 45%;
  left: 62%;
  z-index: 8;
  width: 34%;
  color: #ffe6a2;
  font: 900 clamp(0.88rem, 4vw, 1.35rem)/1 var(--font-display);
  text-align: center;
  text-shadow: 0 2px 0 #4b2d08, 0 0 1rem rgba(224, 166, 60, 0.8);
}

.schemer-demo-mark {
  position: absolute;
  top: 30%;
  left: 74%;
  z-index: 9;
  width: clamp(3.5rem, 15%, 5rem);
  pointer-events: none;
  filter: drop-shadow(0 0 0.8rem rgba(244, 198, 95, 0.8));
}

.schemer-demo-target-track {
  position: relative;
  height: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(250, 211, 115, 0.5);
  border-radius: 999px;
  background: #100c08;
}

.schemer-demo-target-track span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left;
  border-radius: inherit;
  background: linear-gradient(90deg, #9e662c, #d7a548 60%, #f1cf73);
  box-shadow: 0 0 0.8rem rgba(224, 174, 79, 0.5);
}

.schemer-demo-reduction { color: #f3ca6f; }

.schemer-demo-stage :is(
  .schemer-demo-turn,
  .schemer-demo-captain,
  .schemer-demo-crew,
  .schemer-demo-enemy,
  .schemer-demo-flee,
  .schemer-demo-mark,
  .schemer-demo-target,
  .schemer-demo-reduction,
  .schemer-demo-rule
) { opacity: 0; }

.schemer-demo-stage.is-running .schemer-demo-turn { animation: riptide-demo-enter-down 0.45s 0.15s cubic-bezier(.16, 1, .3, 1) both; }
.schemer-demo-stage.is-running .schemer-demo-captain { animation: riptide-demo-enter-left 0.65s 0.28s cubic-bezier(.22, 1, .36, 1) both; }
.schemer-demo-stage.is-running .schemer-demo-enemy { animation: schemer-demo-enemy 3.2s 0.42s cubic-bezier(.2, .8, .2, 1) both; }
.schemer-demo-stage.is-running .schemer-demo-crew { animation: schemer-demo-crew 1.45s 1.05s cubic-bezier(.34, 1.56, .64, 1) both; }
.schemer-demo-stage.is-running .schemer-demo-flee { animation: riptide-demo-victory 1.25s 2.35s cubic-bezier(.34, 1.56, .64, 1) both; }
.schemer-demo-stage.is-running .schemer-demo-target { animation: riptide-demo-enter-up 0.55s 0.72s cubic-bezier(.16, 1, .3, 1) both; }
.schemer-demo-stage.is-running .schemer-demo-mark { animation: schemer-demo-mark 1.15s 3.35s cubic-bezier(.65, 0, .35, 1) both; }
.schemer-demo-stage.is-running .schemer-demo-target-track span { animation: schemer-demo-target-fill 0.85s 4.22s cubic-bezier(.22, 1, .36, 1) both; }
.schemer-demo-stage.is-running .schemer-demo-reduction { animation: riptide-demo-heal-number 1.4s 4.2s cubic-bezier(.34, 1.56, .64, 1) both; }
.schemer-demo-stage.is-running .schemer-demo-rule { animation: riptide-demo-enter-up 0.7s 5.12s cubic-bezier(.16, 1, .3, 1) both; }
.schemer-demo-stage.is-running .riptide-demo-progress span { animation: riptide-demo-progress var(--demo-duration) linear both; }

.schemer-demo-stage.is-reduced :is(
  .schemer-demo-turn,
  .schemer-demo-captain,
  .schemer-demo-crew,
  .schemer-demo-flee,
  .schemer-demo-target,
  .schemer-demo-reduction,
  .schemer-demo-rule
) { opacity: 1; }
.schemer-demo-stage.is-reduced .schemer-demo-enemy { opacity: 0.22; filter: grayscale(1); }
.schemer-demo-stage.is-reduced .schemer-demo-target-track span { transform: scaleX(0.92); }
.schemer-demo-stage.is-reduced .riptide-demo-progress span { transform: scaleX(1); }

@keyframes schemer-demo-enemy {
  0% { opacity: 0; transform: translateX(1.5rem) rotate(3deg) scale(0.94); }
  18%, 67% { opacity: 1; transform: translateX(0) rotate(0) scale(1); filter: none; }
  100% { opacity: 0.2; transform: translateX(3.5rem) rotate(9deg) scale(0.82); filter: grayscale(1); }
}

@keyframes schemer-demo-crew {
  0% { opacity: 0; transform: translateX(-0.7rem) scale(0.75) rotate(-12deg); }
  30%, 78% { opacity: 1; transform: translateX(0) scale(1) rotate(5deg); }
  100% { opacity: 0; transform: translateX(0.35rem) scale(0.9) rotate(2deg); }
}

@keyframes schemer-demo-mark {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0); }
  20% { opacity: 1; transform: translate(0, 0) scale(1) rotate(-8deg); }
  82% { opacity: 1; transform: translate(-245%, 11.5rem) scale(0.78) rotate(-18deg); }
  100% { opacity: 0; transform: translate(-245%, 11.5rem) scale(0.35) rotate(-22deg); }
}

@keyframes schemer-demo-target-fill {
  from { transform: scaleX(1); }
  to { transform: scaleX(0.92); }
}

.captain-demo-stage {
  --demo-duration: 7s;
  position: relative;
  isolation: isolate;
  min-height: clamp(25rem, 66dvh, 31rem);
  margin-top: 0.8rem;
  overflow: hidden;
  border: 1px solid rgba(130, 180, 190, 0.4);
  border-radius: 0.7rem;
  box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.5);
}

.adventurer-demo-menu { background: linear-gradient(145deg, #3a3427, #18272b); }
.adventurer-demo-stage {
  background: radial-gradient(circle at 76% 28%, rgba(231, 177, 65, 0.18), transparent 25%), linear-gradient(180deg, #183945, #0b1b22 72%);
}
.adventurer-demo-turn span { background: #f0c45d; box-shadow: 0 0 0.65rem rgba(240, 196, 93, 0.9); }
.adventurer-demo-sails {
  z-index: 4;
  width: min(100%, 4.5rem);
  filter: drop-shadow(0 0 0.65rem rgba(111, 206, 224, 0.5));
}
.adventurer-demo-success {
  position: absolute;
  top: 45%;
  left: 61%;
  z-index: 8;
  width: 36%;
  color: #fff0ad;
  font: 900 clamp(0.88rem, 4vw, 1.35rem)/1 var(--font-display);
  text-align: center;
  text-shadow: 0 2px 0 #4b3508, 0 0 1rem rgba(240, 196, 93, 0.8);
}
.adventurer-demo-upgrades { text-align: center; }
.adventurer-demo-upgrades > small {
  color: #d6e6e5;
  font: 700 0.65rem var(--font-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.adventurer-demo-upgrades > div { display: flex; justify-content: center; gap: clamp(0.3rem, 2vw, 0.7rem); margin-top: 0.45rem; }
.adventurer-demo-upgrades span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid rgba(175, 201, 202, 0.32);
  border-radius: 0.4rem;
  color: #cbd9d9;
  font: 700 clamp(0.58rem, 2vw, 0.72rem) var(--font-data);
}
.adventurer-demo-upgrades img { width: 1.35rem; height: 1.35rem; object-fit: contain; }
.adventurer-demo-upgrades .is-chosen { border-color: #edc65f; color: #fff0ad; box-shadow: 0 0 0.8rem rgba(237, 198, 95, 0.3); }

.navigator-demo-menu { background: linear-gradient(145deg, #263a3e, #141b25); }
.navigator-demo-stage {
  background: radial-gradient(circle at 76% 28%, rgba(74, 183, 208, 0.2), transparent 25%), linear-gradient(180deg, #102c3b, #090f1d 72%);
}
.navigator-demo-turn span { background: #73d5e2; box-shadow: 0 0 0.65rem rgba(115, 213, 226, 0.9); }
.navigator-demo-passage {
  z-index: 4;
  width: min(100%, 4.5rem);
  filter: drop-shadow(0 0 0.75rem rgba(86, 208, 223, 0.65));
}
.navigator-demo-hidden {
  position: absolute;
  top: 45%;
  left: 62%;
  z-index: 8;
  width: 34%;
  color: #c7f7f7;
  font: 900 clamp(0.9rem, 4vw, 1.4rem)/1 var(--font-display);
  text-align: center;
  text-shadow: 0 0 1rem rgba(91, 216, 226, 0.9);
}
.navigator-demo-equation { display: flex; align-items: center; justify-content: center; gap: clamp(0.4rem, 3vw, 1rem); }
.navigator-demo-equation strong { color: #fff0bf; font: 800 clamp(0.82rem, 3vw, 1rem) var(--font-data); }
.navigator-demo-equation span { color: #9fc9cf; font: 0.65rem var(--font-data); text-transform: uppercase; }
.navigator-demo-discards { display: flex; justify-content: center; gap: 0.45rem; margin-top: 0.5rem; }
.navigator-demo-discards span {
  display: grid;
  width: 2.2rem;
  aspect-ratio: 0.72;
  place-items: center;
  border: 1px solid #d4bc8a;
  border-radius: 0.25rem;
  background: #f1e6cb;
  color: #25201a;
  font: 800 0.66rem var(--font-data);
  box-shadow: 0 0.25rem 0.45rem rgba(0, 0, 0, 0.35);
}

.captain-demo-stage :is(
  .riptide-demo-turn, .riptide-demo-captain, .riptide-demo-enemy, .riptide-demo-roll,
  .adventurer-demo-sails, .adventurer-demo-success, .adventurer-demo-upgrades, .adventurer-demo-rule,
  .navigator-demo-passage, .navigator-demo-hidden, .navigator-demo-cost, .navigator-demo-rule
) { opacity: 0; }
.captain-demo-stage.is-running .riptide-demo-turn { animation: riptide-demo-enter-down 0.45s 0.15s cubic-bezier(.16, 1, .3, 1) both; }
.captain-demo-stage.is-running .riptide-demo-captain { animation: riptide-demo-enter-left 0.65s 0.28s cubic-bezier(.22, 1, .36, 1) both; }
.captain-demo-stage.is-running .riptide-demo-progress span { animation: riptide-demo-progress var(--demo-duration) linear both; }
.captain-demo-stage.is-running .riptide-demo-rule { animation: riptide-demo-enter-up 0.7s 5.12s cubic-bezier(.16, 1, .3, 1) both; }

.adventurer-demo-stage.is-running .adventurer-demo-enemy { animation: riptide-demo-enemy 3.2s 0.42s cubic-bezier(.2, .8, .2, 1) both; }
.adventurer-demo-stage.is-running .adventurer-demo-sails { animation: schemer-demo-crew 1.45s 1.05s cubic-bezier(.34, 1.56, .64, 1) both; }
.adventurer-demo-stage.is-running .adventurer-demo-roll { animation: riptide-demo-roll 1.35s 1.25s cubic-bezier(.16, 1, .3, 1) both; }
.adventurer-demo-stage.is-running .adventurer-demo-success { animation: riptide-demo-victory 1.25s 2.35s cubic-bezier(.34, 1.56, .64, 1) both; }
.adventurer-demo-stage.is-running .adventurer-demo-upgrades { animation: riptide-demo-enter-up 0.55s 3.45s cubic-bezier(.16, 1, .3, 1) both; }
.adventurer-demo-stage.is-running .adventurer-demo-upgrades .is-chosen { animation: captain-demo-choice 1.2s 4.12s cubic-bezier(.34, 1.56, .64, 1) both; }

.navigator-demo-stage.is-running .navigator-demo-enemy { animation: navigator-demo-enemy 4.25s 0.42s cubic-bezier(.2, .8, .2, 1) both; }
.navigator-demo-stage.is-running .navigator-demo-passage { animation: navigator-demo-passage 3s 1.1s cubic-bezier(.34, 1.56, .64, 1) both; }
.navigator-demo-stage.is-running .navigator-demo-cost { animation: riptide-demo-enter-up 0.55s 1.45s cubic-bezier(.16, 1, .3, 1) both; }
.navigator-demo-stage.is-running .navigator-demo-discards span { animation: navigator-demo-discard 1s 3.25s cubic-bezier(.65, 0, .35, 1) both; }
.navigator-demo-stage.is-running .navigator-demo-discards span:nth-child(2) { animation-delay: 3.38s; }
.navigator-demo-stage.is-running .navigator-demo-discards span:nth-child(3) { animation-delay: 3.51s; }
.navigator-demo-stage.is-running .navigator-demo-hidden { animation: riptide-demo-victory 1.25s 4.15s cubic-bezier(.34, 1.56, .64, 1) both; }

.captain-demo-stage.is-reduced :is(.riptide-demo-turn, .riptide-demo-captain, .riptide-demo-roll, .adventurer-demo-success, .adventurer-demo-upgrades, .adventurer-demo-rule, .navigator-demo-hidden, .navigator-demo-cost, .navigator-demo-rule) { opacity: 1; }
.captain-demo-stage.is-reduced .riptide-demo-enemy { opacity: 0.22; filter: grayscale(1); }
.captain-demo-stage.is-reduced .riptide-demo-progress span { transform: scaleX(1); }

@keyframes captain-demo-choice {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); background: rgba(225, 180, 69, 0.25); }
  100% { transform: scale(1); background: rgba(225, 180, 69, 0.1); }
}
@keyframes navigator-demo-enemy {
  0% { opacity: 0; transform: translateX(1.5rem) rotate(3deg) scale(0.94); }
  15%, 74% { opacity: 1; transform: translateX(0) rotate(0) scale(1); filter: none; }
  100% { opacity: 0.14; transform: translateX(1.2rem) scale(0.88); filter: blur(2px) grayscale(1); }
}
@keyframes navigator-demo-passage {
  0% { opacity: 0; transform: scale(0.55) rotate(-15deg); }
  20%, 75% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.35) rotate(10deg); }
}
@keyframes navigator-demo-discard {
  0%, 20% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(1.2rem) rotate(8deg) scale(0.75); }
}

.demo-hero-row,
.demo-profile-row {
  display: grid;
  position: relative;
  grid-template-columns: minmax(6rem, 0.8fr) minmax(8rem, 1.5fr);
  align-items: center;
  gap: 1rem;
  min-height: 14rem;
  padding: 0.7rem clamp(1rem, 4vw, 2rem) 0;
}
.demo-hero-row { grid-template-columns: minmax(5.5rem, 0.8fr) minmax(3.5rem, 0.45fr) minmax(7rem, 1fr); }
.demo-info-panel {
  position: relative;
  z-index: 4;
  margin: 0.35rem clamp(0.8rem, 4vw, 2rem) 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(181, 204, 202, 0.35);
  border-radius: 0.5rem;
  background: rgba(3, 18, 25, 0.9);
}
.demo-info-heading { display: flex; justify-content: space-between; color: #c6dddc; font: 700 0.7rem var(--font-data); text-transform: uppercase; }
.demo-info-heading strong { color: #fff0bf; font-variant-numeric: tabular-nums; }

.inventor-demo-menu { background: linear-gradient(145deg, #392d24, #17242b); }
.inventor-demo-stage { background: radial-gradient(circle at 73% 28%, rgba(237, 141, 49, 0.2), transparent 24%), linear-gradient(180deg, #243947, #10171d 72%); }
.inventor-demo-turn span { background: #f0a84e; box-shadow: 0 0 0.65rem rgba(240, 168, 78, 0.9); }
.inventor-demo-weapon { z-index: 5; width: min(100%, 4.8rem); filter: drop-shadow(0 0 0.8rem rgba(236, 145, 55, 0.7)); }
.inventor-demo-blast { position: absolute; top: 46%; right: 2%; z-index: 8; width: 35%; color: #ffe0a0; font: 900 clamp(0.9rem, 4vw, 1.35rem) var(--font-display); text-align: center; text-shadow: 0 0 1rem #e77b2e; }
.inventor-demo-cards { display: grid; grid-template-columns: repeat(21, 1fr); gap: 0.12rem; margin-top: 0.5rem; }
.inventor-demo-cards span { height: 0.58rem; border-radius: 0.1rem; background: #e0c58d; box-shadow: 0 0 0.35rem rgba(224, 197, 141, 0.35); }
.inventor-demo-charge > b { display: block; margin-top: 0.42rem; color: #f0bd67; font: 800 0.7rem var(--font-data); text-align: right; }

.trickster-demo-menu { background: linear-gradient(145deg, #382440, #16121d); }
.trickster-demo-stage { background: radial-gradient(circle at 72% 29%, rgba(186, 78, 190, 0.2), transparent 26%), linear-gradient(180deg, #30203b, #110e19 72%); }
.trickster-demo-turn span { background: #d987dc; box-shadow: 0 0 0.65rem rgba(217, 135, 220, 0.9); }
.trickster-demo-guile small, .boatswain-demo-burn small, .boatswain-demo-survey small { color: #cabdd1; font: 700 0.65rem var(--font-data); text-transform: uppercase; }
.trickster-demo-guile > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem; margin-top: 0.55rem; }
.trickster-demo-guile span { padding: 0.5rem 0.35rem; border: 1px solid rgba(211, 153, 216, 0.35); border-radius: 0.35rem; background: rgba(29, 14, 36, 0.8); color: #dbcde1; font: 700 0.68rem var(--font-data); text-align: center; }
.trickster-demo-guile .is-chosen { border-color: #ed9ef0; color: #fff0ff; box-shadow: 0 0 0.8rem rgba(224, 103, 226, 0.4); }
.trickster-demo-limits { display: flex; justify-content: space-around; gap: 0.4rem; color: #cdbfd2; font: 0.67rem var(--font-data); }
.trickster-demo-limits b { display: block; margin-top: 0.18rem; color: #ed9ef0; }

.quartermaster-demo-menu { background: linear-gradient(145deg, #273b32, #121d1a); }
.quartermaster-demo-stage { background: radial-gradient(circle at 73% 29%, rgba(105, 198, 137, 0.19), transparent 25%), linear-gradient(180deg, #18392f, #0b1916 72%); }
.quartermaster-demo-turn span { background: #83d7a0; box-shadow: 0 0 0.65rem rgba(131, 215, 160, 0.9); }
.quartermaster-demo-levels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem; }
.quartermaster-demo-levels span { padding: 0.48rem; border: 1px solid rgba(137, 206, 161, 0.35); border-radius: 0.35rem; color: #c9ded0; font: 700 0.7rem var(--font-data); text-align: center; }
.quartermaster-demo-levels b { display: block; color: #81d79e; font-size: 0.85rem; }
.quartermaster-demo-levels .is-chosen { border-color: #a6e5b9; background: rgba(75, 159, 104, 0.2); box-shadow: 0 0 0.8rem rgba(101, 205, 137, 0.3); }
.quartermaster-demo-roll { display: flex; align-items: center; justify-content: center; gap: 0.55rem; color: #d8e9dd; font: 0.7rem var(--font-data); }
.quartermaster-demo-roll img { width: 2rem; height: 2rem; object-fit: contain; }
.quartermaster-demo-roll strong { color: #fff0bf; font-size: 1.15rem; }

.boatswain-demo-menu { background: linear-gradient(145deg, #3b3225, #17201f); }
.boatswain-demo-stage { background: radial-gradient(circle at 73% 29%, rgba(196, 148, 64, 0.2), transparent 25%), linear-gradient(180deg, #30362d, #121715 72%); }
.boatswain-demo-turn span { background: #d9b05e; box-shadow: 0 0 0.65rem rgba(217, 176, 94, 0.9); }
.boatswain-demo-burn > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin-top: 0.55rem; }
.boatswain-demo-burn span, .boatswain-demo-survey span { padding: 0.38rem; border: 1px solid #cbb27f; border-radius: 0.28rem; background: #e9dfc7; color: #28221b; font: 800 0.65rem var(--font-data); text-align: center; }
.boatswain-demo-survey > div { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.48rem; }
.boatswain-demo-survey span { min-width: 4.2rem; background: rgba(235, 224, 196, 0.95); }
.boatswain-demo-survey b { display: block; margin-bottom: 0.15rem; font-size: 0.78rem; }

.inventor-demo-stage :is(.riptide-demo-turn, .riptide-demo-captain, .inventor-demo-weapon, .inventor-demo-enemy, .inventor-demo-blast, .inventor-demo-charge, .inventor-demo-rule),
.trickster-demo-stage :is(.riptide-demo-turn, .riptide-demo-captain, .trickster-demo-guile, .trickster-demo-limits, .trickster-demo-rule),
.quartermaster-demo-stage :is(.riptide-demo-turn, .riptide-demo-captain, .quartermaster-demo-levels, .quartermaster-demo-roll, .quartermaster-demo-rule),
.boatswain-demo-stage :is(.riptide-demo-turn, .riptide-demo-captain, .boatswain-demo-burn, .boatswain-demo-survey, .boatswain-demo-rule) { opacity: 0; }
.inventor-demo-stage.is-running .riptide-demo-turn, .trickster-demo-stage.is-running .riptide-demo-turn, .quartermaster-demo-stage.is-running .riptide-demo-turn, .boatswain-demo-stage.is-running .riptide-demo-turn { animation: riptide-demo-enter-down .45s .15s cubic-bezier(.16,1,.3,1) both; }
.inventor-demo-stage.is-running .riptide-demo-captain, .trickster-demo-stage.is-running .riptide-demo-captain, .quartermaster-demo-stage.is-running .riptide-demo-captain, .boatswain-demo-stage.is-running .riptide-demo-captain { animation: riptide-demo-enter-left .65s .28s cubic-bezier(.22,1,.36,1) both; }
:is(.inventor-demo-stage,.trickster-demo-stage,.quartermaster-demo-stage,.boatswain-demo-stage).is-running .riptide-demo-rule { animation: riptide-demo-enter-up .7s 5.12s cubic-bezier(.16,1,.3,1) both; }
:is(.inventor-demo-stage,.trickster-demo-stage,.quartermaster-demo-stage,.boatswain-demo-stage).is-running .riptide-demo-progress span { animation: riptide-demo-progress var(--demo-duration) linear both; }
.inventor-demo-stage.is-running .inventor-demo-charge { animation: riptide-demo-enter-up .55s .72s cubic-bezier(.16,1,.3,1) both; }
.inventor-demo-stage.is-running .inventor-demo-cards span { animation: demo-card-charge .65s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(.8s + var(--charge-delay, 0s)); }
.inventor-demo-stage.is-running .inventor-demo-weapon { animation: navigator-demo-passage 2.4s 1.5s cubic-bezier(.34,1.56,.64,1) both; }
.inventor-demo-stage.is-running .inventor-demo-enemy { animation: riptide-demo-enemy 3.3s .42s cubic-bezier(.2,.8,.2,1) both; }
.inventor-demo-stage.is-running .inventor-demo-blast { animation: riptide-demo-victory 1.2s 3s cubic-bezier(.34,1.56,.64,1) both; }
.trickster-demo-stage.is-running .trickster-demo-guile { animation: riptide-demo-enter-up .6s .75s cubic-bezier(.16,1,.3,1) both; }
.trickster-demo-stage.is-running .trickster-demo-guile .is-chosen { animation: captain-demo-choice 1.2s 2.8s cubic-bezier(.34,1.56,.64,1) both; }
.trickster-demo-stage.is-running .trickster-demo-limits { animation: riptide-demo-enter-up .55s 4.05s cubic-bezier(.16,1,.3,1) both; }
.quartermaster-demo-stage.is-running .quartermaster-demo-levels { animation: riptide-demo-enter-up .6s .75s cubic-bezier(.16,1,.3,1) both; }
.quartermaster-demo-stage.is-running .quartermaster-demo-levels span { animation: demo-level-step .45s cubic-bezier(.34,1.56,.64,1) both; }
.quartermaster-demo-stage.is-running .quartermaster-demo-levels span:nth-child(2) { animation-delay: 1.35s; }.quartermaster-demo-stage.is-running .quartermaster-demo-levels span:nth-child(3) { animation-delay: 2.1s; }.quartermaster-demo-stage.is-running .quartermaster-demo-levels span:nth-child(4) { animation-delay: 2.85s; }
.quartermaster-demo-stage.is-running .quartermaster-demo-roll { animation: riptide-demo-enter-up .6s 4s cubic-bezier(.34,1.56,.64,1) both; }
.boatswain-demo-stage.is-running .boatswain-demo-burn { animation: riptide-demo-enter-up .6s .75s cubic-bezier(.16,1,.3,1) both; }
.boatswain-demo-stage.is-running .boatswain-demo-burn span { animation: navigator-demo-discard 1s 1.15s cubic-bezier(.65,0,.35,1) both; }
.boatswain-demo-stage.is-running .boatswain-demo-survey { animation: riptide-demo-enter-up .6s 2.25s cubic-bezier(.16,1,.3,1) both; }
.boatswain-demo-stage.is-running .boatswain-demo-survey span { animation: demo-card-place .7s 3.05s cubic-bezier(.34,1.56,.64,1) both; }
.boatswain-demo-stage.is-running .boatswain-demo-survey span:nth-child(2) { animation-delay: 3.65s; }.boatswain-demo-stage.is-running .boatswain-demo-survey span:nth-child(3) { animation-delay: 4.25s; }
:is(.inventor-demo-stage,.trickster-demo-stage,.quartermaster-demo-stage,.boatswain-demo-stage).is-reduced :is(.riptide-demo-turn,.riptide-demo-captain,.inventor-demo-charge,.inventor-demo-blast,.trickster-demo-guile,.trickster-demo-limits,.quartermaster-demo-levels,.quartermaster-demo-roll,.boatswain-demo-burn,.boatswain-demo-survey,.riptide-demo-rule) { opacity: 1; }
:is(.inventor-demo-stage,.trickster-demo-stage,.quartermaster-demo-stage,.boatswain-demo-stage).is-reduced .riptide-demo-progress span { transform: scaleX(1); }
.inventor-demo-stage.is-reduced .inventor-demo-enemy { opacity: .22; filter: grayscale(1); }

@keyframes demo-card-charge { from { opacity: .2; transform: scaleY(.3); } to { opacity: 1; transform: scaleY(1); } }
@keyframes demo-level-step { from { opacity: .35; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
@keyframes demo-card-place { from { opacity: 0; transform: translateY(-1rem) rotate(-5deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }

:is(.riptide-demo-stage, .schemer-demo-stage, .captain-demo-stage).is-paused * {
  animation-play-state: paused !important;
}
.long-demo-stage { --demo-duration: 8s; }

.cartographer-demo-menu { background: linear-gradient(145deg, #283b42, #141b20); }
.cartographer-demo-stage { background: radial-gradient(circle at 72% 28%, rgba(75, 169, 185, .2), transparent 25%), linear-gradient(180deg, #173642, #0b171d 72%); }
.cartographer-demo-turn span { background: #78cfda; box-shadow: 0 0 .65rem rgba(120,207,218,.9); }
.cartographer-demo-payment { display: grid; justify-items: center; gap: .5rem; color: #c8dcdf; font: .67rem var(--font-data); text-align: center; }
.cartographer-demo-payment small { text-transform: uppercase; }
.cartographer-demo-payment span, .healer-demo-heart span { display: grid; width: 3.3rem; aspect-ratio: .72; place-items: center; border: 1px solid #d5bd89; border-radius: .3rem; background: #eee4cd; color: #251f19; font: 900 1rem var(--font-data); box-shadow: 0 .35rem .7rem rgba(0,0,0,.4); }
.cartographer-demo-payment span { color: #b22442; }
.cartographer-demo-payment b { color: #9ce4e8; }
.cartographer-demo-chart { display: flex; justify-content: center; gap: .65rem; }
.cartographer-demo-chart span { min-width: 4.5rem; padding: .42rem; border: 1px solid rgba(115,205,215,.45); border-radius: .35rem; color: #cce6e7; font: .67rem var(--font-data); text-align: center; }
.cartographer-demo-chart b { display: block; color: #fff0bf; font-size: .8rem; }.cartographer-demo-chart .is-unused { opacity: .55; }

.healer-demo-menu { background: linear-gradient(145deg, #3a2930, #1b1820); }
.healer-demo-stage { background: radial-gradient(circle at 72% 28%, rgba(226, 91, 121, .2), transparent 25%), linear-gradient(180deg, #3d2430, #171119 72%); }
.healer-demo-turn span { background: #f08da5; box-shadow: 0 0 .65rem rgba(240,141,165,.9); }
.healer-demo-heart { display: grid; justify-items: center; gap: .65rem; }.healer-demo-heart span { color: #b22442; }.healer-demo-heart b { color: #ffc2ce; font: 800 .8rem var(--font-data); }
.healer-demo-health-track, .firebrand-demo-target-track { height: .75rem; margin-top: .45rem; overflow: hidden; border: 1px solid rgba(250,211,115,.45); border-radius: 999px; background: #130c11; }
.healer-demo-health-track span { display: block; width: 38.1%; height: 100%; transform-origin: left; border-radius: inherit; background: linear-gradient(90deg,#9e2e4d,#e85372,#f3a0af); }
.healer-demo-health > b, .firebrand-demo-target > b { display: block; margin-top: .35rem; color: #ffafbf; font: 800 .7rem var(--font-data); text-align: right; }

.renegade-demo-menu { background: linear-gradient(145deg, #393128, #17191c); }
.renegade-demo-stage { min-height: clamp(32rem, 74dvh, 36rem); background: radial-gradient(circle at 72% 28%, rgba(196,147,67,.2), transparent 25%), linear-gradient(180deg, #333027, #121517 72%); }
.renegade-demo-turn span { background: #e3b65f; box-shadow: 0 0 .65rem rgba(227,182,95,.9); }
.renegade-demo-damage { display: flex; align-items: center; justify-content: space-around; gap: .5rem; color: #d8d0bf; font: .68rem var(--font-data); }.renegade-demo-damage strong { color: #f1c96f; }.renegade-demo-damage > span { color: #f09a83; font-weight: 800; }
.renegade-demo-attack { display: grid; z-index: 4; justify-items: center; gap: .2rem; color: #d8d0bf; font: .68rem var(--font-data); text-align: center; }.renegade-demo-attack img { width: 3.2rem; }.renegade-demo-attack b { color: #f1c96f; }.renegade-demo-attack strong { color: #fff0bf; font-size: 1rem; }
.renegade-demo-result { position: absolute; top: 45%; right: 1%; z-index: 8; width: 36%; color: #a8e2ac; font: 900 clamp(.88rem,4vw,1.35rem) var(--font-display); text-align: center; text-shadow: 0 0 1rem rgba(83,190,103,.8); }
.renegade-demo-roll { display: flex; align-items: center; justify-content: space-around; gap: .5rem; color: #d8d0bf; font: .68rem var(--font-data); }.renegade-demo-roll > strong { color: #f1c96f; }.renegade-demo-roll em { color: #9de1aa; font-style: normal; font-weight: 800; }

.firebrand-demo-menu { background: linear-gradient(145deg, #44291d, #1c1512); }
.firebrand-demo-stage { background: radial-gradient(circle at 72% 28%, rgba(232,91,35,.23), transparent 25%), linear-gradient(180deg, #452819, #1a100d 72%); }
.firebrand-demo-turn span { background: #f0783f; box-shadow: 0 0 .65rem rgba(240,120,63,.9); }
.firebrand-demo-roll { display: grid; justify-items: center; gap: .3rem; color: #ffe1a7; font: 800 .7rem var(--font-data); }.firebrand-demo-roll img { width: 3.2rem; }
.firebrand-demo-stage .demo-hero-row { grid-template-columns: minmax(5.5rem,1fr) minmax(5.2rem,.62fr) minmax(7rem,1fr); gap: clamp(.55rem,2.5vw,1.15rem); }
.firebrand-demo-roll { z-index: 6; width: 100%; justify-self: center; transform-origin: center; }
.firebrand-demo-overkill { position: absolute; top: 45%; right: 1%; z-index: 8; width: 36%; color: #ffc36f; font: 900 clamp(.88rem,4vw,1.35rem) var(--font-display); text-align: center; text-shadow: 0 0 1rem #e75627; }
.firebrand-demo-target { border-color: rgba(105, 205, 224, .5); box-shadow: inset 0 0 1rem rgba(64, 163, 190, .12); }
.firebrand-demo-target .demo-info-heading strong, .firebrand-demo-target > b { color: #8fdce9; }
.firebrand-demo-target-track { border-color: rgba(105, 205, 224, .55); background: #08151a; }
.firebrand-demo-target-track span { display: block; width: 100%; height: 100%; transform-origin: left; border-radius: inherit; background: linear-gradient(90deg,#247b96,#42aac0,#88dce6); box-shadow: 0 0 .8rem rgba(74, 183, 207, .55); }

:is(.cartographer-demo-stage,.healer-demo-stage,.renegade-demo-stage,.firebrand-demo-stage) :is(.riptide-demo-turn,.riptide-demo-captain,.demo-info-panel,.riptide-demo-rule),
.cartographer-demo-payment, .healer-demo-heart, .renegade-demo-attack, .renegade-demo-enemy, .renegade-demo-result, .firebrand-demo-roll, .firebrand-demo-enemy, .firebrand-demo-overkill { opacity: 0; }
:is(.cartographer-demo-stage,.healer-demo-stage,.renegade-demo-stage,.firebrand-demo-stage).is-running .riptide-demo-turn { animation: riptide-demo-enter-down .45s .15s cubic-bezier(.16,1,.3,1) both; }
:is(.cartographer-demo-stage,.healer-demo-stage,.renegade-demo-stage,.firebrand-demo-stage).is-running .riptide-demo-captain { animation: riptide-demo-enter-left .65s .28s cubic-bezier(.22,1,.36,1) both; }
:is(.cartographer-demo-stage,.healer-demo-stage,.renegade-demo-stage,.firebrand-demo-stage).is-running .riptide-demo-rule { animation: riptide-demo-enter-up .7s 6.05s cubic-bezier(.16,1,.3,1) both; }
:is(.cartographer-demo-stage,.healer-demo-stage,.renegade-demo-stage,.firebrand-demo-stage).is-running .riptide-demo-progress span { animation: riptide-demo-progress var(--demo-duration) linear both; }
.cartographer-demo-stage.is-running .cartographer-demo-payment, .healer-demo-stage.is-running .healer-demo-heart { animation: riptide-demo-enter-up .6s .72s cubic-bezier(.16,1,.3,1) both; }
.cartographer-demo-stage.is-running .cartographer-demo-payment span { animation: navigator-demo-discard 1.15s .9s cubic-bezier(.65,0,.35,1) both; }
.cartographer-demo-stage.is-running .cartographer-demo-chart { animation: riptide-demo-enter-up .6s 2.55s cubic-bezier(.16,1,.3,1) both; }.cartographer-demo-stage.is-running .cartographer-demo-chart span { animation: demo-card-place .75s 4.15s cubic-bezier(.34,1.56,.64,1) both; }.cartographer-demo-stage.is-running .cartographer-demo-chart span:nth-child(2) { animation-delay: 4.5s; }.cartographer-demo-stage.is-running .cartographer-demo-chart span:nth-child(3) { animation-delay: 4.85s; }
.healer-demo-stage.is-running .healer-demo-health { animation: riptide-demo-enter-up .55s 1.35s cubic-bezier(.16,1,.3,1) both; }.healer-demo-stage.is-running .healer-demo-health-track span { animation: healer-demo-fill .9s 4.2s cubic-bezier(.22,1,.36,1) both; }.healer-demo-stage.is-running .healer-demo-health > b { animation: riptide-demo-heal-number 1.3s 4.15s cubic-bezier(.34,1.56,.64,1) both; }
.renegade-demo-stage.is-running .renegade-demo-damage { animation: riptide-demo-enter-up .6s .65s cubic-bezier(.16,1,.3,1) both; }.renegade-demo-stage.is-running .renegade-demo-damage strong { animation: captain-demo-choice 1.1s 1.75s cubic-bezier(.34,1.56,.64,1) both; }.renegade-demo-stage.is-running .renegade-demo-attack { animation: riptide-demo-enter-up .6s 3.65s cubic-bezier(.16,1,.3,1) both; }.renegade-demo-stage.is-running .renegade-demo-enemy { animation: riptide-demo-enemy 6.1s 3.35s cubic-bezier(.2,.8,.2,1) both; }.renegade-demo-stage.is-running .renegade-demo-roll { animation: riptide-demo-enter-up .6s 6.75s cubic-bezier(.16,1,.3,1) both; }.renegade-demo-stage.is-running .renegade-demo-roll em { animation: captain-demo-choice 1.2s 7.95s cubic-bezier(.34,1.56,.64,1) both; }.renegade-demo-stage.is-running .renegade-demo-result { animation: riptide-demo-victory 1.35s 8.75s cubic-bezier(.34,1.56,.64,1) both; }.renegade-demo-stage.is-running .riptide-demo-rule { animation-delay: 9.35s; }
.firebrand-demo-stage.is-running .firebrand-demo-roll { animation: firebrand-demo-center-roll 1.5s 1.1s cubic-bezier(.16,1,.3,1) both; }.firebrand-demo-stage.is-running .firebrand-demo-enemy { animation: riptide-demo-enemy 3.8s .42s cubic-bezier(.2,.8,.2,1) both; }.firebrand-demo-stage.is-running .firebrand-demo-overkill { animation: riptide-demo-victory 1.35s 3.2s cubic-bezier(.34,1.56,.64,1) both; }.firebrand-demo-stage.is-running .firebrand-demo-target { animation: riptide-demo-enter-up .55s 3.85s cubic-bezier(.16,1,.3,1) both; }.firebrand-demo-stage.is-running .firebrand-demo-target-track span { animation: firebrand-demo-target-fill .9s 4.75s cubic-bezier(.22,1,.36,1) both; }
:is(.cartographer-demo-stage,.healer-demo-stage,.renegade-demo-stage,.firebrand-demo-stage).is-reduced :is(.riptide-demo-turn,.riptide-demo-captain,.demo-info-panel,.riptide-demo-rule,.cartographer-demo-payment,.healer-demo-heart,.renegade-demo-attack,.renegade-demo-result,.firebrand-demo-roll,.firebrand-demo-overkill) { opacity: 1; }
.renegade-demo-stage.is-reduced .renegade-demo-enemy { opacity: .35; }
.firebrand-demo-stage.is-reduced .firebrand-demo-enemy { opacity: .22; filter: grayscale(1); }:is(.cartographer-demo-stage,.healer-demo-stage,.renegade-demo-stage,.firebrand-demo-stage).is-reduced .riptide-demo-progress span { transform: scaleX(1); }.healer-demo-stage.is-reduced .healer-demo-health-track span { width: 85.7%; }.firebrand-demo-stage.is-reduced .firebrand-demo-target-track span { transform: scaleX(.9); }

@keyframes healer-demo-fill { from { width: 38.1%; } to { width: 85.7%; } }
@keyframes firebrand-demo-target-fill { from { transform: scaleX(1); } to { transform: scaleX(.9); } }
@keyframes firebrand-demo-center-roll { 0% { opacity: 0; transform: translateY(.8rem) scale(.72); } 27%,72% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-.4rem) scale(.94); } }

.nine-demo-stage { --demo-duration: 9s; }
.eleven-demo-stage { --demo-duration: 11s; }
.final-demo-menu { background: linear-gradient(145deg, #2c3940, #141b20); }
.final-demo-stage { background: radial-gradient(circle at 72% 28%, rgba(100,177,190,.18), transparent 25%), linear-gradient(180deg,#1b3540,#0c171d 72%); }
.final-demo-focus { display: grid; gap: .45rem; color: #d0e0df; font: .68rem var(--font-data); }
.final-demo-icon { z-index: 4; width: min(100%,4.7rem); filter: drop-shadow(0 0 .7rem rgba(112,205,218,.55)); }
.final-demo-result { display: flex; align-items: center; justify-content: space-around; gap: .55rem; color: #cbdcdb; font: .68rem var(--font-data); text-align: center; }
.final-demo-result strong { color: #fff0bf; }.final-demo-result em { color: #9fded9; font-style: normal; font-weight: 800; }
.final-demo-focus small { text-transform: uppercase; text-align: center; }
.final-demo-stage :is(.riptide-demo-turn,.riptide-demo-captain,.final-demo-focus,.final-demo-icon,.final-demo-enemy,.final-demo-result,.riptide-demo-rule) { opacity: 0; }
.final-demo-stage.is-running .riptide-demo-turn { animation: riptide-demo-enter-down .45s .15s cubic-bezier(.16,1,.3,1) both; }
.final-demo-stage.is-running .riptide-demo-captain { animation: riptide-demo-enter-left .65s .28s cubic-bezier(.22,1,.36,1) both; }
.final-demo-stage.is-running .final-demo-focus, .final-demo-stage.is-running .final-demo-icon { animation: riptide-demo-enter-up .6s .75s cubic-bezier(.16,1,.3,1) both; }
.final-demo-stage.is-running .final-demo-enemy { animation: riptide-demo-enemy 5.2s .42s cubic-bezier(.2,.8,.2,1) both; }
.final-demo-stage.is-running .final-demo-result { animation: riptide-demo-enter-up .6s 3.25s cubic-bezier(.16,1,.3,1) both; }
.final-demo-stage.is-running .riptide-demo-rule { animation: riptide-demo-enter-up .7s 6.15s cubic-bezier(.16,1,.3,1) both; }
.nine-demo-stage.is-running .riptide-demo-rule { animation-delay: 7.05s; }
.final-demo-stage.is-running .riptide-demo-progress span { animation: riptide-demo-progress var(--demo-duration) linear both; }
.final-demo-stage.is-reduced :is(.riptide-demo-turn,.riptide-demo-captain,.final-demo-focus,.final-demo-icon,.final-demo-result,.riptide-demo-rule) { opacity: 1; }
.final-demo-stage.is-reduced .final-demo-enemy { opacity: .3; }.final-demo-stage.is-reduced .riptide-demo-progress span { transform: scaleX(1); }

.strongarm-demo-levels { grid-template-columns: repeat(2,1fr); }.strongarm-demo-levels span { padding: .48rem; border: 1px solid rgba(227,178,91,.4); border-radius: .35rem; text-align: center; }.strongarm-demo-levels b { display: block; color: #edc66f; }.strongarm-demo-stage.is-running .strongarm-demo-levels span { animation: demo-level-step .5s cubic-bezier(.34,1.56,.64,1) both; }.strongarm-demo-stage.is-running .strongarm-demo-levels span:nth-child(2) { animation-delay: 1.5s; }.strongarm-demo-stage.is-running .strongarm-demo-levels span:nth-child(3) { animation-delay: 2.7s; }.strongarm-demo-stage.is-running .strongarm-demo-levels span:nth-child(4) { animation-delay: 4.1s; }
.veteran-demo-treasure span { padding: .5rem; border: 1px solid #cdbb92; border-radius: .3rem; background: #eee4cd; color: #b22442; font-weight: 900; text-align: center; }.veteran-demo-treasure .is-low { box-shadow: 0 0 .8rem rgba(225,163,70,.55); }.veteran-demo-treasure .is-safe { opacity: .65; }.veteran-demo-stage.is-running .is-low { animation: navigator-demo-discard 1.2s 1.5s cubic-bezier(.65,0,.35,1) both; }
.sentinel-demo-stage { background: radial-gradient(circle at 72% 28%,rgba(88,150,197,.2),transparent 25%),linear-gradient(180deg,#203649,#0d1821 72%); }.sentinel-demo-stage.is-running .final-demo-result strong { animation: captain-demo-choice 1.2s 1.6s cubic-bezier(.34,1.56,.64,1) both; }
.luminary-demo-heart { justify-items: center; }.luminary-demo-heart span { padding: .65rem 1rem; border: 1px solid #e29aac; border-radius: .35rem; background: rgba(91,31,48,.75); color: #ffc4d0; font-weight: 900; }.luminary-demo-heart b { color: #fff0bf; }.luminary-demo-stage.is-running .luminary-demo-heart span { animation: captain-demo-choice 1.3s 1.25s cubic-bezier(.34,1.56,.64,1) both; }
.automaton-demo-stage { background: radial-gradient(circle at 72% 28%,rgba(100,182,194,.22),transparent 25%),linear-gradient(180deg,#20383d,#0c171a 72%); }.automaton-demo-stage.is-running .final-demo-result strong { animation: captain-demo-choice 1.2s 1.7s cubic-bezier(.34,1.56,.64,1) both; }
.corsair-demo-stage.is-running .final-demo-result strong { animation: captain-demo-choice 1.2s 4.55s cubic-bezier(.34,1.56,.64,1) both; }
.ambassador-demo-odds span { flex: 1; padding: .42rem; border: 1px solid rgba(158,201,207,.35); border-radius: .35rem; }.ambassador-demo-odds b { display: block; margin-top: .18rem; color: #a9e2e8; }.ambassador-demo-odds span:last-child { border-color: rgba(224,174,87,.6); }.ambassador-demo-stage.is-running .ambassador-demo-odds span:last-child { animation: captain-demo-choice 1.2s 4.75s cubic-bezier(.34,1.56,.64,1) both; }
.revenant-demo-stage { background: radial-gradient(circle at 72% 28%,rgba(121,81,168,.24),transparent 25%),linear-gradient(180deg,#2d2440,#110e1c 72%); }.revenant-demo-wheel { grid-template-columns: repeat(2,3rem); justify-content: center; }.revenant-demo-wheel span { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid rgba(193,151,220,.5); border-radius: 50%; background: rgba(49,30,67,.8); color: #e4b6f2; font-size: 1.2rem; }.revenant-demo-wheel span:last-child { color: #d5d0d8; }.revenant-demo-stage.is-running .revenant-demo-wheel { animation: revenant-demo-spin 2.2s 1.8s cubic-bezier(.2,.8,.2,1) both; }.revenant-demo-stage.is-running .final-demo-result strong { animation: captain-demo-choice 1.2s 5.35s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes revenant-demo-spin { from { opacity: 0; transform: rotate(-12deg) scale(.85); } 25% { opacity: 1; } 65% { opacity: 1; transform: rotate(372deg) scale(1.05); } to { opacity: 1; transform: rotate(360deg) scale(1); } }

@keyframes riptide-demo-enter-down {
  from { opacity: 0; transform: translateY(-1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes riptide-demo-enter-left {
  from { opacity: 0; transform: translateX(-1.5rem) scale(0.94); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes riptide-demo-enter-up {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes riptide-demo-enemy {
  0% { opacity: 0; transform: translateX(1.5rem) rotate(3deg) scale(0.94); }
  18%, 73% { opacity: 1; transform: translateX(0) rotate(0) scale(1); filter: none; }
  82% { opacity: 1; transform: translateX(0) rotate(-3deg) scale(0.96); filter: saturate(0.4); }
  100% { opacity: 0; transform: translate(1.4rem, 2rem) rotate(8deg) scale(0.82); filter: grayscale(1); }
}

@keyframes riptide-demo-cannon {
  0% { opacity: 0; transform: translateX(-0.7rem) scale(0.75) rotate(-12deg); }
  30%, 78% { opacity: 1; transform: translateX(0) scale(1) rotate(5deg); }
  100% { opacity: 0; transform: translateX(-0.2rem) scale(0.9) rotate(-4deg); }
}

@keyframes riptide-demo-roll {
  0% { opacity: 0; transform: translate(-50%, 0.8rem) scale(0.72); }
  27%, 72% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -0.4rem) scale(0.94); }
}

@keyframes riptide-demo-blast {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25) rotate(-10deg); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(3deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4) rotate(7deg); }
}

@keyframes riptide-demo-victory {
  0% { opacity: 0; transform: translateY(0.8rem) scale(0.65); }
  28%, 74% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-0.5rem) scale(1.04); }
}

@keyframes riptide-demo-heal-orb {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  20% { opacity: 1; transform: translate(0, 0) scale(1); }
  82% { opacity: 1; transform: translate(-240%, 11.5rem) scale(0.78); }
  100% { opacity: 0; transform: translate(-240%, 11.5rem) scale(0.35); }
}

@keyframes riptide-demo-health-fill {
  from { width: 38.1%; }
  to { width: 76.2%; }
}

@keyframes riptide-demo-heal-number {
  0% { opacity: 0; transform: translateY(0.8rem) scale(0.7); }
  24%, 72% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-0.7rem) scale(0.94); }
}

@keyframes riptide-demo-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 30rem) and (orientation: portrait) {
  .riptide-demo-menu { padding: 0.75rem; }
  .riptide-demo-menu > .tutorial-kicker { font-size: 0.55rem; }
  .riptide-demo-stage { min-height: min(27rem, 68dvh); }
  .riptide-demo-combat {
    grid-template-columns: minmax(4.5rem, 0.78fr) minmax(3.35rem, 0.38fr) minmax(6.2rem, 1fr);
    min-height: 13rem;
    padding-inline: 0.45rem;
  }
  .riptide-demo-captain img { width: min(100%, 6.3rem); }
  .riptide-demo-cannon { width: min(100%, 3.75rem); }
  .riptide-demo-enemy .card { width: min(100%, 7rem); }
  .riptide-demo-roll { bottom: -0.15rem; }
  .riptide-demo-heal-orb { left: 72%; }
  .riptide-demo-health { margin-inline: 0.55rem; }
  .riptide-demo-rule { margin-inline: 0.65rem; }
  @keyframes riptide-demo-heal-orb {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    20% { opacity: 1; transform: translate(0, 0) scale(1); }
    82% { opacity: 1; transform: translate(-155%, 10.3rem) scale(0.72); }
    100% { opacity: 0; transform: translate(-155%, 10.3rem) scale(0.3); }
  }
}

@media (max-width: 42rem) {
  .meet-captains-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
}

@media (max-width: 30rem) and (orientation: portrait) {
  .meet-captains-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meet-captain-tile { padding: 0.4rem; }
  .meet-captain-hero { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .meet-captain-identity h3 { font-size: 1.35rem; }
}

#rankingsButton {
  grid-column: 1 / -1;
  border-color: rgba(109, 185, 188, 0.62);
  background: linear-gradient(180deg, rgba(25, 80, 91, 0.9), rgba(6, 35, 46, 0.94));
  color: #e2f2ef;
}

.tutorial-primer {
  width: min(58rem, calc(100vw - 1.25rem));
  max-height: min(48rem, calc(100dvh - 1.25rem));
}

.tutorial-primer > .tutorial-title {
  max-width: none;
  font-size: clamp(1.4rem, 4.7vw, 2.15rem);
  white-space: nowrap;
}

.tutorial-primer-progress {
  margin: 0.25rem 0 0.9rem;
  color: #91aeb6;
  font: 0.65rem var(--font-data);
  text-align: center;
}

.tutorial-primer-lead,
.tutorial-primer-tip {
  max-width: 46rem;
  margin: 0 auto 1rem;
  color: #e5e9e4;
  line-height: 1.55;
  text-align: center;
}

#tutorialPrimerDeck .tutorial-primer-lead {
  max-width: 52rem;
  font-size: 0.8rem;
}

#tutorialPrimerEnemies .tutorial-primer-lead { font-size: 0.8rem; }
#tutorialPrimerUpgrades .tutorial-primer-lead { font-size: 0.8rem; }
#tutorialPrimerUpgrades .tutorial-primer-tip { font-size: 0.8rem; }

.tutorial-enemy-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.tutorial-enemy-type {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.6rem;
  border: 1px solid rgba(217, 101, 91, 0.34);
  border-radius: 0.55rem;
  background: rgba(5, 19, 27, 0.72);
}

.tutorial-enemy-type:last-child {
  grid-column: 1 / -1;
  width: calc(50% - 0.325rem);
  justify-self: center;
}

.tutorial-enemy-type > .card {
  width: 4.5rem;
  min-width: 4.5rem;
  aspect-ratio: 5 / 7;
  font-size: 0.32rem;
  filter: none;
}

.tutorial-enemy-type h3 {
  margin: 0 0 0.3rem;
  color: #f4d98f;
  font: 700 0.78rem var(--font-display);
}

.tutorial-enemy-value {
  font-family: var(--font-data);
  font-weight: 400;
  color: #d8c99e;
}

.tutorial-enemy-type > div p,
.tutorial-enemy-type > div small {
  display: block;
  margin: 0;
  color: #dce4e3;
  font-size: 0.68rem;
  line-height: 1.38;
}

.tutorial-enemy-type > div small {
  margin-top: 0.3rem;
  color: #9fb2b6;
}

.tutorial-deck-halves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.tutorial-deck-half {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid rgba(157, 178, 187, 0.35);
  border-radius: 0.65rem;
  background: rgba(5, 19, 27, 0.72);
}

.tutorial-deck-half--good { border-color: rgba(91, 211, 153, 0.46); }
.tutorial-deck-half--danger { border-color: rgba(217, 101, 91, 0.48); }

.tutorial-deck-half h3 {
  margin: 0 0 0.7rem;
  color: #f4d98f;
  font: 700 0.92rem var(--font-display);
  text-align: center;
}

.tutorial-deck-half > p {
  margin: 0.75rem auto 0;
  color: #d4dddd;
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
}

.tutorial-primer-cards {
  display: flex;
  justify-content: center;
  gap: clamp(0.4rem, 2vw, 0.8rem);
  padding-bottom: 0.35rem;
}

.tutorial-primer-cards .card {
  width: min(10rem, 42%);
  min-width: 0;
  aspect-ratio: 5 / 7;
  filter: drop-shadow(0 0.3rem 0.25rem rgba(0, 0, 0, 0.28));
}

.tutorial-upgrade-board {
  position: relative;
  z-index: 0;
}

.tutorial-primer-tip {
  margin-top: 1rem;
  margin-bottom: 0;
  color: #d2d9da;
  font-size: 0.76rem;
}

.tutorial-primer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  width: 100%;
  max-width: 28.6rem;
  margin-top: 1rem;
  margin-inline: auto;
}

.tutorial-primer-actions .btn {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius);
  font-size: 0.86rem;
  line-height: 1.2;
}

@media (max-width: 560px) {
  .tutorial-deck-halves { grid-template-columns: minmax(0, 1fr); }
  .tutorial-primer-cards .card { width: min(7.5rem, 38%); }
  .tutorial-enemy-overview { grid-template-columns: minmax(0, 1fr); }
  .tutorial-enemy-type:last-child { grid-column: auto; width: 100%; }
}

.lobby-records .btn:disabled {
  opacity: 0.52;
}


/* A compact rulebook laid over the lobby. The cool gray panel separates instruction
   from the warm harbour artwork without losing the game's brass-and-ink identity. */
.tutorial-menu {
  width: min(38rem, calc(100vw - 1.5rem));
  max-height: min(42rem, calc(100dvh - 1.5rem));
  overflow: auto;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  border: 1px solid rgba(232, 226, 211, 0.32);
  border-radius: 0.75rem;
  background:
    linear-gradient(145deg, rgba(91, 103, 108, 0.98), rgba(47, 58, 63, 0.99));
  box-shadow:
    0 1.5rem 5rem rgba(0, 0, 0, 0.72),
    inset 0 1px rgba(255, 255, 255, 0.12);
  color: var(--bone);
}

.tutorial-menu--wide {
  width: min(58rem, calc(100vw - 1.5rem));
}

.tutorial-menu::backdrop {
  background: rgba(3, 12, 17, 0.78);
  backdrop-filter: blur(5px);
}

.new-player-menu {
  width: min(30rem, calc(100vw - 1.5rem));
  text-align: center;
}

.new-player-menu .tutorial-title {
  padding-inline: 2.25rem;
}

.new-player-options {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.1rem;
}

.new-player-options .tutorial-launch {
  justify-content: center;
  width: 100%;
  margin: 0;
}

.stats-menu {
  width: min(62rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  overflow: auto;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid rgba(232, 226, 211, 0.32);
  border-radius: 0.75rem;
  background: linear-gradient(145deg, rgba(69, 82, 87, 0.99), rgba(31, 42, 47, 0.99));
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.72);
  color: var(--bone);
}

.stats-menu::backdrop {
  background: rgba(3, 12, 17, 0.8);
  backdrop-filter: blur(5px);
}

.health-menu {
  width: min(28rem, calc(100vw - 1.5rem));
  padding-bottom: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
}

.health-menu .tutorial-title {
  box-sizing: border-box;
  width: 100%;
  padding-right: 2rem;
  padding-left: 2rem;
  text-align: center;
}

.health-menu-summary {
  margin-bottom: 0.35rem;
  color: #f4d98f;
  font-family: var(--font-data);
  letter-spacing: 0.04em;
}

.health-avatar-stage {
  display: grid;
  place-items: end center;
  height: min(48dvh, 32rem);
  min-height: 15rem;
  margin: 0 auto;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5, 15, 24, 0.08) 35%, rgba(3, 13, 19, 0.28) 100%),
    radial-gradient(ellipse at 50% 56%, transparent 25%, rgba(3, 13, 19, 0.2) 100%),
    url('/art/bg-health-avatar-shore.webp') center / cover no-repeat;
  box-shadow: inset 0 0 2.5rem rgba(2, 10, 16, 0.24);
}

.health-avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 1rem 1rem rgba(0, 0, 0, 0.38));
}

.health-avatar.is-damaged {
  filter: drop-shadow(0 1rem 1rem rgba(0, 0, 0, 0.48)) saturate(0.92);
}

.health-crew-picker,
.health-info-tabs {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.health-crew-picker {
  margin: 0 0 0.55rem;
}

.health-info-tabs {
  margin-top: 0.75rem;
}

.health-crew-picker button,
.health-info-tabs button {
  flex: 1 0 auto;
  min-height: 2.45rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(224, 181, 75, 0.28);
  border-radius: 999px;
  background: rgba(3, 17, 24, 0.78);
  color: #b9c8cc;
  font: 0.68rem var(--font-data);
}

.health-crew-picker button[aria-selected="true"],
.health-info-tabs button[aria-selected="true"] {
  border-color: rgba(242, 199, 110, 0.82);
  background: rgba(77, 51, 12, 0.72);
  color: #fff1c7;
  box-shadow: 0 0 0.7rem rgba(224, 181, 75, 0.18);
}

.health-info-card {
  min-height: 9.45rem;
  margin-top: 0.8rem;
  padding: 1rem;
  border: 1px solid rgba(224, 181, 75, 0.3);
  border-radius: 0.65rem;
  background: linear-gradient(180deg, rgba(5, 20, 28, 0.96), rgba(2, 13, 18, 0.96));
  color: #dce5e5;
}

.health-info-card h3 {
  margin: 0 0 0.55rem;
  color: #f2c76e;
  font: 0.82rem var(--font-data);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.health-info-card p {
  margin: 0;
  line-height: 1.55;
}

.health-ability-stats {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.health-ability-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(89, 238, 163, 0.18);
  border-radius: 0.4rem;
  background: rgba(2, 10, 12, 0.72);
  color: #a9babe;
  font-family: var(--font-data);
}

.health-ability-stat strong {
  color: #d8ffe8;
  text-align: right;
}

.health-history {
  margin: 0.8rem 0 0;
  padding: 0.7rem 0.75rem 0.8rem;
  border: 1px solid rgba(89, 238, 163, 0.3);
  border-radius: 0.65rem;
  background: rgba(1, 10, 12, 0.92);
  box-shadow: inset 0 0 1.4rem rgba(20, 145, 94, 0.09), 0 0 0.8rem rgba(0, 0, 0, 0.25);
}

.health-history-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
  color: #83f2b5;
  font-family: var(--font-data);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.health-history-heading h3 {
  margin: 0;
  font-size: 0.8rem;
}

.health-history-heading span {
  color: #d8ffe8;
  font-size: 0.72rem;
}

.health-history-screen {
  min-height: 8rem;
  border-radius: 0.35rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(24, 112, 76, 0.09), transparent 68%),
    linear-gradient(180deg, #020a0b, #031113);
}

.health-history-svg {
  display: block;
  width: 100%;
  height: 9rem;
}

.health-history-gridline {
  stroke: rgba(78, 190, 132, 0.13);
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
}

.health-history-gridline--threshold {
  stroke: rgba(116, 218, 174, 0.42);
  stroke-width: 0.7;
  stroke-dasharray: 3 2;
}

.health-history-threshold-label {
  fill: rgba(169, 241, 213, 0.78);
  font: 3.7px var(--font-data);
  text-anchor: middle;
}

.health-history-glow,
.health-history-trace {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.health-history-glow {
  stroke: rgba(66, 255, 151, 0.3);
  stroke-width: 4;
  filter: blur(1.5px);
}

.health-history-trace {
  stroke: #58f397;
  stroke-width: 1.6;
}

.health-history-live {
  fill: #eafff1;
  stroke: #58f397;
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: health-monitor-pulse 1.15s ease-out infinite;
}

.health-history-point {
  fill: #baffd5;
  opacity: 0.75;
}

.health-history-axis-label {
  fill: rgba(201, 247, 221, 0.72);
  font-family: var(--font-data);
  font-size: 3.3px;
}

@keyframes health-monitor-pulse {
  0%, 35% { opacity: 1; transform: scale(1); }
  70%, 100% { opacity: 0.3; transform: scale(1.8); }
}

#healthPanel {
  cursor: pointer;
}

#healthPanel:focus-visible {
  outline: 2px solid #f0c86d;
  outline-offset: 3px;
}

.stats-note {
  margin: 0.45rem 0 1.35rem;
  color: #d2d9da;
  font-size: 0.78rem;
}

.stats-tabs {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding-bottom: 0.35rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.stats-tabs button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(232, 226, 211, 0.28);
  border-radius: 999px;
  background: rgba(7, 26, 36, 0.46);
  color: #d2d9da;
  font: 700 0.72rem/1 var(--font-data);
  cursor: pointer;
}

.stats-tabs button[aria-selected="true"] {
  border-color: #f0c86d;
  background: rgba(201, 146, 46, 0.2);
  color: #fff5c5;
}

.stats-content {
  display: grid;
  gap: 1.2rem;
}

.stats-bot-crews { display: grid; gap: 0.9rem; }
.bot-crew-size { display: grid; gap: 0.5rem; }
.bot-crew-size h4 { margin: 0; color: var(--brass); }
.bot-crew-record { display: grid; grid-template-columns: minmax(10rem, 1.5fr) repeat(2, minmax(7rem, 1fr)); gap: 0.55rem; align-items: center; padding: 0.7rem; border: 1px solid rgba(130, 216, 204, 0.25); border-radius: 0.55rem; background: rgba(7, 26, 36, 0.48); }
.bot-crew-record > strong { grid-row: 1 / span 2; color: var(--bone); }

@media (max-width: 30rem) {
  .bot-crew-seat { grid-template-columns: 1fr auto; }
  .bot-captain-choice { grid-column: 1 / -1; grid-row: 2; }
  .bot-crew-record { grid-template-columns: 1fr; }
  .bot-crew-record > strong { grid-row: auto; }
}

.stats-group {
  padding-top: 0.95rem;
  border-top: 1px solid rgba(232, 226, 211, 0.18);
}

.stats-group > h3 {
  margin: 0 0 0.7rem;
  color: #f0c86d;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.stats-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.7rem;
}

/* Twenty captains in a five-wide grid is four rows; at 1440x900 the third row was sliced
   through the portraits with nothing to say more existed below. */
.captain-mode-menu {
  width: min(72rem, calc(100vw - 1.5rem));
  max-height: min(88vh, 56rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.captain-mode-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.captain-mode-tile {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem;
  border: 1px solid rgba(224, 181, 75, 0.42);
  border-radius: 0.75rem;
  background: rgba(10, 28, 39, 0.72);
}

.captain-mode-tile.is-selected {
  border-color: #e0b54b;
  box-shadow: 0 0 0.8rem rgba(224, 181, 75, 0.42);
}

.captain-mode-tile.is-taken { opacity: 0.62; filter: grayscale(0.82); }

.captain-mode-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.captain-mode-select:disabled { cursor: not-allowed; }
.captain-mode-portrait {
  position: relative;
  display: block;
  width: 100%;
}
.captain-mode-face { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.captain-mode-select strong { color: #f8d979; }
.captain-mode-select span { font-size: 0.75rem; }
.captain-selector-ability {
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
  z-index: 2;
  width: clamp(2.4rem, 4vw, 3.15rem);
  height: clamp(2.4rem, 4vw, 3.15rem);
  border: 2px solid rgba(245, 210, 122, 0.9);
  background: radial-gradient(circle, rgba(22, 86, 91, 0.98), rgba(3, 22, 29, 0.98));
  box-shadow: 0 0.2rem 0.55rem rgba(0, 0, 0, 0.72), 0 0 0.55rem rgba(64, 181, 171, 0.28);
  pointer-events: none;
}
.captain-selector-ability .captain-ability-mark-art {
  width: 76%;
  height: 76%;
}
.captain-selector-ability .captain-ability-mark-fallback { font-size: 1.25rem; }
.captain-traits-button { width: 100%; padding: 0.4rem; font-size: 0.78rem; }
.captain-trait-description { margin: 0; font-size: 0.78rem; line-height: 1.35; }

.rung.locked {
  opacity: 0.3;
  filter: grayscale(1);
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, 0.45) 6px 10px);
}

.rung.pickable { cursor: pointer; outline: 2px solid rgba(224, 181, 75, 0.7); }

@media (max-width: 700px) {
  .captain-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stats-mode {
  padding: 0.8rem;
  border: 1px solid rgba(232, 226, 211, 0.17);
  border-radius: 0.45rem;
  background: rgba(7, 26, 36, 0.4);
}

.stats-mode h4 {
  margin: 0 0 0.55rem;
  color: #fffaf0;
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.stat-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.27rem 0;
  color: #d2d9da;
  font-size: 0.7rem;
}

.stat-value + .stat-value {
  border-top: 1px solid rgba(232, 226, 211, 0.08);
}

.captain-record-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
}

.captain-record {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem;
  border: 1px solid rgba(224, 181, 75, 0.28);
  border-radius: 0.55rem;
  background: rgba(7, 26, 36, 0.48);
}

.stats-versus-captain-records {
  border-top-color: rgba(91, 190, 198, 0.38);
}

.stats-versus-captain-records > h3 {
  color: #8edce0;
}

.captain-record--versus {
  border-color: rgba(91, 190, 198, 0.3);
  background: linear-gradient(145deg, rgba(9, 49, 59, 0.58), rgba(7, 26, 36, 0.52));
}

.captain-record-face {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
}

.captain-record-details h4 {
  margin: 0 0 0.35rem;
  color: #f8d979;
  font-family: var(--font-display);
}

.stat-value strong {
  color: #fff5c5;
  font-family: var(--font-data);
  font-size: 0.78rem;
}

.emote-stats-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1.25rem;
}

.achievements-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.achievements-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.achievements-tabs button {
  display: grid;
  min-width: 0;
  min-height: 3.35rem;
  place-content: center;
  gap: 0.28rem;
  padding: 0.55rem 0.35rem;
  border: 1px solid rgba(232, 226, 211, 0.26);
  border-radius: 0.55rem;
  background: rgba(7, 26, 36, 0.46);
  color: #d2d9da;
  cursor: pointer;
}

.achievements-tabs button span {
  overflow: hidden;
  font: 700 clamp(0.67rem, 2.4vw, 0.8rem)/1 var(--font-data);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievements-tabs button small {
  color: rgba(210, 217, 218, 0.68);
  font: 600 0.58rem/1 var(--font-data);
}

.achievements-tabs button[aria-selected="true"] {
  border-color: #f0c86d;
  background: linear-gradient(180deg, rgba(201, 146, 46, 0.26), rgba(75, 55, 19, 0.3));
  color: #fff5c5;
  box-shadow: 0 0 0.75rem rgba(240, 200, 109, 0.12), inset 0 1px rgba(255, 255, 255, 0.08);
}

.achievements-tabs button[aria-selected="true"] small { color: #f4d98f; }
.achievements-tabs button:focus-visible { outline: 2px solid #8edce0; outline-offset: 2px; }

.achievements-panel { outline: none; }

.achievement-mode-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(201, 146, 46, 0.35);
}

.achievement-mode-heading h3 {
  margin: 0;
  color: #f0c86d;
  font: 700 1rem/1.2 var(--font-display);
  letter-spacing: 0.04em;
}

.achievement-mode-heading span {
  color: #d2d9da;
  font: 600 0.62rem/1.2 var(--font-data);
  white-space: nowrap;
}

.achievement-card {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(232, 226, 211, 0.14);
  border-radius: 0.5rem;
  background: rgba(7, 26, 36, 0.36);
}

/* Locked should read as dimmed, not as illegible. opacity: 0.42 on the whole card took the
   title and the description down with the badge, so a new player's first visit here - when
   all 29 are locked - was a screen of grey-on-grey they could not read. The grayscale moves
   to the badge, which is the part that should look unearned; the words stay legible. */
.achievement-card.is-locked {
  opacity: 0.92;
  color: var(--ink-2);
}

.achievement-card.is-locked .achievement-badge {
  filter: grayscale(1);
  opacity: 0.55;
}

.achievement-card.is-earned {
  border-color: rgba(240, 200, 109, 0.48);
  background: linear-gradient(135deg, rgba(41, 74, 77, 0.78), rgba(12, 35, 44, 0.82));
  color: #fffdf7;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.achievement-badge {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  border: 1px solid rgba(240, 200, 109, 0.42);
  border-radius: 50%;
  background: rgba(7, 26, 36, 0.72);
  font-size: 1.35rem;
}

.achievement-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.achievement-copy strong {
  color: inherit;
  font-family: var(--font-display);
  font-size: 0.92rem;
}

.achievement-copy > span {
  color: inherit;
  font-size: 0.69rem;
  line-height: 1.35;
}

.achievement-status {
  color: #d1d8d9;
  font-family: var(--font-data);
  font-size: 0.58rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.achievement-status.is-new {
  color: #ffe08e;
}

.achievement-awards {
  display: grid;
  width: min(34rem, 100%);
  gap: 0.45rem;
  margin: -0.45rem auto 1rem;
}

.achievement-awards-title {
  margin: 0;
  color: var(--brass);
  font: 0.68rem/1.2 var(--font-data);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.achievement-awards .achievement-card {
  text-align: left;
  animation: achievement-reveal 2200ms ease-out both;
}

.achievement-awards .achievement-card:nth-child(3) {
  animation-delay: 120ms;
}

.achievement-awards .achievement-card:nth-child(4) {
  animation-delay: 240ms;
}

@keyframes achievement-reveal {
  0% {
    opacity: 0;
    transform: translateY(0.6rem) scale(0.96);
    box-shadow: 0 0 0 rgba(240, 200, 109, 0);
  }
  15%,
  72% {
    opacity: 1;
    transform: none;
    box-shadow: 0 0 1.4rem rgba(240, 200, 109, 0.38);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 700px) {
  .stats-modes,
  .emote-stats-list,
  .achievements-list {
    grid-template-columns: 1fr;
  }

  .achievement-mode-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }
}

@media (max-width: 30rem) and (orientation: portrait) {
  .achievements-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tutorial-close {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(232, 226, 211, 0.35);
  border-radius: 50%;
  background: rgba(7, 26, 36, 0.42);
  color: var(--bone);
  font: 1.55rem/1 var(--font-ui);
  cursor: pointer;
}

.tutorial-close:hover,
.tutorial-close:focus-visible {
  border-color: var(--brass);
  background: rgba(7, 26, 36, 0.72);
}

.tutorial-kicker {
  margin: 0 0 0.25rem;
  color: #f0c86d;
  font: 0.68rem/1.2 var(--font-data);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tutorial-title {
  margin: 0;
  padding-right: 2rem;
  color: #fffaf0;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 5vw, 2.35rem);
  line-height: 1.1;
}

.tutorial-intro {
  margin: 0.55rem 0 1.25rem;
  color: #d2d9da;
}

.tutorial-topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.tutorial-topic {
  min-height: 6.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(232, 226, 211, 0.2);
  border-radius: 0.45rem;
  background: rgba(21, 31, 35, 0.42);
  color: #aeb8ba;
  text-align: left;
}

.tutorial-topic strong,
.tutorial-topic span {
  display: block;
}

.tutorial-topic strong {
  margin-bottom: 0.3rem;
  color: inherit;
  font-family: var(--font-display);
  font-size: 1.12rem;
}

.tutorial-topic span {
  font-size: 0.73rem;
  line-height: 1.35;
}

.tutorial-topic--ready {
  border-color: rgba(240, 200, 109, 0.66);
  background: linear-gradient(145deg, rgba(27, 74, 90, 0.82), rgba(14, 46, 59, 0.82));
  color: var(--bone);
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.tutorial-topic--ready:hover,
.tutorial-topic--ready:focus-visible {
  border-color: #f0c86d;
  transform: translateY(-2px);
}

.quick-reference-intro {
  margin: 0.55rem 0 1.1rem;
  color: #d2d9da;
  font-size: 0.82rem;
}

.enemy-reference-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.5vw, 0.85rem);
}

.enemy-reference-choice {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.6rem 0.35rem 0.7rem;
  border: 1px solid rgba(240, 200, 109, 0.42);
  border-radius: 0.55rem;
  background: linear-gradient(160deg, rgba(27, 74, 90, 0.76), rgba(7, 26, 36, 0.82));
  color: var(--bone);
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07);
}

.enemy-reference-choice:hover,
.enemy-reference-choice:focus-visible {
  border-color: #f0c86d;
  background: linear-gradient(160deg, rgba(45, 95, 109, 0.9), rgba(12, 40, 52, 0.92));
  outline: none;
  transform: translateY(-2px);
}

.enemy-reference-choice-label {
  display: grid;
  gap: 0.18rem;
  text-align: center;
}

.enemy-reference-choice-label strong {
  font: 700 clamp(0.68rem, 1.4vw, 0.88rem)/1.1 var(--font-display);
}

.enemy-reference-choice-label small {
  color: #f4d98f;
  font: 0.55rem/1.2 var(--font-data);
  letter-spacing: 0.04em;
}

.enemy-reference-reading-icon {
  display: grid;
  width: min(7.25rem, 100%);
  aspect-ratio: 4 / 5;
  place-items: center;
  border: 1px solid rgba(240, 200, 109, 0.48);
  border-radius: 0.4rem;
  background:
    radial-gradient(circle at 50% 36%, rgba(240, 200, 109, 0.22), transparent 38%),
    url('/art/frame-enemy.webp') center / cover no-repeat,
    #102a34;
  color: #ffe4a3;
  font: 700 clamp(2rem, 6vw, 3.2rem)/1 var(--font-display);
  text-shadow: 0 0.2rem 0.35rem #000;
  box-shadow: 0 0.65rem 1rem rgba(0, 0, 0, 0.35);
}

#quickReadingView [data-quick-card-part] {
  transition: filter 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#quickReadingView [data-quick-card-part].is-highlighted {
  border: 2px solid #ffd477;
  border-radius: 0.35rem;
  background-color: rgba(255, 244, 205, 0.22);
  box-shadow: 0 0 0 2px rgba(255, 212, 119, 0.3), 0 0 1rem rgba(255, 197, 70, 0.85);
  transform: scale(1.06);
}

.reference-enemy-card {
  position: relative;
  width: min(15rem, 72vw);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  filter: drop-shadow(0 0.85rem 1rem rgba(0, 0, 0, 0.5));
}

.reference-enemy-card.is-compact {
  width: min(7.25rem, 100%);
}

.reference-card-art,
.reference-card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reference-card-frame {
  z-index: 2;
}

.reference-card-rank {
  position: absolute;
  z-index: 3;
  top: 5.5%;
  left: 5.6%;
  display: grid;
  place-items: center;
  width: 20%;
  height: 16.5%;
  color: #fff8e9;
  font: 700 clamp(1rem, 4vw, 1.65rem)/1 var(--font-display);
  text-shadow: 0 2px 4px #000;
}

.is-compact .reference-card-rank {
  font-size: clamp(0.68rem, 2vw, 1rem);
}

.reference-card-icons {
  position: absolute;
  z-index: 3;
  inset: 0;
}

.reference-card-icons img {
  position: absolute;
  left: 9.2%;
  width: 12.9%;
  aspect-ratio: 1;
  object-fit: contain;
}

.reference-card-icons img:nth-child(1) { top: 30.6%; }
.reference-card-icons img:nth-child(2) { top: 50.6%; }
.reference-card-icons img:nth-child(3) { top: 72.1%; }

.reference-card-price {
  position: absolute;
  z-index: 3;
  right: 7%;
  bottom: 6%;
  left: 31%;
  min-height: 18%;
  margin: 0;
  padding: 0.12rem;
  color: #18292f;
  font: 600 clamp(0.48rem, 1.5vw, 0.68rem)/1.14 var(--font-ui);
  text-align: center;
}

.reference-card-price strong {
  display: block;
  margin-bottom: 0.08rem;
  color: #7d271f;
  font-family: var(--font-display);
}

.is-compact .reference-card-price {
  font-size: clamp(0.25rem, 0.75vw, 0.38rem);
}

.enemy-reference-detail {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 2.2rem);
  margin-top: 1.1rem;
}

.enemy-reference-card {
  display: grid;
  place-items: center;
}

.enemy-reference-facts {
  display: grid;
  gap: 0.55rem;
}

.enemy-reference-fact {
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(232, 226, 211, 0.16);
  border-radius: 0.45rem;
  background: rgba(7, 26, 36, 0.42);
}

.enemy-reference-fact h3,
.enemy-reference-fact p {
  margin: 0;
}

.enemy-reference-fact h3 {
  margin-bottom: 0.18rem;
  color: #f0c86d;
  font: 700 0.76rem/1.2 var(--font-display);
}

.enemy-reference-fact p {
  color: #f0f2ed;
  font-size: 0.72rem;
  line-height: 1.42;
}

.quick-display-board {
  overflow: hidden;
  border: 1px solid rgba(157, 178, 187, 0.48);
  border-radius: 0.6rem;
  background:
    radial-gradient(circle at 50% 18%, rgba(27, 74, 90, 0.72), transparent 44%),
    #071a24;
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.34);
}

.quick-display-board button,
.quick-display-score {
  border: 1px solid rgba(118, 169, 184, 0.42);
  border-radius: 0.35rem;
  background: rgba(7, 26, 36, 0.82);
  color: var(--bone);
}

.quick-display-board button {
  min-width: 0;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.quick-display-board button:hover,
.quick-display-board button:focus-visible,
.quick-display-board button.is-selected,
.quick-display-score.is-selected {
  z-index: 2;
  border-color: #ffd477;
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 212, 119, 0.2), 0 0 1rem rgba(255, 197, 70, 0.42);
}

.quick-display-score {
  margin: 0.55rem 0.55rem 0;
  padding: 0.45rem 0.65rem;
  color: #f4d98f;
  font: 0.62rem/1.2 var(--font-data);
  text-align: center;
}

.quick-display-main {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.85fr) minmax(12rem, 1.45fr) minmax(7.5rem, 0.85fr);
  gap: 0.5rem;
  padding: 0.55rem;
}

.quick-display-rail,
.quick-display-table {
  display: grid;
  align-content: stretch;
  gap: 0.45rem;
}

.quick-display-rail button {
  display: grid;
  align-content: start;
  gap: 0.38rem;
  padding: 0.55rem;
  text-align: left;
}

.quick-display-rail button:last-child {
  min-height: 7rem;
}

.quick-display-rail strong,
.quick-display-active > span {
  color: var(--ink-2);
  font: 0.58rem/1.2 var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.quick-display-rail b {
  color: var(--bone);
  font: 1.1rem/1 var(--font-data);
  text-align: center;
}

.quick-display-rail b small {
  color: var(--ink-3);
  font-size: 0.55rem;
}

.quick-display-rail em {
  color: #f4d98f;
  font: normal 0.48rem/1.25 var(--font-ui);
  text-align: center;
}

.quick-health-bar,
.quick-treasure-bar {
  height: 0.36rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(168, 50, 45, 0.28);
}

.quick-health-bar i,
.quick-treasure-bar i {
  display: block;
  width: 86%;
  height: 100%;
  background: linear-gradient(90deg, #b82f32, #ff6961);
}

.quick-treasure-bar {
  background: rgba(201, 146, 46, 0.16);
}

.quick-treasure-bar i {
  width: 56%;
  background: linear-gradient(90deg, #9f681d, #ffd477);
}

.quick-mini-tracks,
.quick-display-rail button > span:not(.quick-health-bar, .quick-treasure-bar) {
  color: #d5dcdd;
  font: 0.55rem/1.55 var(--font-data);
}

.quick-display-piles {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.45rem;
}

.quick-display-piles span {
  position: relative;
  width: 2.8rem;
}

.quick-display-piles img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 0.2rem;
  object-fit: cover;
}

.quick-display-piles b {
  position: absolute;
  right: -0.35rem;
  bottom: -0.1rem;
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border: 1px solid var(--brass);
  border-radius: 50%;
  background: #071a24;
  font: 0.5rem/1 var(--font-data);
}

.quick-display-active {
  position: relative;
  display: grid;
  min-height: 9rem;
  place-items: center;
}

.quick-display-active > span {
  position: absolute;
  top: 0.45rem;
  left: 0.55rem;
}

.quick-active-card {
  display: grid;
  width: 4.5rem;
  aspect-ratio: 4 / 5;
  place-items: center;
  border: 1px solid var(--brass-dim);
  border-radius: 0.35rem;
  background: linear-gradient(145deg, #455e65, #172a31);
  font: 1.3rem/1 var(--font-display);
}

.quick-display-actions,
.quick-display-crew {
  padding: 0.55rem;
  color: #f5dfac !important;
  font: 0.57rem/1.35 var(--font-data);
}

.quick-display-crew {
  display: block;
  width: calc(100% - 1.1rem);
  margin: 0 0.55rem 0.55rem;
}

.quick-discard-cards {
  word-spacing: 0.25rem;
}

.quick-display-explanation {
  margin-top: 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(240, 200, 109, 0.45);
  border-radius: 0.5rem;
  background: rgba(7, 26, 36, 0.74);
}

.quick-display-explanation h3,
.quick-display-explanation p {
  margin: 0;
}

.quick-display-explanation h3 {
  margin-bottom: 0.28rem;
  color: #f0c86d;
  font: 700 0.92rem/1.2 var(--font-display);
}

.quick-display-explanation p {
  color: #f0f2ed;
  font-size: 0.75rem;
  line-height: 1.45;
}

.quick-resource-toggle,
.quick-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  width: min(24rem, 100%);
  margin: 1rem auto 0;
}

.quick-resource-toggle {
  width: min(24rem, 100%);
  margin: 1rem auto 0.8rem;
}

.quick-mode-toggle {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(32rem, 100%);
}

.quick-resource-toggle button,
.quick-mode-toggle button {
  padding: 0.65rem;
  border: 1px solid rgba(232, 226, 211, 0.3);
  border-radius: 999px;
  background: rgba(7, 26, 36, 0.6);
  color: var(--bone);
  font: 700 0.78rem/1 var(--font-display);
  cursor: pointer;
}

.quick-resource-toggle button[aria-pressed='true'],
.quick-mode-toggle button[aria-pressed='true'] {
  border-color: #f0c86d;
  background: linear-gradient(180deg, rgba(91, 74, 29, 0.92), rgba(48, 37, 13, 0.95));
  color: #fff4c7;
  box-shadow: 0 0 0.8rem rgba(240, 200, 109, 0.28);
}

.quick-resource-stage {
  margin-top: 0;
}

.quick-resource-explanation {
  margin-top: 0.75rem;
}

.quick-upgrade-summary {
  margin: 0.7rem auto 1rem;
  color: #d2d9da;
  font-size: 0.72rem;
  text-align: center;
}

.quick-upgrade-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.55rem;
}

.quick-upgrade-track {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0.65rem;
  border: 1px solid rgba(240, 200, 109, 0.34);
  border-radius: 0.5rem;
  background: linear-gradient(165deg, rgba(27, 74, 90, 0.72), rgba(7, 26, 36, 0.82));
}

.quick-upgrade-track h3 {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: center;
  margin: 0.55rem 0 0;
  color: #fff4c7;
  font: 700 0.84rem/1.2 var(--font-display);
}

.quick-upgrade-track h3 img {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
}

.quick-upgrade-track ol {
  display: flex;
  flex: 1;
  /* The live board starts beside its title and climbs upward: level 0 sits at the
     bottom and the highest level at the top. Keep the same physical reading here. */
  flex-direction: column-reverse;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-upgrade-track li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  align-items: start;
  gap: 0.38rem;
  padding: 0.45rem;
  border: 1px solid rgba(232, 226, 211, 0.13);
  border-radius: 0.35rem;
  background: rgba(5, 19, 27, 0.52);
}

.quick-upgrade-track li b {
  display: grid;
  width: 1.3rem;
  height: 1.3rem;
  place-items: center;
  border: 1px solid var(--brass);
  border-radius: 50%;
  color: #ffe4a3;
  font: 0.58rem/1 var(--font-data);
}

.quick-upgrade-track li span {
  color: #edf1ed;
  font-size: 0.63rem;
  line-height: 1.35;
}

.quick-upgrade-track li:first-child {
  border-style: dashed;
  background: rgba(5, 19, 27, 0.28);
}

.quick-upgrade-track li:first-child b {
  border-color: var(--brine);
  color: var(--ink-2);
}

.quick-guile-glossary {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(240, 200, 109, 0.32);
}

.quick-guile-glossary > h3 {
  margin: 0 0 0.6rem;
  color: #f0c86d;
  font: 700 1rem/1.2 var(--font-display);
}

.quick-guile-glossary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
}

.quick-guile-glossary dl > div {
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(232, 226, 211, 0.14);
  border-radius: 0.4rem;
  background: rgba(7, 26, 36, 0.48);
}

.quick-guile-glossary dt {
  margin-bottom: 0.2rem;
  color: #f4d98f;
  font: 700 0.76rem/1.2 var(--font-display);
}

.quick-guile-glossary dd {
  margin: 0;
  color: #e2e8e6;
  font-size: 0.68rem;
  line-height: 1.4;
}

.quick-lobby-pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.8rem;
}

.quick-lobby-page {
  overflow: hidden;
  border: 1px solid rgba(240, 200, 109, 0.34);
  border-radius: 0.55rem;
  background: linear-gradient(160deg, rgba(27, 74, 90, 0.68), rgba(7, 26, 36, 0.82));
}

.quick-lobby-page > header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid rgba(240, 200, 109, 0.24);
  background: rgba(5, 19, 27, 0.35);
}

.quick-lobby-page > header > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: none;
  place-items: center;
  border: 1px solid var(--brass);
  border-radius: 50%;
  color: #ffe4a3;
  font: 0.72rem/1 var(--font-data);
}

.quick-lobby-page h3,
.quick-lobby-page header p {
  margin: 0;
}

.quick-lobby-page h3 {
  color: #fff4c7;
  font: 700 1rem/1.1 var(--font-display);
}

.quick-lobby-page header p {
  margin-top: 0.15rem;
  color: #bdc9ca;
  font-size: 0.62rem;
}

.quick-lobby-page dl {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 0.85rem;
}

.quick-lobby-page dl > div {
  padding: 0.7rem 0;
}

.quick-lobby-page dl > div + div {
  border-top: 1px solid rgba(232, 226, 211, 0.11);
}

.quick-lobby-page dt {
  margin-bottom: 0.18rem;
  color: #f4d98f;
  font: 700 0.75rem/1.2 var(--font-display);
}

.quick-lobby-page dd {
  margin: 0;
  color: #e3e9e7;
  font-size: 0.68rem;
  line-height: 1.42;
}

.quick-lobby-board {
  display: grid;
  gap: 0.55rem;
  width: min(32rem, 100%);
  margin: 0 auto;
  padding: 0.7rem;
  border: 1px solid rgba(240, 200, 109, 0.34);
  border-radius: 0.65rem;
  background: linear-gradient(160deg, rgba(27, 74, 90, 0.68), rgba(7, 26, 36, 0.88));
  box-shadow: 0 0.75rem 1.8rem rgba(0, 0, 0, 0.22);
}

.quick-lobby-board button {
  appearance: none;
  min-width: 0;
  padding: 0.62rem 0.75rem;
  border: 1px solid rgba(232, 226, 211, 0.25);
  border-radius: 0.42rem;
  background: rgba(7, 26, 36, 0.64);
  color: #edf1ed;
  font: 700 0.72rem/1.2 var(--font-display);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 100ms ease;
}

.quick-lobby-board button:hover,
.quick-lobby-board button:focus-visible,
.quick-lobby-board button.is-selected {
  border-color: #f0c86d;
  background: rgba(46, 74, 79, 0.92);
  box-shadow: 0 0 0.7rem rgba(240, 200, 109, 0.22);
  outline: none;
}

.quick-lobby-board button:active {
  transform: translateY(1px);
}

.quick-lobby-heading {
  display: grid;
  gap: 0.18rem;
  text-align: center;
}

.quick-lobby-heading strong {
  color: #fff4c7;
  font-size: 1.15rem;
}

.quick-lobby-heading span,
.quick-lobby-hunts small {
  color: #bdc9ca;
  font: 500 0.58rem/1.25 var(--font-ui);
}

.quick-lobby-onboarding {
  background: rgba(27, 74, 90, 0.72) !important;
}

.quick-lobby-onboarding > span {
  display: inline-grid;
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 0.25rem;
  place-items: center;
  border-radius: 50%;
  background: #153c49;
}

.quick-lobby-hunts {
  display: grid;
  gap: 0.38rem;
  text-align: left;
}

.quick-lobby-filter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
}

.quick-lobby-filter-row i {
  padding: 0.22rem;
  border-radius: 999px;
  background: rgba(27, 74, 90, 0.7);
  color: #d9e4e3;
  font: 500 0.52rem/1 var(--font-ui);
  text-align: center;
}

.quick-lobby-new-hunt {
  display: grid;
  gap: 0.15rem;
  border-color: #8f6318 !important;
  background: linear-gradient(180deg, #e0a63c, var(--brass)) !important;
  color: #2a1c05 !important;
}

.quick-lobby-launches {
  display: grid;
  gap: 0.4rem;
}

.quick-lobby-new-hunt small {
  font: 500 0.54rem/1.2 var(--font-ui);
}

.quick-lobby-records {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.quick-lobby-feedback {
  justify-self: stretch;
}

.quick-lobby-sound {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  text-align: left;
}

.quick-lobby-sound span {
  overflow: hidden;
  color: #bdc9ca;
  font: 500 0.56rem/1.2 var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* This says "up a level"; the pager at the foot of these views says "back one step" - and
   both were a bare circular arrow, identical in glyph and shape, differing only in corner.
   Naming the destination is what tells them apart. */
.tutorial-back {
  position: absolute;
  top: 0.65rem;
  right: 3.45rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 2.25rem;
  margin: 0;
  padding: 0 0.75rem;
  border: 1px solid rgba(232, 226, 211, 0.35);
  border-radius: 1.125rem;
  background: rgba(7, 26, 36, 0.42);
  color: var(--bone);
  font: 0.8rem/1 var(--font-label);
  white-space: nowrap;
  cursor: pointer;
}

.tutorial-back:hover,
.tutorial-back:focus-visible {
  border-color: var(--brass);
  background: rgba(7, 26, 36, 0.72);
  color: #fff1c7;
}

.objective-lesson {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr);
  align-items: end;
  gap: 0.35rem;
  margin-top: 1.25rem;
}

.objective-parrot {
  align-self: end;
  min-height: 8rem;
}

.objective-parrot-art {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0.65rem 0.65rem rgba(0, 0, 0, 0.35));
}

.objective-bubble {
  position: relative;
  align-self: start;
  margin: 0 0 1.8rem;
  padding: clamp(1rem, 4vw, 1.4rem);
  border: 2px solid #d2b36f;
  border-radius: 1rem 1rem 1rem 0.2rem;
  background: #f2efe6;
  box-shadow:
    0 0.65rem 1.5rem rgba(0, 0, 0, 0.28),
    inset 0 1px #fff;
  color: #20333a;
  font-family: var(--font-ui);
  font-size: clamp(0.92rem, 2.2vw, 1.05rem);
  font-weight: 650;
  line-height: 1.45;
}

.objective-guide-controls {
  margin-top: 0.25rem;
}

.objective-bubble::after {
  content: '';
  position: absolute;
  left: -0.72rem;
  bottom: 0.7rem;
  width: 1.25rem;
  height: 1.25rem;
  border-left: 2px solid #d2b36f;
  border-bottom: 2px solid #d2b36f;
  background: #f2efe6;
  transform: rotate(45deg);
}

.display-demo {
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid rgba(157, 178, 187, 0.4);
  border-radius: 0.55rem;
  background:
    radial-gradient(circle at 50% 15%, rgba(27, 74, 90, 0.75), transparent 45%),
    #071a24;
  box-shadow:
    0 0.8rem 2rem rgba(0, 0, 0, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.06);
  color: var(--bone);
}

.display-demo-main {
  display: grid;
  grid-template-columns: minmax(7rem, 0.8fr) minmax(11rem, 1.5fr) minmax(7rem, 0.8fr);
  gap: 0.55rem;
  min-height: 15rem;
  padding: 0.65rem;
}

.display-demo-rail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.display-demo-panel,
.display-demo-piles,
.display-demo-active,
.display-demo-emotes {
  position: relative;
  border: 1px solid rgba(27, 74, 90, 0.86);
  border-radius: 0.3rem;
  background: rgba(7, 26, 36, 0.82);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}

.display-demo-panel {
  padding: 0.55rem;
}

.display-demo-panel > strong,
.display-demo-active > span {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ink-2);
  font: 0.58rem/1.2 var(--font-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.display-demo-health {
  text-align: center;
}

.display-demo-meter {
  height: 0.38rem;
  margin: 0.5rem 0 0.35rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(168, 50, 45, 0.35);
}

.display-demo-meter span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #a8322d, #e16c51);
}

.display-demo-health b,
.display-demo-treasure b {
  color: var(--bone);
  font: 1.25rem/1 var(--font-data);
}

.display-demo-health small,
.display-demo-treasure small {
  color: var(--ink-3);
  font-size: 0.58rem;
  font-weight: 400;
}

.display-demo-upgrades {
  flex: 1;
}

.display-demo-upgrades > div {
  display: grid;
  grid-template-columns: minmax(2.5rem, 1fr) repeat(3, 0.55rem);
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.45rem;
}

.display-demo-upgrades span {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.57rem;
  text-overflow: ellipsis;
}

.display-demo-upgrades i {
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--brass-dim);
  border-radius: 50%;
  background: rgba(201, 146, 46, 0.16);
}

.display-demo-table {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.55rem;
}

.display-demo-piles {
  display: flex;
  justify-content: center;
  gap: clamp(0.7rem, 4vw, 1.8rem);
  padding: 0.45rem;
}

.display-demo-piles > div {
  position: relative;
  width: 2.7rem;
}

.display-demo-piles img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0.2rem;
}

.display-demo-piles span {
  position: absolute;
  right: -0.35rem;
  bottom: -0.15rem;
  min-width: 1.1rem;
  padding: 0.1rem;
  border: 1px solid var(--brass);
  border-radius: 50%;
  background: var(--abyss);
  color: var(--bone);
  font: 0.52rem/1 var(--font-data);
  text-align: center;
}

.display-demo-active {
  display: grid;
  place-items: center;
  padding: 0.55rem;
}

.display-demo-active > span {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
}

.display-demo-active > div {
  display: grid;
  place-items: center;
  width: clamp(3.7rem, 9vw, 5.4rem);
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--brine);
  border-radius: 0.35rem;
  color: var(--brine);
  font: 2rem/1 var(--font-display);
}

.display-demo-treasure > b {
  display: block;
  margin-bottom: 0.45rem;
  text-align: center;
}

.display-demo-treasure > div {
  height: 0.32rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(201, 146, 46, 0.15);
}

.display-demo-treasure > div span {
  display: block;
  width: 12%;
  height: 100%;
  background: var(--brass);
}

.display-demo-discard {
  flex: 1;
}

.display-demo-discard-cards {
  display: flex;
  justify-content: center;
  padding-top: 0.45rem;
}

.display-demo-discard-cards i {
  width: 2.2rem;
  aspect-ratio: 4 / 5;
  margin-left: -0.75rem;
  border: 1px solid var(--ink-3);
  border-radius: 0.18rem;
  background: linear-gradient(145deg, #3a4b51, #192a31);
  transform: rotate(-4deg);
}

.display-demo-discard-cards i:first-child {
  margin-left: 0;
}

.display-demo-discard-cards i:nth-child(2) {
  transform: rotate(3deg);
}

.display-demo-emotes {
  display: flex;
  gap: 0.3rem;
  padding: 0.45rem 0.6rem;
  overflow: hidden;
  border-width: 1px 0 0;
  border-radius: 0;
}

.display-demo-emotes span {
  flex: none;
  padding: 0.18rem 0.42rem;
  border: 1px solid var(--brine);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.5rem;
  white-space: nowrap;
}

.display-demo [data-display-target]:not(.is-highlighted) {
  filter: saturate(0.5) brightness(0.68);
}

.display-demo [data-display-target].is-highlighted {
  z-index: 2;
  border-color: #ffd477;
  box-shadow:
    0 0 0 2px rgba(255, 212, 119, 0.3),
    0 0 1.15rem rgba(255, 197, 70, 0.5);
  transform: translateY(-1px);
}

.display-demo [data-display-target].is-highlighted::after {
  content: '↓';
  position: absolute;
  z-index: 3;
  top: -1.2rem;
  right: 0.25rem;
  color: #ffd477;
  font: 700 1.15rem/1 var(--font-ui);
  text-shadow: 0 2px 5px #000;
  animation: tutorial-arrow 700ms ease-in-out infinite alternate;
}

.display-demo-emotes.is-highlighted::after {
  top: -0.85rem;
}

@keyframes tutorial-arrow {
  to {
    transform: translateY(0.18rem);
  }
}

.display-guide {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: end;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.display-guide-parrot-art {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0.45rem 0.45rem rgba(0, 0, 0, 0.4));
}

.display-guide-bubble {
  position: relative;
  min-height: 6.2rem;
  padding: 0.8rem 1rem;
  border: 2px solid #d2b36f;
  border-radius: 0.85rem 0.85rem 0.85rem 0.15rem;
  background: #f2efe6;
  color: #20333a;
  box-shadow: 0 0.55rem 1.2rem rgba(0, 0, 0, 0.24);
}

.display-guide-bubble::after {
  content: '';
  position: absolute;
  left: -0.55rem;
  bottom: 0.65rem;
  width: 0.95rem;
  height: 0.95rem;
  border-left: 2px solid #d2b36f;
  border-bottom: 2px solid #d2b36f;
  background: #f2efe6;
  transform: rotate(45deg);
}

.display-guide-label {
  margin: 0 0 0.2rem;
  color: #8a5f16;
  font: 700 0.62rem/1.2 var(--font-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.display-guide-text {
  margin: 0;
  font-size: clamp(0.82rem, 2.2vw, 0.96rem);
  line-height: 1.45;
}

.display-guide-controls {
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.7rem;
}

.display-guide-arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid #d2b36f;
  border-radius: 50%;
  background: rgba(7, 26, 36, 0.62);
  color: #ffe2a0;
  font: 1.15rem/1 var(--font-ui);
  cursor: pointer;
}

.display-guide-arrow:hover:not(:disabled),
.display-guide-arrow:focus-visible {
  background: rgba(27, 74, 90, 0.9);
  transform: scale(1.05);
}

.display-guide-arrow:disabled {
  border-color: rgba(232, 226, 211, 0.2);
  color: rgba(232, 226, 211, 0.3);
  cursor: default;
}

.display-guide-progress {
  color: #d2d9da;
  font: 0.65rem/1.2 var(--font-data);
  text-align: center;
}

.display-guide-progress > div {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.display-guide-progress i {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: rgba(232, 226, 211, 0.25);
}

.display-guide-progress i.is-current {
  background: #ffd477;
  box-shadow: 0 0 0.4rem rgba(255, 212, 119, 0.65);
}

.cards-lesson-stage {
  display: grid;
  place-items: center;
  min-height: 20rem;
  margin-top: 1rem;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid rgba(157, 178, 187, 0.4);
  border-radius: 0.55rem;
  background:
    radial-gradient(circle at 50% 25%, rgba(27, 74, 90, 0.78), transparent 48%),
    #071a24;
  box-shadow:
    0 0.8rem 2rem rgba(0, 0, 0, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.06);
}

.cards-demo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 5vw, 3.5rem);
  width: 100%;
}

.lesson-enemy-card,
.lesson-resource-card {
  position: relative;
  flex: none;
  width: clamp(9.5rem, 26vw, 12.5rem);
  aspect-ratio: 4 / 5;
  filter: drop-shadow(0 0.85rem 1rem rgba(0, 0, 0, 0.5));
}

.lesson-card-art,
.lesson-card-frame,
.lesson-resource-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lesson-card-frame,
.lesson-resource-card > img:nth-of-type(2) {
  z-index: 2;
}

.lesson-card-rank,
.lesson-resource-card > b {
  position: absolute;
  z-index: 4;
  top: 5.5%;
  left: 5.6%;
  display: grid;
  place-items: center;
  width: 20%;
  height: 16.5%;
  border-radius: 50%;
  color: #fff8e9;
  font: 700 clamp(1rem, 3vw, 1.45rem)/1 var(--font-display);
  text-shadow: 0 2px 4px #000;
}

.lesson-card-icons {
  position: absolute;
  z-index: 4;
  inset: 0;
}

.lesson-card-icons span {
  position: absolute;
  left: 9.2%;
  display: grid;
  place-items: center;
  width: 12.9%;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 50%;
}

.lesson-card-icons span:nth-child(1) {
  top: 30.6%;
}

.lesson-card-icons span:nth-child(2) {
  top: 50.6%;
}

.lesson-card-icons span:nth-child(3) {
  top: 72.1%;
}

.lesson-card-icons img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lesson-card-price {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: 6%;
  left: 31%;
  min-height: 18%;
  margin: 0;
  padding: 0.12rem;
  border: 2px solid transparent;
  border-radius: 0.35rem;
  color: #18292f;
  font: 600 clamp(0.39rem, 1.1vw, 0.55rem)/1.15 var(--font-ui);
  text-align: center;
}

.lesson-card-price strong {
  display: block;
  margin-bottom: 0.08rem;
  color: #7d271f;
  font-family: var(--font-display);
}

.lesson-enemy-card [data-card-part] {
  transition:
    filter 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.lesson-enemy-card [data-card-part].is-highlighted {
  border-color: #ffd477;
  background-color: rgba(255, 244, 205, 0.22);
  box-shadow:
    0 0 0 2px rgba(255, 212, 119, 0.3),
    0 0 1rem rgba(255, 197, 70, 0.85);
  transform: scale(1.06);
}

.lesson-card-rank.is-highlighted {
  border: 2px solid #ffd477;
}

.lesson-icon-key {
  position: absolute;
  right: calc(50% + clamp(4.6rem, 13vw, 6.1rem) + 0.2rem);
  min-width: 5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid #ffd477;
  border-radius: 999px;
  background: rgba(7, 26, 36, 0.94);
  color: #ffe2a0;
  font: 700 0.68rem/1 var(--font-data);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 0 1rem rgba(255, 197, 70, 0.28);
}

.lesson-icon-key[data-for='crew'] {
  top: 31.25%;
}

.lesson-icon-key[data-for='sails'] {
  top: 50.25%;
}

.lesson-icon-key[data-for='cannons'] {
  top: 71%;
}

.lesson-icon-key::after {
  content: '→';
  margin-left: 0.4rem;
}

.cards-demo--diamond,
.cards-demo--heart {
  min-height: 17rem;
}

.lesson-resource-card {
  animation: lesson-card-arrive 500ms ease-out both;
}

.lesson-resource-card > b {
  color: #7d1818;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.lesson-resource-card > b {
  top: 6.5%;
  left: 6.2%;
  width: 23.8%;
  height: 16%;
}

.lesson-resource-card > .lesson-treasure-rank {
  top: 6%;
  left: 6.9%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.02em;
  width: 26.9%;
  height: 22.5%;
  padding-right: 0.04em;
}

.lesson-treasure-rank small {
  position: relative;
  top: 0.04em;
  font-size: 0.62em;
  line-height: 1;
}

.lesson-heart-rules {
  position: absolute;
  z-index: 4;
  top: 75.5%;
  left: 10%;
  display: grid;
  place-items: center;
  width: 79%;
  height: 16%;
  margin: 0;
  padding: 0 0.15rem;
  color: #3d2b12;
  font: 600 clamp(0.42rem, 1.2vw, 0.58rem)/1.18 var(--font-ui);
  text-align: center;
}

.lesson-treasure-stash {
  width: min(14rem, 42vw);
  padding: 1rem;
  border: 1px solid var(--brass);
  border-radius: 0.45rem;
  background: rgba(7, 26, 36, 0.9);
  text-align: center;
  box-shadow: 0 0 1.25rem rgba(201, 146, 46, 0.22);
}

.lesson-treasure-stash > span {
  display: block;
  color: var(--ink-2);
  font: 0.62rem/1.2 var(--font-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lesson-treasure-stash strong {
  display: block;
  margin: 0.55rem 0;
  color: #ffd477;
  font: 1.4rem/1 var(--font-data);
}

.lesson-treasure-stash strong i {
  color: var(--ink-3);
  font-style: normal;
}

.lesson-treasure-stash > div {
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(201, 146, 46, 0.18);
}

.lesson-treasure-stash > div i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #9f681d, #ffd477);
  animation: lesson-stash-fill 1.4s ease-out both;
}

.lesson-treasure-flight {
  position: absolute;
  z-index: 5;
  left: 42%;
  color: #ffd477;
  font-size: 1.5rem;
  text-shadow: 0 0 0.7rem rgba(255, 212, 119, 0.9);
  animation: lesson-treasure-fly 1.4s ease-in-out infinite;
}

.lesson-heart-paths {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) auto minmax(7rem, 1fr);
  align-items: center;
  gap: 0.55rem;
  width: min(30rem, 64%);
}

.lesson-heart-path {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 0.8rem 0.6rem;
  border: 1px solid var(--brine);
  border-radius: 0.45rem;
  background: rgba(7, 26, 36, 0.88);
  text-align: center;
  opacity: 0.48;
}

.lesson-heart-path img {
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 0.35rem;
  object-fit: contain;
}

.lesson-heart-path strong {
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 0.84rem;
}

.lesson-heart-path small {
  margin-top: 0.2rem;
  color: var(--ink-2);
  font-size: 0.58rem;
  line-height: 1.3;
}

.lesson-heart-path--health {
  animation: lesson-heart-choice 4s ease-in-out infinite;
}

.lesson-heart-path--upgrade {
  animation: lesson-heart-choice 4s 2s ease-in-out infinite;
}

.lesson-heart-or {
  color: #e9c87d;
  font: italic 0.75rem/1 var(--font-display);
}

@keyframes lesson-card-arrive {
  from {
    opacity: 0;
    transform: translateY(-1rem) rotate(-3deg);
  }
}

@keyframes lesson-stash-fill {
  from {
    width: 84%;
  }
}

@keyframes lesson-treasure-fly {
  0%,
  18% {
    opacity: 0;
    transform: translate(-2.5rem, 1.5rem) scale(0.75);
  }
  40%,
  68% {
    opacity: 1;
  }
  82%,
  100% {
    opacity: 0;
    transform: translate(3rem, 0) scale(1.15);
  }
}

@keyframes lesson-heart-choice {
  0%,
  12%,
  46%,
  100% {
    opacity: 0.48;
    border-color: var(--brine);
    box-shadow: none;
    transform: scale(1);
  }
  20%,
  38% {
    opacity: 1;
    border-color: #ffd477;
    box-shadow: 0 0 1.1rem rgba(255, 197, 70, 0.45);
    transform: scale(1.035);
  }
}

.upgrade-lesson-stage {
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(157, 178, 187, 0.4);
  border-radius: 0.55rem;
  background:
    radial-gradient(circle at 50% 15%, rgba(27, 74, 90, 0.72), transparent 48%),
    #071a24;
  box-shadow:
    0 0.8rem 2rem rgba(0, 0, 0, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.06);
}

.upgrade-demo-boards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.3rem;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.upgrade-demo-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  min-width: 0;
  overflow: hidden;
  padding: 0 0.4rem 0.4rem;
  border: 1px solid #8c6a2d;
  border-radius: 0.4rem;
  background: linear-gradient(145deg, rgba(41, 59, 63, 0.97), rgba(15, 36, 44, 0.98));
}

.upgrade-demo-board--hard {
  border-color: #71505d;
  background: linear-gradient(145deg, rgba(56, 48, 59, 0.97), rgba(20, 31, 42, 0.98));
}

.upgrade-demo-board header {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid rgba(232, 226, 211, 0.18);
  background: rgba(7, 26, 36, 0.48);
}

.upgrade-demo-board header strong {
  color: #ffe2a0;
  font: 1rem/1 var(--font-display);
}

.upgrade-demo-board header span {
  color: var(--ink-2);
  font: 0.55rem/1 var(--font-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.upgrade-demo-track {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  gap: 0.3rem;
  padding: 0.4rem 0.25rem 0.3rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: rgba(7, 26, 36, 0.5);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.upgrade-demo-track b {
  padding: 0;
  color: var(--ink-2);
  font: 0.58rem/1.15 var(--font-data);
}

.upgrade-demo-track ol {
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.upgrade-demo-track li {
  display: grid;
  place-items: center;
  min-height: 2.35rem;
  height: auto;
  min-width: 0;
  padding: 0.22rem 0.12rem;
  border: 0;
  border-radius: 1px;
  background: #0b2330;
  box-shadow: inset 0 0 0 1px rgba(27, 74, 90, 0.5);
  color: var(--ink-3);
  font: 0.5rem/1.15 var(--font-data);
  text-align: center;
}

.upgrade-demo-track li::before {
  content: none;
}

.upgrade-demo-double {
  display: flex !important;
  flex-direction: column;
  gap: 0.08rem;
  justify-content: center;
}

.upgrade-demo-double span {
  display: block;
  width: 100%;
}

.upgrade-demo-boards.is-highlighted,
.upgrade-demo-track.is-highlighted,
.upgrade-heart-note.is-highlighted {
  border-color: #ffd477;
  box-shadow:
    0 0 0 2px rgba(255, 212, 119, 0.2),
    0 0 1rem rgba(255, 197, 70, 0.42);
}

.upgrade-demo-track.is-highlighted {
  z-index: 2;
  background: rgba(201, 146, 46, 0.13);
  transform: scale(1.01);
}

[data-guile-ability].is-highlighted {
  z-index: 3;
  border-radius: 0.2rem;
  background: #fff0bd;
  box-shadow: 0 0 0.7rem rgba(255, 212, 119, 0.75);
  color: #563b11;
  font-weight: 700;
}

.upgrade-heart-note {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  width: fit-content;
  margin: 0.65rem auto 0;
  padding: 0.4rem 0.75rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(7, 26, 36, 0.82);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.upgrade-heart-note > span {
  grid-row: 1 / 3;
  margin-right: 0.55rem;
  color: #e45c68;
  font-size: 1.35rem;
}

.upgrade-heart-note strong {
  color: var(--bone);
  font-size: 0.68rem;
}

.upgrade-heart-note small {
  color: var(--ink-2);
  font-size: 0.52rem;
}

.upgrades-guide {
  margin-top: 0.75rem;
}

@media (max-width: 30rem) {
  .tutorial-topics {
    grid-template-columns: 1fr;
  }

  .enemy-reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enemy-reference-detail {
    grid-template-columns: 1fr;
  }

  .enemy-reference-detail .reference-enemy-card {
    width: min(10.5rem, 56vw);
  }

  .quick-display-main {
    grid-template-columns: 5.2rem minmax(7.5rem, 1fr) 5.2rem;
    gap: 0.28rem;
    padding: 0.35rem;
  }

  .quick-display-rail,
  .quick-display-table {
    gap: 0.28rem;
  }

  .quick-display-rail button {
    gap: 0.22rem;
    padding: 0.35rem;
  }

  .quick-display-rail strong,
  .quick-display-active > span {
    font-size: 0.45rem;
    letter-spacing: 0.05em;
  }

  .quick-mini-tracks,
  .quick-display-rail button > span:not(.quick-health-bar, .quick-treasure-bar) {
    font-size: 0.42rem;
  }

  .quick-display-rail em {
    font-size: 0.4rem;
  }

  .quick-display-piles {
    gap: 0.75rem;
  }

  .quick-display-piles span {
    width: 2.1rem;
  }

  .quick-active-card {
    width: 3.4rem;
  }

  .quick-display-actions,
  .quick-display-crew {
    font-size: 0.45rem;
  }

  .quick-upgrade-board,
  .quick-guile-glossary dl,
  .quick-lobby-pages {
    grid-template-columns: 1fr;
  }

  .objective-lesson {
    grid-template-columns: 5rem minmax(0, 1fr);
  }

  .objective-bubble {
    margin-bottom: 0.8rem;
  }

  .display-demo-main {
    grid-template-columns: 5.5rem minmax(8rem, 1fr) 5.5rem;
    gap: 0.3rem;
    padding: 0.4rem;
  }

  .display-demo-panel {
    padding: 0.35rem;
  }

  .display-demo-upgrades > div {
    grid-template-columns: minmax(2rem, 1fr) repeat(3, 0.35rem);
    gap: 0.12rem;
  }

  .display-demo-upgrades i {
    width: 0.34rem;
    height: 0.34rem;
  }

  .display-guide {
    grid-template-columns: 4rem minmax(0, 1fr);
  }

  .cards-lesson-stage {
    min-height: 14rem;
    padding: 0.65rem;
  }

  .lesson-enemy-card,
  .lesson-resource-card {
    width: 8.6rem;
  }

  .lesson-icon-key {
    right: calc(50% + 3.6rem);
    min-width: 4.2rem;
    padding: 0.35rem 0.45rem;
    font-size: 0.55rem;
  }

  .cards-demo--diamond,
  .cards-demo--heart {
    gap: 0.65rem;
    min-height: 14rem;
  }

  .lesson-heart-paths {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    width: min(9rem, 48%);
  }

  .lesson-heart-path {
    padding: 0.45rem 0.35rem;
  }

  .lesson-heart-path img {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.15rem;
  }

  .lesson-heart-or {
    font-size: 0.6rem;
  }

  .upgrade-lesson-stage {
    padding: 0.4rem;
    overflow-x: auto;
  }

  .upgrade-demo-boards {
    gap: 0.35rem;
    min-width: 33rem;
  }

  .upgrade-demo-track {
    min-width: 0;
  }
}

/* The captain gets the room's empty width instead of its scarce height: standing to
   one side on a landscape screen, above the controls on a phone. */
.title-body {
  display: grid;
  grid-template-columns: auto minmax(20rem, 30rem);
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 3vw, 3rem);
  width: 100%;
}

.title-body:has(> .lobby-captain:empty) {
  grid-template-columns: minmax(0, 30rem);
}

.title-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
  padding: clamp(0.85rem, 2vw, 1.2rem);
  border: 1px solid rgba(224, 181, 75, 0.22);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, rgba(4, 18, 26, 0.62), rgba(3, 13, 19, 0.72));
  box-shadow:
    0 1rem 2.5rem rgba(0, 0, 0, 0.17),
    inset 0 1px rgba(255, 236, 181, 0.06);
}

/* The home controls use two dark fields. A single transparent channel after the hunt
   controls lets the harbour artwork breathe before the supporting links and controls. */
.lobby-home-panel,
.lobby-home-panel--footer {
  display: contents;
}

.title-controls.title-controls--look-7 {
  gap: 0.62rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.title-controls--look-7 .lobby-home-panel {
  display: grid;
  justify-items: center;
  width: 100%;
  padding: clamp(0.75rem, 2vw, 1rem);
  border: 1px solid rgba(224, 181, 75, 0.22);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, rgba(4, 18, 26, 0.62), rgba(3, 13, 19, 0.72));
  box-shadow:
    0 0.65rem 1.5rem rgba(0, 0, 0, 0.14),
    inset 0 1px rgba(255, 236, 181, 0.06);
}

.title-controls--look-7 .lobby-home-panel--hunt,
.title-controls--look-7 .lobby-home-panel--support {
  gap: 0.55rem;
}

/* Begin the primary hunt choices near the top of their field. The generic table list
   spacing is still useful on join/setup screens, but made the home field feel sunken. */
.title-controls--look-7 .lobby-home-panel--hunt {
  padding-top: 0.35rem;
}

.title-controls--look-7 .lobby-home-panel--hunt .tablelist {
  margin-top: 0;
}

.title-controls--look-7 .lobby-home-panel--support > :is(.lobby-home-panel--records, .lobby-home-panel--footer) {
  display: grid;
  justify-items: center;
  width: 100%;
  gap: 0.55rem;
}

.title-controls--look-7 .lobby-home-panel--records {
  margin: 0;
}

.title-controls--look-7 .lobby-home-panel--onboarding > #newPlayerButton {
  margin: 0;
}

.title-controls--look-7 .lobby-home-panel--footer #lobbyFlowBack {
  margin-top: 0;
}

/* Look 8 retains Look 7 beneath the hunt controls, but uncovers the harbour behind
   the upper hunt area. Keeping both classes makes returning to Look 7 a one-line change. */
.title-controls--look-8 .lobby-home-panel--hunt {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.title-controls--look-8 .active-hunts .tablelist-empty {
  color: #b7c9ce;
}

/* Look 5: Look 4's softened field and midpoint type, with Look 1 text in Active Hunts. */
.sheet--title .tagline {
  color: #f4ecd9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.86), 0 0 0.3rem rgba(0, 0, 0, 0.18);
}

.sheet--title .field-label {
  color: #a8b2b0;
}

.sheet--title .pick em,
.sheet--title :is(.voyage-readiness, .voyage-privacy, .ranked-readiness) p,
.sheet--title .crew-empty {
  color: #9aacb2;
}

.sheet--title .match-format .pick strong {
  color: #c8cfd0;
}

.sheet--title .lobby-box legend {
  color: #dcad4f;
}

@media (max-width: 66rem), (orientation: portrait) {
  .title-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .captain-full {
    height: clamp(8rem, 24vh, 14rem);
  }

  .sheet--title .tagline {
    margin-bottom: 0.6rem;
    max-width: 34rem;
    white-space: normal;
  }
}

/* -- choosing a captain --------------------------------------------------- */

.crewpick {
  width: 100%;
  margin: 0.2rem 0 1rem;
}

.crewpick .field-label {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--ink-2);
}

.crewpick-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 10rem) 2.75rem;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 2vw, 0.8rem);
  touch-action: pan-y;
  user-select: none;
}

.random-captain-button,
.captain-mode-random {
  display: block;
  width: min(100%, 14rem);
  margin: 0.75rem auto 0;
}

.random-captain-button {
  border-color: rgba(100, 190, 202, 0.7);
  background: linear-gradient(180deg, rgba(35, 105, 121, 0.94), rgba(11, 52, 67, 0.96));
  color: #e6f7f7;
  font-weight: 600;
  box-shadow: inset 0 1px rgba(213, 251, 249, 0.1), 0 0.35rem 0.75rem rgba(0, 0, 0, 0.18);
}

.random-captain-button:hover:not(:disabled),
.random-captain-button:focus-visible {
  border-color: #8bd5dc;
  background: linear-gradient(180deg, rgba(46, 128, 143, 0.98), rgba(14, 65, 80, 0.98));
}

.captain-mode-random {
  margin-top: 1.25rem;
}

.captain-carousel-window {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.captain-carousel-arrow {
  appearance: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  aspect-ratio: 1;
  padding: 0 0 0.15rem;
  border: 1px solid var(--brass-dim);
  border-radius: 50%;
  background: rgba(7, 26, 36, 0.74);
  color: var(--brass);
  font: 700 2rem/1 var(--font-display);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 90ms ease;
}

.captain-carousel-arrow:hover,
.captain-carousel-arrow:focus-visible {
  border-color: var(--brass);
  background: rgba(27, 74, 90, 0.72);
}

.captain-carousel-arrow:active {
  transform: scale(0.94);
}

.captain-carousel-position {
  color: var(--ink-2);
  font: 0.64rem/1 var(--font-data);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.crewtile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.45rem 0.3rem 0.55rem;
  border: 1px solid var(--brine);
  border-radius: var(--radius);
  background: rgba(7, 26, 36, 0.66);
  color: var(--ink-1);
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 90ms ease;
  width: 100%;
  min-height: 8.8rem;
}

.crewtile:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--brass);
  background: rgba(27, 74, 90, 0.6);
}

.crewtile--mine {
  border-color: var(--brass);
  background: rgba(201, 146, 46, 0.15);
}

/* A captain somebody else is already sailing with: shown, named, and not takeable. */
.crewtile--taken {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.85);
}

.crewtile-face {
  width: 100%;
  max-width: 5.5rem;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 16%;
  border-radius: 50%;
  background: rgba(4, 15, 21, 0.55);
  box-shadow: 0 0 0 1px rgba(201, 146, 46, 0.35);
}

.crewtile-portrait-wrap {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 5.5rem;
  place-items: center;
}

.crewtile-name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.2;
}

.crewtile--mine .crewtile-name {
  color: var(--brass);
}

.crewtile-note {
  font-size: 0.66rem;
  color: var(--ink-3);
  line-height: 1.25;
}

/* -- the host's grip on the room ------------------------------------------ */

.crewadmin {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.btn--quiet {
  font-size: 0.78rem;
  padding: 0.35rem 0.75rem;
  background: rgba(7, 26, 36, 0.7);
  color: var(--ink-2);
}

.masthead .game-exit {
  border-color: rgba(201, 146, 46, 0.48);
  background: rgba(7, 26, 36, 0.92);
}

.message-bell {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid rgba(151, 168, 173, 0.42);
  border-radius: 50%;
  background: rgba(7, 26, 36, 0.82);
  color: #77898e;
  font-size: 0.78rem;
  cursor: pointer;
  filter: grayscale(1);
}

.message-bell:hover,
.message-bell:focus-visible {
  border-color: var(--ink-2);
  color: var(--ink-2);
}

.message-bell.has-unread {
  border-color: var(--brass);
  color: #ffd96b;
  background: rgba(92, 61, 12, 0.88);
  box-shadow: 0 0 0.75rem rgba(232, 181, 58, 0.45);
  filter: none;
}

.message-bell small {
  position: absolute;
  top: -0.12rem;
  right: -0.18rem;
  min-width: 0.78rem;
  padding: 0.04rem 0.14rem;
  border-radius: 0.6rem;
  background: var(--blood);
  color: #fff;
  font: 700 0.48rem/1.2 var(--font-data);
  text-align: center;
}

.account-notification-bell {
  align-self: center;
  margin-inline-start: 0.15rem;
}

/* Hand the room over, quiet one crewmate, or show somebody the gangplank. */
.seat-crown,
.seat-kick,
.seat-mute {
  appearance: none;
  border: none;
  background: none;
  color: var(--ink-3);
  font-size: 0.78rem;
  line-height: 1;
  padding: 0.2rem 0.3rem;
  margin-left: -0.15rem;
  border-radius: var(--radius);
  cursor: pointer;
  flex: none;
}

.seat-crown:hover {
  color: var(--brass);
  background: rgba(201, 146, 46, 0.18);
}

.seat-kick:hover {
  color: #ef8f80;
  background: rgba(168, 50, 45, 0.28);
}

.seat-mute:hover,
.seat-mute.is-muted {
  color: var(--brass);
  background: rgba(201, 146, 46, 0.18);
}

@media (max-width: 36rem) and (orientation: portrait) {
  /* Keep the chosen captain and their selector together on a phone. The available-table
     list follows the picker instead of separating the portrait from the full-body art. */
  .crewpick {
    order: -1;
    margin-top: 0;
  }

  .crewpick-row {
    grid-template-columns: 2.4rem minmax(0, 10rem) 2.4rem;
    gap: clamp(0.3rem, 3vw, 0.65rem);
  }

  /* The position counter makes the center column taller than the character card. Anchor
     arrows to the card itself so they do not sag toward the counter underneath it. */
  .captain-carousel-arrow {
    align-self: start;
    width: 2.4rem;
    margin-top: 3rem;
  }
}

/* -- the tables on this host ---------------------------------------------- */

.tablelist {
  width: 100%;
  /* The form contributes a 0.5rem row gap, so the full name-to-message gap is 1.1rem.
     Tightened alongside the larger active-hunt heading; test/guided-tutorial.test.js
     pins this value, so the two move together. */
  margin-top: 0.6rem;
  margin-bottom: 0.7rem;
}

.tablelist[hidden] {
  display: none;
}

.tablelist-intro {
  display: block;
  margin: 0 0 0.45rem;
  color: var(--ink-2);
  font-size: 0.9rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.lobby-box {
  min-width: 0;
  min-height: 3rem;
  margin: 0;
  padding: 0.45rem;
  border: 1px solid var(--brine);
  border-radius: var(--radius);
  background: rgba(7, 26, 36, 0.35);
}

.lobby-box legend {
  padding: 0 0.4rem;
  color: var(--brass);
  font: 0.62rem/1 var(--font-data);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.active-hunts {
  border-color: rgba(224, 181, 75, 0.48);
  background: rgba(3, 15, 22, 0.6);
  box-shadow: inset 0 1px rgba(255, 236, 181, 0.05);
}

.active-hunts legend {
  margin-inline: auto;
  padding: 0.24rem 0.7rem;
  border: 1px solid rgba(224, 181, 75, 0.5);
  border-radius: 999px;
  background: #071a24;
  color: #f2c76e;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
}

.sheet--title :is(.tablelist-intro, .tablelist-empty, .waiting, .share) {
  color: #ede7d9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.sheet--title .active-hunts legend {
  color: var(--brass);
  font: 0.62rem/1 var(--font-data);
}

.sheet--title .active-hunts .tablelist-empty {
  color: var(--ink-2);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.table-social-tools {
  display: grid;
  gap: 0.45rem;
  margin: 0.15rem 0 0.6rem;
}

.table-social-tools[hidden] { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hunt-browser-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.45rem;
  margin: 0.15rem 0 0.45rem;
}

.hunt-search[hidden] { display: none; }

.hunt-search input,
.hunt-filter-menu select {
  width: 100%;
  min-height: 2.45rem;
  border: 1px solid rgba(122, 199, 199, 0.4);
  border-radius: 0.5rem;
  background: rgba(1, 16, 23, 0.88);
  color: #e8f1eb;
  font: 700 0.75rem/1.2 var(--font-ui);
}

.hunt-search input { padding: 0.5rem 0.7rem; }

.hunt-filters { position: relative; }

.hunt-filters > summary {
  display: flex;
  min-height: 2.45rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(122, 199, 199, 0.4);
  border-radius: 0.5rem;
  background: rgba(8, 37, 49, 0.88);
  color: #d7ece8;
  font: 800 0.72rem/1 var(--font-ui);
  cursor: pointer;
  list-style: none;
}

.hunt-filters > summary::-webkit-details-marker { display: none; }

.hunt-filters > summary small {
  display: inline-grid;
  min-width: 1.25rem;
  min-height: 1.25rem;
  place-items: center;
  border-radius: 999px;
  background: #d39a36;
  color: #07151c;
  font: 900 0.75rem/1 var(--font-data);
}

.hunt-filter-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 8;
  display: grid;
  width: min(19rem, calc(100vw - 2rem));
  gap: 0.55rem;
  padding: 0.7rem;
  border: 1px solid rgba(224, 181, 75, 0.52);
  border-radius: 0.65rem;
  background: #071a24;
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.48);
}

.hunt-filter-menu > label:not(.hunt-watch-filter) {
  display: grid;
  gap: 0.25rem;
  color: #c9d8d6;
  font: 800 0.75rem/1.2 var(--font-ui);
}

.hunt-filter-menu select { padding: 0.35rem 0.5rem; }

.hunt-watch-filter {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  gap: 0.5rem;
  color: #e4ece8;
  font-size: 0.74rem;
}

.hunt-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
}

.hunt-filter-chips[hidden] { display: none; }

.hunt-filter-chip {
  min-height: 1.9rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid rgba(229, 189, 93, 0.55);
  border-radius: 999px;
  background: rgba(92, 64, 20, 0.48);
  color: #fff0bd;
  font: 800 0.75rem/1 var(--font-ui);
  cursor: pointer;
}

.hunt-result-count {
  margin: 0.15rem 0 0.25rem;
  color: #a9c4c4;
  font: 700 0.75rem/1.2 var(--font-data);
  text-align: left;
}

.table-filter-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.table-filter-tabs button {
  min-width: 0;
  min-height: 32px;
  padding: 0.18rem 0.45rem;
  border: 1px solid rgba(122, 199, 199, 0.3);
  border-radius: 0.55rem;
  background: rgba(8, 37, 49, 0.78);
  color: #d7ece8;
  font: 700 0.66rem/1.15 var(--font-ui);
  cursor: pointer;
}

.table-filter-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  white-space: normal;
}

.table-filter-tabs button small {
  min-width: 1.25rem;
  padding: 0.12rem 0.3rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: #9ccbc8;
  font: 700 0.58rem/1 var(--font-data);
}

.table-filter-tabs button[aria-selected="true"] {
  border-color: #e5bd5d;
  background: linear-gradient(180deg, #1b7180, #11505f);
  color: #fff5d1;
  box-shadow: 0 0 0.75rem rgba(66, 181, 185, 0.18);
}

.lobby-social-manage {
  justify-content: center;
  width: 100%;
  min-height: 2.55rem;
  border-color: rgba(109, 185, 188, 0.48);
  background: rgba(8, 37, 49, 0.72);
  color: #c9e7e3;
}

.lobby-social-manage:hover,
.lobby-social-manage:focus-visible {
  border-color: rgba(142, 218, 213, 0.72);
  background: rgba(17, 66, 79, 0.88);
}

.lobby-social-manage span {
  display: inline-grid;
  min-width: 1.25rem;
  min-height: 1.25rem;
  margin-left: 0.2rem;
  place-items: center;
  border-radius: 999px;
  background: #d26b4b;
  color: white;
  font: 800 0.62rem/1 var(--font-data);
}

.sheet--title .audiopick :is(.field-label, .audiorow) {
  color: #ede7d9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.sheet--title .title-controls .btn--quiet {
  border-color: rgba(212, 164, 60, 0.62);
  color: #f4ecd9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.your-crew {
  width: 100%;
  margin-top: 0.5rem;
}

.sheet--title .your-crew .roster {
  margin-top: 0;
}

.crew-empty {
  width: 100%;
  margin: 0;
  padding: 0.2rem 0.3rem;
  color: var(--ink-3);
  font-size: 0.78rem;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.sheet--title .captain-roster {
  width: 100%;
  justify-content: center;
  margin-top: 1rem;
}

.tablelist-rows {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.35rem;
  min-height: 3.5rem;
  margin-top: 0.15rem;
  padding: 0.5rem;
  border: 1px solid rgba(105, 164, 172, 0.42);
  border-radius: 0.55rem;
  background: rgba(1, 12, 18, 0.7);
  box-shadow: inset 0 1px 0 rgba(191, 225, 222, 0.05);
  max-height: min(34rem, 55dvh);
  overflow-y: auto;
}

.hunt-show-more {
  width: 100%;
  margin-top: 0.45rem;
}

.tablelist-empty {
  margin: 0;
  padding: 0.2rem 0.3rem;
  color: var(--ink-3);
  font-size: 0.78rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.sheet--title .joinform .field-label {
  color: #c8cfd0;
}

.tablerow {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--brine);
  border-radius: var(--radius);
  background: rgba(7, 26, 36, 0.72);
  color: var(--ink-1);
  font-family: var(--font-ui);
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.tablerow:hover:not(:disabled) {
  border-color: var(--brass);
  background: rgba(27, 74, 90, 0.6);
}

.tablerow--full {
  opacity: 0.45;
  cursor: not-allowed;
}

.tablerow-name {
  font-family: var(--font-display);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tablerow-social {
  display: block;
  margin-top: 0.18rem;
  overflow: hidden;
  color: #82d8cc;
  font: 700 0.64rem/1.25 var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tablerow-seats {
  font-family: var(--font-data);
  font-size: 0.78rem;
  color: var(--brass);
}

.tablerow-state {
  font-family: var(--font-data);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 36rem) {
  .hunt-browser-tools { grid-template-columns: minmax(0, 1fr); }

  .hunt-filters > summary { width: 100%; }

  .hunt-filter-menu {
    position: static;
    width: 100%;
    margin-top: 0.35rem;
    box-shadow: none;
  }

  .tablelist-rows { max-height: 52dvh; }

  .tablerow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 0.7rem;
  }

  .tablerow-name {
    grid-column: 1 / -1;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .tablerow-state {
    text-align: right;
  }
}

@media (max-width: 36rem) and (orientation: portrait) {
  .tablerow-name {
    font-size: clamp(0.5rem, 2.35vw, 0.64rem);
    letter-spacing: -0.012em;
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

@media (max-width: 32.5rem) and (orientation: portrait) {
  .active-hunts .tablelist-rows { padding-inline: 0.3rem; }
  .active-hunts .tablelist-empty--all {
    padding-inline: 0;
    font-size: clamp(0.58rem, 2.65vw, 0.7rem);
    letter-spacing: -0.018em;
    white-space: nowrap;
  }
}

/* -- the parrot as tutor --------------------------------------------------- */

/* Anchored to the table rather than floating over it: a tip is something to read
   alongside the decision, not a dialog that has to be cleared before you can act. */
.tutor {
  position: fixed;
  left: clamp(0.5rem, 1.5vw, 1rem);
  bottom: 4.5rem;
  z-index: 15;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  width: min(24rem, calc(100vw - 1.5rem));
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  background: rgba(7, 26, 36, 0.94);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}

.tutor[hidden] {
  display: none;
}

.tutor-parrot {
  width: clamp(2.6rem, 6vw, 3.4rem);
  height: auto;
  object-fit: contain;
  flex: none;
}

.tutor-body {
  min-width: 0;
}

.tutor-text {
  margin: 0 0 0.5rem;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ink-1);
}

.tutor-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* What each track buys, while the tips are on. A definition list across the full panel
   width - the same copy inside the four columns became four columns of broken prose. */
.board-guide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.5rem;
  margin: 0.7rem 0 0;
  font-size: 0.66rem;
  line-height: 1.3;
}

.board-guide dt {
  font-family: var(--font-data);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
}

.board-guide dd {
  margin: 0;
  color: var(--ink-3);
}

/* -- new player or old salt ------------------------------------------------ */

.tutorpick {
  width: 100%;
  margin-top: 0.9rem;
}

.tutorpick[hidden] {
  display: none;
}

.tutorpick .field-label {
  display: block;
  margin-bottom: 0.4rem;
}

.tutorpick-row {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
}

.tutorbtn {
  appearance: none;
  flex: 1 1 0;
  max-width: 11rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--brine);
  border-radius: var(--radius);
  background: rgba(7, 26, 36, 0.66);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.tutorbtn:hover {
  border-color: var(--brass);
  color: var(--ink-1);
}

.tutorbtn--on {
  border-color: var(--brass);
  background: rgba(201, 146, 46, 0.16);
  color: var(--brass);
}

.tutorpick-note {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  color: var(--ink-3);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* The tip would sit on top of the action buttons on a narrow screen. */
@media (max-width: 60rem) {
  .tutor {
    position: static;
    width: 100%;
    margin: 0.6rem 0 0;
  }
}

/* -- the curtain --------------------------------------------------------- */

.has-art .curtain--won {
  background-image:
    linear-gradient(180deg, rgba(7, 26, 36, 0.72), rgba(7, 26, 36, 0.92)),
    image-set(url('/art/bg-victory.webp') 1x);
}

.has-art .curtain--lost {
  background-image:
    linear-gradient(180deg, rgba(7, 26, 36, 0.74), rgba(7, 26, 36, 0.93)),
    image-set(url('/art/bg-defeat.webp') 1x);
}

@media (orientation: portrait) {
  .has-art .curtain--won {
    background-image:
      linear-gradient(180deg, rgba(7, 26, 36, 0.72), rgba(7, 26, 36, 0.92)),
      image-set(url('/art/bg-victory-portrait.webp') 1x);
  }

  .has-art .curtain--lost {
    background-image:
      linear-gradient(180deg, rgba(7, 26, 36, 0.74), rgba(7, 26, 36, 0.93)),
      image-set(url('/art/bg-defeat-portrait.webp') 1x);
  }
}

/* The wave divider closes the curtain's reading before its buttons. */
.has-art .curtain-actions {
  padding-top: 1rem;
  border-image: url('/art/ui-divider-wave.webp') 40 0 0 0 / 0.75rem 0 0 0 / 0 stretch stretch;
}

.has-art .curtain--odyssey .curtain-actions {
  padding-top: 0.25rem;
  border-image: none;
}

.has-art .curtain--long-voyage .curtain-actions {
  padding-top: 0.25rem;
  border-image: none;
}

.curtain-mascot:empty {
  display: none;
}

.curtain-mascot .mascot {
  width: clamp(4.5rem, 12vh, 7rem);
  height: auto;
  object-fit: contain;
  margin-bottom: 0.3rem;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
}

/* The voyage map, with a coin on each stop the crew has actually reached. */
.curtain-voyage {
  margin: 0.9rem auto 1.3rem;
  width: min(100%, 24rem);
  padding-inline: 0.7rem;
}

.voyage-map-plot {
  position: relative;
  aspect-ratio: 100 / 62;
  isolation: isolate;
  border: 1px solid #77552e;
  border-radius: 2px;
  background: #e5c989 url('/art/voyage-map-3.webp') center / 100% 100% no-repeat;
  box-shadow:
    inset 0 0 1.5rem rgba(89, 54, 22, 0.28),
    inset 0 0 0 2px rgba(255, 236, 181, 0.18),
    0 0.7rem 1rem -0.45rem rgba(0, 0, 0, 0.65);
}

/* Rolled parchment ends sit above only the map's outer margins; the graph begins seven
   percent in, so the dimensional scroll never obscures a data point or its route. */
.voyage-map-plot::before,
.voyage-map-plot::after {
  content: '';
  position: absolute;
  z-index: 3;
  top: -0.38rem;
  bottom: -0.38rem;
  width: 1rem;
  border: 1px solid #79532a;
  border-radius: 48% 42% 46% 52% / 4% 5% 6% 5%;
  background:
    linear-gradient(
      90deg,
      #7d562e 0%,
      #bd9151 13%,
      #ead29a 36%,
      #c49958 66%,
      #80552c 91%,
      #58391f 100%
    );
  box-shadow:
    inset 0.12rem 0 0.2rem rgba(255, 240, 193, 0.45),
    inset -0.16rem 0 0.2rem rgba(68, 39, 18, 0.42),
    0 0.25rem 0.35rem rgba(45, 28, 14, 0.42);
}

.voyage-map-plot::before {
  left: -0.62rem;
  transform: rotate(-0.8deg);
}

.voyage-map-plot::after {
  right: -0.62rem;
  transform: rotate(0.8deg) scaleX(-1);
}

.curtain-voyage:empty {
  display: none;
}

.voyage-map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.voyage-graph {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: transparent;
}

.voyage-route {
  fill: none;
  stroke: #a52c28;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-width: 2;
  stroke-dasharray: 4 2 1 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 0 rgba(255, 238, 189, 0.75));
}

.voyage-end {
  text-anchor: middle;
  dominant-baseline: central;
}

.voyage-chest {
  filter: drop-shadow(0 1px 1px rgba(58, 31, 10, 0.62));
}

.voyage-skull {
  filter: drop-shadow(0 0.35px 0.4px rgba(55, 24, 16, 0.55));
}

.voyage-out-of-cards {
  filter: brightness(0.68) saturate(1.05) drop-shadow(0 0.35px 0.4px rgba(55, 24, 16, 0.55));
}

.voyage-legend {
  paint-order: stroke;
  fill: #693b25;
  stroke: rgba(225, 193, 132, 0.5);
  stroke-width: 0.18;
  font: italic 700 3.9px/1 var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.16px;
  filter: drop-shadow(0.08px 0.14px 0 rgba(74, 39, 22, 0.35));
}

/* The coins sit under the map rather than on it: the map has its own painted route,
   and six markers dropped on top of it would be claiming to be those stops. */
.voyage-stops {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.voyage-stop {
  width: 1.9rem;
  aspect-ratio: 1;
  object-fit: contain;
  opacity: 0.25;
  filter: grayscale(0.9);
}

/* A gap between the three won and the three lost, so the two runs read apart. */
.voyage-stop:nth-child(3) {
  margin-right: 0.9rem;
}

.voyage-stop.reached {
  opacity: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

/* -- feedback effects ---------------------------------------------------- */

/* One transparent layer over the whole table. It never takes a click, and every
   effect removes itself when its animation ends. */
.fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 35;
}

.fx {
  position: absolute;
  object-fit: contain;
  opacity: 0;
}

/* Over the card in play: the burst, the cannon, the heal. */
.fx--burst {
  top: 50%;
  left: 50%;
  width: min(34rem, 62vw);
  height: auto;
  translate: -50% -50%;
  animation: fx-burst 1400ms ease-out forwards;
}

/* Every effect below holds at full opacity between its rise and its fade. Lengthening the
   animation alone only stretched the fade - the picture still vanished as soon as it had
   arrived. The plateau is the part you actually see. */
@keyframes fx-burst {
  0% {
    opacity: 0;
    scale: 0.72;
  }
  14% {
    opacity: 1;
    scale: 1.04;
  }
  55% {
    opacity: 1;
    scale: 1.09;
  }
  100% {
    opacity: 0;
    scale: 1.18;
  }
}

.fx--rise {
  top: 50%;
  left: 50%;
  width: min(26rem, 46vw);
  height: auto;
  translate: -50% -50%;
  animation: fx-rise 1450ms ease-out forwards;
}

@keyframes fx-rise {
  0% {
    opacity: 0;
    translate: -50% -34%;
  }
  16% {
    opacity: 1;
  }
  58% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: -50% -72%;
  }
}

.fx--sweep {
  top: 50%;
  left: 50%;
  width: min(30rem, 55vw);
  height: auto;
  animation: fx-sweep 1280ms ease-out forwards;
}

/* Hide crosses the whole field like Evade, but the dark hull, cream sails, red pennant,
   and turquoise wake make it a small storybook pirate ship slipping out of sight. */
.fx--hide {
  top: 50%;
  left: 0;
  width: clamp(11rem, 24vw, 20rem);
  height: clamp(8rem, 19vw, 15rem);
  opacity: 1;
  animation: fx-hide-sail-away 1550ms cubic-bezier(0.3, 0.05, 0.62, 0.96) forwards;
}

.fx-hide-ship {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0.75rem 0.7rem rgba(2, 13, 20, 0.62));
  animation: fx-hide-bob 430ms ease-in-out infinite alternate;
}

.fx-hide-hull {
  position: absolute;
  left: 10%;
  bottom: 14%;
  width: 80%;
  height: 25%;
  border: 0.2rem solid #151514;
  border-top-color: #d1a447;
  border-radius: 10% 12% 54% 38%;
  background:
    repeating-linear-gradient(0deg, transparent 0 21%, rgba(226, 178, 76, 0.18) 22% 26%),
    linear-gradient(105deg, #6f361e 0 18%, #172d39 19% 75%, #091a23 76%);
  box-shadow: inset 0 0.28rem rgba(244, 207, 119, 0.25);
  transform: skewX(-9deg);
}

.fx-hide-mast {
  position: absolute;
  left: 52%;
  bottom: 36%;
  width: 0.24rem;
  height: 55%;
  border-radius: 999px;
  background: #4a2a17;
  box-shadow: 0 0 0 1px rgba(235, 194, 102, 0.35);
}

.fx-hide-sail {
  position: absolute;
  border: 0.16rem solid #352817;
  background: linear-gradient(120deg, #fff1c7, #d6b873 72%, #997441);
  box-shadow: inset -0.35rem -0.25rem 0.5rem rgba(87, 54, 19, 0.28);
  clip-path: polygon(8% 0, 100% 8%, 82% 100%, 0 86%);
}

.fx-hide-sail--main {
  left: 54%;
  bottom: 43%;
  width: 31%;
  height: 43%;
}

.fx-hide-sail--fore {
  left: 30%;
  bottom: 47%;
  width: 20%;
  height: 33%;
  transform: scaleX(-1);
}

.fx-hide-flag {
  position: absolute;
  z-index: 1;
  left: 52%;
  bottom: 87%;
  width: 20%;
  height: 9%;
  background: linear-gradient(90deg, #b72d24, #ef7840);
  clip-path: polygon(0 0, 100% 20%, 70% 55%, 100% 100%, 0 82%);
  transform: rotate(4deg);
  transform-origin: left center;
}

.fx-hide-wake {
  position: absolute;
  left: -30%;
  bottom: 8%;
  width: 104%;
  height: 18%;
  border-top: 0.28rem solid rgba(146, 238, 231, 0.92);
  border-radius: 52% 0 0 45%;
  background: repeating-linear-gradient(170deg, rgba(52, 188, 190, 0.7) 0 0.18rem, transparent 0.2rem 0.65rem);
  filter: drop-shadow(0 0 0.35rem rgba(99, 231, 226, 0.72));
  transform: skewX(-24deg);
}

@keyframes fx-hide-sail-away {
  0% { opacity: 0; transform: translate(-120%, -46%) scale(0.82); }
  13% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(100vw + 30%), -54%) scale(1.04); }
}

@keyframes fx-hide-bob {
  from { transform: rotate(-1.5deg) translateY(0); }
  to { transform: rotate(1deg) translateY(-0.35rem); }
}

.fx--labeled {
  object-fit: initial;
}

.fx-art {
  display: block;
  width: 100%;
  height: auto;
}

.fx-stolen-value {
  position: absolute;
  left: 52%;
  top: 45%;
  translate: -50% -50%;
  color: #102a43;
  font-family: var(--font-data);
  font-size: clamp(2rem, 7vw, 4.2rem);
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(241, 214, 161, 0.95),
    0 0 0.22em rgba(241, 214, 161, 0.8);
}

@keyframes fx-sweep {
  0% {
    opacity: 0;
    translate: -86% -50%;
  }
  18% {
    opacity: 1;
  }
  62% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: -14% -50%;
  }
}

/* The travelling shine that reads as a card turning over. */
.fx--shine {
  top: 50%;
  left: 50%;
  width: min(24rem, 42vw);
  height: auto;
  translate: -50% -50%;
  animation: fx-shine 1120ms ease-out forwards;
}

@keyframes fx-shine {
  0% {
    opacity: 0;
    scale: 0.9;
  }
  17% {
    opacity: 0.85;
  }
  60% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    scale: 1.05;
  }
}

/* Damage, victory and defeat are edge treatments with a clear centre, so they cover
   the whole viewport and leave the table readable underneath. */
.fx--edge {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: fx-edge 1600ms ease-out forwards;
}

@keyframes fx-edge {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 0.92;
  }
  50% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
  }
}

/* -- adrift -------------------------------------------------------------- */

.adrift {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(7, 26, 36, 0.82);
  z-index: 40;
}

/* The chart room: where you work out where you are. */
.has-art .adrift {
  background-image:
    linear-gradient(180deg, rgba(7, 26, 36, 0.88), rgba(7, 26, 36, 0.95)),
    image-set(url('/art/bg-tutorial.webp') 1x);
  background-size: cover;
  background-position: center;
}

@media (orientation: portrait) {
  .has-art .adrift {
    background-image:
      linear-gradient(180deg, rgba(7, 26, 36, 0.88), rgba(7, 26, 36, 0.95)),
      image-set(url('/art/bg-tutorial-portrait.webp') 1x);
  }
}

/* -- the parrot ---------------------------------------------------------- */

.mascot--thinking,
.mascot--pointing {
  width: 1.6rem;
  height: 1.6rem;
  object-fit: contain;
  vertical-align: -0.45rem;
  margin-right: 0.35rem;
}

.adrift-card {
  text-align: center;
  max-width: 22rem;
  padding: 1rem;
  color: var(--ink-2);
}

.adrift-parrot {
  width: 100%;
  max-width: 18rem;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
}

/* -- seats --------------------------------------------------------------- */

.seat-portrait {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  box-shadow: 0 0 0 1px rgba(201, 146, 46, 0.55);
  flex: none;
}

.seat.away .seat-portrait {
  filter: grayscale(0.9);
  opacity: 0.5;
}

.seat-pennant {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  flex: none;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 68rem) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Scrolling is for the log and the discards. Whatever else is on the table, the card
     you are deciding about and the buttons that decide it stay on screen together. */
  .controls {
    position: sticky;
    bottom: 0;
    z-index: 12;
    margin: 0 calc(var(--gap) * -1);
    padding: 0.5rem var(--gap) calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, transparent, rgba(7, 26, 36, 0.93) 22%);
  }

  /* The artwork gives way before the controls do. */
  .stage {
    min-height: 0;
  }

  .card {
    width: max(11rem, min(var(--card-w), (100dvh - 20rem) * 4 / 5));
  }

  .rail {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .rail > .panel {
    flex: 1 1 15rem;
  }

  .table {
    order: -1;
  }

  .layout:has(> .cooperative-turns:not([hidden])) > .cooperative-turns { grid-column: 1; grid-row: 1; }
  .layout:has(> .cooperative-turns:not([hidden])) > .table { grid-column: 1; grid-row: 2; }
  .layout:has(> .cooperative-turns:not([hidden])) > .rail:first-of-type { grid-column: 1; grid-row: 3; }
  .layout:has(> .cooperative-turns:not([hidden])) > .rail:last-of-type { grid-column: 1; grid-row: 4; }
}

/* Chromebooks and landscape tablets have plenty of width but little height. Keep the
   familiar piles-above-card reading order, then recover the height with slightly smaller
   table pieces and tighter, still deliberate spacing. */
@media (min-width: 48rem) and (max-height: 50rem) and (orientation: landscape) {
  /* Chromebook lobby rows may contain a voyage, host, mode, and match length. Let that
     summary use a second line instead of clipping the end on the wider, shallow screen. */
  .tablerow-name {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    line-height: 1.2;
  }

  .table {
    display: flex;
    gap: clamp(0.4rem, 1.2vh, 0.7rem);
    align-self: stretch;
    padding-bottom: 0.25rem;
  }

  .piles {
    flex-direction: row;
    gap: clamp(1.25rem, 4vw, 2.25rem);
  }

  .pile {
    width: clamp(3.75rem, 7vh, 4.5rem);
    gap: 0.15rem;
  }

  .stage {
    min-height: 0;
  }

  .card,
  .stage-empty {
    width: clamp(11rem, calc((100dvh - 19rem) * 4 / 5), 15rem);
  }

  .prompt {
    min-height: 1.3em;
  }
}

/* Center the card itself rather than the combined card-and-die group. The verdict sits
   alongside without nudging the card away from its prompt and action row. */
@media (min-width: 48rem) {
  .stage {
    position: relative;
  }

  .stage-roll {
    position: absolute;
    left: calc(100% + var(--gap));
  }
}

@media (max-width: 34rem) {
  .stage {
    flex-direction: column;
  }

  .masthead {
    flex-wrap: wrap;
  }

  .masthead-meta {
    margin-left: 0;
    text-align: left;
    width: 100%;
  }
}

/* Portrait phones use a compact three-column ship view. Health and treasure flank the
   live table, while the full upgrade board remains below the first screen. This does not
   apply to landscape phones, tablets, or Chromebooks. */
@media (max-width: 47.99rem) and (orientation: portrait) {
  .masthead {
    align-items: center;
    gap: 0.22rem;
    padding: 0.35rem 0.45rem;
  }

  .masthead .message-bell {
    width: 1.62rem;
    height: 1.62rem;
    font-size: 0.7rem;
  }

  .masthead .wordmark,
  .masthead-meta {
    display: none;
  }

  .masthead .tally {
    flex: 1;
    gap: 0.45rem;
    font-size: 0.55rem;
    letter-spacing: 0.05em;
  }

  .masthead .btn {
    min-width: 0;
    padding: 0.32rem 0.42rem;
    font-size: 0.62rem;
  }

  .layout {
    grid-template-columns: 3.35rem minmax(0, 1fr) 3.65rem;
    gap: 0.3rem;
    padding: 0.35rem;
    align-items: start;
  }

  .layout > .rail {
    display: contents;
  }

  .layout:has(> .cooperative-turns:not([hidden])) > .cooperative-turns {
    grid-column: 2;
    grid-row: 1;
    gap: clamp(0.3rem, 2.5vw, 0.75rem);
    padding: 0 0.15rem 0.25rem;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .cooperative-turn { padding: 0.16rem; }
  .layout:has(> .cooperative-turns:not([hidden])) .cooperative-turn-portrait { width: clamp(2rem, 12vw, 2.8rem); height: clamp(2rem, 12vw, 2.8rem); }
  .layout:has(> .cooperative-turns:not([hidden])) .cooperative-turn strong { font-size: 0.43rem; }
  .layout:has(> .cooperative-turns:not([hidden])) > .table { grid-column: 2; grid-row: 2; }
  .layout:has(> .cooperative-turns:not([hidden])) .panel--health,
  .layout:has(> .cooperative-turns:not([hidden])) .panel--haul { grid-row: 2; }

  .table {
    --card-w: clamp(10.5rem, calc(100vw - 8.6rem), 14rem);
    grid-column: 2;
    grid-row: 1;
    order: initial;
    gap: clamp(0.35rem, 1.2vh, 0.65rem);
    padding: 0;
  }

  .piles {
    gap: clamp(0.45rem, 3vw, 1rem);
  }

  .pile {
    width: clamp(3.1rem, 13vw, 4.25rem);
    gap: 0.4rem;
  }

  .pile-name {
    width: 100%;
    margin-top: 0.05rem;
    font-size: 0.48rem;
    line-height: 1;
    text-align: center;
  }

  .stage,
  .stage-empty {
    min-height: 0;
  }

  .stage {
    margin-bottom: 0.9rem;
  }

  .controls {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    background: none;
    gap: 0.5rem;
  }

  .prompt {
    min-height: 1.25em;
    padding-inline: 0.3rem;
    font-size: 0.9rem;
    line-height: 1.2;
  }

  .actions {
    width: 100%;
    gap: 0.45rem;
  }

  .action {
    flex: 0 0 100%;
    width: 100%;
    max-width: 18rem;
  }

  .actions .btn {
    width: 100%;
    height: 3.35rem;
    padding: 0.65rem 0.7rem;
    font-size: 0.88rem;
    line-height: 1.2;
  }

  .actions .btn-icon {
    display: none;
  }

  .actions .btn > .action-label {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .actions .btn--with-reason {
    height: auto;
    min-height: 3.35rem;
    padding-block: 0.35rem;
  }

  .actions .btn--with-reason .action-label {
    font-size: 0.8rem;
  }

  .actions .btn--with-reason .action-reason {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.56rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .panel--health,
  .panel--haul {
    align-self: start;
    min-width: 0;
    padding: 0.45rem 0.28rem 0.55rem;
    text-align: center;
    background: rgba(7, 26, 36, 0.78);
  }

  .panel--health {
    grid-column: 1;
    grid-row: 1;
  }

  .panel--haul {
    grid-column: 3;
    grid-row: 1;
  }

  .panel--health .panel-title,
  .panel--haul .panel-title {
    width: fit-content;
    max-width: 100%;
    min-height: 5.25rem;
    justify-content: center;
    gap: 0;
    margin: 0 auto 0.55rem;
    padding: 0.45rem 0.35rem;
    border: 1px solid rgba(232, 190, 91, 0.58);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(176, 119, 38, 0.72), rgba(73, 48, 18, 0.9));
    box-shadow:
      inset 0 1px rgba(255, 231, 166, 0.24),
      0 0.2rem 0.35rem rgba(0, 0, 0, 0.35);
    color: #f4d98e;
    font-size: 0.52rem;
    line-height: 1;
    letter-spacing: 0.04em;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }

  .panel--health .title-icon,
  .panel--haul .title-icon {
    display: none;
  }

  .stage-card--advance {
    cursor: pointer;
    border-radius: 4px;
    outline: 2px solid rgba(201, 146, 46, 0.72);
    outline-offset: 0.25rem;
  }

  .stage-card--advance:focus-visible {
    outline-color: #ffd477;
    box-shadow: 0 0 1rem rgba(201, 146, 46, 0.5);
  }

  .has-art .panel--health .meter,
  .panel--health .meter {
    flex-direction: column-reverse;
    width: 0.72rem;
    height: clamp(12rem, 36vh, 20rem);
    margin-inline: auto;
    padding: 0.25rem 0.15rem;
    gap: 1px;
    background-size: 100% 100%;
  }

  .panel--health .meter-read {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin-top: 0.4rem;
    font-size: 1.05rem;
  }

  .panel--health .health-token {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
  }

  .panel--health .meter-of {
    margin: -0.15rem 0 0;
    font-size: 0.55rem;
  }

  .panel--haul .haul-read {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .panel--haul .haul-total {
    font-size: 1.3rem;
  }

  .panel--haul .haul-goal {
    font-size: 0.5rem;
    letter-spacing: 0.04em;
  }

  .panel--haul .haul-bar {
    position: relative;
    width: 0.72rem;
    height: clamp(12rem, 36vh, 20rem);
    margin: 0.4rem auto 0;
  }

  .panel--haul .haul-bar span {
    position: absolute;
    inset: auto 0 0;
    width: 100% !important;
    height: var(--haul-progress, 0%);
    background: linear-gradient(0deg, var(--brass-dim), var(--brass));
    transition: height 400ms cubic-bezier(0.2, 0.9, 0.3, 1);
  }

  /* The side HUD is a summary. The full banked-card history remains available below in
     the log, but thumbnails cannot fit honestly inside a three-rem-wide treasure rail. */
  .panel--haul .cardstrip {
    display: none;
  }

  .panel--board {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--board { grid-row: 3; }

  /* The painted banner's wave rises at the left edge. Keep the phone-sized title in
     the clear center of the banner instead of letting it begin beneath the artwork. */
  .has-art .panel--board .panel-title {
    justify-content: center;
    text-align: center;
  }

  .panel--discards {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--discards { grid-row: 4; }

  .panel--log {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--log { grid-row: 5; }

  /* Track choices deserve the whole phone rather than four tiny targets below the fold.
     The underlying board stays in its normal position as a persistent status display. */
  .panel--board.panel--choice-open {
    position: fixed;
    z-index: 60;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    padding: max(3.5rem, env(safe-area-inset-top, 0px)) 1rem
      max(1.25rem, env(safe-area-inset-bottom, 0px));
    background: #092430;
  }

  .panel--choice-open .board {
    width: min(100%, 34rem);
    margin-inline: auto;
    gap: 0.55rem;
  }

  .panel--choice-open .hint {
    width: min(100%, 32rem);
    margin: 0 auto 1rem;
    color: var(--bone);
    font: 700 1.15rem/1.3 var(--font-display);
    text-align: center;
  }

  .panel--choice-open .upgrade-choice-close {
    position: absolute;
    top: max(0.75rem, env(safe-area-inset-top, 0px));
    right: 0.8rem;
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    padding: 0 0 0.15rem;
    border: 1px solid var(--brass-dim);
    border-radius: 50%;
    background: rgba(7, 26, 36, 0.9);
    color: var(--bone);
    font: 2rem/1 var(--font-display);
  }

  .panel--choice-open .btn.upgrade-choice-back {
    display: block;
    align-self: center;
    margin-top: 1rem;
  }
}

/* Landscape phones get a single-screen cockpit rather than the generic narrow layout's
   long vertical document. The two status meters form fixed side rails; the entire live
   decision—piles, active card, prompt, and every action—occupies the center viewport. */
@media (max-width: 60rem) and (max-height: 32rem) and (orientation: landscape) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .app {
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .masthead {
    flex: 0 0 2.35rem;
    align-items: center;
    gap: 0.22rem;
    min-height: 0;
    padding: 0.25rem max(0.4rem, env(safe-area-inset-right, 0px)) 0.25rem
      max(0.4rem, env(safe-area-inset-left, 0px));
  }

  .masthead .message-bell {
    width: 1.62rem;
    height: 1.62rem;
    font-size: 0.7rem;
  }

  .masthead .wordmark,
  .masthead-meta,
  .masthead .ranked-surrender {
    display: none !important;
  }

  .masthead .tally {
    flex: 1;
    gap: 0.55rem;
    min-width: 0;
    font-size: 0.52rem;
    letter-spacing: 0.04em;
  }

  .masthead .pips {
    margin-left: 0.18rem;
    letter-spacing: 0.08em;
  }

  .masthead .btn {
    min-width: 0;
    min-height: 1.75rem;
    padding: 0.25rem 0.42rem;
    font-size: 0.58rem;
    white-space: nowrap;
  }

  .layout {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: 4.6rem minmax(0, 1fr) 4.85rem;
    gap: 0.3rem;
    align-items: stretch;
    overflow: hidden;
    padding: 0.3rem max(0.35rem, env(safe-area-inset-right, 0px))
      max(0.3rem, env(safe-area-inset-bottom, 0px))
      max(0.35rem, env(safe-area-inset-left, 0px));
  }

  .layout > .rail {
    display: contents;
  }

  .table {
    --card-w: clamp(7.5rem, 19vw, 10rem);
    position: relative;
    grid-column: 2;
    grid-row: 1;
    order: initial;
    display: grid;
    grid-template-columns: minmax(5.1rem, 0.62fr) minmax(7.5rem, 0.82fr) minmax(10rem, 1.45fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(0.3rem, 1.2vw, 0.65rem);
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .piles {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    flex-direction: column;
    gap: clamp(0.25rem, 1vh, 0.45rem);
  }

  .pile {
    width: clamp(2.7rem, 11vh, 3.65rem);
    gap: 0.08rem;
  }

  .pile-name {
    font-size: 0.43rem;
    line-height: 1;
  }

  .stage {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    min-height: 0;
    gap: 0;
  }

  .card,
  .stage-empty {
    width: var(--card-w);
  }

  .stage-roll {
    position: absolute;
    right: -0.25rem;
    bottom: -0.2rem;
    z-index: 6;
    transform: scale(0.72);
    transform-origin: right bottom;
  }

  .controls {
    position: relative;
    z-index: 4;
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    gap: 0.3rem;
    background: none;
  }

  .prompt {
    display: -webkit-box;
    min-height: 1.1em;
    max-height: 3.45em;
    overflow: hidden;
    padding-inline: 0.15rem;
    font-size: clamp(0.65rem, 1.8vw, 0.82rem);
    line-height: 1.15;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.28rem;
    width: min(100%, 12rem);
    max-width: 12rem;
    margin-inline: auto;
  }

  .action,
  .action--with-reason {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .actions .btn {
    width: 100%;
    min-width: 0;
    height: 2.2rem;
    min-height: 0;
    padding: 0.28rem 0.32rem;
    overflow: hidden;
    font-size: clamp(0.58rem, 1.55vw, 0.72rem);
    line-height: 1.05;
  }

  .actions .btn-icon {
    display: none;
  }

  .actions .btn > .action-label {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .actions .btn--with-reason {
    height: 2.5rem;
    padding-block: 0.18rem;
  }

  .actions .btn--with-reason .action-label {
    font-size: 0.58rem;
  }

  .actions .btn--with-reason .action-reason {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.45rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .tray {
    width: 100%;
    max-height: 4.25rem;
    overflow-y: auto;
    gap: 0.2rem;
    padding: 0.25rem;
  }

  .tray .chip {
    min-width: 2.1rem;
    padding: 0.18rem 0.28rem;
    font-size: 0.65rem;
  }

  .renegade-experience-field {
    min-height: 2rem;
    padding: 0.2rem 0.35rem;
    font-size: 0.58rem;
  }

  .versus-opponent {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 0;
    gap: 0.2rem;
    padding: 0.18rem 0.4rem;
    border-radius: 0.35rem;
    font-size: 0.48rem;
  }

  .versus-fighter {
    padding: 0.05rem 0.25rem;
  }

  .versus-fighter strong {
    font-size: 0.72rem;
  }

  .versus-clash span {
    width: 1.45rem;
    border-width: 1px;
    font-size: 0.52rem;
  }

  .versus-rival-vitals {
    gap: 0.08rem 0.35rem;
    margin-top: 0.05rem;
    font-size: 0.43rem;
  }

  .panel--health,
  .panel--haul {
    grid-row: 1;
    align-self: stretch;
    min-width: 0;
    padding: 0.35rem 0.28rem;
    overflow: hidden;
    text-align: center;
    background: rgba(7, 26, 36, 0.84);
  }

  .panel--health {
    grid-column: 1;
  }

  .panel--haul {
    grid-column: 3;
  }

  .panel--health .panel-title,
  .panel--haul .panel-title {
    justify-content: center;
    margin: 0 0 0.25rem;
    font-size: 0.48rem;
    letter-spacing: 0.08em;
  }

  .panel--health .title-icon,
  .panel--haul .title-icon {
    width: 0.8rem;
    height: 0.8rem;
  }

  .has-art .panel--health .meter,
  .panel--health .meter {
    flex-direction: column-reverse;
    width: 0.72rem;
    height: calc(100% - 4.35rem);
    min-height: 5.25rem;
    max-height: none;
    margin-inline: auto;
    padding: 0.18rem 0.13rem;
    gap: 1px;
    background-size: 100% 100%;
  }

  .panel--health .health-token {
    width: 0.95rem;
    height: 0.95rem;
    margin: 0;
  }

  .panel--health .meter-read {
    display: flex;
    justify-content: center;
    gap: 0.12rem;
    margin-top: 0.22rem;
    font-size: 0.82rem;
  }

  .panel--health .meter-of {
    margin: 0;
    font-size: 0.48rem;
  }

  .panel--haul .haul-read {
    justify-content: center;
    gap: 0.18rem;
  }

  .panel--haul .haul-total {
    font-size: 1rem;
  }

  .panel--haul .haul-goal {
    font-size: 0.43rem;
    letter-spacing: 0.02em;
  }

  .panel--haul .haul-bar {
    position: relative;
    width: 0.72rem;
    height: calc(100% - 4.4rem);
    min-height: 5.25rem;
    margin: 0.28rem auto 0;
  }

  .panel--haul .haul-bar span {
    position: absolute;
    inset: auto 0 0;
    width: 100% !important;
    height: var(--haul-progress, 0%);
    background: linear-gradient(0deg, var(--brass-dim), var(--brass));
    transition: height 400ms cubic-bezier(0.2, 0.9, 0.3, 1);
  }

  .panel--haul .cardstrip,
  .panel--board,
  .panel--discards,
  .panel--log,
  .seats,
  .emotes {
    display: none !important;
  }
}

/* Revised landscape-phone flow: the first viewport is the complete play surface, while
   reference material remains available immediately below it in the normal page scroll. */
@media (max-width: 60rem) and (max-height: 32rem) and (orientation: landscape) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app {
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .layout {
    flex: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto;
    align-items: start;
    overflow: visible;
  }

  /* Health owns the left half of the top status strip; treasure continues from the
     midpoint to the right edge. Both trackers run horizontally at a glance. */
  .panel--health,
  .panel--haul {
    grid-row: 1;
    display: grid;
    align-self: stretch;
    align-items: center;
    gap: 0.25rem 0.4rem;
    min-height: 2.8rem;
    padding: 0.3rem 0.5rem;
    overflow: visible;
    text-align: left;
  }

  .panel--health {
    grid-column: 1;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .panel--haul {
    grid-column: 2;
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .panel--health .panel-title,
  .panel--haul .panel-title {
    justify-content: start;
    margin: 0;
    font-size: 0.52rem;
    white-space: nowrap;
  }

  .has-art .panel--health .meter,
  .panel--health .meter {
    flex-direction: row;
    width: 100%;
    height: 1.15rem;
    min-height: 0;
    max-height: 1.15rem;
    margin: 0;
    padding: 0.12rem;
    gap: 1px;
  }

  .panel--health .health-token {
    width: 0.72rem;
    height: 0.72rem;
  }

  .panel--health .meter-read {
    display: flex;
    justify-content: flex-end;
    gap: 0.1rem;
    margin: 0;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .panel--haul .haul-read {
    justify-content: start;
    white-space: nowrap;
  }

  .panel--haul .haul-total {
    font-size: 0.95rem;
  }

  .panel--haul .haul-bar {
    position: relative;
    width: 100%;
    height: 0.65rem;
    min-height: 0;
    margin: 0;
  }

  .panel--haul .haul-bar span {
    position: static;
    display: block;
    /* This must beat the earlier landscape side-rail rule's width:100%!important.
       Without the matching priority the horizontal stash looked full at every total. */
    width: var(--haul-progress, 0%) !important;
    height: 100% !important;
    background: linear-gradient(90deg, var(--brass-dim), var(--brass));
    transition: width 400ms cubic-bezier(0.2, 0.9, 0.3, 1);
  }

  .table {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: 5.25rem minmax(4.25rem, 0.5fr) var(--card-w) minmax(11rem, 1.5fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    min-height: 14rem;
    height: calc(100dvh - 6rem);
    padding-top: 0.1rem;
    overflow: visible;
  }

  .layout:has(> .cooperative-turns:not([hidden])) > .table { grid-column: 1 / -1; grid-row: 3; }

  .piles {
    grid-column: 1;
    align-self: start;
    justify-self: start;
    padding-left: clamp(0.45rem, 1.5vw, 0.8rem);
  }

  .pile {
    width: clamp(3.5rem, 15vh, 4.4rem);
  }

  .stage {
    grid-column: 3;
    align-self: start;
  }

  /* The die owns the clear lane between piles and active card. It may animate without
     covering card text, pile counts, or the player's decision buttons. */
  .stage-roll {
    right: calc(100% + clamp(0.45rem, 1.5vw, 0.8rem));
    bottom: auto;
    top: 50%;
    width: clamp(4rem, 11vw, 5.75rem);
    min-width: 0;
    transform: translateY(-50%) scale(0.78);
    transform-origin: center;
  }

  .controls {
    grid-column: 4;
    align-self: start;
  }

  .roll-success {
    top: 55%;
    left: clamp(5.5rem, 16vw, 9rem);
    grid-template-columns: 1fr;
    width: clamp(4.8rem, 12vw, 6rem);
    padding: 0.4rem 0.3rem;
    border-radius: 0.55rem;
    column-gap: 0;
    text-align: center;
    translate: -50% -50%;
  }

  .roll-success__label {
    grid-row: auto;
    font-size: 0.7rem;
  }

  .roll-success__result {
    font-size: 1.35rem;
  }

  .roll-success__target {
    font-size: 0.55rem;
  }

  /* These sections were hidden in the first single-screen version. They now form the
     scrollable reference deck below live play, in the order players use them. */
  .panel--board,
  .panel--discards,
  .panel--log {
    grid-column: 1 / -1;
    display: block !important;
    width: 100%;
  }

  .panel--board {
    grid-row: 3;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--board { grid-row: 4; }

  .panel--discards {
    grid-row: 4;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--discards { grid-row: 5; }

  .panel--log {
    grid-row: 5;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--log { grid-row: 6; }

  /* Reorder and heart-upgrade choices are decisions, not reference reading. Lift the
     board into the same focused overlay portrait phones use instead of scrolling the
     player away from the active card to find the selectable tracks. */
  .panel--board.panel--choice-open {
    position: fixed;
    z-index: 60;
    inset: 0;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: max(0.45rem, env(safe-area-inset-top, 0px)) 3rem
      max(0.45rem, env(safe-area-inset-bottom, 0px));
    background: #092430;
  }

  .has-art .panel--board.panel--choice-open .panel-title {
    width: min(100%, 42rem);
    margin: 0 auto 0.25rem;
    padding-block: 0.35rem;
    text-align: center;
  }

  .panel--choice-open .hint {
    width: min(100%, 40rem);
    min-height: 0;
    margin: 0 auto 0.35rem;
    color: var(--bone);
    font: 700 clamp(0.82rem, 2.4vw, 1.05rem)/1.2 var(--font-display);
    text-align: center;
  }

  .panel--choice-open .board {
    width: min(100%, 42rem);
    margin-inline: auto;
    gap: 0.35rem;
  }

  .panel--choice-open .track {
    gap: 0.18rem;
    padding-block: 0.22rem;
  }

  .panel--choice-open .rung {
    min-height: clamp(1.45rem, 7vh, 2rem);
  }

  .panel--choice-open .upgrade-choice-close {
    position: absolute;
    top: max(0.4rem, env(safe-area-inset-top, 0px));
    right: max(0.45rem, env(safe-area-inset-right, 0px));
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    padding: 0 0 0.12rem;
    border: 1px solid var(--brass-dim);
    border-radius: 50%;
    background: rgba(7, 26, 36, 0.94);
    color: var(--bone);
    font: 1.6rem/1 var(--font-display);
  }

  .panel--choice-open .btn.upgrade-choice-back {
    display: block;
    justify-self: center;
    margin-top: 0.35rem;
  }

  .panel--haul .cardstrip {
    display: none !important;
  }

  .seats,
  .emotes {
    display: flex !important;
  }

  /* A multiplayer crew adds useful turn context, but that context must not cost the thumb-sized
     live table. Put the compact ordered crew above play, then return Health and Treasure
     to dedicated side rails around the same piles/card/actions row. */
  .layout:has(> .cooperative-turns:not([hidden])) {
    grid-template-columns: 4.15rem minmax(0, 1fr) 4.35rem;
    grid-template-rows: 2.35rem minmax(0, calc(100dvh - 5.65rem - env(safe-area-inset-bottom, 0px))) auto auto auto;
    gap: 0.25rem 0.35rem;
  }

  .layout:has(> .cooperative-turns:not([hidden])) > .cooperative-turns {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(var(--crew-count, 4), minmax(0, 3.2rem));
    gap: clamp(0.35rem, 1.4vw, 0.6rem);
    justify-self: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    height: 2.35rem;
    min-height: 0;
    padding: 0 0.15rem;
    overflow: hidden;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .cooperative-turn {
    padding: 0.08rem;
    gap: 0;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .cooperative-turn small,
  .layout:has(> .cooperative-turns:not([hidden])) .cooperative-turn strong {
    display: none;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .cooperative-turn.is-current {
    transform: none;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .cooperative-turn-portrait {
    width: clamp(1.95rem, 7.25dvh, 2.2rem);
    height: clamp(1.95rem, 7.25dvh, 2.2rem);
  }

  .layout:has(> .cooperative-turns:not([hidden])) > .table {
    --card-w: clamp(7.25rem, 36dvh, 9.25rem);
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: minmax(4.5rem, 0.58fr) minmax(3.5rem, 0.42fr) var(--card-w) minmax(10rem, 1.45fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .pile {
    width: clamp(3rem, 15dvh, 3.85rem);
  }

  .layout:has(> .cooperative-turns:not([hidden])) :is(.piles, .stage, .controls) {
    align-self: start;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--health,
  .layout:has(> .cooperative-turns:not([hidden])) .panel--haul {
    grid-row: 1 / 3;
    display: block;
    align-self: start;
    width: 100%;
    box-sizing: border-box;
    /* Size the painted frame to its compact contents instead of carrying an empty tail
       down to the viewport edge. The bar itself keeps the fitted length established below. */
    height: calc(100dvh - 6.85rem - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 6.85rem - env(safe-area-inset-bottom, 0px));
    min-height: 0;
    padding: 0.35rem 0.25rem;
    overflow: hidden;
    text-align: center;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--health { grid-column: 1; }
  .layout:has(> .cooperative-turns:not([hidden])) .panel--haul { grid-column: 3; }

  .layout:has(> .cooperative-turns:not([hidden])) :is(.panel--health, .panel--haul) .panel-title {
    justify-content: center;
    margin: 0 0 0.25rem;
    font-size: 0.46rem;
    line-height: 1;
    white-space: nowrap;
  }

  .layout:has(> .cooperative-turns:not([hidden])) :is(.panel--health, .panel--haul) .title-icon {
    display: none;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--health .meter {
    flex-direction: column-reverse;
    width: 0.7rem;
    /* The 21 ticks share this shorter landscape-only track, making every interval
       compact enough to keep the track's painted foot above a phone's bottom edge. */
    height: calc(100% - 3rem);
    min-height: 0;
    max-height: none;
    margin: 0.2rem auto 0;
    padding: 0.18rem 0.1rem;
    gap: 0;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--health .health-token {
    width: 0.55rem;
    height: 0.55rem;
    min-height: 0;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--health .meter-read {
    justify-content: center;
    margin: 0.22rem 0 0;
    font-size: 0.72rem;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--haul .haul-read {
    justify-content: center;
    gap: 0.1rem;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--haul .haul-total { font-size: 0.85rem; }
  .layout:has(> .cooperative-turns:not([hidden])) .panel--haul .haul-goal { font-size: 0.4rem; }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--haul .haul-bar {
    width: 0.7rem;
    /* Match the compact Health geometry without changing any other viewport. */
    height: calc(100% - 2.9rem);
    min-height: 0;
    margin: 0.25rem auto 0;
  }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--haul .haul-bar span {
    position: absolute;
    inset: auto 0 0;
    width: 100% !important;
    height: var(--haul-progress, 0%) !important;
    background: linear-gradient(0deg, var(--brass-dim), var(--brass));
  }

  .layout:has(> .cooperative-turns:not([hidden])) .panel--board { grid-row: 3; }
  .layout:has(> .cooperative-turns:not([hidden])) .panel--discards { grid-row: 4; }
  .layout:has(> .cooperative-turns:not([hidden])) .panel--log { grid-row: 5; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .roll-success.show {
    animation: none;
    opacity: 1;
  }

  .emote-toast.show {
    animation: none;
    opacity: 1;
  }
}

/* -- Ranked access and Ranked mode ------------------------------------ */

.ranked-account-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: stretch;
  gap: 0.35rem;
}

.ranked-account-log {
  min-height: 44px;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(224, 181, 75, 0.45);
  border-radius: 999px;
  background: rgba(7, 26, 36, 0.68);
  color: #f4dfaa;
  font: 700 0.68rem/1.2 var(--font-data);
  cursor: pointer;
}

.ranked-account-log:hover,
.ranked-account-log:focus-visible {
  border-color: #efc45d;
  color: #fff2c9;
}

.ranked-hub {
  position: relative;
  width: min(100%, 52rem);
  margin: 0.85rem auto 1.2rem;
  color: #f8edcf;
  text-align: left;
  isolation: isolate;
}

.ranked-hub::before {
  content: "";
  position: absolute;
  inset: -0.75rem;
  z-index: -1;
  border: 0;
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 18% 10%, rgba(39, 148, 125, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(3, 21, 35, 0.97), rgba(9, 38, 52, 0.95) 54%, rgba(28, 18, 19, 0.97));
  box-shadow: 0 1.7rem 4rem rgba(0, 0, 0, 0.55), inset 0 0 3rem rgba(7, 5, 8, 0.72);
}

.ranked-hub-heading,
.ranked-hub-footer,
.ranked-featured,
.ranked-filter-row,
.ranked-result-ranks,
.captains-log-crew > header {
  display: flex;
  align-items: center;
}

.ranked-hub-heading {
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.6rem 0.8rem;
}

.ranked-hub-heading > div:first-child { min-width: 0; }

.ranked-hub-heading h2,
.ranked-dialog h2 {
  margin: 0.12rem 0 0;
  color: #fff4d2;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  letter-spacing: 0.02em;
}

.ranked-hub-heading h2,
#rankedSeasonLabel { white-space: nowrap; }

#rankedSeasonLabel { margin-top: 0.3rem; }

.ranked-kicker {
  margin: 0;
  color: #e8bd58;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ranked-account-chip,
.ranked-log-button,
.ranked-tabs button,
.ranked-auth-tabs button,
.ranked-size-tabs button,
.ranked-view-tabs button,
.ranked-rules-tabs button,
.ranked-ladder-rules button {
  min-height: 44px;
  border: 1px solid rgba(232, 190, 91, 0.42);
  border-radius: 999px;
  background: rgba(7, 26, 37, 0.88);
  color: #f8edcf;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.ranked-account-chip {
  flex: none;
  padding: 0.6rem 1rem;
}

.ranked-account-chip.has-social-request::after {
  content: attr(data-social-requests);
  display: inline-grid;
  min-width: 1.3rem;
  min-height: 1.3rem;
  margin-left: 0.4rem;
  place-items: center;
  border-radius: 999px;
  background: #d26b4b;
  color: #fff;
  font: 800 0.64rem/1 var(--font-data);
}

.ranked-account-actions .ranked-account-button {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
}

.ranked-featured {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.2rem, 4vw, 2.4rem);
  border: 0;
  border-radius: 0;
  background-image:
    linear-gradient(90deg, rgba(4, 17, 28, 0.92), rgba(4, 24, 34, 0.66) 58%, rgba(4, 13, 23, 0.92)),
    image-set(
      url('/art/ranked-banner-crew.avif') type('image/avif'),
      url('/art/ranked-banner-crew.webp') type('image/webp')
    );
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 -6rem 7rem rgba(0, 0, 0, 0.38);
}

.ranked-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.22;
  background-image: repeating-linear-gradient(116deg, transparent 0 17px, rgba(233, 196, 111, 0.14) 18px 19px);
}

.ranked-featured::before {
  content: none;
}

.ranked-featured > * { position: relative; z-index: 1; }
.ranked-featured[data-tier="bronze"] { --ranked-frame: url('/art/ranked-frame-bronze.webp'); }
.ranked-featured[data-tier="silver"] { --ranked-frame: url('/art/ranked-frame-silver.webp'); }
.ranked-featured[data-tier="gold"] { --ranked-frame: url('/art/ranked-frame-gold.webp'); }
.ranked-featured[data-tier="platinum"] { --ranked-frame: url('/art/ranked-frame-platinum.webp'); }
.ranked-featured[data-tier="emerald"] { --ranked-frame: url('/art/ranked-frame-emerald.webp'); }
.ranked-featured[data-tier="diamond"] { --ranked-frame: url('/art/ranked-frame-diamond.webp'); }
.ranked-featured[data-tier="plunder"] { --ranked-frame: url('/art/ranked-frame-plunder.webp'); }

.ranked-featured-crest {
  flex: 0 0 clamp(8rem, 22vw, 13rem);
}

.ranked-featured-copy {
  flex: 1 1 17rem;
  min-width: 0;
}

.ranked-voyage-path { display: grid; justify-items: start; }
.ranked-voyage-path + .ranked-voyage-path { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid rgba(239, 196, 93, 0.32); }
.ranked-path-button { margin-top: 0.35rem; }
.versus-crew-size { width: min(100%, 20rem); margin: 0.8rem 0 0.35rem; text-align: center; }
.versus-crew-size .ranked-size-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  width: 100%;
  gap: 0.65rem;
}

.versus-opponent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.65rem;
  padding: 0.7rem;
  border: 1px solid rgba(239, 196, 93, 0.48);
  border-radius: 0.8rem;
  background: linear-gradient(100deg, rgba(18, 75, 86, 0.92), rgba(4, 18, 27, 0.96) 47%, rgba(95, 29, 27, 0.9));
  box-shadow: inset 0 0 1.2rem rgba(0, 0, 0, 0.42), 0 0.4rem 1rem rgba(0, 0, 0, 0.25);
  color: var(--ink-2);
  font-family: var(--font-data);
  font-size: 0.72rem;
}
.versus-opponent[hidden] { display: none; }
.versus-fighter { display: grid; align-content: center; min-width: 0; padding: 0.35rem 0.5rem; }
.versus-fighter--rival { text-align: right; }
.versus-fighter small, .versus-lobby-matchup small { color: rgba(248, 237, 207, 0.62); text-transform: uppercase; letter-spacing: 0.12em; }
.versus-fighter strong { overflow: hidden; color: white; font: 700 clamp(1rem, 3vw, 1.5rem)/1 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.versus-clash { display: grid; place-items: center; }
.versus-clash span, .versus-lobby-matchup > span { display: grid; place-items: center; width: 2.8rem; aspect-ratio: 1; border: 2px solid var(--brass); border-radius: 50%; background: #071a24; color: var(--brass); font: 900 1rem var(--display); box-shadow: 0 0 0.8rem rgba(239, 196, 93, 0.4); transform: rotate(-6deg); }
.versus-rival-vitals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.15rem 0.7rem; margin-top: 0.35rem; color: rgba(248, 237, 207, 0.74); }
.versus-rival-vitals b { color: #ffd979; }
.versus-lobby-matchup { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.8rem; width: min(100%, 34rem); margin: 0.65rem auto 0; padding: 1rem; border: 1px solid rgba(239, 196, 93, 0.5); border-radius: 0.9rem; background: linear-gradient(105deg, rgba(18, 75, 86, 0.85), rgba(7, 26, 36, 0.94) 50%, rgba(95, 29, 27, 0.82)); box-shadow: inset 0 0 1.5rem rgba(0, 0, 0, 0.38); }
.versus-lobby-matchup[hidden] { display: none; }
.ranked-versus-captain-choice { display: grid; grid-template-columns: 4.75rem 1fr; grid-template-rows: auto auto auto; align-items: center; width: min(100%, 22rem); margin: 0 auto 0.25rem; padding: 0.55rem 0.8rem; border: 2px solid rgba(239, 196, 93, 0.82); border-radius: 0.9rem; background: linear-gradient(180deg, rgba(19, 67, 78, 0.98), rgba(3, 19, 28, 0.98)); color: #f8edcf; box-shadow: 0 0 1rem rgba(239, 196, 93, 0.2); text-align: left; cursor: pointer; }
.ranked-versus-captain-choice[hidden] { display: none; }
.ranked-versus-captain-choice:hover, .ranked-versus-captain-choice:focus-visible { border-color: #ffe49b; box-shadow: 0 0 1.2rem rgba(239, 196, 93, 0.5); }
.ranked-versus-captain-portrait { grid-row: 1 / 4; width: 4rem; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: top center; }
.ranked-versus-captain-choice span, .ranked-versus-captain-choice small { color: #d8c99e; font: 700 0.65rem var(--font-data); letter-spacing: 0.1em; text-transform: uppercase; }
.ranked-versus-captain-choice strong { color: #ffd979; font: 700 1.25rem/1 var(--display); }
.versus-lobby-matchup div { display: grid; min-width: 0; }
.versus-lobby-matchup div:last-child { text-align: right; }
.versus-lobby-matchup strong { overflow: hidden; color: white; font: 700 clamp(1.1rem, 4vw, 1.7rem)/1 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.versus-ready-crew { display: grid; gap: 0.7rem; }
.versus-ready-size { grid-column: 1 / -1; justify-self: center; width: min(100%, 14rem); margin-bottom: 0.15rem; }
.versus-ready-instruction { grid-column: 1 / -1; margin: 0 0 0.2rem; color: #d8c99e; font: inherit; font-size: 0.72rem; font-weight: 400; line-height: 1.35; letter-spacing: 0; text-align: center; }
.versus-ready-player { display: flex !important; align-items: center; justify-content: space-between; gap: 0.7rem; min-height: 2rem; }
.versus-ready-player strong { min-width: 0; }
.versus-ready-captain { flex: 0 0 auto; padding: 0; border: 1px solid rgba(239, 196, 93, 0.38); border-radius: 0.5rem; background: transparent; cursor: pointer; }
.versus-ready-captain:disabled { border-color: transparent; cursor: default; }
.versus-ready-captain .versus-ready-portrait { display: block; }
.versus-seat-toggle { padding: 0.28rem 0.5rem; border: 1px solid rgba(158, 217, 212, 0.38); border-radius: 999px; background: rgba(4, 25, 33, 0.72); color: #b9d9d5; font: 700 0.58rem/1.1 var(--font-data); white-space: nowrap; }
.versus-ready-check { display: grid; flex: 0 0 2rem; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid rgba(248, 237, 207, 0.28); border-radius: 50%; background: rgba(2, 13, 20, 0.55); color: rgba(248, 237, 207, 0.25); font: 900 1rem var(--font-data); }
.versus-ready-check.is-ready { border-color: #76e3b9; background: rgba(34, 113, 87, 0.7); color: #c9ffe9; box-shadow: 0 0 0.65rem rgba(92, 224, 174, 0.45); }
.versus-ready-check:disabled { cursor: default; opacity: 0.75; }
.versus-awaiting { color: rgba(248, 237, 207, 0.55) !important; font-size: 1rem !important; }
@media (max-width: 520px) {
  .versus-opponent { gap: 0.25rem; padding-inline: 0.4rem; }
  .versus-rival-vitals { gap: 0.12rem 0.4rem; font-size: 0.62rem; }
}
@media (max-width: 520px) and (orientation: portrait) {
  .versus-lobby-matchup { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .versus-ready-instruction { grid-column: 1; font-size: 0.64rem; }
  .versus-lobby-matchup > span { justify-self: center; }
  .versus-lobby-matchup > div, .versus-lobby-matchup > div:last-child { text-align: center; }
  .versus-ready-crew { gap: 0.85rem; }
  .versus-ready-size { grid-column: 1; }
  .versus-ready-player { display: grid !important; grid-template-columns: 2.4rem minmax(0, 1fr) 2rem; gap: 0.35rem 0.55rem; min-height: 2.25rem; }
  .versus-ready-player .versus-ready-captain { grid-column: 1; grid-row: 1 / 3; }
  .versus-ready-player strong { grid-column: 2; display: block; width: 100%; overflow: hidden; font-size: clamp(0.72rem, 3.8vw, 1rem); line-height: 1.1; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .versus-ready-player .versus-ready-check { grid-column: 3; }
  .versus-ready-player .versus-seat-toggle { grid-column: 2; justify-self: center; }
}

.ranked-featured-copy h3 {
  margin: 0.25rem 0;
  color: white;
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 3.15rem);
  line-height: 0.98;
}

.ranked-featured-copy > p:not(.ranked-kicker),
.ranked-voyage-path > p:not(.ranked-kicker) {
  max-width: 31rem;
  margin: 0.65rem 0;
  color: rgba(248, 237, 207, 0.79);
  font-size: 0.91rem;
  line-height: 1.55;
}

.ranked-auth-tabs button:disabled { cursor: not-allowed; opacity: 0.42; }

.ranked-featured-rank {
  margin: 1.2rem 0 0.45rem;
  color: #ffd978;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
}

.ranked-featured-scope,
.ranked-featured-next {
  color: rgba(248, 237, 207, 0.72);
  font-size: 0.68rem;
  line-height: 1.35;
}
.ranked-featured-scope { margin-bottom: 0.4rem; }
.ranked-featured-next { margin-top: 0.38rem; color: #f0ca70; }

.ranked-progress {
  position: relative;
  width: 100%;
  height: 0.42rem;
  overflow: hidden;
  border: 1px solid rgba(238, 203, 125, 0.35);
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.5);
}

.ranked-progress > span {
  display: block;
  width: var(--rank-progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, #238a78, #efc45d, #fff0aa);
  box-shadow: 0 0 0.8rem rgba(255, 223, 132, 0.65);
  transition: width 500ms ease;
}

.ranked-hub-footer {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 0.75rem 0.6rem 0.25rem;
}

.ranked-log-button {
  display: grid;
  padding: 0.45rem 1.1rem;
  text-align: left;
}

.ranked-log-button small {
  color: rgba(248, 237, 207, 0.65);
  font-size: 0.62rem;
  font-weight: 500;
}

.ranked-view-ladders {
  position: relative;
  display: block;
  width: min(100%, 28rem);
  min-height: 50px;
  margin: 1rem auto 0;
  padding: 0.72rem 1.2rem;
  border: 2px solid #9ed9d4;
  border-radius: 0.7rem;
  outline: 1px dashed rgba(207, 236, 226, 0.58);
  outline-offset: -6px;
  background: linear-gradient(180deg, #176879 0%, #0b4b5b 56%, #073341 100%);
  color: #f7efd5;
  font-size: 0.98rem;
  letter-spacing: 0.035em;
  text-shadow: 0 1px 1px #00171e;
  box-shadow: 0 0 0 2px #062832, 0 0.65rem 1.35rem rgba(0, 0, 0, 0.42), 0 0 1rem rgba(66, 188, 187, 0.24);
}

.ranked-view-ladders::before { content: "☠"; margin-right: 0.65rem; }
.ranked-view-ladders::after { content: "☠"; margin-left: 0.65rem; }

.ranked-view-ladders:hover:not(:disabled),
.ranked-view-ladders:focus-visible {
  border-color: #d4f4ed;
  background: linear-gradient(180deg, #21869a 0%, #106276 56%, #084353 100%);
  color: #fff8df;
  box-shadow: 0 0 0 2px #083540, 0 0.7rem 1.45rem rgba(0, 0, 0, 0.46), 0 0 1.25rem rgba(92, 218, 211, 0.4);
}
.ranked-season-note {
  flex: 1 0 100%;
  margin: 0;
  color: rgba(248, 237, 207, 0.58);
  font-size: 0.65rem;
  text-align: center;
}

.ranked-crest {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 5rem;
  aspect-ratio: 1;
  border: 2px solid #b68435;
  border-radius: 50% 50% 44% 44%;
  background: radial-gradient(circle at 50% 35%, #3d715f, #102f34 55%, #09151d 56%);
  box-shadow: inset 0 0 0 0.28rem rgba(4, 12, 18, 0.7), 0 0.45rem 1rem rgba(0, 0, 0, 0.42);
  color: #ffe099;
  font-family: var(--display);
  font-size: 1.5rem;
}

.ranked-crest--small { width: 3.1rem; font-size: 1rem; }
.ranked-crest--hero { width: min(100%, 13rem); font-size: 3rem; }
.ranked-crest-art { position: absolute; width: 118%; height: 118%; object-fit: contain; z-index: 1; }
.ranked-crest-picture { display: contents; }
.ranked-crest-fallback { filter: drop-shadow(0 2px 2px #000); }
.ranked-tier--bronze { border-color: #b66e42; background: radial-gradient(circle, #834f34, #291d1a); }
.ranked-tier--silver { border-color: #d5dde0; background: radial-gradient(circle, #607a83, #17272e); }
.ranked-tier--gold { border-color: #ffd86c; background: radial-gradient(circle, #967124, #302408); }
.ranked-tier--platinum { border-color: #b9f6ea; background: radial-gradient(circle, #4c8d92, #173239); }
.ranked-tier--emerald { border-color: #73e9a0; background: radial-gradient(circle, #197650, #0a2a21); }
.ranked-tier--diamond { border-color: #c5f8ff; background: radial-gradient(circle, #5683ae, #16253d); }
.ranked-tier--plunder { border-color: #ee6067; background: radial-gradient(circle, #742c3a, #150a12); box-shadow: inset 0 0 0 0.28rem #100710, 0 0 1.5rem rgba(236, 64, 82, 0.5); }

.ranked-dialog {
  width: min(94vw, 52rem);
  max-height: min(88vh, 52rem);
  overflow: auto;
  padding: clamp(1.2rem, 4vw, 2.2rem);
  border: 1px solid #c99b49;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 15% 0, rgba(34, 132, 112, 0.24), transparent 33%),
    linear-gradient(145deg, #092432, #061721 62%, #1a1114);
  box-shadow: 0 2rem 7rem #000, inset 0 0 3rem rgba(0, 0, 0, 0.65);
  color: #f8edcf;
}

.ranked-dialog::backdrop { background: rgba(1, 7, 11, 0.84); backdrop-filter: blur(5px); }
.ranked-dialog .tutorial-close { color: #f8edcf; }
.ranked-dialog label { display: grid; gap: 0.32rem; color: #dcc99a; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.ranked-dialog input,
.ranked-dialog select {
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid rgba(232, 190, 91, 0.45);
  border-radius: 0.45rem;
  background: rgba(1, 11, 17, 0.78);
  color: #fff4d2;
  font: inherit;
  font-size: 0.9rem;
  text-transform: none;
}

.ranked-lobby-name { margin: 0.25rem 0 0; color: #f2ca68; font-family: var(--display); font-size: 1.05rem; text-align: center; }

.ranked-identity-status {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  width: min(100%, 20rem);
  padding: 0.75rem 1rem;
  border: 1px solid rgba(224, 181, 75, 0.34);
  border-radius: 0.65rem;
  background: rgba(3, 15, 22, 0.58);
  text-align: center;
}

.ranked-identity-status[hidden] { display: none; }

.ranked-identity-status strong {
  color: #f4ecd9;
  font-family: var(--display);
  font-size: 1.05rem;
}
.ranked-identity-status--ranked-lobby { width: min(100%, 26rem); padding: 0.25rem 0; border: 0; background: transparent; }
.ranked-identity-status--ranked-lobby .ranked-rules-choice { margin-top: 0; padding-top: 0; border-top: 0; }
.ranked-identity-status--ranked-lobby .ranked-rules-choice > span { font-size: 1rem; letter-spacing: 0.14em; }
.ranked-crew-lobby-actions {
  display: grid;
  width: min(100%, 34rem);
  margin: 0.8rem auto;
}
.ranked-crew-lobby-actions[hidden] { display: none; }
.ranked-crew-name-lobby { justify-self: center; margin-top: 0.25rem; }

@media (max-width: 520px) and (orientation: portrait) {
  .versus-ready-crew { gap: 1.1rem; }
  .versus-ready-player { min-height: 2.75rem; }
}

.ranked-auth-tabs,
.ranked-tabs,
.ranked-size-tabs,
.ranked-view-tabs,
.ranked-rules-tabs,
.ranked-ladder-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0;
}

.ranked-auth-tabs button,
.ranked-tabs button,
.ranked-size-tabs button,
.ranked-view-tabs button,
.ranked-rules-tabs button,
.ranked-ladder-rules button { padding: 0.45rem 1rem; }

.ranked-auth-tabs button[aria-selected="true"],
.ranked-tabs button[aria-selected="true"],
.ranked-size-tabs button[aria-pressed="true"],
.ranked-view-tabs button[aria-selected="true"],
.ranked-rules-tabs button[aria-pressed="true"],
.ranked-ladder-rules button[aria-pressed="true"] {
  border-color: #f2ca68;
  background: #b07b2d;
  color: #07151e;
  box-shadow: 0 0 1rem rgba(238, 193, 85, 0.3);
}

.ranked-auth-form { display: grid; gap: 0.9rem; margin-top: 1rem; }
.ranked-auth-form label,
.ranked-display-name-form label { min-width: 0; }
.ranked-auth-form input,
.ranked-display-name-form input {
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  font-size: 1rem;
}
.ranked-password-field { position: relative; display: block; }
.ranked-password-field input { width: 100%; padding-right: 3rem; }
.ranked-password-field button {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #f8edcf;
  font-size: 1rem;
  cursor: pointer;
}
.ranked-password-field button:focus-visible { outline: 2px solid #f2ca68; outline-offset: 1px; }
.password-visibility-icon {
  display: block;
  width: 2.15rem;
  height: 2.15rem;
  margin: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.password-visibility-icon.is-glass-eye {
  background-image: url('/art/password-pirate-glass-eye.webp');
}
.password-visibility-icon.is-eyepatch {
  background-image: url('/art/password-pirate-eyepatch.webp');
}
.ranked-account-prompt {
  margin: 0.75rem 0 0;
  padding: 0.75rem;
  border: 1px solid rgba(232, 190, 91, 0.34);
  border-radius: 0.65rem;
  background: rgba(176, 123, 45, 0.13);
  color: #f8edcf;
  line-height: 1.45;
}
.ranked-join-identity {
  display: grid;
  width: min(100%, 20rem);
  gap: 0.25rem;
  padding: 0.75rem;
  border: 1px solid rgba(232, 190, 91, 0.3);
  border-radius: 0.65rem;
  background: rgba(7, 26, 37, 0.78);
  text-align: center;
}
.ranked-join-identity strong { color: #fff1c4; font-family: var(--display); font-size: 1.15rem; }
.ranked-join-identity small { color: #d8c99e; }
.ranked-dialog .ranked-field-note {
  color: #ad9f7f;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}
.ranked-auth-form .btn { justify-self: start; }
.ranked-auth-form .ranked-use-player-name { margin-top: -0.25rem; }
.ranked-account-signed-in { display: grid; justify-items: center; gap: 0.55rem; padding: 1.5rem; }
.ranked-account-signed-in strong { font-family: var(--display); font-size: 1.8rem; }

.message-bottle-toast {
  position: fixed;
  z-index: 120;
  top: max(1rem, env(safe-area-inset-top));
  left: 50%;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.45rem;
  width: min(92vw, 26rem);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--brass);
  border-radius: 0.65rem;
  background: #071a24;
  color: var(--bone);
  box-shadow: 0 0.8rem 2rem rgba(0,0,0,.45);
  transform: translate(-50%, -140%);
  opacity: 0;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s;
}
.message-bottle-toast[hidden] { display: none; }
.message-bottle-toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.message-bottle-toast > span:first-child { font-size: 1.35rem; }
.ranked-rally-mode { display: grid; gap: .3rem; margin: .7rem 0; color: var(--ink-2); }
.ranked-rally-mode select { min-height: 2.5rem; }
.ranked-invitation-card { position: relative; display: grid; gap: .45rem; padding: .7rem; border: 1px solid rgba(224,181,75,.28); border-radius: .55rem; background: rgba(7,26,36,.5); }
.ranked-invitation-card > small { color: var(--ink-2); }
.ranked-invitation-delete {
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: 2rem;
  min-height: 2rem;
  padding: 0;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
}
.ranked-invitation-card:has(.ranked-invitation-delete) > strong { padding-right: 2.25rem; }
.ranked-invitation-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.ranked-rally-roster { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.ranked-rally-roster li { display: flex; justify-content: space-between; gap: .6rem; }
.ranked-rally-roster span, .ranked-invitation-status { color: var(--brass); }
.ranked-previous-crew { grid-template-columns: repeat(2, max-content) minmax(0, 1fr); align-items: center; }
.ranked-previous-crew > strong, .ranked-previous-crew > small { grid-column: 1 / -1; }
.ranked-previous-crew .btn { justify-self: start; }
.ranked-account-seal { font-size: 3rem; color: #e6b853; }
.ranked-display-name-form {
  display: grid;
  gap: 0.65rem;
  width: min(100%, 20rem);
  margin: 0.6rem 0;
}
.ranked-display-name-form .btn { justify-self: center; }

.ranked-profile-save-status {
  margin: 0;
  color: #9ce4c6;
  font-size: 0.82rem;
  text-align: center;
}

.ranked-social-menu { width: min(94vw, 46rem); }
.message-voyage-menu { width: min(92vw, 28rem); }
.crew-message-menu { width: min(92vw, 30rem); }
.crew-message-form { display: grid; gap: .7rem; }
.crew-message-form label { color: var(--ink-2); font-family: var(--font-label); }
.crew-message-form textarea {
  width: 100%;
  min-height: 7rem;
  padding: .7rem;
  resize: vertical;
  border: 1px solid rgba(232, 190, 91, .45);
  border-radius: .5rem;
  background: rgba(1, 11, 17, .78);
  color: #fff4d2;
  font: inherit;
}
.crew-message-form .btn { width: 100%; }
.crew-message-identity {
  display: grid;
  gap: .25rem;
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(224, 181, 75, .28);
  text-align: center;
}
.crew-message-identity strong { color: var(--bone); font-family: var(--display); }
.crew-message-identity span { color: var(--ink-2); font-size: .8rem; }
.message-voyage-menu .ranked-social-intro { margin-bottom: 1rem; }
.message-voyage-actions { display: flex; justify-content: center; gap: 0.65rem; margin-top: 1.1rem; }
.ranked-social-intro { max-width: 38rem; margin: 0.35rem auto 0; color: #c9bea4; line-height: 1.45; text-align: center; }
.ranked-social-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ranked-social-tabs [data-social-tab="INBOX"] { grid-column: 1 / -1; }
.ranked-social-tabs button { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 0.35rem; }
.ranked-social-tabs button small {
  min-width: 1.35rem;
  padding: 0.14rem 0.32rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  font: 800 0.6rem/1 var(--font-data);
}
.ranked-social-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.65rem;
  margin: 0.75rem 0 0;
}
.ranked-social-add .btn { min-height: 44px; }
.ranked-social-note { display: block; margin: 0.45rem 0 0.8rem; text-align: center; }
.ranked-social-content { display: grid; gap: 1rem; min-height: 8rem; }
.ranked-social-section { display: grid; gap: 0.5rem; }
.ranked-social-section h3 {
  margin: 0;
  color: #e9c467;
  font: 700 0.76rem/1.2 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ranked-social-list { display: grid; gap: 0.45rem; }
.ranked-social-person {
  display: grid;
  grid-template-columns: 2.55rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(126, 208, 199, 0.24);
  border-radius: 0.7rem;
  background: linear-gradient(105deg, rgba(11, 57, 67, 0.72), rgba(4, 22, 31, 0.78));
}
.ranked-social-avatar {
  display: grid;
  width: 2.55rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(229, 189, 93, 0.58);
  border-radius: 50%;
  background: #103f4d;
  color: #f4cf77;
  font: 800 1.05rem/1 var(--display);
}
.ranked-social-identity { display: grid; min-width: 0; gap: 0.12rem; }
.ranked-social-identity strong { overflow: hidden; color: #fff1c4; font-family: var(--display); text-overflow: ellipsis; white-space: nowrap; }
.ranked-social-identity small { color: #9cc4c0; font-size: 0.68rem; line-height: 1.25; }
.ranked-social-person-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; }
.ranked-social-action { min-height: 36px; padding: 0.35rem 0.65rem; font-size: 0.7rem; }
.ranked-social-empty {
  margin: 0;
  padding: 1rem;
  border: 1px dashed rgba(126, 208, 199, 0.24);
  border-radius: 0.7rem;
  color: #9fafa9;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 36rem) {
  .table-filter-tabs { gap: 0.25rem; }
  .table-filter-tabs button { padding-inline: 0.25rem; font-size: 0.58rem; }
  .tablerow-social { white-space: normal; }
  .ranked-social-tabs button { padding-inline: 0.35rem; font-size: 0.65rem; }
  .ranked-social-add { grid-template-columns: 1fr; }
  .ranked-social-add .btn { width: 100%; }
  .ranked-social-person { grid-template-columns: 2.35rem minmax(0, 1fr); }
  .ranked-social-avatar { width: 2.35rem; }
  .ranked-social-person-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; }
  .ranked-social-action { width: 100%; min-width: 0; padding-inline: 0.25rem; font-size: 0.6rem; white-space: nowrap; }
  .ranked-previous-crew { grid-template-columns: 1fr; }
  .ranked-previous-crew .btn { width: 100%; }
}

.captains-log-content,
.ranked-ladder-rows { display: grid; gap: 0.7rem; }
.captains-log-crew,
.ranked-rating-card,
.ranked-ladder-row {
  border: 1px solid rgba(232, 190, 91, 0.24);
  border-radius: 0.72rem;
  background: rgba(0, 8, 14, 0.47);
}
.captains-log-crew {
  padding: 0;
  overflow: hidden;
  border-color: rgba(224, 181, 75, 0.48);
  background: linear-gradient(135deg, rgba(20, 67, 76, 0.9), rgba(6, 28, 37, 0.96));
  box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 239, 190, 0.06);
}
.captains-log-crew:nth-of-type(even) {
  border-color: rgba(126, 208, 199, 0.48);
  background: linear-gradient(135deg, rgba(12, 50, 61, 0.96), rgba(3, 19, 28, 0.98));
}
.captains-log-crew[open] { border-color: rgba(245, 207, 111, 0.82); box-shadow: 0 0 1rem rgba(224, 181, 75, 0.18); }
.captains-log-crew > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem;
  cursor: pointer;
  list-style: none;
}
.captains-log-crew > summary::-webkit-details-marker { display: none; }
.captains-log-crew > summary::after { content: 'Tap to manage crew'; color: #82a8a7; font-size: 0.62rem; }
.captains-log-crew[open] > summary::after { content: 'Tap to close'; }
.captains-log-crew-title { display: grid; gap: 0.1rem; min-width: 0; }
.captains-log-crew > summary strong { color: #fff1c4; font-family: var(--display); }
.captains-log-crew > summary small { color: #ad9f7f; font-size: 0.68rem; }
.captains-log-crew-menu {
  display: grid;
  gap: 0.55rem;
  padding: 0 0.9rem 0.9rem;
  border-top: 1px solid rgba(232, 190, 91, 0.38);
  background: rgba(0, 10, 17, 0.28);
}
.captains-log-crew-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.captains-log-crew-badge {
  display: grid;
  grid-template-columns: 2rem auto;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.45rem 0.25rem 0.25rem;
  border: 1px solid rgba(158, 217, 212, 0.22);
  border-radius: 0.55rem;
  background: rgba(5, 30, 38, 0.68);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.captains-log-crew-badge:hover,
.captains-log-crew-badge:focus-visible { border-color: rgba(245, 207, 111, 0.8); background: rgba(12, 51, 61, 0.9); }
.captains-log-crew-badge .ranked-crest { width: 2rem; height: 2rem; }
.captains-log-crew-badge > span { display: grid; gap: 0.05rem; }
.captains-log-crew-badge strong { color: #e9d7a8; font: 700 0.65rem/1.1 var(--font-label); }
.captains-log-crew-badge small { color: #9cc4c0; font-size: 0.61rem; }
.captains-log-crew-menu > .captains-log-crew-badges { margin-top: 0.7rem; }
.captains-log-crew-menu > .btn { justify-self: start; }
.ranked-crew-name-help { margin: 0.2rem 0 0; color: #c8bea8; font-size: 0.7rem; line-height: 1.4; }

.challenge-award-grid { display: grid; gap: 0.75rem; }
.challenge-award-card {
  display: grid; grid-template-columns: 4.25rem 1fr; gap: 0.85rem; align-items: center;
  padding: 0.9rem; border: 1px solid rgba(189, 168, 119, 0.28); border-radius: 0.8rem;
  background: rgba(8, 18, 24, 0.52); opacity: 0.68;
}
.challenge-award-card.is-earned { border-color: #d9b85f; background: linear-gradient(135deg, rgba(112, 73, 16, 0.42), rgba(8, 25, 31, 0.82)); opacity: 1; }
.challenge-award-trophy {
  display: grid; place-items: center; width: 4rem; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid #b99a4c; background: radial-gradient(circle, #fff0a7, #98701f 72%); color: #17232a;
  font-size: 2rem; box-shadow: 0 0 1rem rgba(218, 181, 80, 0.22);
}
.challenge-award-copy { display: grid; gap: 0.22rem; }
.challenge-award-copy > span { color: #f1d780; font-weight: 700; }
.challenge-award-copy > small { color: #c8bea8; line-height: 1.35; }
.challenge-award-best { margin-top: 0.25rem; color: #efe2bd !important; }
.challenge-award-latest { margin-top: 0.25rem; color: #c8bea8 !important; }
.challenge-award-records { display: grid; gap: 0.2rem; margin-top: 0.25rem; }
.challenge-award-records > small { color: #efe2bd; line-height: 1.35; }
.challenge-award-rules { margin-top: 0.35rem; color: #c8bea8; font-size: 0.7rem; }
.challenge-award-rules summary { color: #f1d780; font-weight: 700; cursor: pointer; }
.challenge-award-rules p { margin: 0.35rem 0 0; line-height: 1.45; }
.ranked-crew-name { display: grid; gap: 0.4rem; margin-top: 0.6rem; padding: 0.55rem 0.65rem; border: 1px dashed rgba(232, 190, 91, 0.26); border-radius: 0.55rem; background: rgba(0, 0, 0, 0.24); }
.ranked-crew-name-state { display: grid; gap: 0.15rem; min-width: 0; }
.ranked-crew-name-state strong { overflow-wrap: anywhere; color: #fff1c4; font-family: var(--display); line-height: 1.1; }
.ranked-crew-name-state small { color: #ad9f7f; font-size: 0.68rem; }
.ranked-crew-name-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ranked-crew-name-action { min-height: 44px; padding-inline: 0.75rem; font-size: 0.68rem; }
.ranked-crew-name-voted { color: #82d8cc; font-size: 0.68rem; }
.ranked-crew-name-form { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ranked-crew-name-field { flex: 1 1 11rem; min-width: 0; min-height: 44px; padding: 0 0.6rem; border: 1px solid rgba(232, 190, 91, 0.36); border-radius: 0.45rem; background: rgba(0, 8, 14, 0.7); color: #fff1c4; font-family: inherit; }
.ranked-account-crew-names { display: grid; gap: 0.45rem; width: 100%; margin-top: 0.2rem; padding: 0.55rem 0.65rem; border: 1px dashed rgba(232, 190, 91, 0.26); border-radius: 0.55rem; background: rgba(0, 0, 0, 0.24); text-align: left; }
.ranked-account-crew-names h3 { margin: 0; color: #fff1c4; font-family: var(--display); font-size: 0.82rem; }
.ranked-account-crew-name { display: grid; gap: 0.25rem; min-width: 0; }
.ranked-account-crew-name strong { overflow-wrap: anywhere; color: #fff1c4; font-family: var(--display); line-height: 1.1; }
.ranked-account-crew-name small { color: #ad9f7f; font-size: 0.68rem; }
.ranked-account-crew-name .ranked-crew-name-action { justify-self: start; }
.ranked-crew-name-struck > summary { color: #ad9f7f; cursor: pointer; font-size: 0.68rem; }
.ranked-crew-name-struck-list { display: grid; gap: 0.3rem; margin: 0.35rem 0 0; padding: 0; list-style: none; }
.ranked-crew-name-struck-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem; color: #d8c99e; font-size: 0.7rem; }
.ranked-crew-name-struck-other { color: #ad9f7f; }
.ranked-crew-name-error { margin: 0; color: #f0a3a3; font-size: 0.7rem; }
.ranked-pennants { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; margin-top: 0.7rem; }
.ranked-cosmetic-unlocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; margin-top: 0.7rem; }
.ranked-pennants-heading { grid-column: 1 / -1; display: grid; }
.ranked-pennants-heading > div { color: #f3ca69; font-family: var(--display); font-size: 1.2rem; }
.ranked-pennants-heading > small { color: #ad9f7f; }
.ranked-pennant-card { display: grid; grid-template-columns: 5rem 1fr; align-items: center; gap: 0.7rem; overflow: hidden; padding: 0.65rem; border: 1px solid rgba(232, 190, 91, 0.27); border-radius: 0.72rem; background: linear-gradient(145deg, rgba(24, 17, 15, 0.88), rgba(0, 16, 24, 0.82)); }
.ranked-cosmetic-card { display: grid; grid-template-columns: 3.5rem 1fr; align-items: center; gap: 0.7rem; padding: 0.65rem; border: 1px solid rgba(232, 190, 91, 0.27); border-radius: 0.72rem; background: linear-gradient(145deg, rgba(24, 17, 15, 0.88), rgba(0, 16, 24, 0.82)); }
.ranked-pennant-picture { display: block; width: 5rem; aspect-ratio: 4 / 5; }
.ranked-pennant-art { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0.35rem 0.35rem rgba(0, 0, 0, 0.45)); }
.ranked-pennant-copy { display: grid; gap: 0.2rem; min-width: 0; }
.ranked-pennant-copy strong { color: #fff1c4; font-family: var(--display); line-height: 1.1; }
.ranked-pennant-copy span,
.ranked-pennant-copy small { overflow-wrap: anywhere; color: #ad9f7f; font-size: 0.68rem; }
.ranked-rating-card { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(9rem, auto); align-items: center; gap: 0.8rem; margin-top: 0.65rem; padding: 0.65rem; }
.ranked-rating-detail { display: grid; gap: 0.18rem; text-align: right; }
.ranked-rating-detail span,
.ranked-rating-detail small { color: #ad9f7f; font-size: 0.68rem; }
.ranked-rank-badge { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.65rem; }
.ranked-rank-badge--link { width: 100%; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.ranked-rank-badge--link:hover .ranked-rank-copy strong,
.ranked-rank-badge--link:focus-visible .ranked-rank-copy strong { color: #f5cf6f; text-decoration: underline; }
.ranked-rank-badge > .ranked-progress { grid-column: 1 / -1; }
.ranked-rank-copy { display: grid; min-width: 0; }
.ranked-rank-copy strong { color: #fff1c4; font-family: var(--display); }
.ranked-rank-copy small { color: #ad9f7f; font-size: 0.65rem; }
.ranked-rank-badge--compact { min-width: 11rem; }

.ranked-filter-row { flex-wrap: wrap; gap: 0.65rem; }
.ranked-filter-row label { flex: 1 1 10rem; }
.ranked-rules-choice {
  display: grid;
  width: 100%;
  gap: 0.35rem;
  margin-top: 0.45rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(232, 190, 91, 0.22);
}
.ranked-rules-choice > span {
  color: #e8bd58;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ranked-rules-choice small { color: #d8c99e; line-height: 1.35; }
.ranked-rules-tabs,
.ranked-ladder-rules { margin: 0; }
.ranked-rules-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ranked-rules-tabs button { min-width: 0; padding-inline: 0.35rem; }
.ranked-ladder-rules { flex: 1 1 18rem; }
.ranked-ladder-rules button { flex: 1 1 6rem; }
.ranked-ladder-menu--v3 { width: min(94vw, 48rem); }
.ranked-ladder-landing > p { margin: 0.25rem 0 1rem; color: #d8c99e; text-align: center; }
.ranked-ladder-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.ranked-ladder-choices button {
  display: grid;
  grid-template-rows: 2.8rem auto 2.5rem;
  align-items: center;
  min-width: 0;
  min-height: 9rem;
  padding: 1rem 0.7rem;
  border: 1px solid rgba(232, 190, 91, 0.38);
  border-radius: 0.8rem;
  background: linear-gradient(155deg, rgba(18, 75, 86, 0.68), rgba(0, 12, 20, 0.88));
  color: #f8edcf;
  text-align: center;
}
.ranked-ladder-choices button:hover, .ranked-ladder-choices button:focus-visible { border-color: #f2ca68; background: rgba(37, 91, 99, 0.72); }
.ranked-ladder-choices button > span { color: #f2ca68; font: 900 1.35rem var(--display); }
.ranked-ladder-choices button > strong { font: 700 1.35rem var(--display); }
.ranked-ladder-choices button > small { color: #c8ba96; line-height: 1.3; }
.ranked-solo-ladder-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 34rem); margin-inline: auto; }
.ranked-ladder-detail[hidden], .ranked-ladder-landing[hidden] { display: none; }
.ranked-ladder-menu--v3 .ranked-ladder-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0.8rem; }
.ranked-ladder-menu--v3 .ranked-ladder-rules button,
.ranked-ladder-menu--v3 .ranked-size-tabs button, .ranked-ladder-menu--v3 .ranked-view-tabs button {
  min-width: 0;
  min-height: 2.65rem;
  padding: 0.45rem 0.65rem;
}
.ranked-ladder-back { min-height: 2.5rem; margin: 0 0 0.15rem; }
.ranked-ladder-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.8rem; }
.ranked-ladder-options .ranked-size-tabs, .ranked-ladder-options .ranked-view-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.ranked-ladder-options .ranked-size-tabs[hidden], .ranked-ladder-options .ranked-view-tabs[hidden] { display: none; }
.ranked-ladder-options .ranked-size-tabs[hidden] + .ranked-view-tabs,
.ranked-ladder-options .ranked-size-tabs:not([hidden]):has(+ .ranked-view-tabs[hidden]) { grid-column: 1 / -1; }
.ranked-active-filters { margin: 0.8rem 0 0; color: #f2ca68; font-size: 0.72rem; text-align: center; }
.ranked-ladder-detail.is-captain-records > .ranked-ladder-rules,
.ranked-ladder-detail.is-captain-records > .ranked-ladder-options,
.ranked-ladder-detail.is-captain-records > .ranked-mode-description,
.ranked-ladder-detail.is-captain-records > .ranked-active-filters,
.ranked-ladder-detail.is-captain-records > .ranked-placement-note { display: none; }
.ranked-captain-picker[hidden] { display: none; }
.ranked-captain-picker > h3 { margin: 0.2rem 0; color: #fff1c4; font: 700 clamp(1.45rem, 4vw, 2rem) var(--display); text-align: center; }
.ranked-captain-picker > .ranked-kicker, .ranked-captain-picker > .ranked-mode-description { text-align: center; }
.ranked-captain-picker-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.65rem; margin-top: 1rem; }
.ranked-captain-picker-tile {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.45rem;
  border: 1px solid rgba(224, 181, 75, 0.42);
  border-radius: 0.7rem;
  background: rgba(10, 28, 39, 0.78);
  color: #f8d979;
}
.ranked-captain-picker-tile:hover, .ranked-captain-picker-tile:focus-visible { border-color: #82d8cc; background: rgba(22, 82, 88, 0.82); }
.ranked-captain-picker-portrait { width: min(100%, 5.25rem); aspect-ratio: 1; object-fit: contain; }
.ranked-captain-picker-title,
.ranked-captain-picker-leader {
  display: block;
  max-width: 100%;
  min-height: 2.2em;
  font: 700 0.72rem/1.1 var(--display);
  overflow-wrap: anywhere;
  text-align: center;
}
.ranked-captain-picker-title { color: #f8d979; }
.ranked-captain-picker-leader { color: #82d8cc; }
.ranked-captain-ladder-row { grid-template-columns: 3rem minmax(9rem, 1fr) auto; }
.ranked-mode-description { margin: 0.45rem 0 0; color: #d8c99e; font-size: 0.74rem; line-height: 1.4; }
.ranked-ladder-status { color: #b8aa87; font-size: 0.72rem; }
.ranked-placement-note { margin: 0.65rem 0 0; color: #d8c99e; font-size: 0.76rem; line-height: 1.45; }
.ranked-my-standing {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 52px;
  margin: 0.75rem 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(130, 216, 204, 0.68);
  border-radius: 0.72rem;
  background: linear-gradient(100deg, rgba(19, 89, 96, 0.72), rgba(5, 24, 34, 0.94));
  color: #f8edcf;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 1rem rgba(36, 158, 151, 0.12);
}
.ranked-my-standing[hidden] { display: none; }
.ranked-my-standing:hover, .ranked-my-standing:focus-visible { border-color: #f2ca68; }
.ranked-my-standing > span { color: #82d8cc; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.ranked-my-standing > strong { color: #fff1c4; font-family: var(--display); white-space: nowrap; }
.ranked-my-standing > small { min-width: 0; overflow: hidden; color: #d8c99e; text-overflow: ellipsis; white-space: nowrap; }
.ranked-my-standing > b { color: #f2ca68; font-size: 0.7rem; white-space: nowrap; }
.ranked-rank-context {
  margin: 0 0 0.9rem;
  padding: 0.9rem;
  border: 1px solid rgba(239, 196, 93, 0.4);
  border-radius: 0.8rem;
  background: linear-gradient(145deg, rgba(12, 46, 55, 0.94), rgba(0, 10, 17, 0.96));
  box-shadow: inset 0 0 1.2rem rgba(0, 0, 0, 0.32);
}
.ranked-rank-context[hidden] { display: none; }
.ranked-rank-context > header { display: flex; align-items: start; justify-content: space-between; gap: 0.8rem; }
.ranked-rank-context h3 { margin: 0.12rem 0 0; color: #fff1c4; font: 700 1.2rem var(--display); }
.ranked-rank-context > header .btn { width: 2.4rem; min-width: 2.4rem; min-height: 2.4rem; padding: 0; font-size: 1.25rem; }
.ranked-rank-context-summary { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 0.3rem 0.7rem; margin-top: 0.75rem; }
.ranked-rank-context-summary strong { color: #f2ca68; font: 700 1.35rem var(--display); }
.ranked-rank-context-summary span { color: #fff1c4; font-weight: 800; }
.ranked-rank-context-summary small { color: #82d8cc; text-align: right; }
.ranked-rank-roadmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.3rem; margin: 0.9rem 0 0.55rem; }
.ranked-rank-step { display: grid; place-items: center; min-width: 0; min-height: 44px; padding: 0.25rem; border: 1px solid rgba(248, 237, 207, 0.13); border-radius: 0.35rem; background: rgba(0, 0, 0, 0.3); color: rgba(248, 237, 207, 0.58); font: 900 0.68rem/1 var(--display); cursor: pointer; }
.ranked-rank-step:hover, .ranked-rank-step:focus-visible { border-color: #82d8cc; color: #fff1c4; outline: 2px solid rgba(130, 216, 204, 0.32); outline-offset: 1px; }
.ranked-rank-step.is-complete { border-color: rgba(130, 216, 204, 0.34); background: rgba(31, 126, 119, 0.34); color: #9cded5; }
.ranked-rank-step.is-current { border-color: #f2ca68; background: #b07b2d; color: #07151e; box-shadow: 0 0 0.65rem rgba(242, 202, 104, 0.46); transform: scaleY(1.18); }
.ranked-rank-context > p { margin: 0.6rem 0 0; color: #d8c99e; font-size: 0.74rem; line-height: 1.5; }
.ranked-ladder-top { width: 100%; margin-top: 0.75rem; }
.ranked-ladder-row { display: grid; grid-template-columns: 3rem minmax(9rem, 1fr) auto 4rem; align-items: center; gap: 0.65rem; padding: 0.65rem 0.8rem; }
.ranked-ladder-row--pinned { border-color: #efc45d; background: rgba(162, 112, 34, 0.18); }
.ranked-ladder-row--selected { border-color: #82d8cc; background: linear-gradient(100deg, rgba(25, 105, 104, 0.25), rgba(162, 112, 34, 0.16)); box-shadow: inset 0.22rem 0 #82d8cc; }
.ranked-ladder-position { color: #efc45d; font-family: var(--display); }
.ranked-ladder-identity { display: grid; min-width: 0; }
.ranked-ladder-identity strong,
.ranked-ladder-identity small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranked-ladder-identity small { color: #ad9f7f; }
.ranked-ladder-rating { text-align: right; font-variant-numeric: tabular-nums; }
.ranked-empty { padding: 1.25rem; border: 1px dashed rgba(232, 190, 91, 0.28); border-radius: 0.65rem; color: #c4b693; text-align: center; }
@media (max-width: 520px) {
  .ranked-ladder-choices { grid-template-columns: 1fr; }
  .ranked-ladder-choices button { grid-template: auto / 2.5rem minmax(0, 1fr); min-height: 4.8rem; text-align: left; }
  .ranked-ladder-choices button > span { grid-row: 1 / 3; }
  .ranked-ladder-choices button > small { grid-column: 2; }
  .ranked-ladder-options { grid-template-columns: 1fr; }
  .ranked-captain-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
  .ranked-captain-picker-tile { padding: 0.35rem; }
  .ranked-captain-picker-title, .ranked-captain-picker-leader { font-size: 0.62rem; }
  .ranked-captain-ladder-row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .ranked-captain-ladder-row .ranked-ladder-rating { grid-column: 2; text-align: left; }
  .ranked-my-standing { grid-template-columns: auto 1fr; }
  .ranked-my-standing > strong, .ranked-my-standing > b { text-align: right; }
  .ranked-my-standing > small { grid-column: 1 / -1; grid-row: 2; }
  .ranked-rank-context-summary { grid-template-columns: 1fr; }
  .ranked-rank-context-summary small { text-align: left; }
  .ranked-rank-roadmap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) and (orientation: portrait) {
  .ranked-ladder-menu--v3 .ranked-ladder-rules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 0.3rem;
  }
  .ranked-ladder-menu--v3 .ranked-ladder-rules button {
    width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0.35rem 0.2rem;
    overflow: hidden;
    font-size: clamp(0.6rem, 3vw, 0.72rem);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.ranked-readiness { width: min(100%, 25rem); margin: 1.35rem auto 0; }
.ranked-readiness p { color: var(--ink-3); font-size: 0.74rem; line-height: 1.45; }
.ranked-surrender { border-color: rgba(218, 79, 85, 0.55) !important; }

.ranked-result-ceremony {
  position: relative;
  overflow: hidden;
  width: min(100%, 35rem);
  box-sizing: border-box;
  margin: 1rem auto;
  padding: 1rem;
  border: 1px solid #d3a447;
  border-radius: 0.9rem;
  background: linear-gradient(135deg, rgba(3, 25, 35, 0.96), rgba(42, 21, 23, 0.94));
  color: #f8edcf;
  box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.38);
}
.ranked-result-ceremony > * { position: relative; z-index: 1; }
.ranked-result-ceremony::before,
.ranked-result-ceremony::after {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  opacity: 0;
}
.ranked-result-ceremony.is-division-promotion::before {
  background: conic-gradient(from 45deg, transparent, rgba(255, 221, 126, 0.6), transparent 14% 50%, rgba(70, 214, 188, 0.5), transparent 64%);
  animation: ranked-division-rise 850ms ease-out both;
}
.ranked-result-ceremony.is-tier-promotion::before {
  background: repeating-conic-gradient(from 0deg, rgba(255, 231, 151, 0.72) 0 2deg, transparent 2deg 18deg);
  animation: ranked-tier-burst 1750ms ease-out both;
}
.ranked-result-ceremony.is-tier-promotion::after {
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 241, 179, 0.72), rgba(34, 205, 177, 0.22) 26%, transparent 62%);
  animation: ranked-tier-glow 1750ms ease-out both;
}
.ranked-result-ceremony.is-apex-promotion::after {
  background: radial-gradient(circle at 50% 42%, rgba(255, 213, 78, 0.88), rgba(95, 232, 216, 0.36) 24%, rgba(115, 66, 183, 0.28) 42%, transparent 68%);
  animation: ranked-apex-chartlight 1900ms ease-out both;
}
.ranked-result-ceremony.is-skipped::before,
.ranked-result-ceremony.is-skipped::after { animation: none; opacity: 0; }
.ranked-result-skip { min-height: 44px; margin-top: 0.65rem; }
@keyframes ranked-division-rise {
  0% { opacity: 0; transform: translateY(22%) rotate(-18deg) scale(0.72); }
  42% { opacity: 0.74; }
  100% { opacity: 0; transform: translateY(-12%) rotate(18deg) scale(1.08); }
}
@keyframes ranked-tier-burst {
  0% { opacity: 0; transform: rotate(-15deg) scale(0.3); }
  30% { opacity: 0.88; }
  100% { opacity: 0; transform: rotate(16deg) scale(1.18); }
}
@keyframes ranked-tier-glow {
  0%, 100% { opacity: 0; transform: scale(0.78); }
  32%, 70% { opacity: 0.9; transform: scale(1); }
}
@keyframes ranked-apex-chartlight {
  0% { opacity: 0; transform: translateY(18%) scale(0.65); }
  35%, 72% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8%) scale(1.08); }
}
.ranked-result-ranks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  gap: 1rem;
  margin: 0.7rem auto;
}
.ranked-result-ranks > div { display: grid; min-width: 0; place-items: center; }
#rankedResultBefore { order: 1; }
.ranked-result-arrow { order: 2; color: #efc45d; font-size: 1.6rem; }
.ranked-result-arrow::before { content: "→"; }
#rankedResultAfter { order: 3; }
.ranked-result-ceremony.is-rank-down #rankedResultAfter { order: 1; }
.ranked-result-ceremony.is-rank-down .ranked-result-arrow { color: #62b9e8; }
.ranked-result-ceremony.is-rank-down .ranked-result-arrow::before { content: "←"; }
.ranked-result-ceremony.is-rank-down #rankedResultBefore { order: 3; }
.ranked-result-ceremony > strong { color: #f4cb68; font-family: var(--display); font-size: 1.4rem; }
.ranked-result-ceremony > p:last-child { margin-bottom: 0; color: #c8b994; }

@media (max-width: 700px) {
  .ranked-featured {
    min-height: 0;
    flex-direction: column;
    padding: 1.1rem;
    text-align: center;
  }
  .ranked-featured-crest { flex-basis: auto; width: 8rem; }
  .ranked-voyage-path { justify-items: center; }
  .ranked-featured-copy > p:not(.ranked-kicker),
  .ranked-voyage-path > p:not(.ranked-kicker) { margin-inline: auto; }
  .ranked-hub-heading { align-items: stretch; }
  .ranked-hub-heading h2 { font-size: clamp(1rem, 5vw, 1.25rem); }
  #rankedSeasonLabel { font-size: clamp(0.52rem, 2.6vw, 0.7rem); letter-spacing: 0.1em; }
  .ranked-account-actions { width: 100%; }
  .ranked-rating-card { grid-template-columns: 1fr; }
  .ranked-rating-detail { text-align: left; }
  .ranked-ladder-row { grid-template-columns: 2.5rem 1fr 3.5rem; }
  .ranked-ladder-row .ranked-rank-badge { grid-column: 2 / -1; grid-row: 2; }
  .ranked-result-ranks { align-items: stretch; gap: 0.4rem; }
  .ranked-result-arrow { align-self: center; }
}

@media (max-width: 30rem) and (orientation: portrait) {
  .ranked-result-ceremony {
    width: 100%;
    margin-inline: auto;
    padding: 0.8rem 0.7rem;
  }

  .ranked-result-ceremony .ranked-kicker { margin-bottom: 0.25rem; }

  .ranked-result-ranks {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0.18rem;
    margin: 0.45rem auto 0.55rem;
  }

  .ranked-result-ranks > div {
    position: relative;
    width: min(100%, 17rem);
    padding: 0.42rem 0.55rem 0.42rem 4rem;
    border: 1px solid rgba(232, 190, 91, 0.24);
    border-radius: 0.72rem;
    background: rgba(0, 8, 14, 0.46);
  }

  .ranked-result-ranks > div::before {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    width: 2.8rem;
    color: #ad9f7f;
    font: 700 0.53rem/1.15 var(--font-data);
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    transform: translateY(-50%);
  }

  .ranked-result-ranks > div:first-child::before { content: "Previous"; }
  .ranked-result-ranks > div:last-child::before { content: "New rank"; }

  .ranked-result-ranks .ranked-rank-badge--compact {
    grid-template-columns: 2.65rem minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    gap: 0.5rem;
    text-align: left;
  }

  .ranked-result-ranks .ranked-crest--small { width: 2.65rem; }
  .ranked-result-ranks .ranked-rank-copy strong {
    font-size: clamp(0.72rem, 3.8vw, 0.92rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
  }
  .ranked-result-ranks .ranked-rank-copy small {
    font-size: clamp(0.54rem, 2.8vw, 0.65rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .ranked-result-arrow {
    font-size: 1.05rem;
    line-height: 1;
  }

  .ranked-result-ceremony.is-rank-up #rankedResultAfter { order: 1; }
  .ranked-result-ceremony.is-rank-up .ranked-result-arrow::before { content: "↑"; }
  .ranked-result-ceremony.is-rank-up #rankedResultBefore { order: 3; }
  .ranked-result-ceremony.is-rank-down #rankedResultBefore { order: 1; }
  .ranked-result-ceremony.is-rank-down .ranked-result-arrow::before { content: "↓"; }
  .ranked-result-ceremony.is-rank-down #rankedResultAfter { order: 3; }

  .ranked-result-ceremony > strong {
    display: inline-block;
    max-width: 100%;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: rgba(239, 196, 93, 0.1);
    font-size: clamp(0.9rem, 5vw, 1.15rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .ranked-result-ceremony > p:last-of-type {
    margin: 0.55rem auto 0;
    font-size: 0.7rem;
    line-height: 1.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ranked-progress > span,
  .ranked-featured,
  .ranked-crest,
  .ranked-result-ceremony::before,
  .ranked-result-ceremony::after { transition: none; animation: none; }
  .ranked-result-ceremony.is-division-promotion::after,
  .ranked-result-ceremony.is-tier-promotion::after,
  .ranked-result-ceremony.is-apex-promotion::after { opacity: 0.35; transform: none; }
}

/* Revenant's Back From the Brink is a visible table event, not a hidden percentage roll. */
.revenant-wheel-shell {
  position: relative;
  display: block;
  width: min(21rem, 78vw);
  margin: 0.35rem auto 1rem;
  padding: 0.8rem 0 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.revenant-wheel-shell:disabled {
  opacity: 1;
  cursor: default;
}

.revenant-wheel-shell:not(:disabled):hover .revenant-wheel,
.revenant-wheel-shell:not(:disabled):focus-visible .revenant-wheel {
  scale: 1.025;
  filter: brightness(1.08);
}

.revenant-wheel-shell:focus-visible {
  outline: 0.18rem solid #f4cf69;
  outline-offset: 0.35rem;
  border-radius: 50%;
}

.revenant-wheel-pointer {
  position: absolute;
  z-index: 2;
  top: -0.35rem;
  left: 50%;
  color: var(--brass);
  font-size: 1.75rem;
  line-height: 1;
  translate: -50% 0;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.7));
}

.revenant-wheel {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: url('/art/revenant-wheel.webp') center / contain no-repeat;
  box-shadow: 0 0 0 0.12rem #111d27, 0 0 1.35rem rgba(214, 154, 50, 0.52);
  transition: scale 140ms ease, filter 140ms ease;
}

.revenant-wheel--result {
  animation: revenant-wheel-spin 3.35s cubic-bezier(0.08, 0.72, 0.12, 1) both;
}

.revenant-wheel-quarter {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 50%;
  height: 50%;
  place-items: center;
  font-family: Georgia, serif;
  font-size: clamp(2.1rem, 10vw, 3.35rem);
  font-weight: 900;
  text-shadow: 0 2px 1px rgba(0, 0, 0, 0.45);
}

.revenant-wheel-quarter--1 { top: 0; right: 0; }
.revenant-wheel-quarter--2 { right: 0; bottom: 0; }
.revenant-wheel-quarter--3 { bottom: 0; left: 0; }
.revenant-wheel-quarter--4 { top: 0; left: 0; }
.revenant-wheel-quarter.is-heart { color: #d92f48; }
.revenant-wheel-quarter.is-skull { color: #f7eed9; }

.revenant-wheel-hub {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 2.65rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #f8df9d;
  background: rgba(74, 18, 28, 0.92);
  translate: -50% -50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
}

.revenant-wheel-menu {
  width: min(30rem, calc(100vw - 1.5rem));
  padding: clamp(1.2rem, 4vw, 2rem);
  border: 2px solid var(--brass);
  border-radius: calc(var(--radius) * 1.4);
  text-align: center;
  color: var(--bone);
  background: radial-gradient(circle at 50% 36%, #173f4b, #071a24 72%);
  box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.72), inset 0 0 2rem rgba(201, 146, 46, 0.12);
}

.revenant-wheel-menu::backdrop {
  background: rgba(3, 12, 18, 0.86);
  backdrop-filter: blur(5px);
}

.revenant-wheel-copy {
  max-width: 26rem;
  margin: 0.55rem auto 0.2rem;
  color: var(--ink-2);
  text-wrap: balance;
}

.revenant-wheel-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.35rem;
}

.pile-review-card {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: var(--radius);
}

.pile-review-card .card {
  width: 100%;
  animation: none;
}

.pile-review-card + .pile-count {
  z-index: 3;
  align-self: end;
  margin-bottom: 0.25rem;
}

.pile--revealed .pile-back,
.has-art .pile--revealed .pile-back {
  border-color: var(--brass);
  background: #071a24;
  box-shadow: 0 0 0 2px rgba(240, 200, 109, 0.48), 0 0 1rem rgba(240, 200, 109, 0.25);
}

.pile-live-revealed-card {
  background: #071a24;
}

.return-to-results {
  position: fixed;
  z-index: 18;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  box-shadow: 0 0.7rem 2rem rgba(0, 0, 0, 0.62);
}

@keyframes revenant-wheel-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(var(--revenant-landing)); }
}

@media (prefers-reduced-motion: reduce) {
  .revenant-wheel--result {
    animation-duration: 0.01ms;
  }
}

/* ------------------------------------------------ scripted guided tutorial */

.tutorial-launch--guided {
  /* Match the combined button margins that separate the two learning choices. */
  margin-top: 1.35rem;
  border-color: #e0b64d;
  box-shadow: 0 0 0 1px rgba(255, 220, 118, 0.2), 0 0 18px rgba(224, 182, 77, 0.2);
}

.guided-tutor {
  position: fixed;
  z-index: 120;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 29rem);
  align-items: end;
  width: min(36rem, calc(100vw - 1.5rem));
  filter: drop-shadow(0 14px 25px rgba(0, 0, 0, 0.55));
  /* The bubble may overlap an unimportant part of the table on a short phone. It must
     never become an invisible touch shield over the highlighted game control. */
  pointer-events: none;
}

.guided-tutor[hidden] {
  display: none;
}

.guided-tutor-art {
  position: relative;
  z-index: 1;
  margin-right: 0;
}

.guided-parrot {
  display: block;
  width: 5.5rem;
  max-height: 8rem;
  object-fit: contain;
  object-position: bottom;
}

.guided-tutor-body {
  position: relative;
  z-index: 2;
  padding: 0.8rem 0.9rem;
  border: 2px solid var(--brass);
  border-radius: 1.35rem 1.35rem 1.35rem 0.55rem;
  color: var(--ink);
  background: linear-gradient(145deg, #f3dfad, #d7b875);
  box-shadow: inset 0 0 0 2px rgba(72, 42, 18, 0.24);
}

/* A large, two-layer speech-bubble pointer visibly connects the guide to the parrot. */
.guided-tutor-body::before,
.guided-tutor-body::after {
  content: '';
  position: absolute;
  bottom: 2.6rem;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}

.guided-tutor-body::before {
  left: -1.42rem;
  border-top: 0.8rem solid transparent;
  border-bottom: 0.8rem solid transparent;
  border-right: 1.45rem solid var(--brass);
}

.guided-tutor-body::after {
  left: -1.12rem;
  bottom: 2.74rem;
  border-top: 0.66rem solid transparent;
  border-bottom: 0.66rem solid transparent;
  border-right: 1.2rem solid #efd9a2;
}

.guided-tutor-heading,
.guided-tutor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.guided-tutor-heading {
  font-family: var(--font-display);
  color: #503214;
}

.guided-tutor-heading span {
  font-family: var(--font-data);
  font-size: 0.7rem;
}

.guided-tutor-body p {
  margin: 0.45rem 0 0.7rem;
  color: #2b2118;
  line-height: 1.38;
}

/* Short prompts should not occupy the same vertical space as full explanations. This is
   especially important while the highlighted action buttons sit near a phone's bottom edge. */
.guided-tutor--compact .guided-tutor-body {
  padding-block: 0.55rem;
}

.guided-tutor--compact .guided-tutor-body p {
  margin-block: 0.25rem 0.4rem;
  line-height: 1.25;
}

.guided-tutor--compact .guided-tutor-actions .btn {
  padding-block: 0.35rem;
}

.guided-tutor-actions {
  justify-content: flex-end;
}

.guided-tutor-actions .guided-tutor-back {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  place-items: center;
  margin-right: auto;
  padding: 0 0 0.1rem;
  border-color: transparent;
  background: transparent;
  color: #3b2817;
  font-size: 1.1rem;
  font-weight: 700;
}

.guided-tutor-actions .guided-tutor-back:hover:not(:disabled),
.guided-tutor-actions .guided-tutor-back:focus-visible {
  border-color: rgba(72, 42, 18, 0.35);
  background: rgba(72, 42, 18, 0.08);
}

.guided-tutor-actions .guided-tutor-back:disabled {
  opacity: 0.62;
}

.guided-tutor-actions .btn {
  pointer-events: auto;
}

.guided-active .emotes,
.guided-active .result-emotes,
.guided-active #achievementAwards {
  display: none !important;
}

.guided-target {
  position: relative;
  z-index: 90 !important;
  animation: guided-pulse 1.35s ease-in-out infinite;
  scroll-margin-top: max(4.75rem, calc(env(safe-area-inset-top) + 4.25rem));
}

/* Highlight the painted stack itself, above every card layer. Ringing the outer button
   let the foreground card cover the ring's right edge on narrow screens. */
.pile-back.guided-target,
.pile-back.pile-choice-target {
  z-index: 4 !important;
  outline: none;
  overflow: visible;
  animation: none;
}

.pile-back.guided-target::after,
.pile-back.pile-choice-target::after {
  content: '';
  position: absolute;
  inset: -5px;
  z-index: 5;
  border: 3px solid #ffd864;
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 0 18px rgba(255, 216, 100, 0.72);
  transform: translate(3px, 3px);
  pointer-events: none;
}

.pile-survey-cards {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: visible;
}

.pile-survey-cards .card {
  width: 100%;
  min-width: 0;
  animation: none;
}

.pile-survey-cards .card:nth-child(2) {
  transform: translateX(-65%);
}

.pile-survey-cards .card:nth-child(3) {
  transform: translateX(-130%);
}

@keyframes guided-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #ffd864, 0 0 15px rgba(255, 216, 100, 0.5); }
  50% { box-shadow: 0 0 0 5px #fff0a0, 0 0 28px rgba(255, 216, 100, 0.85); }
}

/* On phones and tablets the parrot must remain in view. It switches between the top and
   bottom edge so it stays opposite the control the player needs rather than covering it. */
@media (max-width: 60rem) {
  .guided-tutor {
    position: fixed;
    top: auto;
    right: max(0.45rem, env(safe-area-inset-right));
    bottom: max(0.45rem, env(safe-area-inset-bottom));
    width: calc(100vw - 0.9rem);
    margin: 0;
  }

}

@media (max-width: 47.99rem) {
  .guided-tutor {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    right: 0.45rem;
    bottom: max(0.45rem, env(safe-area-inset-bottom));
    width: calc(100vw - 0.9rem);
  }

  .guided-parrot {
    width: 4rem;
    max-height: 6rem;
  }

  .guided-tutor-body {
    padding: 0.65rem;
    font-size: 0.84rem;
    max-height: min(42vh, 18rem);
    overflow: visible;
  }

  .guided-tutor-body::before {
    bottom: 1.8rem;
  }

  .guided-tutor-body::after {
    bottom: 1.94rem;
  }

  .guided-tutor-body p {
    max-height: min(21vh, 8rem);
    overflow-y: auto;
  }

  .guided-tutor-actions .btn {
    padding: 0.45rem 0.6rem;
  }

  .guided-tutor--compact .guided-tutor-body {
    padding: 0.4rem 0.55rem;
  }

  .guided-tutor--compact .guided-tutor-heading {
    font-size: 0.78rem;
  }

  .guided-tutor--compact .guided-tutor-actions .btn {
    padding: 0.28rem 0.48rem;
    font-size: 0.76rem;
  }
}

/* The reference changes shape with the device just as the live table does. Portrait
   phones get the three-column HUD: vertical Health and Treasure meters flank the active
   table, while Upgrades, Discards, and the Ship's log continue below it. */
@media (max-width: 47.99rem) and (orientation: portrait) {
  .quick-display-main {
    grid-template-columns: 3.35rem minmax(0, 1fr) 3.65rem;
    align-items: start;
    gap: 0.3rem;
    padding: 0.35rem;
  }

  .quick-display-main > .quick-display-rail {
    display: contents;
  }

  .quick-display-table {
    grid-column: 2;
    grid-row: 1;
    gap: 0.35rem;
  }

  .quick-display-rail button[data-quick-display='health'],
  .quick-display-rail button[data-quick-display='treasure'] {
    display: flex;
    min-width: 0;
    min-height: 18rem;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.25rem;
  }

  .quick-display-rail button[data-quick-display='health'] {
    grid-column: 1;
    grid-row: 1;
  }

  .quick-display-rail button[data-quick-display='treasure'] {
    grid-column: 3;
    grid-row: 1;
  }

  .quick-display-rail button[data-quick-display='health'] strong,
  .quick-display-rail button[data-quick-display='treasure'] strong {
    padding: 0.35rem 0.25rem;
    border: 1px solid rgba(232, 190, 91, 0.5);
    border-radius: 999px;
    color: #f4d98e;
    font-size: 0.48rem;
    letter-spacing: 0.03em;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }

  .quick-health-bar,
  .quick-treasure-bar {
    position: relative;
    width: 0.7rem;
    height: 10rem;
    flex: 1;
  }

  .quick-health-bar i,
  .quick-treasure-bar i {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    height: 86%;
  }

  .quick-treasure-bar i {
    height: 56%;
  }

  .quick-display-rail button[data-quick-display='health'] b,
  .quick-display-rail button[data-quick-display='treasure'] b {
    display: flex;
    flex-direction: column;
    font-size: 0.95rem;
  }

  .quick-display-rail button[data-quick-display='health'] em,
  .quick-display-rail button[data-quick-display='treasure'] em {
    font-size: 0.38rem;
  }

  .quick-display-rail button[data-quick-display='upgrades'],
  .quick-display-rail button[data-quick-display='discards'],
  .quick-display-rail button[data-quick-display='log'] {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .quick-display-rail button[data-quick-display='upgrades'] { grid-row: 2; }
  .quick-display-rail button[data-quick-display='discards'] { grid-row: 3; }
  .quick-display-rail button[data-quick-display='log'] { grid-row: 4; }

  .quick-display-piles {
    gap: clamp(0.45rem, 3vw, 1rem);
    padding: 0.35rem;
  }

  .quick-display-piles span {
    width: clamp(2.6rem, 13vw, 3.8rem);
  }

  .quick-display-active {
    min-height: 11rem;
  }

  .quick-active-card {
    width: min(7rem, calc(100vw - 12rem));
  }

  .quick-display-actions {
    min-height: 3.2rem;
    font-size: 0.52rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guided-target {
    animation: none;
    box-shadow: 0 0 0 4px #ffd864;
  }
}

/* ------------------------------------------------------------ sound controls */

.audiopick {
  width: 100%;
  margin-top: 0.9rem;
}

.audiopick[hidden] {
  display: none;
}

/* The lobby's sound controls, folded away. Three sliders nobody opened the game to adjust
   were sitting between "Start the Hunt" and the fold on a 768px-tall laptop. */
.audio-disclosure,
.records-disclosure {
  width: min(100%, 20rem);
  margin: 0.4rem auto 0;
}

.audio-disclosure[hidden],
.records-disclosure[hidden] {
  display: none;
}

.audio-disclosure > summary,
.records-disclosure > summary {
  padding: 0.35rem 0;
  color: var(--ink-2);
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  list-style: none;
}

.audio-disclosure > summary::-webkit-details-marker,
.records-disclosure > summary::-webkit-details-marker {
  display: none;
}

.audio-disclosure > summary::after,
.records-disclosure > summary::after {
  content: ' \25BE';
  opacity: 0.75;
}

.audio-disclosure[open] > summary::after,
.records-disclosure[open] > summary::after {
  content: ' \25B4';
}

.audio-disclosure > summary:hover,
.audio-disclosure > summary:focus-visible,
.records-disclosure > summary:hover,
.records-disclosure > summary:focus-visible {
  color: var(--bone);
}

.audio-disclosure > .audiopick {
  margin-top: 0.35rem;
}

.lobby-sound-settings {
  display: grid;
  width: min(100%, 20rem);
  gap: 0.675rem;
  margin-inline: auto;
}

.lobby-sound-settings .audio-disclosure { width: 100%; }
.lobby-sound-settings #feedbackLobbyButton { width: 100%; margin-top: 0; }
.lobby-sound-settings .lobby-setting-toggle,
.lobby-sound-settings .sound-effects-button {
  width: 100%;
  min-height: 2.55rem;
  margin: 0;
}
.lobby-sound-settings .audio-disclosure:not([open]) ~ .lobby-setting-toggle,
.lobby-sound-settings .audio-disclosure:not([open]) ~ .sound-effects-button { display: none; }

.records-disclosure-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.records-disclosure-actions .btn { width: 100%; }

.audiopick .field-label {
  display: block;
  margin-bottom: 0.4rem;
}

.audiorow {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-family: var(--font-data);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.audiorow input[type='range'] {
  width: 100%;
  accent-color: var(--brass);
}

/* Muted is a state you should be able to see without reading the button. */
.audiopick.muted .audiorow {
  opacity: 0.45;
}

.audiopick .btn {
  margin-top: 0.2rem;
}

.lobby-setting-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(224, 181, 75, 0.2);
  color: var(--ink-2);
  font: 700 0.72rem/1.2 var(--font-label);
  letter-spacing: 0.04em;
}

.lobby-setting-toggle input { accent-color: var(--brass); }

.sound-effects-menu { width: min(92vw, 25rem); }

.sound-effect-group {
  margin: 1rem 0;
  border: 1px solid rgba(224, 181, 75, 0.38);
  border-radius: 0.55rem;
  background: rgba(5, 20, 27, 0.72);
  overflow: hidden;
}

.sound-effect-group > summary {
  padding: 0.8rem 1rem;
  color: var(--bone);
  font: 800 0.82rem/1.2 var(--font-label);
  letter-spacing: 0.06em;
  cursor: pointer;
}

.sound-effect-choices {
  display: grid;
  gap: 0.55rem;
  padding: 0 1rem 1rem;
}

.sound-effect-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.75rem;
  gap: 0.45rem;
}

.sound-effect-choices label,
.sound-effect-name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(222, 198, 142, 0.24);
  border-radius: 0.4rem;
  color: var(--ink-1);
  font: 700 0.76rem/1.2 var(--font-data);
  cursor: pointer;
}

.sound-effect-name { cursor: default; }

.sound-effect-choices input { accent-color: var(--brass); }

.sound-preview {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(224, 181, 75, 0.45);
  border-radius: 0.4rem;
  background: rgba(224, 181, 75, 0.1);
  color: var(--bone);
  font-size: 1rem;
  cursor: pointer;
}

.sound-preview:hover,
.sound-preview:focus-visible {
  border-color: var(--brass);
  background: rgba(224, 181, 75, 0.2);
}

/* The masthead's sound popover. The lobby copy is laid out inline; this one floats. */
.soundpanel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 30;
  width: min(15rem, 80vw);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--brine);
  border-radius: var(--radius);
  background: #071a24;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.soundpanel[hidden] {
  display: none;
}

/* The header is the popover's positioning context. */
.masthead {
  position: relative;
}

/* --------------------------------------------------------- bug reporting */

body.bug-report-dock-visible {
  --bug-report-dock-height: calc(3.75rem + env(safe-area-inset-top));
  padding-top: var(--bug-report-dock-height);
}

body.feedback-dock-visible {
  --bug-report-dock-height: calc(3.75rem + env(safe-area-inset-top));
  padding-top: var(--bug-report-dock-height);
}

body.feedback-dock-visible::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  z-index: 24;
  height: var(--bug-report-dock-height);
  pointer-events: none;
  border-bottom: 1px solid rgba(232, 190, 91, 0.72);
  background: linear-gradient(180deg, #0b2c38, #061721);
  box-shadow: 0 0.4rem 1.1rem rgba(0, 0, 0, 0.45);
}

body.feedback-dock-visible > .app {
  min-height: calc(100vh - var(--bug-report-dock-height));
  min-height: calc(100dvh - var(--bug-report-dock-height));
}

body.feedback-dock-visible > .veil {
  top: var(--bug-report-dock-height);
}

body.bug-report-dock-visible::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  z-index: 24;
  height: var(--bug-report-dock-height);
  pointer-events: none;
  border-bottom: 1px solid rgba(232, 190, 91, 0.72);
  background: linear-gradient(180deg, #0b2c38, #061721);
  box-shadow: 0 0.4rem 1.1rem rgba(0, 0, 0, 0.45);
}

body.bug-report-dock-visible > .app {
  min-height: calc(100vh - var(--bug-report-dock-height));
  min-height: calc(100dvh - var(--bug-report-dock-height));
}

body.bug-report-dock-visible > .veil {
  top: var(--bug-report-dock-height);
}

/* This used to wear the primary gold fill, pinned above the masthead - measured at 9.9:1,
   the highest-contrast element on the table, while the only controls that advance the game
   were quiet outlines at the bottom. Reporting a bug is chrome; playing is not. */
.bug-report-launch {
  min-height: 44px;
  white-space: nowrap;
  border: 1px solid rgba(201, 146, 46, 0.45);
  background: rgba(7, 26, 36, 0.72);
  color: var(--ink-2);
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.85;
  box-shadow: none;
}

.bug-report-launch:hover,
.bug-report-launch:focus-visible {
  border-color: var(--brass);
  background: rgba(27, 74, 90, 0.72);
  color: var(--bone);
  opacity: 1;
}

.bug-report-launch--fixed {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  z-index: 25;
}

.feedback-launch {
  min-height: 44px;
  border: 1px solid rgba(232, 226, 211, 0.55);
  background: linear-gradient(180deg, #17495a, #0b2c38);
  color: var(--bone);
  font-weight: 750;
  box-shadow: 0 0.5rem 1.35rem rgba(0, 0, 0, 0.42);
}

.feedback-launch--fixed {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  left: max(0.75rem, env(safe-area-inset-left));
  z-index: 25;
}

.feedback-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.feedback-categories button,
.result-feedback button {
  min-height: 44px;
  padding: 0.58rem 0.7rem;
  border: 1px solid #73909b;
  border-radius: var(--radius);
  background: #0b2632;
  color: var(--bone);
  font: 700 0.9rem/1.2 var(--font-ui);
  cursor: pointer;
}

.feedback-categories button.selected,
.result-feedback button.selected {
  border-color: #f0c86d;
  background: #285868;
  box-shadow: 0 0 0 2px rgba(240, 200, 109, 0.26);
}

.feedback-comment {
  margin-top: 0.35rem;
}

.feedback-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.feedback-received {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.result-feedback {
  width: min(34rem, 100%);
  margin: 0.9rem auto 0;
  padding: 0.85rem;
  border: 1px solid rgba(240, 200, 109, 0.55);
  border-radius: var(--radius);
  background: rgba(5, 25, 34, 0.78);
}

.result-feedback strong,
.result-feedback-followup > span {
  display: block;
  margin-bottom: 0.55rem;
}

.result-feedback-feelings,
.result-feedback-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

.result-feedback-followup {
  margin-top: 0.75rem;
}

.result-feedback .result-feedback-note,
.result-feedback .result-feedback-send,
.result-feedback .result-feedback-skip {
  min-height: 36px;
  margin-top: 0.65rem;
  border: 0;
  background: transparent;
  color: #f3d98f;
  text-decoration: underline;
}

@media (max-width: 520px) {
  .feedback-launch,
  .bug-report-launch {
    padding-inline: 0.62rem;
    font-size: 0.78rem;
  }

  .feedback-categories {
    grid-template-columns: 1fr;
  }
}

.bug-report-menu {
  width: min(34rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  overflow: auto;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid rgba(232, 226, 211, 0.36);
  border-radius: 0.75rem;
  background: linear-gradient(145deg, #34474e, #172a32);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.76);
  color: var(--bone);
}

.bug-report-menu::backdrop {
  background: rgba(3, 12, 17, 0.88);
  backdrop-filter: blur(5px);
}

.bug-report-menu form {
  margin: 0;
}

.bug-report-title {
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.4rem);
  line-height: 1.1;
}

.bug-report-intro {
  margin: 0.65rem 0 1.15rem;
  color: #d5dde0;
}

.bug-report-field {
  display: grid;
  gap: 0.45rem;
  color: var(--bone);
  font-weight: 650;
}

.bug-report-field textarea {
  width: 100%;
  min-height: 9rem;
  resize: vertical;
  padding: 0.8rem;
  border: 1px solid #73909b;
  border-radius: var(--radius);
  outline: none;
  background: #06151e;
  color: #f5f0e4;
  font: 1rem/1.45 var(--font-ui);
}

.bug-report-field textarea::placeholder {
  color: #91a5ad;
}

.bug-report-field textarea:focus-visible,
.bug-report-launch:focus-visible,
.bug-report-menu .btn:focus-visible {
  border-color: #f0c86d;
  box-shadow: 0 0 0 3px rgba(240, 200, 109, 0.34);
}

.bug-report-context {
  margin: 0.7rem 0 0;
  color: #b9c7cc;
  font-size: 0.78rem;
}

.bug-report-error {
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.65rem;
  border-left: 3px solid #e66b62;
  background: rgba(104, 24, 22, 0.46);
  color: #ffe0dc;
}

.bug-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.bug-report-actions .btn {
  min-height: 44px;
}

.bug-report-pause {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(27, 74, 90, 0.38), transparent 42%),
    rgba(3, 12, 17, 0.94);
  text-align: center;
  overscroll-behavior: contain;
}

.bug-report-pause-card {
  width: min(28rem, 100%);
  padding: clamp(1.5rem, 6vw, 2.4rem);
  border: 1px solid var(--brass);
  border-radius: 0.75rem;
  background: #0b2430;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.7);
}

.bug-report-pause-mark {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--brass);
  font-size: 2rem;
}

.bug-report-pause-card strong {
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 1.7rem;
}

.bug-report-pause-card p {
  margin: 0.65rem 0 0;
  color: #c5d0d4;
}

.bug-report-received {
  position: fixed;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 90;
  max-width: min(24rem, calc(100vw - 1.5rem));
  padding: 0.8rem 1rem;
  border: 1px solid #62b997;
  border-radius: var(--radius);
  background: #0b3028;
  color: #e9fff5;
  box-shadow: 0 0.7rem 2rem rgba(0, 0, 0, 0.62);
}

@media (max-width: 34rem) {
  .bug-report-menu {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    padding: 1.15rem;
  }

  .bug-report-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .bug-report-launch--fixed {
    top: max(0.5rem, env(safe-area-inset-top));
    right: max(0.5rem, env(safe-area-inset-right));
  }
}

/* ------------------------------------------------ the guided first play */

/* Where the parrot stands when it is pointing at something. --tutor-top is set by
   placeBeside(); without it the box keeps whatever position the base .tutor rule gives it,
   so a guide step that loses its anchor degrades to an ordinary tip rather than to a bug. */
.tutor--guiding {
  top: var(--tutor-top, auto);
  /* The base rule pins the box to the bottom. Setting top as well without releasing bottom
     would stretch it between the two rather than move it. */
  bottom: auto;
  transition: top 320ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* The thing being pointed AT. Deliberately a ring rather than a dimmed backdrop: this is a
   shared table, and half the time it is someone else's turn - a guided player must still be
   able to watch the game they are in. */
.tutor-target {
  position: relative;
  z-index: 5;
  border-radius: var(--radius);
  animation: tutor-pulse 1.8s ease-in-out infinite;
}

@keyframes tutor-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 2px var(--brass), 0 0 0 6px rgba(214, 154, 50, 0.18);
  }
  50% {
    box-shadow: 0 0 0 3px var(--brass), 0 0 0 14px rgba(214, 154, 50, 0);
  }
}

/* The parrot leans toward what it is indicating. Small - it should read as attention, not
   as a mascot doing a dance. */
.tutor--guiding .tutor-parrot {
  animation: tutor-lean 2.4s ease-in-out infinite;
  transform-origin: 60% 80%;
}

@keyframes tutor-lean {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-5deg) translateX(-2px);
  }
}

/* A player who has asked for less motion gets the ring without the throb: the ring is the
   information, the pulse is only decoration. */
@media (prefers-reduced-motion: reduce) {
  .tutor-target {
    animation: none;
    box-shadow: 0 0 0 3px var(--brass);
  }

  .tutor--guiding {
    transition: none;
  }

  .tutor--guiding .tutor-parrot {
    animation: none;
  }
}

/* Versus components are declared after the main live-game layout. Repeat only their compact
   treatment at the end so those base declarations cannot expand the phone cockpit again. */
@media (max-width: 60rem) and (max-height: 32rem) and (orientation: landscape) {
  .versus-opponent {
    min-height: 0;
    gap: 0.2rem;
    padding: 0.18rem 0.4rem;
    border-radius: 0.35rem;
    font-size: 0.48rem;
  }

  .versus-fighter {
    padding: 0.05rem 0.25rem;
  }

  .versus-fighter strong {
    font-size: 0.72rem;
  }

  .versus-clash span {
    width: 1.45rem;
    border-width: 1px;
    font-size: 0.52rem;
  }

  .versus-rival-vitals {
    gap: 0.08rem 0.35rem;
    margin-top: 0.05rem;
    font-size: 0.43rem;
  }
}

/* A short landscape viewport should read as a captain dossier, not a tall phone page.
   The portrait anchors the left side while identity, crew tabs, detail tabs, and the
   selected detail share the wider right column. */
@media (max-width: 60rem) and (max-height: 32rem) and (orientation: landscape) {
  .health-menu[open] {
    display: grid;
    grid-template-columns: minmax(8.5rem, 35%) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
    gap: 0.25rem 0.65rem;
    width: calc(100vw - 0.5rem);
    max-width: 54rem;
    height: calc(100dvh - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
    padding: max(0.45rem, env(safe-area-inset-top, 0px))
      max(0.6rem, env(safe-area-inset-right, 0px))
      max(0.45rem, env(safe-area-inset-bottom, 0px))
      max(0.6rem, env(safe-area-inset-left, 0px));
    overflow: hidden;
    text-align: left;
  }

  .health-menu > .tutorial-kicker,
  .health-menu > .tutorial-title,
  .health-menu-summary,
  .health-crew-picker,
  .health-info-tabs,
  .health-info-panel {
    grid-column: 2;
    min-width: 0;
  }

  .health-menu > .tutorial-kicker {
    grid-row: 1;
    margin: 0;
    font-size: 0.55rem;
  }

  .health-menu .tutorial-title {
    grid-row: 2;
    padding: 0 2.25rem 0 0;
    font-size: clamp(1.25rem, 4.5vw, 1.8rem);
    line-height: 1;
    text-align: left;
  }

  .health-menu-summary {
    grid-row: 3;
    margin: 0;
    font-size: 0.65rem;
    line-height: 1.25;
  }

  .health-crew-picker {
    grid-row: 4;
    margin: 0;
  }

  .health-info-tabs {
    grid-row: 5;
    margin: 0;
  }

  .health-crew-picker,
  .health-info-tabs {
    gap: 0.25rem;
    overflow-x: auto;
  }

  .health-crew-picker button,
  .health-info-tabs button {
    min-height: 1.9rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.58rem;
  }

  .health-avatar-stage {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    border-radius: 0.55rem;
  }

  .health-info-panel {
    grid-row: 6;
    align-self: stretch;
    min-height: 0;
    max-height: 100%;
    margin: 0.1rem 0 0;
    overflow: auto;
  }

  .health-info-card {
    padding: 0.55rem 0.7rem;
  }

  .health-info-card h3 {
    margin-bottom: 0.3rem;
    font-size: 0.7rem;
  }

  .health-info-card p {
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .health-ability-stats {
    gap: 0.25rem;
    margin-top: 0.4rem;
  }

  .health-ability-stat {
    padding: 0.3rem 0.45rem;
    font-size: 0.62rem;
  }

  .health-history {
    padding: 0.45rem 0.55rem 0.5rem;
  }

  .health-history-heading {
    margin-bottom: 0.15rem;
  }

  .health-history-screen {
    min-height: 5rem;
    height: 100%;
  }

  .health-history-svg {
    height: 100%;
    min-height: 5.75rem;
    max-height: 8rem;
  }
}

/* Card reactions should punctuate a phone-sized table, not cover it. Each landscape
   treatment keeps the desktop motion path but uses a smaller canvas and ends 100ms sooner. */
@media (max-width: 60rem) and (max-height: 32rem) and (orientation: landscape) {
  .fx--burst {
    width: min(20rem, 36vw);
    animation-duration: 1300ms;
  }

  .fx--rise {
    width: min(18rem, 32vw);
    animation-duration: 1350ms;
  }

  .fx--sweep {
    width: min(20rem, 38vw);
    animation-duration: 1180ms;
  }

  .fx--shine {
    width: min(16rem, 30vw);
    animation-duration: 1020ms;
  }

  .fx--edge {
    animation-duration: 1500ms;
  }
}

/* ---------------------------------------------------------------------------
   Short viewports: keep the primary action above the fold
   ---------------------------------------------------------------------------
   1366x768 is the most common laptop resolution in use, and the embark screen was
   building a 1256px column into it - "Start the Hunt" landed 488px below the fold with
   the cut falling mid-sentence, which reads as breakage rather than as an invitation to
   scroll. The column is legitimately tall; what it does not need on a short screen is a
   208px wordmark, a 5.5rem captain portrait and 1.35rem gaps between every block.

   Height-bound, not width-bound: wide-and-short is exactly the laptop shape that broke. */
@media (max-height: 960px) {
  .sheet--title {
    padding-block: clamp(0.4rem, 1.2vh, 1rem);
  }

  .wordmark--large {
    margin-bottom: 0.15rem;
  }

  .wordmark--large .logo {
    height: clamp(4.5rem, 16vh, 8rem);
  }

  .crewpick {
    margin: 0.1rem 0 0.5rem;
  }

  .crewpick .field-label {
    margin-bottom: 0.35rem;
  }

  .crewtile-face,
  .crewtile-portrait-wrap {
    max-width: 4rem;
  }

  .crewpick .random-captain-button {
    margin-top: 0.5rem;
  }

  #hostControls {
    margin-top: 0.75rem;
  }

  .start-hunt-scroll-button {
    width: min(100%, 15rem);
    margin-top: 0.55rem;
  }

  .joinform .field {
    gap: 0.15rem;
  }

  .audio-disclosure {
    margin-top: 0.2rem;
  }
}

/* Shorter still - 1280x720 and the 768px laptop with a browser chrome bar. The same trims,
   one notch further, rather than a different layout. */
@media (max-height: 790px) {
  .wordmark--large .logo {
    height: clamp(3.75rem, 13vh, 6.5rem);
  }

  .crewtile-face,
  .crewtile-portrait-wrap {
    max-width: 3.5rem;
  }

  .crewpick {
    margin-bottom: 0.35rem;
  }

  #hostControls {
    margin-top: 0.5rem;
  }

  .start-hunt-scroll-button {
    width: min(100%, 14rem);
  }
}

@media (max-height: 740px) {
  .wordmark--large .logo {
    height: clamp(3rem, 10vh, 5rem);
  }

  .captain-browse {
    margin-top: 0.25rem;
    font-size: 0.74rem;
  }

  .crewpick {
    margin-bottom: 0.25rem;
  }

  .crewpick .field-label {
    margin-bottom: 0.2rem;
  }

  .crewpick .random-captain-button {
    margin-top: 0.35rem;
  }

  .start-hunt-scroll-button {
    width: min(100%, 13rem);
    margin-top: 0.4rem;
  }
}

/* The selected captain is the decision on this screen, so let the portrait occupy its
   available square instead of leaving a small face floating in a 10rem tile. This comes
   after the old short-laptop thumbnail tiers intentionally: space is recovered below by
   removing redundant display art rather than shrinking the player's choice. */
.crewtile-face,
.crewtile-portrait-wrap {
  max-width: 8rem;
}

/* A quiet way in, not a second call to action: it sits under the portrait it explains and
   must not compete with "Select a random captain" beside it. */
.captain-browse {
  margin-top: 0.4rem;
  padding: 0.15rem 0.3rem;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.captain-browse:hover,
.captain-browse:focus-visible {
  background: none;
  color: var(--bone);
}

/* ---------------------------------------------------------------------------
   The splash screen's wordmark
   ---------------------------------------------------------------------------
   The compact tiers above exist for the setup steps, where the wordmark competes with
   "Start the Hunt" for vertical space. The splash screen has no such competition - its
   controls sit in a column beside the art - so there the wordmark gets to be a wordmark.

   #hostControls is hidden on the splash and shown on every setup step, which is what
   separates the two. The :has() beats the media-query tiers on specificity, so this rule
   wins wherever it applies regardless of source order. */
.sheet--title:has(#hostControls[hidden]) .wordmark--large .logo {
  height: clamp(9rem, min(32vw, 44vh), 34rem);
}

.sheet--title:has(#hostControls[hidden]) .wordmark--large {
  margin-bottom: 0.2rem;
}

/* On a phone the captain portrait and a full-size wordmark cannot both lead the screen.
   The wordmark is the one that says what this is, so it takes the space. */
@media (max-width: 66rem), (orientation: portrait) {
  .sheet--title:has(#hostControls[hidden]) .lobby-captain {
    display: none;
  }

  .sheet--title:has(#hostControls[hidden]) .wordmark--large .logo {
    height: clamp(11rem, 62vw, 26rem);
  }
}

/* Phones already show the selected captain in the interactive portrait below. Dropping
   the separate full-body painting prevents duplicate captain art in both orientations and
   gives the larger selection tile the space it needs. */
@media (max-width: 60rem) {
  .sheet--title .lobby-captain {
    display: none;
  }
}

/* On short Chromebook/laptop setup screens the painted logo repeats the persistent site
   identity while consuming the height needed by Start the Hunt. Keep it on the home view,
   but remove it once setup controls are open. */
@media (min-width: 60rem) and (max-height: 820px) {
  .sheet--title:has(#hostControls:not([hidden])) > .wordmark--large {
    display: none;
  }
}

/* The wordmark is the way home from anywhere in the lobby flow. */
.wordmark--large.wordmark--home {
  cursor: pointer;
}

.wordmark--large.wordmark--home .logo {
  transition: filter 140ms ease, transform 140ms ease;
}

.wordmark--large.wordmark--home:hover .logo,
.wordmark--large.wordmark--home:focus-visible .logo {
  filter: drop-shadow(0 0 0.9rem rgba(240, 200, 109, 0.5));
  transform: scale(1.02);
}

.wordmark--large.wordmark--home:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 0.4rem;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   The idle table: keep the instruction with the thing it refers to
   ---------------------------------------------------------------------------
   .stage reserves a full card's height so the board does not lurch when one is dealt.
   That is right while a card is in play, but before the draw the slot is empty and the
   only thing on screen - "Which pile?" - was rendering 456px below the piles it is
   asking about, with nothing in between.

   The slot collapses while #stageCard is empty, and .table anchors to the top so the
   piles themselves never move. The card still opens its space below them on the draw. */
.table:has(#stageCard:empty) .stage {
  min-height: 4.5rem;
}
.daily-voyage-menu {
  width: min(92vw, 46rem);
  padding-top: 1.15rem;
  border-color: rgba(224, 181, 75, 0.46);
  background:
    radial-gradient(circle at 50% 0, rgba(29, 100, 105, 0.35), transparent 46%),
    linear-gradient(155deg, rgba(19, 48, 56, 0.99), rgba(7, 25, 34, 0.99) 70%);
  color: var(--bone);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.76), inset 0 1px rgba(255, 232, 164, 0.08);
}

.daily-voyage-menu > h2 {
  margin: 0 2.5rem 0.8rem;
  color: #f4d98f;
  font: 700 clamp(2rem, 7vw, 3.1rem)/1 var(--font-display);
  letter-spacing: 0.025em;
  text-align: center;
  text-shadow: 0 2px 0 #091a20, 0 0 1rem rgba(224, 181, 75, 0.2);
}

.hunt-launch-option--daily .btn {
  background: linear-gradient(135deg, #176f77, #0f515d);
  border-color: #8cd5d1;
  color: #fff8dd;
}
.hunt-launch-option--speed .btn {
  background: linear-gradient(135deg, #a13b35, #67252d);
  border-color: #f0a56f;
  color: #fff4dc;
}
.hunt-launch-option--long .btn {
  background: linear-gradient(135deg, #704622, #3f2b1c);
  border-color: #e0b54b;
  color: #fff3cf;
}
.speed-run-menu {
  border-color: rgba(240, 165, 111, 0.58);
  background:
    radial-gradient(circle at 50% 0, rgba(170, 61, 50, 0.34), transparent 46%),
    linear-gradient(155deg, rgba(57, 35, 39, 0.99), rgba(25, 20, 29, 0.99) 70%);
}
.speed-run-menu > h2 { color: #ffc58f; }
.speed-run-menu .daily-voyage-captain {
  border-color: rgba(240, 165, 111, 0.4);
  background: linear-gradient(135deg, rgba(112, 48, 43, 0.78), rgba(45, 27, 37, 0.92));
}
.speed-run-menu .daily-voyage-captain-copy h3 { color: #f0a56f; }
.speed-run-attempt {
  margin: 0.85rem 0 0;
  color: #ffc58f;
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
}
.hunt-launch-option--odyssey .btn {
  background: linear-gradient(135deg, #553775, #302344);
  border-color: #c4a5df;
  color: #fff4ff;
}
.long-voyage-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 1rem;
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(224, 181, 75, 0.38);
  border-radius: 0.55rem;
  background: rgba(49, 31, 17, 0.82);
  color: #f2d99c;
  font: 700 0.75rem/1.3 var(--font-ui);
}
.long-voyage-menu { border-color: rgba(224, 181, 75, 0.68); }
.long-voyage-choice-note { flex-basis: 100%; margin: 0; color: #e8d6a8; text-align: center; }

.daily-voyage-briefing,
.daily-leaderboard {
  padding: 1rem;
  border: 1px solid rgba(115, 193, 191, 0.3);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, rgba(9, 38, 47, 0.86), rgba(5, 27, 36, 0.9));
  color: #d8e1e2;
  box-shadow: inset 0 1px rgba(211, 247, 239, 0.05);
}

.daily-voyage-intro {
  max-width: 39rem;
  margin: 0 auto 1rem;
  color: #d8e1e2;
  font-size: 0.88rem;
  line-height: 1.55;
  text-align: center;
}

.challenge-award-priority,
.challenge-leaderboard-rule {
  width: min(100%, 38rem);
  margin: 0 auto 0.9rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(224, 181, 75, 0.34);
  border-radius: 0.55rem;
  background: rgba(80, 55, 15, 0.24);
  color: #e9dfc2;
  font-size: 0.76rem;
  line-height: 1.4;
  text-align: center;
}

.challenge-award-priority strong,
.challenge-leaderboard-rule strong {
  color: #f1d780;
}

.challenge-leaderboard-rule {
  display: grid;
  gap: 0.2rem;
}

.daily-voyage-captain {
  display: grid;
  grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 0.85rem;
  border: 1px solid rgba(224, 181, 75, 0.34);
  border-radius: 0.65rem;
  background: linear-gradient(135deg, rgba(29, 80, 87, 0.76), rgba(11, 42, 51, 0.9));
}

.daily-voyage-captain-art {
  display: grid;
  place-items: end center;
  align-self: stretch;
  min-height: 10rem;
  overflow: hidden;
  border-radius: 0.5rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(112, 196, 189, 0.25), transparent 56%),
    rgba(4, 20, 27, 0.62);
}

.daily-voyage-captain-portrait {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 13rem;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 0.65rem 0.75rem rgba(0, 0, 0, 0.52));
}

.daily-voyage-captain-copy h3 {
  margin: 0.55rem 0 0.3rem;
  color: #82d8cc;
  font: 700 1.1rem/1.15 var(--font-display);
}

.daily-voyage-captain-copy p,
.daily-voyage-briefing > #dailyVoyageAttempt {
  margin: 0;
  color: #c6d4d5;
  font-size: 0.78rem;
  line-height: 1.45;
}

.daily-voyage-captain-name {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.05rem 0.55rem;
}

.daily-voyage-captain-name .captain-ability-mark {
  grid-row: 1 / 3;
  width: 2.5rem;
  height: 2.5rem;
}

.daily-voyage-captain-name > span:not(.captain-ability-mark) {
  color: #91aeb2;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.daily-voyage-captain-name strong {
  min-width: 0;
  max-width: 100%;
  color: #f4d98f;
  font: 700 1.35rem/1.1 var(--font-display);
  white-space: nowrap;
}
.daily-voyage-captain-name.has-long-captain-name strong { font-size: 0.96rem; }
.daily-voyage-captain-name.has-very-long-captain-name strong { font-size: 0.8rem; }

.odyssey-captain-choice {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(5.5rem, 0.42fr) minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.odyssey-captain-choice:disabled { opacity: 1; cursor: default; }
.odyssey-captain-choice:not(:disabled):hover .daily-voyage-captain-portrait,
.odyssey-captain-choice:not(:disabled):focus-visible .daily-voyage-captain-portrait {
  filter: drop-shadow(0 0 0.7rem rgba(196, 165, 223, 0.72));
}
.odyssey-captain-choice .daily-voyage-captain-copy {
  display: grid;
  align-content: start;
  justify-items: center;
  min-width: 0;
  padding-top: 0.2rem;
  text-align: center;
}
.odyssey-captain-choice .daily-voyage-captain-name {
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  justify-content: center;
  row-gap: 0.95rem;
  width: 100%;
}
.odyssey-captain-choice .daily-voyage-captain-name > span:not(.captain-ability-mark) {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
}
.odyssey-captain-choice .daily-voyage-captain-name .captain-ability-mark {
  grid-column: 1;
  grid-row: 2;
}
.odyssey-captain-choice .daily-voyage-captain-name strong {
  grid-column: 2;
  grid-row: 2;
}
.odyssey-captain-hint {
  display: block;
  justify-self: start;
  width: calc(100% - 1rem);
  margin-top: 0.65rem;
  margin-left: 1rem;
  color: #c8bea8;
  text-align: center;
}

.daily-voyage-briefing > #dailyVoyageAttempt {
  margin-top: 0.85rem;
  color: #f0d795;
  text-align: center;
}

.daily-voyage-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin: 1rem 0;
}

.daily-leaderboard-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  width: min(100%, 28rem);
  margin: 0 auto 0.8rem;
}

.daily-leaderboard-scope button {
  appearance: none;
  padding: 0.58rem 0.7rem;
  border: 1px solid rgba(115, 193, 191, 0.42);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(18, 58, 68, 0.98), rgba(7, 32, 41, 0.98));
  color: #d9e6e5;
  font-weight: 700;
  cursor: pointer;
}

.daily-leaderboard-scope button[aria-pressed="true"] {
  border-color: #82d8cc;
  background: linear-gradient(180deg, #247c80, #14535d);
  color: #fff8dd;
}

.daily-leaderboard-back {
  display: block;
  margin: 0 0 0.85rem;
}

.daily-leaderboard-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.35rem;
  border: 1px solid rgba(224, 181, 75, 0.24);
  border-radius: 0.7rem;
  background: rgba(3, 20, 28, 0.68);
}

.daily-leaderboard-metrics button {
  appearance: none;
  min-height: 3rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(224, 181, 75, 0.32);
  border-radius: 0.5rem;
  background: linear-gradient(180deg, rgba(38, 65, 71, 0.96), rgba(17, 43, 51, 0.98));
  color: #e5ece9;
  font: 700 0.75rem/1.25 var(--font-ui);
  cursor: pointer;
}

.daily-leaderboard-metrics button:hover,
.daily-leaderboard-metrics button:focus-visible {
  border-color: #82d8cc;
  background: linear-gradient(180deg, rgba(39, 101, 105, 0.98), rgba(18, 63, 70, 0.98));
}

.daily-leaderboard-metrics button[aria-selected="true"] {
  border-color: #e0b54b;
  background: linear-gradient(180deg, rgba(126, 91, 27, 0.98), rgba(73, 49, 14, 0.98));
  color: #fff1c4;
  box-shadow: inset 0 1px rgba(255, 235, 176, 0.16), 0 0 0.65rem rgba(224, 181, 75, 0.16);
}

.daily-leaderboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .15rem .75rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid rgba(115, 193, 191, 0.16);
  border-radius: 0.45rem;
  background: rgba(5, 27, 35, 0.62);
  color: #e7ece9;
}

.daily-leaderboard-rows { display: grid; gap: 0.4rem; }
.daily-leaderboard-row small { grid-column: 1 / -1; color: #9fb3b6; }
.daily-leaderboard-row.is-you {
  border-color: rgba(224, 181, 75, 0.48);
  color: #f4d98f;
  background: linear-gradient(90deg, rgba(111, 76, 18, 0.25), rgba(8, 34, 42, 0.75));
}
.daily-leaderboard-row.is-loss {
  border-color: rgba(150, 158, 158, 0.14);
  background: rgba(20, 29, 32, 0.55);
  color: #8d999a;
  filter: grayscale(1);
}
.daily-leaderboard-row.is-loss small { color: #748082; }
.daily-leaderboard-row.is-loss.is-you { border-color: rgba(181, 168, 137, 0.32); }

.odyssey-leaderboard-row {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.odyssey-leaderboard-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
}

.odyssey-leaderboard-summary > strong {
  color: #9adbd5;
  font-size: 1.05rem;
}

.odyssey-leaderboard-metrics {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.odyssey-leaderboard-treasure {
  color: #f4d98f;
  font-size: 1.05rem;
  white-space: nowrap;
}

.odyssey-leaderboard-rounds {
  color: #aebfc0;
  font-size: 0.72rem;
  white-space: nowrap;
}

.odyssey-leaderboard-details {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.28rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(224, 181, 75, 0.28);
  color: #d9e1df;
  font-size: 0.76rem;
}

.odyssey-leaderboard-details[hidden] { display: none; }

.odyssey-leaderboard--returned {
  border-color: rgba(240, 200, 109, 0.68);
  background: radial-gradient(circle at 50% 0, rgba(169, 116, 30, 0.25), transparent 45%),
    linear-gradient(180deg, rgba(40, 69, 68, 0.96), rgba(8, 31, 38, 0.96));
  box-shadow: inset 0 1px rgba(255, 239, 179, 0.22), 0 0 1.4rem rgba(224, 181, 75, 0.16);
}

.odyssey-leaderboard--returned .odyssey-leaderboard-row {
  border-color: rgba(240, 200, 109, 0.38);
  background: linear-gradient(90deg, rgba(125, 83, 19, 0.3), rgba(8, 39, 44, 0.74));
}

.odyssey-leaderboard-row.is-loss {
  filter: grayscale(0.72);
}

@media (max-width: 520px) {
  .odyssey-leaderboard-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.28rem;
  }

  .odyssey-leaderboard-metrics {
    justify-content: flex-start;
  }

  .daily-voyage-menu { padding: 0.9rem 0.75rem 1rem; }
  .daily-voyage-menu > h2 { margin-bottom: 0.65rem; font-size: clamp(1.9rem, 10vw, 2.5rem); }
  .daily-voyage-captain { grid-template-columns: 7rem minmax(0, 1fr); gap: 0.7rem; padding: 0.65rem; }
  .daily-voyage-captain-art { min-height: 9rem; place-items: center; }
  .daily-voyage-captain-portrait { object-position: center; }
  .daily-voyage-captain-name {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    row-gap: 0.45rem;
    margin-bottom: 0.55rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(130, 216, 204, 0.18);
  }
  .daily-voyage-captain-name .captain-ability-mark {
    grid-column: 1;
    grid-row: 2;
    width: 2.35rem;
    height: 2.35rem;
    margin-right: 0.1rem;
  }
  .daily-voyage-captain-name > span:not(.captain-ability-mark) {
    grid-column: 1 / -1;
    grid-row: 1;
    white-space: nowrap;
    line-height: 1.25;
  }
  .daily-voyage-captain-name strong {
    grid-column: 2;
    grid-row: 2;
    font-size: 1.1rem;
  }
  .daily-voyage-captain-name.has-long-captain-name strong { font-size: 0.82rem; }
  .daily-voyage-captain-name.has-very-long-captain-name strong { font-size: 0.7rem; }
  .daily-voyage-captain-copy h3 { margin-top: 0; font-size: 0.95rem; }
  .daily-voyage-captain-copy p { font-size: 0.7rem; }
  .daily-leaderboard-metrics { grid-template-columns: 1fr; }
  .daily-leaderboard-metrics button { min-height: 2.55rem; }
}

/* ---------------------------------------------------------------- home navigation */

.lobby-personal-footer {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  width: 100%;
  margin-bottom: 0.45rem;
  padding: 0.75rem;
  border: 1px solid rgba(224, 181, 75, 0.24);
  border-radius: 0.65rem;
  background: linear-gradient(180deg, rgba(10, 43, 52, 0.7), rgba(4, 23, 31, 0.78));
  box-shadow: inset 0 1px rgba(255, 236, 181, 0.05);
}

.lobby-rank-summary {
  display: grid;
  gap: 0.6rem;
  width: min(100%, 18rem);
  margin: 0.45rem auto 0;
}

.lobby-rank-summary[hidden] { display: none; }

.lobby-rank-row {
  width: 100%;
  padding: 0.35rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  display: grid;
  grid-template-columns: 2rem 3.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-2);
  font-size: 0.72rem;
  text-align: left;
  cursor: pointer;
}

.lobby-rank-row:hover,
.lobby-rank-row:focus-visible {
  border-color: rgba(224, 181, 75, 0.45);
  background: rgba(224, 181, 75, 0.1);
}

.lobby-rank-row .ranked-crest { width: 2rem; height: 2rem; }
.lobby-versus-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(158, 217, 212, 0.72);
  border-radius: 50%;
  color: #f5cf6f;
  background: radial-gradient(circle, rgba(20, 91, 103, 0.94), rgba(3, 25, 34, 0.98));
  font: 800 0.62rem/1 var(--font-label);
  letter-spacing: 0.05em;
}
.lobby-rank-row strong { color: var(--bone); text-align: left; }

/* Luminary #5 shares her original portrait while a cooler rose-violet light identifies
   the private rules experiment in every picker, lobby badge, and live-game portrait. */
.luminary-five-portrait {
  filter: hue-rotate(54deg) saturate(1.3) brightness(1.04);
}

.luminary-two-portrait { filter: hue-rotate(305deg) saturate(1.35) brightness(1.06); }
.luminary-four-portrait { filter: hue-rotate(207deg) saturate(1.42) brightness(1.08); }
.healer-five-portrait { filter: hue-rotate(102deg) saturate(1.52) brightness(1.05); }
.blank-one-portrait { filter: grayscale(1) brightness(1.08); }
.blank-two-portrait { filter: grayscale(1) sepia(.35) hue-rotate(145deg) saturate(1.5); }
.blank-three-portrait { filter: grayscale(1) sepia(.45) hue-rotate(325deg) saturate(1.7); }
.blank-four-portrait { filter: grayscale(1) sepia(.4) hue-rotate(215deg) saturate(1.55); }
.veteran-two-portrait { filter: hue-rotate(145deg) saturate(1.35) brightness(1.05); }
.veteran-three-portrait { filter: hue-rotate(245deg) saturate(1.4) brightness(1.07); }
.veteran-five-portrait { filter: hue-rotate(42deg) saturate(1.48) brightness(1.07); }
.veteran-six-portrait { filter: hue-rotate(188deg) saturate(1.46) brightness(1.08); }
.veteran-seven-portrait { filter: hue-rotate(226deg) saturate(1.42) brightness(1.06); }
.quartermaster-two-portrait { filter: hue-rotate(188deg) saturate(1.4) brightness(1.07); }

/* Automaton #2 reuses the original painting with a private copper-blue calibration. */
.automaton-two-portrait {
  filter: hue-rotate(32deg) saturate(1.35) brightness(1.08);
}

/* Automaton #3 reuses the original painting with a private violet-steel calibration. */
.automaton-three-portrait {
  filter: hue-rotate(205deg) saturate(1.2) brightness(1.06);
}

.automaton-four-portrait {
  filter: hue-rotate(285deg) saturate(1.28) brightness(1.04);
}

.automaton-five-portrait {
  filter: hue-rotate(105deg) saturate(1.25) brightness(1.07);
}

.automaton-six-portrait {
  filter: hue-rotate(155deg) saturate(1.35) brightness(1.05);
}

.automaton-seven-portrait {
  filter: hue-rotate(245deg) saturate(1.32) brightness(1.08);
}

/* Historical Sentinel #2 records may still render in old Ranked views. */
.sentinel-two-portrait {
  filter: hue-rotate(58deg) saturate(1.38) brightness(1.08);
}

.cartographer-four-portrait {
  filter: hue-rotate(118deg) saturate(1.35) contrast(1.05);
}

.treasure-hunter-portrait {
  filter: hue-rotate(238deg) saturate(1.5) brightness(1.08) contrast(1.08);
}

.treasure-hunter-two-portrait {
  filter: hue-rotate(302deg) saturate(1.45) brightness(1.07) contrast(1.08);
}

.treasure-hunter-three-portrait {
  filter: hue-rotate(62deg) saturate(1.48) brightness(1.08) contrast(1.08);
}

.treasure-hunter-four-portrait {
  filter: hue-rotate(172deg) saturate(1.5) brightness(1.08) contrast(1.08);
}

.treasure-hunter-five-portrait {
  filter: hue-rotate(25deg) saturate(1.55) brightness(1.06) contrast(1.1);
}

.treasure-hunter-six-portrait {
  filter: hue-rotate(205deg) saturate(1.52) brightness(1.08) contrast(1.09);
}

.treasure-hunter-seven-portrait {
  filter: hue-rotate(92deg) saturate(1.58) brightness(1.07) contrast(1.1);
}

.treasure-hunter-eight-portrait {
  filter: hue-rotate(242deg) saturate(1.55) brightness(1.08) contrast(1.1);
}

/* Identity mid-hunt, where the lobby veil cannot reach. Names are player-chosen, so the
   chip truncates rather than pushing the rest of the masthead off a phone. */
.masthead-account {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hunt-launch-lead {
  display: grid;
  gap: 0.7rem;
  justify-items: center;
  width: 100%;
}

.hunt-launch-lead > .btn {
  width: min(100%, 12rem);
  min-height: 2.55rem;
}

/* ---------------------------------------------------------------------------
   Landscape-phone lobby command deck

   A landscape phone is wide, not narrow. The former lobby inherited the portrait stack,
   enlarged it to the phone's width, then made every setup step a long document. These
   rules deliberately use the width: navigation becomes horizontal, configuration becomes
   a shallow control deck, and only genuinely long content (hunt lists, expanded records,
   challenge details) scrolls inside its own region. No live-game surface is affected.
   --------------------------------------------------------------------------- */
@media (max-width: 60rem) and (max-height: 32rem) and (orientation: landscape) {
  .veil:has(> .sheet--title) {
    align-items: flex-start;
    padding: max(0.3rem, env(safe-area-inset-top, 0px))
      max(0.55rem, env(safe-area-inset-right, 0px))
      max(0.3rem, env(safe-area-inset-bottom, 0px))
      max(0.55rem, env(safe-area-inset-left, 0px));
    overflow-x: hidden;
  }

  .veil > .sheet--title {
    align-items: stretch;
    width: min(100%, 60rem);
    min-height: calc(100dvh - 0.6rem);
    margin: 0 auto;
    padding: 0;
    text-align: left;
  }

  .sheet--title > .wordmark--large {
    flex: 0 0 auto;
    align-self: center;
    margin: 0 0 0.18rem;
    line-height: 1;
  }

  .sheet--title > .wordmark--large .logo,
  .sheet--title:has(#hostControls[hidden]) .wordmark--large .logo {
    width: auto;
    height: clamp(2.15rem, 11dvh, 3rem);
  }

  .sheet--title > .tagline {
    display: none;
  }

  .sheet--title .title-body,
  .sheet--title .title-body:has(> .lobby-captain:empty) {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0;
    width: 100%;
  }

  .sheet--title .title-controls {
    align-items: stretch;
    width: 100%;
    min-height: 0;
    padding: 0.45rem;
    border-radius: 0.55rem;
  }

  .sheet--title .title-controls .btn {
    min-height: 2.25rem;
    padding: 0.35rem 0.62rem;
    font-size: clamp(0.69rem, 1.8vw, 0.82rem);
    line-height: 1.1;
  }

  /* Home: primary navigation occupies the top rail; support tools form one quiet footer. */
  .sheet--title .title-controls--look-7 {
    display: grid;
    grid-template-columns: minmax(10rem, 0.72fr) minmax(18rem, 1.28fr);
    grid-template-rows: auto auto;
    align-items: stretch;
    gap: 0.42rem;
  }

  .title-controls--look-7 .lobby-home-panel {
    width: 100%;
    min-width: 0;
    padding: 0.42rem;
    border-radius: 0.55rem;
  }

  .title-controls--look-7 .lobby-home-panel--onboarding {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    align-content: stretch;
  }

  .title-controls--look-7 .lobby-home-panel--onboarding[hidden] + .lobby-home-panel--hunt {
    grid-column: 1 / -1;
  }

  .title-controls--look-7 .lobby-home-panel--hunt {
    grid-column: 2;
    grid-row: 1;
    align-content: start;
    padding: 0.42rem;
  }

  .title-controls--look-7 .lobby-home-panel--support {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.55fr);
    align-items: start;
    gap: 0.42rem;
  }

  .title-controls--look-7 #newPlayerButton {
    width: 100%;
    height: 100%;
    min-height: 4.95rem;
    margin: 0;
  }

  .title-controls--look-7 .new-player-parrot {
    width: clamp(2rem, 7dvh, 2.8rem);
  }

  .title-controls--look-7 .hunt-launch-lead {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.38rem;
  }

  .title-controls--look-7 .hunt-launch-lead > .btn {
    width: 100%;
    min-height: 2.25rem;
  }

  .title-controls--look-7 .hunt-launch-lead > #startHuntButton {
    grid-column: 1;
    grid-row: 1;
  }

  .title-controls--look-7 .hunt-launch-lead > #joinHuntButton {
    grid-column: 2;
    grid-row: 1;
  }

  .title-controls--look-7 .hunt-launch-options {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
    width: 100%;
  }

  .title-controls--look-7 .hunt-launch-option {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }

  .title-controls--look-7 .hunt-launch-option .btn {
    width: 100%;
  }

  .title-controls--look-7 .hunt-launch-option p {
    display: -webkit-box;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    font-size: 0.61rem;
    line-height: 1.15;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .title-controls--look-7 .hunt-challenges {
    grid-column: 1 / -1;
    border-radius: 0.48rem;
  }

  .title-controls--look-7 .hunt-challenges > summary {
    padding: 0.48rem 0.7rem;
    font-size: 0.66rem;
  }

  .title-controls--look-7 .hunt-challenges-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
    max-height: 42dvh;
    padding: 0.35rem;
    overflow-y: auto;
  }

  .title-controls--look-7 .hunt-launch-challenge-heading {
    grid-column: 1 / -1;
    margin: 0.08rem 0;
    font-size: 0.58rem;
  }

  .title-controls--look-7 .tablelist {
    grid-column: 1 / -1;
    width: 100%;
    max-height: 48dvh;
    margin: 0;
    overflow-y: auto;
  }

  .title-controls--look-7 .lobby-records {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
    margin: 0;
  }

  .title-controls--look-7 .lobby-home-panel--footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 0.32rem;
    width: 100%;
  }

  .title-controls--look-7 .lobby-personal-footer {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 0.28rem;
    margin: 0;
    padding: 0.32rem;
    border-radius: 0.45rem;
  }

  .title-controls--look-7 .lobby-personal-footer > * {
    min-width: 0;
    width: 100%;
    margin: 0;
  }

  .title-controls--look-7 :is(.records-disclosure, .lobby-sound-settings) {
    width: 100%;
    margin: 0;
  }

  .title-controls--look-7 .lobby-sound-settings {
    gap: 0.3rem;
  }

  .title-controls--look-7 :is(.records-disclosure, .audio-disclosure) > summary {
    min-height: 2.25rem;
    padding: 0.42rem 0.55rem;
    font-size: 0.68rem;
  }

  .title-controls--look-7 :is(.records-disclosure[open], .audio-disclosure[open]) {
    position: relative;
    z-index: 2;
  }

  /* Setup pages: use the spare width for a captain rail and a compact configuration deck. */
  .sheet--title .title-controls:not(.title-controls--look-7):has(> .crewpick:not([hidden])) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(10.5rem, 0.62fr) minmax(20rem, 1.38fr);
    align-items: start;
    gap: 0.5rem;
  }

  .title-controls:not(.title-controls--look-7) > .crewpick:not([hidden]) {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin: 0;
    padding: 0.42rem;
    border: 1px solid rgba(224, 181, 75, 0.28);
    border-radius: 0.5rem;
    background: rgba(4, 18, 26, 0.68);
  }

  .title-controls:not(.title-controls--look-7):has(> .crewpick:not([hidden])) > .lobby-home-panel--hunt,
  .title-controls:not(.title-controls--look-7):has(> .crewpick:not([hidden])) > .lobby-home-panel--support {
    grid-column: 2;
  }

  .title-controls:not(.title-controls--look-7):has(> .crewpick:not([hidden])) > .lobby-home-panel--hunt {
    grid-row: 1;
  }

  /* hostControls and its surrounding support wrapper intentionally use display: contents,
     so the launch scroll participates directly in this grid. Keep the voyage's primary
     action beside the captain and directly below the name instead of auto-placing it under
     the tall portrait rail. */
  .title-controls:not(.title-controls--look-7):has(> .crewpick:not([hidden])) #startButton:not([hidden]) {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: center;
    width: min(12rem, 46%);
    margin: 5rem auto 0;
  }

  .title-controls:not(.title-controls--look-7):has(> .crewpick:not([hidden])) #nameField:not([hidden]) {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    left: calc(30% + 0.75rem);
    width: auto;
  }

  .sheet--title .crewpick .field-label {
    margin-bottom: 0.28rem;
    font-size: 0.64rem;
  }

  .sheet--title .crewpick-row {
    grid-template-columns: 2rem minmax(0, 6.25rem) 2rem;
    gap: 0.3rem;
  }

  .sheet--title .crewpick-row.crewpick-row--single {
    grid-template-columns: minmax(0, 6.25rem);
  }

  .sheet--title .captain-carousel-window,
  .sheet--title .crewpick-row--single .captain-carousel-window {
    width: min(100%, 6.25rem);
  }

  .sheet--title .crewtile {
    padding: 0.25rem;
  }

  .sheet--title .crewtile-face,
  .sheet--title .crewtile-portrait-wrap {
    max-width: 4rem;
  }

  .sheet--title .crewtile-note {
    display: none;
  }

  .sheet--title .captain-carousel-arrow {
    width: 2rem;
    font-size: 1.25rem;
  }

  .sheet--title .random-captain-button {
    width: 100%;
    margin-top: 0.35rem;
  }

  .sheet--title .joinform {
    gap: 0.35rem;
  }

  .sheet--title .joinform .field {
    width: min(100%, 28rem);
  }

  .sheet--title #hostControls {
    width: 100%;
    margin-top: 0;
  }

  .sheet--title #hostControls:has(#modeChoices:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.38rem;
  }

  .sheet--title #modeChoices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
    margin: 0;
  }

  .sheet--title #modeChoices.mode-layout--2 .pick {
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    min-height: 4.65rem;
    margin: 0;
    padding: 0.42rem;
  }

  .sheet--title #modeChoices .pick strong {
    font-size: 0.76rem;
  }

  .sheet--title #modeChoices .pick em {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.59rem;
    line-height: 1.15;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .sheet--title .match-format {
    grid-template-columns: auto repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 0.3rem;
    padding: 0.32rem;
  }

  .sheet--title .match-format legend {
    display: none;
  }

  .sheet--title .match-format::before {
    content: 'Hunt Length';
    padding-inline: 0.35rem;
    color: var(--brass);
    font: 700 0.58rem/1 var(--font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .sheet--title .match-format .pick span {
    min-height: 2.35rem;
    padding: 0.32rem 0.45rem;
  }

  .sheet--title .match-format .badge {
    display: none;
  }

  .sheet--title .match-format .pick em {
    display: none;
  }

  .sheet--title .prepare-embark {
    width: min(100%, 18rem);
    margin: 0 auto;
  }

  /* Casual style is a centered, equal four-choice rail instead of an off-axis 2x2 stack. */
  .sheet--title .voyage-readiness,
  .sheet--title #casualPlayStyle {
    width: 100%;
    margin: 0 auto;
    padding: 0.42rem;
  }

  .sheet--title .casual-play-style-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: center;
    gap: clamp(0.35rem, 1.2vw, 0.65rem);
    width: min(100%, 48rem);
    margin-inline: auto;
  }

  .sheet--title .casual-play-style-options button {
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 5.2rem;
    padding: 0.48rem;
    text-align: center;
  }

  .sheet--title .casual-play-style-options strong {
    font-size: clamp(0.68rem, 1.75vw, 0.84rem);
  }

  .sheet--title .casual-play-style-options small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.58rem;
    line-height: 1.15;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  /* Prepared voyages use two columns; the start scroll remains the centered final beat. */
  .sheet--title #hostControls.host-controls--setup {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0.42rem;
    margin-top: 0;
  }

  .sheet--title #hostControls.host-controls--setup > :is(.setup-crew, .voyage-readiness, .voyage-privacy, .bot-crew-setup) {
    width: 100%;
    margin: 0;
  }

  .sheet--title #hostControls.host-controls--setup > .start-hunt-scroll-button {
    grid-column: 1 / -1;
    width: min(100%, 12.5rem);
    margin: 0 auto;
  }

  .sheet--title .lobby-box {
    min-height: 0;
  }

  .sheet--title #lobbyFlowBack,
  .sheet--title #mainLobbyButton,
  .sheet--title .back-to-main-lobby {
    width: auto;
    min-height: 2.1rem;
    margin: 0.32rem auto 0;
  }

  /* The Ranked hub remains information-dense, but its three paths now use the width. */
  .sheet--title .ranked-hub {
    width: 100%;
    padding: 0.42rem;
  }

  .sheet--title .ranked-featured-copy {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.38rem;
  }

  /* Landscape lobby repair: keep expanded hunt content in normal flow; utilities get their own
     column below, so opening a menu cannot overlap another control. */
  .sheet--title > .wordmark--large {
    display: grid;
    min-height: clamp(3.8rem, 19dvh, 5rem);
    place-items: center;
  }

  .sheet--title > .wordmark--large .logo,
  .sheet--title:has(#hostControls[hidden]) .wordmark--large .logo {
    content: url('/art/logo-horizontal.webp');
    width: auto;
    height: clamp(3.3rem, 17dvh, 4.4rem);
    max-width: none;
    max-height: none;
    object-fit: contain;
  }

  .sheet--title .title-controls--look-7 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 0.45rem;
    padding: 0.55rem;
  }

  .title-controls--look-7 .lobby-home-panel--hunt {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    align-content: start;
    width: 100%;
    min-height: 0;
    padding: 0.4rem;
  }

  .title-controls--look-7 .hunt-launch-lead {
    width: 100%;
  }

  .title-controls--look-7 .hunt-launch-lead > .btn {
    min-height: 3.25rem;
  }

  .title-controls--look-7 .lobby-home-panel--onboarding {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    justify-items: center;
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .title-controls--look-7 #newPlayerButton {
    width: min(100%, 17rem);
    min-height: 2.65rem;
    height: auto;
  }

  .title-controls--look-7 .lobby-home-panel--support {
    grid-column: 1;
    grid-row: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.55rem;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .title-controls--look-7 .lobby-records {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    width: min(100%, 34rem);
    margin-inline: auto;
  }

  .title-controls--look-7 .lobby-home-panel--footer {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    align-items: start;
    gap: 0.55rem;
    width: min(100%, 38rem);
    margin-inline: auto;
  }

  .title-controls--look-7 .lobby-personal-footer {
    grid-column: 1 / -1;
    display: contents;
  }

  .title-controls--look-7 .lobby-personal-footer > :is(.you-account, .lobby-captains-log) {
    width: 100%;
    min-width: 0;
    min-height: 2.5rem;
    margin: 0;
    padding: 0.42rem 0.55rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .title-controls--look-7 .lobby-personal-footer > .you-account {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
    border: 1px solid rgba(158, 217, 212, 0.42);
    border-radius: 0.55rem;
    background: linear-gradient(180deg, rgba(11, 57, 68, 0.9), rgba(4, 30, 40, 0.94));
    box-shadow: none;
    position: relative;
    z-index: 1;
  }

  .title-controls--look-7 .lobby-personal-footer > .lobby-captains-log {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
    border: 1px solid rgba(158, 217, 212, 0.42);
    border-radius: 0.55rem;
    background: linear-gradient(180deg, rgba(11, 57, 68, 0.9), rgba(4, 30, 40, 0.94));
    box-shadow: none;
    position: relative;
    z-index: 1;
  }

  .title-controls--look-7 .lobby-personal-footer > .standings-disclosure {
    grid-column: 2;
    grid-row: 2;
  }

  .title-controls--look-7 .lobby-personal-footer > .account-notification-bell {
    position: absolute;
    top: 0.35rem;
    right: calc(min(15rem, 40%) + 0.55rem);
    z-index: 2;
  }

  .title-controls--look-7 #recordsDisclosure {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }

  .title-controls--look-7 .lobby-sound-settings {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: subgrid;
    gap: 0.55rem;
  }

  .title-controls--look-7 .lobby-sound-settings > .audio-disclosure {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .title-controls--look-7 .lobby-sound-settings > #feedbackLobbyButton {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    height: 2.5rem;
  }

  .title-controls--look-7 .lobby-sound-settings > :is(.sound-effects-button, .lobby-setting-toggle) {
    grid-column: 1;
  }

  .title-controls--look-7 :is(#recordsDisclosure, #lobbyStandings, #audioDisclosure, #feedbackLobbyButton) {
    width: 100%;
    min-width: 0;
    min-height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(158, 217, 212, 0.42);
    border-radius: 0.55rem;
    background: linear-gradient(180deg, rgba(11, 57, 68, 0.9), rgba(4, 30, 40, 0.94));
    color: #eaf2df;
    box-shadow: none;
  }

  .title-controls--look-7 :is(#recordsDisclosure, #lobbyStandings, #audioDisclosure):not([open]) {
    height: 2.5rem;
  }

  .title-controls--look-7 :is(.records-disclosure, .audio-disclosure) > summary {
    display: grid;
    min-height: 2.5rem;
    place-items: center;
    padding: 0.48rem 0.55rem;
    font-size: clamp(0.64rem, 1.65vw, 0.74rem);
    line-height: 1.2;
    text-align: center;
  }

  .title-controls--look-7 :is(.records-disclosure, .audio-disclosure) > summary {
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: #eaf2df;
  }

  .title-controls--look-7 :is(.records-disclosure, .audio-disclosure)[open] {
    z-index: 5;
    padding-bottom: 0.35rem;
    border-radius: 0.48rem;
    background: rgba(3, 20, 28, 0.98);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.48);
  }

  .title-controls--look-7 .records-disclosure-actions,
  .title-controls--look-7 .audiopick {
    position: static;
    margin-top: 0.3rem;
  }

  .title-controls--look-7 > .share {
    grid-column: 1;
    grid-row: 4;
    justify-self: center;
    max-width: 100%;
    margin: 0;
    padding: 0.22rem 0.55rem;
    font-size: 0.64rem;
    line-height: 1.25;
    text-align: center;
  }

  /* Expanded launch choices use proper title/copy blocks rather than two clamped lines. */
  .title-controls--look-7 .hunt-launch-options:not([hidden]) {
    align-items: stretch;
    gap: 0.45rem;
    max-height: none;
  }

  .title-controls--look-7 .hunt-launch-options > .hunt-launch-option {
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: start;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(158, 217, 212, 0.26);
    border-radius: 0.5rem;
    background: rgba(3, 20, 28, 0.72);
  }

  .title-controls--look-7 .hunt-launch-options > .hunt-launch-option p {
    display: block;
    min-height: 2.25rem;
    padding: 0.45rem 0.65rem 0.5rem;
    overflow: visible;
    color: #c8d5d4;
    font-size: clamp(0.62rem, 1.55vw, 0.72rem);
    line-height: 1.35;
    text-align: left;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  .title-controls--look-7 .hunt-challenges {
    overflow: hidden;
    border-color: rgba(224, 181, 75, 0.34);
  }

  .title-controls--look-7 .hunt-challenges > summary {
    min-height: 2.5rem;
    padding: 0.58rem 0.75rem;
    font-size: 0.7rem;
  }

  .title-controls--look-7 .hunt-challenges-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    max-height: none;
    padding: 0.45rem;
  }

  .title-controls--look-7 .hunt-launch-challenge-heading {
    grid-column: 1 / -1;
    padding: 0.2rem 0.35rem;
    font-size: 0.6rem;
    text-align: left;
  }

  .title-controls--look-7 .hunt-challenges-menu .hunt-launch-option {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(158, 217, 212, 0.2);
    border-radius: 0.42rem;
    background: rgba(3, 20, 28, 0.62);
  }

  .title-controls--look-7 .hunt-challenges-menu .hunt-launch-option p {
    display: block;
    min-height: 3rem;
    padding: 0.38rem 0.48rem 0.48rem;
    overflow: visible;
    font-size: 0.58rem;
    line-height: 1.3;
    text-align: left;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  /* Difficulty descriptions are content, not decoration: allow every line to render. */
  .sheet--title #modeChoices.mode-layout--2 .pick {
    align-items: flex-start;
    min-height: 6rem;
    padding: 0.58rem;
  }

  .sheet--title #modeChoices .pick em {
    display: block;
    overflow: visible;
    font-size: clamp(0.59rem, 1.45vw, 0.68rem);
    line-height: 1.32;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  /* Ranked is a three-route command deck on landscape phones, not the tall portrait
     marketing panel used on desktop. */
  .sheet--title .ranked-hub {
    width: 100%;
    margin: 0 auto;
    padding: 0.5rem;
  }

  .sheet--title .ranked-hub::before {
    inset: 0;
    border-radius: 0.65rem;
  }

  .sheet--title .ranked-hub-heading {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.4rem 0.5rem;
  }

  .sheet--title .ranked-hub-heading h2 {
    font-size: clamp(1rem, 2.8vw, 1.3rem);
  }

  .sheet--title .ranked-kicker,
  .sheet--title #rankedSeasonLabel {
    margin-top: 0.18rem;
    font-size: 0.56rem;
    letter-spacing: 0.1em;
  }

  .sheet--title .ranked-account-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 0 0 auto;
    gap: 0.35rem;
    width: min(42%, 18rem);
  }

  .sheet--title .ranked-account-actions .ranked-account-button {
    width: auto;
    min-width: 0;
    min-height: 2.4rem;
    padding: 0.42rem 0.5rem;
    overflow: hidden;
    font-size: 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sheet--title .ranked-featured {
    display: block;
    min-height: 0;
    padding: 0.55rem;
    border: 1px solid rgba(224, 181, 75, 0.3);
    border-radius: 0.55rem;
    background-position: center 38%;
    box-shadow: inset 0 -3rem 4rem rgba(0, 0, 0, 0.38);
  }

  .sheet--title .ranked-featured-crest {
    display: none;
  }

  .sheet--title .ranked-featured-copy {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.5rem;
  }

  .sheet--title .ranked-voyage-path,
  .sheet--title .ranked-voyage-path + .ranked-voyage-path {
    display: grid;
    grid-template-rows: auto minmax(3.4rem, 1fr) auto;
    align-content: start;
    justify-items: stretch;
    min-width: 0;
    margin: 0;
    padding: 0.55rem;
    border: 1px solid rgba(239, 196, 93, 0.26);
    border-radius: 0.48rem;
    background: rgba(3, 17, 25, 0.82);
  }

  .sheet--title .ranked-featured-copy h3 {
    margin: 0 0 0.3rem;
    font-size: clamp(0.86rem, 2vw, 1rem);
    line-height: 1.1;
  }

  .sheet--title .ranked-featured-copy > .ranked-voyage-path > p:not(.ranked-kicker) {
    margin: 0 0 0.45rem;
    font-size: clamp(0.58rem, 1.4vw, 0.68rem);
    line-height: 1.35;
  }

  .sheet--title .ranked-path-button {
    align-self: end;
    width: 100%;
    min-height: 2.45rem;
    margin: 0;
    font-size: 0.65rem;
  }

  .sheet--title .versus-crew-size {
    display: none;
  }

  .sheet--title .ranked-view-ladders {
    width: min(100%, 20rem);
    min-height: 2.45rem;
    margin: 0.5rem auto 0;
    padding: 0.42rem 0.8rem;
    font-size: 0.72rem;
  }

  .sheet--title .ranked-hub-footer {
    gap: 0.4rem;
    padding: 0.4rem 0.35rem 0;
  }

  .sheet--title .ranked-hub-footer .btn {
    min-height: 2.2rem;
  }
}

/* Home on short, wide screens: play on the left, help and personal tools on the
   right. Scope to the home state so setup, portrait and desktop retain their layout. */
@media (max-width: 60rem) and (max-height: 32rem) and (orientation: landscape) {
  .sheet--title:has(.title-controls--look-7) > .wordmark--large {
    min-height: 2.75rem;
    margin-bottom: 0.25rem;
  }

  .sheet--title:has(.title-controls--look-7) > .wordmark--large .logo {
    height: 2.75rem;
    max-width: 100%;
  }

  .sheet--title .title-controls--look-7 {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    align-items: start;
    gap: 0.5rem;
    padding: 0;
  }

  .title-controls--look-7 .lobby-home-panel--hunt,
  .title-controls--look-7 .lobby-home-panel--onboarding[hidden] + .lobby-home-panel--hunt {
    grid-column: 1;
    grid-row: 1 / 3;
    padding: 0.5rem;
  }

  .title-controls--look-7 .lobby-home-panel--onboarding {
    grid-column: 2;
    grid-row: 1;
  }

  .title-controls--look-7 #newPlayerButton {
    width: 100%;
    min-height: 44px;
  }

  .title-controls--look-7 .new-player-parrot {
    width: 1.75rem;
  }

  .title-controls--look-7 .lobby-home-panel--support {
    grid-column: 2;
    grid-row: 2;
    gap: 0.5rem;
  }

  .title-controls--look-7:has(#learnToPlayPanel[hidden]) .lobby-home-panel--support {
    grid-row: 1 / 3;
  }

  .title-controls--look-7 .lobby-records,
  .title-controls--look-7 .lobby-home-panel--footer,
  .title-controls--look-7 .lobby-sound-settings {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    width: 100%;
  }

  .title-controls--look-7 .lobby-home-panel--footer > *,
  .title-controls--look-7 .lobby-personal-footer > *,
  .title-controls--look-7 .lobby-sound-settings > *,
  .title-controls--look-7 #recordsDisclosure,
  .title-controls--look-7 .lobby-sound-settings > :is(#feedbackLobbyButton, .audio-disclosure, .sound-effects-button, .lobby-setting-toggle),
  .title-controls--look-7 .lobby-personal-footer > :is(.you-account, .lobby-captains-log, .standings-disclosure) {
    grid-column: auto;
    grid-row: auto;
  }

  .title-controls--look-7 .lobby-personal-footer {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }

  .title-controls--look-7 .lobby-personal-footer > .account-notification-bell {
    position: static;
    flex: 0 0 44px;
  }

  .sheet--title .title-controls--look-7 .btn,
  .title-controls--look-7 .lobby-personal-footer > :is(.you-account, .lobby-captains-log) {
    min-height: 44px;
    height: auto;
    padding: 0.5rem 0.6rem;
    font-size: 0.875rem;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .title-controls--look-7 :is(#recordsDisclosure, #lobbyStandings, #audioDisclosure):not([open]),
  .title-controls--look-7 .lobby-sound-settings > #feedbackLobbyButton {
    height: auto;
  }

  .title-controls--look-7 :is(.records-disclosure, .audio-disclosure, .hunt-challenges) > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.65rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    letter-spacing: 0.025em;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .title-controls--look-7 :is(.records-disclosure, .audio-disclosure, .hunt-challenges) > summary::after {
    flex: 0 0 auto;
  }

  .title-controls--look-7 .records-disclosure-actions {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 0.4rem;
  }

  .title-controls--look-7 .hunt-challenges-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .title-controls--look-7 .hunt-launch-options > .hunt-launch-option p,
  .title-controls--look-7 .hunt-challenges-menu .hunt-launch-option p {
    min-height: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .title-controls--look-7 .hunt-launch-challenge-heading {
    font-size: 0.75rem;
    white-space: normal;
  }

  .title-controls--look-7 .tablelist {
    max-height: none;
    overflow: visible;
  }

  .title-controls--look-7 .audiorow {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .title-controls--look-7 .audiorow input {
    min-width: 0;
    width: 100%;
  }

  .title-controls--look-7 #shareNote {
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
}