@font-face{font-family:FlobySans;src:url('./fonts/FlobySans-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:FlobySans;src:url('./fonts/FlobySans-800.ttf') format('truetype');font-weight:800;font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:none}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#392a20;font-family:FlobySans,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#viewport{position:fixed;inset:0;min-width:0;min-height:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#stage{position:absolute;left:0;top:0;width:1024px;height:1366px;transform-origin:0 0;overflow:hidden;background:#ffdfaa}
canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
button{position:absolute;padding:0;border:0;background:none;cursor:pointer;font:inherit;touch-action:none;color:inherit;transition:transform .1s ease-out;transform-origin:center}
button img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
button:focus-visible{outline:4px solid #663515;outline-offset:5px;border-radius:30px}
button.pressed{transform:translateY(3px) scale(.975);transition:transform .04s ease-out}
#home-touch{inset:0;width:1024px;height:1366px;color:#000;font-size:48px;font-weight:800}
#home-touch span{position:absolute;top:1183px;left:0;width:100%;animation:homePulse 2s linear infinite}
@keyframes homePulse{0%,100%{opacity:1}50%{opacity:.5}}
#directions button{width:169px;height:169px}
[data-direction=up]{left:427px;top:1021px}[data-direction=left]{left:258px;top:1178px}[data-direction=down]{left:427px;top:1178px}[data-direction=right]{left:596px;top:1178px}
#scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .2s ease-out;pointer-events:none}
#scrim.visible{opacity:1}
#dialog{position:absolute;left:80px;top:128px;width:865px;height:1103px;opacity:0;transform:translateY(9px);transition:opacity .2s ease-out,transform .2s ease-out}
#dialog.visible{opacity:1;transform:translateY(0)}
#tutorial-controls{position:absolute;inset:0;pointer-events:none}
.tutorial-button{pointer-events:auto;border-radius:35px;min-height:144px}
.tutorial-button.pressed{transform:none}
#restart{left:116px;top:837px;width:632px;height:106px}
#return-home{left:360px;top:953px;width:145px;height:65px;border-radius:12px}
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

#audio-credits{position:absolute;right:28px;bottom:18px;z-index:3;padding:12px;color:#67391f;font-size:18px;text-decoration:underline;text-underline-offset:3px}

#audio-credit-dialog{max-width:660px;max-height:85vh;overflow:auto;padding:24px;border:2px solid #bd8b54;border-radius:16px;background:#fff7e5;color:#67391f;font:15px/1.6 system-ui,sans-serif;touch-action:pan-y;user-select:text}
#audio-credit-dialog::backdrop{background:#0008}#audio-credit-dialog h1{font-size:24px}#audio-credit-dialog h2{font-size:19px}#audio-credit-dialog a{color:#854900}#audio-credits-close{position:static;padding:12px 30px;background:#ff8300;color:#fff;border-radius:12px}

#audio-credit-dialog *{touch-action:pan-y}
