*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#2a2238;color:#eee;font-family:system-ui,sans-serif;overscroll-behavior:none;touch-action:manipulation;overflow:hidden}
#wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:8px;gap:10px}
#console{background:#5a4a8a;padding:12px;border-radius:14px 14px 40px 14px;box-shadow:0 6px 0 #3a2e5e}
#screen{display:block;width:min(92vw,960px,calc((100vh - 80px)*1.5),calc((100dvh - 80px)*1.5));aspect-ratio:3/2;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;border-radius:4px}
#pad{display:none;width:min(96vw,480px);justify-content:space-between;align-items:center;user-select:none}
#pad button{font:bold 16px system-ui;color:#fff;border:none;touch-action:none}
#dpad{position:relative;width:132px;height:132px}
#dpad button{position:absolute;width:44px;height:44px;background:#333;border-radius:6px}
#dpad .u{left:44px;top:0}#dpad .d{left:44px;bottom:0}#dpad .l{left:0;top:44px}#dpad .r{right:0;top:44px}
#ab{position:relative;width:132px;height:110px}
#ab button{position:absolute;width:56px;height:56px;border-radius:50%;background:#b03058;box-shadow:0 3px 0 #701838}
#ab .a{right:0;top:0}#ab .b{left:0;bottom:0}
#mid{display:flex;flex-direction:column;gap:10px}
.sm{background:#555;border-radius:12px;padding:6px 10px;font-size:12px!important}
#pad button.on{filter:brightness(1.4);transform:translateY(2px)}
#mute{position:static}
#help{font-size:12px;opacity:.7;margin:0;text-align:center}
@media (pointer:coarse),(max-width:700px){#pad{display:flex}#help{display:none}#screen{width:min(96vw,calc((100vh - 220px)*1.5))}}

/* phone portrait PRIMARY: screen on top, D-pad/stick + A/B below (stacked). Landscape MQ below is secondary. */
@media (orientation:portrait) and ((pointer:coarse) or (hover:none)){
  #wrap{flex-direction:column;justify-content:flex-start;align-items:center;height:100%;height:100dvh;min-height:0;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:8px;overflow:hidden}
  #console{padding:6px;border-radius:10px;flex:0 0 auto}
  #screen{width:min(96vw,calc((100dvh - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.5));max-width:none;height:auto}
  #pad{display:flex;position:relative;inset:auto;width:min(96vw,420px);flex:0 0 auto;align-items:center;justify-content:space-between;padding:4px 0 0;pointer-events:auto;margin-top:auto}
  #pad>*{pointer-events:auto}
  #mid{position:static;flex-direction:column}
  #inu-wallet{top:max(36px,calc(env(safe-area-inset-top) + 28px))!important;right:max(6px,env(safe-area-inset-right))!important;max-width:min(160px,42vw)}
  #inu-legal{bottom:auto!important;top:calc(max(4px,env(safe-area-inset-top)) + 26px);left:max(4px,env(safe-area-inset-left));max-width:110px!important;font-size:9px!important;white-space:normal!important}
}

/* phone landscape SECONDARY: game fills height, D-pad left / A-B right flank it, safe-area aware, no page scroll */
@media (pointer:coarse),(hover:none){html,body{position:fixed;inset:0;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}}
@media (orientation:landscape) and (max-height:540px) and ((pointer:coarse) or (hover:none)){
  #wrap{flex-direction:row;height:100%;height:100dvh;min-height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);gap:0}
  #console{padding:4px;border-radius:8px}
  #screen{width:auto;height:min(calc(100dvh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),calc((100vw - 2 * max(140px, env(safe-area-inset-left), env(safe-area-inset-right)) - 8px) / 1.5));max-width:none}
  #pad{position:fixed;inset:0;width:auto;pointer-events:none;align-items:flex-end;padding:0 max(8px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  #pad>*{pointer-events:auto}#mid{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));flex-direction:row}
}

/* $KIBBLE bar + legal footer: Shop/Coach only (Connect Wallet = shared #inu-wallet pill). Never over the 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 system-ui,sans-serif}
#kbar button{background:#3a2e5e;color:#ffd84a;border:1px solid #ffd84a;border-radius:6px;padding:3px 8px;font:bold 11px system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
#k-status{background:#3a2e5e;color:#ffd84a;border:1px solid #ffd84a;border-radius:6px;padding:3px 8px;font:bold 11px system-ui,sans-serif;max-width:42vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#k-status[data-mode="offline"],#k-status[data-mode="soon"]{color:#ffd84a;border-color:#ffb84a}
#k-status[data-mode="demo"]{color:#ffb84a}
#k-status[data-mode="loading"]{color:#9fd8ff;border-color:#9fd8ff}
#k-msg{color:#9fe8b0;max-width:40vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Desktop mute (pad is hidden on fine pointer / wide screens). Phone uses #mute inside #pad. */
#desk{position:fixed;bottom:max(8px,env(safe-area-inset-bottom));right:max(8px,env(safe-area-inset-right));z-index:50;display:flex;gap:6px}
#desk button{background:#3a2e5e;color:#fff;border:1px solid #7a6a9a;border-radius:12px;padding:6px 10px;font:bold 14px system-ui,sans-serif;cursor:pointer;touch-action:manipulation;min-width:44px;min-height:36px}
@media (pointer:coarse),(max-width:700px){#desk{display:none}}
@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:120px!important;font-size:9px!important;white-space:normal!important}}

/* polish: instant press feedback on touch (before JS .on class), respect reduced motion */
#pad button:active{filter:brightness(1.4)}
#pad button{transition:transform 60ms,filter 60ms}
@media (prefers-reduced-motion:reduce){#pad button,#pad button.on{transition:none;transform:none}}

/* optional virtual joystick (Settings > JOYSTICK CONTROLS; OFF by default = D-pad layout above unchanged).
   Same 132px left slot as the D-pad, so it never reaches the game screen; A/B stay on the right. */
#stick{display:none;position:relative;width:128px;height:128px;flex:none;touch-action:none;user-select:none;-webkit-user-select:none}
#stick::before{content:'';position:absolute;inset:10px;border-radius:50%;background:rgba(255,255,255,.10);border:2px solid rgba(255,255,255,.32);box-shadow:inset 0 0 14px rgba(0,0,0,.25)}
#knob{position:absolute;left:41px;top:41px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.42);border:2px solid rgba(255,255,255,.6);pointer-events:none;will-change:transform}
#stick.on #knob{background:rgba(255,216,74,.55)}
body.joy #dpad{display:none}
body.joy #stick{display:block}
body.joy #ab button{opacity:.82}

/* shared wallet pill (#inu-wallet, 🏠 docked inside it by kibble-pay): stack 🏠 above the pill at the right edge so neither
   reaches over the game screen; on phone landscape it sits in the right gutter BELOW START/mute and is compact enough
   (<=128px) to fit the 140px gutter. !important = override the shared script's inline styles. main.js dockWallet() picks
   column (right gutter wide enough) vs the shared default row (portrait / narrow desktop, where the top strip is free). */
body.wallet-col #inu-wallet{flex-direction:column!important;align-items:flex-end!important;gap:6px!important}
body.wallet-col #inu-wallet-btn{max-width:var(--wallet-max,none);overflow:hidden;text-overflow:ellipsis}
@media (orientation:landscape) and (max-height:540px) and ((pointer:coarse) or (hover:none)){
  #inu-wallet{top:calc(max(10px,env(safe-area-inset-top)) + 36px)!important;right:max(8px,env(safe-area-inset-right))!important;max-width:128px}
  #inu-home{width:40px!important;height:40px!important;font-size:18px!important}
  #inu-wallet-btn{max-width:min(128px,var(--wallet-max,128px));min-height:34px!important;padding:4px 8px!important;font-size:11px!important;overflow:hidden;text-overflow:ellipsis;border-radius:14px!important}
  #inu-wallet-main>div{max-width:128px!important;font-size:10px!important}
  #inu-wallet-main>div[style*="min-width"]{max-width:none!important;position:fixed;right:max(8px,env(safe-area-inset-right));min-width:0!important;width:min(260px,calc(100vw - 16px))}
}

/* AI coach (paid $KIBBLE) */
#k-coach{opacity:1}
#coach-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:12px}
.coach-card{background:#1b1f33;border:2px solid #ffd84a;border-radius:12px;padding:14px 16px;max-width:min(420px,94vw);color:#f0f0f8;font:14px/1.4 system-ui,sans-serif}
.coach-card h3{margin:0 0 6px;color:#ffd84a;font-size:16px}
.coach-blurb,.coach-privacy{margin:0 0 8px;font-size:12px;opacity:.9}
.coach-privacy{font-style:italic;opacity:.75}
.coach-label{display:block;font-size:12px;margin:8px 0}
.coach-label input{display:block;width:100%;margin-top:4px;padding:8px;border-radius:8px;border:1px solid #445;background:#12162a;color:#fff;box-sizing:border-box}
.coach-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.coach-actions button{background:linear-gradient(#7b4dff,#5a2fd6);color:#fff;border:2px solid #ffd84a;border-radius:10px;padding:8px 12px;cursor:pointer;font:inherit}
.coach-actions button.ghost{background:#2a3148;border-color:#556}
.coach-actions button:disabled{opacity:.5;cursor:wait}
.coach-status{min-height:1.2em;font-size:12px;color:#7ef0a0;margin:8px 0 0}
.coach-tip{margin-top:10px;padding:10px;background:#12162a;border-radius:8px;border:1px solid #445;white-space:pre-wrap;font-size:13px}