/*
 * Maritime chart theme for future One Piece Card Game hubs and calculators.
 * The design is intentionally asset-free: chart lines, currents, and route
 * markers are authored CSS geometry rather than franchise artwork or symbols.
 */
.game-theme--one-piece {
  --one-piece-hero-art: url("/images/other-games/one-piece-high-seas-hero.webp");
  --one-piece-deep-navy: #06131f;
  --one-piece-navy: #0c1f2d;
  --one-piece-slate: #163544;
  --one-piece-cream: #fff4dc;
  --one-piece-coral: #e86f5b;
  --one-piece-sea-glass: #8ed8d2;
  --one-piece-gold: #ffd477;
  --other-bg: var(--one-piece-deep-navy);
  --other-panel-solid: var(--one-piece-navy);
  --other-surface: rgba(12, 31, 45, 0.96);
  --other-surface-strong: #112c3a;
  --other-text: var(--one-piece-cream);
  --other-muted: #c8cec5;
  --other-accent: var(--one-piece-coral);
  --other-accent-strong: #ff9c82;
  --other-accent-rgb: 232, 111, 91;
  --other-link: #9be5df;
  --other-focus: #ffd477;
  --other-border-width: 1px;
  --other-border-style: solid;
  --other-border: #527783;
  --other-control-border: #78a8aa;
  --other-display-font: Georgia, "Times New Roman", ui-serif, serif;
  --other-body-font:
    Aptos, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --other-code-font:
    "SFMono-Regular", Consolas, "Liberation Mono", ui-monospace, monospace;
  --other-heading-letter-spacing: -0.025em;
  --other-heading-weight: 700;
  --other-radius-large: 28px 8px 28px 8px;
  --other-radius-medium: 18px 6px 18px 6px;
  --other-radius-control: 7px 3px 7px 3px;
  --other-chip-radius: 999px;
  --other-button-radius: 7px 3px 7px 3px;
  --other-panel-shadow:
    0 24px 58px rgba(0, 6, 12, 0.44), inset 0 0 0 1px rgba(255, 244, 220, 0.045);
  --other-hover-shadow:
    0 0 0 2px rgba(232, 111, 91, 0.32), 0 20px 42px rgba(0, 7, 14, 0.44);
  --other-method-background:
    linear-gradient(
        90deg,
        rgba(232, 111, 91, 0.72),
        rgba(255, 212, 119, 0.62) 36%,
        rgba(142, 216, 210, 0.62)
      )
      top / 100% 3px no-repeat,
    radial-gradient(
      circle at 89% 11%,
      rgba(142, 216, 210, 0.13),
      transparent 27%
    ),
    repeating-radial-gradient(
      ellipse at 0 100%,
      transparent 0 31px,
      rgba(142, 216, 210, 0.07) 32px 33px,
      transparent 34px 62px
    ),
    #102836;
  --other-product-background:
    linear-gradient(
        90deg,
        rgba(232, 111, 91, 0.76),
        rgba(142, 216, 210, 0.54),
        transparent 78%
      )
      top / 100% 3px no-repeat,
    linear-gradient(105deg, rgba(232, 111, 91, 0.12), transparent 38%),
    repeating-linear-gradient(
      0deg,
      transparent 0 27px,
      rgba(255, 244, 220, 0.045) 28px 29px
    ),
    #102836;
  --other-control-background: #102a38;
  --other-chip-background: #163544;
  --other-chip-foreground: var(--one-piece-cream);
  --other-chip-border: #e27c6a;
  --other-button-background: #dc6855;
  --other-button-foreground: #07141f;
  --other-button-border: #ff9c82;
  --other-action-note-background: #183543;
  --other-page-background:
    linear-gradient(
        90deg,
        transparent calc(50% - 1px),
        rgba(142, 216, 210, 0.035) 50%,
        transparent calc(50% + 1px)
      )
      0 0 / 22rem 100%,
    radial-gradient(
      circle at 86% 4%,
      rgba(232, 111, 91, 0.18),
      transparent 25rem
    ),
    repeating-radial-gradient(
      ellipse at 12% 108%,
      transparent 0 47px,
      rgba(142, 216, 210, 0.055) 48px 49px,
      transparent 50px 92px
    ),
    linear-gradient(150deg, #0b2533, var(--one-piece-deep-navy) 68%);
  --other-hero-background:
    linear-gradient(
        90deg,
        var(--one-piece-coral),
        var(--one-piece-gold) 42%,
        var(--one-piece-sea-glass)
      )
      top / 100% 5px no-repeat,
    linear-gradient(
      96deg,
      rgba(6, 19, 31, 0.99) 0%,
      rgba(6, 19, 31, 0.98) 36%,
      rgba(6, 19, 31, 0.9) 54%,
      rgba(6, 19, 31, 0.48) 70%,
      rgba(6, 19, 31, 0.12) 100%
    ),
    linear-gradient(
      180deg,
      rgba(6, 19, 31, 0.08),
      transparent 58%,
      rgba(6, 19, 31, 0.5)
    ),
    var(--one-piece-hero-art) 72% center / cover no-repeat;
  --other-directory-card-background:
    linear-gradient(
      95deg,
      rgba(6, 19, 31, 0.99),
      rgba(6, 19, 31, 0.92) 56%,
      rgba(15, 54, 67, 0.28)
    ),
    var(--one-piece-hero-art) 72% center / cover no-repeat;
  --other-directory-card-motif:
    linear-gradient(
      90deg,
      transparent 0 78%,
      rgba(232, 111, 91, 0.16) 78% 79%,
      transparent 79%
    ),
    linear-gradient(
      0deg,
      transparent 0 63%,
      rgba(255, 244, 220, 0.08) 63% 64%,
      transparent 64%
    );
  --other-hero-motif:
    repeating-linear-gradient(
      0deg,
      transparent 0 54px,
      rgba(142, 216, 210, 0.06) 55px 56px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 72px,
      rgba(255, 244, 220, 0.045) 73px 74px
    ),
    linear-gradient(
      148deg,
      transparent 0 60%,
      rgba(232, 111, 91, 0.18) 60.2% 60.45%,
      transparent 60.65%
    ),
    linear-gradient(
      90deg,
      transparent 0 68%,
      rgba(255, 244, 220, 0.08) 68% 68.5%,
      transparent 68.5%
    ),
    linear-gradient(
      0deg,
      transparent 0 58%,
      rgba(142, 216, 210, 0.11) 58% 58.5%,
      transparent 58.5%
    );
  --other-hero-decoration:
    radial-gradient(
      circle at center,
      var(--one-piece-coral) 0 2.5%,
      transparent 3.5%
    ),
    radial-gradient(
      circle at center,
      transparent 0 15%,
      rgba(255, 212, 119, 0.88) 15.5% 16.5%,
      transparent 17% 31%,
      rgba(142, 216, 210, 0.64) 31.5% 32.5%,
      transparent 33% 46%,
      rgba(232, 111, 91, 0.46) 46.5% 47%,
      transparent 47.5%
    ),
    repeating-conic-gradient(
      from 8deg,
      rgba(255, 244, 220, 0.42) 0 1deg,
      transparent 1deg 22.5deg
    );
  --other-hero-decoration-radius: 50%;
  --other-hero-decoration-transform: rotate(-9deg);
  --other-product-radius: 17px 5px 17px 5px;
  --other-method-radius: 22px 7px 22px 7px;
  --other-link-decoration-thickness: 0.08em;
  --other-hover-lift: -2px;
  --other-alt-surface: #0c1f2d;
  --other-alt-text: var(--one-piece-cream);
  --other-alt-muted: #c8cec5;
  --other-alt-link: #9be5df;
  --other-alt-focus: #ffd477;
  --other-hero-text: var(--one-piece-cream);
  --other-hero-muted: #d2d7ce;
  --other-hero-kicker: #ff9c82;
  --other-hero-content-width: min(76%, 54rem);
  --other-hero-heading-width: min(82%, 18ch);
  --other-chart-background-start: #091823;
  --other-chart-background-end: #123241;
  --other-chart-grid: rgba(142, 216, 210, 0.1);
  --other-chart-axis: rgba(255, 244, 220, 0.36);
  --other-chart-band-fill: rgba(255, 212, 119, 0.1);
  --other-chart-bar-top: rgba(255, 156, 130, 0.96);
  --other-chart-bar-bottom: rgba(190, 72, 61, 0.84);
  --other-chart-boundary: rgba(142, 216, 210, 0.92);
  --other-chart-boundary-width: 1.5;
  --other-chart-boundary-dash: 7 5;
  --other-chart-mid: #ffd477;
  --other-chart-mid-width: 2.5;
  --other-chart-label: rgba(255, 244, 220, 0.92);
  --other-chart-font-family: var(--other-body-font);
  --other-breakdown-color-1: #ff9c82;
  --other-breakdown-color-2: #8ed8d2;
  --other-breakdown-color-3: #ffd477;
  --other-breakdown-color-4: #9ba9d8;
  --other-breakdown-color-5: #d49ac8;
  --other-breakdown-color-6: #b7c7a4;
  color-scheme: dark;
}

.game-theme--one-piece
  :where(
    .other-eyebrow,
    .other-product-row__eyebrow,
    .other-product-row__meta,
    .other-result-count,
    .other-calc-kicker,
    .other-calc-panel-label
  ) {
  font-family: var(--other-code-font);
}

.game-theme--one-piece :where(.other-eyebrow, .other-calc-kicker) {
  letter-spacing: 0.18em;
}

.game-theme--one-piece .other-eyebrow::before,
.other-game-calculator.game-theme--one-piece .other-calc-kicker::before {
  display: inline-block;
  width: 1.35rem;
  margin-right: 0.55rem;
  border-top: 2px solid var(--one-piece-coral);
  content: "";
  vertical-align: 0.22em;
}

.game-theme--one-piece .other-hero,
.other-game-calculator.game-theme--one-piece .other-calc-hero {
  border-color: #6d9298;
  box-shadow:
    0 30px 72px rgba(0, 6, 12, 0.54),
    inset 0 -3px 0 rgba(232, 111, 91, 0.72);
}

.game-theme--one-piece.game-hub-page .game-hero {
  min-height: clamp(27rem, 44vw, 33rem);
  align-content: center;
}

.game-theme--one-piece .other-hero h1,
.other-game-calculator.game-theme--one-piece .other-calc-hero h1 {
  text-shadow: 0 4px 22px rgba(0, 6, 12, 0.68);
}

.game-theme--one-piece .other-hero h1::after,
.other-game-calculator.game-theme--one-piece .other-calc-hero h1::after {
  display: block;
  width: clamp(3.5rem, 8vw, 6rem);
  height: 4px;
  margin-top: 0.34em;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--one-piece-coral),
    var(--one-piece-gold) 55%,
    var(--one-piece-sea-glass)
  );
  box-shadow: 0 0 20px rgba(232, 111, 91, 0.24);
  content: "";
}

.game-theme--one-piece .other-fact-list li,
.other-game-calculator.game-theme--one-piece .other-calc-hero-facts > div {
  border-color: #d87968;
  border-radius: 12px 3px 12px 3px;
  background:
    linear-gradient(90deg, rgba(232, 111, 91, 0.1), transparent 68%),
    rgba(12, 31, 45, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.055);
}

.other-game-calculator.game-theme--one-piece .other-calc-hero-facts dt {
  color: var(--one-piece-sea-glass);
}

.other-game-calculator.game-theme--one-piece .other-calc-hero-facts dd {
  font-family: var(--other-display-font);
  font-size: 1.03rem;
}

.game-theme--one-piece .other-section-heading::after {
  width: min(16rem, 62%);
  height: 7px;
  margin-top: 6px;
  border-block: 1px solid rgba(142, 216, 210, 0.42);
  background: linear-gradient(
    90deg,
    var(--one-piece-coral),
    var(--one-piece-sea-glass),
    transparent
  );
  content: "";
}

.game-theme--one-piece .other-product-row {
  position: relative;
  border-left: 4px solid var(--one-piece-coral);
}

.game-theme--one-piece .other-product-row:nth-child(even) {
  border-left-color: var(--one-piece-sea-glass);
}

.game-theme--one-piece .other-method-card {
  border-top: 3px solid rgba(142, 216, 210, 0.72);
}

.game-theme--one-piece .other-method-card:nth-child(2) {
  border-top-color: rgba(232, 111, 91, 0.82);
}

.game-theme--one-piece .other-method-card:nth-child(3) {
  border-top-color: rgba(255, 212, 119, 0.78);
}

.other-game-calculator.game-theme--one-piece .other-calc-shell {
  width: min(calc(100% - 32px), 96rem);
  max-width: 96rem;
}

.other-game-calculator.game-theme--one-piece .other-calc-hero {
  display: grid;
  min-height: clamp(20rem, 30vw, 25rem);
  align-content: center;
  padding: clamp(26px, 4vw, 52px);
}

.other-game-calculator.game-theme--one-piece .other-calc-hero::before {
  mix-blend-mode: soft-light;
  opacity: 0.42;
}

.game-theme--one-piece .game-hero::after,
.other-game-calculator.game-theme--one-piece .other-calc-hero::after {
  display: none;
}

.other-game-calculator.game-theme--one-piece .other-calc-order-note {
  border-left-color: var(--one-piece-coral);
  border-radius: 3px 12px 12px 3px;
  background:
    linear-gradient(90deg, rgba(232, 111, 91, 0.12), transparent 56%),
    rgba(6, 19, 31, 0.72);
}

.other-game-calculator.game-theme--one-piece .other-calc-overview > .card,
.other-game-calculator.game-theme--one-piece .other-calc-model-evidence,
.other-game-calculator.game-theme--one-piece .other-calc-settings,
.other-game-calculator.game-theme--one-piece .other-calc-results > .card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.other-game-calculator.game-theme--one-piece
  :is(
    .other-calc-quick-summary,
    .other-calc-structure,
    .other-calc-model-evidence,
    .other-calc-settings,
    .other-calc-results > .card
  )::before {
  position: absolute;
  z-index: -1;
  inset: auto -3.25rem -3.75rem auto;
  width: 10rem;
  height: 7rem;
  border: 1px solid rgba(142, 216, 210, 0.1);
  border-radius: 50%;
  box-shadow:
    0 0 0 18px rgba(142, 216, 210, 0.045),
    0 0 0 36px rgba(142, 216, 210, 0.025);
  content: "";
  pointer-events: none;
  transform: rotate(-11deg);
}

/* Replace the shared amorphous card glow with quiet chart registration lines. */
.other-game-calculator.game-theme--one-piece
  .card:not(.other-calc-hero)::after {
  inset: 0;
  height: auto;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      transparent 0 92%,
      rgba(232, 111, 91, 0.16) 92% 92.2%,
      transparent 92.2%
    ),
    linear-gradient(
      0deg,
      transparent 0 82%,
      rgba(142, 216, 210, 0.095) 82% 82.3%,
      transparent 82.3%
    );
  opacity: 0.7;
  transform: none;
}

.other-game-calculator.game-theme--one-piece
  :is(.other-calc-quick-summary, .tev-calculator-snapshot) {
  border-top: 3px solid var(--one-piece-coral);
  background:
    linear-gradient(110deg, rgba(232, 111, 91, 0.1), transparent 32%),
    repeating-linear-gradient(
      0deg,
      transparent 0 30px,
      rgba(142, 216, 210, 0.045) 31px 32px
    ),
    #0d2634;
}

.other-game-calculator.game-theme--one-piece
  :is(.other-calc-structure, .other-calc-model-evidence) {
  border-top: 3px solid rgba(142, 216, 210, 0.78);
}

.other-game-calculator.game-theme--one-piece
  :is(.other-calc-quick-metric, .tev-calculator-snapshot__metric) {
  border-color: rgba(120, 168, 170, 0.78);
  border-radius: 10px 3px 10px 3px;
  background:
    linear-gradient(135deg, rgba(142, 216, 210, 0.06), transparent 58%), #153442;
  box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.045);
}

.other-game-calculator.game-theme--one-piece
  :is(.other-calc-quick-metric--mid, .tev-calculator-snapshot__metric--mid) {
  border-color: var(--one-piece-coral);
  background:
    linear-gradient(135deg, rgba(232, 111, 91, 0.16), transparent 62%), #19343f;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 220, 0.07),
    0 10px 26px rgba(0, 6, 12, 0.24);
}

.other-game-calculator.game-theme--one-piece
  :is(.other-calc-quick-metric--mid, .tev-calculator-snapshot__metric--mid)
  dd {
  color: var(--one-piece-gold);
}

.other-game-calculator.game-theme--one-piece
  :is(.other-calc-quick-metric, .tev-calculator-snapshot__metric)
  dt {
  color: var(--one-piece-sea-glass);
}

.other-game-calculator.game-theme--one-piece
  :is(.other-calc-quick-basis, .tev-calculator-snapshot__basis) {
  border-color: rgba(232, 111, 91, 0.68);
  border-radius: 999px;
  color: #e5ded0;
  background: rgba(6, 19, 31, 0.68);
}

.other-game-calculator.game-theme--one-piece
  .other-calc-model-evidence
  > summary,
.other-game-calculator.game-theme--one-piece .other-calc-results-heading {
  border-top-color: rgba(142, 216, 210, 0.78);
}

.other-game-calculator.game-theme--one-piece .other-calc-model-status > span {
  border-color: rgba(120, 168, 170, 0.64);
  border-radius: 10px 3px 10px 3px;
  background: rgba(6, 19, 31, 0.5);
}

.other-game-calculator.game-theme--one-piece .other-calc-model-status small {
  color: var(--one-piece-sea-glass);
}

.other-game-calculator.game-theme--one-piece .other-calc-settings > h2 {
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(142, 216, 210, 0.38);
}

.other-game-calculator.game-theme--one-piece .section {
  border-color: rgba(120, 168, 170, 0.72);
  background:
    linear-gradient(135deg, rgba(142, 216, 210, 0.055), transparent 42%),
    #102836;
}

.other-game-calculator.game-theme--one-piece .other-calc-definition-grid > div {
  border-color: rgba(120, 168, 170, 0.66);
  border-radius: 10px 3px 10px 3px;
  background: rgba(17, 44, 58, 0.86);
}

.other-game-calculator.game-theme--one-piece .other-calc-definition-grid dt {
  color: var(--one-piece-sea-glass);
}

.other-game-calculator.game-theme--one-piece #calcEV {
  color: #07141f;
  background: linear-gradient(105deg, #f0836e, #ffd477 58%, #9be5df);
  box-shadow:
    0 10px 24px rgba(232, 111, 91, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.other-game-calculator.game-theme--one-piece #calcEV:hover,
.other-game-calculator.game-theme--one-piece #calcEV:focus-visible {
  color: #07141f;
  background: linear-gradient(105deg, #ff9c82, #ffe09b 58%, #b4f0eb);
}

.other-game-calculator.game-theme--one-piece table thead {
  background: linear-gradient(90deg, #173a48, #102a38);
}

.other-game-calculator.game-theme--one-piece table tbody tr:nth-child(even) {
  background: rgba(142, 216, 210, 0.045);
}

.other-game-calculator.game-theme--one-piece .other-calc-simulation {
  background:
    repeating-radial-gradient(
      ellipse at 100% 100%,
      transparent 0 30px,
      rgba(142, 216, 210, 0.055) 31px 32px,
      transparent 33px 60px
    ),
    var(--other-panel);
}

.other-game-calculator.game-theme--one-piece .sim-chart-wrap {
  border-color: rgba(120, 168, 170, 0.78);
  background: #091823;
}

@media (max-width: 760px) {
  .game-theme--one-piece {
    --other-hero-content-width: 100%;
    --other-hero-heading-width: 100%;
    --other-hero-background:
      linear-gradient(
          90deg,
          var(--one-piece-coral),
          var(--one-piece-gold) 42%,
          var(--one-piece-sea-glass)
        )
        top / 100% 4px no-repeat,
      linear-gradient(
        90deg,
        rgba(6, 19, 31, 0.98),
        rgba(6, 19, 31, 0.93) 64%,
        rgba(6, 19, 31, 0.7)
      ),
      linear-gradient(180deg, rgba(6, 19, 31, 0.1), rgba(6, 19, 31, 0.48)),
      var(--one-piece-hero-art) 70% center / cover no-repeat;
  }

  .other-game-calculator.game-theme--one-piece .other-calc-hero {
    min-height: 0;
    padding: 24px 20px;
  }

  body.tev-priority-calculator.game-theme--one-piece .tev-intro-notes-toggle {
    min-block-size: 72px;
    block-size: auto;
    border-color: rgba(232, 111, 91, 0.82);
    border-radius: 10px 3px 10px 3px;
    background:
      linear-gradient(90deg, rgba(232, 111, 91, 0.12), transparent 58%),
      rgba(6, 19, 31, 0.94) !important;
    box-shadow: inset 3px 0 0 var(--one-piece-coral);
  }

  body.tev-priority-calculator.game-theme--one-piece
    .tev-intro-notes-toggle
    small {
    color: #b9d8d5;
  }

  body.tev-priority-calculator.game-theme--one-piece
    .tev-intro-notes-toggle
    > span:last-child {
    color: var(--one-piece-gold);
  }

  body.tev-priority-calculator.game-theme--one-piece .tev-settings-launcher {
    border-color: rgba(142, 216, 210, 0.62);
    border-radius: 12px 3px 12px 3px;
    background:
      repeating-radial-gradient(
        ellipse at 100% 120%,
        transparent 0 22px,
        rgba(142, 216, 210, 0.08) 23px 24px,
        transparent 25px 46px
      ),
      rgba(10, 30, 42, 0.96);
  }

  body.tev-priority-calculator.game-theme--one-piece .tev-settings-toggle {
    border-color: #ffab91;
    border-radius: 7px 3px 7px 3px;
    color: #07141f;
    background: linear-gradient(105deg, #f0836e, #ffd477);
  }
}

@media (max-width: 390px) {
  .game-theme--one-piece .other-hero h1,
  .other-game-calculator.game-theme--one-piece .other-calc-hero h1 {
    font-size: clamp(1.9rem, 10.5vw, 2.8rem);
  }

  .other-game-calculator.game-theme--one-piece .other-calc-hero {
    padding: 22px 16px;
  }

  .other-game-calculator.game-theme--one-piece
    :is(.other-calc-quick-summary, .tev-calculator-snapshot) {
    padding: 18px 16px;
  }

  .other-game-calculator.game-theme--one-piece
    :is(.other-calc-quick-basis, .tev-calculator-snapshot__basis) {
    border-radius: 10px 3px 10px 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-theme--one-piece *,
  .game-theme--one-piece *::before,
  .game-theme--one-piece *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}

@media (prefers-contrast: more) {
  .game-theme--one-piece {
    --other-muted: #eef0e8;
    --other-border: #9cc0c2;
    --other-control-border: #bddbd7;
  }
}

@media (forced-colors: active) {
  .game-theme--one-piece {
    --other-bg: Canvas;
    --other-panel-solid: Canvas;
    --other-surface: Canvas;
    --other-surface-strong: Canvas;
    --other-text: CanvasText;
    --other-muted: CanvasText;
    --other-accent: Highlight;
    --other-accent-strong: LinkText;
    --other-link: LinkText;
    --other-focus: Highlight;
    --other-border: CanvasText;
    --other-control-border: CanvasText;
    --other-control-background: Field;
    --other-chip-background: Canvas;
    --other-chip-foreground: CanvasText;
    --other-chip-border: CanvasText;
    --other-button-background: ButtonFace;
    --other-button-foreground: ButtonText;
    --other-button-border: ButtonText;
    --other-page-background: Canvas;
    --other-hero-background: Canvas;
    --other-directory-card-background: Canvas;
  }

  .game-theme--one-piece .other-hero,
  .other-game-calculator.game-theme--one-piece .other-calc-hero,
  .other-game-calculator.game-theme--one-piece :where(.card, .section) {
    border-color: CanvasText;
    box-shadow: none;
  }
}