/* ==================================================================
   KingsMC custom.css
   Colour, font, and size CUSTOM PROPERTIES are injected inline in
   header.tpl from StaffCP settings (see template_settings/settings.php).
   The values below are fallback defaults only, used if something
   wasn't set — the real values almost always come from that inline
   <style> block, not from here.
   ================================================================== */

:root{
  /* the whole dark palette derives from --bg (Background Colour in
     StaffCP) via color-mix(), so one setting recolors it proportionally
     instead of 4 unrelated hardcoded shades drifting out of sync */
  --bg:            #0a0910;
  --bg-soft:       color-mix(in srgb, var(--bg) 88%, white);
  --panel:         color-mix(in srgb, var(--bg) 80%, white);
  --panel-hi:      color-mix(in srgb, var(--bg) 68%, white);
  --hairline:      color-mix(in srgb, var(--bg) 55%, white);

  --gold:          #FFD700;
  --gold-dim:      color-mix(in srgb, var(--gold) 65%, black);
  --gold-glow:     color-mix(in srgb, var(--gold) 35%, transparent);
  --on-gold:       #171106; /* text colour used on top of gold buttons/badges */

  /* secondary/accent colour — used sparingly for the secondary hero
     button and news category badges, so gold doesn't have to carry
     the entire palette by itself */
  --accent:        #7FD1FF;
  --accent-dim:    color-mix(in srgb, var(--accent) 65%, black);
  --accent-10:     color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-15:     color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-35:     color-mix(in srgb, var(--accent) 35%, transparent);

  /* every "gold tint" overlay in this file is derived from --gold via
     color-mix() so it always follows the Primary Colour setting, instead
     of a hardcoded rgba(255,215,0, ...) that would stay gold forever */
  --gold-02: color-mix(in srgb, var(--gold) 2%, transparent);
  --gold-07: color-mix(in srgb, var(--gold) 7%, transparent);
  --gold-08: color-mix(in srgb, var(--gold) 8%, transparent);
  --gold-10: color-mix(in srgb, var(--gold) 10%, transparent);
  --gold-12: color-mix(in srgb, var(--gold) 12%, transparent);
  --gold-18: color-mix(in srgb, var(--gold) 18%, transparent);
  --gold-20: color-mix(in srgb, var(--gold) 20%, transparent);
  --gold-22: color-mix(in srgb, var(--gold) 22%, transparent);
  --gold-25: color-mix(in srgb, var(--gold) 25%, transparent);
  --gold-30: color-mix(in srgb, var(--gold) 30%, transparent);
  --gold-35: color-mix(in srgb, var(--gold) 35%, transparent);

  --ink:           #f3efe3;
  --ink-dim:       #b7b2c4;
  --ink-faint:     #7a7488;

  --crimson:       #b23a3a;
  --live-green:    #4fd67a;
  --discord-blurple:#5865F2;

  --radius-lg:     20px;
  --radius-md:     14px;
  --radius-sm:     8px;

  --font-display:  'Cinzel', serif;
  --font-body:     'Manrope', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;
  --heading-tracking: .05em;
  --eyebrow-transform: uppercase;

  --max-w:         1240px;

  --nav-logo-size:    32px;
  --hero-logo-size:   128px;
  --footer-logo-size: 28px;

  --parchment:      #ece0c2;
  --parchment-2:     #ddc999;
  --ink-dark:        #362a17;
  --ink-dark-soft:    #5c4a2e;
  --seal:            #7c2323;
  --news-bg-color:   #0a0910; /* falls back to match --bg unless overridden in StaffCP */
}

/* Scope everything to our own classes so nothing here fights with
   Fomantic UI's ".ui" classes used on the rest of the site (forum,
   profile, login, etc). Only elements we render use km- classes. */

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
}
.km-wrap{ max-width:var(--max-w); margin:0 auto; padding:0 28px; }

/* ---------------------------------------------------------------
   NAV
   --------------------------------------------------------------- */
.km-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(10,9,16,0.86);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hairline);
}
.km-nav-inner{
  max-width:var(--max-w); margin:0 auto; padding:12px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.km-nav-brand{ display:flex; align-items:center; gap:10px; }
.km-nav-brand img{ height:var(--nav-logo-size); width:auto; max-width:220px; object-fit:contain; }
.km-nav-brand span{ font-family:var(--font-display); font-weight:700; letter-spacing:var(--heading-tracking); font-size:1.05rem; color:var(--gold); }

.km-nav-links{ display:flex; align-items:center; gap:6px; }
.km-nav-links a, .km-nav-dropdown > span{
  font-size:.86rem; font-weight:600; color:var(--ink-dim);
  padding:9px 14px; border-radius:999px; transition:.2s ease; letter-spacing:.02em;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.km-nav-links a:hover, .km-nav-dropdown:hover > span{ color:var(--gold); background:var(--gold-08); }
.km-nav-links a.active{ color:var(--gold); }

.km-nav-dropdown{ position:relative; }
.km-nav-dropdown-menu{
  position:absolute; top:100%; left:0; min-width:180px; padding:8px;
  background:var(--panel-hi); border:1px solid var(--hairline); border-radius:var(--radius-sm);
  box-shadow:0 16px 32px rgba(0,0,0,0.4);
  opacity:0; pointer-events:none; transform:translateY(6px); transition:.18s ease;
}
.km-nav-dropdown:hover .km-nav-dropdown-menu{ opacity:1; pointer-events:auto; transform:translateY(0); }
.km-nav-dropdown-menu a{ display:block; padding:8px 10px; border-radius:6px; font-size:.84rem; color:var(--ink-dim); }
.km-nav-dropdown-menu a:hover{ background:var(--gold-08); color:var(--gold); }
.km-nav-divider{ height:1px; background:var(--hairline); margin:6px 4px; }

.km-nav-cta{ display:flex; align-items:center; gap:10px; }
.km-btn-store{
  display:flex; align-items:center; gap:8px;
  background:var(--gold); color:var(--on-gold); font-weight:700; font-size:.85rem;
  padding:10px 18px; border-radius:999px; transition:transform .2s ease, box-shadow .2s ease;
}
.km-btn-store:hover{ transform:translateY(-2px); box-shadow:0 8px 24px var(--gold-glow); }
.km-btn-icon{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--hairline); color:var(--ink-dim); transition:.2s ease;
  overflow:hidden;
}
.km-btn-icon:hover{ color:var(--gold); border-color:var(--gold-dim); }
.km-btn-icon img{ width:20px !important; height:20px !important; max-width:20px !important; max-height:20px !important; border-radius:50% !important; object-fit:cover !important; }
.km-btn-ghost-sm{
  font-size:.85rem; font-weight:600; color:var(--ink-dim); padding:9px 16px;
  border-radius:999px; border:1px solid var(--hairline); transition:.2s ease;
}
.km-btn-ghost-sm:hover{ color:var(--gold); border-color:var(--gold-dim); }
.km-nav-burger{ display:none; background:none; border:none; color:var(--ink); padding:6px; }
.km-nav-burger svg{ width:22px; height:22px; }

.km-account-trigger{
  display:flex; align-items:center; gap:8px; padding:6px 14px 6px 6px;
  border-radius:999px; background:var(--panel); border:1px solid var(--hairline);
  color:var(--ink); font-size:.85rem; font-weight:600; cursor:pointer; transition:.2s ease;
}
.km-account-trigger:hover{ border-color:var(--gold-dim); color:var(--gold); }
/* !important + explicit max-* guards against NamelessMC's own avatar markup
   carrying inline width/height attributes, which would otherwise win */
.km-account-trigger img{
  width:26px !important; height:26px !important; max-width:26px !important; max-height:26px !important;
  border-radius:50% !important; object-fit:cover !important; flex-shrink:0;
}

/* Fomantic's popup component powers the account/notification dropdowns —
   restyled here rather than reimplemented, so the existing NamelessMC JS
   (positioning, hover-to-open, logout POST) keeps working untouched.
   Styled to match the parchment Notice Board cards (light, warm, dark
   ink text) rather than a dark panel, per your call. High-specificity
   compound selectors here since Fomantic's own multi-class rules for
   "wide basic" popups would otherwise win over a plain .ui.popup rule. */
.ui.popup,
.ui.popup.wide,
.ui.popup.basic,
.ui.wide.popup,
.ui.basic.popup,
.ui.wide.basic.popup{
  background:linear-gradient(160deg, var(--parchment), var(--parchment-2)) !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  box-shadow:0 16px 32px rgba(0,0,0,0.4) !important;
  color:var(--ink-dark) !important;
  border-radius:var(--radius-md) !important;
}
.ui.popup:before{
  background:var(--parchment) !important;
  box-shadow:1px 1px 0 0 rgba(0,0,0,0.08) !important;
}
.ui.popup .header{
  color:var(--seal) !important; font-family:var(--font-display); font-size:.9rem !important;
  letter-spacing:var(--heading-tracking);
}
.ui.relaxed.link.list .item{ color:var(--ink-dark-soft) !important; padding:8px 4px !important; }
.ui.relaxed.link.list .item:hover{ color:var(--seal) !important; }
.ui.relaxed.link.list .ui.divider{ border-color:rgba(0,0,0,0.1) !important; margin:6px 0 !important; }

@media(max-width:880px){
  .km-nav-links{ display:none; }
  .km-nav-burger{ display:flex; }
}

/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */
.km-hero{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:64px 24px 34px;
  background-color:var(--bg);
  background-image:var(--hero-bg-image, none);
  background-size:cover;
  background-position:center;
  isolation:isolate; overflow:hidden;
}
/* dark tint over the background photo — opacity is the "overlay darkness"
   setting; defaults to 1 (fully opaque) when there's no photo, so this is
   a no-op for anyone who hasn't uploaded one, identical to the flat look */
.km-hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:var(--bg);
  opacity:var(--hero-overlay-opacity, 1);
}
/* always-on soft fade at the bottom edge into the menu strip, independent
   of the overlay setting, so the transition never looks like a hard cut */
.km-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:110px; z-index:0;
  background:linear-gradient(180deg, transparent, var(--bg));
  pointer-events:none;
}
.km-hero-stage{ position:relative; z-index:1; width:100%; max-width:980px; display:flex; flex-direction:column; align-items:center; text-align:center; }

.km-logo-stage{ display:flex; flex-direction:column; align-items:center; gap:20px; position:relative; z-index:2; }

/* wrapper kept (rather than removed) so markup doesn't need touching elsewhere;
   it no longer draws a ring/glow — a wide wordmark logo doesn't suit one */
.km-crown-ring{ position:relative; display:flex; align-items:center; justify-content:center; }

.km-logo-img{
  position:relative; z-index:2; width:var(--hero-logo-size); height:auto; max-width:92vw; object-fit:contain;
  transition:width .2s ease;
}
/* Animation presets — swappable from StaffCP without touching this file.
   Add a new preset by adding a class here + an option in settings.tpl. */
.logo-anim-float{ animation:km-float-logo 4.4s ease-in-out infinite; }
@keyframes km-float-logo{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.logo-anim-spin{ animation:km-spin-logo 14s linear infinite; }
@keyframes km-spin-logo{ to{ transform:rotate(360deg); } }
.logo-anim-pulse{ animation:km-pulse-logo 2.6s ease-in-out infinite; }
@keyframes km-pulse-logo{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.04); } }
.logo-anim-none{ animation:none; }

.km-tagline{ font-family:var(--font-display); font-weight:600; letter-spacing:var(--heading-tracking); font-size:clamp(1.1rem, 2.4vw, 1.5rem); color:var(--ink); max-width:420px; }

/* ---- countdown widget ---- */
.km-countdown{
  background:linear-gradient(160deg, var(--panel-hi), var(--panel));
  border:1px solid var(--hairline); border-radius:var(--radius-lg);
  padding:18px 24px; width:100%; max-width:460px;
}
.km-countdown-head{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.km-countdown-pill{
  display:inline-flex; align-items:center; gap:7px; background:var(--bg-soft); border:1px solid var(--hairline);
  border-radius:999px; padding:5px 13px 5px 10px; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-dim);
}
.km-countdown-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--live-green); box-shadow:0 0 0 0 rgba(79,214,122,.55); animation:km-pulse-dot 1.8s infinite; }
.km-countdown-subtitle{ font-family:var(--font-display); font-size:.88rem; color:var(--ink); letter-spacing:var(--heading-tracking); }
.km-countdown-grid{ display:flex; align-items:center; justify-content:center; gap:8px; }
.km-countdown-unit{
  background:var(--bg-soft); border:1px solid var(--hairline); border-radius:var(--radius-sm);
  padding:10px 14px; min-width:58px; text-align:center;
}
.km-countdown-unit .num{ display:block; font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; }
.km-countdown-unit .label{ display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-top:4px; }
.km-countdown-sep{ font-family:var(--font-display); font-size:1.2rem; color:var(--ink-faint); }
@media(max-width:480px){
  .km-countdown{ padding:16px; }
  .km-countdown-grid{ gap:5px; }
  .km-countdown-unit{ padding:8px 10px; min-width:48px; }
  .km-countdown-unit .num{ font-size:1.2rem; }
}

.km-hero-ctas{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.km-btn-primary{
  background:var(--gold); color:var(--on-gold); font-weight:700; font-size:.9rem;
  padding:13px 30px; border-radius:999px; border:none; transition:transform .2s ease, box-shadow .2s ease;
  font-family:inherit; cursor:pointer; appearance:none; display:inline-block;
}
.km-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px var(--gold-glow); }
.km-btn-primary.copied{ background:var(--live-green); color:#0c1f14; }
.km-btn-ghost{
  background:transparent; color:var(--ink); font-weight:700; font-size:.9rem;
  padding:12px 29px; border-radius:999px; border:2px solid var(--accent); transition:.2s ease;
}
.km-btn-ghost:hover{ background:var(--accent-10); transform:translateY(-2px); color:var(--accent); }

.km-quick-actions{ width:100%; display:flex; justify-content:space-between; align-items:flex-start; margin-top:40px; position:relative; z-index:1; gap:20px; }
@media(max-width:760px){ .km-quick-actions{ flex-direction:column; align-items:center; gap:34px; margin-top:26px; } }
.km-quick-action{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:none; border:none; width:170px; text-align:center; transition:transform .2s ease; cursor:pointer;
}
.km-quick-action:hover{ transform:translateY(-3px); }
.km-qa-icon-wrap{ position:relative; width:54px; height:54px; }
.km-qa-icon{
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, var(--gold-18), var(--gold-02));
  border:1px solid var(--gold-25); transition:border-color .2s ease, box-shadow .2s ease;
}
.km-quick-action:hover .km-qa-icon{ border-color:var(--gold); box-shadow:0 0 24px var(--gold-glow); }
.km-qa-icon svg{ width:24px; height:24px; color:var(--gold); }
.km-qa-icon.discord{ background:radial-gradient(circle at 35% 30%, rgba(88,101,242,0.22), rgba(88,101,242,0.02)); border-color:rgba(88,101,242,0.35); }
.km-qa-icon.discord svg{ color:var(--discord-blurple); }
.km-quick-action:hover .km-qa-icon.discord{ border-color:var(--discord-blurple); box-shadow:0 0 24px rgba(88,101,242,0.4); }
.km-qa-dot{
  position:absolute; bottom:2px; right:2px; width:11px; height:11px; border-radius:50%;
  background:var(--live-green); border:2px solid var(--bg);
  box-shadow:0 0 0 0 rgba(79,214,122,.6); animation:km-pulse-dot 1.8s infinite;
}
.km-qa-dot.offline{ background:var(--crimson); animation:none; }
@keyframes km-pulse-dot{ 0%{ box-shadow:0 0 0 0 rgba(79,214,122,.55); } 70%{ box-shadow:0 0 0 7px rgba(79,214,122,0); } 100%{ box-shadow:0 0 0 0 rgba(79,214,122,0); } }
.km-qa-label{ font-size:.86rem; font-weight:700; color:var(--ink); font-family:var(--font-mono); }
.km-qa-sub{ font-size:.72rem; color:var(--ink-faint); }
.km-qa-sub.copied{ color:var(--live-green); }

/* ---------------------------------------------------------------
   Shared section chrome — still used by the Notice Board news
   section below (the menu strip above no longer uses these).
   --------------------------------------------------------------- */
.km-section{ position:relative; padding:80px 0 10px; background:var(--bg); }
.km-section-head{ text-align:center; max-width:560px; margin:0 auto 40px; }
.km-eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:var(--eyebrow-transform); color:var(--gold-dim); display:block; margin-bottom:10px; }
.km-section-head h2{ font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; color:var(--ink); letter-spacing:var(--heading-tracking); }
.km-section-head p{ color:var(--ink-dim); margin-top:10px; font-size:.95rem; }

/* ---------------------------------------------------------------
   MENU STRIP — compact, sits right under the hero, reads like a
   second navbar rather than a "scroll down to find it" section.
   --------------------------------------------------------------- */
.km-menu-strip-section{ position:relative; padding:0 0 56px; background:var(--bg); }
html{ background:var(--bg); }

.km-menu-strip{ display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap; gap:12px; }
.km-strip-tile{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:15px 22px; min-width:104px; text-align:center;
  background:linear-gradient(160deg, var(--panel-hi), var(--panel));
  border:1px solid var(--hairline); border-radius:var(--radius-lg);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  font-family:inherit; cursor:pointer; appearance:none; text-decoration:none;
}
.km-strip-tile:hover{ transform:translateY(-4px); border-color:var(--gold-dim); box-shadow:0 14px 28px rgba(0,0,0,0.35); }
.km-strip-icon{
  width:34px; height:34px; border-radius:10px; background:var(--gold-10); border:1px solid var(--gold-20);
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, border-color .2s ease;
}
.km-strip-icon svg{ width:17px; height:17px; color:var(--gold); }
.km-strip-title{ font-family:var(--font-display); font-size:.8rem; font-weight:700; color:var(--ink); letter-spacing:var(--heading-tracking); white-space:nowrap; }

/* copy-to-clipboard strip tiles ("Play Now") get a "Copied!" feedback state
   that briefly swaps the label, matching the hero button's behaviour */
.km-strip-tile.copied{ border-color:var(--live-green); }
.km-strip-tile.copied .km-strip-icon{ background:color-mix(in srgb, var(--live-green) 15%, transparent); border-color:color-mix(in srgb, var(--live-green) 35%, transparent); }
.km-strip-tile.copied .km-strip-icon svg{ color:var(--live-green); }
.km-strip-tile.copied .km-strip-title{ color:var(--live-green); }

.km-social-row{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; justify-content:center; }
.km-social-btn{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--hairline); color:var(--ink-dim); transition:.2s ease; font-size:1.1rem;
}
.km-social-btn:hover{ color:var(--gold); border-color:var(--gold-dim); transform:translateY(-3px); }

.km-widgets-row{ padding-top:20px; }
.km-widgets-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:760px){ .km-widgets-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------
   NEWS — "The Notice Board"
   --------------------------------------------------------------- */
.km-news{
  position:relative; overflow:hidden;
  background-color:var(--news-bg-color);
  background-image:var(--news-bg-image, none);
  background-size:cover; background-position:center;
  padding-bottom:100px;
}
/* same flat-tint approach as the hero's overlay — no vignette, no texture
   lines, so with no photo uploaded this section is visually identical to
   the rest of the site instead of reading as a slightly different shade */
.km-news::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--news-bg-color);
  opacity:var(--news-overlay-opacity, 1);
}
.km-news > .km-wrap{ position:relative; z-index:1; }

.km-decree{
  position:relative;
  background:linear-gradient(155deg, var(--parchment), var(--parchment-2));
  border-radius:6px; overflow:visible; margin-bottom:56px; padding:44px 48px;
  box-shadow:0 30px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.08) inset;
}
.km-decree.has-image{
  display:grid; grid-template-columns:1.15fr 1fr; align-items:stretch; padding:0;
}
.km-decree.has-image .km-decree-copy{ padding:44px 40px; }
.km-decree-thumb{ position:relative; min-height:220px; overflow:hidden; border-radius:0 6px 6px 0; }
.km-decree-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.km-decree-ribbon{
  position:absolute; top:18px; left:-38px; transform:rotate(-45deg);
  background:var(--accent-dim); color:#f2e2c4; font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:5px 46px; z-index:2; box-shadow:0 3px 8px rgba(0,0,0,0.3);
}
.km-decree-seal{
  position:absolute; top:-22px; right:36px; width:60px; height:60px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #a33636, var(--seal));
  display:flex; align-items:center; justify-content:center; z-index:5;
  box-shadow:0 8px 18px rgba(0,0,0,0.4), 0 0 0 3px var(--parchment);
}
/* once there's a thumbnail, the seal reads much more like an actual wax
   stamp sitting right where the two panels meet, rather than floating in
   a top corner */
.km-decree.has-image .km-decree-seal{
  top:50%; left:53.5%; right:auto; transform:translate(-50%, -50%);
}
@media(max-width:760px){
  .km-decree.has-image{ grid-template-columns:1fr; }
  .km-decree-thumb{ min-height:200px; border-radius:6px 6px 0 0; order:-1; }
  .km-decree.has-image .km-decree-seal{ top:200px; left:50%; right:auto; transform:translate(-50%, -50%); }
}
.km-decree-seal svg{ width:24px; height:24px; color:#f2e2c4; }
.km-decree-copy{ display:flex; flex-direction:column; gap:14px; max-width:64ch; }
.km-decree-date{ font-family:var(--font-mono); font-size:.74rem; color:var(--ink-dark-soft); }
.km-decree-copy h3{ font-family:var(--font-display); font-size:clamp(1.4rem,2.6vw,1.9rem); letter-spacing:var(--heading-tracking); line-height:1.2; }
.km-decree-copy h3 a{ color:var(--ink-dark); }
.km-decree-copy p{ color:var(--ink-dark-soft); font-size:.95rem; }
.km-decree-link{
  align-self:flex-start; margin-top:6px; display:inline-flex; align-items:center; gap:7px;
  background:var(--ink-dark); color:var(--parchment); font-weight:700; font-size:.85rem;
  padding:11px 20px; border-radius:999px; transition:.2s ease;
}
.km-decree-link:hover{ background:var(--seal); transform:translateY(-2px); }
.km-decree-link svg{ width:14px; height:14px; }

.km-news-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:34px 26px; padding-top:6px; }
@media(max-width:880px){ .km-news-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .km-news-grid{ grid-template-columns:1fr; } }

.km-news-card{
  position:relative;
  background:linear-gradient(160deg, var(--parchment), var(--parchment-2));
  border-radius:3px; box-shadow:0 14px 26px rgba(0,0,0,0.4);
  transition:transform .3s ease, box-shadow .3s ease;
}
.km-news-card:nth-child(6n+1){ transform:rotate(-1.6deg); }
.km-news-card:nth-child(6n+2){ transform:rotate(1.1deg); }
.km-news-card:nth-child(6n+3){ transform:rotate(-.6deg); }
.km-news-card:nth-child(6n+4){ transform:rotate(1.8deg); }
.km-news-card:nth-child(6n+5){ transform:rotate(-1.1deg); }
.km-news-card:nth-child(6n+6){ transform:rotate(.7deg); }
.km-news-card:hover{ transform:rotate(0deg) translateY(-6px) !important; box-shadow:0 24px 40px rgba(0,0,0,0.5); z-index:5; }
.km-news-pin{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%); z-index:4;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.km-news-pin svg{ width:20px; height:20px; color:var(--gold-dim); filter:drop-shadow(0 3px 3px rgba(0,0,0,0.5)); }
.km-news-body{ padding:22px 20px 22px; }
.km-news-badge{
  display:inline-block; background:var(--accent-15); color:var(--accent-dim);
  font-size:.63rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:3px; margin-bottom:10px;
}
.km-news-date{ font-size:.7rem; color:var(--ink-dark-soft); font-family:var(--font-mono); margin-bottom:7px; }
.km-news-body h3{ font-family:var(--font-display); font-size:1.02rem; margin-bottom:8px; line-height:1.3; letter-spacing:var(--heading-tracking); }
.km-news-body h3 a{ color:var(--ink-dark); }
.km-news-body p{ font-size:.83rem; color:var(--ink-dark-soft); margin-bottom:14px; }
.km-news-link{ font-size:.8rem; font-weight:700; color:var(--seal); display:inline-flex; align-items:center; gap:5px; }
.km-news-link svg{ width:13px; height:13px; transition:transform .2s ease; }
.km-news-card:hover .km-news-link svg{ transform:translate(2px,-2px); }

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
.km-footer{ border-top:1px solid var(--hairline); padding:50px 0 30px; background:var(--bg); }
.km-footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid var(--hairline); margin-bottom:22px; }
.km-footer-brand{ display:flex; align-items:center; gap:10px; }
.km-footer-brand img{ height:var(--footer-logo-size); width:auto; max-width:200px; object-fit:contain; }
.km-footer-brand span{ font-family:var(--font-display); font-weight:700; color:var(--gold); letter-spacing:var(--heading-tracking); }
.km-footer-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.km-footer-col h4{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
.km-footer-col a{ display:block; font-size:.86rem; color:var(--ink-dim); margin-bottom:10px; transition:.2s ease; }
.km-footer-col a:hover{ color:var(--gold); }
.km-footer-social{ display:flex; gap:10px; flex-wrap:wrap; }
.km-footer-social a{ margin-bottom:0; font-size:1.1rem; }
.km-footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.78rem; color:var(--ink-faint); }
.km-footer-meta{ display:flex; align-items:center; gap:0; }
.km-footer-meta > *{ display:inline-flex; align-items:center; }
.km-footer-meta > *:not(:first-child)::before{ content:'\2022'; margin:0 8px; opacity:.5; }
.km-footer-meta a{ color:var(--ink-faint); }
.km-footer-meta a:hover{ color:var(--gold); }

/* darkmode toggle (kept from stock, restyled small) */
.darkmode-toggle{ display:none; }
.darkmode-toggle-label{ display:inline-flex; align-items:center; gap:4px; cursor:pointer; color:var(--ink-faint); }
.darkmode-toggle-label .darkmode-ball{ display:none; }
.darkmode-toggle-label i{ font-size:.8rem; }

/* reveal-on-scroll (JS toggles .in) */
.km-reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.km-reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .km-reveal{ opacity:1; transform:none; transition:none; }
  .logo-anim-float, .logo-anim-spin, .logo-anim-pulse, .km-qa-dot{ animation:none; }
}


/* ---------------------------------------------------------------
   READY TO PLAY — 3-step connect section, added per site request.
   Mirrors the strip-tile card language already used elsewhere.
   --------------------------------------------------------------- */
.km-ready-ip{
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  max-width:520px; margin:0 auto 48px; background:linear-gradient(160deg, var(--panel-hi), var(--panel));
  border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:16px 22px;
}
.km-ready-ip-text{ font-family:var(--font-mono); color:var(--ink); font-size:1rem; }
.km-ready-steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; max-width:900px; margin:0 auto; }
@media(max-width:760px){ .km-ready-steps{ grid-template-columns:1fr; } }
.km-ready-step{
  text-align:center; padding:26px 20px;
  background:linear-gradient(160deg, var(--panel-hi), var(--panel));
  border:1px solid var(--hairline); border-radius:var(--radius-lg);
}
.km-ready-num{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:50%; border:1px solid var(--gold-20); color:var(--gold); font-family:var(--font-display);
  font-size:1.1rem; margin-bottom:14px;
}
.km-ready-step h3{ font-family:var(--font-display); color:var(--ink); font-size:1.05rem; letter-spacing:var(--heading-tracking); margin-bottom:8px; }
.km-ready-step p{ color:var(--ink-dim); font-size:.9rem; line-height:1.6; }

/* ---------------------------------------------------------------
   GUIDES — "Everything You Need to Know" custom card grid, shown
   instead of the official Wiki widget when Wiki display mode is
   set to "Custom guide section" in template settings.
   --------------------------------------------------------------- */
.km-guide-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px; max-width:1000px; margin:0 auto; }
.km-guide-card{
  display:block; text-align:center; padding:32px 24px; text-decoration:none;
  background:linear-gradient(160deg, var(--panel-hi), var(--panel));
  border:1px solid var(--hairline); border-radius:var(--radius-lg);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.km-guide-card:hover{ transform:translateY(-4px); border-color:var(--gold-dim); box-shadow:0 12px 30px rgba(0,0,0,.35); }
.km-guide-icon{
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:50%; background:var(--gold-07); color:var(--gold); margin-bottom:16px;
}
.km-guide-icon svg{ width:24px; height:24px; }
.km-guide-card h3{ font-family:var(--font-display); color:var(--ink); font-size:1.24rem; letter-spacing:var(--heading-tracking); margin-bottom:8px; }
.km-guide-card p{ color:var(--ink-dim); font-size:1.07rem; line-height:1.7; }


/* Guides sidebar nav (custom.tpl) — links between How to Play / Commands / Land Claims etc, mirrors the Wiki module's left-side category list */
.km-guide-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--hairline);}
.km-guide-nav-label{display:block;font-family:var(--font-display);font-size:.91rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px;}
.km-guide-nav a{padding:8px 10px;border-radius:var(--radius-sm);color:var(--ink-dim);text-decoration:none;font-size:1.11rem;transition:background .15s ease,color .15s ease;}
.km-guide-nav a:hover{background:var(--panel-hi);color:var(--ink);}
.km-guide-nav a.active{background:var(--gold-dim);color:var(--gold);font-weight:600;}