/* Home page — v3.38.0 */
.hm-hero { text-align: center; padding: 26px 12px 10px; margin-bottom: 26px; }
.hm-brand { color: #0ff; letter-spacing: 6px; text-transform: uppercase; font-size: 0.85em; margin: 0 0 10px; }
.hm-hero h1 { font-size: clamp(1.7em, 5.2vw, 3.2em); line-height: 1.15; margin: 0 0 14px; }
.hm-alias { color: #0ff; }
.hm-lede { max-width: 640px; margin: 0 auto 22px; font-size: 1.12em; line-height: 1.6; color: #cfc; }
.hm-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 0 0 16px; }
.hm-btn-big { font-size: 1.15em; padding: 16px 34px; min-width: 230px; text-align: center; }
.hm-small { color: #9c9; font-size: 0.9em; line-height: 1.6; margin: 0; }
.hm-btn-new { border-color: #ffd700; color: #ffd700; }
.hm-btn-new:hover { background: #ffd700; color: #000; box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }

.hm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 620px; margin: 0 auto 18px; }
.hm-stat { background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 255, 0, 0.5); border-radius: 8px; padding: 12px 4px; }
.hm-stat strong { display: block; font-size: 1.4em; color: #0ff; }
.hm-stat span { font-size: 0.75em; text-transform: uppercase; letter-spacing: 1px; color: #9c9; }
.hm-resume { display: block; max-width: 620px; margin: 0 auto 18px; padding: 16px 18px; text-align: left; text-decoration: none;
    background: rgba(0, 40, 40, 0.75); border: 2px solid #0ff; border-radius: 10px; color: #cff; transition: box-shadow 0.2s, transform 0.2s; }
.hm-resume:hover { box-shadow: 0 0 22px rgba(0, 255, 255, 0.45); transform: translateY(-2px); }
.hm-resume span { display: block; }
.hm-resume-kicker { font-size: 0.75em; text-transform: uppercase; letter-spacing: 2px; color: #0ff; }
.hm-resume-title { font-size: 1.35em; font-weight: bold; color: #fff; margin: 4px 0; }

.hm-season { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; text-decoration: none; margin-bottom: 26px; padding: 16px 20px;
    border: 2px solid var(--season-accent, #ffa500); border-radius: 10px; background: rgba(40, 22, 0, 0.8); color: #fed; }
.hm-season:hover { box-shadow: 0 0 22px rgba(255, 165, 0, 0.4); }
.hm-season-icon { font-size: 2em; }
.hm-season-text { flex: 1 1 260px; line-height: 1.5; }
.hm-season-go { font-weight: bold; color: #ffc34d; white-space: nowrap; }

.hm-section { margin-bottom: 34px; padding: 22px; background: rgba(0, 16, 0, 0.72); border: 1px solid rgba(0, 255, 0, 0.45); border-radius: 12px; }
.hm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.hm-head h2 { margin: 0; font-size: 1.5em; }
.hm-more { color: #0ff; text-decoration: none; font-size: 0.95em; white-space: nowrap; }
.hm-more:hover { text-decoration: underline; }
.hm-sub { color: #bdb; line-height: 1.6; margin: 0 0 16px; }
.hm-sub:last-child { margin: 16px 0 0; }
.hm-empty { color: #bdb; margin: 0; }
.hm-promise { margin: 0 0 16px; padding: 10px 14px; border-left: 3px solid #ffd700; background: rgba(255, 215, 0, 0.07); color: #fe9; line-height: 1.5; }

.hm-new-list, .hm-maze-list, .hm-chain-list, .hm-tool-list, .hm-more-list, .hm-leaders { list-style: none; margin: 0; padding: 0; }
.hm-new-list, .hm-chain-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.hm-new a, .hm-chain a { display: flex; flex-direction: column; gap: 6px; height: 100%; box-sizing: border-box; padding: 14px; text-decoration: none;
    background: rgba(0, 0, 0, 0.65); border: 1px solid #0ff; border-radius: 10px; color: #cfc; transition: box-shadow 0.2s, transform 0.2s; }
.hm-new a:hover, .hm-chain a:hover { box-shadow: 0 0 18px rgba(0, 255, 255, 0.4); transform: translateY(-2px); }
.hm-new.hm-elite a { border-color: #ffd700; }
.hm-new-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.8em; color: #9c9; }
.hm-new-title { font-size: 1.2em; font-weight: bold; color: #fff; }
.hm-new-text { font-size: 0.92em; line-height: 1.5; flex: 1; }
.hm-new-foot { font-size: 0.85em; color: #0ff; }
.hm-chip { display: inline-block; padding: 2px 8px; border: 1px solid #0ff; border-radius: 20px; color: #0ff; font-size: 0.95em; background: rgba(0, 0, 0, 0.75); white-space: nowrap; }
.hm-chip-gold { border-color: #ffd700; color: #ffd700; }
.hm-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; background: #f0f; color: #fff; font-size: 0.85em; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }

.hm-maze-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.hm-maze a { display: flex; flex-direction: column; height: 100%; text-decoration: none; overflow: hidden; background: rgba(0, 0, 0, 0.7);
    border: 1px solid #0f0; border-radius: 10px; color: #cfc; transition: box-shadow 0.2s, transform 0.2s; }
.hm-maze a:hover { box-shadow: 0 0 20px rgba(0, 255, 0, 0.45); transform: translateY(-3px); }
.hm-maze-pic { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #021 0%, #053 100%); overflow: hidden; }
.hm-maze-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-maze-pic .hm-chip { position: absolute; left: 8px; bottom: 8px; font-size: 0.78em; }
.hm-maze-pic .hm-badge { position: absolute; right: 8px; top: 8px; font-size: 0.7em; }
.hm-locked .hm-maze-pic img { filter: brightness(0.6) saturate(0.7); }
.hm-locked a { border-color: #a88a00; }
.hm-maze-title { font-size: 1.15em; font-weight: bold; color: #fff; padding: 12px 14px 4px; }
.hm-maze-text { font-size: 0.9em; line-height: 1.5; padding: 0 14px; flex: 1; }
.hm-maze-foot { font-size: 0.85em; color: #0ff; padding: 8px 14px 12px; }

.hm-steps { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: hm; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.hm-steps li { counter-increment: hm; position: relative; padding: 12px 12px 12px 52px; background: rgba(0, 0, 0, 0.5); border-radius: 8px; line-height: 1.5; color: #cfc; }
.hm-steps li::before { content: counter(hm); position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; line-height: 28px; text-align: center;
    border: 2px solid #0f0; border-radius: 50%; color: #0f0; font-weight: bold; }
.hm-steps strong { color: #fff; display: block; }

.hm-tool-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hm-tool-list a, .hm-more-list a { display: block; height: 100%; box-sizing: border-box; padding: 14px; text-decoration: none; background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 0, 0.6); border-radius: 10px; color: #bdb; transition: box-shadow 0.2s, border-color 0.2s; }
.hm-tool-list a:hover, .hm-more-list a:hover { border-color: #0f0; box-shadow: 0 0 16px rgba(0, 255, 0, 0.35); }
.hm-tool-icon { font-size: 1.5em; margin-right: 8px; }
.hm-tool-name { font-weight: bold; color: #fff; }
.hm-tool-text { display: block; margin-top: 6px; font-size: 0.88em; line-height: 1.45; }
.hm-more-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.hm-more-list strong { display: block; color: #fff; font-size: 1.1em; margin-bottom: 6px; }
.hm-more-list span { font-size: 0.9em; line-height: 1.5; }

.hm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hm-leaders li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid rgba(0, 255, 0, 0.2); }
.hm-leaders li.is-me { background: rgba(0, 255, 255, 0.1); }
.hm-lrank { width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; border: 1px solid #ffd700; color: #ffd700; font-weight: bold; flex: none; }
.hm-lname { flex: 1; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.hm-lpts { color: #0ff; white-space: nowrap; }
.hm-elite-band { padding: 18px; border: 2px solid #ffd700; border-radius: 10px; background: rgba(40, 32, 0, 0.6); color: #fe9; }
.hm-elite-band h2 { margin: 0 0 10px; color: #ffd700; }
.hm-elite-band ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.7; }
.hm-price { margin: 0 0 14px; }
.hm-price strong { color: #fff; font-size: 1.15em; }
.hm-btn-gold { border-color: #ffd700; color: #ffd700; }
.hm-btn-gold:hover { background: #ffd700; color: #000; box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }

@media (max-width: 760px) {
    .hm-two { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .hm-hero { padding: 12px 0 4px; }
    .hm-section { padding: 16px 12px; margin-bottom: 22px; }
    .hm-btn-big { width: 100%; min-width: 0; box-sizing: border-box; }
    .hm-cta .btn { flex: 1 1 100%; text-align: center; box-sizing: border-box; }
    .hm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-new-list, .hm-chain-list { grid-template-columns: 1fr; }
    /* mazes become a row to swipe, so eight cards do not make the page eight screens long */
    .hm-maze-list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; margin-right: -12px; }
    .hm-maze { flex: 0 0 78%; scroll-snap-align: start; }
    .hm-tool-list, .hm-more-list { grid-template-columns: 1fr 1fr; gap: 8px; }
    .hm-more-list span { display: none; }
    .hm-more-list strong { margin: 0; font-size: 1em; }
    .hm-tool-list a, .hm-more-list a { padding: 10px; }
    .hm-tool-text { display: none; }
    .hm-season-go { white-space: normal; }
}