/* HOLIDAYS v1.8 — safe character zones and single-box frames.
   Coloured borders are painted inside each component's own border box;
   no decorative frame is offset from the content it belongs to. */

:root {
  --frame-gradient: linear-gradient(115deg, #8e62db 0 23%, #f04c55 23% 48%, #ff83b5 48% 73%, #4a90e2 73% 100%);
  --frame-gradient-warm: linear-gradient(115deg, #ffd95a, #ff86b7 52%, #ffad51);
  --frame-shadow: 0 18px 34px rgba(22, 38, 79, .16);
  --frame-shadow-strong: 0 24px 44px rgba(22, 38, 79, .2);
}

/* Retire every old backing board and ticket notch that looked detached. */
.calendar-scene::before,
.calendar-scene::after,
.calendar-shell::before,
.calendar-shell::after,
.upcoming-list::before,
.upcoming-list::after {
  content: none !important;
  display: none !important;
}

/* One border box = one frame. */
.photo-frame {
  animation: frame-float 5.5s ease-in-out infinite !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--frame-gradient-warm) border-box !important;
  border: 7px solid transparent !important;
  box-shadow: var(--frame-shadow) !important;
  transform: none !important;
}

.debut-note {
  background:
    linear-gradient(var(--navy), var(--navy)) padding-box,
    var(--frame-gradient-warm) border-box !important;
  border: 5px solid transparent !important;
  box-shadow: 0 14px 26px rgba(22, 38, 79, .14) !important;
  transform: none !important;
}

.calendar-scene {
  --calendar-side: clamp(18px, 3vw, 40px);
  --mascot-band: 138px;
  box-sizing: border-box;
  filter: none !important;
  max-width: 1224px !important;
  padding: var(--mascot-band) var(--calendar-side) var(--mascot-band) !important;
  width: 100%;
}

.calendar-scene .calendar-shell {
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--frame-gradient) border-box !important;
  border: 8px solid transparent !important;
  box-shadow: var(--frame-shadow-strong) !important;
  box-sizing: border-box;
  margin-inline: auto !important;
  max-width: 1120px !important;
  overflow: hidden;
  position: relative;
  width: 100% !important;
  z-index: 5 !important;
}

.upcoming-list {
  background:
    linear-gradient(var(--navy), var(--navy)) padding-box,
    var(--frame-gradient-warm) border-box !important;
  border: 7px solid transparent !important;
  box-shadow: var(--frame-shadow) !important;
  box-sizing: border-box;
  max-width: 920px;
  overflow: hidden;
  width: min(920px, calc(100% - 32px)) !important;
}

.member-card {
  background:
    var(--member-bg) padding-box,
    linear-gradient(145deg, var(--member-accent), #fff 54%, var(--member-accent)) border-box !important;
  border: 6px solid transparent !important;
  box-shadow: 0 17px 30px rgba(37, 31, 73, .13) !important;
}

.member-purple { --member-accent: #8e62db; --member-bg: linear-gradient(160deg, #eadfff, #fff 68%); }
.member-red { --member-accent: #f04c55; --member-bg: linear-gradient(160deg, #ffdfe4, #fff 68%); }
.member-pink { --member-accent: #ff83b5; --member-bg: linear-gradient(160deg, #ffe0ee, #fff 68%); }
.member-blue { --member-accent: #4a90e2; --member-bg: linear-gradient(160deg, #dff3ff, #fff 68%); }

.member-card:hover,
.member-card:focus-within {
  box-shadow: 0 22px 36px rgba(37, 31, 73, .17) !important;
  transform: translateY(-7px) !important;
}

.phone-frame {
  background:
    linear-gradient(var(--navy), var(--navy)) padding-box,
    var(--frame-gradient-warm) border-box !important;
  border: 9px solid transparent !important;
  box-shadow: var(--frame-shadow-strong) !important;
}

.cta-card,
.event-modal {
  background:
    linear-gradient(rgba(255,255,255,.98), rgba(255,255,255,.98)) padding-box,
    var(--frame-gradient-warm) border-box !important;
  border: 8px solid transparent !important;
  box-shadow: var(--frame-shadow) !important;
  box-sizing: border-box;
}

/* Compact controls use a real border and a neutral depth shadow only. */
.button-primary,
.button-ghost,
.button-dark,
.phone-label,
.event-pill,
.schedule .section-heading::after,
.schedule-ticket,
.menu-button,
.nav-ticket,
.next-live-sticker {
  box-shadow: 0 7px 15px rgba(22, 38, 79, .16) !important;
}

.button-primary:hover,
.button-ghost:hover,
.button-dark:hover,
.event-pill:hover {
  box-shadow: 0 10px 19px rgba(22, 38, 79, .2) !important;
}

.next-live-sticker {
  border: 6px solid var(--navy) !important;
  outline: 4px solid rgba(255,255,255,.94);
  outline-offset: -10px;
}

.schedule .section-heading::after {
  margin: 18px auto 0 !important;
  transform: none !important;
}

.phone-label {
  bottom: -22px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) rotate(-3deg) !important;
  z-index: 7;
}

/* Calendar characters live in dedicated top/bottom bands, never over controls. */
.calendar-mascot {
  height: 118px !important;
  width: 118px !important;
  z-index: 3 !important;
}

.calendar-mascot-mikoto { left: 8% !important; top: 8px !important; }
.calendar-mascot-eru { left: auto !important; right: 8% !important; top: 8px !important; }
.calendar-mascot-milk { bottom: 8px !important; left: 8% !important; top: auto !important; }
.calendar-mascot-seira { bottom: 8px !important; right: 8% !important; top: auto !important; }

/* The MV character gets its own space above the phone. */
.phone-stage { padding-top: 92px !important; }
.movie-mascot {
  height: 104px !important;
  right: 8px !important;
  top: -2px !important;
  width: 104px !important;
  z-index: 4 !important;
}

/* Star decorations stay clear of the ticket controls. */
.cta-card > * { position: relative; z-index: 2; }
.cta-card::before,
.cta-card::after { font-size: 34px !important; pointer-events: none; z-index: 1; }
.cta-card::before { left: 22px !important; top: 18px !important; }
.cta-card::after { bottom: auto !important; right: 22px !important; top: 18px !important; }

/* The four characters are now a separate parade below the card. */
.debut-cta {
  flex-direction: column;
  gap: 22px;
  min-height: 0 !important;
  padding-bottom: 58px !important;
  padding-top: 86px !important;
}

.cta-card {
  max-width: 680px;
  width: min(680px, 100%);
  z-index: 4 !important;
}

.cta-character-parade {
  align-items: flex-end;
  display: flex;
  gap: clamp(4px, 1.8vw, 22px);
  justify-content: center;
  max-width: 720px;
  min-height: 150px;
  position: relative;
  width: 100%;
  z-index: 3;
}

.cta-character-parade .cta-chibi {
  bottom: auto !important;
  display: block !important;
  flex: 0 1 155px;
  height: 155px !important;
  left: auto !important;
  object-fit: contain;
  opacity: 1 !important;
  position: relative !important;
  right: auto !important;
  transform: none !important;
  width: 155px !important;
}

.cta-actions { position: relative; z-index: 5; }
.cta-actions .price,
.cta-actions .button { min-height: 54px; }

@keyframes frame-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@media (max-width: 760px) {
  .calendar-scene {
    --calendar-side: 14px;
    --mascot-band: 92px;
    margin-top: 26px !important;
  }

  .calendar-scene .calendar-shell {
    border-width: 6px !important;
    border-radius: 22px !important;
  }

  .calendar-mascot {
    height: 76px !important;
    width: 76px !important;
  }

  .calendar-mascot-mikoto { left: 8% !important; top: 7px !important; }
  .calendar-mascot-eru { right: 8% !important; top: 7px !important; }
  .calendar-mascot-milk { bottom: 7px !important; left: 8% !important; }
  .calendar-mascot-seira { bottom: 7px !important; right: 8% !important; }

  .upcoming-list {
    border-width: 5px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: calc(100% - 20px) !important;
  }

  .photo-frame,
  .member-card { border-width: 5px !important; }
  .phone-frame { border-width: 7px !important; }
  .cta-card,
  .event-modal { border-width: 6px !important; }

  .phone-stage { padding: 82px 18px 42px !important; }
  .movie-mascot {
    height: 90px !important;
    right: 18px !important;
    top: 0 !important;
    width: 90px !important;
  }

  .debut-cta {
    gap: 16px;
    padding: 68px 16px 34px !important;
  }

  .cta-card { padding: 42px 18px 28px !important; }
  .cta-card::before,
  .cta-card::after { font-size: 24px !important; top: 13px !important; }

  .cta-character-parade {
    gap: 0;
    min-height: 92px;
  }

  .cta-character-parade .cta-chibi {
    flex-basis: 25%;
    height: clamp(78px, 23vw, 104px) !important;
    width: 25% !important;
  }

  .cta-actions { grid-template-columns: 1fr !important; }
}

@media (max-width: 390px) {
  .calendar-scene {
    --calendar-side: 10px;
    --mascot-band: 84px;
  }

  .calendar-mascot {
    height: 68px !important;
    width: 68px !important;
  }

  .cta-date { font-size: 39px !important; }
  .cta-card h2 { font-size: 26px !important; }
  .cta-card > p:not(.cta-date):not(.price) { font-size: 11px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-frame,
  .calendar-mascot,
  .movie-mascot,
  .cta-chibi { animation: none !important; }
}