/* Rotating hero backgrounds, raster mascots, mobile fixes.
   Slots .hb1-.hb4 in templates/index.html map to art/bg-{city,terminals,rain,circuit}.webp (+ -m mobile variants below). */
html { overflow-x: clip; }
body, .hero { position: relative; }
.site-header, .site-footer, main > :not(.hero-bg) { position: relative; z-index: 1; }

.hero-bg { position: absolute; inset: 0 0 auto 0; height: min(100vh, 900px); z-index: 0; overflow: hidden; pointer-events: none; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 14, 0) 0%, rgba(8, 8, 14, 0.3) 70%, #0b0b10 100%); }
.hero-bg .hb { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; filter: saturate(1.25) brightness(1.15); }
.hero-bg .hb-scan { position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.hero-bg .hb1 { background-image: url("art/bg-city.webp"); opacity: 1; }  /* eager on purpose: first-paint frame */
.bg-ready .hero-bg .hb { animation: hbfade 32s linear infinite; }
.bg-ready .hero-bg .hb1 { animation-delay: -1.5s; }
.bg-ready .hero-bg .hb2 { background-image: url("art/bg-terminals.webp"); animation-delay: 6.5s; }
.bg-ready .hero-bg .hb3 { background-image: url("art/bg-rain.webp"); animation-delay: 14.5s; }
.bg-ready .hero-bg .hb4 { background-image: url("art/bg-circuit.webp"); animation-delay: 22.5s; }
@keyframes hbfade { 0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; } 100% { opacity: 0; } }

.hero h1 { text-shadow: 0 0 18px rgba(255, 45, 124, 0.55), 0 0 42px rgba(0, 212, 255, 0.35); }
img.mascot { filter: drop-shadow(0 0 18px rgba(255, 45, 124, 0.45)) drop-shadow(0 0 30px rgba(0, 212, 255, 0.25)); }
.mascot-daemon { width: 58%; left: 21%; top: 16%; }
.mascot-puffer { width: 36%; }
.mascot-pennant { width: 34%; }
.mascot-dragonfly { width: 38%; }

.btn, .site-nav a, .linklike { min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 640px) {
  .hero-bg { height: 1050px; }  /* covers the stacked mobile hero only, not the whole page */
  .hero-bg .hb1 { background-image: url("art/bg-city-m.webp"); }
  .bg-ready .hero-bg .hb2 { background-image: url("art/bg-terminals-m.webp"); }
  .bg-ready .hero-bg .hb3 { background-image: url("art/bg-rain-m.webp"); }
  .bg-ready .hero-bg .hb4 { background-image: url("art/bg-circuit-m.webp"); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-ready .hero-bg .hb { animation: none; opacity: 0; }
  .hero-bg .hb1, .bg-ready .hero-bg .hb1 { opacity: 1; }
}

/* Readable hero copy over rotating backgrounds.
   Panel alpha 0.85 chosen so every text colour clears WCAG AA even over a pure-white
   pixel of the brightest frame (text 12.3:1, sub 9.4:1, pink-lite 4.75:1, green 10.4:1). */
.hero-copy {
  background: rgba(8, 8, 16, 0.85);
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 14px;
  padding: 1.1rem 1.1rem 1.3rem;
  box-shadow: 0 0 24px rgba(255, 45, 124, 0.18), inset 0 0 0 1px rgba(255, 45, 124, 0.12);
}
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .hero-copy { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
.hero-copy .hero-tag, .hero-copy .hero-sub, .hero-copy .hero-prompt { text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, 0.8); }
.hero-copy .hero-sub { color: #d4d4e4; }
.hero-copy .hero-tag .hl-red { color: #ff5c9a; }
@media (min-width: 900px) { .hero-copy { padding: 1.6rem 1.8rem 1.8rem; } }

/* --------------------------------------------------------------------------
 * ratings + comments: star widget, comment thread.
 * Mobile-first: tuned at 390px, no horizontal scroll anywhere.
 * ------------------------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.star-sym { color: #ff2d7c; }
.rating-badge { color: #00d4ff; margin: 0; }

.rating-panel {
  margin: 1.5rem 0;
  padding: 0.9rem;
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 10px;
  background: rgba(0, 212, 255, 0.04);
}

.rating-panel .rating-summary { margin: 0.2rem 0 0.6rem; }
.rating-panel h2 { margin-bottom: 0.3rem; }
.login-link { color: #ff2d7c; }

/* Star radios: 5 buttons >= 44px tap targets, works without JS
   (accessible via tab/arrow keys + space, exactly like native radios). */
.stars-fieldset {
  display: flex;
  flex-direction: row-reverse; /* hover/checked fills right-to-left */
  justify-content: flex-end;   /* with row-reverse this left-aligns the stars */
  gap: 0;
  max-width: 300px;
}
.stars-fieldset input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.stars-fieldset label {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #6e6e88;  /* >= 3:1 non-text contrast on #0b0b10 */
  cursor: pointer;
  user-select: none;
}
.stars-fieldset label:hover,
.stars-fieldset label:hover ~ label,
.stars-fieldset input:checked + label,
.stars-fieldset input:checked + label ~ label,
.stars-fieldset input:focus-visible + label {
  color: #ff2d7c;
  text-shadow: 0 0 12px rgba(255, 45, 124, 0.6);
}
.btn-rating {
  margin-top: 0.6rem;
  border-color: #ff2d7c;
  color: #ff2d7c;
}

/* Comment thread */
#comments { margin: 1.5rem 0; }
.comment-form textarea,
.comment-edit textarea {
  width: 100%;
  max-width: 100%;
  min-height: 88px; /* comfortable 3-line entry, no tiny tap field */
  box-sizing: border-box;
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 212, 255, 0.35);
  background: rgba(0, 212, 255, 0.04);
  color: inherit;
  font: inherit;
  resize: vertical;
}
.comment-form textarea:focus-visible,
.comment-edit textarea:focus-visible {
  outline: 2px solid #00d4ff;
  outline-offset: 1px;
}
.comment-form .btn-primary { margin-top: 0.5rem; }

.comments { list-style: none; padding: 0; margin: 1rem 0 0; }
.comment {
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.7rem;
  border: 1px solid rgba(255, 45, 124, 0.18);
  border-radius: 10px;
  background: rgba(255, 45, 124, 0.03);
}
.comment-meta { margin: 0 0 0.3rem; font-size: 0.85rem; }
.comment-author { color: #00d4ff; font-weight: 700; }
.comment-time { color: #8a8a9a; }
.comment-body { overflow-wrap: anywhere; margin-bottom: 0.2rem; }
.comment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(0, 212, 255, 0.2);
}
.comment-actions .btn {
  min-height: 44px;
  padding: 0 0.8rem;
  font-size: 0.85rem;
}
.comment-edit summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #00d4ff;
}
.comment-edit[open] { width: 100%; }
.comment-edit textarea { margin-bottom: 0.4rem; }

@media (min-width: 640px) {
  .comment-actions .btn { min-height: 44px; }
}

/* --------------------------------------------------------------------------
 * social sign-in + linked logins (mobile-first, text only, no logos).
 * ------------------------------------------------------------------------ */

.oauth-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  max-width: 420px;
}
.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;          /* tap target */
  padding: 0.3rem 1rem;
  text-align: center;
}

.logins-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 640px;
}
.logins-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  min-height: 44px;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 10px;
  background: rgba(0, 212, 255, 0.03);
}
.logins-row .linklike { min-height: 44px; }
.logins-name { display: flex; flex-direction: column; gap: 0.1rem; }