@media only screen and (max-width: 767px) {
	.wrap { max-width:88%; width:100%; margin:0 auto; padding-left:10px; padding-right:10px; }
	#header { position:fixed; top:30px; left:0; right:0; min-height: 50px; z-index: 11; height:50px; width: 100%; scroll-behavior: smooth; padding-left:5px; padding-right:5px; max-width:100%; margin:0 auto; }
	#header.navhide { top:30px; }
	#header.navshow { top:30px; }
	.copyright { font-size: 19px; }
	.aboutimage { max-width: 100%; display: flex; align-items: center; justify-content: center; }	
	.cols { *zoom:1; margin-left:-30px; margin-right:-30px; clear:both; }
	.cols:after {content:""; display:table; clear:both; }
	.cols .col { float:left; min-height:1px; padding-left:10px; padding-right:10px; }
	.cols1 .col { width:100%; padding-bottom:20px; }
	.cols2 .col { width:100%; padding-bottom:20px; }
	.cols3 .col { width:100%; padding-bottom:20px; }
	.cols4 .col { width:25%; }
	.cols5 .col { width:100%; }
	.digger-container { float:left; width:100%; margin: 0px 0px 0px 0px; display:none; }
	.footer { width:100%; margin:0 auto; padding-bottom: 10px; text-align:center; }
	.copyright { font-size: 17px; color: #00aeef; margin: 0 0 0 0; padding: 50px 10px 0 10px; text-align: center; }
	.copyright a { display: inline-block; color: #fff200; text-decoration: none; font-family: 'Gadugi'; }
	.copyright a:hover { color: #fff200; }
	.default-grid.cols3 .col { width:100%; }
	.default-grid.cols3 .col:nth-child(3) { clear:left; }
	.logocol { padding: 19px 0 20px; }
	.welcome-box { padding: 0; margin-bottom: 40px; }
	.welcome-info .welcome-content { float: none; width: auto; margin-bottom: 30px; }
	.welcome-info .welcome-map { float: none; width: auto; padding: 0; }
	.welcome-info p { margin-bottom: 20px; }
	.welcome-info h1 { margin-bottom: 5px; }
	.quicksocial-section { padding: 30px 0; }
	.links-box li h3 { font-size: 18px; }
	.link img { margin-top: 6px; }
	.link { margin-bottom: 20px; }
	#footer { padding: 25px 0 40px; }
	.social-links a { -webkit-transform: scale(0.5); transform: scale(0.5); margin: 0 -10px; }
	.footer-logo { width: 70px; }
	button-order { background-color: #bf1e2e; font-family: 'InsaniburgerwithCheese', Arial, Helvetica, sans-serif; text-transform:uppercase;
	color: #fff; text-align:center; font-size:40px; font-weight:bold; padding: 7px 10px 11px 10px; margin: 5px 0 10px 0; cursor: pointer; 
	width: 100%; border-radius:10px; border: solid 2px #fff; }
	button-order:hover { opacity:1; background-color: #36749a; }
	.blank-box { width: 100%; height: 50px; }
	nav.menu {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: grid;
    
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(4px);
    justify-items: stretch;
    align-items: stretch;
  }

  nav.menu > div {
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1; /* keeps buttons perfectly square */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .menu-icon {
    width: 100%;
    height: 50%;
    border: 0.3vw solid #fff; /* fluid white outline */
    border-radius: 0.5vw;
    object-fit: contain;
  }
  
  /* Meeple that follows the active button */
.meeple {
  position: relative;
  width: 40px;
  height: auto;
  top: -25px;
  transform: translateX(-50%);
  transition: left 0.5s ease, top 0.5s ease;
  pointer-events: none;
}
}

/* Bounce animation */
@keyframes bounce {
  0%   { transform: translateX(-50%) translateY(0); }
  30%  { transform: translateX(-50%) translateY(-15px); }
  60%  { transform: translateX(-50%) translateY(0); }
  80%  { transform: translateX(-50%) translateY(-7px); }
  100% { transform: translateX(-50%) translateY(0); }
}

.meeple.bouncing {
  animation: bounce 0.5s ease;
}

/* =TOOLTIP
========================================================================================*/

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 80px;
  background-color: #36749a;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 5px;
  font-family: 'Montserrat';
  font-size: 11px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext {
  width: 80px;
  bottom: -30%;
  left: 50%;
  margin-left: -40px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #36749a transparent;
}

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 0.8;
}

@media (max-width: 480px) {

	button-order { background-color: #bf1e2e; font-family: 'InsaniburgerwithCheese', Arial, Helvetica, sans-serif; text-transform:uppercase;
	color: #fff; text-align:center; font-size:30px; font-weight:bold; padding: 7px 10px 11px 10px; margin: 5px 0 10px 0; cursor: pointer; 
	width: 100%; border-radius:10px; border: solid 2px #fff; }
	button-order:hover { opacity:1; background-color: #36749a; }	  
      nav.menu {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        display: grid;
        grid-template-columns: repeat(8, 1fr); /* 8 icons in one row */
        width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(0,0,0,0);
        backdrop-filter: blur(4px);
      }

      nav.menu > div {
        margin: 0 !important;
        padding: 0 !important;
        aspect-ratio: 1 / 1; /* square cells */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }

      .menu-icon {
        width: 100%;
        height: 50%;
        border: 0.3vw solid #fff; /* fluid white outline */
        border-radius: 0.5vw;
        object-fit: contain;
        display: block;
      }

      /* Tooltips always visible on mobile */
      .tooltip {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .tooltip .tooltiptext {
        position: static;
        visibility: visible;
        opacity: 1;
        background: none;
        color: #fff;
        padding: 4px 0 0 0;
        font-size: 0.55rem;  /* shrink text */
        width: 100%;         /* full width of button */
        text-align: center;
        white-space: nowrap; /* prevent wrapping */
        overflow: hidden;    /* hide overflow */
        text-overflow: ellipsis; /* add "..." if too long */
        transform: none;
      }

}

/* ================================
   Mobile Nav: sticky bar + overlay
   ================================ */
@media (max-width: 600px) {
  /* Hide the old desktop icon row on mobile only */
  nav.menu { display: none !important; }

  /* Sticky header bar */
  .mobile-bar {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
  }
  .mobile-bar__inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 16px;             /* ~20px top & bottom */
    display: flex;
    align-items: center;
    justify-content: center;        /* center the group */
    gap: 12px;
  }
  .mobile-bar__title {
    font-family: 'InsaniburgerwithCheese', Arial, sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    color: #fff;
    line-height: 1;
  }

  /* Hamburger button on the right of MENU (as part of centered group) */
  .burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 28px;
    height: 22px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .burger__line {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
  }

  /* Full-screen overlay */
  .mobile-overlay[hidden] { display: none !important; }
  .mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.86);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    padding: 16px;
  }

  /* Close button (top-right) */
  .mobile-overlay__close {
    align-self: flex-end;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
  }

  /* Vertical menu list */
  .mobile-overlay__nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    overflow: auto;
    padding-bottom: 16px;
  }

  /* Each row: icon + label */
  .mobile-link {
    display: grid;
    grid-template-columns: 48px 1fr; /* icon size + label */
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.06);
  }
  .mobile-link:active { background: rgba(255,255,255,0.12); }

  .mobile-link__icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border: 2px solid #fff;
    border-radius: 8px;
    display: block;
  }

  .mobile-link__label {
    font-family: 'Montserrat-Bold', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Lock page scroll when the overlay is open */
  body.menu-open { overflow: hidden; }
}

/* Mobile: hide the meeple to prevent the flash */
@media (max-width: 600px) {
  .meeple { display: none !important; }
}

/* Mobile: fix the bar to the absolute top, and hide pre-body widgets */
@media (max-width: 600px) {
  /* Force the bar to the very top of the viewport */
  #mobileBar.mobile-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0; right: 0;
    z-index: 9999;
  }

  /* The active sticky menu already takes up space in the page flow. */
  /* Keep only a small visual gap before the Welcome heading. */
  #main { padding-top: 6px !important; margin-top: 0 !important; }

  /* Hide only the widgets injected before <body> that cause a gap on mobile */
  .elfsight-app-0a5b9c60-22e6-458b-aaf8-33cb1148d6bc,
  .elfsight-app-86300fa6-c31f-4924-9bc9-c367d2eb53c5,
  .elfsight-app-15b4f839-fbe6-425a-bfb7-44f7ff327e6e {
    display: none !important;
  }

  /* Safety: nuke any default margins at the root */
  html, body { margin: 0 !important; padding: 0 !important; }
}