/* ===========================================================
   PHONE — CSS recreation of the BoulderBook app UI
   =========================================================== */

.phone {
  position: relative;
  width: min(330px, 84vw);
  margin-inline: auto;
  padding: 12px;
  border: var(--bw-thick) solid var(--pink);
  border-radius: 34px;
  background: var(--dark-deep);
  box-shadow: 10px 10px 0 var(--yellow), 0 0 50px rgba(239, 75, 137, 0.28);
}

.phone__notch {
  width: 96px;
  height: 20px;
  margin: 2px auto 10px;
  border-radius: var(--r-pill);
  background: #000;
}

.phone__screen {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 528px;
  border: var(--bw-thin) solid var(--dark-light);
  border-radius: 18px;
  background: var(--dark);
  overflow: hidden;
}

.phone__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: var(--bw-thin) solid var(--pink);
  background: var(--dark-deep);
}

.phone__top strong {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 900;
  color: var(--yellow);
}

.phone__bell {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: var(--bw-thin) solid var(--pink);
  border-radius: 50%;
  font-size: 12px;
}

.phone__view {
  padding: 12px;
  overflow: hidden;
  display: none;
}

.phone__view.is-active { display: block; animation: panel-in var(--slow) var(--ease); }

.phone__label {
  margin-bottom: 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* --- Feed cards --- */

.feed-card {
  padding: 10px 12px;
  margin-bottom: 9px;
  border: var(--bw-thin) solid var(--pink);
  border-radius: var(--r-lg);
  background: rgba(0, 0, 0, 0.22);
}

.feed-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

.avatar--b { background: linear-gradient(135deg, var(--yellow), var(--orange)); color: var(--dark-deep); }
.avatar--c { background: linear-gradient(135deg, var(--cyan), var(--purple)); color: var(--dark-deep); }

.feed-card__head strong { color: var(--pink); font-size: 12px; }

.feed-card__body {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--yellow);
}

.feed-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* --- Boulder detail --- */

.detail__img {
  height: 132px;
  border: var(--bw-thin) solid var(--white);
  border-radius: var(--r-lg);
  /* Route markers over a scatter of holds on plywood. */
  background:
    radial-gradient(circle at 30% 88%, transparent 7px, var(--green) 7px 9px, transparent 10px),
    radial-gradient(circle at 44% 66%, transparent 7px, var(--pink) 7px 9px, transparent 10px),
    radial-gradient(circle at 38% 44%, transparent 7px, var(--pink) 7px 9px, transparent 10px),
    radial-gradient(circle at 55% 26%, transparent 7px, var(--pink) 7px 9px, transparent 10px),
    radial-gradient(circle at 62% 10%, transparent 7px, var(--yellow) 7px 9px, transparent 10px),
    radial-gradient(circle at 30% 88%, #b7654a 0 4px, transparent 5px),
    radial-gradient(circle at 44% 66%, #6f7f5a 0 4px, transparent 5px),
    radial-gradient(circle at 38% 44%, #7a6b8c 0 4px, transparent 5px),
    radial-gradient(circle at 55% 26%, #a87a4d 0 4px, transparent 5px),
    radial-gradient(circle at 62% 10%, #5f7480 0 4px, transparent 5px),
    radial-gradient(circle at 12% 20%, #8d5f4a 0 4px, transparent 5px),
    radial-gradient(circle at 78% 38%, #6f7f5a 0 5px, transparent 6px),
    radial-gradient(circle at 88% 74%, #9c5f63 0 4px, transparent 5px),
    radial-gradient(circle at 18% 60%, #5f7480 0 5px, transparent 6px),
    radial-gradient(circle at 70% 84%, #a87a4d 0 4px, transparent 5px),
    radial-gradient(circle at 92% 18%, #7a6b8c 0 4px, transparent 5px),
    radial-gradient(circle at 8% 82%, #6b6b63 0 4px, transparent 5px),
    repeating-linear-gradient(92deg, #4b4740 0 9px, #55504a 9px 18px);
  position: relative;
}

.detail__img::after {
  content: 'PLASTIK 45 GRAD';
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.detail__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0 2px;
}

.detail__title h4 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 900;
  color: var(--yellow);
}

.detail__by {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

.detail__by b { color: var(--pink); }

.detail__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 10px 0;
}

.detail__stats div {
  padding: 7px 4px;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.35);
  text-align: center;
}

.detail__stats b {
  display: block;
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--pink);
}

.detail__stats div:nth-child(2) b { color: var(--yellow); }
.detail__stats div:nth-child(3) b { color: var(--cyan); }

.detail__stats small {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
}

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

.detail__actions button {
  padding: 9px 4px;
  border: var(--bw-thin) solid var(--yellow);
  border-radius: var(--r-lg);
  background: var(--pink);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
}

.detail__actions button + button {
  border-color: var(--cyan);
  background: transparent;
  color: var(--cyan);
}

/* --- Ranking --- */

.rank-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px dashed var(--dark-light);
  font-size: 12px;
}

.rank-row b { font-family: var(--font-display); color: var(--dark-lighter); text-align: center; }
.rank-row:nth-child(2) b { color: var(--yellow); }
.rank-row:nth-child(3) b { color: var(--white); }
.rank-row:nth-child(4) b { color: var(--orange); }
.rank-row em { font-style: normal; font-family: var(--font-mono); color: var(--cyan); font-size: 11px; }

/* --- Tab bar --- */

.phone__tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: var(--bw-thin) solid var(--pink);
  background: var(--dark-deep);
}

.phone__tabs span {
  padding: 9px 2px;
  color: var(--dark-lighter);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.phone__tabs span.is-on { color: var(--yellow); text-shadow: var(--glow-yellow); }