/* Top builders on the app home (app-top-builders.js, founder 2026-10-10). Square like the four tiles above (square.css);
   only the photos, medals and the live dot are round (they need !important for that). */
.atb { --gold1: #fde68a; --gold2: #d97706; --mute: #8b93ad; position: relative; margin: 22px 0 6px; padding: 20px 22px 18px; overflow: hidden; color: #e8ecf8;
  background: radial-gradient(90% 120% at 0% 0%, rgba(251, 191, 36, 0.1), transparent 55%), radial-gradient(70% 120% at 100% 0%, rgba(56, 182, 255, 0.12), transparent 60%), #0a1226;
  border: 1px solid rgba(251, 191, 36, 0.28); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9); }
.atb::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%); background-size: 250% 100%; animation: atb-shine 7s ease-in-out infinite; }
.atb-head { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.atb-ic { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50% !important; color: #3b2400; background: radial-gradient(circle at 30% 28%, #fff7cc, var(--gold1) 35%, var(--gold2)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35), 0 10px 22px -8px rgba(245, 158, 11, 0.8); }
.atb-ic svg { width: 22px; height: 22px; }
.atb-ht { flex: 1; min-width: 200px; }
.atb-ht h2 { margin: 0; font-family: var(--font-head, inherit); font-size: 1.35rem; line-height: 1.25; color: #fff; }
/* app-shell.css hides intro lines under headings; this one says how the rank works, so it stays */
.ah .atb .atb-rule { display: block !important; margin: 2px 0 0; font-size: 0.82rem; color: var(--mute); }
.atb-live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; font-size: 0.76rem; color: #a7f3d0; background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.35); }
.atb-live i { position: relative; width: 8px; height: 8px; border-radius: 50% !important; background: #34d399; box-shadow: 0 0 8px #34d399; }
.atb-live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50% !important; border: 2px solid #34d399; animation: atb-ping 1.8s ease-out infinite; }
.atb-live b { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.atb-live small { color: #7fb8a3; }
.atb-live.is-off { color: #fcd34d; background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.35); }
.atb-live.is-off i { background: #f59e0b; box-shadow: none; }
.atb-live.is-off i::after { display: none; }
.atb-all { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 0.84rem; font-weight: 700; color: #1a1200; text-decoration: none; background: linear-gradient(135deg, var(--gold1), #fbbf24); box-shadow: 0 8px 18px -8px rgba(245, 158, 11, 0.8); transition: transform 0.15s ease; }
.atb-all:hover { transform: translateY(-2px); }
.atb-all svg { width: 15px; height: 15px; }
.atb-wait { position: relative; margin: 6px 0; color: var(--mute); font-size: 0.9rem; }

.atb-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 22px; align-items: end; }

/* The podium: three 3D blocks (2nd, 1st, 3rd) that lean with the pointer */
.atb-podium { --rx: 8deg; --ry: 0deg; display: flex; align-items: flex-end; justify-content: center; gap: 10px; min-height: 290px; padding: 10px 6px 0; perspective: 900px; }
.atb-podium > a { transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.3s ease-out; }
.atb-step { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; max-width: 170px; min-width: 0; color: inherit; text-decoration: none; transform-style: preserve-3d; }
.atb-step-who { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 10px; min-width: 0; max-width: 100%; transition: transform 0.25s ease; }
.atb-step:hover .atb-step-who, .atb-step:focus-visible .atb-step-who { transform: translateY(-5px); }
.atb-step:focus-visible { outline: 2px solid #38b6ff; outline-offset: 4px; }
.atb-ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; padding: 3px; box-sizing: border-box; border-radius: 50% !important; background: conic-gradient(from 0deg, #94a3b8, #f1f5f9, #64748b, #f1f5f9, #94a3b8); box-shadow: 0 12px 22px -10px rgba(0, 0, 0, 0.9); }
.atb-step.is-1 .atb-ring { width: 82px; height: 82px; padding: 4px; background: conic-gradient(from 0deg, #f59e0b, #fde68a, #fbbf24, #fff7cc, #f59e0b); animation: atb-glow 3s ease-in-out infinite; }
.atb-step.is-3 .atb-ring { background: conic-gradient(from 0deg, #9a3412, #fdba74, #c2410c, #ffedd5, #9a3412); }
.atb-step.is-1 .atb-ring::before { content: ""; position: absolute; top: -20px; left: 50%; width: 28px; height: 20px; transform: translateX(-50%); background: linear-gradient(135deg, #fde68a, #f59e0b);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 17'%3E%3Cpath d='M1 4l5.5 5L12 1l5.5 8L23 4l-2.5 12h-17z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 17'%3E%3Cpath d='M1 4l5.5 5L12 1l5.5 8L23 4l-2.5 12h-17z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.8)); }
.atb-ring .atb-av { width: 100%; height: 100%; border: 3px solid #0a1226; box-sizing: border-box; font-size: 1.1rem; }
.atb-step-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; color: #fff; }
.atb-step-sc { display: flex; align-items: baseline; gap: 4px; }
.atb-step-sc b { font-family: var(--font-head, inherit); font-size: 1.25rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.atb-step.is-1 .atb-step-sc b { color: var(--gold1); font-size: 1.45rem; }
.atb-step-sc small { font-size: 0.7rem; color: var(--mute); }
.atb-block { position: relative; display: block; width: 100%; transform-style: preserve-3d; }
.atb-block-face { position: relative; display: grid; place-items: start center; padding-top: 14px; height: 86px; box-sizing: border-box;
  background: linear-gradient(180deg, #cbd5e1, #64748b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -18px 30px rgba(0, 0, 0, 0.25); }
.atb-step.is-1 .atb-block-face { height: 132px; background: linear-gradient(180deg, #fcd34d, #b45309); }
.atb-step.is-3 .atb-block-face { height: 64px; background: linear-gradient(180deg, #fdba74, #9a3412); }
/* the top of each block, folded back in 3D */
.atb-block-top { position: absolute; left: 0; right: 0; top: 0; height: 34px; transform-origin: 50% 0; transform: rotateX(90deg); background: linear-gradient(180deg, #f8fafc, #cbd5e1); }
.atb-step.is-1 .atb-block-top { background: linear-gradient(180deg, #fff7cc, #fcd34d); }
.atb-step.is-3 .atb-block-top { background: linear-gradient(180deg, #ffedd5, #fdba74); }
.atb-block-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 45%, transparent 60%); background-size: 260% 100%; animation: atb-shine 5s ease-in-out infinite; }
.atb-step.is-new { animation: atb-rise 0.8s cubic-bezier(0.2, 0.9, 0.25, 1.2) backwards; }

.atb-medal { display: inline-grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50% !important; font-family: var(--font-head, inherit); font-size: 0.78rem; font-weight: 800; color: #0b1328;
  background: radial-gradient(circle at 30% 28%, #fff, #93c5fd 35%, #1d4ed8); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 6px 12px -5px rgba(0, 0, 0, 0.8); }
.atb-medal.is-blue { color: #fff; }
.atb-medal.is-gold { background: radial-gradient(circle at 30% 28%, #fff7cc, #fde68a 35%, #d97706); }
.atb-medal.is-silver { background: radial-gradient(circle at 30% 28%, #fff, #f1f5f9 35%, #64748b); }
.atb-medal.is-bronze { background: radial-gradient(circle at 30% 28%, #ffedd5, #fdba74 35%, #9a3412); }
.atb-block-face .atb-medal { width: 40px; height: 40px; font-size: 0.9rem; }

.atb-av { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; overflow: hidden; border-radius: 50% !important; font-size: 0.78rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #1f7bff, #38b6ff); }
.atb-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50% !important; }
.atb-av.is-sm { width: 26px; height: 26px; font-size: 0.62rem; }

/* #4 to #10: rows that glide to their new place when the board changes */
.atb-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.atb-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.atb-row { position: relative; will-change: transform; }
.atb-row a { display: grid; grid-template-columns: 34px 38px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 12px; color: inherit; text-decoration: none; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); transition: background 0.18s, border-color 0.18s, transform 0.18s; }
.atb-row a:hover, .atb-row a:focus-visible { background: rgba(56, 182, 255, 0.08); border-color: rgba(56, 182, 255, 0.5); transform: translateX(3px); outline: none; }
.atb-row.is-me a { border-color: rgba(52, 211, 153, 0.6); background: rgba(52, 211, 153, 0.06); }
.atb-row.is-in { animation: atb-in 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.1) backwards; animation-delay: calc(0.1s + var(--i) * 0.05s); }
.atb-row.is-new a, .atb-row.is-climb a { animation: atb-flash 2.4s ease; }
.atb-row-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.atb-row-tx strong { font-size: 0.9rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atb-row-tx small { font-size: 0.74rem; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atb-row-sc { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.atb-row-sc b { font-family: var(--font-head, inherit); font-size: 1.1rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.atb-row-sc small { font-size: 0.66rem; color: var(--mute); }
.atb-up { display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px 2px 4px; font-size: 0.72rem; font-weight: 700; color: #052e1c; background: #34d399; border-radius: 999px !important; }
.atb-up svg { width: 13px; height: 13px; }

.atb-you { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 14px; color: inherit; text-decoration: none; background: rgba(52, 211, 153, 0.07); border: 1px solid rgba(52, 211, 153, 0.4); transition: border-color 0.18s; }
.atb-you:hover { border-color: rgba(52, 211, 153, 0.8); }
.atb-you[hidden] { display: none; }
.atb-you.is-join { background: rgba(56, 182, 255, 0.06); border-color: rgba(56, 182, 255, 0.4); border-style: dashed; }
.atb-you-l { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6ee7b7; }
.atb-you.is-join .atb-you-l { color: #7cc8ff; }
.atb-you strong { font-family: var(--font-head, inherit); font-size: 1.1rem; color: #fff; }
.atb-you strong em { font-style: normal; font-size: 0.85rem; color: var(--mute); }
.atb-you small { flex-basis: 100%; font-size: 0.78rem; color: #b8c2dc; }

/* Just moved up: the newest climbers slide in */
.atb-feed { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; }
.atb-feed[hidden] { display: none; }
.atb-feed-h { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6ee7b7; }
.atb-feed-h svg { width: 15px; height: 15px; }
.atb-feed-l { display: flex; gap: 10px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.atb-feed-l::-webkit-scrollbar { display: none; }
.atb-ev { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 5px 12px 5px 5px; font-size: 0.8rem; color: #d6deef; text-decoration: none; white-space: nowrap; background: rgba(52, 211, 153, 0.06); border: 1px solid rgba(52, 211, 153, 0.25); border-radius: 999px !important; }
.atb-ev strong { color: #fff; margin-right: 3px; }
.atb-ev time { font-size: 0.72rem; color: var(--mute); }
.atb-ev:hover { border-color: rgba(52, 211, 153, 0.6); }
.atb-ev.is-new { animation: atb-slide 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.2) backwards; }

@keyframes atb-ping { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2.2); opacity: 0; } }
@keyframes atb-shine { 0% { background-position: 150% 0; } 60%, 100% { background-position: -50% 0; } }
@keyframes atb-glow { 0%, 100% { box-shadow: 0 12px 22px -10px rgba(0, 0, 0, 0.9), 0 0 0 0 rgba(251, 191, 36, 0.0); } 50% { box-shadow: 0 12px 22px -10px rgba(0, 0, 0, 0.9), 0 0 26px 2px rgba(251, 191, 36, 0.45); } }
@keyframes atb-rise { from { opacity: 0; transform: translateY(40px) rotateX(30deg); } to { opacity: 1; } }
@keyframes atb-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes atb-flash { 0% { background: rgba(52, 211, 153, 0.35); border-color: #34d399; } 100% { } }
@keyframes atb-slide { from { opacity: 0; transform: translateX(-30px) scale(0.9); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .atb-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .atb-podium { min-height: 250px; }
}
@media (max-width: 520px) {
  .atb { padding: 16px 14px 14px; }
  .atb-head { gap: 10px; }
  .atb-ht { min-width: 0; flex-basis: calc(100% - 60px); }
  .atb-live small { display: none; }
  .atb-podium { gap: 6px; min-height: 230px; }
  .atb-ring { width: 54px; height: 54px; }
  .atb-step.is-1 .atb-ring { width: 68px; height: 68px; }
  .atb-block-face { height: 70px; }
  .atb-step.is-1 .atb-block-face { height: 104px; }
  .atb-step.is-3 .atb-block-face { height: 52px; }
  .atb-row a { grid-template-columns: 30px 34px minmax(0, 1fr) auto; gap: 8px; padding: 7px 9px; }
  .atb-row .atb-up { display: none; }
  .atb-medal { width: 30px; height: 30px; font-size: 0.72rem; }
  .atb-row .atb-av { width: 34px; height: 34px; }
  .atb-feed { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .atb::before, .atb-live i::after, .atb-step.is-1 .atb-ring, .atb-block-face::after, .atb-step.is-new, .atb-row.is-in, .atb-row.is-new a, .atb-row.is-climb a, .atb-ev.is-new { animation: none !important; }
  .atb-podium > a { transform: none !important; }
}