/* Original AI fan illustrations: decorative layers never intercept a tap. */
.ornament { pointer-events: none; user-select: none; object-fit: contain; }
.hero-ribbon { position: absolute; z-index: 1; width: 245px; height: 245px; left: -105px; top: -57px; opacity: .57; transform: rotate(-24deg); }
.hero-fan { position: absolute; z-index: 1; width: 200px; height: 200px; right: -92px; bottom: -17px; opacity: .63; transform: rotate(16deg); }
.hero-copy, .hero-art { z-index: 2; }
.hero-copy { position: relative; }
.hero-inner { z-index: 2; }
.guests-section { position: relative; }
.lineup-note { position: relative; display: block; padding: 0; min-width: 0; }
.lineup-scene { height: 450px; position: relative; overflow: hidden; border: 6px solid #fdfaf1; outline: 1px solid #d5dcd2; box-shadow: 5px 6px 0 #e8ebe1; }
.lineup-note > .lineup-scene { padding: 0; display: block; }
.lineup-scene > img { width: 100%; height: 100%; object-fit: cover; object-position: 46% center; }
.lineup-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #092f484d, transparent 65%); }
.lineup-scene .vertical-title { position: absolute; z-index: 1; right: 12px; top: 23px; color: #fffaf0; font-size: 35px; line-height: 1.3; letter-spacing: 7px; text-shadow: 0 2px 7px #203849a6; }
.lineup-note .lineup-caption { padding: 46px 8px 0 8px; display: block; position: relative; }
.lineup-caption .small-seal { float: right; margin: 7px 5px 0 12px; }
.lineup-note .lineup-caption .muted { margin-top: 16px; }
.lineup-charm { position: absolute; top: 342px; left: -34px; z-index: 2; width: 220px; height: 180px; transform: rotate(-11deg); filter: drop-shadow(0 8px 7px #16354626); }
.formation-panel { position: relative; z-index: 1; }
.formation-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #eef7fb4d, #fffdf5c7 23%, #fffdf5b8 76%, #eef7fb42), url('assets/scene-md.webp') center / cover; opacity: .8; pointer-events: none; }
.formation-panel > * { position: relative; }
.formation-panel .formation-header, .formation-panel .staff-label, .formation-panel .formation-footer { color: #354e4a; text-shadow: 0 1px 4px #fffdf5; }
.formation-panel .guest-name { padding: 2px 5px; background: #fffdf4ed; border-radius: 3px; box-shadow: 0 1px 5px #31554a0b; }
.formation-panel .formation { padding-top: 15px; padding-bottom: 28px; gap: 22px; }
.avatar-frame { --frame-color: #6e8ea6; position: relative; display: grid; place-items: center; width: 63px; height: 63px; flex-shrink: 0; isolation: isolate; }
.avatar-frame::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--frame-color); border-radius: 50%; background: linear-gradient(140deg, #fff9de, #d9e7ef 58%, #91aeb4); box-shadow: 0 0 0 2px #fffaf2cc, 0 3px 7px #294d461c; z-index: -1; pointer-events: none; }
.avatar-frame.frame-tg { --frame-color: #bf8572; }
.avatar-frame.frame-tg::before { background: linear-gradient(140deg, #fff7d3, #edccbc 58%, #c48b78); }
.avatar-frame.frame-sv { --frame-color: #7d9873; }
.avatar-frame.frame-sv::before { background: linear-gradient(140deg, #f6f4d6, #d4e3c8 58%, #96b28c); }
.avatar-frame .guest-avatar { margin: 0; background: #fffdf3; border-color: var(--frame-color); box-shadow: inset 0 0 0 3px #fffef6; }
.avatar-accessory { position: absolute; width: 32px; height: 32px; max-width: none; object-fit: contain; right: -2px; top: -7px; pointer-events: none; user-select: none; z-index: 2; filter: drop-shadow(0 2px 1px #173e3026); transform: rotate(12deg); }
.frame-sv .avatar-accessory { right: auto; left: -4px; transform: rotate(-18deg); }
.guest-button::after { display: none; }
.guest-button:hover .avatar-frame::before { box-shadow: 0 0 0 2px #fffaf2, 0 0 0 3px var(--frame-color), 0 4px 9px #294d4629; }
.guest-button:hover .guest-avatar { transform: none; }
.avatar-frame-large { width: 108px; height: 108px; margin: 25px auto 17px; }
.avatar-frame-large .moka-avatar { width: 91px; height: 91px; margin: 0; }
.avatar-frame-large .avatar-accessory { width: 53px; height: 53px; top: -11px; right: -6px; }
.avatar-frame-large.frame-sv .avatar-accessory { right: auto; left: -7px; }
.schedule-section { position: relative; overflow: hidden; }
.schedule-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #eeeee63d, #eeeee6 66%), url('assets/scene-sv.webp') left center / cover; opacity: .33; pointer-events: none; }
.schedule-inner { position: relative; }
.schedule-illustration { position: relative; margin-top: 31px; max-width: 365px; }
.schedule-illustration .scenery { width: 100%; height: 192px; object-fit: cover; object-position: center 55%; border: 5px solid #fffcf2; outline: 1px solid #c9d3be; box-shadow: 5px 5px 0 #d8dfcb; transform: rotate(-3deg); }
.schedule-fan { position: absolute; width: 149px; height: 149px; bottom: -30px; right: -32px; transform: rotate(12deg); filter: drop-shadow(0 6px 4px #0b351d25); }
.teams { gap: 26px; }
.team { padding-top: 0; }
.team-scene { display: block; width: calc(100% + 54px); max-width: none; height: 174px; object-fit: cover; margin: 0 -27px 25px; border-bottom: 1px solid #173e301f; }
.team-md .team-scene { object-position: center 58%; }
.team-tg .team-scene { object-position: center 56%; }
.team-sv .team-scene { object-position: center 57%; }
.team-prop { position: absolute; width: 132px; height: 132px; top: 87px; right: 3px; filter: drop-shadow(0 7px 5px #15382e35); }
.team h3 { padding-top: 1px; }
.team-index { position: relative; }
.team-mark { display: none; }
.venue-parade { grid-column: 1 / -1; width: min(720px, 94%); height: auto; max-height: 270px; margin: -35px auto -40px; object-fit: contain; filter: drop-shadow(0 9px 7px #1a372e17); }
.closing { background: #261e27; isolation: isolate; padding-top: 82px; padding-bottom: 83px; }
.closing::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url('assets/scene-tg.webp') center 49% / cover; opacity: .82; }
.closing::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #142b3270, #171e29d9 34%, #171e29d9 65%, #2b172b42); }
.closing .eyebrow { color: #e5c9a6; }
.closing > p:not(.eyebrow), .closing .signup-status { color: #eee0cc; }
.closing h2 { text-shadow: 0 3px 12px #10131a; }
.closing-umbrella { position: absolute; z-index: -1; width: 315px; height: 315px; left: max(0px, calc((100vw - 1360px)/2)); bottom: -65px; transform: rotate(-15deg); opacity: .92; }
.closing-flute { position: absolute; z-index: -1; width: 285px; height: 285px; right: max(-35px, calc((100vw - 1420px)/2)); top: 3px; transform: rotate(19deg); opacity: .7; }
.moka-top { background: linear-gradient(#123933ce, #123933f0), url('assets/scene-md.webp') center 45% / cover; }
.signup-dialog::before { content: ''; display: block; width: 100%; height: 105px; margin: -10px auto 20px; background: url('assets/parade.webp') center / contain no-repeat; }
.signup-dialog .small-seal { display: none; }
.closing .primary, .mobile-dock .primary, .signup-dialog .primary { gap: 13px; }
.closing .primary::before, .mobile-dock .primary::before, .signup-dialog .primary::before {
  content: ''; display: block; width: 31px; height: 31px; flex: 0 0 31px;
  background: #fff3df url('assets/prop-tg.webp') center / 125% no-repeat;
  border-radius: 50%; box-shadow: 0 0 0 1px #f2dbb0; transform: rotate(-9deg);
}
#view-map { padding: 10px 15px 10px 7px; border: 1px solid #b4c5a9; background: #f0f3e9; gap: 11px; }
#view-map::before { content: ''; width: 35px; height: 35px; background: url('assets/prop-sv.webp') center / contain no-repeat; }
.formation-frame-charm { position: absolute; width: 108px; height: 108px; right: -29px; top: -44px; z-index: 3; transform: rotate(12deg); filter: drop-shadow(0 3px 3px #123c3020); }
.formation-header { padding-right: 85px; }
.moka-top::after { content: ''; position: absolute; width: 118px; height: 118px; right: -25px; bottom: -19px; background: url('assets/prop-sv.webp') center / contain no-repeat; opacity: .8; z-index: -1; pointer-events: none; }
@media (min-width: 1500px) { .closing-umbrella { width: 370px; height: 370px; } }
@media (max-width: 1100px) {
  .lineup-scene { height: 410px; }
  .lineup-scene .vertical-title { font-size: 29px; right: 9px; }
  .lineup-charm { top: 310px; width: 185px; height: 150px; left: -20px; }
  .lineup-note .lineup-caption { padding-top: 38px; }
  .schedule-fan { right: -20px; width: 125px; height: 125px; }
  .team-scene { width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; }
  .team-prop { width: 115px; height: 115px; top: 102px; }
  .closing-umbrella { left: -75px; opacity: .7; }
  .closing-flute { right: -95px; opacity: .5; }
}
@media (max-width: 800px) {
  .hero-ribbon { width: 200px; height: 200px; left: -102px; top: -49px; opacity: .46; }
  .hero-fan { width: 165px; height: 165px; right: -89px; bottom: 3px; opacity: .58; }
  .lineup-layout { gap: 25px; }
  .lineup-note { display: block; }
  .lineup-scene { height: 190px; border-width: 5px; }
  .lineup-scene > img { object-position: center 52%; }
  .lineup-scene::after { background: linear-gradient(90deg, #0a294840, transparent 65%); }
  .lineup-scene .vertical-title { writing-mode: horizontal-tb; top: 24px; right: auto; left: 20px; font-size: 30px; letter-spacing: 3px; }
  .lineup-note .lineup-caption { display: none; }
  .lineup-charm { top: auto; bottom: -31px; left: auto; right: -3px; width: 185px; height: 149px; }
  .formation-panel { z-index: 0; }
  .schedule-section::before { background-position: center top; opacity: .2; }
  .schedule-intro .date-ticket { top: 58px; bottom: auto; }
  .schedule-illustration { max-width: none; width: calc(100% - 20px); margin: 31px 10px 15px; }
  .schedule-illustration .scenery { height: 190px; transform: rotate(-1.5deg); }
  .schedule-fan { width: 143px; height: 143px; right: -15px; bottom: -25px; }
  .teams { gap: 16px; }
  .team { padding-top: 0; }
  .team-scene { width: calc(100% + 32px); margin: 0 -16px 20px; height: 142px; }
  .team-prop { top: 76px; width: 95px; height: 95px; right: -7px; }
  .venue-parade { margin: -3px auto -17px; width: 96%; }
  .closing { padding-top: 65px; padding-bottom: 67px; }
  .closing::after { background: linear-gradient(90deg, #131e2b99, #151d2bcc 20%, #151d2bcc 80%, #26192d88); }
  .closing-umbrella { width: 220px; height: 220px; left: -95px; bottom: -47px; opacity: .7; }
  .closing-flute { width: 190px; height: 190px; right: -75px; top: -50px; opacity: .55; }
}
@media (max-width: 480px) {
  .avatar-frame { width: 50px; height: 50px; }
  .avatar-accessory { width: 26px; height: 26px; top: -6px; right: -2px; }
  .frame-sv .avatar-accessory { left: -2px; }
  .formation-panel .formation { gap: 20px; }
  .formation-panel .guest-name { padding: 2px 4px; }
  .avatar-frame-large { width: 96px; height: 96px; margin-top: 23px; }
  .avatar-frame-large .moka-avatar { width: 80px; height: 80px; }
  .avatar-frame-large .avatar-accessory { width: 47px; height: 47px; }
  .hero-ribbon { top: -58px; left: -113px; }
  .hero-fan { width: 150px; height: 150px; right: -98px; }
  .lineup-layout { gap: 22px; }
  .lineup-scene { height: 165px; }
  .lineup-scene .vertical-title { font-size: 25px; top: 18px; left: 14px; letter-spacing: 2px; }
  .lineup-charm { width: 139px; height: 116px; left: -3px; right: auto; bottom: -22px; }
  .schedule-illustration { margin-top: 28px; margin-bottom: 13px; }
  .schedule-illustration .scenery { height: 155px; }
  .schedule-fan { width: 117px; height: 117px; bottom: -25px; right: -17px; }
  .team { padding-top: 0; }
  .team-scene { width: calc(100% + 44px); margin: 0 -22px 22px; height: 157px; }
  .team-prop { width: 124px; height: 124px; top: 77px; right: 1px; }
  .team dl { position: relative; z-index: 2; }
  .venue-parade { width: 100%; margin: -5px auto -13px; max-height: 180px; }
  .closing { padding: 59px 20px 60px; }
  .closing::before { background-position: center 50%; }
  .closing-umbrella { width: 184px; height: 184px; left: -88px; bottom: -35px; opacity: .62; }
  .closing-flute { width: 170px; height: 170px; right: -103px; top: -9px; opacity: .56; }
  .signup-dialog::before { height: 82px; margin-top: -7px; margin-bottom: 18px; }
  .mobile-dock .primary { padding-left: 12px; padding-right: 14px; gap: 9px; }
  .mobile-dock .primary::before { width: 24px; height: 24px; flex-basis: 24px; }
  .formation-frame-charm { width: 64px; height: 64px; right: 0; top: -34px; }
  .formation-header { padding-right: 48px; }
}
@media (max-width: 359px) {
  .avatar-frame:not(.avatar-frame-large) { width: 44px; height: 44px; }
  .avatar-frame:not(.avatar-frame-large) .avatar-accessory { width: 24px; height: 24px; top: -5px; right: -1px; }
  .avatar-frame.frame-sv:not(.avatar-frame-large) .avatar-accessory { right: auto; left: -2px; }
  .mobile-dock .primary { padding-left: 9px; padding-right: 9px; gap: 7px; font-size: 13px; }
  .mobile-dock .primary::before { width: 21px; height: 21px; flex-basis: 21px; }
}