/* ECHO — shared styles for inner route pages (extends echo.css) */

/* nav (static) */
.nav { position:sticky; top:0; z-index:50; background:rgba(18,16,15,0.78); backdrop-filter:blur(20px) saturate(160%); border-bottom:1px solid var(--line-2); }
.nav__bar { display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }
.nav__links { display:flex; gap:30px; margin-left:auto; }
.nav__link { font-family:var(--f-display); font-weight:500; font-size:13px; letter-spacing:0.05em; color:var(--txt-2); position:relative; padding:4px 0; transition:color .2s; }
.nav__link:hover, .nav__link[aria-current="page"] { color:var(--ivory); }
.nav__link[aria-current="page"]::after { content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:var(--accent); }
.nav__cta { margin-left:8px; }
@media (max-width:880px){ .nav__links { display:none; } }

/* page hero */
.phero { position:relative; overflow:hidden; padding:clamp(40px,6vw,72px) 0 clamp(32px,4vw,48px); border-bottom:1px solid var(--line-2); }
.phero::before { content:""; position:absolute; inset:0; background:
  radial-gradient(80% 120% at 100% 0%, rgba(185,120,63,0.14), transparent 55%),
  radial-gradient(70% 90% at 0% 100%, rgba(28,25,23,0.6), transparent 60%); }
.phero__topo { position:absolute; right:-20px; top:10px; width:380px; height:200px; opacity:.45; }
.phero__inner { position:relative; z-index:2; max-width:64ch; }
.phero h1.h1 { font-size:clamp(32px,4.4vw,52px); margin-top:14px; }
.phero .lead { margin-top:16px; font-size:18px; }
.back { display:inline-flex; align-items:center; gap:8px; font-family:var(--f-display); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--txt-3); margin-bottom:8px; transition:color .2s; }
.back:hover { color:var(--accent); }
.back svg { transform:rotate(180deg); }

/* generic content grid */
.pgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; margin-top:8px; }
.pcard { padding:30px 26px; display:flex; flex-direction:column; gap:12px; }
.pcard h3 { display:flex; align-items:center; gap:12px; }
.pcard__k { font-family:var(--f-display); font-size:13px; color:var(--accent); border:1px solid rgba(185,120,63,0.35); border-radius:var(--r-pill); width:30px; height:30px; display:grid; place-items:center; flex-shrink:0; }
.pcard p { color:var(--txt-2); font-size:15px; margin:0; }
.game-list { color:var(--txt-2); font-size:15px; margin:0; padding-left:18px; display:grid; gap:7px; }
.game-list li::marker { color:var(--accent); }
.soon { font-family:var(--f-display); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--txt-3); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 10px; align-self:flex-start; margin-top:4px; }

/* cta band */
.cta { margin:clamp(56px,8vw,96px) 0; text-align:center; }
.cta .h2 { margin-bottom:14px; }
.cta__actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px; }

/* footer (static, mirrors landing) */
.footer { border-top:1px solid var(--line-2); padding-block:22px; }
.footer__bar { display:flex; align-items:center; justify-content:space-between; gap:18px; font-size:13px; }
.footer__soc { display:flex; gap:8px; }
.soc { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; color:var(--txt-2); transition:color .2s, border-color .2s, background .2s; }
.soc:hover { color:var(--ivory); border-color:rgba(185,120,63,0.4); background:rgba(185,120,63,0.08); }
.footer__url { font-family:var(--f-display); color:var(--accent); letter-spacing:0.06em; }
@media (max-width:760px){ .footer__bar { flex-direction:column; gap:12px; text-align:center; } }