/* ============================================================
   maparts section: the map wall
   Extends the ExDeDe design system (main.css tokens).
   Signature: a wall of framed 128x128 maps, rendered pixel-true.
   ============================================================ */

/* ---- announcement banner ---- */
.announcement {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--pink);
  border-left: 4px solid var(--pink);
  border-radius: var(--radius);
  background: var(--layer);
  box-shadow: 0 0 14px rgba(255, 107, 181, 0.2);
}
.announcement[hidden] { display: none; }
.announcement p {
  flex: 1;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}
.announcement button {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}
.announcement button:hover { color: var(--pink); }

/* ---- filter bar ---- */
.maparts-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.chip {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--layer);
  color: var(--text-dim);
  cursor: pointer;
}
.chip:hover { border-color: var(--violet); color: var(--text); }
.chip.active {
  border-color: var(--pink);
  color: var(--pink);
  background: var(--layer-2);
}
.chip.chip-warn.active { border-color: var(--blue); color: var(--blue); }

.maparts-toolbar .spacer { flex: 1; }

#sort-select {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--layer);
  color: var(--text-dim);
}
#sort-select:hover { border-color: var(--violet); color: var(--text); }
#reshuffle-btn[hidden] { display: none; }

/* ---- 18+ switch ---- */
.nsfw-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  /* it's a <button>: kill the native chrome so it sits flat on the page */
  background: none;
  border: none;
  padding: 0;
}
.nsfw-toggle:hover { color: var(--text); }
.nsfw-toggle .track {
  width: 34px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--layer);
  position: relative;
  transition: border-color 0.15s;
}
.nsfw-toggle .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.15s, background 0.15s;
}
.nsfw-toggle[aria-pressed="true"] .track { border-color: var(--pink); }
.nsfw-toggle[aria-pressed="true"] .knob {
  transform: translateX(16px);
  background: var(--pink);
}
.nsfw-toggle:hover .track { border-color: var(--violet); }

/* ---- the wall ---- */
.map-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.map-tile {
  position: relative;
  padding: 8px;
  background: var(--layer);
  border: 2px solid var(--border);
  border-radius: 2px;
  /* item-frame inner lip */
  box-shadow: inset 0 0 0 1px rgba(157, 123, 255, 0.15);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.map-tile:hover,
.map-tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--violet);
}

.map-tile img {
  width: 100%;
  aspect-ratio: 1;
  image-rendering: pixelated;
  background: var(--layer-2);
  display: block;
}

.map-tile .map-id {
  position: absolute;
  right: 6px;
  bottom: 6px;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: var(--bg);
  background: var(--violet);
  padding: 0 0.3rem;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.12s;
}
.map-tile:hover .map-id,
.map-tile:focus-visible .map-id { opacity: 1; }

.map-tile .dupe-badge {
  position: absolute;
  left: 6px;
  top: 6px;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: var(--bg);
  background: var(--blue);
  padding: 0 0.3rem;
  border-radius: 2px;
}

.map-tile .tile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.4rem;
  min-height: 1.1rem;
}

.tag {
  font-size: 0.65rem;
  line-height: 1.4;
  padding: 0 0.35rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-dim);
}
.tag.nsfw { border-color: var(--pink); color: var(--pink); }
.tag.pending { border-style: dashed; }
.tag.pinned { border-color: var(--blue); color: var(--blue); }

/* ---- pagination ---- */
.map-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.map-pager .page-num { font-family: var(--font-pixel); color: var(--violet); }

/* ---- modals ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 10, 20, 0.8);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
}
.modal-overlay[hidden] { display: none; }
.modal-overlay .window {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-overlay .window-body { padding: 1rem 1.25rem 1.25rem; }

.detail-image {
  width: min(320px, 100%);
  aspect-ratio: 1;
  image-rendering: pixelated;
  margin: 0 auto 1rem;
  border: 2px solid var(--border);
  background: var(--layer-2);
}

/* native selects restyled to match the layer/border language */
.window-body select {
  background: var(--layer);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.35rem 0.5rem;
}
.window-body select:hover { border-color: var(--violet); }

.detail-row { margin-bottom: 0.6rem; font-size: 0.85rem; }
.detail-row .label {
  color: var(--text-dim);
  font-size: 0.75rem;
  text-transform: lowercase;
  display: block;
}
.detail-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.dupes-list {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  word-break: break-word;
}
details.dupes summary {
  cursor: pointer;
  color: var(--blue);
  font-size: 0.85rem;
}
details.dupes summary:hover { color: var(--pink); }

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.btn.btn-small { padding: 0.3rem 0.8rem; font-size: 0.7rem; margin-left: 0; }
/* outline variant: main.css .btn is solid pink, so danger goes hollow */
.btn.btn-danger {
  background: transparent;
  border: 1px solid var(--pink);
  color: var(--pink);
  box-shadow: 3px 3px 0 rgba(255, 107, 181, 0.25);
}
.btn.btn-danger:hover { background: var(--pink); color: var(--bg); }

/* wall tile's collect toggle: hollow like btn-danger, blue like the rest of
   this site's "marked" states (badge-verified, pinned tag/tile) */
.map-tile .collect-btn {
  margin-top: 0.3rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.map-tile .collect-btn.collected {
  border-color: var(--blue);
  color: var(--blue);
}

/* report reason picker */
.reason-list { display: grid; gap: 0.4rem; margin: 0.75rem 0 1rem; }
.reason-list label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.empty-wall {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-dim);
}
.empty-wall .pixel-face {
  font-family: var(--font-pixel);
  font-size: 1.5rem;
  color: var(--violet);
  display: block;
  margin-bottom: 0.5rem;
}

/* ============================================================
   sponsored slots
   Glow-framed cards that read as part of the wall but never as a
   mapart: pink border, corner tag, explicit "open link" line.
   ============================================================ */

.wall-frame {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.wall-frame .map-wall { flex: 1; min-width: 0; }

.slot-rail {
  flex: 0 0 120px;
  width: 120px;
  display: grid;
  gap: 0.75rem;
  position: sticky;
  top: 4.5rem;
  align-self: flex-start;
}
.slot-rail[hidden] { display: none; }

.slot-strip { margin-bottom: 1rem; }
.slot-strip[hidden] { display: none; }

.slot-card {
  position: relative;
  display: block;
  padding: 8px;
  border: 1px solid var(--pink);
  border-radius: 2px;
  background: var(--layer);
  box-shadow: 0 0 0 1px rgba(255, 107, 181, 0.35), 0 0 14px rgba(255, 107, 181, 0.28);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s;
  overflow: hidden;
}
.slot-card:hover,
.slot-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--pink), 0 0 18px rgba(255, 107, 181, 0.45);
}

.slot-card .slot-tag {
  position: absolute;
  right: 6px;
  top: 6px;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  color: var(--pink);
  border: 1px solid var(--pink);
  border-radius: 2px;
  padding: 0 0.25rem;
  background: var(--bg);
}

.slot-card .slot-img {
  width: 100%;
  aspect-ratio: 1;
  image-rendering: pixelated;
  background: var(--layer-2);
  display: block;
}
.slot-card .slot-body { font-size: 0.7rem; line-height: 1.3; margin-top: 0.4rem; overflow-wrap: anywhere; }
.slot-card .slot-who { font-size: 0.62rem; color: var(--pink); margin-top: 0.2rem; }
.slot-card .slot-cta { display: block; font-size: 0.6rem; color: var(--pink); margin-top: 0.3rem; }
.slot-card .slot-more { margin-top: 0.3rem; font-size: 0.62rem; color: var(--text-dim); }
.slot-card .slot-more summary { cursor: pointer; color: var(--blue); }

/* strip: image sits beside the copy instead of above it */
.slot-card--strip { display: flex; align-items: center; gap: 0.75rem; padding: 10px 12px; }
.slot-card--strip .slot-img { width: 64px; flex: 0 0 64px; }
.slot-card--strip .slot-body { margin-top: 0; font-size: 0.8rem; min-width: 0; }
.slot-card--strip .slot-cta { margin-left: auto; white-space: nowrap; }

/* rail: 120px wide */
.slot-card--rail { padding: 5px; }
.slot-card--rail .slot-body { font-size: 0.66rem; }
.slot-card--rail .slot-who { font-size: 0.6rem; }
.slot-card--rail .slot-cta { font-size: 0.58rem; }
.slot-card--rail .slot-tag { font-size: 0.45rem; right: 3px; top: 3px; }

/* text-only cards keep a left bar so they still read as a unit */
.slot-card--text { border-left-width: 3px; }

.slot-card--house { border-style: dashed; }

@media (max-width: 900px) {
  /* Both rails move above the grid and lay out side by side, so a narrow
     screen shows one sponsored strip instead of two squeezed columns. */
  .wall-frame { flex-direction: column; }
  .slot-rail {
    order: -1;
    flex: none;
    width: 100%;
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .slot-card--rail { display: flex; align-items: center; gap: 0.5rem; }
  .slot-card--rail .slot-img { width: 40px; flex: 0 0 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .slot-card { transition: none; }
  .slot-card:hover { transform: none; }
}

/* ============================================================
   admin panel
   ============================================================ */

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}
.stat-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--layer);
  padding: 0.75rem;
}
.stat-box .stat-value {
  font-family: var(--font-pixel);
  font-size: 1.4rem;
  color: var(--pink);
  display: block;
}
.stat-box .stat-label { font-size: 0.75rem; color: var(--text-dim); }

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.admin-filters select,
.admin-filters input[type="text"],
.admin-filters input[type="number"] {
  background: var(--layer);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
}
.admin-filters label.check {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.bulk-bar {
  position: sticky;
  top: 3.2rem;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--pink);
  border-radius: var(--radius);
  background: var(--layer-2);
}
.bulk-bar[hidden] { display: none; }
.bulk-bar .bulk-count {
  font-family: var(--font-pixel);
  color: var(--pink);
  font-size: 0.8rem;
}

.admin-wall .map-tile.selected {
  border-color: var(--pink);
  box-shadow: 0 0 0 2px rgba(255, 107, 181, 0.35);
}
.map-tile.pinned { border-color: var(--blue); }
.admin-wall .map-tile.pinned.selected {
  border-color: var(--pink);
  box-shadow: 0 0 0 2px rgba(255, 107, 181, 0.35), inset 0 0 0 2px var(--blue);
}
.admin-wall .map-tile .sel-box {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 2;
}
.admin-wall .map-tile .status-strip {
  font-size: 0.65rem;
  margin-top: 0.3rem;
  color: var(--text-dim);
}
.admin-wall .map-tile .status-strip .bad { color: var(--pink); }
.admin-wall .map-tile .status-strip .warn { color: var(--blue); }

.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.admin-table th {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  color: var(--violet);
  white-space: nowrap;
}
.admin-table td.mono { font-family: var(--font-mono); word-break: break-all; }
.admin-table .banned-row { color: var(--pink); }

.cat-manage { display: grid; gap: 0.5rem; max-width: 420px; }
.cat-manage .cat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cat-manage .cat-row .cat-name { flex: 1; }

.login-window { max-width: 380px; margin: 3rem auto; }

.report-preview {
  width: 96px;
  aspect-ratio: 1;
  image-rendering: pixelated;
  border: 1px solid var(--border);
}

@media (max-width: 600px) {
  .map-wall { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .bulk-bar { top: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .map-tile, .nsfw-toggle .knob, .nsfw-toggle .track { transition: none; }
  .map-tile:hover { transform: none; }
}

.tab-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.3rem;
  border-radius: 2px;
  background: var(--pink);
  color: var(--bg);
  font-family: var(--font-pixel);
  font-size: 0.6rem;
}
.tab-badge[hidden] { display: none; }

.spot-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--pink);
  border-radius: var(--radius);
  background: var(--layer);
  font-size: 0.8rem;
}
.spot-note.read { border-left-color: var(--border); color: var(--text-dim); }
.spot-note .spot-note-text { flex: 1; }

.spot-preview {
  width: 120px;
  margin-top: 0.4rem;
  border: 1px solid var(--border);
  image-rendering: pixelated;
}
.spot-preview[hidden] { display: none; }

#spot-modal .window { max-width: 560px; }
#spot-modal textarea {
  width: 100%;
  background: var(--layer);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.35rem 0.5rem;
}
#spot-modal input[type="date"],
#spot-modal input[type="text"] {
  background: var(--layer);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
}

.spot-master {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--pink);
  border-radius: var(--radius);
  background: var(--layer);
  font-size: 0.85rem;
}
.spot-master-row { border-left-color: var(--violet); flex-wrap: wrap; }

details.section summary {
  cursor: pointer;
  font-family: var(--font-pixel);
  color: var(--violet);
  font-size: 0.9rem;
}
details.section summary:hover { color: var(--pink); }
details.section[open] summary { margin-bottom: 0.75rem; }
#spot-questionnaire {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-dim);
  background: var(--layer-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  white-space: pre-wrap;
  margin-bottom: 0.5rem;
}

.spot-chart {
  width: 100%;
  height: auto;
  margin: 0.75rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--layer);
}
.spot-chart-bar { fill: var(--violet); }
.spot-chart-bar:hover { fill: var(--pink); }
.spot-chart-line { fill: none; stroke: var(--pink); stroke-width: 1.5; }
.spot-chart-axis { fill: var(--text-dim); font-family: var(--font-mono); font-size: 9px; }
.spot-chart-empty { fill: var(--text-dim); font-family: var(--font-mono); font-size: 11px; }

/* ---- advertise page ---- */
.advertise-note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--violet);
  border-radius: var(--radius);
  background: var(--layer);
  padding: 0.85rem 1rem;
  margin: 1rem 0 1.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.advertise-payment-note,
.advertise-barter-note {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0 0 0.75rem;
}
.advertise-barter-note { margin-bottom: 1.25rem; }

#advertise-stats {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--blue);
  margin: 0 0 1.5rem;
}
#advertise-stats[hidden] { display: none; }

.advertise-price {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--pink);
  margin: 0.35rem 0 0.75rem;
}

/* Flex, not a uniform grid: a top banner, a sidebar card and an in-grid tile
   are three different real widths on the wall (full width / 120px rail /
   ~150px column), so forcing them into equal grid columns is what made the
   examples look broken and squeezed instead of like the real placements. */
.advertise-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
}
.advertise-grid .slot-card--strip { flex: 1 1 100%; }
.advertise-grid .slot-card--rail { flex: 0 0 120px; width: 120px; }
.advertise-grid .slot-card--tile { flex: 0 0 150px; width: 150px; }

/* Example cards are not links and must not look clickable. They also carry
   two badges side by side (the pink "ad" tag and the
   violet "example" flag), both pinned to the top edge. Without a reserved
   strip for them, the body text starts right under the card's normal 8px
   padding and renders half-hidden behind the badges instead of below them. */
.slot-card--example { cursor: default; opacity: 0.85; border-style: dashed; padding-top: 28px; }
.slot-card--example:hover { transform: none; }
.slot-card--example .slot-badge-strip {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 24px;
  background: var(--layer-2);
  border-bottom: 1px solid var(--border);
  border-radius: 2px 2px 0 0;
}

.slot-card .slot-example-flag {
  position: absolute;
  left: 6px;
  top: 6px;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--bg);
  background: var(--violet);
  padding: 0 0.25rem;
  border-radius: 2px;
}
.slot-card .slot-paid { font-size: 0.58rem; color: var(--text-dim); margin-top: 0.2rem; }

/* ============================================================
   account page (login/register/collection)
   ============================================================ */

.badge-verified,
.badge-unverified {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  border: 1px solid var(--border);
}
.badge-verified { border-color: var(--blue); color: var(--blue); }
.badge-unverified { border-color: var(--pink); color: var(--pink); }

.account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--layer);
}
.account-name {
  font-family: var(--font-pixel);
  color: var(--violet);
  font-size: 1rem;
  margin-right: 0.5rem;
}

.link-code {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 1.6rem;
  letter-spacing: 0.15em;
  color: var(--pink);
  padding: 0.5rem 1rem;
  border: 1px solid var(--pink);
  border-radius: var(--radius);
  background: var(--layer);
  margin: 0.5rem 0;
}