html, body{
  margin: 0;
  padding: 0;
  width: 100%;
}


h2, .h2 {margin-top: 0px;margin-bottom: 7px;font-size: 14pt;font-weight: 700;color: #c60400;font-family: Helvetica;}h3, .h3 {margin-top: 0px;margin-bottom: 2px;font-size: 18pt;font-weight: 700;color: #000000;font-family: Helvetica;text-decoration: none;}h4, .h4 {margin-top: 0px;margin-bottom: 7px;font-size: 30pt;font-weight: 700;color: #081b41;font-family: Helvetica;}h5, .h5 {margin-top: 8px;margin-bottom: 5px;font-size: 28pt;font-weight: 700;color: #c60400;font-family: Helvetica;text-decoration: none;}h6, .h6 {margin-top: 8px;margin-bottom: 5px;font-size: 24pt;font-weight: 700;color: #db0f04;font-family: Helvetica;text-decoration: none;}



    



/* ================================
   MR STEVE'S FAIR GAMES – PAGE FRAME
   Background: #071d48
   ================================= */

/* Recommended global */
*,
*::before,
*::after{
  box-sizing: border-box;
}

.msfg-wrap{
  /* Page background */
  --page: #071d48;

  /* Logo-matching palette */
  --red:   #da0200;   /* darker solid fair red */
  --gold1: #f6c445;   /* warm gold */
  --gold2: #ffdf7a;   /* brighter gold */
  --cream: #fff1d7;   /* inner panel */
  --ink:   #1b1b1b;

  /* Accent blue (matches “GAMES” vibe if you use it in buttons) */
  --blue1: #0aa0d8;
  --blue2: #1cc4ff;

  background:
    radial-gradient(900px 500px at 50% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), transparent 30%),
    var(--page);

  /* ✅ Equal padding left/right on mobile + notch support */
  padding-top: clamp(16px, 3vw, 48px);
  padding-bottom: clamp(16px, 3vw, 48px);
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* ✅ Shared container = same centre line for logo + frame */
.msfg-container{
  width: min(1200px, 100%);
  margin: 0 auto;

  display: grid;
  justify-items: center; /* ensures perfect visual centring */
  gap: clamp(12px, 2.6vw, 24px);
}

/* ======================
   LOGO ABOVE FRAME
   ====================== */

.msfg-logo{
  width: 100%;
  display: grid;
  justify-items: center;
}

.msfg-logo img{
  width: 80%;          /* ✅ always 75% of the frame/container */
  max-width: 100%;
  height: auto;
  display: block;


}

/* ======================
   MAIN FRAME
   ====================== */

.msfg-frame{
  width: 100%;
  position: relative;

  /* ✅ badge-like corners (elliptical rounding) */
  border-radius: clamp(20px, 2.4vw, 34px) / clamp(16px, 2.0vw, 26px);

  /* space for border + lights */
  padding: clamp(12px, 1.8vw, 18px);

  box-shadow: 0 28px 60px rgba(0,0,0,.45);
}

/* Outer border: solid red + gold ring + 3D bevel */
.msfg-frame::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--red);

  box-shadow:
    /* outer depth */
    0 10px 22px rgba(0,0,0,.22),

    /* bevel highlight (top/left) */
    inset 0 3px 0 rgba(255,255,255,.22),
    inset 3px 0 0 rgba(255,255,255,.14),

    /* bevel shadow (bottom/right) */
    inset 0 -5px 0 rgba(0,0,0,.28),
    inset -5px 0 0 rgba(0,0,0,.18),

    /* thin dark outline like the logo */
    inset 0 0 0 clamp(4px, .6vw, 6px) rgba(0,0,0,.35),

    /* gold ring */
    inset 0 0 0 clamp(8px, 1.0vw, 10px) rgba(246,196,69,.92);

  z-index: 0;
}

/* Inner cream panel */
.msfg-frame::after{
  content:"";
  position:absolute;
  inset: clamp(14px, 2.2vw, 22px);

  /* match badge feel */
  border-radius: clamp(16px, 2.0vw, 26px) / clamp(12px, 1.6vw, 20px);


background: #fef1d7;


 

  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.12),
    inset 0 18px 20px rgba(255,255,255,.35);

  z-index: 1;
}

/* Marquee lights around the inside */
.msfg-lights{
  position:absolute;
  inset: clamp(6px, 1.2vw, 10px);
  border-radius: calc(clamp(20px, 2.4vw, 34px) - 6px) / calc(clamp(16px, 2.0vw, 26px) - 6px);
  z-index: 2;
  pointer-events:none;




 background:
    repeating-linear-gradient(90deg,
      rgba(255,224,120,.95) 0 10px,
      rgba(255,224,120,.95) 10px 12px,
      transparent 12px 28px
    ),
    repeating-linear-gradient(90deg,
      rgba(255,224,120,.95) 0 10px,
      rgba(255,224,120,.95) 10px 12px,
      transparent 12px 28px
    ),
    repeating-linear-gradient(0deg,
      rgba(255,224,120,.95) 0 10px,
      rgba(255,224,120,.95) 10px 12px,
      transparent 12px 28px
    ),
    repeating-linear-gradient(0deg,
      rgba(255,224,120,.95) 0 10px,
      rgba(255,224,120,.95) 10px 12px,
      transparent 12px 28px
    );
 

  background-size:
    100% 10px,
    100% 10px,
    10px 100%,
    10px 100%;
  background-position:
    0 0,
    0 100%,
    0 0,
    100% 0;
  background-repeat: no-repeat;

  filter: drop-shadow(0 0 6px rgba(255,224,120,.45));
  opacity: .95;
}

/* ======================
   CONTENT LAYER
   ====================== */

.msfg-header,
.msfg-content{
  position: relative;
  z-index: 3;
  color: var(--ink);
}

.msfg-header{
  text-align: center;
  padding: clamp(14px, 2.2vw, 22px) clamp(14px, 2.2vw, 22px) 10px;
}

.msfg-header h1{
  margin: 0;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 34px);
  text-shadow:
    0 2px 0 rgba(255,255,255,.6),
    0 3px 10px rgba(0,0,0,.15);
}

.msfg-header p{
  margin: 8px 0 0;
  opacity: .85;
  font-size: clamp(14px, 1.6vw, 16px);
}

.msfg-content{
  padding: 25px clamp(20px, 3vw, 32px) clamp(22px, 3vw, 36px);
  display: grid;
  gap: 14px;
}

/* Buttons */
.msfg-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 1px;
}

.msfg-btn{
  display:inline-block;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #1a1206;

  background: linear-gradient(180deg, var(--gold2), var(--gold1));
  box-shadow:
    0 14px 22px rgba(0,0,0,.20),
    inset 0 0 0 2px rgba(0,0,0,.18);
}

.msfg-btn:hover{ transform: translateY(-1px); }

.msfg-btn--alt{
  color: #fff;
  background: linear-gradient(180deg, var(--blue2), var(--blue1));
  box-shadow:
    0 14px 22px rgba(0,0,0,.20),
    inset 0 0 0 2px rgba(0,0,0,.20);
}

/* Mobile: buttons become full width */



@media (max-width: 520px){
  .msfg-btn{ width: 100%; text-align: center; }

 
  .msfg-image-grid{
    grid-template-columns: 1fr;
  }
  .msfg-image-grid2{
    grid-template-columns: 1fr;
  }
}









.msfg-image-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 2vw, 18px);
}

.msfg-image-grid img{
  width: 100%;
  height: 260px;              /* 👈 set visual height */
  object-fit: contain;        /* 👈 show whole image */
  object-position: center;
  background: #fff7ea;        /* matches inner frame */
  padding: 10px;              /* breathing room */
  display: block;

  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}


.msfg-image-grid3{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 2vw, 18px);
}

.msfg-image-grid3 img{
  width: 100%;
  height: 395px;              /* 👈 set visual height */
  object-fit: contain;        /* 👈 show whole image */
  object-position: center;
  background: #fff7ea;        /* matches inner frame */
  padding: 10px;              /* breathing room */
  display: block;

   border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}


.msfg-image-grid4{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 2vw, 18px);
}

.msfg-image-grid4 img{
  width: 100%;
  height: 655px;              /* 👈 set visual height */
  object-fit: contain;        /* 👈 show whole image */
  object-position: center;
  background: #fff7ea;        /* matches inner frame */
  padding: 10px;              /* breathing room */
  display: block;

  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}




/* mobile */
@media (max-width: 599px){
  .msfg-image-grid{
    grid-template-columns: 1fr;
  }

  .msfg-image-grid img{
    height: 220px;
  }
  .msfg-image-grid3{
    grid-template-columns: 1fr;
  }

  .msfg-image-grid3 img{
    height: 230px;
  }
    .msfg-image-grid4 img{
    height: 195px;
  }
  
}








/* Tablet */
@media (min-width: 600px) and (max-width: 1024px){
  .msfg-image-grid{
    grid-template-columns: 1fr;
  }

  .msfg-image-grid img{
    height: 300px;
  }
  .msfg-image-grid3{
    grid-template-columns: 1fr;
  }

  .msfg-image-grid3 img{
    height: 510px;
  }
    .msfg-image-grid4 img{
    height: 420px;
  }
  
}









.msfg-image-grid2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 2vw, 18px);
}

/* images behave nicely */
.msfg-image-grid2 img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}







/* ======================
   BOTTOM MENU BAR
   ====================== */

.msfg-bottom-nav{
  background: #071d48;
  padding: 2px 10px 26px;
  margin-top: clamp(-12px, -1.2vw, -6px);


  
}


/* align with frame */
.msfg-bottom-inner{
  width: min(1176px, 98%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1.6vw, 14px);
}

/* buttons */
.msfg-nav-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  text-align: center;
  padding: 8px 6px;

  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: .4px;
  font-size: clamp(13px, 1.4vw, 15px);

  color: #1a1206;
  text-decoration: none;

  background: linear-gradient(180deg, #ffdf7a, #f6c445);

  /* ✅ red border added */
  border: 5px solid #da0200;
  border-radius: 14px;

  box-shadow:
    0 10px 18px rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(255,255,255,.35);

  transition: transform .15s ease, filter .15s ease;
}

/* icon sizing */
.msfg-nav-btn .icon{
  font-size: 1.1em;
  line-height: 1;
}

/* hover */
.msfg-nav-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* active page */
.msfg-nav-btn.active{
  background: linear-gradient(180deg, #1cc4ff, #0aa0d8);
  color: #ffffff;
   border-color: #da0200;
}

/* ======================
   RESPONSIVE
   ====================== */

@media (max-width: 720px){
  .msfg-bottom-inner{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 420px){
  .msfg-bottom-inner{
    grid-template-columns: repeat(2, 1fr);
  }
}