/* Lunar Arcade — hub page.
   Palette follows the COSE site family (--accent / --accent2) but runs dark by
   default, because it is an arcade. */

:root{
  --bg:#080b12; --fg:#e6ebf2; --muted:#8d9aad; --line:#1d2836;
  --card:#0e141e; --card2:#121a26;
  --accent:#6ea3d8; --accent2:#54c9ba; --amber:#ffc857;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Roboto Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html[data-theme="light"] {
  --bg:#ffffff; --fg:#1a2230; --muted:#5a6473; --line:#e5e9f0;
  --card:#f7f9fc; --card2:#eef2f6;
  --accent:#3B6EA5; --accent2:#3FB6A8;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased;
}
.wrap{max-width:900px; margin:0 auto; padding:0 22px}
a{color:var(--accent2)}

/* ---------------- hero ---------------- */
.hero{
  padding:76px 0 60px; border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 420px at 78% -20%, rgba(110,163,216,.16) 0%, transparent 62%),
    radial-gradient(700px 380px at 8% 120%, rgba(84,201,186,.10) 0%, transparent 60%);
  position:relative; overflow:hidden;
}
/* a thin regolith horizon under the hero */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46px;
  background:linear-gradient(180deg,transparent,rgba(255,200,87,.05));
  border-top:1px solid rgba(255,200,87,.12);
}
.kicker{
  margin:0 0 10px; font:600 11px/1 var(--mono); letter-spacing:.28em;
  color:var(--muted); text-transform:uppercase;
}
h1{
  margin:0; font:800 clamp(38px,9vw,78px)/1 var(--mono); letter-spacing:.1em;
  color:var(--amber); text-shadow:0 0 34px rgba(255,200,87,.22);
}
.lede{max-width:60ch; color:#b9c6d8; margin:20px 0 26px}
.cta{
  display:inline-block; font:700 13px/1 var(--mono); letter-spacing:.16em;
  color:var(--amber); text-decoration:none;
  border:1px solid rgba(255,200,87,.4); border-radius:8px;
  padding:15px 24px; background:linear-gradient(180deg,#241d0d,#161108);
  transition:.15s;
}
.cta:hover{box-shadow:0 0 26px rgba(255,200,87,.2); transform:translateY(-1px)}
.cta.alt{margin-left:10px; color:var(--accent2); border-color:rgba(84,201,186,.38);
  background:linear-gradient(180deg,#0d2320,#081714)}
.cta.alt:hover{box-shadow:0 0 26px rgba(84,201,186,.18)}
@media (max-width:520px){.cta.alt{margin:10px 0 0; display:block; text-align:center}}

/* ---------------- sections ---------------- */
main{padding:52px 0 20px}
h2{
  font:700 12px/1 var(--mono); letter-spacing:.3em; color:var(--muted);
  text-transform:uppercase; margin:0 0 22px;
}
h3{margin:2px 0 10px; font-size:25px; letter-spacing:-.01em}

/* ---------------- cards ---------------- */
.card{
  display:grid; grid-template-columns:220px 1fr; gap:0;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,var(--card2),var(--card));
  margin-bottom:22px;
}
.card .body{padding:24px 26px}
.card p{color:#aebbcd; margin:0 0 12px}
.from{
  font:600 10px/1 var(--mono)!important; letter-spacing:.24em;
  color:var(--muted)!important; text-transform:uppercase; margin:0 0 4px!important;
}
.feat{margin:14px 0 18px; padding-left:18px; color:#9fb0c4; font-size:14.5px}
.feat li{margin:5px 0}
.feat em{color:var(--amber); font-style:normal}

.btn{
  display:inline-block; font:700 12px/1 var(--mono); letter-spacing:.14em;
  color:var(--amber); text-decoration:none;
  border:1px solid rgba(255,200,87,.4); border-radius:7px; padding:12px 18px;
  background:#1a1509; transition:.15s; margin-right:12px;
}
.btn:hover{box-shadow:0 0 20px rgba(255,200,87,.18)}

.tag{
  display:inline-block; font:700 10px/1 var(--mono); letter-spacing:.2em;
  color:var(--muted); border:1px solid var(--line); border-radius:20px;
  padding:7px 13px; vertical-align:middle;
}
.tag.ok{color:#5fd48a; border-color:rgba(95,212,138,.35)}

/* ---------------- card art (pure CSS, no assets) ---------------- */
.art{position:relative; background:#0a0e15; overflow:hidden; min-height:190px}
.art-mining{background:linear-gradient(180deg,#0a0e15 0 26%,#3a352b 26%,#241f18 100%)}
.art-mining .tunnel{
  position:absolute; left:16%; top:38%; width:68%; height:12px; border-radius:8px;
  background:#12161d; box-shadow:0 34px 0 -2px #12161d, 30px 62px 0 -3px #12161d;
  transform:rotate(-4deg);
}
.art-mining .dot{position:absolute; width:6px; height:6px; border-radius:2px; background:var(--amber)}
.art-mining .d1{left:26%; top:40%}
.art-mining .d2{left:52%; top:56%}
.art-mining .d3{left:70%; top:80%; background:#ff5a5a}

.art-farm{background:linear-gradient(180deg,#0a0e15 0 30%,#1a2a24 30%,#101a16 100%)}
.art-farm .row{
  position:absolute; left:14%; width:72%; height:8px; border-radius:4px;
  background:linear-gradient(90deg,var(--accent2),rgba(84,201,186,.25));
}
.art-farm .r1{top:46%} .art-farm .r2{top:62%; opacity:.7} .art-farm .r3{top:78%; opacity:.45}

.art-tower{background:linear-gradient(180deg,#0a0e15 0 22%,#221d2b 22%,#141018 100%)}
.art-tower .floor{
  position:absolute; left:22%; width:56%; height:14px; border-radius:3px;
  background:#2e2740; border:1px solid rgba(110,163,216,.3);
}
.art-tower .f1{top:30%} .art-tower .f2{top:44%} .art-tower .f3{top:58%}
.art-tower .f4{top:72%} .art-tower .f5{top:86%}

.card.live .art{box-shadow:inset 0 0 60px rgba(255,200,87,.12)}

/* ---------------- note + footer ---------------- */
.note{
  border:1px solid var(--line); border-radius:12px; padding:24px 26px;
  background:var(--card); margin-top:34px;
}
.note p{color:#a5b3c6; margin:0 0 12px; max-width:74ch}
.note strong{color:var(--fg)}

footer{padding:34px 0 50px; color:var(--muted); font-size:13px}
footer p{margin:0}

@media (max-width:660px){
  .card{grid-template-columns:1fr}
  .art{min-height:120px}
  .hero{padding:52px 0 44px}
}