/* One shell for all routes. Normal document flow is the no-JS fallback. */
.app-shell{
  max-width:1240px
}
.app-content{
  min-width:0
}
.app-nav{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:space-between
}
.app-nav-link{
  min-width:76px;
  min-height:56px;
  padding:8px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:14px;
  color:var(--color-muted-ink);
  text-decoration:none;
  font-size:.8rem;
  font-weight:750;
  transition:background 180ms ease,transform 180ms ease
}
.app-nav-link svg{
  width:23px;
  height:23px
}
.app-nav-link[aria-current=page]{
  color:var(--color-primary-ink);
  background:var(--color-primary-soft)
}
.app-nav-link:active{
  transform:scale(.96);
  background:var(--color-primary-soft)
}
.app-shell .header-tools>.performance-link{
  display:none
}
.app-icon-button,.app-game-exit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  border:1px solid var(--color-border);
  border-radius:14px;
  background:white;
  color:var(--color-primary-ink);
  padding:9px
}
.app-icon-button svg,.app-game-exit svg{
  width:23px;
  height:23px
}
.app-game-exit{
  margin-right:0
}
.app-setting-field{
  display:grid;
  gap:8px;
  font-weight:700
}
.app-settings .app-dialog-body{
  display:grid;
  gap:16px
}
.app-profile-name{
  font-weight:800;
  overflow-wrap:anywhere
}
.app-settings p{
  margin:0
}
.app-section-tabs{
  display:flex;
  gap:5px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  background:var(--color-background);
  padding:6px 0 10px;
  min-height:54px
}
.app-section-tabs button{
  min-height:44px;
  border:1px solid var(--color-border);
  background:#fff;
  border-radius:12px;
  color:var(--color-muted-ink);
  padding:8px 13px;
  font-size:.9rem;
  font-weight:700;
  white-space:nowrap
}
.app-section-tabs [aria-pressed=true]{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#fff
}
.app-section-inactive{
  display:none!important
}
.app-section-tabs:focus-within{
  z-index:8
}
.app-profile-card{
  padding:22px;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:22px;
  margin:16px 0;
  display:grid;
  gap:16px
}
.app-profile-card h2,.app-profile-card p{
  margin:0
}
.app-profile-card a{
  justify-self:start
}
.app-page-title{
  font-size:clamp(1.6rem,5vw,2.3rem);
  margin:14px 0 10px
}
.app-page-lead{
  color:var(--color-muted-ink);
  line-height:1.65
}
.app-suggested-title{
  margin:20px 0 12px
}
.app-dialog-body{
  min-width:0
}
.app-dialog-actions:empty{
  display:none
}
.app-dialog-actions{
  display:grid;
  gap:8px
}
.app-dialog-actions button{
  margin:0!important;
  min-height:44px
}
.app-dialog-actions #reward-save-status:empty{
  display:none
}
.app-dialog-actions #reward-save-status{
  margin:0
}
.app-shell progress{
  display:block;
  width:100%;
  height:5px;
  border:0;
  border-radius:4px;
  overflow:hidden;
  accent-color:var(--color-secondary);
  background:#DCE4F0
}
.app-shell progress::-webkit-progress-bar{
  background:#DCE4F0
}
.app-shell progress::-webkit-progress-value{
  background:#5B5FF8
}
.app-shell progress::-moz-progress-bar{
  background:#5B5FF8
}
@media(min-width:901px){
  .app-ready .app-shell{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto 1fr;
    column-gap:24px;
    align-items:start
  }
  .app-shell>.site-header{
    grid-column:1;
    grid-row:1;
    border:0;
    padding:4px 0 20px
  }
  .app-nav{
    grid-column:2;
    grid-row:1
  }
  .app-content{
    grid-column:1/-1;
    border-top:1px solid var(--color-border);
    padding-top:16px
  }
  .app-shell .brand-tagline{
    display:none
  }
  .app-shell .header-tools{
    gap:8px
  }
  .app-shell .brand-games{
    display:none
  }
  .app-game-exit{
    display:none
  }
  .app-content>.app-section-tabs{
    position:sticky;
    top:0;
    z-index:8
  }
  .app-ranking-scroll{
    min-width:0
  }
}
@media(max-width:900px), (pointer:coarse){
  html.app-ready{
    scroll-padding-top:0
  }
  .app-contained{
    overflow:hidden
  }
  .app-ready .app-shell{
    position:fixed;
    top:var(--app-offset,0px);
    inset-inline:0;
    width:100%;
    max-width:none;
    height:100vh;
    height:100dvh;
    height:var(--app-height,100dvh);
    padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);
    margin:0;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:0;
    isolation:isolate
  }
  .app-shell>.site-header{
    grid-row:1;
    min-width:0;
    min-height:56px;
    padding:5px 12px;
    gap:8px;
    background:#fff;
    border-bottom:1px solid var(--color-border)
  }
  .app-shell .brand{
    gap:7px;
    min-width:0;
    flex-shrink:1
  }
  .app-shell .brand-symbol{
    width:30px;
    height:30px
  }
  .app-shell .brand-name{
    font-size:18px;
    letter-spacing:-.5px
  }
  .app-shell .brand-games,.app-shell .brand-tagline,.app-shell .header-tools>.language-picker{
    display:none
  }
  .app-shell .header-tools{
    flex-wrap:nowrap;
    gap:6px;
    flex-shrink:0
  }
  .app-shell .player-access{
    width:auto
  }
  .app-shell .player-access button{
    min-height:44px;
    font-size:.85rem;
    padding:8px 10px
  }
  .app-shell #player-name{
    max-width:min(24vw,140px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .app-shell #player-name-text{
    white-space:nowrap
  }
  .app-content{
    grid-row:2;
    min-height:0;
    overflow:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
    padding:12px;
    scroll-padding-block:12px 24px;
    overflow-wrap:anywhere
  }
  .app-nav{
    grid-row:3;
    min-height:66px;
    gap:2px;
    padding:4px 8px max(4px,env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--color-border);
    background:#fff;
    box-shadow:0 -3px 20px #1F294008;
    z-index:10
  }
  .app-nav-link{
    flex:1;
    min-width:0;
    min-height:54px;
    padding:5px 2px;
    font-size:.78rem
  }
  .app-nav-link svg{
    width:23px;
    height:23px
  }
  .app-content>.site-footer{
    margin-top:20px;
    padding-block:14px
  }
  .app-content>.app-section-tabs{
    position:sticky;
    top:-12px;
    z-index:9;
    margin-inline:-2px;
    padding-top:8px
  }
  .app-content>.dashboard-heading{
    padding:4px 0 8px
  }
  .dashboard-heading h1{
    font-size:1.6rem
  }
  .dashboard-heading .dashboard-play,.dashboard-heading .back-link,.dashboard-heading>div>p{
    display:none
  }
  .dashboard-heading .owner-chip{
    margin-top:5px;
    font-size:.85rem
  }
  .dashboard-filters{
    margin:12px 0
  }
  .dashboard-filters select{
    font-size:1rem
  }
  .metric-grid{
    gap:10px
  }
  .metric-card{
    min-height:0;
    padding:16px
  }
  .metric-card small,.metric-label,.panel-note{
    font-size:.85rem
  }
  .metric-card strong{
    font-size:1.75rem
  }
  .panel h2{
    font-size:1.1rem
  }
  .source-note{
    font-size:.85rem
  }
  .chart-wrap{
    width:100%;
    min-width:0
  }
  .charts-grid,.details-grid,.learning-summary{
    min-width:0
  }
  .learning-summary article{
    min-width:0
  }
  .table-scroll{
    overflow:visible
  }
  .history-panel table,.history-panel tbody,.history-panel tr,.history-panel td{
    display:block;
    width:100%;
    min-width:0
  }
  .history-panel thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0)
  }
  .history-panel tbody{
    display:grid;
    gap:12px
  }
  .history-panel tr{
    padding:12px;
    background:var(--color-background);
    border:1px solid var(--color-border);
    border-radius:16px
  }
  .history-panel td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    white-space:normal;
    text-align:right;
    padding:7px 0;
    border:0;
    font-size:.85rem;
    overflow-wrap:anywhere
  }
  .history-panel td::before{
    content:attr(data-label);
    font-weight:650;
    color:var(--color-muted-ink);
    text-align:left
  }
  .history-panel td[colspan]::before{
    content:none
  }
  .pagination{
    flex-wrap:wrap
  }
  .pagination button{
    min-height:44px
  }
  .pagination span{
    font-size:.85rem
  }
  .app-shell .catalog{
    grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
    gap:14px
  }
  .app-shell .game-card .game-art{
    aspect-ratio:2.5;
    max-height:160px
  }
  .app-shell .game-card .card-copy{
    padding:16px
  }
  .app-shell .card-title h2{
    font-size:1.5rem
  }
  .app-shell .card-copy p,.app-shell .card-meta{
    font-size:.9rem;
    line-height:1.55
  }
  .app-shell .card-description{
    margin:8px 0 14px
  }
  .app-shell .game-card .card-meta{
    margin-bottom:14px
  }
  .app-shell .game-card:hover{
    transform:none
  }
  /* The home is a compact overview;
  details remain available in Progresso. */
  [data-app-page=home] .rhythm-card{
    margin:0 0 12px;
    padding:16px;
    border-radius:22px
  }
  [data-app-page=home] .rhythm-top{
    gap:12px;
    align-items:center
  }
  [data-app-page=home] .rhythm-count{
    font-size:2rem
  }
  [data-app-page=home] .rhythm-network{
    width:84px;
    height:78px;
    flex-shrink:0
  }
  [data-app-page=home] .rhythm-today{
    font-size:.9rem;
    line-height:1.45
  }
  [data-app-page=home] .rhythm-invitation{
    display:none
  }
  [data-app-page=home] .rhythm-meta{
    font-size:.82rem;
    gap:4px;
    margin-top:8px
  }
  [data-app-page=home] .rhythm-meta>span:not(:last-child){
    display:none
  }
  [data-app-page=home] .rhythm-bottom{
    margin-top:12px;
    gap:10px;
    flex-wrap:wrap
  }
  [data-app-page=home] .rhythm-coins{
    font-size:.82rem
  }
  [data-app-page=home] .rhythm-calendar{
    margin-block:12px 0
  }
  [data-app-page=home] .ranking-card{
    padding:14px 16px;
    margin:0 0 12px;
    border-radius:20px
  }
  [data-app-page=home] .ranking-heading h2{
    font-size:1.1rem
  }
  [data-app-page=home] .ranking-summary{
    margin:10px 0;
    gap:6px 14px;
    font-size:.85rem
  }
  [data-app-page=home] .ranking-own-position{
    font-size:1rem
  }
  [data-app-page=home] .ranking-summary>span:last-child,[data-app-page=home] .ranking-gap{
    display:none
  }
  [data-app-page=home] .ranking-card .secondary{
    min-height:44px;
    padding:8px 12px;
    font-size:.85rem
  }
  [data-app-page=home] .game-card{
    display:grid;
    grid-template-columns:94px minmax(0,1fr)
  }
  [data-app-page=home] .game-art{
    height:100%;
    max-height:none!important;
    aspect-ratio:auto!important
  }
  [data-app-page=home] .game-art img{
    object-fit:cover
  }
  [data-app-page=home] .card-title{
    margin:0
  }
  [data-app-page=home] .game-subtitle,[data-app-page=home] .card-description,[data-app-page=home] .card-meta,[data-app-page=home] .category-badge{
    display:none
  }
  [data-app-page=home] .card-copy{
    gap:10px
  }
  [data-app-page=home] .play-button{
    margin-top:0;
    font-size:.9rem;
    padding:10px 12px
  }
  [data-app-page=home] .app-suggested-title{
    font-size:1rem;
    margin:18px 0 10px
  }
  /* Ranking summary is fixed;
  each chosen section has ONE scroll surface. */
  [data-app-page=ranking] .app-content{
    overflow:hidden;
    padding-bottom:0;
    display:flex;
    flex-direction:column
  }
  [data-app-page=ranking] .ranking-page{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    overflow:visible
  }
  [data-app-page=ranking] .ranking-heading{
    gap:6px
  }
  [data-app-page=ranking] .ranking-heading h1{
    font-size:1.45rem
  }
  [data-app-page=ranking] .ranking-period{
    font-size:.8rem;
    margin:6px 0
  }
  [data-app-page=ranking] .ranking-summary{
    font-size:.85rem;
    margin:8px 0;
    gap:6px 14px
  }
  [data-app-page=ranking] .ranking-own-position{
    font-size:1.05rem
  }
  [data-app-page=ranking] .ranking-gap{
    font-size:.85rem;
    margin:0 0 5px
  }
  [data-app-page=ranking] .app-section-tabs{
    flex-shrink:0
  }
  [data-app-page=ranking] .app-ranking-scroll{
    overflow:auto;
    min-height:0;
    flex:1;
    overscroll-behavior-y:contain;
    scroll-padding-block:12px;
    padding:0 2px 20px;
    -webkit-overflow-scrolling:touch
  }
  [data-app-page=ranking] .ranking-section{
    margin:14px 0
  }
  .ranking-podium{
    gap:8px
  }
  .podium-card{
    padding:14px 8px
  }
  .podium-medal{
    width:38px;
    height:42px
  }
  .ranking-row{
    min-height:60px
  }
  .ranking-history select{
    font-size:1rem
  }
  .ranking-section h2{
    font-size:1.1rem
  }
  /* The game replaces bottom navigation with its existing answer controls. */
  [data-app-page=game]>.app-nav{
    display:none
  }
  [data-app-page=game]{
    grid-template-rows:auto minmax(0,1fr);
    padding-bottom:env(safe-area-inset-bottom,0px)
  }
  [data-app-page=game] .brand-symbol{
    display:none
  }
  [data-app-page=game] .site-header{
    min-height:52px;
    padding-inline:8px
  }
  [data-app-page=game] .app-content{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:6px;
    overflow:auto;
    scrollbar-gutter:auto
  }
  [data-app-page=game] .pulse-back,[data-app-page=game] .site-footer,[data-app-page=game] #storage-note{
    display:none
  }
  [data-app-page=game] .pulse-intro{
    flex:0 0 auto;
    margin:0;
    padding:0 4px;
    gap:10px;
    min-height:34px
  }
  [data-app-page=game] .pulse-intro .eyebrow{
    display:none
  }
  [data-app-page=game] .pulse-intro h1{
    font-size:1.2rem
  }
  [data-app-page=game] .pulse-intro .cycle-progress{
    width:min(50%,240px)
  }
  [data-app-page=game] .global-balance{
    margin:0;
    font-size:.85rem
  }
  [data-app-page=game] .game{
    flex:1 0 420px;
    min-height:0;
    display:grid;
    grid-template-rows:auto minmax(128px,1fr) auto;
    overflow:visible;
    border-radius:18px;
    box-shadow:none
  }
  [data-app-page=game] #circuit{
    height:auto!important;
    min-height:128px;
    border-radius:0;
    align-self:stretch
  }
  [data-app-page=game] .toolbar{
    padding:4px 6px;
    min-height:48px
  }
  [data-app-page=game] .toolbar button{
    min-height:44px;
    font-size:.85rem;
    padding:7px 8px
  }
  [data-app-page=game] .toolbar .game-controls{
    gap:4px;
    flex-wrap:nowrap
  }
  [data-app-page=game] .life-sound-controls{
    gap:3px
  }
  [data-app-page=game] .life-icons{
    gap:1px
  }
  [data-app-page=game] .life-icons span{
    font-size:23px;
    width:19px
  }
  [data-app-page=game] #restart{
    font-size:0;
    min-width:44px
  }
  [data-app-page=game] #restart::before{
    content:'↻';
    font-size:1.4rem
  }
  [data-app-page=game] #finish{
    font-size:.8rem;
    padding-inline:7px
  }
  [data-app-page=game] #answer-form{
    position:static;
    max-width:none;
    padding:6px;
    border-radius:0 0 18px 18px;
    background:#fff;
    z-index:5
  }
  [data-app-page=game] .answer-row{
    max-width:none!important;
    gap:6px
  }
  [data-app-page=game] #answer{
    min-height:44px;
    font-size:20px;
    padding:6px
  }
  [data-app-page=game] .keypad{
    max-width:none;
    margin-top:4px;
    gap:4px;
    padding:4px
  }
  [data-app-page=game] .keypad button{
    min-height:44px;
    font-size:20px
  }
  [data-app-page=game] .keypad [data-key=clear],[data-app-page=game] .keypad-submit{
    font-size:.85rem!important
  }
  [data-app-page=game] .input-caption{
    margin:0;
    font-size:.82rem;
    line-height:1.4
  }
  [data-app-page=game] #feedback:empty{
    display:none
  }
  [data-app-page=game] #feedback:not(:empty){
    max-height:2.8em;
    overflow:auto
  }
  [data-app-page=game] .welcome{
    overflow:auto;
    padding:8px;
    gap:8px
  }
  [data-app-page=game] .welcome .pulse-emblem,[data-app-page=game] .welcome small{
    display:none
  }
  [data-app-page=game] .welcome h2{
    font-size:1.1rem;
    line-height:1.25
  }
  [data-app-page=game] .welcome p{
    position:absolute;
    width:1px;
    height:1px;
    clip:rect(0,0,0,0);
    overflow:hidden;
    margin:0
  }
  [data-app-page=game] .welcome .primary{
    min-height:44px;
    padding:8px 14px;
    font-size:1rem
  }
  /* Top-layer dialogs follow the visible keyboard viewport, not the layout viewport. */
  dialog[open]{
    position:fixed;
    top:calc(var(--app-offset,0px) + max(10px,env(safe-area-inset-top,0px)));
    bottom:auto;
    margin:0 auto;
    width:min(460px,calc(100% - 20px));
    max-height:calc(100vh - 20px);
    max-height:calc(var(--app-height,100dvh) - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    padding:14px;
    display:flex;
    flex-direction:column;
    overflow:visible;
    border-radius:22px
  }
  dialog .dialog-heading{
    flex:0 0 auto;
    gap:8px;
    padding-bottom:10px
  }
  dialog .dialog-heading h2{
    font-size:1.2rem
  }
  dialog .dialog-heading button{
    min-width:44px;
    min-height:44px
  }
  .app-dialog-body{
    min-height:0;
    overflow:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    padding:2px 4px 8px;
    scroll-padding-block:12px
  }
  .app-dialog-actions{
    flex:0 0 auto;
    border-top:1px solid var(--color-border);
    padding-top:10px
  }
  .app-dialog-body p{
    font-size:.9rem;
    line-height:1.55
  }
  .auth-tabs{
    margin-block:12px
  }
  .auth-tabs button{
    font-size:.9rem
  }
  #player-form label{
    font-size:.9rem;
    margin-top:12px
  }
  #auth-submit{
    position:sticky;
    bottom:0;
    box-shadow:0 -5px 15px #fff
  }
  .pin-note{
    font-size:.8rem
  }
  .reward-dialog{
    padding:14px!important
  }
  .reward-dialog h2{
    margin:8px 0;
    font-size:1.3rem
  }
  .reward-orbit{
    width:44px;
    height:44px;
    border-radius:14px
  }
  .reward-orbit span{
    font-size:1.7rem
  }
  #reward-points{
    font-size:2rem
  }
  .reward-dialog p{
    margin-block:8px
  }
  .reward-dialog .reward-total{
    font-size:.9rem
  }
  #reward-rhythm .rhythm-network{
    height:68px;
    width:115px
  }
  #reward-rhythm-days{
    font-size:2rem
  }
  .reward-dialog .ranking-celebration{
    padding:4px 0;
    margin:0;
    border:0
  }
  .reward-dialog .ranking-celebration h3{
    font-size:1.1rem;
    margin:6px 0
  }
  .reward-dialog .ranking-row{
    min-height:48px;
    padding:8px
  }
  .reward-dialog .ranking-list{
    gap:6px;
    margin:8px 0
  }
  .reward-dialog .ranking-achievement-badge{
    width:34px;
    height:38px;
    font-size:1rem
  }
  .reward-dialog .ranking-gain{
    font-size:1rem;
    margin:8px 0
  }
  .reward-dialog .ranking-you{
    font-size:.75rem
  }
  .app-shell #account-status:not(:empty){
    position:absolute;
    z-index:15;
    inset-inline:12px;
    bottom:calc(72px + env(safe-area-inset-bottom,0px));
    margin:0;
    max-height:25%;
    overflow:auto;
    padding:12px 16px;
    border:1px solid #E5B9C8;
    border-radius:14px;
    background:#FFF6FA;
    color:#82334D;
    font-size:.9rem;
    box-shadow:var(--shadow-soft)
  }
  [data-app-page=game] #account-status:not(:empty){
    bottom:12px
  }
  /* Accessibility wins over a fixed viewport. Nothing essential is clipped. */
  .app-accessible .app-shell{
    position:relative;
    top:auto;
    height:auto;
    min-height:100svh;
    grid-template-rows:auto auto auto
  }
  .app-accessible .app-content{
    overflow:visible;
    min-height:0
  }
  .app-accessible .app-nav{
    position:sticky;
    bottom:0
  }
  .app-accessible .app-shell>.site-header{
    position:sticky;
    top:0;
    z-index:12
  }
  .app-accessible [data-app-page=ranking] .ranking-page{
    display:block
  }
  .app-accessible [data-app-page=ranking] .app-ranking-scroll{
    overflow:visible;
    max-height:none
  }
  .app-accessible [data-app-page=game] .game{
    min-height:480px;
    flex:none
  }
  .app-accessible dialog[open]{
    max-height:calc(var(--app-height,100dvh) - 20px);
    top:calc(var(--app-offset,0px) + 10px)
  }
  .app-accessible .app-content>.app-section-tabs{
    position:static
  }
}
@media(max-width:360px){
  .app-shell .brand-name{
    font-size:16px
  }
  .app-shell .header-tools{
    gap:4px
  }
  .app-shell .player-access button{
    padding-inline:7px
  }
  .app-nav-link{
    font-size:.75rem
  }
  .app-profile-card{
    padding:16px
  }
  .app-shell .life-icons span{
    width:17px;
    font-size:22px
  }
  .app-shell .toolbar button{
    padding-inline:6px
  }
}
@media(max-height:650px) and (max-width:900px){
  .app-shell>.site-header{
    min-height:50px
  }
  .app-nav{
    min-height:58px
  }
  .app-nav-link{
    min-height:48px
  }
  .app-content{
    padding:8px
  }
  .app-shell .rhythm-card{
    padding:12px
  }
  .app-shell .rhythm-top{
    gap:8px
  }
  .app-shell[data-app-page=home] .rhythm-network{
    width:68px;
    height:60px
  }
  .app-shell[data-app-page=game] .game{
    flex-basis:410px
  }
  .app-shell[data-app-page=game] #feedback{
    font-size:.8rem
  }
  .app-shell .ranking-gap{
    display:none
  }
}
@media(prefers-reduced-motion:reduce){
  .app-nav-link{
    transition:none
  }
  .app-nav-link:active{
    transform:none
  }
}
@media(max-width:900px), (pointer:coarse){
  [data-app-page=home] .rhythm-top{
    grid-template-columns:minmax(0,1fr) 78px
  }
  .app-shell .rhythm-calendar{
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:3px;
    overflow:visible
  }
  .app-shell .rhythm-day{
    min-width:0;
    min-height:48px;
    padding:4px 0
  }
  .app-shell .rhythm-day small{
    font-size:.75rem
  }
  .app-shell .rhythm-calendar-wrap{
    margin-top:10px
  }
  .app-shell .rhythm-day-detail{
    font-size:.82rem
  }
  .app-shell .rhythm-stats{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))
  }
  .app-shell .rhythm-stat span{
    font-size:.85rem
  }
  .app-shell .rhythm-month-label input{
    max-width:100%;
    font-size:1rem
  }
  .app-shell .rhythm-milestones{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))
  }
  .app-shell .rhythm-milestones small{
    font-size:.8rem
  }
  .app-shell[data-app-page=home] .game-card{
    grid-template-columns:84px minmax(0,1fr)
  }
  .app-shell[data-app-page=home] .section-heading{
    gap:10px;
    margin-bottom:12px
  }
  .app-shell[data-app-page=home] .text-link{
    font-size:.85rem
  }
}
@media(max-width:900px), (pointer:coarse){
  [data-app-page=game] #finish{
    display:none
  }
  .app-accessible [data-app-page=game] .toolbar .game-controls{
    flex-wrap:wrap
  }
  [data-app-page=game] .keypad-submit{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    line-height:1.3!important
  }
  [data-app-page=game] .keypad-submit>span:first-child{
    font-size:1.5rem
  }
}
.app-notice-close{
  display:none
}
@media(max-width:900px), (pointer:coarse){
  .app-shell #account-status:not(:empty){
    padding-right:60px
  }
  .app-shell .app-notice-close:not([hidden]){
    display:flex;
    position:absolute;
    z-index:16;
    right:18px;
    bottom:calc(78px + env(safe-area-inset-bottom,0px));
    background:#FFF6FA;
    border:0;
    color:#82334D;
    font-size:1.5rem
  }
  .app-shell[data-app-page=game] .app-notice-close:not([hidden]){
    bottom:18px
  }
}
/* A native keyboard can also be opened on a large tablet or a hybrid desktop. */
.app-keyboard dialog[open]{
  position:fixed;
  top:calc(var(--app-offset,0px) + 10px);
  bottom:auto;
  margin-block:0;
  max-height:calc(var(--app-height,100dvh) - 20px);
  display:flex;
  flex-direction:column;
  overflow:visible
}
.app-keyboard .app-dialog-body{
  min-height:0;
  overflow:auto
}
.app-keyboard .app-dialog-actions{
  flex:0 0 auto
}
@media(max-width:900px), (pointer:coarse){
  .app-shell>.site-header{
    grid-column:1;
    align-items:center
  }
  .app-shell>.app-content{
    grid-column:1
  }
  .app-shell>.app-nav{
    grid-column:1
  }
}
.reward-dialog.showing-ranking .reward-orbit{
  display:none
}
@media(max-width:900px), (pointer:coarse){
  .app-accessible .app-shell>.site-header{
    top:env(safe-area-inset-top,0px)
  }
  .app-accessible .app-shell>.app-nav{
    grid-row:2;
    position:sticky;
    top:calc(var(--app-header-height,56px) + env(safe-area-inset-top,0px));
    bottom:auto
  }
  .app-accessible .app-shell>.app-content{
    grid-row:3
  }
}
@media(max-width:900px), (pointer:coarse){
  .app-accessible .app-shell #account-status:not(:empty){
    position:static;
    max-height:none;
    padding-right:16px;
    margin:12px 0
  }
  .app-accessible .app-notice-close{
    display:none!important
  }
}
/* Confirmed player summary: mobile only; the game keeps its immersive header. */
.mobile-player-metric,.mobile-game-symbol{display:none}
/* One account-owned streak badge is reused by phone, tablet and desktop headers. */
.app-shell .header-rhythm{--metric-color:#843C11;--metric-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;min-width:44px;padding:4px 8px;border:1px solid #EEC18B;border-radius:999px;color:#843C11;background:#FFF0D6;font-size:.875rem;font-weight:800;line-height:1.3;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:0 2px 8px #FF9F4318;flex-shrink:0}
.app-shell .header-rhythm[hidden]{display:none!important}
.app-shell .header-rhythm .mobile-metric-icon{font-size:1.25rem;line-height:1;flex-shrink:0}
.app-shell .header-rhythm:focus-visible{outline:3px solid #843C11;outline-offset:3px}

@media(max-width:900px), (pointer:coarse){
  .app-shell .header-tools>.app-icon-button{display:none}
  .mobile-header-active>.site-header{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:0;padding-inline:8px}
  .mobile-header-active>.site-header>.brand{width:44px;min-width:44px;height:44px;flex:0 0 44px;justify-content:center;justify-self:center}
  .mobile-header-active .brand-copy,.mobile-header-active .brand-symbol{display:none}
  .mobile-header-active .mobile-game-symbol{display:block;width:32px;height:32px;padding:5px;border-radius:11px;color:var(--color-primary);background:#EEF0FC}
  .mobile-header-active .mobile-metric-icon svg{width:20px;height:20px;display:block}
  .mobile-header-active .header-tools{display:grid;grid-template-columns:minmax(max-content,1fr) minmax(max-content,1fr) minmax(44px,1fr);width:100%;min-width:0;gap:4px;align-items:center;justify-items:center}
  .mobile-header-active .header-tools>.performance-link,.mobile-header-active .header-tools>.language-picker{display:none}
  .mobile-header-active .mobile-player-metric{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:44px;padding:4px;color:var(--metric-color,var(--color-text));text-decoration:none;border-radius:var(--metric-radius,12px);white-space:nowrap;font-size:.875rem;font-weight:800;font-variant-numeric:tabular-nums;flex:0 1 auto}
  .mobile-header-active .mobile-rhythm{padding-inline:8px}.mobile-header-active .mobile-coins{font-weight:650;color:#536078}
  .mobile-header-active .mobile-coins .mobile-metric-icon{color:var(--color-primary)}
  .mobile-header-active .mobile-metric-icon{font-size:1.1rem;flex-shrink:0}
  .mobile-header-active .player-access{width:100%;margin-left:0;min-width:0;justify-content:center}
  .mobile-header-active #player-name{display:flex;align-items:center;gap:5px;min-width:44px;min-height:44px;max-width:100%;padding-inline:8px;overflow:hidden;font-size:.875rem;font-weight:650;background:transparent;border-color:transparent;color:#536078}
  .mobile-header-active #player-name[hidden]{display:none}
  .mobile-header-active #player-name-text{overflow:hidden;text-overflow:ellipsis;min-width:0;white-space:nowrap}
  .mobile-header-active #player-name::after{content:'▾';flex-shrink:0;font-size:.8rem}
}
@media(max-width:360px){.mobile-header-active .header-tools{gap:2px}.mobile-header-active #player-name{padding-inline:5px}.mobile-header-active .mobile-player-metric{padding-inline:2px;gap:3px}}

@media(max-width:360px){.mobile-header-active .mobile-rhythm{padding-inline:6px}.mobile-header-active .mobile-coins{padding-inline:2px}.mobile-header-active .mobile-coins .mobile-metric-icon svg{width:18px;height:18px}}

/* Any game can return to the existing application shell after a saved result. */
.app-shell.app-result-view .app-game-exit,.app-shell.app-result-view .pulse-back{display:none!important}
.app-shell .mobile-player-metric[hidden]{display:none!important}
.app-shell.app-result-view .mobile-coins{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;min-width:44px;padding:4px;color:#536078;font-size:.875rem;font-weight:650;white-space:nowrap;text-decoration:none}
.app-shell.app-result-view .mobile-coins svg{display:block;width:20px;height:20px;color:var(--color-primary)}
@media(max-width:900px),(pointer:coarse){
  .app-shell.app-result-view{grid-template-rows:auto minmax(0,1fr) auto;padding-bottom:0}
  .app-shell.app-result-view>.app-nav{display:flex}
  .app-shell.app-result-view>.site-header{min-height:56px}
  .app-shell.app-result-view #account-status:not(:empty){bottom:calc(74px + env(safe-area-inset-bottom,0px))}
}
/* Shared last-played game picker. Fits the existing 44px header slot. */
.app-shell .game-switcher-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;padding:3px;border:1px solid #dce3f0;border-radius:14px;background:#fff;box-shadow:0 3px 10px #1f294008;cursor:pointer}.game-switcher-logo{display:block;width:36px;height:36px;object-fit:contain}.game-switcher-neutral{width:27px;height:27px;color:#5b5ff8}.game-switcher-caret{position:absolute;right:-2px;bottom:-1px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#fff;color:#4549ce;font:800 12px/1 sans-serif;border:1px solid #e2e6f0}.game-switcher-trigger:focus-visible{outline:3px solid #5b5ff8;outline-offset:3px}.game-switcher-menu{position:fixed;z-index:90;width:min(320px,calc(100vw - 24px));padding:8px;border:1px solid #dfe6f0;border-radius:22px;background:#fff;box-shadow:0 14px 42px #1f294024;overflow:auto;overscroll-behavior:contain;animation:game-menu-enter .16s ease-out}.game-switcher-menu[hidden]{display:none!important}.game-switcher-heading{margin:7px 10px 9px;color:#58657d;font:700 .8rem var(--font-body)}.game-switcher-item{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:11px;border:1px solid transparent;border-radius:16px;background:transparent;color:#1f2940;text-align:start;box-shadow:none}.game-switcher-item:hover,.game-switcher-item:focus-visible{background:#f4f6fe;border-color:#dfe1ff}.game-switcher-item.is-last-played{background:#f3f5fe}.game-switcher-item .game-switcher-logo{width:42px;height:42px}.game-switcher-copy{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.game-switcher-copy strong{font:650 .98rem var(--font-heading)}.game-switcher-last{font-size:.73rem;color:#53617b}.game-switcher-next{font-size:1.4rem;color:#7a86a0}.desktop-layout .site-header>.brand.game-switcher-trigger{display:inline-flex;order:-1}.mobile-header-active>.site-header>.game-switcher-trigger{justify-self:center}@keyframes game-menu-enter{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.game-switcher-menu{animation:none}}
.game-switcher-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-switcher-item img{flex-shrink:0}