html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#c3c8d1}body{font-family:Caveat,cursive;color:#4a4a4a;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}#overlay{position:fixed;inset:0;pointer-events:none}.fps{position:absolute;top:6px;right:14px;font-size:20px;opacity:.55}html,#game{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L13.7 10.3 L22 12 L13.7 13.7 L12 22 L10.3 13.7 L2 12 L10.3 10.3 Z' fill='%232b2b2b' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='white'/%3E%3C/svg%3E") 12 12,crosshair}#game.panning{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='white' stroke-width='3'/%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%232b2b2b' stroke-width='1.4'/%3E%3Cpath d='M12 2 L13.7 10.3 L22 12 L13.7 13.7 L12 22 L10.3 13.7 L2 12 L10.3 10.3 Z' fill='%232b2b2b' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='white'/%3E%3C/svg%3E") 12 12,grabbing}.sketch-btn,.panel-close,.slider input{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L13.7 10.3 L22 12 L13.7 13.7 L12 22 L10.3 13.7 L2 12 L10.3 10.3 Z' fill='%23c96f6f' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='white'/%3E%3C/svg%3E") 12 12,pointer}.controls{position:absolute;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;padding:0 calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));pointer-events:none}.controls .group{display:flex;gap:6px}.sketch-btn{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:#4a4a4a;font:600 25px Caveat,cursive;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.sketch-btn svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.sketch-btn span{position:relative}.sketch-btn:hover{color:#262626}.sketch-btn:active span{transform:translate(1px,1px)}.sketch-btn:focus-visible{outline:2px dashed rgba(74,74,74,.5);outline-offset:3px}.sketch-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.controls .actions{margin:0 auto;justify-content:center}.hud{position:absolute;top:calc(10px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));right:calc(14px + env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-start;gap:16px;pointer-events:none}.hud-left{max-width:min(520px,62vw);text-shadow:0 0 6px #c3c8d1,0 0 3px #c3c8d1}.hud-title{font-size:26px;font-weight:600;line-height:1.1}.hud-task{font-size:22px;line-height:1.15;margin-top:2px}.hud-hint{font-size:18px;line-height:1.2;opacity:.75;margin-top:2px}.fuel{display:flex;align-items:center;gap:8px;font-size:20px;margin-top:26px}.fuel svg{position:relative;overflow:visible}.toast{position:absolute;left:50%;top:22%;transform:translate(-50%,-6px);font-size:30px;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .4s,transform .4s;text-shadow:0 0 8px #c3c8d1,0 0 4px #c3c8d1}.toast.shown{opacity:1;transform:translate(-50%)}.screens{position:absolute;inset:0;pointer-events:none}.screen{position:absolute;inset:0;display:flex;justify-content:center;padding:16px}.screen.place-center{align-items:center}.screen.place-bottom{align-items:flex-end;padding-bottom:calc(76px + env(safe-area-inset-bottom))}.sketch-panel{position:relative;pointer-events:auto;box-sizing:border-box;width:min(460px,100%);padding:22px 28px 20px;text-align:center}.sketch-panel>div{position:relative}.sketch-panel .big{font-size:44px;font-weight:600;line-height:1.05;margin:2px 0 6px}.sketch-panel.title .big{font-size:58px}.sketch-panel .small{font-size:20px;opacity:.7}.sketch-panel .line{font-size:21px;line-height:1.25}.sketch-panel .total{font-size:26px;font-weight:600;margin-top:6px}.sketch-panel .buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}.sketch-panel .buttons.waiting{opacity:0;pointer-events:none}.sketch-panel .buttons{transition:opacity .6s}.sketch-panel.wide{width:min(600px,100%)}.sketch-panel .fine{font-size:18px;line-height:1.2;opacity:.72;margin-top:6px}.sketch-panel .story{font-size:20px;line-height:1.2;margin-top:4px;text-align:left}.sketch-panel .picked{font-size:19px;margin-top:10px;opacity:.8}.sketch-btn[aria-pressed=true] span{font-weight:700}@media(max-width:520px){.hud-title{font-size:21px}.hud-task{font-size:19px}.hud-hint{font-size:16px}.fuel{margin-top:2px;font-size:17px}.hud{flex-direction:column;gap:2px}.sketch-panel .big{font-size:36px}.toast{top:32%;font-size:26px}.sketch-panel.title .big{font-size:46px}.controls .group{gap:4px}}.controls .view{align-items:flex-end}.sound-wrap{position:relative;display:flex}.sound-panel{position:absolute;right:0;bottom:56px;width:210px;padding:14px 16px 12px;display:flex;flex-direction:column;gap:8px;align-items:stretch}.sound-panel .sketch-btn{align-self:center}.track-row{display:flex;justify-content:center;gap:4px}.track-row .sketch-btn{font-size:18px}.slider{position:relative;display:flex;align-items:center;gap:8px;font-size:19px}.slider span{width:60px;text-align:left}.slider input{flex:1;accent-color:#d98a8a}.audio-debug{position:absolute;top:120px;right:14px;width:240px;padding:10px;background:#c3c8d1f2;border:1px dashed rgba(74,74,74,.5);font-size:17px;pointer-events:auto}@media(max-width:560px){.controls{flex-wrap:wrap;row-gap:8px}.controls .actions{order:-1;flex-basis:100%}.controls .group:not(.actions){zoom:.84}.sound-panel{bottom:50px}}.panel-close{position:absolute;top:2px;right:6px;width:34px;height:34px;padding:0;border:0;background:transparent;color:#4a4a4a;font:600 30px/30px Caveat,cursive;cursor:pointer;pointer-events:auto;z-index:1}.panel-close:hover{color:#d98a8a}.sound-panel{padding-top:26px}.tooltip{position:absolute;width:auto;max-width:min(280px,80vw);padding:10px 14px 9px;text-align:left;pointer-events:none}.tooltip-title{position:relative;font-size:22px;font-weight:600;line-height:1.05}.tooltip-text{position:relative;font-size:18px;line-height:1.2}.howto-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;background:#282e4852;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:auto;z-index:20}.sketch-panel.howto{width:min(640px,100%);max-height:calc(100% - 8px);display:flex;flex-direction:column;text-align:left;padding:16px 22px 12px}.sketch-panel.howto .big{text-align:center;font-size:34px;margin:0 0 2px}.sketch-panel.howto .buttons{margin-top:10px}.sketch-panel.howto .credits{margin-top:8px}.howto-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:8px;scrollbar-width:thin;scrollbar-color:rgba(74,74,74,.35) transparent}.howto-body.more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent)}.howto-body::-webkit-scrollbar{width:6px}.howto-body::-webkit-scrollbar-track{background:transparent}.howto-body::-webkit-scrollbar-thumb{background:#4a4a4a4d;border-radius:3px}.howto-body::-webkit-scrollbar-thumb:hover{background:#4a4a4a80}.howto-step{display:flex;gap:14px;align-items:center;margin-top:6px}.howto-pic{flex:0 0 200px}.howto-pic svg{display:block;width:100%;height:auto}.howto-text{font-size:18px;line-height:1.15}.howto-text>div+div{margin-top:4px}.howto-title{font-size:22px;font-weight:600}@media(max-width:560px){.howto-step{flex-direction:column;align-items:stretch;gap:2px}.howto-pic{flex:none;max-width:260px;margin:0 auto;width:100%}}.sketch-panel .row-break{flex-basis:100%;height:0}.credits{margin-top:14px;font-size:14px;line-height:1.25;opacity:.5;text-align:center;transition:opacity .3s}.credits:hover{opacity:.85}.credits a{color:inherit;text-decoration:underline dotted;text-underline-offset:2px}
