@font-face{font-family:"bebas-neue";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/b3688964dc-bebas-neue-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/5470bf0b7f-barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/7b300ebe10-barlow-latin-700-normal.woff2) format("woff2")}
/* Mutantdle: classic X-Men uniform: blue and yellow, X-emblem pattern, comic speed lines, bold condensed titles. */
body.dle-mutantdle {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg stroke='%23ffd21f' stroke-opacity='.07' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M28 28 L62 62 M62 28 L28 62'/%3E%3C/g%3E%3Ccircle cx='45' cy='45' r='26' fill='none' stroke='%23ffd21f' stroke-opacity='.06' stroke-width='4'/%3E%3C/svg%3E"),
    repeating-conic-gradient(from 0deg at 50% -20%, #ffffff05 0 2deg, transparent 2deg 6deg),
    radial-gradient(ellipse at top, #24408f, var(--background) 70%);
  background-attachment: fixed;
}
.dle-mutantdle .site-header { background: var(--accent); border-bottom: 4px solid #111; }
.dle-mutantdle .site-header .brand { color: #111; font-size: 26px; letter-spacing: 0.05em; }
.dle-mutantdle .mode-nav a { background: #111; color: var(--accent); font-weight: 700; }
.dle-mutantdle .mode-nav a[aria-current="page"] { background: var(--primary); color: #fff; }
.dle-mutantdle .page-title { font-size: clamp(36px, 8vw, 60px); letter-spacing: 0.04em; color: var(--accent); text-shadow: 3px 3px 0 #111, 6px 6px 0 var(--primary); }
.dle-mutantdle h2 { letter-spacing: 0.05em; font-size: 28px; color: var(--accent); }
.dle-mutantdle .guess-input { border: 3px solid var(--accent); background: #0a1028; border-radius: 4px; }
.dle-mutantdle .guess-button, .dle-mutantdle .share-button { background: var(--accent); color: #111; border-radius: 4px; box-shadow: 4px 4px 0 #111; font-family: var(--headingFont); font-size: 22px; letter-spacing: 0.05em; }
.dle-mutantdle .cell { border-radius: 4px; border: 2px solid #111; transform: skewX(-4deg); }
.dle-mutantdle .cell.name { background: var(--primary); }
.dle-mutantdle .clue-card { background: #0a1028; border: 3px solid var(--accent); border-radius: 4px; box-shadow: 6px 6px 0 #111; }
.dle-mutantdle .clue { font-family: var(--headingFont); letter-spacing: 0.03em; font-size: 28px; }
.dle-mutantdle .chip { border: 2px solid #111; transform: skewX(-4deg); }