/* ============================================================================
 * The Creator Roll - public page (/you-made-this-i-played-it/) and OBS lower third
 * (/obs-creator-roll/). One renderer, one namespace: .creator-roll, with
 * --page and --obs modifiers. Page uses the Standard Page Design pattern.
 *
 * House style: NexaRustSlab caps with hard black drop shadows (as the OBS
 * support card), Press Start 2P pixel labels, black-bordered cards with an
 * offset shadow, rotated sticker badges, Permanent Marker for the scrawl.
 * ============================================================================ */

@font-face { font-family: 'NexaRustSlab'; src: url('../fonts/NexaRustSlab-Trial-Black3.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Press Start 2P'; src: url('../fonts/press-start-2p-regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Bangers'; src: url('../fonts/bangers-regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Permanent Marker'; src: url('../fonts/permanent-marker-regular.woff2') format('woff2'); font-display: swap; }

/* Page chrome: full width, no Genesis title */
body.page-template-page-creator-roll .site-inner,
body.page-template-page-creator-roll .content-sidebar-wrap,
body.page-template-page-creator-roll .content,
body.page-template-page-creator-roll .entry,
body.page-template-page-creator-roll .entry-content {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
body.page-template-page-creator-roll .entry-header { display: none; }

.creator-roll {
    --cr-green: var(--wakasm-green, #4da44b);
    --cr-gold: var(--wakasm-yellow, #ffc107);
    --cr-bg: var(--wakasm-dark, #1a1a1a);
    --cr-card: var(--wakasm-dark-soft, #2a2a2a);
    --cr-text: var(--wakasm-light, #e0e0e0);
    --cr-soft: var(--wakasm-gray-light, #b0b0b0);
    --cr-slab: 'NexaRustSlab', 'NextRust Slab', Impact, sans-serif;
    --cr-pixel: 'Press Start 2P', monospace;
    --cr-shadow: 4px 4px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000;
    box-sizing: border-box;
    color: var(--cr-text);
    line-height: 1.5;
}
.creator-roll *, .creator-roll *::before, .creator-roll *::after { box-sizing: border-box; }
.creator-roll a { color: var(--cr-green); }

/* ---------- Standard Page Design: black, wavy sides, green torn top/bottom ---------- */
.creator-roll--page {
    position: relative;
    background: var(--cr-bg);
    padding: 70px clamp(16px, 4vw, 70px) 90px;
    clip-path: polygon(
        0% 0%, 100% 0%,
        98% 5%, 99% 10%, 97% 15%, 100% 20%, 98% 25%, 99% 30%, 97% 35%, 100% 40%,
        98% 45%, 99% 50%, 97% 55%, 100% 60%, 98% 65%, 99% 70%, 97% 75%, 100% 80%,
        98% 85%, 99% 90%, 97% 95%,
        100% 100%, 0% 100%,
        2% 95%, 1% 90%, 3% 85%, 0% 80%, 2% 75%, 1% 70%, 3% 65%, 0% 60%,
        2% 55%, 1% 50%, 3% 45%, 0% 40%, 2% 35%, 1% 30%, 3% 25%, 0% 20%,
        2% 15%, 1% 10%, 3% 5%
    );
}
.creator-roll--page::before,
.creator-roll--page::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 20px;
    background: var(--cr-green);
    z-index: 1;
}
.creator-roll--page::before {
    top: 0;
    clip-path: polygon(0% 0%, 10% 80%, 20% 60%, 30% 90%, 40% 50%, 50% 85%,
                       60% 40%, 70% 75%, 80% 55%, 90% 80%, 100% 0%, 100% 0%, 0% 0%);
}
.creator-roll--page::after {
    bottom: 0;
    clip-path: polygon(0% 100%, 10% 20%, 20% 40%, 30% 10%, 40% 50%, 50% 15%,
                       60% 60%, 70% 25%, 80% 45%, 90% 20%, 100% 100%, 100% 100%, 0% 100%);
}
.creator-roll--page > * { max-width: 1600px; margin-left: auto; margin-right: auto; }

/* ---------- type ---------- */
.creator-roll__title {
    margin: 14px 0 10px;
    font-family: var(--cr-slab);
    font-weight: 400;
    line-height: .95;
    text-transform: uppercase;
    color: #fff;
    text-shadow: var(--cr-shadow);
}
.creator-roll__title span { color: var(--cr-green); }
/* ---------- the numbers: a scoreboard, not tiles ---------- */
.creator-roll__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 10px 46px;
    text-align: center;
}
.creator-roll__stat { position: relative; min-width: 150px; }
.creator-roll__number {
    display: block;
    font-family: var(--cr-slab);
    font-size: clamp(48px, 6vw, 84px);
    line-height: 1;
    color: #fff;
    text-shadow: var(--cr-shadow);
}
.creator-roll__label {
    display: block;
    margin-top: 10px;
    font-family: var(--cr-pixel);
    font-size: 10px;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--cr-soft);
}
/* the money is a price sticker slapped on the board (Bangers: the trial slab has no $ glyph) */
.creator-roll__stat--money .creator-roll__number {
    display: inline-block;
    font-family: 'Bangers', Impact, sans-serif;
    letter-spacing: 2px;
    padding: 6px 16px 2px;
    background: var(--cr-gold);
    color: #111;
    text-shadow: none;
    border: 4px solid #000;
    box-shadow: 5px 6px 0 rgba(0, 0, 0, .72);
    transform: rotate(-4deg);
}
.creator-roll__fine { display: block; margin-top: 8px; font-size: 13px; color: var(--cr-soft); }

/* the joke: a marker scrawl under the board */
.creator-roll__joke {
    max-width: 760px;
    margin: 34px auto 0;
    font-family: 'Permanent Marker', cursive;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.2;
    text-align: center;
    color: var(--cr-gold);
    text-wrap: balance;
    transform: rotate(-2deg);
    text-shadow: 2px 2px 0 #000;
}

/* ---------- page layout: hero, intro + empty slots grid, numbers, invite, Patreon ---------- */
.creator-roll__hero { margin-bottom: 50px; }
.creator-roll--page .creator-roll__title { margin: 0; font-size: clamp(44px, 8.2vw, 140px); line-height: .9; }
/* three small crooked step boxes, top-right of the callout grid above slots 01 and 02 */
.creator-roll__steps { grid-column: span 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.creator-roll__step { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 100%; padding: 12px 14px; border: 3px solid #000; box-shadow: 5px 5px 0 rgba(0, 0, 0, .75); font-family: var(--cr-slab); font-size: 14px; line-height: 1.15; text-transform: uppercase; color: #111; }
.creator-roll__step b { font-weight: 400; font-size: 30px; line-height: 1; }
.creator-roll__step--green { background: var(--cr-green); transform: rotate(-1.5deg); }
.creator-roll__step--gold { background: var(--cr-gold); transform: rotate(1deg); }
.creator-roll__step--pink { background: var(--wakasm-pink-accent, #e91e90); color: #fff; text-shadow: 2px 2px 0 #000; transform: rotate(-1deg); }
.creator-roll__lead { margin: 0 0 22px; max-width: 600px; font-size: 22px; color: var(--cr-soft); }
.creator-roll--page .creator-roll__joke { margin: 0; max-width: 600px; text-align: left; font-size: 24px; line-height: 1.3; transform: rotate(-2deg); text-shadow: none; }

.creator-roll__subscribe { display: inline-block; margin-top: 30px; padding: 13px 18px 11px; background: var(--cr-green); color: #111; border: 3px solid #000; box-shadow: 4px 4px 0 rgba(0, 0, 0, .75); font-family: var(--cr-slab); font-size: 17px; text-transform: uppercase; text-decoration: none; }
.creator-roll--page a.creator-roll__subscribe { color: #111; }
.creator-roll--page a.creator-roll__subscribe:hover { background: var(--cr-gold); }

/* one 4-column grid: the intro spans the top-left 2x3, slots fill around it and run on full width */
.creator-roll__callout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; align-items: center; }
.creator-roll__words { grid-column: span 2; grid-row: span 3; padding-right: 30px; }
.creator-roll__slots { display: contents; list-style: none; }
.creator-roll__slot { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 20px; align-items: center; }
.creator-roll__slot-art { grid-row: 1 / 3; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border: 3px dashed var(--cr-green); background: #222; box-shadow: 5px 5px 0 rgba(0, 0, 0, .75); transform: rotate(-3deg); }
.creator-roll__slot-art img { width: 100%; height: 100%; object-fit: cover; }
.creator-roll__slot-num { font-family: var(--cr-slab); font-size: 30px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--cr-green); }
.creator-roll__slot-lines i { display: block; height: 14px; background: #2c2c2c; }
.creator-roll__slot-lines i + i { width: 60%; margin-top: 8px; height: 10px; }
.creator-roll__slot-label { font-family: var(--cr-pixel); font-size: 9px; color: var(--cr-soft); text-transform: uppercase; }
.creator-roll__slot.is-next .creator-roll__slot-art { border-color: var(--cr-gold); }
.creator-roll__slot.is-next .creator-roll__slot-num { -webkit-text-stroke-color: var(--cr-gold); }
.creator-roll__slot.is-next .creator-roll__slot-label { color: var(--cr-gold); }
.creator-roll__slot.is-filled .creator-roll__slot-art { border: 3px solid #000; }
.creator-roll__slot-name { font-family: var(--cr-slab); font-weight: 400; font-size: 22px; line-height: 1.05; text-transform: uppercase; color: #fff; }
.creator-roll__slot-name a { color: #fff; text-decoration: none; }
.creator-roll__slot-name a:hover { color: var(--cr-green); }
.creator-roll__slot-games { font-size: 14px; color: var(--cr-soft); }

.creator-roll--page .creator-roll__stats { margin-top: 120px; }

/* the invitation: a small, warm band */
.creator-roll__invite { max-width: 980px; margin: 160px auto 0; padding: 54px 50px; background: var(--cr-gold); color: #111; text-align: center; border: 4px solid #000; box-shadow: 10px 10px 0 rgba(0, 0, 0, .75); transform: rotate(-.6deg); }
.creator-roll__invite-title { margin: 0 0 14px; font-family: var(--cr-slab); font-weight: 400; font-size: clamp(34px, 4vw, 58px); line-height: .95; text-transform: uppercase; }
.creator-roll__invite p { margin: 0 auto; max-width: 620px; font-size: 20px; }
.creator-roll__invite .creator-roll__honest { margin-top: 22px; font-family: 'Permanent Marker', cursive; font-size: 15px; }

.creator-roll__patreon { max-width: 760px; margin: 90px auto 0; padding: 30px 40px; background: var(--wakasm-pink-accent, #e91e90); color: #fff; text-align: center; border: 4px solid #000; box-shadow: 8px 8px 0 rgba(0, 0, 0, .75); transform: rotate(.8deg); font-family: var(--cr-slab); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2; text-transform: uppercase; text-shadow: 2px 2px 0 #000; }
.creator-roll--page .creator-roll__patreon a { color: var(--cr-gold); }
.creator-roll--page .creator-roll__patreon a:hover { color: #fff; }

@media (max-width: 1100px) {
    .creator-roll__callout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .creator-roll__words { grid-row: auto; padding-right: 0; }
}
@media (max-width: 900px) {
    .creator-roll__stats { gap: 24px 30px; }
}
@media (max-width: 600px) {
    .creator-roll__callout { grid-template-columns: 1fr; gap: 28px; }
    .creator-roll__words { grid-column: auto; }
    .creator-roll__steps { grid-column: auto; gap: 12px; }
    .creator-roll--page .creator-roll__stats { margin-top: 80px; }
    .creator-roll__invite { margin-top: 100px; padding: 36px 20px; }
    .creator-roll__patreon { margin-top: 60px; padding: 24px 20px; }
}

/* ---------- OBS lower third: 1920x1080 transparent, one bar along the bottom ---------- */
html:has(body.creator-roll-obs-body), body.creator-roll-obs-body { margin: 0; background: transparent; overflow: hidden; font-family: system-ui, 'Segoe UI', Arial, sans-serif; }
.creator-roll--obs { position: relative; width: 1920px; height: 1080px; }
.creator-roll__bar { position: absolute; left: 60px; right: 60px; bottom: 50px; height: 250px; display: grid; grid-template-columns: 620px minmax(0, 1fr);
    background: var(--cr-bg); border: 4px solid #000; box-shadow: 8px 9px 0 rgba(0, 0, 0, .72); }
/* green torn top edge, like the site's page pattern */
.creator-roll__bar::before { content: ''; position: absolute; top: -18px; left: 0; width: 100%; height: 20px; background: var(--cr-green);
    clip-path: polygon(0% 100%, 10% 20%, 20% 40%, 30% 10%, 40% 50%, 50% 15%, 60% 60%, 70% 25%, 80% 45%, 90% 20%, 100% 100%); }

/* left: four messages take turns, 5s each */
.creator-roll__msgs { position: relative; border-right: 4px solid #000; overflow: hidden; }
.creator-roll__msg { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 20px 34px; opacity: 0; animation: creator-roll-turn 20s infinite; }
.creator-roll__msg:nth-child(2) { animation-delay: 5s; }
.creator-roll__msg:nth-child(3) { animation-delay: 10s; }
.creator-roll__msg:nth-child(4) { animation-delay: 15s; }
@keyframes creator-roll-turn {
    0% { opacity: 0; transform: translateY(24px); }
    4%, 22% { opacity: 1; transform: none; }
    26%, 100% { opacity: 0; transform: translateY(-24px); }
}
.creator-roll--obs .creator-roll__title { margin: 0; font-size: 54px; line-height: .92; }
.creator-roll--obs .creator-roll__joke { margin: 0; max-width: none; text-align: left; font-size: 34px; transform: rotate(-1.5deg); }
.creator-roll--obs .creator-roll__subscribe { margin-top: 22px; padding: 9px 14px 7px; font-size: 20px; }
.creator-roll--obs .creator-roll__invite-title { margin: 0 0 12px; font-family: var(--cr-slab); font-weight: 400; font-size: 46px; line-height: 1; text-transform: uppercase; color: #fff; text-shadow: 3px 3px 0 #000; }
.creator-roll--obs .creator-roll__invite-text { margin: 0; font-size: 22px; line-height: 1.35; color: var(--cr-soft); }
.creator-roll--obs .creator-roll__honest { margin: 0 0 14px; font-family: 'Permanent Marker', cursive; font-size: 26px; color: var(--cr-gold); }
.creator-roll__url { margin: 0 0 14px; font-family: var(--cr-pixel); font-size: 15px; color: var(--cr-green); }
.creator-roll--obs .creator-roll__stats { justify-content: flex-start; flex-wrap: nowrap; gap: 40px; text-align: left; }
.creator-roll--obs .creator-roll__stat { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.creator-roll--obs .creator-roll__number { font-size: 26px; text-shadow: 2px 2px 0 #000; }
.creator-roll--obs .creator-roll__label { margin: 0; font-size: 11px; }

/* right: the slot strip slides left forever; the list is in there twice so -50% lands on the seam */
.creator-roll__strip { position: relative; overflow: hidden; display: flex; align-items: center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.creator-roll--obs .creator-roll__slots { display: flex; gap: 44px; width: max-content; margin: 0; padding: 0 22px; animation: creator-roll-slide 40s linear infinite; }
@keyframes creator-roll-slide { to { transform: translateX(-50%); } }
.creator-roll--obs .creator-roll__slot { grid-template-columns: none; grid-template-rows: none; justify-items: center; gap: 14px; width: 150px; text-align: center; }
.creator-roll--obs .creator-roll__slot-art { grid-row: auto; width: 140px; }
.creator-roll--obs .creator-roll__slot:nth-child(even) .creator-roll__slot-art { transform: rotate(2deg); }
.creator-roll--obs .creator-roll__slot-num { font-size: 46px; }
.creator-roll--obs .creator-roll__slot-label,
.creator-roll--obs .creator-roll__slot-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--cr-pixel); font-size: 11px; }
.creator-roll--obs .creator-roll__slot-lines,
.creator-roll--obs .creator-roll__slot-games { display: none; }

/* the three step boxes sit on the bar's top edge, half overlapping it */
.creator-roll--obs .creator-roll__steps { position: absolute; z-index: 2; right: 50px; bottom: calc(100% - 26px); display: flex; align-items: flex-end; gap: 22px; }
.creator-roll--obs .creator-roll__step { flex-direction: row; align-items: center; gap: 14px; min-height: 0; padding: 12px 18px; border-width: 4px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .75); font-size: 20px; line-height: 1.1; }
.creator-roll--obs .creator-roll__step b { font-size: 42px; }
.creator-roll--obs .creator-roll__step--green { transform: rotate(-2deg); }
.creator-roll--obs .creator-roll__step--gold { transform: rotate(1.5deg); }
@media (prefers-reduced-motion: reduce) {
    .creator-roll__msg { animation: none; }
    .creator-roll__msg:first-child { opacity: 1; }
    .creator-roll--obs .creator-roll__slots { animation: none; }
}