*{box-sizing:border-box}body{margin:0;background:#211a17;color:#eee0c8;font:15px "Yu Gothic",Meiryo,sans-serif}main{max-width:1536px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:10px;letter-spacing:2px}header small{color:#c5a57e;font-size:12px}nav{display:flex;gap:6px}button{min-height:44px;cursor:pointer;color:#3b2c21;background:#eadbc0;border:2px solid #80694d;border-radius:6px;padding:7px 12px;font:inherit;font-weight:700}button:hover{background:#fff0cf}button:focus-visible,input:focus-visible{outline:3px solid #ffb752;outline-offset:2px}button.active{background:#f4b859;border-color:#fff2b8;box-shadow:0 0 0 2px #663a21}#viewport{overflow:auto;background:#241b13}#scene{position:relative;width:100%;aspect-ratio:3/2}canvas{width:100%;height:100%;display:block;touch-action:none;image-rendering:auto}.paper,#orders button,#steps{background:#eee3cfed;color:#2b281f;border:2px solid #4f4435;box-shadow:0 3px 0 #0004}.paper{position:absolute;border-radius:12px;padding:1%;font-size:clamp(12px,1.5vw,24px)}.stats{left:.8%;top:.8%;width:14.5%;height:17.5%;font-family:monospace}.stats span{display:block}.stats hr{border:0;border-top:1px solid #b6a58c;margin:5px 0}.stats b{float:right}.heat{right:.8%;top:.8%;width:13.5%;height:14%}.heat input[type=range]{display:block;width:100%;height:28px;accent-color:#d46c35;cursor:pointer}.heat span{font-size:.75em}#orders{position:absolute;top:.8%;left:27.7%;width:44.5%;display:flex;gap:8%}#orders button{width:29%;font-size:clamp(10px,1.3vw,22px);height:80px}#orders button.active{outline:3px solid #d18b43}#steps{position:absolute;left:.8%;right:.8%;bottom:.6%;display:flex;border-radius:8px;padding:8px;gap:5px}#steps button{flex:1;min-width:0;padding:5px 2px;background:#eee4d0;border-color:#d0bfa3;font-size:clamp(10px,1.1vw,19px)}#steps button.active{background:#e8b56a;border-color:#71462c}#steps i{display:block;font-style:normal;font-size:clamp(18px,2.4vw,35px)}#workbench{padding:8px 12px;display:flex;justify-content:space-between;gap:10px;background:#39271c}#ingredients,#finish{display:flex;gap:5px;flex-wrap:wrap}#finish button{font-size:13px}footer{padding:10px 16px;display:flex;justify-content:space-between;gap:20px;color:#dfc49d}#toolName{white-space:nowrap;color:#f7be67}dialog{background:#f0e4ce;color:#352b23;border:3px solid #866444;border-radius:12px;max-width:600px;max-height:90vh;padding:24px;line-height:1.8}dialog::backdrop{background:#16100cd9}dialog label{display:block;margin:10px 0}dialog input[type=number]{margin-left:10px;width:65px;min-height:44px}#scene.zoomed{width:max(1100px,160%)}@media(max-width:700px){header{font-size:12px;letter-spacing:0;flex-wrap:wrap}header small{display:none}nav{width:100%}nav button{flex:1;font-size:12px}#scene{width:100%}#orders button{height:50px}.paper{font-size:12px}#steps{padding:4px}#steps button{font-size:10px}#steps i{font-size:22px}#workbench{display:block}#finish{margin-top:8px}footer{font-size:12px}#hint{max-width:85%}#scene.zoomed{width:1200px}}
/* Opaque panels cover the reference's printed sample values. */
.paper,#orders button,#steps{background:#eee3cf}.heat input[type=range]{min-height:28px}#ingredients[hidden]{display:none}@media(max-width:700px){#workbench #steps{position:static;display:flex;flex-wrap:wrap;margin:0 0 10px;width:100%;padding:5px}#workbench #steps button{flex:1 0 21%;min-height:64px;font-size:11px}#workbench #steps i{font-size:23px}}

button:disabled{cursor:not-allowed;opacity:.48}#cleaningControls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#cleanState{font-size:12px;color:#d7bf9c}#workbench{flex-wrap:wrap}#start{text-align:center;width:min(600px,92vw)}#start h1{font:700 25px monospace;letter-spacing:2px;color:#5b3520}.startChoices{display:flex;gap:16px;justify-content:center;margin:25px 0}.startChoices button{min-height:64px;flex:1}.small{font-size:12px;color:#7e654b}#handedness{min-height:44px;margin-left:12px;font:inherit}@media(max-width:700px){#cleaningControls{margin:8px 0}.startChoices{gap:8px}.startChoices button{font-size:13px}}

[hidden]{display:none!important}#shiftBar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 16px;background:#33251a;color:#f0cb8b;min-height:58px}#shiftStatus{font-weight:700}#orders button{white-space:pre-line}#shiftTotals{display:grid;grid-template-columns:1fr 1fr;gap:6px 25px}#shiftTotals dt{color:#6c5136}#shiftTotals dd{margin:0;text-align:right;font-weight:bold}#receiptList{max-height:180px;overflow:auto;font-size:13px}#shiftResult{width:min(600px,92vw)}#shiftResult>button{width:100%;margin-top:10px}@media(max-width:700px){#shiftStatus{font-size:12px}#shiftBar{padding:6px 10px}#shiftTotals{font-size:13px}}

#orders button:disabled{opacity:1;color:#8c7b65;background:#eee3cf}
/* Closing celebration: actual sales and achievements, no invented ranking. */
#shiftResult{width:min(830px,94vw);padding:30px 34px 25px;border:3px solid #e4b762;border-radius:15px;background:radial-gradient(ellipse at top,#fff1d4 0,#f5e4c0 55%,#ead0a0 100%);box-shadow:0 0 0 7px #6f3020,0 0 0 9px #d9a34d,0 24px 100px #000b;isolation:isolate;overflow-x:hidden}#shiftResult::backdrop{background:radial-gradient(ellipse,#26170bbf,#0d0907f2);backdrop-filter:blur(3px)}.reportRibbon{text-align:center;color:#8f3828;font-size:12px;font-weight:900;letter-spacing:6px;border-bottom:2px solid #ac6a3d;padding-bottom:12px}#shiftResult h2{font-size:14px;text-align:center;margin:14px 0 0;color:#826343;letter-spacing:3px}#resultSeal{position:absolute;right:30px;top:68px;color:#af3225;border:3px double #af3225;border-radius:6px;width:76px;padding:8px 4px;text-align:center;transform:rotate(12deg);font-size:16px;font-weight:900;line-height:1.4;letter-spacing:2px}.resultHero{text-align:center;padding:2px 0 12px;border-bottom:2px solid #ae7546;background:radial-gradient(ellipse at 50% 60%,#ffdf8c88,transparent 65%)}#resultHeadline{font-size:clamp(24px,3.5vw,37px);font-weight:900;color:#71351f;letter-spacing:3px;margin:12px 0 15px;text-shadow:0 2px #fff7dc}.salesLabel{font-size:12px;letter-spacing:5px;font-weight:900;color:#9c5b2b}#shiftSalesHero{display:block;font:900 clamp(52px,7vw,82px)/1.25 Georgia,'Yu Mincho',serif;letter-spacing:1px;color:#a7441b;text-shadow:0 2px #fff7d2,0 4px #cead71;margin:2px 0 7px;animation:registerTotal .55s cubic-bezier(.15,.9,.3,1.3) both}#shiftSalesHero span{font:900 24px 'Yu Gothic',sans-serif;margin-left:7px;text-shadow:none}#recordBanner{min-height:28px;margin:0;color:#78502e;font-size:13px;font-weight:bold}#recordBanner.newRecord{display:inline-block;padding:3px 20px;background:#9e3424;color:#ffe3a1;box-shadow:3px 3px 0 #dab471;letter-spacing:2px;animation:recordStamp .6s .3s both}#shiftReason{text-align:center;font-size:12px;margin:12px 0 16px;color:#6d553b}#shiftTotals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0 0 18px}.resultMetric{display:flex;flex-direction:column;padding:10px 5px;text-align:center;border:1px solid #c5a274;border-top:3px solid #a65a31;background:#fff8e6a8;box-shadow:0 2px #cbb38955}.resultMetric dt{font-size:11px;color:#896542;line-height:1.5;min-height:18px}.resultMetric dd{font-size:19px!important;text-align:center!important;color:#57331e;font-weight:900;line-height:1.6}#shiftResult details{border-top:1px dashed #a48258;padding-top:8px;font-size:12px}#shiftResult summary{cursor:pointer;min-height:34px;color:#6d5133}#bestSales{text-align:center;font-size:12px;margin:12px 0;color:#785635}#shiftResult>button{background:linear-gradient(#b94a2a,#8f2d1c);border:2px solid #6b281b;color:#fff1c7;box-shadow:0 4px 0 #602719,0 6px 10px #59351833;font-size:18px;letter-spacing:3px;min-height:57px;margin-top:4px}#shiftResult>button:hover{background:linear-gradient(#d15a32,#a53920);transform:translateY(-1px)}#resultConfetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}#resultConfetti i{position:absolute;width:8px;height:13px;top:-20px;opacity:0;animation:festivalPaper 2.7s var(--delay) ease-out both}@keyframes festivalPaper{8%{opacity:.9}100%{opacity:0;transform:translate(30px,650px) rotate(var(--spin))}}@keyframes registerTotal{from{opacity:0;transform:translateY(12px) scale(.88)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes recordStamp{from{opacity:0;transform:scale(1.3) rotate(-4deg)}to{opacity:1;transform:scale(1) rotate(-2deg)}}@media(max-width:600px){#shiftResult{padding:20px 15px 20px;width:92vw;max-height:92dvh}.reportRibbon{font-size:10px;letter-spacing:4px}#resultSeal{width:52px;right:12px;top:56px;font-size:12px;padding:5px 0}#resultHeadline{font-size:23px;letter-spacing:0;margin-top:16px}#shiftSalesHero{font-size:57px}#shiftSalesHero span{font-size:19px}#shiftTotals{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.resultMetric{padding:7px 3px}.resultMetric dd{font-size:17px!important}#shiftResult>button{font-size:16px;letter-spacing:1px}}@media(prefers-reduced-motion:reduce){#shiftSalesHero,#recordBanner.newRecord{animation:none}#resultConfetti{display:none}}
#resultSeal{writing-mode:vertical-rl;text-orientation:upright;width:43px;height:92px;display:flex;align-items:center;justify-content:center;padding:4px;font-size:17px;letter-spacing:2px;white-space:nowrap}@media(max-width:600px){#resultSeal{width:32px;height:70px;font-size:12px;top:57px;right:13px}.resultMetric{padding:4px 3px}.resultMetric dt{font-size:10px;line-height:1.3;min-height:15px}.resultMetric dd{line-height:1.3}#shiftTotals{margin-bottom:10px}#resultHeadline{margin:12px 0 8px}#shiftReason{margin:8px 0 10px}#bestSales{margin:8px 0}.resultHero{padding-bottom:8px}}

#resultConfetti i{width:var(--size);height:var(--size);font-style:normal;font-size:var(--size);line-height:1;animation:festivalJackpot var(--duration) var(--delay) linear both;filter:drop-shadow(1px 3px 2px #6d351a44)}#resultConfetti i.fallingTakoyaki{border-radius:47% 49% 45% 48%;background:radial-gradient(ellipse at 27% 28%,#ffda83 0 9%,transparent 13%),radial-gradient(ellipse at 72% 65%,#9e4618 0 7%,transparent 14%),radial-gradient(ellipse at 29% 74%,#a14e1e 0 5%,transparent 12%),radial-gradient(circle at 43% 38%,#f3bb60 15%,#da8c36 58%,#9c471a 95%);border:1px solid #9d4c1c;box-shadow:inset -2px -4px 4px #77340f66,0 2px 2px #72330d44}#resultConfetti i.fallingTakoyaki::before{content:'';position:absolute;inset:6% 7% 24% 6%;border-radius:42% 56% 43% 48%;background:radial-gradient(ellipse at 30% 23%,#b8733c88,transparent 45%),#69301b;box-shadow:0 2px 0 #8f421d;transform:rotate(-13deg)}#resultConfetti i.fallingTakoyaki::after{content:'';position:absolute;inset:5% 4% 24%;border:0;border-radius:0;transform:rotate(-12deg);background:linear-gradient(28deg,transparent 36%,#cf985c 37% 42%,transparent 43%) 17% 27%/45% 32% no-repeat,linear-gradient(-31deg,transparent 35%,#e5b67b 36% 44%,transparent 45%) 73% 53%/48% 38% no-repeat,linear-gradient(15deg,transparent 34%,#bd834d 35% 45%,transparent 46%) 38% 81%/43% 28% no-repeat,radial-gradient(ellipse at 22% 53%,#366022 0 5%,transparent 7%),radial-gradient(ellipse at 58% 24%,#557a2a 0 5%,transparent 7%),radial-gradient(ellipse at 77% 72%,#3d681e 0 5%,transparent 7%),radial-gradient(ellipse at 43% 72%,#537b28 0 4%,transparent 6%)} @keyframes festivalJackpot{0%{opacity:0;transform:translateY(-45px) rotate(0)}5%{opacity:.85}85%{opacity:.7}100%{opacity:0;transform:translate(var(--sway),900px) rotate(var(--spin))}}

#resultConfetti i.fallingPaper{width:var(--size);height:calc(var(--size) * 1.6);border-radius:2px;box-shadow:inset 2px 0 0 #ffffff55;filter:drop-shadow(1px 2px 1px #56311933)}

.heat{width:clamp(138px,14%,215px);height:auto;min-height:128px;padding:9px 12px;display:flex;flex-direction:column;gap:3px;font-size:clamp(12px,1.1vw,16px);line-height:1.35}.heat>label:first-child{white-space:nowrap;font-weight:700}.heat .autoHeatControl{display:flex;align-items:center;gap:6px;min-height:26px;cursor:pointer;align-self:flex-start}.heat #autoHeat{display:inline-block;flex:0 0 17px;width:17px;height:17px;min-height:0;margin:0;accent-color:#ae5829;cursor:pointer}.heat .autoHeatControl span{font-size:12px;font-weight:700}.heat #heat{min-width:0;margin:0;height:28px;min-height:28px;flex-shrink:0}.heat>span{display:block;white-space:nowrap;font-size:11px;word-spacing:3px}

#steps button[hidden]{display:none}

#prepGuide{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:5;min-width:290px;max-width:80%;text-align:center;pointer-events:none;padding:15px 22px;border:2px solid #f5d39a;border-radius:12px;background:#352419e8;box-shadow:0 5px 18px #0007;color:#fff0d4}#prepGuide[hidden],#openShift[hidden]{display:none}#prepMessage{font-size:clamp(21px,2.6vw,36px);font-weight:900;letter-spacing:2px}#prepProgress{display:block;margin-top:6px;font-size:13px;color:#f3d6a7}#prepGuide #openShift{pointer-events:auto;display:block;margin:12px auto 0;min-width:230px;min-height:60px;font-size:25px;background:#ffd078;border-color:#fff0bc;color:#543015;box-shadow:0 4px 0 #8e5427}#prepGuide #openShift[hidden]{display:none}

.heat.guidedHeat{border-color:#e79b35;box-shadow:0 0 0 4px #ffd071aa,0 3px 14px #0006}#prepProgress{max-width:450px;line-height:1.6}

#prepGuide.prepInstruction{top:24%;min-width:0;width:max-content;max-width:64%;padding:7px 15px;border-radius:8px;background:#352419e8}#prepGuide.prepInstruction #prepMessage{font-size:clamp(15px,1.7vw,24px);letter-spacing:1px}#prepGuide.prepInstruction #prepProgress{font-size:11px;margin-top:2px;max-width:480px}

/* One detailed order, two compact waiting slots; menu prices also fit narrow screens. */
#orders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:44.5%}#orders button{width:auto;height:auto;min-height:30px;font-size:12px;padding:4px 6px;white-space:pre-line;line-height:1.35}#orders button.active{grid-column:1/-1;grid-row:1;min-height:73px;font-size:clamp(13px,1.35vw,20px);padding:7px 10px}#orders button:not(.active){grid-row:2}#orders button:disabled{opacity:1}
.menuHelpButton{display:block;width:100%;margin:15px 0 8px;background:#fff1d0;border-color:#aa763d}#menuHelp{width:min(760px,94vw);padding:22px;max-height:92dvh}#menuHelp h2{text-align:center;color:#6d3d21;margin:0 0 10px}.menuIntro,.menuRule{font-size:14px;line-height:1.7}.menuPriceTable{border-collapse:collapse;width:100%;margin:12px 0;color:#392b20}.menuPriceTable caption{text-align:left;font-size:12px;color:#806a50;padding-bottom:6px}.menuPriceTable th,.menuPriceTable td{padding:10px 12px;border-bottom:1px solid #c5aa80;text-align:left}.menuPriceTable thead{background:#6b432b;color:#fff0cf}.menuPriceTable tbody th{font-weight:600;overflow-wrap:anywhere}.menuPriceTable td{font-weight:900;text-align:right;white-space:nowrap;color:#8e3d20}.menuPriceTable tbody tr:nth-child(even){background:#e9d6b5}#menuHelp details{font-size:13px;line-height:1.6}#closeMenuHelp{display:block;width:100%;margin-top:15px}@media(max-width:600px){#menuHelp{padding:16px 12px}.menuPriceTable th,.menuPriceTable td{padding:9px 7px;font-size:13px}.menuRule,.menuIntro{font-size:12px}}

/* Visible action guidance and a separate finishing surface. */
#actionGuide{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;background:#f2dfbb;color:#392719;border-bottom:3px solid #ae7138}
#actionGuide strong{font-size:20px}#actionGuide p{margin:4px 0;line-height:1.5}#actionGuide small{color:#725638}#guideAdvance,#openFinishing{background:#ffc46b;border-color:#8c4d20;min-height:52px;flex-shrink:0}
#platingActions{display:flex;align-items:center;gap:16px;padding:8px}#finishHeader{display:flex;align-items:center;gap:16px;padding:12px 18px;background:#f2dfbb;color:#392719;flex-wrap:wrap}#finishHeader strong{font-size:22px}#finishOrder{flex:1;font-weight:bold}
.finishingScreen #scene{width:100%!important;aspect-ratio:3/2}.finishingScreen #scene>.paper,.finishingScreen #orders,.finishingScreen #steps,.finishingScreen #cleaningControls,.finishingScreen #workbench>#steps,.finishingScreen #zoom{display:none!important}
.finishingScreen #viewport{overflow:hidden}.finishingScreen #workbench{position:sticky;bottom:0;z-index:5;border-top:3px solid #b88a4c;padding:12px;background:#332319}.finishingScreen #finish{width:100%;justify-content:center}.finishingScreen #finish button{font-size:17px;min-height:52px;flex:1}#finishInstructions{width:100%;margin:0 0 4px;text-align:center;line-height:1.5}#toppingChecklist{width:100%;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}#toppingChecklist span{padding:3px 10px;border:1px solid #b89565;border-radius:6px}#toppingChecklist .complete{background:#3b6140;color:#fff3d4}
#finish #serve{flex:0 0 100%;min-height:64px;font-size:23px;background:#f6bd65;color:#422611;border:3px solid #ffdfa1;box-shadow:0 3px 0 #71451e}#finish #serve.readyToServe{background:#3d7847;color:#fff9df;border-color:#bfe5ab}#plateCount{font-size:.8em;margin-left:12px}
#shiftSalesHero{font-family:Arial,'Yu Gothic',Meiryo,sans-serif;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:0;text-shadow:0 2px #fff7d2}
@media(max-width:700px){#actionGuide{position:sticky;top:0;z-index:6;padding:8px 10px;gap:8px;align-items:flex-start}#actionGuide strong{font-size:16px}#actionGuide p{font-size:12px}#actionGuide small{font-size:11px}#guideAdvance{font-size:12px;max-width:110px;padding:6px}#finishHeader{padding:8px 10px;gap:6px}#finishHeader strong{font-size:17px}#finishOrder{flex:0 0 100%;font-size:14px}#backToGriddle{font-size:12px;min-height:44px}.finishingScreen #finish button{font-size:14px;flex:1 0 28%;padding:6px}.finishingScreen #workbench{padding:8px}#finishInstructions,#toppingChecklist{font-size:12px}#finish #serve{font-size:20px;min-height:58px}#platingActions{flex-wrap:wrap;padding:4px}}

/* Keep the original positions and replace the reference's printed sample UI. */
.finishingScreen #scene{max-width:calc((100dvh - 470px)*1.5);min-width:min(100%,390px);margin:auto}
.finishingScreen #scene>.paper{display:block!important}.finishingScreen #orders{display:grid!important}
.finishingScreen #scene .stats{height:auto;min-height:17.5%;font-size:clamp(10px,1.25vw,20px)}.finishingScreen #scene .heat{height:auto;min-height:14%;font-size:clamp(10px,1.25vw,20px)}
#guideAdvance.stepReady{background:#f9c77a;border:3px solid #79502c;box-shadow:0 0 0 2px #ffe7b6}#finishHeader{border:2px solid #80694d;border-radius:8px}
@media(max-width:700px){.finishingScreen #scene{max-width:none}.finishingScreen #scene>.paper,.finishingScreen #orders{display:none!important}}

#shiftSalesHero{font-size:clamp(38px,6vw,72px);white-space:nowrap}#copyResult{min-height:46px!important;font-size:15px!important;letter-spacing:0!important;background:#eee0c5!important;color:#68401f!important;box-shadow:none!important}#shareResultText{width:100%;min-height:90px;font:inherit}#copyStatus{font-size:12px;text-align:center}#shiftBar{flex-wrap:wrap}@media(max-width:600px){#shiftSalesHero{font-size:44px}#shiftStatus{font-size:12px}}

#servedPeople{font-family:Arial,"Yu Gothic",Meiryo,sans-serif;font-size:1.15em;font-weight:800;white-space:nowrap}.stats{height:auto;min-height:17.5%}#shiftStatus{font-weight:600}

.stats{font-family:"Yu Gothic",Meiryo,sans-serif}.stats #realDate,.stats #time{font:600 clamp(12px,1.2vw,18px)/1.4 Arial,sans-serif}.stats .peopleCountLabel{font-size:.65em}.stats #servedPeople{display:block;float:none;text-align:center;font-size:clamp(17px,2.1vw,28px);line-height:1.3;margin:4px 0}.waitingRow{display:flex;justify-content:space-between;gap:4px;font-size:.72em}.waitingRow b{float:none}

#currentTitle{font-size:12px;text-align:center;font-weight:700;color:#81552d;margin:4px 0 6px}#earnedTitle{text-align:center;font-size:22px;font-weight:800;color:#9e3b23;margin:8px 0}
#currentTitle{width:100%;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;min-height:44px;font-size:12px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;max-height:4.5em;text-decoration:underline dotted}#currentTitleFull{font-size:18px;line-height:1.8;font-weight:700;overflow-wrap:anywhere}.currentTitleFullLabel{font-size:12px;color:#8e6944;margin-bottom:0}#earnedTitle{font-size:clamp(15px,1.5vw,20px);line-height:1.7;overflow-wrap:anywhere}
.resultMetric dd{word-break:keep-all}
/* Approved title logo placement */
#start{width:min(840px,94vw);padding:26px 30px;max-height:92dvh}#start h1.titleLogo{margin:0 0 20px;line-height:1;letter-spacing:0}#start .titleLogo img{display:block;width:100%;height:auto;max-height:42dvh;object-fit:contain}header .gameBrand{font-size:14px;font-weight:700;letter-spacing:0;line-height:1.6}#start>p:not(.small){max-width:640px;margin:16px auto;line-height:1.8}#start .startChoices{margin:20px 0}@media(max-width:600px){#start{padding:20px 14px;width:94vw}#start h1.titleLogo{margin-bottom:16px}#start>p:not(.small){font-size:13px}header .gameBrand{font-size:12px}#start .startChoices{margin:16px 0;gap:8px}}

/* Readable game typography */
:root{--game-font:"BIZ UDGothic",Meiryo,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}body,button,input,select,textarea,.stats,#start h1,#shiftSalesHero,#shiftSalesHero span,#servedPeople{font-family:var(--game-font)}body{font-weight:400}button,input,select,textarea{font-size:inherit}button{font-weight:700}.stats{font-weight:400}#realDate,#time,#servedPeople,#shiftSalesHero,.resultMetric dd{font-variant-numeric:tabular-nums;font-weight:700}#shiftSalesHero{text-shadow:none}#resultHeadline,#earnedTitle,#prepMessage,#prepGuide #openShift,.menuPriceTable td{font-weight:700}#shiftStatus,#guideTitle,#guideAction,#guideNext,#hint{line-height:1.6}dialog p{line-height:1.85}#orders button{font-size:13px;line-height:1.5}#orders button.active{font-size:clamp(14px,1.35vw,20px)}.small,#cleanState,#copyStatus,#shiftReason,#bestSales{font-size:13px}.small,.menuPriceTable caption,.currentTitleFullLabel,#bestSales,#shiftReason{color:#644d37}#resultHeadline{letter-spacing:1px;text-shadow:none}#shiftResult h2,.salesLabel{letter-spacing:1px}#menuHelp .menuIntro,#menuHelp .menuRule{font-size:14px}#currentTitle{color:#654023}#earnedTitle{color:#8b3020}@media(max-width:600px){#start>p:not(.small){font-size:14px}.startChoices button{font-size:14px}#shiftReason,#bestSales,.small{font-size:13px}.resultMetric dt{font-size:12px}#shiftStatus{font-size:13px}#orders button{font-size:13px}}

/* White TOP background */
#start{background:#fff;border-color:#ddd;box-shadow:none;color:#2f211a}#start::backdrop{background:#fff;backdrop-filter:none}#start button{background:#fff;color:#2f211a;border-color:#aaa}#start button:hover{background:#f5f5f5}#start .small{color:#555}

/* Distinguish all customers served from qualifying goal progress. */
.providedTotalRow{display:flex;justify-content:space-between;gap:5px;font-size:12px;line-height:1.6}.stats .providedTotalRow b{float:none;font-weight:700;white-space:nowrap}#currentTitle{-webkit-line-clamp:2;max-height:3em}

/* Plain text title approved 2026-10-24; no logo image. */
#start{width:min(640px,94vw)}#start h1.simpleTitle{font-size:clamp(27px,4vw,42px);font-weight:700;line-height:1.55;color:#2f211a;letter-spacing:.025em;margin:12px 0 22px;text-wrap:balance;overflow-wrap:anywhere}

/* Language names remain native so players can always recover their selection. */
.languagePicker{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;font-size:14px}.languagePicker>span{font-weight:700}.languagePicker select{font-family:var(--game-font),"Leelawadee UI",sans-serif;min-height:44px;max-width:100%;padding:8px 30px 8px 12px;border:1px solid #999;border-radius:5px;background:#fff;color:#211b18;font-size:16px}html:not([lang="ja"]) #start h1.simpleTitle{font-size:clamp(24px,4vw,37px)}html:not([lang="ja"]) #steps button{font-size:clamp(10px,1vw,15px);overflow-wrap:anywhere;line-height:1.25}html:not([lang="ja"]) #orders button{font-size:12px;overflow-wrap:anywhere;line-height:1.4}html:not([lang="ja"]) .stats{font-size:13px}html:not([lang="ja"]) #servedPeople{font-size:clamp(15px,2vw,25px)}#review{white-space:pre-line}#start [data-i18n="topIntro"]{white-space:pre-line}#options .languagePicker{justify-content:flex-start}html:not([lang="ja"]) .startChoices button{font-size:14px;overflow-wrap:anywhere;line-height:1.4}@media(max-width:600px){.languagePicker{gap:7px}.languagePicker select{max-width:220px}html:not([lang="ja"]) #start h1.simpleTitle{font-size:26px}}

/* Approved Osaka concept 02 with motion example 05, shared with preview. */
#start.scenicTop{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;box-sizing:border-box;border:0;border-radius:0;padding:24px 20px;background:#b82c23;color:#fff3d6;overflow-x:hidden;overflow-y:auto;isolation:isolate;text-align:center}
#start.scenicTop #topScene{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#b82c23}
#topScene canvas{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
#start.scenicTop>.languagePicker{justify-content:flex-end;max-width:1200px;margin:0 auto 8px;color:#fff3d6;text-shadow:0 1px 3px #301d20}
#start.scenicTop h1.scenicTitle{display:flex;flex-direction:column;align-items:center;gap:0;max-width:620px;margin:0 auto 12px;color:#fff3d6;text-shadow:3px 4px 0 #672220;font-size:clamp(25px,3.6vw,42px);line-height:1.25;letter-spacing:0;overflow-wrap:normal}
#start.scenicTop .topHundred{display:block;font:900 clamp(105px,19vh,200px)/.95 Arial,sans-serif;letter-spacing:-.07em;padding-right:.07em}
#start.scenicTop .topTitleRest{display:block;white-space:pre-line;text-wrap:balance}
#start.scenicTop>p:not(.small){max-width:570px;margin:10px auto;padding:10px 16px;background:#341a24db;border-radius:6px;font-size:14px;line-height:1.6;color:#fff3d6}
#start.scenicTop .startChoices{display:flex;max-width:540px;margin:14px auto;gap:12px}
#start.scenicTop .startChoices button{flex:1;min-width:0;min-height:58px;background:#a83027;color:#fff8e9;border:2px solid #fff0cb;box-shadow:0 3px 0 #491b22;font-size:17px}
#start.scenicTop .startChoices #startRight{background:#252c46}
#start.scenicTop .startChoices button:hover{filter:brightness(1.15)}
#start.scenicTop #topMenuHelp{background:#fff3d6;color:#41252a;border:1px solid #704028;min-height:44px}
#start.scenicTop>.small{max-width:560px;margin:12px auto;padding:6px 10px;color:#fff8ed;background:#341a24db;border-radius:5px;font-size:12px}
@media(max-width:600px){#start.scenicTop{padding:12px 14px}#start.scenicTop>.languagePicker{margin-bottom:14px;font-size:12px}#start.scenicTop .topHundred{font-size:clamp(100px,17vh,150px)}#start.scenicTop h1.scenicTitle{font-size:28px;margin-bottom:12px}#start.scenicTop>p:not(.small){font-size:12px;line-height:1.65;padding:9px 12px}#start.scenicTop .startChoices button{font-size:14px;padding:9px 6px}html:not([lang="ja"]) #start.scenicTop h1.scenicTitle{font-size:25px}}

#start.scenicTop #topMenuHelp{display:block;width:min(300px,100%);margin:12px auto}

#start.scenicTop[data-phase="day"] h1.scenicTitle,#start.scenicTop[data-phase="morning"] h1.scenicTitle{color:#642725;text-shadow:none}
.legalLinks{margin:8px 0 0;font-size:11px;line-height:1.4;text-align:center;opacity:.92}
.legalLinks a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.legalLinks a:focus-visible{opacity:1;outline:2px solid currentColor;outline-offset:2px}
#start .legalLinks{color:#fff0d6;text-shadow:0 1px 3px #000a}
#options .legalLinks{text-align:left;color:#6d5133}
/* layout-sweep-2026-10-25: no mid-word breaks, no single orphan characters, no overlapping HUD on short screens */
:lang(ja),:lang(zh){word-break:auto-phrase}
:lang(ko){word-break:keep-all}
:lang(zh) :is(button,summary,th,dt,label,#guideNext,#guideAction,#hint){word-break:keep-all;overflow-wrap:anywhere}
p,small,#finishInstructions,#shiftReason,#bestSales{text-wrap:balance}
#actionGuide small{display:block}
#hint,#guideAction,#guideNext{text-wrap:balance}
button,summary,th,dt,label,h1,h2,h3{text-wrap:balance}
.finishingScreen #scene{container-type:inline-size}
.finishingScreen #scene .stats{font-size:clamp(8px,1.7cqw,20px)}
.finishingScreen #scene .stats #realDate,.finishingScreen #scene .stats #time{font-size:clamp(9px,2cqw,18px)}
.finishingScreen #scene .stats #servedPeople{font-size:clamp(11px,3.1cqw,28px);white-space:normal;line-height:1.15}
.finishingScreen #scene .stats .providedTotalRow,.finishingScreen #scene .stats .waitingRow{font-size:clamp(8px,1.6cqw,12px);flex-wrap:wrap;column-gap:4px}
.finishingScreen #scene .stats .providedTotalRow b,.finishingScreen #scene .stats .waitingRow b{white-space:normal;overflow-wrap:anywhere}
@media(max-width:700px),(max-height:520px){.finishingScreen #scene>.paper,.finishingScreen #orders{display:none!important}}
html:not([lang="ja"]):not([lang="zh-Hant"]):not([lang="ko"]) #resultSeal{writing-mode:horizontal-tb;text-orientation:mixed;width:86px;height:auto;padding:6px 4px;font-size:12px;letter-spacing:0;line-height:1.2;white-space:normal;overflow-wrap:anywhere;right:14px;top:50px}
/* fallback for browsers without word-break:auto-phrase (Safari/iPhone): i18n.js inserts U+200B between Japanese words and the text keeps words together */
.softwrap:lang(ja) body{word-break:keep-all;overflow-wrap:anywhere}
#start [data-i18n="topIntro"]{white-space:pre-line}
#notice{position:fixed;inset:auto;top:10px;left:50%;transform:translateX(-50%);margin:0;max-width:min(92vw,560px);padding:8px 14px;border:2px solid #8c4d20;border-radius:10px;background:#fff1d4;color:#3b2c21;font-size:14px;line-height:1.5;text-align:center;box-shadow:0 4px 14px #0006;pointer-events:none}
/* 休憩ボタンは目立たせる(ユーザー指示 2026-10-25 19:26。一時停止ボタンは廃止)。ちょうちんと同じ赤・白い太字・上にコーヒーの印。
   札と注文の札のすき間(絵の幅の約11%)に収まるよう、縦2段にして大きさは絵の幅(cqw)に合わせる */
#scene .restBtn{position:absolute;left:calc(.8% + 14.5% + 1%);top:.8%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:8cqw;min-height:0;padding:.5cqw .7cqw .6cqw;border:3px solid #fff3dc;border-radius:14px;background:#d4361f;color:#fff;box-shadow:0 4px 0 #6e1608,0 0 0 2px #6e1608,0 6px 14px #0007;font-size:clamp(11px,1.85cqw,28px);line-height:1.1;font-weight:800;font-family:var(--game-font);white-space:nowrap;text-shadow:0 1px 0 #6e1608;cursor:pointer}
#scene .restBtn::before{content:"☕";display:block;font-size:1.3em;line-height:1.15;text-shadow:none}
#scene .restBtn:hover:not(:disabled){background:#e8472d}
#scene .restBtn:disabled{opacity:.55;cursor:default}
#restOverlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(24,16,10,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#restOverlay .restCard{background:#eee3cf;color:#2b281f;border:2px solid #4f4435;border-radius:14px;box-shadow:0 6px 0 #0005,0 12px 40px #000a;padding:16px 26px 20px;text-align:center;max-width:92vw;font-family:var(--game-font)}
#restOverlay .restCard strong{display:block;font-size:26px;letter-spacing:.1em;margin-bottom:6px}
#restCanvas{display:block;margin:0 auto 14px;image-rendering:pixelated;width:240px;height:320px;max-height:42vh;width:auto}
#restEnd{background:#ffc46b;border-color:#8c4d20;min-height:48px;padding:6px 20px;font-size:16px}
@media(max-width:700px){#scene .restBtn{left:calc(.8% + 14.5% + 1.5%)}}
/* fit-wide-2026-10-25: on wide landscape screens put the guide, workbench and footer in a right column and size the scene to the window height */
@media (min-aspect-ratio:4/3) and (min-width:1000px) and (min-height:500px),(min-aspect-ratio:4/3) and (min-width:560px) and (max-height:499px){
main{max-width:none;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,22vw,380px);grid-template-rows:auto auto auto auto minmax(0,1fr) auto;grid-template-areas:"head head" "view bar" "view guide" "view fhead" "view bench" "view foot";column-gap:10px}
header{grid-area:head}#shiftBar{grid-area:bar}#actionGuide{grid-area:guide;flex-direction:column;align-items:stretch}#finishHeader{grid-area:fhead}
#viewport{grid-area:view;display:flex;align-items:flex-start;justify-content:center;min-height:0;overflow:hidden}
#workbench{grid-area:bench;min-height:0;overflow:auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:10px;padding:8px 0}
#workbench>*{flex:0 0 auto;margin:0}#ingredients{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}#ingredients button{flex:1 1 40%;height:auto;min-height:44px}
footer{grid-area:foot}
#scene,.finishingScreen #scene{width:min(100%,calc((100dvh - 70px)*1.5))!important;max-width:none!important;margin:0}
#guideAdvance{max-width:none}
}
/* v31: 2列レイアウトを、幅560px以上・縦横比5:4以上の「仕上げ画面」にだけ効かせる(全画面に広げると鉄板が悪くなった=v30 の63点。全画面に効く範囲は、幅1000px以上・縦横比4:3以上のまま) */
@media (min-aspect-ratio:5/4) and (min-width:560px) and (min-height:500px){
.finishingScreen main{max-width:none;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,22vw,380px);grid-template-rows:auto auto auto auto minmax(0,1fr) auto;grid-template-areas:"head head" "view bar" "view guide" "view fhead" "view bench" "view foot";column-gap:10px}
.finishingScreen header{grid-area:head}.finishingScreen #shiftBar{grid-area:bar}.finishingScreen #actionGuide{grid-area:guide;flex-direction:column;align-items:stretch}.finishingScreen #finishHeader{grid-area:fhead}
.finishingScreen #viewport{grid-area:view;display:flex;align-items:flex-start;justify-content:center;min-height:0;overflow:hidden}
.finishingScreen #workbench{grid-area:bench;min-height:0;overflow:auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:10px}
.finishingScreen #workbench>*{flex:0 0 auto;margin:0}.finishingScreen #ingredients{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}.finishingScreen #ingredients button{flex:1 1 40%;height:auto;min-height:44px}
.finishingScreen footer{grid-area:foot}.finishingScreen #toolName{display:none}
.finishingScreen #scene,.finishingScreen #scene{width:min(100%,calc((100dvh - 70px)*1.5))!important;max-width:none!important;margin:0}
.finishingScreen #guideAdvance{max-width:none}
}
/* stats-cqw-2026-10-25: size the score card to the scene width so it does not cover the ingredient boxes on smaller scenes */
#scene{container-type:inline-size}
#scene .stats{font-size:clamp(9px,1.25cqw,20px)}
#scene .stats #realDate,#scene .stats #time{font-size:clamp(9px,1.2cqw,18px)}
#scene .stats #servedPeople{font-size:clamp(12px,2.1cqw,28px)}
#scene .stats .providedTotalRow,#scene .stats .waitingRow,#scene .stats #currentTitle{font-size:clamp(9px,.8cqw,12px)}
#scene .stats #currentTitle{min-height:0}
/* round3-2026-10-25: name popup on hover over scene art; no text selection on quick taps */
#hotspotTip{position:absolute;z-index:5;pointer-events:none;padding:4px 10px;border:2px solid #4f4435;border-radius:10px;background:#eee3cf;color:#2b281f;font:700 clamp(12px,1.1cqw,16px)/1.4 var(--game-font);box-shadow:0 3px 0 #0004;white-space:nowrap;transform:translate(-50%,-100%)}
button,#scene,#steps,#workbench{-webkit-user-select:none;user-select:none}
/* landscape-phone-2026-10-25: 横向きのスマホは右の列の並べ方(絵は画面の高さに収める)。手順のボタンは右の列へ移し(app.js の responsiveTools)、右の列の文字を詰める */
@media (max-height:499px) and (min-aspect-ratio:4/3) and (min-width:560px){
header{padding:4px 10px;font-size:12px;letter-spacing:0}header small{display:none}nav button{min-height:30px;padding:2px 10px;font-size:12px}
#shiftBar{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:nowrap;padding:4px 8px;font-size:12px}#endShift{min-height:30px;padding:2px 8px;font-size:12px;flex-shrink:0}
#actionGuide{position:static;padding:5px 8px;gap:4px}#actionGuide strong{font-size:13px}#actionGuide p{font-size:11px;margin:1px 0;line-height:1.35}#actionGuide small{font-size:10px;line-height:1.3}#guideAdvance{min-height:30px;max-width:none;font-size:11px;padding:2px 6px}
#workbench{padding:4px 0;gap:4px}#workbench #steps{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:3px}#workbench #steps button{min-height:32px;padding:1px 2px;font-size:10px;line-height:1.15}#workbench #steps i{font-size:13px}
footer{padding:3px 8px;font-size:11px;gap:8px}
main{grid-template-columns:minmax(0,1fr) clamp(220px,30vw,280px);grid-template-rows:auto auto auto auto minmax(0,1fr) auto;grid-template-areas:"view head" "view bar" "view guide" "view fhead" "view bench" "view foot";column-gap:8px}
header{padding:4px 0}header .gameBrand{display:none}nav{width:100%}nav button{flex:1}
#scene,.finishingScreen #scene{width:min(100%,calc((100dvh - 8px)*1.5))!important}
#workbench{flex-wrap:nowrap;overflow-y:auto}#cleaningControls{gap:4px;font-size:11px}#cleaningControls button{min-height:30px;padding:2px 8px;font-size:11px}
#workbench #ingredients{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}#workbench #ingredients button{min-height:32px;padding:2px;font-size:11px;line-height:1.15}
#shiftBar{padding:2px 8px;min-height:0}#endShift{min-height:26px}#guideNext{display:none}
.finishingScreen #finishHeader{padding:3px 8px;gap:6px}.finishingScreen #finishHeader strong{font-size:14px}.finishingScreen #finishOrder{font-size:11px;line-height:1.3}.finishingScreen #backToGriddle{min-height:28px;padding:2px 8px;font-size:11px}
.finishingScreen #workbench{padding:3px 4px}.finishingScreen #workbench #finishInstructions{font-size:10px;line-height:1.3;margin:0}.finishingScreen #workbench #toppingChecklist{font-size:11px;gap:3px;margin:0}.finishingScreen #workbench #toppingChecklist *{font-size:11px;padding:0 5px;min-height:0}
.finishingScreen #workbench #finish{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}.finishingScreen #workbench #finish button[data-top]{min-height:36px;padding:2px;font-size:12px;flex:none}.finishingScreen #workbench #finish #serve{grid-column:1/-1;min-height:40px;font-size:14px;flex:none}.finishingScreen #workbench #finish>p,.finishingScreen #workbench #finish>#toppingChecklist{grid-column:1/-1}
#workbench #steps{order:0}#workbench #ingredients{order:1}#workbench #cleaningControls{order:2}#workbench #steps button{min-height:28px}
footer{font-size:10px;line-height:1.3}footer #toolName{display:none}#zoom{display:none}#cleanState{display:none}
}
@media (max-height:380px) and (min-aspect-ratio:4/3) and (min-width:560px){#guideAction{display:none}#workbench #steps i{display:none}#workbench #steps button{min-height:24px}}
/* heat-buttons-2026-10-25: 火力は AUTO と 弱・中・強 のボタン。スライドバーと「弱 中 強」の目盛りは画面に出さない */
.heat #heat,.heat>span:last-child{display:none!important}
.heat .autoHeatControl{border:2px solid #80694d;border-radius:8px;padding:2px 8px;background:#eadbc0}
.heat #heatLevel{min-height:34px;padding:2px 10px;border-radius:8px;background:#ffd078;border-color:#8c4d20;color:#543015;font-weight:800;font-size:1.05em}
.heat #heatLevel.auto{background:#eadbc0;border-color:#80694d;color:#6b5a45}
@media(max-width:700px),(max-height:499px) and (min-aspect-ratio:4/3){#scene .heat .autoHeatControl{min-height:20px;padding:1px 4px;border-width:1px;position:relative}#scene .heat #heatLevel{min-height:24px;padding:1px 6px;font-size:inherit;border-width:1px;position:relative}#scene .heat .autoHeatControl::after{content:"";position:absolute;inset:-10px -8px -2px -8px}#scene .heat #heatLevel::after{content:"";position:absolute;inset:-2px -8px -14px -8px}#scene .restBtn::after{content:"";position:absolute;inset:-10px}}
/* phone-fit-2026-10-25: スマホでは絵を画面の幅に収める(ユーザー 21:35「スマホのブラウザだとみきれてる・大至急なおして」)。上に重ねる札は絵の大きさ(cqw)に合わせて小さくする */
@media(max-width:700px),(max-height:499px) and (min-aspect-ratio:4/3){
#scene .heat{width:17%;height:auto;padding:.8% 1%;font-size:clamp(8px,2.4cqw,12px);line-height:1.2}
#scene .heat>span:last-child{display:none}
#scene .heat .autoHeatControl{min-height:0;gap:3px}#scene .heat .autoHeatControl span{font-size:inherit}
#scene .heat #autoHeat{flex-basis:12px;width:12px;height:12px}#scene .heat #heat{height:20px;min-height:20px}
#orders button{height:auto;min-height:0;padding:3px 2px;font-size:clamp(8px,2.3cqw,12px);line-height:1.2}
#prepGuide{min-width:0;max-width:72%;padding:6px 10px}#prepGuide #prepMessage{font-size:clamp(12px,4cqw,21px);letter-spacing:0}
#prepGuide.prepInstruction{top:32%;max-width:70%;padding:4px 8px}#prepGuide.prepInstruction #prepMessage{font-size:clamp(11px,3.4cqw,16px)}#prepGuide.prepInstruction #prepProgress{font-size:clamp(8px,2.3cqw,11px)}
#prepGuide #openShift{min-width:0;min-height:40px;margin-top:6px;padding:4px 14px;font-size:16px}
#scene .stats{height:auto;min-height:0;padding:.8%}#scene .stats #realDate,#scene .stats #time,#scene .stats hr,#scene .stats #currentTitle,#scene .stats .providedTotalRow{display:none}
#scene .stats .peopleCountLabel,#scene .stats .waitingRow{font-size:clamp(7px,2.2cqw,11px)}#scene .stats #servedPeople{font-size:clamp(10px,3.4cqw,16px)}
#scene #orders{left:31%;gap:3px}#scene #orders button{min-height:0;max-height:19cqw;overflow:hidden;padding:2px 3px;font-size:clamp(7px,2.1cqw,11px);line-height:1.2}#scene #orders button.active{min-height:0;padding:3px 5px;font-size:clamp(8px,2.6cqw,13px)}
#scene .restBtn{min-width:8cqw;padding:.4cqw .5cqw .5cqw;font-size:clamp(8px,2.2cqw,12px);border-width:2px}#scene .heat{width:15%;min-height:0}#scene .heat label[for=heat]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* 長押しのメニューを止める(入力欄を除く) */
body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{-webkit-tap-highlight-color:transparent}
img,canvas,svg{-webkit-user-drag:none}
input,textarea,select{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* 縦のスマホに、横画面で遊ぶよう案内する */
.rotateHint{display:none}
@media (orientation:portrait) and (max-width:700px) and (pointer:coarse){
body:not(.rotateHintOff) .rotateHint{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:8px;padding:6px 8px;background:#ffd36b;color:#2a1a10;font-weight:700;font-size:12px;line-height:1.25;text-align:left;position:relative;z-index:5;margin:0 0 8px;border-radius:6px}
.rotateHint .rotateIcon{font-size:16px}
.rotateHint .rotateHintClose{font:inherit;font-weight:700;font-size:12px;padding:2px 8px;min-height:32px;border:2px solid #2a1a10;border-radius:999px;background:#fff;color:#2a1a10;white-space:nowrap}
}
/* 続きから・お知らせ */
#resumeBox{max-width:540px;margin:10px auto;text-align:center}
#start.scenicTop #resumeGame{display:block;width:100%;min-height:52px;background:#2e6b3f;color:#fff8e9;border:2px solid #fff0cb;box-shadow:0 3px 0 #14361e;font-size:17px;font-weight:700}
#resumeInfo{margin:6px 0 0;font-size:13px;color:#fff3d6}
#whatsNew{width:min(520px,92vw);max-height:90dvh;overflow-y:auto;text-align:left}
#whatsNew h2{margin:0 0 10px;font-size:19px}
#whatsNew ul{margin:0 0 14px;padding-left:20px;line-height:1.6}
#whatsNew li{margin:0 0 8px}
#whatsNew button{display:block;margin:0 auto;min-width:120px;min-height:44px}
/* 保存があるとき: 「最初から」のボタンを小さく */
#start.scenicTop #resumeBox:not([hidden]) ~ .startChoices button{min-height:46px;font-size:15px}
#start.scenicTop #resumeInfo{display:inline-block;background:#341a24db;color:#fff3d6;border-radius:6px;padding:3px 10px;margin:8px 0 0}
/* 保存があるとき: 説明文と「100」を小さくして、ボタンを画面に収める(:has 非対応のブラウザでは、そのまま) */
#start.scenicTop:has(#resumeBox:not([hidden])) .topHundred{font-size:clamp(72px,13vh,140px)}
#start.scenicTop:has(#resumeBox:not([hidden])) > p:not(.small){font-size:12.5px;line-height:1.45;margin:6px auto;padding:7px 12px}

/* 横向きの小さいスマホ: 保存があるとき、「続きから」が最初の画面に見えるように縮める */
@media (orientation:landscape) and (max-height:480px){
#start.scenicTop:has(#resumeBox:not([hidden])){padding:8px 14px}
#start.scenicTop:has(#resumeBox:not([hidden])) .topHundred{font-size:48px}
#start.scenicTop:has(#resumeBox:not([hidden])) h1.scenicTitle{margin:0 auto 4px}
#start.scenicTop:has(#resumeBox:not([hidden])) .topTitleRest{font-size:15px}
#start.scenicTop:has(#resumeBox:not([hidden])) > p:not(.small){display:none}
#start.scenicTop:has(#resumeBox:not([hidden])) #resumeBox{margin:4px auto}
#start.scenicTop:has(#resumeBox:not([hidden])) #resumeGame{min-height:44px}
#start.scenicTop:has(#resumeBox:not([hidden])) #topMenuHelp{min-height:36px}
}

/* 横向きの小さいスマホの仕上げ画面: 注文どおりに仕上がったら、「お客さんへ渡す」を大きく目立たせる */
@media (max-height:499px) and (min-aspect-ratio:4/3) and (min-width:560px){
.finishingScreen #workbench #finish #serve.readyToServe{min-height:50px;font-size:16px;box-shadow:0 3px 0 #1d4a26,0 0 0 3px #fff3d6;animation:serveReady 1.1s ease-in-out infinite}
}
@keyframes serveReady{50%{transform:scale(1.02);filter:brightness(1.12)}}
@media (prefers-reduced-motion:reduce){.finishingScreen #workbench #finish #serve.readyToServe{animation:none}}
/* 高さが499px以下の横向き(スマホ。材料ボタンを2段にするぶんの高さをあけるため340px から広げた v27c): 仕上げ中は、上の2段(設定・遊び方/達成と営業を終了)を畳み、説明文を隠して、全部の材料ボタン・「お客さんへ渡す」・案内の文をスクロールなしで収める(注文どおりのときは、ボタンの色と動きで知らせる)。「鉄板に戻る」で戻れば、上の段も戻る */
@media (max-height:499px) and (min-aspect-ratio:4/3) and (min-width:560px),(max-aspect-ratio:5/4) and (max-height:700px){
.finishingScreen #workbench #finishInstructions{display:none}
.finishingScreen header,.finishingScreen #shiftBar{display:none}
}

/* 営業を終了の確認・お知らせの「今後は表示しない」 */
#confirmEnd{width:min(440px,92vw);max-height:92dvh;overflow-y:auto;text-align:left}
#confirmEnd h2{margin:0 0 8px;font-size:19px}
#confirmEnd p{margin:0 0 12px;line-height:1.6}
#confirmEnd .confirmButtons{display:flex;gap:10px}
#confirmEnd .confirmButtons button{flex:1;min-height:48px}
#confirmEnd #confirmEndNo{background:#2e6b3f;color:#fff8e9;border:2px solid #fff0cb;font-weight:700}
#whatsNew .hideNotice{display:flex;align-items:center;gap:10px;min-height:44px;margin:0 0 10px;font-size:14px}
#whatsNew .hideNotice input{width:22px;height:22px;flex:none}

/* v27c(2026-10-27): 仕上げ画面を、パソコン・タブレットの横画面(高さ500〜760px。ノートPCのブラウザは650px前後)でも、スクロールなしで全部収める。材料ボタンは3つ+2つの2段にして、語の途中で折れないようにする(スマホの横向きにも同じ) */
@media (min-aspect-ratio:4/3) and (min-width:560px) and (max-height:499px),(min-aspect-ratio:5/4) and (min-width:560px) and (min-height:500px),(max-aspect-ratio:5/4) and (max-height:700px){
.finishingScreen #workbench #finish{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.finishingScreen #workbench #finish button[data-top]{grid-column:span 2;flex:none;min-height:34px;padding:2px 3px;font-size:12px;line-height:1.15}
.finishingScreen #workbench #finish button[data-top]:nth-of-type(n+4){grid-column:span 3}
.finishingScreen #workbench #finish #serve{grid-column:1/-1;flex:none}
.finishingScreen #workbench #finish>p,.finishingScreen #workbench #finish>#toppingChecklist{grid-column:1/-1}
}
@media (min-aspect-ratio:5/4) and (min-width:560px) and (min-height:500px) and (max-height:760px){
.finishingScreen #finishHeader{flex-wrap:wrap;gap:2px 8px;padding:3px 10px}.finishingScreen #finishHeader strong{font-size:14px}.finishingScreen #finishOrder{font-size:12px;line-height:1.3}.finishingScreen #backToGriddle{min-height:30px;padding:2px 10px;font-size:12px}
.finishingScreen #workbench{padding:3px 6px;gap:3px}.finishingScreen #workbench #toppingChecklist{font-size:12px;gap:4px;margin:0}.finishingScreen #workbench #toppingChecklist *{font-size:12px;padding:0 6px;min-height:0}
.finishingScreen #workbench #finish #serve{min-height:46px;font-size:18px}
.finishingScreen footer{padding:2px 8px;gap:6px;font-size:12px}
}
@media (max-height:300px) and (min-aspect-ratio:4/3) and (min-width:560px){
.finishingScreen #workbench #finish button[data-top]{min-height:28px;padding:1px 2px;font-size:11px}
.finishingScreen #workbench #finish #serve{min-height:40px}.finishingScreen #finishHeader strong{font-size:12px}.finishingScreen #finishHeader #finishOrder{font-size:10px;line-height:1.2}
}
@media (max-height:499px) and (min-aspect-ratio:4/3) and (min-width:560px){
.finishingScreen #finishHeader{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t b" "o o";align-items:center;gap:1px 6px;padding:3px 8px}
.finishingScreen #finishHeader strong{grid-area:t}.finishingScreen #finishHeader #finishOrder{grid-area:o;flex:none}.finishingScreen #finishHeader #backToGriddle{grid-area:b}
}
@media (min-aspect-ratio:5/4) and (min-width:560px) and (min-height:761px){.finishingScreen #workbench #finish button[data-top]{min-height:52px;font-size:14px}}
/* 札(待ち注文・注文の紙)は、絵が小さいとき、たこ焼きにかぶさるので隠す(注文は上の見出しにも出る)。画面の範囲ではなく、絵そのものの幅で決める(v30) */
@container (max-width:620px){.finishingScreen #scene>.paper,.finishingScreen #orders{display:none!important}}
/* 達成人数が増えたとき、結果を閉じた直後に、人数の表示を一瞬ふくらませる(2026-10-27) */
#servedPeople.countUp{animation:countUp .9s ease-out}
@keyframes countUp{0%{transform:scale(1.5);color:#ffd36b}60%{transform:scale(1.15);color:#ffd36b}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){#servedPeople.countUp{animation:none}}