.play-hero { align-items: center; }
.play-hero .button-row { margin-top: 32px; }
.join-panel { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(240,184,46,.1), rgba(255,255,255,.018)); box-shadow: inset 3px 0 var(--gold); }
.join-panel > div { padding: 22px 25px; border-bottom: 1px solid rgba(255,255,255,.08); }
.join-panel > div:last-child { border-bottom: 0; }
.join-panel small { display: block; color: #7e7664; text-transform: uppercase; letter-spacing: .14em; font-size: .61rem; margin-bottom: 7px; }
.join-panel strong { display: block; color: var(--paper); font-size: 1.18rem; }
.join-panel span { display: block; color: var(--muted); font-size: .78rem; margin-top: 5px; }
.join-panel .join-note { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; background: rgba(53,223,145,.045); }
.join-note b { color: var(--emerald); font-size: .65rem; letter-spacing: .13em; }
.join-panel .join-note span { margin: 0; line-height: 1.5; }

.guide-index { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; padding: 12px; margin-bottom: 6px; border: 1px solid var(--line); background: rgba(8,8,6,.92); backdrop-filter: blur(14px); }
.guide-index a { flex: 1; min-width: 82px; padding: 11px 9px; text-align: center; color: #8e8777; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: .6rem; font-weight: 900; border: 1px solid transparent; }
.guide-index a:hover, .guide-index a:focus-visible { color: var(--paper); border-color: var(--line); background: rgba(240,184,46,.06); }

.start-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; padding: 0; margin: 0 0 20px; counter-reset: none; }
.start-steps li { min-height: 235px; padding: 22px 20px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.022); }
.start-steps li > span { color: var(--gold); font-family: Georgia, serif; font-size: 1.25rem; }
.start-steps h3 { margin: 42px 0 11px; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.start-steps p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.6; }
code { color: var(--gold); }
.callout a { color: var(--emerald); }

.command-section { margin-top: 45px; }
.command-section:first-of-type { margin-top: 0; }
.command-title { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; margin-bottom: 15px; }
.command-title > span { color: var(--gold-soft); font-family: Georgia, serif; font-size: 1.4rem; }
.command-title h3 { margin: 0 0 5px; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.command-title p { margin: 0; color: #77705f; font-size: .8rem; }
.command { min-height: 75px; align-items: center; }
.command code { overflow-wrap: anywhere; }

.market-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.market-flow article { padding: 30px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.023); }
.market-flow article:first-child { box-shadow: inset 3px 0 var(--gold); }
.market-flow article:last-child { box-shadow: inset 3px 0 var(--emerald); }
.market-flow article > span { color: var(--gold); font-size: .63rem; font-weight: 900; letter-spacing: .14em; }
.market-flow article:last-child > span { color: var(--emerald); }
.market-flow h3 { margin: 28px 0 18px; font-family: Georgia, serif; font-size: 1.65rem; font-weight: 500; }
.market-flow ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .86rem; line-height: 1.7; }
.market-flow li + li { margin-top: 8px; }
.flow-note { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; margin-top: 12px; padding: 21px 24px; border: 1px solid var(--line); background: rgba(240,184,46,.04); }
.flow-note strong { color: var(--paper); text-transform: uppercase; letter-spacing: .09em; font-size: .72rem; }
.flow-note span { color: var(--muted); font-size: .82rem; line-height: 1.55; }
.flow-note a { color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-size: .64rem; font-weight: 900; white-space: nowrap; }

.progression-grid { grid-template-columns: repeat(3, 1fr); }
.combat-layout { display: grid; grid-template-columns: 280px 1fr; gap: 12px; }
.combat-clock { display: flex; min-height: 320px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(165,43,52,.45); background: radial-gradient(circle, rgba(165,43,52,.17), rgba(165,43,52,.025) 70%); }
.combat-clock small { color: #d97077; letter-spacing: .16em; font-weight: 900; }
.combat-clock strong { color: var(--paper); font-family: Georgia, serif; font-size: 7rem; font-weight: 500; line-height: 1; margin: 10px 0; }
.combat-clock span { color: var(--muted); font-size: .78rem; }
.combat-rules { display: grid; gap: 10px; }
.combat-rules article { padding: 24px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.022); }
.combat-rules b { color: #d97077; font-size: .7rem; letter-spacing: .12em; }
.combat-rules p { margin: 10px 0 0; color: var(--muted); line-height: 1.6; font-size: .85rem; }

.rank-note { margin-top: 13px; padding: 26px; border: 1px solid var(--line); background: rgba(240,184,46,.035); }
.rank-note strong { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }
.rank-note p { max-width: 850px; color: var(--muted); line-height: 1.65; font-size: .86rem; }
.rank-note .action-button { margin-top: 5px; }
.beta-panel { max-width: 920px; padding: 50px; border: 1px solid var(--line); background: linear-gradient(140deg, rgba(240,184,46,.095), rgba(53,223,145,.025)); box-shadow: inset 3px 0 var(--gold); }
.beta-panel h2 { font-size: clamp(3rem, 5vw, 5.2rem); }
.beta-panel > p:not(.eyebrow) { max-width: 760px; color: var(--muted); line-height: 1.72; }

@media (max-width: 1000px) {
  .start-steps { grid-template-columns: repeat(2, 1fr); }
  .start-steps li:last-child { grid-column: 1 / -1; min-height: 190px; }
}
@media (max-width: 850px) {
  .market-flow, .combat-layout { grid-template-columns: 1fr; }
  .progression-grid { grid-template-columns: 1fr 1fr; }
  .flow-note { grid-template-columns: 1fr; }
  .combat-clock { min-height: 250px; }
}
@media (max-width: 560px) {
  .guide-index { position: static; }
  .guide-index a { flex: 1 0 40%; }
  .start-steps, .progression-grid { grid-template-columns: 1fr; }
  .start-steps li, .start-steps li:last-child { grid-column: auto; min-height: 190px; }
  .market-flow article, .beta-panel { padding: 26px 20px; }
  .join-panel .join-note { grid-template-columns: 1fr; }
}