:root{--ink:#23332d;--paper:#fff8dc;--cream:#f6e7bd;--leaf:#4c8b57;--leaf2:#85ad53;--red:#d9513c;--blue:#3979a8;--gold:#f2bd45;--bark:#765038;--shadow:#1f2a2440;font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",system-ui,sans-serif;color:var(--ink);background:#d6e6b6}
*{box-sizing:border-box}html{min-width:320px;background:#d6e6b6}body{margin:0;min-height:100vh;background:repeating-linear-gradient(0deg,#d6e6b6 0,#d6e6b6 26px,#c9dba9 27px);overflow-x:hidden}.page-shell{width:min(1120px,100%);margin:auto;padding:18px clamp(10px,3vw,28px) 48px}.topline{display:flex;align-items:center;gap:14px;border-bottom:5px solid var(--ink);padding:0 0 12px}.topline p{margin:0;font:800 .72rem/1.2 monospace;letter-spacing:.12em}.topline h1{margin:2px 0 0;font-size:clamp(1.25rem,3.2vw,2rem);line-height:.93}.topline h1 em{color:var(--red);font-style:normal}.leaf-mark{position:relative;width:64px;height:58px;flex:0 0 auto}.leaf-mark i{position:absolute;width:34px;height:22px;background:var(--leaf);border:3px solid var(--ink);border-radius:90% 10% 90% 10%;transform:rotate(28deg)}.leaf-mark i:nth-child(2){right:0;transform:scaleX(-1) rotate(28deg)}.leaf-mark span{position:absolute;inset:19px 12px 0;display:grid;place-items:center;background:var(--gold);border:3px solid var(--ink);border-radius:50%;font-weight:900;font-size:1.4rem}.sound-button{margin-left:auto;min-width:72px;min-height:46px;border:3px solid var(--ink);background:var(--paper);box-shadow:4px 4px 0 var(--ink);font-weight:900;cursor:pointer}
.start-screen{display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(300px,.95fr);gap:clamp(18px,4vw,48px);padding:28px 0}.comic-cover{position:relative;min-height:510px;overflow:hidden;border:5px solid var(--ink);background:#7fc7ca;box-shadow:10px 10px 0 var(--ink);isolation:isolate}.sunburst{position:absolute;inset:-40%;background:repeating-conic-gradient(#f6d964 0 8deg,#f1b948 8deg 16deg);z-index:-2}.cover-tree{position:absolute;left:22%;right:22%;bottom:-10px;height:380px;background:var(--bark);border:5px solid var(--ink);clip-path:polygon(40% 0,60% 0,72% 100%,28% 100%)}.cover-tree i{position:absolute;width:210px;height:110px;background:var(--leaf);border:5px solid var(--ink);border-radius:50%}.cover-tree i:nth-child(1){left:-145px;top:-20px}.cover-tree i:nth-child(2){right:-145px;top:55px}.cover-tree i:nth-child(3){left:-100px;top:130px}.cover-tree span{position:absolute;left:-130px;right:-130px;top:235px;height:22px;background:#bd844b;border:5px solid var(--ink);transform:rotate(-2deg)}.cover-basket{position:absolute;padding:15px 12px 9px;border:4px solid var(--ink);border-radius:10px 10px 40% 40%;font-weight:900;letter-spacing:4px;box-shadow:4px 5px 0 #0004}.basket-one{left:6%;top:22%;background:#ee795d;transform:rotate(-8deg)}.basket-two{right:6%;top:31%;background:#65a6d1;transform:rotate(7deg)}.cover-plus{position:absolute;left:45%;top:20%;font-size:3.2rem;text-shadow:3px 3px 0 var(--paper)}.cover-sum{position:absolute;right:8%;top:7%;display:grid;place-items:center;width:88px;height:88px;border:5px solid var(--ink);border-radius:50%;background:var(--paper);font-size:3.4rem;transform:rotate(8deg)}.comic-cover p{position:absolute;left:6%;bottom:4%;margin:0;padding:10px 14px;background:var(--paper);border:4px solid var(--ink);font-weight:900;font-size:clamp(1.2rem,3vw,2rem);line-height:1.25;transform:rotate(-2deg)}.start-copy{align-self:center}.issue-label{display:inline-block;margin:0 0 10px;padding:5px 11px;background:var(--ink);color:var(--paper);font-weight:900;letter-spacing:.06em;transform:rotate(-1deg)}.start-copy h2{margin:8px 0 16px;font-size:clamp(1.8rem,4.3vw,3.25rem);line-height:1.12}.start-copy>p{font-size:1.04rem;line-height:1.8}.start-copy ol{list-style:none;margin:22px 0;padding:0;border:3px solid var(--ink);background:var(--paper)}.start-copy li{display:flex;gap:16px;padding:11px 14px;border-bottom:2px dashed var(--ink)}.start-copy li:last-child{border:0}.start-copy li b{color:var(--red);min-width:95px}.start-copy small{display:block;margin-top:13px;line-height:1.5}.ink-button{border:3px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 var(--ink);font-weight:900;min-height:50px;padding:9px 16px;cursor:pointer}.ink-button:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}.ink-button:disabled{opacity:.45;cursor:not-allowed;transform:none}.ink-button.primary{background:var(--gold);font-size:1.05rem}
.hud-strip{display:grid;grid-template-columns:repeat(4,1fr);margin:18px 0 12px;border:4px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink)}.hud-strip div{text-align:center;padding:8px;border-right:2px dashed var(--ink)}.hud-strip div:last-child{border:0}.hud-strip span{display:block;font-size:.75rem;font-weight:800}.hud-strip strong{font-size:1.3rem}.play-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.55fr);gap:16px}.tree-world{position:relative;min-height:610px;overflow:hidden;border:5px solid var(--ink);background:#8ed0cf;touch-action:pan-y;box-shadow:8px 8px 0 var(--ink)}.tree-world:after{content:"";position:absolute;left:44%;width:12%;top:170px;bottom:0;background:linear-gradient(90deg,#5f3b2a,#936443 35%,#69442f 80%);border:4px solid var(--ink);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);z-index:0}.cloud{position:absolute;width:110px;height:32px;background:#fff9;border:3px solid var(--ink);border-radius:50%;top:90px}.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border:3px solid var(--ink);border-bottom:0;border-radius:50% 50% 0 0}.cloud:before{width:50px;height:35px;left:14px;top:-23px}.cloud:after{width:42px;height:26px;right:12px;top:-17px}.cloud-a{left:5%}.cloud-b{right:4%;top:145px}.wind-banner{position:absolute;z-index:8;top:14px;left:14px;right:14px;display:flex;align-items:center;gap:12px;padding:8px 13px;border:3px solid var(--ink);background:var(--paper);font-size:1.05rem}.wind-banner span{font-size:1.7rem}.wind-banner[data-wind="-1"] span{transform:scaleX(-1)}.wind-banner[data-wind="0"] span{opacity:.25}.tree-crown{position:absolute;z-index:2;left:15%;right:15%;top:105px;height:140px;background:var(--leaf);border:5px solid var(--ink);border-radius:50% 44% 48% 52%;box-shadow:-80px 38px 0 -22px var(--leaf2),80px 42px 0 -24px var(--leaf2)}.built-floors{position:absolute;z-index:3;left:18%;right:18%;bottom:70px;display:flex;flex-direction:column-reverse;gap:7px}.built-floor{height:42px;position:relative;background:#c68b4c;border:3px solid var(--ink);transform:rotate(var(--tilt,0deg));animation:stamp-in .45s cubic-bezier(.2,1.5,.5,1)}.built-floor:before,.built-floor:after{content:"";position:absolute;top:5px;width:34%;height:25px;border:3px solid var(--ink);border-radius:10px 10px 40% 40%}.built-floor:before{left:8%;background:#e66e55}.built-floor:after{right:8%;background:#5597c3}.built-floor b{position:absolute;z-index:2;left:50%;top:8px;transform:translateX(-50%);background:var(--paper);border:2px solid var(--ink);padding:1px 6px;font-size:.86rem}.active-branch{position:absolute;z-index:5;left:8%;right:8%;bottom:40px;height:138px;transform-origin:50% 100%;transition:transform .25s}.branch-line{position:absolute;left:2%;right:2%;bottom:35px;height:22px;background:#a56e40;border:4px solid var(--ink);border-radius:50%;box-shadow:0 8px 0 #503322}.branch-line i{position:absolute;left:48%;bottom:-40px;width:8%;height:44px;background:var(--bark);border:3px solid var(--ink)}.slot-row{position:absolute;left:4%;right:4%;bottom:55px;display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.branch-slot{position:relative;min-width:0;height:90px;border:0;background:transparent;cursor:pointer}.branch-slot:after{content:"";position:absolute;left:50%;bottom:0;width:24px;height:11px;border:3px solid var(--ink);border-radius:50%;background:var(--paper);transform:translateX(-50%)}.branch-slot.edge:after{background:var(--gold)}.branch-slot:focus-visible{outline:4px solid #fff;outline-offset:-4px}.placed-basket{position:absolute;left:50%;bottom:11px;min-width:65px;max-width:90px;padding:6px 4px;border:3px solid var(--ink);border-radius:8px 8px 35% 35%;transform:translateX(-50%);font-weight:900;box-shadow:3px 3px 0 #0004;animation:drop-in .25s ease-out}.placed-basket.red{background:#e66e55}.placed-basket.blue{background:#5597c3}.placed-basket small{display:block;font-size:.62rem}.trunk{position:absolute;left:47%;bottom:-42px;width:6%;height:85px;background:var(--bark);border:3px solid var(--ink)}.sway-callout{position:absolute;z-index:7;left:14px;bottom:12px;width:170px;padding:7px 10px;border:3px solid var(--ink);background:var(--paper);transform:rotate(-1deg)}.sway-callout b,.sway-callout span{display:block}.sway-callout[data-level="warn"]{background:#ffe074}.sway-callout[data-level="danger"]{background:#f39179}.success-burst{position:absolute;z-index:10;right:8%;top:30%;display:none;padding:14px;background:var(--gold);border:5px solid var(--ink);font-size:2rem;font-weight:900;transform:rotate(7deg)}.success-burst.show{display:block;animation:burst .65s ease both}
.basket-dock{padding:18px;border:5px solid var(--ink);background:#fff5d8;box-shadow:8px 8px 0 var(--ink);align-self:start}.scene-label{margin:0;font-weight:900;color:var(--red)}.equation{display:flex;align-items:center;justify-content:center;gap:7px;margin:10px 0;padding:8px 4px;border-block:3px solid var(--ink);font-size:clamp(1.4rem,3.4vw,2.35rem);font-weight:900}.equation span,.equation strong{display:grid;place-items:center;width:52px;height:52px;border:3px solid var(--ink);border-radius:50%;background:#fff}.equation span:first-child{background:#f49a85}.equation span:nth-of-type(2){background:#8bc3e5}.equation strong{background:var(--gold)}.equation-help{font-size:.86rem;line-height:1.5}.basket-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.basket-card{min-width:0;min-height:125px;border:3px solid var(--ink);border-radius:10px 10px 35px 35px;color:var(--ink);font:inherit;cursor:grab;touch-action:pan-y;box-shadow:4px 4px 0 var(--ink)}.basket-card.red{background:#f08b72}.basket-card.blue{background:#73add3}.basket-card[aria-pressed="true"]{outline:5px solid var(--gold);outline-offset:2px;transform:translateY(-4px)}.basket-card .basket-name,.basket-card b{display:block;font-weight:900}.basket-card i{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin:7px auto;max-width:86px}.basket-card i span{width:11px;height:11px;border:2px solid var(--ink);border-radius:50%;background:#b36b35}.selection-status,.status-text{padding:8px;border:2px dashed var(--ink);font-size:.84rem;line-height:1.45}.risk-key{display:flex;justify-content:space-between;gap:6px;margin:10px 0;font-size:.7rem;font-weight:800}.risk-key i{display:inline-block;width:13px;height:13px;margin-right:3px;border:2px solid var(--ink);border-radius:50%;vertical-align:-2px}.safe-dot{background:var(--paper)}.risk-dot{background:var(--gold)}.basket-dock .ink-button{width:100%;margin-top:9px}.basket-dock .ink-button small{display:block;font-weight:600}.rope.used{background:#9fd3a3}.lock{background:var(--gold)}
.quiz-screen,.result-screen{margin:28px auto;padding:clamp(18px,5vw,45px);border:5px solid var(--ink);background:var(--paper);box-shadow:10px 10px 0 var(--ink);max-width:820px}.quiz-screen{position:relative}.quiz-squirrel{float:right;width:100px;height:100px;background:var(--bark);border:4px solid var(--ink);border-radius:55% 45% 45% 55%}.quiz-squirrel:before{content:"";position:absolute;width:48px;height:48px;margin:-18px 0 0 53px;background:#bd8154;border:4px solid var(--ink);border-radius:50%}.quiz-screen h2,.result-screen h2{font-size:clamp(1.6rem,5vw,3rem);margin:8px 0}.quiz-question{font-size:clamp(1.2rem,3vw,1.7rem);font-weight:900;line-height:1.45}.quiz-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quiz-choice{min-width:0;min-height:60px;padding:9px;border:3px solid var(--ink);background:#fff;font:900 1rem/1.35 inherit;box-shadow:4px 4px 0 var(--ink);cursor:pointer;overflow-wrap:anywhere}.quiz-choice.correct:before{content:"○ ";color:#287346}.quiz-choice.wrong:before{content:"× ";color:#a62b27}.quiz-explanation{margin:18px 0;padding:13px;border:3px solid var(--ink);background:#dfeebd;line-height:1.65}.result-screen{max-width:1000px;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.75fr);gap:20px}.result-screen[hidden]{display:none}.result-comic{min-width:0}.final-tree{height:155px;display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;background:#9ed0ca;border:3px solid var(--ink);overflow:hidden}.final-tree i{width:55%;height:16px;background:#b37843;border:2px solid var(--ink);margin:-1px}.final-tree i:nth-child(even){transform:translateX(9px)}.final-score{display:flex;align-items:end;gap:15px;margin:12px 0}.final-score span{font-weight:900}.final-score strong{font-size:3.2rem;color:var(--red)}.result-comic dl{display:grid;grid-template-columns:1fr 1fr;border:3px solid var(--ink)}.result-comic dl div{padding:9px;border:1px dashed var(--ink)}.result-comic dt{font-size:.75rem}.result-comic dd{margin:2px 0 0;font-weight:900;font-size:1.2rem}.ranking-panel{min-width:0;align-self:start;max-height:580px;overflow:auto;border:3px solid var(--ink);background:#fff;color:#18251f}.ranking-panel button,.ranking-panel [role="tab"]{color:#18251f}.ranking-panel [aria-selected="true"],.ranking-panel .active{background:#315f45!important;color:#fff!important}
@keyframes drop-in{from{transform:translate(-50%,-60px) rotate(8deg);opacity:0}to{transform:translate(-50%,0);opacity:1}}@keyframes stamp-in{from{transform:scale(.4) rotate(8deg);opacity:0}to{transform:scale(1) rotate(var(--tilt,0deg));opacity:1}}@keyframes burst{0%{transform:scale(.2) rotate(-12deg);opacity:0}45%{transform:scale(1.2) rotate(8deg)}100%{transform:scale(1) rotate(5deg);opacity:1}}
@media(max-width:780px){.page-shell{padding-inline:8px}.topline{padding-inline:5px}.start-screen,.play-layout{grid-template-columns:1fr}.comic-cover{min-height:390px}.cover-tree{height:290px}.start-copy{padding:6px}.tree-world{min-height:530px}.basket-dock{box-shadow:5px 5px 0 var(--ink)}.result-screen{grid-template-columns:1fr}.ranking-panel{max-height:none}.hud-strip strong{font-size:1rem}.hud-strip span{font-size:.64rem}.hud-strip div{padding-inline:2px}.quiz-choices{grid-template-columns:1fr}.quiz-screen,.result-screen{margin-inline:4px;padding:18px 13px}.risk-key{font-size:.66rem}}
@media(max-width:430px){.leaf-mark{width:48px;height:47px}.leaf-mark i{width:29px;height:18px}.leaf-mark span{inset:16px 7px 0}.topline h1{font-size:1.08rem}.sound-button{min-width:62px;padding:4px}.comic-cover{min-height:330px}.cover-tree{height:240px}.comic-cover p{font-size:1.1rem}.cover-sum{width:65px;height:65px;font-size:2.5rem}.tree-world{min-height:485px}.tree-crown{top:95px}.built-floors{left:12%;right:12%}.active-branch{left:2%;right:2%}.branch-slot{height:78px}.placed-basket{min-width:51px;font-size:.75rem}.sway-callout{width:145px;font-size:.76rem}.basket-dock{padding:12px}.equation{font-size:1.3rem}.equation span,.equation strong{width:44px;height:44px}.basket-card{min-height:116px}.result-comic dl{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.cloud{display:none}}