/* ==========================================================================
   Myrion — theme.css
   Loaded AFTER basic.css. Re-skins the legacy MyAAC/tibia.com markup toward
   the dark Gothic palette, and provides the bespoke homepage components
   (nav, hero, world, features, trailer, discord, footer).
   ========================================================================== */

:root{
  --void:#0B0C0E; --obsidian:#121418; --anthracite:#181B21; --ash:#22262D; --slate:#2C313A;
  --fog:#6B7280; --mist:#9AA1AB; --parchment:#D9D3C7;
  --steel:#3A627F; --steel-lo:#24384A; --moss:#2E4B3C; --moss-lo:#1C2E25;
  --bronze:#8A6A3E; --gold:#C9A24B; --gold-hi:#E4C77E; --ember:#D9772E; --blood:#8A3B34;
  --moon-silver:#B4BEC9; --moon-hi:#EAEEF3;
  --line:rgba(201,162,75,.16); --line-soft:rgba(255,255,255,.06);
  --font-display:'Cinzel', serif; --font-serif:'Cormorant Garamond', serif; --font-sans:'Inter', system-ui, sans-serif;
  --maxw:1180px; --ease:cubic-bezier(.16,.84,.44,1);
}

/* Russian: Cinzel and Cormorant Garamond have no Cyrillic glyphs, so the
   display/serif families fall back to a plain system serif for Russian
   text. Swap in Playfair Display (Cyrillic-capable, loaded only for ru in
   index.php) so the headings and flavour text keep an elegant serif look.
   Inter (--font-sans) already covers Cyrillic, so it's untouched. */
:root[lang="ru"], html[lang="ru"]{
  --font-display:'Playfair Display', 'Cinzel', serif;
  --font-serif:'Playfair Display', 'Cormorant Garamond', serif;
}
/* ...but the "Myrion" wordmark is always the Latin server name, so keep it on
   Cinzel in every language. Cinzel is all-caps with no descenders, which the
   wordmark's very tight line-height (.94) is tuned for — Playfair's lowercase
   descenders (the "y") would otherwise get clipped. */
html[lang="ru"] .jd-wordmark{ font-family:'Cinzel', serif; }

/* ---------- reset the tibia.com chrome we don't want ---------- */
html{ background:var(--void) !important; }
body{
  font-family:var(--font-sans) !important;
  color:var(--parchment) !important;
  line-height:1.7;
  background:none !important;
}
#ArtworkHelper, #Bodycontainer{ background:transparent !important; }
#MenuColumn, #ThemeboxesColumn, #LeftArtwork, #Loginbox, #DownloadBox, #Menu{ display:none !important; }
#ContentColumn{ width:100% !important; float:none !important; margin:0 !important; padding:0 !important; }
#ContentRow{ display:block !important; }
#top{ display:none; }

a{ color:var(--gold-hi); text-decoration:none; }
a:hover{ color:var(--gold); }

/* ---------- atmospheric background (shared across every page) ---------- */
/* z-index:0 (not negative) — negative z-index would sit behind the canvas
   background of html/body and never be visible; foreground content is
   pulled above it explicitly via position:relative + z-index:1 instead. */
#jd-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.jd-hero, #world, #features, #news, #jd-trailer, .jd-discord, #jd-footer, main.jd-page, .jd-wrap > .jd-divider{
  position:relative; z-index:1;
}
#jd-bg .atmos{ position:absolute; inset:0;
  /* the central radial glow was removed on request - just the flat dark
     vertical gradient remains behind the logo now. */
  background:linear-gradient(180deg, #06070A 0%, #090B0F 38%, #0E141C 68%, #0A0E14 100%);
}
/* emblem lives in the fixed #jd-bg layer so it can persist through the hero
   and be driven by the scroll effect (theme.js): grows and fades as you
   scroll, so it's gone well before it could float over the sections below. */
.jd-hero{ position:relative; }
/* both layers share the same center point (top/left + translate(-50%,-50%))
   so the glow sits concentrically behind the logo regardless of their
   different widths/heights, instead of drifting down beneath it */
/* golden glow behind the ram-skull logo (fades out on scroll via theme.js) */
#jd-bg .jd-emblem-glow{ position:absolute; top:22%; left:50%; transform:translate(-50%,-50%);
  width:min(46vw,560px); height:min(46vw,560px);
  background:radial-gradient(circle, rgba(201,162,75,.20), rgba(74,104,132,.10) 45%, transparent 72%);
  filter:blur(12px); pointer-events:none; will-change:transform,opacity; }
#jd-bg .jd-emblem-wrap{ position:absolute; top:22%; left:50%; transform:translate(-50%,-50%);
  width:min(24vw,320px); min-width:170px; height:min(24vw,320px); min-height:170px;
  pointer-events:none; will-change:transform,opacity; }
#jd-bg .jd-emblem{ position:absolute; inset:0; width:100%; height:100%;
  opacity:.92; filter:drop-shadow(0 20px 50px rgba(0,0,0,.65)); pointer-events:none; }
/* faint blue glow over the mask's eye sockets (matches the sockets' own
   blue-grey tone), coordinates measured directly off server-logo.png
   (900x900) — only prominent at the very top of the homepage (scroll t=0)
   since it fades via the same glowOpacity JS drives the ambient emblem
   glow with; both eyes pulse in sync with a slow breathing rhythm. */
#jd-bg .jd-emblem-eye{ position:absolute; width:6%; height:6%; transform:translate(-50%,-50%); pointer-events:none; opacity:0; }
#jd-bg .jd-emblem-eye-l{ top:37.3%; left:34.0%; }
#jd-bg .jd-emblem-eye-r{ top:37.2%; left:67.0%; }
#jd-bg .jd-emblem-eye::after{
  content:""; position:absolute; inset:-40%; border-radius:50%;
  background:radial-gradient(circle, rgba(90,180,255,.9) 0%, rgba(30,110,190,.55) 40%, transparent 72%);
  filter:blur(3px); mix-blend-mode:screen;
  animation:jd-eye-pulse 6.5s ease-in-out infinite;
}
@keyframes jd-eye-pulse{
  0%,100%{ opacity:.35; transform:scale(.85); }
  50%{ opacity:1; transform:scale(1.15); }
}
@media (prefers-reduced-motion: reduce){
  #jd-bg .jd-emblem-eye::after{ animation:none; opacity:.7; }
}
@media(max-width:700px){
  #jd-bg .jd-emblem-wrap{ width:40vw; height:40vw; top:18%; }
  #jd-bg .jd-emblem-glow{ width:56vw; height:56vw; top:18%; }
}
#jd-bg .grain{ position:absolute; inset:0; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.ember{ position:fixed; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:radial-gradient(circle, var(--gold-hi), rgba(217,119,46,.2));
  box-shadow:0 0 8px 1px rgba(217,119,46,.5); pointer-events:none; opacity:0; animation:jd-rise linear infinite; z-index:1; }
@keyframes jd-rise{ 0%{transform:translateY(0);opacity:0} 10%{opacity:.9} 90%{opacity:.5} 100%{transform:translateY(-105vh);opacity:0} }

/* ---------- layout helpers ---------- */
.jd-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.jd-section{ padding:100px 0; position:relative; }
/* .jd-section's `padding:100px 0` shorthand zeroes the horizontal gutter that
   .jd-wrap sets on the same element. On desktop that's invisible (content is
   centred inside --maxw), but once the viewport is narrower than --maxw the
   section content hugs the screen edge. Restore the gutter in mobile mode only
   so the desktop view stays untouched. */
@media(max-width:820px){ .jd-section{ padding-left:22px; padding-right:22px; } }
.jd-reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.jd-reveal.in{ opacity:1; transform:none; }
.jd-divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); max-width:var(--maxw); margin:0 auto; }

/* ---------- nav ---------- */
#jd-nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; padding:18px 32px; transition:all .5s var(--ease); border-bottom:1px solid transparent; }
#jd-nav.scrolled{ background:rgba(11,12,14,.78); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); padding:12px 32px; }
.jd-brand{ font-family:var(--font-display); font-weight:700; letter-spacing:.3em; font-size:15px; color:var(--parchment); }
.jd-brand b{ color:var(--gold); }
.jd-navlinks{ display:flex; gap:28px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist);
  grid-column:2; justify-self:center; white-space:nowrap; }
.jd-navlinks a{ position:relative; transition:color .3s; }
.jd-navlinks a::after{ content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--gold); transition:width .35s var(--ease); }
.jd-navlinks a:hover{ color:var(--parchment); }
.jd-navlinks a:hover::after{ width:100%; }
/* right-hand nav cluster: language switcher (always visible) + the CTA
   buttons (which fade in only once the nav goes solid on scroll). */
.jd-navend{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:14px; }
.jd-navcta{ display:flex; gap:10px; align-items:center;
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .6s var(--ease), transform .6s var(--ease); }
#jd-nav.scrolled .jd-navcta{ opacity:1; transform:none; pointer-events:auto; }

/* language switcher (flag chips) — inactive flags sit dimmed/desaturated,
   the active one is full-colour with a gold edge + soft glow to match the
   theme's accent. */
.jd-langswitch{ display:flex; align-items:center; gap:5px; padding:4px 5px; border-radius:8px;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.02); }
.jd-lang{ display:block; line-height:0; border-radius:3px; overflow:hidden;
  border:1px solid rgba(255,255,255,.15); opacity:.5; filter:grayscale(.4);
  transition:border-color .3s var(--ease), filter .3s var(--ease), opacity .3s var(--ease); }
.jd-lang img{ display:block; width:32px; height:21px; object-fit:cover; }
.jd-lang:hover{ opacity:1; filter:none; border-color:rgba(255,255,255,.35); }
.jd-lang.active{ opacity:1; filter:none; border-color:var(--gold); box-shadow:0 0 7px rgba(201,162,75,.4); }
.jd-langswitch-mobile{ margin-top:18px; align-self:flex-start; gap:8px; padding:6px 8px; }
.jd-langswitch-mobile .jd-lang img{ width:42px; height:28px; } /* bigger tap target on phones */

/* On mobile the top nav is just hamburger (left) + language flags (right).
   The CTA buttons are hidden here: they're invisible-until-scroll but still
   took layout width, which pushed the flag switcher off the left edge and
   caused horizontal scroll (and the content hugging the edge that came with
   it). Login/Create live in the hero + hamburger menu on mobile anyway. */
@media(max-width:820px){ .jd-navlinks{ display:none; } .jd-navcta{ display:none; } }

/* ---------- mobile nav (hamburger + dropdown, ≤820px only) ---------- */
.jd-hamburger{ display:none; grid-column:1; justify-self:start; width:34px; height:34px; padding:0; border:none;
  background:none; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:6px; z-index:101; }
.jd-hamburger span{ display:block; width:22px; height:1.5px; background:var(--parchment); transition:transform .35s var(--ease), opacity .35s var(--ease); }
.jd-hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.jd-hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.jd-hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
@media(max-width:820px){
  .jd-hamburger{ display:flex; width:26px; height:26px; gap:5px; }
  .jd-hamburger span{ width:19px; }
  /* thinner bar on mobile - the desktop 18px/12px vertical padding plus
     full-size CTA buttons made it noticeably taller than it needs to be
     on a phone screen. */
  #jd-nav{ padding:10px 18px; }
  #jd-nav.scrolled{ padding:8px 18px; }
  /* "Create Account" was wrapping to two lines at this width (uppercase +
     wide letter-spacing needs more room than it had), which is what was
     actually stretching the bar tall - not just the padding. */
  .jd-navcta .jd-btn{ padding:7px 12px; font-size:10px; letter-spacing:.04em; white-space:nowrap; }
}

.jd-mobile-nav{ position:fixed; top:0; left:0; right:0; z-index:99; display:none; flex-direction:column;
  padding:88px 32px 28px; background:rgba(11,12,14,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateY(-14px); pointer-events:none; transition:opacity .3s var(--ease), transform .35s var(--ease); }
@media(max-width:820px){ .jd-mobile-nav{ display:flex; padding-top:64px; } }
.jd-mobile-nav.jd-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.jd-mobile-nav a{ font-family:var(--font-display); font-size:16px; letter-spacing:.1em; text-transform:uppercase; color:var(--parchment);
  padding:16px 0; border-bottom:1px solid var(--line-soft); transition:color .3s; }
.jd-mobile-nav a:last-child{ border-bottom:none; }
.jd-mobile-nav a:hover{ color:var(--gold-hi); }
/* account actions (My Account / Log Out, or Log In / Create) get a gold
   accent + a stronger top divider to set them apart from the page links. */
.jd-mobile-nav a.jd-mobile-nav-acct{ margin-top:10px; border-top:1px solid var(--line); color:var(--gold-hi); }
/* the last page link (Shop) sits right above the account divider; drop its
   grey border-bottom so only the account link's gold border-top shows -
   otherwise the two stack into a doubled grey+gold line. */
.jd-mobile-nav a:has(+ a.jd-mobile-nav-acct){ border-bottom:none; }

/* ---------- admin quick-access tile ---------- */
/* fixed to the viewport (not normal document flow) so it stays on screen at
   the same spot no matter how far the page is scrolled - shown on every
   page, homepage included, only when logged in as an admin-flagged account. */
.jd-admin-tile-wrap{ position:fixed; top:90px; left:32px; z-index:90; }
.jd-admin-tile{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:10px; padding:14px 20px;
  background:linear-gradient(180deg, rgba(58,98,127,.9), rgba(36,56,74,.95)); border:1px solid var(--steel); border-radius:8px;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.6);
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.jd-admin-tile-label{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; margin-bottom:2px; }
.jd-admin-tile a{ color:var(--parchment); transition:color .3s; }
.jd-admin-tile a:hover{ color:var(--gold-hi); }

/* ---------- buttons ---------- */
.jd-btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-sans); font-weight:500; font-size:12.5px;
  letter-spacing:.13em; text-transform:uppercase; padding:13px 26px; border-radius:4px; cursor:pointer;
  transition:all .4s var(--ease); position:relative; overflow:hidden; border:1px solid transparent; }
.jd-btn-primary{ color:#120E06; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); box-shadow:0 8px 26px -8px rgba(201,162,75,.5); }
.jd-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -8px rgba(201,162,75,.7); color:#120E06; }
.jd-btn-ghost{ color:var(--parchment); border:1px solid var(--line); background:rgba(255,255,255,.02); }
.jd-btn-ghost:hover{ border-color:var(--gold); color:var(--gold-hi); background:rgba(201,162,75,.06); }

/* ---------- hero (homepage only) ---------- */
.jd-hero{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding-top:90px; }
.jd-kicker{ font-family:var(--font-sans); font-size:11.5px; letter-spacing:.4em; text-transform:uppercase; color:var(--bronze); margin-bottom:26px; }
.jd-wordmark{ font-family:var(--font-display); font-weight:800; line-height:.94; font-size:clamp(48px,11vw,140px); letter-spacing:.02em;
  background:linear-gradient(180deg,#F3ECDD 0%,#C9A24B 58%,#8A6A3E 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(201,162,75,.12); }
.jd-slogan{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:clamp(18px,3vw,30px); color:var(--mist); margin-top:12px; }
.jd-hero-meta{ margin-top:36px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.jd-status-pill{ display:inline-flex; align-items:center; gap:9px; padding:9px 18px; border-radius:100px; border:1px solid var(--line);
  background:rgba(46,75,60,.14); font-size:12px; letter-spacing:.08em; color:var(--parchment); }
.jd-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#5FBF86; box-shadow:0 0 0 0 rgba(95,191,134,.6); animation:jd-pulse 2.4s infinite; }
.jd-dot.off{ background:#8A3B34; }
@keyframes jd-pulse{ 0%{box-shadow:0 0 0 0 rgba(95,191,134,.5)} 70%{box-shadow:0 0 0 9px rgba(95,191,134,0)} 100%{box-shadow:0 0 0 0 rgba(95,191,134,0)} }
.jd-hero-actions{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.jd-scrollcue{ margin-top:70px; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--fog); display:flex; flex-direction:column; align-items:center; gap:10px; }
.jd-scrollcue span{ width:1px; height:40px; background:linear-gradient(var(--gold),transparent); animation:jd-cue 2.2s var(--ease) infinite; }
@media(max-width:820px){
  /* Give the hero side padding so a long kicker (e.g. the Polish one) doesn't
     hug the screen edge, and nudge the whole block down a touch. The tighter
     letter-spacing helps the kicker fit without an awkward wrap. */
  .jd-hero{ padding-top:120px; padding-left:22px; padding-right:22px; }
  .jd-kicker{ letter-spacing:.24em; }
}

/* ---------- work-in-progress seal (hero corner badge, top-right) ---------- */
.jd-wip-seal{ position:absolute; top:110px; right:28px; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2; }
.jd-wip-seal img{ width:84px; height:84px; border-radius:50%; object-fit:cover;
  border:2px solid var(--gold); box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 10px 26px -8px rgba(0,0,0,.7), 0 0 22px rgba(201,162,75,.22);
  animation:jd-wip-breathe 5s ease-in-out infinite; }
.jd-wip-seal-label{ font-family:var(--font-display); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-hi); text-align:center; max-width:120px; }
@keyframes jd-wip-breathe{ 0%,100%{ box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 10px 26px -8px rgba(0,0,0,.7), 0 0 22px rgba(201,162,75,.22); }
  50%{ box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 10px 26px -8px rgba(0,0,0,.7), 0 0 32px rgba(201,162,75,.4); } }
@media (max-width:760px){ .jd-wip-seal{ top:96px; right:14px; } .jd-wip-seal img{ width:58px; height:58px; } .jd-wip-seal-label{ font-size:8.5px; max-width:80px; } }
@keyframes jd-cue{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ---------- section heads ---------- */
.jd-sec-index{ font-family:var(--font-display); font-size:11.5px; letter-spacing:.38em; color:var(--bronze); margin-bottom:16px; }
.jd-sec-title{ font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3.6vw,42px); line-height:1.15; color:#F3ECDD; }
.jd-sec-lead{ font-family:var(--font-serif); font-size:clamp(17px,2vw,20px); color:var(--mist); max-width:620px; margin-top:16px; line-height:1.6; }

/* ---------- world gallery ---------- */
.jd-world-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:48px; }
@media(max-width:900px){ .jd-world-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .jd-world-grid{ grid-template-columns:1fr; } }
.jd-world-tile{ position:relative; aspect-ratio:4/5; border-radius:6px; overflow:hidden; border:1px solid var(--line-soft);
  display:flex; align-items:flex-end; padding:20px; transition:transform .6s var(--ease); background:radial-gradient(120% 100% at 30% 10%,#243a4a,#0b1116); }
.jd-world-tile:hover{ transform:translateY(-6px); }
.jd-world-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(11,12,14,.85)); }
.jd-world-tile span{ position:relative; z-index:2; font-family:var(--font-display); font-size:14px; letter-spacing:.1em; text-transform:uppercase; }

/* ---------- feature cards ---------- */
.jd-feature-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:48px; }
@media(max-width:900px){ .jd-feature-grid{ grid-template-columns:1fr; } }
.jd-fcard{ border:1px solid var(--line-soft); border-radius:10px; padding:28px; background:linear-gradient(180deg,rgba(34,38,45,.5),rgba(18,20,24,.5));
  transition:transform .5s var(--ease), border-color .5s; position:relative; overflow:hidden; }
.jd-fcard:hover{ transform:translateY(-6px); border-color:var(--line); }
.jd-fcard .jd-icn{ width:44px; height:44px; border-radius:8px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:19px; margin-bottom:18px; }
.jd-fcard .jd-icn-img{ background-size:cover; background-position:center; }
.jd-fcard h4{ font-family:var(--font-display); font-weight:500; font-size:17px; color:#F3ECDD; }
.jd-fcard p{ font-size:13.5px; color:var(--mist); margin-top:9px; line-height:1.6; }

/* ---------- news (wraps MyAAC $content) ---------- */
.jd-news-wrap .Table1, .jd-news-wrap .TableContainer{ background:transparent !important; border:none !important; box-shadow:none !important; }
.jd-news-wrap{ margin-top:48px; }

/* ---------- trailer / discord ---------- */
.jd-trailer{ border-radius:12px; overflow:hidden; border:1px solid var(--line-soft); aspect-ratio:16/9; background:#000;
  display:flex; align-items:center; justify-content:center; margin-top:44px; }
.jd-discord{ text-align:center; padding:100px 0; }

/* ---------- trailer modal (fades in over the page instead of scrolling to it) ---------- */
.jd-trailer-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s linear .4s; }
.jd-trailer-modal.jd-open{ opacity:1; visibility:visible; transition:opacity .4s var(--ease), visibility 0s linear 0s; }
.jd-trailer-modal-backdrop{ position:absolute; inset:0; background:rgba(6,7,10,.88); backdrop-filter:blur(6px); }
.jd-trailer-modal-box{ position:relative; width:min(900px,92vw); }
.jd-trailer-modal-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.6); transform:scale(.94); transition:transform .4s var(--ease); }
.jd-trailer-modal.jd-open .jd-trailer-modal-frame{ transform:scale(1); }
.jd-trailer-modal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.jd-trailer-modal-close{ position:absolute; top:-42px; right:0; background:none; border:none; color:var(--parchment);
  font-size:28px; line-height:1; cursor:pointer; opacity:.7; transition:opacity .3s; font-family:var(--font-sans); }
.jd-trailer-modal-close:hover{ opacity:1; color:var(--gold-hi); }

/* ---------- gift/recipient modal (Premium Shop "Buy Now") ---------- */
.jd-gift-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility 0s linear .3s; }
.jd-gift-modal.jd-open{ opacity:1; visibility:visible; transition:opacity .3s var(--ease), visibility 0s linear 0s; }
.jd-gift-modal-backdrop{ position:absolute; inset:0; background:rgba(6,7,10,.82); backdrop-filter:blur(6px); }
.jd-gift-modal-box{ position:relative; width:min(420px,90vw); padding:32px; border-radius:10px;
  background:linear-gradient(180deg,rgba(24,27,33,.97),rgba(18,20,24,.97)); border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.6); transform:scale(.96); transition:transform .3s var(--ease); }
.jd-gift-modal.jd-open .jd-gift-modal-box{ transform:scale(1); }
.jd-gift-modal-close{ position:absolute; top:14px; right:16px; background:none; border:none; color:var(--parchment);
  font-size:24px; line-height:1; cursor:pointer; opacity:.6; transition:opacity .3s; }
.jd-gift-modal-close:hover{ opacity:1; color:var(--gold-hi); }
.jd-gift-modal-title{ font-family:var(--font-display); font-size:19px; color:#F3ECDD; margin:0 0 6px; }
.jd-gift-modal-package{ color:var(--mist); font-size:13px; margin:0 0 20px; }
.jd-gift-modal-option{ display:flex; align-items:center; gap:10px; padding:10px 0; font-size:14px; cursor:pointer; }
.jd-gift-modal-recipient{ margin:12px 0 4px; }
.jd-gift-modal-actions{ margin-top:22px; text-align:center; }
.jd-gift-modal-actions .jd-btn{ width:100%; justify-content:center; }

/* ---------- footer ---------- */
#jd-footer{ border-top:1px solid var(--line-soft); padding:40px 0; text-align:center; position:relative; z-index:2; }
#jd-footer .fm{ font-family:var(--font-display); letter-spacing:.3em; color:var(--fog); font-size:12px; }
#jd-footer .fl{ margin-top:14px; display:flex; gap:20px; justify-content:center; font-size:11.5px; letter-spacing:.08em; color:var(--mist); }

/* ---------- interior page chrome (all non-home pages) ---------- */
.jd-page{ padding:150px 0 100px; min-height:70vh; }
.jd-page-card{ background:linear-gradient(180deg,rgba(24,27,33,.7),rgba(18,20,24,.7)); border:1px solid var(--line-soft);
  border-radius:12px; padding:36px; backdrop-filter:blur(6px); }
.jd-page-title{ font-family:var(--font-display); font-size:clamp(22px,3vw,32px); color:#F3ECDD; margin-bottom:24px; }
@media(max-width:600px){
  .jd-page{ padding:100px 0 50px; }
  .jd-page-card{ padding:18px; border-radius:8px; }
}

/* ---------- mobile: legacy MyAAC form tables (account create/change_*,
   character create, online search - anything using the stock .LabelV
   label-cell pattern) - stack label above input instead of a fixed
   150px label column, which leaves almost no room for the input itself
   on a phone-width screen. Scoped to .jd-page-card so it can't affect
   any table outside a subpage body. ---------- */
@media(max-width:600px){
  .jd-page-card td.LabelV, .jd-page-card td.LabelV + td,
  .jd-page-card td.LabelV175, .jd-page-card td.LabelV175 + td{ display:block; width:auto !important; }
  .jd-page-card td.LabelV, .jd-page-card td.LabelV175{ padding-bottom:2px; }
  .jd-page-card input[type=text], .jd-page-card input[type=password], .jd-page-card input[type=email], .jd-page-card select{
    width:100%; box-sizing:border-box; max-width:100%; }
}

/* ---------- mobile: character detail page (characters.html.twig) ---------- */
@media(max-width:700px){
  /* Outfit+Inventory | Health/Mana/Skills - stack instead of two side-by-side td's */
  .jd-char-details-row{ display:flex; flex-direction:column; }
  .jd-char-details-row > td{ display:block; width:auto !important; }
  /* the account's other-characters list: drop the two least-critical
     columns rather than stacking, since this is genuine tabular data
     that stays scannable as a narrower table but not as a stack */
  .jd-char-list-table .jd-char-list-voc, .jd-char-list-table .jd-char-list-camp{ display:none; }
}

/* ---------- mobile: guild view (guilds.view.html.twig) ---------- */
@media(max-width:700px){
  /* Guild Info | Navigation | Administration - three fixed-width td's
     side by side in one row, way too narrow to share on a phone. */
  .jd-guild-toprow, .jd-guild-toprow tbody, .jd-guild-toprow tr{ display:block; width:auto !important; }
  .jd-guild-toprow td{ display:block; width:auto !important; }
  /* member list: drop Vocation, same reasoning as the character list above */
  .jd-guild-members-voc{ display:none; }
  /* rank manager: a genuine aligned-columns radio-button grid (which rank
     level goes with which name) - stacking would break the alignment
     that makes it legible, so scroll horizontally instead. */
  .jd-guild-ranks-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .jd-guild-ranks-scroll table{ min-width:480px; }
}

/* ---------- account login page ---------- */
.jd-login-row{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
.jd-field{ flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:6px; }
.jd-field span{ font-family:var(--font-sans); font-size:12.5px !important; letter-spacing:.06em; color:var(--mist); text-transform:uppercase; }
.jd-field input, .jd-field textarea{ width:100%; box-sizing:border-box; font-family:var(--font-sans); resize:vertical; }
.jd-login-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.jd-checkbox{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--mist); cursor:pointer; }
.jd-checkbox input{ margin:0; }
/* Lost Account interface (themed override of MyAAC's legacy table layout) */
.jd-lost{ max-width:600px; margin:0 auto; }
.jd-lost-title{ font-family:var(--font-display); font-size:24px; color:#F3ECDD; margin:0 0 16px; text-align:center; letter-spacing:.02em; }
.jd-lost-intro{ color:var(--mist); font-family:var(--font-serif); font-size:16px; line-height:1.6; text-align:center; margin:0 auto 28px; max-width:520px; }
.jd-lost-form{ display:flex; flex-direction:column; gap:16px; padding:26px; border:1px solid var(--line-soft); border-radius:10px; background:rgba(255,255,255,.02); }
/* .jd-field is tuned for horizontal login rows (flex:1 1 220px); in this
   vertical column that flex-grow stretched each field to fill the card height.
   Pin them to their content height instead. */
.jd-lost-form .jd-field{ flex:0 0 auto; }
.jd-lost-or{ text-align:center; font-family:var(--font-display); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); }
.jd-lost-what{ font-family:var(--font-sans); font-size:12.5px; letter-spacing:.06em; color:var(--mist); text-transform:uppercase; margin-top:6px; }
.jd-radio{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--parchment); line-height:1.5; cursor:pointer; }
.jd-radio input{ margin:3px 0 0; flex:0 0 auto; }
.jd-lost-actions{ margin-top:12px; text-align:center; }
@media(max-width:820px){ .jd-lost-form{ padding:20px 16px; } }
/* Download Client page (themed override of MyAAC's legacy layout) */
.jd-download{ max-width:560px; margin:0 auto; text-align:center; }
.jd-download-badge{ display:block; width:150px; height:150px; margin:0 auto 6px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
.jd-download-title{ font-family:var(--font-display); font-size:26px; letter-spacing:.02em; color:#F3ECDD; margin:8px 0 12px; }
.jd-download-lead{ color:var(--mist); font-family:var(--font-serif); font-size:17px; line-height:1.6; margin:0 auto 26px; max-width:480px; }
.jd-download-btn{ font-size:15px; padding:14px 34px; }
.jd-download-meta{ margin-top:14px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--bronze); }
.jd-download-note{ margin-top:30px; padding:16px 20px; border-left:2px solid var(--gold); background:rgba(255,255,255,.02);
  border-radius:4px; text-align:left; font-size:13.5px; color:var(--mist); line-height:1.6; }
.jd-download-note b{ color:var(--gold-hi); }
.jd-login-lost{ text-align:center; margin-top:14px; }
.jd-newplayer-card{ text-align:center; }
.jd-newplayer-lead{ color:var(--mist); max-width:560px; margin:0 auto 24px; font-family:var(--font-serif); font-size:19px; line-height:1.6; }

/* ---------- generic legacy element re-skin (best-effort) ---------- */
/* basic.css (untouched legacy tibia.com base styles) sets a brown
   background (#5f4d41) on these exact compound selectors with !important -
   higher specificity than a bare .CaptionContainer rule, so it wins despite
   loading first; must be matched/beaten with the same or higher specificity. */
.Box, .TableContainer, .CaptionContainer, .InnerTableContainer, .CaptionInnerContainer,
.TableContainer .CaptionContainer, .TableContainer .CaptionContainer .CaptionInnerContainer{
  background:transparent !important; background-color:transparent !important; border:none !important;
}
.Corner-tl, .Corner-tr, .Corner-bl, .Corner-br, .CornerWrapper-b, .Border_1, .Border_2, .Border_3,
.CaptionEdgeLeftTop, .CaptionEdgeRightTop, .CaptionEdgeLeftBottom, .CaptionEdgeRightBottom,
.CaptionBorderTop, .CaptionBorderBottom, .CaptionVerticalLeft, .CaptionVerticalRight{
  background-image:none !important; background:transparent !important; border:none !important;
}
.BorderTitleText, .CaptionContainer .Text{ background:none !important; border:none !important;
  padding:14px 18px 10px !important; font-family:var(--font-display); letter-spacing:.02em; color:#F3ECDD !important; font-size:18px !important; font-weight:600; }
.BoxContent{ background:none !important; padding:22px !important; color:var(--parchment); }
table.Table1, table.Table2, table.Table3, table[class^="Table"]{ color:var(--parchment); width:100%; border-collapse:collapse; }
table.Table1 td, table.Table2 td, table.Table3 td{ padding:8px 10px; border-bottom:1px solid var(--line-soft); }
table tr:nth-child(odd) td{ background:rgba(255,255,255,.015); }
/* On phones the wide data tables (highscores, characters, guilds) are wider
   than the viewport. Contain the horizontal scroll to the table's own wrapper
   so ONLY the table scrolls sideways, instead of the whole page overflowing
   (which was also dragging the nav's flag switcher off the right edge). On
   desktop the tables fit inside --maxw, so no scrollbar ever appears. */
@media(max-width:820px){
  .TableContainer{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .TableContainer::-webkit-scrollbar{ height:6px; }
  .TableContainer::-webkit-scrollbar-thumb{ background:var(--line-soft); border-radius:3px; }
}
.InnerTableContainer, .TableContent, .TableContentAndRightShadow, .TableContentContainer,
.TableContainer, table.Table1, table.Table2, table.Table3, table.Table4, table.Table5{
  background:transparent !important; background-color:transparent !important; background-image:none !important;
  box-shadow:none !important; border-color:var(--line-soft) !important;
}
/* legacy "TableContent" boxes (characters.html.twig, experience_table.html.twig)
   paint each <tr> with an inline bgcolor="{{ getStyle(rows) }}" attribute -
   alternating parchment/tan tones designed for the old light theme. A plain
   background rule on the row beats that legacy attribute (any real CSS wins
   over the deprecated bgcolor hint), and text color must be reset alongside
   it since the tan background was what made the default dark text readable. */
.TableContent tr{ background:transparent !important; }
.TableContent td{ color:var(--parchment) !important; border-bottom:1px solid var(--line-soft); padding:6px 10px; }
.TableContent tr:nth-child(odd) td{ background:rgba(255,255,255,.02) !important; }

/* equipment "paperdoll" grid on the Characters page - replaces a legacy
   nested-<table> layout (dark #292929 boxes, Soul/Cap text rows) with a
   real 3x4 CSS grid: neck/head/backpack, left-hand/armor/right-hand,
   ring/legs/ammo, (empty)/feet/(empty) - the two empty cells just keep the
   grid's column heights even now that the Soul/Cap rows are gone. */
.jd-equip-grid{ display:grid; grid-template-columns:repeat(3, 40px); gap:4px; justify-content:center; margin:0 auto; }
.jd-equip-slot{ width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.03); border:1px solid var(--line-soft); border-radius:4px; }
.jd-equip-slot img{ max-width:32px; max-height:32px; }
.jd-equip-slot-empty{ background:transparent; border-color:transparent; }

/* Gothic attribute row on the Characters page (replaces the vanilla Fist/
   Club/Sword/Axe/Dist/Def/Fish skill icons - meaningless here since combat
   no longer grants skill progress, see gothic_skills_lib.lua) - one card per
   attribute using the Ultimate Fantasy RPG icon pack. */
.jd-skills-grid{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-start; padding:0 14px 14px; }
.jd-skill-card{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:1 1 76px; min-width:76px;
  padding:10px 6px; background:rgba(255,255,255,.03); border:1px solid var(--line-soft); border-radius:6px; }
.jd-skill-card img{ width:32px; height:32px; }
.jd-skill-card b{ font-size:11px; color:var(--mist); font-weight:600; text-transform:uppercase; letter-spacing:.03em; text-align:center; white-space:nowrap; }
.jd-skill-card span{ font-size:15px; color:var(--parchment); font-weight:600; }
.jd-skill-card-wide{ margin:14px 14px 10px; }

/* account_players sub-list View/Edit buttons - force identical size
   regardless of button vs anchor element or ghost/primary variant */
.jd-char-action-row{ display:flex; gap:8px; flex-wrap:wrap; }
.jd-char-action-btn{ box-sizing:border-box; min-width:84px; justify-content:center; }

/* Search Character form (characters.form.html.twig) - compact single row
   instead of the vanilla full-width input stretched across the whole card. */
.jd-search-char{ display:flex; align-items:center; gap:14px; padding:10px 14px; flex-wrap:wrap; }
.jd-search-char label{ white-space:nowrap; }
.jd-search-char input{ flex:0 1 260px; padding:9px 12px !important; }
.jd-search-char .jd-btn{ padding:9px 20px; }
.LabelH, tr.LabelH td, .LabelV{
  background:none !important; background-image:none !important;
  color:var(--mist) !important; font-weight:600 !important; border-bottom:1px solid var(--line-soft) !important;
  font-size:12px !important; text-transform:uppercase; letter-spacing:.05em;
}
/* .TableContainer sets font-size:1px as a legacy 2000s spacer-gif trick; any
   plain text (bare <span>, <label>, etc.) inside it that doesn't explicitly
   reset its own font-size silently inherits that 1px and becomes unreadable.
   Force every descendant back to a normal size, then let real headings and
   the explicit .LabelV rule above win back their own sizes by specificity. */
.jd-page-card *, .jd-news-wrap *{ font-size:14px; }
.jd-page-card .LabelV, .jd-page-card .LabelH{ font-size:13px !important; }
.jd-page-card h1{ font-size:clamp(22px,3vw,32px) !important; }
.jd-page-card h2{ font-size:22px !important; }
.jd-page-card h3{ font-size:18px !important; }

/* sitewide validation-error box (system/templates/error_box.html.twig override) -
   shown on any form failure (login, guild creation, account management, etc). */
.jd-error-box{ background:linear-gradient(180deg,rgba(48,20,18,.55),rgba(24,13,12,.55));
  border:1px solid rgba(138,59,52,.45); border-left:3px solid var(--blood); border-radius:6px;
  padding:16px 20px; margin-bottom:20px; }
.jd-error-box-title{ font-family:var(--font-display); font-size:13px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:#E8A39B; margin-bottom:8px; }
.jd-error-box ul{ margin:0; padding-left:20px; }
.jd-error-box li{ color:var(--parchment); font-size:14px; line-height:1.7; }
.jd-error-box li::marker{ color:var(--blood); }

input[type=text], input[type=password], input[type=email], input[type=number], input:not([type]), textarea, select{
  background:rgba(11,12,14,.6) !important; border:1px solid var(--line-soft) !important; border-radius:5px !important;
  padding:10px 12px !important; color:var(--parchment) !important; font-family:var(--font-sans) !important;
}
input:focus, textarea:focus, select:focus{ outline:none !important; border-color:var(--gold) !important; }

/* legacy MyAAC "BigButtonText" is an absolutely-positioned light-text overlay meant to sit
   on top of a separate dark background-image button; reused directly as a real <input type=submit>
   here it reads as light gold text on a light gold fill, hence unreadable — reset fully to jd-btn look */
.BigButton, .MediumButtonBackground, input[type=submit], button[type=submit], .BigButtonText{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  position:relative !important; top:auto !important; left:auto !important; width:auto !important; height:auto !important;
  font-family:var(--font-sans) !important; font-weight:600 !important; font-size:12.5px !important;
  letter-spacing:.1em !important; text-transform:uppercase !important; text-shadow:none !important;
  padding:11px 22px !important; margin:0 !important; border-radius:4px !important; border:none !important;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold)) !important; color:#120E06 !important;
  box-shadow:0 8px 26px -8px rgba(201,162,75,.5) !important; cursor:pointer !important;
  -webkit-appearance:none !important; appearance:none !important; transition:all .3s var(--ease) !important;
}
.BigButton:hover, .MediumButtonBackground:hover, input[type=submit]:hover, button[type=submit]:hover, .BigButtonText:hover{
  top:auto !important; left:auto !important; transform:translateY(-2px) !important;
  box-shadow:0 12px 34px -8px rgba(201,162,75,.7) !important; color:#120E06 !important;
}

h1, h2, h3, h4{ font-family:var(--font-display); color:#F3ECDD; }

/* ---------- news ticker / archive (best-effort legacy reset) ---------- */
#newsticker, #FeaturedArticle{ background:transparent !important; border:none !important; margin-bottom:24px; }
#newsticker .Row, #newsticker .Odd, #newsticker .Even{
  background:rgba(255,255,255,.02) !important; background-image:none !important;
  border-bottom:1px solid var(--line-soft) !important; padding:10px 0 !important; display:block !important;
}
.NewsTickerIcon{ background:none !important; display:none !important; }
.NewsTickerExtend{ background:none !important; }
.NewsTickerDate{ color:var(--bronze); font-size:11.5px; letter-spacing:.06em; }
.NewsTickerShortText, .NewsTickerFullText, .NewsTickerText{ color:var(--parchment); font-size:14px; }
#ContentBoxHeadline, img.Title{ display:none !important; }
#TeaserThumbnail img{ border-radius:6px; margin-bottom:12px; }
#Link{ color:var(--gold-hi); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }

/* system/templates/news.html.twig fallback (used by the default news listing) */
.NewsHeadline{ margin-bottom:28px; border-bottom:1px solid var(--line-soft); padding-bottom:22px; }
.NewsHeadlineBackground{ background:none !important; background-image:none !important; padding:0 !important; }
.NewsHeadlineIcon{ display:none !important; }
.NewsHeadlineDate{ color:var(--bronze); font-size:11.5px; letter-spacing:.08em; display:inline-block; }
.NewsHeadlineText{ font-family:var(--font-display); font-size:20px; color:#F3ECDD; margin:6px 0 12px; }
.NewsHeadlineAuthor{ color:var(--mist); font-size:12px; }
.jd-news-wrap table{ background:none !important; }
.jd-news-wrap table td{ border:none !important; padding:0 !important; color:var(--parchment); font-size:14px; line-height:1.7; }
.jd-news-wrap a{ color:var(--gold-hi); }
.jd-news-wrap img[align="bottom"]{ display:none; } /* legacy per-letter drop-cap decoration */

/* ---------- news / patch notes (news.html.twig + news.archive.html.twig) ---------- */
.jd-news-item{ padding:28px 0; border-bottom:1px solid var(--line-soft); }
.jd-news-item:last-child{ border-bottom:none; }
.jd-news-date{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze); margin-bottom:6px; }
.jd-news-title{ font-family:var(--font-display); font-size:20px !important; font-weight:600; color:#F3ECDD; margin:0 0 12px; }
.jd-news-author{ display:block; font-size:11.5px; color:var(--fog); margin:-8px 0 12px; font-style:italic; }
.jd-news-body{ color:var(--parchment); font-size:14px; line-height:1.7; }
.jd-news-body img{ max-width:100%; height:auto; display:block; margin:16px 0;
  border:1px solid var(--line-soft); border-radius:8px; }
.jd-news-body img[align="bottom"]{ display:none; } /* legacy drop-cap, single-view path */
.jd-news-body ul, .jd-news-body ol{ padding-left:22px; margin:10px 0; }
.jd-news-body li{ margin:4px 0; }
.jd-news-hidden{ opacity:.45; } /* admin preview of hidden entries */

.jd-news-archive{ display:flex; flex-direction:column; }
.jd-news-archive-row{ display:flex; align-items:baseline; gap:18px; padding:15px 6px;
  border-bottom:1px solid var(--line-soft); text-decoration:none; transition:background .3s; }
.jd-news-archive-row:hover{ background:rgba(201,162,75,.04); }
.jd-news-archive-date{ flex:0 0 105px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mist); }
.jd-news-archive-title{ flex:1; font-family:var(--font-display); font-size:15px !important; color:var(--parchment); transition:color .3s; }
.jd-news-archive-row:hover .jd-news-archive-title{ color:var(--gold-hi); }
.jd-news-archive-arrow{ color:var(--bronze); }
@media(max-width:600px){
  .jd-news-archive-row{ flex-direction:column; gap:2px; }
  .jd-news-archive-date{ flex:none; }
  .jd-news-archive-arrow{ display:none; }
}

/* ---------- Myrion Coin icon (replaces the stock Tibia coin image) ---------- */
/* sized in em so it scales with whatever text size it sits next to, instead
   of a fixed pixel size that would look right in one spot and wrong in
   another (a small account-info row vs. a large shop price). Brightened up
   a bit (filter) plus a periodic shine sweep so it actually catches the eye
   next to plain text instead of blending into the background. Pseudo-elements
   don't render on <img> itself in any browser, so the sweep lives on a small
   wrapping <span class="jd-coin-inline"> instead. */
.VSCCoinImages{ width:1.15em; height:1.15em; vertical-align:-0.2em; margin:0 1px; display:block;
  filter:brightness(1.3) saturate(1.2) drop-shadow(0 0 3px rgba(226,183,90,.55)); }
.jd-coin-inline{ position:relative; display:inline-block; overflow:hidden; border-radius:50%; }
.jd-coin-inline::after{
  content:""; position:absolute; top:0; left:-150%; width:60%; height:100%;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.9) 50%, transparent 80%);
  transform:skewX(-20deg); animation:jd-coin-shine-sweep 4.5s ease-in-out infinite;
}
@keyframes jd-coin-shine-sweep{
  0%, 55%{ left:-150%; }
  70%{ left:150%; }
  100%{ left:150%; }
}
@media (prefers-reduced-motion: reduce){
  .jd-coin-inline::after{ animation:none; }
}

/* decorative coin, as a small corner badge on the "Most Popular" package card -
   the shine/glimmer is baked directly into the animated GIF, no CSS effect needed. */
.jd-coin-corner{ position:absolute; top:-16px; right:-16px; width:48px; height:48px;
  filter:drop-shadow(0 4px 10px rgba(201,162,75,.4)); }

/* ---------- account management page ---------- */
.jd-acct-welcome{ font-family:var(--font-serif); font-size:17px; color:var(--parchment); text-align:center; margin-bottom:22px; }
.jd-alert{ background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:6px; padding:16px 20px; font-size:14px; color:var(--parchment); }
.jd-alert-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.jd-alert p{ margin:6px 0 0; color:var(--mist); font-size:13px; }
.jd-acct-section{ padding:32px 0; border-top:1px solid var(--line-soft); }
.jd-acct-section:first-child{ padding-top:0; border-top:none; }
.jd-acct-heading{ font-family:var(--font-display); font-size:19px; letter-spacing:.03em; color:#F3ECDD; margin:0 0 20px; }

.jd-acct-status{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.jd-acct-status-text{ flex:1 1 240px; display:flex; flex-direction:column; gap:4px; }
.jd-acct-status-label{ font-family:var(--font-display); font-size:20px; }
.jd-acct-status-text small{ color:var(--mist); font-size:12.5px; }
.jd-acct-status-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.jd-premium-benefits{ display:flex; gap:24px; flex-wrap:wrap; margin-top:26px; padding-top:26px; border-top:1px solid var(--line-soft); }
.jd-premium-benefits > div{ flex:1 1 200px; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--mist); }
.jd-premium-benefits img{ width:28px; height:28px; flex-shrink:0; }

.jd-char-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.jd-char-row{ display:flex; align-items:center; gap:16px; padding:14px 18px; background:rgba(255,255,255,.015); border:1px solid var(--line-soft); border-radius:6px; flex-wrap:wrap; }
.jd-char-info{ flex:1 1 260px; display:flex; flex-direction:column; gap:4px; }
.jd-char-name{ font-family:var(--font-display); font-size:15px; color:var(--parchment); display:flex; align-items:center; gap:8px; }
.jd-char-meta{ font-size:12px; color:var(--mist); }
.jd-char-status{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--mist); margin-top:2px; }
.jd-char-actions{ display:flex; gap:12px; font-size:12px; }
.jd-char-actions a{ color:var(--mist); }
.jd-char-actions a:hover{ color:var(--gold-hi); }

.jd-acct-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.jd-kv-table{ display:flex; flex-direction:column; margin-bottom:22px; }
.jd-kv-row{ display:flex; gap:18px; padding:11px 4px; border-bottom:1px solid var(--line-soft); align-items:baseline; }
.jd-kv-label{ flex:0 0 200px; color:var(--mist); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.jd-kv-row span:last-child{ flex:1; color:var(--parchment); font-size:14px; }

.jd-log-table{ display:flex; flex-direction:column; }
.jd-log-row{ display:grid; grid-template-columns:1fr 200px 120px; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line-soft); font-size:13px; }
@media(max-width:600px){
  .jd-kv-row{ flex-direction:column; gap:2px; align-items:flex-start; }
  .jd-kv-label{ flex:none; }
  .jd-log-row{ grid-template-columns:1fr; gap:2px; }
  .jd-log-row span:nth-child(2){ font-size:11.5px; color:var(--fog); }
  .jd-log-row span:nth-child(3){ font-size:11px; color:var(--fog); }
  .jd-log-head{ display:none; }
}
.jd-log-head{ color:var(--mist); font-size:12px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; border-bottom:1px solid var(--line-soft); }
.jd-log-row:nth-child(odd):not(.jd-log-head){ background:rgba(255,255,255,.015); }

/* ---------- generic feedback boxes (system success()/warning()/note()/error() calls) ---------- */
/* these functions (system/functions.php: message()) just echo
   <div class="success|warning|note|error" style="margin-bottom:10px">...</div>
   with no markup wrapper to hook a fancier class onto - style the bare
   class names directly instead of assuming Bootstrap's alert-* naming. */
.success, .warning, .note, .error{
  padding:14px 18px; border-radius:6px; font-size:14px; border:1px solid var(--line-soft);
}
.success{ background:rgba(46,75,60,.25); border-color:rgba(95,191,134,.35); color:#BFE8CE; }
.error{ background:rgba(138,59,52,.2); border-color:rgba(217,88,72,.4); color:#F3C9C2; }
.warning{ background:rgba(138,106,62,.2); border-color:rgba(201,162,75,.4); color:#EAD9B0; }
.note{ background:rgba(58,98,127,.18); border-color:rgba(58,98,127,.4); color:#C7D9E4; }

/* ---------- premium shop ---------- */
.jd-shop-balance{ display:flex; gap:40px; flex-wrap:wrap; padding:18px 20px; margin-bottom:28px; background:rgba(255,255,255,.015); border:1px solid var(--line-soft); border-radius:8px; }
.jd-shop-balance-value{ font-family:var(--font-display); font-size:20px; color:var(--gold-hi); margin-top:4px; }
.jd-shop-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.jd-shop-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:26px 20px; border:1px solid var(--line-soft); border-radius:8px; background:rgba(255,255,255,.015); }
.jd-shop-card h3{ font-family:var(--font-display); font-size:18px; color:#F3ECDD; margin:0; }
.jd-shop-card-days{ color:var(--mist); font-size:13px; }
.jd-shop-card-price{ font-family:var(--font-display); font-size:22px; color:var(--gold-hi); margin:6px 0 10px; }
.jd-shop-card form{ width:100%; }
.jd-shop-card .jd-btn{ width:100%; justify-content:center; }
.jd-shop-card{ position:relative; }
.jd-shop-badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); padding:4px 14px; border-radius:100px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:#120E06; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.jd-shop-card-bonus{ color:#8FE0AE; font-size:12px; font-weight:600; letter-spacing:.04em; margin-top:-2px; }
.jd-shop-card-bonus-empty{ visibility:hidden; }

/* radio-selectable coin package cards (Get Coins page): one shared Buy Now
   button below the grid instead of a button per card - each card is a label
   wrapping a hidden radio, clicking anywhere on the card selects it. */
.jd-coin-package{ cursor:pointer; transition:border-color .25s, box-shadow .25s; }
.jd-shop-card-radio{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.jd-coin-package:has(.jd-shop-card-radio:checked){
  border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 12px 30px -12px rgba(201,162,75,.35);
}
.jd-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.jd-btn[disabled]:hover{ transform:none !important; box-shadow:none !important; }
.jd-shop-admin-form{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.jd-shop-admin-form .jd-field{ flex:0 1 160px; min-width:120px; }
.jd-shop-admin-form input[type=number]{ width:100%; box-sizing:border-box; }

/* ---------- player admin panel ---------- */
.jd-playeradmin-ban-form{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.jd-playeradmin-ban-form input[type=text]{ width:150px; }

/* Kick is a <button type=submit>, so it also picks up the site-wide
   button[type=submit] reset (padding:11px 22px !important) on top of
   .jd-btn's own padding. Teleport is a <button type=button> (it opens a
   modal first) so that reset never touches it - match its padding
   explicitly so both buttons render the same size. */
.jd-playeradmin-action-btn{ padding:11px 22px !important; box-sizing:border-box; }

/* ---------- support tickets ---------- */
.jd-ticket-form textarea{ min-height:120px; }
.jd-ticket-filter{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.jd-ticket-row{ text-decoration:none; justify-content:space-between; }
.jd-ticket-status{ flex:0 0 auto; padding:5px 12px; border-radius:100px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.jd-ticket-status-open{ background:rgba(201,162,75,.15); color:var(--gold-hi); }
.jd-ticket-status-answered{ background:rgba(95,191,134,.15); color:#8FE0AE; }
.jd-ticket-status-closed{ background:rgba(255,255,255,.06); color:var(--mist); }
.jd-ticket-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.jd-ticket-thread{ display:flex; flex-direction:column; gap:14px; margin-bottom:28px; }
.jd-ticket-message{ padding:16px 20px; border-radius:8px; border:1px solid var(--line-soft); background:rgba(255,255,255,.015); }
.jd-ticket-message-staff{ border-color:var(--line); background:rgba(201,162,75,.06); }
.jd-ticket-message-meta{ display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; font-size:12px; }
.jd-ticket-message-author{ color:var(--gold-hi); font-weight:600; letter-spacing:.03em; }
.jd-ticket-message-date{ color:var(--mist); }
.jd-ticket-message-body{ font-size:14px; line-height:1.6; color:var(--parchment); }
.jd-ticket-attach{ margin-top:10px; }
.jd-ticket-attach img{ max-width:280px; max-height:280px; display:block; border-radius:6px; border:1px solid var(--line-soft); }
.jd-ticket-attach-file{ display:inline-block; font-size:13px; color:var(--gold-hi); text-decoration:none;
  padding:6px 11px; border:1px solid var(--line-soft); border-radius:6px; background:rgba(255,255,255,.02); }
.jd-ticket-attach-file:hover{ border-color:var(--gold); }

/* ── Soundtrack player ──────────────────────────────────────────────────── */
.jd-st{ max-width:820px; margin:0 auto; }
.jd-st .cc-lead{ text-align:center; }
/* the shell heading is left-aligned; the soundtrack page ships its own centered header */
body.page-soundtrack .jd-page-title{ display:none; }
.jd-st-head{ text-align:center; max-width:640px; margin:4px auto 30px; }
.jd-st-kicker{ display:block; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--bronze); margin-bottom:12px; }
.jd-st-title{ font-family:var(--font-display); font-size:clamp(28px,4.4vw,44px); line-height:1.08; color:#F3ECDD; margin:0 0 16px; }
.jd-st-lead{ font-family:var(--font-serif); font-size:16px; line-height:1.7; color:var(--mist); margin:0; }
.jd-st-lead b{ color:var(--parchment); font-weight:600; }
.jd-st-player{ border:1px solid var(--line-soft); border-radius:10px; background:rgba(255,255,255,.02); padding:22px; margin:26px 0 30px; }
.jd-st-now{ display:flex; gap:18px; align-items:center; }
.jd-st-art{ width:88px; height:88px; flex:0 0 auto; object-fit:contain; filter:drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
.jd-st-now-info{ min-width:0; }
.jd-st-now-label{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze); }
.jd-st-now-title{ font-family:var(--font-display); font-size:22px; color:#F3ECDD; margin:2px 0 6px; }
.jd-st-now-desc{ font-size:14px; line-height:1.55; color:var(--mist); margin:0 0 8px; }
.jd-st-lore{ font-size:13px; color:var(--gold-hi); text-decoration:none; }
.jd-st-lore:hover{ text-decoration:underline; }
.jd-st-controls{ display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
.jd-st-vol-wrap{ display:flex; align-items:center; gap:7px; }
.jd-st-vol-icon{ font-size:13px; color:var(--fog); }
.jd-st-vol{ width:92px; accent-color:var(--gold); }
.jd-st-story{ border-left:2px solid var(--gold); background:rgba(255,255,255,.02); border-radius:4px; padding:16px 20px; margin:0 0 26px; }
.jd-st-story-label{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze); margin-bottom:8px; }
.jd-st-story-text{ margin:0; font-family:var(--font-serif); font-size:15.5px; line-height:1.65; color:var(--parchment); }
.jd-st-btn{ background:rgba(255,255,255,.04); border:1px solid var(--line-soft); color:var(--parchment); border-radius:6px;
  width:40px; height:34px; cursor:pointer; font-size:12px; }
.jd-st-btn:hover{ border-color:var(--gold); color:var(--gold-hi); }
.jd-st-btn-play{ width:48px; font-size:14px; }
.jd-st-seek{ flex:1 1 auto; accent-color:var(--gold); }
.jd-st-time{ font-size:12px; color:var(--fog); font-variant-numeric:tabular-nums; min-width:82px; text-align:right; }
.jd-st-list{ list-style:none; margin:0; padding:0; }
.jd-st-track{ display:flex; align-items:center; gap:14px; padding:12px 10px; border-bottom:1px solid var(--line-soft); cursor:pointer; border-radius:6px; }
.jd-st-track:last-child{ border-bottom:none; }
.jd-st-track:hover{ background:rgba(255,255,255,.02); }
.jd-st-track-active{ background:rgba(201,162,75,.08); }
.jd-st-track-num{ font-family:var(--font-display); color:var(--bronze); width:20px; text-align:center; flex:0 0 auto; }
.jd-st-track-play{ color:var(--gold-hi); font-size:12px; flex:0 0 auto; opacity:0; }
.jd-st-track:hover .jd-st-track-play, .jd-st-track-active .jd-st-track-play{ opacity:1; }
.jd-st-track-body{ flex:1 1 auto; min-width:0; }
.jd-st-track-title{ display:block; color:var(--parchment); font-weight:600; font-size:15px; }
.jd-st-track-desc{ display:block; color:var(--mist); font-size:13px; line-height:1.5; margin-top:2px; }
.jd-st-track-soon{ cursor:default; opacity:.55; }
.jd-st-track-soon:hover{ background:none; }
.jd-st-track-soon-tag{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--bronze); border:1px solid var(--line-soft); border-radius:100px; padding:3px 9px; flex:0 0 auto; }
@media(max-width:600px){
	.jd-st-head{ margin-bottom:22px; }
	.jd-st-lead{ font-size:15px; }
	.jd-st-player{ padding:18px 15px; }
	.jd-st-now{ flex-direction:column; text-align:center; gap:12px; }
	.jd-st-art{ width:76px; height:76px; }
	.jd-st-now-title{ font-size:20px; }
	/* keep transport controls on their own row, seek + volume full-width below */
	.jd-st-controls{ gap:10px 14px; justify-content:center; }
	.jd-st-seek{ order:5; flex-basis:100%; }
	.jd-st-time{ order:6; min-width:0; text-align:center; flex-basis:100%; }
	.jd-st-vol-wrap{ order:7; }
	.jd-st-story{ padding:14px 16px; }
	.jd-st-story-text{ font-size:15px; }
	.jd-st-track-soon-tag{ display:none; }
}

/* ---------- guilds ---------- */
.jd-guild-logo{ width:64px; height:64px; object-fit:contain; border:1px solid var(--line-soft);
  border-radius:6px; background:rgba(255,255,255,.03); padding:4px; box-sizing:border-box; }

.jd-guild-actions{ display:flex; flex-wrap:wrap; gap:10px; padding:14px; }
.jd-guild-actions form{ margin:0; }

.jd-guild-nav{ display:flex; flex-direction:column; gap:8px; padding:14px; }
.jd-guild-nav a{ text-decoration:none; }

.jd-guild-form-row{ display:flex; align-items:center; gap:14px; padding:10px 14px; flex-wrap:wrap; }
.jd-guild-form-row label{ min-width:140px; font-weight:600; color:var(--parchment); }
.jd-guild-form-row .size_xxs{ flex-basis:100%; color:var(--mist); font-size:11px; margin-top:-6px; }

.jd-rank-badge{ display:inline-block; padding:4px 10px; border-radius:4px; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; border:1px solid var(--line-soft); color:var(--parchment);
  background:rgba(255,255,255,.03); }
.jd-rank-badge.leader{ border-color:#8A3B34; color:#E7B4A9; }
.jd-rank-badge.vice{ border-color:var(--gold); color:var(--gold-hi); }
.jd-rank-badge.member{ border-color:#3B6B4A; color:#9FD8AE; }

.jd-guild-table-header td{ background:rgba(255,255,255,.03) !important; color:var(--parchment) !important;
  font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.03em; }

/* ---------- highscores table: keep only Rank / Name / Vocation / Level ---------- */
/* ---------- world grid: "Combat System" feature tile ---------- */
/* Replaces the plain "Cold Frontiers" flavor tile with a clickable summary
   card linking to the Combat Codex subpage - same tile footprint, richer
   content, so it needs its own text sizing on top of .jd-world-tile. */
.jd-world-tile-feature{ text-decoration:none; color:inherit; display:flex; flex-direction:column;
  justify-content:flex-end; }
.jd-world-tile-feature .jd-wt-eyebrow{ position:relative; z-index:2; font-family:var(--font-sans);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-hi); margin-bottom:6px; }
.jd-world-tile-feature .jd-wt-title{ position:relative; z-index:2; font-family:var(--font-display);
  font-size:16px; letter-spacing:.04em; margin-bottom:8px; }
.jd-world-tile-feature .jd-wt-desc{ position:relative; z-index:2; font-family:var(--font-sans);
  font-size:12.5px; line-height:1.5; color:var(--mist); max-width:38ch; }
.jd-world-tile-feature .jd-wt-cta{ position:relative; z-index:2; font-family:var(--font-sans);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-top:14px;
  display:flex; align-items:center; gap:6px; transition:gap .3s var(--ease); }
.jd-world-tile-feature:hover .jd-wt-cta{ gap:10px; }

/* ---------- combat codex (page-combat) ---------- */
.cc-lead{ font-family:var(--font-serif); font-style:italic; font-size:18px; color:var(--mist);
  max-width:640px; margin:-6px 0 40px; line-height:1.6; }

.cc-styles{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:32px; }
@media(max-width:860px){ .cc-styles{ grid-template-columns:1fr; } }
.cc-style{ border:1px solid var(--line-soft); border-radius:10px; padding:26px 24px; position:relative;
  overflow:hidden; background:linear-gradient(180deg,rgba(34,38,45,.55),rgba(18,20,24,.6)); }
.cc-style::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent); }
.cc-style.steel{ --accent:var(--steel); }
.cc-style.blood{ --accent:var(--blood); }
.cc-style.moss{ --accent:var(--moss); }
.cc-style.moon{ --accent:var(--moon-silver); }
.cc-style-wide{ margin-bottom:32px; }
.cc-style-wide .cc-table{ max-width:560px; }
.cc-style-eyebrow{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.cc-style h3{ font-family:var(--font-display); font-size:21px; margin:8px 0 3px; color:#F3ECDD; }
.cc-style-role{ font-family:var(--font-serif); font-style:italic; color:var(--mist); font-size:14px; margin-bottom:12px; }
.cc-style-flavor{ font-size:13px; color:var(--mist); margin-bottom:20px; line-height:1.6; }

.cc-table{ width:100%; border-collapse:collapse; }
.cc-table th{ text-align:right; font-weight:500; color:var(--fog); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; padding:0 0 8px; }
.cc-table th:first-child{ text-align:left; }
.cc-table td{ padding:9px 0; border-top:1px solid var(--line-soft); text-align:right; font-size:13px;
  font-variant-numeric:tabular-nums; color:var(--parchment); }
.cc-table td:first-child{ text-align:left; color:var(--mist); font-size:12px; }
.cc-table tr.exclusive td{ color:var(--accent); font-weight:600; }
.cc-style-note{ margin-top:14px; font-size:11.5px; color:var(--fog); }

.cc-note{ margin:0 0 56px; padding:14px 18px; border:1px solid var(--line); border-radius:8px;
  background:rgba(201,162,75,.05); font-size:13px; color:var(--mist); }
.cc-note b{ color:var(--gold-hi); font-weight:600; }

.cc-stats{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:56px; }
@media(max-width:700px){ .cc-stats{ grid-template-columns:1fr; } }
.cc-stat{ border:1px solid var(--line-soft); border-radius:10px; padding:26px;
  background:linear-gradient(180deg,rgba(24,27,33,.6),rgba(18,20,24,.6)); }
.cc-stat-tag{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  display:block; margin-bottom:6px; }
.cc-stat h3{ font-family:var(--font-display); font-size:20px; margin:0 0 10px; color:#F3ECDD; }
.cc-stat p{ font-size:13px; color:var(--mist); margin:0 0 20px; line-height:1.6; }
.cc-bar-track{ height:9px; border-radius:100px; background:rgba(255,255,255,.05); border:1px solid var(--line-soft);
  overflow:hidden; margin-bottom:8px; }
.cc-bar-fill{ height:100%; border-radius:100px; width:0%; background:linear-gradient(90deg,var(--gold),var(--gold-hi));
  transition:width 1.2s var(--ease); }
.cc-bar-scale{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--fog);
  font-variant-numeric:tabular-nums; }
.cc-stat-out{ margin-top:16px; font-family:var(--font-display); font-size:13.5px; color:var(--gold-hi); }

.cc-shield-head{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fog); margin-bottom:26px; }
.cc-flow{ max-width:720px; }
.cc-flow-step{ display:grid; grid-template-columns:36px 1fr; gap:18px; padding:20px 0; }
.cc-flow-step + .cc-flow-step{ border-top:1px solid var(--line-soft); }
.cc-flow-num{ font-family:var(--font-display); font-size:18px; color:var(--gold); opacity:.7; }
.cc-flow-step h4{ font-family:var(--font-display); font-size:16px; margin:0 0 6px; color:#F3ECDD; }
.cc-flow-step p{ font-size:13px; color:var(--mist); margin:0 0 10px; max-width:520px; line-height:1.6; }
.cc-flow-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.cc-flow-tag{ font-size:11.5px; font-variant-numeric:tabular-nums; padding:4px 10px; border-radius:100px;
  border:1px solid var(--line); color:var(--gold-hi); background:rgba(201,162,75,.06); }
.cc-flow-tag.block{ border-color:rgba(138,59,52,.4); color:#C9887E; background:rgba(138,59,52,.08); }

.cc-aside{ margin-top:28px; padding:18px 22px; border-left:2px solid var(--gold); background:rgba(255,255,255,.02); }
.cc-aside p{ font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--parchment); margin:0; line-height:1.55; }
.cc-aside b{ color:var(--gold-hi); font-style:normal; }

.cc-badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 16px; margin-bottom:22px;
  border-radius:100px; border:1px solid rgba(138,106,62,.5); background:rgba(138,106,62,.1);
  color:var(--bronze); font-family:var(--font-sans); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; }

.cc-close{ margin-top:44px; font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--mist); }

/* ── Server Rules (themed override of MyAAC's nested-table layout) ───────── */
.jd-rules{ max-width:760px; margin:0 auto; }
.jd-rules .cc-lead{ text-align:center; }
.jd-rules-caption{ text-align:center; font-family:var(--font-display); font-size:22px; letter-spacing:.04em;
  color:#F3ECDD; margin:34px 0 26px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
.jd-rules-sec{ margin-bottom:30px; }
.jd-rules-sec-head{ display:flex; align-items:center; gap:12px; margin:0 0 14px;
  font-family:var(--font-display); font-size:19px; letter-spacing:.02em; color:#F3ECDD; font-weight:600; }
.jd-rules-num{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; border:1px solid var(--gold); color:var(--gold-hi);
  font-size:15px; background:rgba(201,162,75,.08); }
.jd-rules-list{ list-style:none; margin:0; padding:0; }
.jd-rules-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.jd-rules-item:last-child{ border-bottom:none; }
.jd-rules-key{ flex:0 0 22px; font-family:var(--font-display); color:var(--gold-hi); font-size:15px; line-height:1.5; }
.jd-rules-key::after{ content:")"; }
.jd-rules-item-body{ flex:1 1 auto; min-width:0; }
.jd-rules-item-title{ display:block; color:var(--parchment); font-weight:600; font-size:15px; margin-bottom:3px; }
.jd-rules-item-body p{ margin:0; color:var(--mist); font-size:14px; line-height:1.6; }
.jd-rules-note{ margin-top:36px; padding:18px 22px; border-left:2px solid var(--gold); background:rgba(255,255,255,.02); }
.jd-rules-note p{ margin:0 0 12px; font-family:var(--font-serif); font-size:14px; color:var(--parchment); line-height:1.6; }
.jd-rules-note p:last-child{ margin-bottom:0; }
@media(max-width:820px){
  .jd-rules-caption{ font-size:20px; }
  .jd-rules-sec-head{ font-size:17px; }
}