.dialogue,
.dialogue.system {
  left: clamp(14px, 2vw, 28px);
  right: auto;
  top: 86px;
  bottom: auto;
  transform: none;
  width: min(420px, calc(100vw - 28px));
  max-width: none;
  padding: 8px 12px;
  border-left: 0;
  border-top: 2px solid var(--mint);
  background: linear-gradient(90deg, #071217ed, #071217bd);
  box-shadow: 0 7px 20px #0009;
  backdrop-filter: blur(8px);
}

#game {
  filter: saturate(1.08) contrast(1.06);
}

.objective {
  border-top-width: 3px;
  box-shadow: 0 9px 24px #0006;
}

.objective strong,
.cogs strong {
  color: #fff;
}

#touchControls button {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#touchControls button:active,
#joystick:active {
  transform: scale(.94);
  filter: brightness(1.35);
}

.dialogue span,
.dialogue.system span {
  margin-right: 10px;
  font-size: .64rem;
}

.dialogue p,
.dialogue.system p {
  font-size: .78rem;
  line-height: 1.25;
  font-weight: 700;
}

.dialogue.system {
  left: auto;
  right: clamp(14px, 2vw, 28px);
  width: auto;
  max-width: min(320px, 65vw);
  border-top-color: var(--yellow);
}

.dialogue.system span {
  color: var(--yellow);
}

@media (pointer: coarse), (max-width: 800px) {
  .dialogue.system {
    top: 76px;
    right: max(12px, env(safe-area-inset-right));
    bottom: auto;
    max-width: 62vw;
  }

  .dialogue:not(.system) {
    top: 76px;
    left: max(12px, env(safe-area-inset-left));
    width: min(380px, 58vw);
  }

  .prompt {
    left: auto;
    right: max(84px, calc(env(safe-area-inset-right) + 74px));
    bottom: max(88px, calc(env(safe-area-inset-bottom) + 78px));
    transform: none;
    padding: 6px 9px;
    font-size: .62rem;
  }
}

@media (orientation: landscape) {
  .dialogue.system {
    top: 76px;
    bottom: auto;
  }

  .dialogue:not(.system) {
    top: 76px;
    bottom: auto;
  }
}

@media (orientation: portrait) {
  .dialogue,
  .dialogue.system {
    top: 108px;
    width: calc(100vw - 28px);
    max-width: none;
  }
}

/* Reserve a compact message rail below the objective in both orientations. */
.dialogue,.dialogue.system,.dialogue:not(.system){top:112px;left:max(14px,env(safe-area-inset-left));right:auto;width:min(420px,42vw);max-width:none;}
@media(orientation:portrait){.dialogue,.dialogue.system,.dialogue:not(.system){top:118px;width:calc(100vw - 28px);}.objective strong{font-size:.8rem;}}
.touch-right button,.touch-right .jump{min-width:64px;min-height:64px;}

.completion-actions{z-index:2;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.panel .next-level{padding:15px 20px;background:var(--mint);color:#071217;font-weight:950;letter-spacing:.08em;text-decoration:none;box-shadow:7px 7px 0 #168f83;transition:transform .15s,box-shadow .15s}
.panel .next-level:hover,.panel .next-level:focus-visible{transform:translate(3px,3px);box-shadow:4px 4px 0 #168f83}
.panel .next-level span{margin-left:26px}
#joystick:active{transform:none;}

/* where the finished run was saved (only shown when accounts are switched on) */
.save-note{margin:-6px 0 20px;font-size:.88rem;color:#59e2c2}
.save-note[hidden]{display:none}

/* On a touch screen, holding a button or dragging the joystick must never start selecting text or pop the
   copy / image callout. Text stays selectable on a mouse device, and in form fields everywhere. */
@media (hover: none), (pointer: coarse) {
  html, body, canvas, #game, .hud, .panel, #touchControls, #joystick, button, a {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  input, textarea, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* ---- Phone controls: show only what is usable right now ----
   ACT stays small and dim until something is actually within reach (the
   prompt strip appears), then it lights up. The glove pads only exist once
   Bix has the glove, and the shield pad fades out when it has no charges.
   Fewer live buttons on screen, bigger targets for the ones that matter. */
@media(pointer:coarse),(max-width:800px){
  #touchControls [data-key="interact"]{
    width:52px;height:52px;min-width:52px;min-height:52px;font-size:.62rem;letter-spacing:.06em;
    opacity:.34;border-color:#dff7ee33;
    transition:opacity .16s,transform .16s,box-shadow .16s,border-color .16s}
  #shell:has(.prompt:not(.hidden)) #touchControls [data-key="interact"]{
    opacity:1;width:66px;height:66px;min-width:66px;min-height:66px;font-size:.78rem;
    border-color:var(--yellow);color:var(--yellow);
    box-shadow:0 0 0 2px #ffd75a44,0 0 18px #ffd75a66}
  #touchControls .jump{width:84px;height:84px;font-size:1.7rem;
    border-width:2px;box-shadow:0 0 16px #ffd75a3d}
  .touch-right{gap:16px}

  /* the glove pads: hidden until the glove is picked up */
  #shell:has(.glove-hud.off) .touch-glove{display:none}
  .touch-glove{gap:14px;bottom:118px}
  .touch-glove .blue{width:92px;height:92px}
  .touch-glove .blue svg{width:50px;height:50px}
  .touch-glove .red{width:84px;height:84px}
  .touch-glove .shield{width:68px;height:68px;transition:opacity .18s}
  .touch-glove .shield.empty{opacity:.28;pointer-events:none}
}