/* ===== fonts.css ===== */
/*
 * fonts.css
 *
 * Generated by public_html/fonts/fetch-fonts.sh - do not edit.
 *
 * Source: the Google Fonts CSS API, self-hosted so the faces ship inside
 * the CSS bundle instead of costing two extra origins and a serial hop.
 * Request: https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600&display=swap
 *
 * Metric-matched fallbacks for these families live in vanguard.css, which
 * is what keeps font-display: swap from shifting the page.
 */

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/fraunces-italic-latin.4af9c759c805.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/fraunces-normal-latin.48282a415ec2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter-normal-latin.c940764593d0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== normalize.cssz ===== */
/*! normalize.css v1.0.1 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}

/*
 * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
 * and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Addresses `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

/*
 * Addresses margins handled incorrectly in IE 6/7.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/*
 * Addresses font sizes and margins set differently in IE 6/7.
 * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

/*
 * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/*
 * Addresses styling not present in IE 6/7/8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/*
 * Addresses margins set differently in IE 6/7.
 */

p,
pre {
    margin: 1em 0;
}

/*
 * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * Addresses CSS quotes not supported in IE 6/7.
 */

q {
    quotes: none;
}

/*
 * Addresses `quotes` property not supported in Safari 4.
 */

q:before,
q:after {
    content: '';
    content: none;
}

/*
 * Addresses inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Lists
   ========================================================================== */

/*
 * Addresses margins set differently in IE 6/7.
 */

dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}

/*
 * Addresses paddings set differently in IE 6/7.
 */

menu,
ol,
ul {
    padding: 0 0 0 40px;
}

/*
 * Corrects list images handled incorrectly in IE 7.
 */

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improves image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

/*
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE 6/7/8/9.
 * 2. Corrects text not wrapping in Firefox 3.
 * 3. Corrects alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers.
 * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improves appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/*
 * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled],
input[disabled] {
    cursor: default;
}

/*
 * 1. Addresses box sizing set to content-box in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 * 3. Removes excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE 6/7/8/9.
 * 2. Improves readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/*
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ===== site.cssz ===== */
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
textarea.ViewTpl {
    visibility: hidden;
    display: none;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}
body {
    background: #1d8718 url('../img/bkgr/BackgroundLandscape.scale-100.jpg') no-repeat 100% 50%;
    background-size: cover;
    overflow: hidden;
}
body { 
    -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-user-select: none; -webkit-highlight: none; -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#mgnt-ui {
    overflow: scroll;
    height: 100%;
}

h1, h2, h3, h4, h5, p {
    color: #333;
}
.console {
    z-index: 1000;
    position: absolute;
    bottom: 0;
}
.main {
    width: 80%;
    max-width: 626px;
    margin: 0 auto;
    padding: 1em;
    z-index: 101;
}
.main.play-mash-online-free { 
    max-width: 700px;
    background-color: #FFF;
}
.intro,
.content {
    padding: .75em;
    border-radius: 8px;
    border: 1px solid #FFF;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 102;
}
.fb-comments {
    margin: 0 auto;
}

.widgets .widget {
    width: 80px;
    float: left;
}

#MASH.logo {
    max-width: 600px;
    width: 100%;
    height: 3em;
    background: transparent url('../img/logos/MASHPlusLogoText.scale-100.png') no-repeat 0 0;
    background-size: contain;
}

#store,
#stores {
    width: 90%;
    max-width: 480px;
    margin: 0 auto;
}
#store .storeItem,
#stores .storeItem {
    width: 45%;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    list-style-type: none;
}
#store .storeItem p,
#stores .storeItem p {
    font-size: 75%;
}
#store .storeBtn,
#stores .storeBtn {
    display: block;
    width: 100%;
    height: 60px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
}
#store .storeItem p,
#store .storeItem a {
    text-align: center;
}
#store .storeBtn {
    height: 80px;
    background-position: 50% 50%;
}
#store .storeItem:last-child,
#stores .storeItem:last-child {
    margin-right: 0;
}
.storeBtn.iOS,
.storeBtn#iOS {
    background-image: url("../img/buttons/Available_on_the_App_Store_Badge_135x40.svg");
}
.storeBtn.GooglePlay,
.storeBtn#GooglePlay {
    background-image: url("../img/buttons/Get_it_on_Google_Play_Badge.svg");
}
.storeBtn.GoogleChromeWS,
.storeBtn#GoogleChromeWS {
    background-image: url("../img/buttons/ChromeWebStore_BadgeWBorder_v2.svg");
}
.storeBtn.Amazon,
.storeBtn#Amazon {
    background-image: url("../img/buttons/Available_at_Amazon_Appstore.svg");   
}
.storeBtn.WindowsStore,
.storeBtn#WindowsStore {
    background-image: url("../img/buttons/WindowsStore_badge_green.svg");   
}
.storeBtn.WindowsPhone,
.storeBtn#WindowsPhone {
    background-image: url("../img/buttons/WindowsPhone_badge_blue.svg");   
}

.now-available-on-mas,
#now-available-on-mas {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
.now-available-on-mas .storeBtn,
#now-available-on-mas .storeBtn {
    display: block;
    width: 100%;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.storeBtn.Mac,
.storeBtn#Mac {
    background-image: url("../img/buttons/Download_on_the_Mac_App_Store_Badge_US-UK_165x40.svg");
    background-position: 100px 50%;
    background-size: 70%;
    min-width: 338px;
}
#stores .storeBtn#Mac {
    background-position: 0 0;
    background-size: contain;
    min-width: 0;
}
.storeBtn.Mac .icon,
.storeBtn#Mac .icon {
    background-image: url("../img/icons/MASH-for-Mac-icon@2x.png");
    width: 100px;
    height: 100px;
    display: block;
    background-size: cover;
}

ul#store {
    padding-left: 0;
}
#store .storeItem {
    width: 100%;
    padding: 0;
}

#facebookLikeWidget {
    max-width: 100% !important;
    /*overflow: scroll;*/
}
#play-on-facebook {
    padding: 1em;
    background-color: rgba(255,255,255,0.8);
    border-radius: 8px;
    margin-bottom: 1em;    
    -webkit-box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.5);

}
.iconBtn.Facebook {
    background: transparent url('../img/logos/f_logo.svg') no-repeat 0 0;
    background-size: 48px;
    display: block;
    padding-left: 64px;
    font-size: 200%;
    font-weight: bold;
    padding-bottom: .1em;
    text-decoration: none;
}

.promoted {
    padding: .25em 1em;
    background-color: rgba(174, 245, 255, 0.38);
    border-radius: 8px;
    -webkit-box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.5);
    border: 2px solid #FFF;
}

.intro a:link {
    color: #317ffb;
}
.intro a:visited {
    color: #5664bf;
}
.intro a:hover {
    color: #3db6f2;
}
.intro a:active {
    color: #21670f;
}

#socialLinks a:link, #socialLinks a:visited, 
#socialLinks a:hover, #socialLinks a:active {
    color: rgb(9, 102, 163);
}

.sharable-pin img {
    width: 100%;
    height: auto;
}

.ogImage img {
    width: 100%;
    height: auto;
}

footer p {
    color: #FFF;
    font-size: 90%;
    font-weight: normal;
}
footer a:link {
    color: #FFF;
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}
footer a:visited {
    color: #FFF;
    text-decoration: none;
}
.play-mash-online-free footer p {
    color: #333;
}
.play-mash-online-free footer a:link {
    color: #333;
    text-decoration: none;
}
.play-mash-online-free footer a:visited {
    color: #333;
    text-decoration: none;
}
.play-mash-online-free footer a:hover {
    color: #333;
    text-decoration: underline;
}

/* Overthrow CSS:
   Enable overflow: auto on elements with overthrow class when html element has overthrow class too */
.overthrow-enabled .overthrow {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.scrollable {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-scrolling: touch;
    /*padding-right: 2em;*/
    padding-bottom: 2em;
}
.scrollable * {
    -webkit-transform: translate3d(0,0,0);
}

button.basicButton {
    padding: 1em;
    border: 2px solid #FFF;
    color: #062954;
    font-weight: bold;
    font-size: 125%;
    background-color: #bdd8e2;
}
button.basicButton:hover {
    background-color: #7ecff1;
}
button.basicButton:active {
    background-color: #348bf4;
    color: #FFF;
}
.backButton {
    display: block;
    color: #FFF;
    font-size: 110%;
    font-weight: bold;
    text-decoration: none;
    width: 48px;
    height: 48px;
    background: transparent url('../img/skin/BackButton.scale-100.png') no-repeat 0 0;
    float: left;
}
.backButton:active {
    background-position: 0 -48px;
    outline: none;
}
.backButton:focus {
    outline: none;
}
.titleView {
    color: #FFF;
    font-size: 125%;
    float: left;
    margin-left: 10px;
}

#Dwellings {
    width: 100%;
    max-width: 500px;
    height: 192px;
    margin: 0 auto;
    background: transparent url('../img/dwellings/Dwellings-Flat.scale-100.png') no-repeat 0 100%;
    background-size: contain;
    z-index: 1;
    margin-top: 1em;
}

.controlsContainer {
    max-width: 580px;
    min-width: 280px;
    padding: 0 1em;
    margin-top: 1em;
}
.hbox .control {
    float: left;
}

#overlay {
    position: absolute;
    background: transparent url('../img/skin/transparent.png') repeat 0 0;
    width: 100%;
    height: 100%;
    z-index: 200;
}
.listControl {
    position: absolute;
    visibility: hidden;
    overflow: auto;
    border: 2px solid #333;
    background-color: #FFF;
    z-index: 300;
}
.listControlItem {
    background-color: #FFF;
    border-bottom: 1px solid #333;
    padding: 1em;
}
.listControlItem .titleLbl {
    color: #222;
    font-size: 125%;
    cursor: default;
}
.listControlItem:hover, .segmentedListControlItem .listControlItem:hover {
    background-color: #bdd8e2;
}
.listControlItem:active, .segmentedListControlItem .listControlItem:active {
    background-color: #7dcef3;
}
.segmentedListControlItem {
    width: 100%;
    padding: 0;
}
.segmentedListControlItem .listControlItem {
    float: left;
    width: 40%;
    padding: 5%;
    background-color: #d8e5e6;
}
.segmentedListControlItem .listControlItem.selected {
    background-color: #FFF;
}

.wordLblOuter {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    opacity: 0;
}
label.wordLbl {
    color: #222222;
}
canvas.wordLblCanvas {
    position: absolute;
}

.adModule {
    position: absolute;
    z-index: 2000;
    width: 0;
    height: 0;
    background-color: #FEFEFE;
}
/* MS unit id: 109757 */
.adModule.ad_160x600 {
    width: 160px;
    height: 600px;
}
/* MS unit id: 109758 */
.adModule.ad_292x60 {
    width: 292px;
    height: 60px;
}
/* MS unit id: 109759 */
.adModule.ad_728x90 {
    width: 728px;
    height: 90px;
}

ul.full-width, ol.full-width {
    width: 100%;
    padding: 0;
}
ul.full-width li .section-leader-img {
    margin-left: 0;
}

li .section-leader-img {
    display: block;
    margin-left: -20px;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 600px) {
    .desktop-specific {
        display: none;
        visibility: hidden;
    }
    .main {
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* Portrait */
@media screen and (orientation:portrait),
screen and (-ms-view-state: fullscreen-portrait) {
    body {
        background: #1d8718 url('../img/bkgr/BackgroundPortrait.scale-100.jpg') no-repeat 50% 50%;
        background-size: cover;
    }
}
/* Landscape */
@media screen and (orientation:landscape),
screen and (-ms-view-state: fullscreen-landscape) {
    body {
        background: #1d8718 url('../img/bkgr/BackgroundLandscape.scale-100.jpg') no-repeat 50% 50%;
        background-size: cover;
    }
}
@media screen and (max-width: 540px) and (orientation: portrait) {
    #stores .storeItem {
        float: left;
        width: 80%;
    }
    #stores .storeBtn {
        display: block;
        width: 100%;
        height: 80px;
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: contain;
    }
    #MASH.logo {
        margin: 2% 0;
        height: 2em;
    }
}
/* Snapped */
@media screen and (max-width: 600px) and (orientation: portrait),
screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5) {
    body {
        background: #1d8718 url('../img/bkgr/BackgroundSnapped.scale-100.jpg') no-repeat 50% 50%;
        background-size: cover;
    }
    .backButton {
        width: 72px;
        height: 72px;
        background: transparent url('../img/skin/BackButton.scale-180.png') no-repeat 0 0;
        background-size: cover;
    }
    
    .controlsContainer {
        max-width: 580px;
        min-width: 280px;
        margin: 0 auto;
        padding: 0 1em;
    }
}

@media screen and (max-height: 672px) {
    
}
@media screen and (max-height: 554px) {
    #Dwellings {
        display: none;
        visibility: hidden;
    }
}

@media screen and (min-width: 1280px) {
    #Dwellings {
        width: 100%;
        max-width: 1200px;
        height: 400px;
        margin: 0 auto;
        background: transparent url('../img/dwellings/Dwellings-Flat.scale-100.png') no-repeat 0 100%;
        background-size: contain;
        z-index: 1;
        margin-top: 1em;
    }
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */
.replaced {
    text-indent: 100%;  
    white-space: nowrap;  
    overflow: hidden;
}
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ===== site.supplement.css ===== */
/* Ensure html element allows bounce */
html {
  overflow-x: hidden !important;
  background-image: linear-gradient(to bottom, #2d84f8, #1d8718) !important;
  background-attachment: fixed !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  width: 100% !important;
  width: 100vw !important;
  overscroll-behavior: contain !important;
}


/* Ensure body can scroll and background stays fixed */
body {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  background-image: url('https://mgnt-app-assets.s3.amazonaws.com/MASHPlus/site/img/bkgr/BackgroundLandscape.scale-100.jpg'), linear-gradient(to bottom, #2d84f8, #1d8718) !important;
  background-attachment: fixed !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  width: 100% !important;
}

/* Content meta styling for author and date information */
.content-meta {
  margin: 10px 0;
  font-size: 0.9em;
  color: #666;
  line-height: 1.4;
}

.content-meta .date {
  display: inline-block;
  margin-right: 15px;
}

.content-meta .author {
  display: inline-block;
  font-style: italic;
}

.content-meta .date::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f133";
  margin-right: 5px;
}

.content-meta .author::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f304";
  margin-right: 5px;
}

/* Content area responsive styles */
.content {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  line-height: 1.6;
}

.content header {
  margin-bottom: 30px;
  border-bottom: 2px solid #2d84f8;
  padding-bottom: 20px;
}

.content h1 {
  font-size: 2.5em;
  color: #2d84f8;
  margin-bottom: 10px;
  line-height: 1.2;
}

.content h2 {
  font-size: 1.8em;
  color: #1d8718;
  margin: 25px 0 15px 0;
  line-height: 1.3;
}

.content h3 {
  font-size: 1.4em;
  color: #333;
  margin: 20px 0 10px 0;
  line-height: 1.4;
}

.content p {
  margin-bottom: 15px;
  text-align: justify;
}

.content ul, .content ol {
  margin: 15px 0;
  padding-left: 30px;
}

.content li {
  margin-bottom: 8px;
}

.content a {
  color: #2d84f8;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.3s ease;
}

.content a:hover {
  border-bottom-color: #2d84f8;
}

.content strong {
  color: #1d8718;
  font-weight: bold;
}

.content em {
  font-style: italic;
  color: #666;
}

.content hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 30px 0;
}

/* Mobile responsive styles */
@media screen and (max-width: 768px) {
  .content {
    padding: 15px;
    margin: 10px;
    border-radius: 6px;
  }
  
  .content h1 {
    font-size: 2em;
  }
  
  .content h2 {
    font-size: 1.5em;
  }
  
  .content h3 {
    font-size: 1.2em;
  }
  
  .content ul, .content ol {
    padding-left: 20px;
  }
}

@media screen and (max-width: 480px) {
  .content {
    padding: 10px;
    margin: 5px;
  }
  
  .content h1 {
    font-size: 1.8em;
  }
  
  .content h2 {
    font-size: 1.3em;
  }
  
  .content h3 {
    font-size: 1.1em;
  }
  
  .content p {
    text-align: left;
  }
  
  .content ul, .content ol {
    padding-left: 15px;
  }
  
  .content-meta {
    font-size: 0.8em;
  }
  
  .content-meta .date,
  .content-meta .author {
    display: block;
    margin-bottom: 5px;
  }
}

/* Main layout responsive adjustments */
@media screen and (max-width: 768px) {
  .main {
    padding: 10px;
  }
  
  #MASH .logo {
    height: 2.5em;
  }
  
  .intro {
    padding: 15px;
  }
  
  .intro h1 {
    font-size: 1.8em;
  }
  
  .intro h2 {
    font-size: 1.3em;
  }
  
  .intro p {
    font-size: 0.95em;
  }
}

@media screen and (max-width: 480px) {
  .main {
    padding: 5px;
  }
  
  #MASH .logo {
    height: 2em;
  }
  
  .intro {
    padding: 10px;
  }
  
  .intro h1 {
    font-size: 1.5em;
  }
  
  .intro h2 {
    font-size: 1.1em;
  }
  
  .intro p {
    font-size: 0.9em;
  }
  
  .sub-pages ul {
    padding-left: 15px;
  }
  
  .sub-pages li {
    margin-bottom: 8px;
  }
}

footer a {
  font-weight: bold;
}

.content article a {
  text-decoration: underline;
}

/* ===== mash.css ===== */
#MASH.logo {
  font-size: 2em;
  margin: 0 0 0.67em 0;
}

.frosted-glass {
  background: var(--surface-frosted);
  border-radius: var(--radius);
}

.ogImage {
  width: 100%;
  max-width: 256px;
  height: auto;
  display: block;
  border-radius: 8px;
  overflow: hidden;
}

.game-instructions {
  margin-top: 10px;
}

.xpromo-container .inner-content {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 10px;
}

#PlayMASH {
  padding-top: 60px;
}

#PlayMASH .top-navigation {
  margin-bottom: 20px;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  border-radius: 0 0 8px 8px;
}

/* ===== site.fixes.css ===== */
/*
 * site.fixes.css
 *
 * Targeted overrides for measured layout/perf defects on top of the legacy
 * S3 style.cssz bundle and site.supplement.css. Deliberately NOT wrapped in
 * @layer: layered styles always lose to unlayered CSS, and every rule here
 * has to beat the legacy bundle.
 *
 * Revert: remove the <link> to this file from
 * _includes/common_scripts_and_styles.inc.php. This file can stay on disk.
 */

/* Fix 1: Store badges clip at narrow widths.
   site.cssz sets min-width: 338px on the Mac badge and tries to undo it with
   `#stores .storeBtn#Mac`, but the markup id is `store`, not `stores`, so
   that selector never matches. */
.stores .storeBtn#Mac,
.stores .storeBtn.Mac {
  min-width: 0;
}

/* min() keeps auto-fit tracks from exceeding a narrow container */
#store,
#stores {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}
.storeItem {
  box-sizing: border-box;
}

/* Fix 3: Make print work.
   The only print CSS today is the h5bp default inside the gzipped bundle. */
@media print {
  .top-navigation,
  .footer-container,
  .st-sticky-share-buttons,
  .sharethis-inline-share-buttons,
  .xpromo-container,
  .mash-download-ad,
  .newsletter-signup,
  .social-widgets,
  .widgets,
  #facebookLikeWidget {
    display: none !important;
  }

  /* Legacy h5bp appends href to every anchor. Keep it only where a URL is
     actually useful on paper. */
  a[href]::after {
    content: none;
  }
  a[href^="http"]:not([href*="mashplus.com"])::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  /* site.supplement.css sets these with !important */
  html,
  body {
    background-image: none !important;
    background-color: #fff !important;
  }
  .content,
  .frosted-glass,
  .intro {
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }
  img,
  li {
    break-inside: avoid;
  }
}

/* Fix 4: Stop applying the prose measure to the whole homepage column.
   body.editorial .content-body { max-width: 68ch } caps the container, so
   the 8-card feature grid renders narrower than its card. Moving the
   measure from the container to its text children fixes both the grid width
   and the h1/prose left-edge misalignment. body#blog gets the same treatment
   because blog article banner images fill the column, which a capped container
   would shrink. */
body#home .content-body,
body#blog .content-body {
  max-width: none;
}
body#home .content-body > :where(p, ol, ul, h3),
body#blog .content-body > :where(p, ol, ul, h3) {
  max-width: 68ch;
}

/* ===== mash.tokens.css ===== */
/*
 * mash.tokens.css
 *
 * Single token layer for MASHPlus. Unlayered on :root so custom properties
 * apply without fighting the legacy S3 bundle. Revert: remove this <link>.
 */

:root {
  /* Type — editorial scale (320px → 1440px) */
  --step--1: clamp(0.80rem, 0.74rem + 0.22vw, 0.94rem);
  --step-0: clamp(1.00rem, 0.92rem + 0.28vw, 1.13rem);
  --step-1: clamp(1.20rem, 1.10rem + 0.38vw, 1.40rem);
  --step-2: clamp(1.44rem, 1.28rem + 0.56vw, 1.75rem);
  --step-3: clamp(1.73rem, 1.50rem + 0.82vw, 2.19rem);
  --step-4: clamp(2.07rem, 1.73rem + 1.20vw, 2.74rem);
  --step-5: clamp(2.488rem, 1.846rem + 3.209vw, 4.735rem);

  /* Space — one scale for padding, margin, and gap */
  --space-3xs: clamp(0.25rem, 0.232rem + 0.089vw, 0.313rem);
  --space-2xs: clamp(0.5rem, 0.464rem + 0.179vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.696rem + 0.268vw, 0.938rem);
  --space-s: clamp(1rem, 0.929rem + 0.357vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.393rem + 0.536vw, 1.875rem);
  --space-l: clamp(2rem, 1.857rem + 0.714vw, 2.5rem);
  --space-xl: clamp(3rem, 2.786rem + 1.071vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.714rem + 1.429vw, 5rem);
  --space-3xl: clamp(6rem, 5.571rem + 2.143vw, 7.5rem);

  /* Measure and rhythm */
  --measure: 68ch;
  --leading-tight: 1.1;
  --leading-body: 1.6;
  --rhythm: 1.6em;

  /* Layout frame */
  --gutter: var(--space-m);
  --content-max: 60rem;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 14px;
  --duration: 0.2s;

  /* Brand colors — named, not resolved (visual pass picks accent) */
  --brand-blue: #2d84f8;
  --brand-green: #1d8718;
  --accent-editorial: #b03a48;
  --ink: #1a1a1f;
  --ink-soft: #4a4a55;
  --rule: #e6e2da;
  --bg-card: #fbf8f3;
  --surface-frosted: rgba(255, 255, 255, 0.69);
  --surface-frosted-strong: rgba(255, 255, 255, 0.85);
  --focus-ring: var(--brand-blue);
}

/* Editorial pages alias crimson accent; swap --accent-editorial later for unified brand */
body.editorial {
  --accent: var(--accent-editorial);
}

/* ===== mash.components.css ===== */
/*
 * mash.components.css
 *
 * Shared layout components aliased to existing class names. Revert: remove this <link>.
 */

/* ─── Card grids (one implementation, five names) ─────────────────────────── */
.feature-grid,
.games-grid,
.apps-grid,
.printables-grid,
.classic-grid,
#store,
#stores {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

#store,
#stores {
  max-width: 100%;
  list-style: none;
  padding: 0;
  margin: var(--space-m) 0;
}

.apps-grid {
  padding-left: 0;
  margin-top: 0;
}

.printables-grid {
  max-width: 56.25rem;
  margin-inline: auto;
}

/* Homepage uses a fixed 2-col grid until container is narrow */
body#home .feature-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-s);
  min-height: 12.5rem;
}

@media (max-width: 37.5rem) {
  body#home .feature-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }
}

/* Categories page keeps 2-col classic cards */
.mash-categories-page .classic-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-s);
}

@media (max-width: 37.5rem) {
  .mash-categories-page .classic-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Shared card lift (aliased surfaces) ───────────────────────────────── */
:where(
  .feature-card,
  .game-card,
  .app-card,
  .printable-item,
  .classic-card,
  .storeItem
):is(a, li, div) {
  transition:
    transform var(--duration) ease,
    box-shadow var(--duration) ease,
    background var(--duration) ease;
}

:where(.game-card, .app-card, .storeItem):hover {
  transform: translateY(-4px);
}

:where(.feature-card):hover {
  transform: translateY(-2px);
}

:where(.storeItem):hover {
  transform: translateY(-2px);
}

/* ─── Focus ring (sitewide) ───────────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

:where(.feature-card, .game-card, .app-card-link, .top-navigation a):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ─── Frosted glass (single definition) ─────────────────────────────────── */
.frosted-glass {
  background: var(--surface-frosted);
  border-radius: var(--radius);
}

@media (prefers-reduced-transparency: reduce), (pointer: coarse) {
  .frosted-glass {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-transparency: no-preference) and (pointer: fine) {
  .frosted-glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.content.frosted-glass {
  background: var(--surface-frosted-strong);
}

/* ─── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  :where(.feature-card, .game-card, .app-card, .storeItem):hover {
    transform: none;
  }
}

/* ===== nav.css ===== */
/*
 * nav.css — top navigation. Extracted from top_nav.inc.php.
 */

.top-navigation {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 2px solid var(--brand-blue);
  margin-bottom: var(--space-m);
  padding: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  border-radius: var(--radius);
}

.hamburger-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  color: var(--brand-blue);
  transition: color 0.3s ease;
  border-radius: 6px;
}

.hamburger-menu:hover {
  color: var(--brand-green);
}

.hamburger-icon,
.close-icon {
  position: absolute;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.close-icon {
  opacity: 0;
  transform: rotate(90deg);
}

.hamburger-menu[aria-expanded="true"] .hamburger-icon {
  opacity: 0;
  transform: rotate(-90deg);
}

.hamburger-menu[aria-expanded="true"] .close-icon {
  opacity: 1;
  transform: rotate(0deg);
}

.top-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.top-navigation li {
  margin: 0;
  padding: 0;
}

.top-navigation a {
  display: block;
  padding: 15px 20px;
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
  border-bottom: 3px solid transparent;
}

.top-navigation a svg {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.top-navigation a:hover,
.top-navigation a:focus {
  background-color: #f0f7ff;
  color: var(--brand-green);
  border-bottom-color: var(--brand-green);
}

.top-navigation a.active {
  background-color: #e0efff;
  color: var(--brand-green);
  border-bottom-color: var(--brand-green);
  font-weight: 600;
}

.top-navigation a:active {
  background-color: #e0efff;
}

@media (max-width: 64rem) {
  .top-navigation a {
    padding: 10px;
  }
}

@media (max-width: 37.5rem) {
  .hamburger-menu {
    display: flex;
    background-color: #ffffff;
    border-radius: 50%;
    padding: 10px;
  }

  .top-navigation {
    padding-bottom: 0;
  }

  .top-navigation .nav-menu {
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    width: 100%;
  }

  .top-navigation .nav-menu.menu-open {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0.3s ease-in, opacity 0.3s ease-in;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .top-navigation a {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
  }

  .top-navigation li:first-child a {
    border-radius: 0;
  }

  .top-navigation li:last-child a {
    border-bottom: none;
    border-radius: 0 0 var(--radius) var(--radius);
  }
}

/* ===== footer.css ===== */
/*
 * footer.css — footer and dwellings. Extracted from footer_nav.inc.php.
 */

.footer-container {
  position: relative;
}

#footer {
  background-color: var(--brand-green);
  padding: 3em 2em 0 2em;
}

.footer-dwellings-container {
  background-image: linear-gradient(to top, var(--brand-green), var(--brand-green) 25%, transparent 25%);
}

#Dwellings {
  max-width: 62.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  margin: 0 auto;
}

#Dwellings.lazy-loaded {
  background-image: var(--bg-image);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l);
  max-width: 62.5rem;
  margin: 0 auto var(--space-l);
}

.footer-column h4 {
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 1em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-column li {
  margin: 0 0 0.6em;
}

.footer-column a {
  color: rgba(255, 255, 255, 0.76) !important;
  text-decoration: none;
  font-size: 0.95em;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.footer-column a:hover {
  color: rgba(255, 255, 255, 1) !important;
  opacity: 1;
  text-decoration: underline;
}

.footer-bottom {
  text-align: center;
  padding-top: 1.5em;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85em;
  margin: 0;
}

@media screen and (max-width: 48rem) {
  .footer-dwellings-container {
    background-image: linear-gradient(to top, var(--brand-green), var(--brand-green) 25%, transparent 25%);
  }

  .footer-nav {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }

  .footer-column {
    text-align: center;
  }

  .footer-column h4 {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ===== pages.css ===== */
/*
 * pages.css
 *
 * Page-specific and shell overrides. Scoped by body id/class where possible.
 * Revert: remove this <link>.
 */

/* ─── Legacy shell overrides (from common_scripts_and_styles.inc.php) ─────── */
.main {
  max-width: var(--content-max);
}

/* The legacy bundle sets `html, body { height: 100% }` and site.supplement.css
   gives body its own overflow, which makes body a scroll container fixed at
   viewport height. Body then scrolls the content while the viewport separately
   scrolls body's padding, so the page has two scrollbars. Scrolling belongs to
   the viewport: body keeps its intrinsic height and no overflow of its own.
   Horizontal overflow is still clipped because a non-visible overflow on the
   root element propagates to the viewport. */
html {
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
}

body {
  overflow: visible !important;
  height: auto !important;
  padding-top: 2em !important;
  padding-bottom: 4em !important;
  background-image: url('https://mgnt-app-assets.s3.amazonaws.com/MASHPlus/site/img/bkgr/BackgroundLandscape.scale-100.jpg') !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Reproduce the content column that .main gave the hoisted site header/nav.
   .main is content-box, so its width is the width these children occupied. */
body > header,
body > nav.top-navigation {
  inline-size: min(80%, var(--content-max));
  margin-inline: auto;
}

/* Individual games inject a border-box reset, so .main's declared width
   includes its legacy padding instead of describing the content column. */
body:where(:has(.back-to-games)) > header,
body:where(:has(.back-to-games)) > nav.top-navigation {
  inline-size: calc(min(80%, var(--content-max)) - 2em);
}

@media (max-width: 48rem) {
  body:where(:has(.back-to-games)) > header,
  body:where(:has(.back-to-games)) > nav.top-navigation {
    inline-size: calc(min(80%, var(--content-max)) - 20px);
  }
}

@media (max-width: 37.5rem) {
  body > header,
  body > nav.top-navigation {
    inline-size: auto;
    margin-inline: 10px;
  }
}

@media (max-width: 30rem) {
  body > header,
  body > nav.top-navigation {
    margin-inline: 5px;
  }
}

/* Play MASH already has a full-width fixed nav; preserve that geometry. */
body#PlayMASH > nav.top-navigation {
  margin-inline: 0;
}

/* Logo sprite override (games, blog, etc.) */
#MASH.logo {
  max-width: 37.5rem;
  width: 100%;
  height: 3em;
  background: transparent url('//mgnt-app-assets.s3.amazonaws.com/MASHPlus/site/img/logos/MASHPlusLogoText.scale-100.png?v=20250828') no-repeat 0 0;
  background-size: contain;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  margin: 0 0 0.67em 0;
  padding: 0;
}

/* Frosted panel padding variants */
.frosted-glass {
  padding: var(--space-m);
}

body#home .frosted-glass {
  padding: 0;
}

body#games .frosted-glass,
body.editorial:not(#home) .intro.frosted-glass {
  padding: var(--space-m);
  margin-bottom: var(--space-m);
}

body#games .content.frosted-glass {
  padding: var(--space-s);
}

/* ─── Shared utilities ────────────────────────────────────────────────────── */
.intro {
  position: relative;
}

.gasns-m {
  width: 20rem;
  margin: 0 auto;
  padding: var(--space-2xs);
}

.gasns-r {
  width: auto;
  margin: 0 auto;
  padding: var(--space-2xs);
}

.xpromo-container {
  width: auto;
  overflow: hidden;
}

.responsive-ad-container {
  background-color: rgb(204, 208, 209);
}

.responsive-ad-container .inner-content ins {
  margin: 0 auto;
}

/* Google ad dimensions reserve space before the ad request to prevent CLS. */
.mashapp-responsive {
  width: 20rem;
  height: 3.125rem;
  min-height: 3.125rem;
  margin: 1.25rem auto;
  display: block;
}

@media (min-width: 31.25rem) {
  .mashapp-responsive {
    width: 29.25rem;
    height: 3.75rem;
    min-height: 3.75rem;
  }
}

@media (min-width: 50rem) {
  .mashapp-responsive {
    width: 100%;
    height: 5.625rem;
    min-height: 5.625rem;
  }
}

/* ─── Homepage (body#home) ────────────────────────────────────────────────── */
body#home .xpromo-container {
  min-height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

body#home .newsletter-signup,
body#blog .newsletter-signup {
  margin-top: var(--space-xl);
  min-height: 6.25rem;
}

body#home .mash-download-ad {
  min-height: 5.625rem;
  margin-block: var(--space-m);
}

body#home .social-widgets,
body#home .widgets {
  min-height: 3.125rem;
}

body#home .facebook-like-container {
  min-height: 1.75rem;
}

body#home .home-hero-img {
  margin-bottom: var(--space-s);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1200 / 768;
  width: 100%;
  position: relative;
}

body#home .home-hero-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 768;
}

body#home .home-hero-img a {
  display: block;
  width: 100%;
}

body#home .feature-grid-section {
  margin-bottom: var(--space-m);
}

body#home .feature-grid-section h3 {
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-green);
  margin-bottom: var(--space-s);
}

body#home .feature-card {
  background: linear-gradient(180deg, rgba(174, 245, 255, 0.45) 0%, rgba(174, 245, 255, 0.75) 100%);
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-sm);
  padding: var(--space-m);
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  text-decoration: none;
  color: inherit;
}

body#home .feature-card:hover {
  box-shadow: 0 4px 16px rgba(45, 132, 248, 0.4);
  background: linear-gradient(180deg, rgba(246, 254, 255, 0.75) 0%, rgba(203, 249, 255, 0.95) 100%);
  border-color: #fff;
}

body#home .primary-feature-card {
  background: linear-gradient(180deg, rgba(235, 254, 241, 0.65) 0%, rgba(211, 250, 224, 0.85) 100%);
  border-color: #fff;
}

body#home .feature-card .icon {
  font-size: 2.4em;
  color: rgb(13, 94, 200);
  flex-shrink: 0;
  width: 3rem;
  text-align: center;
  padding-top: var(--space-3xs);
}

body#home .feature-card .text {
  font-size: 1.2em;
  line-height: 1.4;
  color: #334;
}

body#home .feature-card .text strong {
  color: var(--brand-blue);
  font-weight: 600;
}

@media (max-width: 37.5rem) {
  body#home .feature-card {
    padding: var(--space-s);
    gap: var(--space-s);
  }

  body#home .feature-card .icon {
    font-size: 2em;
    width: 2.5rem;
  }

  body#home .feature-card .text {
    font-size: 1.1em;
    line-height: 1.3;
  }
}

/* ─── Games page (body#games) ─────────────────────────────────────────────── */
body#games .games-page {
  /* wrapper — no extra rules needed */
}

body#games .games-grid {
  padding: var(--space-m) 0;
}

body#games .game-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}

body#games .game-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

body#games .game-card-image {
  width: 100%;
  height: 12.5rem;
  background-color: var(--brand-blue);
  background-image: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-green) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4em;
  color: white;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

body#games .game-card-image-tic-tac-toe { background-image: url('/games/tic-tac-toe/TicTacToe.jpg'); }
body#games .game-card-image-four-in-a-row { background-image: url('/games/four-in-a-row/FourInARow.jpg'); }
body#games .game-card-image-dots-and-boxes { background-image: url('/games/dots-and-boxes/DotsAndBoxes-CardHeader.jpg'); }
body#games .game-card-image-cootie-catcher { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
body#games .game-card-image-coloring { background-image: url('/games/coloring/thumbnails/shack.jpg'); }
body#games .game-card-image-snowman { background-image: url('/games/snowman/SnowmanCardHeader.jpg'); }
body#games .game-card-image-mash { background-image: url('/games/mash/MASH-Card-Header.jpg'); }

body#games .game-card-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

body#games .game-card:hover .game-card-image::before {
  opacity: 1;
}

body#games .game-card-content {
  padding: var(--space-m);
}

body#games .game-card h3 {
  font-size: 1.5em;
  color: var(--brand-blue);
  margin-bottom: var(--space-2xs);
  border-bottom: 2px solid var(--brand-blue);
  padding-bottom: var(--space-2xs);
}

body#games .game-card p {
  color: #666;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

@media (max-width: 48rem) {
  body#games .game-card-image {
    height: 9.375rem;
    font-size: 3em;
  }
}

/* ─── Individual games ───────────────────────────────────────────────────── */
body:has(.back-to-games) {
  background-color: transparent;
}

body:has(.back-to-games) .xpromo-container {
  margin-top: 0.625rem;
  padding: 0.5rem !important;
}

.back-to-games {
  margin: 1.25rem auto;
  max-width: 75rem;
  padding: 0 1.25rem;
}

.back-to-games a {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  background: var(--brand-blue);
  color: white;
  text-decoration: none;
  border-radius: 0.3125rem;
  font-size: 1em;
  transition: background 0.3s ease;
}

.back-to-games a:hover {
  background: #1d6fd8;
  text-decoration: none;
}

/* ─── Apps page ───────────────────────────────────────────────────────────── */
.apps-grid {
  padding-left: 0 !important;
  margin-top: 0 !important;
}

.app-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: var(--space-m);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.app-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  height: 100%;
}

.app-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.app-icon {
  width: 7.5rem;
  height: 7.5rem;
  object-fit: cover;
  margin-bottom: var(--space-s);
}

.app-name {
  font-size: 1.5em;
  color: #222 !important;
  margin: 0 0 12px 0;
  font-weight: 600;
  line-height: 1.2;
}

.app-description {
  color: #333;
  font-size: 0.95em;
  line-height: 1.5;
  margin: 0 0 var(--space-m) 0;
  flex-grow: 1;
  text-align: left !important;
}

.app-download-btn {
  display: inline-block;
  margin-top: var(--space-2xs);
  pointer-events: none;
}

.app-download-btn img {
  height: 2.5rem;
  width: auto;
  display: block;
}

body.editorial .intro h1 {
  margin-bottom: var(--space-m);
}

@media (max-width: 48rem) {
  .app-icon {
    width: 6.25rem;
    height: 6.25rem;
  }

  .app-name {
    font-size: 1.3em;
  }
}

@media (max-width: 30rem) {
  .app-card {
    padding: var(--space-s);
  }

  .app-icon {
    width: 5.625rem;
    height: 5.625rem;
  }

  .app-name {
    font-size: 1.2em;
  }

  .app-description {
    font-size: 0.9em;
  }
}

/* ─── Store download grid ─────────────────────────────────────────────────── */
#store .storeItem {
  padding-bottom: 1em;
}

.storeItem {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius);
  padding: var(--space-m);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.storeItem:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.storeItem.primary {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #fff;
}

.storeItem.secondary {
  background: linear-gradient(135deg, rgba(45, 132, 248, 0.1), rgba(29, 135, 24, 0.1));
  border: 2px solid rgba(45, 132, 248, 0.3);
}

.storeItem p {
  margin: 0 0 var(--space-s) 0;
  color: #333;
  font-size: 0.95em;
  line-height: 1.5;
  text-align: left;
}

.storeItem a {
  text-align: left;
  display: inline-block;
}

.storeBtn.Mac,
.storeBtn#Mac {
  background-size: 75%;
  background-position: 50%;
}

@media (max-width: 48rem) {
  .storeItem {
    padding: var(--space-s);
  }
}

@media (max-width: 30rem) {
  .storeItem {
    padding: var(--space-s);
  }

  .storeItem p {
    font-size: 0.9em;
  }
}

/* ─── Printable page ──────────────────────────────────────────────────────── */
.printable-preview-img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

.download-button {
  display: inline-block;
  padding: 1.125rem 2.25rem;
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 50%, #229954 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4), 0 2px 5px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.2);
  margin: var(--space-m) 0;
}

.download-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.download-button:hover::before {
  left: 100%;
}

.download-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(46, 204, 113, 0.6), 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.download-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  position: relative;
  z-index: 1;
}

.pdf-icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: #fff;
}

.printable-item {
  text-align: center;
  padding: var(--space-m);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
}

.printable-item:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.printable-item h3 {
  margin: 0 0 var(--space-s) 0;
  font-size: 1.25rem;
  color: #333;
}

.printable-item .printable-preview-img {
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.printable-item a:hover .printable-preview-img {
  transform: scale(1.02);
}

.printable-item .download-button {
  width: 100%;
  max-width: 17.5rem;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  margin: var(--space-s) auto 0;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.download-button:hover .pdf-icon {
  animation: bounce 0.6s ease;
}

/* ─── MASH categories page ────────────────────────────────────────────────── */
.mash-categories-page .category-section {
  margin-bottom: 2.5rem;
}

.mash-categories-page .category-section h2 {
  border-bottom: 2px solid var(--brand-green);
  padding-bottom: 0.4em;
  margin-bottom: 1em;
}

.mash-categories-page .classic-card {
  background: linear-gradient(180deg, rgba(235, 254, 241, 0.65) 0%, rgba(211, 250, 224, 0.85) 100%);
  border: 2px solid #fff;
  border-radius: 6px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.12);
}

.mash-categories-page .classic-card h3 {
  font-size: 1.05em;
  margin: 0 0 0.4em;
  color: #1d5e1a;
}

.mash-categories-page .classic-card p {
  margin: 0;
  font-size: 0.95em;
  color: #334;
}

.mash-categories-page .cta-block {
  background: linear-gradient(180deg, rgba(174, 245, 255, 0.45) 0%, rgba(174, 245, 255, 0.75) 100%);
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  text-align: center;
  margin: 2.5rem 0;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.12);
}

.mash-categories-page .cta-block h2 {
  margin-top: 0;
  border: none;
}

.mash-categories-page .cta-buttons {
  display: flex;
  gap: var(--space-s);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-s);
}

.mash-categories-page .cta-btn {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  border-radius: 2.5rem;
  font-weight: 600;
  font-size: 1em;
  text-decoration: none;
}

.mash-categories-page .cta-btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff !important;
}

.mash-categories-page .cta-btn-secondary {
  background: #fff;
  color: var(--brand-blue);
  border: 2px solid var(--brand-blue);
}

/* ─── How to play page ────────────────────────────────────────────────────── */
html.how-to-play-mash-page {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html.how-to-play-mash-page {
    overflow-x: visible;
  }
}

body.how-to-play-mash-page .main {
  overflow: visible;
}

.section-leader-img {
  width: 100%;
  height: auto;
  display: block;
}

body.how-to-play-mash-page .frosted-glass {
  padding: var(--space-m);
}

body.editorial .hero-header-img {
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px -22px rgba(20, 20, 30, 0.38);
  margin-bottom: var(--space-l);
  aspect-ratio: 25 / 16;
}

body.editorial div.copy-holder > h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
  margin: 0 0 0.6rem 0;
}

body.editorial div.copy-holder > h1 + h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  color: var(--ink-soft);
  line-height: 1.3;
  margin: 0 0 1.5rem 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
  text-wrap: balance;
}

body.editorial div.copy-holder > h1 + h2::before {
  content: none;
}

body.editorial div.copy-holder p.content-meta small,
body.editorial div.copy-holder p.content-meta em {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  font-style: normal;
}

body.editorial div.content ol > li {
  padding-left: 2.8rem;
  margin-top: var(--space-l);
  padding-bottom: 0.4em;
}

body.editorial div.content ol > li::before {
  top: 0.05em;
}

body.editorial div.content ol > li > p {
  margin-bottom: 0.8em;
}

body.editorial div.content ol > li > p:first-of-type {
  font-weight: 600;
  font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.15rem);
  margin-bottom: 0.6em;
  color: var(--ink);
}

body.editorial div.content ol > li > ul {
  margin-top: 0.8em;
}

body.editorial div.content ol > li > ul li p {
  margin-bottom: 0.2em;
}

body.editorial .section-leader-img:not(.hero-header-img) {
  border-radius: 10px;
  box-shadow: 0 12px 32px -18px rgba(20, 20, 30, 0.3);
  margin: 0.8rem 0 1.4rem;
}

body.editorial .how-to-play-mash-what-you-need,
body.editorial .promoted.printable-mash-game {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;
  margin: 1.5rem 0 2rem;
}

body.editorial .how-to-play-mash-what-you-need p,
body.editorial .promoted.printable-mash-game p {
  border-left: none;
  background: none;
  padding-left: 0;
  border-radius: 0;
  margin-bottom: 0.6em;
}

body.editorial .how-to-play-mash-what-you-need-title,
body.editorial .promoted.printable-mash-game h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: normal;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
}

body.editorial .promoted.printable-mash-game h3::before {
  content: none;
}

body.how-to-play-mash-page .content {
  margin-top: var(--space-l);
}

body.editorial #gasns-ph-01,
body.how-to-play-mash-page .xpromo-container {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}

body.how-to-play-mash-page .newsletter-signup {
  margin-top: 2.5rem;
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule);
}

body.editorial .how-to-play-shell {
  display: grid;
  grid-template-columns: minmax(11.5rem, 15rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 2rem);
  align-items: start;
  max-width: min(90rem, 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

body.editorial .how-to-play-main {
  min-width: 0;
}

body.editorial .page-toc-aside {
  position: sticky;
  top: 5rem;
  align-self: start;
  z-index: 2;
  margin-top: var(--space-l);
  max-height: calc(100vh - 6rem);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 52rem) {
  body.editorial .page-toc-aside {
    position: static;
    top: auto;
    z-index: auto;
    margin-top: 0;
    max-height: none;
    overflow: visible;
    align-self: stretch;
  }

  body.editorial .how-to-play-shell {
    grid-template-columns: 1fr;
  }
}

body.editorial nav.page-toc {
  margin: 0 0 2.25rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}

@media (min-width: 52.01rem) {
  body.editorial .page-toc-aside nav.page-toc {
    margin-bottom: 0;
  }
}

body.editorial .page-toc__title {
  margin: 0 0 0.85rem;
  font-family: 'Inter', sans-serif;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

body.editorial ul.page-toc__list,
body.editorial ul.page-toc__sublist {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

body.editorial ul.page-toc__list > li {
  margin: 0.45rem 0 0;
}

body.editorial ul.page-toc__list > li:first-child {
  margin-top: 0;
}

body.editorial ul.page-toc__sublist {
  margin: 0.35rem 0 0 0.85rem;
  padding-left: 0.85rem;
  border-left: 2px solid color-mix(in oklab, var(--accent) 45%, transparent);
}

body.editorial nav.page-toc a {
  font-family: 'Inter', sans-serif;
  font-size: var(--step-0);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

@media (min-width: 52.01rem) {
  body.editorial .page-toc-aside nav.page-toc a {
    font-size: var(--step--1);
    line-height: 1.35;
  }
}

/* ─── Play MASH online (body#PlayMASH) ────────────────────────────────────── */
body#PlayMASH {
  overflow-x: hidden;
  max-width: 100vw;
}

body#PlayMASH .main.play-mash-online-free {
  max-width: var(--content-max);
  width: 100%;
  box-sizing: border-box;
  padding-inline: var(--space-s);
  padding-top: var(--space-l);
  border-radius: 0 0 12px 12px !important;
}

body#PlayMASH .gasns-r {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  min-height: 5.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

body#PlayMASH .newsletter-signup {
  padding-top: var(--space-l);
  border-top: 1px solid #ccc;
  min-height: 6.25rem;
}

body#PlayMASH .mash-game-download-button-container {
  min-height: 3.875rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

body#PlayMASH .download-printable-mash-btn-container {
  min-height: 3.125rem;
}

body#PlayMASH #AppWrapper {
  max-width: 100%;
  overflow-x: hidden;
}

body#PlayMASH .widgets {
  max-width: 100%;
  overflow-x: hidden;
  min-width: 6.875rem;
  min-height: 1.75rem;
}

body#PlayMASH header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 2.5rem;
}

body#PlayMASH .play-mash-online-free .sub-heading {
  margin-top: 0;
}

body#PlayMASH .play-mash-online-free h1 {
  margin-bottom: 0;
}

body#PlayMASH #IntentInterstitial {
  position: absolute;
  inset: 0 auto auto 0;
  right: 0;
  min-height: 37.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  background-image: url(https://mgnt-app-assets.s3.amazonaws.com/MASHPlus/mash_plus/img/skin/paper.jpg);
  background-repeat: repeat-y;
  border-radius: 12px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  z-index: 10;
}

body#PlayMASH #IntentInterstitial.fade-out {
  opacity: 0;
}

body#PlayMASH #MGNT_MASH_App {
  position: relative;
  min-height: 37.5rem;
  margin-bottom: var(--space-l);
}

body#PlayMASH #MGNT_MASH_App > iframe {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0s 0.5s;
}

body#PlayMASH #MGNT_MASH_App > iframe.fade-in {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-in-out, visibility 0s 0s;
}

body#PlayMASH #playButton {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 3.75rem;
  padding: 1.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  color: white;
  font-size: 2rem;
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body#PlayMASH #playButton:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

body#PlayMASH #loadingSpinner {
  width: 3.75rem;
  height: 3.75rem;
  border: 6px solid rgba(102, 126, 234, 0.2);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

body#PlayMASH .content {
  max-width: none;
  margin: 0;
  padding: var(--space-m);
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 40rem) {
  body#PlayMASH .gasns-r {
    min-height: 3.125rem;
  }

  body#PlayMASH header {
    flex-direction: column;
    display: none;
    visibility: hidden;
  }

  body#PlayMASH header .widgets {
    display: none;
    visibility: hidden;
  }

  body#PlayMASH .main.play-mash-online-free {
    padding-top: var(--space-s);
  }

  body#PlayMASH #MGNT_MASH_App,
  body#PlayMASH #IntentInterstitial {
    min-height: 25rem;
  }

  body#PlayMASH #playButton {
    padding: 1.25rem 2.5rem;
    font-size: 1.5rem;
    gap: var(--space-s);
  }

  body#PlayMASH #playButton .mash-icon {
    font-size: 1.375rem;
  }

  body#PlayMASH #loadingSpinner {
    width: 3.125rem;
    height: 3.125rem;
    border-width: 5px;
  }
}

/* ===== vanguard.css ===== */
/*
 * vanguard.css
 *
 * Sitewide surface-elevation layer. This file deliberately loads after the
 * foundation styles so removing its single <link> restores the previous UI.
 */

/* Font metric fallbacks keep the Google Fonts swap from moving the page. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 95%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root,
body.editorial {
  --accent: #0d5ec8;
  --accent-bright: #2d84f8;
  --accent-wash: color-mix(in oklab, var(--accent) 5%, #fff);
  --surface-tray: color-mix(in oklab, var(--accent) 9%, #fff);
  --hairline: color-mix(in oklab, var(--accent) 14%, transparent);
  --shadow-tint: rgb(12 34 78 / 0.26);
  --focus-ring: var(--ink);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
}

/* Inline icons share one optical box and inherit color from their context. */
.mash-icon {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  vertical-align: -0.125em;
}

/* The legacy bundle used Font Awesome private-use glyphs for article metadata.
   Masks keep those generated icons after the icon-font dependency is removed. */
.content-meta .date::before,
.content-meta .author::before {
  content: "";
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  margin-inline-end: var(--space-3xs);
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.content-meta .date::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208 34h-26V24a6 6 0 0 0-12 0v10H86V24a6 6 0 0 0-12 0v10H48a14 14 0 0 0-14 14v160a14 14 0 0 0 14 14h160a14 14 0 0 0 14-14V48a14 14 0 0 0-14-14M48 46h26v10a6 6 0 0 0 12 0V46h84v10a6 6 0 0 0 12 0V46h26a2 2 0 0 1 2 2v34H46V48a2 2 0 0 1 2-2m160 164H48a2 2 0 0 1-2-2V94h164v114a2 2 0 0 1-2 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208 34h-26V24a6 6 0 0 0-12 0v10H86V24a6 6 0 0 0-12 0v10H48a14 14 0 0 0-14 14v160a14 14 0 0 0 14 14h160a14 14 0 0 0 14-14V48a14 14 0 0 0-14-14M48 46h26v10a6 6 0 0 0 12 0V46h84v10a6 6 0 0 0 12 0V46h26a2 2 0 0 1 2 2v34H46V48a2 2 0 0 1 2-2m160 164H48a2 2 0 0 1-2-2V94h164v114a2 2 0 0 1-2 2'/%3E%3C/svg%3E");
}

.content-meta .author::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='m225.9 74.78-44.69-44.69a14 14 0 0 0-19.8 0L38.1 153.41a13.94 13.94 0 0 0-4.1 9.9V208a14 14 0 0 0 14 14h44.69a13.94 13.94 0 0 0 9.9-4.1L225.9 94.58a14 14 0 0 0 0-19.8M94.1 209.41a2 2 0 0 1-1.41.59H48a2 2 0 0 1-2-2v-44.69a2 2 0 0 1 .59-1.41L136 72.48 183.51 120ZM217.41 86.1 192 111.51 144.49 64l25.41-25.42a2 2 0 0 1 2.83 0l44.68 44.69a2 2 0 0 1 0 2.83'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='m225.9 74.78-44.69-44.69a14 14 0 0 0-19.8 0L38.1 153.41a13.94 13.94 0 0 0-4.1 9.9V208a14 14 0 0 0 14 14h44.69a13.94 13.94 0 0 0 9.9-4.1L225.9 94.58a14 14 0 0 0 0-19.8M94.1 209.41a2 2 0 0 1-1.41.59H48a2 2 0 0 1-2-2v-44.69a2 2 0 0 1 .59-1.41L136 72.48 183.51 120ZM217.41 86.1 192 111.51 144.49 64l25.41-25.42a2 2 0 0 1 2.83 0l44.68 44.69a2 2 0 0 1 0 2.83'/%3E%3C/svg%3E");
}

/* editorial.css loads after this layer and otherwise restores its dot marker. */
html body.editorial article.content .content-meta .author::before {
  content: "";
  margin-inline-end: var(--space-3xs);
}

/* Ensure the metric-adjusted fallback faces participate in the existing pair. */
html body.editorial :is(article.content, div.intro, div.content) {
  font-family: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html body.editorial :is(
  article.content header h1,
  .content-body h2,
  div.content h2,
  .content-body h3,
  div.content h3,
  div.copy-holder > h1,
  div.copy-holder > h1 + h2
) {
  font-family: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
}

/* Existing nested surfaces become one concentric tray/core treatment. */
article.content:not(.frosted-glass) {
  --surface-radius-outer: calc(var(--radius-lg) + var(--radius-lg));
  border-radius: var(--surface-radius-outer);
  background: color-mix(in oklab, var(--accent) 3%, #fff);
  box-shadow:
    0 0 0 1px var(--hairline),
    0 var(--space-m) var(--space-xl) calc(-1 * var(--space-s)) var(--shadow-tint);
}

/* The homepage and blog article shells control their inset so the nested curves
   cannot drift. Elsewhere the legacy .content padding still applies. */
body#home article.content:not(.frosted-glass),
body#blog article.content:not(.frosted-glass) {
  --surface-inset: var(--space-s);
  padding: var(--surface-inset);
}

body#home article.content > .frosted-glass {
  border-radius: calc(var(--surface-radius-outer) - var(--surface-inset));
}

.frosted-glass {
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.62);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Pages where content and frosted-glass are the same node use one surface. */
article.content.frosted-glass,
body#games .content.frosted-glass {
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px var(--hairline),
    inset 0 1px 0 rgb(255 255 255 / 0.62),
    0 var(--space-m) var(--space-xl) calc(-1 * var(--space-s)) var(--shadow-tint);
}

/* The LCP image shares the site's paper-surface edge treatment but never moves. */
body#home .home-hero-img {
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px var(--hairline),
    0 var(--space-m) var(--space-xl) calc(-1 * var(--space-s)) var(--shadow-tint);
  transition: none;
  transform: none;
}

/* The editorial prose rules reach the hero: a figure margin under the image and
   an underline border on the link push the anchor box 23px past the container,
   which clips anything pinned to its bottom edge. Match the boxes first. */
body#home .home-hero-img a {
  position: relative;
  display: block;
  line-height: 0;
  border-bottom: 0;
  text-decoration: none;
}

body#home .home-hero-img img {
  margin-bottom: 0;
}

/* The hero owns the whole first screen and is a link, so it has to look like
   one. The badge rides the anchor rather than the image, which keeps the <img>
   the largest paint and leaves the LCP candidate untouched. Its label tracks
   the A/B destination through the attribute the test already writes. */
body#home .home-hero-img a::after {
  position: absolute;
  inset-inline-end: var(--space-s);
  inset-block-end: var(--space-s);
  padding: var(--space-2xs) var(--space-s);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: #fff;
  background: var(--accent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.26),
    0 var(--space-2xs) var(--space-m) calc(-1 * var(--space-2xs)) var(--shadow-tint);
  transition: transform var(--dur-fast) var(--ease-spring);
}

body#home .home-hero-img a[data-ab-destination="online-game"]::after {
  content: "Play free ↗";
}

body#home .home-hero-img a[data-ab-destination="app-store"]::after {
  content: "Get the app ↗";
}

body#home .home-hero-img a:hover::after {
  transform: translateY(calc(-1 * var(--space-3xs)));
}

/* The homepage grid now uses quiet paper cards instead of cyan gradients. */
body#home .feature-card {
  position: relative;
  border: 0;                               /* depth is the ring, not a border */
  border-radius: var(--radius-lg);
  background: var(--accent-wash);
  background-clip: padding-box;
  box-shadow:
    0 0 0 var(--space-3xs) var(--surface-tray),
    0 0 0 calc(var(--space-3xs) + 1px) var(--hairline),
    0 var(--space-s) var(--space-l) calc(-1 * var(--space-s)) var(--shadow-tint);
  transition: none;
}

body#home .feature-card:hover {
  transform: none;
  background: var(--accent-wash);
  box-shadow:
    0 0 0 var(--space-3xs) var(--surface-tray),
    0 0 0 calc(var(--space-3xs) + 1px) var(--hairline),
    0 var(--space-s) var(--space-l) calc(-1 * var(--space-s)) var(--shadow-tint);
}

body#home .feature-card .icon {
  display: inline-grid;
  place-items: center;
  inline-size: calc(var(--space-xl) + var(--space-2xs));
  aspect-ratio: 1;
  padding: 0;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, #fff);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

body#home .feature-card .text {
  color: var(--ink);
  text-wrap: pretty;
}

/* The bolded phrase is what the card is about, so it carries the scan cue. */
body#home .feature-card:not(.primary-feature-card) .text strong {
  color: var(--accent);
  font-weight: 600;
}

/* Signature element: the only filled card and the only orchestrated motion. */
body#home .primary-feature-card,
body#home .primary-feature-card:hover {
  color: #fff;
  background: var(--accent);
  box-shadow:
    0 0 0 var(--space-3xs) color-mix(in oklab, var(--accent) 18%, #fff),
    0 0 0 calc(var(--space-3xs) + 1px) color-mix(in oklab, var(--accent) 42%, transparent),
    0 var(--space-s) var(--space-l) calc(-1 * var(--space-s)) var(--shadow-tint);
}

/* Eight co-equal cards is eight decisions. Spanning the grid puts the free
   game in a tier of its own and leaves the other seven as a link shelf. */
body#home .primary-feature-card {
  --arrow-size: calc(var(--space-l) - var(--space-2xs));
  --arrow-inset: var(--space-m);
  grid-column: 1 / -1;
  align-items: center;
  /* Derived from the arrow so the gutter and the glyph cannot drift apart. */
  padding-inline-end: calc(var(--arrow-inset) * 2 + var(--arrow-size));
  transition: transform var(--dur-base) var(--ease-spring);
}

body#home .primary-feature-card .text {
  font-size: var(--step-1);
}

body#home .primary-feature-card:hover {
  transform: translateY(calc(-1 * var(--space-3xs)));
}

body#home .primary-feature-card .icon {
  color: #fff;
  background: rgb(255 255 255 / 0.14);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.26);
}

body#home .primary-feature-card .text,
body#home .primary-feature-card .text strong {
  color: #fff;
}

/* On the full-width banner the arrow centres against the right edge, in the
   gutter reserved by padding-inline-end so no line of text runs under it. */
body#home .primary-feature-card::after {
  content: "↗";
  position: absolute;
  inset-inline-end: var(--arrow-inset);
  inset-block: 0;
  block-size: var(--arrow-size);
  margin-block: auto;
  display: inline-grid;
  place-items: center;
  inline-size: var(--arrow-size);
  aspect-ratio: 1;
  border-radius: 999px;
  color: #fff;
  background: rgb(255 255 255 / 0.14);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.26);
  transition: transform var(--dur-fast) var(--ease-spring);
}

body#home .primary-feature-card:hover::after {
  transform: translate(var(--space-3xs), calc(-1 * var(--space-3xs))) scale(1.05);
}

/* At one column the blue fill already marks the tier, so the arrow gives its
   gutter back rather than squeezing the copy onto five lines. */
@media (max-width: 37.5rem) {
  body#home .primary-feature-card {
    padding-inline-end: var(--space-s);
  }

  body#home .primary-feature-card::after {
    content: none;
  }
}

/* This heading introduces the page's second revenue action, so it reads as a
   section, not a label. Eyebrow scale is reserved for genuinely subordinate
   headings; hierarchy here follows intent rather than uniformity. */
body#home h3:has(+ .stores) {
  margin: var(--space-xl) 0 var(--space-s);
  font-family: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  font-size: var(--step-2);
  font-style: normal;
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  text-wrap: balance;
}

body#home .feature-grid-section h3 {
  color: var(--accent);
}

/* Navigation uses one contrast-safe action color. */
.top-navigation {
  border-bottom-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--hairline),
    0 var(--space-2xs) var(--space-m) calc(-1 * var(--space-s)) var(--shadow-tint);
}

.top-navigation a,
.hamburger-menu {
  color: var(--accent);
  transition: none;
}

.top-navigation a:hover,
.top-navigation a:focus,
.top-navigation a.active,
.hamburger-menu:hover {
  color: var(--accent);
  background-color: var(--accent-wash);
  border-bottom-color: var(--accent);
}

.top-navigation a:active {
  background-color: color-mix(in oklab, var(--accent) 10%, #fff);
}

/* Sitewide surface holdouts get the same navy-tinted material language. */
:is(.game-card, .app-card, .storeItem, .printable-item, .classic-card),
body#games .game-card {
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px var(--hairline),
    0 var(--space-s) var(--space-l) calc(-1 * var(--space-s)) var(--shadow-tint);
}

/* App cards stay planted while their icon moves. Game and store cards lift as
   one object, with a deeper shadow state that follows the raised surface. */
.app-card,
.app-card:hover {
  transform: none;
}

:is(.game-card, .storeItem) {
  transition: transform var(--dur-base) var(--ease-spring);
}

:is(.game-card, .storeItem):hover,
body#games .game-card:hover {
  transform: translateY(calc(-1 * var(--space-3xs)));
  box-shadow:
    0 0 0 1px var(--hairline),
    0 var(--space-m) var(--space-xl) calc(-1 * var(--space-s)) var(--shadow-tint);
}

.storeItem.primary,
.storeItem.secondary {
  border: 0;
  background: var(--accent-wash);
}

/* Only the artless card gets a gradient; the rest keep their photography. */
body#games .game-card-image {
  background-color: var(--accent);
}

body#games .game-card-image-cootie-catcher {
  background-image: linear-gradient(135deg, var(--accent), var(--accent-bright));
}

body#games .game-card h3 {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* The apps grid is a <ul> inside div.content, so the editorial prose rules
   reach into the cards: list markers, link underlines, and the display <h2>
   with its accent rule. Insulate the shelf from the article first. */
body.editorial div.content ul.apps-grid > li.app-card {
  margin-top: 0;
  padding: var(--space-m);                 /* restated so the list indent loses */
}

body.editorial div.content ul.apps-grid > li.app-card::before {
  content: none;
}

/* The whole card is one link, so the prose underline and the hover rule would
   both draw a line across it. The icon lift is the hover signal instead. */
body.editorial div.content .app-card-link,
body.editorial div.content .app-card-link:hover {
  text-decoration: none;
  border-bottom-color: transparent;
}

body.editorial div.content h2.app-name {
  margin: 0 0 var(--space-2xs);
  font-size: var(--step-1);
  font-style: normal;
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

body.editorial div.content h2.app-name::before {
  content: none;
}

/* A white core keeps the vivid icons from fighting a tinted card; the depth
   comes from the accent tray ring instead. */
.app-card,
.app-card:hover {
  background: #fff;
  box-shadow:
    0 0 0 var(--space-3xs) var(--surface-tray),
    0 0 0 calc(var(--space-3xs) + 1px) var(--hairline),
    0 var(--space-s) var(--space-l) calc(-1 * var(--space-s)) var(--shadow-tint);
}

/* The link is the real flex context, which is what lets the store badges land
   on a common baseline no matter how long the description runs. */
.app-card {
  align-items: stretch;
  text-align: left;
}

.app-card-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  border-radius: var(--radius);            /* rounds the focus ring to match */
}

.app-description {
  color: var(--ink);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

/* Trim the store badge so the icon stays the heaviest thing in the card. */
.app-download-btn {
  margin-top: auto;
}

.app-download-btn img {
  height: var(--space-l);
}

/* Signature moment for this page: the icon is the only thing that moves, and
   its shadow tracks the PNG alpha so the squircle mask stays intact. */
.app-icon {
  filter: drop-shadow(0 var(--space-2xs) var(--space-s) var(--shadow-tint));
  transition: transform var(--dur-base) var(--ease-spring);
}

.app-card-link:hover .app-icon {
  transform: translateY(calc(-1 * var(--space-3xs))) scale(1.03);
}

/* Replace the remaining purple and green actions with the blue system. */
body#PlayMASH #playButton,
.download-button,
.mash-categories-page .cta-btn-primary {
  color: #fff;
  background: var(--accent);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.26),
    0 var(--space-s) var(--space-l) calc(-1 * var(--space-s)) var(--shadow-tint);
  transition: transform var(--dur-base) var(--ease-spring);
}

body.editorial .content .download-button {
  color: #fff;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-spring);
}

body#PlayMASH #playButton {
  font-family: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body#PlayMASH #playButton:hover,
.download-button:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.26),
    0 var(--space-s) var(--space-l) calc(-1 * var(--space-s)) var(--shadow-tint);
}

body.editorial .content .download-button:hover {
  color: #fff;
  text-decoration: none;
}

.download-button::before {
  content: none;
}

.download-button:hover .pdf-icon {
  animation: none;
}

.mash-categories-page .classic-card,
.mash-categories-page .cta-block {
  border-color: transparent;
  background: var(--accent-wash);
  box-shadow:
    0 0 0 1px var(--hairline),
    0 var(--space-s) var(--space-l) calc(-1 * var(--space-s)) var(--shadow-tint);
}

.mash-categories-page .classic-card h3 {
  color: var(--accent);
}

.mash-categories-page .category-section h2 {
  border-bottom-color: var(--accent);
}

body.editorial .mash-categories-page .cta-btn-secondary {
  color: var(--accent);
  border-color: var(--accent);
  background: #fff;
}

/* Dark ink remains legible on white, washed, and filled-blue surfaces. */
:is(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--space-3xs);
}

@media (prefers-reduced-motion: reduce) {
  body#home .home-hero-img a:hover::after,
  body#home .primary-feature-card:hover,
  body#home .primary-feature-card:hover::after,
  body#PlayMASH #playButton:hover,
  .download-button:hover,
  .app-card-link:hover .app-icon,
  .game-card:hover,
  .storeItem:hover {
    transform: none;
  }
}

@media print {
  html,
  body {
    background-image: none !important;
    background-color: #fff !important;
  }

  article.content,
  .frosted-glass,
  .feature-card,
  .game-card,
  .app-card,
  .storeItem,
  .printable-item,
  .classic-card,
  .home-hero-img,
  .top-navigation {
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body#home .feature-card,
  .app-card {
    border: 1px solid #000;
  }

  .app-icon {
    filter: none !important;
  }

  body#home .feature-card .icon,
  body#home .primary-feature-card::after {
    color: #000;
    background: transparent;
    box-shadow: none;
  }

  /* The hero badge is a screen affordance; paper has nothing to click. The
     attribute selector matches the specificity of the rules that set it. */
  body#home .home-hero-img a[data-ab-destination]::after {
    content: none;
  }

  body#home .primary-feature-card .text,
  body#home .primary-feature-card .text strong {
    color: #000;
  }
}

/* ===== editorial.css ===== */
/*
 * editorial.css
 *
 * Editorial typography and article shell. Extracted from blog_article_styles.inc.php.
 * Revert: remove this <link> and restore the inline <style> in the include.
 */

/* ─── Article / content shell ─────────────────────────────────────────────── */
body.editorial :is(article.content, div.intro, div.content) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga", "calt", "ss01", "cv11";
}

/* ─── Back link ─────────────────────────────────────────────────────────── */
body.editorial article.content > p:first-child {
  margin-bottom: var(--space-l);
}

body.editorial article.content > p:first-child a {
  font-size: var(--step--1);
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
}

body.editorial article.content > p:first-child a:hover {
  color: var(--accent);
}

body.editorial div.content > p:has(> a[href="/"]) a {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
}

body.editorial div.content > p:has(> a[href="/"]) a:hover {
  color: var(--accent);
}

/* ─── Article header ────────────────────────────────────────────────────── */
body.editorial article.content header {
  margin-bottom: var(--space-l);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

body.editorial article.content header h1 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  font-weight: 500;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 0.8rem 0;
}

body.editorial article.content .content-meta {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin: 0;
}

body.editorial article.content .content-meta .author::before {
  content: "·";
  margin-right: 0.6em;
  font-weight: 400;
  letter-spacing: 0;
}

/* ─── Banner image ──────────────────────────────────────────────────────── */
body.editorial .content-body > img:first-child,
body.editorial .content-body img[style*="width: 100%"],
body.editorial .content > img:first-child,
body.editorial .content img[style*="width: 100%"] {
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px -22px rgba(20, 20, 30, 0.38);
  margin-bottom: 2.4em !important;
}

/* ─── Body copy measure ─────────────────────────────────────────────────── */
body.editorial .content-body,
body.editorial div.intro div.copy-holder {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

body.editorial .content-body > img:first-child,
body.editorial .content-body img[style*="width: 100%"],
body.editorial .content-body ul,
body.editorial .content-body ol {
  max-width: none;
  width: 100%;
}

/* ─── Body paragraphs ───────────────────────────────────────────────────── */
body.editorial :is(.content-body, div.intro, div.content) p {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 var(--rhythm) 0;
  hyphens: auto;
  hanging-punctuation: first last;
  text-wrap: pretty;
}

/* ─── Lede paragraph ────────────────────────────────────────────────────── */
body.editorial .content-body p.lede,
body.editorial p.lede {
  font-size: clamp(1.13rem, 1.02rem + 0.42vw, 1.28rem);
  line-height: 1.56;
  color: var(--ink);
  font-weight: 400;
}

body.editorial .content-body p.lede::first-letter,
body.editorial p.lede::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3.6em;
  font-weight: 500;
  font-style: normal;
  color: var(--accent);
  float: left;
  line-height: 0.82;
  margin: 0.05em 0.55rem -0.05em 0;
}

/* ─── H2 headings ───────────────────────────────────────────────────────── */
body.editorial :is(.content-body, div.content) h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 500;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 3.2rem 0 0.8rem 0;
  padding-top: 0;
  scroll-margin-top: 5rem;
  text-wrap: balance;
}

body.editorial :is(.content-body, div.content) h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--accent);
  margin-bottom: 0.85rem;
}

/* ─── H3 headings ───────────────────────────────────────────────────────── */
body.editorial :is(.content-body, div.content) h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  color: var(--ink-soft);
  margin: 2.2rem 0 0.6rem 0;
  scroll-margin-top: 5rem;
  text-wrap: balance;
}

/* ─── Lists ─────────────────────────────────────────────────────────────── */
body.editorial :is(.content-body, div.content) ul,
body.editorial :is(.content-body, div.content) ol {
  margin: 0 0 var(--rhythm) 0;
  padding-left: 1.6rem;
}

body.editorial :is(.content-body, div.content) ul {
  list-style: none;
  padding-left: 0;
}

body.editorial :is(.content-body, div.content) ul li {
  padding-left: 1.4rem;
  position: relative;
  line-height: 1.65;
}

body.editorial :is(.content-body, div.content) ul li::before {
  content: "▪";
  color: var(--accent);
  font-size: 0.6em;
  position: absolute;
  left: 0.1rem;
  top: 0.45em;
}

body.editorial :is(.content-body, div.content) ul li + li,
body.editorial :is(.content-body, div.content) ol li + li {
  margin-top: 0.55em;
}

body.editorial :is(.content-body, div.content) ol {
  counter-reset: ol-counter;
  list-style: none;
  padding-left: 0;
}

body.editorial :is(.content-body, div.content) ol li {
  counter-increment: ol-counter;
  padding-left: 2.4rem;
  position: relative;
  line-height: 1.65;
}

body.editorial :is(.content-body, div.content) ol li::before {
  content: counter(ol-counter, decimal-leading-zero) ".";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  top: 0.28em;
}

/* ─── List item strong terms ─────────────────────────────────────────────── */
body.editorial :is(.content-body, div.content) li strong {
  font-weight: 600;
  color: var(--ink);
}

/* ─── Inline strong ─────────────────────────────────────────────────────── */
body.editorial :is(.content-body, div.content) strong {
  font-weight: 600;
  color: var(--ink);
}

/* ─── Tip paragraphs ────────────────────────────────────────────────────── */
body.editorial :is(.content-body, div.content) p:has(> strong:first-child) {
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
  background: linear-gradient(to right, var(--bg-card) 0%, transparent 100%);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

/* ─── Links ─────────────────────────────────────────────────────────────── */
body.editorial :is(.content-body, div.content, div.intro) a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent);
  text-underline-offset: 0.18em;
  transition: color 0.15s, text-decoration-color 0.15s, text-decoration-thickness 0.15s;
}

body.editorial :is(.content-body, div.content, div.intro) a:hover {
  color: var(--accent);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}

/* ─── Horizontal rule ────────────────────────────────────────────────────── */
body.editorial :is(.content-body, div.content) hr {
  border: none;
  width: 64px;
  height: 2px;
  background: var(--accent);
  margin: var(--space-xl) auto;
  display: block;
}

body.editorial :is(.content-body, div.content) hr + p {
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-top: 0;
}

body.editorial :is(.content-body, div.content) hr + p:has(> strong:first-child) {
  border-left: none;
  padding-left: 0;
  background: none;
}

/* ─── Ad + newsletter separators ────────────────────────────────────────── */
body.editorial article.content .mashapp-responsive,
body.editorial article.content .newsletter-signup {
  margin-top: 2.5rem;
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule);
}