.join-body {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  height: 100vh;
  height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

.join-app {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100vh;
  height: 100dvh;
  padding: calc(1.2rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right))
           calc(1.6rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
  user-select: none;
  -webkit-user-select: none;
}

.join-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.join-status {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--muted);
}
.conn-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger);
  flex: none;
}
.conn-dot.live { background: var(--accent-2); }

.my-snake {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 600;
  padding: .4rem .75rem;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.color-dot {
  width: 16px; height: 16px; border-radius: 50%;
  flex: none;
  background: var(--muted);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
}

.join-hint {
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  max-width: 22rem;
  margin: .75rem auto 0;
}

/* Pinned to the bottom of the screen so the pad sits in the thumb zone
   on a phone held with one hand, instead of floating mid-screen. */
.join-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}

.joy {
  display: grid;
  grid-template-columns: repeat(3, minmax(84px, 25vmin));
  grid-template-rows: repeat(2, minmax(84px, 25vmin));
  gap: .5rem;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.joy-btn {
  font-size: 1.8rem;
  border-radius: 18px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .06s ease, transform .06s ease;
}
.joy-btn:active,
.joy-btn.active {
  background: var(--accent);
  color: #08111f;
  transform: scale(.96);
}
.joy-up { grid-column: 2; grid-row: 1; }
.joy-left { grid-column: 1; grid-row: 2; }
.joy-right { grid-column: 3; grid-row: 2; }
.joy-down { grid-column: 2; grid-row: 2; }

.join-score { font-size: 1.05rem; font-weight: 600; }
.dead-tag { color: var(--running); font-weight: 500; font-size: .85rem; margin-left: .4rem; }

@media (orientation: landscape) and (max-height: 500px) {
  .join-app { padding-top: calc(.6rem + env(safe-area-inset-top)); padding-bottom: calc(.8rem + env(safe-area-inset-bottom)); }
  .join-hint { display: none; }
  .joy {
    grid-template-columns: repeat(3, minmax(64px, 19vmin));
    grid-template-rows: repeat(2, minmax(64px, 19vmin));
    gap: .4rem;
  }
  .join-score { font-size: .95rem; }
}