:root {
  /* Overridden per-book from app.js (book.accent_color, set in the Admin
     app's book view) once the book loads — this is just the fallback shown
     before that fetch resolves. */
  --c2l-accent: #2f6fed;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #000;
}

a-scene {
  position: absolute;
  inset: 0;
}

.c2l-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 40px;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.c2l-hidden {
  opacity: 0;
  pointer-events: none;
}

.c2l-card {
  background: rgba(20, 20, 20, 0.75);
  color: #fff;
  padding: 14px 22px;
  border-radius: 14px;
  text-align: center;
  backdrop-filter: blur(6px);
  max-width: 80vw;
}

.c2l-card p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

/* Aiming reticle — a purely visual viewfinder, centered on screen,
   independent of #c2l-scan-hint's own bottom-aligned flex layout (it's
   position:fixed so it ignores that flow), but still a child of it so it
   shows/hides for free via the existing show()/hide() opacity toggle. */
.c2l-reticle {
  /* Square (1:1) to match the trigger image crop + video plane aspect ratio
     exactly (see admin/js/image-target.js and webar/src/app.js) — this is
     what the tracker is actually keying off, so the aiming guide should show
     the same shape. */
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(62vw, 300px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -60%);
  pointer-events: none;
}

.c2l-reticle-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 3px solid var(--c2l-accent, #2f6fed);
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}

.c2l-tl { top: 0; left: 0; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.c2l-tr { top: 0; right: 0; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.c2l-bl { bottom: 0; left: 0; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.c2l-br { bottom: 0; right: 0; border-left: none; border-top: none; border-radius: 0 0 6px 0; }

.c2l-unmute {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10001;
  background: rgba(20, 20, 20, 0.8);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
}

.c2l-library-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 10001;
  background: rgba(20, 20, 20, 0.8);
  color: #fff;
  border: 1.5px solid var(--c2l-accent, #2f6fed);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
}

.c2l-overlay-panel {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
}

.c2l-panel-inner {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.c2l-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  margin-bottom: 12px;
}

.c2l-panel-head h2 {
  margin: 0;
  font-size: 18px;
  color: var(--c2l-accent, #2f6fed);
}

.c2l-icon-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
}

.c2l-library-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.c2l-library-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.c2l-library-item:hover,
.c2l-library-item:focus-visible {
  border-color: var(--c2l-accent, #2f6fed);
  background: rgba(255, 255, 255, 0.1);
}

.c2l-library-item:active {
  transform: scale(0.97);
}

.c2l-library-thumb-wrap {
  position: relative;
}

.c2l-library-item img,
.c2l-library-item-noimg {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  background: #333;
  display: block;
}

.c2l-library-thumb-wrap::after {
  /* A small play-icon overlay, centered on the thumbnail, hinting these
     grid items are playable videos rather than plain images. Pure CSS
     (a triangle via border tricks) so no extra image asset is needed. */
  content: '';
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 2px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

.c2l-player-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10003;
}

.c2l-player-title {
  position: absolute;
  top: 20px;
  left: 16px;
  right: 60px;
  z-index: 10003;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

#c2l-player-video {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Swipe up/down to move between videos is wired on this element in
     app.js — this just stops the browser's own vertical scroll/refresh
     gestures from fighting that swipe on touch devices. */
  touch-action: pan-x;
}

.c2l-player-nav {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  z-index: 10003;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
}

.c2l-nav-btn {
  pointer-events: auto;
  background: rgba(20, 20, 20, 0.8);
  color: #fff;
  border: 1.5px solid var(--c2l-accent, #2f6fed);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}