/* The live preview and editor mirror the controls rendered by TouchControls.tsx. */
.touch-layout-item {
  display: none !important;
}

.touch-layout-editor {
  position: relative;
  min-height: 176px;
  overflow: hidden;
}

.bwf-native-inline-preview {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.bwf-native-inline-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 174px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 62%, #0f2b43 0%, #030a12 48%, #010207 100%);
}

.bwf-native-inline-stage:after,
.bwf-native-touch-stage:after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0000009e, #0000 19% 81%, #0000009e);
}

.bwf-native-inline-board,
.bwf-native-stage-board {
  position: absolute;
  z-index: 1;
  top: 10%;
  left: 12%;
  width: 34%;
  height: 74%;
  border: 2px solid #e5edf6;
  box-shadow: inset 0 0 0 2px #252d37, 0 0 0 1px #586d81, 0 0 18px #b3d0eb4d;
}

.bwf-native-inline-stage.is-portrait .bwf-native-inline-board,
.bwf-native-touch-stage.is-portrait .bwf-native-stage-board {
  top: 9%;
  left: 17%;
  width: 57%;
  height: 68%;
}

.bwf-native-inline-control,
.bwf-native-touch-control {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: clamp(38px, 9%, 78px);
  padding: 3px;
  color: #e7f7ff;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background: linear-gradient(#236d9a, #0b1d35 60%, #163e61);
  border: 1px solid #65cfff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px #39d8ff59, inset 0 0 10px #39d8ff2e;
}

.bwf-native-inline-control-softDrop,
.bwf-native-touch-control-softDrop {
  border-radius: 10px;
  border-color: #d4a55e;
}

.bwf-native-control-glyph {
  font-size: clamp(16px, 3vw, 28px);
  line-height: 1;
}

.bwf-native-control-label {
  position: absolute;
  bottom: -13px;
  color: #b9cde0;
  white-space: nowrap;
  font-size: 7px;
  font-weight: 900;
}

.bwf-native-stage-next {
  position: absolute;
  z-index: 1;
  top: 14%;
  right: 12%;
  width: 16%;
  height: 15%;
  color: #b9cde0;
  border: 1px solid #97b8d4;
  background: #020810a8;
  font-size: 8px;
  font-weight: 900;
  padding: 4px;
}

.bwf-native-stage-status,
.bwf-native-stage-label {
  position: absolute;
  z-index: 2;
  color: #b9cde0;
  letter-spacing: .12em;
  font-size: 8px;
  font-weight: 900;
}

.bwf-native-stage-status { right: 12%; bottom: 10%; }
.bwf-native-stage-label { left: 14%; bottom: 4%; color: #39d8ff; }

.bwf-native-stage-mode-note {
  position: absolute;
  z-index: 5;
  top: 4%;
  left: 4%;
  display: grid;
  gap: 2px;
  pointer-events: none;
  text-shadow: 0 2px 4px #000;
}

.bwf-native-stage-mode-title { color: #d6efcf; font-size: clamp(11px, 1.7vw, 18px); }
.bwf-native-stage-mode-copy { color: #b8c7d9; font-size: clamp(8px, 1vw, 11px); }

.bwf-native-gesture-zone {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  top: 11%;
  left: 18%;
  width: 55%;
  height: 65%;
  color: #dff7ff;
  text-align: center;
  border: 2px dashed #65cfff;
  background: #0a2d4559;
  box-shadow: 0 0 24px #39d8ff29, inset 0 0 24px #39d8ff1c;
}

.bwf-native-gesture-title { font-size: clamp(15px, 2.2vw, 25px); }
.bwf-native-gesture-copy { color: #b8c7d9; font-size: clamp(9px, 1.2vw, 13px); font-weight: 800; }

.bwf-native-inline-stage .bwf-native-stage-mode-note { top: 7px; left: 10px; }
.bwf-native-inline-stage .bwf-native-stage-mode-title { font-size: 10px; }
.bwf-native-inline-stage .bwf-native-stage-mode-copy { font-size: 8px; }
.bwf-native-inline-stage .bwf-native-inline-board { border-width: 1px; }
.bwf-native-inline-stage .bwf-native-gesture-zone { gap: 2px; }
.bwf-native-inline-stage .bwf-native-gesture-title { font-size: 11px; }
.bwf-native-inline-stage .bwf-native-gesture-copy { font-size: 7px; }

.bwf-native-inline-gesture {
  position: absolute;
  z-index: 4;
  top: 34%;
  left: 18%;
  width: 55%;
  color: #dff7ff;
  text-align: center;
  border: 1px dashed #65cfff;
  background: #0a2d4559;
  padding: 8px 3px;
  font-size: 8px;
  font-weight: 900;
}

.bwf-native-inline-joystick {
  position: absolute;
  z-index: 4;
  aspect-ratio: 1;
  left: 50%;
  top: 77%;
  width: min(28%, 86px);
  border: 2px solid #b5daefb8;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #3494c357, #0000 44%), radial-gradient(circle, #113d5bf5, #020a15fa 70%);
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 0 4px #03101dd1, 0 0 10px #39d8ff4d;
}

.bwf-native-joystick:after {
  content: "";
  position: absolute;
  width: 38%;
  height: 38%;
  top: 31%;
  left: 31%;
  border-radius: 50%;
  background: linear-gradient(145deg, #318bb5, #0a2942 65%, #061522);
  border: 1px solid #e6f9ffdb;
}

.bwf-native-joystick-direction {
  position: absolute;
  z-index: 1;
  color: #daf3ffd6;
  font-size: 12px;
  font-weight: 900;
}

.bwf-native-joystick-direction.is-left { top: 43%; left: 9%; }
.bwf-native-joystick-direction.is-right { top: 43%; right: 9%; }
.bwf-native-joystick-direction.is-down { bottom: 5%; left: 46%; }

.bwf-native-touch-overlay {
  position: fixed !important;
  z-index: 3000 !important;
  inset: 0 !important;
  display: block !important;
  overflow: hidden !important;
  color: #eff7ff;
  background: #02050a;
  touch-action: none;
}

.bwf-native-touch-dialog {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  width: 100vw;
  height: 100dvh;
  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));
}

.bwf-native-touch-head,
.bwf-native-touch-toolbar,
.bwf-native-touch-actions {
  width: min(100%, 1280px);
  margin-inline: auto;
}

.bwf-native-touch-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.bwf-native-touch-head-copy { min-width: 0; }
.bwf-native-touch-kicker { margin: 0; color: #71dfff; letter-spacing: .16em; font-size: 8px; font-weight: 900; }
.bwf-native-touch-title { margin: 2px 0 0; color: #f8fbff; letter-spacing: .04em; font-size: clamp(18px, 3vw, 30px); }
.bwf-native-touch-lead { margin: 3px 0 0; color: #b8c7d9; font-size: 10px; font-weight: 700; }
.bwf-native-touch-close { color: #e5f2ff; cursor: pointer; background: #0a192be6; border: 1px solid #71859b; border-radius: 5px; min-width: 38px; min-height: 34px; font-size: 22px; line-height: 1; }

.bwf-native-touch-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: #020810c7;
  border: 1px solid #97b8d457;
  border-radius: 5px;
}

.bwf-native-touch-tabs { display: flex; gap: 5px; }
.bwf-native-touch-tab { color: #b8c7d9; cursor: pointer; background: transparent; border: 1px solid #55708e; border-radius: 3px; min-height: 30px; padding: 0 11px; font-size: 11px; font-weight: 900; }
.bwf-native-touch-tab.is-selected { color: #d6efcf; background: #4f7651; border-color: #7fbd76; }
.bwf-native-touch-note { color: #b8c7d9; text-align: right; font-size: 9px; font-weight: 700; }

.bwf-native-touch-stage-wrap { display: grid; place-items: center; min-height: 0; overflow: hidden; }
.bwf-native-touch-stage {
  position: relative;
  width: min(94vw, 1200px);
  aspect-ratio: 16 / 9;
  max-height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 63%, #0f2b43 0%, #030a12 46%, #010207 100%);
  border: 1px solid #8ea6bb;
  border-radius: 7px;
  box-shadow: 0 14px 50px #000, inset 0 0 34px #2f97ff1c;
  touch-action: none;
}

.bwf-native-touch-stage.is-portrait {
  width: auto;
  height: min(100%, calc(100dvh - 170px));
  aspect-ratio: 9 / 16;
}

.bwf-native-touch-stage.is-landscape { width: min(94vw, 1200px); }
.bwf-native-touch-stage:before { content: ""; pointer-events: none; position: absolute; inset: -20%; background: repeating-linear-gradient(90deg, #0000 0 46px, #1c69e157 48px 50px, #0000 52px), repeating-linear-gradient(0deg, #0000 0 26px, #53cdff2e 28px 30px, #0000 32px); opacity: .46; transform: perspective(420px) rotateX(68deg) translateY(25%); }
.bwf-native-touch-stage .bwf-native-stage-board { border-width: 3px; }
.bwf-native-touch-control { width: clamp(54px, 7vw, 88px); border-width: 2px; }
.bwf-native-touch-control .bwf-native-control-glyph { font-size: clamp(20px, 3vw, 34px); }
.bwf-native-joystick { position: absolute; z-index: 4; aspect-ratio: 1; width: min(18%, 150px); border: 3px solid #b5daefb8; border-radius: 50%; cursor: grab; touch-action: none; transform: translate(-50%, -50%); background: radial-gradient(circle at 50% 42%, #3494c357, #0000 44%), radial-gradient(circle, #113d5bf5, #020a15fa 70%); box-shadow: inset 0 0 0 7px #03101dd1, inset 0 0 20px #39d8ff4d, 0 0 0 2px #0a1e31cc, 0 8px 18px #000000b3; }
.bwf-native-joystick.is-dragging { border-color: #b7e7a9; box-shadow: 0 0 0 3px #7fbd7655, 0 0 18px #7fbd76; }
.bwf-native-joystick:before { content: ""; position: absolute; inset: 22%; border: 1px dashed #91d4ef55; border-radius: 50%; }
.bwf-native-joystick:after { content: ""; position: absolute; width: 40%; height: 40%; top: 30%; left: 30%; border-radius: 50%; background: linear-gradient(145deg, #318bb5, #0a2942 65%, #061522); border: 2px solid #e6f9ffdb; box-shadow: inset 2px 2px 4px #ffffff47, 0 0 14px #39d8ff75; }
.bwf-native-joystick .bwf-native-joystick-direction { font-size: clamp(14px, 2vw, 24px); }
.bwf-native-touch-actions { display: flex; justify-content: flex-end; gap: 8px; }
.bwf-native-touch-actions button { min-height: 38px; padding-inline: 13px; }
.bwf-native-touch-actions button:first-child { margin-right: auto; }

@media (orientation: portrait) and (max-width: 560px) {
  .bwf-native-touch-stage.is-portrait { height: min(100%, calc(100dvh - 185px)); }
  .bwf-native-touch-control { width: 48px; }
  .bwf-native-touch-control .bwf-native-control-label { font-size: 6px; }
  .bwf-native-joystick { width: 28%; }
  .bwf-native-touch-toolbar { align-items: stretch; flex-direction: column; }
  .bwf-native-touch-tabs { justify-content: center; }
  .bwf-native-touch-note { text-align: center; }
}

@media (max-height: 520px) {
  .bwf-native-touch-dialog { gap: 4px; }
  .bwf-native-touch-lead { display: none; }
  .bwf-native-touch-stage.is-portrait { height: min(100%, calc(100dvh - 132px)); }
  .bwf-native-touch-actions button { min-height: 32px; }
}

/* The joystick is fixed in the original game component. These variables make
   its saved editor position apply to the real game without changing desktop
   input or the keyboard path. */
.virtual-joystick-shell {
  left: var(--bwf-touch-joystick-x, 18%) !important;
  top: var(--bwf-touch-joystick-y, 80%) !important;
}