/* =========================================================
   RIVINS COMMUNITY — rivinscommunity.com
   Shared RIVINS ecosystem design system
   Brand accents: LIVE #ff2a6d · COMMUNITY #8b3dff · HOSTING #37e6ff
   ========================================================= */

:root{
  --bg:        #0b0b12;
  --bg-raise:  #12121d;
  --bg-card:   #15152230;
  --line:      #23233a;
  --text:      #f2f1fa;
  --muted:     #9b98b8;

  --live:      #ff2a6d;
  --community: #8b3dff;
  --hosting:   #37e6ff;

  --accent:    var(--community);
  --accent-2:  var(--hosting);

  --font-display: 'Chakra Petch', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;

  --radius: 14px;
  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ background:var(--bg); scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

/* ambient glow layer */
html::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(139,61,255,.16), transparent 60%),
    radial-gradient(700px 420px at -10% 30%, rgba(55,230,255,.08), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(255,42,109,.07), transparent 60%),
    var(--bg);
}

a{ color:var(--text); }
img{ max-width:100%; }

/* ---------- ecosystem bar (signature) ---------- */
.eco-bar{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 14px;
  background:rgba(10,10,17,.85);
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  backdrop-filter: blur(8px);
}
.eco-bar span.eco-label{ color:var(--muted); margin-right:10px; }
.eco-bar a{
  padding:4px 12px; border-radius:999px; text-decoration:none;
  color:var(--muted); border:1px solid transparent;
  transition:color .2s, border-color .2s, box-shadow .2s;
}
.eco-bar a:hover{ color:var(--text); }
.eco-bar a.eco-live:hover{ border-color:var(--live); }
.eco-bar a.eco-hosting:hover{ border-color:var(--hosting); }
.eco-bar a.eco-active{
  color:#fff; border-color:var(--accent);
  box-shadow:0 0 14px rgba(139,61,255,.45);
}

/* ---------- nav ---------- */
nav{
  display:flex; align-items:center; gap:26px;
  padding:18px 40px;
  max-width:var(--maxw); margin:0 auto;
}
nav .brand img{ height:52px; display:block; }
nav ul{ list-style:none; display:flex; gap:26px; margin:0 0 0 auto; padding:0; flex-wrap:wrap; }
nav ul a{
  text-decoration:none; font-weight:600; font-size:.92rem; color:var(--text);
  transition:color .2s;
}
nav ul a:hover{ color:var(--accent-2); }
nav .nav-cta{
  padding:9px 18px; border-radius:9px;
  background:linear-gradient(135deg, var(--community), #5a1fb8);
  box-shadow:0 0 18px rgba(139,61,255,.5);
  color:#fff !important;
}
nav .nav-cta:hover{ box-shadow:0 0 30px rgba(139,61,255,.85); }

/* ---------- hero ---------- */
.hero{
  min-height:72vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:60px 24px 80px;
}
.hero .eyebrow{
  font-family:var(--font-display);
  font-size:.8rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--accent-2); margin-bottom:18px;
}
.hero img.hero-logo{
  width:200px; margin-bottom:26px;
  filter:drop-shadow(0 0 22px rgba(139,61,255,.85));
  animation:floatLogo 4s ease-in-out infinite;
}
@keyframes floatLogo{
  0%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} 100%{ transform:translateY(0);}
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.4rem, 6vw, 3.8rem);
  font-weight:700; margin:0; line-height:1.05; text-transform:uppercase;
  background:linear-gradient(90deg, var(--community), var(--hosting));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero p.lead{
  max-width:620px; margin:20px 0 34px;
  font-size:1.15rem; color:var(--muted); line-height:1.6;
}

.live-chips{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:38px; }
.chip{
  display:flex; align-items:baseline; gap:8px;
  background:var(--bg-raise); border:1px solid var(--line);
  padding:10px 18px; border-radius:999px;
  font-family:var(--font-mono); font-size:.85rem; color:var(--muted);
}
.chip strong{ font-size:1.15rem; color:var(--accent-2); }
.chip .dot{
  width:8px; height:8px; border-radius:50%; align-self:center;
  background:#2eff8b; box-shadow:0 0 8px #2eff8b;
  animation:pulse 2s infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

.cta-row{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  padding:14px 30px; border-radius:9px; font-weight:700; text-decoration:none; color:#fff;
  font-family:var(--font-display); letter-spacing:.05em; text-transform:uppercase; font-size:.92rem;
  transition:box-shadow .25s, transform .25s;
}
.btn-primary{
  background:linear-gradient(135deg, var(--community), var(--live));
  box-shadow:0 0 24px rgba(139,61,255,.55);
}
.btn-primary:hover{ box-shadow:0 0 42px rgba(255,42,109,.8); transform:translateY(-2px); }
.btn-ghost{
  border:1px solid var(--line); background:rgba(18,18,29,.6);
}
.btn-ghost:hover{ border-color:var(--accent-2); box-shadow:0 0 22px rgba(55,230,255,.35); }

.continue-indicator{
  margin-top:64px; font-size:.78rem; letter-spacing:3px; text-transform:uppercase; color:var(--muted); opacity:.8;
}
.continue-indicator::after{
  content:""; display:block; width:60px; height:2px; margin:12px auto 0;
  background:linear-gradient(90deg, transparent, var(--accent-2), transparent);
}

/* ---------- generic section ---------- */
section.block{ padding:90px 24px; max-width:var(--maxw); margin:0 auto; }
.section-head{ text-align:center; margin-bottom:48px; }
.section-head .eyebrow{
  font-family:var(--font-display); font-size:.74rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--accent-2); display:block; margin-bottom:10px;
}
.section-head h2{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.8rem, 4vw, 2.6rem); margin:0;
  background:linear-gradient(90deg, var(--community), var(--hosting));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.section-head p{ color:var(--muted); max-width:620px; margin:14px auto 0; line-height:1.6; }

/* ---------- live streams + discord ---------- */
.live-grid{ display:grid; grid-template-columns:2fr 1fr; gap:22px; align-items:start; }
.stream-card, .panel{
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.stream-tabs{ display:flex; gap:8px; padding:14px 14px 0; flex-wrap:wrap; }
.stream-tabs button{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em;
  background:transparent; color:var(--muted); border:1px solid var(--line);
  padding:8px 18px; border-radius:8px; cursor:pointer; font-size:.8rem; font-weight:700;
  transition:all .2s;
}
.stream-tabs button.active{
  color:#fff; border-color:var(--live);
  box-shadow:0 0 14px rgba(255,42,109,.45);
}
.stream-tabs .watch-links{ margin-left:auto; display:flex; gap:8px; }
.stream-tabs .watch-links a{
  font-size:.75rem; color:var(--muted); text-decoration:none; align-self:center;
  border:1px solid var(--line); padding:6px 12px; border-radius:8px;
}
.stream-tabs .watch-links a:hover{ color:#fff; border-color:var(--accent); }
.stream-frame{ padding:14px; }
.stream-frame iframe{ width:100%; height:420px; border:0; border-radius:8px; display:block; background:#000; }
.panel iframe{ width:100%; height:494px; border:0; display:block; }

/* ---------- servers ---------- */
.server-stats{ display:flex; gap:40px; justify-content:center; margin-bottom:42px; flex-wrap:wrap; }
.server-stats > div{ text-align:center; }
.server-stats span{
  display:block; font-family:var(--font-display); font-size:2.6rem; font-weight:700;
  color:var(--accent-2); text-shadow:0 0 18px rgba(55,230,255,.5);
}
.server-stats small{ color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; }

.homepage-servers{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:18px;
}
.server-card{
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; display:flex; flex-direction:column; gap:12px;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.server-card:hover{ transform:translateY(-4px); border-color:var(--community); box-shadow:0 0 26px rgba(139,61,255,.35); }
.server-card.active{ border-color:var(--live); }
.server-card .badge{
  align-self:flex-start; font-size:.68rem; font-weight:700; letter-spacing:.1em;
  padding:4px 10px; border-radius:999px; background:rgba(255,42,109,.14); color:var(--live);
}
.server-card .badge.idle{ background:rgba(46,255,139,.1); color:#2eff8b; }
.server-card .game-title{ display:flex; gap:10px; align-items:center; font-weight:700; font-size:.95rem; line-height:1.3; }
.server-card .game-icon{ width:26px; height:26px; object-fit:contain; }
.server-card .server-meta{
  display:flex; justify-content:space-between; color:var(--muted);
  font-family:var(--font-mono); font-size:.78rem;
}
.server-progress{ height:6px; border-radius:999px; background:#1c1c2c; overflow:hidden; }
.server-progress span{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--community), var(--hosting));
}
.server-btn{
  margin-top:auto; text-align:center; text-decoration:none; font-weight:700; font-size:.82rem;
  border:1px solid var(--line); border-radius:8px; padding:9px;
  transition:border-color .2s, box-shadow .2s;
}
.server-btn:hover{ border-color:var(--accent-2); box-shadow:0 0 16px rgba(55,230,255,.35); }
.view-all-wrap{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:36px; }

.card-game{
  font-family:var(--font-mono); font-size:.7rem; color:var(--accent-2);
  text-transform:uppercase; letter-spacing:.1em; margin-top:-6px;
}

/* ---------- network history chart ---------- */
.netchart-wrap{ max-width:1100px; margin:0 auto 36px; }
.netchart-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.netchart-head h3{
  margin:0; font-family:var(--font-display); text-transform:uppercase; font-size:1.05rem;
}
.netchart-sub{ color:var(--muted); font-size:.78rem; font-family:var(--font-mono); }
.netchart{
  background:var(--bg-raise); border:1px solid var(--line); border-radius:16px; padding:16px;
}
.netchart svg{ display:block; width:100%; height:120px; border-radius:10px; background:#0d0d16; }
.netchart-stats{
  display:flex; justify-content:space-between; color:var(--muted);
  font-size:.78rem; margin-top:10px; font-family:var(--font-mono);
}
.netchart-stats b{ color:var(--accent-2); }
.netchart-empty{
  background:var(--bg-raise); border:1px dashed var(--line); border-radius:16px;
  padding:26px; text-align:center; color:var(--muted); font-size:.9rem;
}
.chart-hover{ cursor:crosshair; }
#chartTip{
  position:fixed; z-index:1000; pointer-events:none;
  background:#15152a; border:1px solid var(--community); border-radius:10px;
  padding:8px 12px; font-size:.85rem; box-shadow:0 6px 20px rgba(0,0,0,.5); white-space:nowrap;
}
#chartTip b{ color:var(--hosting); font-size:1rem; }
#chartTip span{ display:block; color:var(--muted); font-size:.72rem; margin-top:2px; font-family:var(--font-mono); }

/* ---------- games ---------- */
.games-grid{
  display:flex; gap:20px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:10px 4px 26px; scroll-snap-type:x mandatory; cursor:grab;
}
.games-grid:active{ cursor:grabbing; }
.game-card{
  flex:0 0 240px; height:300px; scroll-snap-align:start; position:relative;
  border-radius:16px; overflow:hidden; border:1px solid var(--line);
  background-color:var(--bg-raise);
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
  transition:transform .35s, box-shadow .35s, border-color .35s;
}
/* styled scrollbar under the games row */
.games-grid::-webkit-scrollbar{ height:8px; }
.games-grid::-webkit-scrollbar-track{ background:var(--bg-raise); border-radius:999px; }
.games-grid::-webkit-scrollbar-thumb{ background:#2e2e4a; border-radius:999px; }
.games-grid::-webkit-scrollbar-thumb:hover{ background:var(--community); }
.games-grid{ scrollbar-width:thin; scrollbar-color:#2e2e4a var(--bg-raise); }
.game-card:hover{ transform:scale(1.04); border-color:var(--community); box-shadow:0 0 34px rgba(139,61,255,.5); }
.game-card .overlay{ padding:20px; width:100%; }
.game-card h3{ margin:0 0 6px; font-family:var(--font-display); text-transform:uppercase; font-size:1.05rem; }
.game-card p{ margin:0; color:var(--muted); font-size:.8rem; line-height:1.45; }

/* ---------- radio ---------- */
.radio-embed{ max-width:900px; margin:0 auto; border-radius:var(--radius); overflow:hidden; box-shadow:0 0 40px rgba(0,0,0,.6); }
.radio-embed iframe{ width:100%; height:320px; border:0; display:block; background:var(--bg-raise); }

/* ---------- giveaways ---------- */
.give-table{ width:100%; border-collapse:collapse; background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.give-wrap{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.give-wrap .give-table{ min-width:520px; border:0; }
.give-table th, .give-table td{ padding:13px 18px; text-align:left; font-size:.9rem; }
.give-table thead th{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem;
  color:var(--accent-2); border-bottom:1px solid var(--line); background:#10101a;
}
.give-table tbody tr{ border-bottom:1px solid #1a1a2a; }
.give-table tbody tr:last-child{ border-bottom:0; }
.give-table tbody tr:hover{ background:#161624; }
.give-table td.winner{ color:var(--community); font-weight:700; }
.give-note{
  margin-top:18px; text-align:center; color:var(--muted); font-size:.9rem;
}
.give-note strong{ color:var(--live); }

/* ---------- ecosystem ---------- */
.eco-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:22px; }
.eco-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px;
  background:var(--bg-raise); text-decoration:none; display:block;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.eco-card .eco-tag{
  font-family:var(--font-display); font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  display:block; margin-bottom:12px;
}
.eco-card h3{ font-family:var(--font-display); text-transform:uppercase; margin:0 0 10px; font-size:1.25rem; }
.eco-card p{ color:var(--muted); margin:0; font-size:.92rem; line-height:1.55; }
.eco-card:hover{ transform:translateY(-5px); }
.eco-card.live .eco-tag{ color:var(--live); }
.eco-card.live:hover{ border-color:var(--live); box-shadow:0 0 30px rgba(255,42,109,.4); }
.eco-card.community .eco-tag{ color:var(--community); }
.eco-card.community{ border-color:var(--community); box-shadow:0 0 20px rgba(139,61,255,.25); }
.eco-card.hosting .eco-tag{ color:var(--hosting); }
.eco-card.hosting:hover{ border-color:var(--hosting); box-shadow:0 0 30px rgba(55,230,255,.4); }

/* ---------- discord CTA ---------- */
.discord-cta{
  text-align:center; padding:90px 24px;
  background:linear-gradient(180deg, transparent, rgba(139,61,255,.07) 50%, transparent);
}
.discord-cta ul{ list-style:none; padding:0; margin:26px auto 36px; color:var(--muted); line-height:2; }

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line); padding:36px 24px; text-align:center; color:var(--muted); font-size:.85rem;
}
footer .eco-links{ margin-bottom:12px; }
footer .eco-links a{ color:var(--muted); text-decoration:none; margin:0 10px; font-size:.8rem; }
footer .eco-links a:hover{ color:#fff; }
footer .disclaimer{ margin-top:12px; font-size:.74rem; color:#6d6a86; max-width:860px; margin-left:auto; margin-right:auto; line-height:1.5; }

/* ---------- responsive ---------- */
/* tablet (iPad portrait + small landscape) */
@media (max-width: 1024px){
  .live-grid{ grid-template-columns:1fr; }
  .panel iframe{ height:420px; }
  section.block{ padding:70px 20px; }
}
/* phone */
@media (max-width: 700px){
  nav{ padding:16px 18px; flex-wrap:wrap; }
  nav ul{ gap:14px 16px; width:100%; margin-top:10px; }
  .eco-bar{ flex-wrap:wrap; }
  .hero{ min-height:auto; padding:44px 18px 60px; }
  .hero img.hero-logo{ width:150px; }
  .stream-frame iframe{ height:240px; }
  .panel iframe{ height:380px; }
  .server-stats{ gap:24px; }
  .server-stats span{ font-size:2rem; }
  .radio-embed iframe{ height:380px; }
  .netchart svg{ height:96px; }
  .btn{ padding:12px 22px; font-size:.85rem; }
  section.block{ padding:56px 16px; }
  .discord-cta{ padding:64px 16px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---- ecosystem bar: destinations read as buttons (30 aug 2026) ---- */
/* rest state: a ring in the target's own colour, text above the label */
.eco-bar a{ color:#c9c6dd; }
.eco-bar a.eco-live     { border-color:rgba(255, 42,109,.42); }
.eco-bar a.eco-community{ border-color:rgba(139, 61,255,.42); }
.eco-bar a.eco-hosting  { border-color:rgba( 55,230,255,.42); }


/* hover and keyboard focus: same cue, turned up */
.eco-bar a.eco-live:hover,      .eco-bar a.eco-live:focus-visible
  { color:#fff; border-color:#ff2a6d; box-shadow:0 0 10px rgba(255,42,109,.40); }
.eco-bar a.eco-community:hover, .eco-bar a.eco-community:focus-visible
  { color:#fff; border-color:#8b3dff; box-shadow:0 0 10px rgba(139,61,255,.40); }
.eco-bar a.eco-hosting:hover,   .eco-bar a.eco-hosting:focus-visible
  { color:#fff; border-color:#37e6ff; box-shadow:0 0 10px rgba( 55,230,255,.40); }

.eco-bar a:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }

/* ---- sticky header needs a root that is not a scroll container ---- */
/* overflow-x:clip stops sideways scroll without breaking position:sticky */
html{ overflow-x:clip; }
body{ overflow-x:clip; }

/* ---- the header travels with the visitor ---- */
/* invisible 60px marker at the very top; when it leaves the viewport the
   header knows it is stuck and tightens up */
.eco-sentinel{
  position:absolute; top:0; left:0; width:1px;
  pointer-events:none; visibility:hidden;
}
/* Two markers, not one, to give the switch a dead zone. With a single
   threshold the header flipped back and forth whenever the visitor hovered
   around that exact scroll position, and every flip shifted the page by the
   height difference - which reads as the bar shuddering. */
.eco-sentinel.deep{ height:110px; }     /* passing this condenses */
.eco-sentinel.shallow{ height:40px; }   /* only above this does it expand */
.site-head{
  position:sticky; top:0; z-index:50;
  /* one glass layer, not two. The eco-bar carries its own 85% background;
     stacked on a second one the whole thing turned into a solid slab. */
  background:rgba(11,11,18,.40);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
          backdrop-filter:blur(16px) saturate(150%);
  transition:box-shadow .25s, background .25s, border-color .25s;
  border-bottom:1px solid transparent;
}
.site-head .eco-bar{ background:transparent; transition:padding .25s; }
.site-head nav{ transition:padding .25s; }

/* once stuck, just enough weight to separate it from the page */
.site-head.scrolled{
  background:rgba(11,11,18,.58);
  border-bottom-color:rgba(255,255,255,.07);
  box-shadow:0 6px 20px rgba(0,0,0,.28);
}

/* a browser without backdrop-filter gets a readable solid instead */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-head{ background:rgba(11,11,18,.92); }
  .site-head.scrolled{ background:rgba(11,11,18,.96); }
}
.site-head.scrolled .eco-bar{ padding-top:4px; padding-bottom:4px; }
.site-head.scrolled nav{ padding-top:9px; padding-bottom:9px; }

/* A logo image sets the floor for how short the nav can get. rivinslive.com
   has one at 55px; without this the header could not drop below ~109px while
   the other two reach 78px. Sites with a text brand are unaffected. */
.site-head nav img{ transition:height .25s ease; }
.site-head.scrolled nav img{ height:32px; }

/* anchor links must not land under the sticky header */
[id]{ scroll-margin-top:110px; }

/* on a phone: one compact row instead of two stacked ones.
   No overflow here on purpose - the hint balloon hangs below the bar and an
   overflow context would clip it away. The pills are shrunk to fit instead. */
@media (max-width:600px){
  .site-head .eco-bar{
    flex-wrap:nowrap; justify-content:center; gap:4px; padding:6px 8px;
    font-size:.62rem; letter-spacing:.06em;
  }
  .site-head .eco-bar .eco-label{ display:none; }
  .site-head .eco-bar a{ white-space:nowrap; padding:3px 9px; }
}
@media (max-width:360px){
  .site-head .eco-bar{ font-size:.57rem; }
  .site-head .eco-bar a{ padding:3px 7px; }
}

/* On a phone the header has to earn its space twice over. At the top of the
   page it is trimmed down - rivinslive.com carries a 55px logo and no mobile
   nav rules at all, so it was the thickest of the three. Once the visitor
   starts reading, the nav folds away entirely and only the ecosystem bar
   stays. Scrolling back to the top brings the nav back. */
@media (max-width:600px){
  .site-head nav{ padding-top:10px; padding-bottom:10px; }
  .site-head nav img{ height:38px; }
  .site-head.scrolled nav img{ height:30px; }
  .site-head nav{
    overflow:hidden; max-height:280px;
    transition:max-height .28s ease, opacity .2s ease, padding .28s ease;
  }
  .site-head.scrolled nav{
    max-height:0; opacity:0; padding-top:0; padding-bottom:0;
  }
}

/* ---- one-time hint balloon ---- */
.eco-bar{ position:relative; }
.eco-hint{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  z-index:60; pointer-events:none;
}
.eco-hint-inner{
  display:flex; align-items:center; gap:10px;
  background:#171729; color:#f2f1fa;
  border:1px solid #2f2f4a; border-radius:10px;
  padding:9px 10px 9px 14px;
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:.82rem; font-weight:600;
  letter-spacing:0; text-transform:none; white-space:nowrap;
  box-shadow:0 12px 34px rgba(0,0,0,.5); pointer-events:auto;
  animation:eco-in .45s .8s ease-out both, eco-bob 2.6s 1.5s ease-in-out infinite;
}
.eco-hint-inner::before{
  content:""; position:absolute; top:-6px; left:50%; margin-left:-6px;
  width:11px; height:11px; background:#171729;
  border-left:1px solid #2f2f4a; border-top:1px solid #2f2f4a;
  transform:rotate(45deg);
}
.eco-hint-inner button{
  all:unset; cursor:pointer; color:#9b98b8;
  font-size:1.05rem; line-height:1; padding:2px 5px; border-radius:5px;
}
.eco-hint-inner button:hover{ color:#f2f1fa; background:rgba(255,255,255,.08); }
@keyframes eco-in { from{opacity:0;transform:translateY(-7px);} to{opacity:1;transform:translateY(0);} }
@keyframes eco-bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(4px);} }

/* the two destinations catch the eye three times, then stop */
.eco-bar a[target="_blank"]{ animation:eco-pulse 2.2s 1s ease-in-out 3; }
@keyframes eco-pulse{ 0%,100%{filter:brightness(1);} 50%{filter:brightness(1.6);} }

@media (prefers-reduced-motion:reduce){
  .eco-hint-inner{ animation:eco-in .01s both; }
  .eco-bar a[target="_blank"]{ animation:none; }
  .site-head, .site-head .eco-bar, .site-head nav{ transition:none; }
}