/* views.css -- module H: Stickerdex, Karte, Spot, Fund, Profil, Feed
 * plus the marker/control layer of frontend/js/map/tilemap.js.
 *
 * Built ON TOP of css/base.css: .btn, .chip, .card, .input, .muted, .empty,
 * .sheet, .skeleton, .progress and the rarity colours belong to the design
 * system and are NOT redefined here. Everything below is view-specific.
 *
 * Colours go through the shell's tokens with a literal fallback, so the views
 * inherit the design system when base.css is present and still look finished
 * on their own. No @import, no webfont, no CDN.
 */

:root {
  --sg-fg: var(--ink, #f5f2ea);
  --sg-dim: var(--ink-dim, #b3aea4);
  --sg-faint: var(--ink-faint, #7d786f);
  --sg-line: var(--line, #32323e);
  --sg-line-soft: var(--line-soft, #23232c);
  --sg-surface: var(--bg-2, #131318);
  --sg-surface-2: var(--bg-3, #1c1c24);
  --sg-surface-3: var(--bg-4, #262630);
  --sg-accent: var(--acid, #d6ff2b);
  --sg-accent-ink: var(--paper-ink, #16141a);
  --sg-hot: var(--hot, #ff2e63);
  --sg-ok: var(--ok, #4fd48a);
  --sg-warn: var(--warn, #ffb02e);
  --sg-danger: var(--danger, #ff5540);
  --sg-rad: var(--radius-lg, 10px);
  --sg-rad-sm: var(--radius, 4px);
  --sg-gap: var(--sp-3, 12px);

  --sg-r1: var(--r1, #b6b1a6);
  --sg-r2: var(--r2, #59d7a0);
  --sg-r3: var(--r3, #56aaff);
  --sg-r4: var(--r4, #c479ff);
  --sg-r5: var(--r5, #ffd23a);
}

/* ------------------------------------------------------ shared additions --- */

.view {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4, 16px);
  color: var(--sg-fg);
}

.view-head h2 { font-size: var(--fs-xl, 1.5rem); margin: 0; }

/* base.css stretches .btn inside a flex column -- the back link stays compact */
.btn-back {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 var(--sp-3, 12px);
  border-width: 0;
  background: transparent;
  color: var(--sg-dim);
}
.view-sub { color: var(--sg-dim); margin: 4px 0 0; font-size: var(--fs-sm, 0.875rem); }
.small { font-size: var(--fs-xs, 0.75rem); line-height: 1.5; }

.panel {
  background: var(--sg-surface);
  border: 2px solid var(--sg-line);
  border-radius: var(--sg-rad);
  padding: var(--sp-3, 12px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
}

.panel h3 { margin: 0; font-size: var(--fs-md, 1rem); }
.panel h4 { margin: 4px 0 0; font-size: var(--fs-sm, 0.875rem); color: var(--sg-dim); }
.panel-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.panel-error { border-color: var(--sg-danger); }
.panel-warn { border-color: var(--sg-warn); }

.link-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 2px solid var(--sg-line);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: var(--fs-xs, 0.75rem);
  background: var(--sg-surface-2);
  color: inherit;
  cursor: pointer;
  min-height: 44px;
}

.chip-toggle {
  border: 2px solid var(--sg-line);
  border-radius: 999px;
  padding: 6px 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--fs-xs, 0.75rem);
  cursor: pointer;
  min-height: 44px;
}

.seg {
  display: inline-flex;
  border: 2px solid var(--sg-line);
  border-radius: 999px;
  overflow: hidden;
  align-self: flex-start;
}

.seg-btn {
  border: none;
  background: transparent;
  color: inherit;
  padding: 8px 16px;
  font: inherit;
  font-size: var(--fs-xs, 0.75rem);
  cursor: pointer;
  min-height: 44px;
}

.chip-toggle.is-on,
.seg-btn.is-on,
.map-btn.is-on {
  background: var(--sg-accent);
  border-color: transparent;
  color: var(--sg-accent-ink);
  font-weight: 700;
}

.bar {
  height: 8px;
  border-radius: 999px;
  background: var(--sg-surface-2);
  border: 1px solid var(--sg-line);
  overflow: hidden;
}

.bar-sm { height: 6px; }

.bar-fill {
  height: 100%;
  background: var(--sg-accent);
  border-radius: inherit;
  transition: width var(--dur, 180ms) var(--ease, ease);
}

.notice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2, 8px);
  align-items: center;
  border-radius: var(--sg-rad);
  padding: 9px 12px;
  font-size: var(--fs-sm, 0.875rem);
  background: var(--sg-surface-2);
  border: 2px solid var(--sg-line);
}

.notice-warn { border-color: var(--sg-warn); }
.notice-error { border-color: var(--sg-danger); }

/* skeleton fallback -- only used if ui.skeleton() is unavailable */
.sk { background: var(--sg-surface-2); border-radius: var(--sg-rad-sm); }
.sk-card { aspect-ratio: 3 / 4; }
.sk-block { height: 120px; }
.sk-row { height: 54px; list-style: none; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: var(--sp-2, 8px);
}

.stat {
  background: var(--sg-surface-2);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-rad-sm);
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat.is-own { border-color: var(--sg-accent); }
.stat-val { font-size: var(--fs-lg, 1.125rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-label { font-size: var(--fs-xs, 0.75rem); color: var(--sg-dim); }

.tag {
  border-radius: var(--sg-rad-sm);
  padding: 2px 7px;
  font-size: var(--fs-xs, 0.75rem);
  background: var(--sg-surface-3);
  border: 1px solid var(--sg-line);
}

.tag-new { background: var(--sg-accent); color: var(--sg-accent-ink); border-color: transparent; font-weight: 800; }
.tag-xp { color: var(--sg-ok); border-color: var(--sg-ok); }

.badge-ff {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--sg-r5);
  border: 1px solid var(--sg-r5);
  border-radius: 3px;
  padding: 1px 5px;
}

.form-msg { margin: 0; font-size: var(--fs-sm, 0.875rem); color: var(--sg-danger); min-height: 1em; }

.sheet-body { display: flex; flex-direction: column; gap: var(--sp-3, 12px); }
.sheet-body h3 { margin: 0; font-size: var(--fs-lg, 1.125rem); }
.sheet-actions { display: flex; gap: var(--sp-2, 8px); justify-content: flex-end; flex-wrap: wrap; }
.sheet-content { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }

/* last-resort sheet, only if ui.sheet() throws */
.sheet-fallback {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(560px, 100%);
  z-index: 60;
  background: var(--sg-surface);
  border: 2px solid var(--sg-line);
  border-radius: var(--sg-rad) var(--sg-rad) 0 0;
  padding: var(--sp-4, 16px);
}

.export-area {
  width: 100%;
  box-sizing: border-box;
  background: var(--sg-surface-2);
  border: 2px solid var(--sg-line);
  border-radius: var(--sg-rad-sm);
  color: inherit;
  font: inherit;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-xs, 0.75rem);
  padding: 10px;
}

/* rarity accent variable, consumed by frames below */
.r1 { --rc: var(--sg-r1); }
.r2 { --rc: var(--sg-r2); }
.r3 { --rc: var(--sg-r3); }
.r4 { --rc: var(--sg-r4); }
.r5 { --rc: var(--sg-r5); }

/* ------------------------------------------------------------ stickerdex --- */

.dex-progress { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }

.dex-progress-head { display: flex; align-items: baseline; gap: var(--sp-2, 8px); flex-wrap: wrap; }
.dex-progress-head strong { font-size: var(--fs-xl, 1.5rem); font-family: var(--font-display, inherit); }
.dex-progress-pct { margin-left: auto; color: var(--sg-dim); font-variant-numeric: tabular-nums; }

.dex-breakdown summary { cursor: pointer; font-size: var(--fs-sm, 0.875rem); color: var(--sg-dim); padding: 6px 0; }
.dex-breakdown-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.dex-breakdown-list li {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 2fr auto;
  gap: var(--sp-2, 8px);
  align-items: center;
  font-size: var(--fs-xs, 0.75rem);
  min-height: 44px;          /* one-handed, in the dark: reachable tap target */
  padding: 0 6px;
  border-radius: var(--sg-rad-sm);
}

.dex-breakdown-list li.is-link { cursor: pointer; }
.dex-breakdown-list li.is-link:active { background: var(--sg-surface-2); }
.dex-breakdown-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dex-breakdown-num { color: var(--sg-dim); font-variant-numeric: tabular-nums; }

.dex-tools { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }

.dex-search {
  width: 100%;
  box-sizing: border-box;
  background: var(--sg-surface);
  border: 2px solid var(--sg-line);
  border-radius: var(--sg-rad-sm);
  color: inherit;
  font: inherit;
  padding: 11px 12px;
  min-height: 46px;
}

.dex-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.dex-select {
  background: var(--sg-surface);
  border: 2px solid var(--sg-line);
  border-radius: 999px;
  color: inherit;
  font: inherit;
  font-size: var(--fs-xs, 0.75rem);
  padding: 7px 12px;
  min-height: 44px;
  /* a <select> sizes itself to its widest option -- one long crew handle or
     city name would otherwise push the whole page into horizontal scroll */
  max-width: 100%;
  text-overflow: ellipsis;
}

.dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
  align-content: start;
}

.dex-card {
  position: relative;
  background: var(--sg-surface);
  border: 2px solid var(--sg-line);
  border-left: 4px solid var(--rc, var(--sg-r1));
  border-radius: var(--sg-rad-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-hard, 3px 3px 0 rgba(0, 0, 0, 0.5));
}

.dex-card:focus-visible { outline: 3px solid var(--sg-accent); outline-offset: 2px; }

.dex-card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--sg-rad-sm);
  overflow: hidden;
  background: var(--sg-surface-2);
  display: grid;
  place-items: center;
}

.dex-card-img img,
.design-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dex-card.is-locked .dex-card-img img,
.design-hero.is-locked .design-hero-img img {
  /* a shadow, not a black hole: the motif stays as a ghost, unreadable but tempting */
  filter: grayscale(1) brightness(0.28) contrast(1.6);
}

.dex-card.is-locked { border-left-color: var(--sg-line); }

.dex-card-q,
.design-hero-q {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display, inherit);
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  color: var(--sg-faint);
  pointer-events: none;
}

.dex-card-img.is-broken::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(255, 255, 255, 0.05) 8px 16px);
}

.dex-card-name {
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dex-card-foot { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: auto; }
.dex-card-count { font-size: var(--fs-xs, 0.75rem); color: var(--sg-dim); font-variant-numeric: tabular-nums; }
.dex-card-first { font-size: 0.62rem; font-weight: 800; color: var(--sg-r5); }

.dex-card.is-fresh::after {
  content: "NEU";
  position: absolute;
  top: 8px;
  right: -24px;
  transform: rotate(35deg);
  background: var(--sg-accent);
  color: var(--sg-accent-ink);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 26px;
}

.dex-more { display: flex; justify-content: center; }
.dex-end { color: var(--sg-faint); font-size: var(--fs-xs, 0.75rem); text-align: center; }

/* ---------------------------------------------------------------- design --- */

.design-hero {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: var(--sp-3, 12px);
  background: var(--sg-surface);
  border: 2px solid var(--sg-line);
  border-top: 4px solid var(--rc, var(--sg-r1));
  border-radius: var(--sg-rad);
  padding: var(--sp-3, 12px);
}

@media (max-width: 520px) {
  .design-hero { grid-template-columns: 1fr; }
}

.design-hero-img {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--sg-rad-sm);
  overflow: hidden;
  background: var(--sg-surface-2);
}

.design-hero-head { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.design-name { margin: 0; font-size: var(--fs-xl, 1.5rem); font-family: var(--font-display, inherit); }
.design-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.design-ocr { margin: 0; font-size: var(--fs-md, 1rem); font-family: var(--font-mono, monospace); }
.design-motif { margin: 0; color: var(--sg-dim); font-size: var(--fs-sm, 0.875rem); }

.design-firstfind {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  border: 2px solid var(--sg-r5);
  border-radius: var(--sg-rad-sm);
  padding: 10px;
  font-size: var(--fs-sm, 0.875rem);
}

.rarity-line { margin: 0; font-weight: 700; }
.factor-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

.factor-list li {
  display: grid;
  grid-template-columns: minmax(110px, 1.2fr) 2fr auto;
  gap: var(--sp-2, 8px);
  align-items: center;
  font-size: var(--fs-sm, 0.875rem);
}

.factor-val { color: var(--sg-dim); font-variant-numeric: tabular-nums; }

.mini-map {
  height: 210px;
  border-radius: var(--sg-rad-sm);
  overflow: hidden;
  border: 2px solid var(--sg-line);
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--sg-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.timeline li { position: relative; display: flex; gap: var(--sp-2, 8px); align-items: baseline; font-size: var(--fs-sm, 0.875rem); flex-wrap: wrap; }
.timeline li.is-link { cursor: pointer; }

.timeline li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sg-accent);
}

.timeline-date { color: var(--sg-dim); font-variant-numeric: tabular-nums; min-width: 92px; }

.merge-results { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }

.merge-row,
.spot-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--sg-surface-2);
  border: 2px solid var(--sg-line);
  border-radius: var(--sg-rad-sm);
  padding: 8px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  min-height: 52px;
}

.spot-pick { justify-content: space-between; }
.spot-pick.is-on { border-color: var(--sg-accent); }
.merge-row img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--sg-rad-sm); }

/* ------------------------------------------------------------------- map --- */

.map-host {
  height: clamp(300px, 56vh, 620px);
  border-radius: var(--sg-rad);
  overflow: hidden;
  border: 2px solid var(--sg-line);
}

.map-tools { display: flex; gap: 6px; flex-wrap: wrap; }

.map-btn {
  border: 2px solid var(--sg-line);
  background: var(--sg-surface);
  color: inherit;
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: var(--fs-xs, 0.75rem);
  cursor: pointer;
  min-height: 44px;
}

.map-busy { align-self: flex-start; font-size: var(--fs-xs, 0.75rem); color: var(--sg-dim); }
.map-near-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2, 8px); }
.map-near-head h3 { margin: 0; font-size: var(--fs-md, 1rem); }

.near-list { list-style: none; margin: var(--sp-2, 8px) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.near-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  background: var(--sg-surface);
  border: 2px solid var(--sg-line);
  border-radius: var(--sg-rad-sm);
  padding: 10px 12px;
  cursor: pointer;
  min-height: 48px;
}

.near-main { font-size: var(--fs-sm, 0.875rem); }
.near-sub { font-size: var(--fs-xs, 0.75rem); color: var(--sg-dim); white-space: nowrap; }

.map-pin {
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 800;
  color: #10131a;
  background: var(--sg-r2);
  border: 2px solid rgba(0, 0, 0, 0.45);
  box-shadow: var(--shadow-hard, 2px 2px 0 rgba(0, 0, 0, 0.5));
}

.map-pin.d1 { background: #b6b1a6; }
.map-pin.d2 { background: #59d7a0; }
.map-pin.d3 { background: var(--sg-r5); }
.map-pin.d4 { background: #ff9f43; }
.map-pin.d5 { background: var(--sg-hot); color: #fff; }
.map-pin.is-single { border-radius: 999px 999px 2px 999px; }

.map-dot {
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: #10131a;
  background: var(--sg-r5);
}

.heat-blob {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 46, 99, 0.55) 0%, rgba(255, 46, 99, 0.12) 60%, transparent 72%);
  mix-blend-mode: screen;
}

.event-area {
  border-radius: 50%;
  border: 2px dashed var(--sg-r4);
  background: rgba(196, 121, 255, 0.12);
  display: grid;
  place-items: center;
}

.event-label {
  font-size: var(--fs-xs, 0.75rem);
  background: rgba(0, 0, 0, 0.65);
  padding: 1px 6px;
  border-radius: var(--sg-rad-sm);
  white-space: nowrap;
}

.self-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cyan, #2fe3d6);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(47, 227, 214, 0.35);
}

.self-acc { border-radius: 50%; background: rgba(47, 227, 214, 0.14); border: 1px solid rgba(47, 227, 214, 0.45); }

.crop-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.crop-strip img { width: 62px; height: 62px; object-fit: cover; border-radius: var(--sg-rad-sm); flex: 0 0 auto; }

/* ------------------------------------------------------------------ spot --- */

.spot-head {
  background: var(--sg-surface);
  border: 2px solid var(--sg-line);
  border-radius: var(--sg-rad);
  padding: var(--sp-3, 12px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
}

.spot-head-top { display: flex; gap: var(--sp-3, 12px); align-items: center; }
.spot-title { margin: 0; font-size: var(--fs-lg, 1.125rem); font-family: var(--font-display, inherit); }
.spot-icon { width: 34px; height: 34px; flex: 0 0 auto; color: var(--sg-accent); }
.spot-nums { display: flex; gap: var(--sp-3, 12px); flex-wrap: wrap; font-size: var(--fs-sm, 0.875rem); color: var(--sg-dim); }

.mastery { display: flex; align-items: center; gap: var(--sp-2, 8px); font-size: var(--fs-sm, 0.875rem); flex-wrap: wrap; }
.mastery-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sg-line); }
.mastery-bronze .mastery-dot { background: #cd7f32; }
.mastery-silver .mastery-dot { background: #c0c4cc; }
.mastery-gold .mastery-dot { background: var(--sg-r5); box-shadow: 0 0 12px rgba(255, 210, 58, 0.5); }

.spot-photo {
  border-radius: var(--sg-rad);
  overflow: hidden;
  border: 2px solid var(--sg-line);
  background: var(--sg-surface-2);
  min-height: 60px;
  display: grid;
  place-items: center;
}

.spot-photo img { width: 100%; max-height: 320px; object-fit: cover; display: block; }

/* spot index (the "Spot" tab without an id) */
.spot-index { list-style: none; margin: 0 0 var(--sp-3, 12px); padding: 0; display: flex; flex-direction: column; gap: 8px; }
.spot-index-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 12px;
  background: var(--sg-surface);
  border: 2px solid var(--sg-line);
  border-radius: var(--sg-rad);
  cursor: pointer;
}
.spot-index-row:active { background: var(--sg-surface-2); }
.spot-index-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spot-index-name { font-weight: 700; overflow-wrap: anywhere; }

.strata { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.strata-slider { flex: 1 1 160px; accent-color: var(--sg-accent); min-height: 44px; }
.strata-label { font-size: var(--fs-xs, 0.75rem); font-variant-numeric: tabular-nums; }

.layer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.layer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sg-surface-2);
  border: 2px solid var(--sg-line);
  border-radius: var(--sg-rad-sm);
  padding: 8px;
  margin-left: calc(min(var(--depth, 0), 6) * 5px);
}

.layer.is-link { cursor: pointer; }
.layer img, .layer-noimg { width: 48px; height: 48px; border-radius: var(--sg-rad-sm); object-fit: cover; flex: 0 0 auto; }
.layer-noimg { background: var(--sg-line); }
.layer-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.layer-name { font-size: var(--fs-sm, 0.875rem); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.scene-list { display: flex; gap: var(--sp-2, 8px); flex-wrap: wrap; }

/* ----------------------------------------------------------------- catch --- */

.phase-host { display: flex; flex-direction: column; gap: 10px; }
.phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.phase { display: flex; gap: 10px; align-items: center; opacity: 0.4; transition: opacity var(--dur, 180ms) var(--ease, ease); }
.phase-body { display: flex; flex-direction: column; }

.phase-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sg-line); flex: 0 0 auto; }

.phase.is-done { opacity: 1; }
.phase.is-done .phase-dot { background: var(--sg-ok); border-color: var(--sg-ok); }
.phase.is-active { opacity: 1; }
.phase.is-active .phase-dot { background: var(--sg-accent); border-color: var(--sg-accent); animation: sg-pulse 1.1s ease-in-out infinite; }
.phase.is-fail { opacity: 1; }
.phase.is-fail .phase-dot { background: var(--sg-danger); border-color: var(--sg-danger); }

@keyframes sg-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 255, 43, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(214, 255, 43, 0); }
}

.catch-result { display: flex; flex-direction: column; gap: var(--sp-4, 16px); }

.celebrate {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: var(--sp-5, 24px) var(--sp-3, 12px);
  border-radius: var(--sg-rad);
  border: 2px solid var(--sg-r5);
  background: radial-gradient(circle at 50% 0%, rgba(255, 210, 58, 0.22), transparent 70%), var(--sg-surface);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
  align-items: center;
  animation: sg-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.celebrate-title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: var(--fs-3xl, 2.75rem);
  letter-spacing: 0.04em;
  color: var(--sg-r5);
  text-shadow: 0 2px 20px rgba(255, 210, 58, 0.45);
}

.celebrate-flash {
  position: absolute;
  inset: -40% -10%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
  animation: sg-sweep 1.1s ease-out 0.15s both;
  pointer-events: none;
}

@keyframes sg-pop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes sg-sweep {
  from { transform: translateX(-60%); }
  to { transform: translateX(60%); }
}

.catch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }

.catch-card {
  background: var(--sg-surface-2);
  border: 2px solid var(--sg-line);
  border-radius: var(--sg-rad-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.catch-card.is-link { cursor: pointer; }
.catch-card.is-new { border-color: var(--sg-accent); }
.catch-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--sg-rad-sm); }
.catch-name { font-size: var(--fs-sm, 0.875rem); font-weight: 700; }
.catch-tags { display: flex; gap: 4px; flex-wrap: wrap; }

.xp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.xp-list li { display: flex; justify-content: space-between; font-size: var(--fs-sm, 0.875rem); gap: 10px; }
.xp-val { font-variant-numeric: tabular-nums; color: var(--sg-ok); }

.levelup {
  display: flex;
  gap: 10px;
  align-items: center;
  border-radius: var(--sg-rad-sm);
  padding: 10px;
  border: 2px solid var(--sg-accent);
  animation: sg-pop 0.4s ease both;
}

.levelup strong { letter-spacing: 0.12em; font-family: var(--font-display, inherit); }

.badge-row { display: flex; gap: var(--sp-2, 8px); flex-wrap: wrap; }

.badge {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 120px;
  flex: 1 1 150px;
  background: var(--sg-surface-2);
  border: 2px solid var(--sg-line);
  border-left-width: 5px;
  border-left-color: var(--sg-r1);
  border-radius: var(--sg-rad-sm);
  padding: 9px;
  font-size: var(--fs-sm, 0.875rem);
}

.badge-bronze { border-left-color: #cd7f32; }
.badge-silver { border-left-color: #c0c4cc; }
.badge-gold { border-left-color: var(--sg-r5); }
.badge.is-locked { opacity: 0.45; filter: grayscale(0.8); }

.tips { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm, 0.875rem); }
.catch-actions { display: flex; gap: var(--sp-2, 8px); flex-wrap: wrap; }
.spot-line { margin: 0; }
.spot-picker { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }

/* --------------------------------------------------------------- profile --- */

.profile-host { display: flex; flex-direction: column; gap: var(--sp-4, 16px); }
.profile-name-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.profile-name-row h2 { margin: 0; font-size: var(--fs-xl, 1.5rem); font-family: var(--font-display, inherit); }

.level-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.level-badge {
  background: var(--sg-accent);
  color: var(--sg-accent-ink);
  font-weight: 800;
  border-radius: var(--sg-rad-sm);
  padding: 3px 9px;
  font-size: var(--fs-sm, 0.875rem);
}

.level-title { font-size: var(--fs-md, 1rem); }
.streak { display: flex; align-items: center; gap: var(--sp-2, 8px); font-size: var(--fs-sm, 0.875rem); flex-wrap: wrap; }

.streak-flame {
  width: 12px;
  height: 16px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--sg-line);
}

.streak-flame.is-on {
  background: linear-gradient(180deg, var(--sg-r5), var(--sg-hot));
  animation: sg-flicker 1.6s ease-in-out infinite;
}

@keyframes sg-flicker {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.18); }
}

.privacy-list { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }

.privacy-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 2px solid var(--sg-line);
  border-radius: var(--sg-rad-sm);
  padding: 11px;
  cursor: pointer;
}

.privacy-opt.is-on { border-color: var(--sg-accent); }
.privacy-opt div { display: flex; flex-direction: column; gap: 2px; }

.queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }

.queue-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2, 8px);
  font-size: var(--fs-xs, 0.75rem);
  background: var(--sg-surface-2);
  border-radius: var(--sg-rad-sm);
  padding: 8px 9px;
}

/* ------------------------------------------------------------------ feed --- */

.feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2, 8px); }

.feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sg-surface);
  border: 2px solid var(--sg-line);
  border-radius: var(--sg-rad-sm);
  padding: 9px;
  min-height: 60px;
}

.feed-item.is-link { cursor: pointer; }
.feed-thumb { width: 46px; height: 46px; border-radius: var(--sg-rad-sm); object-fit: cover; flex: 0 0 auto; }

.feed-kind {
  width: 46px;
  height: 46px;
  border-radius: var(--sg-rad-sm);
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  text-align: center;
  background: var(--sg-surface-2);
  color: var(--sg-dim);
  flex: 0 0 auto;
}

.feed-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.feed-body strong { font-size: var(--fs-sm, 0.875rem); }
.feed-meta { font-variant-numeric: tabular-nums; }
.feed-item.kind-first_find { border-left: 5px solid var(--sg-r5); }
.feed-item.kind-new_design { border-left: 5px solid var(--sg-accent); }
.feed-item.kind-level_up { border-left: 5px solid var(--sg-r4); }
.feed-item.kind-badge { border-left: 5px solid var(--sg-r3); }
.feed-more { display: flex; justify-content: center; }

/* --------------------------------------------------------------- tilemap --- */

.tm { position: relative; background: var(--sg-surface-2); }
.tm:focus-visible { outline: 3px solid var(--sg-accent); outline-offset: -3px; }
.tm-markers, .tm-overlays { pointer-events: none; }
.tm-markers .tm-marker { pointer-events: auto; }

.tm-ctl-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--sg-rad-sm);
  border: 2px solid var(--sg-line);
  background: rgba(10, 10, 12, 0.82);
  color: var(--sg-fg);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.tm-attr a { text-decoration: none; }
.tm-attr a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ a11y/motion --- */

@media (prefers-reduced-motion: reduce) {
  .celebrate,
  .celebrate-flash,
  .levelup,
  .phase.is-active .phase-dot,
  .streak-flame.is-on { animation: none; }
  .bar-fill { transition: none; }
}