html {
    scrollbar-gutter: auto !important;
}

/* Prevent the mobile 'Menu ' button from stretching full-width */
@media screen and (max-width: 684px) {
  .menu,
  .menu__trigger {
    width: fit-content !important;
    max-width: fit-content !important;
    display: inline-block !important;
    margin-top: 4px !important;
  }
/* Hide language items and the separator line inside the mobile dropdown */
  .menu__dropdown .menu__divider,
  .menu__dropdown hr,
  .menu__dropdown .language-selector,
  .menu__dropdown [class*="lang"],
  .menu__dropdown li:nth-child(n+3) {
    display: none !important;
  }

}


kbd {
    background-color: var(--background, #1a1b20) !important;
    border: 2px solid var(--theme-color, #f0a230) !important;
    color: var(--color, #2b2b2b) !important;
    border-radius: 3px;
    box-shadow: 1px 3px 0 var(--theme-color, #f0a230);
    font-family: inherit;
    font-size: 0.85em;
    padding: 2px 4px;
    display: inline-block;
    margin: 0 3px;
    vertical-align: baseline;
    position: relative;
    top: -1px;
    text-transform: uppercase;
    font-weight: bold;
}

/* --- RICH PASTEL PAPELON PALETTE --- */

/* Rich Blue (P and N) */
.kbd-blue { border-color: #5dade2 !important; box-shadow: 1px 3px 0 #5dade2 !important; }

/* Rich Pink (A) */
.kbd-pink { border-color: #ff70a6 !important; box-shadow: 1px 3px 0 #ff70a6 !important; }

/* Rich Green (P) */
.kbd-green { border-color: #77dd77 !important; box-shadow: 1px 3px 0 #77dd77 !important; }

/* Rich Yellow (E) */
.kbd-yellow { border-color: #f4d03f !important; box-shadow: 1px 3px 0 #f4d03f !important; }

/* Rich Coral (L) */
.kbd-red { border-color: #ff6f61 !important; box-shadow: 1px 3px 0 #ff6f61 !important; }

/* Rich Purple (O) */
.kbd-purple { border-color: #a78bfa !important; box-shadow: 1px 3px 0 #a78bfa !important; }


/* The Giant KBD-Style Frame (Centered on the page) */
/* Hamla shows its image on the left when the row is side by side. The markup
   lists the text block first so that the stacked mobile order matches Essom
   (stats and summary, then image) and the reading order stays consistent for
   screen readers; row-reverse puts the image back on the left at desktop
   width. The mobile block sets flex-direction: column !important, which
   overrides this. */
/* The stat badges wrap on a narrow column, and a wrapped inline-block expands
   to the full available width instead of hugging its longest line - the same
   problem the form title had, so the border stops matching the text.

   Scaling against the viewport does not work here: the text column is full
   width when stacked but only about 44% of the container when the row is side
   by side, so the badge wraps both below 390px AND between 768 and 864px.
   Size it against its own column with a container query instead.

   Measured: the largest one-line size is about (0.05 x column width - 1.85px),
   which is 10.25px in a 242px column and 13.75px in a 304px one. */
.games-container > div:not(.game-box) {
    container-type: inline-size;
}

.kbd-stats {
    font-size: clamp(8px, calc(4.2cqw - 1.3px), 13.6px) !important;
}

.games-container.games-container--image-left {
    /* .games-container sets flex-direction: row !important, so this needs the
       extra class in the selector as well as !important to take effect. */
    flex-direction: row-reverse !important;
}

.retro-single-form {
    background-color: #fbf8ef !important; /* Matching warm cream background */
    background-image: 
        linear-gradient(to right, rgba(200, 160, 120, 0.25) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(200, 160, 120, 0.25) 1px, transparent 1px) !important;
    background-size: 20px 20px !important; /* Size of grid squares */
    border: 2px solid var(--theme-color, #2b2b2b) !important;
    border-radius: 8px;
    
    /* This creates the tactile 3D "KBD key" depth effect */
    box-shadow: 0 6px 0 var(--theme-color, #f0a230); 
    
    padding: 35px 25px;
    max-width: 480px;
    
    /* Centering the entire container on your webpage */
    margin: 50px auto; 
    
    /* Flexbox to center-align the fields inside */
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 0px;
}

/* 1. New Header Text Above the Field */
/* Markdown wraps each form control in its own <p>, and those default 1em
   margins are what produced the uneven spacing the negative margins were
   hacking around. Zero them and let the flex gap set the rhythm, so spacing
   is identical at every width. The title keeps its own larger bottom margin. */
.retro-single-form {
    gap: 12px !important;
}

.retro-single-form > p:not(.retro-form-title) {
    margin: 0 !important;
}

.retro-single-form .retro-form-title {
    background-color: var(--background, #1a1b20) !important;
    border: 2px solid var(--theme-color, #2b2b2b) !important;
    color: var(--color, #2b2b2b) !important;
    border-radius: 3px;
    box-shadow: 0 3px 0 var(--theme-color, #f0a230);
    font-family: inherit;
    font-size: 1.25em;
    padding: 2px 6px;
    display: inline-block;
    margin: 0 3px 45px 3px;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: bold;
}

/* The Email Input Field (Centered inside the container) */
.retro-single-form input[type="email"] {
    background-color: #fbf8ef;
    /* CHANGED: Starts as orange */
    border: 1px solid var(--theme-color, #f0a230) !important;
    color: var(--color, #e2e4e5);
    font-family: inherit;
    font-size: 1.1rem;
    padding: 14px;
    width: 100%;
    max-width: 360px; /* Restricts width so it aligns perfectly with the button */
    box-sizing: border-box;
    outline: none;
    text-align: center; /* Centers the placeholder and user text for symmetry */
}

/* Input focus state (CHANGED: Turns black when clicked) */
.retro-single-form input[type="email"]:focus {
    border-color: var(--color, #2b2b2b) !important; 
}

/* Instantly hides placeholder text on click */
.retro-single-form input[type="email"]:focus::placeholder {
    color: #f0a230 !important;
    opacity: 0.4;
}

/* The Submit Button (Thick theme-colored border, centered) */
.retro-single-form .submit-btn {
    /*background-color: transparent;*/
    background-color: #fbf8ef;
    border: 3px solid var(--theme-color, #f0a230);
    color: var(--theme-color, #f0a230);
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 12px;
    /* Note: these two have no effect. Markdown wraps the button in a <p>,
       and that <p> is a shrink-to-fit flex item, so 100% resolves against the
       button-sized wrapper rather than the form. The button therefore hugs its
       label at about 93px, which is the intended look. */
    width: 100%;
    max-width: 360px;
    cursor: pointer;
    text-transform: capitalize;
    transition: all 0.15s ease-in-out;
}

/* Button Hover State */
.retro-single-form .submit-btn:hover {
    background-color: var(--theme-color, #f0a230);
    color: var(--background, #1a1b20);
}

/* ==========================================================================
   POST HEADER SPACING
   The gap between the menu and a post title measured 116px, made of five
   separate spacings stacking: 20px nav margin, 16px .content padding, 20px
   article margin, 20px article padding and a 40px title margin. That reads
   as blank space rather than breathing room.

   Collapse the article's own spacing and trim the title margin. Scoped to
   single posts with :not(.on-list) so the post list on the homepage keeps
   its original rhythm between entries.
   ========================================================================== */
/* The signup form carries an inline margin-top: -25px, which leaves it almost
   touching the menu. Remove the pull so it sits clear of the navigation. */
/* ==========================================================================
   GAME LOGO BOXES
   The two homepage boxes hold brand marks rather than photographs, so the
   fill-the-frame treatment that suits the photos looks wrong on them: the
   logos filled their boxes edge to edge when stacked while floating in a sea
   of padding when side by side, so the two layouts did not look related.

   Give them their own box type: a fixed aspect ratio so both boxes are the
   same shape at every width, even padding, and contain sizing so each logo is
   capped by the same content height regardless of its own proportions.
   ========================================================================== */
.games-container .game-box--logo {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    padding: 0 !important;
    position: relative !important;
}

.games-container .game-box--logo img {
    /* Taken out of flow so the picture cannot push the box past its aspect
       ratio - which is what left the two boxes different heights when
       stacked. The inset gives even breathing room on all four sides and
       object-fit letterboxes each mark inside it, so both logos are capped
       by the same area regardless of their own proportions. */
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
    /* Explicit size, not right/bottom offsets: for a replaced element those
       offsets are ignored when width and height are auto, so the image drew
       at its natural 1038px and overflowed the frame. */
    width: calc(100% - 36px) !important;
    height: calc(100% - 36px) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
}

#kickstarter-form {
    margin-top: 0 !important;
}

/* ==========================================================================
   HOMEPAGE: CONTENT INTO POST LIST
   The gap between the end of the homepage content and the first post ran to
   about 130px, built from four spacings that each look reasonable alone:
   50px from the last games-container, 20px .post margin, 20px .post padding
   and a 40px default h1 margin on the title.

   Only the FIRST entry is touched, so the rhythm between posts further down
   the list is unchanged. The games-container margin stays as the breathing
   room after the logos.
   ========================================================================== */
.posts .post.on-list:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.posts .post.on-list:first-child .post-title {
    margin-top: 12px !important;
}

.post:not(.on-list) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.post:not(.on-list) .post-title {
    margin-top: 28px !important;
}

/* ==========================================================================
   SIDE-BY-SIDE GAME LOGO BOXES & CONTAINERS
   ========================================================================== */

/* The wrapper that handles the side-by-side layout (Merged & Fixed) */
.games-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;     /* Forces boxes and plus sign to align on vertical midpoint */
    gap: 40px !important;               /* Equal spacing on both sides of the plus sign */
    width: 100% !important;
    max-width: 850px !important;
    margin: 50px auto !important;
    box-sizing: border-box !important;
}

/* Individual game boxes mimicking your form frame */
.game-box {
    background-color: var(--background, #1a1b20) !important;
    border: 2px solid var(--theme-color, #2b2b2b) !important;
    border-radius: 8px;
    box-shadow: 0 6px 0 var(--theme-color, #f0a230); /* Identical 3D depth shadow */
    
    padding: 30px 20px;
    flex: 1;                /* Forces both boxes to scale to equal widths */
    max-width: 380px;       /* Keeps them a crisp size on wide viewports */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}

/* Game Title badge styles matching your main form header style */
.game-box .game-box-title {
    background-color: var(--background, #1a1b20) !important;
    border: 2px solid var(--theme-color, #2b2b2b) !important;
    color: var(--color, #2b2b2b) !important;
    border-radius: 3px;
    box-shadow: 0 3px 0 var(--theme-color, #f0a230);
    font-family: inherit;
    font-size: 1.1em;
    padding: 2px 8px;
    display: inline-block;
    margin: 0 0 25px 0;     /* Space beneath title badge */
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}

/* Game Logo sizing adjustments */
.game-box .game-logo {
    max-width: 100%;
    height: auto;
    max-height: 180px;      /* <--- ADJUST LOGO HEIGHT LIMIT HERE */
    object-fit: contain;
    
    /* Maintains pixel art sharpness for your icons */
    image-rendering: auto !important;
    image-rendering: crisp-edges !important;
}

/* Fixed Plus Sign Separator Block */
.game-separator {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    width: 60px !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    
    font-family: inherit !important;
    font-weight: bold !important;
    font-size: 5rem !important; 
    color: var(--color, #2b2b2b) !important;
    box-sizing: border-box !important;
    
    transform: translateY(-4px) !important; /* Visual vertical baseline balance adjustment */
}

/* ==========================================================================
   GAME BOX COLOR MODIFIERS (Shadow Tints Only)
   ========================================================================== */

.game-green { box-shadow: 0 6px 0 #77dd77 !important; }
.game-green .game-box-title { box-shadow: 0 3px 0 #77dd77 !important; }

.game-purple { box-shadow: 0 6px 0 #a78bfa !important; }
.game-purple .game-box-title { box-shadow: 0 3px 0 #a78bfa !important; }

.game-blue { box-shadow: 0 6px 0 #5dade2 !important; }
.game-blue .game-box-title { box-shadow: 0 3px 0 #5dade2 !important; }

.game-pink { box-shadow: 0 6px 0 #ff70a6 !important; }
.game-pink .game-box-title { box-shadow: 0 3px 0 #ff70a6 !important; }

.game-yellow { box-shadow: 0 6px 0 #f4d03f !important; }
.game-yellow .game-box-title { box-shadow: 0 3px 0 #f4d03f !important; }

.game-red { box-shadow: 0 6px 0 #ff6f61 !important; }
.game-red .game-box-title { box-shadow: 0 3px 0 #ff6f61 !important; }

/* ==========================================================================
   SEPARATOR COLOR MODIFIERS (Shadow Tints Only)
   ========================================================================== */

.separator-green { text-shadow: 1px 1px 0 #77dd77, 2px 2px 0 #77dd77, 3px 3px 0 #77dd77, 4px 4px 0 #77dd77 !important; }
.separator-purple { text-shadow: 1px 1px 0 #a78bfa, 2px 2px 0 #a78bfa, 3px 3px 0 #a78bfa, 4px 4px 0 #a78bfa !important; }
.separator-blue { text-shadow: 1px 1px 0 #5dade2, 2px 2px 0 #5dade2, 3px 3px 0 #5dade2, 4px 4px 0 #5dade2 !important; }
.separator-pink { text-shadow: 1px 1px 0 #ff70a6, 2px 2px 0 #ff70a6, 3px 3px 0 #ff70a6, 4px 4px 0 #ff70a6 !important; }
.separator-yellow { text-shadow: 1px 1px 0 #f4d03f, 2px 2px 0 #f4d03f, 3px 3px 0 #f4d03f, 4px 4px 0 #f4d03f !important; }
.separator-red { text-shadow: 1px 1px 0 #ff6f61, 2px 2px 0 #ff6f61, 3px 3px 0 #ff6f61, 4px 4px 0 #ff6f61 !important; }

.separator-rainbow {
    text-shadow: 
        1px 1px 0 #ff6f61,
        2px 2px 0 #f4d03f,
        3px 3px 0 #77dd77,
        4px 4px 0 #5dade2,
        5px 5px 0 #a78bfa,
        6px 6px 0 #ff70a6 !important;
}

/* ==========================================================================
   RESPONSIVE LAYOUT MECHANICS (Unified Mobile Block)
   ========================================================================== */
@media (max-width: 768px) {
    /* Matches the specificity of the row-reverse rule above, which would
       otherwise keep the Hamla row side by side here. */
    .games-container.games-container--image-left {
        flex-direction: column !important;
    }

    .games-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }
    .game-box {
        width: 100% !important;
        /* 480px was wider than the 380px these boxes get on desktop. */
        max-width: 380px !important;
    }

    /* The two logo boxes are pure branding, not content. Once the row
       stacks they sit one above the other with the separator between, and
       at the full 380px that pushed the page down further than the text
       around them warranted. Cap them smaller here; the 16/10 ratio above
       is untouched, so they scale down rather than change shape. */
    .game-box--logo {
        max-width: 240px !important;
    }

    /* A frame should fit what it contains. The inline styles cap these images
       by percentage (85%) and by height (360px), which on a stacked mobile
       layout leaves the image far narrower than its box and produces dead
       margins down both sides. Let the image fill the box content width so
       the frame hugs it, with the box padding as the only breathing room. */
    .game-box img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
    }
    /* container-type: inline-size collapses an element whose width comes from
       its content, and these columns are shrink-to-fit flex items once the row
       stacks. A definite width keeps the container query working. */
    .games-container > div:not(.game-box) {
        width: 100% !important;
    }

    .game-separator {
        /* Scale rather than shrink the font: the plus carries a layered
           text-shadow whose offsets are fixed pixels, so reducing font-size
           alone would leave the shadow proportionally heavier. A transform
           scales glyph and shadow together, so it keeps its exact shape. */
        transform: rotate(90deg) scale(0.75) !important;
        margin: 4px 0 !important;
    }

    /* The signup form carries inline flex/max-width of 60%, which was tuned
       for the 864px desktop container. At phone widths that leaves the email
       field about 130px wide - too narrow to show a typed address - and wraps
       the title onto three lines. Inline styles outrank stylesheet rules, so
       these need !important. */
    #kickstarter-form {
        flex: 0 0 auto !important;
        width: 100% !important;
        /* .retro-single-form caps the form at 480px. An earlier fix here used
           max-width: 100%, which removed that cap and let the form stretch to
           690px at 768px before snapping back to 433px on desktop. */
        max-width: 480px !important;
    }


    /* The theme sets white-space: nowrap on the footer copyright, forcing
       it onto one 353px line. That is wider than a 320px phone and was the
       only source of horizontal scrolling on the whole site. */
    .footer .copyright span {
        white-space: normal !important;
    }

    /* Theme pagination buttons are flex items whose label is white-space:
       nowrap. A flex item will not shrink below its min-content width by
       default, so instead of ellipsising, the post titles pushed the
       pagination 30px wider than the page at 320-360px. min-width: 0 lets
       them shrink so the ellipsis the theme already set can do its job. */
    .pagination__buttons .button,
    .pagination__buttons .button a {
        min-width: 0 !important;
    }
}

/* ==========================================================================
   FORM TITLE: KEEP IT ON ONE LINE
   The title is an inline-block. When its text wraps, CSS expands the box to
   the full available width instead of shrinking it to the longest line, so
   a wrapped title leaves a dead gap after "PROJECT!" and the border no
   longer fits the text.

   Rather than step the size at breakpoints - which puts a cliff exactly
   where the text stops fitting - scale it fluidly so it always fits on one
   line. Measured: the title is 177px wide per 1em plus 16px of padding and
   border, and has roughly (viewport - 128px) of room. Solving for a fit and
   adding headroom gives the 0.085 factor below. The clamp caps it at 20px,
   so nothing changes at tablet width and above.
   ========================================================================== */
.retro-single-form .retro-form-title {
    font-size: clamp(13px, calc((100vw - 144px) * 0.085), 20px) !important;
    text-align: center;
}

/* ==========================================================================
   RETRO TOP BANNER STYLING
   ========================================================================== */

/* The Upper Band Container */
.retro-top-banner {
    width: 100% !important;
    height: 130px !important; 
    position: relative !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 9999 !important;
    
    /* The Background Engineering Grid Texture */
    background-image: url("images/banner_gridpaper1.png") !important; 
    background-repeat: repeat-x !important; 
    background-position: center !important;
    background-size: auto 130px !important; 
    /* Bottom border and 3D shadow matching the theme form styles */
    border-bottom: 2px solid #2b2b2b !important;
    box-shadow: 0 4px 0 #f0a230 !important;
}

/* The Centered Logo Image */
.retro-top-banner .banner-logo {
    height: 240px !important;      /* Scaled down to fit within the 130px banner */
    width: auto !important;        /* Maintains pixel-perfect proportions */
    max-width: 100% !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    transform: translateY(-3px) !important; /* Shifted down to overlap the bottom edge */
    
    /* Keeps pixel-art razor-sharp */
    image-rendering: pixelated !important; 
    image-rendering: crisp-edges !important;
}



/* ==========================================================================
   RESIZE AND SCALE POST COVER IMAGES
   ========================================================================== */
.post-cover {
    /* 1. Shrink the bounding box (and that thick accent border) */
    max-width: 80% !important; 
    /* 2. Keep the container perfectly centered on the page */
    margin: 20px auto !important; 
}

.post-cover img {
    /* 3. Make sure the actual image fills our new smaller box smoothly */
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* 1. Reset any old side borders */
body::before,
body::after {
  display: none !important;
}

/* 2. Turn the entire page background into graph paper */
body {
  background-color: #fbf8ef; /* Matching warm cream background */
  background-image: 
    linear-gradient(to right, rgba(200, 160, 120, 0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200, 160, 120, 0.22) 1px, transparent 1px);
  background-size: 24px 24px; /* Size of grid squares */
  background-attachment: fixed; /* Keeps the grid stationary as you scroll */
}

/* Keeps main content readable over the grid background */
.container, .content {
  background-color: #fbf8ef; /* Solid cream behind your main text box */
  padding: 1rem;
  /*border-radius: 10px;
  border: 2px solid #f0a230; /* Crisp black border */
}

/* ==========================================================================
   PER-LANGUAGE TEXT FITTING
   The clamp formulas above were derived from the English strings, so they
   do not hold for a longer translation. Spanish needs its own constants:
   "Sigue nuestro proyecto" and "Jugadores: 2-6 | Edad: 8+ | Tiempo: 15'"
   are both meaningfully longer than their English originals and wrapped at
   every phone width using the English numbers.

   Measured for Spanish: the form title needs about
   (0.069 x column - 4.5px) and the stat badge about
   (0.042 x column - 1.2px) to stay on one line. The values below sit just
   under those, and both still cap at the English maximum so nothing grows.

   The stat badge is NOT handled per language. Three languages in a row
   needed a different constant for it - Swedish is only one character
   longer than English and that was enough to wrap it - so its base rule
   above is now sized for the longest of the three and applies to all.
   English and Swedish end up a little smaller than they strictly need,
   which is a fair trade for a rule that survives a copy edit.

   The form title stays per language because Spanish is genuinely much
   longer there (24 characters against 18 for Swedish and 19 for English),
   so one shared constant would shrink the other two noticeably.
   ========================================================================== */
:lang(es) .retro-single-form .retro-form-title {
    font-size: clamp(10px, calc(6.8vw - 10.5px), 20px) !important;
}