/* === Riveria Online – Mobile-first Theme === */
:root{
  --bg:#0c0e13; --bg-alt:#0f1218; --text:#ebecf2; --muted:#a7a9b7;
  --line:#232836; --card:#121621; --orange:#ff7a00; --violet:#4b3db8;
  --violet-700:#3e33a0;
  --elev:0 10px 28px rgba(0,0,0,.35);
  --hdr-h:60px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Outfit",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1100px,92vw);margin-inline:auto}
.muted{color:var(--muted)}
h1,h2,h3{margin:0 0 .6rem}

/* Header */
.hdr{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(12,14,19,.85);
  border-bottom:1px solid var(--line);
}
.hdr__row{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;min-height:var(--hdr-h)}
.brand img{height:40px}

/* Nav + Burger */
.nav{display:flex;gap:.9rem;align-items:center}
.nav a{opacity:.95;padding:.35rem .2rem;border-radius:.5rem}
.nav a:hover{opacity:1}

.burger{
  display:none; width:42px; height:42px;
  border:1px solid #2b3141; border-radius:.7rem; background:transparent; position:relative;
}
.burger span{
  position:absolute; left:50%; width:20px; height:2px; background:#fff;
  transform:translateX(-50%); transition:transform .18s ease, opacity .18s ease, top .18s ease;
}
.burger span:nth-child(1){ top:11px }
.burger span:nth-child(2){ top:19px }
.burger span:nth-child(3){ top:27px }
.burger.is-open span:nth-child(1){ transform:translateX(-50%) rotate(45deg); top:19px }
.burger.is-open span:nth-child(2){ opacity:0 }
.burger.is-open span:nth-child(3){ transform:translateX(-50%) rotate(-45deg); top:19px }

/* Offcanvas (Mobile) */
@media (max-width:980px){
  .nav{ display:none }
  body.nav-open{ overflow:hidden }
  body.nav-open::after{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:59;
  }
  body.nav-open .nav{
    display:flex; flex-direction:column; gap:.6rem;
    position:fixed; left:4vw; right:4vw; top:calc(var(--hdr-h) + 10px); bottom:auto;
    background:var(--card); border:1px solid var(--line); border-radius:12px;
    padding:1rem; box-shadow:var(--elev); z-index:60;
    animation:navIn .14s ease-out both;
  }
  .nav__discord{ width:100%; justify-content:center }
  .burger{ display:block }
}
@keyframes navIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }

/* Buttons */
.btn{
  display:inline-flex;gap:.55rem;align-items:center;justify-content:center;
  padding:.8rem 1rem;border-radius:.9rem;border:1px solid transparent;
  font-weight:700; letter-spacing:.02em; min-height:44px; cursor:pointer;
}
.btn:hover{transform:translateY(-1px); transition:transform .08s ease}
.btn--primary{background:var(--orange);color:#101114}
.btn--primary:hover{filter:brightness(.95)}
.btn--outline{border-color:#2b3141;background:transparent}
.btn--outline:hover{border-color:#3a4256}
.btn--donate{background:var(--violet);color:#fff}
.btn--donate:hover{background:var(--violet-700)}
.badge-soon{
  display:inline-block; margin-left:.5rem; padding:.1rem .45rem;
  border-radius:999px; font-size:.8rem; line-height:1;
  border:1px solid #2b3141; background:#1a2030; color:#cfd2de;
}
.btn-mini{padding:.45rem .6rem;border:1px solid #2b3141;background:#1a2030;border-radius:.5rem;cursor:pointer;min-height:36px}
.btn-mini:hover{background:#20263a}

/* Logo-Style Headline */
.logo-title{
  margin:.2rem 0 .2rem;
  display:flex; align-items:center; gap:.6rem;
  font-weight:900; letter-spacing:.02em;
  font-size:clamp(2.2rem,6vw,3.6rem);
  line-height:1;
}
.logo--riveria{color:var(--orange)}
.logo--online{color:var(--violet)}
.logo-sep{ width:6px; height:20px; border-radius:3px; background:#2b3141; display:inline-block; transform:translateY(2px) }

/* Hero */
.hero{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center;padding:2rem 0 1.4rem}
@media (min-width:981px){ .hero{ grid-template-columns:1.1fr .9fr } }
.alpha-pill{display:inline-block;padding:.3rem .55rem;border:1px solid #2b3141;border-radius:.5rem;background:#1a2030;font-weight:800;margin:.4rem 0 .8rem;color:#ffd7b0}
.lede{color:var(--muted);max-width:60ch}
.cta{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.chips{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;list-style:none;padding:0;margin:1rem 0 0}
.chip{display:inline-flex;gap:.4rem;align-items:center;padding:.4rem .55rem;border:1px solid #2b3141;border-radius:999px;background:#141a28;color:#d5d7e3;font-size:.95rem}

.quick{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.quick code{background:#141a28;border:1px solid #2b3141;padding:.5rem .65rem;border-radius:.5rem;font-family:ui-monospace,Menlo,Consolas,monospace}
.hint{font-size:.95rem;color:#b6ffc5;min-height:1.2em}

/* Hero Panel */
.panel{
  border:1px solid var(--line); background:var(--card); border-radius:14px;
  padding:1rem; box-shadow:var(--elev);
}
.status{display:flex;gap:.8rem;align-items:center}
.dot{width:.7rem;height:.7rem;border-radius:50%;display:inline-block;background:#555}
.dot--online{background:#36d399}

/* Sections */
.section{padding:2rem 0}
.section--alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section__hd{margin-bottom:1rem}
.section__hd h2{font-size:clamp(1.4rem,4.5vw,2rem);margin:0 0 .2rem}

/* Facts */
.facts{display:grid;gap:.8rem;grid-template-columns:1fr}
.fact{display:flex;gap:.7rem;align-items:flex-start;border:1px solid var(--line);background:#151a24;border-radius:12px;padding:.8rem}
.fact i{ color:var(--orange); font-size:1.05rem; margin-top:.1rem }
@media (min-width:700px){ .facts{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:980px){ .facts{ grid-template-columns:repeat(3,1fr) } }

/* Cards / Grid mini */
.grid{display:grid;gap:12px}
.grid--auto{grid-template-columns:repeat(auto-fit, minmax(230px, 1fr))}
.card{
  border:1px solid var(--line); background:var(--card); border-radius:14px;
  padding:1rem; box-shadow:var(--elev);
}
.card.mini .mini__top{display:flex;align-items:center;gap:.55rem;margin-bottom:.15rem}
.card.mini i{color:var(--orange)}

/* News (Top 3) */
.simple-news{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:700px){.simple-news{grid-template-columns:repeat(3,1fr)}}
.ncard{
  border:1px solid var(--line); background:#121621; border-radius:14px; overflow:hidden; box-shadow:var(--elev);
}
.ncard img{width:100%;height:160px;object-fit:cover}
.ncard__body{padding:.85rem}
.ncard__body h3{margin:.2rem 0 .25rem;font-size:1.06rem}
.ncard__body p{color:var(--muted);margin:.1rem 0 .4rem}
.ncard__meta{display:flex;gap:.5rem;align-items:center;font-size:.92rem;color:#cfd2de}
.tag{display:inline-flex;align-items:center;padding:.18rem .45rem;border-radius:999px;border:1px solid #2b3141;background:#1a2030;font-size:.82rem;text-transform:uppercase;letter-spacing:.4px}

/* Spotlight */
.spot img{border-radius:14px;box-shadow:0 8px 26px rgba(0,0,0,.35)}

/* Roadmap */
.roadmap{display:grid;gap:10px}
@media (min-width:980px){ .roadmap{ grid-template-columns:repeat(3,1fr) } }
.roadcol{border:1px solid var(--line); background:#121621; border-radius:14px; padding:1rem; box-shadow:var(--elev)}
.roadcol h3{margin:.1rem 0 .5rem}
.roadcol ul{margin:0;padding-left:1rem}
.roadcol li{margin:.35rem 0}

/* Bug Board */
.board{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:980px){ .board{ grid-template-columns:repeat(3,1fr) } }
.col{display:flex;flex-direction:column;gap:.6rem}
.col__head{
  position:sticky; top:calc(var(--hdr-h) + 8px);
  background:var(--bg); border:1px solid var(--line);
  padding:.55rem .75rem; border-radius:.6rem; z-index:1; font-weight:700; display:flex; align-items:center; gap:.45rem
}
.col .cnt{margin-left:auto;opacity:.8}
.col__list{display:grid;gap:.6rem}
.ticket{
  border:1px solid var(--line); background:#121621; border-radius:12px; box-shadow:var(--elev);
  padding:.65rem .75rem; cursor:pointer
}
.ticket__title{font-weight:700;margin:0 0 .15rem}
.ticket__meta{color:var(--muted);font-size:.9rem}
.ticket[aria-expanded="true"] .ticket__body{display:block}
.ticket__body{display:none;color:#cfd2de;margin-top:.4rem}
.dot--warn{background:#ffb347}.dot--info{background:#7fb0ff}.dot--ok{background:#36d399}

/* Support grid */
.support-grid{display:grid; gap:10px; grid-template-columns:1fr}
@media (min-width:900px){ .support-grid{ grid-template-columns:repeat(3,1fr) } }
.support-card{ display:flex; flex-direction:column; gap:.6rem }
.support-card .list{ margin:.1rem 0 0; padding-left:1rem }
.support-card .list li{ margin:.3rem 0; color:var(--muted) }
.support-cta{ border:1px solid var(--line); background:var(--card); border-radius:14px; padding:1rem; box-shadow:var(--elev) }
.support-cta .cta{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.5rem }

/* Join */
.join{display:grid;grid-template-columns:1fr;gap:10px;align-items:start}
@media (min-width:980px){ .join{ grid-template-columns:1.1fr .9fr } }
.steps{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.6rem}
.steps li{display:flex;gap:.6rem;align-items:flex-start}
.steps span{flex:0 0 24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-weight:700;background:var(--orange);color:#101114}
.accent{color:#ffd7b0}

/* Mobile Join Dock */
.cta-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:58;
  transform:translateY(100%); transition:transform .18s ease;
  background:rgba(12,14,19,.92); border-top:1px solid var(--line); backdrop-filter:blur(8px);
}
.cta-dock.is-on{ transform:none }
.cta-dock__row{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.7rem 0 }
.cta-dock .btn{min-height:40px; padding:.6rem .9rem}
@media (min-width:960px){ .cta-dock{ display:none } }

/* Footer */
.ftr{border-top:1px solid var(--line);padding:1.4rem 0;background:var(--bg)}
.ftr__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ftr__brand{display:flex;align-items:center;gap:.8rem}
.ftr__brand img{height:34px}
.ftr__links{display:flex;gap:.6rem}
.ftr__links a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#141a28;border:1px solid #2b3141}

/* Prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}