/* V115 — compact auth, cinematic artwork, instant rating and emoji picker. */

/* Compact authentication: the form is a focused card, not a full-width panel. */
.auth-section {
  min-height: calc(100svh - 220px);
  padding: clamp(32px, 6vh, 68px) 0 72px !important;
  display: grid;
  align-items: start;
}
.auth-section .auth-card.container {
  width: min(460px, calc(100% - 28px)) !important;
  max-width: 460px !important;
  margin-inline: auto !important;
  padding: 26px !important;
  border-radius: 22px !important;
  background: linear-gradient(155deg, rgba(16, 31, 49, .98), rgba(7, 18, 31, .98)) !important;
  border: 1px solid rgba(82, 166, 231, .22) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28) !important;
}
.auth-section .auth-card-register.container { max-width: 500px !important; }
.auth-card h1 { margin: 0 0 6px !important; font-size: clamp(23px, 4vw, 30px) !important; line-height: 1.12 !important; }
.auth-card .auth-sub { margin: 0 0 20px !important; font-size: 13px !important; }
.auth-card .form { gap: 13px !important; }
.auth-card .form label { gap: 6px !important; }
.auth-card .form label > span { font-size: 11px !important; letter-spacing: .03em; }
.auth-card input { min-height: 44px !important; height: 44px !important; padding: 0 13px !important; border-radius: 12px !important; }
.auth-card .password-field input { padding-right: 46px !important; }
.auth-card .btn-block { min-height: 44px !important; margin-top: 2px !important; }
.auth-card .auth-form-actions { min-height: 20px; margin: -2px 0 1px !important; }
.auth-card .auth-switch { margin: 17px 0 0 !important; font-size: 12px !important; }

/* High-quality uploaded 16:9 artwork stays readable and cinematic. */
.home-showcase-backdrop,
.release-cinematic-backdrop {
  background-position: center 28% !important;
  background-size: cover !important;
  filter: blur(.7px) saturate(1.02) contrast(1.03) !important;
  transform: scale(1.018) !important;
}
.home-showcase-slide.is-active .home-showcase-backdrop { transform: scale(1.018) !important; will-change: opacity, transform; }
.release-cinematic-backdrop { will-change: transform; }
.home-showcase-slide::before {
  background:
    linear-gradient(90deg, rgba(3, 8, 16, .98) 0%, rgba(3, 9, 18, .9) 34%, rgba(3, 9, 18, .42) 65%, rgba(3, 8, 16, .22) 100%),
    linear-gradient(0deg, rgba(3, 8, 16, .88) 0%, transparent 57%) !important;
}
.home-showcase-slide.is-poster-fallback .home-showcase-backdrop {
  opacity: .58 !important;
  background-position: center 22% !important;
  background-size: cover !important;
  filter: blur(4px) saturate(.92) contrast(1.04) !important;
  transform: scale(1.055) !important;
}
.home-showcase-slide.is-poster-fallback.is-active .home-showcase-backdrop { transform: scale(1.055) !important; }
.home-showcase-slide.is-poster-fallback::before {
  background:
    linear-gradient(90deg, rgba(3, 8, 16, .99) 0%, rgba(3, 9, 18, .94) 39%, rgba(3, 9, 18, .48) 72%, rgba(3, 8, 16, .36) 100%),
    linear-gradient(0deg, rgba(3, 8, 16, .9) 0%, transparent 60%) !important;
}
.home-showcase-slide { contain: layout paint; }
.home-showcase-content { max-width: min(650px, 62%) !important; }
.home-showcase-content h1 { text-wrap: balance; }

/* Release card uses the same cinematic background and a more confident poster. */
.release-page .release-cinematic-hero {
  min-height: 540px !important;
  grid-template-columns: 240px minmax(0, 1fr) !important;
  gap: 36px !important;
  padding: 120px 38px 36px !important;
}
.release-page .release-cinematic-hero .release-hero-poster {
  width: 240px !important;
  max-width: 240px !important;
}
.release-page .release-cinematic-hero .release-hero-poster img {
  aspect-ratio: 2 / 3;
  object-fit: cover;
  box-shadow: 0 24px 52px rgba(0, 0, 0, .38) !important;
}
.release-cinematic-hero::before {
  background:
    linear-gradient(90deg, rgba(4, 10, 19, .96) 0%, rgba(4, 10, 19, .84) 35%, rgba(4, 10, 19, .32) 72%, rgba(4, 10, 19, .23) 100%),
    linear-gradient(0deg, rgba(4, 10, 19, .94) 0%, transparent 66%) !important;
}
.release-cinematic-hero.is-poster-fallback .release-cinematic-backdrop {
  opacity: .55 !important;
  background-position: center 22% !important;
  background-size: cover !important;
  filter: blur(4px) saturate(.9) contrast(1.05) !important;
  transform: scale(1.055) !important;
}
.release-page .release-cinematic-hero.is-poster-fallback::before {
  background:
    linear-gradient(90deg, rgba(3, 9, 17, .98) 0%, rgba(5, 12, 22, .91) 41%, rgba(5, 12, 22, .45) 76%, rgba(3, 9, 17, .42) 100%),
    linear-gradient(0deg, rgba(3, 9, 17, .96), transparent 64%) !important;
}

/* A click on a star is the complete rating action. */
.rate-card .rate-form-instant { gap: 10px !important; }
.rate-card .score-picker-stars {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px !important;
}
.rate-card .score-picker-stars label { min-width: 0 !important; cursor: pointer; }
.rate-card .score-picker-stars label span {
  min-height: 45px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  color: #66778c !important;
  background: rgba(14, 29, 47, .88) !important;
  border: 1px solid rgba(113, 164, 205, .16) !important;
  transition: transform .18s ease, color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.rate-card .score-picker-stars label span i { font-size: 20px !important; }
.rate-card .score-picker-stars label span b { display: none !important; }
.rate-card .score-picker-stars label.is-filled span,
.rate-card .score-picker-stars label:has(~ label:hover) span,
.rate-card .score-picker-stars label:hover span {
  color: #ffc844 !important;
  background: rgba(255, 190, 46, .11) !important;
  border-color: rgba(255, 198, 65, .42) !important;
  box-shadow: 0 8px 22px rgba(255, 174, 28, .1) !important;
}
.rate-card .score-picker-stars label:hover span { transform: translateY(-2px) scale(1.035); }
.rating-instant-status {
  min-height: 16px;
  margin: 0 !important;
  color: #8294a9 !important;
  font-size: 10px !important;
  line-height: 1.45;
  text-align: center;
}
.rate-form-instant.is-saving .score-picker-stars { opacity: .68; pointer-events: none; }

/* One compact button opens a real picker instead of five permanent emoji buttons. */
.comment-emoji-picker { position: relative; z-index: 8; width: max-content; margin-top: 10px; }
.comment-emoji-trigger {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  color: #93a7bc;
  background: rgba(11, 25, 41, .9);
  border: 1px solid rgba(102, 158, 204, .18);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}
.comment-emoji-trigger:hover,
.comment-emoji-trigger[aria-expanded="true"] { color: #fff; border-color: rgba(44, 165, 248, .52); background: rgba(30, 126, 197, .18); }
.comment-emoji-trigger i { color: #40b6ff; font-size: 15px; }
.comment-emoji-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 9px);
  width: min(340px, calc(100vw - 42px));
  padding: 12px;
  border: 1px solid rgba(70, 167, 237, .3);
  border-radius: 17px;
  background: rgba(6, 17, 30, .985);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .46), 0 0 0 1px rgba(255,255,255,.025) inset;
  backdrop-filter: blur(16px);
}
.comment-emoji-popover-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 3px 9px; }
.comment-emoji-popover-head strong { font-size: 13px; }
.comment-emoji-popover-head small { color: #70859b; font-size: 9px; }
.comment-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  max-height: 210px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.comment-emoji-grid button {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  transition: transform .14s ease, background-color .14s ease;
}
.comment-emoji-grid button:hover { transform: scale(1.16); background: rgba(49, 160, 238, .16); }

@media (max-width: 900px) {
  .release-page .release-cinematic-hero {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    gap: 25px !important;
    padding: 104px 26px 28px !important;
    min-height: 500px !important;
  }
  .release-page .release-cinematic-hero .release-hero-poster { width: 190px !important; max-width: 190px !important; }
}

@media (max-width: 680px) {
  .auth-section { min-height: auto; padding: 24px 0 48px !important; }
  .auth-section .auth-card.container,
  .auth-section .auth-card-register.container { width: calc(100% - 20px) !important; padding: 20px 17px !important; border-radius: 18px !important; }
  .auth-card h1 { font-size: 23px !important; }

  .home-showcase-content { max-width: 100% !important; }
  .home-showcase-slide.is-poster-fallback .home-showcase-backdrop {
    height: 62%;
    filter: blur(3px) saturate(.92) !important;
    transform: scale(1.045) !important;
  }
  .release-page .release-cinematic-hero {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 250px 16px 20px !important;
  }
  .release-page .release-cinematic-hero .release-hero-poster {
    width: 132px !important;
    max-width: 132px !important;
  }
  .release-cinematic-hero .release-cinematic-backdrop,
  .release-cinematic-hero.is-poster-fallback .release-cinematic-backdrop {
    width: 100%;
    height: 315px;
    background-position: center 20% !important;
    background-size: cover !important;
  }
  .release-cinematic-hero.is-poster-fallback .release-cinematic-backdrop { filter: blur(3px) saturate(.9) !important; transform: scale(1.045) !important; }
  .release-page .release-cinematic-hero::before,
  .release-page .release-cinematic-hero.is-poster-fallback::before {
    background: linear-gradient(0deg, rgba(3, 9, 17, .99) 31%, rgba(3, 9, 17, .78) 63%, rgba(3, 9, 17, .08)) !important;
  }
  .comment-emoji-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .comment-emoji-grid button { width: 32px; height: 32px; font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-showcase-backdrop,
  .release-cinematic-backdrop,
  .rate-card .score-picker-stars label span,
  .comment-emoji-grid button { transition: none !important; }
}