:root{font-family:'Mali',Thonburi,sans-serif;color:#151d21;background:#d9efff;font-synthesis:none}
/* Headings receive focus for screen-reader navigation, not as interactive controls. */
.app-shell h1[tabindex="-1"]:focus{outline:none}
*{box-sizing:border-box}body{margin:0;min-width:280px;background:radial-gradient(ellipse at top,#87c9ff,#e5f6fd 70%);min-height:100dvh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #b91896;outline-offset:4px}img{display:block;max-width:100%}
.app-shell{width:min(100%,540px);margin:auto;box-shadow:0 0 80px #1764a21c;container-type:inline-size}
.poster{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;background-size:100% 100%;background-position:center;animation:page-in .35s ease both}
.poster-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.home{background-image:url('./assets/concert/home.webp')}.question{background-image:url('./assets/concert/question-bg.webp')}.result{background-image:url('./assets/concert/result-bg.webp')}
.key-button{position:absolute;left:19.7%;top:30.4%;width:60.6%;height:50%;padding:0;border:0;background:none;display:grid;place-items:center}
.key-button img{width:100%;height:100%;object-fit:contain;animation:key-drift 4.8s ease-in-out infinite;transform-origin:50% 22%;filter:drop-shadow(0 6px 4px #af4a1710)}.key-button:hover img{filter:drop-shadow(0 7px 10px #ff810655)}
.home-hint{position:absolute;top:83%;width:100%;text-align:center;font-size:3.4cqw;margin:0;color:#15504c}.home-hint span{background:#ffffffbf;padding:7px 15px;border-radius:30px}
.nav-strip{display:flex;gap:12px;align-items:center;padding:14px 18px max(14px,env(safe-area-inset-bottom));background:#f0faff;border-top:1px solid #cce7ed;min-height:76px}.nav-strip .spacer{flex:1}.nav-strip .page-count{font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;color:#526f7b;flex:1;text-align:center}
.pill{min-height:44px;padding:10px 20px;border:1px solid #cf9e29;border-radius:40px;background:linear-gradient(#fff 45%,#fffba3 100%);font-size:14px;box-shadow:0 2px 0 #cf9e2920;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}.pill:hover{background:linear-gradient(#fff,#fff475);transform:translateY(-1px)}.pill:active{transform:scale(.97)}.pill.back{background:#ffffffc9;border-color:#9bbac8;font-size:13px}
.art{position:absolute;top:2.5%;left:14%;width:72%;height:26%;object-fit:contain}
.question[data-page='4'] .art{left:30%;width:40%}.question[data-page='5'] .art{left:14%;width:72%;height:28%;top:0}.question[data-page='6'] .art{left:31%;width:38%}.question[data-page='7'] .art{left:22%;width:57%;top:4%;height:24%;mix-blend-mode:multiply}.question[data-page='8'] .art{left:29%;width:42%}.question[data-page='9'] .art{left:12%;width:76%;top:5%;height:21%}.question[data-page='10'] .art{left:29%;width:42%}.question[data-page='11'] .art{left:14%;width:72%;height:29%;top:1%}
.question h1{position:absolute;top:29.2%;left:3%;width:94%;margin:0;text-align:center;font-weight:400;font-size:3.65cqw;line-height:1.68;white-space:pre-line}.question[data-page='9'] h1{top:26.7%;font-size:3.45cqw}
.answers{position:absolute;left:15%;width:70%;top:37.85%;height:49.35%;display:flex;flex-direction:column;justify-content:space-between}.question[data-page='4'] .answers{left:18.5%;width:63%}.question[data-page='11'] .answers{left:5.5%;width:89%}
/* Selection alone controls answer highlighting; touch browsers can retain hover. */
.answer{width:100%;min-height:44px;height:10%;padding:0 8px;border:1.5px solid #cba331;border-radius:100px;background:linear-gradient(#fff 45%,#fffff0 60%,#fbff6e 100%);font-size:3.85cqw;line-height:1.3;transition:transform .15s,box-shadow .15s,background .15s}.answer[aria-pressed='true']{background:linear-gradient(#fff8ce,#ffef67);box-shadow:0 0 0 3px #f8db5580;transform:scale(1.02)}.question[data-page='11'] .answer{font-size:3.65cqw}
.result-label{position:absolute;top:16.35%;left:0;width:100%;text-align:center;font-size:2.5cqw;margin:0}.album{position:absolute;top:19.1%;left:27.25%;width:45.5%;aspect-ratio:1;object-fit:cover;box-shadow:0 1px 8px #0007}
.result-title{position:absolute;top:46%;left:4%;width:92%;font-family:'Itim','IBM Plex Sans Thai',sans-serif;font-size:4.4cqw;font-weight:600;text-align:center;margin:0;line-height:1.35}.result[data-result='2'] .result-title{font-size:4cqw}.artist{position:absolute;top:49%;width:100%;margin:0;text-align:center;font-size:2.3cqw}
.result-text{position:absolute;top:52.5%;left:6%;width:88%;height:27%;display:flex;flex-direction:column;justify-content:space-between;text-align:center}.result-text p{margin:0;font-size:3.05cqw;line-height:1.65;white-space:pre-line}.result[data-result='2'] .result-text{top:52.7%;height:26.6%}.result[data-result='3'] .result-text{top:51.5%;height:26%}.result[data-result='5'] .result-text{top:55.5%;height:19%}.result[data-result='6'] .result-text{top:52.5%;height:24%}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 20px;background:#f0faff}.result-actions .wide{grid-column:1/-1}.preview-label{margin:0;padding:9px;text-align:center;font-size:12px;background:#fff6d9;color:#6c5215}
.toast{position:fixed;z-index:20;bottom:22px;left:50%;transform:translate(-50%,20px);background:#143548ed;color:white;padding:12px 18px;border-radius:22px;font-family:'IBM Plex Sans Thai',sans-serif;font-size:14px;max-width:90%;width:max-content;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sound{position:fixed;right:max(10px,calc((100vw - 540px)/2 - 54px));top:12px;width:38px;height:38px;border:1px solid #9bd0ec;border-radius:50%;background:#ffffffc9;z-index:4;font-size:16px;color:#215776;backdrop-filter:blur(6px)}
@keyframes key-drift{0%,100%{transform:translate(0,0) rotate(-3deg)}35%{transform:translate(2%, -2.3%) rotate(3deg)}70%{transform:translate(-1%,1%) rotate(-1deg)}}@keyframes page-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(min-width:700px){body{padding:24px 0}.app-shell{border-radius:16px;overflow:hidden}.sound{top:36px}}
@media(max-width:360px){.question{min-height:650px}.answer{font-size:3.7cqw;min-height:44px;flex-shrink:0}.nav-strip{gap:8px;padding-inline:12px}.pill{padding-inline:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Tall phones: fill the available viewport without cropping the supplied posters. */
@media(max-width:699px){
  .journey{display:flex;flex-direction:column;min-height:100svh;min-height:100dvh}
  .journey>.story{flex:none}
  .journey>.nav-strip{flex:1;min-height:calc(76px + env(safe-area-inset-bottom));padding-bottom:calc(14px + env(safe-area-inset-bottom));background:linear-gradient(#f0faff,#dceff5);border-top-color:#c4e3de}
  .journey>.home{flex:1;aspect-ratio:auto;min-height:177.778cqw;background-image:url('./assets/concert/home-top.webp'),url('./assets/concert/home-footer.webp'),url('./assets/concert/home-middle.webp');background-size:100% 51.852cqw,100% 29.63cqw,100% calc(100% - 81.482cqw);background-position:center top,center bottom,center 51.852cqw;background-repeat:no-repeat}
  .journey>.home .key-button{top:29%;height:49%}
  .journey>.home .home-hint{top:auto;bottom:calc(29.63cqw + 12px)}
  .journey>.question{flex:1;aspect-ratio:auto;min-height:max(650px,177.778cqw);background-image:url('./assets/concert/garden-footer.webp'),url('./assets/concert/question-main.webp');background-size:100% 29.63cqw,100% calc(100% - 29.63cqw);background-position:center bottom,center top;background-repeat:no-repeat}
  .journey>.question+.nav-strip{flex:0 0 auto}
  .journey .answer{flex-shrink:0}
  .sound{top:calc(12px + env(safe-area-inset-top))}
}

/* Story artwork is composed from independently responsive layers. */
.composed-story{background-image:url('./assets/concert/story-blue-bg.webp');isolation:isolate}
.story--1{background-image:url('./assets/concert/story-warm-bg.webp')}
.story--13{background-image:url('./assets/concert/story-spotlight-bg.webp')}
.story-footer{position:absolute;bottom:0;left:0;width:100%;height:auto;z-index:4}
.story-intro{position:absolute;top:10.7%;left:3%;width:94%;margin:0;display:flex;flex-direction:column;align-items:center;gap:1.8cqw;font-weight:400;font-size:3.55cqw;line-height:1.6;z-index:3}
.story-intro span{display:block;width:max-content;max-width:100%;padding:0 1.1cqw;background:#fff;color:#222;text-align:center}
.sofa-scene{position:absolute;left:0;bottom:4%;width:100%;height:56.5%}
.sofa-layer{position:absolute;bottom:0;width:100%;height:61%;object-fit:fill}
.musician-layer{position:absolute;left:8%;bottom:0;width:90%;height:100%;object-fit:contain;object-position:center bottom;transform-origin:50% 91%;animation:musician-sway 5.6s ease-in-out infinite}
.living-title{position:absolute;top:26%;left:6%;width:88%;height:auto;z-index:2;transform-origin:center;animation:letter-float 5s ease-in-out infinite}
.title-glow,.story-glow{position:absolute;pointer-events:none;z-index:-1;background:radial-gradient(ellipse,#f279ecb8 0%,#ed7be59e 35%,#e778e435 60%,transparent 74%)}
.title-glow{top:25%;left:4%;width:92%;height:43%}
.story-glow{top:27%;left:0;width:100%;height:48%}
.story-message{position:absolute;top:50%;left:4%;width:92%;transform:translateY(-50%);margin:0;text-align:center;white-space:pre-line;font-size:4.8cqw;line-height:1.85;font-weight:400;color:#fffadf;z-index:2}
.story--14 .story-message{font-size:4.3cqw}
.story--13 .story-message{top:16%;transform:none;font-size:5.1cqw;line-height:1.7}
.story--13 .story-glow{top:6%;height:43%;left:3%;width:94%}
.concert-door{position:absolute;bottom:0;left:0;width:100%;height:auto;z-index:3}
@keyframes musician-sway{0%,100%{transform:rotate(-.8deg) translateY(0)}50%{transform:rotate(.8deg) translateY(-.4%)}}
@keyframes letter-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-2%) rotate(1deg)}}
@media(max-width:699px){
  .journey>.composed-story{flex:1;aspect-ratio:auto;min-height:177.778cqw}
  .journey>.composed-story+.nav-strip{flex:0 0 auto}
  .story--1 .sofa-scene{height:57%;bottom:4%}
  .story--2 .living-title{top:29%}
  .story--2 .title-glow{top:28%}
}
@media(prefers-reduced-motion:reduce){.musician-layer,.living-title{animation:none}}

/* Keep desktop posters within both viewport dimensions, including navigation. */
.app-shell{position:relative}
.sound{position:absolute;right:10px;top:12px}
.result-artwork{container-type:inline-size;min-width:0}
.result-panel{background:#f0faff;padding:22px 0 4px}
.result-panel h2{font-size:18px;text-align:center;margin:0 16px 18px}
.music-player{margin:0 12px}
.music-player audio{display:block;width:100%;height:54px}
.music-status{font-family:'IBM Plex Sans Thai',sans-serif;font-size:13px;line-height:1.6;min-height:42px;margin:12px 20px 0;text-align:center}
.result-panel .preview-label{margin:0 12px 16px;border-radius:8px}
@media(min-width:700px){
  .app-shell{width:min(540px,calc((100dvh - 124px) * .5625))}
  .journey .answer{min-height:0;flex-shrink:0}
  .nav-strip{height:76px;min-height:76px;padding:10px;gap:6px}
  .nav-strip .pill{padding-inline:10px;font-size:clamp(10px,3.6cqw,14px);white-space:nowrap}
  .nav-strip .page-count{font-size:clamp(9px,3cqw,12px)}
  .app-shell[data-view='result']{width:min(880px,calc(100% - 32px),calc((100dvh - 48px) * .5625 + 320px))}
  .result-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:center;background:#f0faff}
  .result-panel{max-height:calc(100dvh - 48px);overflow-y:auto;padding-top:52px}
  .result-panel .result-actions{padding:12px;gap:8px}
}