/* PuzzleX table discovery: the "find a table" lookup, the live/open board, and
   the owner's discovery controls. All discovery styling lives here so style.css
   stays untouched. Warm PuzzleX look, mobile first (verified at 390px). The LIVE
   accent is a warm red, kept distinct from the amber brand accent. */

:root {
  --dsc-live: #e2604a;
  --dsc-live-soft: rgba(226, 96, 74, .16);
}

/* ---- lookup box ---- */
/* the card's texture needs overflow:hidden, but that clips the search dropdown
   to a sliver — let THIS card (and only this one) spill so results are visible */
.landing .sx-card.discover-card { overflow: visible; margin-top: 18px; }
.lookup-wrap { position: relative; margin-top: 12px; }
.lookup-wrap input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sx-border2);
  border-radius: 12px;
  background: rgba(0, 0, 0, .25);
  color: var(--sx-text);
  font-size: 1rem;
  transition: border-color var(--sx-dur-fast) var(--sx-ease-out),
              box-shadow var(--sx-dur-fast) var(--sx-ease-out);
}
.lookup-wrap input::placeholder { color: var(--sx-muted2); }
.lookup-wrap input:focus {
  outline: none;
  border-color: var(--sx-accent);
  box-shadow: 0 0 0 3px var(--sx-accent-soft);
}

.lookup-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--sx-border2);
  border-radius: 14px;
  background: var(--sx-panel2, rgba(45, 32, 21, .98));
  backdrop-filter: blur(10px);
  box-shadow: var(--sx-shadow, 0 18px 44px rgba(0, 0, 0, .5));
  max-height: 60vh;
  overflow-y: auto;
  transform-origin: top center;
  animation: dsc-pop var(--sx-dur-quick, .18s) var(--sx-ease-out) both;
}
.lookup-results.show { display: flex; }
@keyframes dsc-pop {
  from { opacity: 0; transform: scale(.96) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.lookup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--sx-text);
  text-decoration: none;
  transition: background var(--sx-dur-fast) var(--sx-ease-out);
}
.lookup-item:hover { background: var(--sx-accent-soft); }
.lookup-item:active { transform: scale(.985); }
.lookup-empty {
  padding: 12px 12px;
  color: var(--sx-muted);
  font-size: .88rem;
}

/* ---- avatars + shared bits (used in the lookup list and the board) ---- */
.dsc-av {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--sx-border2);
  background: var(--sx-surface2);
}
.dsc-av-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--sx-accent);
  font-size: .95rem;
}
.dsc-name {
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dsc-count {
  color: var(--sx-muted);
  font-size: .78rem;
  white-space: nowrap;
}
.lookup-item .dsc-name { flex: 1; min-width: 0; }

/* the LIVE pill + its pulsing warm-red dot */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--dsc-live-soft);
  color: var(--dsc-live);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .07em;
  border: 1px solid rgba(226, 96, 74, .32);
  white-space: nowrap;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dsc-live);
  box-shadow: 0 0 0 0 rgba(226, 96, 74, .55);
  animation: dsc-live-pulse 2s var(--sx-ease-in-out) infinite;
}
@keyframes dsc-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(226, 96, 74, .5); }
  70% { box-shadow: 0 0 0 6px rgba(226, 96, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 96, 74, 0); }
}

/* ---- the live & open board ---- */
.discover-board { margin-top: 20px; }
.discover-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 1.02rem;
  color: var(--sx-text);
}
.discover-rail-wrap{position:relative}
.discover-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:2px 2px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--sx-border2) transparent}
.discover-grid::-webkit-scrollbar{height:6px}
.discover-grid::-webkit-scrollbar-thumb{background:var(--sx-border2);border-radius:999px}
.rail-arrow{position:absolute;top:calc(50% - 24px);z-index:5;width:38px;height:38px;border-radius:50%;display:none;place-items:center;cursor:pointer;font-size:20px;color:var(--sx-text);border:1px solid var(--sx-border2);background:rgba(20,13,8,.88);backdrop-filter:blur(4px);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.rail-arrow.prev{left:-6px} .rail-arrow.next{right:-6px}
@media (hover:hover){ .discover-rail-wrap:hover .rail-arrow{display:grid} }
.dsc-card2{flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start;position:relative;display:block;border:1px solid var(--sx-border);border-radius:16px;overflow:hidden;background:var(--sx-surface);cursor:pointer;text-decoration:none;color:var(--sx-text);transition:transform var(--sx-dur-fast) var(--sx-ease-out),border-color var(--sx-dur-fast) var(--sx-ease-out),box-shadow var(--sx-dur-fast) var(--sx-ease-out)}
.dsc-card2:hover{transform:translateY(-3px);border-color:var(--sx-accent);box-shadow:0 14px 34px rgba(0,0,0,.42)}
@media (max-width:640px){ .dsc-card2{flex:0 0 80%} }
.dsc-thumb{position:relative;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:var(--sx-surface2)}
.dsc-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,8,5,.9) 3%,rgba(12,8,5,.25) 44%,transparent 70%)}
.dsc-live-badge{position:absolute;top:8px;right:8px;z-index:2}
.dsc-who{position:absolute;left:11px;right:11px;bottom:10px;z-index:2;display:flex;align-items:center;gap:8px}
.dsc-who .dsc-av{width:28px;height:28px;border:1.5px solid rgba(255,255,255,.55)}
.dsc-who .dsc-name{font-size:.92rem;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.dsc-foot{display:flex;align-items:center;gap:8px;padding:9px 12px}
.dsc-foot .dsc-count{flex:1}
.dsc-watch2{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;color:var(--dsc-live);text-decoration:none;padding:4px 9px;border-radius:8px;border:1px solid rgba(226,96,74,.3);background:var(--dsc-live-soft);cursor:pointer;transition:background var(--sx-dur-fast) var(--sx-ease-out)}
.dsc-watch2:hover{background:rgba(226,96,74,.26)}
.open-pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:var(--sx-accent-soft);color:var(--sx-accent);font-size:.64rem;font-weight:800;letter-spacing:.08em;border:1px solid var(--sx-border2);white-space:nowrap}

/* ---- the owner's discovery controls (on the "your own table" panel) ---- */
.discovery-controls {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sx-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dsc-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.dsc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.dsc-switch-track {
  flex: 0 0 auto;
  width: 40px;
  height: 23px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--sx-border2);
  transition: background var(--sx-dur-fast) var(--sx-ease-out);
  position: relative;
}
.dsc-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--sx-muted);
  transition: transform var(--sx-dur-quick, .18s) var(--sx-spring, cubic-bezier(.34, 1.56, .64, 1)),
              background var(--sx-dur-fast) var(--sx-ease-out);
}
.dsc-switch input:checked + .dsc-switch-track { background: var(--sx-accent-soft); border-color: var(--sx-accent); }
.dsc-switch input:checked + .dsc-switch-track .dsc-switch-thumb { transform: translateX(17px); background: var(--sx-accent); }
.dsc-switch input:focus-visible + .dsc-switch-track { box-shadow: 0 0 0 3px var(--sx-accent-soft); }
.dsc-switch-label { font-size: .9rem; color: var(--sx-text); }

.dsc-code-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sx-border2);
  border-radius: 10px;
  background: rgba(0, 0, 0, .25);
  color: var(--sx-text);
  font-family: var(--sx-mono, ui-monospace, monospace);
  font-size: .9rem;
}
.dsc-code-field input:focus { outline: none; border-color: var(--sx-accent); }

.btn.btn-sm { padding: 7px 14px; font-size: .84rem; align-self: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .lookup-results { animation: none; }
  .live-dot { animation: none; }
  .discover-grid { scroll-behavior: auto; }
  .dsc-card2:hover, .lookup-item:active { transform: none; }
}