/* =====================================================================
   The landing page itself: tokens, layout and the components index.html
   is built from. The Discord client and the respawn dashboard have their
   own sheets beside this one; nothing here is theirs.

   Palette and component language are shared with the bot's own monitoring
   dashboard (tibia-bot/src/main/resources/web/dashboard.html) so the two
   read as one product. Keep these tokens in sync with it.
   ===================================================================== */

:root {
  --bg: #0b0d12;
  --panel: #12151c;
  --panel-border: #1f2430;
  --text: #d7dce3;
  --text-strong: #e8ebf0;
  --muted: #7c8698;
  --accent: #5b8cff;
  --good: #3ecf8e;
  --warn: #e0a93e;
  --bad: #e0563e;
  --purple: #a78bfa;
  /* Not dashboard tokens — the dashboard's five accents were all taken by
     other channels, so #spawns and #notifications get sibling hues rather
     than repeats. */
  --pink: #e879b9;
  --cyan: #22d3ee;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; line-height: 1.65;
  /* faint grid, like a console backdrop */
  background-image:
    linear-gradient(rgba(255,255,255,0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 46px 46px;
}
/* 820 is the Discord client's number, and the column is built around it
   rather than the other way round. A client is full at its 195px sidebar
   plus 62px of message padding plus the 462px its embeds cap at — about
   720 — and 776px of content leaves that a little slack. Past it the
   messages do not grow and the extra becomes empty chat beside them.

   Everything else on the page shares that width because nothing else
   gains by breaking it: the command table is a fixed two columns, and
   prose set wider is prose whose next line the eye has to go looking
   for. The one exception is the respawn board, which breaks out on its
   own in dashboard.css — twelve spawns really are better as four columns
   than as two. */
.wrap { max-width: 820px; margin: 0 auto; padding: 0 22px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); }
code { font-family: var(--mono); background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 4px; font-size: 0.86em; color: var(--text-strong); }

/* ---- Top bar ---- */
header { border-bottom: 1px solid var(--panel-border); position: sticky; top: 0; z-index: 20;
         background: rgba(11,13,18,0.9); backdrop-filter: blur(8px); }
header .wrap { display: flex; align-items: center; gap: 14px; height: 52px; }
.brand { font-family: var(--mono); font-size: 13px; color: var(--text-strong); font-weight: 600; letter-spacing: -0.01em; }
.brand .slash { color: var(--muted); font-weight: 400; }
.brand:hover { text-decoration: none; }
.caret { display: inline-block; width: 7px; height: 14px; background: var(--accent); vertical-align: -2px; margin-left: 3px;
         animation: blink 1.1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }
header .spacer { flex: 1; }
header a.icon { color: var(--muted); font-size: 16px; }
header a.icon:hover { color: var(--text-strong); }

/* ---- Hero ---- */
.hero { padding: 76px 0 46px; text-align: center; }
.prompt-line { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.prompt-line .sigil { color: var(--good); }
.prompt-line .cmd { color: var(--text-strong); }
.hero h1 {
  font-size: clamp(30px, 6vw, 42px); line-height: 1.12; letter-spacing: -0.03em;
  margin: 0 0 16px; color: var(--text-strong); font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.hero h1 img { width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0; }
.hero p { color: var(--muted); margin: 0 auto 14px; max-width: 56ch; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; justify-content: center; }
.btn { display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; padding: 9px 15px;
       font-size: 13px; font-weight: 600; border: 1px solid var(--panel-border); }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #0b0d12; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: #2b3242; color: var(--text-strong); }
.btn-ghost:hover { background: #343d51; }

/* ---- Section rule ---- */
.rule {
  display: flex; align-items: center; gap: 12px; margin: 66px 0 26px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted);
  scroll-margin-top: 68px;
}
.rule::after { content: ''; flex: 1; height: 1px; background: var(--panel-border); }
.rule .hash { color: var(--accent); }

/* ---- Icons ----
   One rule for every icon on the page. They are <use> references into the
   symbol sprite at the top of index.html, so they inherit colour and size
   from whatever they sit in — which is the whole reason for drawing them
   as strokes rather than filling them. */
.ic {
  width: 1em; height: 1em; flex: none; vertical-align: -0.145em;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Channels: the mock Discord client ----
   The client itself is assets/css/discord.css; this is only what sits
   around it on the page. NOTE the class name the skin had to avoid:
   .caret belongs to the hero's blinking cursor. */
.lede { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.lede b { color: var(--text-strong); font-weight: 600; }

/* ---- Commands: a console block ---- */
.console { border: 1px solid var(--panel-border); border-radius: 9px; background: var(--panel); overflow: hidden; }
.console-bar { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-bottom: 1px solid var(--panel-border);
               font-family: var(--mono); font-size: 11px; color: var(--muted); }
.console-bar span.d { width: 8px; height: 8px; border-radius: 50%; background: var(--panel-border); }
.console-body { padding: 6px 0; }
.cline { display: grid; grid-template-columns: minmax(0,190px) 1fr; gap: 14px; padding: 7px 14px; font-size: 12.5px; align-items: baseline; }
.cline:hover { background: rgba(255,255,255,0.02); }
.cline .c { font-family: var(--mono); color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cline .c .arg { color: var(--muted); }
.cline .d2 { color: var(--muted); line-height: 1.55; }

/* ---- Prose blocks ---- */
.block { border: 1px solid var(--panel-border); border-radius: 9px; background: var(--panel); padding: 18px; }
.block + .block { margin-top: 10px; }
.block h4 { margin: 0 0 3px; font-size: 12.5px; color: var(--text-strong); font-family: var(--mono); }
.block p { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.block p:last-child { margin-bottom: 0; }

.support { text-align: center; }
.support p { color: var(--muted); }

footer { margin-top: 70px; border-top: 1px solid var(--panel-border); padding: 26px 0 40px;
         color: var(--muted); font-size: 12px; text-align: center; line-height: 1.9; }
footer img { width: 100px; opacity: 0.5; display: block; margin: 0 auto 10px; }

@media (max-width: 620px) {
  .cline { grid-template-columns: 1fr; gap: 3px; }
  .hero { padding: 52px 0 34px; }
  .hero h1 { gap: 12px; }
  .hero h1 img { width: 48px; height: 48px; border-radius: 11px; }
  .rule { margin: 50px 0 22px; }
}