/* ===== Gamified level-up staircase structure ===== */
.game-hero { display: flex; flex-wrap: wrap; gap: 2.6rem; align-items: center; }
.game-hero__copy { flex: 1 1 420px; min-width: 0; }
.game-hero__copy h1 { font-size: clamp(2.6rem, 6vw, 4rem); }
.game-hero__widget { flex: 1 1 380px; min-width: 0; }
.game-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.game-tag { display: inline-flex; align-items: center; gap: 0.5em; background: var(--color-bg-alt); color: var(--color-accent); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4em 0.9em; border-radius: 999px; margin-bottom: 0.8em; border: 1px solid var(--footer-border); }

/* ===== Staircase-climb widget ===== */
.stair-widget { background: var(--color-surface); border: 1px solid var(--footer-border); border-radius: var(--radius); padding: 1.8rem; }
.stair-widget__readout { text-align: center; margin-bottom: 1rem; }
.stair-widget__score { display: block; font-family: var(--ff-head); font-size: 2.4rem; color: var(--color-primary); }
.stair-widget__category { display: block; font-size: 0.78rem; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.05em; }
.stair-widget__art svg { width: 100%; height: auto; }
.stair-step { fill: var(--color-bg-alt); stroke: var(--footer-border); stroke-width: 1; }
.stair-marker-dot { fill: var(--color-accent); }
.stair-marker-ring { fill: none; stroke: var(--color-accent); stroke-width: 2; opacity: 0.5; }
.stair-widget__field-top { display: flex; justify-content: space-between; font-size: 0.88rem; font-weight: 600; margin: 1.2rem 0 0.4rem; }
.stair-widget__field-top span:last-child { color: var(--color-primary); }

/* ===== Ascending level-path sections ===== */
.level-path { display: flex; flex-direction: column; gap: 1.4rem; }
.level-step { background: var(--color-surface); border: 1px solid var(--footer-border); border-radius: var(--radius); padding: 1.5rem 1.8rem; display: flex; align-items: center; gap: 1.3rem; max-width: 640px; }
.level-step:nth-child(1) { margin-left: 0; }
.level-step:nth-child(2) { margin-left: 2.2rem; }
.level-step:nth-child(3) { margin-left: 4.4rem; }
.level-step:nth-child(4) { margin-left: 6.6rem; }
.level-step:nth-child(5) { margin-left: 8.8rem; }
@media (max-width: 700px) {
  .level-step:nth-child(1) { margin-left: 0; }
  .level-step:nth-child(2) { margin-left: 0.8rem; }
  .level-step:nth-child(3) { margin-left: 1.6rem; }
  .level-step:nth-child(4) { margin-left: 2.4rem; }
  .level-step:nth-child(5) { margin-left: 3.2rem; }
}
.level-step__badge { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--color-bg-alt); border: 2px solid var(--color-primary); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-family: var(--ff-head); font-weight: 700; }
.level-step__body h3 { margin-bottom: 0.2em; }
.level-step__body p { margin: 0; color: var(--color-muted); font-size: 0.92rem; }