/* Small plastic brick, large thumb target. No textures, filters or idle animation. */
#isle { touch-action: none; }
#touch-stick, #touch-menu, #touch-skip {
  position: absolute; z-index: 5; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: none;
}
#touch-stick[hidden], #touch-menu[hidden], #touch-skip[hidden] { display: none; }
#touch-stick {
  width: 136px; height: 136px; bottom: max(8px, env(safe-area-inset-bottom));
  left: max(8px, env(safe-area-inset-left)); cursor: grab;
}
.touch-brick {
  position: absolute; box-sizing: border-box; width: 60px; height: 60px;
  left: 38px; top: 38px; padding: 7px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 7px; border-radius: 4px;
  background: #af3029; border: 1px solid #c8574c;
  box-shadow: inset 1px 1px 0 #e07969, inset -2px -3px 0 #711b19, 0 3px 0 #5f1917;
  opacity: .42; pointer-events: none; transition: transform 100ms ease-out, opacity 100ms linear;
}
.touch-brick i {
  border-radius: 50%; background: #bd3c32;
  box-shadow: inset 1px 1px 0 #e78473, inset -1px -2px 0 #81211e, 0 2px 0 #711b19;
}
#touch-stick.held { cursor: grabbing; }
#touch-stick.held .touch-brick { opacity: .76; transition: opacity 100ms linear; }
#touch-menu {
  right: max(14px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom));
  width: 48px; height: 48px; min-width: 0; padding: 0; border: 0; border-radius: 5px;
  background: #13131380; color: #fff9; box-shadow: none; font: 22px/1 sans-serif;
}
#touch-menu:focus-visible { outline: 2px solid #ffdc67; outline-offset: 3px; }
#touch-menu:active { background: #333b; }
/* The skip: the menu's twin, one place to its left, and only there while something is said. */
#touch-skip {
  right: max(72px, calc(env(safe-area-inset-right) + 58px)); bottom: max(26px, env(safe-area-inset-bottom));
  width: 48px; height: 48px; min-width: 0; padding: 0; border: 0; border-radius: 5px;
  background: #13131380; color: #fff9; box-shadow: none; font: 20px/1 sans-serif;
}
#touch-skip:focus-visible { outline: 2px solid #ffdc67; outline-offset: 3px; }
#touch-skip:active { background: #333b; }
@media (orientation: portrait) {
  body.isle-touch-layout.game-expanded #isle { height: calc(100% - 160px - env(safe-area-inset-bottom)); }
  body.isle-touch-layout #touch-stick, body.isle-touch-layout #touch-menu,
  body.isle-touch-layout #touch-skip { bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .touch-brick, #touch-stick.held .touch-brick { transition: none; }
}