* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;

  background: #080a0f;

  touch-action: none;
  overscroll-behavior: none;

  user-select: none;
  -webkit-user-select: none;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
input {
  font: inherit;
}

button {
  -webkit-appearance: none;
  appearance: none;
}

body {
  position: fixed;
  inset: 0;
}


/* ===================================== */
/* MAP */
/* ===================================== */

#mapViewport {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #080a0f;

  touch-action: none;

  cursor: grab;
}

#mapViewport:active {
  cursor: grabbing;
}


#mapWorld {
  position: absolute;

  left: 0;
  top: 0;

  transform-origin: 0 0;

  will-change: transform;
}


/* ===================================== */
/* BACKGROUND */
/* ===================================== */

#mapBackground {
  position: relative;

  display: block;

  width: 100%;
  height: 100%;

  max-width: none;
  max-height: none;

  pointer-events: none;

  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;

  z-index: 1;

  transition:
    filter 0.35s ease,
    opacity 0.35s ease;
}


#mapWorld.focusMode #mapBackground {
  filter:
    brightness(0.58)
    saturate(0.80);
}


/* ===================================== */
/* CONNECTIONS LAYER */
/* ===================================== */

#connectionsLayer {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  z-index: 8;

  pointer-events: none;
}


/* lines created later by JS */

.teamConnectionGlow {
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;

  opacity: 0.20;

  filter: blur(5px);
}


.teamConnectionLine {
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;

  opacity: 0.88;
}


.teamConnectionInner {
  fill: none;

  stroke: rgba(255, 255, 255, 0.40);

  stroke-linecap: round;
  stroke-linejoin: round;

  opacity: 0.42;
}


/* ===================================== */
/* MAP DIMMER */
/* ===================================== */

#mapDimmer {
  position: absolute;

  inset: 0;

  z-index: 15;

  background:
    rgba(3, 6, 12, 0.19);

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.35s ease;
}


#mapDimmer.active {
  opacity: 1;

  pointer-events: auto;
}


/* ===================================== */
/* BUILDINGS */
/* ===================================== */

#buildingsLayer {
  position: absolute;

  inset: 0;

  z-index: 20;

  pointer-events: none;
}


.building {
  --building-team-color: #ffb52d;

  position: absolute;

  transform:
    translate(-50%, -50%);

  transform-origin:
    center bottom;

  cursor: pointer;

  pointer-events: auto;

  z-index: 10;

  padding: 0;
  margin: 0;

  border: none;
  outline: none;

  background: transparent;

  appearance: none;
  -webkit-appearance: none;

  overflow: visible;

  transition:
    opacity 0.3s ease,
    filter 0.3s ease,
    transform 0.3s ease;

  will-change:
    transform,
    filter,
    opacity;
}


.building img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  background: transparent;

  pointer-events: none;

  user-select: none;
  -webkit-user-select: none;

  -webkit-user-drag: none;

  filter:
    drop-shadow(
      0 6px 6px
      rgba(0, 0, 0, 0.34)
    );
}


/* ===================================== */
/* ASSIGNED BUILDING */
/* ===================================== */

.building.assigned img {
  filter:
    drop-shadow(
      0 6px 6px
      rgba(0, 0, 0, 0.34)
    )

    drop-shadow(
      0 0 5px
      var(--building-team-color)
    )

    drop-shadow(
      0 0 12px
      color-mix(
        in srgb,
        var(--building-team-color) 70%,
        transparent
      )
    );
}


.building.assigned .buildingOwnershipDot {
  opacity: 1;
}


/* ===================================== */
/* OWNERSHIP DOT */
/* ===================================== */

.buildingOwnershipDot {
  position: absolute;

  right: 8%;
  bottom: 8%;

  width: 11px;
  height: 11px;

  border:
    2px solid
    rgba(255, 255, 255, 0.90);

  border-radius: 50%;

  background:
    var(--building-team-color);

  box-shadow:
    0 0 9px
    var(--building-team-color);

  opacity: 0;

  pointer-events: none;
}


/* ===================================== */
/* MAP PLAYER ROSTER */
/* ===================================== */

.buildingRoster {
  position: absolute;

  left: 50%;
  top: calc(100% - 4px);

  min-width: 96px;
  max-width: 150px;

  padding: 6px 8px;

  transform:
    translateX(-50%);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--building-team-color) 52%,
      rgba(255, 255, 255, 0.06)
    );

  border-radius: 10px;

  background:
    rgba(4, 11, 19, 0.91);

  box-shadow:
    0 6px 16px
    rgba(0, 0, 0, 0.36);

  color: #eaf3fc;

  pointer-events: none;

  opacity: 0;

  transition:
    opacity 0.20s ease;

  z-index: 25;
}


.building.hasRoster
.buildingRoster {
  opacity: 1;
}


.buildingRosterTeam {
  margin-bottom: 3px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color:
    var(--building-team-color);

  font-size: 8px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.05em;
}


.buildingRosterPlayer {
  display: flex;

  align-items: center;

  gap: 4px;

  min-width: 0;

  font-size: 8px;

  line-height: 1.35;
}


.buildingRosterPlayerName {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.buildingRosterLeaderStar {
  flex-shrink: 0;

  color: #ffd54c;

  font-size: 9px;

  text-shadow:
    0 0 7px
    rgba(255, 191, 32, 0.8);
}


/* ===================================== */
/* OTHER BUILDINGS WHILE FOCUSED */
/* ===================================== */

#buildingsLayer.focusMode
.building:not(.selected) {

  opacity: 0.38;

  filter:
    brightness(0.58)
    saturate(0.65);

  transform:
    translate(-50%, -50%)
    scale(0.97);

  pointer-events: none;
}


/* ===================================== */
/* HOVER */
/* ===================================== */

@media (hover: hover) and (pointer: fine) {

  .building:hover {
    transform:
      translate(-50%, -50%)
      translateY(-3px)
      scale(1.055);

    z-index: 35;
  }

}


/* ===================================== */
/* SELECTED BUILDING */
/* ===================================== */

.building.selected {
  opacity: 1;

  z-index: 100;

  animation:
    selectedBuildingFloat
    1.9s
    ease-in-out
    infinite;

  filter:
    brightness(1.06)
    saturate(1.08)

    drop-shadow(
      0 0 3px
      rgba(255, 255, 255, 0.75)
    )

    drop-shadow(
      0 0 9px
      var(--building-team-color)
    )

    drop-shadow(
      0 0 20px
      color-mix(
        in srgb,
        var(--building-team-color) 70%,
        transparent
      )
    );
}


/* ===================================== */
/* SELECTED AURA */
/* ===================================== */

.building.selected::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 57%;

  width: 88%;
  height: 54%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,

      color-mix(
        in srgb,
        var(--building-team-color) 30%,
        transparent
      )
      0%,

      color-mix(
        in srgb,
        var(--building-team-color) 15%,
        transparent
      )
      44%,

      transparent 76%
    );

  filter:
    blur(4px);

  z-index: -3;

  pointer-events: none;

  animation:
    auraBreathing
    1.7s
    ease-in-out
    infinite;
}


/* ===================================== */
/* SELECTED GROUND */
/* ===================================== */

.building.selected::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 15%;

  width: 50%;
  height: 27%;

  transform:
    translateX(-50%)
    rotate(45deg);

  border:
    2px solid
    var(--building-team-color);

  background:
    color-mix(
      in srgb,
      var(--building-team-color) 4%,
      transparent
    );

  box-shadow:
    0 0 5px
    var(--building-team-color),

    0 0 14px
    color-mix(
      in srgb,
      var(--building-team-color) 60%,
      transparent
    );

  z-index: -2;

  pointer-events: none;

  animation:
    groundPulse
    1.7s
    ease-in-out
    infinite;
}


/* ===================================== */
/* SHIELD */
/* ===================================== */

.buildingShield {
  position: absolute;

  left: 50%;
  top: -24%;

  transform:
    translateX(-50%)
    scale(0);

  width: 40px;
  height: 46px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius:
    11px
    11px
    16px
    16px;

  color: white;

  font-size: 28px;

  font-weight: 800;

  background:
    linear-gradient(
      180deg,

      color-mix(
        in srgb,
        var(--building-team-color) 75%,
        white
      ),

      var(--building-team-color)
    );

  border:
    2px solid
    rgba(255, 255, 255, 0.88);

  box-shadow:
    0 0 7px
    var(--building-team-color),

    0 0 20px
    color-mix(
      in srgb,
      var(--building-team-color) 70%,
      transparent
    );

  opacity: 0;

  z-index: 110;

  cursor: pointer;

  pointer-events: none;
}


.building.selected
.buildingShield {

  pointer-events: auto;

  animation:
    shieldPop
    0.38s
    0.12s
    cubic-bezier(
      0.18,
      0.89,
      0.32,
      1.35
    )
    forwards;
}


/* ===================================== */
/* BUILDING ANIMATIONS */
/* ===================================== */

@keyframes selectedBuildingFloat {

  0% {
    transform:
      translate(-50%, -50%)
      translateY(-6px)
      scale(1.14);
  }

  50% {
    transform:
      translate(-50%, -50%)
      translateY(-11px)
      scale(1.18);
  }

  100% {
    transform:
      translate(-50%, -50%)
      translateY(-6px)
      scale(1.14);
  }

}


@keyframes auraBreathing {

  0% {
    opacity: 0.52;

    transform:
      translate(-50%, -50%)
      scale(0.94);
  }

  50% {
    opacity: 0.82;

    transform:
      translate(-50%, -50%)
      scale(1.05);
  }

  100% {
    opacity: 0.52;

    transform:
      translate(-50%, -50%)
      scale(0.94);
  }

}


@keyframes groundPulse {

  0% {
    opacity: 0.55;
  }

  50% {
    opacity: 0.82;
  }

  100% {
    opacity: 0.55;
  }

}


@keyframes shieldPop {

  0% {
    opacity: 0;

    transform:
      translateX(-50%)
      translateY(8px)
      scale(0);
  }

  65% {
    opacity: 1;

    transform:
      translateX(-50%)
      translateY(-2px)
      scale(1.12);
  }

  100% {
    opacity: 1;

    transform:
      translateX(-50%)
      translateY(0)
      scale(1);
  }

}


/* ===================================== */
/* TEAMS BUTTON */
/* ===================================== */

#manageButton {
  position: fixed;

  top:
    calc(
      14px +
      env(safe-area-inset-top)
    );

  right:
    calc(
      14px +
      env(safe-area-inset-right)
    );

  z-index: 240;

  min-width: 56px;
  height: 56px;

  padding:
    0 14px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  border:
    1px solid
    rgba(255, 198, 62, 0.50);

  border-radius: 18px;

  color: #fff7df;

  background:
    linear-gradient(
      180deg,
      rgba(25, 33, 46, 0.96),
      rgba(9, 16, 28, 0.98)
    );

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, 0.38);

  cursor: pointer;
}


.manageButtonIcon {
  font-size: 19px;
}


.manageButtonText {
  font-size: 13px;

  font-weight: 700;
}


/* ===================================== */
/* BUILDING PANEL */
/* ===================================== */

#buildingPanel {
  --panel-team-color: #ffb52d;

  position: fixed;

  left: 12px;
  right: 12px;

  bottom:
    calc(
      12px +
      env(safe-area-inset-bottom)
    );

  z-index: 300;

  padding: 18px;

  border-radius: 24px;

  color: white;

  background:
    linear-gradient(
      180deg,
      rgba(10, 19, 32, 0.985),
      rgba(5, 12, 21, 0.99)
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--panel-team-color) 35%,
      rgba(116, 166, 225, 0.20)
    );

  box-shadow:
    0 22px 75px
    rgba(0, 0, 0, 0.72);

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);

  transform:
    translateY(
      calc(100% + 90px)
    );

  transition:
    transform
    0.42s
    cubic-bezier(
      0.18,
      0.89,
      0.32,
      1.08
    );
}


#buildingPanel.open {
  transform:
    translateY(0);
}


/* ===================================== */
/* BUILDING PANEL HEADER */
/* ===================================== */

.panelHeader {
  display: flex;

  align-items: center;

  gap: 13px;

  margin-bottom: 15px;

  padding-right: 42px;
}


.panelPreview {
  width: 90px;
  height: 90px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 18px;

  background:
    radial-gradient(
      circle,

      color-mix(
        in srgb,
        var(--panel-team-color) 16%,
        transparent
      ),

      transparent 70%
    );
}


.panelPreview img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  background: transparent;

  filter:
    drop-shadow(
      0 0 8px
      var(--panel-team-color)
    );
}


.panelTitle {
  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;
}


.panelTitleText {
  min-width: 0;
}


.panelTeamBadge {
  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  padding: 0;

  border:
    2px solid
    var(--panel-team-color);

  border-radius: 12px;

  color:
    var(--panel-team-color);

  background:
    color-mix(
      in srgb,
      var(--panel-team-color) 10%,
      transparent
    );

  font-size: 24px;

  font-weight: 800;

  box-shadow:
    0 0 10px
    color-mix(
      in srgb,
      var(--panel-team-color) 45%,
      transparent
    );

  cursor: pointer;
}


#panelName {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: white;

  font-size: 23px;

  font-weight: 850;

  line-height: 1;
}


#panelType {
  margin-top: 5px;

  color: #78baff;

  font-size: 13px;
}


#closePanel {
  position: absolute;

  right: 13px;
  top: 13px;

  width: 44px;
  height: 44px;

  border: none;

  border-radius: 50%;

  color: white;

  background:
    rgba(255, 255, 255, 0.085);

  font-size: 25px;

  cursor: pointer;
}


/* ===================================== */
/* UNASSIGNED BUILDING */
/* ===================================== */

#unassignedBuildingState {
  display: none;

  padding-top: 4px;
}


#unassignedBuildingState.visible {
  display: block;
}


.emptyAssignmentCard {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 13px;

  margin-bottom: 12px;

  border:
    1px solid
    rgba(125, 157, 194, 0.14);

  border-radius: 15px;

  background:
    rgba(255, 255, 255, 0.025);
}


.emptyAssignmentIcon {
  width: 40px;
  height: 40px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    1px dashed
    var(--panel-team-color);

  border-radius: 12px;

  color:
    var(--panel-team-color);

  font-size: 25px;
}


.emptyAssignmentCard strong {
  display: block;

  color: #dce9f7;

  font-size: 14px;
}


.emptyAssignmentCard p {
  margin-top: 3px;

  color: #7893ad;

  font-size: 11px;

  line-height: 1.4;
}


.assignTeamButton {
  width: 100%;

  min-height: 48px;

  border:
    1px solid
    var(--panel-team-color);

  border-radius: 14px;

  color:
    var(--panel-team-color);

  background:
    color-mix(
      in srgb,
      var(--panel-team-color) 10%,
      transparent
    );

  font-weight: 800;

  cursor: pointer;
}


/* ===================================== */
/* ASSIGNED BUILDING */
/* ===================================== */

#assignedBuildingState {
  display: none;
}


#assignedBuildingState.visible {
  display: block;
}


.assignedTeamCard {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 13px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--panel-team-color) 50%,
      transparent
    );

  border-radius: 16px;

  background:
    color-mix(
      in srgb,
      var(--panel-team-color) 8%,
      rgba(255, 255, 255, 0.02)
    );
}


.assignedTeamIdentity {
  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;
}


.assignedTeamColor {
  width: 17px;
  height: 17px;

  flex-shrink: 0;

  border:
    2px solid white;

  border-radius: 50%;

  background:
    var(--panel-team-color);

  box-shadow:
    0 0 11px
    var(--panel-team-color);
}


.smallBuildingLabel {
  display: block;

  margin-bottom: 4px;

  color: #7895b3;

  font-size: 10px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;
}


#assignedTeamName {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color:
    var(--panel-team-color);

  font-size: 20px;
}


#changeTeamButton {
  min-height: 38px;

  padding:
    0 11px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--panel-team-color) 55%,
      transparent
    );

  border-radius: 11px;

  color:
    var(--panel-team-color);

  background:
    transparent;

  cursor: pointer;
}


/* ===================================== */
/* SHARED BUILDING SECTION HEADER */
/* ===================================== */

.buildingSectionHeader,
.buildingMembersHeader {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;
}


.buildingSectionHeader h4,
.buildingMembersHeader h4 {
  color: #dce9f7;

  font-size: 14px;

  font-weight: 750;
}


/* ===================================== */
/* BUILDING LEADER */
/* ===================================== */

.buildingLeaderSection {
  margin-top: 14px;
}


.leaderStar {
  color: #ffd24d;

  font-size: 23px;

  text-shadow:
    0 0 9px
    rgba(255, 180, 20, 0.72);
}


.buildingLeaderButton {
  width: 100%;

  min-height: 58px;

  margin-top: 8px;

  padding: 8px 10px;

  display: grid;

  grid-template-columns:
    40px
    minmax(0, 1fr)
    20px;

  align-items: center;

  gap: 10px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--panel-team-color) 30%,
      rgba(255, 255, 255, 0.05)
    );

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.025);

  color: white;

  text-align: left;

  cursor: pointer;
}


.buildingLeaderAvatar {
  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 12px;

  color: #ffd64d;

  background:
    color-mix(
      in srgb,
      var(--panel-team-color) 13%,
      rgba(255, 255, 255, 0.03)
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--panel-team-color) 35%,
      transparent
    );

  font-size: 18px;

  box-shadow:
    0 0 9px
    color-mix(
      in srgb,
      var(--panel-team-color) 20%,
      transparent
    );
}


.buildingLeaderInfo {
  min-width: 0;
}


.buildingLeaderInfo small {
  display: block;

  margin-bottom: 2px;

  color: #738da7;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.07em;
}


.buildingLeaderInfo strong {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #f1f6fc;

  font-size: 14px;
}


.buildingLeaderButton.hasLeader
.buildingLeaderInfo strong {
  color:
    var(--panel-team-color);
}


.buildingLeaderArrow {
  color: #7790aa;

  font-size: 25px;
}


/* ===================================== */
/* BUILDING PLAYERS */
/* ===================================== */

.buildingPlayersSection {
  margin-top: 15px;
}


#buildingMemberCount {
  min-width: 30px;

  padding: 4px 8px;

  border-radius: 99px;

  color:
    var(--panel-team-color);

  background:
    color-mix(
      in srgb,
      var(--panel-team-color) 10%,
      transparent
    );

  font-size: 11px;

  font-weight: 800;

  text-align: center;
}


#buildingMembersList {
  display: grid;

  gap: 7px;

  max-height: 190px;

  margin-top: 9px;

  overflow-y: auto;

  overscroll-behavior: contain;
}


.buildingMemberRow {
  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto;

  gap: 9px;

  align-items: center;

  min-height: 45px;

  padding: 7px 9px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--panel-team-color) 20%,
      rgba(255, 255, 255, 0.04)
    );

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.025);
}


.buildingMemberNumber {
  width: 30px;
  height: 30px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 9px;

  color:
    var(--panel-team-color);

  background:
    color-mix(
      in srgb,
      var(--panel-team-color) 10%,
      transparent
    );

  font-size: 10px;

  font-weight: 800;
}


.buildingMemberName {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #e8f1fa;

  font-size: 13px;
}


.buildingMemberLeader {
  color: #ffd34d;

  font-size: 15px;

  text-shadow:
    0 0 7px
    rgba(255, 170, 20, 0.70);
}


#buildingNoMembers {
  display: none;

  padding: 22px 5px;

  color: #7890a8;

  text-align: center;

  font-size: 12px;
}


#buildingNoMembers.visible {
  display: block;
}


.editBuildingPlayersButton {
  width: 100%;

  min-height: 43px;

  margin-top: 10px;

  border:
    1px dashed
    color-mix(
      in srgb,
      var(--panel-team-color) 60%,
      transparent
    );

  border-radius: 12px;

  color:
    var(--panel-team-color);

  background:
    color-mix(
      in srgb,
      var(--panel-team-color) 6%,
      transparent
    );

  font-weight: 750;

  cursor: pointer;
}


#removeAssignmentButton {
  width: 100%;

  min-height: 42px;

  margin-top: 14px;

  border:
    1px solid
    rgba(255, 88, 88, 0.28);

  border-radius: 12px;

  color: #ff9797;

  background:
    rgba(255, 70, 70, 0.06);

  cursor: pointer;
}


/* ===================================== */
/* TEAM CHOOSER OVERLAY */
/* ===================================== */

#teamChooserOverlay,
#playerAssignmentOverlay,
#leaderChooserOverlay {
  position: fixed;

  inset: 0;

  background:
    rgba(2, 6, 12, 0.65);

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.22s ease;
}


#teamChooserOverlay {
  z-index: 330;
}


#playerAssignmentOverlay {
  z-index: 350;
}


#leaderChooserOverlay {
  z-index: 370;
}


#teamChooserOverlay.open,
#playerAssignmentOverlay.open,
#leaderChooserOverlay.open {
  opacity: 1;

  pointer-events: auto;
}


/* ===================================== */
/* COMMON BOTTOM SHEET */
/* ===================================== */

#teamChooser,
#playerAssignmentPanel,
#leaderChooser {
  position: fixed;

  left: 12px;
  right: 12px;

  bottom:
    calc(
      12px +
      env(safe-area-inset-bottom)
    );

  max-height: 72%;

  padding: 16px;

  overflow-y: auto;

  color: white;

  background:
    linear-gradient(
      180deg,
      #0c1725,
      #07101b
    );

  border:
    1px solid
    rgba(119, 160, 209, 0.25);

  border-radius: 22px;

  box-shadow:
    0 22px 70px
    rgba(0, 0, 0, 0.65);

  transform:
    translateY(
      calc(100% + 70px)
    );

  transition:
    transform
    0.30s
    cubic-bezier(
      0.18,
      0.89,
      0.32,
      1
    );
}


#teamChooser {
  z-index: 340;
}


#playerAssignmentPanel {
  z-index: 360;
}


#leaderChooser {
  z-index: 380;
}


#teamChooser.open,
#playerAssignmentPanel.open,
#leaderChooser.open {
  transform:
    translateY(0);
}


/* ===================================== */
/* SHEET HEADERS */
/* ===================================== */

.teamChooserHeader,
.playerAssignmentHeader,
.leaderChooserHeader {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 12px;
}


.teamChooserHeader h3,
.playerAssignmentHeader h3,
.leaderChooserHeader h3 {
  font-size: 21px;
}


#closeTeamChooser,
#closePlayerAssignment,
#closeLeaderChooser {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  border: none;

  border-radius: 50%;

  color: white;

  background:
    rgba(255, 255, 255, 0.07);

  font-size: 23px;

  cursor: pointer;
}


/* ===================================== */
/* TEAM CHOOSER */
/* ===================================== */

#teamChooserList {
  display: grid;

  gap: 8px;
}


.teamChooserItem {
  --chooser-color: #ffb52d;

  width: 100%;

  min-height: 56px;

  padding:
    9px 12px;

  display: grid;

  grid-template-columns:
    13px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 10px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--chooser-color) 35%,
      rgba(255, 255, 255, 0.06)
    );

  border-radius: 14px;

  color: white;

  background:
    color-mix(
      in srgb,
      var(--chooser-color) 7%,
      rgba(255, 255, 255, 0.02)
    );

  cursor: pointer;
}


.teamChooserDot {
  width: 12px;
  height: 12px;

  border:
    2px solid
    rgba(255, 255, 255, 0.8);

  border-radius: 50%;

  background:
    var(--chooser-color);

  box-shadow:
    0 0 9px
    var(--chooser-color);
}


.teamChooserName {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color:
    var(--chooser-color);

  font-weight: 800;
}


.teamChooserCount {
  color: #829bb4;

  font-size: 11px;
}


#teamChooserEmpty {
  display: none;

  padding: 24px;

  color: #7d95ad;

  text-align: center;

  font-size: 13px;
}


#teamChooserEmpty.visible {
  display: block;
}


/* ===================================== */
/* PLAYER ASSIGNMENT */
/* ===================================== */

.playerAssignmentTeam {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 12px;

  border:
    1px solid
    rgba(125, 160, 205, 0.15);

  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.025);
}


.playerAssignmentTeamDot {
  width: 15px;
  height: 15px;

  flex-shrink: 0;

  border:
    2px solid
    rgba(255, 255, 255, 0.90);

  border-radius: 50%;

  background: #ffb52d;

  box-shadow:
    0 0 10px #ffb52d;
}


#playerAssignmentTeamName {
  color: #edf4fb;

  font-size: 14px;
}


.assignmentInstructions {
  margin-top: 12px;

  padding:
    10px 12px;

  border-left:
    3px solid
    #6ba6db;

  border-radius:
    0 10px 10px 0;

  color: #8ca7c1;

  background:
    rgba(83, 144, 199, 0.06);

  font-size: 12px;

  line-height: 1.45;
}


.playerAssignmentSearch {
  margin-top: 11px;
}


#buildingPlayerSearch {
  width: 100%;
  height: 44px;

  padding:
    0 12px;

  border:
    1px solid
    rgba(117, 158, 204, 0.20);

  border-radius: 12px;

  outline: none;

  background:
    rgba(255, 255, 255, 0.035);

  color: white;

  font-size: 16px;
}


#playerAssignmentList {
  display: grid;

  gap: 7px;

  margin-top: 10px;
}


.playerAssignmentItem {
  --assignment-team-color: #ffb52d;

  width: 100%;

  min-height: 51px;

  padding:
    7px 9px;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    30px;

  align-items: center;

  gap: 9px;

  border:
    1px solid
    rgba(119, 158, 200, 0.13);

  border-radius: 13px;

  color: white;

  background:
    rgba(255, 255, 255, 0.022);

  cursor: pointer;
}


.playerAssignmentItem.selected {
  border-color:
    color-mix(
      in srgb,
      var(--assignment-team-color) 60%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--assignment-team-color) 8%,
      rgba(255, 255, 255, 0.02)
    );
}


.playerAssignmentNumber {
  width: 34px;
  height: 34px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 10px;

  color:
    var(--assignment-team-color);

  background:
    color-mix(
      in srgb,
      var(--assignment-team-color) 10%,
      transparent
    );

  font-size: 10px;

  font-weight: 800;
}


.playerAssignmentName {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #e7f0fa;

  font-size: 13px;
}


.playerAssignmentCheck {
  width: 24px;
  height: 24px;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(130, 161, 193, 0.32);

  border-radius: 7px;

  color: transparent;

  background:
    rgba(255, 255, 255, 0.025);
}


.playerAssignmentItem.selected
.playerAssignmentCheck {
  border-color:
    var(--assignment-team-color);

  color: #ffffff;

  background:
    var(--assignment-team-color);
}


#playerAssignmentEmpty {
  display: none;

  padding: 28px 10px;

  color: #7890a8;

  text-align: center;

  font-size: 12px;
}


#playerAssignmentEmpty.visible {
  display: block;
}


.playerAssignmentFooter {
  position: sticky;

  bottom: -16px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin:
    14px -16px -16px;

  padding:
    12px 16px
    calc(
      12px +
      env(safe-area-inset-bottom)
    );

  border-top:
    1px solid
    rgba(255, 255, 255, 0.08);

  background:
    rgba(7, 16, 27, 0.98);
}


.selectedPlayersCount span {
  display: block;

  color: #718aa4;

  font-size: 9px;

  text-transform: uppercase;
}


.selectedPlayersCount strong {
  color: #ffffff;

  font-size: 18px;
}


#saveBuildingPlayersButton {
  min-height: 43px;

  padding:
    0 16px;

  border: none;

  border-radius: 12px;

  color: #18130a;

  background:
    linear-gradient(
      180deg,
      #ffd64d,
      #e99b10
    );

  font-weight: 850;

  cursor: pointer;
}


/* ===================================== */
/* LEADER CHOOSER */
/* ===================================== */

.leaderChooserHint {
  margin-bottom: 11px;

  padding: 10px 12px;

  border-radius: 12px;

  color: #8ca5bd;

  background:
    rgba(255, 197, 54, 0.055);

  font-size: 12px;

  line-height: 1.45;
}


.leaderChooserHint strong {
  color: #ffd64d;
}


#leaderChooserList {
  display: grid;

  gap: 7px;
}


.leaderChooserItem {
  --leader-team-color: #ffb52d;

  width: 100%;

  min-height: 53px;

  padding: 8px 10px;

  display: grid;

  grid-template-columns:
    39px
    minmax(0, 1fr)
    30px;

  align-items: center;

  gap: 9px;

  border:
    1px solid
    rgba(120, 159, 199, 0.14);

  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.022);

  color: white;

  cursor: pointer;
}


.leaderChooserItem.active {
  border-color:
    color-mix(
      in srgb,
      var(--leader-team-color) 65%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--leader-team-color) 8%,
      rgba(255, 255, 255, 0.02)
    );
}


.leaderChooserAvatar {
  width: 36px;
  height: 36px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 11px;

  color:
    var(--leader-team-color);

  background:
    color-mix(
      in srgb,
      var(--leader-team-color) 11%,
      transparent
    );

  font-size: 12px;

  font-weight: 850;
}


.leaderChooserName {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #edf4fb;

  font-size: 13px;
}


.leaderChooserStar {
  color: #657b91;

  font-size: 19px;

  text-align: center;
}


.leaderChooserItem.active
.leaderChooserStar {
  color: #ffd34d;

  text-shadow:
    0 0 8px
    rgba(255, 165, 20, 0.70);
}


#leaderChooserEmpty {
  display: none;

  padding: 28px 10px;

  color: #7890a8;

  text-align: center;

  font-size: 12px;
}


#leaderChooserEmpty.visible {
  display: block;
}


/* ===================================== */
/* TEAMS OVERLAY */
/* ===================================== */

#manageOverlay {
  position: fixed;

  inset: 0;

  z-index: 390;

  background:
    rgba(2, 6, 12, 0.62);

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.28s ease;
}


#manageOverlay.open {
  opacity: 1;

  pointer-events: auto;
}


/* ===================================== */
/* TEAMS PANEL */
/* ===================================== */

#managePanel {
  position: fixed;

  top: 0;
  right: 0;

  z-index: 400;

  width:
    min(92vw, 430px);

  height: 100%;

  padding:
    calc(
      18px +
      env(safe-area-inset-top)
    )
    16px
    calc(
      20px +
      env(safe-area-inset-bottom)
    );

  overflow-y: auto;

  overscroll-behavior: contain;

  color: white;

  background:
    linear-gradient(
      180deg,
      #0c1624 0%,
      #08111d 48%,
      #050c15 100%
    );

  border-left:
    1px solid
    rgba(125, 169, 220, 0.22);

  box-shadow:
    -20px 0 60px
    rgba(0, 0, 0, 0.55);

  transform:
    translateX(105%);

  transition:
    transform 0.34s ease;
}


#managePanel.open {
  transform:
    translateX(0);
}


/* ===================================== */
/* TEAMS HEADER */
/* ===================================== */

.manageHeader {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 16px;

  padding-bottom: 16px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);
}


.manageEyebrow {
  margin-bottom: 3px;

  color: #6faeea;

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.09em;
}


.manageHeader h2 {
  font-size: 27px;
}


#closeManage {
  width: 44px;
  height: 44px;

  border: none;

  border-radius: 50%;

  color: white;

  background:
    rgba(255, 255, 255, 0.07);

  font-size: 25px;

  cursor: pointer;
}


/* ===================================== */
/* CREATE TEAM */
/* ===================================== */

#createTeamForm {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 9px;

  margin-top: 16px;
}


.createTeamFields {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    82px;

  gap: 8px;

  min-width: 0;
}


#createTeamForm input[type="text"],
#addPlayerForm input,
#playerSearch {
  width: 100%;

  min-width: 0;

  height: 46px;

  padding:
    0 13px;

  border:
    1px solid
    rgba(116, 161, 214, 0.22);

  border-radius: 13px;

  outline: none;

  background:
    rgba(255, 255, 255, 0.045);

  color: white;

  font-size: 16px;
}


#createTeamForm input[type="text"]:focus,
#addPlayerForm input:focus,
#playerSearch:focus,
#buildingPlayerSearch:focus {
  border-color:
    rgba(255, 194, 58, 0.65);

  box-shadow:
    0 0 0 3px
    rgba(255, 185, 35, 0.07);
}


.teamColorPicker {
  height: 46px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(116, 161, 214, 0.22);

  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.045);

  cursor: pointer;
}


.teamColorPicker span {
  color: #829bb4;

  font-size: 9px;
}


.teamColorPicker input[type="color"] {
  width: 44px;
  height: 22px;

  padding: 0;

  border: none;

  background: transparent;
}


#createTeamButton,
#addPlayerButton {
  min-height: 46px;

  padding:
    0 15px;

  border: none;

  border-radius: 13px;

  background:
    linear-gradient(
      180deg,
      #ffd24e,
      #e99a0c
    );

  color: #1d1607;

  font-weight: 800;

  cursor: pointer;
}


/* ===================================== */
/* TEAM TABS */
/* ===================================== */

#teamsList {
  display: flex;

  gap: 8px;

  margin-top: 14px;

  overflow-x: auto;

  scrollbar-width: none;
}


#teamsList::-webkit-scrollbar {
  display: none;
}


.teamTab {
  --team-color: #ffb52d;

  flex: 0 0 auto;

  min-height: 42px;

  padding:
    0 13px;

  display: flex;

  align-items: center;

  gap: 7px;

  border:
    1px solid
    rgba(120, 160, 205, 0.18);

  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.035);

  color: #bcd0e6;

  cursor: pointer;
}


.teamTab::before {
  content: "";

  width: 9px;
  height: 9px;

  border-radius: 50%;

  background:
    var(--team-color);

  box-shadow:
    0 0 8px
    var(--team-color);
}


.teamTab.active {
  border-color:
    var(--team-color);

  color:
    var(--team-color);
}


.teamTabName {
  max-width: 120px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-weight: 700;
}


.teamTabCount {
  color: #7894af;

  font-size: 11px;
}


/* ===================================== */
/* TEAM EMPTY */
/* ===================================== */

#noTeamsState {
  display: none;

  padding: 50px 20px;

  text-align: center;

  color: #7991a9;
}


#noTeamsState.visible {
  display: block;
}


.emptyIcon {
  margin-bottom: 10px;

  font-size: 40px;
}


#noTeamsState h3 {
  color: #dce9f7;
}


#noTeamsState p {
  margin-top: 5px;

  font-size: 12px;

  line-height: 1.45;
}


/* ===================================== */
/* SELECTED TEAM */
/* ===================================== */

#selectedTeamSection {
  --team-color: #ffb52d;

  display: none;

  margin-top: 15px;
}


#selectedTeamSection.visible {
  display: block;
}


.selectedTeamHeader {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 14px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--team-color) 48%,
      transparent
    );

  border-radius: 17px;

  background:
    color-mix(
      in srgb,
      var(--team-color) 7%,
      rgba(255, 255, 255, 0.025)
    );
}


.selectedTeamIdentity {
  display: flex;

  align-items: center;

  gap: 11px;

  min-width: 0;
}


.selectedTeamColorDot {
  width: 16px;
  height: 16px;

  border:
    2px solid white;

  border-radius: 50%;

  background:
    var(--team-color);

  box-shadow:
    0 0 12px
    var(--team-color);
}


.smallLabel {
  display: block;

  margin-bottom: 4px;

  color: #6e9bc9;

  font-size: 10px;

  text-transform: uppercase;
}


#selectedTeamName {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color:
    var(--team-color);

  font-size: 21px;
}


#deleteTeamButton {
  min-height: 39px;

  padding:
    0 12px;

  border:
    1px solid
    rgba(255, 90, 90, 0.28);

  border-radius: 12px;

  background:
    rgba(255, 65, 65, 0.07);

  color: #ff9797;

  cursor: pointer;
}


/* ===================================== */
/* TEAM COLOR EDITOR */
/* ===================================== */

.teamColorEditor {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-top: 10px;

  padding: 11px 13px;

  border:
    1px solid
    rgba(112, 154, 202, 0.14);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.025);
}


.teamColorEditor p {
  color: #8199b2;

  font-size: 11px;
}


.selectedColorPicker {
  width: 50px;
  height: 40px;

  padding: 4px;

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.045);
}


.selectedColorPicker input {
  width: 100%;
  height: 100%;

  border: none;

  background: transparent;
}


/* ===================================== */
/* TEAM CAPACITY */
/* ===================================== */

.teamCapacity {
  margin-top: 12px;
}


#memberCount {
  display: block;

  margin-bottom: 7px;

  color: #9bb8d7;

  font-size: 12px;

  text-align: right;
}


.capacityTrack {
  width: 100%;
  height: 6px;

  overflow: hidden;

  border-radius: 99px;

  background:
    rgba(255, 255, 255, 0.065);
}


#capacityFill {
  width: 0%;
  height: 100%;

  border-radius: inherit;

  background:
    var(--team-color);

  transition:
    width 0.25s ease;
}


/* ===================================== */
/* ADD PLAYER */
/* ===================================== */

#addPlayerForm {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 9px;

  margin-top: 15px;
}


.playerSearchWrap {
  margin-top: 10px;
}


/* ===================================== */
/* TEAM MEMBER LIST */
/* ===================================== */

#membersList {
  display: grid;

  gap: 7px;

  margin-top: 12px;

  padding-bottom: 20px;
}


.memberRow {
  --team-color: #ffb52d;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    40px;

  align-items: center;

  gap: 10px;

  min-height: 55px;

  padding: 8px;

  border:
    1px solid
    rgba(109, 151, 196, 0.13);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.028);
}


.memberNumber {
  width: 34px;
  height: 34px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 11px;

  color:
    var(--team-color);

  background:
    color-mix(
      in srgb,
      var(--team-color) 13%,
      transparent
    );

  font-size: 11px;

  font-weight: 800;
}


.memberName {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #e7f1fb;

  font-size: 14px;
}


.removeMemberButton {
  width: 38px;
  height: 38px;

  border: none;

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.045);

  color: #8da2b7;

  cursor: pointer;
}


.removeMemberButton:active {
  color: #ff8d8d;

  background:
    rgba(255, 70, 70, 0.09);
}


#noMembersState {
  display: none;

  padding: 35px 10px;

  text-align: center;

  color: #7891aa;

  font-size: 13px;
}


#noMembersState.visible {
  display: block;
}


/* ===================================== */
/* TOAST */
/* ===================================== */

#toast {
  position: fixed;

  left: 50%;

  bottom:
    calc(
      28px +
      env(safe-area-inset-bottom)
    );

  z-index: 500;

  max-width:
    calc(100% - 40px);

  padding:
    11px 15px;

  border:
    1px solid
    rgba(255, 197, 62, 0.15);

  border-radius: 13px;

  background:
    rgba(7, 15, 25, 0.96);

  color: #e9f3ff;

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.42);

  opacity: 0;

  pointer-events: none;

  transform:
    translate(-50%, 15px);

  transition:
    opacity 0.22s ease,
    transform 0.22s ease;

  font-size: 13px;

  text-align: center;
}


#toast.visible {
  opacity: 1;

  transform:
    translate(-50%, 0);
}


/* ===================================== */
/* SMALL PHONES */
/* ===================================== */

@media (max-width: 380px) {

  #manageButton {
    right:
      calc(
        9px +
        env(safe-area-inset-right)
      );

    top:
      calc(
        9px +
        env(safe-area-inset-top)
      );

    padding:
      0 11px;
  }


  .manageButtonText {
    display: none;
  }


  #managePanel {
    width: 94vw;
  }


  .panelPreview {
    width: 78px;
    height: 78px;
  }


  #panelName {
    font-size: 20px;
  }


  #buildingPanel {
    left: 8px;
    right: 8px;

    padding: 15px;
  }


  #teamChooser,
  #playerAssignmentPanel,
  #leaderChooser {
    left: 8px;
    right: 8px;
  }

}


/* ===================================== */
/* REDUCED MOTION */
/* ===================================== */

@media (prefers-reduced-motion: reduce) {

  .building,
  .building.selected,
  .building.selected::before,
  .building.selected::after,
  .buildingShield,
  #buildingPanel,
  #teamChooser,
  #playerAssignmentPanel,
  #leaderChooser,
  #managePanel {

    animation: none !important;

    transition-duration: 0.01ms !important;
  }

}

/* ===================================== */
/* SEND BUTTON */
/* ===================================== */

#sendButton {
  position: fixed;

  top:
    calc(
      14px +
      env(safe-area-inset-top)
    );

  right:
    calc(
      118px +
      env(safe-area-inset-right)
    );

  z-index: 240;

  min-width: 86px;
  height: 56px;

  padding: 0 14px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border:
    1px solid
    rgba(90, 185, 255, 0.48);

  border-radius: 18px;

  color: #eef8ff;

  background:
    linear-gradient(
      180deg,
      rgba(24, 39, 55, 0.97),
      rgba(8, 18, 30, 0.98)
    );

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, 0.38),
    0 0 14px
    rgba(77, 174, 255, 0.10);

  cursor: pointer;
}

.sendButtonIcon {
  font-size: 18px;
}

.sendButtonText {
  font-size: 13px;
  font-weight: 750;
}


/* ===================================== */
/* SEND OVERLAY */
/* ===================================== */

#sendOverlay {
  position: fixed;
  inset: 0;

  z-index: 410;

  background:
    rgba(2, 6, 12, 0.70);

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.25s ease;
}

#sendOverlay.open {
  opacity: 1;
  pointer-events: auto;
}


/* ===================================== */
/* SEND PANEL */
/* ===================================== */

#sendPanel {
  position: fixed;

  left: 12px;
  right: 12px;

  bottom:
    calc(
      12px +
      env(safe-area-inset-bottom)
    );

  z-index: 420;

  max-height: 88%;

  padding: 16px;

  overflow-y: auto;
  overscroll-behavior: contain;

  color: white;

  background:
    linear-gradient(
      180deg,
      #0c1725,
      #07101b
    );

  border:
    1px solid
    rgba(100, 170, 225, 0.28);

  border-radius: 22px;

  box-shadow:
    0 24px 80px
    rgba(0, 0, 0, 0.70);

  transform:
    translateY(
      calc(100% + 80px)
    );

  transition:
    transform 0.32s
    cubic-bezier(
      0.18,
      0.89,
      0.32,
      1
    );

  touch-action: pan-y;
}

#sendPanel.open {
  transform: translateY(0);
}

.sendHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding-bottom: 13px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);
}

.sendHeader h3 {
  font-size: 22px;
}

#closeSend {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  border: none;
  border-radius: 50%;

  color: white;
  background: rgba(255, 255, 255, 0.07);

  font-size: 23px;
  cursor: pointer;
}

.sendFieldLabel {
  display: block;

  color: #7f9dbb;

  font-size: 10px;
  font-weight: 750;

  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sendLevelSection {
  margin-top: 14px;
}

.sendLevelOptions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;

  margin-top: 8px;
}

.sendLevelOption {
  position: relative;
  min-width: 0;
}

.sendLevelOption input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sendLevelOption span {
  min-height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(107, 159, 205, 0.20);

  border-radius: 13px;

  color: #9db5cb;
  background: rgba(255, 255, 255, 0.025);

  font-size: 15px;
  font-weight: 850;

  cursor: pointer;
}

.sendLevelOption input:checked + span {
  border-color: #56afff;

  color: #dff1ff;

  background:
    rgba(60, 154, 240, 0.13);

  box-shadow:
    0 0 15px
    rgba(71, 164, 255, 0.12);
}

.sendWebhookField {
  display: block;
  margin-top: 14px;
}

#webhookUrl {
  width: 100%;
  height: 46px;

  margin-top: 8px;

  padding: 0 13px;

  border:
    1px solid
    rgba(112, 160, 205, 0.20);

  border-radius: 13px;
  outline: none;

  color: white;
  background: rgba(255, 255, 255, 0.035);

  font-size: 16px;

  user-select: text;
  -webkit-user-select: text;
}

#webhookUrl:focus {
  border-color: rgba(83, 176, 255, 0.72);

  box-shadow:
    0 0 0 3px
    rgba(61, 161, 247, 0.08);
}

.sendWebhookField small {
  display: block;
  margin-top: 5px;

  color: #607d98;
  font-size: 10px;
}

.sendQualityCard {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 11px;
  align-items: center;

  margin-top: 14px;
  padding: 11px;

  border:
    1px solid
    rgba(91, 175, 242, 0.15);

  border-radius: 14px;

  background:
    rgba(65, 148, 215, 0.045);
}

.sendQualityIcon {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 13px;

  color: #dff4ff;
  background: rgba(65, 163, 239, 0.15);

  font-size: 16px;
  font-weight: 900;
}

.sendQualityCard strong {
  display: block;
  color: #e8f4ff;
  font-size: 13px;
}

.sendQualityCard p {
  margin-top: 3px;
  color: #7793ad;
  font-size: 10px;
  line-height: 1.4;
}

.sendMessageSection {
  margin-top: 14px;
}

.sendMessageHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#sendMessageLength {
  color: #607c96;
  font-size: 10px;
}

#sendMessagePreview {
  width: 100%;
  max-height: 190px;

  margin-top: 7px;
  padding: 11px;

  overflow: auto;

  border:
    1px solid
    rgba(111, 154, 195, 0.14);

  border-radius: 13px;

  color: #dbe9f6;
  background: rgba(0, 0, 0, 0.18);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size: 11px;
  line-height: 1.5;

  white-space: pre-wrap;
  word-break: break-word;

  user-select: text;
  -webkit-user-select: text;
}

#sendPreviewWrap {
  display: none;
  margin-top: 14px;
}

#sendPreviewWrap.visible {
  display: block;
}

#sendPreviewImage {
  display: block;

  width: 100%;
  height: auto;

  margin-top: 7px;

  border:
    1px solid
    rgba(99, 158, 207, 0.16);

  border-radius: 13px;

  background: #050910;
}

#sendStatus {
  display: none;

  margin-top: 12px;
  padding: 9px 11px;

  border-radius: 11px;

  color: #9ec5e8;
  background: rgba(80, 157, 220, 0.07);

  font-size: 11px;
  line-height: 1.4;
}

#sendStatus.visible {
  display: block;
}

#sendStatus.error {
  color: #ffaaa9;
  background: rgba(255, 75, 75, 0.07);
}

.sendActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;

  margin-top: 14px;
}

.sendActions .sendPrimaryButton {
  grid-column: 1 / -1;
}

.sendSecondaryButton,
.sendPrimaryButton {
  min-height: 46px;
  padding: 0 12px;

  border-radius: 13px;

  font-weight: 800;
  cursor: pointer;
}

.sendSecondaryButton {
  border:
    1px solid
    rgba(104, 161, 210, 0.24);

  color: #b9d2e8;
  background: rgba(255, 255, 255, 0.035);
}

.sendSecondaryButton:disabled {
  opacity: 0.38;
  cursor: default;
}

.sendPrimaryButton {
  border: none;

  color: #07121e;

  background:
    linear-gradient(
      180deg,
      #74c7ff,
      #3b9fea
    );
}

.sendPrimaryButton:disabled,
#previewMapButton:disabled {
  opacity: 0.50;
  cursor: wait;
}

@media (max-width: 380px) {
  #sendButton {
    top:
      calc(
        9px +
        env(safe-area-inset-top)
      );

    right:
      calc(
        74px +
        env(safe-area-inset-right)
      );

    min-width: 56px;
    padding: 0 11px;
  }

  .sendButtonText {
    display: none;
  }

  #sendPanel {
    left: 8px;
    right: 8px;
  }
}