/* edu-gamesV5.css
   Refactored, mobile-first, backward-compatible foundation
   Target: content-heavy, ad-supported educational site
*/

/* =========================
   1. CSS VARIABLES
   ========================= */
:root {
    --hover:#faffff;
    --leftMenuWidth: 300px;
    --mobileTopMargin: 30px;
    --sliderWidth: 36px;
    --sliderHeight: 15px;
    --shadow:.5rem .5rem 1rem hsl(0 0% 50% / .5);
    --smallShadow:.15rem .15rem 0.3rem hsl(0 0% 50% / .5);
  /* Colors */
    --c-text: #111111;
    --light:#fafaff;
    --subtle-bg: #E9EEF9; /* Global variable */
    --dark-bg: #4A5DB5;   /* Global variable */
    --txtColor:#4b5563;

  /* Spacing */
  --s-2xs: 0.25rem;
  --s-xs: 0.5rem;
  --s-sm: 0.75rem;
  --s-md: 1rem;
  --s-lg: 1.5rem;
  --s-xl: 2.5rem;

  /* Layout */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --container-max: 1200px;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
  --shadow: 0 6px 16px rgba(0,0,0,.12);
}
.is_hidden{display:none !important;}
/* =========================
   2. RESET + BASE
   ========================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--c-text);
  background-color: var(--c-bg-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239050f5' fill-opacity='0.2'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  overflow-x: hidden;
  margin: 0;
}


img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

h1 { font-size: clamp(1.4rem, 1.8vw, 1.8rem); }
h2 { font-size: clamp(1.3rem, 3vw, 2rem); line-height: 2.5rem; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
h4 { font-size: 1rem; }
.Padding{padding:2px;}
textarea{resize: none;width:100%;}
.Aside{flex:1;height:100%;}
@media only screen and (max-width: 500px) {
#social{justify-content: center;margin-bottom:20px; height: fit-content;width:100%;}
}

/* =========================
   3. LAYOUT
   ========================= */
.BodyDiv{display:flex;height:auto;align-items: flex-start;gap:15px 15px;}
.BodyDiv > *{flex: 0 0 auto;}
.SideBar{width:300px;height:600px;/*background-color: yellow;*/display:inline-block;margin-left:20px;margin-right:20px; top: 50px;bottom: 110px;position: -webkit-sticky; position: sticky; align-self: flex-start;}
.Main{width:1050px;background-color: var(--light);margin-bottom: 15px; box-shadow: var(--shadow);margin-left:auto;flex-shrink: 0;}
.GeneratorBlock{display: flex;justify-content: space-between;flex-wrap:wrap;background-color: white; margin-bottom:15px; margin-left: auto; margin-right: auto;border-radius: 0.5rem;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);width:98%;border-radius: 0.5rem;padding-bottom:0.75rem;}
.LeftCol{width:250px;height:600px;margin:0px;display:flex;justify-content: space-between;flex-wrap: wrap;flex-direction: column;overflow-x: hidden;margin:10px;order: 1;}
.RightCol{width: 250px; height: 600px; display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;margin:10px;order:3}

.Preview {width:400px;height:600px;border:1px solid gray;margin:10px;order:2}
.ControlButDiv{height:fit-content; border-radius: 5px;padding:2px; padding-bottom:0px;background-color:white;max-width:275px;width:100%;}
.PuzzleDiv{width:99%; border-radius:6px; padding:20px;border: 1px solid gray;margin-left:auto;margin-right:auto;background-color: var(--light); margin:10px;min-height:330px;}
.AdsColV2{width:300px;height:100px; margin:15px auto;}
.ToolAd{width:100%; max-width:300px;height:250px;position: relative;order:5;margin:15px auto;display:block;}
.SocialAd{width:300px;height:250px;margin:0 auto;}
.AutoBannerAd{display:block;width:728px;height:90px;margin:15px auto;overflow:hidden;}
.LeftMenu{width:var(--leftMenuWidth); position: relative;display:flex;flex-direction: column;gap:1px;margin-left:10px;z-index:1;}
.MobileBanner{display:none;}
.DesktopBanner{display:block;}
@media only screen and (min-width: 1280px) {
  .AdsColV2{width:100%;max-width:970px;height:90px;margin:15px auto;overflow:hidden;}
  .ToolAd{display:none;}
}

@media only screen and (max-width: 1536px) {
  .RightCol{width:100%;height:250px;justify-content: flex-start;align-items: center; gap:10px;}
  .ControlButDiv{width:250px;}
  .Main{width:866px; margin-left:unset;}
}

@media only screen and (max-width: 1440px) {
  .LeftMenu{margin-left: 1px;min-width: 200px;width:220px;}
  .Main{width:840px; margin-left:unset;}
  .ControlButDiv{width:230px;}
}


@media only screen and (max-width: 1366px) {
  .Main{width:780px; margin-left:unset;}
  .ControlButDiv{width:230px;}
}

@media only screen and (max-width: 1280px) {
  .Main{width:730px; margin-left:unset;}
  .LeftMenu{width:200px;}
  .SideBar{margin-left:10px;}
  .ControlButDiv{width:230px;}
}

@media only screen and (max-width: 1024px) {
  .SideBar{display:none;}
}


@media only screen and (max-width: 800px) {
.Main{width:100%;margin-top:var(--mobileTopMargin);color: var(--txtColor);}
}

/* By default, hide the buttons that require a specific state */
#userConfig #logoutBut, 
#userConfig #settingBut,
#userConfig #loginBut,
#userConfig #joinBut {
    display: none;
}

/* If logged out: Show Login and Join */
#userConfig.is-logged-out #loginBut,
#userConfig.is-logged-out #joinBut {
    display: inline-block;
}

/* If logged in: Show Logout and Settings */
#userConfig.is-logged-in #logoutBut,
#userConfig.is-logged-in #settingBut {
    display: inline-block;
}

#userName{max-width: 300px;display:none;}
@media (min-width: 640px) {
    #userName{display:inline-block;}
}

/* 1. Default state: hide the ad */
.SideBar_R{display:none;flex:0;}

/* ========================
    header section 
   ========================*/
.Header{background-color: var(--subtle-bg);}
.Logo{    text-align: center; color: var(--dark-bg); cursor: pointer; font-family: Arial, Verdana, sans-serif;  font-size: clamp(24px, 8vw, 45px);font-weight: 800; text-shadow: 2px 2px 2px rgba(0,0,0,0.5), 4px 4px 2px rgba(0,0,0,0.25); -webkit-text-stroke: 1px white;}
.StickyMenu{box-shadow: 0px 6px 5px 1px rgba(80,80,80,0.6);width:100%;position:sticky;top:0px;z-index: 25;margin-bottom:20px; background-color: var(--subtle-bg); display: flex; justify-content: center; flex-wrap: wrap; gap:15px; padding:10px;  }
button.neumorphic { --shadow:-.5rem -.5rem 1rem hsl(0 0% 100% / .75),.5rem .5rem 1rem hsl(0 0% 50% / .5); min-width: 125px; border: 0.25rem solid transparent;border-radius: 1rem; color: hsl(0 0% 10%); background: none; display: grid; place-content: center; gap: 1rem; box-shadow: var(--shadow); outline: none; transition: all 0.1s;height:24px;font-size: 16px;font-weight: bold;text-decoration: none;color: var(--dark-bg);}
button.neumorphic:hover {transform: scale(1.1);}
button.neumorphic.active {box-shadow: var(--shadow), inset .5rem .5rem 1rem hsl(0 0% 50% / .5), inset -.5rem -.5rem 1rem hsl(0 0% 100% / .75);color:black;}
.neumorphic {--shadow: -.5rem -.5rem 1rem hsl(0 0% 100% / .75), .5rem .5rem 1rem hsl(0 0% 50% / .5); display:grid; font-size: 16px; font-weight: bold; width:150px; text-decoration: none; place-content: center; gap: 1rem; height:26px; cursor: pointer; box-shadow: 6px 6px 12px #b8b8b8, -6px -6px 12px #ffffff; border: 0.25rem solid transparent; border-radius: 1rem; color: var(--dark-bg);transition: all 0.3s ease;}
.neumorphic:hover {transform: scale(1.1);}
.neumorphic.active {box-shadow: var(--shadow), inset .5rem .5rem 1rem hsl(0 0% 50% / .5), inset -.5rem -.5rem 1rem hsl(0 0% 100% / .75); color:black;}

.OptionDiv{display: flex; flex-direction: row; flex-wrap:wrap; margin-bottom: 10px; justify-content: space-between; padding-left: 10px;height:25px}
.searchBox {position:relative; display:flex;gap:10px;height:100%;align-items: center;}
#countries{ display:flex;flex:1; justify-content: flex-end; height:100%;margin-right: 10px;}
#countryList {padding:0;margin:0;}
#countryList li {margin: 1px; padding: 0;	list-style: none;}
#countryList li, #countryList a {height: 14px;width:22px;display: block;}
#userBox{display:flex; flex:1;gap:0 10px;height:100%;min-width:320px;}
@media only screen and (max-width: 800px) {
.searchBox{display: none;}
}

.breadcrumbs {font-size: 14px; font-family: system-ui, sans-serif; color: #555; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; margin: 0.2em 0;}
.breadcrumbs a {color: #007acc; text-decoration: none; transition: color 0.2s ease;}
.breadcrumbs a:hover {color: #005f99; text-decoration: underline;}
.breadcrumbs .current {color: #999;font-weight: bold;}
.breadcrumbs span {user-select: none;}

/* menu section*/
.LeftMenu h2{margin:0;background-color: white;font-size:16px;}
.LeftMenu h3 a{width:100%;padding-left:5px;}
.LeftMenu >ul{padding: 0 0 0 10px; margin: 0;}
.LeftMenu li{margin-bottom:2px;list-style: none;}
.LeftMenu a{text-decoration: none;color:black;}
.MenuUl{margin:0;padding:0 0 0 10px; margin-bottom:15px; box-shadow: var(--smallShadow);}

.expandLi{background-color:var(--subtle-bg); border: 1px solid #999;font-size: 16px;line-height: 23px;border-radius: 4px;text-align: left;list-style: none;width:100%;}
.expandLi a {display: inline-block;padding-left:10px;transition: transform 0.25s ease;transform-origin: left center;width:100%;}
.expandLi >a{font-weight: bold;}
.expandLi ul li:not(.active) a:hover{transform: scale(1.2, 1.1);}
.expandLi li.active > a { color: black; font-weight: bold;}
.expandLi a.active { color: black; font-weight: bold;}
.expandLi.active { color: black;  text-align: center;  font-weight: bold;}
.expandLi:not(.active) a:hover{transform: scale(1.2, 1.1);}
.expandUl{background-color: white;padding:0 0 0 30px;}
.expandUl li > a{display:block;width:100%;outline:none;}

.nav-wrapper {background-color: #f9fafb; border-bottom: 1px solid #e5e7eb; overflow-x: auto; z-index: 10; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);margin-bottom: 15px;;}

/* Hide scrollbar for Chrome, Safari and Opera */
.nav-wrapper::-webkit-scrollbar { display: none;}

/* Hide scrollbar for IE, Edge and Firefox */
.nav-wrapper {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.nav-container {
    max-width: 80rem; /* max-w-7xl */
    margin: 0 auto;
    padding: 0 1rem;
}
.nav-list {display: flex; flex-wrap:wrap; gap: 0.25rem; padding: 0.25rem 0;    justify-content: space-between;}

/* Nav Item Styles */
.nav-item {display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; text-decoration: none; white-space: nowrap; transition: all 0.2s; color: var(--txt-color);min-width:137px;}
.nav-item:hover {background-color: #e5e7eb; color: #111827;--txt-color: #111827}
/* Active State */
.nav-item.active {background-color: #dbeafe; color: #1d4ed8; --txt-color: #1d4ed8;}
@media (min-width: 640px) {
    .nav-container { padding: 0 1.5rem; }
    .nav-item{min-width:24%;}
    .nav-wrapper{position: sticky; top: 0;}
}
@media (min-width: 1024px) {
    .nav-container { padding: 0 2rem; }
    .nav-item{min-width:unset;}
}
@media (min-width: 1366px) {
    .nav-list {justify-content:flex-start; padding: 0.5rem 0}
    .nav-item{min-width:137px;}
}




.MenuLi{background-color:var(--subtle-bg); border: 1px solid #999;font-size: 16px;line-height: 23px;border-radius: 4px;text-align: left;list-style: none;width:100%;cursor:pointer;}
.MenuLi:hover{ background-color:var(--hover);}
.MenuLi:hover a{padding-left:25px;}
.MenuLi.active{text-align:right;padding-right:25px;}
.MenuLi.active:hover a{text-align:right;color:red;transform: none;}
.MenuLi a{text-decoration:none;color:black;display:inline-block;transition: padding-left 0.25s ease;padding-left:10px;font-size:16px;}
.MenuCat{display:flex;align-items: center; background-color:var(--dark-bg);margin:0px; border: 1px solid #999;font-size: 18px;font-weight: 600;padding-left: 6px;color: white;}
.MenuCat a{color:white;}
.Topic{font-weight: 600;margin-left:15px;}
.SubItem{margin-left:25px;}
.Spanish{background-image: linear-gradient(#f77, #ffffac, #ffffac,#f77);}

@media only screen and (max-width: 800px) {

 .hamburger {position:absolute; top: -30px; right: -30px; width: 15px; height: 15px; cursor: pointer; z-index: 1001; display: flex; flex-direction: column; justify-content: space-between;}

  /* Hamburger lines */
  .hamburger div {background-color: #333;height: 2px;border-radius: 2px;  }
  .hamburger.active{left:10px;right:unset;}
  .LeftMenu.active{left:-10px; background-color: white;}
  .StickyMenu{position: unset;}
  .LeftMenu{position: absolute;left:calc(var(--leftMenuWidth) * -1 - 10px);transition: left 0.3s ease;margin-top:var(--mobileTopMargin);}
  .Main{margin-left:0;}
}


/* social media */
.share-container {background-color: #ffffff;border-radius: 10px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-align: center; margin: 15px auto;padding:0 10px;}
.share-buttons {width:350px; display: flex; flex-wrap: wrap;  gap: 15px; justify-content: center;padding-bottom:15px;}
.share-button {display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; color: white !important;
cursor: pointer; text-decoration: none; transition: background-color 0.3s ease, transform 0.2s ease; min-width: 125px; padding:10px 10px; height:30px;}
.share-button.facebook { background-color: #1877F2; }
.share-button.twitter { background-color: #1DA1F2; }
.share-button.linkedin { background-color: #0A66C2; }
.share-button.pinterest { background-color: #E60023; }
.share-button.whatsapp { background-color: #25D366; }
.share-button.email { background-color: #777777; } /* A general gray for email */
.share-button:hover {opacity: 0.9; transform: translateY(-2px);}
.share-button:active {transform: translateY(0);}
/* Basic icon styling (you'd typically use Font Awesome or similar) */
.share-button::before {content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 8px; background-size: contain; background-repeat: no-repeat; background-position: center;}
.share-button.facebook::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>'); }
.share-button.twitter::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M22.46 6c-.85.38-1.76.64-2.72.76.97-.58 1.7-1.5 2.05-2.6-.9.53-1.9.91-2.96 1.11C18.23 3.84 17 3 15.65 3c-2.5 0-4.54 2.04-4.54 4.54 0 .36.04.7.12 1.03-3.78-.19-7.14-2-9.4-4.75-.4.69-.64 1.5-.64 2.45 0 1.57.8 2.96 2.02 3.77-.75-.02-1.46-.23-2.07-.57v.06c0 2.2 1.57 4.03 3.64 4.44-.38.1-.78.16-1.19.16-.29 0-.58-.03-.86-.08.57 1.8 2.24 3.1 4.22 3.13-1.56 1.22-3.53 1.95-5.67 1.95-.37 0-.74-.02-1.1-.06C2.65 20.3 5 21 7.4 21c8.84 0 13.67-7.3 13.67-13.67 0-.21-.01-.43-.01-.64.94-.67 1.76-1.51 2.42-2.47z"/></svg>'); }
.share-button.linkedin::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.447 2H3.553C2.693 2 2 2.693 2 3.553v16.894C2 21.307 2.693 22 3.553 22h16.894C21.307 22 22 21.307 22 20.447V3.553C22 2.693 21.307 2 20.447 2zM8 19H5V9h3v10zM6.5 7.75A1.25 1.25 0 1 1 6.5 5.25A1.25 1.25 0 0 1 6.5 7.75zM19 19h-3v-4.72c0-1.17-.43-1.66-1.28-1.66-.91 0-1.29.62-1.29 1.66V19h-3V9h3v1.31c.49-.78 1.4-1.31 2.87-1.31 2.07 0 3.63 1.13 3.63 4.31V19z"/></svg>'); }
.share-button.pinterest::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.17 2.422 7.776 5.882 9.472-.095-.79-.184-1.928.005-2.731.25-.992 1.6-6.797 1.6-6.797s-.407-.812-.407-2c0-1.895 1.096-3.313 2.454-3.313 1.156 0 1.714.869 1.714 1.905 0 1.157-.743 2.885-1.134 4.507-.315 1.34.673 2.44 2.01 2.44 2.41 0 4.275-3.057 4.275-6.688 0-2.887-2.08-4.992-5.07-4.992-3.877 0-6.155 2.924-6.155 5.922 0 1.162.444 2.428 1.002 3.125.109.136.12.247.08.384-.047.163-.153.626-.192.793-.058.26-.207.35-.46.242-1.656-.708-2.692-3.235-2.692-5.467 0-4.062 2.956-7.85 8.79-7.85 4.636 0 7.854 3.32 7.854 7.64 0 4.673-2.636 8.35-6.678 8.35-1.365 0-2.652-.705-3.1-1.579.006.012.016.03.027.042.342.193.682.385 1.042.585.116.066.21.135.293.21.054.048.11.096.166.143-.005.005-.005.008-.008.016a.48.48 0 0 1-.223.239c-.066.027-.13.048-.198.067-.066.018-.13.027-.194.027a.49.49 0 0 1-.223-.05.474.474 0 0 1-.21-.108c-.046-.048-.09-.104-.132-.164-.04-.055-.07-.113-.09-.168-.005-.01-.01-.02-.015-.025s-.012-.023-.016-.036z"/></svg>'); }
.share-button.whatsapp::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12.04 2c-5.45 0-9.91 4.46-9.91 9.91 0 1.63.4 3.16 1.17 4.54L2 22l5.77-1.52c1.3.73 2.76 1.13 4.27 1.13 5.45 0 9.91-4.46 9.91-9.91S17.49 2 12.04 2zm0 18.02c-1.35 0-2.64-.37-3.76-1.01l-.27-.16-2.88.76.77-2.81-.18-.28c-.68-1.12-1.04-2.42-1.04-3.79 0-4.5 3.65-8.15 8.15-8.15s8.15 3.65 8.15 8.15-3.65 8.15-8.15 8.15zm4.51-6.19c-.25-.12-.89-.44-1.29-.59-.39-.15-.68-.23-.97.23-.29.46-1.12.59-1.37.74-.25.15-.49.19-.92.06-.43-.12-1.83-.67-2.64-1.63-.67-.79-1.12-1.77-1.25-1.99-.12-.21-.01-.33.1-.44.09-.09.2-.23.29-.34.09-.12.12-.2.18-.33.06-.12.03-.23-.01-.34-.06-.12-.59-1.42-.81-1.93-.21-.51-.43-.44-.59-.44-.12 0-.25 0-.39.01-.15.01-.39.06-.59.27-.19.2-.74.72-.74 1.76 0 1.04.76 2.03.86 2.19.09.16 1.5.24 2.89-1.01 1.4-.89 2.11-2.48 2.37-2.73.26-.25.43-.21.58-.15.15.09.96.46 1.12.55.15.09.25.14.29.21.04.07.03.43-.22.88z"/></svg>'); }
.share-button.email::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 14H4V8l8 5 8-5v12z"/></svg>'); }





.MainCard{margin-left:auto;margin-right:auto;margin-bottom:20px;line-height: 1.3;display: flex; flex-wrap: wrap; border-radius: 0.5rem; width:98%; color:var(--txtColor);  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);  border: 1px solid #e0e7ff;background-color: #fff;justify-content: space-between;}
.MainCard h2{margin:0; width:100%; font-size: 1.5rem; font-weight: 700; color:var(--dark-bg);}
.MainCard h3{margin:0; width:100%; font-size: 1.25rem; font-weight: 600; color: #4f46e5;}
.MainCard h4{margin:0; width:100%;font-size: 1.15rem; font-weight: 500; color: #4f46e5;}
.MainCard p, .MainCard ul, .MainCard ol {  margin-bottom: 1.4rem;margin-top:0.5rem;}
.MainCard ul, .MainCard ol{padding-left:15px;}
.MainCard .Content{display:flex; flex-direction:column; padding :1rem; width:100%; }
.MainCard .Social{justify-content: space-between; flex-direction: row; flex-wrap: wrap; align-items: center;}
.Cards{display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px;}
.Cards .MainCard{display:block;}



.action_div p{margin:0 0 15px 0; }
.action_header{color: var(--dark-bg);font-size:1.25em; font-weight:500; margin-bottom:10px;}
.action-button {display: inline-flex; align-items: center; justify-content: center; padding: 4px 14px; margin: 0 auto; font-size: 18px; color: #ffffff !important; background-color: #008000; border: none; border-radius: 12px; cursor: pointer; box-shadow: 0 6px 15px rgba(59, 130, 246, 0.4);  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; text-decoration: none;}
.action-button:hover {background-color: #40a040; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.6);}
.action-button:active {background-color: #1e40af; transform: translateY(0); box-shadow: 0 4px 10px rgba(30, 64, 175, 0.4);}

.PageTitle{flex-basis: 100%;text-align: center; background-color: var(--dark-bg); color:white !important;margin:0 0 10px 0;padding:5px 0;}
.SectionTitle{flex-basis: 100%;text-align: center; background-color: var(--dark-bg); color:white; padding:0; margin:0 auto; border-radius: 0.5rem 0.5rem 0 0; }
.MainCard .SectionTitle{color:white;}


/*special switches*/
input[name="paperSize"] {opacity: 0;position: absolute;width: 0;height: 0;} /*remove the circle of the radiobutton for selecting the paperformat*/   
.switch {position: relative; display: inline-block; width: calc(var(--sliderWidth)); height: calc(var(--sliderHeight) + 2px);}
.switch input {opacity: 0; width: 0; height: 0;}/* Hide the default checkbox */
.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #f99; transition: 0.4s; border-radius: calc(var(--sliderHeight) + 2px);}/* The slider */
.slider:before {position: absolute; content: ""; height: var(--sliderHeight); width: var(--sliderHeight); left: 1px; bottom: 1px; background-color: white; transition: 0.4s; border-radius: 50%;}/* The slider */
.switch input:checked + .slider {background-color: green;}/* When checked, change background color */
.switch input:checked + .slider:before {transform: translateX( calc(var(--sliderWidth) - var(--sliderHeight) - 2px));}/* Move the circle to the right when checked */

/*grid*/
.Grid{  --readOnlyColor:#999; line-height: 1; width: 100%; border-collapse: collapse; padding: 0px; margin: 0px; color: black; font-size:15px;}
.Grid tbody .Header{background-color:var(--subtle-bg);}
.Grid tbody td{border:1px solid rgb(47, 47, 49);padding:0px;background-color: white;}
.Grid tbody td .ReadOnly{background-color: unset; color: var(--readOnlyColor);}
.Grid tbody td .Normal{background-color: unset; color:#000;}

.GameButton{border:1px #444 solid;border-radius:5px;box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 3px; width:100%;height: 35px;margin-bottom: 5px;font-size:18px;cursor:pointer;padding:0px; background-color:var(--subtle-bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;}
.GameButton:hover{background-color:var(--hover);box-shadow: rgba(0, 0, 0, 0.45) 0px 5px 5px;}

.GameButton.active{padding-top:2px;padding-left:2px}
.Border{border:1px gray solid;}


/*user puzzle box*/
.puzzleBox{display: flex;width: 99%; background-color:var(--light); margin: 0 auto 20px auto; flex-wrap: wrap; justify-content: center;gap:15px; box-shadow: var(--shadow);}
.puzzleBox h2{flex-basis: 100%;background-color: var(--subtle-bg);margin-top:0px; text-align: center;}
.puzzleBox ul{display:flex;flex-basis: 100%;gap:5px 10px;flex-wrap:wrap;margin:0;justify-content:stretch;margin-bottom:15px;}
.puzzleBox li{width:200px;list-style: none;text-indent: -4px;margin-right:15px;}
.puzzleBox li a{cursor: pointer;}
.puzzleBox li a:hover{color:blue;text-decoration: underline;}
.PuzzleListFlex{display:flex;;align-items: flex-start;flex-wrap: wrap;gap:10px;}
.PuzzleListFlex li{text-decoration: none;cursor:pointer;list-style: none;}
.PuzzleSelector {text-decoration:none;cursor:pointer;color:blue;}
.PuzzleSelector:hover {text-decoration: underline;font-weight: 600;}
.PuzzleBoxContainer{display:flex;justify-content:space-evenly;align-items: flex-start;flex-wrap: wrap;gap:20px 10px;}
.PuzzleBoxHeader {background-color:var(--subtle-bg); border-top-left-radius:5px;border-top-right-radius:5px; border: 1px solid gray;border-bottom: 0px;text-align:center;font-weight: bold;padding:5px;}
.PuzzleBoxContent {width:200px;height:240px;overflow:auto; background-color: white; border-left: 1px solid gray; border-right: 1px solid gray;}



  .PuzzleBlock{width:200px;background-color:var(--subtle-bg);border:1px solid black;border-radius:var(--radius);box-shadow:1px 1px 1px 1px rgba(80,80,80,0.5),3px 3px 2px 2px rgba(80,80,80,0.25);
    --radius:10px;padding:0px; margin:0px;
  }
  .PuzzleBlock h3 {background-color:var(--dark-bg);margin:0px;color:white;text-align:center;padding:0px;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);}
  .PuzzleBlock ul{list-style-type: none; margin: 0px; padding-left: 5px; padding-top:5px;height:240px; overflow-y:auto; overflow-x:hidden;margin-bottom:var(--radius)}
  .PuzzleBlock ul li{text-indent:-15px; padding-left:15px;}
  .PuzzleBlock ul li a{text-decoration:none;cursor:pointer;color:#222}
  .PuzzleBlock ul li a:hover{font-weight: bold;}
  .puzzle-trigger{width:100%;text-align: left; border:0; background-color: inherit;padding-bottom:3px; font-size: 1rem; cursor: pointer;}
.puzzle-trigger:hover{font-weight:bold;}



.GameBlockContainer {display: flex; flex-wrap:wrap; width: 90%; margin: 0 auto; justify-content: center; background-color: #f6f6ff; box-shadow: var(--shadow); gap:10px;padding-bottom:20px;}
.GameBlockContainer h2{line-height: 42px;margin-bottom:20px;}
.no-hover:hover {transform: none !important;}
.GameBlock{--radius:10px;position:relative;width:430px;min-height:300px;background-color:var(--subtle-bg);text-decoration: none; color: black; border:1px solid black;border-radius:var(--radius);box-shadow:1px 1px 1px 2px rgba(80,80,80,0.35),3px 3px 2px 2px rgba(80,80,80,0.2);transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;}
.GameBlock:hover{transform: translateY(-8px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);} 
.GameBlock a {text-decoration:none;color:black;width:100%;line-height:30px;}
.GameBlock h3 {background-color:var(--dark-bg);margin-top:0px;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);line-height:40px;color:var(--subtle-bg);text-align:center;font-size:23px;}
.GameBlock .Content{padding: 0px 10px 40px 10px;min-height:300px;line-height: 1.25;}
.GameBlock .Content img{float:left;margin: 0px 10px 5px 0px;border: 1px solid gray;}
.GameBlock .bottom{display:block;position:absolute;bottom:0px;background-color:var(--dark-bg);color:var(--subtle-bg);width:100%;margin:0px;padding:0px;border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);text-align: center;}




/*footer*/
.Footer{display:flex;justify-content: space-between; min-height: 40px; padding-left: 15px; padding-right: 15px;background-color: var(--dark-bg);}
.FooterButton{color:white;text-decoration: none;margin-top:auto;margin-bottom:auto;}
.pinInterestFooter{padding-left:35px;padding-top:6px;color:white;}
.contact{width:100px;height:25px;margin-left: auto;margin-right: auto; border-left: 2px solid #FFFFFF;border-right: 2px solid #FFFFFF;text-align: center;padding-top:5px}
.termsUse{background-color: var(--light);line-height: 1.5;}
.termsUse h3{line-height: 1.5;}
.termsUse ol{display:flex;flex-wrap:wrap;margin:0;padding-left:16px;}
.termsUse li{flex-basis: 50%;padding-right:20px;padding-bottom:10px;}
.termsUse div{line-height: 1.4;padding:15px;}

.paypal-btn{float:left;position: relative; width:92px;height:26px;}
.paypal-top{position: absolute;border-radius:25px; background-image: linear-gradient(#FEBB50,#FFAD2F, #FFEFD2);width:100%;height:100%}
.paypal-bottom{position: absolute;border-radius:25px; background-image: linear-gradient(#FFF9EE, #FEDE9E);width:88px;height:60%;left:2px;}
.paypal-txt{position: relative; width:100%;height:100%;line-height:26px;text-align: center;color:black;font-size:18px;font-weight:400;cursor:pointer;font-style: italic;}
.Donate{text-align:center;font-size:18px;color:black;width:285px;height:95px;padding:5px;background-color:var(--subtle-bg);border-radius:10px;border:1px solid #88F;box-shadow:2px 2px #999;}



.consent{display:none;flex-wrap:wrap; justify-content: center; background-color: #E9EEF9;padding:5px  10px; position: fixed; bottom: 0; left:50%; transform:translateX(-50%); text-align: left; z-index: 1000;border-radius:10px 10px 0 0; border:1px solid black; padding:5px 10px;width:513px;}

/* lazyloading images*/
.card-logo {width:175px; height:auto; }
.lazy-image {transition: opacity 0.5s ease-in-out; /* Initially set opacity to 0 to prevent FOUC */opacity: 0;}
/* When the image is loaded, fade it in */
.lazy-image.loaded {opacity: 1;}


.GridLayout{display: grid; gap: 1rem; width:100%;}
.Column2{grid-template-columns: repeat(2, 1fr);}
.Column3{grid-template-columns: repeat(3, 1fr);}
.Cell {display: block; padding: 1rem 1.25rem; border-radius: 8px; background-color: #ffffff; border: 1px solid  #dfe3e8; text-decoration: none; transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;}

.Cell:hover, .Cell:focus-visible {border-color: #2563eb; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);transform: translateY(-4px)}
.Cell .title {display: block; font-size: 1.15rem; font-weight: 600; color: #111827; margin-bottom: 0.5rem;}
.Cell .text {font-size: 0.95rem; color: #4b5563;}
.Cell::after {content: "→"; float: right; color: #9ca3af; transition: transform 0.2s ease, color 0.2s ease;}
.Cell:hover::after { transform: translateX(4px); color: #2563eb;}

@media only screen and (max-width: 600px) {
.Column2{grid-template-columns: repeat(1, 1fr);}
.Column3{grid-template-columns: repeat(1, 1fr);}
}
.FAQ{display:flex; flex-wrap:wrap;margin-bottom:15px;gap:0 15px;}
.FAQ h2{flex-basis: 100%;}
.FAQ h3{flex-basis: 100%;}
.FAQ details{width: 49%; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px; padding: 12px; transition: all 0.3s ease;} 
.FAQ details[open] {border-color: #3b82f6; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);}
.FAQ summary{cursor: pointer;font-weight:600; color:#1e293b;outline:none;}






@media only screen and (max-width: 1366px) {
  .share-container{width:344px;}
}

@media only screen and (max-width:500px) {
.MobileBanner{display:block;width:320px;height:100px;}
.DesktopBanner{display:none;}
.FAQ details{width: 98%;}
}


@media only screen and (max-width: 400px) {
.Preview, .LeftCol, .RightCol,.PuzzleDiv{width:98%;margin:15px auto;}
.ControlButDiv{width:98%;margin:0 auto;max-width:unset;}
.RightCol{height:auto;flex-basis: unset;}
.Header{display:none;}
.OptionDiv{display:none;}
.StickyMenu {padding:0;gap:10px;}
.BodyDiv{margin-top: -27px;}
}
/* Footer Main Styles */
.footer-main {background-color: #111827; /* bg-gray-900 */ color: #9ca3af; /* text-gray-400 */ padding: 3rem 0; /* py-12 */}
.footer-container {max-width: 80rem; /* max-w-7xl */ margin: 0 auto; padding: 0 1rem;}

@media (min-width: 640px) {
    .footer-container { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
    .footer-container { padding: 0 2rem; }
}

/* Grid Layout */
.footer-grid {display: grid; grid-template-columns: 1fr; gap: 2rem;}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .span-2 {
        grid-column: span 2 / span 2;
    }
}

/* Branding Section */
.footer-brand {color: #ffffff; font-weight: 700; font-size: 1.25rem; margin-bottom: 1rem; letter-spacing: -0.025em;}
.footer-description {max-width: 24rem;line-height: 1.625;}

/* Headings and Lists */
.footer-heading {color: #ffffff; font-weight: 600; margin-bottom: 1rem; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em;}
.footer-links {list-style: none; padding: 0; margin: 0;}
.footer-links li {margin-bottom: 0.75rem;}
.footer-link {color: inherit; text-decoration: none; transition: color 0.2s;}
.footer-link:hover, .footer-link-button:hover {color: #ffffff;}

/* Button Styles */
.footer-info-text {font-size: 0.875rem; margin-bottom: 1.25rem; line-height: 1.25;}
.footer-button {background-color: #f59e0b; /* bg-yellow-500 */ color: #111827; font-weight: 700; padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.footer-button:hover{
    background-color: #d97706; /* bg-yellow-600 */
    transform: scale(1.05);
}
.footer-link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit; /* Inherits the font-size and family from the parent */
    color: inherit; /* Inherits the color from .footer-link */
    cursor: pointer;
    text-decoration: none;
}


/* Bottom Section */
.footer-bottom {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #1f2937; /* border-gray-800 */
    text-align: center;
    font-size: 0.875rem;
}

/* Print handling */
@media print {
    .no-print { display: none !important; }
}
.header {background-color: #ffffff; border-bottom: 1px solid #e5e7eb;}
.header-container {max-width: 80rem; margin: 0 auto; padding: 0 1rem; height: 3rem; display: flex; align-items: center; justify-content: space-between;}
@media (min-width: 640px) {
    .header-container { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
    .header-container { padding: 0 2rem; }
}
.logo-text{font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 1rem;font-weight: 600; cursor: pointer;}
.logo-text:hover{color:blue;}
/* Right Actions Section */
.header-actions {display: flex; align-items: center; gap: 1rem;}


/* Search Bar */
.search-wrapper {position: relative; display: none; /* Hidden on mobile */}

@media (min-width: 768px) {
    .search-wrapper {display: block;}
    .logo-text{font-size: 1.5rem;}
}

.search-input {background-color: #f3f4f6; border: none; border-radius: 9999px; padding: 0.5rem 1rem 0.5rem 2.5rem; font-size: 0.875rem; width: 16rem; outline: none; transition: ring 0.2s;}
.search-input:focus {box-shadow: 0 0 0 2px #3b82f6;}
.search-icon {position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 0.75rem;}

/* Buttons */
.btn-text {font-size: 0.875rem; font-weight: 500; color: #4b5563; background: none; border: none; cursor: pointer; padding: 0.5rem 0.75rem; border-radius: 0.375rem; transition: all 0.2s; text-decoration: none;}
.btn-text:hover {color: #2563eb;}
.btn-primary {background-color: #2563eb; color: #ffffff; font-size: 0.875rem;font-weight: 600; padding: 0.5rem 1rem; border: none; border-radius: 0.5rem; cursor: pointer; transition: background-color 0.2s; box-shadow: 0 1px 2px 0 rgba(37, 99, 235, 0.2);}
.btn-primary:hover {background-color: #1d4ed8;}