/* DEEPMINE UI v4 — explore page styles (#sheet[data-mode="camp"]).
   An adventure journal: sticky glyph tabs (.seg--tabs), a strategy selector inside the depth tab,
   strata expeditions grouped by zone, keys + chests with a tactile rune lock, rarity-framed relics and medal badges.
   Markup: public/progression-panel.mjs (+ .strategy-options and the archive link from mobile.mjs). */
@layer pages {
  #sheet[data-mode="camp"] {
    --xp-bar: #0e281f;
    --xp-scrim: 6 19 14;   /* rgb of --bg-0, for scrims behind text on painted strata */
    --xp-band-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36' viewBox='0 0 120 36'%3E%3Cpath d='M0 9q15-5 30 0t30 0 30 0 30 0' fill='none' stroke='%23fff' stroke-opacity='.13' stroke-width='1.2'/%3E%3Cpath d='M0 25q20-6 40 0t40 0 40 0' fill='none' stroke='%23000' stroke-opacity='.18' stroke-width='1.8'/%3E%3Ccircle cx='18' cy='16' r='1.5' fill='%23000' fill-opacity='.2'/%3E%3Ccircle cx='74' cy='31' r='1.9' fill='%23000' fill-opacity='.16'/%3E%3Ccircle cx='101' cy='15' r='1.1' fill='%23fff' fill-opacity='.16'/%3E%3Ccircle cx='47' cy='4' r='1' fill='%23fff' fill-opacity='.14'/%3E%3C/svg%3E");
  }
  /* Strata palette: art colours, not UI tokens (canvas palettes live in public/depth-content.mjs).
     Scoped to #sheet so the archive's stratum swatches can reuse them. */
  #sheet .stratum-soil { --stratum: #5a9a3f; --stratum-2: #2b5320; --stratum-glow: #8fd36a; }
  #sheet .stratum-clay { --stratum: #b35a34; --stratum-2: #5c2414; --stratum-glow: #f08a5c; }
  #sheet .stratum-rock { --stratum: #667a85; --stratum-2: #2e3a42; --stratum-glow: #a9c0cc; }
  #sheet .stratum-crystal { --stratum: #7b58c2; --stratum-2: #37226a; --stratum-glow: #c3a2ff; }
  #sheet .stratum-relic { --stratum: #b8892f; --stratum-2: #563b0c; --stratum-glow: #ffd27a; }
  /* Glowing Geodes */
  #sheet .stratum-aquifer { --stratum: #3f7f9c; --stratum-2: #142a38; --stratum-glow: #9fe6ff; }
  #sheet .stratum-geode { --stratum: #5e8c8f; --stratum-2: #1f3236; --stratum-glow: #8ff0e6; }
  #sheet .stratum-glowmoss { --stratum: #2c7a62; --stratum-2: #0d241f; --stratum-glow: #6dffc9; }
  #sheet .stratum-abyss { --stratum: #3b4390; --stratum-2: #0d0f2c; --stratum-glow: #7fe6ff; }
  /* Magma Forge */
  #sheet .stratum-basalt { --stratum: #6a6266; --stratum-2: #1e1b1e; --stratum-glow: #ff9a5a; }
  #sheet .stratum-magma { --stratum: #a8431f; --stratum-2: #2a0c06; --stratum-glow: #ffb35c; }
  #sheet .stratum-obsidian { --stratum: #563f80; --stratum-2: #120e1c; --stratum-glow: #c7b2ff; }
  /* Starcore Depths */
  #sheet .stratum-mantle { --stratum: #9a2e44; --stratum-2: #2a0810; --stratum-glow: #ffd27a; }
  #sheet .stratum-starvein { --stratum: #34408a; --stratum-2: #0a0b1e; --stratum-glow: #e6ecff; }
  #sheet .stratum-heart { --stratum: #c99a3c; --stratum-2: #5a3c10; --stratum-glow: #fff2c0; }
  #sheet .stratum-unknown { --stratum: #56635c; --stratum-2: #1d2a24; --stratum-glow: #b9c6bb; }

  /* ───────────── Page flow ─────────────
     mobile.mjs renders the strategy row (depth tab only) before the section, and the archive link after it.
     The section and page wrappers are flattened into one column so the tab bar always comes first and the
     strategy row sits inside the depth tab, under its hero. Rows are max-content so no block (the hero clips
     its overflow) is ever squeezed by the scroller's height; margins do not collapse in grid, so spacing
     between blocks is set explicitly below. */
  #sheet[data-mode="camp"] #sheet-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; }
  #sheet[data-mode="camp"] :is(.exploration, .exploration-page) { display: contents; }
  #sheet[data-mode="camp"] .exploration-tabbar { order: -2; }
  #sheet[data-mode="camp"] .exploration-page > .exploration-intro { order: -1; }
  /* With the wrappers flattened only the strategy row and archive link would rise in on open; keep the
     panel still instead of animating two stray blocks. */
  #sheet[data-mode="camp"] #sheet-body > * { animation: none; }
  #sheet[data-mode="camp"] .exploration-page > * + * { margin-top: 12px; }
  #sheet[data-mode="camp"] .exploration-page > .exploration-section-title { margin: 20px 2px 10px; }
  #sheet[data-mode="camp"] .exploration-page > .exploration-section-title + * { margin-top: 0; }

  /* ───────────── Strategy (mobile.mjs: span(采掘策略 + small) + 3 × button[data-strategy][aria-pressed]) ───────────── */
  #sheet[data-mode="camp"] .strategy-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 12px;
    padding: 10px;
    border-radius: var(--r-lg);
    background: var(--grad-panel), var(--surface-1);
    border: 1px solid var(--line-1);
    box-shadow: var(--hl-top), var(--sh-1);
  }
  #sheet[data-mode="camp"] .strategy-options > span {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    min-width: 0;
    padding: 0 2px 2px;
    font-size: var(--fs-14);
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-1);
  }
  #sheet[data-mode="camp"] .strategy-options > span::before {
    content: '';
    grid-row: span 2;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.4' fill='none' stroke='%23f5c869' stroke-width='1.6'/%3E%3Ccircle cx='8' cy='8' r='3' fill='none' stroke='%23f5c869' stroke-width='1.4'/%3E%3Ccircle cx='8' cy='8' r='1.1' fill='%23fff0bf'/%3E%3Cpath d='M8 0v3M8 13v3M0 8h3M13 8h3' stroke='%23f5c869' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #sheet[data-mode="camp"] .strategy-options > span > small {
    grid-column: 2;
    min-width: 0;
    font-size: var(--fs-12);
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-3);
    overflow-wrap: break-word;
  }
  #sheet[data-mode="camp"] .strategy-options > button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 58px;
    padding: 7px 6px 8px;
    border-radius: 12px;
    background: var(--surface-inset);
    border: 1px solid var(--line-1);
    box-shadow: inset 0 2px 6px rgb(0 0 0 / .3);
    color: var(--text-2);
    font-size: var(--fs-14);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    transition: color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2), border-color var(--dur-2);
  }
  #sheet[data-mode="camp"] .strategy-options > button > span { max-width: 100%; overflow-wrap: break-word; }
  #sheet[data-mode="camp"] .strategy-options > button > small {
    max-width: 100%;
    font-size: var(--fs-11);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-3);
    overflow-wrap: break-word;
  }
  #sheet[data-mode="camp"] .strategy-options > button:active { background: rgb(255 255 255 / .04); }
  #sheet[data-mode="camp"] .strategy-options > button:is(.active, [aria-pressed="true"]) {
    color: var(--gold-100);
    background: var(--grad-jade-plate);
    border-color: var(--line-gold);
    box-shadow: var(--sh-plate-jade);
  }
  #sheet[data-mode="camp"] .strategy-options > button:is(.active, [aria-pressed="true"]) > small { color: var(--text-2); }
  /* Latin/Cyrillic: hyphenate where the platform can; narrow phones take the titles one size down so single words
     ("Ausgewogen", "Aprofundar") fit a third of the row instead of breaking mid-word. */
  :root:not(:lang(zh)) #sheet[data-mode="camp"] .strategy-options > button { hyphens: auto; -webkit-hyphens: auto; }
  @media (max-width: 360px) {
    :root:not(:lang(zh)) #sheet[data-mode="camp"] .strategy-options > button { font-size: var(--fs-12); }
  }

  /* ───────────── Tabs: sticky .seg.seg--tabs (glyph over label, gold underline from components) ───────────── */
  #sheet[data-mode="camp"] .exploration-tabbar {
    position: sticky;
    top: -12px;   /* = #sheet-body padding-top: sticky offsets respect the scroller padding */
    z-index: 5;
    margin: 0 calc(var(--gutter) * -1) 10px;
    padding: 8px var(--gutter);
    background: var(--noise), var(--xp-bar);
  }
  #sheet[data-mode="camp"] .exploration-tabbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
    background: linear-gradient(180deg, var(--xp-bar), rgb(14 40 31 / 0));
    pointer-events: none;
  }
  #sheet[data-mode="camp"] .exploration-tab-alert {
    position: absolute;
    top: 4px;
    left: calc(50% + 7px);
    box-shadow: 0 0 0 2px var(--xp-bar);
  }

  /* ───────────── Journal header ───────────── */
  #sheet[data-mode="camp"] .exploration-intro {
    min-height: 88px;
    padding: 14px 104px 14px 16px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' preserveAspectRatio='none'%3E%3Cpath d='M150 108C214 98 250 88 290 64S360 24 420 18' fill='none' stroke='%23f2cd80' stroke-opacity='.22' stroke-width='2' stroke-dasharray='6 7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
      radial-gradient(70% 130% at 100% 50%, rgb(245 200 105 / .17), transparent 62%),
      repeating-linear-gradient(0deg, rgb(242 205 128 / .045) 0 1px, transparent 1px 22px),
      repeating-linear-gradient(90deg, rgb(242 205 128 / .045) 0 1px, transparent 1px 22px),
      linear-gradient(160deg, #1b4231 0%, #11301f 100%);
  }
  #sheet[data-mode="camp"] .exploration-intro .panel-hero-copy { max-width: none; gap: 3px; }
  #sheet[data-mode="camp"] .exploration-intro h3 { font-size: var(--fs-hero-title); line-height: 1.25; }
  #sheet[data-mode="camp"] .exploration-intro p { color: var(--text-2); }
  #sheet[data-mode="camp"] .exploration-intro .panel-chip-row { margin-top: 3px; }
  #sheet[data-mode="camp"] .exploration-tally { font-size: var(--fs-12); }
  #sheet[data-mode="camp"] .exploration-tally b { font: 700 var(--fs-14)/1 var(--font-display); color: var(--gold-50); }
  #sheet[data-mode="camp"] .exploration-intro-seal {
    position: absolute;
    right: 14px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle at 50% 32%, #2f6a50, #143628 72%);
    border: 2px solid var(--gold-500);
    box-shadow: 0 0 0 4px rgb(245 200 105 / .1), 0 0 22px -4px rgb(245 200 105 / .45), inset 0 2px 8px rgb(0 0 0 / .45), 0 6px 14px -6px rgb(0 0 0 / .8);
  }
  #sheet[data-mode="camp"] .exploration-intro-art { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 4px 4px rgb(0 0 0 / .45)); }

  #sheet[data-mode="camp"] .exploration-section-title small { font-family: var(--font-display); font-weight: 700; color: var(--text-3); white-space: nowrap; }
  #sheet[data-mode="camp"] .exploration-list { display: grid; gap: 12px; }

  /* ───────────── Depth summary ───────────── */
  #sheet[data-mode="camp"] .exploration-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #sheet[data-mode="camp"] .exploration-stat .stat-value span { margin-left: 4px; font-family: var(--font-ui); font-size: var(--fs-12); font-weight: 600; color: var(--text-3); }
  /* One pip per layer (--pips from the markup), with a little more air where a new zone begins. */
  #sheet[data-mode="camp"] .exploration-depth-pips { display: grid; grid-template-columns: repeat(var(--pips, 5), minmax(0, 1fr)); gap: 2px; margin-top: 8px; }
  #sheet[data-mode="camp"] .exploration-depth-pips i.is-zone-start { margin-left: 3px; }
  #sheet[data-mode="camp"] .exploration-depth-pips i {
    height: 6px;
    border-radius: 3px;
    background: var(--surface-inset);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / .6);
  }
  #sheet[data-mode="camp"] .exploration-depth-pips i.is-done { background: linear-gradient(180deg, var(--stratum-glow), var(--stratum)); box-shadow: 0 0 6px color-mix(in srgb, var(--stratum-glow) 50%, transparent); }

  /* ───────────── Shared card anatomy ───────────── */
  #sheet[data-mode="camp"] .exploration-card { display: grid; gap: 10px; min-width: 0; }
  #sheet[data-mode="camp"] .exploration-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
  #sheet[data-mode="camp"] .exploration-card-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
  #sheet[data-mode="camp"] .exploration-card h4 { font-size: var(--fs-card-title); font-weight: 800; line-height: 1.3; color: var(--text-1); overflow-wrap: break-word; }
  #sheet[data-mode="camp"] .exploration-card-copy p { font-size: var(--fs-12); line-height: 1.4; color: var(--text-3); }
  #sheet[data-mode="camp"] .exploration-description { font-size: var(--fs-13); line-height: 1.55; color: var(--text-2); }
  #sheet[data-mode="camp"] .exploration-state { flex: none; max-width: 100%; }
  #sheet[data-mode="camp"] .exploration-emblem {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    background: radial-gradient(circle at 50% 30%, #2c5f49, #143528 78%);
    border: 1px solid var(--line-2);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), var(--sh-1);
  }
  #sheet[data-mode="camp"] .exploration-emblem .gi { width: 38px; height: 38px; }
  #sheet[data-mode="camp"] .exploration-painted { width: 86%; height: 86%; object-fit: contain; }
  #sheet[data-mode="camp"] .exploration-action { white-space: normal; padding-block: 8px; text-wrap: balance; }
  #sheet[data-mode="camp"] .exploration-action > span { min-width: 0; }

  /* Progress meters */
  #sheet[data-mode="camp"] .exploration-meter { display: grid; gap: 6px; min-width: 0; }
  #sheet[data-mode="camp"] .exploration-progress-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; font-size: var(--fs-12); font-weight: 700; color: var(--text-3); }
  #sheet[data-mode="camp"] .exploration-progress-copy > span { min-width: 0; }
  #sheet[data-mode="camp"] .exploration-progress-copy strong { flex: none; font-family: var(--font-display); font-size: var(--fs-13); font-weight: 700; color: var(--text-3); white-space: nowrap; }
  #sheet[data-mode="camp"] .exploration-progress-copy strong b { font-size: var(--fs-16); color: var(--text-1); }
  #sheet[data-mode="camp"] .exploration-progress-copy strong small { margin-left: 3px; font-family: var(--font-ui); font-size: var(--fs-11); font-weight: 600; }
  #sheet[data-mode="camp"] .exploration-progress { height: 10px; }
  #sheet[data-mode="camp"] .exploration-meter.is-jade .exploration-progress { height: 6px; }

  /* Goal / reward rows */
  #sheet[data-mode="camp"] .exploration-facts {
    display: grid;
    padding: 0 12px;
    border-radius: 12px;
    background: rgb(4 14 10 / .38);
    border: 1px solid var(--line-1);
  }
  #sheet[data-mode="camp"] .exploration-fact {
    display: grid;
    grid-template-columns: minmax(2.6em, auto) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 7px 0;
  }
  #sheet[data-mode="camp"] .exploration-fact + .exploration-fact { border-top: 1px dashed var(--line-1); }
  #sheet[data-mode="camp"] .exploration-fact > span:first-child { font-size: var(--fs-12); font-weight: 700; color: var(--text-3); }
  #sheet[data-mode="camp"] .exploration-fact > strong { font-size: var(--fs-13); font-weight: 600; line-height: 1.45; color: var(--text-1); overflow-wrap: break-word; }
  #sheet[data-mode="camp"] .exploration-fact-value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
  #sheet[data-mode="camp"] .exploration-fact-value > strong { font-size: var(--fs-13); font-weight: 800; color: var(--text-1); }
  #sheet[data-mode="camp"] .exploration-effects { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
  #sheet[data-mode="camp"] .exploration-effect {
    min-height: 24px;
    max-width: 100%;
    padding: 2px 9px;
    font-size: var(--fs-12);
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  #sheet[data-mode="camp"] .exploration-effect .icon { width: 12px; height: 12px; flex: none; }
  #sheet[data-mode="camp"] .exploration-effect.is-retired { font-weight: 600; }

  /* Permanent effect (opened chest, owned relic) */
  #sheet[data-mode="camp"] .exploration-passive {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--success-bg);
    border: 1px solid rgb(80 200 140 / .28);
    color: var(--jade-200);
  }
  #sheet[data-mode="camp"] .exploration-passive > .icon { width: 16px; height: 16px; color: var(--jade-300); }
  #sheet[data-mode="camp"] .exploration-passive-label { font-size: var(--fs-12); font-weight: 800; }

  #sheet[data-mode="camp"] .exploration-code-caption { font-size: var(--fs-12); line-height: 1.5; color: var(--text-3); }

  /* ───────────── Depth expeditions ───────────── */
  #sheet[data-mode="camp"] .exploration-depth-card {
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--stratum) 38%, var(--line-1));
  }
  /* The band is painted strata; a left-to-right scrim keeps the title and subtitle above 4.5:1. */
  #sheet[data-mode="camp"] .exploration-depth-band {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 10px 12px;
    overflow: hidden;
    background:
      var(--xp-band-texture) 0 0 / 120px 36px repeat,
      linear-gradient(90deg, rgb(var(--xp-scrim) / .56) 0%, rgb(var(--xp-scrim) / .48) 60%, rgb(var(--xp-scrim) / .24) 100%),
      radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--stratum-glow) 30%, transparent), transparent 55%),
      linear-gradient(180deg, var(--stratum) 0%, var(--stratum-2) 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 -2px 0 rgb(0 0 0 / .28);
  }
  #sheet[data-mode="camp"] .exploration-depth-band::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    height: 40%;
    background: linear-gradient(180deg, transparent, rgb(0 0 0 / .22));
  }
  #sheet[data-mode="camp"] .exploration-depth-band .exploration-painted {
    position: absolute;
    z-index: -1;
    right: -6px;
    top: 50%;
    width: 84px;
    height: 84px;
    transform: translateY(-50%);
    opacity: .5;
  }
  #sheet[data-mode="camp"] .exploration-layer-number {
    position: relative;
    flex: none;
    display: grid;
    place-content: center;
    justify-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--stratum) 50%, #10291f), #0a1d15 76%);
    border: 2px solid;
    border-color: var(--gold-rim) var(--gold-500) var(--gold-800);
    box-shadow: 0 0 0 3px rgb(0 0 0 / .2), 0 3px 0 rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -6px 10px rgb(0 0 0 / .35);
  }
  #sheet[data-mode="camp"] .exploration-layer-number small { font: 700 var(--fs-11)/1 var(--font-display); letter-spacing: .04em; color: var(--gold-200); }
  #sheet[data-mode="camp"] .exploration-layer-number strong { margin-top: 1px; font: 800 19px/1 var(--font-display); color: var(--gold-100); text-shadow: 0 1px 0 rgb(0 0 0 / .5); }
  #sheet[data-mode="camp"] .exploration-layer-number > .icon {
    position: absolute;
    right: -5px;
    bottom: -4px;
    width: 18px;
    height: 18px;
    padding: 3px;
    border-radius: 50%;
    background: var(--surface-inset);
    border: 1px solid var(--line-3);
    color: var(--text-2);
  }
  #sheet[data-mode="camp"] .exploration-depth-title { flex: 1; min-width: 0; display: grid; gap: 1px; }
  #sheet[data-mode="camp"] .exploration-depth-title h4 { color: var(--text-1); text-shadow: 0 1px 2px rgb(0 0 0 / .65); }
  #sheet[data-mode="camp"] .exploration-depth-title p { font-size: var(--fs-12); font-weight: 600; color: var(--text-1); text-shadow: 0 1px 2px rgb(0 0 0 / .6); overflow-wrap: break-word; }
  #sheet[data-mode="camp"] .exploration-depth-band .exploration-state {
    background: rgb(5 16 11 / .74);
    box-shadow: 0 1px 0 rgb(255 255 255 / .08), 0 2px 6px rgb(0 0 0 / .35);
  }
  #sheet[data-mode="camp"] .exploration-depth-band .chip--muted { color: var(--text-2); }
  /* Latin/Cyrillic: a long state chip ("Исследование идёт") drops under the layer title instead of squeezing the
     title to one word per line and pushing the zone list wider than the screen. */
  :root:not(:lang(zh)) #sheet[data-mode="camp"] .exploration-depth-band { flex-wrap: wrap; row-gap: 6px; }
  :root:not(:lang(zh)) #sheet[data-mode="camp"] .exploration-depth-title { flex: 1 1 9em; min-width: auto; hyphens: auto; -webkit-hyphens: auto; }
  :root:not(:lang(zh)) #sheet[data-mode="camp"] .exploration-depth-band .exploration-state { margin-inline-start: auto; }
  #sheet[data-mode="camp"] .exploration-depth-body { display: grid; gap: 10px; padding: 12px 14px 14px; }
  #sheet[data-mode="camp"] .exploration-depth-body .exploration-action { margin-top: 2px; }

  /* claimable: the one gold moment on the page */
  #sheet[data-mode="camp"] .exploration-depth-card.is-ready {
    border-color: var(--line-gold-strong);
    box-shadow: var(--glow-gold), var(--sh-2);
  }
  #sheet[data-mode="camp"] .exploration-depth-card.is-ready .exploration-layer-number { box-shadow: 0 0 0 3px rgb(255 214 120 / .25), 0 0 16px rgb(255 214 120 / .6), inset 0 1px 0 rgb(255 255 255 / .22); }
  #sheet[data-mode="camp"] .exploration-depth-card.is-ready .exploration-depth-band .exploration-state { color: var(--text-on-gold); background: var(--grad-gold); border-color: var(--gold-rim); text-shadow: 0 1px 0 rgb(255 246 215 / .6); }
  /* in progress: the current target */
  #sheet[data-mode="camp"] .exploration-depth-card.is-active { border-color: color-mix(in srgb, var(--stratum-glow) 45%, var(--line-2)); }
  /* claimed: settled, success-toned button */
  #sheet[data-mode="camp"] .exploration-depth-card.is-claimed .exploration-action:disabled {
    color: var(--jade-200);
    background: rgb(80 200 140 / .1);
    border-color: rgb(80 200 140 / .24);
  }
  /* locked: compact (band + goal/reward only), stone medallion, muted strata. Only painted art is filtered;
     text keeps explicit muted colours that stay above 4.5:1. */
  #sheet[data-mode="camp"] .exploration-depth-card.is-locked { background: var(--grad-panel), var(--bg-2); border-color: var(--line-1); box-shadow: var(--hl-top); }
  #sheet[data-mode="camp"] .exploration-depth-card.is-locked .exploration-depth-band {
    min-height: 60px;
    background:
      var(--xp-band-texture) 0 0 / 120px 36px repeat,
      linear-gradient(90deg, rgb(var(--xp-scrim) / .5) 0%, rgb(var(--xp-scrim) / .3) 70%, rgb(var(--xp-scrim) / .12) 100%),
      linear-gradient(180deg, color-mix(in srgb, var(--stratum) 30%, #34453c) 0%, color-mix(in srgb, var(--stratum-2) 30%, #17241e) 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), inset 0 -1px 0 rgb(0 0 0 / .3);
  }
  #sheet[data-mode="camp"] .exploration-depth-card.is-locked .exploration-depth-band .exploration-painted { filter: saturate(.3) brightness(.62); }
  #sheet[data-mode="camp"] .exploration-depth-card.is-locked .exploration-layer-number { border-color: #b9c3bd #8a9690 #59645e; box-shadow: 0 0 0 3px rgb(0 0 0 / .2), inset 0 -6px 10px rgb(0 0 0 / .35); }
  #sheet[data-mode="camp"] .exploration-depth-card.is-locked .exploration-layer-number :is(small, strong) { color: #dfe6e1; text-shadow: none; }
  #sheet[data-mode="camp"] .exploration-depth-card.is-locked .exploration-depth-title h4 { color: var(--text-2); text-shadow: none; }
  #sheet[data-mode="camp"] .exploration-depth-card.is-locked .exploration-depth-title p { color: var(--text-3); text-shadow: none; }
  #sheet[data-mode="camp"] .exploration-depth-card.is-locked .exploration-depth-body { padding: 10px 12px 12px; }
  #sheet[data-mode="camp"] .exploration-depth-card.is-locked .exploration-facts { background: rgb(4 14 10 / .3); }
  #sheet[data-mode="camp"] .exploration-depth-card.is-locked .exploration-fact > strong { color: var(--text-2); }

  /* ───────────── Zones (groups of expeditions) ─────────────
     details.exploration-zone > summary.exploration-zone-head + .exploration-depth-list; .exploration-zone-locked for
     the zones not reached yet (no names, colours or rewards). --zone-c is the zone accent from depth-content.mjs. */
  #sheet[data-mode="camp"] .exploration-zones { display: grid; gap: 10px; }
  /* Latin/Cyrillic zone names can be one long word ("Oberflächenschichten"): the column never grows past the sheet. */
  :root:not(:lang(zh)) #sheet[data-mode="camp"] .exploration-zones { grid-template-columns: minmax(0, 1fr); }
  :root:not(:lang(zh)) #sheet[data-mode="camp"] .exploration-zone-copy strong { hyphens: auto; -webkit-hyphens: auto; }
  #sheet[data-mode="camp"] .exploration-zone {
    border-radius: var(--r-lg);
    background: linear-gradient(90deg, color-mix(in srgb, var(--zone-c) 9%, transparent), transparent 55%), var(--grad-panel), var(--bg-2);
    border: 1px solid color-mix(in srgb, var(--zone-c) 26%, var(--line-1));
    box-shadow: var(--hl-top);
  }
  #sheet[data-mode="camp"] .exploration-zone > .exploration-zone-head {
    gap: 10px;
    min-height: 56px;
    padding: 8px 12px 8px 12px;
    border-radius: calc(var(--r-lg) - 1px);   /* not inherit: a summary inherits from the details' internal slot */
  }
  /* Painted zone banners (dark left third) behind the headers of the deeper zones. */
  #sheet[data-mode="camp"] .exploration-zone[data-zone-id="geode"] { --zone-art: url(/art/ui-v4/banners/zone-geode.webp); }
  #sheet[data-mode="camp"] .exploration-zone[data-zone-id="forge"] { --zone-art: url(/art/ui-v4/banners/zone-forge.webp); }
  #sheet[data-mode="camp"] .exploration-zone[data-zone-id="core"] { --zone-art: url(/art/ui-v4/banners/zone-core.webp); }
  #sheet[data-mode="camp"] .exploration-zone:is([data-zone-id="geode"], [data-zone-id="forge"], [data-zone-id="core"]) > .exploration-zone-head {
    background:
      linear-gradient(90deg, rgb(var(--xp-scrim) / .92) 0%, rgb(var(--xp-scrim) / .74) 45%, rgb(var(--xp-scrim) / .3) 100%),
      var(--zone-art) right 35% / auto 180% no-repeat;
  }
  /* Finished zones keep only a hint of their art. */
  #sheet[data-mode="camp"] .exploration-zone.is-past:is([data-zone-id="geode"], [data-zone-id="forge"], [data-zone-id="core"]) > .exploration-zone-head {
    background:
      linear-gradient(90deg, rgb(var(--xp-scrim) / .95) 0%, rgb(var(--xp-scrim) / .85) 50%, rgb(var(--xp-scrim) / .6) 100%),
      var(--zone-art) right 35% / auto 180% no-repeat;
  }
  #sheet[data-mode="camp"] .exploration-zone-gem {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0 4px 0 2px;
    transform: rotate(45deg);
    border-radius: 4px;
    background: linear-gradient(135deg, #fff 0%, var(--zone-c) 38%, color-mix(in srgb, var(--zone-c) 45%, #000) 100%);
    box-shadow: 0 0 0 2px rgb(0 0 0 / .35), 0 0 12px -1px color-mix(in srgb, var(--zone-c) 70%, transparent);
  }
  #sheet[data-mode="camp"] .exploration-zone-copy { flex: 1; min-width: 0; display: grid; gap: 1px; }
  #sheet[data-mode="camp"] .exploration-zone-copy strong { font-size: var(--fs-15); font-weight: 800; line-height: 1.3; color: var(--text-1); overflow-wrap: break-word; }
  #sheet[data-mode="camp"] .exploration-zone-copy small { font-size: var(--fs-12); font-weight: 600; color: var(--text-3); }
  #sheet[data-mode="camp"] .exploration-zone-tally { flex: none; font: 700 12px/1 var(--font-display); color: var(--text-3); white-space: nowrap; }
  #sheet[data-mode="camp"] .exploration-zone-tally b { font-size: var(--fs-15); color: var(--text-1); }
  #sheet[data-mode="camp"] .exploration-zone-ready { flex: none; }
  #sheet[data-mode="camp"] .exploration-zone[open] > .exploration-zone-head { border-bottom: 1px solid color-mix(in srgb, var(--zone-c) 22%, var(--line-1)); border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
  #sheet[data-mode="camp"] .exploration-zone > .exploration-depth-list { padding: 10px; }
  #sheet[data-mode="camp"] .exploration-zone.is-past:not([open]) { background: var(--grad-panel), var(--bg-2); }
  #sheet[data-mode="camp"] .exploration-zone.is-past .exploration-zone-gem { box-shadow: 0 0 0 2px rgb(0 0 0 / .35); }
  #sheet[data-mode="camp"] .exploration-zone-locked {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 12px;
    border-radius: var(--r-lg);
    background: var(--surface-inset);
    border: 1px dashed var(--line-2);
  }
  #sheet[data-mode="camp"] .exploration-zone-lock {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgb(255 255 255 / .03);
    border: 1px solid var(--line-2);
    box-shadow: inset 0 2px 6px rgb(0 0 0 / .45);
    color: var(--text-3);
  }
  #sheet[data-mode="camp"] .exploration-zone-lock .icon { width: 15px; height: 15px; }
  #sheet[data-mode="camp"] .exploration-zone-locked strong { color: var(--text-2); }
  #sheet[data-mode="camp"] .exploration-zone-hint { flex: none; font-size: var(--fs-11); font-weight: 700; color: var(--text-3); white-space: nowrap; }
  /* Latin/Cyrillic hints ("Продолжить копать глубже") wrap within half the row instead of widening it past the screen. */
  :root:not(:lang(zh)) #sheet[data-mode="camp"] .exploration-zone-hint { flex: 0 1 auto; max-width: 48%; white-space: normal; text-align: end; }

  /* ───────────── Keys ───────────── */
  #sheet[data-mode="camp"] .exploration-key-card { padding: 14px; }
  #sheet[data-mode="camp"] .exploration-key-tile { width: 56px; height: 56px; }
  #sheet[data-mode="camp"] .exploration-key-tile .gi { width: 42px; height: 42px; }
  #sheet[data-mode="camp"] .exploration-key-card.is-read .exploration-key-tile {
    border-color: var(--line-gold);
    background: radial-gradient(circle at 50% 34%, rgb(245 200 105 / .3), #173b2d 72%);
  }
  #sheet[data-mode="camp"] .exploration-key-card:is(.is-new, .is-observing) {
    border-color: var(--line-gold);
    background: radial-gradient(110% 90% at 0% 0%, rgb(245 200 105 / .1), transparent 55%), var(--grad-panel), var(--surface-2);
  }
  #sheet[data-mode="camp"] .exploration-key-card:is(.is-new, .is-observing) .exploration-key-tile {
    --gi-base: #dfe7e2;
    --gi-shade: #8d9b96;
    border-color: rgb(206 228 196 / .3);
  }
  #sheet[data-mode="camp"] .exploration-key-card.is-unfound {
    padding: 10px 14px;
    background: var(--surface-inset);
    border-style: dashed;
    border-color: var(--line-2);
    box-shadow: none;
  }
  #sheet[data-mode="camp"] .exploration-key-card.is-unfound .exploration-key-tile { width: 44px; height: 44px; background: rgb(255 255 255 / .03); box-shadow: inset 0 2px 6px rgb(0 0 0 / .45); border-color: var(--line-1); }
  #sheet[data-mode="camp"] .exploration-key-card.is-unfound .exploration-key-tile .gi { width: 32px; height: 32px; filter: brightness(0) invert(.35); opacity: .55; }
  #sheet[data-mode="camp"] .exploration-key-card.is-unfound h4 { color: var(--text-2); }
  #sheet[data-mode="camp"] .exploration-key-code { display: grid; gap: 8px; padding: 10px 10px 8px; border-radius: var(--r-md); background: rgb(4 14 10 / .4); border: 1px solid var(--line-1); }
  #sheet[data-mode="camp"] .exploration-key-code .exploration-code-caption { text-align: center; }
  #sheet[data-mode="camp"] .exploration-observe { display: grid; gap: 8px; }
  #sheet[data-mode="camp"] .exploration-observe-meter { height: 6px; }
  #sheet[data-mode="camp"] .exploration-observe-meter > span { transition: width 250ms linear; }

  /* ───────────── Runes ───────────── */
  #sheet[data-mode="camp"] .exploration-sequence { display: flex; align-items: flex-start; justify-content: center; gap: 6px; min-width: 0; }
  #sheet[data-mode="camp"] .exploration-sequence-arrow { flex: none; align-self: flex-start; margin-top: 9px; font: 800 20px/1 var(--font-display); color: var(--gold-400); }
  #sheet[data-mode="camp"] .exploration-rune { flex: 0 1 64px; display: grid; justify-items: center; gap: 4px; min-width: 0; }
  #sheet[data-mode="camp"] .exploration-rune > span:first-child {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--rune-color, var(--text-2));
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rune-color, var(--text-3)) 30%, #10291f), #0a1d15 80%);
    border: 1.5px solid color-mix(in srgb, var(--rune-color, var(--text-3)) 70%, transparent);
    box-shadow: 0 0 12px -3px var(--rune-color, transparent), inset 0 1px 0 rgb(255 255 255 / .14);
  }
  #sheet[data-mode="camp"] .exploration-rune > span:first-child .icon { width: 22px; height: 22px; stroke-width: 2.3; }
  #sheet[data-mode="camp"] .exploration-rune > span:last-child { max-width: 100%; font-size: var(--fs-11); font-weight: 700; line-height: 1.25; text-align: center; color: var(--text-2); overflow-wrap: break-word; }
  #sheet[data-mode="camp"] .exploration-rune.is-empty > span:first-child {
    color: var(--text-4);
    font: 800 18px/1 var(--font-display);
    background: rgb(255 255 255 / .02);
    border: 1.5px dashed var(--line-3);
    box-shadow: inset 0 2px 6px rgb(0 0 0 / .45);
  }
  #sheet[data-mode="camp"] .exploration-rune.is-empty > span:last-child { color: var(--text-3); font-weight: 600; }

  /* ───────────── Chests + rune lock ───────────── */
  #sheet[data-mode="camp"] .exploration-chest-card { gap: 0; padding: 0; overflow: hidden; }
  #sheet[data-mode="camp"] .exploration-chest-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 76px;
    padding: 12px 14px;
    text-align: left;
    color: var(--text-1);
  }
  #sheet[data-mode="camp"] .exploration-chest-choice:active { background: rgb(255 255 255 / .03); }
  #sheet[data-mode="camp"] .exploration-chest-choice:focus-visible { outline-offset: -3px; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  #sheet[data-mode="camp"] .exploration-chest-choice[aria-expanded="false"]:focus-visible { border-radius: var(--r-lg); }
  #sheet[data-mode="camp"] .exploration-chest-tile { width: 56px; height: 56px; }
  #sheet[data-mode="camp"] .exploration-chest-tile .gi { width: 44px; height: 44px; }
  #sheet[data-mode="camp"] .exploration-chest-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
  #sheet[data-mode="camp"] .exploration-chest-copy strong { font-size: var(--fs-card-title); font-weight: 800; line-height: 1.3; overflow-wrap: break-word; }
  #sheet[data-mode="camp"] .exploration-chest-copy small { font-size: var(--fs-12); line-height: 1.4; color: var(--text-3); }
  #sheet[data-mode="camp"] .exploration-caret {
    flex: none;
    width: 9px;
    height: 9px;
    margin: 0 2px 4px 2px;
    border-right: 2px solid var(--gold-300);
    border-bottom: 2px solid var(--gold-300);
    transform: rotate(45deg);
    transition: transform var(--dur-2) var(--ease-out);
  }
  #sheet[data-mode="camp"] .exploration-chest-choice[aria-expanded="true"] .exploration-caret { margin: 4px 2px 0; transform: rotate(-135deg); }
  #sheet[data-mode="camp"] .exploration-chest-card.is-ready {
    border-color: var(--line-gold-strong);
    background: radial-gradient(120% 80% at 0% 0%, rgb(245 200 105 / .14), transparent 55%), var(--grad-panel), var(--surface-2);
    box-shadow: var(--glow-gold), var(--sh-2);
  }
  #sheet[data-mode="camp"] .exploration-chest-card.is-ready .exploration-chest-copy small { color: var(--text-2); }
  #sheet[data-mode="camp"] .exploration-chest-card.is-ready .exploration-chest-tile { border-color: var(--line-gold-strong); background: radial-gradient(circle at 50% 38%, rgb(255 214 120 / .42), #1d4636 72%); }
  #sheet[data-mode="camp"] .exploration-chest-card.is-locked .exploration-chest-tile .gi { filter: saturate(.35) brightness(.78); }
  #sheet[data-mode="camp"] .exploration-chest-card.is-opened .exploration-chest-tile { border-color: rgb(80 200 140 / .4); background: radial-gradient(circle at 50% 38%, rgb(255 230 160 / .28), var(--surface-2) 72%); }
  #sheet[data-mode="camp"] .exploration-lock-panel {
    display: grid;
    gap: 12px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--line-1);
    background: rgb(0 0 0 / .14);
  }
  #sheet[data-mode="camp"] .exploration-rune-pad {
    display: grid;
    gap: 12px;
    padding: 12px 10px;
    border-radius: var(--r-md);
    background: radial-gradient(90% 70% at 50% 0%, rgb(245 200 105 / .07), transparent 70%), var(--surface-inset);
    border: 1px solid var(--line-1);
    box-shadow: inset 0 2px 8px rgb(0 0 0 / .45);
  }
  #sheet[data-mode="camp"] .exploration-rune-pad > .exploration-code-caption {
    text-align: center;
    font: 700 var(--fs-11)/1.2 var(--font-display);
    letter-spacing: .12em;
    color: var(--text-3);
  }
  #sheet[data-mode="camp"] .exploration-rune-pad > .exploration-code-caption b { font-size: var(--fs-13); color: var(--gold-200); }
  #sheet[data-mode="camp"] .exploration-rune-pad .exploration-rune { flex-basis: 70px; }
  #sheet[data-mode="camp"] .exploration-rune-pad .exploration-rune > span:first-child { width: 52px; height: 52px; border-radius: var(--r-md); }
  #sheet[data-mode="camp"] .exploration-rune-pad .exploration-rune > span:first-child .icon { width: 28px; height: 28px; }
  #sheet[data-mode="camp"] .exploration-rune-pad .exploration-sequence-arrow { margin-top: 15px; }
  #sheet[data-mode="camp"] .exploration-rune-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  #sheet[data-mode="camp"] .exploration-rune-buttons > button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 82px;
    padding: 8px 4px 9px;
    border-radius: var(--r-md);
    color: var(--text-1);
    background:
      radial-gradient(90% 70% at 50% 18%, color-mix(in srgb, var(--rune-color) 34%, transparent), transparent 70%),
      var(--grad-jade-plate);
    border: 1px solid color-mix(in srgb, var(--rune-color) 55%, transparent);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .16),
      inset 0 -3px 0 rgb(0 0 0 / .22),
      0 4px 0 color-mix(in srgb, var(--rune-color) 30%, #04100b),
      0 9px 14px -8px rgb(0 0 0 / .85);
    transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), filter var(--dur-2);
  }
  #sheet[data-mode="camp"] .exploration-rune-buttons > button > span:first-child {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--rune-color);
    background: radial-gradient(circle at 50% 40%, rgb(4 14 10 / .35), rgb(4 14 10 / .7));
    box-shadow: inset 0 2px 5px rgb(0 0 0 / .55), 0 0 0 1px color-mix(in srgb, var(--rune-color) 50%, transparent), 0 0 12px -3px var(--rune-color), 0 1px 0 rgb(255 255 255 / .1);
  }
  #sheet[data-mode="camp"] .exploration-rune-buttons > button .icon { width: 26px; height: 26px; stroke-width: 2.4; }
  #sheet[data-mode="camp"] .exploration-rune-buttons > button > span:last-child { max-width: 100%; font-size: var(--fs-11); font-weight: 700; line-height: 1.25; color: var(--text-2); overflow-wrap: break-word; }
  #sheet[data-mode="camp"] .exploration-rune-buttons > button:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 -1px 0 rgb(0 0 0 / .2), 0 1px 0 color-mix(in srgb, var(--rune-color) 30%, #04100b), 0 0 18px -4px var(--rune-color);
  }
  #sheet[data-mode="camp"] .exploration-rune-buttons > button:disabled {
    cursor: not-allowed;
    filter: saturate(.25) brightness(.72);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 2px 0 rgb(3 12 8 / .6);
  }
  #sheet[data-mode="camp"] .exploration-lock-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; }

  /* ───────────── Relics ───────────── */
  #sheet[data-mode="camp"] .exploration-relic-card {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 12px;
    border-color: color-mix(in srgb, var(--rarity) 45%, var(--line-1));
    background: radial-gradient(90% 100% at 0% 0%, color-mix(in srgb, var(--rarity) 15%, transparent), transparent 60%), var(--grad-panel), var(--surface-1);
  }
  #sheet[data-mode="camp"] .exploration-relic-art { grid-row: 1 / span 2; width: 88px; border-radius: var(--r-md); }
  #sheet[data-mode="camp"] .exploration-relic-art img { width: 78%; height: 78%; }
  /* The copy wrapper dissolves into the card grid: title + description sit beside the art,
     the effect row and the action span the full width underneath. */
  #sheet[data-mode="camp"] .exploration-relic-copy { display: contents; }
  #sheet[data-mode="camp"] .exploration-relic-copy > .exploration-card-head { grid-column: 2; align-self: end; align-items: flex-start; gap: 8px; }
  /* Latin/Cyrillic relic names ("Wurzeladerkompass", "Boussole des racines") need the whole column: the state chip
     drops under the name when both do not fit, instead of the name running under the chip. */
  :root:not(:lang(zh)) #sheet[data-mode="camp"] .exploration-relic-copy > .exploration-card-head { flex-wrap: wrap; row-gap: 4px; }
  :root:not(:lang(zh)) #sheet[data-mode="camp"] .exploration-relic-copy .exploration-card-copy { flex: 1 1 auto; }
  :root:not(:lang(zh)) #sheet[data-mode="camp"] .exploration-card-copy h4 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  #sheet[data-mode="camp"] .exploration-relic-copy > .exploration-description { grid-column: 2; align-self: start; }
  #sheet[data-mode="camp"] .exploration-relic-copy > :is(.exploration-facts, .exploration-passive, .exploration-action) { grid-column: 1 / -1; }
  #sheet[data-mode="camp"] .exploration-relic-copy > .exploration-description { font-size: var(--fs-12); line-height: 1.5; }
  #sheet[data-mode="camp"] .exploration-relic-copy .exploration-card-copy p { color: color-mix(in srgb, var(--rarity) 80%, white); font-weight: 700; font-size: var(--fs-11); letter-spacing: .04em; }
  #sheet[data-mode="camp"] .exploration-relic-card.is-locked { background: var(--grad-panel), var(--bg-2); border-color: color-mix(in srgb, var(--rarity) 22%, var(--line-1)); }
  #sheet[data-mode="camp"] .exploration-relic-card.is-locked .exploration-relic-art { filter: saturate(.5); }
  #sheet[data-mode="camp"] .exploration-relic-card.is-locked .exploration-relic-art img { filter: brightness(0); opacity: .5; }
  #sheet[data-mode="camp"] .exploration-unknown {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 800 28px/1 var(--font-display);
    color: color-mix(in srgb, var(--rarity) 55%, var(--text-1));
    text-shadow: 0 0 10px color-mix(in srgb, var(--rarity) 60%, transparent), 0 2px 4px rgb(0 0 0 / .8);
  }
  #sheet[data-mode="camp"] .exploration-relic-card.is-locked .exploration-description { color: var(--text-3); }

  /* ───────────── Badges: medal grid ───────────── */
  #sheet[data-mode="camp"] .exploration-badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #sheet[data-mode="camp"] .exploration-badge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px 12px;
    text-align: center;
  }
  #sheet[data-mode="camp"] .exploration-medal {
    --p: 0;
    position: relative;
    flex: none;
    display: grid;
    width: 80px;
    height: 80px;
    margin-bottom: 2px;
    padding: 5px;
    border-radius: 50%;
    background: conic-gradient(var(--gold-300) calc(var(--p) * 1%), rgb(206 228 196 / .1) 0);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .3);
  }
  #sheet[data-mode="camp"] .exploration-medal-face {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #2a5a46, #0d241a 78%);
    box-shadow: 0 0 0 2px #0b2018, inset 0 3px 8px rgb(0 0 0 / .5);
  }
  #sheet[data-mode="camp"] .exploration-medal-face img { width: 72%; height: 72%; object-fit: contain; filter: grayscale(.75) brightness(.72); opacity: .85; }
  #sheet[data-mode="camp"] .exploration-badge-card.is-complete {
    border-color: var(--line-gold);
    background: radial-gradient(100% 70% at 50% 0%, rgb(245 200 105 / .13), transparent 65%), var(--grad-panel), var(--surface-2);
  }
  #sheet[data-mode="camp"] .exploration-badge-card.is-complete .exploration-medal {
    background: conic-gradient(from 200deg, var(--gold-100), var(--gold-400), var(--gold-700), var(--gold-300), var(--gold-100));
    box-shadow: 0 0 18px -4px rgb(245 190 80 / .65), 0 3px 0 var(--gold-edge);
  }
  #sheet[data-mode="camp"] .exploration-badge-card.is-complete .exploration-medal-face { background: radial-gradient(circle at 50% 32%, #3a7a5c, #143628 78%); }
  #sheet[data-mode="camp"] .exploration-badge-card.is-complete .exploration-medal-face img { filter: none; opacity: 1; }
  #sheet[data-mode="camp"] .exploration-medal-check {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--jade-300), var(--jade-500));
    border: 2px solid var(--surface-2);
    color: var(--bg-0);
  }
  #sheet[data-mode="camp"] .exploration-medal-check .icon { width: 14px; height: 14px; stroke-width: 3; }
  #sheet[data-mode="camp"] .exploration-badge-condition { font-size: var(--fs-12); line-height: 1.4; color: var(--text-3); overflow-wrap: break-word; }
  /* A single long Latin/Cyrillic name ("Tiefengesteinspfadfinder") stays inside its half-width card. */
  :root:not(:lang(zh)) #sheet[data-mode="camp"] .exploration-badge-card > h4 { max-width: 100%; hyphens: auto; -webkit-hyphens: auto; }
  #sheet[data-mode="camp"] .exploration-badge-count { font: 700 var(--fs-12)/1.2 var(--font-display); color: var(--text-3); white-space: nowrap; }
  #sheet[data-mode="camp"] .exploration-badge-count b { font-size: var(--fs-16); color: var(--text-1); }
  #sheet[data-mode="camp"] .exploration-badge-reward {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 6px;
    margin-top: auto;
    padding-top: 4px;
  }
  #sheet[data-mode="camp"] .exploration-badge-reward > span:first-child { font-size: var(--fs-11); font-weight: 700; color: var(--text-3); }
  #sheet[data-mode="camp"] .exploration-badge-reward .exploration-effects { justify-content: center; }

  /* ───────────── Notes, empty, archive link ───────────── */
  #sheet[data-mode="camp"] .exploration-note > span { min-width: 0; }
  /* Empty states use the .empty-state component as is (title size included); only painted art is sized here. */
  #sheet[data-mode="camp"] .exploration-empty p { text-wrap: balance; }
  #sheet[data-mode="camp"] .exploration-empty .empty-icon .exploration-painted { width: 112%; height: 112%; }
  #sheet[data-mode="camp"] .exploration-empty .exploration-action { min-width: 9em; }
  #sheet[data-mode="camp"] #sheet-body > [data-open="archive"] { margin-top: 14px; gap: 8px; }
  #sheet[data-mode="camp"] #sheet-body > [data-open="archive"]::before {
    content: '';
    flex: none;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M2.8 8.8v18.8c5.2-1.2 10-.7 13.2 1.1 3.2-1.8 8-2.3 13.2-1.1V8.8z' fill='%238b3f2b' stroke='%231a1206' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M16 8.8C13 6.8 8.6 6.3 4.6 7.3V25c4-1 8.4-.5 11.4 1.5zM16 8.8c3-2 7.4-2.5 11.4-1.5V25c-4-1-8.4-.5-11.4 1.5z' fill='%23efd9a6' stroke='%231a1206' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* ───────────── Narrow phones ───────────── */
  @media (max-width: 360px) {
    #sheet[data-mode="camp"] .strategy-options { gap: 5px; padding: 8px; }
    #sheet[data-mode="camp"] .strategy-options > button { padding-inline: 4px; }
    #sheet[data-mode="camp"] .exploration-intro { min-height: 80px; padding: 12px 84px 12px 14px; }
    #sheet[data-mode="camp"] .exploration-intro-seal { right: 10px; width: 64px; height: 64px; }
    #sheet[data-mode="camp"] .exploration-intro-art { width: 50px; height: 50px; }
    #sheet[data-mode="camp"] .exploration-depth-band { gap: 8px; padding-inline: 10px; }
    #sheet[data-mode="camp"] .exploration-layer-number { width: 46px; height: 46px; }
    #sheet[data-mode="camp"] .exploration-layer-number small { letter-spacing: 0; }
    #sheet[data-mode="camp"] .exploration-layer-number strong { font-size: 17px; }
    #sheet[data-mode="camp"] .exploration-rune-buttons { gap: 6px; }
    #sheet[data-mode="camp"] .exploration-rune-buttons > button { min-height: 76px; }
    #sheet[data-mode="camp"] .exploration-rune-buttons > button > span:first-child { width: 38px; height: 38px; }
    #sheet[data-mode="camp"] .exploration-relic-card { grid-template-columns: 72px minmax(0, 1fr); }
    #sheet[data-mode="camp"] .exploration-relic-art { width: 72px; }
    #sheet[data-mode="camp"] .exploration-medal { width: 70px; height: 70px; }
  }
  /* Short screens: keep the first expedition card within reach. */
  @media (max-height: 640px) {
    #sheet[data-mode="camp"] .exploration-tabbar { padding-block: 6px; }
    #sheet[data-mode="camp"] .exploration-tabs > button { min-height: 50px; padding-block: 4px 6px; }
    #sheet[data-mode="camp"] .exploration-tabs > button .gi { width: 22px; height: 22px; }
    #sheet[data-mode="camp"] .strategy-options { padding-block: 8px; }
    #sheet[data-mode="camp"] .strategy-options > span > small { display: none; }
    #sheet[data-mode="camp"] .strategy-options > span::before { grid-row: auto; }
    #sheet[data-mode="camp"] .strategy-options > button { min-height: 50px; padding-block: 5px 6px; }
    #sheet[data-mode="camp"] .exploration-intro { min-height: 64px; padding-block: 10px; padding-right: 76px; }
    #sheet[data-mode="camp"] .exploration-intro-seal { right: 10px; width: 54px; height: 54px; }
    #sheet[data-mode="camp"] .exploration-intro-art { width: 42px; height: 42px; }
    #sheet[data-mode="camp"] .exploration-intro p, #sheet[data-mode="camp"] .exploration-summary .stat-sub { display: none; }
    #sheet[data-mode="camp"] .exploration-summary .stat { padding-block: 9px 10px; }
  }
}