/*
 * Skyward Plunder - css/style.css
 * One committed look: dusk at the level of the clouds. Deep indigo deck UI around a
 * sunlit sky scene, drawn in a smooth illustrated style (no pixel art). The page never
 * switches to a light theme.
 *
 * Layout (SPEC-2 §18.5):
 *   >= 960 px   two columns: scene, battle strip and captain card left; tabbed ledger right.
 *   601-959 px  one column: scene (16:9, at most 58vh), battle strip, collapsible captain
 *               card, ledger with a sticky tab bar.
 *   <= 600 px   portrait phone: 4:3 scene (at most 46vh), a sticky battle strip with
 *               health, skill, Auto-advance and the purse, collapsible captain card, ledger,
 *               and a tab bar anchored to the bottom of the screen.
 *   height < 500 px landscape (e.g. 844 x 390): a centred 16:9 scene that fits 58vh, and the
 *               Challenge boss button in the battle strip (SPEC-3 §21).
 */

/* ----------------------------------------------------------------------------------
   Tokens
   ---------------------------------------------------------------------------------- */
:root {
  --sp-build: "sp-8";   /* build stamp, checked by js/main.js */
  color-scheme: dark;

  --night: #1b1f3a;   /* page background */
  --deck: #262b4d;    /* panels */
  --deck-2: #31375f;  /* raised rows / hover */
  --rope: #4a4f78;    /* lines, borders */
  --canvas: #f3e9d2;  /* main text */
  --mist: #a9aed0;    /* muted text */
  --brass: #e8b04a;   /* doubloons, primary buttons */
  --coral: #ff7a59;   /* damage, danger, boss */
  --sea: #5fd3c4;     /* positive deltas, healing */
  --pearl: #e9f1ff;   /* Sky Pearls */

  --r0: #b9bdd6;
  --r1: #6fd38a;
  --r2: #5aa8ff;
  --r3: #c084fc;
  --r4: #ffb347;
  --r5: #ff5c8a;
  /* Elite rarities (SPEC-3 §20.4). Eternal and Astral are gradients; --r8/--r9 are their
     representative colours. Each gradient starts and ends on the same stop so it tiles
     seamlessly when the shimmer slides it by one image width. */
  --r6: #8fe9ff;
  --r7: #ffe066;
  --r8: #ffcf5a;
  --r9: #b18cff;
  --g8: linear-gradient(100deg, #ffcf5a 0%, #fff3c4 25%, #ffcf5a 50%, #fff3c4 75%, #ffcf5a 100%);
  --g9: linear-gradient(100deg, #b18cff 0%, #ff8ad8 17%, #7fe3ff 33%, #b18cff 50%, #ff8ad8 67%, #7fe3ff 83%, #b18cff 100%);
  /* Crew rarities (SPEC-4 §22.1), separate from item rarities: Common, Rare, Epic, Legendary, Mythic */
  --cr0: #b9bdd6;
  --cr1: #5aa8ff;
  --cr2: #c084fc;
  --cr3: #ffb347;
  --cr4: #ff5c8a;

  /* Derived shades, kept explicit so every colour is set on purpose */
  --night-deep: #14172d;
  --deck-hover: #3a4170;
  --rope-hi: #5d6394;
  --brass-hi: #f3c56a;
  --brass-lo: #a8792a;
  --coral-hi: #ff9575;
  --pearl-lo: #b9c6e6;
  --veil: rgba(20, 23, 45, 0.86);  /* scene chips: opaque enough to read without a backdrop blur */

  --font-display: "IM Fell English SC", Georgia, serif;
  --font-body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --font-num: "Fredoka", "Alegreya Sans", system-ui, sans-serif;

  --radius-panel: 14px;
  --radius: 12px;
  --radius-sm: 10px;
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(5, 6, 18, 0.32);

  background-color: var(--night);
}

/* ----------------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--night);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(95, 110, 190, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(232, 176, 74, 0.05), transparent 70%);
  background-attachment: fixed;
  color: var(--canvas);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
body.has-modal { overflow: hidden; }

/* The host reset has this too; repeated so local previews behave the same. */
[hidden] { display: none !important; }

h1, h2, h3, h4, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; }

:where(button, [role="tab"], [role="radio"], select, input, a, [tabindex]):focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.muted { color: var(--mist); }
.small { font-size: 13px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The outer wrapper owns the side gutter (safe-area aware; never a padding shorthand). */
.app {
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  max-width: 1480px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 10px 28px;
  min-width: 0;
}

.card {
  background: linear-gradient(180deg, #2b3056 0%, var(--deck) 120px);
  border: 1px solid var(--rope);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
  min-width: 0;
}

/* Portraits, item icons and their fallbacks (smooth canvases from SP.render) */
.art-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}
.mono {
  --mc: var(--mist);
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.08), transparent 70%), var(--deck-2);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--mc) 30%, transparent), transparent 75%), var(--deck-2);
  color: var(--mc);
  font-family: var(--font-display);
  font-size: 1.3em;
  line-height: 1;
}
.mono.is-wait { color: transparent; }   /* the tile while its picture is being made (a moment) */
.ico { display: grid; place-items: center; width: 100%; height: 100%; }
.ico svg { width: 34px; height: 34px; display: block; overflow: visible; }

.coin,
.pearl {
  display: inline-block;
  flex: none;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  vertical-align: -0.08em;
}
.coin {
  background: radial-gradient(circle at 35% 30%, #fff1c4 0 18%, var(--brass) 40%, var(--brass-lo) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(122, 80, 20, 0.85);
}
.pearl {
  background:
    radial-gradient(circle at 33% 28%, #ffffff 0 14%, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 60% 70%, rgba(255, 214, 236, 0.55), rgba(255, 214, 236, 0) 55%),
    radial-gradient(circle at 45% 40%, var(--pearl) 0 40%, #c9d5f0 75%, #98a8d2 100%);
  box-shadow: inset 0 0 0 1px rgba(120, 138, 190, 0.6), 0 0 7px rgba(233, 241, 255, 0.35);
}

/* ----------------------------------------------------------------------------------
   Buttons, chips, bars, inputs
   ---------------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rope);
  background: linear-gradient(180deg, #363d68, var(--deck-2));
  box-shadow: var(--hi);
  color: var(--canvas);
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.08s;
}
.btn:hover { background: var(--deck-hover); border-color: var(--rope-hi); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, #f1c160, var(--brass) 55%, #dca23e);
  border-color: var(--brass-hi);
  color: var(--night);
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.55), 0 2px 8px rgba(168, 121, 42, 0.35);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #f6cd76, var(--brass-hi));
  border-color: #ffe0a0;
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.6), 0 2px 16px rgba(232, 176, 74, 0.35);
}
.btn-primary:active { box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.4), 0 1px 4px rgba(168, 121, 42, 0.35); }
.btn-pearl {
  background: linear-gradient(180deg, #f4f8ff, #d9e3f7);
  border-color: #ffffff;
  color: var(--night);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 10px rgba(185, 198, 230, 0.3);
}
.btn-pearl:hover { background: linear-gradient(180deg, #ffffff, #e6edfb); border-color: #ffffff; box-shadow: 0 0 16px rgba(233, 241, 255, 0.35); }
.btn-danger { color: var(--coral); border-color: rgba(255, 122, 89, 0.45); background: rgba(255, 122, 89, 0.06); }
.btn-danger:hover { background: rgba(255, 122, 89, 0.14); border-color: var(--coral); }
.btn.is-armed { background: var(--coral); border-color: var(--coral-hi); color: var(--night); }
/* A pearl purchase waiting for its second tap */
.btn.is-confirm {
  background: var(--night-deep);
  border-color: var(--pearl);
  color: var(--pearl);
  box-shadow: 0 0 0 1px var(--pearl), 0 0 18px rgba(233, 241, 255, 0.3);
}
.btn-sm { min-height: 40px; padding: 0 12px; font-size: 14px; }
.btn-lg { min-height: 50px; padding: 0 26px; font-size: 17px; font-weight: 800; }
.btn:disabled,
.btn[aria-disabled="true"] {
  background: transparent;
  border-style: dashed;
  border-color: var(--rope);
  color: var(--mist);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}
.btn:disabled .coin,
.btn:disabled .pearl { filter: grayscale(0.7) brightness(0.8); }

.chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--rope);
  background: var(--night);
  color: var(--canvas);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Class chips take their colour from the nearest --cls (captain panel, class card, or inline). */
.cls-chip {
  color: var(--cls, var(--mist));
  border-color: var(--cls, var(--rope));
  border-color: color-mix(in srgb, var(--cls, var(--mist)) 55%, transparent);
  background: color-mix(in srgb, var(--cls, var(--mist)) 14%, var(--night));
}
.chip-owned { color: var(--sea); border-color: rgba(95, 211, 196, 0.5); background: rgba(95, 211, 196, 0.1); flex: none; }
.chip-muted { color: var(--mist); }
.chip-you { color: var(--brass); border-color: rgba(232, 176, 74, 0.55); background: rgba(232, 176, 74, 0.12); }

.bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--night-deep);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.bar.thin { height: 6px; }
.bar-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--sea);
  border-radius: inherit;
  transition: transform 0.25s linear;
}

.input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rope);
  background: var(--night-deep);
  color: var(--canvas);
  font-size: 17px;
  font-weight: 600;
}
.input::placeholder { color: rgba(169, 174, 208, 0.6); font-weight: 500; }
.input:focus-visible { border-color: var(--brass); }
.input[aria-invalid="true"] { border-color: var(--coral); }

.select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 40px;
  max-width: 100%;
  padding: 0 34px 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rope);
  background-color: var(--night-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a9aed0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  color: var(--canvas);
  font-weight: 600;
  cursor: pointer;
}
.select option { background: var(--deck); color: var(--canvas); }

/* ----------------------------------------------------------------------------------
   HUD
   ---------------------------------------------------------------------------------- */
.hud {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding-block: 6px 14px;
  min-width: 0;
}
.hud-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--canvas);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.hud-title::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  vertical-align: 0.2em;
  border-radius: 2px;
  background: var(--brass);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(232, 176, 74, 0.5);
}
.hud-counters {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  min-width: 0;
}
.hud-stat { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.hud-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}
.hud-value { display: inline-flex; align-items: center; gap: 6px; }
.hud-num {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--canvas);
  white-space: nowrap;
}
.hud-gold .hud-num { font-size: 28px; font-weight: 700; color: var(--brass); text-shadow: 0 0 14px rgba(232, 176, 74, 0.25); }
.hud-gold .coin { width: 20px; height: 20px; }
.hud-pearls .hud-num { font-size: 22px; color: var(--pearl); text-shadow: 0 0 12px rgba(233, 241, 255, 0.35); }
.hud-pearls .pearl { width: 17px; height: 17px; }
.hud-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rank-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 122, 89, 0.5);
  background: rgba(255, 122, 89, 0.1);
  color: var(--canvas);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.15s, border-color 0.15s;
}
.rank-chip:hover { background: rgba(255, 122, 89, 0.2); border-color: var(--coral); }
.hall-chip { border-color: rgba(232, 176, 74, 0.5); background: rgba(232, 176, 74, 0.1); }
.hall-chip:hover { background: rgba(232, 176, 74, 0.2); border-color: var(--brass); }
.sea-chip { border-color: rgba(95, 211, 196, 0.5); background: rgba(95, 211, 196, 0.1); }
.sea-chip:hover { background: rgba(95, 211, 196, 0.2); border-color: var(--sea); }
.sea-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sea);
}
.sea-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sea);
  opacity: 0;
  pointer-events: none;
  animation: sea-pulse 2s ease-out infinite;
}

/* ----------------------------------------------------------------------------------
   Layout
   ---------------------------------------------------------------------------------- */
/* One column below 960 px. Flex (not grid) so the battle strip can stay sticky while the
   ledger scrolls past: a sticky flex item is held by the whole column. */
.layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.layout > * { min-width: 0; }
.stage { min-width: 0; }

@media (min-width: 960px) {
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 16px;
    row-gap: 14px;
    align-items: start;
  }
  .stage,
  .cap-strip,
  .captain { grid-column: 1; }
  .panels {
    grid-column: 2;
    grid-row: 1 / -1;
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
    min-height: 460px;
  }
  .panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--rope) transparent;
  }
}

/* ----------------------------------------------------------------------------------
   Scene and overlay
   ---------------------------------------------------------------------------------- */
.scene-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--rope);
  background: linear-gradient(180deg, #4b6cb7 0%, #f6a07a 72%, #ffd59a 100%);
  box-shadow: 0 14px 36px rgba(5, 6, 18, 0.45);
  isolation: isolate;
}
#scene {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.scene-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  pointer-events: none;
}
.ov-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-width: 0; }
.ov-place {
  min-width: 0;
  padding: 4px 12px 6px;
  border-radius: 12px;
  background: var(--veil);
  border: 1px solid rgba(243, 233, 210, 0.12);
  box-shadow: var(--hi);
  /* no backdrop blur: the canvas under it changes every frame, so a phone would re-blur it every frame */
}
.ov-region {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-isle { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--mist); text-transform: uppercase; }
.ov-waves {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--veil);
  border: 1px solid rgba(243, 233, 210, 0.12);
  box-shadow: var(--hi);
}
.pip {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(243, 233, 210, 0.22);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.pip.done { background: var(--brass); }
.pip.cur { background: var(--canvas); box-shadow: 0 0 0 2px rgba(232, 176, 74, 0.6); }
.pip-boss {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-left: 2px;
  border-radius: 0;
  background: none;
  color: rgba(243, 233, 210, 0.45);
}
.pip-boss svg { display: block; width: 17px; height: 17px; fill: currentColor; }
.pip-boss.done { background: none; color: var(--brass); }
.pip-boss.cur { background: none; box-shadow: none; color: var(--coral); animation: boss-pulse 0.9s ease-in-out infinite alternate; }
.ov-waves.is-dread .pip-boss { color: rgba(255, 122, 89, 0.7); width: 20px; height: 20px; }
.ov-waves.is-dread .pip-boss svg { width: 20px; height: 20px; filter: drop-shadow(0 0 4px rgba(255, 122, 89, 0.6)); }
.ov-waves.is-dread .pip-boss.cur { color: var(--coral); }

.ov-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.ov-boss {
  width: min(380px, 78%);
  padding: 5px 12px 8px;
  border-radius: 12px;
  background: rgba(20, 23, 45, 0.84);
  border: 1px solid rgba(255, 122, 89, 0.5);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
.ov-boss.is-dread { border-color: var(--coral); box-shadow: 0 0 22px rgba(255, 122, 89, 0.35); }
.ov-boss-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.ov-boss-name {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The panel's bar is the boss TIMER (the boss's health bar is drawn on the canvas above the
   enemy): brass with a clock glyph, thin, coral only in the last 10 seconds. */
.ov-boss-time { flex: none; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-num); font-weight: 600; font-size: 14px; color: var(--brass); font-variant-numeric: tabular-nums; }
.ov-boss-time::before {
  content: '';
  flex: none;
  width: 13px;
  height: 13px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8.5' r='6.2' fill='none' stroke='%23e8b04a' stroke-width='1.8'/%3E%3Cpath d='M8 5v3.7l2.4 1.5M6.3 1.3h3.4' fill='none' stroke='%23e8b04a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ov-boss.is-low .ov-boss-time { color: var(--coral); animation: blink 0.8s ease-in-out infinite; }
.ov-boss.is-low .ov-boss-time::before { filter: hue-rotate(-28deg) saturate(1.6); }
.boss-bar { height: 5px; background: rgba(232, 176, 74, 0.16); }
.boss-bar .bar-fill { background: linear-gradient(90deg, var(--brass-lo), var(--brass)); transition-duration: 0.3s; }
.ov-boss.is-low .boss-bar .bar-fill { background: linear-gradient(90deg, var(--coral), var(--coral-hi)); }

.ov-farm { align-self: flex-start; display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.chip-farm {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--veil);
  border: 1px solid rgba(95, 211, 196, 0.5);
  color: var(--sea);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.btn-challenge {
  pointer-events: auto;
  background: linear-gradient(180deg, #ff9272, var(--coral));
  border-color: var(--coral-hi);
  color: var(--night);
  box-shadow: inset 0 1px 0 rgba(255, 230, 220, 0.5), 0 4px 14px rgba(0, 0, 0, 0.3);
  font-weight: 800;
}
.btn-challenge:hover { background: var(--coral-hi); border-color: #ffc0aa; }

.ov-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ov-ko {
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(20, 23, 45, 0.86);
  border: 1px solid rgba(255, 122, 89, 0.6);
  color: var(--coral);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ov-hint {
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(20, 23, 45, 0.6);
  color: var(--canvas);
  font-size: 13px;
  font-weight: 700;
  animation: hint-bob 1.4s ease-in-out infinite alternate;
}

/* ----------------------------------------------------------------------------------
   Battle strip: skill, health, Auto-advance (and the purse on phones)
   ---------------------------------------------------------------------------------- */
.cap-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "skill hp adv";
  align-items: center;
  gap: 10px 18px;
  padding: 10px 16px 10px 10px;
  border-radius: var(--radius-panel);
  border: 1px solid var(--rope);
  background: linear-gradient(180deg, #2b3056, var(--deck));
  box-shadow: var(--shadow);
}
.cap-strip .skill-btn { grid-area: skill; }
.cap-strip .hp { grid-area: hp; min-width: 0; }
.cap-strip .switch-advance { grid-area: adv; }
.strip-purse { grid-area: purse; display: none; }

.skill-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
  min-height: 56px;
  padding: 8px 12px 8px 14px;
  border-radius: var(--radius-panel);
  border: 1px solid var(--rope);
  background: var(--night-deep);
  box-shadow: var(--hi);
  color: var(--canvas);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.skill-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: rgba(232, 176, 74, 0.16);
  pointer-events: none;
  transition: transform 0.25s linear;
}
.skill-text { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.skill-name { font-weight: 800; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-state { font-size: 13px; color: var(--mist); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 7px;
  border: 1px solid var(--rope-hi);
  border-bottom-width: 3px;
  background: var(--deck-2);
  color: var(--canvas);
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 13px;
}
.skill-btn.is-ready {
  border-color: var(--brass);
  background: linear-gradient(180deg, #3b3552, #2a2944);
  box-shadow: 0 0 0 1px var(--brass), 0 0 22px rgba(232, 176, 74, 0.28);
}
/* The ready glow breathes by opacity only (an animated box-shadow repaints the sticky strip every frame). */
.skill-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 16px rgba(232, 176, 74, 0.45);
  opacity: 0;
  pointer-events: none;
}
.skill-btn.is-ready::after { animation: ready-glow 1.6s ease-in-out infinite alternate; }
.skill-btn.is-ready .skill-fill { background: rgba(232, 176, 74, 0.12); }
.skill-btn.is-ready .skill-state { color: var(--brass); font-weight: 800; }
.skill-btn.is-ready:hover { background: linear-gradient(180deg, #463e5f, #302e4d); }
.skill-btn.is-active { border-color: var(--sea); box-shadow: 0 0 0 1px rgba(95, 211, 196, 0.5); }
.skill-btn.is-active .skill-fill { background: rgba(95, 211, 196, 0.2); }
.skill-btn.is-active .skill-state { color: var(--sea); font-weight: 800; }
.skill-btn.is-cd { cursor: default; }
.skill-btn.is-cd .skill-name { color: var(--mist); }

.hp-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-size: 13px; font-weight: 700; color: var(--mist); font-variant-numeric: tabular-nums; }
.hp-num { color: var(--canvas); white-space: nowrap; }
.hp-bar { height: 12px; }
.hp-bar .bar-fill { background: linear-gradient(90deg, #3fb5a7, var(--sea)); }
.hp-bar.is-low .bar-fill { background: linear-gradient(90deg, #e2574c, var(--coral)); }

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.switch input {
  position: absolute;
  left: 0;
  top: 50%;
  width: 46px;
  height: 28px;
  margin: 0;
  transform: translateY(-50%);
  opacity: 0;
  cursor: pointer;
}
.switch-track {
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--rope);
  background: var(--night-deep);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: background-color 0.15s, border-color 0.15s;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mist);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s, background-color 0.15s;
}
.switch input:checked + .switch-track { background: rgba(95, 211, 196, 0.22); border-color: var(--sea); }
.switch input:checked + .switch-track::after { transform: translateX(18px); background: var(--sea); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--brass); outline-offset: 2px; }

.purse-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.purse-num {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.purse-gold .purse-num { color: var(--brass); }
.purse-gold .coin { width: 16px; height: 16px; }
.purse-pearls .purse-num { color: var(--pearl); }
.purse-pearls .pearl { width: 15px; height: 15px; }

/* ----------------------------------------------------------------------------------
   Captain card
   ---------------------------------------------------------------------------------- */
.captain {
  --cls: var(--brass);
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
}
.cap-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cap-portrait {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 2px solid var(--cls);
  background: radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.1), transparent 70%), var(--night-deep);
  background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--cls) 35%, transparent), transparent 72%), var(--night-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.cap-id { flex: 1 1 auto; min-width: 0; }
.cap-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cap-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; font-size: 13px; color: var(--mist); }

.cap-toggle {
  flex: none;
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--rope);
  background: var(--night-deep);
  color: var(--canvas);
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  touch-action: manipulation;
}
.cap-toggle:hover { border-color: var(--rope-hi); background: var(--deck-2); }
.cap-toggle svg { width: 12px; height: 8px; transition: transform 0.2s; }
.cap-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.cap-more { display: grid; gap: 12px; min-width: 0; }
.cap-more > .switch { justify-self: start; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.stats-grid > div {
  min-width: 0;
  padding: 8px 10px 9px;
  border-radius: var(--radius-sm);
  background: var(--night-deep);
  border: 1px solid rgba(74, 79, 120, 0.5);
  box-shadow: var(--hi);
}
.stats-grid dt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-grid dd {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-grid .sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--mist);
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-sail { width: 100%; min-height: 48px; font-size: 16px; font-weight: 800; letter-spacing: 0.02em; }
.sail-progress-text { margin-bottom: 6px; font-size: 13px; color: var(--mist); }
.sail-progress .bar-fill { background: linear-gradient(90deg, var(--brass-lo), var(--brass)); }

/* ----------------------------------------------------------------------------------
   Tabbed ledger
   ---------------------------------------------------------------------------------- */
.panels { min-width: 0; }
.tabbar {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border-bottom: 1px solid var(--rope);
  background: var(--deck);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}
.tabs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  padding: 0 9px;
  border: 0;
  background: none;
  color: var(--mist);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 0.15s;
}
.tab:hover { color: var(--canvas); }
.tab[aria-selected="true"] { color: var(--brass); }
.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brass);
}
.tab:focus-visible { outline-offset: -4px; }
.tab-ico { display: none; width: 22px; height: 22px; flex: none; }
.tab-label { white-space: nowrap; }
.tab-dot {
  position: absolute;
  top: 11px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 2px var(--deck);
}
.tab-dot-pearl { background: var(--pearl); box-shadow: 0 0 0 2px var(--deck), 0 0 8px rgba(233, 241, 255, 0.7); }
.tab-purse {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: 12px 14px;
  border-left: 1px solid var(--rope);
}
.tab-gold,
.tab-pearls {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tab-gold { color: var(--brass); }
.tab-pearls { color: var(--pearl); }
.panel-body { padding: 16px; min-width: 0; border-radius: 0 0 var(--radius-panel) var(--radius-panel); }
.tab-panel { min-width: 0; }

.tab-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 14px;
}
.tab-title { min-width: 0; flex: 1 1 180px; }
.tab-title h2 { font-family: var(--font-display); font-weight: 400; font-size: 23px; line-height: 1.1; }
.tab-sub { margin-top: 3px; font-size: 13.5px; color: var(--mist); font-variant-numeric: tabular-nums; }
.tab-sub:empty { display: none; }
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
}
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--rope), transparent);
}
.tab-head + .section-title { margin-top: 4px; }
.section-note { margin: -4px 0 10px; font-size: 13.5px; color: var(--mist); }

.qty,
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  border: 1px solid var(--rope);
  background: var(--night-deep);
  max-width: 100%;
}
.qty-btn,
.seg-btn {
  min-width: 46px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--mist);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
.qty-btn:hover,
.seg-btn:hover { color: var(--canvas); }
.qty-btn[aria-pressed="true"],
.seg-btn[aria-pressed="true"] { background: var(--deck-2); color: var(--brass); box-shadow: inset 0 0 0 1px var(--rope); }
.seg { display: flex; margin-bottom: 10px; }
.seg-btn { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 14px; }

/* Generic list rows */
.rows { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(74, 79, 120, 0.6);
  background: linear-gradient(180deg, #343a63, var(--deck-2));
  box-shadow: var(--hi);
}
.row-art {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 65%, rgba(95, 110, 190, 0.25), transparent 72%), var(--night-deep);
}
.row-art-sm { width: 40px; height: 40px; }
.art-wrap { position: relative; flex: none; }
.avatar {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--deck-2);
  background: var(--night-deep);
  object-fit: cover;
}
.row-main { flex: 1 1 auto; min-width: 0; }
.row-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.row-name { font-weight: 800; font-size: 15.5px; min-width: 0; overflow-wrap: anywhere; }
.row-role { font-size: 13px; color: var(--mist); font-weight: 500; }
.row-text { font-size: 13.5px; color: var(--mist); }
.row-meta { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.row-perk { font-size: 13px; color: var(--sea); }
.row-side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.side-main { font-weight: 800; white-space: nowrap; }
.side-sub { font-size: 12.5px; color: var(--mist); white-space: nowrap; }
.side-sub.is-gold { color: var(--brass); font-weight: 700; }
.side-sub.is-sea { color: var(--sea); font-weight: 700; }

.buy {
  flex: none;
  flex-direction: column;
  gap: 1px;
  min-width: 108px;
  min-height: 48px;
  padding: 5px 12px;
  line-height: 1.1;
}
.buy-label { font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }
.buy-cost { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-num); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.buy-cost[hidden] { display: none; }

/* Training */
.row-badge {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--night-deep);
  border: 1px solid rgba(232, 176, 74, 0.35);
  line-height: 1;
}
.badge-l { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
.badge-n { font-family: var(--font-num); font-size: 19px; font-weight: 600; color: var(--brass); font-variant-numeric: tabular-nums; }
.train-row.is-maxed .row-badge { border-color: var(--sea); }
.train-row.is-maxed .badge-n { color: var(--sea); }

/* Market */
.odds-bar { display: flex; height: 6px; margin-top: 7px; border-radius: 3px; overflow: hidden; background: var(--night-deep); }
.odds-bar span { background: var(--rc); min-width: 2px; }
.odds-legend { display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 4px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.odds-legend .odd { color: var(--rc); white-space: nowrap; }
.buff-row.is-active { border-color: rgba(95, 211, 196, 0.55); background: linear-gradient(90deg, rgba(95, 211, 196, 0.1), transparent 60%), var(--deck-2); }
.buff-status { color: var(--mist); }
.buff-row.is-active .buff-status { color: var(--sea); font-weight: 700; }
.perk-row.is-owned { background: transparent; box-shadow: none; }

/* ----------------------------------------------------------------------------------
   Gear
   ---------------------------------------------------------------------------------- */
.eq-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.eq-slot {
  --rc: var(--rope);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 68px;
  padding: 7px 4px 6px;
  border-radius: 12px;
  border: 1px dashed var(--rope);
  background: var(--night-deep);
  color: var(--mist);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.15s, background-color 0.15s;
}
.eq-slot:hover { background: var(--deck-2); }
.eq-slot.has-item {
  border-style: solid;
  border-color: var(--rc);
  color: var(--canvas);
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.06), transparent 70%), var(--night-deep);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 70%), var(--night-deep);
}
.eq-slot.is-sel { box-shadow: 0 0 0 2px var(--canvas); }
.eq-art { width: 34px; height: 34px; display: grid; place-items: center; }
.eq-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghost { opacity: 0.22; filter: grayscale(1); }

.detail {
  --rc: var(--rope);
  margin-top: 12px;
  padding: 14px;
  min-height: 148px;
  border-radius: var(--radius);
  border: 1px solid var(--rope);
  border-color: color-mix(in srgb, var(--rc) 60%, var(--rope));
  background: var(--night-deep);
  box-shadow: var(--hi);
}
.detail.is-empty { display: grid; place-items: center; border-style: dashed; }
.detail-empty { max-width: 32ch; text-align: center; color: var(--mist); font-size: 14px; }
.dc-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dc-art {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid var(--rc);
  display: grid;
  place-items: center;
  background: var(--deck-2);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 72%), var(--deck-2);
}
.dc-art img { width: 44px; height: 44px; }
.dc-id { flex: 1 1 auto; min-width: 0; }
.item-name { color: var(--rc, var(--canvas)); font-weight: 800; }
.dc-name { font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
.item-sub { font-size: 13px; color: var(--mist); font-variant-numeric: tabular-nums; }
.item-main { font-size: 13.5px; font-weight: 700; }
.dc-stats { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; font-size: 14px; font-variant-numeric: tabular-nums; }
.dc-stats li { padding-left: 14px; position: relative; }
.dc-stats li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rc);
}
.dc-stats .main { font-weight: 800; }
.dc-compare {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(74, 79, 120, 0.6);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cmp-label { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); }
.delta.up { color: var(--sea); }
.delta.down { color: var(--coral); }
.delta.same { color: var(--mist); }
.dc-vs { margin-top: 6px; font-size: 13px; color: var(--mist); overflow-wrap: anywhere; }
.dc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dc-actions .btn { flex: 1 1 140px; }

.hold-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 18px; margin-bottom: 10px; }
.hold-head .section-title { flex: 1 1 140px; margin: 0; }
.hold-count { font-family: var(--font-num); font-size: 14px; font-weight: 600; color: var(--mist); font-variant-numeric: tabular-nums; }
.hold-count.is-full { color: var(--coral); }
.auto-salvage { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--mist); min-width: 0; }

.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.inv-cell {
  --rc: var(--rope);
  position: relative;
  aspect-ratio: 1;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--rc);
  background: var(--deck-2);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.08s, box-shadow 0.15s;
}
.inv-cell.has-item {
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.07), transparent 70%), var(--deck-2);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 24%, transparent), transparent 72%), var(--deck-2);
}
.inv-cell.has-item:hover { transform: translateY(-1px); }
.inv-cell.r4, .inv-cell.r5 { box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 45%, transparent); }
.inv-cell.is-empty { border-style: dashed; border-color: rgba(74, 79, 120, 0.7); background: transparent; cursor: default; }
.inv-cell.is-sel { box-shadow: 0 0 0 2px var(--canvas); }
.inv-cell img, .inv-cell .mono { width: 76%; height: 76%; }
.inv-cell .upg,
.rv-tile .upg { display: none; }
.inv-cell.is-upg .upg,
.rv-tile.is-upg .upg {
  display: block;
  position: absolute;
  top: 3px;
  right: 3px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid var(--sea);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
}

.salvage-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.tools-label { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mist); margin-right: 2px; }

/* ----------------------------------------------------------------------------------
   Sky Pearls tab
   ---------------------------------------------------------------------------------- */
.pearl-note { margin: -6px 0 14px; font-size: 13.5px; color: var(--mist); }
.pearl-n { font-family: var(--font-num); font-weight: 600; color: var(--pearl); }

.daily-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 14px;
  padding: 14px;
  border-radius: var(--radius-panel);
  border: 1px solid rgba(233, 241, 255, 0.28);
  background:
    radial-gradient(ellipse 60% 120% at 0% 50%, rgba(233, 241, 255, 0.1), transparent 70%),
    linear-gradient(180deg, #343b68, #2a2f55);
  box-shadow: var(--shadow);
}
.daily-card.is-ready { border-color: rgba(233, 241, 255, 0.6); box-shadow: var(--shadow), 0 0 24px rgba(233, 241, 255, 0.12); }
.daily-art {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 60%, rgba(233, 241, 255, 0.18), transparent 70%), var(--night-deep);
}
.daily-art .ico svg { width: 46px; height: 46px; }
.daily-main { min-width: 0; display: grid; gap: 4px; }
.daily-title { font-family: var(--font-display); font-size: 20px; line-height: 1.1; }
.daily-dots { display: flex; gap: 6px; align-items: center; }
.daily-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(233, 241, 255, 0.35);
  background: var(--night-deep);
}
.daily-dot.on {
  border-color: transparent;
  background:
    radial-gradient(circle at 33% 28%, #ffffff 0 16%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 45% 40%, var(--pearl) 0 40%, #c9d5f0 75%, #98a8d2 100%);
  box-shadow: 0 0 6px rgba(233, 241, 255, 0.45);
}
.daily-dot.next { position: relative; border-color: var(--pearl); }
.daily-dot.next::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(233, 241, 255, 0.25);
  opacity: 0;
  pointer-events: none;
  animation: dot-pulse 1.4s ease-in-out infinite alternate;
}
.daily-gives { font-weight: 800; font-variant-numeric: tabular-nums; }
.daily-gives .pearl-n { font-size: 16px; }
.daily-sub { font-size: 13px; color: var(--mist); }
.daily-btn { grid-column: 1 / -1; width: 100%; min-height: 50px; flex-direction: column; gap: 1px; line-height: 1.1; }
/* Wide ledgers put the button beside the text. */
.tab-panel { container-type: inline-size; }
@container (min-width: 540px) {
  .daily-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .daily-btn { grid-column: auto; width: auto; min-width: 140px; }
}
.daily-btn-main { font-size: 15px; font-weight: 800; }
.daily-btn-sub { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.earn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-radius: var(--radius); border: 1px solid rgba(74, 79, 120, 0.6); background: var(--night-deep); }
.earn-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; font-size: 14px; }
.earn-list li + li { border-top: 1px solid rgba(74, 79, 120, 0.45); }
.earn-what { min-width: 0; }
.earn-what small { display: block; font-size: 12.5px; color: var(--mist); }
.earn-n { flex: none; font-family: var(--font-num); font-weight: 600; color: var(--pearl); white-space: nowrap; font-variant-numeric: tabular-nums; }

.pearl-row .row-art { background: radial-gradient(circle at 50% 60%, rgba(233, 241, 255, 0.14), transparent 72%), var(--night-deep); }
.pearl-row.is-maxed { background: transparent; box-shadow: none; }

.cos-stage {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  margin-bottom: 6px;
  border-radius: var(--radius-panel);
  border: 1px solid rgba(74, 79, 120, 0.6);
  background: radial-gradient(ellipse 80% 100% at 30% 0%, rgba(246, 160, 122, 0.22), transparent 70%), linear-gradient(180deg, #3b4a86, #283063);
}
.cos-preview {
  flex: none;
  width: 150px;
  max-width: 45%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #6e8fd6 0%, #f3b08e 75%, #ffd8a8 100%);
}
.cos-preview canvas,
.cos-preview svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.cos-caption { min-width: 0; display: grid; gap: 8px; justify-items: start; }
.cos-caption p { font-size: 14px; font-weight: 700; }
.cos-caption .muted { font-weight: 500; font-size: 13px; }
.cos-group-title { margin: 14px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.cos-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 6px;
  border-radius: var(--radius);
  border: 1px solid rgba(74, 79, 120, 0.6);
  background: var(--deck-2);
  box-shadow: var(--hi);
}
.cos-card.is-inuse { border-color: rgba(95, 211, 196, 0.6); }
.cos-card.is-preview { box-shadow: 0 0 0 2px var(--canvas); }
.cos-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 72px;
  padding: 6px 4px 4px;
  border: 0;
  border-radius: 9px;
  background: var(--night-deep);
  cursor: pointer;
  touch-action: manipulation;
}
.cos-pick:hover { background: #1a1e3a; }
.cos-swatch { display: block; width: 52px; height: 42px; }
.cos-swatch svg { display: block; width: 100%; height: 100%; }
.cos-name { font-size: 13px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-card .buy { min-width: 0; width: 100%; min-height: 44px; padding: 4px 6px; }
.cos-card .buy-label { font-size: 12.5px; }
.cos-card .buy-cost { font-size: 14px; }
.cos-card .btn.is-inuse:disabled { border-style: solid; border-color: rgba(95, 211, 196, 0.5); color: var(--sea); opacity: 1; cursor: default; }

/* ----------------------------------------------------------------------------------
   Rivals: Wanted Board, At sea now, Hall of Captains
   ---------------------------------------------------------------------------------- */
.rank {
  flex: none;
  min-width: 34px;
  text-align: center;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.1;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
}
.rank small { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--mist); }
.rank.rank-1 { color: var(--brass); }
.rank.rank-2 { color: #d6dae8; }
.rank.rank-3 { color: #d08a5a; }
.row.is-you {
  border-color: rgba(232, 176, 74, 0.6);
  background: linear-gradient(90deg, rgba(232, 176, 74, 0.16), rgba(232, 176, 74, 0.04) 70%), var(--deck-2);
}
.row.is-you .row-name { color: var(--brass); }
.hall-row .row-title .cls-chip,
.sea-row .row-title .cls-chip { height: 20px; font-size: 10.5px; }
.hall-gap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}
.hall-gap::before,
.hall-gap::after { content: ""; flex: 1; border-top: 1px dashed var(--rope); }
.status {
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--rope);
  background: var(--night-deep);
  color: var(--mist);
  font-size: 13.5px;
}
.status.is-warn { border-color: rgba(255, 122, 89, 0.45); color: var(--canvas); }
.empty-note {
  padding: 16px 12px;
  border-radius: var(--radius);
  border: 1px dashed var(--rope);
  text-align: center;
  color: var(--mist);
  font-size: 14px;
}
.sea-row .side-main { color: var(--sea); }

/* ----------------------------------------------------------------------------------
   Modals
   ---------------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top: max(24px, env(safe-area-inset-top, 0px));
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  background: rgba(10, 12, 28, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in 0.18s ease-out;
}
.backdrop-create {
  background: linear-gradient(180deg, rgba(10, 12, 28, 0.42), rgba(10, 12, 28, 0.86) 55%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.modal {
  width: 100%;
  max-width: 560px;
  min-width: 0;
  margin-block: auto;
  padding: 18px 20px 20px;
  border-radius: 16px;
  border: 1px solid var(--rope);
  background: linear-gradient(180deg, #2d3359 0%, var(--deck) 160px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 28px 70px rgba(0, 0, 0, 0.55);
  animation: pop-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.modal:focus { outline: none; }
.modal-wide { max-width: 960px; }
.modal-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.modal-titles { flex: 1 1 auto; min-width: 0; }
.modal-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
.modal-title { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.15; overflow-wrap: anywhere; }
.modal-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--rope);
  background: var(--night-deep);
  color: var(--mist);
  cursor: pointer;
}
.modal-x:hover { color: var(--canvas); border-color: var(--rope-hi); }
.modal-x svg { width: 16px; height: 16px; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal .section-title { margin-top: 18px; }

/* Hero creation */
.create-intro { max-width: 62ch; color: var(--mist); font-size: 15.5px; margin-bottom: 16px; }
.field { margin-bottom: 4px; }
.field-label { display: block; margin-bottom: 6px; font-weight: 800; }
.field-row { display: flex; gap: 8px; min-width: 0; }
.field-row .btn { flex: none; }
.field-hint { margin-top: 6px; font-size: 13px; color: var(--mist); }
.field-error { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--coral); }
/* Confirm buttons stay reachable while scrolling the class cards (creation, Set Sail). */
.sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-inline: -20px;
  margin-bottom: -20px;
  padding: 16px 20px 20px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, rgba(38, 43, 77, 0), var(--deck) 36%);
}
.create-actions .btn { min-width: 220px; }

/* Class cards */
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.class-card {
  --cls: var(--brass);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px 14px;
  border-radius: var(--radius-panel);
  border: 1px solid var(--rope);
  background: var(--night-deep);
  box-shadow: var(--hi);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.class-card:hover { border-color: var(--rope-hi); border-color: color-mix(in srgb, var(--cls) 55%, var(--rope)); transform: translateY(-1px); }
.class-card.is-selected {
  border-color: var(--cls);
  background: var(--night-deep);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cls) 16%, var(--night-deep)), var(--night-deep) 70%);
  box-shadow: 0 0 0 1px var(--cls), 0 10px 28px rgba(0, 0, 0, 0.35);
}
.class-card.is-selected::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cls) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231b1f3a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
.class-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.cc-head { display: flex; align-items: center; gap: 12px; padding-right: 26px; }
.cc-art {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--deck);
  background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--cls) 35%, transparent), transparent 72%), var(--deck);
}
.cc-id { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cc-name { font-family: var(--font-display); font-size: 21px; line-height: 1.1; }
.cc-blurb { font-size: 14px; color: var(--mist); }
.cc-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 14px; font-weight: 600; }
.cc-perks li { position: relative; padding-left: 14px; }
.cc-perks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cls);
}
.cc-skill { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--rope); font-size: 13.5px; }
.cc-skill-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cc-skill-name { font-weight: 800; color: var(--cls); }
.cc-skill-cd { font-size: 12.5px; color: var(--mist); font-variant-numeric: tabular-nums; }
.cc-skill-text { margin-top: 2px; color: var(--canvas); }

/* Set Sail */
.sail-gain { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.sail-gain-n { font-family: var(--font-num); font-weight: 700; font-size: 46px; line-height: 1; color: var(--brass); text-shadow: 0 0 22px rgba(232, 176, 74, 0.35); }
.sail-gain-l { font-family: var(--font-display); font-size: 22px; color: var(--canvas); }
.sail-lead { max-width: 70ch; color: var(--mist); }
.sail-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin-top: 14px; }
.sail-list { padding: 12px 14px; border-radius: var(--radius); background: var(--night-deep); border: 1px solid var(--rope); }
.sail-list h3 { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.sail-list.is-reset h3 { color: var(--coral); }
.sail-list.is-keep h3 { color: var(--sea); }
.sail-list ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: 14px; }

/* Offline */
.offline-lead { font-size: 16px; margin-bottom: 12px; }
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 8px; margin: 0 0 12px; }
.ledger > div { padding: 12px 14px; border-radius: var(--radius); background: var(--night-deep); border: 1px solid var(--rope); }
.ledger dt { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); }
.ledger dd { margin: 2px 0 0; font-family: var(--font-num); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ledger .is-gold dd { color: var(--brass); }

/* Chest reveal */
.reveal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reveal-item {
  --rc: var(--rope);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--rc);
  background: var(--night-deep);
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 14%, var(--night-deep)), var(--night-deep) 65%);
  animation: reveal-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  animation-delay: calc(var(--i, 0) * 120ms);
}
.reveal-art { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--deck-2); }
.reveal-art img, .reveal-art .mono { width: 42px; height: 42px; }
.reveal-info { flex: 1 1 auto; min-width: 0; }
.reveal-info .item-name { overflow-wrap: anywhere; }
.reveal-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.reveal-delta { display: flex; gap: 8px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.reveal-note { margin-top: 10px; }
.btn-again { min-height: 48px; }

/* ----------------------------------------------------------------------------------
   Toasts
   ---------------------------------------------------------------------------------- */
.toast-root {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(440px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  --tc: var(--mist);
  padding: 10px 14px 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--rope);
  border-left: 4px solid var(--tc);
  background: rgba(27, 31, 58, 0.97);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--canvas);
  overflow-wrap: anywhere;
  animation: toast-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  transition: opacity 0.25s, transform 0.25s;
}
.toast.is-leaving { opacity: 0; transform: translateY(8px); }
.toast-good { --tc: var(--sea); }
.toast-bad { --tc: var(--coral); }
.toast-gold { --tc: var(--brass); }
.toast-gold .toast-text { color: var(--brass); }
.toast-pearl { --tc: var(--pearl); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 22px rgba(233, 241, 255, 0.14); }
.toast-pearl .toast-text { color: var(--pearl); }
.toast-sea { --tc: var(--sea); }
.toast-rarity { --tc: var(--rc); }
.toast-rarity .toast-text { color: var(--rc); }
.toast-rarity.r4, .toast-rarity.r5 { box-shadow: 0 0 0 1px var(--rc), 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 26px color-mix(in srgb, var(--rc) 30%, transparent); }

@media (min-width: 960px) {
  .toast-root { left: max(24px, env(safe-area-inset-left, 0px)); transform: none; }
}

/* ----------------------------------------------------------------------------------
   Desktop only
   ---------------------------------------------------------------------------------- */
@media (min-width: 960px) {
  /* The HUD already shows the purse on desktop. */
  .tab-purse { display: none; }
}
/* Just above the two-column breakpoint the side panel is narrow: six slots in a row would cut
   "Weapon" to "Weap…", so lay them out 3 x 2 as on phones. */
@media (min-width: 960px) and (max-width: 1039px) {
  .eq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------------------------------
   One column (phones and small tablets, < 960 px)
   ---------------------------------------------------------------------------------- */
@media (max-width: 959px) {
  .scene-wrap { max-height: 58vh; }
  .cap-toggle { display: inline-flex; }
  .captain { gap: 12px; padding: 12px 14px 14px; }
  .captain.is-collapsed { gap: 10px; }
  .cap-portrait { width: 52px; height: 52px; border-radius: 14px; }
  .cap-name { font-size: 22px; }
}

/* Small tablets and phones held sideways: the tab bar (with the purse) stays in view. */
@media (min-width: 601px) and (max-width: 959px) {
  .tabbar { position: sticky; top: 0; z-index: 5; box-shadow: 0 6px 14px rgba(10, 12, 28, 0.35); }
}

/* ----------------------------------------------------------------------------------
   Portrait phones (<= 600 px)
   ---------------------------------------------------------------------------------- */
@media (max-width: 600px) {
  body { font-size: 15px; }
  /* Room at the bottom for the anchored tab bar. */
  .app { padding-block: 6px calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* Header collapses to the title and the Wanted Board chip. */
  .hud { flex-wrap: nowrap; gap: 10px; padding-block: 4px 8px; }
  .hud-title { font-size: 21px; }
  .hud-title::before { width: 8px; height: 8px; margin-right: 8px; }
  .hud-counters,
  .hall-chip,
  .sea-chip { display: none; }
  .hud-chips { flex: none; flex-wrap: nowrap; }
  .rank-chip { padding: 0 12px; font-size: 13px; }

  .layout { gap: 10px; }
  .scene-wrap { aspect-ratio: 4 / 3; max-height: 46vh; border-radius: 14px; }
  .scene-overlay { padding: 7px 8px; gap: 6px; }
  .ov-place { padding: 3px 9px 4px; border-radius: 10px; }
  .ov-region { font-size: 14.5px; }
  .ov-isle { font-size: 10.5px; }
  .ov-waves { gap: 3px; padding: 6px 7px; }
  .pip { width: 7px; height: 7px; }
  .pip-boss, .pip-boss svg { width: 14px; height: 14px; }
  .ov-waves.is-dread .pip-boss, .ov-waves.is-dread .pip-boss svg { width: 16px; height: 16px; }
  .ov-boss { width: min(320px, 92%); padding: 4px 10px 6px; }
  .ov-boss-name { font-size: 14px; }
  .chip-farm { height: 24px; font-size: 10.5px; }
  .ov-hint { font-size: 12px; }

  /* The battle strip: a full-bleed band that sticks to the top while the ledger scrolls. */
  .cap-strip {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 20;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas:
      "purse adv"
      "hp skill";
    gap: 2px 12px;
    margin-left: calc(-1 * var(--gut-l));
    margin-right: calc(-1 * var(--gut-r));
    padding: 4px var(--gut-r) 8px var(--gut-l);
    border-radius: 0;
    border-width: 1px 0;
    border-color: rgba(74, 79, 120, 0.8);
    background: rgba(31, 35, 66, 0.97);
    box-shadow: 0 8px 18px rgba(8, 10, 24, 0.45);
    /* no backdrop blur: at 97% opacity it does not show, and a phone re-blurs it on every scroll frame */
  }
  .strip-purse { display: flex; align-items: center; gap: 14px; min-width: 0; overflow: hidden; }
  .cap-strip .switch-advance { justify-self: end; font-size: 14px; gap: 8px; }
  .cap-strip .skill-btn { min-width: 0; min-height: 46px; padding: 5px 10px; gap: 8px; border-radius: 12px; }
  .cap-strip .skill-name { font-size: 14px; }
  .cap-strip .skill-state { font-size: 12px; }
  .cap-strip .key { display: none; }
  .cap-strip .hp-head { margin-bottom: 4px; font-size: 12px; }
  .cap-strip .hp-bar { height: 11px; }

  .cap-head { gap: 12px; }
  .cap-portrait { width: 44px; height: 44px; border-radius: 12px; }
  .cap-name { font-size: 19px; }
  .cap-sub { gap: 6px; font-size: 12.5px; margin-top: 2px; }
  .cap-toggle { padding: 0 10px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Tab bar anchored to the bottom of the screen: all six tabs, icon over a short label. */
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: block;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: 0;
    border-bottom: 0;
    border-top: 1px solid var(--rope);
    background: rgba(27, 31, 58, 0.97);
    box-shadow: 0 -8px 20px rgba(8, 10, 24, 0.4);
    /* no backdrop blur: at 97% opacity it does not show, and a phone re-blurs it on every scroll frame */
  }
  .tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding-inline: 0;
    overflow: visible;
  }
  .tab {
    min-width: 0;
    min-height: 58px;
    flex-direction: column;
    gap: 3px;
    padding: 6px 2px 5px;
    font-size: 11.5px;
    letter-spacing: 0;
  }
  .tab-ico { display: block; }
  .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .tab[aria-selected="true"]::after { top: -1px; bottom: auto; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; }
  .tab[aria-selected="true"] .tab-ico { filter: drop-shadow(0 0 6px rgba(232, 176, 74, 0.45)); }
  .tab-dot { top: 6px; right: auto; left: calc(50% + 8px); }
  .tab-purse { display: none; }
  .panels { border-radius: var(--radius-panel); }
  .panel-body { padding: 12px; border-radius: var(--radius-panel); }

  .tab-title h2 { font-size: 21px; }
  .row { gap: 10px; padding: 9px 10px; }
  .row-art, .row-badge { width: 42px; height: 42px; }
  .row-art-sm { width: 36px; height: 36px; }
  .ico svg { width: 30px; height: 30px; }
  .buy { min-width: 96px; padding: 5px 10px; }
  .rank { min-width: 26px; font-size: 14px; }
  .eq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seg-btn { font-size: 13px; padding: 0 4px; }

  .daily-card { padding: 12px; }
  .daily-art { width: 52px; height: 52px; }
  .cos-stage { flex-direction: column; align-items: stretch; }
  /* keep the (square) ship preview square on phones, so nothing of the hull is cropped */
  .cos-preview { width: min(100%, 260px); max-width: none; aspect-ratio: 1; margin-inline: auto; }
  .cos-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }

  .modal { padding: 16px 16px 18px; border-radius: 16px; }
  .modal-title { font-size: 24px; }
  .sticky-actions { margin-inline: -16px; margin-bottom: -18px; padding: 14px 16px 18px; border-radius: 0 0 16px 16px; }
  .sticky-actions .btn { flex: 1 1 100%; min-width: 0; }
  .field-row { flex-wrap: wrap; }
  .field-row .input { flex-basis: 100%; }
  .field-row .btn { flex: 1 1 auto; }
  .reveal-item { flex-wrap: wrap; }
  .reveal-side { flex: 1 1 100%; flex-direction: row; justify-content: space-between; align-items: center; }
  .sail-gain-n { font-size: 38px; }

  /* Toasts float above the bottom tab bar. */
  .toast-root { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 380px) {
  .hud-title { font-size: 19px; }
  .rank-chip { padding: 0 10px; font-size: 12.5px; }
  .strip-purse { gap: 10px; }
  .purse-num { font-size: 16px; }
  .cap-strip .switch-advance { font-size: 13px; }
  .row-side .side-sub { white-space: normal; }
}

/* ----------------------------------------------------------------------------------
   Chest tiers (SPEC-3 §20.7): chest cards in the Market and the Pearls tab
   ---------------------------------------------------------------------------------- */
.row.chest-card { flex-direction: column; align-items: stretch; gap: 10px; }
.ch-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ch-art {
  width: 56px;
  height: 56px;
  background: radial-gradient(circle at 50% 64%, rgba(232, 176, 74, 0.2), transparent 72%), var(--night-deep);
}
.ch-art .ico svg { width: 40px; height: 40px; }
.pearl-row.chest-card .ch-art { background: radial-gradient(circle at 50% 62%, rgba(233, 241, 255, 0.2), transparent 72%), var(--night-deep); }

.tier {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(74, 79, 120, 0.55);
  background: var(--night-deep);
}
.tier-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.tier-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--rope);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.tier-badge.tb-1 { color: #e6cba6; border-color: rgba(201, 150, 100, 0.55); background: rgba(201, 150, 100, 0.12); }
.tier-badge.tb-2 { color: var(--brass-hi); border-color: rgba(232, 176, 74, 0.6); background: rgba(232, 176, 74, 0.14); }
.tier-badge.tb-3 { color: #c6efff; border-color: rgba(143, 233, 255, 0.55); background: rgba(143, 233, 255, 0.12); box-shadow: 0 0 10px rgba(143, 233, 255, 0.18); }
.tier-badge.tb-4 {
  color: var(--night);
  border-color: transparent;
  background: var(--g9);
  background-size: 200% 100%;
  box-shadow: 0 0 14px rgba(255, 138, 216, 0.35);
  animation: rshimmer 7s linear infinite;
}
.tier-xp { font-family: var(--font-num); font-weight: 600; font-size: 13.5px; color: var(--mist); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier.is-full .tier-xp { color: var(--brass); }
.tier.is-max .tier-xp { color: var(--sea); }
.tier-bar { height: 7px; }
.tier-bar .bar-fill { background: linear-gradient(90deg, var(--brass-lo), var(--brass) 60%, var(--brass-hi)); }
.tier.is-full .tier-bar .bar-fill { background: linear-gradient(90deg, var(--brass), #ffe7a8); box-shadow: 0 0 10px rgba(232, 176, 74, 0.5); }
.tier.is-max .tier-bar .bar-fill { background: linear-gradient(90deg, #3fb5a7, var(--sea)); }
.tier-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.35; }
.tier-k {
  flex: none;
  min-width: 36px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}
.tier-v { min-width: 0; }
.tier-line.is-next .tier-v { color: var(--mist); }
.tier-reqs { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.req { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.req-tag {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 122, 89, 0.45);
  background: rgba(255, 122, 89, 0.1);
  color: var(--coral);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.req-text { min-width: 0; }
.req.is-met .req-tag { color: var(--sea); border-color: rgba(95, 211, 196, 0.45); background: rgba(95, 211, 196, 0.1); }
.req.is-met .req-text { color: var(--mist); }
.odds { min-width: 0; }
.chest-card .odds-bar { margin-top: 0; }
.odds-cap {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}
.odds-cap + .odds-legend { margin-top: 1px; }
.pearl-row .row-role.is-out { color: var(--coral); font-weight: 700; }

/* ----------------------------------------------------------------------------------
   Chest reveal: the opening moment, XP and tier-up (SPEC-3 §20.7)
   ---------------------------------------------------------------------------------- */
.reveal-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; margin-bottom: 12px; }
.reveal-stage {
  --rc: var(--rope);
  position: relative;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(74, 79, 120, 0.6);
  background: radial-gradient(circle at 50% 72%, rgba(95, 110, 190, 0.3), transparent 70%), var(--night-deep);
}
.reveal-stage.r0 .reveal-glow { opacity: 0.55; }
.reveal-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.12) 38%, transparent 68%);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rc) 80%, transparent) 0, color-mix(in srgb, var(--rc) 26%, transparent) 40%, transparent 70%);
}
/* Elite finds: slow light rays behind the chest */
.reveal-stage.is-elite .reveal-glow::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.22) 0 9deg, transparent 9deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 62%);
  mask: radial-gradient(circle, #000 20%, transparent 62%);
  animation: rays-spin 12s linear infinite;
}
.reveal-chest { position: relative; display: grid; place-items: center; width: 96px; height: 96px; }
.reveal-chest canvas,
.reveal-chest .art-img { display: block; width: 96px; height: 96px; }
.reveal-chest .ico svg { width: 64px; height: 64px; }
.reveal.is-opening .reveal-chest { animation: chest-shake 0.38s ease-in-out; }
.reveal.is-opening .reveal-glow { opacity: 0; animation: glow-in 0.45s ease-out 0.38s forwards; }
.reveal.is-opening .reveal-stage.r0 .reveal-glow { animation-name: glow-in-soft; }
.reveal.is-opening .reveal-item { animation-duration: 0.3s; animation-delay: calc(480ms + var(--i, 0) * 100ms); }

.rx { min-width: 0; display: grid; gap: 6px; }
.rx-name { font-family: var(--font-display); font-size: 19px; line-height: 1.1; }
.rx-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.rx-gain { font-family: var(--font-num); font-weight: 700; font-size: 16px; color: var(--brass); font-variant-numeric: tabular-nums; }
.rx-bar { height: 10px; }
.rx-bar .bar-fill { transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.3, 1); }
.rx-note { min-height: 1.35em; font-size: 13px; color: var(--mist); font-variant-numeric: tabular-nums; }

.tier-banner {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
  padding: 10px 14px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--brass);
  background: linear-gradient(100deg, rgba(232, 176, 74, 0.24), rgba(232, 176, 74, 0.05) 70%), var(--night-deep);
  box-shadow: 0 0 24px rgba(232, 176, 74, 0.25);
  animation: banner-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.tbn-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
.tbn-title { font-family: var(--font-display); font-size: 19px; line-height: 1.15; }
.tbn-sub { font-size: 13px; color: var(--mist); }
.tbn-sub:empty { display: none; }
.reveal-bonus { color: var(--brass); font-weight: 700; }

/* Item tags: "Elite" and "Upgraded" (reveal list, gear detail) */
.item-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 1px; }
.tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag-upg { color: var(--sea); border-color: rgba(95, 211, 196, 0.5); background: rgba(95, 211, 196, 0.1); }
.tag-elite {
  color: var(--night);
  background-color: var(--rc, var(--brass));
  background-image: var(--rtext, none);
  background-size: 200% 100%;
  box-shadow: 0 0 10px color-mix(in srgb, var(--rc, var(--brass)) 50%, transparent);
}
.dc-head .tag { align-self: center; }

/* Toasts: tier-ups, "ready to rank up", and the big elite-find toast */
.toast-tier { --tc: var(--brass); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 22px rgba(232, 176, 74, 0.18); }
.toast-ready { --tc: var(--sea); }
.toast-kicker,
.toast-sub { display: block; }
.toast-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rc, var(--brass)); }
.toast-sub { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--mist); }
.toast-big { padding: 12px 16px 13px 18px; border-left-width: 6px; }
.toast-big .toast-text { display: block; margin-top: 1px; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.15; }
.toast-big.toast-rarity { animation: toast-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2), elite-pulse 1.1s ease-in-out 0.25s 2; }

/* ----------------------------------------------------------------------------------
   Phone strip: the compact Challenge boss button next to Auto-advance (SPEC-3 §21)
   ---------------------------------------------------------------------------------- */
.strip-challenge { display: none; }
@media (max-width: 600px) {
  .cap-strip { grid-template-columns: minmax(0, 1fr) auto; }
  .cap-strip.is-farming {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "purse boss adv"
      "hp hp skill";
  }
  .strip-challenge {
    grid-area: boss;
    display: inline-flex;
    gap: 5px;
    min-height: 40px;
    padding: 0 10px;
    border-color: var(--coral-hi);
    background: linear-gradient(180deg, #ff9272, var(--coral));
    box-shadow: inset 0 1px 0 rgba(255, 230, 220, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25);
    color: var(--night);
    font-size: 13.5px;
    font-weight: 800;
    white-space: nowrap;
  }
  .strip-challenge:hover { background: var(--coral-hi); border-color: #ffc0aa; }
  .strip-challenge svg { flex: none; width: 14px; height: 14px; }
  .cap-strip.is-farming .strip-purse { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cap-strip.is-farming .purse-num { font-size: 15px; }
  .cap-strip.is-farming .purse-gold .coin,
  .cap-strip.is-farming .purse-pearls .pearl { width: 13px; height: 13px; }

  /* The scene keeps only a small "Farming" tag in its corner. */
  .ov-farm .btn-challenge { display: none; }
}
@media (max-width: 420px) {
  .sc-long { display: none; }
}

/* ----------------------------------------------------------------------------------
   Short landscape screens (e.g. 844 x 390): a centred 16:9 scene, never an ultra-wide strip
   ---------------------------------------------------------------------------------- */
@media (max-height: 499px) and (orientation: landscape) {
  .scene-wrap {
    aspect-ratio: 16 / 9;
    width: min(100%, calc(58vh * 16 / 9));
    max-height: none;
    margin-inline: auto;
  }
}
/* Phones held sideways: the small scene keeps only the "Farming" tag too; the Challenge
   button joins the battle strip next to Auto-advance. */
@media (max-height: 499px) and (orientation: landscape) and (min-width: 601px) and (max-width: 959px) {
  .cap-strip.is-farming {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "skill hp boss adv";
  }
  .strip-challenge {
    grid-area: boss;
    display: inline-flex;
    gap: 6px;
    border-color: var(--coral-hi);
    background: linear-gradient(180deg, #ff9272, var(--coral));
    box-shadow: inset 0 1px 0 rgba(255, 230, 220, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25);
    color: var(--night);
    font-weight: 800;
    white-space: nowrap;
  }
  .strip-challenge:hover { background: var(--coral-hi); border-color: #ffc0aa; }
  .strip-challenge svg { flex: none; width: 15px; height: 15px; }
  .ov-farm .btn-challenge { display: none; }
}
@media (max-height: 499px) and (orientation: landscape) and (max-width: 760px) {
  .sc-long { display: none; }
}

/* ----------------------------------------------------------------------------------
   Crew collection (SPEC-4 §22.7): Deck · Roster · Tavern, crew pickers, recruit reveal.
   Crew rarity colours come from .cr0-.cr4 (--cc), set on the component itself.
   ---------------------------------------------------------------------------------- */
.tab-dot-crew { background: var(--brass); box-shadow: 0 0 0 2px var(--deck), 0 0 8px rgba(232, 176, 74, 0.7); }
.crew-seg { margin-bottom: 14px; }
.crew-seg .seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 8px rgba(232, 176, 74, 0.7);
}
.crew-pane { min-width: 0; }

/* Portraits in a frame tinted by crew rarity; Legendary and Mythic glow. */
.crew-art {
  --cc: var(--cr0);
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sz, 56px);
  height: var(--sz, 56px);
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--cc);
  background: radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--cc) 34%, transparent), transparent 72%), var(--night-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.crew-art .art-img,
.crew-art .mono { width: 100%; height: 100%; border-radius: 0; }
.crew-art.cr3,
.crew-art.cr4 { box-shadow: 0 0 12px color-mix(in srgb, var(--cc) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--cc) 30%, transparent); }
.crew-art.cr4 { outline: 1px solid color-mix(in srgb, var(--cc) 55%, transparent); outline-offset: 2px; overflow: hidden; }
/* Not found yet: a dark silhouette; only the rarity colour shows. */
.crew-art.is-unknown {
  border-style: dashed;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--cc) 30%, transparent), transparent 74%), var(--night-deep);
  box-shadow: none;
  outline: none;
}
.crew-art.is-unknown .art-img { filter: brightness(0); opacity: 0.86; }
.crew-art.is-unknown .mono { background: transparent; color: var(--cc); }
.crew-art.is-empty { border-style: dashed; border-color: var(--rope-hi); color: var(--brass); box-shadow: none; }
.crew-art.is-empty svg { width: 22px; height: 22px; }

.crew-chip {
  --cc: var(--cr0);
  height: 20px;
  padding: 0 7px;
  font-size: 10.5px;
  color: var(--cc);
  border-color: color-mix(in srgb, var(--cc) 55%, transparent);
  background: color-mix(in srgb, var(--cc) 14%, var(--night));
}
.stars { display: inline-flex; flex: none; font-size: 14px; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
.stars-on { color: var(--brass); text-shadow: 0 0 6px rgba(232, 176, 74, 0.45); }
.stars-off { color: var(--rope); }

/* Deck: six slot cards (one per row on phones) */
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.deck-note { margin: 12px 0 0; }
.slot-card {
  --cc: var(--rope);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(74, 79, 120, 0.6);
  background: linear-gradient(180deg, #343a63, var(--deck-2));
  box-shadow: var(--hi);
}
.slot-card.is-filled {
  border-color: color-mix(in srgb, var(--cc) 45%, var(--rope));
  background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 13%, #343a63), var(--deck-2) 70%);
}
.slot-card.is-filled:is(.cr3, .cr4) { box-shadow: var(--hi), 0 0 18px color-mix(in srgb, var(--cc) 22%, transparent); }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; align-self: stretch; }
.sc-slot { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
.sc-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sc-id { flex: 1 1 auto; min-width: 0; }
.sc-name { font-weight: 800; font-size: 16.5px; line-height: 1.15; overflow-wrap: anywhere; }
.sc-role { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; font-size: 13px; color: var(--mist); }
.sc-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-variant-numeric: tabular-nums; }
.sc-lvl { font-family: var(--font-num); font-weight: 600; font-size: 15.5px; }
.sc-dps { font-weight: 800; font-size: 14px; color: var(--sea); }
.sc-dps.is-idle { font-weight: 600; color: var(--mist); }
.sc-perk { font-size: 13px; color: var(--sea); }
.sc-mile { font-size: 12.5px; color: var(--mist); font-variant-numeric: tabular-nums; }
.sc-actions { display: flex; gap: 8px; min-width: 0; margin-top: auto; padding-top: 2px; }
.sc-level { flex: 1 1 auto; min-width: 0; }
.sc-change { flex: none; min-height: 48px; padding: 0 12px; }
.slot-card.is-empty,
.slot-card.is-locked {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 176px;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}
.sc-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px dashed var(--rope-hi);
  color: var(--mist);
}
.sc-icon svg { width: 22px; height: 22px; }
.slot-card.is-empty .sc-icon { color: var(--brass); border-color: rgba(232, 176, 74, 0.55); }
.sc-msg { max-width: 28ch; font-size: 14px; font-weight: 700; }
.slot-card.is-locked { opacity: 0.85; }
.sc-best { font-size: 12.5px; color: var(--mist); font-variant-numeric: tabular-nums; }

/* Crew picker and slot chooser */
.pick-intro { margin-bottom: 12px; font-size: 14px; color: var(--mist); }
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pick-row {
  --cc: var(--rope);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(74, 79, 120, 0.6);
  background: var(--night-deep);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 12%, var(--night-deep)), var(--night-deep) 70%);
}
.pick-row.is-current { box-shadow: 0 0 0 1px var(--cc); }
.pick-row.is-free { border-style: dashed; background: transparent; }
.pick-main { flex: 1 1 0; min-width: 0; }
.pick-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 800; }
.pick-name { font-size: 15px; overflow-wrap: anywhere; }
.pick-sub { font-size: 13px; color: var(--mist); font-variant-numeric: tabular-nums; }
.pick-perk { font-size: 12.5px; color: var(--sea); }
.pick-row > .btn { flex: none; }
.pick-slot {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--deck-2);
  font-family: var(--font-num);
  font-weight: 600;
  color: var(--brass);
}
.pick-note { margin-top: 12px; font-size: 13.5px; color: var(--mist); }

/* Roster: collection grid and detail card */
.roster-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.roster-count { flex: none; font-family: var(--font-num); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.roster-bar { flex: 1 1 auto; }
.roster-bar .bar-fill { background: linear-gradient(90deg, var(--brass-lo), var(--brass)); }
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; margin-top: 12px; }
.roster-cell {
  --cc: var(--cr0);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 8px 4px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(74, 79, 120, 0.6);
  background: var(--night-deep);
  color: var(--canvas);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s, border-color 0.15s;
}
.roster-cell.is-owned {
  border-color: color-mix(in srgb, var(--cc) 40%, var(--rope));
  background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 14%, var(--deck-2)), var(--night-deep));
}
.roster-cell:hover { transform: translateY(-1px); border-color: var(--rope-hi); }
.roster-cell.is-sel { box-shadow: 0 0 0 2px var(--canvas); }
.rc-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 800; }
.roster-cell.is-unknown .rc-name { color: var(--mist); letter-spacing: 0.12em; }
.rc-rar { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc); }
.roster-cell .stars { font-size: 10.5px; letter-spacing: 0; }
.rc-up {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  place-items: center;
  background: var(--sea);
  color: var(--night);
  box-shadow: 0 0 8px rgba(95, 211, 196, 0.6);
}
.rc-up svg { width: 11px; height: 11px; }
.roster-cell.can-up .rc-up { display: grid; }
.rc-deck {
  display: none;
  position: absolute;
  top: 6px;
  left: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 2px var(--night-deep);
}
.roster-cell.is-deck .rc-deck { display: block; }
.roster-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 12.5px; color: var(--mist); }
.roster-legend span { display: inline-flex; align-items: center; gap: 6px; }
.roster-legend .rc-deck,
.roster-legend .rc-up { position: static; display: inline-grid; box-shadow: none; }
.roster-legend .rc-up { width: 15px; height: 15px; }
.roster-legend .rc-up svg { width: 9px; height: 9px; }

.crew-detail {
  --cc: var(--rope);
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px 14px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--cc) 45%, var(--rope));
  background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 12%, var(--deck-2)), var(--night-deep) 80%);
  box-shadow: var(--hi);
  scroll-margin-top: 12px;
}
.crew-detail.is-unknown { border-style: dashed; background: var(--night-deep); }
.cd-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cd-id { min-width: 0; display: grid; justify-items: start; gap: 3px; }
.cd-name { font-family: var(--font-display); font-size: 22px; line-height: 1.1; overflow-wrap: anywhere; }
.cd-role { font-size: 13.5px; color: var(--mist); }
.cd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cd-prog { display: grid; gap: 5px; }
.cd-prog-text { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cd-bar .bar-fill { background: linear-gradient(90deg, var(--brass-lo), var(--brass)); }
.cd-bar.is-ready .bar-fill { background: linear-gradient(90deg, #3fb5a7, var(--sea)); }
.cd-lines { margin: 0; display: grid; gap: 4px; font-size: 13.5px; }
.cd-lines > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cd-lines dt { flex: none; width: 92px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mist); }
.cd-lines dd { margin: 0; min-width: 0; font-variant-numeric: tabular-nums; }
.cd-text { font-size: 14px; color: var(--mist); }
.cd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cd-actions .btn { flex: 1 1 150px; }
.cd-ondeck { height: 28px; }

/* Tavern */
.tv-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(74, 79, 120, 0.6);
  background: linear-gradient(180deg, #343a63, var(--deck-2));
  box-shadow: var(--hi);
}
.tv-card + .tv-card { margin-top: 12px; }
.tv-officer {
  border-color: rgba(233, 241, 255, 0.38);
  background: radial-gradient(ellipse 90% 70% at 100% 0%, rgba(233, 241, 255, 0.1), transparent 60%), linear-gradient(180deg, #353b66, var(--deck-2));
  box-shadow: var(--hi), 0 0 22px rgba(233, 241, 255, 0.08);
}
.tv-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tv-art { width: 52px; height: 52px; }
.tv-officer .tv-art { background: radial-gradient(circle at 50% 62%, rgba(233, 241, 255, 0.22), transparent 72%), var(--night-deep); }
.tv-title { min-width: 0; }
.tv-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.15; }
.tv-sub { font-size: 13.5px; color: var(--mist); }
.tv-free {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(74, 79, 120, 0.55);
  background: var(--night-deep);
}
.tv-dots { flex: none; display: flex; gap: 6px; }
.tv-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--rope-hi); }
.tv-dot.on {
  border-color: var(--brass-hi);
  background: radial-gradient(circle at 35% 30%, #fff1c4 0 18%, var(--brass) 45%, var(--brass-lo));
  box-shadow: 0 0 8px rgba(232, 176, 74, 0.45);
}
.tv-free-text { min-width: 0; display: grid; gap: 1px; }
.tv-free-n { font-size: 14px; font-weight: 800; }
.tv-free-n.is-out { color: var(--mist); }
.tv-reset { font-size: 12.5px; color: var(--mist); font-variant-numeric: tabular-nums; }
.tv-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.tv-actions > .btn,
.tv-o10 { flex: 1 1 140px; min-width: 0; }
.tv-o10 { display: grid; gap: 4px; }
.tv-o10 .btn { width: 100%; }
.tv-o10-note { font-size: 12px; font-weight: 700; text-align: center; color: var(--cr2); }
.tv-note { font-size: 13px; color: var(--mist); }
.tv-note.is-full { color: var(--brass-hi); font-weight: 700; }
.tv-pity { display: grid; gap: 5px; }
.tv-pity-text { font-size: 13.5px; font-weight: 700; color: var(--cr3); }
.tv-pity-bar .bar-fill { background: linear-gradient(90deg, var(--cr2), var(--cr3)); }
.tv-odds .odds-bar { margin-top: 0; }
.tv-collection { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 14px; font-weight: 700; }
.officer-row { border-color: rgba(233, 241, 255, 0.32); }
.officer-pity { color: var(--cr3); font-size: 13px; font-weight: 700; }
.tag-premium { color: var(--night); border-color: #ffffff; background: linear-gradient(180deg, #f4f8ff, #cdd9f2); font-family: var(--font-body); }
.tag-new { color: var(--night); background: var(--sea); box-shadow: 0 0 10px rgba(95, 211, 196, 0.5); }
.tag-up { color: var(--sea); border-color: rgba(95, 211, 196, 0.5); background: rgba(95, 211, 196, 0.1); }
/* Recruit Ticket glyph (buy buttons) */
.tkt {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 0.78em;
  border-radius: 2px;
  background: linear-gradient(180deg, #f0dcb8, #d2b07c);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 0.17em, #000 0.18em) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 0.17em, #000 0.18em) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 0.17em, #000 0.18em) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 0.17em, #000 0.18em) right / 51% 100% no-repeat;
}
.btn:disabled .tkt { filter: grayscale(0.7) brightness(0.8); }
.toast-ticket { --tc: #e6cba6; }

/* Recruit reveal: cards turn over one by one; Legendary and Mythic get rays, a glow and a flash. */
.rv { position: relative; }
.rv-flash {
  position: absolute;
  inset: -16px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--cc, #ffffff) 50%, transparent), transparent 68%);
}
.rv-grid { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rv.is-single .rv-grid { grid-template-columns: minmax(0, 300px); justify-content: center; }
.rv.is-multi .rv-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rv-card {
  --cc: var(--cr0);
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--cc) 70%, transparent);
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--cc) 26%, transparent), transparent 70%), var(--night-deep);
  box-shadow: 0 0 18px color-mix(in srgb, var(--cc) 22%, transparent);
  text-align: center;
}
.rv-card.is-big { box-shadow: 0 0 0 1px var(--cc), 0 0 30px color-mix(in srgb, var(--cc) 55%, transparent); }
.rv-burst {
  position: absolute;
  inset: -40%;
  z-index: 0;
  opacity: 0.85;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--cc) 42%, transparent) 0 10deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 14%, transparent 58%);
  mask: radial-gradient(circle, #000 14%, transparent 58%);
  animation: rays-spin 14s linear infinite;
}
.rv-face { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.rv-name { max-width: 100%; font-weight: 800; font-size: 15px; line-height: 1.15; overflow-wrap: anywhere; }
.rv.is-single .rv-name { font-family: var(--font-display); font-weight: 400; font-size: 26px; }
.rv-role { margin-top: -4px; font-size: 13.5px; color: var(--mist); }
.rv-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; }
.rv-mark { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rv-mark-text.is-pearl { color: var(--pearl); text-shadow: 0 0 8px rgba(233, 241, 255, 0.4); }
.rv-perk { font-size: 13px; color: var(--sea); }
.rv-act { align-self: stretch; }
.rv-act:empty { display: none; }
.rv-act .btn { width: 100%; }
.rv-act .chip { max-width: 100%; }
.rv.is-multi .rv-card { padding: 10px 6px; }
.rv.is-multi .rv-name { font-size: 13px; }
.rv.is-multi .rv-mark { font-size: 11.5px; }
.rv.is-multi .stars { font-size: 11px; letter-spacing: 0; }
.rv.is-multi .rv-act .btn { min-height: 40px; padding: 0 6px; font-size: 13px; }
.rv.is-multi .rv-act .chip { font-size: 10px; padding: 0 6px; }
.rv-sum { position: relative; z-index: 1; margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--mist); }
.rv.is-playing .rv-card { animation: rv-flip 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15) var(--d, 0ms) both; }
.rv.is-playing .rv-card.is-big { animation: rv-big 0.95s cubic-bezier(0.2, 0.9, 0.3, 1.2) var(--d, 0ms) both; }
.rv.is-playing.has-big .rv-flash { animation: rv-flash 1.3s ease-out var(--fd, 0ms) both; }

@media (max-width: 760px) {
  /* ×10 stacks into two columns on phones */
  .rv.is-multi .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 600px) {
  .crew-seg { margin-bottom: 12px; }
  .slot-card.is-empty,
  .slot-card.is-locked { min-height: 0; padding-block: 12px 14px; }
  .sc-change { min-height: 48px; padding: 0 10px; }
  .roster-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; }
  .tv-card,
  .crew-detail { padding: 10px 12px 12px; }
  .cd-lines dt { width: 78px; }
  .rv.is-single .rv-name { font-size: 23px; }
  .crew-detail { scroll-margin-top: 140px; }
}
@media (max-width: 380px) {
  .pick-row { flex-wrap: wrap; }
  .pick-row > .btn { flex: 1 1 100%; }
  .cd-lines > div { flex-direction: column; gap: 0; }
}

@keyframes rv-flip {
  from { opacity: 0; transform: perspective(600px) rotateY(90deg) scale(0.85); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes rv-big {
  0% { opacity: 0; transform: perspective(600px) rotateY(180deg) scale(0.6); }
  45% { opacity: 1; transform: perspective(600px) rotateY(0deg) scale(1.12); box-shadow: 0 0 0 2px var(--cc), 0 0 60px color-mix(in srgb, var(--cc) 80%, transparent); }
  100% { opacity: 1; transform: none; }
}
@keyframes rv-flash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

/* ----------------------------------------------------------------------------------
   Quality of life (SPEC-5 §23): fixed reveal windows, bulk opening, the gear compare,
   favourites and the hold's Sort control
   ---------------------------------------------------------------------------------- */
/* Chest and recruit reveals keep one size: head · a body that scrolls · the action bar. */
.modal-fixed {
  display: flex;
  flex-direction: column;
  height: min(680px, 88vh);
  min-height: 0;
}
/* "Open another" / "Recruit again" swaps the window in place: no fade or pop-in, nothing jumps. */
.backdrop-again,
.backdrop-again > .modal { animation: none; }
.modal-fixed > .modal-head { flex: none; }
.modal-fixed > .reveal,
.modal-fixed > .rv { flex: 1 1 auto; min-height: 0; }
.modal-fixed > .modal-actions {
  flex: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(74, 79, 120, 0.6);
}
.modal-fixed .reveal { display: flex; flex-direction: column; }
.modal-fixed .reveal-head { flex: none; }
.reveal-scroll,
.modal-fixed > .rv {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--rope) transparent;
}
.reveal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  margin-inline: -6px;
  padding: 2px 6px 8px;
}
.modal-fixed > .rv { margin-inline: -6px; padding: 8px 6px 10px; }
.modal-fixed .rv-flash { inset: 0; }
.modal-fixed .rv.is-single { display: flex; flex-direction: column; }
.modal-fixed .rv.is-single .rv-grid { margin-block: auto; }

/* The reveal's action bar: Open another ×1 / ×10 / all (Golden ×1 / ×10) and Done, always in place. */
.reveal-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(96px, auto);
  align-items: stretch;
  gap: 8px;
}
.reveal-actions.ra-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(96px, auto); }
.reveal-actions .buy { min-width: 0; padding-inline: 8px; }
.reveal-actions .btn-done { min-height: 48px; }

/* Chest locker and Golden Chest cards: Open, ×10, Open all (Golden: Open, ×10) in a row of their own */
.ch-buys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.ch-buys-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-buys .buy { width: 100%; min-width: 0; padding-inline: 6px; }
/* The hold has less room than one x10 open brings */
.ch-hold { margin: 0; font-size: 13px; line-height: 1.35; color: var(--brass-hi); }

/* Bulk reveal: summary, "Equip upgrades", tiles best first, the compare in place */
.bulk-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(74, 79, 120, 0.6);
  background: var(--night-deep);
}
.bulk-line { flex: 1 1 220px; min-width: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bulk-ups { flex: none; }
.bulk-hint { margin-bottom: 8px; font-size: 13px; color: var(--mist); }
.rv-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px;
}
.rv-tiles > li { min-width: 0; }
.rv-tile {
  --rc: var(--rope);
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--rc);
  background: var(--deck-2);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 24%, transparent), transparent 72%), var(--deck-2);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.08s, box-shadow 0.15s, opacity 0.15s;
}
.rv-tile:hover { transform: translateY(-1px); }
.rv-tile img, .rv-tile .mono { width: 76%; height: 76%; }
.rv-tile.r4, .rv-tile.r5 { box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 45%, transparent); }
.rv-tile:disabled,
.rv-tile.is-gone { opacity: 0.35; cursor: default; transform: none; }
.rv-tile .eqd { display: none; }
.rv-tile.is-eq .eqd {
  display: block;
  position: absolute;
  left: 3px;
  bottom: 3px;
  z-index: 2;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--sea) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231b1f3a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.reveal.is-opening .rv-tile {
  animation: reveal-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  animation-delay: calc(480ms + var(--d, 0ms));
}
.bulk-cmp { display: grid; gap: 10px; min-width: 0; }
.rv-back { justify-self: start; gap: 4px; padding-left: 10px; }
.rv-back svg { width: 12px; height: 12px; }
.bulk-cmp .detail { margin-top: 0; }
/* The reveal's body is short (chest, XP and the action bar share the window): Equip and Favourite stay
   on screen at the bottom of the scrolling body while the compare above them is read. */
.bulk-cmp .cmp > .dc-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -12px -12px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(74, 79, 120, 0.6);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--night-deep);
}

/* Favourites: a gold star on hold tiles, equipped slots and reveal tiles; the toggle button */
.favs { display: none; }
.is-fav > .favs {
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.9l2.5 5.1 5.6.8-4.05 3.95.96 5.58L10 14.7l-5.01 2.63.96-5.58L1.9 7.8l5.6-.8z' fill='%23f3c56a' stroke='%231b1f3a' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.eq-slot.is-fav > .favs { top: 4px; left: 5px; }
.btn-fav .fav-ico { display: inline-grid; place-items: center; width: 18px; height: 18px; }
.btn-fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; }
.btn-fav[aria-pressed="true"] {
  color: var(--brass-hi);
  border-color: rgba(232, 176, 74, 0.6);
  background: linear-gradient(180deg, rgba(232, 176, 74, 0.2), rgba(232, 176, 74, 0.08));
}
.btn-fav[aria-pressed="true"] svg { fill: var(--brass); stroke: var(--brass); }
.fav-note {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--rope);
  color: var(--mist);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
}
.salvage-note { margin: 8px 0 0; font-size: 12.5px; }

/* Gear compare (SPEC-5 §23.1): Equipped vs Selected, the stat table, deltas, buttons */
.detail.is-compare { padding: 12px; }
.cmp { display: grid; gap: 10px; min-width: 0; }
.cmp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.cmp-col {
  --rc: var(--rope);
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(74, 79, 120, 0.6);
  background: var(--deck);
}
.cmp-col.is-none { border-style: dashed; background: transparent; }
.cmp-k { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
.cmp-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cmp-art {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--rc);
  display: grid;
  place-items: center;
  background: var(--deck-2);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 72%), var(--deck-2);
}
.cmp-art img, .cmp-art .mono { width: 38px; height: 38px; }
.cmp-id { min-width: 0; }
.cmp-name { font-size: 14.5px; line-height: 1.2; overflow-wrap: anywhere; }
.cmp-id .item-sub { font-size: 12.5px; }
.cmp-none { padding: 10px 0 4px; font-size: 13.5px; color: var(--mist); }
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.cmp-table thead th:nth-child(1) { width: 36%; }
.cmp-table thead th:nth-child(2) { width: 26%; }
.cmp-table thead th:nth-child(3) { width: 38%; }
.cmp-table th,
.cmp-table td { padding: 5px 6px; text-align: right; vertical-align: baseline; overflow-wrap: anywhere; }
.cmp-table thead th {
  padding-top: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist);
  border-bottom: 1px solid rgba(74, 79, 120, 0.7);
}
.cmp-table thead th:first-child,
.cmp-table tbody th { text-align: left; }
.cmp-table tbody th { font-weight: 600; color: var(--mist); }
.cmp-table tbody tr + tr { border-top: 1px solid rgba(74, 79, 120, 0.35); }
.cmp-table tr.is-main th,
.cmp-table tr.is-main td { color: var(--canvas); font-weight: 800; }
.cmp-table td.is-none:nth-child(2),
.cmp-table td.is-none > .cv { color: var(--mist); }
.cd { display: inline-flex; align-items: baseline; gap: 2px; margin-left: 6px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.cd.up { color: var(--sea); }
.cd.down { color: var(--coral); }
.cd.same { color: var(--mist); font-weight: 700; }
.cd-a { font-size: 0.85em; }
.lbl-short { display: none; }
.cmp .dc-compare { margin-top: 0; }
.cmp .dc-actions,
.icard .dc-actions { margin-top: 0; }
.icard { display: grid; gap: 10px; min-width: 0; }
.icard .dc-stats { margin-top: 0; }
/* Gear tab: the card keeps its height from one item to the next (ui.js steadyDetail) with the buttons
   pinned to its bottom, so neither they nor the hold below move when another tile is picked. */
#gear-detail:not(.is-empty) { display: flex; flex-direction: column; }
#gear-detail > .cmp,
#gear-detail > .icard { flex: 1 1 auto; display: flex; flex-direction: column; }
#gear-detail > .cmp > .dc-actions,
#gear-detail > .icard > .dc-actions { margin-top: auto; }

/* The hold's Sort control (SPEC-5 §23.4) */
.hold-sort { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--mist); }
.hold-head .seg.sort-seg { margin-bottom: 0; }
.sort-seg .seg-btn { flex: none; min-width: 0; padding: 0 10px; font-size: 13.5px; }

/* Set Sail: the next voyage's requirement (SPEC-5 §23.6) */
.sail-next { margin-top: 8px; color: var(--mist); }
.sail-next strong { color: var(--brass-hi); font-weight: 800; }

/* Desktop: a 100-slot hold scrolls inside the panel; while a modal is open, toasts keep to the gutter
   beside a 560 px window instead of covering its action bar. That gutter takes a 260 px toast from
   1152 px wide; narrower screens hold toasts back while a reveal is open (ui.js toastGutter). */
@media (min-width: 960px) {
  body.has-modal .toast-root { width: min(440px, max(260px, calc(50vw - 316px))); }
  .inv-grid {
    max-height: min(436px, 54vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: -3px;
    padding: 3px;
    scrollbar-width: thin;
    scrollbar-color: var(--rope) transparent;
  }
}

@media (max-width: 600px) {
  .modal-fixed { height: min(680px, 92vh); }
  .backdrop-fixed {
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  .reveal-actions,
  .reveal-actions.ra-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reveal-actions.ra-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reveal-actions .btn-done { grid-column: 1 / -1; min-height: 44px; }
  .modal-fixed .reveal-head { gap: 12px; margin-bottom: 10px; }
  .modal-fixed .reveal-stage { width: 96px; height: 96px; }
  .modal-fixed .reveal-chest,
  .modal-fixed .reveal-chest canvas,
  .modal-fixed .reveal-chest .art-img { width: 88px; height: 88px; }

  /* 5-6 tiles per row, never smaller than 44 px */
  .inv-grid { grid-template-columns: repeat(auto-fill, minmax(max(46px, calc((100% - 30px) / 6)), 1fr)); }

  .lbl-long { display: none; }
  .lbl-short { display: inline; }
  .detail.is-compare { padding: 10px; }
  .bulk-cmp .cmp > .dc-actions { margin: 0 -10px -10px; padding: 10px; }
  .cmp-col { padding: 7px 8px 8px; }
  .cmp-art { width: 38px; height: 38px; }
  .cmp-art img, .cmp-art .mono { width: 32px; height: 32px; }
  .cmp-name { font-size: 13.5px; }
  .cmp-table { font-size: 13px; }
  .cmp-table th,
  .cmp-table td { padding: 5px 3px; }
  .cmp-table thead th:nth-child(1) { width: 34%; }
  .cmp-table thead th:nth-child(2) { width: 28%; }
  .cmp-table thead th:nth-child(3) { width: 38%; }
  /* the difference sits beside the value when it fits, and wraps under it when it does not */
  .cd { margin-left: 4px; font-size: 12px; }
  .dc-actions .btn { flex-basis: 110px; }
  .fav-note { flex-basis: 110px; }
  .hold-sort { flex: 1 1 100%; }
  .sort-seg { flex: 1 1 auto; }
  .sort-seg .seg-btn { flex: 1 1 0; }
}

/* ----------------------------------------------------------------------------------
   SPEC-7 chest drops: the chest locker (Market), the Auto-open switch and its session line,
   the quiet auto-open note under the isle name, the Market tab's dot, the Set Sail formula.
   ---------------------------------------------------------------------------------- */
.locker-auto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--night-deep);
  border: 1px solid var(--rope);
  min-width: 0;
}
.locker-auto .switch { flex: none; }
.locker-auto-note { flex: 1 1 220px; min-width: 0; margin: 0; font-size: 13px; line-height: 1.35; color: var(--mist); }
.locker-log { margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: var(--mist); min-width: 0; overflow-wrap: anywhere; }
.locker-log-k { font-weight: 800; color: var(--canvas); }
.locker-log .rname { color: var(--rc); font-weight: 800; }
.locker-count { flex: none; align-self: center; color: var(--mist); font-variant-numeric: tabular-nums; }
.locker-count.is-some { color: var(--brass); border-color: rgba(232, 176, 74, 0.55); background: rgba(232, 176, 74, 0.12); }
.locker-card .ch-buys .buy { min-height: 40px; }
.tab-dot-market { background: var(--brass); box-shadow: 0 0 0 2px var(--deck), 0 0 8px rgba(232, 176, 74, 0.7); }
.sail-formula { margin-top: 6px; max-width: 70ch; font-size: 13.5px; color: var(--mist); }
/* sp-7 fix: chests waiting in the locker when the Set Sail window opens */
.sail-locker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 10px; padding: 8px 12px; max-width: 70ch;
  border-radius: 10px; border: 1px solid rgba(232, 176, 74, 0.55); background: rgba(232, 176, 74, 0.12);
}
.sail-locker p { flex: 1 1 240px; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--canvas); }
.sail-locker .btn { flex: none; }
.ledger .is-chests dd { color: var(--brass-hi); font-size: 18px; line-height: 1.35; }

/* The quiet note: bottom centre of the scene, keeps its line while faded out (no layout shift), fades in and out. */
.ov-loot {
  min-height: 1.35em;
  max-width: min(440px, 92%);
  padding: 3px 10px 4px;
  border-radius: 999px;
  background: rgba(20, 23, 45, 0.72);
  border: 1px solid rgba(232, 176, 74, 0.28);
  color: var(--canvas);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.ov-loot.is-on { opacity: 1; transform: none; }
.ov-loot:empty { border-color: transparent; background: none; }
.ov-loot .loot-up {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brass);
  color: var(--night);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ov-loot .loot-best { color: var(--rc); font-weight: 800; }
.ov-loot .loot-full { color: var(--brass-hi); font-weight: 800; }
@media (max-width: 600px) {
  .ov-loot { font-size: 11px; padding: 2px 8px 3px; }
  .locker-auto { padding: 6px 10px; }
}

/* ----------------------------------------------------------------------------------
   Rarity hooks: .rN sets --rc for whatever component carries it. Kept after every
   component so they override the components' neutral --rc defaults.
   ---------------------------------------------------------------------------------- */
.r0 { --rc: var(--r0); }
.r1 { --rc: var(--r1); }
.r2 { --rc: var(--r2); }
.r3 { --rc: var(--r3); }
.r4 { --rc: var(--r4); }
.r5 { --rc: var(--r5); }
.r6 { --rc: var(--r6); }
.r7 { --rc: var(--r7); }
.r8 { --rc: var(--r8); }
.r9 { --rc: var(--r9); }
/* Crew rarities (SPEC-4 §22.1) set --cc: frames, chips, slot cards, reveal cards. */
.cr0 { --cc: var(--cr0); }
.cr1 { --cc: var(--cr1); }
.cr2 { --cc: var(--cr2); }
.cr3 { --cc: var(--cr3); }
.cr4 { --cc: var(--cr4); }
/* Name styling per rarity, inherited by the names inside a rarity-tagged tile and reset by
   any nested rarity (e.g. "Replaces <name>" inside the gear detail):
   --rtext gradient (Eternal, Astral) shown through the glyphs, --rglow soft glow (Celestial,
   Stormborn). */
.r0, .r1, .r2, .r3, .r4, .r5 { --rtext: none; --rfill: currentcolor; --rglow: none; }
.r6 { --rtext: none; --rfill: currentcolor; --rglow: 0 0 10px rgba(143, 233, 255, 0.6); }
.r7 { --rtext: none; --rfill: currentcolor; --rglow: 0 0 10px rgba(255, 224, 102, 0.55); }
.r8 { --rtext: var(--g8); --rfill: transparent; --rglow: none; }
.r9 { --rtext: var(--g9); --rfill: transparent; --rglow: none; }

/* Elite rarities everywhere items appear (SPEC-3 §20.7): names, tiles, borders, toasts.
   Celestial and Stormborn glow; Eternal and Astral get gradient text and gradient borders
   that shimmer slowly (static under prefers-reduced-motion, see Motion). */
.item-name,
.rname,
.odd {
  background-image: var(--rtext, none);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--rfill, currentcolor);
  text-shadow: var(--rglow, none);
}
:is(.r8, .r9):is(.item-name, .rname, .odd),
:is(.r8, .r9) :is(.item-name, .rname),
:is(.r8, .r9) .tag-elite,
.odds-bar span:is(.r8, .r9) { animation: rshimmer 7s linear infinite; }
.odds-bar span { background-image: var(--rtext, none); background-size: 200% 100%; }

.rframe { position: relative; }
.rframe:is(.r6, .r7, .r8, .r9) {
  border-color: var(--rc);
  box-shadow: 0 0 12px color-mix(in srgb, var(--rc) 45%, transparent), inset 0 0 12px color-mix(in srgb, var(--rc) 16%, transparent);
}
.rframe.is-sel:is(.r6, .r7, .r8, .r9) { box-shadow: 0 0 0 2px var(--canvas), 0 0 14px color-mix(in srgb, var(--rc) 50%, transparent); }
.rframe:is(.r8, .r9)::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 1.5px;
  border-radius: inherit;
  background-image: var(--rtext);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: rshimmer 7s linear infinite;
}
.toast-rarity:is(.r6, .r7, .r8, .r9) {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 70%, transparent), 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 30px color-mix(in srgb, var(--rc) 38%, transparent);
}
.reveal-art { position: relative; }
.reveal-item:is(.r6, .r7, .r8, .r9) .reveal-art { box-shadow: inset 0 0 12px color-mix(in srgb, var(--rc) 35%, transparent); }

/* ----------------------------------------------------------------------------------
   Motion
   ---------------------------------------------------------------------------------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes reveal-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes boss-pulse { from { transform: scale(1); } to { transform: scale(1.18); } }
@keyframes blink { 50% { opacity: 0.35; } }
@keyframes hint-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
/* Opacity and transform only, so the compositor runs them without repainting anything. */
@keyframes ready-glow { from { opacity: 0.15; } to { opacity: 1; } }
@keyframes sea-pulse {
  0% { opacity: 0.55; transform: scale(1); }
  70% { opacity: 0; transform: scale(2.75); }
  100% { opacity: 0; transform: scale(2.75); }
}
@keyframes dot-pulse { from { opacity: 0; } to { opacity: 1; } }
/* SPEC-3: elite shimmer (slides a 200%-wide gradient by one image width, so it loops
   seamlessly), the chest's opening moment, the tier-up banner and the elite toast. */
@keyframes rshimmer { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes chest-shake {
  0%, 100% { transform: none; }
  15% { transform: translateX(-3px) rotate(-4deg); }
  30% { transform: translateX(3px) rotate(4deg); }
  45% { transform: translateX(-3px) rotate(-3deg); }
  60% { transform: translateX(2px) rotate(3deg); }
  75% { transform: translateY(-2px) scale(1.04); }
}
@keyframes glow-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes glow-in-soft { from { opacity: 0; } to { opacity: 0.55; } }
@keyframes rays-spin { to { transform: rotate(360deg); } }
@keyframes banner-pop { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes elite-pulse {
  50% { box-shadow: 0 0 0 1px var(--rc), 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 46px color-mix(in srgb, var(--rc) 60%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Elite gradients and rays hold still; the chest reveal shows its final state at once. */
  .item-name,
  .rname,
  .odd,
  .tag-elite,
  .tier-badge,
  .odds-bar span,
  .rframe::after,
  .reveal-glow::before,
  .rv-burst { animation: none !important; }
  /* The recruit reveal shows every card at once; no flash. */
  .rv-card { animation: none !important; }
  .rv-flash { display: none; }
}