/* Tricky Towers — mp-lab styles */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: #0d1b3e;
  overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}

#game {
  position: absolute; inset: 0;
  margin: auto;
  display: block;
  background: #79c4ef;
}

/* ── Overlays ── */
.overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 27, 62, 0.78);
  z-index: 20;
}
.overlay.hidden, .hidden { display: none !important; }

.lobby-panel {
  background: linear-gradient(180deg, #2b4a8f 0%, #1c3468 100%);
  border: 4px solid #0d1b3e;
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.25);
  padding: 28px 34px;
  width: min(520px, 92vw);
  text-align: center;
  color: #eaf2ff;
}
.lobby-panel h1 {
  font-size: 42px; letter-spacing: 2px;
  color: #ffd23e;
  text-shadow: 3px 3px 0 #b3541e, -2px -2px 0 #7c3a12, 0 6px 12px rgba(0,0,0,0.4);
  margin-bottom: 6px;
}
.tagline { font-size: 14px; color: #bcd2f7; margin-bottom: 18px; }

.room-row {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  margin-bottom: 16px; font-weight: bold; color: #9fc0f5;
}
#room-code-input {
  width: 130px; text-align: center;
  font-size: 22px; font-weight: bold; letter-spacing: 4px;
  color: #ffd23e; background: #12244d;
  border: 3px solid #0d1b3e; border-radius: 10px;
  padding: 6px 4px;
}
#btn-copy {
  background: #3a6bc9; color: #fff; border: 3px solid #0d1b3e;
  border-radius: 10px; padding: 8px 12px; font-weight: bold; cursor: pointer;
}
#btn-copy:active { transform: translateY(2px); }

#lobby-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.slot {
  display: flex; align-items: center; gap: 8px;
  background: #12244d; border: 2px solid #0d1b3e; border-radius: 10px;
  padding: 8px 12px; font-size: 14px;
}
.slot .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #0d1b3e; flex: none; }
.dot.p1 { background: #4aa3ff; } .dot.p2 { background: #ff9f43; }
.dot.p3 { background: #5cd65c; } .dot.p4 { background: #e056fd; }
.slot-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-status { font-size: 12px; color: #8fb2e8; }
.slot-status.ready { color: #6fe86f; font-weight: bold; }

#lobby-hint { font-size: 12px; color: #8fb2e8; margin-bottom: 14px; }

#btn-ready {
  font-size: 24px; font-weight: bold; letter-spacing: 2px;
  color: #4a2c00; background: linear-gradient(180deg, #ffd23e, #f0a821);
  border: 4px solid #0d1b3e; border-radius: 14px;
  padding: 12px 46px; cursor: pointer;
  box-shadow: 0 5px 0 #b3541e;
}
#btn-ready:active { transform: translateY(3px); box-shadow: 0 2px 0 #b3541e; }
#btn-ready.is-ready { background: linear-gradient(180deg, #7be87b, #3fbf3f); box-shadow: 0 5px 0 #1e7a1e; color: #073807; }

#lobby-countdown { margin-top: 14px; }
#countdown-number { font-size: 54px; font-weight: bold; color: #ffd23e; text-shadow: 3px 3px 0 #b3541e; }

.controls-help { margin-top: 16px; font-size: 12px; color: #9fc0f5; line-height: 1.6; }

/* ── Connection banner ── */
#conn-banner {
  position: fixed; top: 0; left: 0; right: 0;
  background: #c0392b; color: #fff; font-weight: bold;
  text-align: center; padding: 8px; z-index: 50;
}

/* ── Toasts ── */
#toasts {
  position: fixed; top: 14px; right: 14px; z-index: 40;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  background: rgba(18, 36, 77, 0.94); color: #eaf2ff;
  border: 2px solid #3a6bc9; border-radius: 10px;
  padding: 9px 16px; font-size: 14px; font-weight: bold;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  animation: toast-in 0.25s ease-out;
  max-width: 320px;
}
.toast.warn { background: rgba(140, 30, 30, 0.96); border-color: #ff6b5e; }
@keyframes toast-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Touch controls ── */
#touch-controls {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-between;
  padding: 0 4vw calc(3vh + env(safe-area-inset-bottom));
  pointer-events: none;
}
.touch-group { display: flex; gap: 12px; pointer-events: auto; }
.tbtn {
  width: 64px; height: 64px;
  font-size: 26px; color: #fff;
  background: rgba(18, 36, 77, 0.55);
  border: 3px solid rgba(234, 242, 255, 0.55);
  border-radius: 50%;
  touch-action: none;
}
.tbtn:active, .tbtn.held { background: rgba(255, 210, 62, 0.65); color: #12244d; }

/* ── Corner buttons ── */
#corner-buttons { position: fixed; top: 10px; left: 10px; z-index: 35; display: flex; gap: 8px; }
#corner-buttons button {
  width: 40px; height: 40px; font-size: 18px;
  background: rgba(18, 36, 77, 0.6); color: #fff;
  border: 2px solid rgba(234, 242, 255, 0.4); border-radius: 10px;
  cursor: pointer;
}