/**
 * Review Mega Header — experimental "comic block" header design for game /
 * boardgame review content. Designed by Mike (via ChatGPT) and wired up as a
 * gated preview (?mega=1) by includes/review-mega-header-preview.php.
 *
 * EVERYTHING is scoped under .wakasm-mega-preview so this file is inert unless
 * the preview wrapper is present. Nothing here affects normal page loads.
 *
 * Color variants are semantic (driven by section meaning, not random):
 *   overview = purple   good = green   bad = orange   final = pink
 *
 * Status: experimental. If approved, fold into the existing
 * REVIEW-H3-AUTOCOLOR system (see ARCHITECTURE/REVIEW-H3-AUTOCOLOR.md) rather
 * than keeping a parallel .review-* namespace alongside .wakasm-section-*.
 */

/* Sharpie-style marker font for the scribbled VHS labels (same woff2 the patron
   sticker system uses). Declared here so it loads only under the mega preview. */
@font-face {
    font-family: 'Permanent Marker';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/permanent-marker-regular.woff2') format('woff2');
    font-display: swap;
}

/* Dark band so the design renders in its intended context regardless of the
   underlying page background. */
.wakasm-mega-preview {
    background: #171717;
    color: #f2f2f2;
    padding: 48px 22px;
    margin: 0 auto;
}

.wakasm-mega-preview p,
.wakasm-mega-preview li {
    font-size: 18px;
    line-height: 1.65;
    color: #f1f1f1;
}

.wakasm-mega-preview img {
    max-width: 100%;
    height: auto;
}

/* ---- Mega title (H2) ----
   NOTE on !important: game-single.css styles review h2s green with
   `color: ... !important` plus a high-specificity background. These rules must
   override that to render the paper block. Everything is scoped under
   .wakasm-mega-preview, so the !important cannot leak to normal pages. */
.wakasm-mega-preview .review-mega-title {
    --accent: #ff8a00;
    --paper: #f4f1e6;
    --ink: #151515;

    position: relative;
    display: inline-block;
    max-width: 980px;
    margin: 4rem 0 3.4rem !important; /* !important: a theme h2 rule was forcing
        the bottom margin to 25px, crowding the body text under the box */
    padding: 0.35em 0.55em 0.42em;
    color: var(--ink) !important;
    background: var(--paper) !important;
    font-family: "Arial Black", Impact, system-ui, sans-serif !important;
    font-size: clamp(1.57rem, 4.08vw, 3.95rem) !important; /* ~15% smaller */
    line-height: 0.88 !important;
    font-weight: 1000 !important;
    letter-spacing: -0.075em !important;
    text-transform: uppercase !important;
    transform: rotate(-1.5deg);
    box-shadow: 8px 8px 0 var(--accent), 15px 15px 0 #000;
    border: 4px solid #000;
    isolation: isolate;
}

.wakasm-mega-preview .review-mega-title span {
    position: relative;
    /* Above the lined texture (1) AND the notebook doodle (2). */
    z-index: 3;
}

.wakasm-mega-preview .review-mega-title::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -18px -24px -14px -18px;
    background: var(--accent);
    clip-path: polygon(
        3% 18%, 16% 5%, 33% 12%, 52% 0, 72% 10%, 94% 4%, 100% 36%,
        93% 58%, 98% 88%, 73% 82%, 56% 100%, 35% 86%, 12% 96%, 0 69%
    );
}

.wakasm-mega-preview .review-mega-title::after {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(120deg, transparent 0 42%, rgba(0, 0, 0, 0.12) 42% 45%, transparent 45%),
        repeating-linear-gradient(-8deg, transparent 0 9px, rgba(0, 0, 0, 0.08) 9px 11px);
    mix-blend-mode: multiply;
}

.wakasm-mega-preview .review-title-good     { --accent: #58d665; }
.wakasm-mega-preview .review-title-bad      { --accent: #ff8a00; }
.wakasm-mega-preview .review-title-overview { --accent: #8c6cff; }
.wakasm-mega-preview .review-title-final    { --accent: #ff4fd8; }

/* Notebook doodle on the good/bad section HEADERS: a faded heart / poop sits on
   the heading's paper, layered ABOVE the lined texture (::after, z-index 1) but
   UNDER the ink text (span, bumped to z-index 3 below) and contained inside the
   box. Injected as <i.wakasm-mega-doodle> by the preview transform. */
.wakasm-mega-preview .wakasm-mega-doodle {
    position: absolute;
    top: 50%;
    right: 2.6rem;
    width: 4.6rem;
    height: 4.6rem;
    transform: translateY(-50%) rotate(-8deg);
    z-index: 2;
    opacity: 0.32;
    pointer-events: none;
}
.wakasm-mega-preview .wakasm-mega-doodle svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* game-single.css sets review h2s to `color: green !important` at specificity
   0,3,1. Both rules carry !important, so the green wins the tie on specificity.
   This self-scoped 0,4,0 selector (wrapper + title class x3) out-specifies it
   without coupling to the theme's container classes, forcing the ink color. */
.wakasm-mega-preview .review-mega-title.review-mega-title.review-mega-title {
    color: var(--ink) !important;
}

/* ---- Point title (H3) ----
   align-items:flex-start so the "!" badge pins to the first line on 2-line
   headings instead of floating in the vertical center looking undersized. */
.wakasm-mega-preview .review-point-title {
    --accent: #ff8a00;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.15rem;
    margin: 2.4rem 0 1rem;
    /* Per-header random pastel: each H3 gets a cycled palette color via --accent
       (deterministic per review, no two adjacent the same — see the seeded
       shuffle in review-mega-header-preview.php). Soften it toward white so it
       reads as a pastel and stays legible on the dark body. */
    color: color-mix(in srgb, var(--accent) 70%, #ffffff) !important;
    font-family: "Arial Black", Impact, system-ui, sans-serif !important;
    font-size: clamp(1.02rem, 1.45vw, 1.32rem) !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
}

.wakasm-mega-preview .review-point-title::before {
    content: "W";
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    /* Full height of a two-line heading (2lh), kept square via aspect-ratio.
       Centered so it reads as full-height next to the text. */
    align-self: center;
    height: 2lh;
    width: auto;
    aspect-ratio: 1 / 1;
    color: #111;
    background: var(--accent);
    font: 1000 1.5rem/1 "Arial Black", Impact, system-ui, sans-serif;
    /* Comic starburst instead of a plain square. */
    clip-path: polygon(
        50% 0%, 61% 16%, 79% 11%, 74% 30%, 95% 32%, 79% 47%,
        100% 60%, 79% 62%, 87% 83%, 66% 76%, 62% 97%, 50% 80%,
        38% 97%, 34% 76%, 13% 83%, 21% 62%, 0% 60%, 21% 47%,
        5% 32%, 26% 30%, 21% 11%, 39% 16%
    );
    transform: rotate(-6deg);
    /* drop-shadow follows the burst outline; box-shadow would shadow a square */
    filter: drop-shadow(2.5px 2.5px 0 #000);
}

.wakasm-mega-preview .review-point-title span {
    display: inline;
    padding: 0.22em 0.4em 0.28em;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 26%, transparent), transparent 88%);
    border-bottom: 3px solid var(--accent);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Pooter mascot badge variant (?mega=1&badge=pooter): round badge that is just
   the logo, sized so its circle touches the accent ring (no starburst). Image
   path is relative to this CSS file (assets/css -> assets/images). */

/* Bottom-align the whole heading row so BOTH the badge and the text share the
   row's bottom edge. Without this the text stays top-aligned and the badge's
   ring never reaches the underline. Scoped to the pooter variant so the "W"
   starburst (which is align-self:center) is unaffected. */
.wakasm-mega-badge-pooter .review-point-title {
    align-items: flex-end;
    gap: 0;
}

.wakasm-mega-badge-pooter .review-point-title::before {
    content: "";
    clip-path: none;
    border-radius: 50%;
    height: 2.3lh;
    /* Bottom-aligned: the circle sits ON the underline (its original spot).
       z-index lifts it above the text span so the span's underline can be
       pulled left to tuck behind the circle and read as touching it. */
    align-self: flex-end;
    position: relative;
    z-index: 2;
    background-color: var(--accent);
    background-repeat: no-repeat;
    background-position: center;
    /* Logo sized down from the edge so the accent ring (the "color outline")
       is clearly visible around the circle. */
    background-size: 76%;
    /* Default = video-game pooter (headset). Board games override below. */
    background-image: url("../images/pooter-gaming-logo.png");
}

/* Pull the text block left so its underline runs back under the circle (which
   sits on top via z-index) and reads as touching it, while padding-left keeps
   the actual words clear of the logo. */
.wakasm-mega-badge-pooter .review-point-title span {
    margin-left: -1.5em;
    padding-left: 1.7em;
}

/* Board-game reviews use the plain pooter logo (glasses + bowtie, no headset,
   no meeple/dice). Lives in uploads, referenced root-relative so it resolves on
   both local and prod regardless of this CSS file's location. */
.wakasm-mega-badge-pooter.wakasm-mega-cpt-boardgames .review-point-title::before {
    background-image: url("/wp-content/uploads/ranking-images/pooter-logo-mobile.png");
}

/* H3 sub-points cycle the 5-color random palette (assigned in PHP), restoring
   the multi-color variety the old autocolor system had. */
.wakasm-mega-preview .review-point-green  { --accent: #58d665; }
.wakasm-mega-preview .review-point-blue   { --accent: #4aa3ff; }
.wakasm-mega-preview .review-point-pink   { --accent: #ff4fd8; }
.wakasm-mega-preview .review-point-purple { --accent: #8c6cff; }
.wakasm-mega-preview .review-point-orange { --accent: #ff8a00; }

/* ============================================================================
   MAIN ARTICLE TITLE — "Mega" treatment
   The review title + attribution are wrapped in <header.wp-title-poster> by the
   gated preview JS (review-mega-header-preview.js), which also injects a dynamic
   <span.wp-title-tag> reading "Early Impressions" or "Review" to match the
   template's existing attribution structure. This block lives OUTSIDE
   .wakasm-mega-preview because the title is printed by the template, not the
   content filter. The classes only exist when the preview JS runs, so these
   rules are inert on normal loads.

   NO container box: the site already wraps everything in .game-single. This is
   just the title text + tag + attribution, sized to fit and sitting as high in
   that container as the template allows. !important beats the theme's heavy
   .review-title styling (incl. its -webkit-box line-clamp); it cannot leak
   (classes are preview-only).
   ============================================================================ */
.wp-title-poster {
    --green: #55b957;
    --pink: #ff4fb8;
    --yellow: #ffbf00;

    position: relative;
    /* Sit as high in the container as possible; only space below. */
    margin: 0 0 1.6rem;
}

/* Crooked rectangular kicker built by the preview JS: white text on a solid
   rectangle reading "<game type> <review kind>", e.g. "BOARD GAME EARLY
   IMPRESSIONS". Game type comes from the WP body class; the color follows the
   template's Early Impressions / Review structure (amber #f59e0b matches the
   theme's .early-impressions-highlight; green for a full review). */
.wp-title-tag {
    display: inline-block;
    /* Plain rectangle, nudged left of the title and dropped down slightly. */
    margin: 0.45rem 0 0.7rem -0.5rem;
    padding: 0.42em 1.15em 0.46em;
    color: #ffffff;
    font: 900 0.9rem/1 "Arial Black", Impact, system-ui, sans-serif;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transform: rotate(-4deg);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
    filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.45));
}

.wp-title-tag.is-early {
    background: #f59e0b;
}

.wp-title-tag.is-review {
    background: var(--green);
}

/* Class doubled (0,3,0) to out-specify the theme's
   `.game-single .game-review-content h2 { color: #4da44b !important }` (0,2,1),
   which otherwise forces the title green. Self-scoped, cannot leak. */
.wp-title-poster .review-title.review-title {
    /* Undo the theme's 3-line -webkit-box clamp + green left-border box. */
    display: block !important;
    -webkit-line-clamp: none !important;
    overflow: visible !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none;
    color: #ffffff !important;
    /* Inherit the site heading font + keep normal letter/line spacing so the
       title tracks exactly like every other page (was cramped Arial Black). */
    font-size: clamp(1.85rem, 3.8vw, 3.1rem) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: normal !important;
    text-transform: uppercase !important;
    text-shadow: 3px 3px 0 #000, 5px 5px 0 var(--green) !important;
    /* Slight tilt so the poster title reads as a hand-set headline. */
    transform: rotate(-1deg);
    transform-origin: left center;
}

/* Game name detected inside the title (set by the preview JS). Distinct color
   ties it to the same name in the attribution line below. A child color always
   wins over the parent's inherited white, so no !important needed here. */
.wp-title-poster .review-title .wp-title-gamename {
    color: #7fb3d5;
}

.wp-title-poster .review-attribution {
    margin: 0.9rem 0 0 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 1.05em !important;
    line-height: 1.4 !important;
    font-style: italic !important;
    /* Push the attribution to the right edge of the title block. */
    text-align: right !important;
}

.wp-title-poster .review-attribution .early-impressions-highlight {
    color: var(--yellow) !important;
    font-weight: 900 !important;
}

.wp-title-poster .review-attribution .game-name-highlight {
    color: var(--pink) !important;
    font-weight: 900 !important;
}

@media (max-width: 600px) {
    .wakasm-mega-preview { padding: 32px 16px; }
    .wakasm-mega-preview .review-mega-title {
        margin-top: 3rem;
        box-shadow: 5px 5px 0 var(--accent), 10px 10px 0 #000;
    }
    .wakasm-mega-preview .review-mega-title::before {
        inset: -12px -14px -10px -12px;
    }
}

/* ============================================================================
   Comments section header — the "Disagree With Me Here" heading printed by
   single-boardgames.php (#comments-section .game-section-heading) sits OUTSIDE
   the .wakasm-mega-preview wrapper, so it's reached via the .wakasm-mega-active
   body class (added only under ?mega=1). Restyles the existing heading in place
   into the "creature block" badge — no new markup, fully gated.
   ============================================================================ */
.wakasm-mega-active #comments-section {
    --accent: #55b957;
    --paper: #f2f2e8;

    margin-top: 2.5rem;
    padding: 22px 20px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.wakasm-mega-active #comments-section .game-section-heading {
    position: relative;
    display: block;
    width: calc(100% - 16px);
    margin: 10px 0 1.4rem 16px;
    padding: 16px 22px 17px 74px;
    color: #111 !important; /* beats game-single.css's green !important on headings */
    background: var(--paper);
    font-family: "Arial Black", Impact, system-ui, sans-serif;
    font-size: clamp(1.22rem, 4vw, 2.1rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    border: 3px solid #000;
    border-radius: 22px 22px 22px 4px;
    box-shadow: 8px 8px 0 var(--accent), 14px 14px 0 #000;
    transform: rotate(-0.5deg);
}

.wakasm-mega-active #comments-section .game-section-heading::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%) rotate(-8deg);
    width: 58px;
    height: 58px;
    /* Pooter mascot badge: accent ring shows around the logo (sized to 76%),
       matching the .wakasm-mega-badge-pooter title circles. Default = video-game
       pooter (headset); board games override below. */
    background-color: var(--accent);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 76%;
    /* F-tier pooter (poop on his head) — fits the combative "disagree" tone, used
       on both game and boardgame review pages. Root-relative so it resolves on
       local and prod regardless of this CSS file's location. */
    background-image: url("/wp-content/uploads/ranking-images/pooter-logo-f-tier.png");
    border: 3px solid #000;
    border-radius: 50%;
    box-shadow: 5px 5px 0 #000;
}

.wakasm-mega-active #comments-section .game-section-heading::after {
    content: "";
    position: absolute;
    left: 48px;
    bottom: -14px;
    width: 24px;
    height: 24px;
    background: var(--paper);
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    transform: rotate(45deg);
}

@media (max-width: 650px) {
    .wakasm-mega-active #comments-section {
        padding: 16px;
    }
    .wakasm-mega-active #comments-section .game-section-heading {
        padding-left: 62px;
        font-size: clamp(1.1rem, 7vw, 1.65rem);
    }
    .wakasm-mega-active #comments-section .game-section-heading::before {
        width: 50px;
        height: 50px;
        font-size: 25px;
    }
}

/* ============================================================================
   Playthroughs / videos section — EXPERIMENTAL "Play Session Archive" header.
   The #videos-section heading is rebuilt into .wakasm-playthrough-archive by
   review-mega-header-preview.js (mega-only). Sits outside .wakasm-mega-preview,
   so reached via the .wakasm-mega-active body class.

   Concept: a shelf with a stack of VHS tapes (EP.01–04) on the left and an old
   CRT TV on the right showing the title in phosphor green. NO outer panel — the
   section is already inside the page's container; it's transparent and only the
   shelf line grounds it. The tape stack and the TV are equal height (the text
   sits as high as the tapes) and both rest on the shelf.
   ============================================================================ */
.wakasm-mega-active .wakasm-playthrough-archive {
    --wpa-paper: #ece4d3;       /* tape label cream */
    --wpa-phosphor: #86ffa6;    /* CRT phosphor green */
    --wpa-shelf-top: #6a513a;   /* shelf wood (lit edge) */
    --wpa-shelf-bot: #2c2016;   /* shelf wood (shadow) */

    position: relative;
    width: 100%;
    margin: 4px 0 22px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    box-sizing: border-box;
}

.wakasm-mega-active .wakasm-playthrough-archive * {
    box-sizing: border-box;
}

/* Shelf line both columns rest on. */
.wakasm-mega-active .wakasm-playthrough-archive::after {
    content: "";
    display: block;
    height: 9px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(180deg, var(--wpa-shelf-top) 0%, var(--wpa-shelf-bot) 60%, #1c140d 100%);
    box-shadow: 0 5px 9px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.wakasm-mega-active .wpa-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* tape stack and TV share height */
    gap: 16px;
    width: 100%;
}

/* ---- VHS tape stack ---- */
.wakasm-mega-active .wpa-stack {
    flex: 0 0 auto;
    width: 198px; /* a touch wider to fit "EP# · NAME" labels */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* tapes pile up from the shelf */
    padding: 0;
}

/* Each tape is viewed from the SPINE (the edge you see when cassettes are
   stacked on a shelf): a black plastic bar, no reels — those are on the flat
   face, not visible here. A cream paper label sticker is inset along it. */
.wakasm-mega-active .wpa-tape {
    --label: #ece4d3; /* cream spine label */
    position: relative;
    width: 100%;
    margin: 0;
    padding: 4px 7px; /* black plastic margin framing the label */
    display: flex;
    align-items: stretch;
    /* black plastic shell with a soft top sheen */
    background:
        linear-gradient(180deg, #353535 0%, #1b1b1b 38%, #0d0d0d 100%);
    border: 2px solid #000;
    border-bottom-width: 1px; /* stacked spines share edges */
}

.wakasm-mega-active .wpa-tape:first-child {
    border-top-width: 2px;
}
.wakasm-mega-active .wpa-tape:last-child {
    border-bottom-width: 2px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45); /* casts onto the shelf */
}

/* The stuck-on paper spine label carrying the EP text. */
.wakasm-mega-active .wpa-tape-label {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 2px 9px;
    color: #1b1b1b;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(0, 0, 0, 0.04) 60%),
        var(--label);
    border: 1px solid rgba(0, 0, 0, 0.28);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    /* Scribbled with a marker. */
    font-family: "Permanent Marker", "Arial", sans-serif;
    font-size: 0.82rem;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #232020;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tilt each scribble a hair differently so they read as hand-written. */
.wakasm-mega-active .wpa-tape:nth-child(1) .wpa-tape-label { transform: rotate(-1.4deg); }
.wakasm-mega-active .wpa-tape:nth-child(2) .wpa-tape-label { transform: rotate(0.8deg); }
.wakasm-mega-active .wpa-tape:nth-child(3) .wpa-tape-label { transform: rotate(-0.6deg); }
.wakasm-mega-active .wpa-tape:nth-child(4) .wpa-tape-label { transform: rotate(1.2deg); }
.wakasm-mega-active .wpa-tape:nth-child(5) .wpa-tape-label { transform: rotate(-1deg); }

/* Subtle stacked-by-hand offsets + alternating label shades. */
.wakasm-mega-active .wpa-tape:nth-child(odd) {
    transform: translateX(2px) rotate(-0.6deg);
}
.wakasm-mega-active .wpa-tape:nth-child(even) {
    --label: #dcd3c0;
    transform: translateX(-1px) rotate(0.5deg);
}

/* ---- CRT television ---- */
.wakasm-mega-active .wpa-main {
    position: relative;
    flex: 1 1 300px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 27px 20px 25px; /* room for the corner OSD readouts */
    overflow: hidden;
    border: 3px solid #1a1a1a;
    border-radius: 18px / 26px; /* CRT bulge */
    background:
        radial-gradient(120% 120% at 50% 50%, rgba(86, 255, 166, 0.10) 0%, rgba(0, 0, 0, 0) 58%),
        radial-gradient(140% 130% at 50% 0%, #15231a 0%, #0a110d 72%);
    box-shadow:
        inset 0 0 42px rgba(0, 0, 0, 0.85),
        inset 0 0 10px rgba(86, 255, 166, 0.12),
        0 2px 0 rgba(255, 255, 255, 0.05);
}

/* Scanlines. */
.wakasm-mega-active .wpa-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.26) 0 1px, transparent 1px 3px);
    opacity: 0.6;
    animation: wpaScanDrift 7s linear infinite;
}
@keyframes wpaScanDrift {
    from { background-position: 0 0; }
    to   { background-position: 0 3px; } /* one scanline period = seamless loop */
}

/* Cinematic letterbox bars + screen glare + vignette. */
.wakasm-mega-active .wpa-main::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.92) 0 6px, transparent 6px),
        linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0 6px, transparent 6px),
        radial-gradient(120% 75% at 50% -12%, rgba(255, 255, 255, 0.10), transparent 55%),
        radial-gradient(130% 130% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.6) 100%);
}

/* Grainy CRT static — a real layer (the ::before/::after slots are taken by the
   scanlines and glare). Rapid background-position jumps read as TV snow. */
.wakasm-mega-active .wpa-static {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.26;
    mix-blend-mode: screen;
    background:
        repeating-radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 3px),
        repeating-radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px);
    background-size: 140px 90px, 120px 70px, 100% 6px, 5px 100%;
    animation: wpaStatic 0.22s steps(3) infinite;
}
@keyframes wpaStatic {
    0%   { background-position: 0 0, 0 0, 0 0, 0 0; opacity: 0.18; }
    20%  { background-position: -14px 9px, 11px -7px, 0 1px, 1px 0; opacity: 0.30; }
    40%  { background-position: 8px -12px, -10px 4px, 0 2px, 2px 0; opacity: 0.22; }
    60%  { background-position: -7px 14px, 6px -10px, 0 3px, 3px 0; opacity: 0.32; }
    80%  { background-position: 12px 5px, -13px 8px, 0 2px, 1px 0; opacity: 0.20; }
    100% { background-position: 0 0, 0 0, 0 0, 0 0; opacity: 0.26; }
}

.wakasm-mega-active .wpa-title {
    position: relative;
    z-index: 2;
}

/* ---- Corner OSD readouts (VCR on-screen display) ---- */
.wakasm-mega-active .wpa-osd {
    position: absolute;
    z-index: 3;
    color: rgba(185, 255, 248, 0.92);
    font-family: "Courier New", ui-monospace, monospace;
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(66, 239, 228, 0.4);
    pointer-events: none;
    white-space: nowrap;
}
.wakasm-mega-active .wpa-osd-tl { left: 14px; top: 11px; }
.wakasm-mega-active .wpa-osd-tr { right: 14px; top: 11px; }
.wakasm-mega-active .wpa-osd-bl { left: 14px; bottom: 12px; }
.wakasm-mega-active .wpa-osd-br { right: 14px; bottom: 12px; }

/* Blinking red record indicator on the NOW PLAYING readout. */
.wakasm-mega-active .wpa-rec {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: #ff5b5b;
    box-shadow: 0 0 8px rgba(255, 92, 87, 0.9);
    vertical-align: middle;
    animation: wpaRecBlink 1.2s steps(1) infinite;
}
@keyframes wpaRecBlink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0.25; }
}

.wakasm-mega-active .wpa-title {
    margin: 0 !important;
    color: var(--wpa-phosphor) !important;
    font-family: "Courier New", ui-monospace, monospace;
    font-size: clamp(1.05rem, 2.4vw, 1.7rem);
    font-weight: 400; /* thin CRT text */
    line-height: 1.04;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center; /* centered VCR title card */
    text-wrap: balance;
}

/* Three-line title card: WAKASM'S (small dim) / GAME (hero, white) / SOLO
   PLAYTHROUGHS (green). Each line keeps the phosphor glow + RGB split. */
.wakasm-mega-active .wpa-line {
    display: block;
}
.wakasm-mega-active .wpa-line-pre {
    color: #b9fff8;
    font-size: 0.7em;
    letter-spacing: 0.24em;
    opacity: 0.88;
    text-shadow: 0 0 6px rgba(66, 239, 228, 0.4);
}
.wakasm-mega-active .wpa-line-post {
    color: #9effbc;
    font-size: 0.78em;
    letter-spacing: 0.12em;
    text-shadow: 0 0 7px rgba(122, 255, 160, 0.45);
}
.wakasm-mega-active .wpa-line-main {
    font-size: 1.12em; /* the game name is the hero line */
    letter-spacing: 0.01em;
}

/* Game name — the bright white hero line with CRT RGB split + glow. */
.wakasm-mega-active .wpa-game {
    color: #ffffff !important;
    background: none;
    padding: 0;
    text-shadow:
        1.5px 0 0 rgba(255, 40, 90, 0.4),
        -1.5px 0 0 rgba(40, 190, 255, 0.4),
        0 0 9px rgba(255, 255, 255, 0.5);
}

@media (max-width: 680px) {
    .wakasm-mega-active .wpa-inner {
        gap: 14px;
    }
    .wakasm-mega-active .wpa-stack {
        flex: 1 1 100%;
        width: auto;
        max-width: 200px;
    }
    .wakasm-mega-active .wpa-main {
        flex: 1 1 100%;
        min-width: 0;
    }
    .wakasm-mega-active .wpa-osd {
        font-size: 0.52rem;
        letter-spacing: 0.12em;
    }
}

/* Respect reduced-motion: kill the scanline drift and record blink. */
@media (prefers-reduced-motion: reduce) {
    .wakasm-mega-active .wpa-main::before,
    .wakasm-mega-active .wpa-static,
    .wakasm-mega-active .wpa-rec {
        animation: none !important;
    }
}

/* ============================================================================
   Board Game Details — vintage wargame hex-map banner. The "Board Game Details"
   heading (#boardgame-details .game-section-heading) is rebuilt by
   review-mega-header-preview.js (buildBoardgameDetailsHeader) into a torn-paper
   banner over a printed hex map. Lives OUTSIDE .wakasm-mega-preview, so it is
   reached via the .wakasm-mega-active body class (present only under ?mega=1).
   ============================================================================ */
.wakasm-mega-active .bgd-header {
    position: relative;
    width: 100%;
    min-height: clamp(155px, 23vw, 245px);
    display: grid;
    place-items: center;
    margin: 1.5rem 0 2rem;
    padding: clamp(20px, 3vw, 34px);
    isolation: isolate;
    filter: drop-shadow(10px 12px 0 rgba(0, 0, 0, 0.62));
}

.wakasm-mega-active .bgd-paper {
    position: absolute;
    inset: 16px 2%;
    z-index: 1;
    overflow: hidden;
    background: #efe2cc;
    border: 3px solid #000;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.10),
        inset 0 -18px 30px rgba(0, 0, 0, 0.14);
    /* Torn paper edge. */
    clip-path: polygon(
        0 18%, 5% 11%, 12% 15%, 18% 9%, 25% 14%, 33% 10%,
        41% 14%, 49% 9%, 57% 13%, 65% 10%, 74% 15%, 83% 9%,
        92% 13%, 98% 10%, 100% 18%,
        98% 38%, 100% 54%, 97% 72%, 100% 88%, 94% 96%,
        86% 91%, 78% 96%, 68% 91%, 59% 96%, 50% 91%, 41% 96%,
        32% 91%, 23% 96%, 14% 91%, 6% 96%, 0 88%,
        2% 70%, 0 53%, 2% 36%
    );
}

.wakasm-mega-active .bgd-paper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(circle, rgba(0, 0, 0, 0.10) 0 1px, transparent 1.4px) 0 0 / 18px 18px,
        linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 30% 72%, rgba(0, 0, 0, 0.10));
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.55;
}

.wakasm-mega-active .bgd-paper .wargame-map {
    position: absolute;
    z-index: 1;
    inset: -28px;
    width: calc(100% + 56px);
    height: calc(100% + 56px);
}

.wakasm-mega-active .bgd-title {
    position: relative;
    z-index: 3;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
    font-family: "Arial Black", Impact, system-ui, sans-serif !important;
    font-size: clamp(2.2rem, 6.9vw, 5.6rem) !important;
    line-height: 0.84 !important;
    letter-spacing: -0.055em !important;
    text-transform: uppercase !important;
    color: #f7edd9 !important; /* beats game-single.css's green !important */
    -webkit-text-stroke: 4px #111;
    paint-order: stroke fill;
    text-shadow:
        5px 5px 0 rgba(0, 0, 0, 0.14),
        1px 1px 0 rgba(255, 255, 255, 0.18);
    transform: rotate(-0.25deg);
    background: none !important;
    border: 0 !important;
}

.wakasm-mega-active .bgd-title span {
    display: block;
    color: #d8685a !important;
    -webkit-text-stroke: 4px #111;
}

@media (max-width: 760px) {
    .wakasm-mega-active .bgd-header {
        min-height: 210px;
        padding: 18px;
    }
    .wakasm-mega-active .bgd-paper .wargame-map {
        inset: -18px -140px;
        width: calc(100% + 280px);
        height: calc(100% + 36px);
    }
    .wakasm-mega-active .bgd-title {
        font-size: clamp(2rem, 11vw, 4.1rem) !important;
        -webkit-text-stroke: 3px #111;
    }
    .wakasm-mega-active .bgd-title span {
        -webkit-text-stroke: 3px #111;
    }
}

/* ============================================================================
   Game Tracker section - corkboard / pinboard banner. The tracker-section
   heading (#tracker-section.tracker-heading, printed by
   includes/game-display-sections/game-tracker.php) is rebuilt by
   review-mega-header-preview.js (buildTrackerBoardHeader) into a pinned
   corkboard whose centre paper carries the tracker name. Decorative panels
   (campaign / win-loss / session / challenge) are placeholder chrome for now.
   Lives OUTSIDE .wakasm-mega-preview, so it is reached via .wakasm-mega-active
   (present only under ?mega=1). All classes namespaced mtb-* and all tokens
   --mtb-* so nothing collides with the theme generic .paper/.badge/--paper.
   ============================================================================ */
.wakasm-mega-active .mtb-board {
    --mtb-wood: #3b2516;
    --mtb-wood2: #6b4327;
    --mtb-cork: #8a6238;
    --mtb-paper: #eadcc0;
    --mtb-paper-main: #e4d3b3;
    --mtb-ink: #101010;
    --mtb-red: #b73a34;
    --mtb-blue2: #a9d1ef;
    --mtb-green: #4f7b47;
    --mtb-gold: #d2a640;
    --mtb-pink: #d88aa7;
    --mtb-pink2: #efb6ca;
    --mtb-yellow: #d9c86b;

    position: relative;
    min-height: clamp(150px, 18vw, 200px);
    overflow: hidden;
    margin: 1.5rem 0 1rem;
    padding: 12px;
    border: 8px solid var(--mtb-wood);
    isolation: isolate;
    box-shadow:
        10px 12px 0 rgba(0, 0, 0, 0.62),
        inset 0 0 0 3px rgba(0, 0, 0, 0.70),
        inset 0 0 0 8px rgba(255, 255, 255, 0.04);
    background:
        radial-gradient(circle, rgba(0, 0, 0, 0.18) 0 1px, transparent 1.5px) 0 0 / 15px 15px,
        radial-gradient(circle, rgba(255, 255, 255, 0.08) 0 1px, transparent 1.5px) 8px 7px / 19px 19px,
        repeating-linear-gradient(27deg, rgba(0, 0, 0, 0.09) 0 2px, transparent 2px 11px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 34%, rgba(0, 0, 0, 0.22)),
        var(--mtb-cork);
}
.wakasm-mega-active .mtb-board *,
.wakasm-mega-active .mtb-board *::before,
.wakasm-mega-active .mtb-board *::after {
    box-sizing: border-box;
}

.wakasm-mega-active .mtb-board::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: 1;
    border: 3px solid rgba(17, 17, 17, 0.78);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), inset 0 0 24px rgba(0, 0, 0, 0.22);
    pointer-events: none;
}
.wakasm-mega-active .mtb-board::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.9;
    background:
        radial-gradient(circle at 8% 24%, rgba(0, 0, 0, 0.20), transparent 16%),
        radial-gradient(circle at 88% 16%, rgba(0, 0, 0, 0.16), transparent 18%),
        radial-gradient(circle at 55% 92%, rgba(0, 0, 0, 0.18), transparent 18%),
        radial-gradient(circle, rgba(255, 255, 255, 0.10) 0 0.8px, transparent 1.2px) 0 0 / 7px 7px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.12));
}

/* Wood frame highlights. */
.wakasm-mega-active .mtb-grain {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: 0.86;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 16px),
        linear-gradient(90deg, var(--mtb-wood), var(--mtb-wood2), var(--mtb-wood));
}
.wakasm-mega-active .mtb-grain-top,
.wakasm-mega-active .mtb-grain-bottom { left: 0; right: 0; height: 10px; }
.wakasm-mega-active .mtb-grain-left,
.wakasm-mega-active .mtb-grain-right { top: 0; bottom: 0; width: 10px; }
.wakasm-mega-active .mtb-grain-top { top: 0; }
.wakasm-mega-active .mtb-grain-bottom { bottom: 0; }
.wakasm-mega-active .mtb-grain-left { left: 0; }
.wakasm-mega-active .mtb-grain-right { right: 0; }

/* Pinned papers. */
.wakasm-mega-active .mtb-paper,
.wakasm-mega-active .mtb-doodle,
.wakasm-mega-active .mtb-ticket,
.wakasm-mega-active .mtb-postit { position: absolute; overflow: visible; }

.wakasm-mega-active .mtb-paper {
    z-index: 10;
    color: var(--mtb-ink);
    border: 2px solid #111;
    box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.55);
    background:
        radial-gradient(circle, rgba(0, 0, 0, 0.09) 0 1px, transparent 1.35px) 0 0 / 14px 14px,
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 15px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 45%, rgba(0, 0, 0, 0.10)),
        var(--mtb-paper);
}
.wakasm-mega-active .mtb-paper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 0 78%, rgba(0, 0, 0, 0.07)),
        radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.22), transparent 22%);
}

.wakasm-mega-active .mtb-paper-title {
    margin: 0 0 5px;
    padding-bottom: 3px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.42);
    font-family: "Courier New", monospace;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #101010;
}

.wakasm-mega-active .mtb-campaign { left: 4.5%; top: 14%; width: 18%; min-height: 32%; padding: 9px; transform: rotate(-3deg); }
.wakasm-mega-active .mtb-wl { right: 4.5%; top: 15%; width: 18%; min-height: 32%; padding: 9px; transform: rotate(3deg); }
.wakasm-mega-active .mtb-main {
    left: 50%; top: 50%; width: max-content; max-width: 40%; min-width: 20%;
    display: grid; place-items: center; padding: 11px 20px;
    transform: translate(-50%, -50%) rotate(-0.7deg); z-index: 12;
    background:
        radial-gradient(circle, rgba(0, 0, 0, 0.12) 0 1px, transparent 1.35px) 0 0 / 15px 15px,
        linear-gradient(135deg, rgba(255, 255, 255, 0.23), transparent 45%, rgba(0, 0, 0, 0.10)),
        var(--mtb-paper-main);
}
/* Red underline now lives on the title text itself (text-decoration), so the
   single decorative swoosh bar is retired. */
.wakasm-mega-active .mtb-main::before { content: none; }
.wakasm-mega-active .mtb-session { left: 8.5%; bottom: 10%; width: 19%; min-height: 22%; padding: 9px; transform: rotate(2deg); }
.wakasm-mega-active .mtb-challenge { right: 8.5%; bottom: 10%; width: 20%; min-height: 22%; padding: 9px; transform: rotate(-2deg); }

/* The tracker name - the real <h2 id="tracker-section"> is moved here.
   !important beats game-single.css green forced colour on .game-section-heading. */
.wakasm-mega-active .mtb-main .mtb-title {
    position: relative; z-index: 2;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    text-align: center;
    color: #111 !important;
    font-family: "Arial Black", Impact, system-ui, sans-serif !important;
    font-size: clamp(1.25rem, 3vw, 2.25rem) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.05em !important;
    text-transform: uppercase !important;
    text-wrap: balance;
    /* Red line under each line of the title, like the words are underlined. The
       1.3 line-height gives each underline its own row so it doesn't run under
       the next line's caps. */
    text-decoration: underline !important;
    text-decoration-color: var(--mtb-red) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 3px !important;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.30);
}

/* Campaign progress nodes. */
.wakasm-mega-active .mtb-progress-row { display: flex; align-items: center; gap: 4px; margin: 7px 0 0; }
.wakasm-mega-active .mtb-node { width: 13px; height: 13px; border: 2px solid #111; border-radius: 50%; background: #ded3b8; }
.wakasm-mega-active .mtb-node.mtb-done { background: var(--mtb-green); }
.wakasm-mega-active .mtb-node.mtb-fail { background: var(--mtb-red); }
.wakasm-mega-active .mtb-dash { flex: 1; border-top: 2px dashed #111; opacity: 0.75; }

/* Win / loss tally. */
.wakasm-mega-active .mtb-tally {
    display: grid; grid-template-columns: 38px 1fr; gap: 4px 7px; align-items: center;
    font-family: "Courier New", monospace; font-size: 11px; font-weight: 900;
}
.wakasm-mega-active .mtb-tally b { color: var(--mtb-green); }
.wakasm-mega-active .mtb-tally .mtb-loss { color: var(--mtb-red); }

/* Session log mini table. */
.wakasm-mega-active .mtb-mini-table {
    width: 100%; border-collapse: collapse; font-family: "Courier New", monospace;
    font-size: 10px; font-weight: 800;
}
.wakasm-mega-active .mtb-mini-table td { padding: 2px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.25); }
.wakasm-mega-active .mtb-mini-table td:last-child { text-align: right; }
.wakasm-mega-active .mtb-win { color: var(--mtb-green); }
.wakasm-mega-active .mtb-loss { color: var(--mtb-red); }

/* Challenge badges. */
.wakasm-mega-active .mtb-badges { display: flex; gap: 6px; margin-top: 7px; }
.wakasm-mega-active .mtb-badge {
    width: 22px; height: 22px; border: 2px solid #111; border-radius: 50%;
    background: #ded3b8; box-shadow: 2px 2px 0 #111;
}
.wakasm-mega-active .mtb-badge.mtb-done { background: var(--mtb-green); }
.wakasm-mega-active .mtb-badge.mtb-fail { background: var(--mtb-red); }

/* Scribbled doodle note. */
.wakasm-mega-active .mtb-doodle {
    z-index: 11; width: 82px; min-height: 46px; padding: 7px 8px;
    border: 2px solid rgba(0, 0, 0, 0.45); box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.42);
    color: #111; font-family: "Comic Sans MS", "Segoe Print", cursive; font-size: 12px; line-height: 1.05;
}
.wakasm-mega-active .mtb-objective { left: 24%; top: 6.5%; background: var(--mtb-yellow); transform: rotate(5deg); }
.wakasm-mega-active .mtb-objective::after {
    content: "\27A4"; display: inline-block; margin-left: 5px; color: var(--mtb-red);
    font-family: Arial, sans-serif; font-weight: 900;
}

/* "next?" ticket. Sits in the empty centre-bottom band, clear of the
   challenge-tracker paper on the right. */
.wakasm-mega-active .mtb-ticket {
    z-index: 11; left: 46%; bottom: 3%; width: 84px; height: 34px; display: grid; place-items: center;
    border: 2px solid #111; box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.44);
    color: #111; font-family: "Arial Black", Impact, sans-serif; font-size: 12px; text-transform: uppercase;
    transform: rotate(5deg);
    background:
        radial-gradient(circle at 0 50%, transparent 0 7px, var(--mtb-pink) 7.5px),
        radial-gradient(circle at 100% 50%, transparent 0 7px, var(--mtb-pink) 7.5px),
        var(--mtb-pink);
}

/* Star sticker. */
.wakasm-mega-active .mtb-sticker {
    position: absolute; z-index: 11; width: 30px; height: 30px; border: 2px solid #111;
    box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.36);
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), transparent 24%),
        #f0d16d;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 71%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.wakasm-mega-active .mtb-s1 { left: 30.5%; bottom: 10.2%; transform: rotate(-8deg); }

/* Hand-drawn post-its (bunny + heart). */
.wakasm-mega-active .mtb-postit {
    z-index: 26;
    border: 2px solid rgba(0, 0, 0, 0.35);
    box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.35);
}
.wakasm-mega-active .mtb-postit::before {
    content: "";
    position: absolute;
    top: -7px; left: 50%;
    transform: translateX(-50%) rotate(4deg);
    width: 30px; height: 12px;
    background: rgba(216, 192, 140, 0.80);
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.15);
}
.wakasm-mega-active .mtb-bunny {
    right: 22%; top: 5%; width: 74px; height: 74px; transform: rotate(-7deg);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.20), transparent 45%, rgba(0, 0, 0, 0.05)),
        radial-gradient(circle, rgba(255, 255, 255, 0.12) 0 1px, transparent 1.2px) 0 0 / 11px 11px,
        linear-gradient(180deg, var(--mtb-pink2), var(--mtb-pink));
}
.wakasm-mega-active .mtb-bunny-svg,
.wakasm-mega-active .mtb-heart-svg {
    position: absolute; inset: 10px;
    width: calc(100% - 20px); height: calc(100% - 20px);
}
.wakasm-mega-active .mtb-bunny-svg * {
    stroke: #5b5558; stroke-width: 2.8; fill: none;
    stroke-linecap: round; stroke-linejoin: round; opacity: 0.9;
}
.wakasm-mega-active .mtb-tiny-heart {
    position: absolute; right: 8px; bottom: 6px;
    font-size: 12px; color: #6e5962; opacity: 0.8;
    font-family: "Comic Sans MS", "Segoe Print", cursive;
}
.wakasm-mega-active .mtb-heart {
    left: 2.5%; bottom: 6%; width: 60px; height: 60px; transform: rotate(6deg);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.20), transparent 45%, rgba(0, 0, 0, 0.05)),
        radial-gradient(circle, rgba(255, 255, 255, 0.12) 0 1px, transparent 1.2px) 0 0 / 11px 11px,
        linear-gradient(180deg, #bfe3f8, var(--mtb-blue2));
}
.wakasm-mega-active .mtb-heart::before { transform: translateX(-50%) rotate(-6deg); width: 28px; }
.wakasm-mega-active .mtb-heart-svg { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
.wakasm-mega-active .mtb-heart-svg path {
    fill: none; stroke: #587188; stroke-width: 5;
    stroke-linecap: round; stroke-linejoin: round; opacity: 0.95;
}

/* Push pins. */
.wakasm-mega-active .mtb-pin {
    position: absolute; width: 12px; height: 12px; border-radius: 50%; z-index: 20;
    border: 2px solid #4d0f0d;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.48), 0 0 0 2px rgba(0, 0, 0, 0.10);
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.45), transparent 26%),
        #b5231f;
}
.wakasm-mega-active .mtb-pin.mtb-blue {
    border-color: #10304a;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.45), transparent 26%),
        #255c83;
}
.wakasm-mega-active .mtb-pin.mtb-gold {
    border-color: #6c4a0d;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.45), transparent 26%),
        var(--mtb-gold);
}
.wakasm-mega-active .mtb-paper > .mtb-pin.mtb-tl { left: -6px; top: -6px; }
.wakasm-mega-active .mtb-paper > .mtb-pin.mtb-tr { right: -6px; top: -6px; }
.wakasm-mega-active .mtb-paper > .mtb-pin.mtb-bl { left: -6px; bottom: -6px; }
.wakasm-mega-active .mtb-paper > .mtb-pin.mtb-br { right: -6px; bottom: -6px; }

/* Tape strips on doodle + ticket. */
.wakasm-mega-active .mtb-doodle > .mtb-tape-top,
.wakasm-mega-active .mtb-ticket > .mtb-tape-top {
    position: absolute;
    top: -7px; left: 50%; width: 42px; height: 14px;
    transform: translateX(-50%) rotate(-4deg);
    background: rgba(211, 187, 137, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.18);
    z-index: 14;
}
.wakasm-mega-active .mtb-ticket > .mtb-tape-top { width: 46px; transform: translateX(-50%) rotate(3deg); }

/* The original .tracker-header-row keeps the "Open Full View" button; centre it
   under the board now that its heading has moved into the corkboard. */
.wakasm-mega-active .tracker-header-row { justify-content: center; }

@media (max-width: 840px) {
    .wakasm-mega-active .mtb-board { min-height: 290px; }
    .wakasm-mega-active .mtb-campaign { left: 3%; top: 7%; width: 34%; }
    .wakasm-mega-active .mtb-wl { right: 3%; top: 7%; width: 34%; }
    .wakasm-mega-active .mtb-main { left: 50%; top: 50%; width: max-content; max-width: 80%; min-width: 40%; }
    .wakasm-mega-active .mtb-session { left: 5%; bottom: 6%; width: 36%; }
    .wakasm-mega-active .mtb-challenge { right: 5%; bottom: 6%; width: 38%; }
    .wakasm-mega-active .mtb-bunny {
        display: block; left: 50%; right: auto; top: 6%; width: 56px; height: 56px;
        transform: translateX(-50%) rotate(-7deg);
    }
    .wakasm-mega-active .mtb-heart {
        display: block; left: 4%; right: auto; bottom: 8%; width: 48px; height: 48px;
        transform: rotate(5deg);
    }
    .wakasm-mega-active .mtb-doodle,
    .wakasm-mega-active .mtb-ticket,
    .wakasm-mega-active .mtb-sticker { display: none; }
}

@media (max-width: 540px) {
    .wakasm-mega-active .mtb-board { min-height: 372px; padding: 10px; }
    .wakasm-mega-active .mtb-main { left: 50%; top: 50%; width: max-content; max-width: 88%; min-width: 60%; }
    .wakasm-mega-active .mtb-campaign,
    .wakasm-mega-active .mtb-wl,
    .wakasm-mega-active .mtb-session,
    .wakasm-mega-active .mtb-challenge { width: 43%; padding: 8px; }
    .wakasm-mega-active .mtb-paper-title { font-size: 9px; }
    .wakasm-mega-active .mtb-mini-table,
    .wakasm-mega-active .mtb-tally { font-size: 9px; }
    .wakasm-mega-active .mtb-main .mtb-title { font-size: clamp(1.4rem, 11vw, 2.6rem) !important; }
    .wakasm-mega-active .mtb-badge { width: 19px; height: 19px; }
    .wakasm-mega-active .mtb-bunny { top: 7%; width: 48px; height: 48px; }
    .wakasm-mega-active .mtb-heart { left: 4%; right: auto; bottom: 7%; width: 42px; height: 42px; }
}