.how-page { flex: 1; width: min(100% - 32px, 1180px); margin: 0 auto; padding: 24px 0 64px; }

.how-head { margin: 24px 0 28px; }
.how-head h1 { margin: 0; font-size: clamp(52px, 7vw, 96px); font-weight: 800; line-height: 0.9; letter-spacing: -0.06em; }
.how-head p { max-width: 40ch; margin: 18px 0 0; font-size: 20px; font-weight: 500; line-height: 1.4; color: var(--ink-2); }

.how-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; }
.how-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; transition: background-color 150ms ease; }
.how-jump a:hover { background: #E8E8EB; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.orange { background: #FF5A1F; } .dot.teal { background: #0E7C74; } .dot.yellow { background: #FFC72C; } .dot.mint { background: #0B6B4F; } .dot.red { background: #E0412F; } .dot.ink { background: var(--ink); } .dot.violet { background: #6C4CF1; } .dot.pink { background: #E83E8C; }

/* One block per game, in the game's colour */
.game { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; margin-bottom: 16px; padding: 44px; border-radius: 32px; scroll-margin-top: 16px; }
.game.higher { background: linear-gradient(to bottom, #0C3B93, #3A7BD6); color: #FFFFFF; }
.game.price { background: #0B6B4F; color: #FFFFFF; }
.game.window { background: #EFE9E0; color: var(--ink); }
.game.sortg { background: #FFC72C; color: var(--ink); }
.game.lockg { background: #0E7C74; color: #FFFFFF; }
.game.onestarg { background: #6C4CF1; color: #FFFFFF; }
.game.stackg { background: #E83E8C; color: #FFFFFF; }
.game.stackg .pill.white { --edge: #C42A72; color: #E83E8C; }
.game.stackg .steps li::before { background: #FFD23F; color: #3A2A00; }
.game.onestarg .pill.white { --edge: #4F33C9; color: #6C4CF1; }
.game.onestarg .steps li::before { background: #FFC72C; color: #3A2A00; }
.game.lockg .pill.white { --edge: #0A5F59; color: #0E7C74; }
.game.lockg .steps li::before { background: #FACC15; color: #3A2A00; }
.game.sortg .steps li { background: rgba(255, 255, 255, 0.6); }
.game.sortg .steps li::before { background: var(--ink); color: #FFC72C; }
.game.sortg .game-top p { opacity: 1; }
.game h2 { margin: 0; font-size: 72px; font-weight: 800; line-height: 0.85; letter-spacing: -0.065em; }
.game-top p { max-width: 30ch; margin: 18px 0 24px; font-size: 18px; font-weight: 500; line-height: 1.4; opacity: 0.88; }
.game.window .game-top p { color: #4A4640; opacity: 1; }
.game.price .pill.white { --edge: #8CCFB0; color: #0B6B4F; }
.game .pill.red { --edge: #A92C1E; background: #E0412F; color: #FFFFFF; }

.steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 16px 18px 16px 60px; border-radius: 18px; background: rgba(255, 255, 255, 0.14); counter-increment: step; }
.game.window .steps li { background: #FFFFFF; }
.steps li::before { content: counter(step); position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF; color: var(--ink); font-size: 15px; font-weight: 800; }
.game.window .steps li::before { background: #E0412F; color: #FFFFFF; }
.steps b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.steps span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; opacity: 0.88; }

/* Shared rules */
.rules { margin: 72px 0 16px; scroll-margin-top: 16px; }
.rules h2, .plus-block h2 { margin: 0 0 24px; font-size: 44px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.rules dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.rules dl div { padding: 22px; border-radius: 22px; background: var(--soft); }
.rules dt { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.rules dd { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

.plus-block { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 16px; padding: 40px 44px; border-radius: 32px; background: var(--ink); color: #FFFFFF; scroll-margin-top: 16px; }
.plus-block h2 { margin-bottom: 10px; }
.plus-block h2 span { color: #FF6B57; }
.plus-block p { max-width: 46ch; margin: 0; font-size: 17px; line-height: 1.5; opacity: 0.8; }
.plus-cost { flex: none; text-align: right; }
.plus-cost b { display: block; font-size: 44px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; opacity: 1; }
.plus-cost small { display: inline-block; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 13px; font-weight: 700; }

@media (max-width: 860px) {
  .game { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; border-radius: 26px; }
  .game h2 { font-size: 56px; }
  .rules dl { grid-template-columns: 1fr; }
  .plus-block { flex-direction: column; align-items: flex-start; padding: 28px 22px; }
  .plus-cost { text-align: left; }
}