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

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

body {
  background: radial-gradient(circle at 50% 30%, #1c2230 0%, #0d1016 70%, #070a0f 100%);
  color: #e6e9ef;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.room {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vw;
  padding: 2vh;
}

.phone {
  position: relative;
  height: min(92vh, 760px);
  max-width: 46vw;
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(160deg, #15181f, #0b0d12);
  border-radius: 8% / 4%;
  border: 0.4rem solid #2a2f3a;
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,0.7), inset 0 0 1.2rem rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex;
}

.phone.hidden { display: none; }

.notch {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 1.4rem;
  background: #05070a;
  border-radius: 1rem;
  z-index: 5;
}

.call-screen, .in-call {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 9% 7% 7%;
  gap: 2.2vh;
}

.in-call { display: none; justify-content: center; gap: 2.5vh; }

.phone.connected .call-screen { display: none; }
.phone.connected .in-call { display: flex; }

.call-label {
  margin-top: 1vh;
  font-size: 1rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #8a93a6;
}

.avatar {
  width: 46%;
  max-width: 11rem;
  border-radius: 50%;
  overflow: hidden;
  background: #20131a;
  box-shadow: 0 0 0 0.4rem rgba(255,255,255,0.06), 0 1rem 2rem rgba(0,0,0,0.5);
  animation: pulse 1.1s ease-in-out infinite;
}

.avatar svg { display: block; width: 100%; height: 100%; }
.avatar.small { width: 38%; animation: none; }
.avatar.laughing { animation: shake 0.18s linear infinite; }

@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0.4rem rgba(255,255,255,0.06), 0 1rem 2rem rgba(0,0,0,0.5); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 0.9rem rgba(120,180,255,0.12), 0 1rem 2.4rem rgba(0,0,0,0.6); }
}

@keyframes shake {
  0% { transform: translate(0.5px, -0.5px) rotate(-1deg); }
  50% { transform: translate(-0.5px, 0.5px) rotate(1deg); }
  100% { transform: translate(0.5px, 0.5px) rotate(-1deg); }
}

.caller-name {
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.caller-sub, .call-timer {
  font-size: 1rem;
  color: #9aa3b5;
}

.laugh-text {
  font-size: 1.3rem;
  font-weight: 700;
  color: #ff7a93;
  letter-spacing: 0.08em;
  text-shadow: 0 0 1rem rgba(255,80,110,0.4);
  animation: flicker 0.5s steps(2) infinite;
  min-height: 1.6rem;
  text-align: center;
}

@keyframes flicker { 50% { opacity: 0.55; } }

.actions {
  margin-top: auto;
  margin-bottom: 2vh;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  color: #cfd5e1;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
}

.btn .icon {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #fff;
}

.btn.answer .icon { background: #2ecc71; box-shadow: 0 0 1.4rem rgba(46,204,113,0.5); }
.btn.answer { animation: bob 1s ease-in-out infinite; }
.btn.decline .icon { background: #e74c3c; transform: rotate(135deg); }
.btn.decline .lbl, .btn.answer .lbl { color: #c7cdda; }
.btn.end .icon { background: #e74c3c; transform: rotate(135deg); }
.btn.end { margin-top: 1vh; }

.btn:active { transform: scale(0.94); }

@keyframes bob { 50% { transform: translateY(-0.4rem); } }