/* Mi perfil · the story (Carlos 2026-10-14): the top of the page is a 9:16 card made to be screenshotted for Instagram or
   WhatsApp. Nothing to tap inside it except «Registrar mi día» on a new account. Entrance: transform/opacity only.
   9:16 as a min-height from the column width (100cqw), up to 660 px: on narrow phones it grows with its content. */
#accountHub .account-side { container-type:inline-size; }
#accountHub .account-game-hero { position:relative; isolation:isolate; overflow:hidden; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:10px; margin:0 16px 14px; padding:16px 20px 18px; min-height:min(calc((100cqw - 32px) * 16 / 9), 660px); border:1px solid #ffffff17; border-radius:26px; color:#f3f8ec; text-align:center;
  background:radial-gradient(110% 55% at 100% 0,#b6ef6538,transparent 62%),radial-gradient(90% 45% at 0 100%,#2fd08f24,transparent 70%),linear-gradient(165deg,#1d4234 0%,#142c26 48%,#0b1c16 100%); box-shadow:0 18px 40px #0c1f1833; }
.story-top { align-self:stretch; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:24px; }
.story-brand { display:inline-flex; align-items:center; gap:7px; font-size:16px; font-weight:800; letter-spacing:-.2px; color:#f3f8ec; }
.story-brand img { display:block; width:22px; height:22px; }
#accountHub .account-game-hero .account-story-chip { position:static; }
.story-who { position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; max-width:100%; }
/* Soft halo rings around the avatar. */
.story-who::before { content:''; position:absolute; z-index:-1; top:30px; left:50%; width:132px; height:132px; margin:-66px 0 0 -66px; border-radius:50%; border:1px solid #ffffff12; box-shadow:0 0 0 30px #ffffff06,0 0 0 31px #ffffff0d,0 0 0 64px #ffffff04; pointer-events:none; }
.story-avatar { width:60px; height:60px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#e6f9bd,#9ed9c5); color:#10251f; font-size:23px; font-weight:850; letter-spacing:-.5px; box-shadow:0 0 0 4px #183a2f,0 0 0 6px #b6ef6599,0 14px 34px #b6ef6524; }
#accountHub #accountProfile { max-width:100%; margin:8px 0 0; font-size:21px; font-weight:800; line-height:1.2; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story-rank { display:inline-flex; align-items:center; gap:9px; max-width:100%; margin:6px 0 0; padding:4px 14px 4px 4px; border:1px solid #ffffff1f; border-radius:999px; background:#ffffff0f; text-align:left; }
#accountHub .story-rank .rank-badge { --rank-size:30px; box-shadow:none; }
#accountHub .story-rank #accountRankBadge { display:flex; }
.story-rank-copy { display:grid; min-width:0; line-height:1.2; }
#accountHub #accountRank { font-size:14px; font-weight:800; color:#dcf3ac; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#accountLevel { font-size:11px; color:#bfd2c3; white-space:nowrap; }
.story-numbers { align-self:stretch; display:grid; gap:10px; }
#accountHub #accountTotalPoints { display:block; line-height:1; font-size:16px; font-weight:800; color:#dcf3ac; white-space:nowrap; }
#accountTotalPoints b { font-size:50px; font-weight:900; letter-spacing:-2px; color:#fff; font-variant-numeric:tabular-nums; }
.story-stats { display:grid; grid-template-columns:1fr 1fr; }
.story-stat { display:grid; gap:3px; min-width:0; padding:0 6px; }
.story-stat + .story-stat { border-left:1px solid #ffffff1f; }
.story-stat b { font-size:26px; font-weight:850; line-height:1.1; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap; }
.story-stat.is-streak b { color:#dcf3ac; }
.story-stat small { font-size:12px; line-height:1.3; color:#bfd2c3; }
/* What gym rats show off: g/kg of protein and kg lifted, each with a small sparkline (14 days; four weeks). */
.story-gym { display:grid; grid-template-columns:1fr 1fr; padding-top:10px; border-top:1px solid #ffffff14; }
.story-gym[hidden], .story-gym-stat[hidden] { display:none; }
.story-gym.is-single { grid-template-columns:1fr; }
.story-gym.is-single .story-gym-stat { border-left:0; }
.story-gym-stat { justify-items:center; }
.story-gym-stat b { font-size:24px; }
.story-spark { display:block; width:min(100%, 104px); height:auto; overflow:visible; }
.story-spark-area { fill:#b6ef651f; }
.story-spark-line { fill:none; stroke:#dcf3ac; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.story-spark-dot { fill:#b6ef65; }
.story-spark-bar { fill:#ffffff29; }
.story-spark-bar.is-now { fill:#b6ef65; }
/* The last 28 days, one square each (a week per row, today last), coloured like Constancia. */
.story-grid { width:100%; max-width:204px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.story-grid i { display:block; aspect-ratio:1; border-radius:28%; background:#ffffff14; }
.story-grid i[data-band="1"] { background:#3f8752; }
.story-grid i[data-band="2"] { background:#76bd57; }
.story-grid i[data-band="3"] { background:#b6ef65; box-shadow:0 0 12px #b6ef6533; }
.story-grid i.is-today { outline:2px solid #f3f8ecb3; outline-offset:2px; }
.story-foot { align-self:stretch; min-height:20px; }
.story-foot[hidden], .story-url[hidden], .story-start[hidden] { display:none; }
.story-url { margin:0; font-size:13px; font-weight:700; letter-spacing:.2px; color:#bfd2c3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story-start { width:100%; min-height:48px; padding:0 14px; border:0; border-radius:14px; background:#dcf3ac; color:#163f30; font:inherit; font-size:15px; font-weight:800; cursor:pointer; }
.story-start::before { content:'+ '; }
.story-start:focus-visible { outline:3px solid #dcf3ac; outline-offset:3px; }
#accountHub .account-game-hero.is-example :is(.story-rank, .story-numbers, .story-grid) { opacity:.86; }
#accountHub .account-game-hero.is-example .story-grid { max-width:150px; } /* room for «Registrar mi día» inside 9:16 */
/* Entrance, once: armed (hidden) until on screen, then each piece rises or pops into place. */
.account-game-hero.is-armed :is(.story-avatar, .story-name, .story-rank, .story-points, .story-stat, .story-spark-bar, .story-grid i, .story-foot) { opacity:0; }
.account-game-hero.is-playing .story-avatar { animation:story-pop .6s cubic-bezier(.2,.9,.3,1.25) both; }
.account-game-hero.is-playing :is(.story-name, .story-rank, .story-points, .story-stat, .story-foot) { animation:story-rise .55s cubic-bezier(.2,.8,.2,1) both; }
.account-game-hero.is-playing .story-name { animation-delay:.08s; }
.account-game-hero.is-playing .story-rank { animation-delay:.16s; }
.account-game-hero.is-playing .story-points { animation-delay:.24s; }
.account-game-hero.is-playing .story-stat { animation-delay:.32s; }
.account-game-hero.is-playing .story-stat + .story-stat { animation-delay:.4s; }
.account-game-hero.is-playing .story-gym-stat { animation-delay:.48s; }
.account-game-hero.is-playing .story-gym-stat + .story-gym-stat { animation-delay:.56s; }
.account-game-hero.is-playing .story-spark-bar { transform-box:fill-box; transform-origin:50% 100%; animation:story-grow .5s cubic-bezier(.2,.8,.2,1) both; }
.account-game-hero.is-playing .story-spark-bar:nth-child(2) { animation-delay:.62s; }
.account-game-hero.is-playing .story-spark-bar:nth-child(3) { animation-delay:.7s; }
.account-game-hero.is-playing .story-spark-bar:nth-child(4) { animation-delay:.78s; }
.account-game-hero.is-playing .story-spark-bar:first-child { animation-delay:.56s; }
.account-game-hero.is-playing .story-grid i { animation:story-cell .42s calc(.42s + var(--i) * 24ms) cubic-bezier(.2,.9,.3,1.35) both; }
.account-game-hero.is-playing .story-foot { animation-delay:1.1s; }
@keyframes story-pop { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:none; } }
@keyframes story-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes story-cell { from { opacity:0; transform:scale(.2); } to { opacity:1; transform:none; } }
@keyframes story-grow { from { opacity:0; transform:scaleY(0); } to { opacity:1; transform:none; } }
@media (min-width:1000px) { .story-grid { max-width:232px; } }
@media (max-width:350px) { #accountHub .account-game-hero { padding:16px 14px 18px; } .story-avatar { width:58px; height:58px; font-size:22px; } .story-who::before { top:29px; } #accountTotalPoints b { font-size:46px; } .story-stat b { font-size:22px; } .story-gym-stat b { font-size:21px; } }
.account-story-chip { position:absolute; z-index:1; top:-10px; left:12px; padding:2px 9px; border-radius:999px; background:#dcf3ac; color:#163f30; font-size:11px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; }
.account-story-chip[hidden] { display:none; }

/* After the public profile: «8 pts para Forja» with its bar opens the next three ranks and all 25. */
#accountHub .account-rank-more { margin:0 16px 14px; padding:0 14px; border:1px solid #dfe8e2; border-radius:16px; background:#fbfcf8; min-width:0; }
#accountHub .account-rank-more > summary { min-height:52px; display:grid; grid-template-columns:minmax(0,1fr) minmax(56px,30%) auto; align-items:center; justify-content:normal; gap:12px; color:#1d4532; }
#accountHub .account-rank-more > summary::after { color:#1f5a3c; font-size:20px; }
#accountHub .account-rank-more > summary:focus-visible { outline:3px solid #298355; outline-offset:2px; }
#accountNextLevel { min-width:0; font-size:14px; font-weight:700; line-height:1.3; color:#1d4532; text-align:left; }
#accountLevelProgress { width:100%; height:6px; display:block; appearance:none; border:0; border-radius:6px; overflow:hidden; background:#e1ebe3; }
#accountLevelProgress::-webkit-progress-bar { background:#e1ebe3; }
#accountLevelProgress::-webkit-progress-value { background:#28784f; border-radius:6px; }
#accountLevelProgress::-moz-progress-bar { background:#28784f; }
#accountHub .account-rank-more .rank-upcoming { border-top-color:#e5ede7; }
#accountHub .account-rank-more .rank-up-copy strong { color:#1c4232; }
#accountHub .account-rank-more .rank-up-copy small { color:#5b6f61; }
#accountHub .account-rank-more .rank-upcoming progress { background:#e1ebe3; }
#accountHub .account-rank-more .rank-upcoming progress::-webkit-progress-bar { background:#e1ebe3; }
#accountHub .account-rank-more .rank-upcoming progress::-webkit-progress-value { background:#28784f; }
#accountHub .account-rank-more .rank-upcoming progress::-moz-progress-bar { background:#28784f; }
#accountHub .account-rank-more .rank-upcoming li > b { color:#1f6a43; }
#accountHub .account-rank-more .rank-upcoming-note { color:#46624f; }
#accountHub .account-rank-more .fitness-levels { margin-top:10px; }

/* Tu perfil público: the preview, then the switch (off) or the link (on), one privacy line. */
.account-public-card { margin:0 16px 14px; padding:14px; border:1px solid #dfe8e2; border-radius:16px; background:#fbfcf8; display:grid; gap:12px; min-width:0; }
.account-public-card[hidden] { display:none; }
.account-public-card-head h3 { margin:0; font-size:15px; color:#1d4532; }
.account-public-card .account-public-offer, .account-public-card .account-public-link { margin:0; }
.account-public-card .account-public-offer { padding:0; border:0; background:none; justify-items:stretch; }
.account-public-card .account-public-offer button { width:100%; }
.account-public-card > .account-public-help { margin:0; font-size:12px; }
.public-mock { position:relative; min-width:0; border:1px solid #e1eadf; border-radius:14px; background:#fff; box-shadow:0 8px 22px #16432c12; }
.public-mock .account-story-chip { left:auto; right:12px; }
.public-mock-url { display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:14px 14px 0 0; background:#eef4ef; color:#46624f; font-size:11.5px; font-weight:650; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.public-mock-url::before { content:''; flex:none; width:7px; height:7px; border-radius:50%; background:#9bbfa8; box-shadow:11px 0 #c9d9cd,22px 0 #dfe8e2; margin-right:26px; }
.public-mock-body { display:grid; grid-template-columns:38px minmax(0,1fr); gap:10px; align-items:center; padding:12px; }
.public-mock-avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#d9f99d; color:#1d4532; font-size:14px; font-weight:800; }
.public-mock-handle { min-width:0; font-size:17px; color:#12231b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.public-mock-rank { grid-column:1 / -1; display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; background:#163f30; color:#fff; }
.public-mock-badge .rank-badge { --rank-size:34px; }
.public-mock-rank span:last-child { display:grid; min-width:0; }
.public-mock-rank b { font-size:15px; color:#dcf3ac; }
.public-mock-rank small { font-size:11px; color:#bfd2c3; }
.public-mock-stats { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.public-mock-stats span { display:grid; min-width:0; }
.public-mock-stats b { font-size:18px; color:#12231b; font-variant-numeric:tabular-nums; }
.public-mock-stats small { font-size:11px; color:#5b6f61; }
.public-mock-grid { grid-column:1 / -1; width:100%; max-width:250px; display:grid; grid-template-rows:repeat(7,1fr); grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:3px; }
.public-mock-grid i { display:block; aspect-ratio:1; border-radius:3px; }
.public-mock-footer { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:32px; }
.public-mock-pins { display:flex; gap:6px; }
.public-mock-pins .rank-badge { --rank-size:28px; }
.public-mock-pins .pin-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:#fff2d7; font-size:15px; }
.public-mock-follow { padding:6px 14px; border-radius:999px; background:#28784f; color:#fff; font-size:12.5px; font-weight:750; }
.public-mock.is-example .public-mock-body { opacity:.9; }
.public-mock.is-playing .public-mock-grid i { animation:public-cell-in .38s calc(var(--i) * 7ms) ease-out both; }
.public-mock.is-playing .public-mock-rank { animation:public-rise .5s ease-out both; }
.public-mock.is-playing .public-mock-follow { animation:public-follow 1.4s .9s ease-in-out 2; }
@keyframes public-cell-in { from { opacity:0; transform:scale(.3); } to { opacity:1; transform:none; } }
@keyframes public-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes public-follow { 50% { transform:scale(1.08); box-shadow:0 0 0 6px #28784f22; } }
@media (prefers-reduced-motion:reduce) { :is(.account-game-hero, .public-mock).is-playing * { animation:none !important; } .account-game-hero.is-armed * { opacity:1 !important; } }