#command-dock {display:none}
/* Long presses belong to the game, not Safari's text/callout menu. */
body, body * {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
input, textarea, [contenteditable="true"] {
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
#game, #touch, #touch * {touch-action:none}
#touch button *, #stick * {pointer-events:none}
button {-webkit-tap-highlight-color:transparent}
/* Mobile command dock: separate the controls from the street in portrait. */
@media (orientation:portrait) {
  #touch {
    inset:auto 0 0;
    height:31.5%;
    min-height:158px;
    padding:16px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    align-items:center;
    isolation:isolate;
    opacity:1;
  }
  #command-dock {
    display:block;
    position:absolute;
    inset:auto 0 0;
    height:31.5%;
    min-height:158px;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(155deg,#1d3039,#101f28 65%,#0c1921);
    border-top:1px solid #d5b57465;
    box-shadow:inset 0 1px #fff1;
  }
  /* Keep the panel when gameplay buttons are hidden for a reveal or a pause. */
  body[data-home=true] #command-dock {visibility:hidden}
  body[data-state=cinematic] #command-dock[data-epilogue=true] {height:20%;min-height:0}
  #touch .actions {
    grid-template-columns:72px 58px;
    grid-template-rows:72px 54px;
    gap:10px 12px;
    align-items:center;
    justify-items:center;
  }
  #touch .actions .fire {grid-column:1;grid-row:1;width:72px;height:72px}
  #touch .actions [data-key="jump"] {grid-column:2;grid-row:1;width:58px;height:58px}
  #touch .actions [data-key="dash"] {grid-column:2;grid-row:2;width:58px;height:58px}
  #touch .actions .use {grid-column:1;grid-row:2;width:72px;height:46px;border-radius:16px}
  #touch .actions button {
    border:1.5px solid #ddc294b0;
    background:#213b48;
    box-shadow:0 3px 8px #0004,inset 0 1px #fff1;
    text-shadow:none;
  }
  #touch .actions .fire {background:linear-gradient(145deg,#92662e,#64441f);border-color:#f3cd89}
  #touch .actions button span {font-size:9px;letter-spacing:.5px}
  #touch .actions button svg {width:23px;height:23px}
  #touch .actions .fire svg {width:28px;height:28px}
  #touch .actions .use svg {width:19px;height:19px}
  #touch .actions button.active {background:#f4c978;border-color:#fff0c9;box-shadow:0 0 0 3px #f4c97830}
  #touch #stick {
    flex:none;
    width:112px;
    height:112px;
    background:radial-gradient(circle at 50% 40%,#304d5b,#172e3a);
    border:1.5px solid #ddc294b0;
    box-shadow:0 3px 10px #0004,inset 0 1px #fff1;
  }
  #touch #stick i {width:44px;height:44px;left:32.5px;top:32.5px;background:linear-gradient(145deg,#f4dda9,#d9b978);border:1.5px solid #fff0c9;box-shadow:0 2px 7px #0005}
  #touch #stick.active {border-color:#f4c978;box-shadow:0 0 0 3px #f4c97825}
  #touch #stick .stick-up {top:6px}
  #touch #stick .stick-down {bottom:6px}
  #hint {display:none}
  #context-action {bottom:calc(31.5% + 12px)}
}
@media (orientation:portrait) and (max-width:350px) {
  #touch {padding-left:12px;padding-right:12px}
  #touch .actions {column-gap:8px}
  #touch #stick {width:104px;height:104px}
  #touch #stick i {left:28.5px;top:28.5px}
}

@media (orientation:portrait) and (any-pointer:coarse) {#touch{display:flex}}
/* Landscape: smaller clusters keep the middle of the fight visible. */
@media (orientation:landscape) and (any-pointer:coarse) {
  #touch{display:flex;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(9px,env(safe-area-inset-bottom));align-items:end}
  #touch .actions{grid-template-columns:68px 52px;grid-template-rows:44px 68px;gap:8px;align-items:center;justify-items:center}
  #touch .actions .fire{grid-column:1;grid-row:2;width:68px;height:68px}
  #touch .actions [data-key="jump"]{grid-column:2;grid-row:1;width:52px;height:52px}
  #touch .actions [data-key="dash"]{grid-column:2;grid-row:2;width:52px;height:52px}
  #touch .actions .use{grid-column:1;grid-row:1;width:64px;height:44px}
  #touch .actions button{border-width:1.5px;background:#162d38cc;box-shadow:0 2px 8px #0005}
  #touch .actions .fire{background:#795426d9}
  #touch .actions button.active{background:#f4c978}
  #touch .actions button span{font-size:8px}
  #touch .actions button svg{width:21px;height:21px}
  #touch .actions .fire svg{width:26px;height:26px}
  #touch #stick{width:100px;height:100px;flex:none;border-width:1.5px;background:#152d39ce;box-shadow:0 2px 10px #0005}
  #touch #stick i{width:38px;height:38px;left:29.5px;top:29.5px;border-width:1.5px}
  #touch #stick .stick-up{top:4px}
  #touch #stick .stick-down{bottom:4px}
  #touch #stick .stick-left{left:5px}
  #touch #stick .stick-right{right:5px}
}