.pancake-page{max-width:1240px;margin:20px auto;padding:0 16px;color:#533a24;font-family:'Zen Maru Gothic',sans-serif}.page-heading{padding:8px 4px 18px}.page-heading h1{font-size:clamp(25px,4vw,36px);margin:0 0 5px}.page-heading p{margin:0}.parent-note{max-width:880px;margin:32px auto;padding:22px;background:#fff8eb;border-radius:16px;line-height:1.9}.parent-note h2{font-size:22px}
#host{--cream:#fff7e7;--green:#476545;--gold:#e5ab43;color:#513522;position:relative;container-type:size;height:690px;max-width:1200px;margin:auto;background:#a4b789 url('./assets/background.webp') center/cover;border:2px solid #b7aa88;border-radius:22px;overflow:hidden;font-family:'Zen Maru Gothic',sans-serif;isolation:isolate}#host *{box-sizing:border-box}#host [hidden]{display:none!important}#host button{font:800 16px/1.25 'Zen Maru Gothic',sans-serif;color:#513522;cursor:pointer;border:2px solid #b9986e;background:#fff8e8;border-radius:18px;box-shadow:inset 0 3px 3px #fff,0 3px 0 #75461e20;padding:10px 13px;touch-action:manipulation;min-height:40px}#host button:hover:enabled{filter:brightness(1.04)}#host button:focus-visible,#host input:focus-visible{outline:4px solid #257790;outline-offset:2px}#host button:disabled{opacity:.48;cursor:default}#host button.primary{background:#506f47;color:white;border-color:#344e2d;box-shadow:inset 0 2px 2px #bcd6a65c,0 3px 0 #27402030}#host input{accent-color:#4b754e}#host .cafe-top{height:56px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff7eae8;border-bottom:1px solid #c3b18c}#host .cafe-top strong{font-size:17px;white-space:nowrap}#host nav{display:flex;gap:6px}#host nav button{font-size:13px;padding:6px 10px;min-height:34px;border-radius:13px}#base{height:calc(100% - 56px)}
#cover{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;gap:10px;padding:16px 24px 14px;text-align:center;background:#fff8df1c}.cover-heading{background:#fff8eaf2;border:2px solid #c4af7f;border-radius:45%;padding:10px 42px;box-shadow:0 4px 10px #60422223}.cover-heading h2{font-size:clamp(26px,4cqw,40px);line-height:1.2;margin:5px 0 0;color:#794720}.cover-heading small{font-size:13px}.keyart{height:100%;min-height:0;max-width:80%;aspect-ratio:1;object-fit:contain;border:5px solid #fff8ea;border-radius:50%;box-shadow:0 9px 18px #47351f29}.selection{width:min(640px,100%);display:grid;gap:8px}.selection p{margin:0;background:#fff9e9dc;border-radius:12px;font-size:13px}.selection>small{font-size:11px;background:#fff9e9dc;border-radius:10px}#stages{display:grid;grid-template-columns:repeat(15,1fr);gap:4px}#stages button{padding:5px 0;font-size:16px;min-width:0;border-radius:5px;background:#f9dfb7;border:1px dashed #ac7541}#stages button[aria-pressed=true]{background:#4c6a43;color:white;border:2px solid #294b25}#start{justify-self:center;width:clamp(180px,40%,330px)}
#play{height:100%;display:grid;grid-template-columns:130px minmax(0,1fr) 236px;gap:16px;padding:20px 22px 16px}.order{background:#f9dfbceF;box-shadow:3px 5px 12px #3e321d21;border:1px solid #b99a67;border-top:6px solid #8c7550;padding:20px 10px;text-align:center;display:flex;flex-direction:column;gap:18px;border-radius:5px;min-width:0}.order>span{font-size:14px}.stage{margin:0;font-size:34px}.stage small{font-size:15px}.order div{border-top:1px dashed #b79b79;padding-top:16px}.order small{font-size:12px}.order strong{display:block;font-size:42px;line-height:1.2}.clear-total b{display:block;font-size:22px}.best-note{margin:auto 0 0;font-size:13px}.tower-area{min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 4px}#stack{width:100%;min-height:0;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;padding:22px 3px 0}#stack button.cake{flex:0 1 60px;width:var(--w);min-height:28px;max-height:76px;padding:0;background:#eeb74e url('./assets/pancake.webp') center/100% 100%;border:0;border-radius:45% / 32%;box-shadow:inset 0 2px 2px #fff5a199,0 6px 5px #76431838;color:#512c10;position:relative;font-size:26px;font-weight:900;transition:filter .15s;opacity:1;text-shadow:0 1px 1px #ffeab4}#stack button.cake:disabled{cursor:default}#stack button.cake:disabled:not(.first){filter:none}#stack .cake.first{cursor:default}#stack .cake.hint{outline:4px solid #236b8c;outline-offset:2px}#stack .cake.range{box-shadow:inset 0 0 0 3px #236b8caa,0 6px 5px #76431838}#stack .cake .flip-count{position:absolute;right:-13px;top:50%;transform:translateY(-50%);border:1px solid #9c7645;background:#fff7e9;color:#4d3824;font-size:11px;border-radius:50%;width:27px;height:27px;display:grid;place-content:center;text-shadow:none}.plate{height:32px;width:98%;flex:none;border-radius:50%;background:#fff6df;border:3px solid #769466;box-shadow:inset 0 5px 3px #fff,0 7px 0 #dfd2b5,0 13px 10px #5b4c2836}#feedback{flex:none;width:100%;min-height:44px;margin:22px 0 0;text-align:center;background:#fff8e8f2;border:1px solid #ac9977;border-radius:12px;padding:9px 5px;font-size:14px}.recipe{background:#fff7e8f2;border:2px solid #d2bb8f;border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:14px;min-height:0;box-shadow:2px 4px 12px #42351e21}#goal-box{text-align:center;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}#goal-box h3{margin:0 0 12px;font-size:18px}#goal-stack{display:flex;flex-direction:column;align-items:center;gap:3px;width:90%;max-height:200px;margin:auto 0}#goal-stack i{display:block;width:var(--w);height:18px;border-radius:45%;background:#efbd61 url('./assets/pancake.webp') center/100% 100%;color:#563913;font-size:11px;font-weight:900;font-style:normal}#goal-box>small{font-size:12px;margin:12px 0 0}#controls{display:grid;gap:10px}#controls button{width:100%}.small-actions{display:flex;gap:8px}#result{margin:auto 0;text-align:center}#result h2{font-size:28px;line-height:1.5;margin:6px 0 22px}#result p{font-size:15px}#result button{display:block;width:100%;margin-top:12px}.result-mark{font-size:42px;color:#c88924}#play.complete .recipe{background:#ffdfaeee;border-radius:6px;border-style:dashed}#result-best{font-size:12px!important}
#modal{position:absolute;inset:0;z-index:50;background:#28422bc2;display:grid;place-items:center;padding:14px}#modal>section{width:min(660px,100%);max-height:100%;overflow:auto;background:#fff7e7;border:3px solid #b08d60;border-radius:25px;padding:28px;box-shadow:0 15px 45px #21341545}#modal header{display:flex;align-items:center;justify-content:space-between;gap:12px}#modal h2{font-size:24px;margin:0}#dialog-content{line-height:1.9;font-size:17px}#dialog-content>button{display:block;width:100%;margin-top:12px}#dialog-content label{display:flex;align-items:center;gap:12px;margin:16px 0}#dialog-content label:has(input[type=range]){display:block}#dialog-content input[type=checkbox]{width:25px;height:25px}#dialog-content input[type=range]{display:block;width:100%;height:34px}#storage-note{font-size:12px}#host:fullscreen,#host.faux-fullscreen{width:100vw;height:100dvh;max-width:none;min-height:0;margin:0;border:0;border-radius:0}#host.faux-fullscreen{position:fixed;inset:0;z-index:99999}
@media(max-width:700px){.pancake-page{padding:0 8px}#host{height:760px}.parent-note{margin:24px 0;padding:16px}}
@media(max-height:520px) and (min-width:621px){#host{height:390px}}
@container (max-width:620px){#host .cafe-top{height:82px;display:grid;justify-content:stretch;gap:5px;padding:6px 8px;text-align:center}#host .cafe-top strong{font-size:14px}#host nav{justify-content:stretch}#host nav button{flex:1;white-space:nowrap;padding:7px 3px;min-height:36px;font-size:12px}#base{height:calc(100% - 82px)}#cover{padding:10px 12px;gap:10px}.cover-heading{padding:8px 20px}.cover-heading h2{font-size:27px}.keyart{max-width:90%}#stages{grid-template-columns:repeat(5,1fr);gap:5px}#stages button{min-height:34px}#play{padding:10px;grid-template-columns:1fr;grid-template-rows:50px minmax(0,1fr) auto;gap:8px}.order{display:flex;flex-direction:row;align-items:center;justify-content:space-around;gap:7px;padding:4px 7px;border-top:1px solid #b99a67}.order>span{display:none}.stage{font-size:27px;white-space:nowrap}.stage small{font-size:12px}.order div{border:0;padding:0}.order strong{font-size:24px;display:inline-block;margin-left:4px}.order small{font-size:10px}.clear-total{display:none}.best-note{font-size:10px;margin:0}.best-note br{display:none}.tower-area{padding:0 12px}#stack{gap:5px;padding:4px 0 0}#stack button.cake{flex-basis:60px;font-size:22px;max-width:92%}.plate{height:22px}#feedback{min-height:31px;margin:12px 0 0;padding:5px;font-size:12px}.recipe{display:block;border:0;background:#fff7eaf2;padding:8px;border-radius:14px}.recipe #goal-box{flex-direction:row;gap:8px;justify-content:center;height:25px;margin-bottom:8px}#goal-box h3{font-size:11px;margin:0;white-space:nowrap}#goal-stack{flex-direction:row;align-items:center;width:150px;gap:3px;margin:0}#goal-stack i{height:17px;width:18px!important;border-radius:50%}#goal-box>small{font-size:10px;white-space:nowrap;margin:0}#controls{grid-template-columns:repeat(3,1fr);gap:6px}#controls>button{min-height:36px;font-size:12px;padding:7px 3px}.small-actions{grid-column:1/-1;gap:6px}#controls .small-actions button{min-height:32px;font-size:12px;padding:5px}#result{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:center;text-align:center}.result-mark{display:none}#result h2{font-size:18px;line-height:1.35;margin:0;grid-column:1}#result h2 br{display:none}#result p{font-size:12px;margin:0}#result-detail{grid-column:2;grid-row:1}#result-best{display:none}#result button{font-size:12px;padding:8px;min-height:34px;margin:0}#result-menu{grid-column:1/-1}#play.complete .recipe{border:1px dashed #ac8552}#modal>section{padding:18px}#modal h2{font-size:21px}#dialog-content{font-size:15px}}
@container (max-height:520px) and (min-width:621px){#host .cafe-top{height:38px;padding:4px 10px}#host .cafe-top strong{font-size:14px}#host nav button{min-height:28px;padding:4px 8px;font-size:11px}#base{height:calc(100% - 38px)}#cover{grid-template-columns:42% 58%;grid-template-rows:56px 1fr;gap:4px;padding:10px 18px}.cover-heading{grid-column:1;grid-row:1;padding:5px 14px}.cover-heading h2{font-size:23px}.cover-heading small{font-size:10px}.keyart{grid-row:2;grid-column:1;max-width:90%;max-height:100%}.selection{grid-row:1/3;grid-column:2;padding:0 14px}#stages{grid-template-columns:repeat(5,1fr);gap:5px}#stages button{min-height:36px}#start{width:100%}#play{padding:8px 10px;gap:10px;grid-template-columns:94px minmax(0,1fr) 184px}.order{padding:10px 6px;gap:10px}.order>span{font-size:11px}.order div{padding-top:8px}.order strong{font-size:28px}.stage{font-size:28px}.clear-total{display:none}.best-note{font-size:11px}.recipe{padding:10px;gap:8px;border-radius:15px}#goal-box h3{font-size:13px;margin:0 0 4px}#goal-stack{gap:1px;max-height:70px}#goal-stack i{height:8px;font-size:6px}#goal-box>small{font-size:9px;margin:5px 0}#controls{gap:6px}#controls button{font-size:12px;min-height:32px;padding:5px}.small-actions{gap:5px}#stack{gap:4px;padding:0}#stack button.cake{font-size:21px;min-height:23px;flex-basis:44px}.plate{height:23px}#feedback{margin:12px 0 0;font-size:11px;min-height:30px;padding:5px}#result h2{font-size:22px;margin:0 0 8px}.result-mark{font-size:26px}#result p{font-size:12px;margin:7px 0}#result button{font-size:13px;margin-top:8px;min-height:32px;padding:6px}#modal>section{padding:16px 22px}#dialog-content{font-size:14px;line-height:1.7}#dialog-content p{margin:10px 0}#modal h2{font-size:21px}#dialog-content label{margin:8px 0}}
@container (max-height:610px) and (max-width:620px){#cover{gap:5px;padding:8px}.cover-heading small{display:none}.cover-heading h2{font-size:23px;margin:0}.selection{gap:5px}.selection>small{display:none}#stages button{min-height:30px;padding:3px}#start{min-height:36px;padding:7px}#play{padding:6px;grid-template-rows:42px minmax(0,1fr) auto;gap:5px}#stack{gap:3px}#stack button.cake{min-height:23px;font-size:18px}#stack .cake .flip-count{width:21px;height:21px;font-size:9px;right:-9px}.plate{height:17px}#feedback{margin-top:9px;font-size:10px;min-height:25px;padding:4px}.recipe{padding:6px}.recipe #goal-box{height:20px;margin-bottom:5px}#goal-box>small{display:none}#controls{gap:4px}#controls>button{font-size:11px;min-height:30px;padding:5px}#controls .small-actions button{min-height:28px;font-size:11px}#modal>section{padding:14px}#dialog-content{font-size:13px;line-height:1.7}#dialog-content p{margin:10px 0}}
@media(prefers-reduced-motion:reduce){#host *{animation-duration:.01ms!important;transition:none!important}}
@container (min-width:621px) and (min-height:521px){#stack{max-width:560px}#stack button.cake{flex-basis:72px}.plate{max-width:580px}}
@container (max-width:620px){#play{grid-template-columns:minmax(0,1fr)}.recipe{min-width:0}#controls{grid-template-columns:repeat(3,minmax(0,1fr))}#goal-stack{min-width:0;flex:0 1 150px}}
@container (max-width:340px){#goal-box>small{display:none}#goal-box h3{font-size:10px}.order strong{font-size:21px}.order small{font-size:9px}.stage{font-size:23px}}
#play.complete .flip-count{display:none}