:root { color-scheme: dark; font-family: system-ui,sans-serif; color: #f5f2e4; background: #151c16; --gold: #f4d58e; --muted: #c8ccb9 }
* { box-sizing: border-box }
body { margin: 0; line-height: 1.55 }
.wrap { width: min(1100px, 92vw); margin-inline: auto }
a { color: var(--gold) }
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 29rem; background: linear-gradient(90deg,#101910f2 5%,#10191098 56%,#1019101c), url('frontier.webp') 65% 55%/cover; border-bottom: 1px solid #85865b }
.hero-tank { position: absolute; z-index: -1; width: clamp(10rem,26vw,22rem); height: auto; right: max(2vw,calc((100vw - 1100px) / 2)); bottom: 1.2rem; filter: drop-shadow(0 1.2rem .7rem #091007b0) }
@media (max-width: 700px) { .hero-tank { opacity: .28; right: 1rem } }
nav { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.3rem; border-bottom: 1px solid #d8e1c357; font-size: .9rem; font-weight: 700 }
nav a { text-decoration: none }
.hero-content { padding-block: clamp(3rem,8vw,6rem) 3rem }
.tag { color: var(--gold); font-weight: 800; letter-spacing: .14em; font-size: .8rem }
h1 { font-size: clamp(3.1rem,10vw,7rem); line-height: .98; letter-spacing: -.07em; margin: .2em 0 }
h2 { font-size: clamp(1.7rem,5vw,2.6rem); margin-block: 0 .6em }
.cta,button { padding: .65rem 1rem; border: 1px solid #a48c59; border-radius: .45rem; background: #263628; color: #fbf1d2; font: inherit; font-weight: 700; cursor: pointer }
.cta { display: inline-block; margin-top: .65rem; text-decoration: none; color: #182014; background: var(--gold) }
button[aria-pressed=true],button:hover { background: var(--gold); color: #1d2519 }
.features { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap: .9rem; margin-block: 2rem }
article,.ranking,.login { border: 1px solid #536044; border-radius: .7rem; background: #1e2b20; padding: 1.15rem }
article strong { font-size: 1.3rem }
article p,#status,footer,.subtle { color: var(--muted) }
.ranking { padding: clamp(1rem,4vw,2.2rem); scroll-margin-top: 1rem }
.tabs { display: flex; flex-wrap: wrap; gap: .55rem }
.table-frame { overflow-x: auto }
table { width: 100%; border-collapse: collapse; text-align: start }
th,td { padding: .65rem .5rem; border-bottom: 1px solid #465644; text-align: start }
th { color: var(--gold) }
footer { padding-block: 2rem }
.login { width: min(90vw, 32rem); margin: 7vh auto; padding: clamp(1rem,5vw,2rem) }
.login form { display: grid; gap: .7rem; margin-top: 1rem }
.login label { display: grid; gap: .25rem }
.login input { color: inherit; background: #131d15; border: 1px solid #77836b; border-radius: .35rem; padding: .55rem; font: inherit; width: 100% }
.login h1 { font-size: 2.5rem; letter-spacing: -.045em }
.login button:disabled { opacity: .55; cursor: default }
.login .actions { display: flex; gap: .5rem; flex-wrap: wrap }