:root{color-scheme:light;--ink:#49301e;--green:#2c6527;--paper:#fff8e4}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:"BIZ UDPGothic","Yu Gothic",Meiryo,sans-serif;font-weight:700}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.54}button:focus-visible,a:focus-visible{outline:3px solid #095b9b;outline-offset:3px}button:active:not(:disabled){filter:brightness(.94)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.screen{max-width:1220px;margin:auto}#main-content{background:#bdd6b0 url('./images/background-game.webp') center center/cover fixed;min-height:calc(100svh - 56px);padding:10px 22px 28px;isolation:isolate}#main-content[data-screen=title],#main-content[data-screen=result]{background-image:url('./images/background-title.webp')}.sign{background:url('./images/ui-sign.webp') center/contain no-repeat;text-align:center;display:grid;place-content:center;margin:0;min-height:64px}.wood{border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:contain;min-width:150px;min-height:50px;padding:10px 28px;font-size:18px}.green{background-image:url('./images/ui-button-green.webp');color:#fff;text-shadow:0 1px 1px #254d19}.cream{background-image:url('./images/ui-button-cream.webp')}.large{width:320px;min-height:80px;font-size:28px}.small{border:1px solid #b29260;border-radius:14px;background:#fff9eaf5;min-height:44px;padding:8px 14px;font-size:14px}.small[aria-pressed=true]{box-shadow:inset 0 0 0 2px #447637}.title-screen{text-align:center;min-height:calc(100svh - 92px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}h1{margin:0;width: min(70vw,740px)}.title-logo{width:100%;height:auto;display:block}.title-pitch{font-size:clamp(15px,2.1vw,24px);width:min(94%,950px);min-height:72px}.small-only{display:none}.title-cast{display:flex;align-items:flex-end;justify-content:center;height:clamp(135px,23vh,240px);width:96%;gap:2%}.title-cast>img{height:82%;max-width:15%;object-fit:contain;object-position:bottom}.title-cast>img:nth-child(2){height:100%}.title-cast>img:nth-child(5){height:94%}.title-bridge{align-self:flex-end;width:13%;aspect-ratio:2.1;background:url('./images/particle-bridge.webp') center/contain no-repeat;display:grid;place-content:center;padding-bottom:5%;font-size:clamp(23px,4vw,42px)}.title-actions,.result-actions{display:flex;flex-direction:column;align-items:center;gap:4px}.title-note{font-size:13px;background:#fff8e5e8;border-radius:10px;padding:6px 12px;margin:5px}.play-header{display:grid;grid-template-columns:175px 1fr 86px;align-items:center;gap:14px;margin:0 0 8px}.play-header>img{width:100%;height:auto}.play-header h2{font-size:clamp(17px,2.3vw,28px);min-height:68px}.progress{margin:0;background:#fff4d8;border:3px solid #b08145;border-radius:14px;padding:12px 8px;text-align:center;white-space:nowrap}.progress b{font-size:26px;color:#356433}.scene-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}.scene-card{min-width:0;position:relative;padding-top:5px;text-align:center}.scene-stage{position:relative;width:100%;aspect-ratio:20/11;margin-inline:auto}.scene-stage h3{position:absolute;z-index:2;top:1.6%;left:28%;width:44%;height:17.8%;margin:0;padding:0;display:grid;place-content:center;font-size:20px;line-height:1;white-space:nowrap;color:#50331d}.scene{width:100%;height:100%;position:absolute;inset:0;background:url('./images/ui-scene-frame.webp') center/contain no-repeat;padding:5%;overflow:hidden}.scene:before{content:"";position:absolute;inset:9% 2.5% 5%;z-index:-1;border-radius:10px;background:#bde082 url('./images/background-scene.webp') center/cover no-repeat}.scene-actors{position:absolute;inset:10% 5% 10%;overflow:hidden}.actor{position:absolute;bottom:5%;height:64%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;width:36%;justify-content:flex-end}.actor img{width:100%;height:100%;object-fit:contain;object-position:center bottom;position:absolute;bottom:0}.actor .animal-name{position:absolute;bottom:-8%;font-size:clamp(11px,1.2vw,15px);z-index:3;background:#fff9e4eb;border-radius:6px;white-space:nowrap;padding:1px 7px}.actor[data-animal=rabbit]{height:72%}.actor[data-animal=cat]{height:62%}.actor[data-animal=dog]{height:60%}.actor[data-pose=sleep]{height:39%;width:43%;bottom:7%}.actor[data-pose=sleep][data-animal=rabbit]{height:43%}.actor[data-pose=sleep] img{z-index:1}.actor[data-role=patient] .cushion{position:absolute;bottom:-2%;height:42%;width:110%;object-fit:contain;z-index:0}.actor[data-pose=sleep] .sleep-mark{position:absolute;top:-28%;right:15%;color:#174c83;font-size:clamp(17px,2vw,25px);transform:rotate(9deg)}.actor.awake{height:64%;width:36%}.actor.awake[data-animal=rabbit]{height:72%}.actor.awake[data-animal=cat]{height:62%}.actor.awake[data-animal=dog]{height:60%}.animal-fallback{display:none;align-items:center;justify-content:center;border-radius:50%;width:80%;height:70%;background:#fff2c5;color:#49301e;font-size:18px;border:2px solid #9d7947;z-index:2}.actor.image-failed .animal-fallback{display:flex}.actor.image-failed>img{visibility:hidden}.replay{margin-top:0;background:#fff8e9ee;border:1px solid #af8b52;border-radius:12px;min-height:44px;padding:5px 14px;font-size:13px}.sentence{margin:16px auto 4px;max-width:1000px;display:grid;grid-template-columns:1.3fr .9fr 1.3fr .9fr 1.5fr;align-items:center;gap:0}.island{background:url('./images/word-island.webp') center/contain no-repeat;aspect-ratio:2.05;display:grid;place-content:center;padding-bottom:14%;font-size:clamp(18px,3.6vw,34px);white-space:nowrap}.verb{font-size:clamp(14px,2.2vw,24px)}.bridge-slot{position:relative;min-width:0}.bridge{border:0;background:url('./images/particle-bridge.webp') center/contain no-repeat;display:grid;place-content:center;aspect-ratio:2.05;min-height:44px;width:100%;font-size:clamp(23px,4vw,40px);padding:0 0 9%;position:relative}.bridge[aria-expanded=true]{outline:3px solid #135c8d;outline-offset:2px;border-radius:10px}.bridge[aria-expanded=true]:after{content:"えらぶ";position:absolute;top:-20px;left:0;right:0;font-size:12px;color:#fff;background:#135c8d;border-radius:6px}.choices{position:absolute;top:100%;left:50%;transform:translateX(-50%);display:flex;gap:5px;padding:7px;background:var(--paper);border:2px solid #135c8d;border-radius:12px;box-shadow:0 5px 14px #36241455;z-index:10}.choices button{min-width:44px;min-height:44px;border:2px solid #af8046;background:#fffdf3;border-radius:9px;font-size:26px}.choices button[aria-pressed=true]{border:3px solid #286334;background:#e4efd3}.guide{min-height:40px;margin:8px auto;max-width:880px;padding:10px 18px;background:#fff9e8f2;border-radius:15px;font-size:15px;text-align:center}.controls{display:flex;align-items:center;justify-content:center;gap:15px}.controls #swap{min-width:240px;min-height:65px;font-size:24px}.sub-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:8px auto}.success{position:sticky;bottom:8px;margin:12px auto 0;max-width:1060px;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff9e9;border:3px solid #67a354;border-radius:20px;box-shadow:0 2px 14px #19371f40;z-index:20}.success strong{color:#2c6527;font-size:20px}.success p{margin:5px 0 0;font-size:16px;line-height:1.7}.success .wood{min-width:175px;font-size:23px}.play-screen.solved{padding-bottom:120px}.play-screen.solved .success{position:fixed;bottom:8px;left:50%;transform:translateX(-50%);width:calc(100% - 28px)}.result-screen{text-align:center;max-width:950px;padding-top:20px;min-height:calc(100svh - 90px)}.result-logo{width:360px;max-width:80%}.result-screen h2{font-size:34px;margin:18px auto;max-width:620px}.celebration{display:flex;align-items:flex-end;justify-content:center;gap:5%;height:240px;margin:20px 0}.celebration img{width:17%;height:85%;object-fit:contain;object-position:bottom}.celebration img:first-child{height:100%}.reflection{background:#fff7e2ed;border-radius:18px;width:fit-content;max-width:100%;padding:16px 30px;margin:16px auto;font-size:23px;line-height:1.7}.notice,.dm-completion-status{margin:10px auto;padding:12px 16px;border-radius:12px;background:#fff3cd;max-width:700px;font-size:14px}.dm-completion-status button{min-height:44px;padding:8px}dialog{max-width:min(92vw,620px);max-height:86svh;border:4px solid #ac8045;border-radius:22px;color:var(--ink);background:var(--paper);padding:24px;box-shadow:0 16px 80px #20170d70}dialog::backdrop{background:#17261270}dialog h2{font-size:23px;margin:0 0 18px;color:#345d31}dialog p{line-height:1.9;font-size:18px}dialog ol{padding-left:24px;line-height:2.2}.dialog-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:16px}.how-particles{font-size:32px;text-align:center;color:#346039}.wood:focus-visible{border-radius:18px}
@media(max-width:700px){#main-content{padding:8px 10px 20px;background-attachment:scroll}.play-header{grid-template-columns:84px 1fr 56px;gap:5px;margin-bottom:5px}.play-header h2{font-size:14px;min-height:48px;padding:0 12px;line-height:1.5}.progress{font-size:12px;padding:5px;border-width:2px}.progress b{font-size:20px}.scene-pair{grid-template-columns:1fr;gap:7px;width:min(100%,420px);margin:auto}.scene-card{padding:0 52px 0 0}.scene-stage h3{font-size:14px}.replay{position:absolute;right:0;top:25%;width:47px;height:66px;min-height:44px;font-size:11px;line-height:1.35;padding:2px;overflow-wrap:anywhere}.scene-actors{inset:10% 4% 11%}.actor .animal-name{font-size:11px;padding:0 4px}.sentence{margin:8px auto 0;grid-template-columns:1.15fr .8fr 1.15fr .8fr 1.4fr;max-width:500px}.island{font-size:18px;min-height:54px}.verb{font-size:14px}.bridge{font-size:25px}.guide{font-size:13px;min-height:36px;line-height:1.6;padding:8px 10px;margin:5px auto}.controls{gap:4px;flex-wrap:wrap}.controls .wood{min-width:84px;font-size:13px;padding:6px 13px;min-height:44px}.controls #swap{min-width:135px;font-size:17px;min-height:48px}.sub-controls{gap:5px;margin-top:5px}.sub-controls .small{font-size:11px;padding:5px 8px;min-height:44px}.play-screen.solved{padding-bottom:150px}.success{gap:4px;padding:9px 12px;flex-wrap:wrap}.success strong{font-size:16px}.success p{font-size:13px;line-height:1.6}.success .wood{margin-left:auto;min-height:46px;min-width:148px;font-size:19px}.title-screen{min-height:calc(100svh - 90px);gap:9px}h1{width:min(94%,540px)}.title-pitch{width:100%;font-size:15px;min-height:64px;background-size:100% auto}.small-only{display:block}.title-cast{height:140px;width:100%;position:relative;gap:1%}.title-cast>img{max-width:20%;width:20%}.title-cast>img:nth-child(1),.title-cast>img:nth-child(6){height:72%}.title-bridge{width:12%;font-size:21px}.title-actions{gap:5px}.large{width:250px;min-height:66px;font-size:25px}.title-note{font-size:12px}.result-screen{padding-top:15px}.result-screen h2{font-size:25px;min-height:65px;margin:10px auto}.celebration{height:160px;margin:10px 0}.reflection{font-size:17px;padding:14px 16px}.result-actions .wood{min-height:55px}.result-logo{width:270px}.choices{top:95%;gap:3px;padding:5px}.choices button{font-size:24px}dialog{padding:18px}dialog p{font-size:17px}}
@media(min-width:701px) and (max-height:740px){.play-header{grid-template-columns:125px 1fr 70px}.play-header h2{min-height:50px;font-size:21px}.scene-pair{max-width:980px;margin:auto;gap:18px}.scene-stage{max-width:400px}.scene-card{max-width:450px;margin:auto;width:100%}.sentence{max-width:770px;margin-top:8px}.guide{margin:4px auto;padding:7px}.controls #swap{min-height:52px}.title-cast{height:150px}h1{width:500px}.title-pitch{min-height:56px}.title-screen{gap:3px}.large{min-height:64px}.title-note{margin:0}}
/* Keep the wooden game's text palette independent of the shared blue site theme. */
#main-content,#main-content h1,#main-content h2,#main-content h3,#main-content p,#main-content .island,#main-content .title-bridge{color:var(--ink)}
#main-content button{color:var(--ink)}#main-content button.green{color:#fff}
.title-pitch{width:min(92%,850px);background-size:100% auto;aspect-ratio:5.75;min-height:0;padding:12px 6%;font-size:clamp(15px,2vw,23px)}
.title-bridge{padding:0 0 3px}
.play-header h2{background:none;background-color:#fff4dcea;border:2px solid #b78d57;border-radius:18px;padding:8px}
.title-animal{position:relative;width:18%;height:88%;display:block}.title-animal.rabbit{height:100%}.title-animal.bear{height:95%}.title-animal img{position:absolute;left:0;bottom:18%;width:100%;height:82%;object-fit:contain;object-position:bottom}.title-animal:before{content:"";position:absolute;inset:65% -15% 0;background:url('./images/word-island.webp') center bottom/contain no-repeat;z-index:-1}
.title-cast{isolation:isolate}.title-cast .title-bridge{margin-bottom:3%}
#info-dialog{background:#fff8e4 url('./images/ui-speech-bubble.webp') center 14px/90% auto no-repeat;padding-top:30px}
@media(max-width:700px){.title-pitch{aspect-ratio:auto;min-height:70px;background:#fff5deed;border:2px solid #be945c;border-radius:18px}.title-animal{width:20%}.title-cast{gap:0;height:145px}.title-cast .title-bridge{width:10%}.play-header h2{border-width:1px;padding:5px}}
@media(min-width:701px) and (max-height:740px){.title-pitch{width:740px;max-width:94%;font-size:19px;aspect-ratio:6.4}.title-screen{gap:0}h1{width:470px}.title-cast{height:125px}.title-actions .large{min-height:60px}.title-note{margin-top:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Compact screens retain readable particles and a visible image-error explanation. */
.replay-compact{display:none}.scene-fallback-description{position:absolute;inset:22% 8% auto;z-index:5;margin:0;padding:8px;background:#fff9e4;border:1px solid #b68b56;border-radius:10px;font-size:clamp(12px,1.4vw,18px);line-height:1.7}
@media(max-width:700px){.bridge span{display:grid;place-items:center;min-width:32px;min-height:34px;line-height:1;background:#ffeac6;border:1px solid #ba8549;border-radius:7px}.replay-full{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}.replay-compact{display:block;font-size:12px;line-height:1.35}.title-cast{height:145px}}
@media(min-width:701px) and (max-height:740px){.title-cast{height:155px}}
#info-dialog{background:#fff8e4;padding-top:22px}#info-dialog #dialog-heading{background:url('./images/ui-speech-bubble.webp') center/contain no-repeat;min-height:78px;max-width:300px;display:grid;place-items:center;padding:8px 24px 22px;margin:0 auto 8px;text-align:center}
@media(max-width:700px){.sentence{grid-template-columns:minmax(0,1.15fr) minmax(44px,.8fr) minmax(0,1.15fr) minmax(44px,.8fr) minmax(0,1.4fr)}.island{min-width:0;aspect-ratio:auto;height:54px;background-size:135% auto;font-size:clamp(16px,4.6vw,18px)}.island.verb{font-size:clamp(12px,3.6vw,14px)}.controls{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:2px}.controls .wood,.controls #swap{width:100%;min-width:0;padding:6px 5px;font-size:13px}.controls #swap{font-size:15px}}
@media(min-width:701px) and (max-height:900px){.title-screen{gap:0}h1{width:470px}.title-pitch{width:740px;max-width:94%;font-size:19px;aspect-ratio:6.4}.title-cast{height:155px}.title-actions .large{min-height:60px}.title-note{margin-top:0}}

/* Match artwork to the label box: contain in a short, wide box shrinks the sign behind the text.
   Keep labels inside the leaf-free middle 68% while retaining phone-sized tap targets. */
.result-screen{padding-top:4px}.result-logo{width:260px}.result-screen h2{width:min(100%,420px);aspect-ratio:5;min-height:0;font-size:28px;line-height:1.2;white-space:nowrap;background-size:100% 100%;margin:8px auto}.celebration{height:120px;margin:8px 0}.reflection{font-size:18px;padding:8px 18px;margin:8px auto}.review-offer{width:min(100%,540px);margin:8px auto;padding:10px 14px;background:#fff8e8f5;border:2px solid #79a95c;border-radius:18px}.review-offer p{font-size:16px;line-height:1.6;margin:0 0 4px}.review-offer .wood{width:min(100%,320px);aspect-ratio:800/201;min-height:0;font-size:22px;line-height:1.2;white-space:nowrap;padding:8px 40px;background-size:100% 100%}.result-actions{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:4px}.result-actions .wood{min-width:0;width:230px;max-width:100%;min-height:58px;font-size:17px;white-space:nowrap;padding:8px 30px;background-size:100% 100%}
@media(max-width:700px){.result-logo{width:200px}.result-screen h2{min-height:0;font-size:20px}.celebration{height:80px;margin:6px 0}.reflection{font-size:14px;line-height:1.5;padding:6px 12px}.review-offer{padding:8px 10px;margin:6px auto}.review-offer p{font-size:13px}.review-offer .wood{min-height:0;font-size:18px;width:min(100%,280px);padding-inline:36px}.result-actions{flex-wrap:nowrap}.result-actions .wood{flex:1 1 0;width:auto;font-size:12px;min-height:48px;padding:8px 20px}.result-actions #again{flex-grow:1.25}}