.dive-air { display: grid; gap: .35rem; padding: .55rem .7rem; border-radius: .55rem; background: rgba(61, 127, 230, .08); border: 1px solid rgba(61, 127, 230, .24); font-size: .8rem; color: var(--text-2); }
.dive-air .t-caps { display: flex; align-items: center; gap: .35rem; font-size: .66rem; letter-spacing: .1em; color: var(--text-3); }
.dive-air .t-caps .ia-emblem { width: 1rem; height: 1rem; }
.dive-pips { display: flex; flex-wrap: wrap; gap: .28rem; }
.dive-pips i { width: .85rem; height: .85rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .3); }
.dive-pips i.is-safe { background: radial-gradient(circle at 35% 30%, #e4fdff, #5fd6e4 45%, #1d5f86); border-color: rgba(159, 233, 255, .55); }
.dive-pips i.is-last { border-style: dashed; border-color: rgba(242, 198, 106, .45); }
.dive-pips i.is-last.is-on { border-style: solid; background: radial-gradient(circle at 35% 30%, #fff4bd, #f5c552 50%, #b0761b); border-color: rgba(255, 226, 138, .7); }

.dive-breath { align-items: center; }
.dive-breath > .ia-emblem, .dive-breath > .ia-glyph { flex: none; width: 1.6rem; height: 1.6rem; }
.dive-breath.is-on { border-color: rgba(242, 198, 106, .3); background: rgba(242, 198, 106, .07); }

.dive-finds { display: grid; gap: .4rem; }
.dive-finds .t-caps { font-size: .66rem; letter-spacing: .1em; color: var(--text-3); }
.dive-find-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.dive-find { display: grid; justify-items: center; gap: .25rem; padding: .45rem .3rem; border-radius: .5rem; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .07); text-align: center; }
.dive-find .item-img { width: 2.4rem; height: 2.4rem; }
.dive-find .drop-unknown { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
.dive-find small { font-size: .68rem; line-height: 1.2; color: var(--text-2); }
.dive-find.is-unknown small { color: var(--text-3); }
.dive-find.is-legend { border-color: rgba(176, 108, 255, .4); background: rgba(176, 108, 255, .08); }
.dive-finds .hud-note { display: flex; gap: .4rem; margin: 0; font-size: .74rem; color: var(--text-3); }
.dive-finds .hud-note .ia-glyph { flex: none; }

.dive-soon-list { display: grid; gap: .5rem; }
.dive-soon { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: start; gap: .6rem; padding: .55rem .7rem; border-radius: .55rem; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .06); }
.dive-soon > b { font: 400 1.2rem/1.4 var(--font-display); color: var(--gold-1); text-align: center; }
.dive-soon strong { display: block; font: 400 1rem/1.3 var(--font-display); color: var(--gold-0); }
.dive-soon small { font-size: .78rem; line-height: 1.4; color: var(--text-2); }

.ab-slot.is-breath .ab-art .ia-emblem { width: 70%; height: 70%; }

.dive-chart { display: grid; gap: .4rem; }
.dc-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; font-size: .76rem; color: var(--text-2); }
.dc-head .t-caps { font-size: .66rem; letter-spacing: .1em; color: var(--text-3); }
.dive-chart-svg { display: block; width: 100%; height: auto; border-radius: .55rem; border: 1px solid rgba(61, 127, 230, .28); background: #05080c; box-shadow: inset 0 0 1.2rem rgba(0, 0, 0, .5); }
.dc-coast { fill: none; stroke: rgba(255, 246, 214, .55); stroke-width: 1.2; stroke-linecap: square; }
.dc-mark { color: #fff8e2; cursor: pointer; }
.dc-mark-bg { fill: rgba(6, 10, 18, .72); stroke: rgba(255, 246, 214, .7); stroke-width: 1; }
.dc-mark.is-legend { color: #ffd27a; }
.dc-mark.is-legend .dc-mark-bg { stroke: #ffb347; fill: rgba(60, 30, 4, .8); }
.dc-mark.is-cave, .dc-mark.is-cache { color: #d9c7ff; }
.dc-mark.is-reef { color: #ffb8c8; }
.dc-mark:hover .dc-mark-bg { stroke: #fff; stroke-width: 1.6; }
.dc-ring { fill: none; stroke: var(--gold-1); stroke-width: 2; }
.dive-chart .hud-note { display: flex; gap: .4rem; margin: 0; font-size: .74rem; color: var(--text-3); }
.dive-chart .hud-note .ia-glyph { flex: none; }
.dive-card.is-feature .card-copy small { color: #cfe0ff; }
.dive-card.is-legend { border-color: rgba(255, 179, 71, .45); }
.dive-card.is-fog { opacity: .8; border-style: dashed; cursor: default; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 6px, transparent 6px 12px); }
.dive-card.is-fog .card-copy small { color: var(--text-3); }
.dive-party { align-items: center; border-color: rgba(196, 168, 255, .3); background: rgba(196, 168, 255, .06); }
.dive-party.is-here { border-color: rgba(196, 168, 255, .5); background: rgba(196, 168, 255, .1); }
.dive-party > .ia-glyph { flex: none; width: 1.3rem; height: 1.3rem; color: #c4a8ff; }
.dive-salvage { align-items: center; }
.dive-salvage > .ia-emblem { flex: none; width: 1.6rem; height: 1.6rem; }

.salvage-panel { width: min(46rem, calc(100vw - 2rem)); max-height: min(44rem, calc(100vh - 3rem)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 0; overflow: hidden; }
.sv-head { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem .7rem; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.sv-head > .ia-emblem { width: 2.4rem; height: 2.4rem; }
.sv-head h2 { margin: 0; font-size: 1.35rem; }
.sv-head small { color: var(--text-3); }
.sv-head .btn-icon { margin-left: auto; }
.salvage-panel.modal .sv-body { overflow: auto; display: grid; gap: .9rem; padding: .9rem 1rem 1rem; align-content: start; }
.sv-list { display: grid; gap: .4rem; }
.sv-row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; padding: .45rem .6rem; border-radius: .6rem; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .07); }
.sv-row .item-img { width: 2.6rem; height: 2.6rem; }
.sv-name { display: grid; gap: .1rem; min-width: 0; }
.sv-name small { color: var(--text-3); font-size: .74rem; }
.sv-name .sv-party { display: flex; align-items: center; gap: .3rem; color: #c4a8ff; }
.sv-name .sv-party .ia-glyph { width: .8rem; height: .8rem; }
.sv-n { font-size: 1.05rem; color: #fff; }
.sv-acts { display: inline-flex; gap: .35rem; }
.sv-empty { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--text-3); }
.sv-empty .ia-emblem { width: 2rem; height: 2rem; flex: none; }
.sv-foot { display: flex; justify-content: flex-end; padding: .7rem 1rem; border-top: 1px solid rgba(255, 255, 255, .07); }
.sv-reveal { display: grid; gap: .6rem; }
.sv-cards { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); gap: .5rem; }
.sv-card { position: relative; display: grid; justify-items: center; gap: .3rem; padding: .7rem .45rem .55rem; border-radius: .7rem; text-align: center; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--grade) 55%, transparent); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--grade) 20%, transparent), rgba(6, 9, 14, .9) 72%); }
.sv-card .sv-crust, .sv-card .sv-out { grid-area: 1 / 1; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; }
.sv-card .item-img, .sv-card .ia-emblem { width: 3.2rem; height: 3.2rem; }
.sv-card .sv-crust { animation: sv-crack .55s ease-in calc(var(--i) * .16s) both; }
.sv-card .sv-out { animation: sv-show .45s ease-out calc(var(--i) * .16s + .45s) both; }
.sv-card .sv-words { animation: sv-show .3s ease-out calc(var(--i) * .16s + .55s) both; display: grid; gap: .1rem; }
.sv-card small { font-size: .62rem; letter-spacing: .1em; color: color-mix(in srgb, var(--grade) 70%, #fff); }
.sv-card b { font: 700 .8rem/1.25 var(--font-ui); color: #fff; }
.sv-card.is-scrap { --grade: #8c8a84 !important; opacity: .85; }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .salvage-panel .btn { min-height: 44px; font-size: .9rem; }
  .salvage-panel .sv-head .btn-icon { width: 44px; }
  .salvage-panel :is(.sv-head small, .sv-name small, .sv-name b, .sv-card small, .sv-summary .t-caps, .sv-sum, .hud-note) { font-size: .9rem; }
  .salvage-panel .sv-row { grid-template-columns: 2.6rem minmax(0, 1fr) auto; row-gap: .45rem; }
  .salvage-panel .sv-acts { grid-column: 2 / -1; justify-content: flex-end; }
  .salvage-panel .sv-acts .btn { flex: 1 1 0; max-width: 9rem; }
}
@media (max-height: 500px) and (pointer: coarse) {
  .salvage-panel .sv-row { grid-template-columns: 2.6rem minmax(0, 1fr) auto auto; }
  .salvage-panel .sv-acts { grid-column: auto; }
  .salvage-panel .sv-acts .btn { flex: none; }
}
.sv-card.is-gem::before, .sv-card.is-curio::before, .sv-card.is-legendary::before { content: ""; position: absolute; z-index: -1; inset: 8% 18% 38%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--grade) 70%, transparent), transparent 70%); filter: blur(.4rem); animation: sv-show .6s ease-out calc(var(--i) * .16s + .45s) both; }
.sv-card.is-legendary { box-shadow: 0 0 1.4rem color-mix(in srgb, var(--grade) 60%, transparent); }
@keyframes sv-crack { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.08) rotate(-5deg); } 70% { transform: scale(1.12) rotate(4deg); opacity: 1; } 100% { transform: scale(.6); opacity: 0; } }
@keyframes sv-show { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.reduce-motion .sv-card *, .reduce-motion .sv-card::before { animation: none !important; }
.reduce-motion .sv-card .sv-crust { display: none; }
@media (prefers-reduced-motion: reduce) { .sv-card *, .sv-card::before { animation: none !important; } .sv-card .sv-crust { display: none; } }
.sv-summary { display: grid; gap: .35rem; padding: .6rem .7rem; border-radius: .6rem; background: rgba(0, 0, 0, .25); }
.sv-summary .t-caps { font-size: .66rem; letter-spacing: .1em; color: var(--text-3); }
.sv-sum-rows { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.sv-sum { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--text-2); }
.sv-sum .item-img, .sv-sum .ia-emblem { width: 1.4rem; height: 1.4rem; }
.sv-sum b { color: #fff; }

.dc-hit { fill: none; pointer-events: none; }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .dc-hit { pointer-events: all; }
  .diving-page :is(.btn, .btn-sm, .segmented button) { min-height: 3.3rem; font-size: .95rem; }
  .diving-page .auto-toggle { min-height: 3.3rem; min-width: 3.3rem; font-size: .95rem; }
  .diving-page :is(.card-copy small, .card-level small, .card-people, .chip, .area-head small, .fact small, .t-caps, .bar-label, .hero-level small, .hero-bar small, .drops .t-caps, .dive-find small,
    .dive-finds .hud-note, .dive-chart .hud-note, .dc-head .t-caps, .dive-air .t-caps, .dive-finds .t-caps, .dive-soon small) { font-size: .9rem; }
  .diving-page :is(.fact > div, .callout, .drop-row, .detail-summary, .craft-product p, .catch-record, .dive-air, .dc-head) { font-size: .95rem; }
  .diving-page :is(.card-level small, .hero-level small, .fact small) { letter-spacing: .06em; }
}