:root {
  --bg: #06070a; --ink: #f4f5f7; --ink-2: #a9adb7; --ink-3: #6f7480;
  --glass: rgba(255,255,255,.07); --glass-2: rgba(255,255,255,.12); --line: rgba(255,255,255,.14);
  --accent: #ffcf6b;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 800px at 50% 45%, #141824 0%, #090b10 55%, var(--bg) 100%);
  color: var(--ink); overflow: hidden;
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: grid; grid-template-rows: auto 1fr auto; height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; z-index: 2; }
.brand { font-size: 18px; letter-spacing: .02em; color: var(--ink-2); }
.brand b { color: var(--ink); font-weight: 650; }
.tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pill, select {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--glass); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; cursor: pointer; text-decoration: none;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .2s, border-color .2s;
}
select { padding-right: 10px; }
select option { color: #000; }
.pill:hover, select:hover { background: var(--glass-2); }
.pill.icon { min-width: 38px; text-align: center; padding: 7px 10px; }
button, a, .card { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.stage { position: relative; display: grid; place-items: center; overflow: hidden; cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.stage img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.stage.dragging { cursor: grabbing; }
.scene { perspective: 1400px; perspective-origin: 50% 50%; width: 1px; height: 1px; }
.globe { position: relative; transform-style: preserve-3d; will-change: transform; }
.card {
  position: absolute; left: 0; top: 0; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  cursor: pointer; transform: var(--base);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s, width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1), margin .5s cubic-bezier(.2,.8,.2,1);
}
.card .face { width: 100%; height: 100%; overflow: hidden; background: #1a1d26;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.card.instant { transition: none; }
.card.active { z-index: 1; transform: var(--base) translateZ(70px);
  filter: drop-shadow(0 0 1.5px #ffcf6b) drop-shadow(0 0 14px rgba(255,207,107,.55)) drop-shadow(0 18px 28px rgba(0,0,0,.65)); }
/* fixed lighting over the sphere: a soft highlight upper left, darker toward the rim */
.shade { position: absolute; left: 50%; top: 50%; width: var(--d, 600px); height: var(--d, 600px); transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,.28) 75%, rgba(0,0,0,.72) 100%);
  box-shadow: 0 0 80px 10px rgba(0,0,0,.6), 0 0 140px rgba(120,150,255,.06); }

.dock { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 16px 18px; z-index: 2; }
.caption { text-align: center; min-height: 3.1em; transition: opacity .35s; }
.caption.empty { opacity: 0; }
.ctitle { font-size: clamp(18px, 2.4vw, 24px); font-weight: 650; letter-spacing: .01em; }
.csub { color: var(--ink-2); font-size: 14px; }
.actions { display: flex; gap: 12px; align-items: center; }
.round {
  width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), rgba(255,255,255,.06)); color: var(--ink);
  font-size: 18px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 30px rgba(0,0,0,.5);
  transition: transform .15s;
}
.round:active { transform: scale(.94); }
.pill.open { background: var(--accent); color: #1b1300; border-color: transparent; font-weight: 650; }
.pill[hidden] { display: none; }
.hint { color: var(--ink-3); font-size: 12.5px; min-height: 1em; }

.viewer { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-columns: 1fr minmax(240px, 340px);
  background: rgba(4,5,8,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: fade .25s ease; }
.viewer[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.vimgwrap { position: relative; overflow: hidden; display: grid; place-items: center; touch-action: none; cursor: zoom-in; }
.vimgwrap.zoomed { cursor: grab; }
.vimgwrap img { max-width: 92%; max-height: 90%; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6); transform-origin: 0 0; will-change: transform; user-select: none; }
.vinfo { padding: 72px 28px 28px; border-left: 1px solid var(--line); overflow: auto; }
.vinfo h2 { margin: 0 0 6px; font-size: 26px; font-weight: 650; }
.vsub { margin: 0 0 16px; color: var(--accent); }
.vstory { margin: 0; color: var(--ink-2); white-space: pre-line; }
.vcount { margin-top: 20px; color: var(--ink-3); font-size: 13px; }
.vbtn { position: absolute; border: 1px solid var(--line); background: var(--glass); color: var(--ink); border-radius: 999px;
  width: 44px; height: 44px; font-size: 22px; line-height: 1; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.vclose { top: 16px; right: 16px; }
.vprev { left: 16px; top: 50%; transform: translateY(-50%); }
.vnext { right: calc(min(340px, 34vw) + 16px); top: 50%; transform: translateY(-50%); }
.vzoom { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; }
.vzoom .vbtn { position: static; }

.tip { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 40; width: min(92vw, 420px);
  background: #11141c; border: 1px solid var(--line); border-radius: 18px; padding: 18px; text-align: center; box-shadow: 0 30px 80px #000; }
.tip[hidden] { display: none; }
.tip p { margin: 0 0 12px; }

@media (max-width: 760px) {
  .viewer { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .vinfo { border-left: 0; border-top: 1px solid var(--line); padding: 16px 20px 24px; max-height: 38dvh; }
  .vnext { right: 16px; }
  .vzoom { top: 16px; bottom: auto; }
  .brand { display: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  body { grid-template-rows: 1fr; }
  .stage { grid-row: 1; }
  .bar { position: absolute; top: env(safe-area-inset-top); left: env(safe-area-inset-left); right: env(safe-area-inset-right); padding: 6px 12px; }
  .brand { display: none; }
  .dock { position: absolute; right: 12px; bottom: 10px; align-items: flex-end; padding: 0; }
  .caption { text-align: right; }
  .hint { display: none; }
  .viewer { grid-template-columns: 1fr minmax(200px, 300px); grid-template-rows: none; }
  .vinfo { border-top: 0; border-left: 1px solid var(--line); max-height: none; padding-top: 64px; }
  .vnext { right: calc(min(300px, 34vw) + 16px); }
}
@media (display-mode: fullscreen), (display-mode: standalone) { #fsBtn { display: none; } }