@font-face{font-family:"Silkscreen";src:url("../fonts/Silkscreen-Regular.ttf") format("truetype");}
@font-face{font-family:"Pixelify Sans";src:url("../fonts/PixelifySans.ttf") format("truetype");font-weight:400 700;}

:root{--bg:#0b1510;--panel:#13241a;--green:#4cd34c;--leaf:#3aa64a;--yellow:#ffcc1a;--red:#e8452f;--ink:#e8f0e8;
 box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0b1510;--ink:#e8f0e8}}
:root[data-theme="dark"]{--bg:#0b1510;--ink:#e8f0e8}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--bg);color:var(--ink);font-family:"Silkscreen",ui-monospace,monospace;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
 background-image:radial-gradient(circle at 50% 40%,#173322 0,var(--bg) 70%)}
#wrap{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
#screen{position:relative;width:min(100vw,calc((100dvh - 56px)*16/9));max-width:100%;aspect-ratio:16/9;border:2px solid var(--leaf);box-shadow:0 0 0 4px #0a1a0f,0 10px 40px rgba(0,0,0,.6);background:#000;overflow:hidden}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
#title{position:absolute;inset:0;cursor:pointer;background:#0b1510}
#title[hidden]{display:none}
#title .blur{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(14px) brightness(.55)}
#title img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#hint{position:absolute;left:0;right:0;bottom:1.5%;margin:0;text-align:center;font-size:clamp(10px,1.6vw,15px);color:#fff;text-shadow:2px 2px 0 #000,-1px -1px 0 #000}
.blink{animation:blink 1.1s steps(2,start) infinite;background:rgba(0,0,0,.55);padding:3px 10px}
@keyframes blink{to{visibility:hidden}}
#bar{display:flex;gap:10px;align-items:center;font-size:12px;color:#9fbf9f}
#bar button{font:inherit;font-size:12px;background:var(--panel);color:var(--ink);border:1px solid var(--leaf);padding:4px 10px;cursor:pointer}
#bar button:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
#keys{opacity:.8}
#touch{display:none}
body.touch #keys{display:none}
body.touch #touch{display:block}
body.touch #wrap{justify-content:flex-start;padding-top:8px}
#stick{position:fixed;left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:130px;height:130px;border-radius:50%;background:rgba(58,166,74,.18);border:2px solid rgba(76,211,76,.5);touch-action:none}
#knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(76,211,76,.55);border:2px solid #b6ff3b}
#btns{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));width:190px;height:150px}
#btns button{position:absolute;width:70px;height:70px;border-radius:50%;font:inherit;font-size:11px;color:#fff;border:3px solid rgba(0,0,0,.5);touch-action:none;box-shadow:0 4px 0 rgba(0,0,0,.4)}
#btns button.on{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.b-punch{right:0;bottom:30px;background:rgba(58,166,74,.85)}
.b-jump{right:80px;bottom:0;background:rgba(214,170,20,.85)}
.b-special{right:62px;bottom:82px;width:56px!important;height:56px!important;background:rgba(232,69,47,.85)}
.b-drop{right:128px;bottom:96px;width:46px!important;height:46px!important;font-size:9px!important;background:rgba(43,108,214,.85)}
@media (orientation:landscape){body.touch #wrap{justify-content:center;padding-top:0}body.touch #screen{width:min(100vw,calc(100dvh*16/9))}
 body.touch #bar{position:fixed;top:calc(4px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);opacity:.8}
 #stick,#btns{opacity:.75}}
@media (prefers-reduced-motion:reduce){.blink{animation:none}}

:fullscreen #wrap,:-webkit-full-screen #wrap{gap:0}
:fullscreen #bar{display:none}
:fullscreen #screen{width:min(100vw,calc(100dvh*16/9));border:0;box-shadow:none}
body.full #bar{display:none}
body.full #screen{width:min(100vw,calc(100dvh*16/9));border:0;box-shadow:none}