/* ==========================================================================
   Fonts: free, open-license files in fonts/ (each license sits next to it).
   Served from our own folder, so phones never contact Google.
   ========================================================================== */
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Bungee"; src: url("fonts/bungee.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url("fonts/press-start-2p.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("fonts/permanent-marker.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Patrick Hand"; src: url("fonts/patrick-hand.woff2") format("woff2"); font-display: swap; }

/* ==========================================================================
   Kid style: a modern take on the early internet.
   Bright colors, chunky ink borders, hard shadows, stickers.
   ========================================================================== */
:root {
  --ink: #1d1135;
  --paper: #fff7e6;
  --pink: #ff4fa3;
  --sky: #7cc4ff;
  --lime: #9be32d;
  --sun: #ffd23f;
  --purple: #b18cff;
  --red: #ff5a5a;
  --green: #3ddc7c;
  --line: 3px solid var(--ink);
  --pop: 4px 4px 0 var(--ink);
  --pressed: 1px 1px 0 var(--ink);
  --body-font: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --display-font: "Bungee", Impact, sans-serif;
  --pixel-font: "Press Start 2P", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  font-family: var(--body-font);
  color: var(--ink);
  background: radial-gradient(var(--ink) 1.4px, transparent 1.6px) 0 0 / 22px 22px, var(--sun);
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }

/* The phone frame: centered on a laptop, full screen on a phone. */
.phone {
  position: relative;
  flex: none;
  width: 390px;
  height: calc(100vh - 32px);
  height: min(844px, calc(100dvh - 32px));
  border: 10px solid var(--ink);
  border-radius: 44px;
  box-shadow: 10px 10px 0 var(--ink);
  background: var(--paper);
  overflow: hidden;
}
.screen {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 18px 28px;
}
@media (max-width: 500px) {
  body:not([data-style="kid"]) { display: block; background: var(--paper); }
  body:not([data-style="kid"]) .phone { width: 100%; height: 100vh; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  body:not([data-style="kid"]) .screen {
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: calc(44px + env(safe-area-inset-bottom)); /* room for the interviewer corner button */
  }
}

/* Name test: nothing on the page but the logo. Even the phone frame disappears. */
body[data-style="bare"] { background: #fff; }
body[data-style="bare"] .phone { background: #fff; border-color: transparent; box-shadow: none; }
.name-test { flex: 1; display: grid; place-items: center; }

/* Logo: the name, whatever it is, on a sticker burst. No phone icon on purpose. */
.logo { position: relative; isolation: isolate; display: inline-grid; place-items: center; padding: 44px 34px; }
.logo-burst {
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink))
    drop-shadow(0 -3px 0 var(--ink)) drop-shadow(6px 6px 0 var(--ink));
}
.logo-burst::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sun);
  clip-path: polygon(50% 0%, 57.8% 10.8%, 69.1% 3.8%, 72.2% 16.7%, 85.4% 14.6%, 83.3% 27.8%, 96.2% 30.9%, 89.2% 42.2%,
    100% 50%, 89.2% 57.8%, 96.2% 69.1%, 83.3% 72.2%, 85.4% 85.4%, 72.2% 83.3%, 69.1% 96.2%, 57.8% 89.2%, 50% 100%,
    42.2% 89.2%, 30.9% 96.2%, 27.8% 83.3%, 14.6% 85.4%, 16.7% 72.2%, 3.8% 69.1%, 10.8% 57.8%, 0% 50%, 10.8% 42.2%,
    3.8% 30.9%, 16.7% 27.8%, 14.6% 14.6%, 27.8% 16.7%, 30.9% 3.8%, 42.2% 10.8%);
}
.logo-word {
  font-family: var(--display-font);
  font-size: clamp(2rem, 10vw, 2.7rem);
  white-space: nowrap;
  color: var(--pink);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-5deg);
}

/* ---------- Calling card (card.js) ---------- */
.card {
  position: relative;
  display: grid;
  place-items: center;
  gap: 10px;
  overflow: hidden;
  border: var(--line);
  border-radius: 22px;
  box-shadow: var(--pop);
  text-align: center;
}
.card-full { min-height: 210px; padding: 28px 16px 20px; }
.card-sticker {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 3.2rem;
  line-height: 1;
  transform: rotate(12deg);
  filter: drop-shadow(2px 2px 0 var(--ink));
}
.card-name {
  max-width: 85%;
  padding: 4px 14px;
  border: var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: calc(2rem * var(--name-scale, 1));
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
  transform: rotate(-2deg);
}
.card-status {
  padding: 4px 12px;
  border: var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}
.status-available { --dot: var(--green); }
.status-busy { --dot: var(--sun); }
.status-away { --dot: var(--purple); }

.card-photo { display: block; width: 1.5em; height: 1.5em; border: 3px solid var(--ink); border-radius: 50%; object-fit: cover; background: #fff; }
/* On a full card (her call screen) a grown-up's photo is the big thing, so she knows who's calling */
.card-full.with-photo .card-sticker { position: static; transform: none; font-size: 5rem; }

.card-tile { grid-template-columns: auto 1fr; justify-items: start; gap: 6px 12px; padding: 12px 14px; text-align: left; }
.card-tile .card-sticker { position: static; grid-row: span 2; font-size: 2.4rem; transform: none; }
.card-tile .card-name { font-size: calc(1.3rem * var(--name-scale, 1)); transform: none; }
.card-tile .card-status { font-size: 0.85rem; }

/* ---------- Shared kid parts ---------- */
.chunky {
  min-height: 56px;
  padding: 10px 18px;
  border: var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--pop);
  font-size: 1.15rem;
  font-weight: 600;
  transition: transform 0.08s, box-shadow 0.08s;
}
.chunky:active, .chunky[aria-checked="true"] { transform: translate(3px, 3px); box-shadow: var(--pressed); }
.big { width: 100%; min-height: 68px; font-size: 1.35rem; }
.back { min-width: 56px; padding: 0; font-size: 1.6rem; }
.bar { display: flex; align-items: center; gap: 14px; }
.bar h1 { margin: 0; font-family: var(--display-font); font-size: 1.6rem; font-weight: 400; text-shadow: 2px 2px 0 var(--pink); }
.field {
  width: 100%;
  min-height: 54px;
  padding: 10px 14px;
  border: var(--line);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: 1.15rem; /* 16px or more stops iPhone from zooming in */
  color: var(--ink);
}
.hint { margin: -4px 0 10px; font-size: 0.95rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Customize ---------- */
.pick h2 { margin: 0 0 10px; font-family: var(--display-font); font-size: 1rem; font-weight: 400; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px; }
.opts-font, .opts-ringtone { grid-template-columns: 1fr 1fr; }
.opt {
  min-height: 60px;
  padding: 6px;
  border: var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 1.7rem;
}
.opts-font .opt { font-size: 1.1rem; }
.opts-ringtone .opt { font-size: 1rem; font-weight: 600; }
.opt[aria-pressed="true"], .opt[aria-checked="true"] {
  background: var(--sun);
  outline: 4px solid var(--pink);
  outline-offset: 2px;
  transform: rotate(-3deg);
}
.swatch { display: block; height: 46px; border: 2px solid var(--ink); border-radius: 9px; }
.count { margin: 6px 0 0; text-align: right; font-weight: 600; }

/* ---------- Idle ---------- */
.avail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.avail .chunky { display: grid; place-items: center; gap: 2px; padding: 8px 4px; font-size: 1.05rem; }
.avail-icon { font-size: 1.6rem; line-height: 1; }
.avail [aria-checked="true"] { background: var(--dot); }
.hub { display: grid; gap: 14px; margin-top: auto; }
.hub .chunky:nth-child(1) { background: var(--pink); }
.hub .chunky:nth-child(2) { background: var(--sky); }
.hub .chunky:nth-child(3) { background: var(--lime); }

/* ---------- Friends ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile { display: block; width: 100%; padding: 0; border: 0; border-radius: 22px; background: none; text-align: inherit; }
.tile .card { transition: transform 0.08s, box-shadow 0.08s; }
.tile:active .card { transform: translate(3px, 3px); box-shadow: var(--pressed); }
.sub { margin: 8px 0 0; font-family: var(--display-font); font-size: 1.1rem; font-weight: 400; }
.bubble {
  margin: 0;
  padding: 12px 16px;
  border: var(--line);
  border-radius: 16px;
  background: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}
.leave { margin-top: auto; background: var(--lime); }

/* ---------- Calls ---------- */
.call-title { margin: 8px 0 0; font-family: var(--display-font); font-size: 1.5rem; text-align: center; }
.ringing .card { animation: shake 0.45s ease-in-out infinite; }
@keyframes shake {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg) translateY(-4px); }
}
.timer { margin: 0; font-family: var(--pixel-font); font-size: 1.8rem; text-align: center; }
.call-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; margin-top: auto; }
.answer { background: var(--green); }
.hang-up { background: var(--red); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Voice notes ---------- */
.notes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.note {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 12px 14px;
  border: var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--pop);
  text-align: left;
}
.note:active { transform: translate(3px, 3px); box-shadow: var(--pressed); }
.note-sticker { font-size: 2.2rem; }
.note-body { flex: 1; display: grid; gap: 4px; }
.note-meta { font-size: 0.85rem; opacity: 0.75; }
.note-text { font-style: italic; }
.note-bar { height: 10px; overflow: hidden; border: 2px solid var(--ink); border-radius: 5px; background: var(--paper); }
.note-bar i { display: block; width: 0; height: 100%; background: var(--pink); }
.playing .note-bar i { animation: fill var(--secs) linear forwards; }
@keyframes fill { to { width: 100%; } }

/* The blinking "new" light, like an answering machine */
.light {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--red);
  vertical-align: middle;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { background: #fff; } }

.record { display: grid; gap: 12px; margin-top: auto; padding-top: 8px; }
.to { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 4px 8px; }
.to .opt { flex: none; min-width: 76px; font-size: 1rem; font-weight: 600; }
.hold {
  min-height: 96px;
  border: var(--line);
  border-radius: 999px;
  background: var(--red);
  box-shadow: var(--pop);
  font-family: var(--display-font);
  font-size: 1.3rem;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none; /* no iPhone long-press menu */
  touch-action: none;
}
.hold.recording { transform: translate(3px, 3px); box-shadow: var(--pressed); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { background: #ff9a9a; } }
.hold-status { min-height: 1.5em; margin: 0; font-weight: 600; text-align: center; }

/* ==========================================================================
   Family style: calm and plain, like any well-made settings page.
   Used for the family view and the growth path.
   ========================================================================== */
body[data-style="calm"] { background: #e9ecf0; }
body[data-style="calm"] .phone { background: #f6f7f9; }
@media (min-width: 501px) {
  body[data-style="calm"] .phone { border: 8px solid #2b2f36; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18); }
}
body[data-style="calm"] .screen {
  gap: 14px;
  padding-bottom: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f2933;
}
.fam-head h1 { margin: 0; font-size: 1.5rem; }
.fam-brand { margin: 0 0 4px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; }
.fam-card { padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.fam-card h2 { margin: 0 0 10px; font-size: 1rem; }
.fam-card p { margin: 6px 0 0; }
.fam-hint { margin: 8px 0 0; font-size: 0.9rem; color: #6b7280; }
.fam-list { margin: 8px 0 0; padding: 0; list-style: none; }
.fam-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-top: 1px solid #eef0f2; }
.fam-list li:first-child { border-top: 0; }
.row { display: flex; flex: 1; align-items: center; justify-content: space-between; min-height: 48px; }
.log-who { display: grid; }
.log-who small { color: #6b7280; }
.missed { color: #b91c1c; font-weight: 600; }
.times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.times label { display: grid; gap: 4px; font-size: 0.9rem; color: #4b5563; }
.times input { min-height: 44px; padding: 0 10px; border: 1px solid #d1d5db; border-radius: 10px; font: inherit; font-size: 1rem; background: #fff; }
.fam-btn { min-height: 48px; padding: 0 16px; border: 1px solid #d1d5db; border-radius: 12px; background: #fff; font-weight: 600; }
.fam-btn.primary { width: 100%; margin-top: 12px; border-color: #2563eb; background: #2563eb; color: #fff; }
.fam-btn.danger { border-color: #fca5a5; color: #b91c1c; }
#mom .card { box-shadow: 2px 2px 0 var(--ink); }

/* An on/off switch made from a plain checkbox */
input[role="switch"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  margin: 0;
  border-radius: 999px;
  background: #d1d5db;
  cursor: pointer;
  transition: background 0.15s;
}
input[role="switch"]::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
input[role="switch"]:checked { background: #22c55e; }
input[role="switch"]:checked::before { transform: translateX(20px); }
input[role="switch"]:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

/* The 911 note stays pinned to the bottom of the family view */
.no-911 {
  position: sticky;
  bottom: 0;
  margin: auto -18px 0;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #e5e7eb;
  background: rgba(246, 247, 249, 0.96);
  font-size: 0.85rem;
  text-align: center;
  color: #374151;
}

/* ---------- Growth path ---------- */
.stages { margin: 0; padding: 0 0 24px; list-style: none; }
.stage { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding-bottom: 14px; }
.stage:not(:last-child)::before { content: ""; position: absolute; top: 44px; bottom: 0; left: 21px; width: 2px; background: #d1d5db; }
.stage-dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--stage); font-size: 1.3rem; }
.badge { margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: #f3f4f6; font-size: 0.72rem; color: #4b5563; vertical-align: 2px; }
.badge.now { background: #dcfce7; color: #166534; }

/* ==========================================================================
   Interviewer menu: plain on purpose. Only the interviewer uses it.
   On a laptop it sits beside the phone. On a phone, and during the name test
   (which must show nothing but the logo), it's a drawer behind the corner dot.
   ========================================================================== */
.panel-btn { position: fixed; right: 0; bottom: 0; z-index: 10; width: 44px; height: 44px; padding: 0; border: 0; background: none; }
.panel-btn::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 10px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.18); }
.panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: min(320px, 88vw);
  overflow-y: auto;
  padding: 16px;
  background: #fff;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #111827;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.2s, visibility 0.2s;
}
body.panel-open .panel { transform: none; visibility: visible; }
body.panel-open .panel-btn { display: none; }
@media (min-width: 1200px) {
  body:not([data-style="bare"]) .panel {
    position: static;
    flex: none;
    width: 300px;
    max-height: min(844px, calc(100dvh - 32px));
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transform: none;
    visibility: visible;
    transition: none;
  }
  body:not([data-style="bare"]) .panel-btn, body:not([data-style="bare"]) .panel-close { display: none; }
}
.panel-head { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin-bottom: 10px; }
.panel h2 { margin: 0; font-size: 1.1rem; }
.panel fieldset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 10px 12px 12px; border: 1px solid #e5e7eb; border-radius: 10px; }
.panel legend { padding: 0 4px; font-weight: 600; }
.panel label { display: flex; align-items: center; gap: 6px; min-height: 40px; margin-right: 8px; }
.panel button, .panel select { min-height: 40px; padding: 0 12px; border: 1px solid #d1d5db; border-radius: 8px; background: #f9fafb; font: inherit; }
.panel [aria-current="true"] { border-color: #111827; background: #111827; color: #fff; }
.panel textarea { width: 100%; height: 170px; padding: 8px; border: 1px solid #d1d5db; border-radius: 8px; font: 12px/1.45 ui-monospace, Menlo, monospace; }
.panel .danger { width: 100%; border-color: #fca5a5; color: #b91c1c; }
.panel-note { margin: 10px 0 0; font-size: 0.85rem; color: #6b7280; text-align: center; }
.fam-card .fam-btn { margin-top: 12px; }
.fam-card .fam-btn:not(.primary) { width: 100%; }

/* ==========================================================================
   Stages 3–5: clickable sketches for interviews
   ========================================================================== */
/* More hub buttons as stages unlock: two per row, Friends stays full width */
.hub-many { grid-template-columns: 1fr 1fr; }
.hub-many.hub-odd > :first-child { grid-column: span 2; } /* an odd count: Friends gets a row of its own */
.hub-many { gap: 10px; }
.hub-many .big { min-height: 50px; padding: 0 8px; font-size: 1.05rem; white-space: nowrap; } /* the light stays beside the word */
.hub-many .light { margin-left: 4px; }
.hub .chunky:nth-child(4) { background: var(--sun); }
.hub .chunky:nth-child(5) { background: var(--purple); }
.hub .chunky:nth-child(6) { background: var(--green); }
.chunky:disabled { opacity: 0.5; cursor: not-allowed; }

/* Stage 3: living status (a sticker, a mood, or a song), and quiet hours */
.card-living, .card-credit { padding: 3px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--sun); font-size: 0.85rem; font-weight: 600; }
.card-credit { background: #fff; font-size: 0.75rem; }
.card-tile .card-sticker { grid-row: span 4; }
.label { margin: 0 0 -6px; font-weight: 600; }
.living { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.living .opt { position: relative; min-height: 38px; padding: 2px; font-size: 1.2rem; }
.living [data-living^="song:"]::after { content: "♪"; position: absolute; right: 4px; bottom: 0; font-size: 0.75rem; font-weight: 700; }
.quiet { background: #2a1b5e; color: #fff; }

/* Stage 4: postcards */
.postcards { display: grid; gap: 16px; }
.postcards .postcard:nth-child(odd) { transform: rotate(-1deg); }
.postcards .postcard:nth-child(even) { transform: rotate(1deg); }
.postcard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-height: 110px;
  padding: 14px;
  border: var(--line);
  border-radius: 6px;
  box-shadow: var(--pop);
}
.postcard-sticker { font-size: 3.2rem; filter: drop-shadow(2px 2px 0 var(--ink)); }
.postcard-art { flex: 1 1 140px; max-width: 220px; border: 3px solid var(--ink); border-radius: 8px; background: #fff; }
.postcard-voice, .postcard-empty { padding: 6px 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 600; }
.postcard-empty { border-style: dashed; font-size: 0.9rem; }
.postcard-from { margin-left: auto; padding: 2px 8px; border: 2px dashed var(--ink); background: #fff; font-size: 0.8rem; font-weight: 600; transform: rotate(3deg); }
.send { background: var(--pink); }

/* Stage 5: friends-only page */
.homepage { padding: 14px; border: var(--line); border-radius: 8px; box-shadow: var(--pop); }
.homepage-window { display: grid; gap: 8px; padding: 14px; border: var(--line); border-top-width: 16px; border-radius: 6px; background: #fff; }
.homepage-title { margin: 0; font-size: 1.4rem; text-align: center; }
.homepage h3 { margin: 6px 0 0; font-family: var(--display-font); font-size: 0.9rem; font-weight: 400; text-decoration: underline wavy var(--pink); }
.homepage-foot { margin: 6px 0 0; padding-top: 8px; border-top: 2px dashed var(--ink); font-size: 0.8rem; text-align: center; }
textarea.field { min-height: 90px; resize: none; }
.stage-era { margin: -4px 0 0; font-size: 0.85rem; font-style: italic; color: #6b7280; }
.panel small { color: #6b7280; }
.panel-stage { flex-basis: 100%; padding: 10px 12px; border-radius: 8px; background: #f3f4f6; font-size: 0.88rem; }
.panel-stage p { margin: 0 0 6px; }
.panel-stage p:last-child { margin: 0; }

/* ==========================================================================
   The home phone: the kid's device drawn as a product on a desk (about $150–200).
   A desk phone first: the handset lies across the top, speed-dial keys and a
   push-to-talk button sit beside a small (about 5-inch) screen. Cheap on purpose:
   a wired handset, a small touchscreen, a few plain buttons, wall power, no battery.
   ========================================================================== */
.device { display: contents; } /* parent screens: just the phone */
.cradle, .cord, .keys, .chin, .turn-hint { display: none; }

body[data-style="kid"] .device {
  --shell: #7cc4ff;
  --shell-deep: #4f9fe6;
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: 170px auto 170px;
  grid-template-areas: "cradle cradle cradle" "left screen right" "chin chin chin";
  align-items: center;
  column-gap: 30px;
  margin: 76px 0 26px; /* room for the handset on top and the base below */
  padding: 0 36px 16px;
  border: 4px solid var(--ink);
  border-radius: 150px 150px 44px 44px / 96px 96px 44px 44px;
  background: var(--shell);
  box-shadow: 10px 10px 0 var(--ink);
}
body[data-style="kid"] .device::after { /* the base it sits on */
  content: "";
  position: absolute;
  z-index: -1;
  right: 8%;
  bottom: -26px;
  left: 8%;
  height: 26px;
  border: 4px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: var(--shell-deep);
}

/* The cradle, and the handset lying across it */
body[data-style="kid"] .cradle { display: block; position: relative; grid-area: cradle; height: 56px; }
.cradle::before, .cradle::after { /* the two prongs the handset rests on */
  content: "";
  position: absolute;
  top: -10px;
  width: 120px;
  height: 34px;
  border: 4px solid var(--ink);
  border-radius: 0 0 18px 18px;
  background: var(--shell-deep);
}
.cradle::before { left: calc(50% - 360px); }
.cradle::after { right: calc(50% - 360px); }
.handset {
  position: absolute;
  z-index: 2;
  top: -72px;
  right: 0;
  left: 0;
  width: 840px;
  height: 120px;
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  transition: transform 0.25s;
}
.handset span { position: absolute; top: 0; bottom: 0; margin: auto 0; border: 4px solid var(--ink); background: var(--pink); }
.handset-ear, .handset-mouth { width: 178px; height: 120px; box-shadow: 4px 4px 0 var(--ink); }
.handset-ear {
  left: 0;
  border-radius: 60px 32px 32px 60px / 60px;
  background: radial-gradient(circle, var(--ink) 2.5px, transparent 3px) 6px 6px / 16px 16px, var(--pink);
}
.handset-mouth { right: 0; border-radius: 32px 60px 60px 32px / 60px; }
.handset-grip { z-index: -1; right: 140px; left: 140px; height: 60px; border-radius: 30px; }
.handset:focus-visible { outline-offset: 8px; }
body.handset-up .handset { transform: translateY(-56px) rotate(-5deg); }
body.ringing-in .handset { animation: jiggle 0.4s ease-in-out infinite; }
@keyframes jiggle {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg) translateY(-8px); }
}
body[data-style="kid"] .cord { /* coiled, from the mouthpiece down the side */
  display: block;
  position: absolute;
  z-index: 1;
  top: -6px;
  right: -22px;
  width: 18px;
  height: 250px;
  border: 3px solid var(--ink);
  border-radius: 9px;
  background: repeating-linear-gradient(165deg, var(--ink) 0 3px, var(--pink) 3px 9px);
}

/* The screen: about 5 inches. Kid screens are laid out at 720 × 450 and drawn at three-quarter size. */
body[data-style="kid"] .phone { grid-area: screen; width: 564px; height: 362px; border-width: 12px; border-radius: 18px; box-shadow: none; }
body[data-style="kid"] .screen { width: 720px; height: 450px; gap: 14px; padding: 16px 18px; transform: scale(0.75); transform-origin: 0 0; }

/* Landscape screens: a header, then two columns that scroll on their own */
.split { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-height: 0; }
.col { display: flex; flex-direction: column; gap: 14px; min-height: 0; margin: -8px; padding: 8px; overflow-y: auto; }
.call-title { margin: 0; text-align: left; }
.time { margin: 0; font: 1.2rem var(--pixel-font); }

/* Physical keys: speed dial on the left; talk, home, and the power light on the right */
body[data-style="kid"] .keys { display: grid; justify-items: center; gap: 14px; }
.keys-left { grid-area: left; grid-template-columns: 1fr 1fr; }
.keys-right { grid-area: right; }
.keys-label { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; font-weight: 700; }
.speed {
  display: grid;
  place-items: center;
  gap: 4px;
  width: 74px;
  height: 88px;
  padding: 6px 0;
  border: var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--pop);
  font-size: 2rem;
  line-height: 1;
}
.speed small { /* the little paper label, like old phones' memory buttons */
  width: 60px;
  padding: 2px 0;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  font-size: 0.7rem;
  font-weight: 700;
}
.talk, .home { display: grid; place-items: center; border: 4px solid var(--ink); border-radius: 50%; box-shadow: var(--pop); }
.talk {
  width: 118px;
  height: 118px;
  background: var(--red);
  font-family: var(--display-font);
  font-size: 1rem;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none; /* no iPhone long-press menu */
  touch-action: none;
}
.talk span { font-size: 2.2rem; line-height: 1; }
.talk.recording { animation: pulse 1s ease-in-out infinite; }
.talk[aria-disabled="true"] { background: #d9d4e8; color: #6f6889; box-shadow: 2px 2px 0 var(--ink); cursor: default; }
.home { width: 70px; height: 70px; background: #fff; font-size: 1.7rem; }
.speed:active, .talk:not([aria-disabled="true"]):active, .talk.recording, .home:active { transform: translate(3px, 3px); box-shadow: var(--pressed); }
.led { width: 16px; height: 16px; border: 3px solid var(--ink); border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px 3px rgba(155, 227, 45, 0.8); }

/* Below the screen: speaker grilles and the name */
body[data-style="kid"] .chin { grid-area: chin; display: flex; align-items: center; justify-content: center; gap: 26px; padding-top: 14px; }
.grille { width: 200px; height: 26px; background: radial-gradient(circle, var(--ink) 3px, transparent 3.5px) 0 0 / 14px 14px; opacity: 0.5; }
.device-brand {
  font-family: var(--display-font);
  font-size: 1.5rem;
  color: var(--pink);
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink);
}

@media (max-width: 600px) and (orientation: portrait) {
  body[data-style="kid"] .turn-hint {
    display: block;
    position: fixed;
    top: 12px;
    right: 16px;
    left: 16px;
    margin: 0;
    padding: 8px 12px;
    border: 3px solid var(--ink);
    border-radius: 12px;
    background: #fff;
    font-weight: 600;
    text-align: center;
  }
}

/* Drawing pads (postcards, my page) and hold-to-record captions */
.sketch { display: block; width: 100%; aspect-ratio: 2 / 1; border: var(--line); border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; }
.clear { margin-top: 8px; padding: 0 14px; font-size: 1rem; font-weight: 600; }
.hold.small { width: 100%; min-height: 64px; font-size: 1rem; }

/* Stage 5: composing a ringtone, and "view source" on a friend's page */
.composer { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 8px; border: var(--line); border-radius: 12px; background: var(--ink); }
.cell { aspect-ratio: 1; min-height: 30px; padding: 0; border: 0; border-radius: 6px; background: #3b2d63; }
.cell[aria-pressed="true"] { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.source {
  margin: 0;
  padding: 12px 14px;
  border: var(--line);
  border-radius: 12px;
  background: var(--ink);
  color: var(--lime);
  font: 0.6rem/1.8 var(--pixel-font);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.remix { background: var(--sun); font-size: 1rem; }
.homepage-song { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.play-song { min-height: 44px; padding: 0 14px; font-size: 1rem; font-weight: 600; }
.homepage-credit { font-size: 0.85rem; font-weight: 600; }
.homepage-art { width: 100%; border: 3px solid var(--ink); border-radius: 8px; }

/* ==========================================================================
   Phase 1: the real kid's phone (phone.html) and a grown-up's phone (family.html)
   ========================================================================== */
body.live .panel, body.live .panel-btn { display: none; } /* the interviewer menu is only for the mockup */

/* phone.html?screen-only: the buttons and handset are real, so only the screen shows, filling the display */
body.screen-only { background: var(--ink); user-select: none; -webkit-user-select: none; } /* a long press selects nothing */
body.screen-only[data-style="kid"] .device { display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.screen-only[data-style="kid"] .device::after,
body.screen-only .cradle, body.screen-only .cord, body.screen-only .keys, body.screen-only .chin { display: none; }
body.screen-only[data-style="kid"] .phone { width: calc(720px * var(--fit, 1)); height: calc(450px * var(--fit, 1)); border: 0; border-radius: 0; }
body.screen-only[data-style="kid"] .screen { transform: scale(var(--fit, 1)); }

/* Pairing: the code a grown-up types on their phone */
.pair { flex: 1; display: grid; place-content: center; gap: 18px; text-align: center; }
.pair h1 { margin: 0; font: 1.3rem var(--display-font); }
.pair-code { margin: 0; font: 2.6rem var(--pixel-font); letter-spacing: 0.08em; }

/* phone.html?test: what the Pi sees */
.button-test {
  position: fixed;
  z-index: 20;
  top: 8px;
  left: 8px;
  max-width: min(420px, calc(100vw - 16px));
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font: 12px/1.5 ui-monospace, Menlo, monospace;
  white-space: pre-wrap;
  pointer-events: none;
}

/* Family page form fields */
.fam-field { display: grid; gap: 4px; margin-top: 10px; font-size: 0.9rem; color: #4b5563; }
.fam-field input, .fam-field select { min-height: 44px; padding: 0 10px; border: 1px solid #d1d5db; border-radius: 10px; font: inherit; font-size: 1rem; background: #fff; }
body[data-style="calm"] .timer { margin-top: 12px; font-size: 1.4rem; }
.bar .invite { margin-left: auto; padding: 0 16px; min-height: 52px; font-size: 1.1rem; background: var(--lime); }
.fam-field[hidden] { display: none; }
.fam-card .fam-list .fam-btn { width: auto; min-height: 40px; margin-top: 0; }
.fam-card .fam-list + h2 { margin-top: 16px; }
.fam-list li > span:last-child:has(.fam-btn) { display: flex; gap: 8px; }

/* ==========================================================================
   The real phone's own screens (kid.js): pictures, faces, and big buttons for kids who can't read yet
   ========================================================================== */
.feel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.feel .chunky { min-height: 76px; font-size: 2.6rem; line-height: 1; }
.feel [aria-checked="true"] { background: var(--green); }
.faces { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 12px; }
#faces .face, #faces .face .card, .tiles .face .card { height: 100%; } /* tiles in a row match, photo or not */
.face .card-tile { grid-template-columns: 1fr; place-content: center; justify-items: center; gap: 4px; padding: 8px 6px; text-align: center; }
.face .card-tile .card-sticker { grid-row: auto; font-size: 2.6rem; }
.face .card-tile.with-photo .card-sticker { font-size: 3.6rem; } /* a grown-up's face, big enough to know who it is */
.face .card-tile .card-name { font-size: calc(1.05rem * var(--name-scale, 1)); }
.face .card-tile .card-status { padding: 2px 10px; font-size: 1.3rem; }
.home-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }
.home-key { min-height: 84px; font-size: 2.8rem; line-height: 1; }
.home-key:nth-child(1) { background: var(--pink); }
.home-key:nth-child(2) { background: var(--sky); }
.home-key.invite { grid-column: span 2; min-height: 160px; background: var(--lime); }
.bar h1[aria-label] { font-size: 2.2rem; text-shadow: none; }
.bar .invite { min-width: 72px; font-size: 1.8rem; }

.call-side { justify-content: center; align-items: center; gap: 28px; }
.call-icon { margin: 0; font-size: 4.5rem; line-height: 1; animation: jiggle 0.4s ease-in-out infinite; }
.dots { display: flex; gap: 14px; margin: 0; }
.dots i { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); animation: hop 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes hop { 30% { transform: translateY(-14px); } 60% { transform: none; } }
.call-keys { display: flex; gap: 36px; }
.round { width: 128px; height: 128px; border: 4px solid var(--ink); border-radius: 50%; box-shadow: var(--pop); font-size: 3.4rem; line-height: 1; }
.round:active { transform: translate(3px, 3px); box-shadow: var(--pressed); }
.round.yes { background: var(--green); animation: pulse-yes 1s ease-in-out infinite; }
.round.no { background: var(--red); }
.round.ok { background: var(--sun); }
@keyframes pulse-yes { 50% { transform: scale(1.08); } }

/* The whole screen flashes while it rings, so it's noticed from across the room */
body.screen-only.ringing-in .phone { animation: ring-flash 0.8s steps(2) infinite; }
@keyframes ring-flash { 50% { box-shadow: inset 0 0 0 16px var(--sun); } }

/* ?test: allowing the receiver's button through WebHID */
.button-test-allow { position: fixed; z-index: 21; right: 8px; bottom: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
  .call-icon, .dots i, .round.yes, body.screen-only.ringing-in .phone { animation: none; }
}
.col.middle { justify-content: center; }
.hang { display: inline-block; transform: rotate(135deg); }

/* ---------- Family page: your card and the photo editor (family.js) ---------- */
.fam-card h2.fam-sub { margin-top: 20px; }
.fam-hint.center { text-align: center; }
.fam-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.fam-choice { flex: 1 1 auto; min-height: 44px; padding: 0 12px; border: 1px solid #d1d5db; border-radius: 999px; background: #fff; font-weight: 600; white-space: nowrap; }
.fam-choice[aria-checked="true"] { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; box-shadow: inset 0 0 0 1px #2563eb; }
.photo-stickers .fam-choice { flex: 0 0 auto; min-width: 48px; padding: 0 8px; font-size: 1.4rem; }
.photo-stickers .fam-choice:first-child { font-size: 0.95rem; }
/* A file picker that looks like a button. The input stays in the page (not display: none) so tapping the label opens it on iPhones. */
.fam-btn.file { position: relative; display: grid; place-items: center; overflow: hidden; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* The one playful thing on this page: the photo, framed like a card on her phone */
.photo-canvas { display: block; width: min(280px, 100%); aspect-ratio: 1; margin: 4px auto 0; border: 4px solid var(--ink); border-radius: 50%; background: #fff; box-shadow: var(--pop); touch-action: none; cursor: grab; }
.looks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.look { display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #4b5563; font-size: 0.8rem; font-weight: 600; }
.look canvas { width: 100%; max-width: 56px; aspect-ratio: 1; border: 2px solid #d1d5db; border-radius: 50%; }
.look[aria-checked="true"] { color: #1d4ed8; }
.look[aria-checked="true"] canvas { border-color: #2563eb; box-shadow: 0 0 0 2px #2563eb; }

/* ---------- Drawing together during a call (draw.js) ---------- */
.pad { display: block; width: 100%; aspect-ratio: 4 / 3; background: #fff; touch-action: none; cursor: crosshair; }
.crayon { width: 48px; height: 48px; padding: 0; border: 3px solid var(--ink); border-radius: 50%; background: var(--crayon); font-size: 1.4rem; line-height: 1; }
.crayon[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink); transform: scale(1.1); }
/* Her phone: the page fills the left, crayons and keys on the right, hang-up always in reach */
.draw-split { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; min-height: 0; }
.draw-split .pad { width: auto; height: 396px; border: var(--line); border-radius: 18px; box-shadow: var(--pop); }
.draw-side { display: grid; justify-items: center; gap: 12px; }
.draw-crayons { display: grid; grid-template-columns: repeat(2, 48px); gap: 10px; }
.draw-keys { display: flex; gap: 10px; }
.draw-keys .chunky { min-width: 56px; padding: 0 10px; font-size: 1.6rem; }
.round.small { width: 84px; height: 84px; font-size: 2.4rem; }
.round.draw { background: var(--sky); }
/* A grown-up's phone: the page across the screen, crayons in a row under it */
.fam-pad .pad { border: 1px solid #d1d5db; border-radius: 12px; }
.fam-crayons { display: grid; grid-template-columns: repeat(4, 44px); justify-content: center; gap: 12px 18px; margin-top: 14px; }
.fam-crayons .crayon { width: 44px; height: 44px; border-width: 2px; font-size: 1.2rem; }

/* ---------- The app's front door (start.html): a kid or a grown-up? ---------- */
body.start-page { display: flex; padding: 24px 16px; background: radial-gradient(var(--ink) 1.4px, transparent 1.6px) 0 0 / 22px 22px, var(--sun); } /* not the app's flat small-screen look */
.start { display: grid; justify-items: center; gap: 18px; width: min(580px, 100%); text-align: center; }
.start h1 { margin: 0; padding: 6px 18px; border: var(--line); border-radius: 14px; background: #fff; box-shadow: var(--pop); font-size: clamp(1.4rem, 5.5vw, 2rem); }
.start-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; width: 100%; margin-top: 8px; }
.start-choice { display: grid; justify-items: center; gap: 4px; padding: 26px 18px 22px; border: var(--line); border-radius: 26px; box-shadow: 6px 6px 0 var(--ink); color: var(--ink); text-decoration: none; transition: transform 0.08s, box-shadow 0.08s; }
.start-choice:active { transform: translate(4px, 4px); box-shadow: var(--pressed); }
.start-choice.kid { background: var(--pink); }
.start-choice.grown { background: var(--sky); }
.start-pic { font-size: 5rem; line-height: 1.1; }
.start-label { font-size: 1.7rem; font-weight: 700; }
.start-hint { font-size: 1rem; }

/* ---------- Stage 2: the answering machine and the pager ---------- */
.machine { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; font-size: 3.4rem; line-height: 1; }
.rec-light { width: 22px; height: 22px; border: 3px solid var(--ink); border-radius: 50%; background: #6b2a2a; }
.rec-light.on { background: var(--red); animation: blink 1s steps(2) infinite; }
.leave:not(.big) { align-self: center; padding: 0 22px; }
/* A 1990s pager's little green screen */
.lcd { margin: 0; padding: 14px 16px; border: 4px solid var(--ink); border-radius: 12px; background: #b5c793; box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.18), var(--pop);
  color: #1f2a14; font-family: var(--pixel-font); font-size: 0.75rem; line-height: 1.8; text-transform: uppercase; overflow-wrap: anywhere; }
.pages { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.95rem; font-weight: 600; }
.codes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.codes .opt { display: grid; place-items: center; gap: 2px; min-height: 66px; padding: 4px; font-size: 1.6rem; line-height: 1; }
.codes .opt small { font-size: 0.68rem; font-weight: 700; line-height: 1.1; }
.page-alert { position: absolute; left: 50%; top: 18px; z-index: 5; width: min(440px, 90%); padding: 14px; border: var(--line); border-radius: 16px;
  background: var(--paper); box-shadow: 6px 6px 0 var(--ink); transform: translateX(-50%); }
.page-alert .lcd { font-size: 0.9rem; }
.page-alert-keys { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
.page-alert-keys .chunky { padding: 0 18px; }

/* ---------- Stage 3: the buddy list and texts ---------- */
.buddylist { border: var(--line); border-radius: 10px; background: #fff; box-shadow: var(--pop); overflow: hidden; }
.buddylist-title { margin: 0; padding: 6px 12px; border-bottom: var(--line); background: var(--sun); font-family: var(--display-font); font-size: 0.85rem; }
.buddy-group { margin: 8px 12px 2px; font-size: 0.85rem; font-weight: 700; }
.buddy { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px; border: 0; background: none; text-align: left; }
.buddy[aria-pressed="true"] { background: var(--sky); }
.buddy-dot { flex: none; width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 50%; background: var(--dot); }
.buddy-text { flex: 1; display: grid; }
.buddy-name { font-weight: 700; }
.buddy small { font-size: 0.8rem; font-style: italic; }
.chat-head { margin: 0; font-family: var(--display-font); font-size: 1rem; }
.chat { display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 88%; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 16px 16px 16px 4px; background: #fff; overflow-wrap: anywhere; }
.msg.mine { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--sky); }
.msg.auto { background: var(--paper); font-style: italic; }
.msg .postcard { margin: -2px -6px; }
.chat-send { display: flex; gap: 8px; }
.chat-send .field { flex: 1; min-width: 0; }
.chat-send .chunky { padding: 0 16px; background: var(--pink); }

/* ---------- Stage 4: top friends ---------- */
.top-friends { display: flex; flex-wrap: wrap; gap: 8px; }
.top-friends p { margin: 0; }
.top-friend { flex: none; min-height: 40px; font-size: 0.95rem; font-weight: 600; }
.top-friend.new { display: grid; justify-items: center; border-style: dashed; }
.top-friend small { font-size: 0.72rem; }