/* Official cover typography is already diagonal. These layers never rotate it. */
.intro{position:fixed;inset:0;z-index:150;overflow:hidden;background:#100f0f;isolation:isolate}
.intro-lines{position:absolute;inset:10% 6%;border:1px solid #78614460;transform:rotate(-8deg);pointer-events:none}
.intro-lines:after{content:'';position:absolute;inset:9px;border:1px solid #78614430}
.intro-face{position:absolute;max-width:none;height:auto;width:68vw;filter:none;pointer-events:none}
.intro-rabbit{left:-11vw;top:10svh;bottom:auto;transform:none;animation:rabbit-in 1.5s cubic-bezier(.2,.6,.2,1) both}
.intro-rebel{right:-21vw;top:calc(66svh - 52.94vw);transform:rotate(180deg);animation:rebel-in 1.5s cubic-bezier(.2,.6,.2,1) both}
.intro-wordmark{position:absolute;z-index:3;inset:auto;left:37%;top:18%;width:min(34vw,60svh);display:block;transform:none;animation:title-in 1.3s .2s both}
.intro-wordmark>img.intro-game-logo{width:100%;height:auto;max-width:none;margin:0;filter:drop-shadow(0 3px 3px #000b)}
.intro-wordmark>img.intro-novel-logo{position:absolute;top:1%;left:-15%;width:13%;height:auto;margin:0;filter:drop-shadow(0 2px 3px #000)}
.intro-wordmark>img.intro-emblem{position:absolute;top:28%;right:0;width:22%;height:auto;margin:0;filter:drop-shadow(0 2px 3px #000)}
.intro-index{position:absolute;top:24px;left:24px;z-index:4;writing-mode:vertical-rl;font-size:10px;letter-spacing:.22em;color:#cfc8bd}
.intro-skip{position:absolute;right:max(28px,env(safe-area-inset-right));bottom:max(26px,env(safe-area-inset-bottom));z-index:5;font-size:12px;letter-spacing:.16em;padding:12px 0;border-bottom:1px solid var(--gold);text-shadow:0 1px 4px #000}
.intro-skip span{margin-left:26px}.intro-progress{position:absolute;bottom:0;left:0;height:2px;background:var(--gold);z-index:5;animation:progress 3.8s linear both}
.intro.leaving{animation:intro-out .9s cubic-bezier(.7,0,.2,1) both}
.intro.leaving .intro-wordmark{animation:wordmark-out .75s both}.intro.leaving .intro-rabbit{animation:rabbit-out .9s both}.intro.leaving .intro-rebel{animation:rebel-out .9s both}
@keyframes rabbit-in{from{opacity:0;transform:translate(-9vw,9vh) scale(1.08)}to{opacity:1;transform:none}}
@keyframes rebel-in{from{opacity:0;transform:translate(9vw,-9vh) rotate(180deg) scale(1.08)}to{opacity:1;transform:rotate(180deg)}}
@keyframes title-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes progress{from{width:0}to{width:100%}}@keyframes intro-out{to{clip-path:polygon(0 0,100% 0,100% 0,0 0);visibility:hidden}}
@keyframes wordmark-out{to{opacity:0;transform:scale(1.2)}}@keyframes rabbit-out{to{transform:translate(-10vw,20vh);opacity:0}}@keyframes rebel-out{to{transform:translate(10vw,-20vh) rotate(180deg);opacity:0}}
.brand{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:145px;flex-shrink:0}
.brand img.brand-novel{width:56px;height:auto}.brand img.brand-game{width:145px;height:auto}
.hero-rabbit,.hero-rebel{transform:none;opacity:1}.hero-rebel{right:30%}.hero-rabbit{right:-6%}
.product-figure img{height:auto;aspect-ratio:3579/2397;max-height:none;object-fit:contain}
.collection-detail{grid-template-columns:1.1fr .9fr;align-items:center;gap:7vw}
.envelope-figure{display:grid;grid-template-columns:minmax(130px,220px) 1fr;align-items:center;gap:28px}
.envelope-figure img{width:100%;height:auto;box-shadow:0 18px 36px #2e231929}
.envelope-figure figcaption{font-family:var(--serif);font-size:18px;line-height:2;max-width:220px}
.envelope-figure figcaption span,.envelope-figure figcaption small{display:block;font-family:var(--sans);font-size:10px;line-height:1.8;letter-spacing:.08em;color:#786448}
.envelope-figure figcaption span{margin-bottom:14px}.envelope-figure figcaption small{margin-top:16px;font-size:11px}
.site-footer,.footer-top p,.footer-bottom{text-align:center}.footer-top,.footer-bottom{flex-direction:column;align-items:center;justify-content:center}
.footer-top{gap:26px}.footer-logos,.footer-bottom>div{justify-content:center;flex-wrap:wrap}.footer-bottom{gap:22px;padding-top:25px}
.pickup-field{border:0;padding:0;margin:25px 0}.pickup-field legend{font-size:13px;width:100%;margin-bottom:12px}.pickup-field legend span{float:right;font-size:11px;color:var(--muted)}
.pickup-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.pickup-options label{position:relative;cursor:pointer}.pickup-options input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pickup-options span{display:block;border:1px solid var(--line);padding:13px 16px;font-size:12px;text-align:center;transition:background .2s,border-color .2s;color:var(--muted)}
.pickup-options b{display:block;font-family:Georgia,serif;font-weight:400;font-size:24px;line-height:1.45;letter-spacing:.05em;color:var(--paper)}
.pickup-options input:checked+span{background:#c2a5751a;border-color:var(--gold);color:var(--gold)}.pickup-options input:focus-visible+span{outline:2px solid var(--pink);outline-offset:4px}
.confirmation-status{font-size:12px;color:var(--muted);line-height:1.9;margin:0 0 24px}
@media(max-width:1000px){.collection-detail{gap:38px}.envelope-figure{grid-template-columns:1fr;text-align:center}.envelope-figure img{width:180px;margin:auto}.envelope-figure figcaption{margin:auto}}
@media(max-width:760px){.brand{width:112px;gap:2px}.brand img.brand-novel{width:46px}.brand img.brand-game{width:112px}.hero-rabbit,.hero-rebel{transform:none}.hero-rebel{right:35%}.hero-rabbit{right:-5%}.collection-detail{grid-template-columns:1fr}.envelope-figure{grid-template-columns:130px 1fr;gap:24px;text-align:left;margin-top:3px}.envelope-figure img{width:130px}.envelope-figure figcaption{font-size:16px;margin:0}.footer-top,.footer-bottom{align-items:center}.footer-top p{text-align:center;line-height:2.2}.footer-logos{gap:30px}.footer-bottom>div{gap:20px}}
@media(max-aspect-ratio:4/5){
 .intro-face{width:155vw}.intro-rabbit{left:-30vw;top:49svh;bottom:auto}.intro-rebel{width:140vw;right:-62vw;top:calc(35svh - 109vw)}
 .intro-wordmark{left:17%;top:29%;width:77vw;transform:none}.intro-wordmark>img.intro-novel-logo{left:-17%;width:13%;top:4%}.intro-wordmark>img.intro-emblem{top:28%;right:0;width:22%}
 .intro-index{font-size:8px;left:13px;top:18px}.intro-skip{right:22px;bottom:calc(20px + env(safe-area-inset-bottom));font-size:11px}
}
@media(max-aspect-ratio:4/5) and (max-height:720px){.intro-wordmark{top:28%;width:70vw;left:21%}.intro-rabbit{top:48svh}.intro-rebel{top:calc(34svh - 109vw)}}
@media(prefers-reduced-motion:reduce){.intro,.intro *{animation:none!important;transition:none!important}.intro.leaving{opacity:0}}

.pickup-options input:disabled+span{opacity:.35;cursor:not-allowed}

/* V3: type-I portraits, matched partner marks, and the physical invitation. */
.player-selector button img{width:112px;height:112px;object-fit:contain;object-position:center top;top:0;right:4px;filter:none;opacity:.7}
.player-selector button[aria-pressed=true] img,.player-selector button:hover img{transform:none;opacity:1}
.player-content>h2{font-size:clamp(27px,2.5vw,40px);line-height:1.65}
.footer-logos img,.footer-logos img:last-child{height:64px;width:auto;max-height:none;object-fit:contain}
/* V4.1: arrows change states; each change starts a new slide animation. */
.player-visual{touch-action:auto}
.player-visual:focus-visible{outline-offset:-6px}
.player-visual #player-art{pointer-events:none;transform:none;transition:opacity .18s}
.player-visual #player-art.swapping{opacity:0}
.player-visual #player-art.state-entering{animation:player-state-in .36s cubic-bezier(.22,.75,.2,1) both}
@keyframes player-state-in{from{opacity:0;transform:translateX(var(--player-entry,0px))}to{opacity:1;transform:translateX(0)}}
.state-arrow{position:absolute;top:44%;z-index:4;display:grid;place-items:center;width:48px;height:60px;padding:0;border:1px solid #9b7b4f40;border-radius:2px;background:#f1e5cebb;color:#6a5037;transition:background .2s,border-color .2s}
.state-arrow:hover{background:#f9efdde8;border-color:#9b7b4f8a}
.state-arrow svg,.dialog-close svg{display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.state-arrow-prev{left:clamp(16px,4vw,60px)}.state-arrow-next{right:clamp(16px,4vw,60px)}
.state-caption{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-top:28px;color:#786448;line-height:1.6}
.state-current{font-size:14px;letter-spacing:.05em;min-width:78px;color:#3e3328}
.state-progress{display:inline-flex;gap:6px;align-items:center}
.state-progress i{display:block;width:5px;height:5px;border-radius:50%;background:#9b7b4f40;transition:background .2s}
.state-progress i.is-current{background:#a62564}
#player-state-hint{font-size:12px;letter-spacing:.02em}

/* Geometric strokes stay centered independently of the phone's typeface. */
#ability-dialog .dialog-close{box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;padding:0;margin:0;line-height:0;flex-shrink:0}
#ability-dialog h2{min-height:44px;margin:0 56px 20px 0;display:flex;align-items:center}
#ability-dialog .dialog-close svg{width:22px;height:22px;stroke-width:1.8}

/* The invitation and both envelope images share one center and bottom edge. */
.envelope-figure{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px;margin:0;text-align:center}
.envelope-button{display:block;width:min(100%,300px);padding:0;margin:0 auto;border:0;cursor:pointer;color:#5e4930;text-align:center;position:relative}
.envelope-button:focus-visible{outline:2px solid #b72973;outline-offset:8px;border-radius:5px}
.envelope-stage{--envelope-width:204px;--envelope-bottom:36px;display:block;position:relative;isolation:isolate;width:100%;height:510px;margin:0 auto}
.envelope-stage img{position:absolute;box-shadow:none;max-width:none;margin:0;left:50%;bottom:var(--envelope-bottom);width:var(--envelope-width);height:auto;transform:translateX(-50%);filter:drop-shadow(0 16px 16px #2e231925);transition:opacity .52s ease,transform .76s cubic-bezier(.22,.75,.2,1)}
.envelope-stage .envelope-open{z-index:3;opacity:0}
.envelope-stage .envelope-closed{z-index:4;opacity:1}
.envelope-stage .acrylic-card{z-index:2;width:calc(var(--envelope-width)*.86);bottom:calc(var(--envelope-bottom) + 10px);opacity:0;transition:opacity .24s ease,transform .76s cubic-bezier(.22,.75,.2,1)}
.envelope-glow{position:absolute;inset:9% -8% 6%;border-radius:50%;background:radial-gradient(ellipse,#caab693d,transparent 65%);opacity:0;transition:opacity .8s;pointer-events:none}
.is-open .envelope-open{opacity:1}.is-open .envelope-closed{opacity:0}
.is-drawing .envelope-open{transform:translate(-50%,calc(var(--envelope-width)*.25))}
.is-drawing .acrylic-card{opacity:1;transform:translate(-50%,calc(var(--envelope-width)*-.57))}
.is-drawing .envelope-glow{opacity:1}
.envelope-button.is-resetting .envelope-stage *{transition:none!important}
.envelope-action{display:inline-block;border-bottom:1px solid #9b7b4f;padding:12px 0;font-size:12px;letter-spacing:.1em;min-height:44px}
.envelope-action span{margin-left:14px}
.envelope-figure figcaption{width:100%;max-width:290px;margin:0 auto;text-align:center}
.envelope-figure figcaption strong{font-weight:400;display:block;min-height:4em}
.envelope-figure figcaption small{letter-spacing:0;font-size:11px}

/* The native modal traps focus; its single full-screen button dismisses it. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
html.acrylic-open,html.acrylic-open body{overflow:hidden}
dialog.acrylic-dialog{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;isolation:isolate}
.acrylic-dialog::backdrop{background:#09070af5;backdrop-filter:blur(7px);animation:acrylic-backdrop-in .38s ease both}
.acrylic-dismiss{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;z-index:1;cursor:pointer;border:0;background:transparent;outline:none}
.acrylic-dismiss:focus-visible{outline:1px solid #c2a57588;outline-offset:-10px}
.acrylic-presentation{position:absolute;inset:0;display:grid;place-items:center;padding:calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 8px) calc(env(safe-area-inset-bottom) + 38px) calc(env(safe-area-inset-left) + 8px);pointer-events:none;z-index:2;animation:acrylic-card-in .66s .3s cubic-bezier(.22,.75,.2,1) both}
.acrylic-focus-frame{position:relative;width:min(calc((100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 48px)*586/1150),calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px),520px);aspect-ratio:586/1150;filter:drop-shadow(0 24px 45px #0009)}
.acrylic-dialog img.acrylic-focus-card{display:block;width:100%;height:100%;max-height:none;max-width:none;margin:0;object-fit:contain;filter:drop-shadow(0 0 1px #fff7)}
.acrylic-dismiss-hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 12px);margin:0;text-align:center;font-size:11px;letter-spacing:.15em;color:#c9bba499;z-index:2;pointer-events:none;animation:acrylic-backdrop-in .5s .6s both}
.acrylic-dialog.is-closing{animation:acrylic-out .26s ease both}
.acrylic-dialog.is-closing::backdrop{animation:acrylic-out .26s ease both}
@keyframes acrylic-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes acrylic-card-in{from{opacity:0;transform:translateY(12px) scale(.975)}to{opacity:1;transform:none}}
@keyframes acrylic-out{to{opacity:0}}

@media(max-width:1200px){.collection-detail{grid-template-columns:1fr 1fr;gap:35px}.envelope-figure figcaption strong{min-height:0}}
@media(max-width:760px){.collection-detail{grid-template-columns:1fr}.envelope-figure{margin-top:20px}.envelope-figure figcaption{font-size:19px}.player-selector button img{width:98px;height:98px;top:0;right:0}.player-content>h2{display:block;font-size:25px;margin-bottom:25px}.footer-logos img,.footer-logos img:last-child{height:60px;width:auto}.section-title-row h2{font-size:clamp(27px,7vw,34px)}.state-arrow{top:40%;width:44px;height:56px}.state-arrow-prev{left:18px}.state-arrow-next{right:18px}.state-caption{gap:10px 12px;margin-top:22px}#player-state-hint{font-size:11px}}
@media(max-width:360px){.envelope-stage{--envelope-width:190px;height:480px}}
@media(prefers-reduced-motion:reduce){.player-visual #player-art,.state-arrow,.state-progress i,.envelope-stage *,.acrylic-dialog,.acrylic-dialog *,.acrylic-dialog::backdrop{animation:none!important;transition:none!important}.acrylic-dialog.is-closing,.acrylic-dialog.is-closing::backdrop{opacity:0}}