/* Layout and interaction remain HTML. Every decorative surface below uses
   the approved raster artwork; nine-slicing keeps corners intact at any size. */
:root{--city:url('../assets/images/ui/material/city.png');--button-blue:url('../assets/images/ui/material/button-blue-skin.svg');--button-wine:url('../assets/images/ui/material/button-wine-skin.svg');--button-gold:url('../assets/images/ui/material/button-gold-skin.svg');--panel-art:url('../assets/images/ui/material/panel-skin.svg');--paper:#fff4dd;--gold:#efd486}
.ambient{background:linear-gradient(#03102538,#0411216b),var(--city) center/cover}
.modal::backdrop{background:linear-gradient(#03102538,#0411216b),var(--city) center/cover}
.btn,.games-link,.icon-btn,.bgm-toggle,.zoom-toolbar button{--skin:var(--button-blue);background:none!important;border:0!important;border-radius:0;box-shadow:none!important;isolation:isolate;color:var(--paper);text-shadow:0 1px 3px #000;position:relative}
.btn:before,.games-link:before,.icon-btn:before,.bgm-toggle:before,.zoom-toolbar button:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border:18px solid transparent;border-image:var(--skin) 145 fill / 18px / 0 stretch;border-radius:0;background:none}
.btn.pink,.start-investigation,.pause-content>.btn{--skin:var(--button-wine)}
.btn.yellow,.games-link,.return-title,.result-actions>.result-home{--skin:var(--button-gold);color:#ffe6a1}
.btn.blue{--skin:var(--button-blue)}
.btn:disabled{filter:saturate(.4);opacity:.52}
.btn,.games-link{padding:12px 24px;min-height:52px;font-weight:600;letter-spacing:.08em}
.btn:hover:not(:disabled),.games-link:hover,.icon-btn:hover,.bgm-toggle:hover,.zoom-toolbar button:hover{filter:brightness(1.22)}
.btn:active:not(:disabled),.games-link:active{transform:translateY(1px);filter:brightness(.9)}
.button-icon{color:#ffe19a;flex:none;width:21px;height:21px}
.button-label{position:relative;line-height:1.45}
.icon-btn,.bgm-toggle,.zoom-toolbar button{color:#fce5a9;width:44px;height:44px;min-width:44px;display:inline-grid;place-items:center;padding:8px}
.icon-btn:before,.bgm-toggle:before,.zoom-toolbar button:before{border:0;border-image:none;background:url('../assets/images/ui/material/round.png') center/100% 100% no-repeat}
.bgm-toggle[aria-pressed=false]{color:#b5bdcc}
.image-logo img{filter:drop-shadow(0 3px 9px #0007);height:auto;max-height:210px}
.image-logo{max-width:490px;width:100%}

.title-girl{width:47%;height:94%;right:1%;bottom:-3%;object-position:center bottom}
.title-cat{width:20%;height:42%;right:36%;bottom:1%}
.title-vignette{background:linear-gradient(90deg,#0310237a,transparent 75%)}
.title-content{position:relative;width:43%;max-width:550px}.title-description{color:#ebe6dc}.title-subtitle{color:#fff6df}
.title-secondary{gap:9px}.title-secondary .btn{font-size:16px;min-height:48px}.start-investigation{font-size:25px;min-height:64px}.games-link{min-width:230px;margin-top:15px;color:#ffe39b}
.area-card,.best-card,.archive-card,.result-card,.modal{background:none!important;border:0!important;border-radius:0;box-shadow:none;isolation:isolate}
.area-card:before,.best-card:before,.archive-card:before,.result-card:before,.modal:before{content:'';position:absolute;inset:0;top:0;left:0;transform:none;width:auto;height:auto;padding:0;z-index:-1;pointer-events:none;background:none;border:36px solid transparent;border-image:var(--panel-art) 260 fill / 36px / 0 stretch}
.area-card,.archive-card{padding:17px}.area-card:before,.archive-card:before{border-image-width:24px}
.area-card.locked{opacity:.72}.area-details h2{color:#ffedbd}.area-number{color:#ffe4a2}.area-cover{border-radius:2px}
.area-heading h1,.page-heading h1,.modal-header h2{color:#ffe3a1;text-shadow:0 3px 12px #000}
.archive-card{overflow:visible}.best-card{padding:30px}.archive-filter .btn{min-width:115px}
.result-card{padding:35px 40px}.result-card:before{border-image-width:65px}.result-card h1{color:#ffe29b;font-size:50px;letter-spacing:.14em;text-shadow:0 3px 8px #000}
.atelier-result{grid-template-columns:46% 54%;max-width:1440px;min-height:calc(100dvh - 130px)}
.result-partner{height:min(730px,calc(100dvh - 155px));min-height:500px;align-self:end}
.result-partner>.result-girl{position:absolute;height:100%;width:105%;max-width:none;left:-4%;bottom:0;object-fit:contain;object-position:center bottom}
.result-partner>.result-cat{height:42%;width:46%;left:-8%;bottom:0;max-width:none;object-fit:contain}
.result-partner p{display:none}.result-stage{color:#c9c6ba}.result-stars{display:flex;justify-content:center;line-height:1;font-size:49px;margin:18px 0}
.result-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid #bb995c80;padding:18px 0}
.result-metrics>div{display:flex;flex-direction:column;gap:8px;padding:0 10px;border:0;border-right:1px solid #bb995c80;font-size:15px}
.result-metrics>div:last-child{border:0}.result-metrics b{font:30px Georgia,serif}.result-metrics b small{font-size:18px}
.result-detail{font-size:11px!important}.result-actions{gap:10px}.result-actions>.btn:first-child{--skin:var(--button-wine);color:var(--paper);min-height:58px}
.result-actions>.result-home{grid-column:1/-1;justify-self:center;min-width:220px;min-height:46px;font-size:16px}
.modal{padding:32px}.modal[data-kind=pause]{padding:30px}.pause-word{color:#ffe199}.pause-art img{height:370px}
.modal-header{border-color:#bca36955}.pause-secondary>.btn{font-size:14px;padding:12px 18px}.settings-form fieldset{border-color:#ac905d55}
.radio-grid label{position:relative;isolation:isolate;background:none;border:0;padding:14px;color:#ded7c7}
.radio-grid label:before{content:'';position:absolute;inset:0;z-index:-1;border:14px solid transparent;border-image:var(--button-blue) 145 fill / 14px / 0 stretch;pointer-events:none}
.radio-grid label:has(:checked){background:none;color:#ffe3a1}.radio-grid label:has(:checked):before{border-image-source:var(--button-wine)}
.observation-header{border-bottom:0}.game-action-bar .btn{min-height:58px}.answer-buttons{gap:16px}.answer-buttons .btn{font-size:25px;font-weight:600}
/* Frame artwork is outside the puzzle so no pixels or hit targets are hidden. */
.scene-frame{border:0;box-shadow:0 0 0 2px #c6ad6f,0 0 0 5px #061522,0 6px 24px #0008}
.scene-stage{position:relative}.zoom-toolbar{gap:8px}
.stars{display:inline-flex;align-items:center;gap:3px}.stars>span{display:inline-block;width:20px;height:20px;font-size:0;color:transparent;background:url('../assets/images/ui/material/star.png') center/contain no-repeat;filter:grayscale(1);opacity:.5}.stars>span.earned{filter:none;opacity:1}.result-stars .stars{gap:13px}.result-stars .stars>span{width:65px;height:65px}.best-stars .stars>span{width:35px;height:35px}
@media(min-width:761px) and (max-height:800px){.image-logo img{max-height:185px}.title-subtitle{margin:8px 0 10px}.title-description{font-size:11px}.title-actions{margin-top:16px}.title-secondary .btn{min-height:44px;font-size:14px;padding:8px 20px}.start-investigation{min-height:56px;font-size:23px}.title-metrics{margin-top:12px}.result-card{padding:26px 32px}.result-card h1{font-size:42px}.result-stars{margin:10px 0}.result-card>p{margin:10px 0}.result-partner{min-height:460px}.result-metrics{padding:14px 0}}
@media(min-width:761px) and (max-width:1050px){.title-content{width:46%}.title-girl{right:-5%;width:53%}.title-cat{right:29%}.result-card{padding:26px}.result-card h1{font-size:36px}.result-metrics b{font-size:24px}.result-metrics>div{padding-inline:5px}.result-actions .btn{font-size:14px;padding-inline:16px}}
@media(max-width:760px){
 .btn,.games-link{padding:10px 17px;min-height:46px;font-size:15px}.btn:before,.games-link:before{border-image-width:14px}.button-icon{width:17px;height:17px}
 .icon-btn,.bgm-toggle{width:40px;height:40px;min-width:40px}
 .neon-title{padding-top:45px}.title-content{width:100%;max-width:460px}.image-logo{width:79%;max-width:330px}.image-logo img{height:135px;max-height:none;object-fit:contain}.title-subtitle{font-size:14px;margin-top:7px}.title-cast{height:450px;top:25px}.title-girl{height:64%;width:76%;right:0;bottom:0}.title-cat{height:36%;width:40%;right:51%;bottom:0}.title-actions{margin-top:258px}.start-investigation{font-size:21px;min-height:56px}.title-secondary .btn{font-size:13px;min-height:46px;padding:8px 14px}.games-link{min-height:46px}.title-metrics{font-size:9px}
 .area-card,.archive-card{padding:12px}.area-card:before,.archive-card:before{border-image-width:18px}.area-details h2{font-size:12px}.archive-filter{gap:7px}.archive-filter .btn{min-width:0;font-size:12px;padding:9px 15px;flex:1}.best-card{padding:25px}.page-heading h1,.area-heading h1{font-size:28px}
 .modal,.modal[data-kind=pause]{padding:26px 20px}.modal:before,.result-card:before{border-image-width:25px}.pause-art img{height:210px}.pause-secondary>.btn{padding:10px 14px}.radio-grid label{padding:13px 10px}
 .atelier-result{display:flex;min-height:0}.result-partner{width:100%;height:250px;min-height:0;overflow:hidden}.result-partner>.result-girl{height:440px;width:290px;max-width:none;left:calc(50% - 115px);top:0;bottom:auto;object-fit:contain;object-position:center top}.result-partner>.result-cat{height:155px;width:145px;left:calc(50% - 160px);bottom:-8px;object-fit:contain}.result-card{padding:28px 22px}.result-card h1{font-size:34px;margin:8px 0}.result-stars{font-size:37px;margin:12px}.result-metrics{padding:14px 0}.result-metrics>div{padding:0 5px;font-size:12px}.result-metrics b{font-size:24px}.result-metrics b small{font-size:14px}.result-actions>.btn:first-child{min-height:52px;font-size:19px}.result-actions>.result-home{min-width:190px;font-size:14px}
 .game-action-bar .btn{min-height:44px}.answer-buttons .btn{min-height:54px;font-size:21px}.scene-frame{box-shadow:0 0 0 1px #c6ad6f,0 0 0 3px #061522}.zoom-toolbar button{width:44px;height:40px}.return-title{font-size:11px;min-height:40px}
 .result-stars .stars>span{width:46px;height:46px}.area-card .stars>span{width:16px;height:16px}
 .title-girl{height:56%}.fullscreen-btn{display:none!important}
}
/* Center symbols geometrically, independent of the glyph baseline. */
.icon-btn,.bgm-toggle,.zoom-toolbar button{display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0;flex-shrink:0}
.icon-btn>svg,.bgm-toggle>svg,.zoom-toolbar button>svg{display:block;width:22px;height:22px;margin:0;flex:none;vertical-align:initial}
/* Display headings keep the gold/serif identity; reading text uses clear strokes. */
:root{--reading-font:'Yu Gothic UI','Hiragino Kaku Gothic ProN',Meiryo,system-ui,sans-serif;--display-font:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif}
.area-heading h1,.page-heading h1,.modal-header h2,.result-card h1{font-family:var(--display-font);font-weight:700;letter-spacing:.14em;color:#ffe5a1;line-height:1.45;text-shadow:0 2px 1px #705020,0 3px 8px #020814,0 0 22px #020814}
.area-heading h1,.page-heading h1{font-size:44px;margin:8px 0 12px}
.area-heading,.page-heading{position:relative;isolation:isolate}
.area-heading:before,.page-heading:before{content:'';position:absolute;inset:-16px 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,#051226dc 0%,#05122695 45%,transparent 75%)}
.area-heading p,.page-heading p,.title-description,.title-metrics,.area-caption,.area-cta,.archive-card span,.archive-card small,.best-card dt,.best-card>p,.small-note,.settings-form,.help-steps p,.modal>p,.partner-comment,.action-copy p,.result-card>p,.result-metrics>div>span,.game-stage-name,.zoom-note{font-family:var(--reading-font);font-weight:500;line-height:1.7;color:#e7edf4}
.area-heading p,.page-heading p{font-size:15px;text-shadow:0 2px 5px #000}.area-heading>span,.eyebrow{font-size:12px;color:#f1dba5;font-weight:600}
.title-description{font-size:14px;text-shadow:0 2px 4px #000}.title-metrics{font-size:12px;text-shadow:0 2px 4px #000}.title-metrics b{margin-right:3px}
.area-details h2,.archive-card h2,.best-card h2{font-family:var(--display-font);font-weight:700;line-height:1.5;color:#fff0c8}
.area-cta,.archive-card span,.archive-card small,.area-caption small{font-size:12px}.archive-card span{display:block;letter-spacing:.04em;color:#ccd8e7}.archive-card small{color:#f1dba5}.archive-card:disabled{opacity:1}.unknown-art{color:#c4cdd7}.archive-card.unknown h2{color:#d4dce5}
.area-card.locked{opacity:1}.area-unknown span,.unpublished h2{color:#ccd4df}.area-unknown{color:#c3b797}
.small-note{font-size:14px}.help-steps p,.modal>p,.action-copy p{font-size:15px}.help-steps strong{font-family:var(--display-font);color:#fff0cc;font-weight:700}
.result-card>p{font-size:14px}.result-card .result-detail{font-size:13px!important}.result-metrics>div>span{font-size:15px}.best-card dt{font-size:16px}.best-card>p{font-size:14px}
.title-secondary .btn{font-size:16px}.pause-secondary>.btn{font-size:16px}.game-stage-name{font-size:16px}
@media(max-width:760px){
 .area-heading h1,.page-heading h1{font-size:32px;letter-spacing:.12em}.modal-header h2{font-size:25px}.area-heading p,.page-heading p{font-size:13px;line-height:1.8}.eyebrow{font-size:10px;letter-spacing:.13em}
 .title-secondary .btn{font-size:14px}.title-metrics{font-size:11px;gap:12px}.area-details h2{font-size:14px}.area-details{height:auto;min-height:76px}.archive-card h2{font-size:15px}.archive-card span{font-size:11px}.archive-card small{font-size:12px}.archive-card>div:last-child{padding:10px 2px}
 .small-note,.help-steps p,.modal>p{font-size:13px}.radio-grid label{font-size:13px}.pause-secondary>.btn{font-size:14px}.action-copy p{font-size:12px;line-height:1.5}.action-copy strong{font-size:15px}.game-stage-name{font-size:11px;line-height:16px}.zoom-note{font-size:11px}.result-card>p{font-size:13px}.result-metrics>div>span{font-size:13px}
}
/* Header without the logo button: the remaining controls stay on the right. */
.site-header{justify-content:flex-end}
/* Wide screens: the freed corner goes to the stage name and the counters, and the two answers sit under the middle of the picture. */
@media(min-width:1051px){
.game-stage-name{font-size:22px;line-height:1.3}
.game-stage-name small{font-size:14px;letter-spacing:.08em}
.game-round{font-size:22px}
.game-score{font-size:26px}
.game-score small,.game-clock span{font-size:14px}
.focus-layout[data-phase=playing] .game-action-bar{grid-column:1/-1}
.focus-layout[data-phase=playing] .answer-buttons{max-width:min(800px,calc(100% - 440px))}
}