:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --ink: #141414;
  --ink-dim: #6b6b6b;
  --line: #e3e3e6;
  --accent: #b45309;
  --col: 150px;            /* masonry column width */
  --gap: 12px;
  --tile: 64px;            /* map cover width in world px */
}
* { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: Arial, Helvetica, sans-serif; font-size: .78rem; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
body.mapmode { overflow: hidden; height: 100%; }

/* ========== GRID (masonry river) ========== */
.stage { padding: var(--gap); padding-bottom: 64px; }
.river { column-width: var(--col); column-gap: var(--gap); }
.river .cell {
  break-inside: avoid; margin: 0 0 var(--gap); width: 100%;
  position: relative; cursor: pointer; border-radius: 3px; overflow: hidden;
  background: #f0f0f2; box-shadow: 0 0 0 1px var(--line);
}
.river .cell > img { width: 100%; height: auto; display: block; opacity: 0; transition: opacity .35s ease; }
.river .cell > img.loaded { opacity: 1; }
.river .cell.current { box-shadow: 0 0 0 2px var(--accent); }

/* ========== MAP (pan/zoom) ========== */
.viewport { position: fixed; inset: 0; overflow: hidden; touch-action: none; cursor: grab; background: var(--bg); }
.viewport.grabbing { cursor: grabbing; }
.space { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.space .tile { position: absolute; transform: translate(-50%, -50%); cursor: pointer; }
.space .tile > img { display: block; width: var(--tile); height: auto; background: #f0f0f2; box-shadow: 0 0 0 1px rgba(0,0,0,.06); opacity: 0; transition: opacity .35s ease; }
.space .tile > img.loaded { opacity: 1; }
.space .tile:hover { z-index: 5; }
.space .tile:hover > img { box-shadow: 0 2px 10px rgba(0,0,0,.28), 0 0 0 1px var(--accent); }
.tile.pulse > img, .cell.pulse > img { animation: pulse 1.1s ease 2; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 1px var(--line); } 50% { box-shadow: 0 0 0 3px var(--accent); } }

/* hover actions (shared) */
.acts { position: absolute; top: 4px; right: 4px; display: none; gap: 3px; }
.cell:hover .acts, .tile:hover .acts { display: flex; }
.acts button {
  width: 21px; height: 21px; padding: 0; line-height: 1; border: 0; border-radius: 4px; cursor: pointer;
  background: rgba(255,255,255,.92); box-shadow: 0 1px 3px rgba(0,0,0,.3); font-size: 11px;
}
.acts button:hover { background: #fff; }
.acts .heart.on { background: var(--accent); color: #fff; }

/* ========== bottom bar ========== */
.bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--line);
}
.brand .name { font-weight: 700; }
.bar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.q { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; width: 170px; background: var(--bg); outline: none; }
.q:focus { border-color: var(--accent); }
.bar button, .toggle {
  background: none; border: 1px solid var(--line); color: var(--ink-dim);
  padding: 5px 12px; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.bar button:hover, .toggle:hover { color: var(--ink); border-color: var(--accent); }
.bar button[aria-pressed="true"] { color: var(--bg); background: var(--accent); border-color: var(--accent); }

/* ========== trail / minimap / shelf ========== */
.trail { flex: 1 1 auto; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.trail::-webkit-scrollbar { display: none; }
.trail img { height: 28px; width: auto; flex: 0 0 auto; border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; opacity: .85; }
.trail img:hover { opacity: 1; }

.minimap { position: fixed; right: 10px; bottom: 56px; z-index: 15; width: 180px; height: 180px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.9); box-shadow: 0 2px 10px rgba(0,0,0,.12); cursor: crosshair; }

.shelf { position: fixed; left: 10px; bottom: 56px; z-index: 25; width: 300px; max-height: 60vh; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.18); display: flex; flex-direction: column; overflow: hidden; }
.shelf-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.shelf-head button { border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--ink-dim); }
.shelf-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; overflow-y: auto; }
.shelf-items img { width: 100%; height: auto; border-radius: 2px; cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.shelf-empty { color: var(--ink-dim); padding: 16px; grid-column: 1 / -1; }

/* ========== loading / drop / about ========== */
.loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-dim); background: var(--bg); z-index: 40; }
.drop { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 2px dashed var(--accent); color: var(--ink); }
body.dragging .drop { display: flex; }
dialog#about { max-width: 460px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); padding: 26px; line-height: 1.5; }
dialog#about::backdrop { background: rgba(0,0,0,.5); }
dialog#about h2 { margin-top: 0; font-size: inherit; font-weight: 700; }
dialog#about a { color: var(--accent); }
dialog#about button { margin-top: 8px; background: none; border: 1px solid var(--line); color: var(--ink); padding: 6px 16px; border-radius: 999px; cursor: pointer; }

@media (max-width: 640px) { :root { --col: 108px; --gap: 8px; } .q { width: 110px; } .minimap { width: 120px; height: 120px; } }