/* Math Tower — Web Multiplayer Join System & 2D Online Players Page */

/* ---- Join bar on the 1st page (Start screen) ---- */
.start-mp-bar {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px dashed rgba(29, 27, 51, 0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.btn-mp-join {
  width: 100%;
  background: linear-gradient(180deg, #38b6ff 0%, #1d8fe8 100%);
  color: #fff;
  border: 3px solid var(--ink, #1d1b33);
  border-radius: 18px;
  padding: 13px 20px;
  font-family: var(--font-head, 'Lilita One', cursive);
  font-size: 1.32rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 5px 0 var(--ink, #1d1b33), 0 10px 22px rgba(29, 143, 232, 0.28);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.btn-mp-join:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--ink, #1d1b33), 0 14px 26px rgba(29, 143, 232, 0.35);
}

.btn-mp-join:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--ink, #1d1b33);
}

.mp-online-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 3px 11px;
  font-family: var(--font-body, 'Baloo 2', sans-serif);
  font-size: 0.86rem;
  font-weight: 800;
  color: #fff;
}

.mp-online-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #35f27c;
  box-shadow: 0 0 8px #35f27c;
  animation: mpPulse 1.5s infinite ease-in-out;
}

@keyframes mpPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.28); opacity: 0.72; }
}

/* ---- 2D Online Players Page (#screen-join) ---- */
.screen-join {
  position: fixed;
  inset: 0;
  z-index: 68;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 224, 102, 0.48) 0%, transparent 40%),
    radial-gradient(circle at 82% 20%, rgba(124, 92, 255, 0.32) 0%, transparent 45%),
    linear-gradient(180deg, #2799f6 0%, #58c7ff 48%, #a6ebff 78%, #7be082 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 14px 36px;
}

.screen-join[hidden] {
  display: none !important;
}

.join-wrap {
  width: min(680px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 2;
}

.join-card {
  background: #fffdf7;
  border: 4px solid var(--ink, #1d1b33);
  border-radius: 26px;
  box-shadow: 0 10px 0 var(--ink, #1d1b33), 0 18px 40px rgba(29, 27, 51, 0.25);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.join-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.join-title-badge {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(180deg, #38b6ff, #1d8fe8);
  border: 3px solid var(--ink, #1d1b33);
  box-shadow: 0 4px 0 var(--ink, #1d1b33);
  color: #fff;
  display: grid;
  place-items: center;
}

.join-title {
  margin: 0;
  font-family: var(--font-head, 'Lilita One', cursive);
  font-size: clamp(1.5rem, 3.8vw, 2.05rem);
  color: var(--ink, #1d1b33);
  line-height: 1.05;
}

.join-sub {
  margin: 2px 0 0;
  font-size: 0.96rem;
  font-weight: 700;
  color: #4f4b6b;
}

/* Your identity bar at top of the 2D Join page */
.join-me-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #eef8ff 0%, #f5f0ff 100%);
  border: 3px solid var(--ink, #1d1b33);
  border-radius: 18px;
  padding: 12px 15px;
}

.join-me-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.join-me-thumb {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff;
  border: 2.5px solid var(--ink, #1d1b33);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.join-me-thumb canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.join-me-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.join-me-label {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5b567a;
}

.join-me-name {
  font-family: var(--font-head, 'Lilita One', cursive);
  font-size: 1.32rem;
  color: var(--ink, #1d1b33);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.join-me-switch {
  display: flex;
  align-items: center;
  gap: 6px;
}

.join-me-select {
  font-family: var(--font-body, 'Baloo 2', sans-serif);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--ink, #1d1b33);
  background: #fff;
  border: 2.5px solid var(--ink, #1d1b33);
  border-radius: 12px;
  padding: 6px 10px;
  cursor: pointer;
}

/* Online players section */
.join-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.join-section-title {
  margin: 0;
  font-family: var(--font-head, 'Lilita One', cursive);
  font-size: 1.22rem;
  color: var(--ink, #1d1b33);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.join-net-status {
  font-size: 0.84rem;
  font-weight: 800;
  color: #16794b;
  background: #dcfce7;
  border: 2px solid #22c55e;
  border-radius: 999px;
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.join-net-status.is-connecting {
  color: #9a5b00;
  background: #fef3c7;
  border-color: #f59e0b;
}

.mp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 110px;
}

.mp-empty {
  text-align: center;
  padding: 24px 16px;
  background: #f8fafc;
  border: 2.5px dashed #cbd5e1;
  border-radius: 18px;
  color: #475569;
  font-weight: 700;
}

.mp-empty b {
  display: block;
  font-size: 1.08rem;
  color: var(--ink, #1d1b33);
  margin-bottom: 4px;
}

.mp-card {
  background: #fff;
  border: 3px solid var(--ink, #1d1b33);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 5px 0 var(--ink, #1d1b33);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.mp-card.is-selected {
  background: #f0f9ff;
  border-color: #0284c7;
}

.mp-card-main {
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.mp-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mp-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(180deg, #e0f2fe, #bae6fd);
  border: 2.5px solid var(--ink, #1d1b33);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.mp-card-avatar canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.mp-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mp-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mp-card-name {
  font-family: var(--font-head, 'Lilita One', cursive);
  font-size: 1.25rem;
  color: var(--ink, #1d1b33);
}

.mp-card-sub {
  font-size: 0.88rem;
  font-weight: 700;
  color: #555070;
}

.mp-card-tap-pill {
  background: #eff6ff;
  border: 2px solid var(--ink, #1d1b33);
  border-radius: 12px;
  padding: 6px 12px;
  font-weight: 800;
  font-size: 0.9rem;
  color: #1d4ed8;
  flex-shrink: 0;
}

/* Expanded Join or Cancel options when clicking a player's name */
.mp-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 2px dashed rgba(29, 27, 51, 0.15);
  animation: mpFadeIn 0.15s ease-out;
}

@keyframes mpFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.mp-card-prompt {
  font-weight: 800;
  font-size: 0.96rem;
  color: var(--ink, #1d1b33);
}

.mp-card-btns {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Green Accept / Join button & Red Deny / Cancel button */
.mp-btn-accept {
  background: linear-gradient(180deg, #25d366 0%, #16a34a 100%) !important;
  color: #fff !important;
  border: 3px solid var(--ink, #1d1b33) !important;
  border-radius: 14px !important;
  padding: 9px 18px !important;
  font-family: var(--font-head, 'Lilita One', cursive) !important;
  font-size: 1.08rem !important;
  box-shadow: 0 4px 0 var(--ink, #1d1b33) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer !important;
}

.mp-btn-accept:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.mp-btn-accept:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ink, #1d1b33) !important;
}

.mp-btn-deny {
  background: linear-gradient(180deg, #ff5b5b 0%, #dc2626 100%) !important;
  color: #fff !important;
  border: 3px solid var(--ink, #1d1b33) !important;
  border-radius: 14px !important;
  padding: 9px 18px !important;
  font-family: var(--font-head, 'Lilita One', cursive) !important;
  font-size: 1.08rem !important;
  box-shadow: 0 4px 0 var(--ink, #1d1b33) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer !important;
}

.mp-btn-deny:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.mp-btn-deny:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ink, #1d1b33) !important;
}

/* Waiting state when requesting to join someone */
.mp-waiting-box {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 3px solid var(--ink, #1d1b33);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: 0 5px 0 var(--ink, #1d1b33);
}

.mp-waiting-text {
  font-weight: 800;
  color: var(--ink, #1d1b33);
  font-size: 1rem;
}

.mp-waiting-text small {
  display: block;
  font-size: 0.85rem;
  color: #78350f;
}

/* Invite link box on the 2D Join screen */
.join-invite-box {
  background: #f8fafc;
  border: 2.5px solid var(--ink, #1d1b33);
  border-radius: 18px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.join-invite-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.join-invite-head b {
  font-family: var(--font-head, 'Lilita One', cursive);
  font-size: 1.05rem;
  color: var(--ink, #1d1b33);
}

.join-invite-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.join-invite-input {
  flex: 1 1 200px;
  font-family: monospace;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 11px;
  border-radius: 12px;
  border: 2px solid #94a3b8;
  background: #fff;
  color: var(--ink, #1d1b33);
}

/* ---- Incoming Join Request Popup (Green Accept / Red Deny) ---- */
.mp-invite-layer {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  width: min(460px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.mp-invite-card {
  pointer-events: auto;
  background: #fffdf7;
  border: 4px solid var(--ink, #1d1b33);
  border-radius: 22px;
  padding: 15px 18px;
  box-shadow: 0 9px 0 var(--ink, #1d1b33), 0 16px 36px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: mpPopIn 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes mpPopIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mp-invite-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mp-invite-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fde047, #facc15);
  border: 3px solid var(--ink, #1d1b33);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mp-invite-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mp-invite-title {
  font-family: var(--font-head, 'Lilita One', cursive);
  font-size: 1.24rem;
  color: var(--ink, #1d1b33);
}

.mp-invite-sub {
  font-size: 0.9rem;
  font-weight: 700;
  color: #4b5563;
}

.mp-invite-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* ---- In-World Multiplayer HUD Bar (Wave / Jump / Leave back to own world) ---- */
.mp-hud-bar {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 44;
  background: rgba(255, 253, 247, 0.95);
  border: 3px solid var(--ink, #1d1b33);
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: 0 5px 0 var(--ink, #1d1b33), 0 8px 20px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: calc(100vw - 24px);
}

.mp-hud-bar[hidden] {
  display: none !important;
}

.mp-hud-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--ink, #1d1b33);
  padding: 0 6px;
}

.mp-hud-emote {
  background: #f1f5f9;
  border: 2px solid var(--ink, #1d1b33);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: 0.84rem;
  color: var(--ink, #1d1b33);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mp-hud-emote:hover {
  background: #e2e8f0;
}

.mp-hud-leave {
  background: linear-gradient(180deg, #ff5b5b 0%, #dc2626 100%);
  color: #fff;
  border: 2px solid var(--ink, #1d1b33);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--font-head, 'Lilita One', cursive);
  font-size: 0.88rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mp-hud-btn-top {
  background: linear-gradient(180deg, #38b6ff 0%, #1d8fe8 100%) !important;
  color: #fff !important;
}