/* ============================================================
  GAME ABYSS - ROOT VARIABLES & BASE
  ============================================================ */

:root {
  /* Typography */
  --font-primary: 'Rubik', sans-serif;
  --font-secondary: 'Inter', sans-serif;
  --font-headings: 'Orbitron', sans-serif;

  /* Fluid type scale */
  --fs-body: clamp(0.98rem, 0.92rem + 0.35vw, 1.125rem);
  --fs-p: clamp(1rem, 0.98rem + 0.25vw, 1.25rem);
  --fs-meta: clamp(0.9rem, 0.86rem + 0.25vw, 1.05rem);
  --fs-h1: clamp(2rem, 1.6rem + 2vw, 3.4rem);
  --fs-h2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.6vw, 1.6rem);
  --fs-nav-brand: clamp(1.35rem, 1.15rem + 0.9vw, 1.8rem);
  --fs-nav-link: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  --fs-btn: clamp(0.9rem, 0.86rem + 0.25vw, 0.95rem);
  --fs-btn-sm: clamp(0.8rem, 0.76rem + 0.25vw, 0.85rem);
  --fs-card-title: clamp(1.2rem, 1.05rem + 0.8vw, 1.5rem);
  --fs-hero-sub: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem);
  --fs-footer-title: clamp(1rem, 0.95rem + 0.35vw, 1.3rem);
  --fs-footer-link: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
  --fs-error-sub: clamp(1.2rem, 1.05rem + 0.7vw, 1.75rem);

  /* Main color palette */
  --color-dark: #0a0a0f;
  --color-surface: #1a1a24;
  --color-primary: #ff6b35;
  --color-secondary: #4ecdc4;
  --color-text: #e8e8e8;

  /* Muted text (Bootstrap hook) */
  --color-text-muted: rgb(232 232 232 / 75%);
  --bs-secondary-color: var(--color-text-muted);
  --bs-secondary-color-rgb: 232, 232, 232;

  /* Layout */
  --radius: 0.8rem;
  --navbar-height: 72px;
  --hero-radius: 12px;

  /* Effects */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, #ff8c42 100%);
  --gradient-surface: linear-gradient(90deg, var(--color-surface) 0%, #0f0f18 100%);
  --gradient-highlight: linear-gradient(
    45deg,
    #ff6b35 0%,
    #ff8c42 25%,
    #ffa552 50%,
    #ff8c42 75%,
    #ff6b35 100%
  );
  --shadow-sm: 0 4px 15px rgb(0 0 0 / 40%);
  --shadow-md: 0 6px 25px rgb(255 107 53 / 40%);
  --shadow-lg: 0 10px 30px rgb(255 107 53 / 45%);
  --filter-glow-soft: drop-shadow(0 0 8px rgb(255 107 53 / 60%))
    drop-shadow(0 0 15px rgb(255 107 53 / 40%));
  --filter-glow-strong: drop-shadow(0 0 12px rgb(255 140 66 / 70%))
    drop-shadow(0 0 22px rgb(255 140 66 / 55%))
    drop-shadow(0 0 30px rgb(255 165 82 / 35%));
}

/* ------------------------------------------------------------
   GLOBAL RESET & BASE ELEMENTS
   ------------------------------------------------------------ */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: linear-gradient(135deg, var(--color-dark) 0%, #000 100%);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: 1.6;
  margin: 0;
  padding-top: var(--navbar-height);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #fff;
  font-family: var(--font-headings);
  font-weight: 700;
  letter-spacing: 1.5px;
  margin: 0 0 0.75rem;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

p {
  color: var(--color-text);
  font-family: var(--font-secondary);
  font-size: var(--fs-p);
  letter-spacing: 0.3px;
  margin: 0 0 1rem;
}

section {
  padding: 3rem 0;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

a {
  color: inherit;
  text-decoration: none;
  transition:
    color 0.3s ease,
    text-shadow 0.3s ease,
    transform 0.3s ease;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

main {
  min-height: 60vh;
}

hr {
  border-color: rgb(255 107 53 / 25%);
}

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */

/* Navbar */
.comp-navbar {
  background: var(--gradient-surface) !important;
  border-bottom: 2px solid var(--color-primary);
  box-shadow: 0 4px 20px rgb(0 0 0 / 45%);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.comp-navbar__brand {
  -webkit-text-fill-color: transparent;
  animation: ga-glow 3s ease-in-out infinite;
  background: var(--gradient-highlight);
  background-clip: text;
  background-size: 200% 200%;
  filter: var(--filter-glow-soft);
  font-family: var(--font-headings);
  font-size: var(--fs-nav-brand);
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition:
    filter 0.4s ease,
    letter-spacing 0.4s ease,
    transform 0.4s ease;
}

.comp-navbar__brand:hover {
  filter: var(--filter-glow-strong);
  letter-spacing: 4px;
  transform: scale(1.05);
}

.comp-navbar__link {
  background-color: transparent;
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-headings);
  font-size: var(--fs-nav-link);
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0 0.25rem;
  padding: 0.65rem 1rem;
  transition:
    background 0.3s,
    color 0.3s,
    text-shadow 0.3s,
    transform 0.3s;
}

.comp-navbar__link:hover,
.comp-navbar__link[aria-current='page'] {
  background-color: rgb(255 107 53 / 12%);
  color: var(--color-primary);
  text-shadow: 0 0 8px rgb(255 107 53 / 45%);
  transform: translateY(-2px);
}

.comp-navbar__toggler {
  border: 1px solid rgb(255 107 53 / 35%);
  border-radius: 0.375rem;
}

.comp-navbar__toggler:focus {
  box-shadow: 0 0 0 0.15rem rgb(255 107 53 / 35%);
}

.comp-navbar__newpost {
  align-items: center;
  box-shadow: 0 2px 8px rgb(255 107 53 / 18%);
  display: inline-flex;
  font-family: var(--font-headings);
  font-size: var(--fs-btn);
  font-weight: 700;
  gap: 0.5rem;
  letter-spacing: 1px;
  margin-left: 0.5rem;
  transition:
    background 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

.comp-navbar__newpost:hover {
  background: linear-gradient(135deg, #ff8c42 0%, var(--color-primary) 100%);
  box-shadow: 0 4px 16px rgb(255 107 53 / 30%);
  transform: translateY(-2px) scale(1.04);
}

/* Buttons */
.comp-button {
  align-items: center;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  gap: 0.35rem;
  justify-content: center;
  font-family: var(--font-headings);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0.55rem 1.6rem;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background 0.3s,
    border 0.3s,
    box-shadow 0.3s,
    color 0.3s,
    transform 0.3s;
}

.comp-button--sm {
  font-size: var(--fs-btn-sm);
  padding: 0.4rem 1rem;
}

.comp-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.comp-button--primary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.comp-button--primary:hover {
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
  color: #fff;
  transform: translateY(-3px);
}

.comp-button--outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.comp-button--outline:hover {
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
  color: #fff;
  transform: translateY(-3px);
}

.comp-button--danger-outline {
  border-color: #ff4d6d;
  color: #ff4d6d;
}

.comp-button--danger-outline:hover {
  background: #ff4d6d;
  box-shadow: 0 4px 18px rgb(255 77 109 / 35%);
  color: #fff;
}

/* Confirmation modal */
/* stylelint-disable selector-class-pattern, selector-id-pattern */
#gaConfirmModal .modal-content {
  background-color: var(--color-surface) !important;
  border: 2px solid rgb(255 107 53 / 60%) !important;
  border-radius: var(--radius);
  box-shadow:
    0 0 20px rgb(255 107 53 / 40%),
    var(--shadow-lg);
  color: var(--color-text);
}

#gaConfirmModal .modal-body {
  background-color: transparent !important;
}

#gaConfirmModal .comp-confirm-modal__title {
  color: #fff !important;
  font-family: var(--font-headings);
  font-size: var(--fs-card-title);
  font-weight: 700;
  letter-spacing: 1.5px;
}

#gaConfirmModal .comp-confirm-modal__body {
  color: var(--color-text-muted) !important;
  font-family: var(--font-secondary);
  font-size: var(--fs-p);
}
/* stylelint-enable selector-class-pattern, selector-id-pattern */

/* Pagination */
.comp-pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.comp-pagination__control,
.comp-pagination__page {
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  color: var(--color-primary);
  display: inline-flex;
  font-family: var(--font-headings);
  font-size: var(--fs-btn-sm);
  font-weight: 600;
  letter-spacing: 0.8px;
  min-width: 3rem;
  padding: 0.45rem 1.1rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s,
    color 0.3s,
    transform 0.3s;
}

.comp-pagination__pages {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}

.comp-pagination__control:hover,
.comp-pagination__page:hover {
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
  color: #fff;
  transform: translateY(-2px);
}

.comp-pagination__page--active {
  background: #b33d15;
  box-shadow: var(--shadow-md);
  color: #fff;
  cursor: default;
  pointer-events: none;
  transform: none;
}

.comp-pagination__control--disabled {
  border-color: rgb(255 107 53 / 40%);
  color: rgb(255 107 53 / 45%);
  cursor: not-allowed;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Home page posts sections
   ------------------------------------------------------------ */
.page-home-posts {
  position: relative;
  padding: 0.5rem 0 0;
}

.page-home-posts::after {
  background: linear-gradient(135deg, rgb(10 10 15 / 65%), rgb(26 26 36 / 80%));
  border-radius: var(--radius);
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.2s ease;
  z-index: 1;
}

/* stato loading come modifier BEM, non .is-loading */
.page-home-posts--loading::after {
  opacity: 0.65;
}

.page-home-posts__spinner {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.page-home-posts--loading .page-home-posts__spinner {
  opacity: 1;
}

/* niente .spinner-border: usa una tua classe */
.page-home-posts__spinner-border {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 0.35rem;
}

.page-home-posts__list {
  position: relative;
}

.page-home-posts__pagination {
  position: relative;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .page-home-posts::after,
  .page-home-posts__spinner {
    transition: none;
  }
}

/* Cards */
.comp-card {
  background-color: var(--color-surface);
  border: 2px solid var(--comp-card-border, rgb(255 107 53 / 20%));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    border-color 0.3s,
    box-shadow 0.3s,
    transform 0.3s;
}

.comp-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.comp-card__image {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

.comp-card__body {
  padding: 2rem;
}

.comp-card__title {
  color: var(--color-secondary);
  font-family: var(--font-headings);
  font-size: var(--fs-card-title);
  margin-bottom: 0.75rem;
}

.comp-card__text {
  color: var(--color-text);
  font-family: var(--font-secondary);
  font-size: var(--fs-p);
  line-height: 1.6;
}

/* Badges */
.comp-badge {
  align-items: center;
  box-shadow: var(--shadow-sm);
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: calc(var(--radius) / 1.5);
  font-size: 0.6rem;
  text-transform: uppercase;
}

.comp-badge--staff {
  background: linear-gradient(120deg, #a855f7 0%, #7c3aed 50%, #5b21b6 100%);
  border: 1px solid rgb(124 58 237 / 65%);
  color: #f3e8ff;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.comp-badge--superadmin {
  background: linear-gradient(120deg, #f8f1a1 0%, #f0c75e 45%, #d4af37 100%);
  border: 1px solid rgb(212 175 55 / 65%);
  color: #2f1a00;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-shadow: 0 1px 1px rgb(255 255 255 / 35%);
}

.comp-badge--featured {
  background: #ffc107;
  color: #111;
}

.comp-tag-badge {
  align-items: center;
  background: rgb(255 107 53 / 12%);
  border: 1px solid rgb(255 107 53 / 35%);
  color: var(--color-text);
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem 0.6rem;
  font-size: var(--fs-meta);
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s,
    text-shadow 0.3s;
}

.comp-tag-badge:hover,
.comp-tag-badge:focus-visible {
  background: rgb(255 107 53 / 20%);
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-shadow: 0 0 6px rgb(255 107 53 / 40%);
}

/* User label */
.comp-user-label {
  align-items: center;
  box-shadow: 0 2px 10px rgb(0 0 0 / 45%);
  display: inline-flex;
  gap: 0.35rem;
  letter-spacing: 0.6px;
  padding: 0.15rem 0.65rem;
  position: relative;
  text-transform: uppercase;
  isolation: isolate;
  border-radius: 999px;
  font-family: var(--font-secondary);
  font-size: 0.8rem;
}

.comp-user-label__name {
  color: inherit;
  font-weight: 600;
}

.comp-user-label--legendary {
  background: linear-gradient(120deg, #f8f1a1 0%, #f0c75e 45%, #d4af37 100%);
  box-shadow:
    0 0 18px rgb(255 215 128 / 35%),
    0 6px 14px rgb(0 0 0 / 45%);
  color: #2f1a00;
}

.comp-user-label--epic {
  background: linear-gradient(120deg, #a855f7 0%, #7c3aed 50%, #5b21b6 100%);
  box-shadow:
    0 0 16px rgb(168 85 247 / 25%),
    0 6px 14px rgb(0 0 0 / 45%);
  color: #f3e8ff;
}

.comp-user-label--common {
  background: linear-gradient(120deg, #b5f3c1 0%, #4ade80 50%, #15803d 100%);
  box-shadow:
    0 0 12px rgb(74 222 128 / 25%),
    0 6px 12px rgb(0 0 0 / 40%);
  color: #062d14;
}

/* Footer */
.comp-footer {
  background: var(--gradient-surface);
  border-top: 2px solid var(--color-primary);
  color: var(--color-text);
  margin-top: 3rem;
  padding: 2.5rem 0;
}

.comp-footer__title {
  color: var(--color-primary);
  font-family: var(--font-headings);
  font-size: var(--fs-footer-title);
  letter-spacing: 1.5px;
  margin-bottom: 1rem;
}

.comp-footer__link {
  align-items: center;
  color: var(--color-text);
  display: inline-flex;
  gap: 0.35rem;
  transition:
    color 0.3s,
    letter-spacing 0.3s,
    text-shadow 0.3s,
    transform 0.3s;
  font-size: var(--fs-footer-link);
  font-weight: 500;
}

.comp-footer__link:hover {
  color: var(--color-primary);
  letter-spacing: 1.5px;
  text-shadow: 0 0 10px rgb(255 107 53 / 55%);
  transform: translateX(3px);
}

.comp-footer__social {
  align-items: center;
  border-radius: 50%;
  color: var(--color-text);
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  transition:
    color 0.3s,
    filter 0.3s,
    transform 0.3s;
  width: 2.5rem;
}

.comp-footer__social:hover {
  color: var(--color-primary);
  filter: var(--filter-glow-soft);
  transform: translateY(-3px) scale(1.1);
}

.comp-footer__description,
.comp-footer__meta {
  color: var(--color-text);
  font-size: var(--fs-meta);
  opacity: 0.75;
}

/* Forms */
.comp-form input,
.comp-form select,
.comp-form textarea {
  background-color: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 107 53 / 22%);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: var(--fs-meta);
  padding: 0.65rem 0.75rem;
  transition:
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}

/* Dark select styling */
.comp-form select,
.comp-form__select {
  appearance: none;
  background-color: rgb(255 255 255 / 6%);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-primary) 50%),
    linear-gradient(135deg, var(--color-primary) 50%, transparent 50%);
  background-position:
    calc(100% - 1.1rem) 55%,
    calc(100% - 0.8rem) 55%;
  background-repeat: no-repeat;
  background-size:
    6px 6px,
    6px 6px;
  border: 1px solid rgb(255 107 53 / 22%);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: var(--fs-meta);
  padding: 0.65rem 0.75rem;
  padding-right: 2rem;
  transition:
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
  width: 100%;
}

.comp-form select:focus,
.comp-form__select:focus {
  background-color: rgb(255 255 255 / 10%);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgb(255 107 53 / 25%);
  color: #fff;
  outline: none;
}

.comp-form select option {
  background: #1a1a24;
  color: var(--color-text);
}

.comp-form select optgroup {
  background: #14141b;
  color: var(--color-secondary);
}

.comp-form select:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

select::-ms-expand {
  display: none;
}

.comp-form [class~='form-check'] {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  margin-bottom: 1.15rem;
  min-height: 1.5rem;
  padding-left: 0;
  width: 100%;
}

.comp-form [class~='form-check-input'] {
  background-color: rgb(0 0 0 / 30%);
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 0.35rem;
  box-shadow: none;
  height: 1.15rem;
  margin: 0;
  flex-shrink: 0;
  width: 1.15rem;
}

.comp-form [class~='form-check-input']:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgb(255 107 53 / 25%);
}

.comp-form [class~='form-check-label'] {
  color: var(--color-text);
  font-family: var(--font-secondary);
  font-size: var(--fs-meta);
  letter-spacing: 0.2px;
  line-height: 1.4;
  margin: 0;
}

.comp-form input:focus,
.comp-form select:focus,
.comp-form textarea:focus {
  background-color: rgb(255 255 255 / 10%);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgb(255 107 53 / 25%);
  color: #fff;
  outline: none;
}

.comp-form input::placeholder,
.comp-form textarea::placeholder {
  color: rgb(231 229 229 / 60%);
}

.comp-form textarea {
  line-height: 1.5;
  min-height: 160px;
  resize: vertical;
}

.comp-form .comp-feedback {
  display: block;
  font-size: var(--fs-meta);
  margin-top: 0.4rem;
}

/* ============================================================
   PAGES
   ============================================================ */

/* Home hero */
.page-home-hero {
  overflow: hidden;
  padding: 3rem 0;
  position: relative;
}

.page-home-hero__title {
  animation: ga-slide-left 1s ease-out;
  color: var(--color-primary);
  font-size: var(--fs-h1);
  text-shadow:
    0 0 20px rgb(255 107 53 / 60%),
    0 0 40px rgb(255 107 53 / 30%);
}

.page-home-hero__subtitle {
  animation: ga-slide-left 1.2s ease-out;
  color: var(--color-secondary);
  font-weight: 500;
  font-size: var(--fs-hero-sub);
}

.page-home-hero__image {
  animation: ga-fade-scale 1.5s ease-out;
  border-radius: var(--hero-radius);
  filter: drop-shadow(0 2px 10px rgb(255 107 53 / 40%));
  max-height: 400px;
  object-fit: contain;
  transition:
    filter 0.4s ease,
    transform 0.4s ease;
}

.page-home-hero__image:hover {
  border-radius: var(--hero-radius);
  filter: drop-shadow(0 2px 20px rgb(255 107 53 / 60%));
  transform: scale(1.05);
}

.page-home-hero__media {
  border-radius: var(--hero-radius);
  display: block;
  max-width: 100%;
  width: 100%;
}

/* ============================================================
   HERO CAROUSEL & GALLERY
   ============================================================ */

/* Hero carousel container */
.page-home-hero__carousel {
  border-radius: var(--hero-radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
}

/* Carousel image */
.comp-hero-carousel__image {
  border-radius: var(--hero-radius);
  height: 420px;
  object-fit: cover;
  transition:
    filter 0.4s ease,
    transform 0.5s ease;
  width: 100%;
}

.comp-hero-carousel__image:hover {
  filter: brightness(1.1) saturate(1.2);
  transform: scale(1.03);
}

/* Carousel controls/indicators tweaks (Bootstrap classes via attribute selectors) */
.page-home-hero__carousel [class~='carousel-control-next-icon'],
.page-home-hero__carousel [class~='carousel-control-prev-icon'] {
  filter: drop-shadow(0 0 6px rgb(0 0 0 / 70%));
}

.page-home-hero__carousel [class~='carousel-indicators'] [data-bs-target] {
  background-color: var(--color-primary);
}

/* Carousel caption overlay */
.page-home-hero__carousel [class~='carousel-caption'] {
  background: linear-gradient(90deg, rgb(0 0 0 / 70%), rgb(0 0 0 / 25%));
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.page-home-hero__carousel [class~='carousel-caption'] h3 {
  color: #fff;
  text-shadow: 0 2px 12px rgb(0 0 0 / 60%);
}

.page-home-hero__carousel [class~='carousel-caption'] p {
  color: var(--color-secondary);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

/* Gallery card images */
.comp-gallery-card__image {
  border-radius: var(--radius);
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  width: 100%;
}

.comp-gallery-card__image:hover {
  transform: scale(1.05);
}

/* ============================================================
   BLOG META (stacked autore / data)
   ============================================================ */

.page-blog-index__meta,
.page-post-detail__meta {
  display: block;
}

.page-blog-index__meta > time,
.page-post-detail__meta > time {
  margin-top: 0.15rem;
}

/* ============================================================
   GALLERY – LIST PAGE (Abyss look)
   ============================================================ */

.page-gallery-list__title {
  color: var(--color-primary);
  filter: var(--filter-glow-soft);
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgb(255 107 53 / 45%);
}

.page-gallery-list__subtitle {
  color: var(--color-text-muted);
  font-size: var(--fs-meta);
}

.page-gallery-list .comp-card {
  --comp-card-border: rgb(255 107 53 / 22%);

  background: linear-gradient(180deg, #181821 0%, #0f0f18 100%);
  border-color: var(--comp-card-border);
  box-shadow: var(--shadow-sm);
}

.page-gallery-list .comp-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.page-gallery-list .comp-card__body {
  gap: 0.5rem;
}

.page-gallery-list .comp-gallery-card__image {
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 35%));
  transition:
    filter 0.4s ease,
    transform 0.4s ease;
}

.page-gallery-list .comp-gallery-card__image:hover {
  filter: drop-shadow(0 4px 14px rgb(255 107 53 / 35%));
  transform: scale(1.03);
}

/* ============================================================
   GALLERY – UPLOAD PAGE (Abyss look)
   ============================================================ */

.page-gallery-upload .comp-card {
  --comp-card-border: rgb(255 107 53 / 25%);

  background: linear-gradient(180deg, #191923 0%, #0e0e16 100%);
  border-color: var(--comp-card-border);
  box-shadow: var(--shadow-sm);
}

.page-gallery-upload .comp-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.page-gallery-upload__title {
  color: var(--color-primary);
  filter: var(--filter-glow-soft);
  letter-spacing: 2px;
  text-shadow: 0 0 14px rgb(255 107 53 / 50%);
}

.page-gallery-upload__subtitle {
  color: var(--color-secondary);
  font-weight: 500;
}

.page-gallery-upload [class~='form-label'] {
  color: var(--color-secondary);
  font-family: var(--font-headings);
  letter-spacing: 0.5px;
}

.page-gallery-upload [class~='form-text'] {
  color: var(--color-text-muted);
}

.page-gallery-upload input[type='file'],
.page-gallery-upload input[type='text'],
.page-gallery-upload textarea {
  background-color: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 107 53 / 22%);
  color: var(--color-text);
}

.page-gallery-upload input[type='file']:focus,
.page-gallery-upload input[type='text']:focus,
.page-gallery-upload textarea:focus {
  background-color: rgb(255 255 255 / 10%);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgb(255 107 53 / 25%);
  color: #fff;
  outline: none;
}

.page-gallery-upload .comp-button--primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.page-gallery-upload .comp-button--primary:hover {
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
  color: #fff;
  transform: translateY(-2px);
}

/* Profile page */
.page-profile__approved-link {
  border-radius: calc(var(--radius) / 1.3);
  color: inherit;
  display: block;
  padding: 0.35rem 0.65rem;
  position: relative;
  text-decoration: none;
  transition:
    background 0.3s,
    box-shadow 0.3s,
    color 0.3s,
    transform 0.3s;
}

.page-profile__approved-link:hover {
  background: rgb(255 107 53 / 18%);
  box-shadow: 0 6px 18px rgb(255 107 53 / 25%);
  color: #fff;
  transform: translateY(-2px);
}

/* ============================================================
   POST LIST/DETAIL
   ============================================================ */

.page-blog-index__excerpt {
  color: var(--color-text);
  font-size: 1rem;
}

.page-blog-index__tags--empty {
  opacity: 0.6;
}

.page-post-detail__title {
  color: var(--color-primary);
  font-family: var(--font-headings);
  font-size: var(--fs-h2);
  font-weight: bold;
  margin-bottom: 1rem;
}

.page-post-detail__meta {
  display: block;
}

.page-post-detail__meta > time {
  margin-top: 0.15rem;
}

.page-post-detail__body {
  margin-top: 1rem;
}

.page-post-detail__comments-title {
  color: var(--color-secondary);
  font-family: var(--font-headings);
  font-size: var(--fs-h2);
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.page-post-detail__author {
  color: var(--color-primary);
  font-weight: 600;
}

.page-post-detail__comment-body {
  line-height: 1.6;
  margin-bottom: 1.25rem;
  margin-top: 0.75rem;
}

/* ============================================================
   BLOG – EDIT POST PAGE
   ============================================================ */

.page-blog-edit-post__actions {
  align-items: stretch;
}

.page-blog-edit-post__actions .comp-button {
  width: 100%;
}

.page-blog-edit-post__actions-right {
  width: 100%;
}

@media (width >= 768px) {
  .page-blog-edit-post__actions {
    align-items: center;
  }

  .page-blog-edit-post__actions .comp-button {
    width: auto;
  }

  .page-blog-edit-post__actions-right {
    justify-content: flex-end;
    width: auto;
  }
}

/* Contact & About */
.page-contact .comp-card__title,
.page-about .comp-card__title {
  color: var(--color-secondary);
}

.comp-card__title-about {
  color: var(--color-primary);
}

.comp-card__title-contact {
  color: var(--color-primary);
}

/* Account pages */
.page-account-login .comp-card__title,
.page-account-logout .comp-card__title,
.page-account-password-reset .comp-card__title,
.page-account-password-reset-done .comp-card__title,
.page-account-signup .comp-card__title,
.page-account-email .comp-card__title {
  color: var(--color-primary);
}

.comp-auth-extra {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.comp-auth-note {
  color: var(--color-text-muted);
  font-size: var(--fs-meta);
  letter-spacing: 0.2px;
}

.comp-auth-link {
  align-items: center;
  color: var(--color-secondary);
  display: inline-flex;
  gap: 0.25rem;
  font-family: var(--font-headings);
  font-size: var(--fs-btn-sm);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition:
    color 0.3s,
    text-shadow 0.3s,
    transform 0.3s;
}

.comp-auth-link:hover,
.comp-auth-link:focus-visible {
  color: var(--color-primary);
  text-shadow: 0 0 8px rgb(255 107 53 / 45%);
  transform: translateY(-1px);
}

.comp-auth-cta {
  min-width: 0;
  padding-inline: 1.25rem;
}

.comp-auth-email-icon {
  animation: ga-pulse 2.5s infinite ease-in-out;
  display: inline-block;
  font-size: clamp(6rem, 5rem + 4vw, 10rem);
}

/* Error pages */
.page-error-404,
.page-error-500 {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 70vh;
  padding: 3rem 1.25rem;
  text-align: center;
}

.page-error-404__title {
  color: var(--color-primary) !important;
  font-family: var(--font-headings);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 0.5rem;
  text-shadow: 0 6px 18px rgb(0 0 0 / 60%);
}

.page-error-404__subtitle {
  color: var(--color-secondary) !important;
  font-size: var(--fs-error-sub);
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.page-error-404__message {
  color: var(--color-text);
  font-family: var(--font-secondary);
  font-size: var(--fs-p);
  line-height: 1.8;
  margin: 0 auto 1.5rem;
  max-width: 720px;
  opacity: 0.95;
}

/* ============================================================
   MUSIC PLAYER
   ============================================================ */
.comp-music-player {
  align-items: center;
  bottom: 20px;
  display: flex;
  gap: 12px;
  position: fixed;
  right: 20px;
  z-index: 9999;
}

.comp-music-toggle {
  background: var(--gradient-primary);
  border: 2px solid var(--color-secondary);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1.2rem;
  height: 50px;
  width: 50px;
  overflow: visible;
  position: relative;
  transition: all 0.3s ease;
}

.comp-music-toggle::before {
  background: var(--gradient-highlight);
  background-size: 200% 200%;
  border-radius: 50%;
  content: '';
  filter: blur(8px);
  inset: -4px;
  opacity: 0;
  position: absolute;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.comp-music-toggle:hover {
  box-shadow: var(--shadow-lg);
  transform: scale(1.08);
}

.comp-music-toggle:active {
  transform: scale(0.95);
}

.comp-music-toggle i {
  position: relative;
  transition: all 0.3s ease;
  z-index: 2;
}

.comp-music-toggle.util-is-playing::before {
  animation: ga-glow-pulse 2s ease-in-out infinite;
  opacity: 1;
}

.comp-music-toggle.util-is-playing {
  border-color: var(--color-primary);
  box-shadow:
    0 0 20px rgb(255 107 53 / 50%),
    0 0 35px rgb(255 107 53 / 30%),
    0 4px 15px rgb(0 0 0 / 40%);
}

.comp-music-toggle.util-is-playing i {
  animation: ga-music-bounce 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgb(255 255 255 / 80%));
}

.comp-music-toggle.util-is-paused {
  background: var(--gradient-surface);
  border-color: rgb(78 205 196 / 40%);
  box-shadow: var(--shadow-sm);
}

.comp-music-toggle.util-is-paused::before {
  animation: none;
  opacity: 0;
}

.comp-music-toggle.util-is-paused i {
  animation: none;
  opacity: 0.5;
}

.comp-music-mute {
  background: #ff4d6d;
  box-shadow: 0 0 8px rgb(255 77 109 / 80%);
  position: absolute;
  top: 50%;
  left: 50%;
  height: 36px;
  width: 2px;
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.comp-music-mute.util-visible {
  opacity: 1;
}

/* ============================================================
   UTILITIES
   ============================================================ */

.util-no-decoration {
  text-decoration: none;
}

.util-text-shadow {
  color: var(--color-primary);
  text-shadow: 0 2px 10px rgb(0 0 0 / 50%);
  text-align: center;
}

.util-glow {
  box-shadow: 0 0 20px rgb(255 107 53 / 50%);
}

/* Icon utilities */
.comp-icon--primary {
  color: var(--color-primary);
}

.comp-icon--secondary {
  color: var(--color-secondary);
}

/* Neon helpers */
.util-neon-primary {
  filter: drop-shadow(0 0 8px rgb(255 107 53 / 55%))
    drop-shadow(0 0 16px rgb(255 107 53 / 35%));
}

.util-neon-secondary {
  filter: drop-shadow(0 0 8px rgb(78 205 196 / 55%))
    drop-shadow(0 0 16px rgb(78 205 196 / 35%));
}

/* Avatar default image */
.util-avatar-img {
  object-fit: cover;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes ga-slide-left {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ga-fade-scale {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ga-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes ga-glow {
  0% {
    background-position: 0% 50%;
    filter: var(--filter-glow-soft);
  }

  50% {
    background-position: 100% 50%;
    filter: var(--filter-glow-strong);
  }

  100% {
    background-position: 0% 50%;
    filter: var(--filter-glow-soft);
  }
}

@keyframes ga-glow-pulse {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes ga-music-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-3px) scale(1.1);
  }
}