:root{--gold:#f7d68f;--cream:#fff1d7;--night:#060b09;--accent:#f6d08b}
*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%;background:var(--night);color:var(--cream)}body{font-family:Georgia,'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif;overflow-x:hidden}button{font:inherit;cursor:pointer;color:inherit}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #fff1b5!important;outline-offset:3px!important}button:disabled{cursor:not-allowed}[hidden]{display:none!important}
.ambient-backdrop{position:fixed;inset:-50px;z-index:-5;background:linear-gradient(#04080899,#040705b4),url('assets/top.webp') center/cover;filter:blur(20px) brightness(.60)}
.stage-frame{width:100%;min-height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden}.art-stage{width:min(100vw,177.6833dvh);aspect-ratio:1672/941;position:relative;box-shadow:0 0 80px #0009;flex-shrink:0;background:#07110d;user-select:none}.art-stage>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.hotspots,.hover-sprites{position:absolute;inset:0}.hover-sprites{z-index:4;pointer-events:none}.hotspots{z-index:5}.hotspot{border:0;background:transparent;padding:0;position:absolute;display:block;cursor:pointer;border-radius:12px;color:transparent;box-shadow:none;-webkit-tap-highlight-color:transparent}.hotspot:hover,.hotspot:focus-visible{background:radial-gradient(ellipse,#ffe8b017 0%,#ffed7f00 70%)}.gem-hit{clip-path:polygon(50% 0,88% 12%,100% 57%,88% 89%,50% 100%,12% 88%,0% 58%,12% 12%)}.gate-hit{clip-path:polygon(50% 0,95% 7%,100% 19%,100% 81%,50% 100%,0 81%,0 19%,5% 7%)}.hotspot.mirror-hit:hover,.hotspot.begin-hit:hover,.hotspot.video-hit:hover{box-shadow:0 0 27px #ffe18e99,inset 0 0 18px #ffe8a54a;border-radius:30px}.hotspot.nav-hit:hover{background:#fff1ae2b;border-radius:8px}.hover-sprite{position:absolute;display:block;object-fit:fill;opacity:0;transform:scale(1);transition:opacity .18s ease,transform .44s cubic-bezier(.2,.77,.18,1.08),filter .35s ease;transform-origin:50% 50%;filter:drop-shadow(0 0 0px #ffe8a0);will-change:transform,opacity}.hover-sprite.raised{opacity:1;transform:scale(1.095);filter:drop-shadow(0 0 14px #fff1c6) drop-shadow(0 0 26px #f4b95c)}.gate-sprite.raised{transform:scale(1.08)}
.mobile-map{display:none}
.transition{position:fixed;inset:0;z-index:900;pointer-events:none;opacity:0;--x:50%;--y:50%}.transition.active{animation:fade-veil .9s ease both}.transition-ring{position:absolute;left:var(--x);top:var(--y);width:0;height:0;transform:translate(-50%,-50%);border:2px solid #fff0b6;border-radius:50%;box-shadow:0 0 40px 8px #f7ce7e}.transition.active .transition-ring{animation:gate-ring .84s cubic-bezier(.18,.68,.25,1) both}.transition-flare{position:absolute;left:var(--x);top:var(--y);width:4px;height:4px;border-radius:50%;background:#fff4cb;box-shadow:0 0 30px 14px #ffd68d,0 0 110px 45px #ffe2978f}.transition.active .transition-flare{animation:gate-flare .85s both}.transition-mist{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at var(--x) var(--y),#fff4d5df,#efcf90a6 19%,#151610b8 65%,#070806e6)}.transition.active .transition-mist{animation:gate-mist .9s both}@keyframes fade-veil{0%{opacity:0}19%,74%{opacity:1}100%{opacity:0}}@keyframes gate-ring{0%{width:1px;height:1px;opacity:1}100%{width:150vmax;height:150vmax;opacity:0}}@keyframes gate-flare{0%{transform:translate(-50%,-50%) scale(.4);opacity:.2}53%{transform:translate(-50%,-50%) scale(21);opacity:1}100%{transform:translate(-50%,-50%) scale(9);opacity:0}}@keyframes gate-mist{0%,100%{opacity:0}46%{opacity:1}68%{opacity:.65}}
/* Third-level genre pages share the same garden and costume of their parent world. */
.detail-page{position:relative;isolation:isolate;min-height:100dvh;background:#080d0b;overflow:hidden;color:#fff0da}.detail-backdrop{position:absolute;inset:0;z-index:-3;background-image:linear-gradient(90deg,#070b0be9 0%,#0b0c0dd4 42%,#090b0be4 100%),var(--poster);background-position:center 20%;background-size:cover;filter:saturate(.9)}.detail-page:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-2;background:radial-gradient(ellipse at 36% 49%,color-mix(in srgb,var(--accent),transparent 82%),transparent 55%),repeating-linear-gradient(0deg,transparent 0px,transparent 8px,#ffc97b06 9px,#0000 10px)}
.detail-header{position:relative;display:grid;grid-template-columns:180px 1fr 190px;align-items:center;gap:16px;z-index:2;min-height:88px;padding:10px clamp(16px,3.2vw,55px);background:#050a08a6;border-bottom:1px solid #e9c97855;backdrop-filter:blur(10px)}.detail-logo{display:inline-flex;flex-direction:column;text-decoration:none;color:#ffdb91;font:normal 54px/.82 Georgia,serif;letter-spacing:-.08em;text-shadow:0 0 12px #ffd3847a}.detail-logo small{font:9px/1.2 Georgia,serif;letter-spacing:.14em;margin-top:8px}.detail-nav{display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.8vw,26px);white-space:nowrap}.detail-nav button{border:0;background:transparent;color:#f6ead4;font-size:clamp(10px,.85vw,13px);padding:14px 4px}.detail-nav button[aria-current],.detail-nav button:hover{color:#ffdf92;text-shadow:0 0 16px #ffe29a}.top-return,.quiet-control,.gold-control{border:1px solid #f7d791b0;border-radius:32px;background:linear-gradient(#362916e5,#0b0d0be8);color:#ffe8ae;padding:13px 19px;box-shadow:0 0 18px #e6b5524d,inset 0 0 12px #ffe2a429;transition:transform .2s,box-shadow .2s}.top-return{font-size:12px}.top-return:hover,.gold-control:hover,.quiet-control:hover{transform:translateY(-3px);box-shadow:0 0 35px #ffce7b9c}.quiet-control{background:#070c0cbb;border-color:#c7aa716e;box-shadow:none}.detail-content{max-width:1510px;margin:0 auto;padding:28px clamp(18px,5vw,95px) 90px}.detail-heading{text-align:center;margin:0 auto 12px;max-width:850px}.detail-trail{font-size:12px;letter-spacing:.22em;color:#edc789}.detail-heading h1{font-size:clamp(43px,5.6vw,79px);line-height:1.08;font-weight:400;letter-spacing:.04em;margin:10px 0;color:#ffebbe;text-shadow:0 3px 30px #edc07390}.detail-heading p{font-size:clamp(13px,1.3vw,18px);color:#e6c88f;letter-spacing:.09em;margin:0}.detail-composition{display:grid;grid-template-columns:minmax(330px,1fr) minmax(340px,.85fr);gap:clamp(28px,6vw,100px);align-items:center;min-height:480px}.detail-art{height:475px;max-width:550px;position:relative;display:flex;justify-content:center;align-items:center;margin:auto;width:100%}.art-halo{position:absolute;inset:8% 9% 9%;border-radius:50%;border:2px solid #f4ca80a1;box-shadow:0 0 0 7px #f8d08a0e,0 0 100px #dbae5b60,inset 0 0 70px #f4d08635;transform:rotate(-15deg)}.art-halo:after{content:'';position:absolute;inset:18% -12%;border:1px solid #ffe1a88a;border-radius:50%;transform:rotate(36deg);box-shadow:0 0 30px #e4b66488}.detail-gem-frame{position:relative;z-index:1;width:min(75%,390px);max-height:93%;display:flex;justify-content:center;align-items:center;filter:drop-shadow(0 0 18px var(--accent)) drop-shadow(0 0 34px #dda4535c);animation:gem-float 6s ease-in-out infinite}.detail-gem-frame img{display:block;width:100%;height:auto;max-height:430px;object-fit:contain}.gem-caption{position:absolute;z-index:2;bottom:0;padding:13px 25px;min-width:260px;text-align:center;border:1px solid #edc47daa;border-radius:28px;background:#0b0a08ea;color:#f7d898;font:16px Georgia,serif;letter-spacing:.07em;box-shadow:0 0 30px #f7bd5759}.detail-info{max-width:590px;padding:24px 5px}.detail-ornament{font-size:22px;color:var(--accent);letter-spacing:.24em}.detail-overline{font-size:12px;letter-spacing:.25em;color:#c8ae82;margin:16px 0}.detail-info h2{font-weight:400;font-size:clamp(36px,4vw,55px);margin:4px 0 20px;letter-spacing:.14em;color:#fce3ac}.detail-info>p{font-size:clamp(16px,1.45vw,21px);line-height:2.1;margin:0 0 25px}.seed-status{display:flex;align-items:center;gap:13px;padding:18px 19px;border:1px solid #c9af735d;background:#13130cc0;border-radius:5px;margin:18px 0 26px;max-width:460px}.status-dot{width:9px;height:9px;border-radius:50%;background:#e2bd7d;box-shadow:0 0 12px #f2d38c}.seed-status strong{font:12px Georgia,serif;color:#eacb8d;letter-spacing:.09em;display:block}.seed-status span:not(.status-dot){font-size:12px;color:#d9c8ac;display:block;margin-top:6px}.detail-actions{display:flex;flex-wrap:wrap;gap:12px}.related-section{margin-top:18px;border-top:1px solid #e8c27b67;padding-top:23px}.related-heading{text-align:center;margin-bottom:25px}.related-heading span{font:12px Georgia,serif;letter-spacing:.22em;color:#ebc583}.related-heading h2{font-size:25px;font-weight:400;margin:9px 0;color:#fff0c9}.related-gems{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:17px}.related-card{border:1px solid #edca8a61;border-radius:13px;background:#0b110da8;min-width:0;padding:7px 7px 14px;transition:transform .3s,box-shadow .3s;overflow:hidden;box-shadow:inset 0 0 16px #d2b07812}.related-card img{width:100%;height:160px;object-fit:contain;display:block;filter:drop-shadow(0 0 9px #e5bd7a6b)}.related-card span{display:block;font-size:clamp(10px,.9vw,15px);color:#f7ddb0;overflow-wrap:anywhere}.related-card small{display:block;margin-top:7px;color:#cabca6;font-size:11px}.related-card:hover{transform:translateY(-9px) scale(1.03);box-shadow:0 0 28px #f3c78377}.related-card[aria-current]{outline:2px solid #ffe59e}
@keyframes gem-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
dialog{color:#ffead0;background:linear-gradient(130deg,#1b1b15f8,#090e0ded);border:1px solid #edcd8a9d;border-radius:20px;box-shadow:0 20px 130px #000d,0 0 75px #f4c67c52;max-width:min(95vw,1050px);max-height:90dvh;overflow-y:auto}dialog::backdrop{background:#030503de;backdrop-filter:blur(7px)}.dialog-close{position:absolute;right:10px;top:10px;width:43px;height:43px;font-size:27px;border-radius:50%;border:1px solid #dec17e;background:#13110c;z-index:4}.dialog-eyebrow{text-align:center;color:#e1bf86;letter-spacing:.2em;font-size:12px}.gate-dialog{text-align:center;padding:58px 32px 38px;width:min(1000px,95vw)}.gate-dialog h2,.menu-dialog h2{font-weight:400;font-size:clamp(25px,3vw,40px);margin:14px 0;color:#ffe8b7}.gate-dialog p{color:#d9c49e}.gate-cards{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gate-card{position:relative;overflow:hidden;border:1px solid #d8b46e99;background:#141911;border-radius:12px;height:165px;padding:0}.gate-card img{width:100%;height:100%;object-fit:cover;filter:brightness(.75);transition:transform .4s}.gate-card strong{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#080b08e8);color:#ffe5a4;padding:22px 6px 10px;font-size:16px}.gate-card:hover img{transform:scale(1.12);filter:brightness(1)}.video-dialog{padding:48px 23px 20px}.video-dialog video{display:block;max-width:85vw;max-height:72dvh;width:auto;height:auto;border-radius:8px;background:#000}.video-dialog p{text-align:center;color:#dec18c;letter-spacing:.16em;font-size:11px}.menu-dialog{padding:55px 30px 30px;width:min(500px,95vw);text-align:center}.menu-dialog nav{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0}.menu-dialog nav button{background:#13150d;border:1px solid #f1cf7d7b;border-radius:8px;padding:18px 8px}.menu-dialog nav button:hover{background:#48311a}
@media (max-width:1100px){.detail-header{grid-template-columns:160px 1fr 155px;gap:8px}.detail-nav{gap:4px}.detail-nav button{font-size:10px}.detail-content{padding-left:20px;padding-right:20px}.related-gems{gap:9px}.related-card img{height:135px}}
@media (max-width:800px){.stage-frame{min-height:auto;padding-top:44px;align-items:flex-start}.art-stage{width:100vw}.hotspots,.hover-sprites{display:none}.mobile-map{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:18px 12px 24px;position:relative;z-index:6;background:#080c09ed}.mobile-map button{min-height:44px;border:1px solid #eec77ab8;background:#211a11;border-radius:24px;padding:9px 13px;font-size:12px}.mobile-map button:hover{background:#6f4d24}.detail-header{display:flex;flex-direction:column;gap:12px}.detail-logo{font-size:45px;text-align:center}.detail-nav{max-width:100%;overflow-x:auto;gap:14px;justify-content:flex-start}.top-return{display:none}.detail-composition{grid-template-columns:1fr;gap:0}.detail-art{height:350px}.detail-gem-frame{width:min(63%,265px)}.gem-caption{bottom:8px}.detail-info{text-align:center;margin:0 auto;padding:10px 5px 30px}.seed-status{margin:20px auto}.detail-actions{justify-content:center}.related-gems{grid-template-columns:repeat(3,minmax(0,1fr))}.related-card img{height:145px}.gate-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.detail-heading h1{font-size:40px}.detail-composition{display:block}.detail-art{height:315px}.related-gems{grid-template-columns:repeat(2,minmax(0,1fr))}.related-card img{height:135px}.gate-dialog{padding:58px 14px 24px}.gate-cards{gap:8px}.gate-card{height:115px}.gate-card strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Baked poster titles must never appear as ghosted duplicate text behind the detail header. */
.detail-backdrop{filter:blur(17px) saturate(.87) brightness(.67);transform:scale(1.05)}
@media(max-width:800px){
.mobile-map{display:flex;flex-direction:column;align-items:center;min-height:calc(100dvh - 44px - 56.3vw);padding:22px 14px 35px;gap:15px;background:radial-gradient(ellipse at 50% 20%,#6d492049,#100e0b 63%,#080c09)}
.mobile-guide{text-align:center;display:flex;flex-direction:column;gap:8px;margin:0 auto 3px}.mobile-guide span{font:10px Georgia,serif;letter-spacing:.23em;color:#d9ba76}.mobile-guide strong{font-size:18px;font-weight:400;color:#ffdf9f;letter-spacing:.08em}
.mobile-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:520px}.mobile-tile{min-width:0;display:flex;align-items:center;flex-direction:column;overflow:hidden;padding:5px 5px 12px;border:1px solid #deba7677;border-radius:15px;background:linear-gradient(#2d1e12b8,#090c0beb);color:#ffe0a8;box-shadow:0 0 16px #d0a76b1a}.mobile-tile img{width:100%;height:90px;object-fit:cover;border-radius:10px 10px 3px 3px;filter:saturate(1.13);pointer-events:none}.mobile-tile strong{font:13px Georgia,serif;margin-top:9px;letter-spacing:.04em}.mobile-tile small{color:#d1bea0;font-size:10px;margin-top:4px}.mobile-tile:active,.mobile-tile:hover{border-color:#ffdf9c;box-shadow:0 0 21px #e5b25b82;background:#443019}
.mobile-video,.mobile-back{border:1px solid #e8c17a8a;border-radius:30px;background:#1c170ed6;min-height:44px;padding:8px 23px;color:#f3d79c;font-size:13px}.mobile-world-switch{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:7px}.mobile-world-switch button{font:11px Georgia,serif;padding:10px 12px;min-height:40px}
}

/* Phase 2c (2026-11-03): framed bottom-center About link on the top page. */
.top-about{position:absolute;left:50%;bottom:2.2%;transform:translateX(-50%);z-index:7;display:none;flex-direction:column;align-items:center;gap:0;padding:10px 34px 9px;border:1px solid rgba(240,201,107,.55);border-radius:999px;background:linear-gradient(rgba(30,22,8,.72),rgba(8,10,8,.78));color:#f0c96b;font-weight:600;font-size:15px;line-height:1.3;letter-spacing:.1em;text-decoration:none;box-shadow:0 4px 18px rgba(0,0,0,.4);white-space:nowrap}
.top-about span{font-size:8px;font-weight:500;letter-spacing:.3em;color:rgba(240,201,107,.7)}
.top-about:hover,.top-about:focus-visible{color:#ffe1a1;border-color:#ffdf9c;outline:none}
.top-about.show{display:flex}
@media (max-width:760px){.top-about{display:none!important}}
@media (max-width:760px){.about-fab{padding:7px 14px 6px;font-size:12px}}

/* Phase 2 (2026-11-03): shelf links on genre pages + concept page. */
.detail-links{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.detail-links-label{font:11px Georgia,serif;letter-spacing:.22em;color:#ebc583;width:100%}
.detail-links a{border:1px solid #c7aa716e;border-radius:24px;padding:9px 15px;font-size:13px;text-decoration:none;background:#070c0cbb;color:#ffe8ae}
.detail-links a:hover{border-color:#ffdf9c;color:#ffdf9c}
.concept-content{max-width:900px}
.concept-h1{font-size:clamp(30px,4.2vw,54px)!important}
.concept-block{margin:38px auto;max-width:760px;text-align:center}
.concept-block .detail-overline{margin:0 0 10px}
.concept-block p{font-size:clamp(15px,1.4vw,19px);line-height:2.05;color:#f3e7cd}
.concept-block p.en{font-size:.92em;color:#cdbd97;font-style:italic}
.concept-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.concept-card{border:1px solid #edca8a61;border-radius:13px;background:#0b110da8;padding:18px 14px;text-align:center}
.concept-card .price{font:12px Georgia,serif;letter-spacing:.25em;color:#eacb8d}
.concept-card h3{font-weight:400;font-size:17px;color:#ffebbe;margin:8px 0 10px}
.concept-card p{font-size:13px!important;line-height:1.8!important;color:#d9c8ac}
.concept-card a{display:inline-block;margin:10px 4px 0;border:1px solid #f7d791b0;border-radius:24px;padding:8px 14px;font-size:12px;text-decoration:none;color:#ffe8ae;background:linear-gradient(#362916e5,#0b0d0be8)}
@media(max-width:800px){.concept-cards{grid-template-columns:1fr}}