/* ============================================================================
   28-highlight-reader.css  (v12.076)
   In-app highlight clip reader — full-screen overlay that slides in from the
   right (mirrors news reader, css/24). Editorial dark, single lavender accent.
   Dark-mode only. Capacitor iOS primary target.
   ============================================================================ */

.highlight-reader-page {
  position: fixed;
  inset: 0;
  z-index: 7350;
  background: #0a0a0c;
  display: flex;
  flex-direction: column;
  transform: translate3d(100%, 0, 0);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  overscroll-behavior: none;
}
.highlight-reader-page.is-open {
  transform: translate3d(0, 0, 0);
}

/* ---- topbar ---- */
.highlight-reader-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.highlight-reader-back {
  appearance: none;
  border: none;
  background: none;
  padding: 6px;
  margin: -6px;
  color: #a78bfa;
  cursor: pointer;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.highlight-reader-back svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.highlight-reader-topbar-title {
  flex: 1 1 auto;
  min-width: 0;
}
.highlight-reader-topbar-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a78bfa;
  line-height: 1;
  margin-bottom: 2px;
}
.highlight-reader-game-name {
  font-size: 15px;
  font-weight: 600;
  color: #f5f5f7;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* ---- scrollable body ---- */
.highlight-reader-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- 16:9 embed ---- */
.highlight-reader-embed-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
  overflow: hidden;
}
.highlight-reader-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ---- meta section ---- */
.highlight-reader-meta {
  padding: 18px 18px 32px;
}

.highlight-reader-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.highlight-reader-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: #1e2028;
  display: block;
}

.highlight-reader-user-info {
  flex: 1 1 auto;
  min-width: 0;
}
.highlight-reader-user-name {
  font-size: 14px;
  font-weight: 600;
  color: #f5f5f7;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.highlight-reader-user-action {
  font-size: 13px;
  color: rgba(255,255,255,0.48);
  letter-spacing: 0;
  line-height: 1.3;
  margin-top: 2px;
}

.highlight-reader-game-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(167,139,250,0.10);
  border: 1px solid rgba(167,139,250,0.22);
  border-radius: 999px;
  padding: 3px 10px 3px 4px;
  flex: 0 0 auto;
  max-width: 150px;
  -webkit-tap-highlight-color: transparent;
}
.highlight-reader-game-poster {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
  background: #1e2028;
  flex: 0 0 auto;
}
.highlight-reader-game-tag-name {
  font-size: 12px;
  font-weight: 500;
  color: #c4b5fd;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.highlight-reader-caption {
  font-size: 15px;
  color: rgba(255,255,255,0.86);
  letter-spacing: 0;
  line-height: 1.55;
  margin-bottom: 20px;
  word-break: break-word;
}

/* ---- actions row ---- */
.highlight-reader-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 4px;
}

.highlight-reader-action-btn {
  appearance: none;
  border: none;
  background: none;
  color: rgba(255,255,255,0.52);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 0;
  -webkit-tap-highlight-color: transparent;
}
.highlight-reader-action-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.highlight-reader-action-btn:active { opacity: 0.6; }

.highlight-reader-action-btn.is-liked { color: #f43f5e; }
.highlight-reader-action-btn.is-liked svg { fill: #f43f5e; stroke: #f43f5e; }

.highlight-reader-share-btn { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .highlight-reader-page { transition: none !important; }
}