/* Crazy Highlights 'n Doodles YOOtheme Pro - marker styling (YOOzeCase)
 * One stylesheet for both render engines. The plugin loads this once via
 * HTMLHelper; the template emits only a <span>. No per-element <style>.
 *
 * Engines:
 *   .yc-chd-flow  flowing: SVG data-URI background (--yc-chd-bg), wraps per line
 *   .yc-chd-mark  marker:  inline-filter look on ::before, shared filter library
 *
 * All selectors are scoped under the yc-chd- prefix; no bare generic classes.
 */

/* ---------- shared ---------- */
.yc-chd {
    /* nothing global; engine classes carry the look */
}
.yc-chd[style*="--yc-chd-text"] {
    color: var(--yc-chd-text);
}
.yc-chd.yc-chd-size-small  { font-size: 0.875em; }
.yc-chd.yc-chd-size-medium { font-size: 1.25em; }
.yc-chd.yc-chd-size-large  { font-size: 1.5em; }
.yc-chd.yc-chd-size-xlarge { font-size: 2em; }
.yc-chd.yc-chd-weight-normal { font-weight: 400; }
.yc-chd.yc-chd-weight-bold   { font-weight: 700; }

/* ---------- flowing engine (default) ---------- */
.yc-chd-flow {
    /* The rough marker shape lives in the data-URI background. We do NOT add a
       solid background-color here: it would fill the displaced (transparent)
       rough edges and flatten the look (regression from v0.16). Degradation is
       still graceful - if a browser cannot apply the SVG filter, the data-URI's
       own <rect> renders as a solid block; the unquoted rawurlencoded data-URI
       (v0.7.0 fix) is what guards against URL-rewriter mangling. */
    background-image: var(--yc-chd-bg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0.05em 0.65em;
    margin: 0 0.05em;
}
.yc-chd-flow.yc-chd-nowrap { white-space: nowrap; }

/* ---------- marker engine ---------- */
.yc-chd-mark {
    position: relative;
    isolation: isolate; /* keep ::before (z-index:-1) above parent backgrounds */
    background-color: var(--yc-chd-color, #fdcc0f);
    margin: 0 0.75em;
    display: inline-block;
    white-space: normal;
}
.yc-chd-mark.yc-chd-nowrap { white-space: nowrap; }
.yc-chd-mark::before {
    content: "";
    background-color: var(--yc-chd-color, #fdcc0f);
    width: calc(100% + 1.4em);
    height: calc(100% + 0.24em);
    position: absolute;
    z-index: -1;
    left: -0.7em;
    top: -0.12em;
    display: block;
}
.yc-chd-mark.yc-chd-classic::before  { filter: url(#yc-chd-classic); }
.yc-chd-mark.yc-chd-wavy::before     { filter: url(#yc-chd-wavy); }
.yc-chd-mark.yc-chd-faded::before    { filter: url(#yc-chd-faded); }
.yc-chd-mark.yc-chd-scribble::before { filter: url(#yc-chd-scribble); }
.yc-chd-mark.yc-chd-glossy::before   { filter: url(#yc-chd-glossy); }
.yc-chd-mark.yc-chd-thick {
    margin: 0 0.95em;
}
.yc-chd-mark.yc-chd-thick::before {
    filter: url(#yc-chd-thick);
    height: calc(100% + 0.5em);
    top: -0.25em;
    width: calc(100% + 1.8em);
    left: -0.9em;
}

/* Fallback: when SVG filters are unsupported, keep a clean rectangle marker
   instead of a broken effect. The span background-color provides it. */
@supports not (filter: url(#yc-chd-classic)) {
    .yc-chd-mark::before { display: none; }
}

/* Responsive scale refinement. The SVG displacement scale itself is baked into
   the filter / data-URI and cannot change per breakpoint, so we keep the rough
   edge proportionate to the text by tightening the overhang, margins and padding
   as the viewport (and usually the font) shrinks. Three breakpoints per the YC
   responsive standard: 1024 / 640 / 420. */
@media (max-width: 1024px) {
    .yc-chd-flow { padding: 0.05em 0.55em; }
    .yc-chd-mark { margin: 0 0.6em; }
    .yc-chd-mark::before { width: calc(100% + 1.1em); left: -0.55em; }
    .yc-chd-mark.yc-chd-thick { margin: 0 0.78em; }
    .yc-chd-mark.yc-chd-thick::before { width: calc(100% + 1.4em); left: -0.7em; }
}
@media (max-width: 640px) {
    /* Swap to the gentler reduced-scale flowing background so the rough edge
       stays proportionate to smaller text (the full-scale data-URI would look
       disproportionately wild on a phone). Falls back to the full background
       when the variant is absent. */
    .yc-chd-flow {
        padding: 0.05em 0.45em;
        background-image: var(--yc-chd-bg-sm, var(--yc-chd-bg));
    }
    .yc-chd-mark { margin: 0 0.5em; }
    .yc-chd-mark::before {
        width: calc(100% + 0.9em);
        height: calc(100% + 0.18em);
        left: -0.45em;
        top: -0.09em;
    }
    .yc-chd-mark.yc-chd-thick { margin: 0 0.62em; }
    .yc-chd-mark.yc-chd-thick::before {
        width: calc(100% + 1.1em);
        height: calc(100% + 0.36em);
        left: -0.55em;
        top: -0.18em;
    }
}
@media (max-width: 420px) {
    .yc-chd-flow { padding: 0.05em 0.38em; }
    .yc-chd-mark { margin: 0 0.4em; }
    .yc-chd-mark::before { width: calc(100% + 0.7em); left: -0.35em; }
    .yc-chd-mark.yc-chd-thick { margin: 0 0.5em; }
    .yc-chd-mark.yc-chd-thick::before { width: calc(100% + 0.9em); left: -0.45em; }
}

/* ---------- Crazy Arrow doodle ---------- */
.yc-chd-arrow {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}
.yc-chd-arrow svg {
    display: block;
    overflow: visible; /* let the sketch displacement spill past the viewBox */
}
.yc-chd-arrow-left   { display: block; text-align: left; }
.yc-chd-arrow-center { display: block; text-align: center; }
.yc-chd-arrow-right  { display: block; text-align: right; }
.yc-chd-arrow-center svg { margin-left: auto; margin-right: auto; }
.yc-chd-arrow-right svg  { margin-left: auto; }

/* ---------- Crazy Underline doodle ---------- */
.yc-chd-underline {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}
.yc-chd-underline svg {
    display: block;
    overflow: visible; /* let the sketch displacement spill past the viewBox */
}
.yc-chd-underline-left   { display: block; text-align: left; }
.yc-chd-underline-center { display: block; text-align: center; }
.yc-chd-underline-right  { display: block; text-align: right; }
.yc-chd-underline-center svg { margin-left: auto; margin-right: auto; }
.yc-chd-underline-right svg  { margin-left: auto; }
.yc-chd-underline-pull-small  { margin-top: -0.3em; }
.yc-chd-underline-pull-medium { margin-top: -0.6em; }
.yc-chd-underline-pull-large  { margin-top: -1em; }

/* ---------- Crazy Circle + Crazy Cross doodles ---------- */
.yc-chd-circle, .yc-chd-cross {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}
.yc-chd-circle svg, .yc-chd-cross svg {
    display: block;
    overflow: visible; /* let the sketch displacement spill past the viewBox */
}
.yc-chd-circle-left,   .yc-chd-cross-left   { display: block; text-align: left; }
.yc-chd-circle-center, .yc-chd-cross-center { display: block; text-align: center; }
.yc-chd-circle-right,  .yc-chd-cross-right  { display: block; text-align: right; }
.yc-chd-circle-center svg, .yc-chd-cross-center svg { margin-left: auto; margin-right: auto; }
.yc-chd-circle-right svg,  .yc-chd-cross-right svg  { margin-left: auto; }

/* ---------- Crazy Handwriting doodle (Caveat, locally hosted, SIL OFL) ---------- */
@font-face { font-family: 'YC Caveat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/caveat-400.woff2') format('woff2'); }
@font-face { font-family: 'YC Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/caveat-600.woff2') format('woff2'); }
@font-face { font-family: 'YC Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/caveat-700.woff2') format('woff2'); }
.yc-chd-hand { font-family: 'YC Caveat', 'Segoe Script', 'Comic Sans MS', cursive; line-height: 1.2; }
.yc-chd-hand-left   { display: block; text-align: left; }
.yc-chd-hand-center { display: block; text-align: center; }
.yc-chd-hand-right  { display: block; text-align: right; }
.yc-chd-hand-text   { display: inline-block; }
/* Gradient handwriting: solid fallback colour by default; the gradient-as-text
   clip only applies where supported, so an unsupported engine or forced-colors
   mode shows readable solid text instead of invisible (transparent) text. */
.yc-chd-hand-grad .yc-chd-hand-text { color: var(--yc-chd-hand-fallback, currentColor); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .yc-chd-hand-grad .yc-chd-hand-text {
        background-image: var(--yc-chd-hand-grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}
@media (forced-colors: active) {
    .yc-chd-hand-grad .yc-chd-hand-text { color: CanvasText; background: none; }
}

/* ---------- Crazy Sticker doodle ---------- */
.yc-chd-sticker { display: inline-block; line-height: 0; vertical-align: middle; }
.yc-chd-sticker svg { display: block; overflow: visible; }
.yc-chd-sticker-left   { display: block; text-align: left; }
.yc-chd-sticker-center { display: block; text-align: center; }
.yc-chd-sticker-right  { display: block; text-align: right; }
.yc-chd-sticker-center svg { margin-left: auto; margin-right: auto; }
.yc-chd-sticker-right svg  { margin-left: auto; }

/* ---------- Crazy Circle: around-text mode ---------- */
.yc-chd-circle-around { position: relative; display: inline-block; padding: 0.05em 0.4em; }
.yc-chd-circle-word { position: relative; z-index: 1; }

/* ---------- Gradient marker-engine highlight ---------- */
.yc-chd-mark.yc-chd-grad-rainbow,
.yc-chd-mark.yc-chd-grad-rainbow::before {
    background-color: transparent;
    background-image: linear-gradient(90deg, #ef4444 0%, #f97316 20%, #facc15 40%, #22c55e 60%, #3b82f6 80%, #a855f7 100%);
}
.yc-chd-mark.yc-chd-grad-sunset,
.yc-chd-mark.yc-chd-grad-sunset::before {
    background-color: transparent;
    background-image: linear-gradient(90deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);
}
.yc-chd-mark.yc-chd-grad-ocean,
.yc-chd-mark.yc-chd-grad-ocean::before {
    background-color: transparent;
    background-image: linear-gradient(90deg, #06b6d4 0%, #3b82f6 50%, #6366f1 100%);
}


/* ---------- Crazy Divider doodle ---------- */
.yc-chd-divider { display: block; line-height: 0; }
.yc-chd-divider svg {
    display: block;
    width: var(--yc-chd-divider-width, 50%);
    height: 40px;
    overflow: visible; /* let the sketch displacement spill past the viewBox */
}
.yc-chd-divider-center svg { margin-left: auto; margin-right: auto; }
.yc-chd-divider-right svg  { margin-left: auto; }
.yc-chd-divider-left svg   { margin-right: auto; }

/* ---------- Crazy Post-it doodle (Caveat, locally hosted, SIL OFL) ---------- */
.yc-chd-postit { display: block; }
.yc-chd-postit-left   { text-align: left; }
.yc-chd-postit-center { text-align: center; }
.yc-chd-postit-right  { text-align: right; }
.yc-chd-postit-note {
    position: relative;
    display: inline-block;
    text-align: left;
    /* Theme colours: the note carries uk-text-* so currentColor is the real theme
       colour; background:currentColor reads it. Readable text lives on the body. */
    background: var(--yc-chd-postit-bg, #fef08a);
    font-family: 'YC Caveat', 'Segoe Script', 'Comic Sans MS', cursive;
    line-height: 1.25;
    padding: 0.7em 1.1em 0.9em;
    min-width: 7em;
    max-width: 22em;
    transform: rotate(var(--yc-chd-postit-tilt, -2deg));
    box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.12);
}
.yc-chd-postit-note::before { /* folded corner (dog-ear) */
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 1.4em solid rgba(0, 0, 0, 0.12);
    border-left: 1.4em solid transparent;
}
.yc-chd-postit-body { position: relative; word-break: break-word; color: var(--yc-chd-postit-text, #1a1a1a); }
.yc-chd-postit-size-small  { font-size: 1.2rem; }
.yc-chd-postit-size-medium { font-size: 1.6rem; }
.yc-chd-postit-size-large  { font-size: 2.1rem; }

/* Crazy Sticker badge text (speech/burst shapes) - HTML overlay, upright on tilt */
.yc-chd-sticker-wrap{position:relative;display:inline-block;line-height:0}
.yc-chd-sticker-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:"YC Caveat",cursive,sans-serif;font-weight:600;line-height:1.05;text-align:center;
    padding:16%;box-sizing:border-box;pointer-events:none;word-break:break-word}

/* Clickable doodle wrapper (Crazy Arrow / Crazy Sticker link) */
.yc-chd-link{display:inline-block;text-decoration:none;color:inherit;cursor:pointer}
.yc-chd-link:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px}

/* ---- Reveal-on-scroll animations (anim.js adds .yc-chd-inview) ----
   No-JS safety: the hidden start-state only applies once anim.js has tagged
   <html> with .yc-chd-js. If the script never runs (disabled, blocked, parse
   error), nothing is hidden and all content stays visible. */
html.yc-chd-js .yc-chd-anim{opacity:0}
.yc-chd-anim.yc-chd-inview{opacity:1}
/* Fade-in: gentle rise + settle */
.yc-chd-anim-fade.yc-chd-inview{animation:yc-chd-fade .6s cubic-bezier(.2,.7,.3,1) both}
@keyframes yc-chd-fade{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
/* Pop-in: scale up with a small overshoot. Good for stickers and post-its. */
.yc-chd-anim-pop.yc-chd-inview{animation:yc-chd-pop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes yc-chd-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
/* Wipe-in: reveal left to right, like the stroke is drawn on. Box+text reveal. */
html.yc-chd-js .yc-chd-anim-wipe{opacity:1;clip-path:inset(0 100% 0 0)}
.yc-chd-anim-wipe.yc-chd-inview{animation:yc-chd-wipe .7s cubic-bezier(.4,0,.2,1) forwards}
@keyframes yc-chd-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* Draw-in: stroke draws on (paths carry pathLength="1"). Box stays visible. */
.yc-chd-anim-draw{opacity:1}
.yc-chd-anim-draw svg path[pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.yc-chd-anim-draw.yc-chd-inview svg path[pathLength]{animation:yc-chd-draw 1s ease forwards}
@keyframes yc-chd-draw{to{stroke-dashoffset:0}}
/* Draw selected on a non-stroke element: behave like fade */
.yc-chd-anim-draw:not(:has(svg path[pathLength])).yc-chd-inview{animation:yc-chd-fade .6s cubic-bezier(.2,.7,.3,1) both}
/* Motion-safety: never animate, never hide content for reduced-motion users */
@media (prefers-reduced-motion: reduce){
    .yc-chd-anim,.yc-chd-anim.yc-chd-inview{opacity:1!important;animation:none!important;transform:none!important}
    html.yc-chd-js .yc-chd-anim-wipe{clip-path:none!important}
    .yc-chd-anim-draw svg path[pathLength]{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
}

/* ---------- Crazy Box & Crazy Callout (hand-drawn frame around text) ---------- */
.yc-chd-frame { display: inline-block; }
.yc-chd-frame-left   { display: block; text-align: left; }
.yc-chd-frame-center { display: block; text-align: center; }
.yc-chd-frame-right  { display: block; text-align: right; }
.yc-chd-frame-inner {
    position: relative;
    display: inline-block;
    padding: 0.45em 0.9em;
    line-height: 1.35;
}
.yc-chd-frame-text { position: relative; z-index: 1; }
.yc-chd-frame-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border: var(--yc-chd-frame-bw, 3px) solid var(--yc-chd-frame-color, #fdcc0f);
    background: var(--yc-chd-frame-fill, transparent);
    border-radius: var(--yc-chd-frame-radius, 3px);
    filter: var(--yc-chd-frame-filter, none);
}
/* Crazy Callout speech-bubble tail */
.yc-chd-frame-tail-left .yc-chd-frame-inner::after,
.yc-chd-frame-tail-center .yc-chd-frame-inner::after,
.yc-chd-frame-tail-right .yc-chd-frame-inner::after {
    content: "";
    position: absolute;
    bottom: -0.5em;
    width: 0.7em; height: 0.7em;
    background: var(--yc-chd-frame-fill, transparent);
    border-right: var(--yc-chd-frame-bw, 3px) solid var(--yc-chd-frame-color, #fdcc0f);
    border-bottom: var(--yc-chd-frame-bw, 3px) solid var(--yc-chd-frame-color, #fdcc0f);
    transform: rotate(45deg);
    filter: var(--yc-chd-frame-filter, none);
    z-index: 0;
}
.yc-chd-frame-tail-left   .yc-chd-frame-inner::after { left: 1.6em; }
.yc-chd-frame-tail-center .yc-chd-frame-inner::after { left: 50%; margin-left: -0.35em; }
.yc-chd-frame-tail-right  .yc-chd-frame-inner::after { right: 1.6em; }

/* ---------- Crazy Image Mask ---------- */
.yc-chd-mask { display: inline-block; max-width: 100%; line-height: 0; }
.yc-chd-mask-left   { display: block; text-align: left; }
.yc-chd-mask-center { display: block; text-align: center; }
.yc-chd-mask-right  { display: block; text-align: right; }
.yc-chd-mask svg { display: inline-block; max-width: 100%; height: auto; overflow: visible; }
.yc-chd-mask-center svg { margin-left: auto; margin-right: auto; }
.yc-chd-mask-right svg  { margin-left: auto; }

/* ---------- Crazy Sparkle (v0.29.1) ---------- */
.yc-chd-sparkle { display: inline-block; line-height: 0; }
.yc-chd-sparkle-left   { display: block; text-align: left; }
.yc-chd-sparkle-center { display: block; text-align: center; }
.yc-chd-sparkle-right  { display: block; text-align: right; }
.yc-chd-sparkle svg { display: inline-block; overflow: visible; }
.yc-chd-sparkle-center svg { margin-left: auto; margin-right: auto; }
.yc-chd-sparkle-right svg  { margin-left: auto; }
.yc-chd-twinkle svg { animation: yc-chd-twinkle 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes yc-chd-twinkle { 0%,100% { opacity: 1; } 50% { opacity: .55; transform: scale(.94); } }

/* ---------- Crazy Quote (v0.29.1) ---------- */
.yc-chd-quote { display: inline-block; line-height: 0; }
.yc-chd-quote svg { display: inline-block; overflow: visible; }
.yc-chd-quote-left   { display: block; text-align: left; }
.yc-chd-quote-center { display: block; text-align: center; }
.yc-chd-quote-right  { display: block; text-align: right; }
.yc-chd-quote-center svg { margin-left: auto; margin-right: auto; }
.yc-chd-quote-right svg  { margin-left: auto; }
.yc-chd-quote-around { display: inline; line-height: 1.35; }
.yc-chd-quote-around .yc-chd-quote-mark { display: inline-block; line-height: 0; }
.yc-chd-quote-around .yc-chd-quote-mark svg { width: 1.15em; height: 0.95em; }
.yc-chd-quote-around .yc-chd-quote-mark-open  { margin-right: 0.12em; vertical-align: 0.08em; }
.yc-chd-quote-around .yc-chd-quote-mark-close { margin-left: 0.12em; vertical-align: -0.3em; }
.yc-chd-quote-around .yc-chd-quote-word { display: inline; }

/* ---------- Crazy Handwriting spark accents (v0.29.1) ---------- */
.yc-chd-hand-hasspark { position: relative; display: inline-block; }
.yc-chd-hand-spark { position: absolute; line-height: 0; pointer-events: none; }
.yc-chd-hand-spark-tl { top: -0.35em; left: -0.55em; }
.yc-chd-hand-spark-tr { top: -0.35em; right: -0.55em; }
.yc-chd-hand-spark-br { bottom: -0.25em; right: -0.4em; }
.yc-chd-hand-spark-bl { bottom: -0.25em; left: -0.4em; }
.yc-chd-hand-spark-r  { top: 50%; right: -1.3em; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
    .yc-chd-twinkle svg { animation: none !important; }
}

/* ---------- Crazy Check (v0.29.1) ---------- */
.yc-chd-check { display: inline-block; line-height: 0; }
.yc-chd-check svg { display: inline-block; overflow: visible; }
.yc-chd-check-left   { display: block; text-align: left; }
.yc-chd-check-center { display: block; text-align: center; }
.yc-chd-check-right  { display: block; text-align: right; }
.yc-chd-check-center svg { margin-left: auto; margin-right: auto; }
.yc-chd-check-right svg  { margin-left: auto; }

/* ---------- Crazy Heart (v0.29.1) ---------- */
.yc-chd-heart { display: inline-block; line-height: 0; }
.yc-chd-heart > span, .yc-chd-heart .yc-chd-link > span { display: inline-block; }
.yc-chd-heart svg { display: inline-block; overflow: visible; }
.yc-chd-heart-left   { display: block; text-align: left; }
.yc-chd-heart-center { display: block; text-align: center; }
.yc-chd-heart-right  { display: block; text-align: right; }
.yc-chd-heart-center svg { margin-left: auto; margin-right: auto; }
.yc-chd-heart-right svg  { margin-left: auto; }

/* ---------- Crazy Hand sign (v0.29.1) ---------- */
.yc-chd-hand-sign { display: inline-block; line-height: 0; }
.yc-chd-hand-sign > span, .yc-chd-hand-sign .yc-chd-link > span { display: inline-block; }
.yc-chd-hand-sign svg { display: inline-block; overflow: visible; }
.yc-chd-hand-sign-left   { display: block; text-align: left; }
.yc-chd-hand-sign-center { display: block; text-align: center; }
.yc-chd-hand-sign-right  { display: block; text-align: right; }
.yc-chd-hand-sign-center svg { margin-left: auto; margin-right: auto; }
.yc-chd-hand-sign-right svg  { margin-left: auto; }

/* ---------- Crazy Speech balloon (v0.29.1) ---------- */
.yc-chd-speech { display: inline-block; line-height: 0; }
.yc-chd-speech-inner { position: relative; display: inline-block; line-height: 0; }
.yc-chd-speech svg { display: inline-block; overflow: visible; }
.yc-chd-speech-label {
    position: absolute; left: 50%; top: 39%; transform: translate(-50%, -50%);
    font-family: 'YC Caveat', 'Segoe Script', 'Comic Sans MS', cursive;
    font-weight: 700; line-height: 1; white-space: nowrap; pointer-events: none;
}
.yc-chd-speech-left   { display: block; text-align: left; }
.yc-chd-speech-center { display: block; text-align: center; }
.yc-chd-speech-right  { display: block; text-align: right; }
.yc-chd-speech-center .yc-chd-speech-inner { margin-left: auto; margin-right: auto; }
.yc-chd-speech-right  .yc-chd-speech-inner { margin-left: auto; }

/* ---------- Crazy Quote Tile (v0.29.1) ---------- */
.yc-chd-qtile { display: block; max-width: 40rem; margin: 0; padding: 1.5rem 1.75rem; border-radius: 14px; line-height: 1.5; }
.yc-chd-qtile-tint { background: var(--yc-chd-qtile-bg, #fef3c7); color: #1f2937; }
.yc-chd-qtile-outline { background: transparent; border: 2px solid var(--yc-chd-qtile-accent, #f59e0b); }
.yc-chd-qtile-mark { display: block; margin-bottom: .25rem; }
.yc-chd-qtile-text { margin: 0; border: 0; padding: 0; font-size: 1.15rem; font-weight: 500; }
.yc-chd-qtile-author { margin-top: .75rem; font-size: .9rem; opacity: .7; }
.yc-chd-qtile-author::before { content: "\2014 \00a0"; }
.yc-chd-qtile-center { margin-left: auto; margin-right: auto; text-align: center; }
.yc-chd-qtile-center .yc-chd-qtile-mark { margin-left: auto; margin-right: auto; }
.yc-chd-qtile-right { margin-left: auto; }
.yc-chd-qtile-link { text-decoration: none; color: inherit; display: block; }

/* ---------- Crazy Games (v0.29.1) ---------- */
.yc-chd-game { display: block; font: inherit; color: inherit; }
.yc-chd-game-left   { text-align: left; }
.yc-chd-game-center { text-align: center; }
.yc-chd-game-right  { text-align: right; }
.yc-chd-game-status { margin-top: .5rem; min-height: 1.3em; font-size: .95rem; opacity: .85; }
.yc-chd-game-btn {
    margin-top: .6rem; padding: .4rem 1rem; border-radius: 9px; cursor: pointer; font: inherit;
    background: transparent; color: inherit; border: 2px solid var(--yc-chd-game-accent, #f97316);
}
.yc-chd-game-btn:hover, .yc-chd-game-btn:focus-visible { background: var(--yc-chd-game-accent, #f97316); color: #fff; }

/* Tic-tac-toe */
.yc-chd-ttt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 240px; max-width: 100%; }
.yc-chd-game-center .yc-chd-ttt-grid { margin-left: auto; margin-right: auto; }
.yc-chd-game-right  .yc-chd-ttt-grid { margin-left: auto; }
.yc-chd-ttt-cell {
    aspect-ratio: 1 / 1; min-height: 70px; font-size: 2.2rem; font-weight: 700; line-height: 1; cursor: pointer;
    background: transparent; color: inherit; border: 2px solid currentColor; border-radius: 12px;
}
.yc-chd-ttt-cell[data-mark="X"] { color: var(--yc-chd-game-accent, #f97316); }
.yc-chd-ttt-cell[data-mark="O"] { color: #64748b; }
.yc-chd-ttt-cell:disabled { cursor: default; }

/* Hangman */
.yc-chd-hm { display: inline-block; }
.yc-chd-hm-figure { color: var(--yc-chd-game-accent, #22c55e); line-height: 0; }
.yc-chd-hm-hint { font-size: .9rem; opacity: .75; margin: .25rem 0; }
.yc-chd-hm-word { font-size: 1.8rem; font-weight: 700; letter-spacing: .12em; margin: .5rem 0; min-height: 1.6em; }
.yc-chd-hm-letter { display: inline-block; min-width: 1ch; border-bottom: 3px solid currentColor; margin: 0 3px; }
.yc-chd-hm-space { border: 0; width: 1ch; }
.yc-chd-hm-keys { display: flex; flex-wrap: wrap; gap: 5px; max-width: 360px; }
.yc-chd-game-center .yc-chd-hm-keys { justify-content: center; margin-left: auto; margin-right: auto; }
.yc-chd-hm-key {
    width: 2em; height: 2em; padding: 0; cursor: pointer; font: inherit; background: transparent; color: inherit;
    border: 1px solid currentColor; border-radius: 7px;
}
.yc-chd-hm-key:hover:not(:disabled), .yc-chd-hm-key:focus-visible { background: var(--yc-chd-game-accent, #22c55e); color: #fff; }
.yc-chd-hm-key:disabled { opacity: .35; cursor: default; }

/* Coin flip */
.yc-chd-coin {
    width: 92px; height: 92px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--yc-chd-game-accent, #f59e0b); color: #1a1a1a; font-weight: 700; text-align: center;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,.12);
}
.yc-chd-coin-face { padding: 4px; font-size: .95rem; }
.yc-chd-coin[data-spin="1"] { animation: yc-chd-coinflip .6s ease; }
@keyframes yc-chd-coinflip {
    0% { transform: scaleX(1); } 25% { transform: scaleX(.08); } 50% { transform: scaleX(1); }
    75% { transform: scaleX(.08); } 100% { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .yc-chd-coin[data-spin] { animation: none !important; }
}