/* Landing layout and sections. Tokens and shared components come from /assets/shared/. */

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:#050c14e6;border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.header-inner{max-width:calc(var(--content) + 2 * var(--gutter));margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;gap:24px;min-height:72px}
.brand{display:block;flex-shrink:0;border-radius:6px}
.brand img{width:140px;height:auto}
.site-nav{flex:1;min-width:0}
.site-nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;margin:0;padding:0;list-style:none}
.site-nav a{display:inline-block;padding:8px 2px;color:var(--text-muted);font-size:.84rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--gold-300);border-bottom-color:var(--gold-600)}
.lang-switch{display:flex;flex-shrink:0;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.lang-switch button{min-width:44px;min-height:36px;padding:0 12px;border:0;background:transparent;color:var(--text-dim);font-weight:700;font-size:.82rem;letter-spacing:.06em;cursor:pointer}
.lang-switch button[aria-pressed="true"]{background:linear-gradient(#6e542e,#3c331f);color:var(--gold-200)}
.lang-switch button:hover{color:var(--gold-200)}

/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#050c14f2 0%,#050c14d9 32%,#050c1480 62%,#050c14b3 100%),linear-gradient(180deg,#050c1400 55%,#050c14 100%)}
.hero-inner{max-width:calc(var(--content) + 2 * var(--gutter));margin:0 auto;padding:clamp(48px,7vw,96px) var(--gutter) clamp(56px,8vw,112px);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero-title{margin:0 0 6px;max-width:520px}
.hero-title img{width:100%;height:auto;filter:drop-shadow(0 10px 22px #000c)}
.hero-lead{font:700 clamp(1.3rem,2vw,1.7rem)/1.3 var(--font-display);color:var(--gold-200);margin:0 0 .6em;text-shadow:0 2px 6px #000a}
.hero-text{max-width:34rem;color:var(--text-muted);font-size:1.06rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 14px}
.hero-note{margin:0;color:var(--text-dim);font-size:.9rem}
.hero-shot{margin:0;padding:10px;transform:perspective(1600px) rotateY(-4deg);transform-origin:left center}
.hero-shot img{border-radius:6px;width:100%}
.hero-shot figcaption{padding:10px 4px 2px;color:var(--text-dim);font-size:.8rem;letter-spacing:.02em}

/* Sections */
.section{padding:clamp(64px,8vw,104px) 0}
.section-alt{background:radial-gradient(ellipse at 50% 0%,#14304b66,transparent 60%),var(--ink-900);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-inner{max-width:calc(var(--content) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.section-head{max-width:760px;margin-bottom:40px}
.section-head h2{font-size:clamp(2rem,3.2vw,2.8rem)}
.section-intro{color:var(--text-muted);font-size:1.06rem;margin:0}
.fine-print{color:var(--text-dim);font-size:.88rem;margin:28px 0 0}
.state-note{color:var(--text-dim);font-style:italic;list-style:none}

/* Pillars */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:0;padding:0;list-style:none}
.pillar{padding:26px 26px 22px;border:1px solid var(--line);border-top:3px solid var(--gold-600);border-radius:var(--radius);background:linear-gradient(170deg,#11273d,#0a1828)}
.pillar h3{font-size:1.3rem;display:flex;align-items:baseline;gap:10px}
.pillar h3::before{content:"\25C6";color:var(--gold-500);font-size:.8em}
.pillar p{margin:0;color:var(--text-muted)}

/* How to play */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px 22px;margin:0;padding:0;list-style:none}
.steps li{counter-increment:step;position:relative;padding:18px 20px 16px 76px;border-radius:var(--radius);background:#0e2136b3;border:1px solid #ba8f4e33}
.steps li::before{content:counter(step);position:absolute;left:18px;top:16px;width:42px;height:42px;display:grid;place-items:center;border:2px solid var(--gold-500);border-radius:50%;background:radial-gradient(circle at 35% 30%,#6e542e,#2a2214);color:var(--gold-200);font:700 1.2rem/1 var(--font-display)}
.steps h3{font-size:1.15rem;margin-bottom:.3em}
.steps p{margin:0;color:var(--text-muted);font-size:.97rem}

/* Champions */
.champion-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.champion-filters button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:99px;background:#0e2136;color:var(--text-muted);font-weight:700;font-size:.9rem;cursor:pointer}
.champion-filters button:hover{border-color:var(--gold-600);color:var(--gold-200)}
.champion-filters button[aria-pressed="true"]{border-color:var(--gold-500);background:linear-gradient(#6e542e,#3c331f);color:var(--gold-200)}
.chip-count{padding:1px 7px;border-radius:99px;background:#0007;font-size:.78rem}
.result-count{color:var(--text-dim);font-size:.88rem;margin:0 0 18px}
.champion-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.champion{border:1px solid #ba8f4e44;border-radius:var(--radius);background:#0b1a2c;overflow:hidden;text-align:center;transition:border-color .15s,transform .15s}
.champion:hover{border-color:var(--gold-500);transform:translateY(-2px)}
.champion img{width:100%;aspect-ratio:1;object-fit:cover;background:#1c2530}
.champion h3{font-size:1rem;margin:10px 8px 2px}
.champion p{margin:0 8px 12px;color:var(--text-dim);font-size:.8rem}

/* Arenas */
.arena-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;margin:0;padding:0;list-style:none}
.arena{--accent:var(--gold-500);display:flex;flex-direction:column;border:1px solid #ba8f4e44;border-top:3px solid var(--accent);border-radius:var(--radius);background:#0b1a2c;overflow:hidden}
.arena img{width:100%;aspect-ratio:16/9;object-fit:cover}
.arena-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.arena h3{font-size:1.2rem;margin-bottom:.25em}
.arena-theme{color:var(--text-muted);font-size:.9rem;margin-bottom:.8em}
.arena-effects{margin:0 0 .8em;padding:0;list-style:none}
.arena-effects li{position:relative;padding-left:18px;color:var(--gold-300);font-size:.92rem;font-weight:700}
.arena-effects li::before{content:"\25C6";position:absolute;left:0;color:var(--accent);font-size:.7em;top:.35em}
.arena-symmetric{margin:auto 0 0;color:var(--text-dim);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}

/* Screenshots */
.shot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;margin:0;padding:0;list-style:none}
.shot-grid figure{margin:0}
.shot{display:block;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:0 8px 24px #0008}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .25s,filter .25s}
.shot:hover img{transform:scale(1.03);filter:brightness(1.08)}
.shot-grid figcaption{padding:10px 2px 0;color:var(--text-muted);font-size:.88rem}

/* News */
.news-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:20px;margin:0;padding:0;list-style:none}
.news-item article{height:100%;padding:22px 24px;border:1px solid var(--line);border-left:3px solid var(--gold-600);border-radius:var(--radius);background:#0b1a2ce6}
.news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 10px;color:var(--text-dim);font-size:.85rem}
.news-item h3{font-size:1.25rem;margin-bottom:.4em}
.news-item p:last-child{margin:0;color:var(--text-muted)}

/* Platforms */
.platforms{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:24px}
.platform{padding:26px 28px 28px}
.platform header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.platform h3{margin:0;font-size:1.45rem}
.platform>p{color:var(--text-muted)}
.downloads{display:flex;flex-direction:column;gap:14px;margin:12px 0 0;padding:0;list-style:none}
.sha{margin:6px 0 0;color:var(--text-dim);font-size:.75rem;overflow-wrap:anywhere}
.sha code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:#03080e;padding:48px 0 40px}
.footer-inner{max-width:calc(var(--content) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter);display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.footer-emblem{width:72px;height:72px}
.site-footer ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin:0;padding:0;list-style:none}
.site-footer a{color:var(--text-muted)}
.site-footer a:hover{color:var(--gold-300)}
.credit{margin:0;color:var(--text-muted);font-size:.92rem}
.site-footer .fine-print{margin:0}

/* Screenshot viewer */
.viewer{padding:0;max-width:min(1600px,94vw);border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--ink-950);color:var(--text);box-shadow:0 20px 60px #000}
.viewer::backdrop{background:#000c}
.viewer img{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain}
.viewer p{margin:0;padding:12px 16px;color:var(--text-muted);font-size:.92rem}
.viewer-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:50%;background:#050c14d9;color:var(--gold-200);font-size:1.6rem;line-height:1;cursor:pointer}

/* Secondary pages */
.doc{max-width:820px;margin:0 auto;padding:clamp(48px,6vw,80px) var(--gutter)}
.doc h1{font-size:clamp(2rem,3.4vw,2.8rem)}
.doc h2{font-size:1.45rem;margin-top:1.8em}
.doc p,.doc li{color:var(--text-muted)}
.doc li{margin-bottom:.4em}
.review-banner{margin:0 0 28px;padding:16px 20px;border:1px solid #f2c06688;border-left:4px solid var(--warn);border-radius:var(--radius-sm);background:#2a210f99;color:var(--gold-200)}
.review-banner p{margin:0;color:var(--gold-200)}
.pending{padding:1px 6px;border-radius:4px;background:#f2c06626;color:var(--warn);font-weight:700}
.not-found{min-height:60vh;display:grid;place-content:center;text-align:center;gap:8px;padding:48px var(--gutter)}
.not-found-emblem{margin:0 auto}

@media (max-width:1100px){
  .hero-inner{grid-template-columns:1fr}
  .hero-shot{transform:none}
  .header-inner{flex-wrap:wrap;justify-content:space-between;gap:8px 16px}
  .site-nav{order:3;flex-basis:100%}
  .site-nav ul{justify-content:flex-start;gap:0 18px}
  html{scroll-padding-top:130px}
}

/* Native downloads share the site's gold frames and keep every platform visible. */
.download-detection{margin:0 0 22px;color:var(--gold-200);font-size:.96rem}
.platforms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.platform-native{position:relative;display:flex;flex-direction:column;gap:12px;padding:30px}
.platform-native.is-recommended{border-color:var(--gold-300);box-shadow:inset 0 0 0 3px #050c14,0 0 30px #b98b3830}
.platform-icon{width:56px;height:56px;margin:0 0 10px;object-fit:contain}
.platform-native header{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.platform-native h3{margin:0}
.platform-native p{margin:0;color:var(--text-muted)}
.platform-native .btn{margin-top:auto}
.platform-version{min-height:26px}
.platform-recommended{color:var(--gold-300);font-weight:700;text-align:center}
.native-dialog{width:min(740px,92vw);max-height:88vh;padding:30px;color:var(--text);overflow:auto}
.native-dialog::backdrop{background:#02070de8;backdrop-filter:blur(5px)}
.native-dialog-heading{display:flex;align-items:start;justify-content:space-between;gap:24px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line-strong)}
.native-dialog-heading h2{margin:0;font-size:2rem}
.native-close{width:42px;height:42px;flex:none;border:1px solid var(--line-strong);border-radius:6px;background:var(--ink-900);color:var(--gold-200);font-size:1.7rem;cursor:pointer}
.native-options{display:grid;gap:16px;margin:22px 0}
.native-option{padding:20px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#0b1a2ccc}
.native-option h3{font-size:1.25rem;margin:0 0 6px}
.native-option p{color:var(--text-muted);font-size:.92rem;margin-bottom:14px}
.native-option .btn{width:100%;justify-content:space-between}
.native-checksum{margin-top:12px}
.native-checksum summary{cursor:pointer;color:var(--text-dim);font-size:.8rem}
.native-checksum code{display:block;font-size:.75rem;color:var(--text-muted);overflow-wrap:anywhere;margin-top:8px}
.native-release-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
@media (max-width:1100px){.platforms{grid-template-columns:repeat(2,minmax(0,1fr))}}