/* The hero figure remains the control surface; this page gives it a clear decision hierarchy. */
:root{--ground:#202a27;--ink:#fff1c7;--ink-2:#c1bba1;--ink-3:#9fa9a2;--acc:#c77a27;--acc-2:#d3ece1;--rule:rgba(211,236,225,.22);--f:var(--wos-sans);--m:var(--wos-mono)}
html{background:#202a27}body{background:radial-gradient(58rem 39rem at 108% -12%,rgba(211,236,225,.22),transparent 63%),radial-gradient(48rem 34rem at -12% 91%,rgba(199,122,39,.19),transparent 65%),var(--ground);font-family:var(--wos-sans)}.wrap{max-width:1260px;padding:0 clamp(20px,5vw,68px)}header{padding-top:0;border-bottom:1px solid var(--rule)}.brand{min-height:106px;margin:0;gap:17px}.brand-mark{display:none}.brand b{font:700 22px/1 var(--wos-sans);letter-spacing:.075em}.brand i{margin-top:4px;color:var(--ink-3);font:10px/1.4 var(--wos-mono);letter-spacing:.15em}.brand i::before{content:"Hero Gear / ";color:var(--acc);font-style:normal}.brand>.wos-mark{flex:none}
h1{max-width:8ch;margin-top:clamp(49px,7vw,92px);font:700 clamp(60px,8.6vw,122px)/.79 var(--wos-display);letter-spacing:-.06em;text-transform:uppercase}h1 em{color:var(--acc-2)}.kick{margin-top:20px;max-width:52ch;color:var(--ink-2);font-size:18px}.camps{margin-top:clamp(34px,5vw,54px);padding:18px;border:1px solid var(--rule);border-radius:11px;background:rgba(45,53,49,.56)}.camps::before{content:"01 / choose the troop line";display:block;flex-basis:100%;margin-bottom:10px;color:var(--ink-3);font:10px/1 var(--wos-mono);letter-spacing:.14em;text-transform:uppercase}.camps button{min-width:150px;border-radius:7px;padding:14px 18px;background:rgba(27,32,31,.32);color:var(--ink-2);font-family:var(--wos-mono)}.camps button:hover{border-color:var(--acc-2);color:var(--ink)}.camps button[aria-selected="true"]{background:var(--acc);border-color:var(--acc);color:#1b201f}
.map{margin-top:clamp(36px,5vw,68px);padding:clamp(16px,2vw,30px);border:1px solid var(--rule);border-radius:19px;background:linear-gradient(145deg,rgba(54,65,60,.78),rgba(35,42,39,.9))}.map::before{content:"02 / set each piece target";position:absolute;left:30px;top:20px;color:var(--acc-2);font:10px/1 var(--wos-mono);letter-spacing:.15em;text-transform:uppercase}.figwrap{padding-top:24px}.figname{color:var(--acc-2);font-family:var(--wos-mono)}.card{border-color:var(--rule);border-radius:11px;background:rgba(27,32,31,.36);box-shadow:none}.card.on{border-color:var(--acc)}.rk{color:var(--acc)}.nm{font-family:var(--wos-display);font-size:clamp(25px,2.5vw,34px);letter-spacing:-.03em;text-transform:uppercase}.stat,.cost{font-family:var(--wos-mono)}.lv button{border-radius:6px;background:rgba(27,32,31,.27);font-family:var(--wos-mono)}.lv button.on{background:var(--acc);color:#1b201f}.presets{margin-top:35px;padding-top:22px;border-top:1px solid var(--rule)}.presets::before{content:"03 / start from a route";display:block;flex-basis:100%;margin-bottom:3px;color:var(--ink-3);font:10px/1 var(--wos-mono);letter-spacing:.14em;text-transform:uppercase}.presets button{border-radius:7px;border-color:var(--rule);background:rgba(45,53,49,.42);color:var(--ink-2);font-family:var(--wos-mono)}.presets button:hover{border-color:var(--acc);color:var(--ink)}
.tot{position:relative;margin-top:18px;border-color:rgba(199,122,39,.72);border-radius:17px;background:linear-gradient(135deg,rgba(199,122,39,.14),rgba(45,53,49,.89) 48%,rgba(35,42,39,.96))}.tot::after{content:"TOTAL";position:absolute;right:25px;bottom:20px;color:rgba(255,241,199,.06);font:700 clamp(70px,11vw,150px)/.72 var(--wos-display);letter-spacing:-.07em}.tot>*{position:relative;z-index:1}.tot h2{color:var(--acc);font-family:var(--wos-mono)}.grid3{gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}.big{padding:18px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}.big b{font-family:var(--wos-display);font-size:clamp(43px,5.7vw,70px);color:var(--ink)}.big span{color:var(--ink-2);font-family:var(--wos-mono)}.tot .foot{color:var(--ink-2);border-color:var(--rule)}.tot .foot em{color:var(--acc-2)}.note{margin-top:30px;padding:17px 19px;border-left:2px solid var(--acc-2);background:rgba(211,236,225,.06);color:var(--ink-2);max-width:none}footer{border-color:var(--rule);color:var(--ink-3);font-family:var(--wos-mono)}
@media(max-width:820px){.brand{min-height:0;padding:20px 0}.brand>.wos-mark{margin-right:-15px;transform:scale(.75);transform-origin:left center}.brand b{font-size:17px}.brand i::before{content:""}.map::before{position:static;display:block;margin-bottom:14px}.figwrap{padding-top:0}.card{padding:14px}.tot{padding:22px}.big{padding:15px}.grid3{grid-template-columns:1fr}.big b{font-size:55px}}