:root{--ink:#24303b;--paper:#fff8df;--red:#b84235;--blue:#315f7d;--gold:#e5a62f;--green:#3f795d;--sky:#badcd8;--shadow:#735a46;--safe:#2f7659;--warn:#b96b20;--danger:#a52e2e;font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:var(--ink);background:#8fb4b0}
*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%;overflow-x:hidden}body{background:#8fb4b0}button{font-family:inherit}.app-shell{position:relative;width:min(100%,1100px);height:100svh;min-height:568px;margin:0 auto;display:grid;grid-template-rows:50px minmax(0,1fr);overflow:hidden;background:var(--paper);box-shadow:0 0 35px #3348}.app-shell{height:100dvh}.topbar{z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;padding:4px max(6px,env(safe-area-inset-left));border-bottom:3px solid var(--ink);background:#f6df9b}.brand{display:flex;align-items:center;gap:4px;font-size:14px;white-space:nowrap}.brand span{font-size:25px}.hud{display:flex;justify-content:center;gap:clamp(5px,3vw,22px);font-size:14px}.hud span{white-space:nowrap}.hud b{display:block;text-align:center;font-size:15px}.top-actions{display:flex;gap:3px}.icon-button{min-width:44px;height:44px;padding:0;border:2px solid var(--ink);background:#fff8df;color:var(--ink);font-family:inherit;font-size:20px;font-weight:900;line-height:1;box-shadow:2px 2px 0 var(--ink);cursor:pointer}.screen{min-height:0}.screen[hidden],.overlay[hidden]{display:none!important}.start-screen{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(270px,.8fr);min-height:0;background:var(--sky);overflow:hidden}.paper-sky{position:relative;overflow:hidden;background:linear-gradient(#b8ddd9 0 74%,#8faf78 74%)}.paper-sky:after{content:"";position:absolute;inset:auto 0 17% 0;height:15%;background:repeating-linear-gradient(90deg,#e9c979 0 42px,#d9b760 42px 45px);clip-path:polygon(0 70%,7% 20%,13% 70%,21% 7%,28% 70%,36% 30%,44% 70%,54% 12%,62% 70%,70% 28%,78% 70%,89% 0,100% 70%,100% 100%,0 100%)}.cloud{position:absolute;width:100px;height:28px;background:#fff9e9;border:3px solid var(--ink);border-radius:50%;filter:drop-shadow(4px 4px 0 #748c8a)}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border:inherit;border-radius:50%}.cloud:before{width:40px;height:38px;left:15px;top:-22px}.cloud:after{width:47px;height:45px;right:8px;top:-27px}.cloud-a{left:7%;top:12%}.cloud-b{right:7%;top:28%;transform:scale(.7)}.cover-tower{position:absolute;left:50%;bottom:16%;width:min(48%,235px);transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;filter:drop-shadow(9px 9px 0 #604d3b)}.cover-tower i{display:block;width:85%;height:43px;border:4px solid var(--ink);background:var(--paper);clip-path:polygon(5% 0,95% 0,100% 100%,0 100%)}.cover-tower i:nth-child(2){width:76%;background:#eaa981}.cover-tower i:nth-child(3){width:68%;background:#f5df93}.cover-tower i:nth-child(4){width:58%;background:#82b6a4}.cover-tower i:nth-child(5){width:48%;background:#d87a62}.cover-tower i:after{content:"";display:block;width:16%;height:100%;margin:auto;background:#315f7d;border-inline:3px solid var(--ink)}.crane{position:absolute;left:16%;top:4%;width:11px;height:54%;background:var(--red);border:3px solid var(--ink)}.crane:before{content:"";position:absolute;left:-4px;top:2px;width:220px;height:10px;background:var(--red);border:3px solid var(--ink)}.crane:after{content:"";position:absolute;left:170px;top:12px;width:3px;height:82px;background:var(--ink)}.crane span{position:absolute;left:154px;top:86px;width:40px;height:22px;background:var(--gold);border:3px solid var(--ink)}.paper-houses{position:absolute;left:0;right:0;bottom:0;height:17%;display:flex;align-items:end;justify-content:space-around}.paper-houses i{width:18%;height:60%;background:#e8a96e;border:3px solid var(--ink);clip-path:polygon(50% 0,100% 32%,100% 100%,0 100%,0 32%)}.paper-houses i:nth-child(2){height:95%;background:#e8dfb5}.paper-houses i:nth-child(3){height:72%;background:#c47a6c}.paper-houses i:nth-child(4){height:85%;background:#7faaa0}.start-copy{z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(14px,4vw,50px);border-left:5px solid var(--ink);background:var(--paper);box-shadow:-9px 0 0 #ffffff88}.eyebrow{margin:0 0 6px;font-size:14px;font-weight:900;letter-spacing:.08em;color:#765126}.start-copy h1{margin:0;font-size:clamp(38px,5vw,68px);line-height:1.05;letter-spacing:.03em}.start-copy h1 em{color:var(--red);font-style:normal;text-decoration:underline double var(--gold)}.start-copy p:not(.eyebrow){font-size:clamp(14px,1.7vw,18px);line-height:1.55}.primary-button,.secondary-button,.build-button,.brace-button,.text-button{min-height:44px;border:3px solid var(--ink);font-family:inherit;font-size:16px;font-weight:900;line-height:1.25;cursor:pointer}.primary-button,.build-button{padding:10px 18px;background:var(--red);color:#fff;box-shadow:4px 4px 0 var(--ink)}.secondary-button{padding:9px 15px;background:#f3d77e;color:var(--ink);box-shadow:4px 4px 0 var(--ink)}.text-button{margin-top:8px;padding:7px 10px;background:transparent;color:var(--blue);border-color:transparent;text-decoration:underline}.game-screen{min-height:0}.game-field{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(160px,1fr) auto;background:#badcd8;overflow:hidden;touch-action:pan-y}.reading-strip{position:relative;z-index:4;padding:5px 8px 4px;border-bottom:3px solid var(--ink);background:#fff9e6;box-shadow:0 4px 0 #5b7d7933}.mission-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px}.mission-line h2{min-width:0;margin:0;font-size:16px;line-height:1.25;overflow-wrap:anywhere}.mission-line>span{font-size:14px;font-weight:900}.mission-line>span:first-child{padding:2px 5px;background:#315f7d;color:#fff}.wind-text{color:#8c351d;white-space:nowrap}.sentence-list{counter-reset:item;margin:3px 0 0;padding:0;display:grid;gap:1px;list-style:none;font-size:14px;line-height:1.25}.sentence-list li{display:grid;grid-template-columns:22px 1fr;gap:4px;min-width:0}.sentence-list li:before{counter-increment:item;content:counter(item);width:20px;height:20px;display:grid;place-items:center;background:#f0c960;border:1px solid var(--ink);border-radius:50%;font-weight:900}.construction-yard{position:relative;min-height:0;overflow:hidden;background:linear-gradient(#9ccbc6 0 74%,#b9a47c 74%)}.construction-yard:before{content:"";position:absolute;inset:auto 0 22% 0;height:21%;background:repeating-linear-gradient(90deg,transparent 0 18px,#657a72 18px 20px);opacity:.28}.sky-note{position:absolute;z-index:5;left:6px;top:5px;max-width:calc(100% - 12px);padding:3px 7px;border:2px solid var(--ink);background:#fff8df;font-size:14px;font-weight:900;box-shadow:2px 2px 0 #315f7d}.tower{position:absolute;left:50%;bottom:3px;width:min(92%,520px);height:calc(100% - 6px);transform:translateX(-50%);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;transition:transform .25s ease}.tower.wobble-left{transform:translateX(-50%) rotate(-2.5deg);transform-origin:50% 100%}.tower.wobble-right{transform:translateX(-50%) rotate(2.5deg);transform-origin:50% 100%}.tower.danger{animation:warning-sway .65s ease-in-out 2}.tower-base{width:62%;height:20px;display:grid;place-items:center;border:3px solid var(--ink);background:#7d674f;color:#fff;font-size:14px;font-weight:900}.built-floors{width:100%;display:flex;flex-direction:column-reverse;align-items:center}.built-floor{height:12px;border:2px solid var(--ink);background:#f2ce75;box-shadow:0 -3px 0 #fff8df}.built-floor:nth-child(3n+2){background:#db8f70}.built-floor:nth-child(3n){background:#7fb2a3}.active-floor{width:100%;display:flex;flex-direction:column;align-items:center}.joint-row{width:82%;min-height:32px;display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:2px;padding:2px 4px;border:2px dashed #4c5f66;background:#ffffffcc;font-size:14px}.joint-row>span{font-weight:900}.joint-choices{display:flex;gap:4px}.joint-choice{min-height:44px;padding:3px 7px;border:2px solid var(--ink);background:#f1d985;color:var(--ink);font-family:inherit;font-size:14px;font-weight:900;line-height:1.1}.joint-choice[aria-pressed="true"]{outline:4px solid #315f7d;background:#fff}.slot-row{width:100%;height:74px;display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));align-items:end;gap:3px;padding:0 3px}.slot{position:relative;min-width:44px;height:50px;padding:2px;border:3px dashed #52656d;background:#f7f1d5aa;color:#26343a;font-family:inherit;font-size:14px;font-weight:900;line-height:1.1}.slot:before{display:block;font-size:14px}.slot[data-pos="0"]{height:70px;border-style:solid;background:#d9e4d5}.slot[data-pos="0"]:before{content:"中心柱"}.slot[data-pos="-2"]:before,.slot[data-pos="2"]:before{content:"外側+点"}.slot[data-pos="-1"]:before,.slot[data-pos="1"]:before{content:"支え"}.slot.occupied{border-style:solid;background:#f0c96b}.slot.occupied.main-beam{background:#77a5bb;color:#10232d}.slot.selected-target{outline:4px solid #fff;box-shadow:0 0 0 7px #315f7d}.danger-flag{position:absolute;z-index:6;left:50%;top:40px;width:max-content;max-width:calc(100% - 12px);padding:5px 8px;border:3px solid var(--ink);background:#f6be51;color:#5f210f;font-size:14px;font-weight:900;line-height:1.25;text-align:center;opacity:0;visibility:hidden;transform:translate(-50%,-4px) scale(.96);transition:opacity .2s,transform .2s,visibility 0s linear .2s}.danger-flag.show{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition-delay:0s}.beam-dock{position:relative;z-index:8;padding:4px 5px max(5px,env(safe-area-inset-bottom));border-top:3px solid var(--ink);background:#e9d7ad}.beam-tray{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.beam{position:relative;min-width:0;min-height:44px;padding:3px;border:3px solid var(--ink);background:#fff7dd;color:var(--ink);font-family:inherit;font-size:14px;font-weight:900;line-height:1.12;box-shadow:2px 2px 0 #6e5947;touch-action:pan-y}.beam small{display:block;font-size:14px;font-weight:700}.beam[aria-pressed="true"]{background:#f0c860;outline:3px solid #315f7d}.beam.placed{background:#d8e3df}.dock-actions{display:grid;grid-template-columns:minmax(105px,.7fr) minmax(145px,1.3fr);gap:6px;margin-top:5px}.brace-button{padding:6px;background:#e8f0e1;color:#244d38}.brace-button:disabled{opacity:.45}.build-button{padding:6px}.quiz-screen,.result-screen{display:grid;place-items:center;padding:8px;background:#90b9b4}.quiz-paper{width:min(100%,680px);max-height:100%;padding:clamp(10px,3vw,24px);border:4px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--shadow)}.quiz-paper h2{margin:0 0 5px;font-size:clamp(22px,4vw,34px)}.quiz-question{margin:5px 0 8px;font-size:clamp(16px,2.6vw,22px);font-weight:900;line-height:1.35}.quiz-choices{display:grid;grid-template-columns:1fr 1fr;gap:6px}.quiz-choice{min-width:0;min-height:48px;padding:5px;border:3px solid var(--ink);background:#fff;font-family:inherit;font-size:15px;font-weight:900;line-height:1.25;overflow-wrap:anywhere}.quiz-choice.correct:before{content:"○ ";color:var(--safe)}.quiz-choice.wrong:before{content:"× ";color:var(--danger)}.quiz-explanation{margin:8px 0;padding:6px 8px;border-left:6px solid var(--green);background:#e2edd8;font-size:14px;line-height:1.35}.result-screen{grid-template-columns:minmax(180px,.9fr) minmax(260px,1.1fr);gap:clamp(10px,4vw,45px);padding:clamp(10px,4vw,38px);background:#badcd8}.result-scene{position:relative;width:100%;height:min(58vh,480px);min-height:260px;border:4px solid var(--ink);background:linear-gradient(#9ed2cd 0 70%,#af9b71 70%);overflow:hidden;box-shadow:8px 8px 0 #5e4c3f}.final-tower{position:absolute;left:50%;bottom:19%;width:62%;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center}.final-tower i{display:block;width:var(--w,80%);height:28px;border:3px solid var(--ink);background:var(--paper)}.final-tower i:nth-child(2n){background:#e5ad76}.final-tower i:nth-child(3n){background:#74a89b}.town-row{position:absolute;left:0;right:0;bottom:0;height:20%;display:flex;align-items:end;justify-content:space-around}.town-row i{width:17%;height:70%;background:#d48066;border:3px solid var(--ink);clip-path:polygon(50% 0,100% 30%,100% 100%,0 100%,0 32%)}.town-row i:nth-child(even){height:95%;background:#f0d989}.result-copy{min-width:0}.result-copy h2{margin:2px 0;font-size:clamp(25px,4vw,43px);line-height:1.12}.score-board{display:flex;align-items:end;gap:12px;margin:9px 0;padding:6px 10px;border:3px solid var(--ink);background:#fff8df}.score-board span{font-size:14px;font-weight:900}.score-board strong{font-size:clamp(32px,7vw,58px);line-height:1;color:var(--red)}.result-copy p{font-size:14px;line-height:1.4}.result-actions{display:flex;flex-wrap:wrap;gap:8px}.overlay{position:absolute;z-index:50;inset:50px 0 0;display:grid;place-items:center;padding:8px;background:#1f2b32d9}.overlay-card{width:min(100%,560px);max-height:100%;overflow:auto;padding:16px;border:4px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 #0008}.overlay-card h2{margin:0 0 8px}.reading-card ol{padding-left:24px;line-height:1.55;font-size:15px}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.ranking-card{height:min(100%,620px);display:flex;flex-direction:column;color:var(--ink)}.ranking-panel{min-height:0;overflow:auto;background:#fff;color:#1d2b32}.ranking-panel button,.ranking-panel [role="tab"]{color:#1d2b32}.ranking-panel [aria-selected="true"],.ranking-panel .active{background:#315f7d!important;color:#fff!important}.success-burst{pointer-events:none;position:absolute;z-index:40;left:50%;top:47%;width:30px;height:30px;opacity:0;transform:translate(-50%,-50%);border:6px double #fff;border-radius:50%}.success-burst.show{animation:burst .65s ease-out}.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}
.town-row i{clip-path:polygon(50% 0,100% 30%,100% 100%,0 100%,0 30%)}
@keyframes warning-sway{25%{transform:translateX(-50%) rotate(-3deg)}75%{transform:translateX(-50%) rotate(3deg)}}@keyframes burst{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(10)}}
@media(max-width:680px){.app-shell{box-shadow:none}.brand strong{display:none}.hud{gap:5px}.hud span{font-size:14px}.hud b{font-size:14px}.start-screen{grid-template-columns:1fr;grid-template-rows:minmax(210px,1fr) auto}.paper-sky{min-height:210px}.start-copy{border-left:0;border-top:4px solid var(--ink);padding:10px 14px 12px}.start-copy h1{font-size:31px}.start-copy p:not(.eyebrow){margin:5px 0;font-size:14px;line-height:1.35}.text-button{position:absolute;right:7px;bottom:9px;margin:0}.primary-button{padding:8px 13px}.reading-strip{padding-inline:5px}.sentence-list{font-size:14px}.mission-line h2{font-size:15px}.sky-note{font-size:14px}.joint-row{width:96%;justify-content:space-between}.joint-row>span{font-size:14px}.joint-choice{padding-inline:4px}.slot-row{gap:2px;padding-inline:1px}.slot{font-size:14px}.beam small{display:none}.result-screen{grid-template-columns:.72fr 1.28fr;gap:8px;padding:8px}.result-scene{height:58vh;min-height:245px}.result-copy h2{font-size:24px}.result-copy p{margin:6px 0}.score-board{display:block;margin:5px 0}.score-board strong{display:block}.result-actions{display:grid}.quiz-paper{padding:10px}.quiz-choices{gap:5px}.overlay{padding:5px}}
@media(max-height:620px){.app-shell{min-height:0}.topbar{height:46px}.app-shell{grid-template-rows:46px minmax(0,1fr)}.overlay{inset:46px 0 0}.reading-strip{padding-block:2px}.sentence-list{line-height:1.12}.construction-yard .sky-note{top:2px}.slot-row{height:66px}.slot{height:46px}.slot[data-pos="0"]{height:62px}.beam-dock{padding-top:2px}.beam{min-height:44px}.dock-actions{margin-top:3px}.result-scene{min-height:210px}.quiz-paper h2{font-size:22px}.quiz-question{margin-block:3px}.quiz-explanation{margin:5px 0}}
@media(max-width:360px){.topbar{padding-inline:3px}.hud span:first-child{display:none}.reading-strip .sentence-list{line-height:1.12}.slot{padding-inline:0}.brace-button,.build-button{font-size:14px}.result-copy p{font-size:14px}.result-scene{min-height:200px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}