/* SORA Project V125 — release geometry, account connections and profile polish. */

/* Release hero: give semantic values real room instead of clipping them. */
.release-page .release-cinematic-hero .release-hero-info { min-width: 0 !important; }
.release-page .release-facts {
  grid-template-columns: repeat(3, minmax(78px, 1fr)) minmax(112px, 1.32fr) minmax(88px, .96fr) !important;
  width: 100% !important;
  max-width: none !important;
  overflow: hidden !important;
}
.release-page .release-fact {
  min-width: 0 !important;
  overflow: hidden !important;
  padding-inline: 9px !important;
}
.release-page .release-fact > strong {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.release-page .release-fact .country-value {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 11px !important;
  letter-spacing: -.01em !important;
}
.release-page .release-fact .country-flag { flex: 0 0 18px !important; }
.release-page .release-actions {
  display: grid !important;
  grid-template-columns: minmax(136px, 1.08fr) minmax(168px, 1.25fr) minmax(112px, .84fr) !important;
  gap: 8px !important;
}
.release-page .release-action-btn {
  min-width: 0 !important;
  padding-inline: 11px !important;
  gap: 7px !important;
}
.release-page .release-action-btn span {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: 10.8px !important;
}

/* V108-style position: title at the left, participant controls aligned right. */
.release-page .release-player-heading {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}
.release-page .release-player-heading .player-title { flex: 0 0 auto !important; }
.release-page .release-participant-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  flex: 0 1 500px !important;
  width: min(500px, 100%) !important;
  margin-left: auto !important;
  gap: 10px !important;
}
.release-page .release-participant-button {
  grid-template-columns: 52px minmax(0, 1fr) auto !important;
  min-height: 60px !important;
  padding: 8px 12px !important;
}
.release-page .release-participant-visual {
  width: 52px !important;
  min-width: 52px !important;
}
.release-page .release-participant-visual > span {
  width: 36px !important;
  height: 36px !important;
  flex-basis: 36px !important;
}
.release-page .release-participant-button-copy strong { font-size: 12.5px !important; }
.release-page .release-participant-button-copy small { font-size: 9.5px !important; }

/* Recommendation cards: metadata belongs to its title, not to an artificial baseline. */
.release-page .recommend-card { gap: 0 !important; }
.release-page .recommend-card > strong {
  display: -webkit-box !important;
  min-height: 0 !important;
  margin: 7px 0 0 !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  font-size: 11.5px !important;
  line-height: 1.28 !important;
}
.release-page .recommend-card > small {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 2px 5px !important;
  margin: 3px 0 0 !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: clip !important;
  font-size: 9.5px !important;
  line-height: 1.3 !important;
  color: #72869a !important;
}
.release-page .recommend-year {
  flex: 0 0 auto !important;
  color: #8da1b4 !important;
}
.release-page .recommend-genres {
  display: -webkit-box !important;
  min-width: 0 !important;
  flex: 1 1 80px !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
}
.release-page .recommend-genres::before { content: "· "; color: #3e779b; }

/* Comment composer: calm glass surface with one clear input hierarchy. */
.release-page .comments-block {
  background: linear-gradient(155deg, rgba(12, 25, 42, .98), rgba(7, 17, 30, .98)) !important;
}
.release-page .comment-form:not(.comment-reply-form) {
  position: relative !important;
  display: grid !important;
  gap: 0 !important;
  padding: 7px !important;
  overflow: visible !important;
  border: 1px solid rgba(69, 166, 236, .2) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 92% 0, rgba(38, 173, 244, .09), transparent 38%),
    rgba(3, 13, 24, .68) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 14px 40px rgba(0,0,0,.12) !important;
  transition: border-color .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1) !important;
}
.release-page .comment-form:not(.comment-reply-form):focus-within {
  border-color: rgba(49, 175, 247, .62) !important;
  box-shadow: 0 0 0 3px rgba(45, 165, 243, .08), 0 18px 45px rgba(0,0,0,.16) !important;
}
.release-page .comment-form:not(.comment-reply-form) textarea {
  min-height: 128px !important;
  margin: 0 !important;
  padding: 16px 16px 14px !important;
  resize: vertical !important;
  border: 0 !important;
  border-radius: 13px 13px 8px 8px !important;
  outline: 0 !important;
  background: rgba(2, 11, 21, .44) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}
.release-page .comment-form:not(.comment-reply-form) .comment-composer-footer {
  min-height: 52px !important;
  padding: 8px 8px 7px !important;
  border-top: 1px solid rgba(111, 166, 207, .1) !important;
}
.release-page .comment-form:not(.comment-reply-form) .comment-emoji-trigger,
.release-page .comment-form:not(.comment-reply-form) .comment-spoiler-chip > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  border-radius: 10px !important;
  border-color: rgba(97, 157, 201, .18) !important;
  background: rgba(17, 38, 59, .78) !important;
}
.release-page .comment-form:not(.comment-reply-form) .btn-primary {
  min-width: 116px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  box-shadow: 0 8px 22px rgba(30, 145, 236, .22) !important;
}

/* Avatar frame gallery: more depth and decoration without letters or extra labels. */
.avatar-frame-picker {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) !important;
  gap: 11px !important;
}
.avatar-frame-choice {
  position: relative !important;
  min-height: 148px !important;
  padding: 20px 8px 10px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(111, 170, 213, .13) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(53, 184, 255, .11), transparent 43%),
    linear-gradient(155deg, rgba(17, 37, 58, .92), rgba(7, 18, 31, .96)) !important;
  transition: transform .32s cubic-bezier(.16,1,.3,1), border-color .32s ease, box-shadow .32s ease !important;
}
.avatar-frame-choice::before,
.avatar-frame-choice::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
.avatar-frame-choice::before {
  width: 74px !important;
  height: 74px !important;
  top: 10px !important;
  left: 50% !important;
  transform: translate3d(-50%,0,0) !important;
  border: 1px solid rgba(104, 200, 255, .18) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 28px rgba(38, 163, 238, .09) !important;
}
.avatar-frame-choice::after {
  inset: auto 14px 7px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(75, 184, 249, .35), transparent) !important;
}
.avatar-frame-choice:hover {
  transform: translate3d(0,-3px,0) !important;
  border-color: rgba(72, 181, 247, .42) !important;
  box-shadow: 0 14px 35px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.04) !important;
}
.avatar-frame-choice:has(input:checked) {
  border-color: rgba(45, 174, 246, .78) !important;
  box-shadow: 0 0 0 2px rgba(45, 174, 246, .12), 0 15px 38px rgba(11, 105, 178, .2) !important;
}
.avatar-frame-choice .avatar-frame-preview {
  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  aspect-ratio: 1 !important;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.32)) !important;
}
.avatar-frame-choice small { margin-top: 10px !important; font-size: 9.5px !important; }

/* Decorative frames use shapes and light only: no generated letters or text marks. */
.avatar-frame::after {
  content: "" !important;
  right: -4px !important;
  bottom: -4px !important;
  width: 12px !important;
  height: 12px !important;
  border: 2px solid var(--surface) !important;
  background: radial-gradient(circle at 35% 30%, #fff 0 15%, var(--frame-ring) 18% 58%, transparent 62%) !important;
  box-shadow: 0 0 12px var(--frame-glow) !important;
}
.avatar-frame:not(.avatar-frame-strawhat)::before {
  content: "" !important;
  top: -15px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 14px !important;
  border: 1px solid color-mix(in srgb, var(--frame-ring) 70%, white) !important;
  border-radius: 5px 5px 11px 11px !important;
  clip-path: polygon(0 100%, 8% 30%, 29% 68%, 50% 0, 71% 68%, 92% 30%, 100% 100%) !important;
  background: linear-gradient(135deg, var(--frame-ring), rgba(255,255,255,.92) 50%, var(--frame-ring)) !important;
  color: transparent !important;
  filter: drop-shadow(0 5px 9px var(--frame-glow)) !important;
}
.avatar-frame-preview.avatar-frame:not(.avatar-frame-strawhat)::before {
  transform: translateX(-50%) scale(.82) !important;
}

/* OAuth / linked account UI. */
.profile-oauth-block { margin-top: 18px !important; padding-top: 16px !important; border-top: 1px solid rgba(112,164,205,.14) !important; }
.profile-oauth-head { display: grid !important; gap: 3px !important; margin-bottom: 10px !important; }
.profile-oauth-head strong { font-size: 13px !important; }
.profile-oauth-head small { color: #7890a7 !important; font-size: 10px !important; }
.profile-oauth-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 9px !important; }
.profile-oauth-card {
  display: grid !important;
  grid-template-columns: 38px minmax(0,1fr) 32px !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  padding: 9px !important;
  border: 1px solid rgba(112,164,205,.15) !important;
  border-radius: 14px !important;
  background: rgba(7,19,33,.72) !important;
}
.profile-oauth-card.is-connected { border-color: rgba(53,205,153,.33) !important; }
.profile-oauth-icon { display:grid !important; place-items:center !important; width:38px !important; height:38px !important; border-radius:12px !important; font-size:18px !important; background:#fff !important; color:#111827 !important; }
.profile-oauth-card.provider-vk .profile-oauth-icon { background:#2787f5 !important; color:#fff !important; }
.profile-oauth-card.provider-shikimori .profile-oauth-icon { background:#f4f1ea !important; color:#6b4f35 !important; }
.profile-oauth-copy { display:grid !important; gap:2px !important; min-width:0 !important; }
.profile-oauth-copy strong,.profile-oauth-copy small { overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.profile-oauth-copy strong { font-size:11px !important; }.profile-oauth-copy small { color:#7890a7 !important; font-size:8.5px !important; }
.profile-oauth-action { display:grid !important; place-items:center !important; width:32px !important; height:32px !important; padding:0 !important; border:1px solid rgba(89,166,218,.22) !important; border-radius:10px !important; background:rgba(29,70,101,.5) !important; color:#65c6ff !important; cursor:pointer !important; text-decoration:none !important; }
.profile-oauth-action.is-disconnect { color:#ff8e9c !important; }.profile-oauth-action.is-disabled { opacity:.42 !important; cursor:default !important; }

.auth-social-block { display:grid !important; gap:12px !important; margin:16px 0 14px !important; }
.auth-social-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:9px !important; }
.auth-social-button { display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; min-height:42px !important; border:1px solid rgba(113,163,202,.18) !important; border-radius:12px !important; background:#f7f9fc !important; color:#162231 !important; font-weight:800 !important; font-size:11px !important; text-decoration:none !important; transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease !important; }
.auth-social-button:hover { transform:translate3d(0,-2px,0) !important; box-shadow:0 10px 28px rgba(0,0,0,.2) !important; }
.auth-social-button.provider-vk { background:#2787f5 !important; color:#fff !important; }.auth-social-button.provider-shikimori { background:#f4f1ea !important; color:#6b4f35 !important; }
.auth-divider { display:flex !important; align-items:center !important; gap:10px !important; color:#6f8499 !important; font-size:9px !important; }.auth-divider::before,.auth-divider::after { content:"" !important; height:1px !important; flex:1 !important; background:rgba(112,159,197,.14) !important; }.auth-divider em { font-style:normal !important; }

@media (max-width: 1120px) {
  .release-page .release-player-heading { align-items: stretch !important; }
  .release-page .release-participant-actions { width: auto !important; flex: 1 1 auto !important; }
}
@media (max-width: 900px) {
  .release-page .release-facts { grid-template-columns: repeat(3,minmax(0,1fr)) !important; overflow:visible !important; }
  .release-page .release-actions { grid-template-columns: 1fr 1fr !important; }
  .release-page .release-support-btn { grid-column: 1 / -1 !important; }
  .profile-oauth-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 680px) {
  .release-page .release-player-heading { display:grid !important; grid-template-columns:1fr !important; }
  .release-page .release-participant-actions { margin-left:0 !important; width:100% !important; }
  .release-page .release-participant-button { grid-template-columns:58px minmax(0,1fr) auto !important; }
  .release-page .release-participant-visual { width:58px !important; min-width:58px !important; }
  .release-page .release-participant-visual > span { width:32px !important; height:32px !important; flex-basis:32px !important; }
  .release-page .release-actions { grid-template-columns:1fr !important; }
  .release-page .release-support-btn { grid-column:auto !important; }
  .auth-social-grid { grid-template-columns:1fr !important; }
  .avatar-frame-picker { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 440px) {
  .release-page .release-facts { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .release-page .release-participant-actions { grid-template-columns:1fr !important; }
  .release-page .comment-form:not(.comment-reply-form) textarea { min-height:112px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .avatar-frame-choice,.auth-social-button { transition:none !important; }
}