:root {
  --bg: #0a0e12;
  --panel: #12181f;
  --line: #1f2a35;
  --text: #d7e2ea;
  --dim: #7c8b98;
  --accent: #29e0d2;
  --accent-dim: #14756e;
  --danger: #ff5470;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, Roboto, sans-serif;
}

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------------- flat page ---------------- */

#topbar {
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(180deg, rgba(10,14,18,.97), rgba(10,14,18,.9));
  border-bottom: 1px solid var(--line);
  padding: 14px clamp(12px, 4vw, 40px) 12px;
  backdrop-filter: blur(8px);
}
#topbar h1 {
  margin: 0 0 10px;
  font-size: 20px; letter-spacing: .06em; font-weight: 650;
}
#topbar .glyph { color: var(--accent); }
#search-form { display: flex; gap: 8px; max-width: 680px; }
#search-input {
  flex: 1;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 14px; font-size: 15px; outline: none;
}
#search-input:focus { border-color: var(--accent-dim); box-shadow: 0 0 0 3px rgba(41,224,210,.08); }
#search-form button {
  background: var(--accent); color: #04211f; font-weight: 700;
  border: 0; border-radius: 10px; padding: 0 18px; cursor: pointer;
}
#status-line { margin-top: 8px; font-size: 12.5px; color: var(--dim); }

#results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
  max-width: 1200px;
  margin: 18px auto 120px;
  padding: 0 clamp(12px, 4vw, 40px);
}
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; cursor: pointer; transition: transform .12s ease, border-color .12s;
  position: relative;
}
.card:hover { transform: translateY(-2px); border-color: var(--accent-dim); }
.card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background:#000; }
.card .meta { padding: 8px 10px 10px; }
.card .name { font-size: 13px; line-height: 1.25; height: 2.5em; overflow: hidden; }
.badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; }
.badge {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  background: rgba(4,33,31,.85); color: var(--accent);
  border: 1px solid var(--accent-dim); border-radius: 6px; padding: 2px 6px;
}
.badge.anim { color: #ffd166; border-color: #7a5c1e; }

.note { color: var(--dim); font-size: 13px; text-align: center; padding: 20px; }

/* preview drawer */
#preview {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(4,7,10,.92);
  display: grid; grid-template-rows: minmax(0, 72vh) auto;
  gap: 10px; padding: clamp(10px, 3vw, 30px);
}
#preview[hidden] { display: none; }
#preview-frame { width: 100%; height: 100%; border: 1px solid var(--line); border-radius: 12px; background: #000; }
#preview-meta { display: flex; align-items: center; gap: 16px; justify-content: center; }
#preview-name { font-size: 16px; }
#preview-close {
  position: absolute; top: 12px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  font-size: 20px; cursor: pointer;
}
#preview-xr, #enter-xr {
  background: var(--accent); color: #04211f; font-weight: 800;
  border: 0; border-radius: 999px; cursor: pointer;
}
#preview-xr { padding: 12px 22px; font-size: 15px; }
#enter-xr {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  padding: 15px 26px; font-size: 15px; letter-spacing: .04em;
  box-shadow: 0 6px 24px rgba(41,224,210,.25);
}
#enter-xr:disabled { opacity: .45; cursor: wait; }

/* while an immersive session runs, the flat page stays out of the way */
body.in-xr #topbar,
body.in-xr #results,
body.in-xr #enter-xr,
body.in-xr #preview { display: none; }

/* ---------------- XR dom overlay ---------------- */

#xr-overlay {
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none;           /* only the input takes touches */
  font-family: "Segoe UI", system-ui, sans-serif;
}
#xr-overlay[hidden] { display: none; }
#xr-topbar {
  position: absolute; top: env(safe-area-inset-top, 12px); left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: rgba(10,16,22,.82); border: 1px solid rgba(41,224,210,.25);
  border-radius: 14px; padding: 10px 14px;
  backdrop-filter: blur(6px);
}
#xr-search-input {
  width: min(46vw, 420px);
  background: rgba(255,255,255,.07); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 10px;
  padding: 10px 13px; font-size: 16px; outline: none;
  pointer-events: auto;
}
#xr-count { color: var(--accent); font-size: 13px; white-space: nowrap; }
#xr-chips {
  position: absolute; top: calc(env(safe-area-inset-top, 12px) + 64px);
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; flex-wrap: nowrap;
}
#xr-chips button {
  pointer-events: auto;
  background: rgba(10,16,22,.66); color: #9fe8e2;
  border: 1px solid rgba(41,224,210,.35); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; cursor: pointer;
}
#xr-chips button:active { background: rgba(41,224,210,.25); }
#xr-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  color: rgba(215,226,234,.75); font-size: 13px; text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  white-space: nowrap;
}
#xr-fps {
  position: absolute; top: 14px; right: 18px;
  color: var(--accent); font-size: 13px; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
#xr-back {
  position: absolute; bottom: 22px; left: 22px;
  display: none;                    /* only while a model is on stage */
  pointer-events: auto;
  background: rgba(10,16,22,.72); color: #9fe8e2;
  border: 1px solid rgba(41,224,210,.4); border-radius: 999px;
  padding: 10px 18px; font-size: 14px; font-weight: 600;
}
body.in-view #xr-back { display: block; }
#xr-toast {
  position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%);
  color: #ffd166; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,.8);
  opacity: 0; transition: opacity .25s;
}

/* attribution + settings */
.card .credit {
  margin-top: 2px;
  font-size: 11px;
  color: #8fa3b0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#settings-row {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  color: #8fa3b0;
}
.setting { display: flex; gap: 5px; align-items: center; }
.setting input[type="number"] {
  width: 52px;
  background: #10161d;
  border: 1px solid #233;
  border-radius: 6px;
  color: #d7e2ea;
  padding: 2px 4px;
}