#top #era-hud { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex: 1; width: auto; min-width: 260px; min-height: var(--touch-target); padding: var(--space-1) var(--space-2) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); border-image: none; background: var(--surface-inset); color: var(--ink); font-size: var(--text-xs); cursor: pointer; text-align: left; }
#era-hud > span:first-child { min-width: 0; overflow-wrap: anywhere; }
#era-hud small { flex-shrink: 0; font-size: var(--text-xs); }
.era-hud-track { position: absolute; height: 3px; left: 0; right: 0; bottom: 0; overflow: hidden; background: var(--surface-inset); }
.era-hud-track i { display: block; height: 100%; background: var(--good); }
.era-ladder { display: flex; gap: var(--space-1); padding: 0; margin: var(--space-2) 0 var(--space-4); list-style: none; }
.era-ladder li { flex: 1; min-width: 0; text-align: center; padding: var(--space-2) 2px; border-bottom: 3px solid var(--border-soft); color: var(--muted); font-size: var(--text-xl); }
.era-ladder span { display: block; font-size: var(--text-xs); overflow-wrap: anywhere; }
.era-ladder .current { background: var(--surface-selected); border-color: var(--even); color: var(--ink); }
.era-ladder .done { border-color: var(--good); }
.era-note { line-height: 1.5; font-size: var(--text-xs); color: var(--text, var(--ink)); }
.era-requirements { padding: 0; list-style: none; }
.era-requirements li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--surface-inset); font-size: var(--text-xs); }
.era-requirements b { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.era-cost { padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); font-size: var(--text-xs); }
.era-requirements .met, .era-cost .met { color: var(--good); }
.era-start { width: 100%; min-height: var(--touch-target); white-space: normal; }
.era-ceremony { box-sizing: border-box; width: min(460px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); overflow-y: auto; padding: var(--space-5) var(--space-5); text-align: center; }
.era-ceremony h2 { font-family: var(--font-display); font-size: clamp(22px, 5vw, 30px); }
.era-ceremony p { line-height: 1.6; }
.era-kicker { text-transform: uppercase; letter-spacing: 2px; font-size: var(--text-xs); }
.era-sunburst { font-size: 64px; padding: var(--space-3); background: repeating-conic-gradient(from 0deg, var(--decoration-glow) 0deg 12deg, transparent 12deg 24deg); border-radius: 50%; width: 112px; height: 112px; display: grid; place-items: center; margin: auto; animation: era-arrive var(--duration-slow) var(--ease-out) both; }
.era-reward { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.era-ceremony button { width: 100%; }
@keyframes era-arrive { from { transform: scale(.65) rotate(-15deg); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-height: 500px) { .era-ceremony { padding: var(--space-3) var(--space-4); } .era-sunburst { font-size: 32px; width: 48px; height: 48px; padding: var(--space-1); float: left; } .era-ceremony h2 { margin: var(--space-2) 0; } .era-ceremony p { margin: var(--space-2) 0; } }
@media (prefers-reduced-motion: reduce) { .era-sunburst { animation: none; } }

@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px), (max-height: 500px) and (max-width: 1100px) {
  #top #era-hud { grid-column: span 3; min-width: 0; flex-wrap: nowrap; font-size: var(--text-xs); }
  #era-hud small { white-space: normal; text-align: right; max-width: 65px; }
}
@media (max-height: 500px) and (max-width: 1100px) {
  #top #era-hud { grid-column: span 7; }
  #era-hud small { max-width: none; }
  .era-ladder { margin: var(--space-1) 0 var(--space-2); }
  .era-ladder li { padding: var(--space-1) 2px; font-size: var(--text-sm); }
}