/* ========================================
   N64 GAMES SKIN
   Leans into two specific N64 platformers rather than the console itself.
   Both Banjo and Conker wear blue overalls, so blue carries the primary/
   interactive color; red nods to Kazooie's feathers and Conker's fur; gold
   stays for Banjo-Kazooie's collectible notes/honeycombs; warm wood-brown
   surfaces nod to Click Clock Wood's cabin-and-log aesthetic. Overrides the
   shared custom properties defined per-skin in assets/css/skin-fallout.css /
   inc/theme-skins.php.
   Selectors include the .login variant explicitly so this file wins on
   specificity regardless of stylesheet print order.
   ======================================== */

/* Personal-use license (Shareware, Non-Commercial) - see assets/fonts/ */
@font-face {
    font-family: 'Typeface Mario 64';
    src: url('../fonts/typeface-mario-64.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body.dwh-skin-n64,
body.login.dwh-skin-n64 {
    --dwh-background: #1a3d26;
    --dwh-surface: #4a3524;
    --dwh-surface-hover: #5c4530;
    --dwh-text: #fff4d6;
    --dwh-text-secondary: #f0d890;
    --dwh-text-muted: #c9b896;
    --dwh-primary: #4a90d9;
    --dwh-primary-hover: #6ba8e8;
    --dwh-border: #e6342e;
    --dwh-border-muted: #7a5230;
    --dwh-error: #e6342e;
    --dwh-success: #6ab04c;
    --dwh-warning: #ffc72c;

    /* A playful layered "pop" shadow instead of a neon glow - blue for
       everyday UI, a red+blue two-tone pop for the big title text */
    --dwh-glow: 2px 2px 0 rgba(36, 86, 201, 0.5);
    --dwh-glow-strong: 3px 3px 0 #e6342e, -2px -2px 0 #4a90d9;
    --dwh-form-shadow: 0 0 24px rgba(74, 144, 217, 0.3), inset 0 0 20px rgba(230, 52, 46, 0.08);

    --dwh-font-primary: 'Baloo 2', 'Comic Sans MS', sans-serif;
    --dwh-font-heading: 'Typeface Mario 64', 'Luckiest Guy', 'Baloo 2', sans-serif;

    --dwh-font-size-base: 16px;
    --dwh-font-size-sm: 14px;
    --dwh-font-size-lg: 18px;
    --dwh-font-size-xl: 24px;
    --dwh-font-size-2xl: 32px;
}

@media (max-width: 480px) {
    body.dwh-skin-n64 {
        --dwh-font-size-base: 14px;
    }
}

/* Green depth gradient instead of a flat fill - lighter sunlit canopy at
   the top, darker toward the ground */
body.dwh-skin-n64 {
    background: linear-gradient(180deg, #2d6b42 0%, #1a3d26 60%, #14311e 100%);
    background-attachment: fixed;
}

/* The custom logo font is wide and pointy - give headings room and drop
   the terminal-style uppercase letter-spacing default */
body.dwh-skin-n64 h1,
body.dwh-skin-n64 h2,
body.dwh-skin-n64 h3,
body.dwh-skin-n64 h4,
body.dwh-skin-n64 h5,
body.dwh-skin-n64 h6 {
    letter-spacing: 1px;
}

/* Collection stat counters get the logo font too plus a bold yellow
   outline, like a game HUD/scoreboard number rather than a data table */
body.dwh-skin-n64 .stat-item__value {
    font-family: var(--dwh-font-heading);
    color: var(--dwh-primary);
    -webkit-text-stroke: 3px var(--dwh-warning);
    text-stroke: 3px var(--dwh-warning);
    paint-order: stroke fill;
}

/* Wood-grain texture (a seamless-tiling SVG turbulence pattern) over every
   brown surface - header, footer, cards, stat/filter bars, the login form -
   nodding to Ocarina of Time's wood-paneled UI.
   filterUnits/primitiveUnits + explicit x/y/width/height are load-bearing
   here: stitchTiles only produces seamless edges when the turbulence's own
   region exactly matches the tile being repeated. Left at SVG defaults, the
   filter region is 120% of the rect (with a -10% offset), so the stitched
   pattern covered a different area than the 220x110 tile being cropped and
   repeated - guaranteeing a visible seam at every tile boundary. */
body.dwh-skin-n64 .site-header,
body.dwh-skin-n64 .site-footer,
body.dwh-skin-n64 .card,
body.dwh-skin-n64 .collection-stats,
body.dwh-skin-n64 .collection-filters,
body.dwh-skin-n64 .single-media__details,
body.login.dwh-skin-n64 form {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='110'%3E%3Cfilter id='dwhWood' x='0' y='0' width='220' height='110' filterUnits='userSpaceOnUse' primitiveUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='4' seed='7' stitchTiles='stitch' x='0' y='0' width='220' height='110'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.35 0 0 0 0 0.22 0 0 0 0 0.12 0 0 0 0.55 0' x='0' y='0' width='220' height='110'/%3E%3C/filter%3E%3Crect width='220' height='110' filter='url(%23dwhWood)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 220px 110px;
}

/* A little bounce on hover instead of a static color swap - feels more
   like a game menu than a form */
body.dwh-skin-n64 .btn,
body.dwh-skin-n64 button:not(.menu-toggle),
body.dwh-skin-n64 input[type="submit"],
body.dwh-skin-n64 input[type="button"] {
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

body.dwh-skin-n64 .btn:hover,
body.dwh-skin-n64 button:not(.menu-toggle):hover,
body.dwh-skin-n64 input[type="submit"]:hover,
body.dwh-skin-n64 input[type="button"]:hover {
    transform: scale(1.06);
}

/* Recolor the select-arrow SVG (style.css hardcodes a green fill) to match */
body.dwh-skin-n64 select,
body.login.dwh-skin-n64 .language-switcher select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a90d9' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* Login title: same bold yellow outline treatment as the stat counters,
   replacing the red+blue two-tone drop shadow used everywhere else */
body.login.dwh-skin-n64 h1 a {
    -webkit-text-stroke: 3px var(--dwh-warning);
    text-stroke: 3px var(--dwh-warning);
    paint-order: stroke fill;
    text-shadow: none;
}

body.login.dwh-skin-n64 h1 a:hover,
body.login.dwh-skin-n64 h1 a:focus {
    text-shadow: none;
}

/* Login mascot trio (note, Mushroom, Triforce) - overrides the generic
   single-image .dwh-login-mascot sizing (see dwh_login_styles() in
   functions.php) since this skin lays out three icons side by side rather
   than one wide graphic */
body.login.dwh-skin-n64 .dwh-login-mascot--n64-trio {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
}

/* Sized by height, not width: all three images are cropped tight to their
   content but still have different aspect ratios, so matching height
   (what actually reads as "icon size" in a row) keeps them visually
   consistent even though their intrinsic dimensions differ */
body.login.dwh-skin-n64 .dwh-login-mascot--n64-trio img.dwh-login-mascot__icon {
    height: 80px;
    width: auto;
    max-width: 90px;
}