/* Touch controls (features/touch.js): the movement joystick bottom left and the chat button right
   of it, shown while body.touch-ui is set and a world is loaded. Styled like the round HUD ability
   buttons: a dark well with a steel-and-gold rim, a brass knob. The stick's size and place are
   variables, so the chat button and the chat follow it. */

:root {
  --ts-left: 18px;               /* stick: distance from the left edge */
  --ts-bottom: 22px;             /* ... from the bottom edge */
  --ts-size: 148px;              /* ... width and height */
  --tc-size: 52px;               /* chat button */
  --tc-gap: 14px;                /* stick -> chat button */
}

#touch-stick {
  position: fixed;
  left: calc(var(--ts-left) + env(safe-area-inset-left, 0px));
  bottom: calc(var(--ts-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  width: var(--ts-size);
  height: var(--ts-size);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#touch-stick .ts-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(40, 32, 24, 0.55), rgba(12, 9, 6, 0.72) 70%);
  border: 3px solid rgba(160, 162, 170, 0.65);
  box-shadow:
    0 0 0 2px rgba(20, 14, 8, 0.8),
    inset 0 0 0 2px rgba(217, 180, 90, 0.35),
    inset 0 6px 18px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.72;
  transition: opacity 0.15s;
}

#touch-stick.held .ts-base {
  opacity: 0.95;
}

#touch-stick .ts-knob {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f3dc9c, #c99a3e 55%, #6e4f1c);
  border: 2px solid #2a1a08;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55), inset 0 -3px 6px rgba(60, 36, 8, 0.5);
  pointer-events: none;
  will-change: transform;
}

/* Chat button: a round HUD button (base.css .menu-btn) right of the stick, level with its top -
   outside the stick's square, below the chat and left of the ability bar. */
#touch-chat.menu-btn {
  --menu-btn: var(--tc-size);
  position: fixed;
  left: calc(var(--ts-left) + var(--ts-size) + var(--tc-gap) + env(safe-area-inset-left, 0px));
  bottom: calc(var(--ts-bottom) + var(--ts-size) - var(--tc-size) + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#touch-chat svg {
  display: block;
  width: calc(var(--tc-size) * 0.56);
  height: calc(var(--tc-size) * 0.56);
  pointer-events: none;
}

/* While the chat input has the focus. */
#touch-chat.on {
  box-shadow:
    0 0 0 2px #b48a38,
    0 0 0 3px #ffe08a,
    0 0 0 4px #3a2508,
    0 0 12px 5px rgba(255, 200, 90, 0.45),
    inset 0 0 0 1px rgba(255, 220, 140, 0.35),
    inset 0 0 8px rgba(0, 0, 0, 0.9);
}

/* Room for the stick: the chat moves up and gets shorter while touch controls are on. */
body.touch-ui #chat {
  bottom: calc(var(--ts-bottom) + var(--ts-size) + 20px + env(safe-area-inset-bottom, 0px));
  height: 140px;
}

/* Typing on a touch screen: the on-screen keyboard covers the lower part of the screen (in
   landscape most of it), so while its input has the focus the chat moves to the top edge - the
   input row first, then the tabs and a few lines - at full size (16 px text: iOS zooms into smaller
   fields) with a Send button. It goes back when the message is sent or the input loses the focus
   (the chat button again, a tap on the world). The ids outrank the UI scale's #ui.st-scaled > #chat;
   layout.js writes an inline max-width while the chat sits beside the ability bar. */
#chat .chat-send {
  display: none;
}

body.touch-ui #ui > #chat.typing {
  top: calc(6px + env(safe-area-inset-top, 0px));
  bottom: auto;
  left: calc(8px + env(safe-area-inset-left, 0px));
  z-index: 60;
  width: min(620px, calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-width: none !important;
  height: auto;
  scale: 1;
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.86), rgba(10, 8, 6, 0.72));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

body.touch-ui #ui > #chat.typing .chat-input-row {
  order: -1;
  gap: 6px;
  padding: 5px 5px 3px;
}

body.touch-ui #ui > #chat.typing .chat-log {
  flex: 0 1 auto;
  max-height: 24vh;
}

body.touch-ui #ui > #chat.typing .chat-input {
  min-height: 38px;
  font-size: 16px;
}

body.touch-ui #ui > #chat.typing .chat-chan {
  min-width: 64px;
}

body.touch-ui #ui > #chat.typing .chat-send {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 0 14px;
  font: 700 15px/1 var(--font);
  color: #1f1409;
  cursor: pointer;
  background: linear-gradient(180deg, #f3dfb4, #cfa86a);
  border: 1px solid #3a2410;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 224, 138, 0.35), 0 2px 6px rgba(0, 0, 0, 0.5);
  touch-action: manipulation;
}

body.touch-ui #ui > #chat.typing .chat-send:active {
  transform: scale(0.95);
}

/* The minimap back in its corner (the narrow-window rule lifts it over the chat, which the
   stick's column now holds), clear of the quest tracker on short screens. */
body.touch-ui #minimap {
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* Fingers need bigger targets on the ability bar. */
body.touch-ui {
  --ab-slot: 64px;
}

@media (max-width: 720px) {
  :root {
    --ts-size: 124px;
    --tc-size: 50px;
    --tc-gap: 12px;
  }

  body.touch-ui {
    --ab-slot: 58px;
  }

  #touch-stick .ts-knob {
    width: 52px;
    height: 52px;
  }
}

/* A phone held upright: the ability bar spans the whole width there, so it gets slightly smaller
   slots and the stick, the chat button and the minimap stand above it instead of on it. */
@media (max-width: 720px) and (orientation: portrait) {
  :root {
    --ts-bottom: 62px;
  }

  body.touch-ui {
    --ab-slot: 52px;
  }

  body.touch-ui #minimap {
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }
}