/* ===========================================================================
   Sakura Bot — Website
   A dark theme so the pink logo carries (as in the original on black).
   The accent #FF9EC7 is exactly the bot's embed colour (0xff9ec7).
   =========================================================================== */

:root {
  color-scheme: dark;
  --bg: #0a0708;
  --bg-raised: #140f12;
  --bg-card: #171114;
  --border: #2a1f25;
  --border-strong: #3d2c34;

  --text: #f6eef1;
  --text-muted: #b9a7af;
  --text-dim: #8a777f;

  --pink: #ff9ec7;
  --pink-bright: #ffb8d6;
  --pink-deep: #d9548c;

  --legendary: #ffd700;
  --epic: #a855f7;
  --rare: #38bdf8;
  --uncommon: #4ade80;
  --common: #ff9ec7;

  --radius: 14px;
  --radius-lg: 20px;
  --maxw: 1120px;

  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Keep anchor jumps from landing underneath the fixed navigation */
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--pink);
  text-decoration: none;
}
a:hover {
  color: var(--pink-bright);
  text-decoration: underline;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
}

code {
  font-family: var(--mono);
  font-size: 0.92em;
}

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: min(100% - 2.5rem, var(--maxw));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pink);
  color: #2a0d19;
  padding: 0.7rem 1.1rem;
  z-index: 100;
  font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Navigation ---------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(10, 7, 8, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, background 0.25s;
}
.nav.is-scrolled {
  border-bottom-color: var(--border);
  background: rgba(10, 7, 8, 0.92);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 68px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.nav__brand:hover {
  text-decoration: none;
  color: var(--pink-bright);
}
.nav__brand img {
  width: 30px;
  height: 30px;
}
.nav__links {
  display: flex;
  gap: 1.4rem;
  margin-left: auto;
  font-size: 0.94rem;
}
.nav__links a {
  color: var(--text-muted);
}
.nav__links a:hover {
  color: var(--text);
  text-decoration: none;
}

@media (max-width: 800px) {
  .nav__links {
    display: none;
  }
  .nav__inner {
    height: 60px;
  }
}

/* ---------- Hero ---------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 7rem 0 5rem;
  isolation: isolate;
}

/* The branch as a full-bleed background.
   Landscape version, so on wide screens the branch really runs edge to edge
   instead of zooming into two giant blossoms. */
.hero__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("./sakura-hero.svg") no-repeat center / cover;
  opacity: 0.92;
  animation: sway 18s ease-in-out infinite alternate;
}

/* In portrait the square logo version carries better: the landscape one would
   be cropped away on both sides. Since that puts the blossoms in the middle of
   the frame, the branch is also dimmed and shifted up so the text on top stays
   readable. */
@media (max-aspect-ratio: 1/1) {
  .hero__art {
    background-image: url("./sakura-branch.svg");
    background-position: 62% 26%;
    opacity: 0.5;
  }
  .hero__veil {
    background:
      radial-gradient(ellipse 78% 40% at 50% 52%, rgba(10, 7, 8, 0.96) 0%, rgba(10, 7, 8, 0.85) 45%, rgba(10, 7, 8, 0.2) 82%),
      linear-gradient(to bottom, rgba(10, 7, 8, 0.8) 0%, rgba(10, 7, 8, 0.25) 26%, rgba(10, 7, 8, 0.25) 60%, var(--bg) 100%);
  }
}

/* Vignette: darkens specifically behind the text block so the blossoms at the
   edges keep their pink instead of reading as grey. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 46% 34% at 50% 50%, rgba(10, 7, 8, 0.94) 0%, rgba(10, 7, 8, 0.78) 42%, rgba(10, 7, 8, 0) 76%),
    linear-gradient(to bottom, rgba(10, 7, 8, 0.72) 0%, rgba(10, 7, 8, 0.1) 24%, rgba(10, 7, 8, 0.1) 62%, var(--bg) 100%);
}

@keyframes sway {
  from {
    transform: scale(1.04) translate3d(-0.6%, 0, 0);
  }
  to {
    transform: scale(1.09) translate3d(0.6%, -1%, 0);
  }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(23, 17, 20, 0.75);
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: 1.6rem;
}
.hero__badge b {
  color: var(--pink);
  font-weight: 600;
}

.hero h1 {
  font-size: clamp(3rem, 11vw, 6.5rem);
  margin: 0 0 0.35em;
  background: linear-gradient(165deg, #ffffff 12%, var(--pink) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback in case background-clip does not apply */
  text-shadow: 0 2px 40px rgba(255, 158, 199, 0.18);
}

.hero__tagline {
  font-size: clamp(1.02rem, 2.4vw, 1.3rem);
  color: var(--text-muted);
  max-width: 44ch;
  margin: 0 auto 2.6rem;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero__scroll span {
  display: block;
  margin: 0.5rem auto 0;
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--pink), transparent);
}
@media (max-height: 700px) {
  .hero__scroll {
    display: none;
  }
}

/* ---------- Buttons ------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.92rem 1.9rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s, border-color 0.18s;
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);
  color: #2b0c18;
  box-shadow: 0 8px 30px rgba(255, 158, 199, 0.26);
}
.btn--primary:hover {
  color: #2b0c18;
  box-shadow: 0 12px 38px rgba(255, 158, 199, 0.4);
}

.btn--ghost {
  background: rgba(23, 17, 20, 0.72);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--ghost:hover {
  color: var(--text);
  border-color: var(--pink);
  background: rgba(35, 24, 29, 0.85);
}

/* ---------- Sections ------------------------------------------------------ */

.section {
  padding: 5.5rem 0;
  border-top: 1px solid var(--border);
}
.section--flush {
  border-top: none;
}

.section__head {
  max-width: 62ch;
  margin-bottom: 3rem;
}
.section__eyebrow {
  display: block;
  color: var(--pink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.section__head h2 {
  font-size: clamp(1.8rem, 4.4vw, 2.6rem);
}
.section__head p {
  color: var(--text-muted);
  margin: 0;
  font-size: 1.05rem;
}

/* ---------- Feature cards ------------------------------------------------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 1.15rem;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.7rem;
  transition: border-color 0.2s, transform 0.2s;
}
.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
.card__icon {
  font-size: 1.7rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.9rem;
}
.card h3 {
  font-size: 1.14rem;
  margin-bottom: 0.45rem;
}
.card p {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.95rem;
}

/* ---------- Rarity tiers -------------------------------------------------- */

.rarity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}
.rarity__item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--tier, var(--pink));
  border-radius: var(--radius);
  padding: 1.25rem;
}

/* Tier colours as classes rather than style attributes on purpose: the
   Content-Security-Policy in vercel.json forbids inline styles, otherwise every
   card would render in a single colour in production. */
.rarity__item--legendary {
  --tier: var(--legendary);
}
.rarity__item--epic {
  --tier: var(--epic);
}
.rarity__item--rare {
  --tier: var(--rare);
}
.rarity__item--uncommon {
  --tier: var(--uncommon);
}
.rarity__item--common {
  --tier: var(--common);
}
.rarity__name {
  font-weight: 700;
  color: var(--tier, var(--pink));
  margin-bottom: 0.15rem;
}
.rarity__chance {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.1;
}
/* Two deliberate lines instead of one wrapping paragraph — that way all five
   cards look the same no matter how long the number is. */
.rarity__meta {
  color: var(--text-dim);
  font-size: 0.84rem;
  display: block;
}

/* ---------- Commands ------------------------------------------------------ */

.cmd-search {
  position: relative;
  max-width: 420px;
  margin-bottom: 2.5rem;
}
.cmd-search input {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: 0.97rem;
}
.cmd-search input::placeholder {
  color: var(--text-dim);
}
.cmd-search input:focus {
  outline: none;
  border-color: var(--pink);
}

.cmd-group {
  margin-bottom: 3rem;
}
.cmd-group:last-child {
  margin-bottom: 0;
}
.cmd-group__title {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 1.25rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}
.cmd-group__count {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-dim);
}

.cmd-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0.7rem;
}

.cmd {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
}
.cmd__name {
  font-family: var(--mono);
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--pink);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.cmd__desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0.35rem 0 0;
}
.cmd__subs {
  margin: 0.55rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.cmd__subs span {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-dim);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1rem 0.42rem;
}
.tag-admin {
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--legendary);
  border: 1px solid rgba(255, 215, 0, 0.35);
  background: rgba(255, 215, 0, 0.08);
  border-radius: 5px;
  padding: 0.05rem 0.4rem;
}

.cmd-empty {
  display: none;
  color: var(--text-muted);
  padding: 2rem 0;
}
.cmd-empty.is-visible {
  display: block;
}

/* ---------- Setup steps --------------------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.steps li {
  counter-increment: step;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: #2b0c18;
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.steps h3 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}
.steps p {
  color: var(--text-muted);
  font-size: 0.93rem;
  margin: 0;
}

/* ---------- Closing call to action ---------------------------------------- */

.cta {
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 158, 199, 0.07), transparent 70%);
  border-radius: var(--radius-lg);
  padding: 4rem 1.5rem;
  border: 1px solid var(--border);
}
.cta h2 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
}
.cta p {
  color: var(--text-muted);
  max-width: 46ch;
  margin: 0 auto 2rem;
}

/* ---------- Footer -------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 3.5rem 0 2rem;
  margin-top: 5rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 780px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}
.footer__brand p {
  color: var(--text-muted);
  font-size: 0.92rem;
  max-width: 34ch;
  margin: 0.7rem 0 0;
}
.footer h4 {
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 0.9rem;
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.footer ul a {
  color: var(--text-muted);
  font-size: 0.93rem;
}
.footer ul a:hover {
  color: var(--pink);
  text-decoration: none;
}
.footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--text-dim);
  font-size: 0.88rem;
}
.footer__legal {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.footer__legal a {
  color: var(--text-dim);
}

/* ---------- Legal pages --------------------------------------------------- */

.legal {
  padding-top: 9rem;
  padding-bottom: 2rem;
}
.legal__body {
  max-width: 72ch;
}
.legal__body h2 {
  font-size: 1.35rem;
  margin-top: 2.6rem;
}
.legal__body h3 {
  font-size: 1.05rem;
  margin-top: 1.8rem;
}
.legal__body p,
.legal__body li {
  color: var(--text-muted);
}
.legal__body ul {
  padding-left: 1.2rem;
}
.legal__body li {
  margin-bottom: 0.5rem;
}
.legal__updated {
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* ---------- Respect reduced motion ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero__art {
    animation: none;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ----------------------------------------------------------------- 404 page */
.nf-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 3rem 1.5rem;
  position: relative;
  z-index: 1;
}
.nf-inner { max-width: 46ch; }
.nf-inner img { width: 76px; height: auto; margin: 0 auto 26px; }
.nf-code {
  font-size: clamp(4.5rem, 17vw, 8.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0;
  opacity: 0.13;
}
.nf-inner h1 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); margin: -0.3em 0 0.6rem; }
.nf-inner p { margin: 0 0 1.9rem; opacity: 0.75; }