/* Ver.8 — compact per-ticket perk index + immersive, accessible detail dialog.
   The index stays inside the selected ticket. Each perk opens a modal on demand. */
.perk-index,
.perk-index *,.perk-modal,.perk-modal *{box-sizing:border-box}
.perk-index{--perk-accent:#ff68b7;--perk-soft:#ffd7ed;--perk-deep:#e8368e;position:relative;background:radial-gradient(ellipse at 90% 0%,#e74b9d35,transparent 42%),linear-gradient(165deg,#271039,#170c2c 78%);color:#fff;padding:clamp(24px,4.5vw,55px) clamp(17px,5vw,65px) 25px;overflow:hidden;text-align:left}
.perk-index-s{--perk-accent:#7bc8ff;--perk-soft:#daf2ff;--perk-deep:#5d9ef5;background:radial-gradient(ellipse at 85% 0%,#5274ee48,transparent 46%),linear-gradient(155deg,#0b204b,#0e1535 83%)}
.perk-index-general{--perk-accent:#c4a6f9;--perk-soft:#efe5ff;--perk-deep:#a98bef;background:radial-gradient(ellipse at 85% 0%,#9874e346,transparent 49%),linear-gradient(155deg,#21143d,#180d31 83%)}
.perk-index::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--perk-accent) 25%,#fff 52%,var(--perk-accent) 75%,transparent);box-shadow:0 0 22px var(--perk-accent)}
.perk-index-header{display:flex;align-items:end;justify-content:space-between;gap:18px;padding-bottom:21px;border-bottom:1px solid #ffffff30;margin-bottom:15px}
.perk-index-small{display:block;font:700 12px/1.6 'Zen Maru Gothic',sans-serif;color:var(--perk-soft);letter-spacing:.05em}
.perk-index-header h3{margin:3px 0 0;font:900 clamp(25px,3vw,41px)/1.3 'Zen Maru Gothic',sans-serif;color:#fff;text-shadow:0 0 20px #fe73cc6b;letter-spacing:.045em}
.perk-index-header>p{font:600 11px/1.8 'Noto Sans JP',sans-serif;color:#f4dcef;margin:0;text-align:right;opacity:.9}
.perk-index-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px}
.perk-index-general .perk-index-grid{grid-template-columns:1fr;max-width:720px}
.perk-index-item{all:unset;box-sizing:border-box;position:relative;width:100%;min-width:0;display:flex;align-items:center;gap:16px;min-height:114px;padding:13px 4px;border-bottom:1px solid #ffffff29;cursor:pointer;color:#fff;transition:background .2s ease,transform .2s ease;isolation:isolate}
.perk-index-item::before{content:'';position:absolute;inset:5px -7px;z-index:-1;opacity:0;background:linear-gradient(90deg,var(--perk-accent),transparent);transition:opacity .2s;filter:opacity(.17);border-radius:5px}
.perk-index-item:hover::before,.perk-index-item:focus-visible::before{opacity:.75}
.perk-index-item:hover .perk-index-img{transform:scale(1.035) rotate(-1.2deg);filter:saturate(1.2)}
.perk-index-item:focus-visible{outline:2px solid #fff;outline-offset:3px}
.perk-index-img{width:99px;height:82px;flex:0 0 99px;display:block;box-shadow:0 3px 13px #0c0627dd;border:2px solid #ffffff8c;background-color:#67418b;background-position:center;background-size:cover;transform:rotate(-1deg);transition:transform .25s ease,filter .25s ease}
.perk-index-copy{min-width:0;display:flex;flex-direction:column;gap:4px;flex:1}
.perk-index-no{font:800 12px/1.2 'DM Sans',sans-serif;color:var(--perk-accent);letter-spacing:.12em}
.perk-index-no span{font:700 10px 'Zen Maru Gothic',sans-serif;letter-spacing:.03em;color:var(--perk-soft)}
.perk-index-copy strong{font:900 clamp(13px,1.4vw,17px)/1.5 'Zen Maru Gothic',sans-serif;letter-spacing:.01em;color:#fff;text-wrap:pretty}
.perk-index-copy small{font:600 11px/1.6 'Noto Sans JP',sans-serif;color:#e8ddea}
.perk-index-chevron{font:300 28px 'DM Sans',sans-serif;color:var(--perk-accent);padding-right:5px;transition:transform .2s}
.perk-index-item:hover .perk-index-chevron{transform:translateX(4px)}
.perk-index-foot{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:24px 0 6px;color:var(--perk-soft)}
.perk-index-foot span{font:700 clamp(10px,1.15vw,13px)/1.5 'Zen Maru Gothic',sans-serif}
.perk-index-foot strong{color:#fff;font:900 clamp(24px,3vw,36px)/1.1 'DM Sans',sans-serif;text-shadow:0 0 18px var(--perk-accent)}
.perk-index-foot strong small{font:800 13px 'Zen Maru Gothic',sans-serif;padding-left:4px}
.perk-index-note{margin:7px 0 0;color:#f4dcedba;font:500 10px/1.7 'Noto Sans JP',sans-serif}
/* Modal background is deliberately an overlay, not part of the tall scrolling ticket page. */
.perk-modal[hidden]{display:none!important}
.perk-modal{position:fixed;z-index:5000;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(12px,2.8vw,28px);background:#0f0622d6;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow-y:auto;overscroll-behavior:contain}
body.perk-modal-visible{overflow:hidden}
.perk-dialog{--modal-accent:#ff78be;--modal-glow:#e92394;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:min(930px,100%);max-height:min(720px,calc(100dvh - 30px));min-height:460px;background:linear-gradient(150deg,#35104a,#190e32 80%);color:#fff;border:1px solid #ffb3e3;box-shadow:0 0 0 5px #ffffff14,0 0 46px #e32a9d81,0 24px 90px #05000ac7;border-radius:9px;overflow:hidden}
.perk-dialog[data-tone='s']{--modal-accent:#86caff;--modal-glow:#4a83ed;border-color:#8ccaff;box-shadow:0 0 0 5px #ffffff14,0 0 46px #4a7bef68,0 24px 90px #05000ac7}
.perk-dialog[data-tone='general']{--modal-accent:#c5abff;--modal-glow:#8d6cdf;border-color:#c5abff;box-shadow:0 0 0 5px #ffffff14,0 0 46px #8e6def70,0 24px 90px #05000ac7}
.perk-dialog:focus{outline:none}
.perk-dialog-art{position:relative;overflow:hidden;min-height:450px;background:radial-gradient(circle,#df59a993,#26143b 80%);isolation:isolate}
.perk-dialog-art::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#150824d6 0%,transparent 38%,#21082a44 100%)}
.perk-dialog-art img{display:block;width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.perk-dialog-art-note{position:absolute;z-index:1;left:24px;right:18px;bottom:18px;color:#fff;opacity:.86;text-shadow:0 1px 5px #140b28;font:600 10px/1.5 'Noto Sans JP',sans-serif}
.perk-dialog-watermark{position:absolute;z-index:1;left:20px;top:22px;font:900 13px/1 'DM Sans',sans-serif;letter-spacing:.2em;color:#fff;text-shadow:0 0 16px #ff7ec5}
.perk-dialog-content{padding:clamp(32px,5.5vw,66px) clamp(22px,4vw,55px) 37px;align-self:center;overflow-y:auto;max-height:calc(100dvh - 50px)}
.perk-dialog-count{font:800 12px 'Zen Maru Gothic',sans-serif;letter-spacing:.07em;color:var(--modal-accent)}
.perk-dialog-kicker{font:900 clamp(16px,2vw,20px)/1.6 'Zen Maru Gothic',sans-serif;margin:20px 0 7px;color:#f9d6ee;text-shadow:0 0 15px var(--modal-glow)}
.perk-dialog-content h2{font:900 clamp(26px,3vw,39px)/1.45 'Zen Maru Gothic',sans-serif;margin:0;letter-spacing:.025em;overflow-wrap:anywhere;color:#fff;text-shadow:0 1px 14px #e33b9c73}
.perk-dialog-rule{width:75px;height:2px;background:linear-gradient(90deg,var(--modal-accent),transparent);box-shadow:0 0 12px var(--modal-accent);margin:27px 0 21px}
#perk-dialog-description{font:600 clamp(13px,1.3vw,15px)/2.1 'Noto Sans JP',sans-serif;letter-spacing:.015em;color:#f5e8f4;margin:0}
.perk-dialog-disclaimer{display:block;font:500 10px/1.7 'Noto Sans JP',sans-serif;color:#e9bcd9;margin-top:18px}
.perk-dialog-back{font:800 12px 'Zen Maru Gothic',sans-serif;letter-spacing:.06em;color:#fff;background:#ffffff12;border:1px solid #ffd7ea84;border-radius:40px;padding:13px 27px;margin-top:27px;cursor:pointer;transition:background .2s}
.perk-dialog-back:hover{background:#ffffff26}
.perk-modal-close{position:absolute;z-index:4;right:12px;top:12px;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid #ffffffb0;border-radius:50%;box-shadow:0 2px 14px #09001588;background:#170923b9;color:#fff;cursor:pointer;font:300 34px/1 'DM Sans',sans-serif}
.perk-modal-close:hover{background:#d72c83}
.perk-modal-close:focus-visible,.perk-dialog-back:focus-visible{outline:3px solid white;outline-offset:3px}
@media(min-width:800px){.ticket-entry.expanded .ticket-reveal{grid-row:2}.ticket-entry .ticket-reveal{z-index:1}}
@media(max-width:800px){.perk-index-grid{grid-template-columns:1fr}.perk-index-header{align-items:start;gap:11px}.perk-index-header>p{font-size:10px;max-width:150px}.perk-index{padding:25px 16px 19px}.perk-index-item{min-height:105px;gap:13px}.perk-index-img{width:84px;height:74px;flex-basis:84px}.perk-index-copy strong{font-size:14px}.perk-index-copy small{font-size:10px}.perk-index-foot{padding-top:19px}.perk-dialog{grid-template-columns:minmax(0,1fr);display:flex;flex-direction:column;width:min(530px,100%);min-height:0;max-height:calc(100dvh - 24px);overflow-y:auto}.perk-dialog-art{height:clamp(190px,29dvh,300px);min-height:190px;flex:0 0 auto}.perk-dialog-content{padding:22px 25px 27px;max-height:none;overflow:visible;align-self:stretch}.perk-dialog-kicker{margin:12px 0 4px}.perk-dialog-content h2{font-size:clamp(23px,6vw,31px)}.perk-dialog-rule{margin:15px 0 13px}.perk-dialog-art-note{bottom:13px;left:17px;font-size:9px}.perk-dialog-watermark{font-size:11px}.perk-dialog-back{margin-top:18px}.perk-modal-close{right:11px;top:11px;width:43px;height:43px}}
@media(max-width:390px){.perk-index-header{flex-direction:column}.perk-index-header>p{text-align:left;max-width:100%;line-height:1.6}.perk-index-img{width:76px;height:69px;flex-basis:76px}.perk-index-item{gap:10px;padding:12px 0}.perk-index-copy small{font-size:10px}.perk-index-foot span{font-size:9px}.perk-dialog-content{padding:20px 20px 22px}}
@media(prefers-reduced-motion:reduce){.perk-index-item,.perk-index-img,.perk-index-chevron{transition:none!important}}

/* 一般チケットは観覧エリアだけを表示。特典アコーディオンなし */
.ticket-entry-general .ticket-general-access {
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:4;
  width:100%; min-height:58px; padding:0 12px;
  border-top:1px solid #ffffff50;
  background:linear-gradient(90deg,rgba(47,20,77,.82),rgba(93,53,138,.92),rgba(47,20,77,.82));
  font:800 14px 'Zen Maru Gothic',sans-serif; letter-spacing:.06em;
  color:#fff; text-shadow:0 1px 7px #200939;
}
@media(max-width:580px){.ticket-entry-general .ticket-general-access{min-height:61px}}

/* VIP shirt: retain the existing popup backdrop; show the entire garment. */
.perk-dialog[data-visual="vip-shirt"] .perk-dialog-art img {object-fit:contain;}
@media(max-width:800px){
  .perk-dialog[data-visual="vip-shirt"] .perk-dialog-art{height:clamp(260px,37dvh,350px);}
}

/* v27: keep the S ticket's existing blue popup background and show the complete T-shirt. */
.perk-dialog[data-visual="s-shirt"] .perk-dialog-art img {object-fit:contain;}
@media(max-width:800px){.perk-dialog[data-visual="s-shirt"] .perk-dialog-art {height:clamp(260px,37dvh,350px);}}

/* v38: soft-cinematic front-row perk visual.  Leave existing modal layout intact. */
.perk-dialog[data-visual="vip-front-row"] .perk-dialog-art {
  background:radial-gradient(ellipse at 55% 34%,#ea6bc8 0%,#381054 69%,#190b31 100%);
}
.perk-dialog[data-visual="vip-front-row"] .perk-dialog-art img {
  object-fit:cover; object-position:center 50%;
}

/* v39: VIP rehearsal backstage photograph. Show the entire stage, maintaining the existing modal styling. */
.perk-dialog[data-visual="vip-rehearsal"] .perk-dialog-art {
  background:radial-gradient(ellipse at 52% 37%,#e17ab8 0%,#57226c 58%,#211034 100%);
}
.perk-dialog[data-visual="vip-rehearsal"] .perk-dialog-art img {
  object-fit:contain;
  object-position:center;
}
@media (max-width:800px) {
 .perk-dialog[data-visual="vip-rehearsal"] .perk-dialog-art {
   height:clamp(200px,27dvh,290px);
 }
}

/* v40: group cheki visual — all three members and the fan's placeholder stay visible. */
.perk-dialog[data-visual="vip-cheki"] .perk-dialog-art {
  background:radial-gradient(ellipse at 52% 42%, #f29ad1 0%, #733a8b 58%, #291038 100%);
}
.perk-dialog[data-visual="vip-cheki"] .perk-dialog-art::before {
  content:""; position:absolute; inset:-32px; z-index:0;
  background:linear-gradient(0deg,rgba(38,13,64,.47),rgba(132,39,122,.22)),
             url('./assets/vip-group-cheki-v40.webp') center / cover no-repeat;
  filter:blur(27px); opacity:.82; transform:scale(1.09);
}
.perk-dialog[data-visual="vip-cheki"] .perk-dialog-art img {
  object-fit:contain; object-position:center; z-index:1;
}
.perk-dialog[data-visual="vip-cheki"] .perk-dialog-art::after {z-index:2;}
.perk-dialog[data-visual="vip-cheki"] .perk-dialog-watermark,
.perk-dialog[data-visual="vip-cheki"] .perk-dialog-art-note {z-index:3;}
@media (max-width:800px){
  .perk-dialog[data-visual="vip-cheki"] .perk-dialog-art {height:clamp(210px,29dvh,310px);}
}

/* v41: VIP pre-show team huddle, full original framing and colour-matched backdrop. */
.perk-dialog[data-visual="vip-huddle"] .perk-dialog-art {
  background:radial-gradient(ellipse at 50% 42%,#d96eb8 0%,#6f347e 57%,#271039 100%);
}
.perk-dialog[data-visual="vip-huddle"] .perk-dialog-art::before {
  content:""; position:absolute; inset:-28px; z-index:0;
  background:linear-gradient(0deg,rgba(47,13,66,.30),rgba(142,40,128,.12)),
             url('./assets/vip-huddle-v41.webp') center / cover no-repeat;
  filter:blur(28px); opacity:.78; transform:scale(1.1);
}
.perk-dialog[data-visual="vip-huddle"] .perk-dialog-art img {
  object-fit:contain; object-position:center; z-index:1;
}
.perk-dialog[data-visual="vip-huddle"] .perk-dialog-art::after {z-index:2;}
.perk-dialog[data-visual="vip-huddle"] .perk-dialog-watermark,
.perk-dialog[data-visual="vip-huddle"] .perk-dialog-art-note {z-index:3;}
@media (max-width:800px) {
  .perk-dialog[data-visual="vip-huddle"] .perk-dialog-art {height:clamp(200px,28dvh,300px);}
}

/* v42: backstage message video — keep all three members and the camera in view. */
.perk-dialog[data-visual="vip-message"] .perk-dialog-art {
  background:radial-gradient(ellipse at 50% 35%,#ed97cd 0%,#9d599e 45%,#321545 100%);
}
.perk-dialog[data-visual="vip-message"] .perk-dialog-art img {
  object-fit:contain;
  object-position:center;
}
@media (max-width:800px){
  .perk-dialog[data-visual="vip-message"] .perk-dialog-art {height:clamp(210px,28dvh,315px);}
}

/* v43: S ticket, within the first three rows — full scene in existing blue popup. */
.perk-dialog[data-visual="s-third-row"] .perk-dialog-art {
  background:radial-gradient(ellipse at 48% 35%,#714db9 0%,#1f3566 55%,#131732 100%);
}
.perk-dialog[data-visual="s-third-row"] .perk-dialog-art img {
  object-fit:contain;
  object-position:center;
}
@media (max-width:800px){
  .perk-dialog[data-visual="s-third-row"] .perk-dialog-art {height:clamp(200px,29dvh,305px);}
}