/* Gilded: a CSS-only skin on modern's structure (site.css writes those rules for modern and gilded). Warm
   charcoal panels with round corners, a rounded sans, title case everywhere, outline icons in the menu, and the site's
   colour (gold by its own choice, Admin > Appearance) on calls to action, active pills and small accents, with dark
   words on the light colours and white on the deep ones. The darks themselves are a neutral mixed with a little of
   that colour, so gold gives warm charcoal and blue a blue-black: the whole skin takes the colour's hue. Each dark is
   the colour's hue at the old charcoal's saturation and lightness (relative colour syntax), the color-mix() before it
   standing in where that syntax is not known. Every rule is scoped under [data-skin='gilded']. */

/* Rubik from Google Fonts, fetched only when a gilded page uses it (CSP font-src allows fonts.gstatic.com) */
@font-face { font-family: 'Gilded Rubik'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Gilded Rubik'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nPrXyi0A.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Gilded Rubik'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nFrXyi0A.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

[data-skin='gilded'] {
  --gd-cream: color-mix(in srgb, var(--accent) 14%, #ffffff);
  --gd-cream: hsl(from var(--accent) h 70% 92%);
  --gd-deep: color-mix(in srgb, var(--accent) 6%, #131313);
  --gd-deep: hsl(from var(--accent) h 28% 8%);
  --gd-mid: color-mix(in srgb, var(--accent) 7%, #2b2b2b);
  --gd-mid: hsl(from var(--accent) h 20% 16%);
  --gd-bg: color-mix(in srgb, var(--accent) 7%, #151515);
  --gd-bg: hsl(from var(--accent) h 26% 10%);
  --gd-panel: color-mix(in srgb, var(--accent) 7%, #232323);
  --gd-panel: hsl(from var(--accent) h 22% 15%);
  --gd-panel-hi: color-mix(in srgb, var(--accent) 8%, #2a2a2a);
  --gd-panel-hi: hsl(from var(--accent) h 22% 18%);
  --gd-chip: color-mix(in srgb, var(--accent) 7%, #282828);
  --gd-chip: hsl(from var(--accent) h 20% 17%);
  --gd-chip-hi: color-mix(in srgb, var(--accent) 9%, #323232);
  --gd-chip-hi: hsl(from var(--accent) h 20% 21%);
  --gd-edge: color-mix(in srgb, var(--gd-cream) 7%, transparent);
  --gd-gold: var(--accent);
  --gd-gold-hi: var(--accent-hot);
  --gd-gold-ink: #2b1d06;
  --gd-red: #ef5a2f;
  --line: color-mix(in srgb, var(--gd-cream) 8%, transparent);
  --text-0: #ffffff;
  --text-1: color-mix(in srgb, var(--accent) 8%, #c8c8c8);
  --text-1: hsl(from var(--accent) h 18% 80%);
  --text-2: color-mix(in srgb, var(--accent) 9%, #868686);
  --text-2: hsl(from var(--accent) h 12% 55%);
  --steel: color-mix(in srgb, var(--accent-hot) 55%, var(--gd-cream));
  --glow: none;
  --font-ui: 'Gilded Rubik', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Gilded Rubik', 'Segoe UI', system-ui, sans-serif;
  --gd-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E");
  --gd-i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7'/%3E%3Cpath d='M5.5 9v11.5h13V9'/%3E%3Cpath d='M10 20.5v-5.5h4v5.5'/%3E%3C/svg%3E");
  --gd-i-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.6 3.4-5.5 6.5-5.5s5.7 1.9 6.5 5.5'/%3E%3Cpath d='M15.5 4.7a3.5 3.5 0 0 1 0 6.6M18 14.8c1.9.7 3.1 2.4 3.5 5.2'/%3E%3C/svg%3E");
  --gd-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.1 8.2 7.5 9.5 4.4-1.3 7.5-4.9 7.5-9.5V6z'/%3E%3Cpath d='M12 8v8M8.5 11.5h7'/%3E%3C/svg%3E");
  --gd-i-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.1 12.5H6.1z'/%3E%3Cpath d='M9 10.5V7a3 3 0 0 1 6 0v3.5'/%3E%3C/svg%3E");
  --gd-i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.6'/%3E%3C/svg%3E");
  --gd-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4.2-6 8-6s7 2 8 6'/%3E%3C/svg%3E");
  --gd-i-login: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M9.5 16.5 14 12 9.5 7.5M14 12H3.5'/%3E%3C/svg%3E");
  --gd-i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
}
/* the words on the colour: dark on gold, yellow and orange, white on the deeper ones */
[data-skin='gilded']:is([data-theme='red'], [data-theme='green'], [data-theme='blue'], [data-theme='purple']) { --gd-gold-ink: #fff; }
[data-skin='gilded'][data-custom] { --gd-gold-ink: var(--accent-ink); }
[data-skin='gilded'] body { background: var(--gd-bg); color: var(--text-1); font-family: var(--font-ui); }
[data-skin='gilded'] ::selection { background: rgba(var(--accent-rgb), 0.4); color: #fff; }

/* the site's picture behind the page, dimmed warm: a warm colour over it, then the page's charcoal down the screen */
[data-skin='gilded'] .bg-fade { background: linear-gradient(to bottom, color-mix(in srgb, var(--gd-deep) 90%, transparent) 0, color-mix(in srgb, var(--gd-deep) 62%, transparent) 16%, color-mix(in srgb, var(--gd-deep) 84%, transparent) 45%, var(--gd-bg) 80%); }
[data-skin='gilded'] .bg-fade::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 45%, #3a3a3a); mix-blend-mode: color; opacity: 0.42; }

/* ---------- Header: no slab; logo, menu and the two buttons straight on the page ---------- */

[data-skin='gilded'] .head { height: 84px; margin-bottom: -84px; }
[data-skin='gilded'] .main { padding-top: 104px; }
[data-skin='gilded'] .page-home .main { padding-top: 0; }
[data-skin='gilded'] .bar { height: 84px; background: linear-gradient(to bottom, color-mix(in srgb, var(--gd-deep) 85%, transparent), color-mix(in srgb, var(--gd-deep) 0%, transparent)); backdrop-filter: none; box-shadow: none; }
[data-skin='gilded'] .bar::after, [data-skin='gilded'] .bar-art { display: none; }
/* the bar gains a warm glass once the page scrolls under it */
@supports (animation-timeline: scroll()) {
  [data-skin='gilded'] .bar { animation: gd-bar linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
  @keyframes gd-bar { to { background: color-mix(in srgb, var(--gd-deep) 86%, transparent); backdrop-filter: blur(14px); box-shadow: 0 1px 0 color-mix(in srgb, var(--gd-cream) 6%, transparent), 0 12px 30px -18px rgba(0, 0, 0, 0.9); } }
}
@media (min-width: 861px) {
  [data-skin='gilded'] .bar-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; height: 84px; padding-bottom: 0; }
  [data-skin='gilded'] .emblem { grid-column: 1; width: 132px; height: 84px; }
  [data-skin='gilded'] .emblem img { top: 50%; width: 124px; max-height: 64px; translate: -50% -50%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); }
  [data-skin='gilded'] .emblem:hover img { filter: drop-shadow(0 4px 14px rgba(var(--accent-rgb), 0.25)); }
  [data-skin='gilded'] .nav-left { grid-column: 2; justify-content: flex-start; gap: 6px; padding: 0; }
  [data-skin='gilded'] .nav-right { grid-column: 3; justify-content: flex-end; gap: 10px; padding: 0; }
}
[data-skin='gilded'] .nav-link { gap: 9px; padding: 9px 12px; border-radius: 8px; color: #c9c1b8; font: 500 15px var(--font-ui); letter-spacing: 0; text-transform: none; text-shadow: none; transition: color 160ms var(--ease), background 160ms var(--ease); }
[data-skin='gilded'] .nav-link:is(:hover, .is-here, .is-open) { color: #fff; text-shadow: none; }
[data-skin='gilded'] .nav-link::after { display: none; }
[data-skin='gilded'] .nav-caret { margin-left: 0; }
/* each menu item's outline icon, by where it goes (anything else gets the grid) */
[data-skin='gilded'] .nav-left .nav-link { --gd-ico: var(--gd-i-grid); }
[data-skin='gilded'] .nav-left .nav-link[href='/'] { --gd-ico: var(--gd-i-home); }
[data-skin='gilded'] .nav-left .nav-link:is([href^='/characters'], [href^='/news'], [href^='/forum'], [href^='/events'], [href^='/rankings']) { --gd-ico: var(--gd-i-people); }
[data-skin='gilded'] .nav-left .nav-link[href^='/guilds'] { --gd-ico: var(--gd-i-shield); }
[data-skin='gilded'] .nav-left .nav-link:is([href^='/coins'], [href^='/gacha'], [href^='/vip']) { --gd-ico: var(--gd-i-bag); }
[data-skin='gilded'] .nav-left .nav-link::before,
[data-skin='gilded'] .nav-right > .nav-link[data-fold-open]::before { content: ''; flex: none; width: 19px; height: 19px; background: currentColor; -webkit-mask: var(--gd-ico) center / contain no-repeat; mask: var(--gd-ico) center / contain no-repeat; opacity: 0.9; }
/* the account and log in are outline buttons; register and Play now the gold ones with their chevron */
[data-skin='gilded'] .nav-right > .nav-link[data-fold-open] { --gd-ico: var(--gd-i-user); height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 7px; color: #fff; font-weight: 500; }
[data-skin='gilded'] .nav-right > .nav-link[href$='/login'] { --gd-ico: var(--gd-i-login); }
[data-skin='gilded'] .nav-right > .nav-link[data-fold-open]:is(:hover, .is-open) { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
[data-skin='gilded'] :is(.nav-right > .nav-accent, .nav-right > .btn-play) { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 0 14px 0 18px; border: 0; border-radius: 7px;
  background: var(--gd-gold); box-shadow: 0 8px 22px -12px rgba(var(--accent-rgb), 0.8); color: var(--gd-gold-ink); font: 600 15px var(--font-ui); letter-spacing: 0; text-transform: none; text-shadow: none; animation: none; }
[data-skin='gilded'] :is(.nav-right > .nav-accent, .nav-right > .btn-play)::after { content: ''; position: static; display: block; width: 15px; height: 15px; background: currentColor; transform: none; box-shadow: none;
  -webkit-mask: var(--gd-chev) center / contain no-repeat; mask: var(--gd-chev) center / contain no-repeat; transition: translate 200ms var(--ease); }
[data-skin='gilded'] :is(.nav-right > .nav-accent, .nav-right > .btn-play):hover { background: var(--gd-gold-hi); color: var(--gd-gold-ink); }
[data-skin='gilded'] :is(.nav-right > .nav-accent, .nav-right > .btn-play):hover::after { translate: 2px 0; }
[data-skin='gilded'] .nav-right > .btn-play::before { display: none; }
[data-skin='gilded'] .nav-coins { gap: 7px; padding: 0 12px; height: 40px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); color: #ffd27a; font-weight: 600; }
[data-skin='gilded'] .nav-coins:hover { background: rgba(255, 255, 255, 0.09); color: #ffe2a6; }
[data-skin='gilded'] .notify-bell { width: 40px; height: 40px; justify-content: center; padding: 0; border-radius: 7px; }
[data-skin='gilded'] .notify-bell:hover { background: rgba(255, 255, 255, 0.06); }
[data-skin='gilded'] .notify-count { background: var(--gd-gold); color: var(--gd-gold-ink); box-shadow: none; }
[data-skin='gilded'] .fold-link { padding: 8px 10px; border-radius: 6px; color: var(--text-1); font: 500 14px var(--font-ui); letter-spacing: 0; text-transform: none; }
[data-skin='gilded'] .fold-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-shadow: none; }

/* the menu's panels: warm panels with round corners under the bar */
[data-skin='gilded'] .drops > .card { border-radius: 12px; }
[data-skin='gilded'] .drops > .nav-drop { top: 74px; padding: 8px; }
[data-skin='gilded'] .nav-drop-item { padding: 10px 12px; border-radius: 8px; }
[data-skin='gilded'] .nav-drop-item:is(:hover, :focus-visible) { background: rgba(255, 255, 255, 0.05); translate: none; }
[data-skin='gilded'] .nav-drop-item.is-here { background: rgba(var(--accent-rgb), 0.1); }
[data-skin='gilded'] .nav-drop-text b { font: 600 14px var(--font-ui); letter-spacing: 0; text-transform: none; }
[data-skin='gilded'] .nav-drop-item:hover .nav-drop-text b { text-shadow: none; }
[data-skin='gilded'] .nav-drop-text small { color: var(--text-2); font-size: 12.5px; }

/* ---------- Panels: warm charcoal, round corners, flat ---------- */

[data-skin='gilded'] :is(.orn-fx, .bar-art) { display: none; }
[data-skin='gilded'] :is(.card, .panel) { padding: 26px 28px 28px; border: 1px solid var(--gd-edge); border-radius: 12px; background: var(--gd-panel); backdrop-filter: none; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.9); }
[data-skin='gilded'] .block-glass { border-radius: 12px; background: color-mix(in srgb, var(--gd-mid) 72%, transparent); }
[data-skin='gilded'] :is(.card-head, .h-title) { margin: 0 0 18px; padding: 0; border: 0; color: #fff; font: 700 21px/1.25 var(--font-display); letter-spacing: 0; text-transform: none; text-shadow: none; }
[data-skin='gilded'] .h-title { font-size: 28px; }
[data-skin='gilded'] .card-head h2 { font: inherit; }
[data-skin='gilded'] :is(.card-head, .h-title) .rune { display: none; }
[data-skin='gilded'] .card-more { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px 6px 12px; border-radius: 7px; background: var(--gd-chip); color: #fff; font: 500 13px var(--font-ui); letter-spacing: 0; text-transform: none; transition: background 160ms; }
[data-skin='gilded'] .card-more::after { content: ''; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--gd-chev) center / contain no-repeat; mask: var(--gd-chev) center / contain no-repeat; }
[data-skin='gilded'] .card-more:hover { background: var(--gd-chip-hi); color: #fff; }
[data-skin='gilded'] .block-head { border-bottom-color: var(--line); }
[data-skin='gilded'] .divider { height: 1px; margin: 22px 0; background: var(--line); }
[data-skin='gilded'] :is(.lead, .muted) { color: var(--text-2); }
[data-skin='gilded'] .lead { color: var(--text-1); }
[data-skin='gilded'] .flash { border: 0; border-radius: 10px; background: rgba(74, 157, 110, 0.14); }
[data-skin='gilded'] .flash-error { background: rgba(239, 90, 47, 0.14); }
[data-skin='gilded'] .h-display { font-weight: 700; letter-spacing: 0; }

/* ---------- Buttons: dark chips; the call to action gold with dark words; a ghost is its outline ---------- */

[data-skin='gilded'] .btn { height: 42px; padding: 0 20px; border-radius: 8px; background: var(--gd-chip); box-shadow: none; color: #fff; font: 500 14px var(--font-ui); letter-spacing: 0; text-transform: none; text-shadow: none; }
[data-skin='gilded'] .btn::before { display: none; }
[data-skin='gilded'] .btn:hover { background: var(--gd-chip-hi); color: #fff; translate: none; filter: none; }
[data-skin='gilded'] .btn:active { scale: 0.98; }
[data-skin='gilded'] .btn:focus-visible { outline: 2px solid var(--gd-gold); outline-offset: 2px; }
[data-skin='gilded'] :is(.btn-primary, .btn-play, .btn-accent, .tab.is-active) { background: var(--gd-gold); box-shadow: 0 10px 24px -14px rgba(var(--accent-rgb), 0.9); color: var(--gd-gold-ink); font-weight: 600; animation: none; }
[data-skin='gilded'] :is(.btn-primary, .btn-play, .btn-accent, .tab.is-active):hover { background: var(--gd-gold-hi); color: var(--gd-gold-ink); }
[data-skin='gilded'] .btn-ghost { opacity: 1; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
[data-skin='gilded'] .btn-ghost:hover { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px #fff; }
[data-skin='gilded'] .btn-lg { min-width: 0; height: 52px; padding: 0 30px; border-radius: 9px; font-size: 16px; }
[data-skin='gilded'] .btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }

/* ---------- Pills, chips and fields ---------- */

/* filters: dark pills, the chosen one gold */
[data-skin='gilded'] .subtabs { justify-content: flex-start; gap: 8px; margin: 0 0 20px; }
[data-skin='gilded'] .subtabs .nav-link { padding: 8px 16px; border-radius: 8px; background: var(--gd-chip); color: #fff; font: 500 14px var(--font-ui); }
[data-skin='gilded'] .subtabs .nav-link::before { display: none; }
[data-skin='gilded'] .subtabs .nav-link:hover { background: var(--gd-chip-hi); }
[data-skin='gilded'] .subtabs .nav-link.is-here { background: var(--gd-gold); color: var(--gd-gold-ink); font-weight: 600; }
[data-skin='gilded'] .tabs { justify-content: flex-start; gap: 8px; }
/* tags: a dark translucent pill with light words, the category's colour as a dot */
[data-skin='gilded'] .tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--gd-deep) 72%, transparent); color: #eee6dc; font: 500 12px var(--font-ui); letter-spacing: 0; text-transform: none; backdrop-filter: blur(6px); }
[data-skin='gilded'] .tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tag); }
[data-skin='gilded'] :is(.card, .panel) .tag { background: var(--gd-chip); }
[data-skin='gilded'] .input { border: 1px solid color-mix(in srgb, var(--gd-cream) 10%, transparent); border-radius: 8px; background: var(--gd-deep); box-shadow: none; color: #fff; font-family: var(--font-ui); }
[data-skin='gilded'] .input:hover { border-color: color-mix(in srgb, var(--gd-cream) 20%, transparent); }
[data-skin='gilded'] .input:focus { border-color: var(--gd-gold); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18); }
[data-skin='gilded'] .input::placeholder { color: #7b736b; }
[data-skin='gilded'] .field-label { color: var(--text-2); font-size: 13px; letter-spacing: 0; text-transform: none; }
[data-skin='gilded'] .field:focus-within .field-label { color: var(--gd-gold); }
/* arrows: rounded squares, gold when hovered */
[data-skin='gilded'] :is(.thumb-arrow, .fold-go) { width: 42px; height: 42px; border-radius: 9px; background-color: var(--gd-chip); box-shadow: none; }
[data-skin='gilded'] :is(.thumb-arrow, .fold-go):hover { background-color: var(--gd-gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b1d06' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E"); }
[data-skin='gilded'] .fold-go { width: 34px; height: 34px; }

/* ---------- Home: the hero (any of kernel/hero.php's designs; gilded's own is the rounded panel) ---------- */

[data-skin='gilded'] .hero-wrap.wrap { padding-top: 100px; }
[data-skin='gilded'] .hero-wrap.wrap .hero { border-radius: 14px; background: radial-gradient(ellipse 70% 90% at 80% 0%, rgba(var(--accent-rgb), 0.1), transparent 60%), linear-gradient(160deg, #2c2622, var(--gd-bg));
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.95), inset 0 0 0 1px color-mix(in srgb, var(--gd-cream) 7%, transparent); }
[data-skin='gilded'] .slide:has(.slide-art)::after { background: linear-gradient(90deg, color-mix(in srgb, var(--gd-deep) calc(min(1, var(--hero-dim, 0.3) + 0.55) * 100%), transparent) 0%, color-mix(in srgb, var(--gd-deep) calc(min(1, var(--hero-dim, 0.3) + 0.2) * 100%), transparent) 55%, color-mix(in srgb, var(--gd-deep) calc(var(--hero-dim, 0.3) * 100%), transparent)); }
[data-skin='gilded'] .slide.is-right:has(.slide-art)::after { background: linear-gradient(-90deg, color-mix(in srgb, var(--gd-deep) calc(min(1, var(--hero-dim, 0.3) + 0.55) * 100%), transparent) 0%, color-mix(in srgb, var(--gd-deep) calc(min(1, var(--hero-dim, 0.3) + 0.2) * 100%), transparent) 55%, color-mix(in srgb, var(--gd-deep) calc(var(--hero-dim, 0.3) * 100%), transparent)); }
[data-skin='gilded'] .slide.is-center:has(.slide-art)::after { background: color-mix(in srgb, var(--gd-deep) calc(min(1, var(--hero-dim, 0.3) + 0.25) * 100%), transparent); }
[data-skin='gilded'] .hero-wrap.wrap .slide-art { -webkit-mask-image: none; mask-image: none; }
[data-skin='gilded'] .slide-title { color: #fff; font-weight: 700; letter-spacing: -0.01em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
[data-skin='gilded'] .slide-sub { max-width: 600px; color: #ddd5cc; line-height: 1.55; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
[data-skin='gilded'] .slide-welcome .slide-sub { margin-inline: auto; }
[data-skin='gilded'] .slide-tagline { padding: 5px 12px; border: 0; background: color-mix(in srgb, var(--gd-deep) 70%, transparent); color: #f3e8da; font: 500 13px var(--font-ui); letter-spacing: 0; text-transform: none; }
[data-skin='gilded'] .slide-actions .btn:not(.btn-primary, .btn-play, .btn-accent) { background: color-mix(in srgb, var(--gd-deep) 45%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); backdrop-filter: blur(6px); }
[data-skin='gilded'] .slide-actions .btn:not(.btn-primary, .btn-play, .btn-accent):hover { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px #fff; }
[data-skin='gilded'] .slide-actions :is(.btn-primary, .btn-play, .btn-accent)::after { content: ''; position: static; inset: auto; width: 16px; height: 16px; margin-left: 8px; border: 0; border-radius: 0; background: currentColor; box-shadow: none; animation: none;
  -webkit-mask: var(--gd-chev) center / contain no-repeat; mask: var(--gd-chev) center / contain no-repeat; }
[data-skin='gilded'] .crest-ring { border-color: color-mix(in srgb, var(--gd-cream) 12%, transparent); }
[data-skin='gilded'] .crest-ring.is-back { border-color: rgba(var(--accent-rgb), 0.35); }
[data-skin='gilded'] .crest::before { background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 70%); }
[data-skin='gilded'] .hero-count { padding: 4px 12px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--gd-deep) 70%, transparent); color: var(--text-2); font: 500 13px var(--font-ui); backdrop-filter: blur(6px); }
[data-skin='gilded'] .hero-wrap.wrap .hero-count { right: 18px; bottom: 18px; }
[data-skin='gilded'] .hero-count b { font-size: 16px; }
/* the designs' controls: rounded squares and pills, the slide shown in gold */
[data-skin='gilded'] .hero-arrow { border-radius: 10px; background: color-mix(in srgb, var(--gd-deep) 60%, transparent); backdrop-filter: blur(6px); }
[data-skin='gilded'] .hero-arrow:hover { background: var(--gd-gold); color: var(--gd-gold-ink); }
[data-skin='gilded'] .hero-arrow.is-out { background: none; }
[data-skin='gilded'] .hero-arrow.is-out:hover { background: rgba(255, 255, 255, 0.06); color: var(--gd-gold); }
[data-skin='gilded'] .hero-dot { background: color-mix(in srgb, var(--gd-cream) 20%, transparent); }
[data-skin='gilded'] .hero-dot.is-on { background: rgba(var(--accent-rgb), 0.3); }
[data-skin='gilded'] .hero-dot.is-on::after { background: var(--gd-gold); }
[data-skin='gilded'] .hero-rail-item { background: color-mix(in srgb, var(--gd-deep) 60%, transparent); }
[data-skin='gilded'] .hero-rail-item i { color: var(--gd-gold); font-family: var(--font-ui); }
[data-skin='gilded'] .hero-rail-item.is-on { background: color-mix(in srgb, var(--gd-mid) 92%, transparent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.4); }
[data-skin='gilded'] :is(.hero-rail-item, .hero-pick).is-on::after { background: var(--gd-gold); }
[data-skin='gilded'] .hero-pager { background: color-mix(in srgb, var(--gd-deep) 65%, transparent); }
[data-skin='gilded'] .hero-page { font-family: var(--font-ui); }
[data-skin='gilded'] .hero-page.is-on { background: var(--gd-gold); color: var(--gd-gold-ink); }
[data-skin='gilded'] .hero-page.is-on::after { background: var(--gd-gold-ink); opacity: 0.5; }
[data-skin='gilded'] .hero-story.is-on i::after, [data-skin='gilded'] .hero-story:has(~ .hero-story.is-on) i::after { background: var(--gd-gold); }
[data-skin='gilded'] .hero-showcase { border-radius: 14px; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.95); }
[data-skin='gilded'] .hero-style-showcase .hero { border-radius: 14px 0 0 14px; }
[data-skin='gilded'] .hero-aside { border-radius: 0 14px 14px 0; background: var(--gd-panel); }
[data-skin='gilded'] .hero-pick { border-radius: 9px; background: var(--gd-bg); font-family: var(--font-ui); }
[data-skin='gilded'] .hero-pick.is-on { box-shadow: inset 0 0 0 2px var(--gd-gold); }
/* the strip of thumbnails (the full width design) */
[data-skin='gilded'] .thumbs { border: 0; background: color-mix(in srgb, var(--gd-deep) 92%, transparent); box-shadow: none; }
[data-skin='gilded'] .thumbs-list { gap: 10px; padding-block: 12px; }
[data-skin='gilded'] .thumb { border-radius: 10px; background: var(--gd-panel); color: var(--text-1); font: 500 14px/1.3 var(--font-ui); box-shadow: inset 0 0 0 1px var(--gd-edge); }
[data-skin='gilded'] .thumb img { opacity: 0.45; }
[data-skin='gilded'] .thumb:hover { background: var(--gd-panel-hi); }
[data-skin='gilded'] .thumb.is-on { background: var(--gd-panel-hi); color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.45); }
[data-skin='gilded'] .thumb.is-on::after { left: 12px; bottom: 8px; width: calc(100% - 24px); height: 2px; border-radius: 2px; background: var(--gd-gold); box-shadow: none; }

/* ---------- News: cards with the picture on top, date, a bold title, one line of summary ---------- */

[data-skin='gilded'] .news-row { gap: 16px; padding: 14px 12px; border-bottom: 0; border-radius: 10px; }
[data-skin='gilded'] .news-row + .news-row { margin-top: 4px; }
[data-skin='gilded'] .news-row:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
[data-skin='gilded'] .news-row:hover { background: var(--gd-panel-hi); }
[data-skin='gilded'] .news-row:hover .news-title { translate: 2px 0; text-shadow: none; }
[data-skin='gilded'] .news-title { color: #fff; font-weight: 600; }
[data-skin='gilded'] .news-date { color: var(--text-2); font-size: 13px; }
[data-skin='gilded'] .news-said { border-color: var(--line); border-radius: 999px; }
[data-skin='gilded'] .news-said:hover { border-color: var(--gd-gold); }
[data-skin='gilded'] .w-news :is(.news-item, .news-card, .news-tile, .news-lead) .news-title { font: 600 16px/1.35 var(--font-display); }
[data-skin='gilded'] .w-news :is(.news-item, .news-card, .news-tile, .news-lead):hover .news-title { color: #fff; text-shadow: none; }
[data-skin='gilded'] .news-summary { -webkit-line-clamp: 1; color: var(--text-2); font-size: 14px; }
[data-skin='gilded'] .news-compact li { padding: 10px 4px; }
[data-skin='gilded'] .news-compact a:hover { color: #fff; text-shadow: none; }
[data-skin='gilded'] .news-dot { box-shadow: none; }
[data-skin='gilded'] :is(.news-card, .news-lead) { padding: 10px; border: 1px solid var(--gd-edge); border-radius: 12px; background: var(--gd-panel-hi); }
[data-skin='gilded'] :is(.news-card, .news-lead):hover { border-color: rgba(var(--accent-rgb), 0.35); box-shadow: 0 16px 30px -20px rgba(0, 0, 0, 0.9); }
[data-skin='gilded'] :is(.news-card, .news-lead) .news-cover { border-radius: 9px; }
[data-skin='gilded'] :is(.news-card, .news-lead) .news-body { padding: 12px 4px 4px; }
[data-skin='gilded'] .news-tile { border: 0; border-radius: 12px; }
[data-skin='gilded'] .news-tile::after { background: linear-gradient(to top, color-mix(in srgb, var(--gd-deep) 95%, transparent) 8%, color-mix(in srgb, var(--gd-deep) 35%, transparent) 55%, transparent); }
[data-skin='gilded'] .news-item { border-bottom: 0; border-radius: 10px; }
[data-skin='gilded'] .news-item:hover { background: var(--gd-panel-hi); }
[data-skin='gilded'] .news-thumb { border: 0; border-radius: 8px; }
[data-skin='gilded'] :is(.news-cover, .news-thumb).is-blank { background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--tag) 35%, transparent), transparent 70%), linear-gradient(160deg, #3a322b, var(--gd-deep)); }

/* ---------- A post: a centred column, the picture rounded, light body text, gold dots on lists ---------- */

[data-skin='gilded'] article.panel { max-width: 860px; }
[data-skin='gilded'] .post-meta { gap: 10px; color: var(--text-2); font-size: 14px; }
[data-skin='gilded'] .post-media { border: 0; border-radius: 12px; }
[data-skin='gilded'] .post-body { color: var(--text-1); font-size: 16px; line-height: 1.75; }
[data-skin='gilded'] :is(.post-body, .md) :is(h1, h2, h3, h4) { margin: 1.4em 0 0.5em; color: #fff; font-family: var(--font-display); font-weight: 700; letter-spacing: 0; text-transform: none; }
[data-skin='gilded'] :is(.post-body, .md) ul { padding-left: 1.2em; list-style: none; }
[data-skin='gilded'] :is(.post-body, .md) ul > li { position: relative; margin: 0.3em 0; }
[data-skin='gilded'] :is(.post-body, .md) ul > li::before { content: ''; position: absolute; left: -1em; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--gd-gold); }
[data-skin='gilded'] :is(.post-body, .md) a { color: var(--gd-gold-hi); text-decoration: underline; text-decoration-color: rgba(255, 196, 77, 0.35); text-underline-offset: 3px; }
[data-skin='gilded'] :is(.post-body, .md) a:hover { text-decoration-color: currentColor; }
[data-skin='gilded'] :is(.post-body, .md) blockquote { margin: 1em 0; padding: 12px 16px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
/* "All news": a back arrow on a rounded square */
[data-skin='gilded'] article.panel > .center > .btn[href$='/news'] { gap: 10px; padding-left: 16px; }
[data-skin='gilded'] article.panel > .center > .btn[href$='/news']::after { content: ''; order: -1; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--gd-i-back) center / contain no-repeat; mask: var(--gd-i-back) center / contain no-repeat; }
[data-skin='gilded'] .comments-title { font: 700 18px var(--font-display); letter-spacing: 0; text-transform: none; }
[data-skin='gilded'] .comment-author { color: var(--gd-gold-hi); }

/* ---------- Rankings, stats and smaller pieces ---------- */

[data-skin='gilded'] .rank-row { border-bottom: 0; border-radius: 10px; }
[data-skin='gilded'] .rank-row:hover { background: rgba(255, 255, 255, 0.04); }
[data-skin='gilded'] .rank-pos { font-weight: 700; }
[data-skin='gilded'] .rank-row:nth-child(1) .rank-pos { color: var(--gd-gold); text-shadow: none; animation: none; }
[data-skin='gilded'] .rank-row:nth-child(2) .rank-pos { color: #d8d2cb; }
[data-skin='gilded'] .rank-row:nth-child(3) .rank-pos { color: #c98a5a; }
[data-skin='gilded'] .stat-label { letter-spacing: 0.02em; text-transform: none; }
[data-skin='gilded'] .avatar { box-shadow: 0 0 0 2px var(--gd-panel), 0 2px 8px rgba(0, 0, 0, 0.45); }
[data-skin='gilded'] .loader { background: radial-gradient(ellipse at 50% 45%, var(--gd-panel), var(--gd-bg) 70%); }
[data-skin='gilded'] .loader-stem { stroke: var(--gd-gold); }
[data-skin='gilded'] .loader-label { font: 500 13px var(--font-ui); letter-spacing: 0.04em; text-transform: none; }
[data-skin='gilded'] .stat-rune { stroke: var(--gd-gold); filter: none; }

/* a character's page: its heading holds who it is in body text, the name bold */
[data-skin='gilded'] .h-title.char-head { color: var(--text-1); font: 400 15px/1.6 var(--font-ui); }
[data-skin='gilded'] .char-name-big { font: 700 28px var(--font-display); letter-spacing: 0; }
[data-skin='gilded'] .char-class { color: var(--gd-gold); font: 600 14px var(--font-ui); letter-spacing: 0.02em; text-transform: none; }
[data-skin='gilded'] .char-facts dt { font-size: 12.5px; letter-spacing: 0; text-transform: none; }
/* the gacha's pull buttons in title case */
[data-skin='gilded'] .gacha-pull b { font: 700 17px var(--font-display); letter-spacing: 0; text-transform: none; }
/* the forum: what is chosen in gold */
[data-skin='gilded'] .forum { --surface: color-mix(in srgb, var(--gd-cream) 3.5%, transparent); --surface-2: color-mix(in srgb, var(--gd-cream) 7%, transparent); --pop: var(--gd-panel); }
[data-skin='gilded'] .tw-nav-link.is-here, [data-skin='gilded'] .board-link.is-here .fi { color: var(--gd-gold); }
[data-skin='gilded'] .board-link { border-radius: 8px; }
[data-skin='gilded'] .board-link.is-here { background: rgba(var(--accent-rgb), 0.12); }
[data-skin='gilded'] .tw-tabs a.is-here::after { background: var(--gd-gold); }
[data-skin='gilded'] .side-box { border-radius: 12px; }
[data-skin='gilded'] .side-box h3 { color: #fff; font: 700 15px var(--font-display); letter-spacing: 0; text-transform: none; }
[data-skin='gilded'] .tw-nav-head { letter-spacing: 0.04em; text-transform: none; font-size: 12px; }
[data-skin='gilded'] .flag.is-pin, [data-skin='gilded'] .forum-flag { border: 0; border-radius: 999px; background: var(--gd-gold); color: var(--gd-gold-ink); letter-spacing: 0; text-transform: none; font-weight: 600; }
[data-skin='gilded'] .rd-card:hover, [data-skin='gilded'] .rd-card.is-pinned { border-color: rgba(var(--accent-rgb), 0.35); }

/* ---------- Footer: dark, the logo left, small grey labels and white links, round icons right ---------- */

[data-skin='gilded'] .foot { border-top: 1px solid var(--gd-edge); background: #171411; box-shadow: none; }
[data-skin='gilded'] .foot-row { gap: 28px; padding-top: 34px; padding-bottom: 34px; }
[data-skin='gilded'] .foot-logo { height: 52px; opacity: 1; }
[data-skin='gilded'] .foot-row strong { color: #fff; font-weight: 600; }
[data-skin='gilded'] .foot-row .muted { color: var(--text-2); }
[data-skin='gilded'] .foot-lang { padding: 6px 12px; border-radius: 7px; background: var(--gd-chip); color: var(--text-1); }
[data-skin='gilded'] .foot-lang:hover { color: #fff; }
[data-skin='gilded'] .foot-link { border-radius: 9px; background: var(--gd-chip); color: #e6ddd3; }
[data-skin='gilded'] .foot-link:hover { background: var(--gd-gold); color: var(--gd-gold-ink); scale: 1.06; }

/* ---------- Phones ---------- */

@media (max-width: 860px) {
  [data-skin='gilded'] .head { height: 72px; margin-bottom: -72px; }
  [data-skin='gilded'] .bar, [data-skin='gilded'] .bar-row { height: 72px; }
  [data-skin='gilded'] .bar-row { grid-template-columns: auto 1fr 44px; }
  [data-skin='gilded'] .emblem { grid-column: 1; justify-self: start; width: 120px; height: 72px; }
  [data-skin='gilded'] .emblem img { top: 50%; width: 108px; max-height: 56px; translate: -50% -50%; }
  [data-skin='gilded'] .nav-toggle span, [data-skin='gilded'] .nav-toggle span::before, [data-skin='gilded'] .nav-toggle span::after { background-color: #fff; }
  [data-skin='gilded'] .nav-toggle[aria-expanded='true'] span { background-color: transparent; }
  [data-skin='gilded'] .drawer { padding-top: 16px; border: 0; border-radius: 0 0 14px 14px; background: color-mix(in srgb, var(--gd-deep) 98%, transparent); box-shadow: 0 20px 40px -20px #000; }
  [data-skin='gilded'] .main { padding-top: 88px; }
  [data-skin='gilded'] .hero-wrap.wrap { padding-top: 84px; }
  [data-skin='gilded'] .nav-left .nav-link { font-size: 14px; letter-spacing: 0; border: 0; border-radius: 10px; background: var(--gd-chip); }
  [data-skin='gilded'] .nav-left .nav-link.is-here { background: var(--gd-chip-hi); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.5); }
  [data-skin='gilded'] .nav-right > .nav-link[data-fold-open] { flex: 1; justify-content: center; }
  [data-skin='gilded'] .nav-right > .nav-accent { flex: 1; justify-content: center; }
  [data-skin='gilded'] .nav-drop-item.is-here { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.1); }
}
@media (max-width: 560px) {
  [data-skin='gilded'] :is(.card, .panel) { padding: 20px 16px 22px; }
  [data-skin='gilded'] .h-title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { [data-skin='gilded'] .bar { animation: none; } }