#frame{border:3px double #c07b87;box-shadow:0 0 0 5px #230c16,0 22px 100px #0009}#frame:after{content:"";position:absolute;inset:6px;border:1px solid #b8758159;pointer-events:none}#overlay{background:#0d051649}#frame[data-screen="menu"] #overlay{background:linear-gradient(90deg,transparent 20%,#12071365 52%,#10050db0)}#frame[data-screen="menu"] .panel{width:50%;margin-left:43%}.title{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(25px,4.1vw,56px);letter-spacing:3px}.eight{display:block;font-size:clamp(70px,10vw,145px);line-height:.8;margin-bottom:18px;color:#ff769d;text-shadow:0 0 8px #ff7399,0 0 30px #f63367}.eyebrow{letter-spacing:3px}.primary{background:linear-gradient(#6f0f29,#a62945,#561026);border:3px double #ff96ae;box-shadow:0 0 14px #ff265863,inset 0 0 12px #f16a8a45;border-radius:3px}.nav button{border:3px double #ad6074;background:#260b18d9;color:#ffb3c5}.nav{flex-wrap:wrap}.best{color:#e5a5b8}.subtitle{color:#ffc0d3}.card{border:3px double #a25e70;background:#200b16dc}#hud{background:#140a14bb;border:1px solid #a46d82;padding:8px 12px;border-radius:2px}#hearts{text-shadow:0 0 8px #ff517b}#frame[data-screen="wardrobe"] #overlay,#frame[data-screen="levels"] #overlay{background:#120914cc}.panel h2{color:#ffd3df}
#frame[data-screen="menu"] .desc{display:none}#frame[data-screen="menu"] .eight{font-size:clamp(60px,10vw,120px);margin:7px 0 10px}#frame[data-screen="menu"] .eyebrow{font-size:9px;margin-bottom:8px}#frame[data-screen="menu"] .subtitle{margin:8px 0 16px}#frame[data-screen="menu"] .best{margin-top:13px;font-size:8px;letter-spacing:1px}#frame[data-screen="menu"] .nav{margin-top:10px;gap:6px}#frame[data-screen="menu"] .nav button{padding:7px 12px;font-size:10px}
@media(max-width:700px){#frame[data-screen="menu"] .panel{width:54%;margin-left:42%}.title{font-size:24px}#frame[data-screen="menu"] .eight{font-size:60px;margin:5px 0}.eyebrow,#frame[data-screen="menu"] .eyebrow{font-size:7px;letter-spacing:2px;margin-bottom:5px}.desc{font-size:8px}.primary{min-width:160px;font-size:10px}.nav button,#frame[data-screen="menu"] .nav button{padding:5px 8px;min-height:38px;font-size:8px}.nav{gap:3px}.subtitle,#frame[data-screen="menu"] .subtitle{font-size:19px;margin:5px 0 10px}.best,#frame[data-screen="menu"] .best{font-size:7px;letter-spacing:1px;margin-top:7px}#hud{padding:4px 7px}}
#musicToggle{position:absolute;top:18px;right:18px;z-index:12;min-height:44px;width:142px;padding:7px 8px;background:#260d1be8;border:3px double #b16b80;color:#ffc7d7;font-size:11px;letter-spacing:.5px}#musicToggle[aria-pressed="true"]{background:#80213ce8;box-shadow:0 0 14px #e64b7255}#hud{right:175px}#musicToggle:hover{transform:none}#musicFile,#bgmAudio{display:none}
#frame[data-screen="menu"] .eyebrow{visibility:hidden}

.play-layout{display:block}
@media(max-width:550px){#frame[data-screen="menu"] .panel{width:54%;margin-left:43%;padding-top:43px}#frame[data-screen="menu"] .title{font-size:18px;letter-spacing:1px}#frame[data-screen="menu"] .eight{font-size:28px;line-height:.8;margin:0 0 4px}#frame[data-screen="menu"] .eyebrow{display:none}#frame[data-screen="menu"] .subtitle{font-size:18px;margin:5px 0 8px}#frame[data-screen="menu"] .primary{min-width:155px;font-size:8px;padding:6px 8px;letter-spacing:1px}#frame[data-screen="menu"] .nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin-top:5px}#frame[data-screen="menu"] .nav button{font-size:6px;letter-spacing:0;padding:3px 1px;min-height:36px}#frame[data-screen="menu"] .best{display:none}#hud small{letter-spacing:0}.progress{display:none}#hud{top:8px;left:6px;gap:6px}#hearts{letter-spacing:0}#hud b{font-size:10px}#pause{min-width:36px;min-height:36px}#hint{font-size:7px;letter-spacing:1px}}
@media(max-width:700px){#musicToggle{top:8px;right:8px;width:100px;font-size:9px;min-height:40px}#hud{right:118px;gap:8px}.progress{width:17%}#hud b{font-size:11px}#hearts{font-size:15px}}

#musicToggle{width:44px;height:44px;min-height:44px;padding:0;font-size:24px;letter-spacing:0;line-height:1}#hud{right:80px}
@media(max-width:700px){#musicToggle{width:44px;height:44px;min-height:44px;font-size:24px}#hud{right:62px}}

#assetLoading{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#170c17;color:#f7b4cb;font-size:14px}#assetLoading[hidden],#assetRetry[hidden]{display:none}

#frame[data-screen="clear"] #overlay,#frame[data-screen="over"] #overlay{background:#100811ed}
#frame[data-screen="clear"] .panel,#frame[data-screen="over"] .panel{width:92%;height:88%}
.result-layout{display:grid;grid-template-columns:42% minmax(0,1fr);gap:26px;align-items:center;height:100%}.result-photo{margin:0;height:100%;min-height:0;display:flex;flex-direction:column;border:3px double #c87e95;background:#170c17;box-shadow:0 0 24px #a6335c33;overflow:hidden}.result-photo img{display:block;width:100%;height:calc(100% - 28px);object-fit:contain;min-height:0;flex:1}.result-photo figcaption{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 9px;font-size:8px;letter-spacing:1px;color:#bc899b;background:#210f1b}.result-photo a{color:#efb5cb;text-decoration:none;letter-spacing:0}.result-copy .eyebrow{letter-spacing:2px;margin:0 0 12px;font-size:10px}.result-copy h2{font-family:Georgia,serif;font-size:30px;line-height:1.35;margin:0 0 10px}.result-message{font-size:13px;line-height:1.9;color:#e1adbf;margin:8px 0}.result-copy .stars{font-size:30px;letter-spacing:6px}.result-copy .stats{margin:16px 0;gap:25px}.result-copy .primary{min-width:190px;letter-spacing:1px}.result-copy .nav{gap:8px}.result-copy .nav button{font-size:10px;padding:8px 12px}.photo-unavailable{font-size:12px;line-height:2;margin:auto;padding:15px}.photo-unavailable[hidden]{display:none}
@media(orientation:portrait) and (max-width:700px){#frame[data-screen="clear"],#frame[data-screen="over"]{aspect-ratio:auto;height:min(720px,84dvh)}#frame[data-screen="clear"] canvas,#frame[data-screen="over"] canvas{position:absolute;inset:0}#frame[data-screen="clear"] .panel,#frame[data-screen="over"] .panel{width:88%;height:90%}.result-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(160px,1fr) auto;gap:14px}.result-copy h2{font-size:23px}.result-copy .eyebrow{font-size:8px;margin-bottom:5px}.result-message{font-size:11px;margin:5px 0;line-height:1.6}.result-copy .stars{font-size:24px}.result-copy .stats{margin:8px 0}.result-copy .stats b{font-size:19px}.result-copy .primary{font-size:11px;min-height:44px}.result-copy .nav{margin-top:7px}.result-copy .nav button{min-height:40px}.result-photo figcaption{font-size:7px}}
@media(orientation:landscape) and (max-height:500px){.result-layout{gap:16px;grid-template-columns:38% minmax(0,1fr)}.result-copy h2{font-size:24px}.result-copy .eyebrow{font-size:8px;margin-bottom:5px}.result-message{font-size:10px;margin:5px 0}.result-copy .stars{font-size:24px}.result-copy .stats{margin:7px 0}.result-copy .stats b{font-size:19px}.result-copy .primary{min-height:40px;padding:6px 14px;font-size:10px}.result-copy .nav{margin-top:6px}.result-copy .nav button{min-height:36px;padding:5px 10px;font-size:9px}}
/* Keep all menu controls reachable on portrait phones. */
@media(orientation:portrait) and (max-width:700px){
 #frame[data-screen="levels"],#frame[data-screen="wardrobe"],#frame[data-screen="settings"],#frame[data-screen="pause"]{aspect-ratio:auto;height:min(650px,80dvh)}
 #frame[data-screen="levels"] #overlay,#frame[data-screen="wardrobe"] #overlay,#frame[data-screen="settings"] #overlay,#frame[data-screen="pause"] #overlay{padding:50px 12px 18px;overflow:auto}
 #frame[data-screen="levels"] .panel,#frame[data-screen="wardrobe"] .panel,#frame[data-screen="settings"] .panel,#frame[data-screen="pause"] .panel{width:100%;max-height:100%;overflow:auto;padding:4px}
 #frame[data-screen="levels"] .cards,#frame[data-screen="wardrobe"] .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #frame[data-screen="levels"] .card,#frame[data-screen="wardrobe"] .card{width:auto!important;padding:12px 8px}
 #frame[data-screen="levels"] .card strong,#frame[data-screen="wardrobe"] .card strong{font-size:20px}
 #frame[data-screen="levels"] .card button,#frame[data-screen="wardrobe"] .card button{min-height:44px;font-size:10px}
 #frame[data-screen="wardrobe"] .portrait{margin:auto}
}

#frame[data-screen="wardrobe"] .portrait{height:120px;width:96px;object-fit:contain;margin:auto}
@media(max-width:550px){#pause{min-width:44px;min-height:44px}#frame[data-screen="menu"] .nav button{font-size:8px;min-height:40px}}

#hud b,#hearts{white-space:nowrap}
@media(orientation:landscape) and (max-height:500px){#hud{gap:12px;padding:6px 10px}#hud b{font-size:14px}#hud small{font-size:8px;letter-spacing:1px}#hearts{font-size:20px}.progress{min-width:0;flex:1}#stageLabel{font-size:7px!important;letter-spacing:.5px!important}}
@media(orientation:landscape) and (max-height:500px){#frame[data-screen="levels"] .panel h2{font-size:32px;margin:4px}#frame[data-screen="levels"] .eyebrow{font-size:8px;margin-bottom:6px}#frame[data-screen="levels"] .cards{margin:10px 0}#frame[data-screen="levels"] .card{padding:12px 6px}#frame[data-screen="levels"] .card strong{font-size:20px;margin:8px 0}#frame[data-screen="levels"] .card small{font-size:8px;margin:7px 0}#frame[data-screen="levels"] .nav{margin-top:8px}}