/* Discord landing page bits — keeps your card theme and neon feel */

.discord-card {
  border: 1px solid rgba(88,101,242,0.35);      /* Discord blurple */
  box-shadow:
    0 0 10px rgba(56,189,248,0.25),
    inset 0 0 0 1px rgba(56,189,248,0.12);
}

.btn-discord {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:.6rem; font-weight:800;
  letter-spacing:.2px; text-transform: none;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-discord svg { width:20px; height:20px; }

.btn-discord.primary{
  color:#fff; background: linear-gradient(145deg,#5865F2,#4752C4);
  border:1px solid rgba(88,101,242,.55);
  box-shadow: 0 0 10px rgba(88,101,242,.45), 0 0 18px rgba(56,189,248,.25);
}
.btn-discord.primary:hover{ filter:brightness(1.05); transform: translateY(-1px); }

.btn-discord.secondary{
  color:#e5e7eb; background:rgba(88,101,242,.14);
  border:1px solid rgba(88,101,242,.45);
}
.btn-discord.secondary:hover{ background:rgba(88,101,242,.2); }

.btn-discord.ghost{
  color:#e5e7eb; background:rgba(2,6,23,.6);
  border:1px solid rgba(148,163,184,.35);
}
.btn-discord.ghost:hover{ background:rgba(15,23,42,.8); }

.copy-toast{
  margin-top:.5rem; display:inline-block;
  padding:.35rem .6rem; border-radius:.4rem;
  font-size:.8rem; font-weight:700;
  color:#0f172a; background:linear-gradient(145deg,#facc15,#fde047);
  box-shadow:0 0 10px rgba(250,204,21,.5);
}
.copy-toast.hidden{ display:none; }

/* Right-hand preview panel styled like a Discord embed/post */
.discord-preview { display:flex; align-items:stretch; }
.discord-panel{
  width:100%; height:100%; background:rgba(2,6,23,.75);
  border:1px solid rgba(148,163,184,.25); border-radius:.75rem;
  padding:1rem; box-shadow:0 12px 30px rgba(0,0,0,.35);
  margin-top: 0;
}
.discord-header{
  text-align:center; color:#94a3b8; font-size:.8rem; margin-bottom:.5rem;
}
.discord-post{ color:#e2e8f0; font-size:.95rem; }
.discord-author{ color:#cbd5e1; font-weight:700; margin-bottom:.35rem; }
.discord-author .pipe{ opacity:.35; margin:0 .25rem; }
.discord-author .role{ color:#38bdf8; }
.discord-author .meta{ margin-left:.5rem; color:#94a3b8; font-weight:600; font-size:.8rem; }

.discord-post .post-title{
  font-size:1.125rem; font-weight:800; color:#facc15;
  text-shadow: 0 0 6px rgba(250,204,21,.7);
  margin:.25rem 0 .35rem;
}
.discord-post .bar{
  height:6px; border-radius:999px; margin:.6rem 0;
  background:linear-gradient(90deg,#16a34a 0%, #22d3ee 100%);
  box-shadow:0 0 8px rgba(34,211,238,.5);
}
.discord-post .strong{ font-weight:900; }
.discord-post .underline{ text-decoration:underline; text-underline-offset:2px; }
.discord-post .muted{ color:#9aa5b1; }

.discord-post .scroll-top{
  margin-top:.75rem; font-weight:900; letter-spacing:2px;
  color:#fde047; text-shadow: 0 0 6px rgba(250,204,21,.7);
  font-size:1.35rem;
}

/* Steps list marker color tweak */
.discord-steps li::marker { color:#38bdf8; }

/* Small neon chips for world / location badges */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .55rem;
  border-radius: .5rem;
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  margin-right: .5rem;
}
.chip-world {
  color: #e0faff;
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.45);
  box-shadow: 0 0 6px rgba(56,189,248,.35);
}
.chip-gee {
  color: #fff8d1;
  background: rgba(250,204,21,.12);
  border: 1px solid rgba(250,204,21,.45);
  box-shadow: 0 0 6px rgba(250,204,21,.35);
}

/* Minor helpers that match your theme */
.hint {
  color: #94a3b8;
  font-size: .9rem;
}
/* Single-row, scrollable button strip */
.btn-row{
  display:flex;
  align-items:stretch;
  gap:.75rem;
  padding-top:.5rem;
  overflow-x:auto;               /* allow side scroll on small screens */
  white-space:nowrap;            /* keep on one line */
  -webkit-overflow-scrolling:touch;
}
.btn-row > *{ flex:0 0 auto; }   /* don't shrink buttons */
@media (min-width: 1024px){
  .btn-row{ overflow:visible; white-space:normal; }
}

/* optional: subtle, transparent scrollbar just for the row */
.btn-row::-webkit-scrollbar{ height:6px; }
.btn-row::-webkit-scrollbar-track{ background: transparent; }
.btn-row::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.35);
  border-radius: 999px;
}
/* Title + date row */
.post-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
}

/* Date styling */
.post-date{
  color:#94a3b8;           /* slate-400 */
  font-size:.875rem;       /* ~14px */
  font-weight:600;
  letter-spacing:.2px;
  white-space:nowrap;      /* prevent wrap */
}

/* Stack on narrow screens */
@media (max-width: 500px){
  .post-top{ flex-direction:column; align-items:flex-start; gap:.25rem; }
  .post-date{ font-size:.8rem; }
}