/* Applied Case: The Ever-Brilliant Goldmask
   Original CSS-only "golden theorem" and dark-moon symbols; no game art assets. */

:root {
  --mpe-goldmask-sun-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M64 5v13M64 110v13M5 64h13M110 64h13M22 22l9 9M97 97l9 9M22 106l9-9M97 31l9-9' stroke='%23d9a52a' stroke-width='4'/%3E%3Ccircle cx='64' cy='64' r='46' fill='%23201908' stroke='%23f7dd7b' stroke-width='3'/%3E%3Ccircle cx='64' cy='64' r='39' fill='%23d6a82c' stroke='%23805b12' stroke-width='2'/%3E%3Ccircle cx='64' cy='64' r='31' stroke='%23fff1a3' stroke-width='2'/%3E%3Cpath d='M36 64h56M64 36v56M44 44l40 40M84 44L44 84M40 53c15 8 33 8 48 0M40 75c15-8 33-8 48 0' stroke='%236f4a0a' stroke-width='3'/%3E%3Cpath d='M50 48c7-8 21-8 28 0l8 16-8 16c-7 8-21 8-28 0l-8-16z' fill='%23f6dc77' stroke='%23543a0b' stroke-width='2'/%3E%3Cpath d='M50 60h28M55 69h18M64 48v32' stroke='%23936a16' stroke-width='2'/%3E%3Ccircle cx='64' cy='64' r='5' fill='%23302406' stroke='%23fff3ad' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
  --mpe-goldmask-moon-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Ccircle cx='64' cy='64' r='51' fill='none' stroke='%234f68a8' stroke-width='2' opacity='.55'/%3E%3Ccircle cx='64' cy='64' r='44' fill='%2307091c' stroke='%23a8bff0' stroke-width='3'/%3E%3Ccircle cx='64' cy='64' r='37' fill='%23131b3f' stroke='%233b4f87' stroke-width='2'/%3E%3Cpath d='M83 29c-17 8-28 24-28 42 0 13 5 24 14 32-20-2-36-19-36-40 0-19 13-34 30-39 7-2 14-1 20 5z' fill='%2329386c' opacity='.9'/%3E%3Cg fill='none' stroke='%237d98d4' stroke-linecap='round' opacity='.68'%3E%3Cpath d='M28 56c18-13 48-17 72-4' stroke-width='2'/%3E%3Cpath d='M31 78c22 10 48 11 68-1' stroke-width='2'/%3E%3Cpath d='M43 34c9 5 13 13 13 23M86 43c-8 5-12 13-12 22'/%3E%3C/g%3E%3Cg fill='%23090d27' stroke='%235a72ad' stroke-width='1.5'%3E%3Ccircle cx='78' cy='48' r='6'/%3E%3Ccircle cx='86' cy='72' r='8'/%3E%3Ccircle cx='61' cy='85' r='5'/%3E%3Ccircle cx='47' cy='54' r='4'/%3E%3C/g%3E%3Ccircle cx='64' cy='64' r='56' fill='none' stroke='%232a3765' stroke-width='1' stroke-dasharray='2 7'/%3E%3C/svg%3E");
}

/* Persistent badge and global theme-toggle icon set. */
html[data-goldmask-icons-unlocked="true"] .mpe-badge-rack {
  display: flex !important;
}

html[data-goldmask-icons-active="true"] .mpe-theme-icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

html[data-goldmask-icons-active="true"] .mpe-theme-icon svg {
  display: none !important;
}

html[data-goldmask-icons-active="true"] .mpe-theme-icon-sun {
  background-image: var(--mpe-goldmask-sun-icon);
}

html[data-goldmask-icons-active="true"] .mpe-theme-icon-moon {
  background-image: var(--mpe-goldmask-moon-icon);
}

.mpe-badge--goldmask {
  overflow: visible;
  border-color: rgba(211, 168, 55, .42) !important;
  background: radial-gradient(circle, rgba(247, 219, 118, .12), rgba(35, 25, 7, .08) 68%, transparent 70%) !important;
  box-shadow: 0 0 0 1px rgba(222, 181, 66, .08), 0 0 20px rgba(213, 165, 40, .12) !important;
}

.mpe-badge--goldmask::before {
  content: "";
  position: absolute;
  inset: .34rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
  transition: transform .18s ease, filter .18s ease;
}

.mpe-badge--goldmask::after {
  content: "";
  position: absolute;
  inset: .18rem;
  border: 1px dashed rgba(233, 199, 93, .44);
  border-radius: 50%;
  pointer-events: none;
}

html[data-color-scheme="light"]:not([data-goldmask-icons-active="true"]) .mpe-badge--goldmask::before {
  background-image: var(--mpe-goldmask-sun-icon);
}

html[data-color-scheme="dark"]:not([data-goldmask-icons-active="true"]) .mpe-badge--goldmask::before {
  background-image: var(--mpe-goldmask-moon-icon);
}

html[data-goldmask-icons-active="true"][data-color-scheme="light"] .mpe-badge--goldmask::before {
  inset: .9rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.5 1.5M17.6 17.6l1.5 1.5M4.9 19.1l1.5-1.5M17.6 6.4l1.5-1.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.5 1.5M17.6 17.6l1.5 1.5M4.9 19.1l1.5-1.5M17.6 6.4l1.5-1.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

html[data-goldmask-icons-active="true"][data-color-scheme="dark"] .mpe-badge--goldmask::before {
  inset: .9rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mpe-badge--goldmask:hover::before,
.mpe-badge--goldmask:focus-visible::before {
  transform: scale(1.06);
  filter: drop-shadow(0 0 7px rgba(248, 218, 112, .54));
}

/* Page palette and field. */
html.mpe-goldmask-page {
  --gm-gold-1: #6f4b0a;
  --gm-gold-2: #b88419;
  --gm-gold-3: #e8c75d;
  --gm-gold-4: #fff0a5;
  --gm-title-mid: #a97919;
  --gm-ink: #211b10;
  --gm-muted: #675b43;
  --gm-paper: #f3ecd4;
  --gm-panel: rgba(255, 251, 232, .82);
  --gm-panel-solid: #f7f0d8;
  --gm-rule: rgba(143, 101, 18, .34);
  --gm-moon: #303e75;
  --gm-shadow: rgba(66, 44, 5, .2);
  color-scheme: light;
}

html.mpe-goldmask-page[data-color-scheme="dark"] {
  --gm-gold-1: #aa771e;
  --gm-gold-2: #d6a832;
  --gm-gold-3: #f0d277;
  --gm-gold-4: #fff2b0;
  --gm-title-mid: #f0d277;
  --gm-ink: #ede6cd;
  --gm-muted: #b7af96;
  --gm-paper: #090b12;
  --gm-panel: rgba(17, 18, 24, .88);
  --gm-panel-solid: #111219;
  --gm-rule: rgba(224, 183, 67, .32);
  --gm-moon: #7792cf;
  --gm-shadow: rgba(0, 0, 0, .56);
  color-scheme: dark;
}

html.mpe-goldmask-page body {
  background-color: var(--gm-paper) !important;
  background-image:
    radial-gradient(circle at 50% -6rem, rgba(244, 207, 87, .28), transparent 35rem),
    repeating-linear-gradient(90deg, transparent 0 6.35rem, rgba(107, 75, 13, .045) 6.4rem 6.5rem),
    repeating-linear-gradient(0deg, transparent 0 6.35rem, rgba(107, 75, 13, .038) 6.4rem 6.5rem) !important;
  color: var(--gm-ink);
}

html.mpe-goldmask-page[data-color-scheme="dark"] body {
  background-image:
    radial-gradient(circle at 82% 11rem, rgba(72, 93, 157, .24), transparent 24rem),
    radial-gradient(circle at 18% 36rem, rgba(197, 147, 34, .11), transparent 28rem),
    repeating-linear-gradient(90deg, transparent 0 6.35rem, rgba(137, 157, 204, .035) 6.4rem 6.5rem),
    repeating-linear-gradient(0deg, transparent 0 6.35rem, rgba(137, 157, 204, .03) 6.4rem 6.5rem) !important;
}

html.mpe-goldmask-page body::before,
html.mpe-goldmask-page body::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: min(68vw, 82rem);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

html.mpe-goldmask-page body::before {
  top: 12rem;
  left: -29rem;
  border: 1px solid rgba(179, 133, 31, .24);
  box-shadow:
    inset 0 0 0 4.5rem rgba(201, 155, 39, .025),
    inset 0 0 0 4.6rem rgba(179, 133, 31, .18),
    inset 0 0 0 12rem rgba(201, 155, 39, .018),
    inset 0 0 0 12.1rem rgba(179, 133, 31, .12);
}

html.mpe-goldmask-page body::after {
  right: -27rem;
  bottom: 5rem;
  border: 1px dashed rgba(76, 96, 151, .22);
  box-shadow:
    inset 0 0 0 6rem rgba(69, 87, 139, .02),
    inset 0 0 0 6.1rem rgba(74, 93, 149, .16),
    inset 0 0 0 15rem rgba(69, 87, 139, .018),
    inset 0 0 0 15.1rem rgba(74, 93, 149, .11);
}

html.mpe-goldmask-page .gh-site {
  position: relative;
  z-index: 1;
  background: transparent;
}

html.mpe-goldmask-page .gh-main {
  background: transparent;
}

html.mpe-goldmask-page .gh-head {
  border-bottom: 1px solid var(--gm-rule);
  background: color-mix(in srgb, var(--gm-paper) 88%, transparent) !important;
  box-shadow: 0 10px 30px rgba(61, 43, 8, .06);
  backdrop-filter: blur(13px) saturate(.85);
}

html.mpe-goldmask-page[data-color-scheme="dark"] .gh-head {
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

html.mpe-goldmask-page .gh-article-header {
  margin-bottom: clamp(4rem, 7vw, 8rem);
  padding-block: clamp(4rem, 7vw, 8rem);
  border-block: 1px solid var(--gm-rule);
  background:
    radial-gradient(circle at 78% 26%, rgba(237, 198, 78, .19), transparent 24rem),
    linear-gradient(115deg, var(--gm-panel), color-mix(in srgb, var(--gm-panel) 45%, transparent));
  box-shadow: 0 24px 64px var(--gm-shadow);
  overflow: hidden;
}

html.mpe-goldmask-page .gh-article-header::before,
html.mpe-goldmask-page .gh-article-header::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: max(var(--gap), calc((100vw - 1200px) / 2));
  top: clamp(2.5rem, 5vw, 6rem);
  width: clamp(13rem, 22vw, 27rem);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

html.mpe-goldmask-page .gh-article-header::before {
  border: clamp(1.2rem, 2.3vw, 2.8rem) double rgba(195, 146, 32, .25);
  box-shadow: inset 0 0 0 1px rgba(251, 225, 132, .48), 0 0 42px rgba(204, 157, 45, .12);
}

html.mpe-goldmask-page .gh-article-header::after {
  transform: scale(.64);
  border: 2px dashed rgba(126, 91, 22, .34);
  background: var(--mpe-goldmask-sun-icon) center / 76% no-repeat;
  opacity: .32;
}

html.mpe-goldmask-page .gh-article-header > * {
  position: relative;
  z-index: 1;
}

html.mpe-goldmask-page .gh-article-tag {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  width: fit-content;
  padding: .65rem 1.15rem;
  border: 1px solid var(--gm-rule);
  border-radius: 999px;
  background: rgba(220, 174, 56, .09);
  color: var(--gm-gold-1) !important;
  letter-spacing: .12em;
}

html.mpe-goldmask-page[data-color-scheme="dark"] .gh-article-tag {
  color: var(--gm-gold-3) !important;
}

html.mpe-goldmask-page .gh-article-title {
  max-width: 82rem;
  color: var(--gm-gold-1) !important;
  font-size: clamp(4rem, 7vw, 8.2rem);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 245, 190, .7), 0 12px 36px rgba(114, 76, 8, .12);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html.mpe-goldmask-page .gh-article-title {
    background: linear-gradient(118deg, var(--gm-gold-1) 0 28%, var(--gm-title-mid) 53%, var(--gm-gold-1) 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
  }
}

html.mpe-goldmask-page .gh-article-excerpt {
  max-width: 65rem;
  margin-top: 2rem;
  color: var(--gm-muted) !important;
  font-size: clamp(1.8rem, 2.3vw, 2.3rem);
  line-height: 1.55;
}

html.mpe-goldmask-page .gh-article-sidebar {
  color: var(--gm-muted);
}

html.mpe-goldmask-page .gh-article-sidebar a,
html.mpe-goldmask-page .gh-article-meta {
  color: var(--gm-muted) !important;
}

html.mpe-goldmask-page .gh-author-image {
  border: 2px solid var(--gm-gold-3);
  box-shadow: 0 0 0 5px rgba(205, 158, 38, .1);
}

html.mpe-goldmask-page .gh-article-image {
  margin-top: clamp(3rem, 5vw, 6rem);
  padding: clamp(.7rem, 1vw, 1.2rem);
  border: 1px solid var(--gm-rule);
  background: linear-gradient(135deg, rgba(247, 221, 123, .2), rgba(87, 58, 8, .12));
  box-shadow: 0 24px 54px var(--gm-shadow);
}

html.mpe-goldmask-page .gh-article-image img {
  width: 100%;
  border: 1px solid rgba(40, 29, 8, .28);
}

html.mpe-goldmask-page .gh-content {
  color: var(--gm-ink);
}

html.mpe-goldmask-page .gh-content p,
html.mpe-goldmask-page .gh-content li {
  color: var(--gm-ink) !important;
  text-wrap: pretty;
}

html.mpe-goldmask-page .gh-content strong {
  color: color-mix(in srgb, var(--gm-ink) 76%, var(--gm-gold-1));
}

html.mpe-goldmask-page[data-color-scheme="dark"] .gh-content strong {
  color: var(--gm-gold-4);
}

html.mpe-goldmask-page .gh-content a:not([class]) {
  color: var(--gm-gold-1) !important;
  text-decoration-color: color-mix(in srgb, var(--gm-gold-2) 62%, transparent);
  text-decoration-thickness: .1em;
  text-underline-offset: .18em;
}

html.mpe-goldmask-page[data-color-scheme="dark"] .gh-content a:not([class]) {
  color: var(--gm-gold-3) !important;
}

html.mpe-goldmask-page .gh-content h1,
html.mpe-goldmask-page .gh-content h2 {
  position: relative;
  margin-top: clamp(8rem, 12vw, 13rem);
  padding: clamp(2.2rem, 4vw, 4rem) clamp(2rem, 5vw, 5rem);
  border: 1px solid var(--gm-rule);
  background:
    linear-gradient(100deg, rgba(216, 170, 51, .16), transparent 68%),
    var(--gm-panel);
  color: var(--gm-gold-1) !important;
  box-shadow: 0 18px 50px var(--gm-shadow);
  letter-spacing: -.03em;
  text-wrap: balance;
}

html.mpe-goldmask-page[data-color-scheme="dark"] .gh-content h1,
html.mpe-goldmask-page[data-color-scheme="dark"] .gh-content h2 {
  color: var(--gm-gold-3) !important;
  background:
    radial-gradient(circle at 92% 50%, rgba(74, 94, 154, .2), transparent 15rem),
    linear-gradient(100deg, rgba(216, 170, 51, .11), transparent 68%),
    var(--gm-panel);
}

html.mpe-goldmask-page .gh-content h1::before,
html.mpe-goldmask-page .gh-content h2::before {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(1.4rem, 3vw, 3rem);
  width: clamp(4rem, 7vw, 6.8rem);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: var(--mpe-goldmask-sun-icon) center / contain no-repeat;
  opacity: .2;
}

html.mpe-goldmask-page[data-color-scheme="dark"] .gh-content h1::before,
html.mpe-goldmask-page[data-color-scheme="dark"] .gh-content h2::before {
  background-image: var(--mpe-goldmask-moon-icon);
  opacity: .38;
}

html.mpe-goldmask-page .gh-content blockquote:not(.kg-blockquote-alt) {
  position: relative;
  padding: clamp(2.2rem, 4vw, 4rem) clamp(2.4rem, 5vw, 5rem);
  border: 1px solid var(--gm-rule);
  border-left: .7rem solid var(--gm-gold-2);
  background: var(--gm-panel);
  color: var(--gm-ink) !important;
  box-shadow: 0 16px 44px var(--gm-shadow);
}

html.mpe-goldmask-page .gh-content blockquote:not(.kg-blockquote-alt)::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 4.5rem;
  aspect-ratio: 1;
  border: 1px solid var(--gm-rule);
  border-radius: 50%;
  box-shadow: inset 0 0 0 .8rem rgba(201, 155, 39, .07);
}

html.mpe-goldmask-page .gh-content .kg-blockquote-alt {
  color: var(--gm-gold-2) !important;
  font-size: 2.1rem;
  text-shadow: 0 0 16px rgba(221, 176, 56, .24);
}

html.mpe-goldmask-page .gh-content figure.kg-image-card {
  position: relative;
  margin-block: clamp(3.8rem, 6vw, 7rem);
  padding: clamp(.55rem, .8vw, .9rem);
  border: 1px solid var(--gm-rule);
  background: linear-gradient(135deg, rgba(250, 226, 135, .18), rgba(88, 59, 7, .09));
  box-shadow: 0 22px 56px var(--gm-shadow);
}

html.mpe-goldmask-page .gh-content figure.kg-image-card::before,
html.mpe-goldmask-page .gh-content figure.kg-image-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 2.2rem;
  aspect-ratio: 1;
  border-color: var(--gm-gold-2);
  pointer-events: none;
}

html.mpe-goldmask-page .gh-content figure.kg-image-card::before {
  top: -.4rem;
  left: -.4rem;
  border-top: 2px solid;
  border-left: 2px solid;
}

html.mpe-goldmask-page .gh-content figure.kg-image-card::after {
  right: -.4rem;
  bottom: -.4rem;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

html.mpe-goldmask-page .gh-content figure.kg-image-card img {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border: 1px solid rgba(45, 31, 5, .28);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .12);
}

html.mpe-goldmask-page[data-color-scheme="dark"] .gh-content figure.kg-image-card img {
  filter: saturate(.9) brightness(.88) contrast(1.06);
}

html.mpe-goldmask-page .gh-content figcaption {
  color: var(--gm-muted) !important;
}

html.mpe-goldmask-page .mpe-post-routes,
html.mpe-goldmask-page .mpe-article-tags-panel,
html.mpe-goldmask-page .mpe-book-widget-panel,
html.mpe-goldmask-page .gh-read-next,
html.mpe-goldmask-page .gh-comments {
  border-color: var(--gm-rule) !important;
  background: var(--gm-panel) !important;
  color: var(--gm-ink) !important;
  box-shadow: 0 18px 48px var(--gm-shadow);
}

html.mpe-goldmask-page .gh-foot {
  border-top: 1px solid rgba(232, 197, 88, .25);
  background:
    radial-gradient(circle at 50% 0, rgba(210, 161, 43, .16), transparent 28rem),
    #11100c !important;
}

@media (max-width: 1199px) {
  html.mpe-goldmask-page .gh-article-sidebar {
    margin-top: 3rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--gm-rule);
    background: color-mix(in srgb, var(--gm-panel) 72%, transparent);
  }
}

@media (max-width: 767px) {
  html.mpe-goldmask-page,
  html.mpe-goldmask-page body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  html.mpe-goldmask-page .gh-article-header {
    margin-inline: 0;
    padding-block: 3.2rem 4rem;
  }

  html.mpe-goldmask-page .gh-article-header::before,
  html.mpe-goldmask-page .gh-article-header::after {
    right: -4rem;
    top: 5rem;
    opacity: .58;
  }

  html.mpe-goldmask-page .gh-article-title {
    max-width: 88%;
    font-size: clamp(3.8rem, 13vw, 5.6rem);
  }

  html.mpe-goldmask-page .gh-article-excerpt {
    max-width: 90%;
  }

  html.mpe-goldmask-page .gh-content h1,
  html.mpe-goldmask-page .gh-content h2 {
    margin-top: 7rem;
    padding: 2.2rem 6rem 2.2rem 2rem;
    font-size: clamp(2.8rem, 9vw, 4rem);
  }

  html.mpe-goldmask-page .gh-content figure.kg-image-card {
    padding: .45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mpe-badge--goldmask::before {
    transition: none;
  }
}

@media print {
  html.mpe-goldmask-page body {
    background: #fff !important;
    color: #111 !important;
  }

  html.mpe-goldmask-page body::before,
  html.mpe-goldmask-page body::after,
  html.mpe-goldmask-page .gh-article-header::before,
  html.mpe-goldmask-page .gh-article-header::after {
    display: none !important;
  }

  html.mpe-goldmask-page .gh-article-header,
  html.mpe-goldmask-page .gh-content h1,
  html.mpe-goldmask-page .gh-content h2,
  html.mpe-goldmask-page .gh-content blockquote,
  html.mpe-goldmask-page .gh-content figure.kg-image-card {
    background: #fff !important;
    box-shadow: none !important;
  }
}