@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Rajdhani:wght@600;700&display=swap');

:root {
  --tro-gold: #e0b14a;
  --tro-gold-br: #f0c868;
  --tro-gold-dim: #a8823a;
  --tro-accent: #7fdfd0;
  --tro-bg: #0a0d16;
  --tro-panel: #131829;
  --tro-panel-2: #1a2033;
  --tro-panel-3: #1f2740;
  --tro-border: rgba(224,177,74,0.18);
  --tro-border-lt: rgba(224,177,74,0.3);
  --tro-ink: #e8e6df;
  --tro-ink-dim: #a8a8b8;
  --tro-ink-faint: #7a7a8c;
  --radius-md: 12px;
  --radius-lg: 18px;
}

[data-md-color-primary=custom] {
  --md-primary-fg-color: var(--tro-bg);
  --md-primary-fg-color--light: var(--tro-panel);
  --md-primary-fg-color--dark: #05070d;
  --md-primary-bg-color: var(--tro-gold-br);
  --md-accent-fg-color: var(--tro-gold);
}
[data-md-color-scheme=slate] {
  --md-default-bg-color: var(--tro-bg);
  --md-default-fg-color: var(--tro-ink);
  --md-default-fg-color--light: var(--tro-ink-dim);
  --md-default-fg-color--lighter: var(--tro-ink-faint);
  --md-typeset-a-color: #8fc4ff;
  --md-code-bg-color: var(--tro-panel-2);
}

body { font-family: "Inter", "Segoe UI", Roboto, sans-serif; }

.md-header { background: linear-gradient(180deg, rgba(13,17,32,0.97), rgba(10,13,22,0.94)); border-bottom: 1px solid var(--tro-border); }
.md-tabs { background: var(--tro-panel); border-bottom: 1px solid var(--tro-border); }
.md-nav__title, .md-ellipsis { font-weight: 600; }
.md-typeset h1 { font-family: "Cinzel", serif; font-weight: 700; color: var(--tro-gold-br); }
.md-typeset h2 { font-family: "Rajdhani", sans-serif; font-weight: 700; color: var(--tro-gold-br); border-bottom: 1px solid var(--tro-border); padding-bottom: 6px; }
.md-typeset h3 { font-family: "Rajdhani", sans-serif; font-weight: 700; color: var(--tro-accent); }

/* ========== Forum-style hub components (ported from the MediaWiki build) ========== */
.tro-hero {
  position: relative;
  background:
    radial-gradient(ellipse 70% 100% at 20% 0%, rgba(224,177,74,0.18), transparent 60%),
    radial-gradient(ellipse 60% 100% at 90% 100%, rgba(127,223,208,0.12), transparent 60%),
    linear-gradient(160deg, var(--tro-panel-3), var(--tro-panel));
  border: 1px solid var(--tro-border-lt);
  border-radius: var(--radius-lg);
  padding: 48px 36px;
  text-align: center;
  margin: 8px 0 32px;
  overflow: hidden;
}
.tro-hero h1 { margin: 0 0 12px !important; font-size: 2.4em !important; }
.tro-hero p { color: var(--tro-ink-dim); margin: 0; font-size: 1.05em; max-width: 640px; margin-left: auto; margin-right: auto; }

.tro-card-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 22px 0; }
.tro-card {
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, var(--tro-panel-3), var(--tro-panel-2));
  border: 1px solid var(--tro-border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-decoration: none !important;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.tro-card:hover { transform: translateY(-4px); border-color: var(--tro-gold); box-shadow: 0 16px 36px rgba(0,0,0,0.4), 0 0 0 1px rgba(224,177,74,0.25); }
.tro-card-icon { font-size: 1.5em; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 12px; background: linear-gradient(160deg, rgba(224,177,74,0.18), rgba(224,177,74,0.05)); border: 1px solid rgba(224,177,74,0.25); border-radius: 12px; }
.tro-card-title { color: var(--tro-gold-br) !important; font-weight: 700; font-size: 1.1em; display: block; margin-bottom: 6px; font-family: "Rajdhani", sans-serif; }
.tro-card-desc { color: var(--tro-ink-dim); font-size: 0.87em; line-height: 1.5; }

.tro-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 2px 5px 2px 0; }
.tro-badge-high { background: rgba(255,122,26,0.15); color: #ff9a52; border: 1px solid rgba(255,122,26,0.35); }
.tro-badge-mid { background: rgba(127,223,208,0.15); color: #7fdfd0; border: 1px solid rgba(127,223,208,0.35); }
.tro-badge-low { background: rgba(200,80,80,0.15); color: #e08080; border: 1px solid rgba(200,80,80,0.35); }

.tro-infobox { float: right; width: 280px; margin: 0 0 20px 24px; background: linear-gradient(160deg, var(--tro-panel-3), var(--tro-panel-2)); border: 1px solid var(--tro-border-lt); border-radius: var(--radius-md); padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.tro-infobox dl { margin: 0; }
.tro-infobox dt { color: var(--tro-ink-faint); font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 14px; font-weight: 700; }
.tro-infobox dt:first-child { margin-top: 0; }
.tro-infobox dd { margin: 3px 0 0; color: var(--tro-ink); font-weight: 600; font-size: 0.95em; }
@media (max-width: 720px) { .tro-infobox { float: none; width: auto; margin: 0 0 20px 0; } }

.tro-changelog-entry { background: linear-gradient(160deg, var(--tro-panel-3), var(--tro-panel-2)); border: 1px solid var(--tro-border); border-left: 3px solid var(--tro-gold); border-radius: var(--radius-md); padding: 16px 20px; margin: 14px 0; box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
.tro-changelog-entry > b { color: var(--tro-ink); display: block; margin: 6px 0 4px; font-size: 1.05em; }
.tro-changelog-entry p { color: var(--tro-ink-dim); margin: 0; font-size: 0.92em; line-height: 1.6; }
.tro-changelog-entry p b { color: var(--tro-gold-br); font-weight: 700; }
.tro-tag { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.tro-tag-fixed { background: rgba(200,80,80,0.15); color: #e08080; border: 1px solid rgba(200,80,80,0.35); }
.tro-tag-added { background: rgba(127,223,208,0.15); color: #7fdfd0; border: 1px solid rgba(127,223,208,0.35); }
.tro-tag-content { background: rgba(224,177,74,0.15); color: var(--tro-gold-br); border: 1px solid rgba(224,177,74,0.35); }
.tro-note { color: var(--tro-ink-faint); font-size: 0.85em; font-style: italic; margin: 24px 0 8px; padding: 14px; border: 1px solid var(--tro-border); border-radius: var(--radius-md); background: var(--tro-panel-2); }

.tro-pop-strip { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; background: var(--tro-panel-2); border: 1px solid var(--tro-border); border-radius: var(--radius-md); padding: 14px 18px; margin: 4px 0 28px; }
.tro-pop-item { display: flex; align-items: center; gap: 8px; font-size: 0.9em; }
.tro-pop-label { color: var(--tro-ink-faint); font-weight: 700; text-transform: uppercase; font-size: 0.75em; letter-spacing: 0.05em; }
.tro-pop-value { color: var(--tro-gold-br); font-weight: 700; }
.tro-pop-updated { margin-left: auto; color: var(--tro-ink-faint); font-size: 0.75em; font-style: italic; }