html,body{margin:0;height:100%;background:#05050f;color:#fff;font-family:monospace;overflow:hidden;overscroll-behavior:none;touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;position:fixed;inset:0;width:100%}
*{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
main{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;height:100dvh;touch-action:none}
canvas{image-rendering:pixelated;width:min(100vw,calc((100vh - 10px) * 256 / 240));aspect-ratio:256/240;background:#000;touch-action:none}
#pad{display:none;width:100%;max-width:560px;justify-content:space-between;align-items:center;padding:8px 12px calc(8px + env(safe-area-inset-bottom));box-sizing:border-box;touch-action:none}
.btn{box-sizing:border-box;background:#222a44;border:2px solid #5ad0d8;border-radius:14px;position:relative;touch-action:none;cursor:pointer}
.btn.on{background:#5ad0d8;transform:scale(.94)}
.btn::after{content:attr(data-t);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:bold 14px monospace;color:#fff;pointer-events:none}
.btn.on::after{color:#000}
.dpad{display:grid;grid-template:repeat(3,64px)/repeat(3,64px);gap:2px}
.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}
.ar::before{content:"";position:absolute;left:50%;top:50%;border:13px solid transparent;pointer-events:none}
.up::before{border-bottom:18px solid #fff;transform:translate(-50%,-75%)}.down::before{border-top:18px solid #fff;transform:translate(-50%,-25%)}
.left::before{border-right:18px solid #fff;transform:translate(-75%,-50%)}.right::before{border-left:18px solid #fff;transform:translate(-25%,-50%)}
.ar.on::before{filter:invert(1)}
.mid{display:flex;flex-direction:column;gap:10px}.sm{width:70px;height:36px}.sm::after{font-size:11px}
.big{width:110px;height:110px;border-radius:50%;border-color:#e05a6a}
@media (pointer:coarse),(hover:none){#pad{display:flex}canvas{width:min(100vw,calc((100dvh - 230px) * 256 / 240))}}
@media (orientation:landscape) and (max-height:540px) and ((pointer:coarse) or (hover:none)){
  main{flex-direction:row;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box}
  canvas{width:auto;height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-width:calc(100vw - 2 * max(176px, env(safe-area-inset-left), env(safe-area-inset-right)))}
  #pad{position:fixed;inset:0;max-width:none;padding:12px max(10px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));pointer-events:none;align-items:flex-end}
  #pad>*{pointer-events:auto;opacity:.85}.dpad{grid-template:repeat(3,54px)/repeat(3,54px)}.big{width:96px;height:96px;margin-right:24px;margin-bottom:24px}
  .mid{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));flex-direction:column}}

html.notouch #pad{display:none!important}html.notouch canvas{width:min(100vw,calc((100vh - 10px) * 256 / 240))!important;height:auto!important;max-width:none!important}html.notouch main{flex-direction:column!important;padding:0!important}

/* $KIBBLE bar + legal footer: small, top-left, never over the game pad */
#kbar{position:fixed;top:max(4px,env(safe-area-inset-top));left:max(4px,env(safe-area-inset-left));z-index:50;display:flex;gap:4px;align-items:center;font:11px monospace;pointer-events:auto}
#kbar button{background:#222a44;color:#f0c840;border:1px solid #f0c840;border-radius:6px;padding:3px 7px;font:bold 11px monospace;cursor:pointer;touch-action:manipulation}
#k-status{background:#222a44;color:#9fd8ff;border:1px solid #445;border-radius:6px;padding:3px 7px;font:bold 11px monospace}
#k-msg{color:#7ae07a;max-width:40vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (orientation:landscape) and (max-height:540px) and ((pointer:coarse) or (hover:none)){#inu-legal{bottom:auto!important;top:calc(max(4px,env(safe-area-inset-top)) + 26px);max-width:max(90px,min(150px,calc((100vw - (100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 256 / 240) / 2 - 10px)))!important;box-sizing:border-box;font-size:10px!important;white-space:normal!important}#kbar{flex-direction:row}}

/* optional virtual joystick (Settings > Joystick controls; OFF by default) */
#stick{display:none;position:relative;width:132px;height:132px;flex:0 0 auto;border-radius:50%;box-sizing:border-box;background:rgba(90,208,216,.10);border:2px solid rgba(90,208,216,.45);touch-action:none}
#stick .dz{position:absolute;left:50%;top:50%;width:37px;height:37px;margin:-18.5px;border-radius:50%;border:1px dashed rgba(255,255,255,.25)}
#stick .knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;background:rgba(90,208,216,.45);border:2px solid rgba(255,255,255,.55);box-sizing:border-box;pointer-events:none}
#stick.on .knob{background:rgba(90,208,216,.75)}
html.joy #stick{display:block}html.joy .dpad{display:none}
@media (orientation:landscape) and (max-height:540px) and ((pointer:coarse) or (hover:none)){#stick{width:120px;height:120px;margin:0 0 18px 18px}#pad>#stick{opacity:.8}}
#settings{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#0008}
#settings[hidden]{display:none}
#settings .box{background:#1b1f33;border:2px solid #f0c840;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;font:12px monospace;color:#fff;max-width:min(320px,90vw)}
#settings b{color:#f0c840}#settings label{font-size:14px;display:flex;align-items:center;gap:8px}#settings input{width:22px;height:22px}
#settings small{color:#aaa}#settings button{align-self:flex-end;background:#222a44;color:#f0c840;border:1px solid #f0c840;border-radius:6px;padding:5px 12px;font:bold 12px monospace}
/* phone landscape: the shared wallet pill + home button (kibble-pay) stack in the right gutter, START/PAUSE sit below them
   (they used to cover START, so a START tap hit the home button and left the game) */

/* settings: sound rows everywhere; joystick row only on touch devices (no touch pad on desktop) */
html.notouch #settings .joyrow{display:none}
#settings .joyrow{display:flex;flex-direction:column;gap:4px}#settings .vol input{width:120px;height:22px}#settings kbd{color:#888;font-size:10px}
/* phone landscape, decluttered right gutter: wallet pill on top; one compact row below it with home + START/PAUSE icons; JUMP below */
@media (orientation:landscape) and (max-height:540px) and ((pointer:coarse) or (hover:none)){
  .mid{flex-direction:row!important;top:calc(max(6px,env(safe-area-inset-top)) + 52px)!important;gap:6px!important}
  .mid .sm{width:44px;height:36px}.mid .sm::after{font-size:15px}
  .mid [data-k=start]::after{content:"\25B6"}.mid [data-k=pause]::after{content:"\275A\275A";font-size:12px;letter-spacing:-2px}
  #inu-home{position:fixed!important;top:calc(max(6px,env(safe-area-inset-top)) + 52px)!important;right:calc(max(10px,env(safe-area-inset-right)) + 100px)!important;left:auto!important;
    width:36px!important;height:36px!important;min-width:0!important;min-height:0!important;padding:0!important;font-size:17px!important;line-height:1!important;box-sizing:border-box!important}}
html:not(.notouch) #settings kbd{display:none}