/* The forest citadel: one scene, with UI forged from jade and pale brass. */
.site>.hero{background:#0c241e;position:relative;isolation:isolate;border-top:2px solid #adbc83;padding-bottom:40px}
.site>.hero:before{content:'';position:absolute;inset:0 0 auto;height:320px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#0c241e35 0%,#0c241e66 28%,#0c241ed9 66%,#0c241e 100%),url('/assets/landscape.png') center 35%/auto 520px no-repeat}
.hero .hero-header{border-bottom:1px solid #daecc125;margin-bottom:32px}.hero .brand,.hero .header-play{color:#e3eccf}.hero .brand-mark{color:#c9da93}
.hero .hero-copy{display:block;min-height:0;padding:0 0 12px;position:relative}
.hero .hero-copy .mode-badge{font-size:10px;letter-spacing:2px;color:#d3e4af;gap:8px;margin-bottom:18px}.hero .mode-badge:before{background:#c1e78e;box-shadow:0 0 12px #b4f17580}
.hero .hero-title-line{display:block}.hero .hero-pick{display:none!important}
.hero .hero-copy h1{white-space:normal;font-size:clamp(37px,10vw,56px);line-height:1.06;letter-spacing:-1.5px;max-width:90%}
.hero .hero-name{white-space:normal}.hero .hero-name>.title-stone,.hero .hero-name>.title-wood{display:block;color:#f3f5dc;background:none;-webkit-text-fill-color:currentColor;text-shadow:0 3px 0 #183a2b,0 6px 28px #041a17;filter:none}
.hero .hero-name>.hero-demo{display:table;margin:14px 0 0;padding:5px 11px;border:1px solid #c4d99f70;background:#163d2ec9;color:#e1edbf;border-radius:2px;font:700 10px/1.4 Manrope,sans-serif;letter-spacing:2px;text-transform:uppercase}
.hero .hero-copy .hero-desc{max-width:58ch;margin:22px 0 0;color:#e0e9d8;font-size:14px;line-height:1.85;text-shadow:0 2px 6px #062019}.hero .hero-desc strong{color:#fcf9e6}
.hero>.page-guide{margin:0 0 12px;padding:12px 0;gap:0 18px;border-block:1px solid #c9dd9d30}.hero>.page-guide a{color:#dde8cd;text-shadow:0 1px 4px #071f19}.hero>.page-guide a span{color:#9fae87}
.hero>.play-area{position:relative;background:linear-gradient(135deg,#294b3b,#112d26 45%,#183c30);border:1px solid #a7b77c;border-radius:8px;padding:5px;box-shadow:0 0 0 4px #0b211bbb,0 0 0 5px #a0ba7330,0 24px 65px #031810a3,inset 0 1px #e1eaba35}
.hero .player-toolbar{height:32px;background:transparent;margin:0 0 4px;padding-inline:9px;border:0}.hero .player-status,.hero .player-actions button{color:#d7e5c0}.hero .game-stage{border:1px solid #071d17;border-radius:3px}
.hero .real-play-cta{background:linear-gradient(#d9eea8,#b9d880);color:#1a331d;border:1px solid #e5f1c7;border-bottom:3px solid #648448;box-shadow:inset 0 1px #f3f9df,0 4px 12px #061b1780;border-radius:4px;font-weight:800}.hero .real-play-cta:hover{background:#e0f3b1}
.hero .game-facts{border-top-color:#d0e1a32b}.hero .game-facts>div+div{border-left-color:#d0e1a326}.hero .game-facts dt{color:#afc3a7}.hero .game-facts dd{color:#edf3d9}
@media(min-width:600px){.hero .hero-copy h1{font-size:60px}.hero .hero-name>.title-stone,.hero .hero-name>.title-wood{display:inline}.hero .hero-copy .hero-desc{max-width:550px}}
@media(min-width:1000px){.site>.hero{padding-bottom:64px}.site>.hero:before{height:390px;background:linear-gradient(180deg,#0c241e25 0%,#0c241e55 25%,#0c241edb 66%,#0c241e 100%),linear-gradient(90deg,#071d1a66,transparent 80%),url('/assets/landscape.png') center 38%/cover no-repeat}.hero .hero-header{margin-bottom:48px}.hero .hero-copy{display:block;min-height:292px;padding-bottom:25px}.hero .hero-copy h1{font-size:68px;max-width:850px;letter-spacing:-2px}.hero .hero-name>.hero-demo{font-size:11px;margin-top:18px}.hero .hero-copy .hero-desc{font-size:15px;margin-top:23px;max-width:590px}.hero>.page-guide{gap:26px;padding:13px 0;margin-bottom:22px}.hero>.play-area{padding:6px}}
@media(prefers-reduced-motion:no-preference){.hero .real-play-cta{transition:background .2s,box-shadow .2s}.hero .real-play-cta:hover{box-shadow:0 0 24px #c8e78c33}}

/* Compact anchor row without ordinal labels. */
.hero>.page-guide{flex-wrap:nowrap;justify-content:space-between;gap:8px;overflow-x:auto;scrollbar-width:none}.hero>.page-guide::-webkit-scrollbar{display:none}.hero>.page-guide a{flex:0 0 auto;white-space:nowrap;font-size:11px}
@media(max-width:359px){.hero>.page-guide{gap:6px}.hero>.page-guide a{font-size:10px}}
@media(min-width:600px){.hero>.page-guide{justify-content:flex-start;gap:24px}.hero>.page-guide a{font-size:12px}}
/* Align the status dot and tighten the gap below the header. */
.hero .hero-header{margin-bottom:18px}
.hero .hero-copy .mode-badge{display:inline-flex;align-items:center;gap:7px;line-height:16px;margin-bottom:14px;vertical-align:top}
.hero .hero-copy .mode-badge:before{display:block;flex:0 0 6px;width:6px;height:6px;margin:0;vertical-align:baseline}
@media(min-width:1000px){.hero .hero-header{margin-bottom:24px}}