/* Portrait artwork stays intact; real HTML type remains crisp on small screens. */
.phone-flow{position:relative;isolation:isolate}
.phone-step{opacity:1;filter:none;isolation:isolate}
.phone-step:after{background:#eac578;opacity:0;height:70%;top:10%}
.phone-step.is-active{transform:translateY(-10px) scale(1.02)}
.phone-step.is-active:after{opacity:.36}
.phone--artwork{display:block;padding:0;font:inherit;color:#fff;background:#080e19;border-color:#181c25;box-shadow:0 18px 38px #0008,0 0 0 1px #ffffff35;transition:box-shadow .6s ease,border-color .6s ease}
.phone--artwork:focus-visible{outline:3px solid #fff0c4;outline-offset:7px}
.is-active .phone--artwork{border-color:#b99050;box-shadow:0 18px 38px #0008,0 0 0 2px #ffedb5,0 0 18px #eac578aa,0 0 40px #eac57844}
.phone--artwork .phone-status{position:relative;z-index:2;height:29px;padding:2px 10px 0;font-size:9px;letter-spacing:.04em;background:#0b1019}
.pass-art{container-type:inline-size;display:block;position:absolute;inset:29px 0 0;overflow:hidden;background:#0b1628}
.pass-art>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.pass-art:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#09132155,transparent 20%,transparent 47%,#07121a33 60%,#07121a 100%)}
.pass-brand{position:absolute;z-index:1;top:4%;left:5%;right:5%;color:#fff5d9;font:500 8cqi/1.2 Georgia,"Times New Roman",serif;letter-spacing:.14em;text-shadow:0 1px 8px #0009}
.pass-brand>span{display:block;margin-top:5px;font:500 3cqi/1.4 "Noto Sans JP",sans-serif;letter-spacing:.2em}
.pass-copy{position:absolute;z-index:1;left:5.5%;right:5.5%;bottom:5%;display:flex;flex-direction:column;align-items:center;color:#fff3d7;text-align:center}
.pass-eyebrow{display:block;font:600 3.6cqi/1.5 Outfit,sans-serif;letter-spacing:.12em}
.pass-title{display:block;margin:5% 0 4%;font:400 12cqi/1.05 Georgia,"Times New Roman",serif;letter-spacing:-.035em;color:#f7df9c;text-shadow:0 2px 12px #0004;white-space:nowrap}
.pass-japanese{display:block;font-size:4.2cqi;line-height:1.7;letter-spacing:.015em}
.pass-headline{display:block;margin:2% 0 5%;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:6.6cqi;font-weight:700;line-height:1.5;letter-spacing:.03em}
.pass-member-row{display:flex;justify-content:space-between;width:100%;margin-top:9%;padding-top:7%;border-top:1px solid #f0d7a575;font:500 4.5cqi/1.5 "Noto Sans JP",sans-serif;color:#f4e5c2}
.pass-tag{display:block;margin-top:9%;padding:4% 6%;border:1px solid #f0d7a58c;font:600 3.4cqi/1.4 "Noto Sans JP",sans-serif;letter-spacing:.14em}
.pass-art--new:after{background:linear-gradient(180deg,#fff6ee55,transparent 20%,transparent 47%,#ffedee30 56%,#ffedeed9 75%,#fff0ed 100%)}
.pass-art--new .pass-brand{color:#793b49;text-shadow:0 1px 8px #fff9}
.pass-art--new .pass-copy{color:#733144}
.pass-art--new .pass-title{font-style:italic;color:#af3b60;font-size:18cqi;text-shadow:0 1px 9px #fff8}
.pass-art--new .pass-tag{border-color:#a4596e88}
.pass-art--coupon:after{background:linear-gradient(180deg,#20020a22,transparent 30%,#25041015 60%,#25041088 100%)}
.pass-art--coupon .pass-copy{bottom:10%}
.pass-art--coupon .pass-eyebrow{font-size:5cqi;letter-spacing:.17em}
.pass-art--coupon .pass-headline{font-size:6cqi;margin:10% 0 8%}
.coupon-amount{display:block;color:#ffe2a0;font:400 26cqi/.95 Georgia,"Times New Roman",serif;letter-spacing:-.06em;text-shadow:0 3px 9px #20010899}
.coupon-amount>span{font:500 7cqi/1 "Yu Mincho",serif;letter-spacing:0}
.coupon-off{display:block;margin:3% 0 12%;font:400 18cqi/1 Georgia,"Times New Roman",serif;letter-spacing:.13em;color:#ffe2a0}
.pass-art--event:after{background:linear-gradient(180deg,#070f2944,transparent 20%,transparent 45%,#060e3244 58%,#070d2d 100%)}
.pass-art--event .pass-title{font-size:22cqi;color:#ecddba;letter-spacing:.035em;margin:4% 0 6%}
.pass-art--event .pass-headline{font-size:5.6cqi}
.step-label b{font-size:.9rem}.step-label span{font-size:.8rem;color:#bdc7d5}
.sequence-controls{display:flex;justify-content:center;align-items:center;gap:20px;margin:0 0 20px;flex-wrap:wrap;font-size:.875rem;color:#e4c98b}
.sequence-controls button{min-height:44px;padding:9px 19px;background:#ffffff08;color:#ffedc4;border:1px solid #bc965c77;border-radius:30px;font:inherit;cursor:pointer}
.sequence-controls button:hover{background:#ffffff15}.sequence-controls button:focus-visible{outline:2px solid #ffedc4;outline-offset:3px}
.sequence-note{font-size:.8rem;line-height:1.9;max-width:820px}
@media(max-width:1100px) and (min-width:701px){.phone-flow{gap:13px}.step-label b{font-size:.8rem}.step-label span{font-size:.75rem}}
@media(max-width:700px){.phone-step{flex-basis:min(72vw,285px)}.phone-flow{padding-inline:calc((100vw - min(72vw,285px))/2);scroll-padding-inline:calc((100vw - min(72vw,285px))/2)}.step-label b{font-size:1rem}.step-label span{font-size:.875rem}.sequence-controls{gap:14px}.sequence-note{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.phone--artwork{transition:none}.phone-step.is-active{transform:none}}

/* The five independent phones echo the supplied cream-and-gold presentation. */
.wallet-registration{overflow:hidden;border:1px solid #c7a66b77;border-radius:22px;background:#0b1d36;box-shadow:0 18px 50px #0004}
.comic-tabs{display:flex;flex-wrap:wrap;gap:10px;padding:14px 18px;border-bottom:1px solid #c7a66b55}
.comic-tabs [role=tab]{min-height:46px;padding:10px 26px;border:1px solid #c7a66b77;border-radius:10px;background:#ffffff08;color:#fff3d7;font:700 1rem/1.5 "Noto Sans JP",sans-serif;cursor:pointer}
.comic-tabs [role=tab][aria-selected=true]{background:#e0b665;color:#122037;border-color:#f5d390;box-shadow:0 3px 12px #0003}
.comic-tabs [role=tab]:hover{border-color:#fff3d7}
.comic-tabs [role=tab]:focus-visible,.comic-panel:focus-visible{outline:3px solid #fff3d7;outline-offset:-4px}
.comic-panel[hidden]{display:none}
.comic-panel>img{display:block;width:100%;height:auto}
.wallet-registration{display:grid;grid-template-columns:minmax(0,1fr) auto}
.comic-tabs{grid-column:1;grid-row:1;align-items:center}
.comic-tabs [role=tab]{padding-inline:14px}
.comic-panel{grid-column:1/-1;grid-row:2;min-width:0}
.comic-lounge-link{grid-column:2;grid-row:1;align-self:center;margin:14px 18px 14px 0;display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 18px;border:1px solid #e8c984;border-radius:10px;background:linear-gradient(120deg,#9b713b,#6d4928);color:#fff3d7;font:700 1rem/1.5 "Noto Sans JP",sans-serif;text-decoration:none;white-space:nowrap}
.comic-lounge-link:hover{background:#a67b43}.comic-lounge-link:focus-visible{outline:3px solid #fff3d7;outline-offset:3px}
@media(max-width:700px){.wallet-registration{grid-template-columns:minmax(0,1fr)}.comic-lounge-link{grid-column:1;grid-row:3;margin:14px;min-height:48px}}
@media(max-width:700px){.wallet-registration{border-radius:16px}.comic-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px}.comic-tabs [role=tab]{padding:10px 6px;font-size:.875rem;overflow-wrap:anywhere}}
.wallet-top-banner{margin:0 auto 22px;overflow:hidden;border:1px solid #c7a66b77;border-radius:26px;background:#061225;box-shadow:0 18px 50px #0004}
.wallet-top-banner img{display:block;width:100%;height:auto}
@media(max-width:700px){.wallet-top-banner{border-radius:18px;margin-bottom:16px}}
.sequence{padding:28px 22px 20px;margin:0 auto 32px;border:1px solid #c7a66b;border-radius:26px;background:linear-gradient(180deg,#fffdf7 0%,#eee9df 48%,#8c9197 65%,#102035 84%);box-shadow:0 22px 65px #0005}
.sequence-head{max-width:none;margin-bottom:6px;text-align:left}
.sequence-head .eyebrow{color:#846131;font-size:.65rem}
.sequence-head h1{font-size:clamp(1rem,2.2vw,1.6rem);color:#141b26;letter-spacing:.01em;line-height:1.6;margin:9px 0}
.sequence-head .lead{font-size:.8rem;color:#525762;max-width:850px}
.phone-flow{gap:28px;padding:26px 7px 20px}
.phone-step.is-active{transform:translateY(-5px)}
.phone--artwork{border:5px solid #b4b3af;border-radius:30px;background:#fff;box-shadow:0 0 0 2px #4f5152,inset 0 0 0 3px #101319,0 14px 25px #0004}
.phone--artwork:before{top:3px;height:14px;width:40%;border-radius:0 0 10px 10px}
.phone--artwork .phone-status{height:29px;margin:3px 5px 0;padding:2px 7px 0;background:#fff;color:#12151a;border-radius:20px 20px 0 0}
.pass-art{inset:35px 8px 13px;border-radius:9px}
.is-active .phone--artwork{border-color:#ffe7a5;box-shadow:0 0 0 2px #b78b3c,inset 0 0 0 3px #101319,0 0 20px #ffdb78,0 0 42px #ffd77b99,0 14px 25px #0005}
.step-label{position:relative;z-index:3;margin-top:-5px;min-height:106px}
.step-label b{display:flex;align-items:center;justify-content:center;min-height:40px;padding:7px 3px;border:1px solid #bfa575;border-radius:11px;background:linear-gradient(#17232c,#06111b);color:#fff9e9;font-size:.8rem;box-shadow:0 3px 9px #0005;transition:box-shadow .6s,border-color .6s}
.step-label span{margin:9px auto 0;max-width:165px;color:#f0f2f6;font-size:.78rem;line-height:1.65;text-shadow:0 1px 3px #000}
.is-active .step-label b{border-color:#fff1b9;box-shadow:0 0 10px #ffda85,0 0 24px #e9b75099}
.flow-arrow{right:-26px;top:40%;width:25px;height:38px;display:grid;place-items:center;font:bold 2.1rem/1 Georgia,serif;color:#1d566c;text-shadow:0 0 9px #fff,0 0 15px #fff;transition:color .6s}
.is-active .flow-arrow{color:#be8b27;text-shadow:0 0 10px #fff0af}
.sequence-controls{margin-bottom:9px}.sequence-note{color:#c3ccd8;font-size:.7rem}
@media(max-width:1100px) and (min-width:701px){.sequence{padding-inline:16px}.phone-flow{gap:18px}.phone--artwork{border-width:4px;border-radius:24px}.step-label b{font-size:.64rem}.step-label span{font-size:.68rem}.flow-arrow{right:-19px;width:18px}.pass-art{inset:34px 5px 11px}.phone--artwork .phone-status{font-size:7px}}
@media(max-width:700px){.sequence{padding:20px 10px 17px;border-radius:18px;background:linear-gradient(180deg,#fffdf7 0%,#eee9df 52%,#102035 84%)}.sequence-head{padding:0 6px}.sequence-head h1{font-size:1.05rem}.sequence-head .lead{font-size:.76rem}.phone-flow{gap:25px;padding-top:23px;padding-bottom:10px}.phone--artwork{border-width:6px;border-radius:32px}.step-label b{font-size:.95rem;min-height:44px}.step-label span{font-size:.82rem}.flow-arrow{right:-25px}.sequence-controls{font-size:.78rem}.hero-visual{width:calc(100% - 22px)}}
@media(prefers-reduced-motion:reduce){.phone-step.is-active{transform:none}.step-label b,.flow-arrow{transition:none}}