:root{--ink:#18343a;--paper:#f4ead4;--cream:#fff8e8;--red:#c44932;--blue:#2e7f93;--deep:#173f4a;--gold:#e8a93d;--mint:#acd4c4;--shadow:#9d6b45;--line:#244c53;font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:var(--ink);background:#eadfc7;color-scheme:light}
*{box-sizing:border-box}html{min-width:320px;background:#1b4148}body{margin:0;min-height:100vh;background:linear-gradient(#e9be78 0 5px,#f4ead4 5px 100%);overflow-x:hidden}.topline{max-width:1180px;margin:auto;min-height:82px;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid var(--ink)}.title-lockup{display:flex;align-items:center;gap:12px}.title-lockup small{font-size:.72rem;letter-spacing:.13em;font-weight:800}.title-lockup h1{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(1.25rem,3vw,2rem);margin:2px 0 0;letter-spacing:.05em}.drop-mark{width:29px;height:38px;background:var(--blue);border:3px solid var(--ink);display:block;border-radius:55% 45% 58% 42% / 65% 62% 38% 35%;transform:rotate(20deg);box-shadow:4px 4px 0 #fff}.sound-toggle{border:2px solid var(--ink);background:transparent;color:var(--ink);font-weight:800;padding:10px 14px;min-height:44px;cursor:pointer}.sound-toggle:focus-visible,button:focus-visible,input:focus-visible{outline:4px solid #fff;box-shadow:0 0 0 7px var(--red)}main{max-width:1180px;margin:0 auto;padding:22px}.screen{border:3px solid var(--ink);box-shadow:8px 8px 0 rgba(24,52,58,.24);background:var(--cream)}[hidden]{display:none!important}
.start-screen{min-height:610px;display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden}.sun-window{position:relative;min-height:610px;background:#efb45e;border-right:3px solid var(--ink);overflow:hidden}.sun-window:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 18px,rgba(24,52,58,.08) 19px 20px)}.sun-window:after{content:"";position:absolute;left:-12%;right:-10%;height:230px;bottom:-80px;background:var(--deep);border-radius:48% 52% 0 0;box-shadow:0 -80px 0 -55px #2b6b70}.sun{position:absolute;width:210px;height:210px;border:4px solid var(--ink);background:#fff3c7;border-radius:50%;left:14%;top:80px;box-shadow:18px 18px 0 rgba(196,73,50,.8)}.steam-line{position:absolute;width:80px;height:200px;border:16px solid rgba(255,248,232,.8);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(-15deg)}.steam-line.a{left:48%;top:80px}.steam-line.b{left:61%;top:165px;transform:scale(.7) rotate(15deg)}.steam-line.c{left:28%;top:250px;transform:scale(.55) rotate(-30deg)}.start-copy{padding:clamp(28px,5vw,70px);align-self:center}.overline{font-size:.74rem;font-weight:900;letter-spacing:.15em;color:var(--red)}.start-copy h2{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(2rem,5vw,3.6rem);line-height:1.25;margin:.25em 0}.start-copy>p:not(.overline,.small-note){font-weight:650;line-height:1.85}.start-copy ol{list-style:none;padding:0;margin:26px 0}.start-copy li{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-weight:800}.start-copy li b{display:grid;place-items:center;min-width:32px;height:32px;border-radius:50%;color:#fff;background:var(--red)}.main-button,.observe-button{min-height:50px;border:3px solid var(--ink);background:var(--red);color:#fff;font-weight:900;font-size:1rem;padding:12px 22px;box-shadow:4px 4px 0 var(--ink);cursor:pointer}.main-button:active,.observe-button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}.small-note{font-size:.78rem;font-weight:700;margin-top:16px}
.play-screen{background:#dfcfaa}.morning-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--deep);color:#fff;border-bottom:3px solid var(--ink)}.morning-strip div{padding:10px 16px;border-right:1px solid #7fa3a4}.morning-strip div:last-child{border:0}.morning-strip small{display:block;font-size:.7rem}.morning-strip strong{font-size:1.15rem}.warning-banner{display:flex;gap:12px;align-items:center;padding:10px 18px;border-bottom:3px solid var(--ink);background:#dbe7d6}.warning-banner.warning{background:#ffe49b}.warning-banner.danger{background:#f5a08d}.warning-banner.active{background:#b9dfeb}.warning-symbol{display:grid;place-items:center;width:34px;height:34px;border:3px solid currentColor;border-radius:50%;font-weight:900}.warning-banner div{display:flex;flex-wrap:wrap;gap:6px 18px}.warning-banner b{font-size:.9rem}.warning-banner span:last-child{font-size:.82rem;font-weight:700}
.kitchen-world{position:relative;height:440px;overflow:hidden;background:#efc777;touch-action:pan-y;border-bottom:3px solid var(--ink)}.kitchen-world:before{content:"";position:absolute;left:0;right:0;bottom:0;height:112px;background:#b86d45;border-top:5px solid var(--ink);box-shadow:inset 0 20px #d4905f}.window-scene{position:absolute;left:5%;top:38px;width:25%;height:180px;border:8px solid var(--cream);outline:4px solid var(--ink);background:#74aab0;overflow:hidden}.window-scene:after,.window-scene:before{content:"";position:absolute;background:var(--cream)}.window-scene:before{left:48%;width:8px;height:100%}.window-scene:after{top:48%;height:8px;width:100%}.morning-sun{position:absolute;width:70px;height:70px;border-radius:50%;background:#ffe6a5;right:20px;top:20px;border:3px solid var(--ink)}.window-scene i{position:absolute;bottom:-20px;width:80px;height:80px;background:#3b7873;border-radius:50%}.window-scene i:nth-child(2){left:15px}.window-scene i:nth-child(3){left:90px}.window-scene i:nth-child(4){left:160px}.pipe{position:absolute;left:58%;top:38px;width:28%;height:72px;border:18px solid var(--deep);border-left:0;border-bottom:0;border-radius:0 45px 0 0}.pipe span{position:absolute;right:-18px;bottom:-86px;width:18px;height:90px;background:var(--deep)}.condenser{position:absolute;right:7%;top:105px;width:145px;height:118px;border:4px solid var(--ink);background:repeating-linear-gradient(90deg,#c5e2dd 0 13px,#73aaa7 14px 20px);box-shadow:7px 7px 0 rgba(24,52,58,.25);text-align:center;padding:12px}.condenser strong,.condenser span{position:relative;z-index:2;display:block;background:var(--cream);border:2px solid var(--ink)}.condenser span{border-top:0;font-weight:900}.drop{position:absolute;width:14px;height:20px;background:#d8f4f4;border:2px solid var(--ink);border-radius:55% 45% 60% 40%;transform:rotate(20deg);bottom:-25px}.drop.d1{left:25px}.drop.d2{left:65px;bottom:-38px}.drop.d3{left:105px}.steam-cloud{position:absolute;left:48%;top:55px;width:240px;height:150px}.steam-cloud i{position:absolute;width:54px;height:54px;border:5px solid rgba(255,255,255,.82);border-left-color:transparent;border-radius:50%;animation:curl 2.4s ease-in-out infinite}.steam-cloud i:nth-child(2){left:42px;top:42px;animation-delay:-.4s}.steam-cloud i:nth-child(3){left:93px;top:2px;animation-delay:-.8s}.steam-cloud i:nth-child(4){left:135px;top:58px;animation-delay:-1.2s}.steam-cloud i:nth-child(5){left:183px;top:20px;animation-delay:-1.6s}.steam-cloud.quiet i{opacity:.25;animation:none}.lid-visual{position:absolute;left:39%;top:190px;width:250px;height:54px;transition:transform .35s ease}.lid-visual span{display:block;width:100%;height:25px;border:4px solid var(--ink);border-radius:50% 50% 15px 15px;background:#507c79;box-shadow:0 6px #274d50}.lid-visual span:before{content:"";position:absolute;width:52px;height:20px;border:4px solid var(--ink);border-bottom:0;border-radius:20px 20px 0 0;left:99px;top:-14px;background:#d6a85d}.lid-visual.open{transform:translate(-55px,-34px) rotate(-16deg);transform-origin:left}.lid-visual.closed{transform:translateY(15px)}.pot-visual{position:absolute;left:39%;top:235px;width:250px;height:142px;border:5px solid var(--ink);border-radius:14px 14px 80px 80px;background:#e7d5aa;overflow:hidden;box-shadow:9px 8px 0 rgba(24,52,58,.25)}.pot-visual:before,.pot-visual:after{content:"";position:absolute;top:27px;width:55px;height:30px;border:7px solid var(--ink)}.pot-visual:before{left:-51px;border-radius:30px 0 0 30px}.pot-visual:after{right:-51px;border-radius:0 30px 30px 0}.pot-water{position:absolute;left:0;right:0;bottom:0;height:48%;background:#58aab7;border-top:4px solid var(--ink);transition:height .4s}.pot-ice{position:absolute;left:30px;right:30px;bottom:24px;height:65px;display:flex;gap:12px;align-items:flex-end}.pot-ice i{width:48px;height:42px;border:3px solid var(--ink);background:#cce9e4;transform:rotate(-8deg)}.pot-ice i:nth-child(2){height:55px;transform:rotate(10deg)}.pot-label{position:absolute;left:65px;top:15px;background:var(--cream);border:3px solid var(--ink);padding:4px 18px;font-weight:900}.flame-visual{position:absolute;left:43%;bottom:36px;width:165px;height:60px;display:flex;justify-content:center;gap:3px}.flame-visual i{width:42px;height:55px;background:var(--red);border:3px solid var(--ink);border-radius:65% 35% 55% 45%;transform:rotate(45deg) scale(var(--flame-scale,.55));transition:transform .3s}.flame-visual i:nth-child(2){background:#f0aa3c}.collection-jar{position:absolute;right:8%;bottom:40px;width:120px;height:128px;border:5px solid var(--ink);border-radius:10px 10px 35px 35px;background:rgba(255,248,232,.72);overflow:hidden;text-align:center;padding-top:22px}.collection-jar:before{content:"";position:absolute;left:-8px;right:-8px;top:-8px;height:18px;background:#bd8260;border:4px solid var(--ink)}.collection-jar b,.collection-jar span{position:relative;z-index:2;display:block}.collection-jar b{font-size:1.6rem}.collection-jar span{font-size:.72rem;font-weight:900}.jar-water{position:absolute;left:0;right:0;bottom:0;height:0;background:#83cbd0;transition:height .5s}.world-caption{position:absolute;left:4%;bottom:28px;max-width:31%;background:var(--cream);border:3px solid var(--ink);padding:9px 13px;box-shadow:4px 4px 0 var(--ink)}.world-caption b,.world-caption span{display:block}.world-caption span{font-size:.78rem;font-weight:700;margin-top:3px}
.science-rail{display:grid;grid-template-columns:160px 1fr 220px;gap:16px;padding:14px 18px;border-bottom:3px solid var(--ink);background:#f7eed9}.thermometer{display:grid;grid-template-columns:18px 1fr;column-gap:9px;align-items:center}.thermo-track{grid-row:1/3;width:18px;height:72px;border:3px solid var(--ink);background:#fff;display:flex;align-items:flex-end}.thermo-track i{display:block;width:100%;height:30%;background:var(--red);transition:height .4s}.thermometer b{font-size:1.45rem}.thermometer small{font-weight:800}.state-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.state-amounts>div{display:grid;grid-template-columns:32px 1fr;grid-template-rows:1fr 1fr;align-items:center;border-left:2px solid var(--ink);padding-left:12px}.state-icon{grid-row:1/3;width:27px;height:27px;border:3px solid var(--ink)}.ice-icon{background:#caebe8;transform:rotate(10deg)}.water-icon{background:#58aab7;border-radius:50% 40% 58% 42%}.vapor-icon{border:0;font-size:2rem;font-weight:900}.state-amounts b{font-size:1.25rem}.state-amounts small{font-weight:800}.pressure-box div{height:18px;border:3px solid var(--ink);background:#fff;margin:4px 0}.pressure-box i{display:block;width:8%;height:100%;background:var(--red);transition:width .4s}.pressure-box small{font-weight:900}.pressure-box b{font-size:.8rem}
.control-counter{padding:18px;background:#f1dfb7}.resource-row{display:flex;gap:10px 26px;flex-wrap:wrap;padding-bottom:10px;border-bottom:2px solid var(--ink);font-size:.85rem;font-weight:800}.resource-row b{font-size:1.15rem}.lever-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:16px 0}.lever{display:block}.lever>span{display:flex;justify-content:space-between;gap:8px}.lever em{font-style:normal;color:var(--red);font-weight:900}.lever input{width:100%;accent-color:var(--red);min-height:34px;touch-action:pan-y}.lever small{word-spacing:1.2em;font-size:.69rem;font-weight:700}.risk-note{display:flex;justify-content:space-between;gap:12px;border:2px dashed var(--ink);padding:7px 10px;font-size:.76rem}.risk-note b{color:var(--red)}.action-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.observe-button{flex:1 1 250px}.emergency-button,.retry-button,.next-button,.ranking-toggle{min-height:48px;border:3px solid var(--ink);background:var(--mint);color:var(--ink);font-weight:900;padding:9px 14px;cursor:pointer}.retry-button{background:#f6c26b}.next-button{background:var(--deep);color:#fff}.emergency-button:disabled{opacity:.46;cursor:not-allowed}.cause-text{min-height:44px;margin:14px 0 0;background:var(--cream);border-left:7px solid var(--blue);padding:10px 12px;font-weight:800;line-height:1.5}.phase-line{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;background:var(--deep);color:#fff}.phase-line li{padding:10px;text-align:center;border-right:1px solid #719498}.phase-line span{display:inline-grid;place-items:center;width:24px;height:24px;border:2px solid #fff;border-radius:50%;margin-right:5px}.phase-line .current{background:var(--red)}
.quiz-screen{max-width:850px;margin:25px auto;padding:clamp(24px,5vw,55px);position:relative;overflow:hidden}.quiz-kettle{position:absolute;right:20px;top:10px;width:140px;height:90px;opacity:.24}.quiz-kettle i{position:absolute;width:50px;height:50px;border:6px solid var(--blue);border-left-color:transparent;border-radius:50%}.quiz-kettle i:nth-child(2){left:35px;top:25px}.quiz-kettle i:nth-child(3){left:78px;top:0}.quiz-head{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:3px solid var(--ink)}.quiz-head h2{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(1.6rem,4vw,2.7rem)}.quiz-head span{font-weight:900}.quiz-question{font-size:1.2rem;font-weight:900;line-height:1.6}.quiz-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quiz-choice{min-height:58px;text-align:left;border:3px solid var(--ink);background:#fffaf0;padding:12px;font-weight:850;cursor:pointer}.quiz-choice.correct{background:#bfe4cf}.quiz-choice.wrong{background:#f5b7a8}.quiz-choice:disabled{color:var(--ink);opacity:1}.quiz-feedback{min-height:64px;border-left:7px solid var(--gold);padding:10px 14px;background:#fff4cf;font-weight:800;line-height:1.55}.result-screen{max-width:850px;margin:25px auto;text-align:center;padding:clamp(28px,6vw,70px);position:relative;overflow:hidden}.result-art{height:140px;position:relative}.big-drop{position:absolute;width:92px;height:118px;background:var(--blue);border:5px solid var(--ink);border-radius:55% 45% 60% 40%;transform:rotate(18deg);left:calc(50% - 46px);top:5px;box-shadow:12px 12px 0 #efb45e}.result-art i{position:absolute;width:28px;height:28px;border:4px solid var(--red);border-radius:50%}.result-art i:nth-child(2){left:25%;top:30px}.result-art i:nth-child(3){right:25%;top:60px}.result-art i:nth-child(4){right:37%;top:4px}.result-screen h2{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(2rem,5vw,3.4rem);margin:.25em}.result-screen>p:not(.overline){line-height:1.7;font-weight:750}.score-ticket{display:inline-block;min-width:230px;border:4px double var(--ink);background:#f2d797;padding:14px 30px;margin:12px}.score-ticket>*{display:block}.score-ticket strong{font-size:2.7rem}.result-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:20px}.ranking-panel{scroll-margin-top:16px;text-align:left;max-width:650px;margin:20px auto 0;background:#fff;color:#18343a;border:3px solid var(--ink);padding:12px;overflow:auto}.ranking-panel .itc-leaderboard,.ranking-panel button{color:#18343a}.ranking-panel .is-active,.ranking-panel [aria-selected="true"]{background:#18343a!important;color:#fff!important}footer{max-width:1180px;margin:16px auto 40px;padding:0 22px;color:#f5eddb;font-size:.75rem;line-height:1.6;text-align:center}
@keyframes curl{0%,100%{transform:translateY(8px) rotate(-15deg);opacity:.42}50%{transform:translateY(-8px) rotate(18deg);opacity:1}}@keyframes small-shake{0%,100%{transform:translateX(0)}33%{transform:translateX(-5px)}66%{transform:translateX(5px)}}.kitchen-world.shake{animation:small-shake .36s ease}.kitchen-world.success-release{box-shadow:inset 0 0 0 12px rgba(255,248,214,.78)}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
@media (max-width:800px){main{padding:10px}.topline{padding:10px 12px}.title-lockup small{display:none}.start-screen{grid-template-columns:1fr}.sun-window{min-height:250px;border-right:0;border-bottom:3px solid var(--ink)}.sun{width:140px;height:140px;top:30px}.start-copy{padding:28px}.kitchen-world{height:390px}.window-scene{width:27%;height:130px}.pipe{left:53%;width:30%}.condenser{right:3%;width:115px}.lid-visual,.pot-visual{left:31%}.collection-jar{right:4%;width:90px}.world-caption{max-width:29%;left:2%;font-size:.8rem}.science-rail{grid-template-columns:125px 1fr}.pressure-box{grid-column:1/3}.lever-grid{grid-template-columns:1fr}.risk-note{flex-direction:column}.morning-strip{grid-template-columns:1fr 1fr}.morning-strip div:nth-child(2){border-right:0}.morning-strip div:nth-child(-n+2){border-bottom:1px solid #7fa3a4}}
@media (max-width:720px){.quiz-choices{grid-template-columns:1fr}.quiz-screen,.result-screen{margin:10px auto}.quiz-choice{width:100%}}
@media (max-width:520px){.topline h1{font-size:1.08rem}.sound-toggle{padding:8px;font-size:.75rem}.morning-strip strong{font-size:1rem}.warning-banner{align-items:flex-start}.kitchen-world{height:430px}.window-scene{left:4%;width:31%;height:115px}.pipe{left:45%;top:30px;width:36%}.condenser{right:2%;top:100px;width:105px;height:105px}.steam-cloud{left:32%;top:72px;transform:scale(.72)}.lid-visual{left:23%;top:195px;width:205px}.pot-visual{left:22%;top:245px;width:210px;height:130px}.flame-visual{left:32%;bottom:33px;width:130px}.collection-jar{right:2%;bottom:37px;width:76px;height:110px}.world-caption{left:2%;bottom:28px;max-width:31%;padding:7px;font-size:.7rem}.science-rail{grid-template-columns:1fr}.thermometer{grid-template-columns:20px 1fr}.state-amounts{grid-column:1}.pressure-box{grid-column:1}.state-amounts>div{padding-left:6px}.resource-row{gap:8px 15px}.phase-line b{display:none}.action-row>*{width:100%}.risk-note{font-size:.7rem}.lever small{word-spacing:.7em}}