/* Pic-O-Pine Public UI (Canonical) + Phase 2.1/2.3 Polish
   - Mobile-first
   - Cinematic wrapper
   - Thumb-friendly
   - Balanced A/B
   - Report modal
   - Results contrast hardened
   - Phase 2.1: selection state, voted state, winner glow, pulse, reveal
   - Phase 2.3: empty state + image fallback + load more styling
*/

:root{
  --pop-bg: #0b1020;
  --pop-bg2: #070b16;
  --pop-card: rgba(255,255,255,0.06);
  --pop-card-border: rgba(255,255,255,0.10);
  --pop-text: rgba(255,255,255,0.92);
  --pop-muted: rgba(255,255,255,0.62);
  --pop-soft: rgba(255,255,255,0.10);
  --pop-danger: #ff5a6a;
  --pop-ok: #33d17a;
  --pop-radius: 16px;
  --pop-radius-sm: 12px;
  --pop-shadow: 0 14px 40px rgba(0,0,0,0.35);
  --pop-shadow2: 0 22px 70px rgba(0,0,0,0.55);

  /* Phase 2.1 accents */
  --pop-accent: rgba(255,255,255,0.22);
  --pop-accent-strong: rgba(255,255,255,0.32);
  --pop-glow: 0 0 0 1px rgba(255,255,255,0.14), 0 16px 60px rgba(0,0,0,0.45);
}

.pop-shell{
  margin: 18px auto;
  padding: 0 14px;
}

.pop-shell__inner{
  max-width: 980px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--pop-shadow2);
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 55%),
    radial-gradient(900px 500px at 80% 20%, rgba(255,255,255,0.06), rgba(255,255,255,0.00) 60%),
    linear-gradient(180deg, var(--pop-bg), var(--pop-bg2));
  color: var(--pop-text);
}

.pop-shell__head{
  padding: 18px 18px 8px 18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}

.pop-brand{
  font-weight: 800;
  letter-spacing: 0.3px;
  font-size: 16px;
  color: rgba(255,255,255,0.92);
}

.pop-shell__title{
  font-size: 13px;
  color: var(--pop-muted);
  font-weight: 600;
}

.pop-shell__body{
  padding: 10px 18px 18px 18px;
}

/* Feed toggle */
.pop-feed-toggle{
  display:flex;
  gap: 8px;
  align-items:center;
}

.pop-toggle-btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 13px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.pop-toggle-btn:hover{
  background: rgba(255,255,255,0.12);
}

.pop-toggle-btn.is-active{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.18);
  font-weight: 800;
  color: rgba(255,255,255,0.95);
}

/* Core containers */
.pop-feed,
.pop-single{
  color: var(--pop-text);
}

.pop-feed{
  display: grid;
  gap: 14px;
}

/* Card */
.pop-card{
  background: var(--pop-card);
  border: 1px solid var(--pop-card-border);
  border-radius: var(--pop-radius);
  overflow: hidden;
  box-shadow: var(--pop-shadow);
  backdrop-filter: blur(10px);
}

.pop-card__head{
  padding: 12px 14px 10px 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.pop-title{
  font-size: 15px;
  line-height: 1.25;
  font-weight: 650;
  margin: 0;
}

.pop-meta{
  font-size: 12px;
  color: var(--pop-muted);
  margin-top: 4px;
}

/* A/B grid */
.pop-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px 14px 14px;
}

.pop-choice{
  position: relative;
  border-radius: var(--pop-radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  aspect-ratio: 3 / 4;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease, box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease;
}

.pop-choice:focus{
  outline: 2px solid rgba(255,255,255,0.25);
  outline-offset: 2px;
}

.pop-choice__img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
}

/* Phase 2.3 image fallback helper */
.pop-choice__img--fallback{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(900px 600px at 30% 20%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 55%),
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: rgba(255,255,255,0.55);
  font-size: 12px;
}

/* When <img> fails to load: JS adds pop-img-fallback on the .pop-choice button */
.pop-choice.pop-img-fallback{
  background:
    radial-gradient(900px 600px at 30% 20%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 55%),
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.pop-choice.pop-img-fallback::after{
  content: "Image unavailable";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color: rgba(255,255,255,0.55);
}

.pop-choice__label{
  position:absolute;
  top:10px;
  left:10px;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
}

.pop-choice__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.00) 55%);
  opacity: 0;
  transition: opacity 160ms ease;
}

.pop-choice:hover .pop-choice__overlay{
  opacity: 1;
}

.pop-tap{
  width:100%;
  text-align:center;
  font-size: 12px;
  color: rgba(255,255,255,0.92);
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
}

/* Phase 2.1 — selected + voted */
.pop-choice.is-selected{
  border-color: var(--pop-accent-strong);
  box-shadow: var(--pop-glow);
  transform: translateY(-1px);
}

/* Replace .pop-card.is-voted with .pop-card.pop-vote-lock */
.pop-card.pop-vote-lock .pop-choice{ cursor: default; }
.pop-card.pop-vote-lock .pop-choice:hover .pop-choice__overlay{ opacity: 1; }

/* (Remove) JS never adds .is-voted; pop-vote-lock is the real state */

/* Actions */
.pop-actions{
  padding: 0 14px 14px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.pop-link{
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px dashed rgba(255,255,255,0.25);
}
.pop-link:hover{
  border-bottom-color: rgba(255,255,255,0.55);
}

.pop-btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 13px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.pop-btn:hover{
  background: rgba(255,255,255,0.14);
}

.pop-btn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

.pop-btn--primary{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.18);
  font-weight: 700;
}

.pop-btn--primary:hover{
  background: rgba(255,255,255,0.22);
}

.pop-btn--ghost{
  background: rgba(255,255,255,0.08);
}

/* =========================================================
   Results (hardened) + Phase 2.1 visuals
   ========================================================= */
.pop-results{
  padding: 0 14px 14px 14px;
  display:none;
}

.pop-results.is-visible{
  display:block;
}

/* Contrast hardening */
.pop-card .pop-results{
  background: rgba(0,0,0,0.18);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  padding: 12px 14px 14px 14px;
}

.pop-card .pop-results,
.pop-card .pop-results *{
  color: var(--pop-text);
}

.pop-barrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top: 10px;
}

.pop-barlabel{
  font-size: 12px;
  color: var(--pop-muted);
  min-width: 72px;
}

.pop-barwrap{
  flex:1;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  overflow:hidden;
}

.pop-bar{
  height:100%;
  width:0%;
  background: rgba(255,255,255,0.35);
  transition: width 220ms ease, filter 220ms ease;
}

.pop-card .pop-bar[data-bar="a"]{ background: rgba(255,255,255,0.55); }
.pop-card .pop-bar[data-bar="b"]{ background: rgba(255,255,255,0.35); }

.pop-bar.is-winner{
  filter: brightness(1.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 0 22px rgba(255,255,255,0.18);
}
.pop-bar.is-tie{
  filter: brightness(1.05);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10);
}

.pop-pct{
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.95);
  min-width: 48px;
  text-align:right;
}

.pop-note{
  margin-top: 10px;
  font-size: 12px;
  color: var(--pop-muted);
}

/* Results reveal animation */
.pop-results.is-reveal{
  animation: popReveal 420ms ease;
}

@keyframes popReveal{
  from{ transform: translateY(6px); opacity: .55; }
  to{ transform: translateY(0); opacity: 1; }
}

/* Tap pulse animation */
.pop-pulse{
  animation: popPulse 520ms ease;
}

@keyframes popPulse{
  0%{ transform: translateY(0) scale(1); }
  40%{ transform: translateY(-1px) scale(1.02); }
  100%{ transform: translateY(0) scale(1); }
}

/* Errors + skeleton */
.pop-error{
  padding: 12px 14px;
  border: 1px solid rgba(255,90,106,0.35);
  background: rgba(255,90,106,0.12);
  color: rgba(255,255,255,0.92);
  border-radius: var(--pop-radius);
}

.pop-skeleton{
  padding: 14px;
  border-radius: var(--pop-radius);
  border: 1px solid var(--pop-card-border);
  background: rgba(255,255,255,0.05);
  box-shadow: var(--pop-shadow);
}

.pop-skel-line{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  margin-top: 10px;
}
.pop-skel-line:first-child{ margin-top:0; }

/* Phase 2.3 empty state */
.pop-empty{
  text-align:center;
  padding: 60px 20px;
  opacity: .92;
}
.pop-empty__icon{
  font-size: 48px;
  margin-bottom: 14px;
}
.pop-empty__title{
  font-size: 20px;
  font-weight: 700;
}
.pop-empty__text{
  font-size: 14px;
  opacity: .75;
  margin-top: 6px;
}

/* Phase 2.3: Load More block */
.pop-feed__more{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:20px;
}

#pop-load-more.is-loading,
.pop-btn.is-loading{
  opacity: .65;
  pointer-events:none;
}

/* Modal */
.pop-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}

.pop-modal.is-open{
  display:block;
}

.pop-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}

.pop-modal__panel{
  position: relative;
  max-width: 520px;
  margin: 8vh auto 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(1000px 500px at 20% 10%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 55%),
    linear-gradient(180deg, var(--pop-bg), var(--pop-bg2));
  color: var(--pop-text);
  box-shadow: var(--pop-shadow2);
}

.pop-modal__head{
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.pop-modal__title{
  font-weight: 800;
  font-size: 14px;
}

.pop-modal__x{
  appearance:none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  width: 36px;
  height: 32px;
  border-radius: 10px;
  cursor:pointer;
  font-size: 18px;
  line-height: 1;
}

.pop-modal__body{
  padding: 14px 16px;
}

.pop-field{
  margin-bottom: 12px;
}

.pop-label{
  display:block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
  margin-bottom: 6px;
}

.pop-input{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  padding: 10px 12px;
  font-size: 13px;
  outline: none;
}

.pop-input:focus{
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
}

.pop-modal__note{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  min-height: 16px;
}

.pop-modal__foot{
  padding: 12px 16px 16px 16px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

@media (min-width: 900px){
  .pop-feed{
    grid-template-columns: 1fr 1fr;
  }
}

.pop-create-shell {
  background: #111;
  padding: 40px 0;
}

.pop-create-inner {
  max-width: 720px;
  margin: 0 auto;
  background: #1a1a1a;
  padding: 32px;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}

.pop-create-inner h2 {
  margin-bottom: 24px;
}

.pop-create-shell .pop-field {
  margin-bottom: 18px;
}

.pop-create-shell .pop-field label{
  display:block;
  margin-bottom:6px;
  font-weight:600;
}

.pop-create-shell .pop-field input,
.pop-create-shell .pop-field select{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #333;
  background:#0e0e0e;
  color:#fff;
}

/* Replace with scoped version */
.pop-create-shell .pop-btn--primary{
  background:#ff6b00;
  color:#fff;
  border:none;
  padding:12px 20px;
  border-radius:8px;
  font-weight:600;
}
.pop-create-shell .pop-btn--primary:hover{ opacity:.9; }

/* (Remove) keep hover behavior controlled by each context (cinematic vs create form) */

.pop-badge[data-badge="new"]{ background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.25); }
.pop-badge[data-badge="trending"]{ background: rgba(168,85,247,.18); border-color: rgba(168,85,247,.25); }
.pop-badge[data-badge="hot"]{ background: rgba(249,115,22,.18); border-color: rgba(249,115,22,.25); }
.pop-badge[data-badge="votes"]{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }

/* Vote badge */

.pop-badge{
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  white-space: nowrap;
}

.pop-badge--voted{
  background: rgba(51,209,122,0.18);
  border-color: rgba(51,209,122,0.30);
  color: #33d17a;
}

.pop-badge--cta{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
}

.pop-badge[data-badge="voted"][data-badge-state="cta"]{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.pop-badge[data-badge="voted"][data-badge-state="voted"]{
  background: rgba(51,209,122,.14);
  border-color: rgba(51,209,122,.26);
}