*{box-sizing:border-box}html,body{margin:0;background:#152d27;color:#f8e8c6;font-family:'Yu Gothic','MS Gothic',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:2px solid #b38953;background:#314d3b;color:#fff0cb;border-radius:3px;padding:8px 10px;font-weight:bold}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #ffcb68;outline-offset:3px}a{color:inherit;text-decoration:none}.shell{max-width:540px;margin:auto;min-height:100dvh;background:#1c382f;box-shadow:0 0 70px #081b1b}header{height:37px;padding:5px 12px;background:#102b24;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #75573a;font-size:10px}header span{font-size:7px;letter-spacing:1px}header button{font-size:9px;padding:3px 5px}.heading{text-align:center;background:linear-gradient(#244439,#16392f);padding:10px 13px 12px;border-bottom:4px solid #a77c42}.heading>p{font-size:9px;letter-spacing:2px;color:#d3ba83;margin:0 0 6px}h1{font-size:clamp(25px,6.4vw,36px);line-height:1.15;margin:0 0 10px;font-weight:950;letter-spacing:2px;text-shadow:2px 3px #452619}h1 span{color:#ffcb65}h1 i{font-style:normal;font-size:33px;color:#ffe5a8;vertical-align:middle;margin-left:9px}.hud{display:flex;gap:10px;align-items:stretch}.height{flex:1;background:#fff0cf;color:#412a1d;border:3px solid #765536;box-shadow:3px 3px #0c2119;padding:6px 4px;font-size:12px;white-space:nowrap}.height strong{font:bold 37px monospace}.height span{font-size:12px}.side{width:44%;display:flex;flex-direction:column;gap:5px}.best{background:#f6e8bf;color:#3f5b39;border:2px solid #84623e;padding:4px;font:bold 11px monospace}.risk{background:#fff0cf;color:#54351d;border:2px solid #84623e;padding:4px 7px}.risk label{display:flex;justify-content:space-between;font-size:10px;font-weight:bold;margin-bottom:4px}#risk-label{color:#427347;font-size:9px}meter{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.risk-track{height:9px;background:repeating-linear-gradient(90deg,#e1ce9a 0 12%,#ad9d75 12% 13%);border:1px solid #887347}.risk-track i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#89ba45 0 12%,#648e31 12% 13%)}#field{aspect-ratio:360/520;position:relative;overflow:hidden;background:#243b30 url('/soft-restaurant.png') center/100% 100%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#field *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#game{display:block;width:100%;height:100%;touch-action:none}#message{position:absolute;left:4%;right:4%;bottom:3%;text-align:center;background:#fff0d4ed;color:#674329;border:2px solid #9e7740;padding:8px 3px;font-size:11px;font-weight:bold;pointer-events:none}#customer-line{position:absolute;right:3%;top:67%;max-width:42%;padding:6px;background:#f9e8c9e8;border:2px solid #9d774d;font-size:9px;color:#59422f;line-height:1.6;pointer-events:none}#hold{display:block;width:94%;margin:10px auto 0;background:#e0aa4c;color:#3f2a17;border:3px solid #f4d391;box-shadow:3px 3px #0f271f;font-size:12px;padding:12px 4px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#hold:active,#hold.held{background:#ffca64;transform:translateY(1px)}.help{font-size:9px;line-height:1.9;text-align:center;color:#c7bd96;margin:10px 5px}footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #6a6847;padding:8px 12px;font-size:9px;color:#bcac80}footer button{font-size:9px;padding:4px 8px}.overlay{position:fixed;inset:0;background:#0f201bd4;backdrop-filter:blur(3px);z-index:15;display:grid;place-items:center;padding:20px;overflow:auto}.panel,dialog{width:min(430px,100%);background:#203d2f;border:3px solid #c39553;box-shadow:6px 6px #091d18;padding:24px 20px;text-align:center;color:#f8ebc9;border-radius:4px}.panel small,dialog>small{font-size:9px;letter-spacing:2px;color:#d3af6d}.panel h2,dialog h2{font-size:23px;line-height:1.5;margin:14px 0}.panel p{font-size:12px;line-height:2}.panel .hint{color:#d4bc83;font-size:11px}.tiny-cone{font-size:42px}.primary{display:block;width:100%;padding:14px 7px;background:#edb656;color:#402b15;border-color:#ffe3a0;box-shadow:3px 3px #7b5c2d;font-size:14px}.record{font-size:9px!important;color:#a9aa8a}dialog{max-width:430px;width:92vw;max-height:92dvh;overflow:auto}dialog::backdrop{background:#091c16c9;backdrop-filter:blur(3px)}#result-height{font:bold 54px monospace;color:#ffcd6a;margin:15px 0}#result-height span{font-size:19px}#rank{font-size:18px;color:#fff3cf;line-height:1.5}#result-comment{font-size:13px;line-height:2;background:#102d22;border:1px solid #6f835a;padding:10px}#result-best{font-size:10px;color:#b8c096}#share,#serve-paused{width:100%;font-size:11px;margin-top:12px}[hidden]{display:none!important}@media(max-width:370px){header span{display:none}.height strong{font-size:30px}.height{font-size:10px}.heading{padding-inline:9px}#customer-line{font-size:8px}#message{font-size:10px}.panel{padding:20px 15px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Keep the risk meter and the cone visible together on phone screens. */
.shell{height:100dvh;display:grid;grid-template-rows:37px auto minmax(260px,1fr) auto auto auto}#field{aspect-ratio:auto;min-height:0;background-size:100% 100%}#game{width:auto;height:100%;max-width:100%;margin:0 auto}#hold{margin-top:7px;padding:10px 4px}.help{margin:7px 5px;font-size:8px}.heading{padding-top:7px;padding-bottom:9px}.heading h1{font-size:clamp(25px,6vw,33px)}