/* Ponte histórico ↔ jogo: o mesmo dock do app, o recap de 2026 e o selo "2026" nos rankings. Só tokens do DS Galeria. */
#app { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

.dock { position: fixed; z-index: 40; left: var(--space-8); right: var(--space-8); bottom: calc(var(--space-8) + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-l); background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.3); backdrop-filter: blur(var(--blur-glass)) saturate(1.3); box-shadow: var(--elevation-2); }
.dock__i { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: var(--space-4); border-radius: var(--radius-m); color: var(--text-support); text-decoration: none; transform: scale(var(--z, 1)); transform-origin: 50% 100%; transition: transform var(--duration-fast) var(--ease-soft), background-color var(--duration-fast) var(--ease-dry); }
.dock__i:active { transform: scale(.94); }
.dock__ico { display: grid; place-items: center; width: 28px; height: 28px; }
.dock__t { font-size: .75rem; line-height: 1rem; font-weight: 500; }
.dock__i[aria-current="page"] { color: var(--text-primary); background: var(--surface-hover-deep); }
.dock__i[aria-current="page"] .dock__ico { color: var(--platform-text); }
@media (min-width: 640px) {
  .dock { left: 50%; right: auto; transform: translateX(-50%); width: min(520px, calc(100% - var(--space-32))); border-radius: var(--radius-pill); padding: var(--space-4) var(--space-8); }
  .dock__i { border-radius: var(--radius-pill); }
}

/* recap de 2026 dentro do histórico */
.ponte__ctl { display: flex; align-items: center; gap: var(--space-8); }
.ponte__esp { flex: 1; }
.ponte__trilho { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 340px); gap: var(--space-8); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-8); scrollbar-width: thin; outline-offset: 4px; }
.ponte__c { scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-24); border-radius: var(--radius-l); background: var(--surface-hover); }
.ponte__k { font-size: .8125rem; line-height: 1rem; color: var(--platform-text); }
.ponte__h { font-size: 1.25rem; line-height: 1.5rem; font-weight: 500; }
.ponte__p { font-size: .875rem; line-height: 1.25rem; color: var(--text-support); }
.ponte__l { margin-top: auto; display: flex; flex-direction: column; }
.ponte__l li { display: flex; justify-content: space-between; gap: var(--space-16); padding: var(--space-8) 0; border-top: 1px solid var(--line-structure); font-size: .875rem; line-height: 1.25rem; }
.ponte__l li span:last-child { color: var(--text-support); text-align: right; }
.ponte__c .g-btn { align-self: flex-start; margin-top: var(--space-8); }

/* selo nos rankings e chip da linha do tempo */
.selo-2026 { display: inline-flex; align-items: center; margin-left: var(--space-4); padding: 0 var(--space-8); min-height: 20px; border-radius: var(--radius-pill); background: var(--platform-surface); color: var(--platform-on-surface); font-size: .75rem; line-height: 1rem; font-weight: 500; text-decoration: none; vertical-align: 1px; }
.selo-2026:hover { background: var(--platform-highlight); color: var(--platform-on-highlight); }
.chip-2026 { background: var(--platform-primary); color: var(--platform-on-primary); border-color: transparent; text-decoration: none; font-weight: 500; }
.chip-2026:hover { background: var(--platform-primary-hover); }
/* no desktop o histórico já tem menu no cabeçalho: a barra de baixo é só do celular */
@media (min-width: 1024px) { .dock { display: none; } #app { padding-bottom: 0; } }