@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap";@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.relative{position:relative}.start{inset-inline-start:var(--spacing)}.inline{display:inline}.table{display:table}}:root{--ink:#203d39;--cream:#fff9e9;--orange:#f47a3a;--green:#75b53d;--deep-green:#398043}*{box-sizing:border-box}body{color:var(--ink);background:#f7ecd4;margin:0;font-family:Zen Maru Gothic,sans-serif}button,input{font:inherit}.arcade-shell{background:radial-gradient(circle at 14% 18%,#fff5d5 0 4px,#0000 5px) 0 0/27px 27px,#f7ecd4;grid-template-rows:auto 1fr;grid-template-columns:1fr 430px;gap:34px 70px;min-height:100vh;padding:58px max(24px,50vw - 560px);display:grid}.intro{align-self:end;padding:0 0 14px 8px}.eyebrow{letter-spacing:2px;color:var(--orange);margin:0 0 8px;font:700 11px Fredoka,sans-serif}.intro h1{letter-spacing:-2px;color:var(--deep-green);margin:0;font:700 clamp(45px,6vw,76px)/.93 Fredoka,sans-serif}.intro h1 span{color:var(--orange)}.lead{max-width:410px;margin:20px 0;font-size:16px;line-height:1.8}.how-to{align-items:center;gap:9px;font-size:13px;font-weight:700;display:flex}.how-to kbd{border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);border-radius:6px;padding:5px 10px;font:700 12px Fredoka}.tap-icon{color:var(--orange);font-size:18px}.flavor-tags{gap:7px;margin-top:26px;display:flex}.flavor-tags span{color:#b9572d;background:#ffe6c7;border-radius:999px;padding:6px 11px;font-size:11px;font-weight:700}.game-card{border:7px solid var(--ink);background:var(--ink);border-radius:24px;grid-area:1/2/span 2;align-self:center;padding:9px;box-shadow:0 12px #c6b995}.game-topbar{color:#f9df8d;letter-spacing:1px;justify-content:space-between;align-items:center;height:36px;padding:0 12px;font:700 13px Fredoka;display:flex}.game-board{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:linear-gradient(#97dbeb 0 69%,#c7e292 69%);border:0;border-radius:15px;width:100%;height:540px;padding:0;display:block;position:relative;overflow:hidden}.game-board *{-webkit-user-select:none;user-select:none}.game-board:focus-visible{outline-offset:2px;outline:4px solid #ffe282}.score-display{z-index:5;color:#fff;text-shadow:0 4px #5292a5;font:700 48px/1 Fredoka;position:absolute;top:20px;left:0;right:0}.sun{background:#ffdc69;border-radius:50%;width:47px;height:47px;position:absolute;top:44px;right:38px;box-shadow:0 0 0 8px #ffdc693b}.steam{border-left:8px solid #fff9;border-radius:50%;width:38px;height:84px;position:absolute;transform:rotate(15deg)}.steam-one{top:80px;left:62px}.steam-two{top:138px;left:202px;transform:rotate(-15deg)}.steam-three{top:220px;right:64px}.pipe-set{z-index:2;width:64px;position:absolute;top:0;bottom:0}.pipe{background:repeating-linear-gradient(90deg,#4e9f43 0 14px,#72bd56 14px 22px);border:4px solid #31733a;width:64px;position:absolute;left:0;box-shadow:inset -5px 0 #257037}.pipe i{background:#77bf54;border:4px solid #31733a;width:72px;height:22px;position:absolute;left:-8px}.top-pipe{top:0}.top-pipe i,.bottom-pipe{bottom:0}.bottom-pipe i{top:0}.syumai{z-index:4;object-fit:contain;filter:drop-shadow(0 4px #4b6a4e);width:48px;height:48px;transition:transform 80ms;position:absolute;left:48px}.syumai.flying{transform:rotate(-12deg)}.countertop{z-index:3;opacity:.9;background:linear-gradient(#e8bd74 0 7px,#e6d19b 7px 16px,#c89556 16px 24px,#f6dfad 24px);height:31%;position:absolute;bottom:0;left:0;right:0}.game-message{z-index:8;border:4px solid var(--ink);width:225px;color:var(--ink);background:#fff9df;border-radius:15px;padding:15px 12px;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);box-shadow:0 5px #75845b}.game-message b{font:700 20px Fredoka;display:block}.game-message small{font-size:11px;font-weight:700}.game-over b{color:var(--orange)}.game-footer{background:#fff1bd;border-radius:0 0 14px 14px;justify-content:center;align-items:center;gap:8px;height:45px;font-size:12px;font-weight:700;display:flex}.game-footer strong{color:var(--orange);font:700 24px Fredoka}.share-card{background:#fffdf4;border:3px solid #d6c49d;border-radius:18px;grid-column:1;align-self:start;max-width:520px;padding:26px;box-shadow:0 8px #e3d6b9}.share-card h2{color:var(--deep-green);margin:0;font:700 30px/1.1 Fredoka}.share-card h2 strong{color:var(--orange);font-size:45px}.share-card>p:not(.eyebrow){margin:12px 0 19px;font-size:13px;line-height:1.7}.share-button,.restart-button{cursor:pointer;border:0;border-radius:11px;justify-content:center;align-items:center;gap:9px;width:100%;padding:13px 14px;font-family:Zen Maru Gothic,sans-serif;font-size:13px;font-weight:700;transition:transform .15s,box-shadow .15s;display:flex}.share-button{color:#fff;background:#131313;box-shadow:0 4px #667066}.share-button:hover,.restart-button:hover{transform:translateY(-2px);box-shadow:0 6px #667066}.share-button:active,.restart-button:active{transform:translateY(2px);box-shadow:0 2px #667066}.share-button span{font:700 18px Arial,sans-serif}.restart-button{color:var(--ink);background:#fff7da;margin-top:12px;box-shadow:0 4px #b6a578}.restart-button kbd{border:1px solid #9c8e6e;border-radius:4px;padding:2px 6px;font:700 11px Fredoka}.game-stage{height:540px;position:relative}.game-stage .game-board{height:100%}.result-overlay{z-index:30;color:#fff9df;text-align:center;-webkit-backdrop-filter:blur(3px);background:#193d39e8;border-radius:15px;flex-direction:column;justify-content:center;align-items:center;padding:28px;display:flex;position:absolute;inset:0}.result-overlay>p{color:#f8cf5a;letter-spacing:2px;margin:0 0 8px;font:700 14px Fredoka}.result-overlay h2{color:#fff9df;margin:0;font:700 31px/1 Fredoka}.result-overlay h2 strong{color:#ffad5c;font-size:68px}.result-overlay>span{margin:15px 0 17px;font-size:13px;font-weight:700}.result-overlay .share-button,.result-overlay .restart-button{max-width:270px}.result-overlay .restart-button{margin-top:14px}.result-overlay .share-button:focus-visible,.result-overlay .restart-button:focus-visible{outline-offset:3px;outline:3px solid #ffe282}@media (width<=820px){.arcade-shell{flex-direction:column;gap:25px;padding:30px 18px 44px;display:flex}.intro{padding:0}.intro h1{font-size:55px}.game-card{order:2;align-self:center;width:min(430px,100%)}.share-card{order:3;align-self:center;width:100%}.game-board,.game-stage{height:min(540px,125vw)}.countertop{height:31%}}