/* HUELLAS v1.0.5 · mobile */
/* HUELLAS v1.0.1 · CSS RECOVERY · 2026-08-16 */

/* ==========================================================
   HUELLAS · Sprint 3.1
   Mobile First + Accessibility + Readability Pass
   Additive overrides: does not replace app.css
   ========================================================== */

:root{
  --hm-reading-scale:1;
  --hm-touch:54px;
  --hm-mobile-pad:16px;
  --hm-mobile-gap:16px;
  --hm-safe-bottom:max(12px,env(safe-area-inset-bottom));
}

html{scroll-behavior:smooth}
body.reading-comfort{--hm-reading-scale:1.08}
body.reading-large{--hm-reading-scale:1.16}

/* Accessible type scaling without globally stretching geometry */
body.reading-comfort .app-shell,
body.reading-comfort .weeks-shell,
body.reading-comfort .badge-library-shell,
body.reading-large .app-shell,
body.reading-large .weeks-shell,
body.reading-large .badge-library-shell{
  font-size:calc(1rem * var(--hm-reading-scale));
}

/* Accessibility control */
.huellas-text-size{
  width:40px;height:40px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  color:#fff;font-weight:900;font-size:13px;
  display:grid;place-items:center;cursor:pointer;
}
.huellas-text-size[data-level="comfort"]{color:#f4d67a;border-color:rgba(244,214,122,.28)}
.huellas-text-size[data-level="large"]{background:rgba(244,214,122,.12);color:#ffe69a;border-color:rgba(244,214,122,.42)}

/* Progressive mobile question pager */
.mobile-question-pager{
  display:none;
  margin:1rem 0 0;
  padding:.85rem;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}
.mobile-question-pager-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-bottom:.7rem;
}
.mobile-question-pager-head strong{font-size:14px;color:#fff}
.mobile-question-pager-head span{font-size:13px;color:#9bb0c9}
.mobile-question-pager-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:.65rem}
.mobile-question-pager button{
  min-height:52px;border-radius:14px;border:1px solid rgba(255,255,255,.1);
  font-weight:900;font-size:15px;cursor:pointer;
}
.mobile-question-pager .pager-back{background:rgba(255,255,255,.055);color:#dce7f5}
.mobile-question-pager .pager-next{background:linear-gradient(180deg,#f4d67a,#d8a43a);color:#06142b;border-color:rgba(244,214,122,.45)}
.mobile-question-pager .pager-next:disabled{opacity:.45;cursor:not-allowed}

/* Main responsive pass */
@media(max-width:760px){
  html{font-size:16px}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  button,a,input,select,textarea{touch-action:manipulation}
  a,button,.option,.decision-option,.trace-option{ -webkit-tap-highlight-color:transparent }

  /* Topbar: keep only useful controls and create readable tap targets */
  .topbar{
    height:64px;
    padding:0 12px;
    gap:10px;
  }
  .brand-mini{gap:.5rem}
  .brand-mini img{width:36px;height:36px}
  .brand-mini span{display:inline!important;font-size:13px;letter-spacing:.1em}
  .topbar-actions{gap:7px}
  .topbar-actions .user-chip{display:none!important}
  .games-top-link,.notification-bell,.icon-btn,.huellas-text-size{
    min-width:40px;width:40px;height:40px;
    display:grid;place-items:center;
    border-radius:12px;
  }

  /* Content frame */
  .app-shell,.weeks-shell,.badge-library-shell{
    width:100%;
    max-width:none;
    margin:0;
    padding:16px 12px calc(98px + env(safe-area-inset-bottom));
  }
  .glass-card{border-radius:20px}

  /* Titles */
  .mission-hero h1,.page-title h1,.weeks-hero h1,.badge-library-hero h1{
    font-size:clamp(28px,8.2vw,36px)!important;
    line-height:1.08!important;
    letter-spacing:-.02em;
  }
  .section-head h2,.journey-head h2,.engagement-copy h2,
  .collection-section h2,.home-games-copy h2{
    font-size:clamp(22px,6vw,27px)!important;
    line-height:1.15;
  }
  .eyebrow,.week-chip{
    font-size:12px!important;
    line-height:1.3;
    letter-spacing:.11em!important;
  }

  /* Base readable copy */
  .scripture-line,.step-intro,.scenario-card p,.mini-game-prompt,
  .engagement-copy>p,.principle-card p,.source-note,
  .week-road-copy>p,.badge-library-hero p,.collection-section .section-head p,
  .scripture-book-card small,.home-games-copy>p:not(.eyebrow){
    font-size:16px!important;
    line-height:1.55!important;
  }

  /* Mission hero: text first, emblem as a supporting visual */
  .mission-hero{
    grid-template-columns:minmax(0,1fr) 104px!important;
    align-items:start;
    padding:18px 16px!important;
    min-height:0;
  }
  .mission-emblem{
    position:static!important;
    width:104px!important;
    opacity:1!important;
    align-self:center;
    justify-self:end;
  }
  .mission-hero-copy{min-width:0}
  .stats-inline{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:7px 10px!important;
    font-size:14px!important;
    line-height:1.35;
  }
  .stats-inline a{
    grid-column:1/-1;
    width:max-content!important;
    max-width:100%;
    margin:4px 0 0!important;
    font-size:14px;
  }
  .progress-row{font-size:14px!important}
  .progress-track{height:11px}

  /* Today / constancy */
  .engagement-card{
    grid-template-columns:1fr!important;
    gap:14px!important;
    padding:16px!important;
  }
  .week-presence{padding:13px}
  .presence-head{font-size:14px!important}
  .presence-days{
    grid-template-columns:repeat(7,minmax(38px,1fr))!important;
    gap:6px!important;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .presence-days::-webkit-scrollbar{display:none}
  .presence-day{min-height:58px!important}
  .presence-day i{font-size:17px!important}
  .presence-day span{font-size:11px!important}
  .presence-note{font-size:13px!important;line-height:1.45!important}

  /* Reward milestones become a swipeable row instead of five cramped cards */
  .reward-track{padding:16px!important}
  .reward-track .section-head{gap:10px;align-items:flex-start}
  .reward-count{font-size:14px!important;min-width:52px;height:38px}
  .reward-milestones{
    display:flex!important;
    overflow-x:auto;
    gap:10px!important;
    scroll-snap-type:x mandatory;
    padding:4px 2px 10px;
    scrollbar-width:none;
  }
  .reward-milestones::-webkit-scrollbar{display:none}
  .reward-milestone{
    flex:0 0 min(78vw,280px);
    min-height:112px;
    padding:14px!important;
    scroll-snap-align:start;
    opacity:.66!important;
  }
  .reward-milestone.unlocked{opacity:1!important}
  .reward-milestone>span{flex-basis:42px;height:42px;font-size:20px}
  .reward-milestone strong{font-size:16px!important;line-height:1.35!important}
  .reward-milestone small{font-size:14px!important;line-height:1.45!important}

  /* HUELLAS Games card */
  .home-games-card{
    grid-template-columns:64px minmax(0,1fr)!important;
    gap:12px!important;
    padding:16px!important;
  }
  .home-games-symbol{width:58px!important;height:58px!important}
  .home-games-copy h2{font-size:24px!important}
  .home-games-copy>div span{font-size:12px!important;padding:6px 8px!important}
  .home-game-btn{
    grid-column:1/-1!important;
    width:100%!important;
    min-height:54px;
    font-size:16px!important;
  }

  /* Principles */
  .principles-panel{grid-template-columns:1fr!important;gap:10px!important}
  .principle-card{padding:14px!important;gap:11px!important}
  .principle-card span{min-width:38px;height:38px}
  .principle-card p{font-size:16px!important}

  /* Weekly journey becomes horizontal, readable, swipeable */
  .journey-map{padding:16px 14px 14px!important}
  .journey-head{align-items:flex-start!important}
  .journey-counter{font-size:14px;padding:7px 10px}
  .journey-route{
    display:flex!important;
    overflow-x:auto;
    gap:10px!important;
    padding:14px 2px 12px!important;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .journey-route::-webkit-scrollbar{display:none}
  .journey-route:before{display:none!important}
  .journey-stop{
    flex:0 0 126px;
    min-height:112px;
    padding:8px!important;
    scroll-snap-align:start;
    border-radius:16px;
    background:rgba(255,255,255,.025)!important;
    border:1px solid rgba(255,255,255,.06)!important;
    transform:none!important;
  }
  .journey-foot{width:54px!important;height:54px!important}
  .journey-stop small{font-size:11px!important}
  .journey-stop strong{
    font-size:14px!important;
    white-space:normal!important;
    overflow:visible!important;
    line-height:1.25;
    text-align:center;
  }
  .journey-hint{font-size:13px!important;line-height:1.45}

  /* Mission steps */
  .mission-path{gap:12px!important}
  .step-card{border-radius:20px}
  .step-head{
    grid-template-columns:48px minmax(0,1fr) auto 20px!important;
    gap:10px!important;
    padding:13px 12px!important;
    min-height:76px;
  }
  .step-node{width:44px!important;height:44px!important}
  .step-title-wrap small{font-size:11px!important}
  .step-title-wrap strong{font-size:18px!important;line-height:1.25!important}
  .xp-badge{font-size:13px!important;padding:5px 7px!important}
  .step-body{
    padding:0 12px 16px!important;
  }
  .scripture-box{
    align-items:flex-start!important;
    padding:13px!important;
    border-radius:15px!important;
  }
  .scripture-box strong{font-size:16px}
  .scripture-box p{font-size:15px!important;line-height:1.45!important}
  .btn,.complete-step{
    min-height:54px!important;
    padding:12px 16px!important;
    font-size:16px!important;
    border-radius:14px!important;
  }

  /* Decision mini-game */
  .mini-game{padding:14px!important;border-radius:18px!important}
  .mini-game-heading{align-items:flex-start!important}
  .mini-game-heading h3{font-size:24px!important;line-height:1.15}
  .mini-game-heading small{font-size:11px!important}
  .mini-game-icon{width:44px!important;height:44px!important}
  .scenario-card{padding:14px!important}
  .scenario-card>span{font-size:11px!important}
  .decision-options,.trace-options{gap:10px!important}
  .decision-option,.trace-option{
    min-height:58px;
    padding:12px!important;
    border-radius:14px!important;
    font-size:16px!important;
    line-height:1.45!important;
  }
  .decision-letter{flex-basis:36px;height:36px;font-size:15px}

  /* Standard questions */
  .question{margin:18px 0!important}
  .question legend{
    font-size:17px!important;
    line-height:1.5!important;
    margin-bottom:10px!important;
  }
  .option{
    min-height:56px;
    align-items:center!important;
    padding:12px!important;
    border-radius:14px!important;
    margin:8px 0!important;
    font-size:16px!important;
    line-height:1.45;
  }
  .option input{
    width:22px;height:22px;
    margin:0!important;
    flex:none;
  }

  /* Progressive question pager is mobile-only */
  .step-form.mobile-paged-questions .question{display:none}
  .step-form.mobile-paged-questions .question.mobile-question-current{display:block}
  .step-form.mobile-paged-questions .submit-step,
  .step-form.mobile-paged-questions .complete-step{display:none}
  .step-form.mobile-paged-questions.mobile-pager-last .submit-step,
  .step-form.mobile-paged-questions.mobile-pager-last .complete-step{display:inline-flex}
  .step-form.mobile-paged-questions .mobile-question-pager{display:block}

  /* Upcoming section */
  .upcoming-grid{grid-template-columns:1fr!important}
  .upcoming-grid article{padding:14px!important}
  .upcoming-grid strong{font-size:17px}
  .upcoming-grid small{font-size:14px!important}

  /* Weeks timeline */
  .weeks-hero{
    grid-template-columns:minmax(0,1fr) 82px!important;
    padding:18px 16px!important;
  }
  .weeks-hero p{font-size:16px!important;line-height:1.55!important}
  .calendar-orb{
    width:74px!important;height:74px!important;
    justify-self:end!important;
  }
  .calendar-orb strong{font-size:28px!important}
  .calendar-orb span{font-size:10px!important}
  .week-road-card{
    grid-template-columns:48px minmax(0,1fr)!important;
    gap:10px!important;
    padding:14px 12px 14px 2px!important;
    margin:10px 0!important;
  }
  .year-road:before{left:23px!important}
  .week-road-marker span{width:42px!important;height:42px!important}
  .week-road-meta{font-size:12px!important;letter-spacing:.06em!important}
  .week-road-copy h2{font-size:22px!important;line-height:1.2!important}
  .week-road-copy>p{font-size:15px!important}
  .week-road-actions{gap:8px!important}
  .state-pill,.ready-pill,.draft-pill{
    font-size:11px!important;
    padding:6px 8px!important;
  }
  .week-road-actions .btn{min-height:46px!important;font-size:14px!important}

  /* Collection hero */
  .badge-library-hero{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 94px;
    gap:12px!important;
    padding:18px 16px!important;
    align-items:start!important;
  }
  .badge-library-total{
    min-width:0!important;
    width:94px!important;
    padding:12px 8px!important;
    margin:0!important;
    border-radius:18px!important;
  }
  .badge-library-total strong{font-size:36px!important}
  .badge-library-total span{font-size:12px!important}
  .badge-library-total small{font-size:11px!important}

  /* Scripture library = vertical cards, not tiny 2-column boxes */
  .scripture-library-grid{
    display:flex!important;
    overflow-x:auto;
    gap:10px!important;
    padding:2px 1px 10px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .scripture-library-grid::-webkit-scrollbar{display:none}
  .scripture-book-card{
    flex:0 0 min(82vw,300px);
    min-height:92px!important;
    padding:14px!important;
    scroll-snap-align:start;
  }
  .scripture-book-icon{font-size:30px!important}
  .scripture-book-card strong{font-size:17px!important}
  .scripture-book-card small{font-size:14px!important;line-height:1.4!important}

  .collection-section{padding:16px 12px!important}
  .collection-section .section-head{gap:10px}
  .collection-ring{width:68px;height:68px;flex:none}
  .collection-ring strong{font-size:21px!important}

  /* 52 badges: 3 columns, larger text */
  .weekly-badge-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:18px 8px!important;
  }
  .badge-disc{
    width:min(23vw,88px)!important;
    height:min(23vw,88px)!important;
  }
  .badge-disc b{font-size:32px!important}
  .badge-medallion strong{
    font-size:14px!important;
    line-height:1.25!important;
    min-height:2.5em!important;
  }
  .badge-medallion small{
    font-size:11px!important;
    line-height:1.3!important;
  }
  .achievement-badge-grid{grid-template-columns:1fr!important}
  .achievement-badge{padding:14px!important}
  .achievement-badge strong{font-size:16px!important}
  .achievement-badge small{font-size:14px!important}
  .secret-badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .secret-badge{min-height:132px!important}
  .secret-badge strong{font-size:15px!important}
  .secret-badge small{font-size:11px!important}

  /* Bottom nav: readable labels, safe-area, no overlap */
  .bottom-nav{
    width:calc(100% - 12px)!important;
    left:6px!important;
    right:6px!important;
    transform:none!important;
    bottom:max(6px,env(safe-area-inset-bottom))!important;
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:0!important;
    padding:5px!important;
    border-radius:18px!important;
  }
  .nav-item{
    min-width:0!important;
    padding:7px 2px!important;
    gap:2px!important;
    border-radius:13px!important;
    font-size:11px!important;
    line-height:1.05!important;
  }
  .nav-icon{font-size:19px!important}
}

@media(max-width:390px){
  .brand-mini span{font-size:12px}
  .topbar-actions{gap:4px}
  .games-top-link,.notification-bell,.icon-btn,.huellas-text-size{
    min-width:36px;width:36px;height:36px;
  }
  .mission-hero{grid-template-columns:1fr 84px!important}
  .mission-emblem{width:84px!important}
  .weekly-badge-grid{gap:16px 6px!important}
  .nav-item{font-size:10.5px!important}
  .nav-icon{font-size:18px!important}
}

/* Reading comfort: larger, but with modules reflowing rather than stretching */
@media(max-width:760px){
  body.reading-comfort .step-title-wrap strong,
  body.reading-comfort .decision-option,
  body.reading-comfort .trace-option,
  body.reading-comfort .option,
  body.reading-comfort .week-road-copy>p,
  body.reading-comfort .scripture-book-card small{font-size:17px!important}

  body.reading-large .step-title-wrap strong,
  body.reading-large .decision-option,
  body.reading-large .trace-option,
  body.reading-large .option,
  body.reading-large .week-road-copy>p,
  body.reading-large .scripture-book-card small{font-size:18px!important}

  body.reading-large .question legend{font-size:19px!important}
  body.reading-large .mini-game-heading h3{font-size:27px!important}
  body.reading-large .mission-hero h1,
  body.reading-large .weeks-hero h1,
  body.reading-large .badge-library-hero h1{font-size:38px!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reward-milestones,.journey-route,.scripture-library-grid{scroll-behavior:auto}
}


/* ==========================================================
   HUELLAS · Sprint 3.1.1
   Mobile Layout Hotfix
   Fixes wrapping, overlap and component geometry on phones.
   ========================================================== */

@media(max-width:760px){

  /* Global anti-overflow */
  html,body{overflow-x:hidden!important}
  .app-shell,.badge-library-shell,.games-hub-shell,
  .glass-card,.collection-section,.scripture-book-card,
  .badge-medallion,.game-library,.game-feature-card,.game-secondary-card{
    min-width:0!important;
    max-width:100%!important;
  }
  h1,h2,h3,p,small,a{
    overflow-wrap:break-word;
    word-break:normal;
  }
  strong,span{
    overflow-wrap:normal;
    word-break:normal;
  }

  /* Topbar: prevent text controls from forcing width */
  .topbar{
    width:100%;
    max-width:100vw;
    overflow:hidden;
  }
  .brand-mini{min-width:0;flex:1}
  .brand-mini span{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .topbar-actions{
    flex:none;
    min-width:0;
  }

  /* Collection header */
  .collection-section>.section-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 68px!important;
    gap:12px!important;
    align-items:start!important;
  }
  .collection-section>.section-head>div{min-width:0}
  .collection-section>.section-head h2{
    margin-right:0!important;
    max-width:100%;
  }
  .collection-section>.section-head p{
    max-width:100%;
  }

  /* Ring must remain circular, not tall/oval */
  .collection-ring{
    width:64px!important;
    height:64px!important;
    min-width:64px!important;
    min-height:64px!important;
    flex:none!important;
    aspect-ratio:1/1!important;
    border-radius:50%!important;
    justify-self:end;
    align-self:start;
  }
  .collection-ring strong{
    font-size:22px!important;
    line-height:1!important;
  }
  .collection-ring span{
    font-size:12px!important;
    line-height:1!important;
  }

  /* Weekly collection spacing */
  .weekly-badge-grid{
    width:100%!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    column-gap:8px!important;
    row-gap:22px!important;
    align-items:start!important;
  }
  .badge-medallion{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    gap:5px!important;
  }
  .badge-disc{
    flex:none!important;
    aspect-ratio:1/1!important;
  }
  .badge-medallion strong{
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    margin-top:3px!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    hyphens:none!important;
  }
  .badge-medallion small{
    width:100%!important;
    white-space:normal!important;
    line-height:1.25!important;
    letter-spacing:.04em!important;
  }

  /* Collection page gets enough room above fixed nav */
  .badge-library-shell{
    padding-bottom:calc(128px + env(safe-area-inset-bottom))!important;
  }

  /* Game hub needs more room above bottom nav */
  .games-hub-shell{
    padding-bottom:calc(132px + env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
  }

  /* Smaller mobile hero headline: still premium but no giant wrapping */
  .games-hub-page .games-hero{
    min-height:0!important;
    padding:22px 18px!important;
    display:block!important;
  }
  .games-hub-page .games-hero-copy{
    width:100%!important;
    max-width:100%!important;
  }
  .games-hub-page .games-hero h1{
    font-size:clamp(38px,11vw,50px)!important;
    line-height:1.02!important;
    letter-spacing:-.035em!important;
    margin:.35rem 0 1rem!important;
    max-width:100%!important;
  }
  .games-hub-page .games-hero h1 br{
    display:none!important;
  }
  .games-hub-page .games-hero p{
    font-size:16px!important;
    line-height:1.55!important;
    max-width:100%!important;
  }
  .games-hub-page .games-hero-pills{
    gap:8px!important;
  }
  .games-hub-page .games-hero-pills span{
    font-size:13px!important;
    padding:7px 10px!important;
  }

  /* Game library: force true vertical flow */
  .games-hub-page .game-library{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:14px!important;
    grid-template-columns:none!important;
    align-items:stretch!important;
    overflow:visible!important;
  }

  .games-hub-page .game-feature-card,
  .games-hub-page .game-secondary-card{
    position:relative!important;
    inset:auto!important;
    float:none!important;
    clear:both!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    transform:none!important;
  }

  /* Main game card */
  .games-hub-page .game-feature-card{
    min-height:0!important;
    padding:22px 18px!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }
  .games-hub-page .game-feature-copy{
    width:100%!important;
    max-width:100%!important;
  }
  .games-hub-page .game-feature-copy h2{
    font-size:clamp(40px,12vw,54px)!important;
    line-height:.96!important;
    letter-spacing:-.035em!important;
    margin:.55rem 0 .9rem!important;
    max-width:100%!important;
  }
  .games-hub-page .game-feature-copy h2 br{
    display:none!important;
  }
  .games-hub-page .game-feature-copy p{
    max-width:100%!important;
    font-size:16px!important;
    line-height:1.55!important;
  }
  .games-hub-page .game-show-stats{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .games-hub-page .game-show-stats span{
    min-width:0!important;
    padding:10px!important;
  }
  .games-hub-page .game-tags{
    gap:7px!important;
    margin:16px 0!important;
  }
  .games-hub-page .game-tags span{
    font-size:13px!important;
    padding:7px 9px!important;
  }
  .games-hub-page .game-primary-cta{
    width:100%!important;
    min-height:54px!important;
    justify-content:center!important;
    font-size:15px!important;
  }

  /* Decorative stage must never collide with content */
  .games-hub-page .game-feature-stage{
    position:absolute!important;
    width:220px!important;
    height:220px!important;
    right:-78px!important;
    bottom:-82px!important;
    opacity:.23!important;
    pointer-events:none!important;
    z-index:1!important;
  }
  .games-hub-page .game-feature-logo{
    width:170px!important;
    max-height:170px!important;
  }
  .games-hub-page .game-feature-copy{
    position:relative!important;
    z-index:3!important;
  }

  /* Audience card */
  .games-hub-page .game-secondary-card{
    display:grid!important;
    grid-template-columns:50px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:start!important;
    padding:18px!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }
  .games-hub-page .game-secondary-card>span{
    font-size:30px!important;
    line-height:1!important;
    margin-top:4px;
  }
  .games-hub-page .game-secondary-card>div{
    min-width:0!important;
    width:100%!important;
  }
  .games-hub-page .game-secondary-card .eyebrow{
    font-size:11px!important;
    line-height:1.35!important;
    letter-spacing:.1em!important;
    margin:0 0 7px!important;
  }
  .games-hub-page .game-secondary-card h3{
    font-size:30px!important;
    line-height:1.05!important;
    margin:0 0 10px!important;
  }
  .games-hub-page .game-secondary-card p{
    font-size:16px!important;
    line-height:1.55!important;
    margin:0 0 12px!important;
  }
  .games-hub-page .game-secondary-card a{
    display:inline-flex!important;
    min-height:46px!important;
    align-items:center!important;
    font-size:15px!important;
    line-height:1.3!important;
  }

  .games-hub-page .game-principle-note{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:start!important;
    padding:16px!important;
  }
  .games-hub-page .game-principle-note strong{
    font-size:16px!important;
    line-height:1.35!important;
  }
  .games-hub-page .game-principle-note p{
    font-size:14px!important;
    line-height:1.5!important;
  }

  /* Bottom nav: slightly more compact on 6 items */
  .bottom-nav{
    min-height:72px!important;
    padding:5px 4px calc(5px + env(safe-area-inset-bottom))!important;
  }
  .nav-item{
    min-height:58px!important;
  }
  .nav-item span:last-child{
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media(max-width:380px){
  .games-hub-page .games-hero h1{
    font-size:38px!important;
  }
  .games-hub-page .game-feature-copy h2{
    font-size:40px!important;
  }
  .games-hub-page .game-secondary-card h3{
    font-size:27px!important;
  }
  .weekly-badge-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}


/* ==========================================================
   HUELLAS · Sprint 3.1.2
   Mobile Text & Ring Hotfix
   - Corrige “Demuestra” cortado
   - Corrige 0/52 en una sola línea y círculo real
   ========================================================== */
@media (max-width: 760px) {

  /* Ring de insignias: una sola línea dentro de un círculo real */
  .collection-section > .section-head{
    grid-template-columns: minmax(0,1fr) 78px !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .collection-ring{
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    min-height: 74px !important;
    max-width: 74px !important;
    max-height: 74px !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 999px !important;
    justify-self: end !important;
    align-self: start !important;

    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .collection-ring strong,
  .collection-ring span{
    display: inline !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .collection-ring strong{
    font-size: 28px !important;
    letter-spacing: -0.03em !important;
    margin: 0 !important;
  }

  .collection-ring span{
    font-size: 16px !important;
    margin: 0 !important;
    transform: translateY(1px) !important;
  }

  /* Un poco más de aire en el encabezado de la sección */
  .collection-section > .section-head h2{
    margin-bottom: 10px !important;
  }

  .collection-section > .section-head p{
    max-width: 100% !important;
  }
}

@media (max-width: 380px) {
  .collection-section > .section-head{
    grid-template-columns: minmax(0,1fr) 72px !important;
  }

  .collection-ring{
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
  }

  .collection-ring strong{
    font-size: 25px !important;
  }

  .collection-ring span{
    font-size: 14px !important;
  }
}



/* ==========================================================
   HUELLAS · Sprint 3.1.3
   Wordflow & Title Hotfix
   ========================================================== */
@media (max-width: 760px) {
  /* Evitar cortes internos de palabras en títulos grandes */
  .games-hero h1,
  .games-card h1,
  .games-card h2,
  .games-section h1,
  .games-section h2,
  .qqsmp-card h1,
  .qqsmp-card h2,
  .qqsmp-promo h1,
  .qqsmp-promo h2,
  .qqsmp-hero h1,
  .qqsmp-hero h2 {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-wrap: balance !important;
    max-width: 100% !important;
  }

  /* Hero HUELLAS Games: que "Demuestra" no se parta */
  .games-hero h1,
  .games-hub-page .games-hero h1,
  .games-page .games-hero h1 {
    font-size: clamp(28px, 8.2vw, 39px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.05em !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /* Si el color dorado está en un span separado, dar aire para que no se pegue */
  .games-hero h1 span + span,
  .games-hero h2 span + span {
    margin-left: 0.14em !important;
  }

  /* Tarjetas promocionales de Juegos */
  .games-promo-card h1,
  .games-promo-card h2,
  .qqsmp-card h1,
  .qqsmp-card h2,
  .qqsmp-promo h1,
  .qqsmp-promo h2 {
    font-size: clamp(27px, 8.9vw, 41px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: balance !important;
  }

  .games-promo-card h1 span + span,
  .games-promo-card h2 span + span,
  .qqsmp-card h1 span + span,
  .qqsmp-card h2 span + span,
  .qqsmp-promo h1 span + span,
  .qqsmp-promo h2 span + span {
    margin-left: 0.12em !important;
  }
}

@media (max-width: 380px) {
  .games-hero h1,
  .games-hub-page .games-hero h1,
  .games-page .games-hero h1 {
    font-size: clamp(26px, 7.7vw, 35px) !important;
  }

  .games-promo-card h1,
  .games-promo-card h2,
  .qqsmp-card h1,
  .qqsmp-card h2,
  .qqsmp-promo h1,
  .qqsmp-promo h2 {
    font-size: clamp(25px, 8.1vw, 35px) !important;
  }
}