/* ==========================================================================
   Variables & Global Styles
   ========================================================================== */

:root {
    --font-primary: Arial, Helvetica, sans-serif;
    --font-monospace: monospace;

    --color-text-base: #333;
    --color-text-heading: #444;
    --color-text-link: #06c;
    --color-text-subtle: #555;
    --color-text-light: #777;
    --color-text-white: #fff;
    --color-text-footer: #aaa;

    --bg-body: #d7eef4;
    --bg-main: #fff;
    --bg-main-alt: #FFF8C9; /* front-page-pane, link-div */
    --bg-top-menu: #fff791;
    --bg-comment: #f3f3f3;
    --bg-comment-active: #ffc; /* my-comments-nums-active, preCanvas */
    --bg-share-div: #e1e1e1;
    --bg-footer-dark: #222;
    --bg-footer-medium: #333;
    --bg-footer-highlight: #ffcb00;
    --bg-button-blue: rgb(0, 120, 231);
    --bg-port-nav: #E9E9E9;

    --border-color-light: #D3D1D1;
    --border-color-medium: #ccc;
    --border-color-dark: #aaa;
    --border-color-focus: #129FEA;
    --border-color-white: #fff;
    --border-color-footer-divider: #666;

    --radius-sm: 0.5em;
    --radius-md: 0.8em;
    --radius-lg: 1.2em; /* link-div textarea, share-div p */
    --radius-xl: 1.5em; /* share-div, link-div */
    --radius-xxl: 1.8em; /* game-thumb */
    --radius-xxxl: 2.2em; /* port-nav a */
    --radius-jumbo: 4em; /* main-div, front-page-pane */

    --shadow-main: 0px 0px 0px 7px var(--border-color-light);
    --shadow-main-md: 0px 0px 4px 1px #666; /* From media query */
    --shadow-pane: 0px 0px 2px 1px var(--border-color-dark), inset 0 0 0 2px #ddd;
    --shadow-pane-hover: 0px 0px 2px 1px var(--border-color-dark), inset 0 0 0 2px var(--border-color-medium);
    --shadow-input: inset 0 1px 3px #ddd;
    --shadow-thumb: 0px 0px 1px 1px #bbb, inset 0 0 0 1px #bbb;
}

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

* {
  -webkit-tap-highlight-color: transparent;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: #555555;
    font-family: var(--font-primary);
    font-size: 1.1em;
    color: var(--color-text-base);
}

#body-default {
    background-image: url('https://www.gamestolearnenglish.com/ims/mainBack.1.4.svg');
    background-repeat: no-repeat;
    background-size: 240% 900px;
    background-position: top;
}

/* Default font for form elements, can be overridden */
button,
input,
select,
textarea {
    font-family: inherit; /* Uses body font-family */
    font-size: 100%;    /* Inherits font-size from parent */
    color: inherit;     /* Inherits color from parent */
}

/* ==========================================================================
   Normalize & Base Element Styles (selected from original)
   ========================================================================== */

hr {
    height: 0;
    overflow: visible;
}

a {
    background-color: transparent;
    /* Default link color, can be overridden */
    color: var(--color-text-link);
    text-decoration: none; /* Common practice to set default */
}

a:hover {
    /* text-decoration: underline; Common practice */
}

img {
    border-style: none;
    vertical-align: middle; /* Good default */
}

button,
input,
optgroup,
select,
textarea {
    line-height: 1.15;
    margin: 0;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
    resize: vertical; /* Good default */
}

[type="checkbox"],
[type="radio"] {
    padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

main {
    display: block;
}

pre,
code,
kbd,
samp {
    font-family: var(--font-monospace);
    font-size: 1em;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

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

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

fieldset {
    border: 1px solid var(--border-color-medium); /* Default, can be overridden */
    padding: 0.35em 0.75em 0.625em;
}

details {
    display: block;
}

summary {
    display: list-item;
}

/* ==========================================================================
   Headings
   ========================================================================== */

h1,
h3 {
    font-size: 1.5em;
    color: var(--color-text-heading);
}

h2 {
    font-size: 1em;
    margin: 0;
    font-weight: normal;
}

/* ==========================================================================
   Layout & Core Components
   ========================================================================== */

#top-logo,
#top-logo-game {
    margin: 52px auto 2px;
    padding-right: 16px;
    text-align: center;
    outline: none;
}

#top-logo {
    display: block;
}

#top-logo-game {
    display: none;
}

#main-div {
    position: relative;
    z-index: 99;
    display: block;
    margin: 8px auto -30px;
    border-radius: 3em;
    padding: 0; /* Explicitly set if no padding */
    border: 1px solid var(--border-color-light);
    background-color: var(--bg-main);
    box-shadow: 0px 0px 0px 8px #D3D1D1;
    text-align: center;
}

/* ==========================================================================
   Ads
   ========================================================================== */

.my-adsense-ad {
    margin: 0 2%;
    min-height: 90px;
}

.adslot_0,
.adslot_1,
.adslot_2 {
    width: 100%;
    height: 90px;
	margin: auto;
}

.adslot_0,
.adslot_1 {
    display: block;
}

/* ==========================================================================
   Utility & Text Styles
   ========================================================================== */

.break-hidden-onmobile {
    display: none;
}

.my-game {
    margin: 0;
    user-select: none;
}

.my-text,
.my-text-game {
    margin: 10px 16px 40px;
    line-height: 1.6em;
    text-align: left;
}

.my-text-game {
    display: none;
}

.center { /* Consider renaming to .justify-content-center if it's only for flex */
    justify-content: center;
}

.long-word {
    word-break: break-all;
}

.article-im {
    display: none;
}

/* ==========================================================================
   Top Menu
   ========================================================================== */

#top-menu {
    display: none; /* Shown in media query */
    margin: 96px 6% 56px 6%;
    padding: 0; /* Explicitly set */
    border: 2px solid var(--border-color-white);
    border-radius: var(--radius-sm);
    background-color: var(--bg-top-menu);
    text-align: left;
}

#top-menu-items {
    margin: 0 0 0 3%;
    padding: 4px 0 4px 300px; /* Check if 300px is intentional for spacing or image */
    list-style: none; /* Common to add for menus */
}

#menu-item-0, #menu-item-1, #menu-item-2{
	display:inline-block;
}

#menu-item-3, #menu-item-4{
	display:none;
}

#top-menu-items li a {
    display: block;
    padding: 0.5em 1em;
    border: 1px solid var(--bg-top-menu); /* Transparent border initially */
    border-radius: var(--radius-sm);
    color: var(--color-text-light);
    white-space: nowrap;
    text-decoration: none;
    outline: none;
}

#top-menu-items li a:hover {
    background-color: var(--bg-main);
    border: 1px solid var(--border-color-dark);
}

#menu-item-0,
#menu-item-1,
#menu-item-2 {
    display: inline-block; /* Already on li, check if needed here */
}

#menu-item-3,
#menu-item-4 {
    display: none; /* Shown in media queries */
}

/* ==========================================================================
   Front Page Panes
   ========================================================================== */

.front-page-bar { 
    display: block;
    padding: 0 6px;
}

.front-page-pane {
    display: block;
    max-width:360px;
    margin: 14px auto;
    padding: 0;
    vertical-align: top;
    border: 6px solid var(--bg-port-nav); /* E9E9E9 */
    border-radius: 3em;
    background: var(--bg-main-alt);
    box-shadow: 0px 0px 0px 1px #bbbbbb, inset 0 0 0 2px #ddd;
    /* box-shadow: var(--shadow-pane); */
    text-decoration: none; /* For when it's an <a> tag */
    outline: none; /* For when it's an <a> tag */
}

.front-page-pane:hover {
    background: #FFEF8A; /* Slightly darker than --bg-main-alt */
    box-shadow: 0px 0px 0px 1px #bbbbbb, inset 0 0 0 1px #bbbbbb;
}

.gameTitleText { /* Consider renaming to .game-title-text */
    display: block;
    margin: 30px auto 18px;
    font-size: 160%;
    text-align: center;
}

/* ==========================================================================
   Game Canvas Styles
   ========================================================================== */

#containerDiv {
    position: relative;
    height: 800px;
    margin: 0;
    padding: 0;
	-webkit-tap-highlight-color: transparent;
}

#myCanvas,
#backCanvas,
#preCanvas {
    position: absolute;
    top: 0; /* Added for explicit positioning with auto margins */
    bottom: 0;/* Added for explicit positioning with auto margins */
    left: 0;
    right: 0;
    margin: auto;
    padding: 0;
	-webkit-tap-highlight-color: transparent;
}

#preCanvas {
    z-index: 1;
    background-color: var(--bg-comment-active); /* #ffc */
}

#backCanvas {
    z-index: 2;
}

#myCanvas {
    z-index: 3;
}

/* ==========================================================================
   Comments Section
   ========================================================================== */

.my-comments {
    display: none; /* Shown in media query */
    margin: 50px 4px 10px;
    text-align: left;
}

.my-comments h3 {
    margin-bottom: 40px;
    text-align: center;
}

.my-comments-list {
    margin: 0; /* Reset default list margin */
    padding: 0 4px;
    list-style: none;
}

.my-comment {
    margin: 10px 0;
    padding: 4px 30px;
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-md); /* 0.8em used in forms, using similar */
    background-color: var(--bg-comment);
}

.my-comment-name {
    margin: 4px 0 20px;
    padding-left: 10px;
}

.my-comment-content {
    margin: 20px 0 4px;
}

.my-comments-numbers {
    margin: 38px auto 30px;
    text-align: center;
}

.my-comments-numbers div { /* Be more specific if this causes issues */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none; /* Added for IE/Edge */
}

.my-comments-nums {
    display: inline-block;
    width: 50px;
    padding: 10px 0;
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-sm); /* 0.7em is close to 0.5em or 0.8em */
    background-color: var(--bg-main);
    cursor: pointer;
}

.my-comments-nums-active {
    background-color: var(--bg-comment-active);
}

.my-comments-none {
    display: none;
}

#my-comments-left,
#my-comments-right,
#my-comments-left-alt {
    display: inline-block; /* #my-comments-left is overridden to none initially */
    width: 50px; /* Overridden in MQ */
    margin: 10px auto; /* Overridden in MQ */
    padding: 10px 14px;
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-sm); /* 0.6em is close to 0.5em */
    background-color: var(--bg-comment);
    cursor: pointer;
}

#my-comments-left {
    display: none;
}

#my-comments-fix {
    display: block; /* Overridden in MQ */
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Forms (Comments & Contact)
   ========================================================================== */

#my-comment-form,
#my-form { /* Shared styles for form containers if any */
    padding: 0 4px 0; /* #my-form overrides this */
}

#my-comment-form fieldset,
#my-form fieldset {
    padding: 0;
    border: 0;
}

#my-comment-form input:focus,
#my-comment-form textarea:focus,
#my-form input:focus,
#my-form textarea:focus {
    outline: 0;
    border-color: var(--border-color-focus);
}

/* Comment Form Specifics */
#my-comment-form input {
    display: inline-block; /* Overridden in MQ */
    width: 70%; /* Overridden in MQ */
    margin: 5px 0;
    padding: 18px;
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-input);
}

#my-comment-form textarea {
    display: block;
    width: 100%;
    min-height: 140px;
    margin: 0 0 16px;
    padding: 20px;
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-input);
    /* box-sizing: border-box; is global now */
}

#my-submit-holder {
    margin: 50px 0 0;
    text-align: center;
}

#my-comment-form button {
    width: 120px;
    margin: 0 auto 20px;
    padding: 16px;
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--bg-button-blue);
    color: var(--color-text-white);
    text-decoration: none;
    outline: none;
    cursor: pointer; /* Added */
}

#sent-message {
    display: none;
    margin-bottom: 50px;
    padding: 100px 0;
    text-align: center;
}

/* Contact Form Specifics */
#my-contact-form {
    min-height: 630px;
    margin-top: 30px;
    text-align: center;
}

#my-form { /* This selector is also used above, ensure no conflicts */
    padding: 10px 0 0; /* Overrides previous padding */
}

#my-form input {
    display: block; /* Overridden in MQ */
    width: 70%; /* Overridden in MQ */
    margin: 12px 0;
    padding: 15px;
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-sm); /* 0.6em */
    box-shadow: var(--shadow-input);
}

#my-form textarea {
    display: block;
    width: 100%; /* Overridden in MQ */
    min-height: 130px;
    margin: 12px 0;
    padding: 15px;
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-sm); /* 0.6em */
    box-shadow: var(--shadow-input);
    /* box-sizing: border-box; is global now */
}

#my-form button {
    display: block;
    margin: auto;
    padding: 16px 40px;
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--bg-button-blue);
    color: var(--color-text-white);
    font-size: 1.4em;
    text-decoration: none;
    outline: none;
    cursor: pointer; /* Added */
}

/* ==========================================================================
   Footer
   ========================================================================== */

#my-footer,
#my-footer-game {
    font-size: 1.1em; /* This is the same as body, maybe not needed? */
}

#my-footer-game {
    display: none;
}

#my-footer a,
#my-footer-game a {
    color: var(--color-text-footer);
    text-decoration: none;
}
/* No :hover specified, inherits default */

#my-footer-main {
    padding: 100px; /* Quite large, verify */
    background: var(--bg-footer-dark);
    color: var(--color-text-white);
    text-align: center;
}

.my-footer-part {
    display: block; /* Overridden in MQ */
    width: auto; /* Overridden in MQ */
    vertical-align: top;
}

#my-footer-left {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color-white);
    text-align: center;
}

#my-footer-left p {
    display: block;
    margin: 16px 0;
}

#my-footer-right {
    margin-top: 10px;
    text-align: center;
}

#my-footer-right a {
    display: block;
    margin: 16px 0;
}

#my-footer-top-border {
    padding-top: 8px;
    background-image: linear-gradient(to bottom, #dddddd, #777777);
}

#my-footer-top {
    padding-top: 50px;
    background: var(--bg-footer-highlight);
}

#my-footer-mid {
    padding-top: 66px;
    border-top: 6px solid var(--border-color-footer-divider);
    background: var(--bg-footer-medium);
}

#my-footer-bottom {
    padding-top: 20px;
    background-image: linear-gradient(to bottom, #444444, #222222);
}

/* ==========================================================================
   Download & Offline Page Links
   ========================================================================== */

.download-link {
    color: var(--color-text-link); /* Already default for <a> */
    text-decoration: none;
    outline: none;
}
/* .download-link img already has vertical-align: middle from global img style */

.offline-link {
    text-decoration: none;
    outline: none;
}

.offline-link img {
    display: inline-block;
    margin: 12px;
    /* vertical-align: middle; from global img style */
    border-radius: var(--radius-xl); /* 1.3em is close to 1.2 or 1.5 */
}

/* ==========================================================================
   Sharing & Embed
   ========================================================================== */

#share-buts {
    display: inline-block;
    margin: 4px 0;
}

.share-link {
    display: inline-block;
}

.share-div,
.sharePage-div {
    width: auto;
    border: 1px solid var(--border-color-medium); /* #bbb */
    border-radius: var(--radius-xl);
    background: var(--bg-share-div);
}

.share-div {
    display: none; /* Shown in media query */
    margin: 0 2px 0 8px;
}

.sharePage-div {
    display: inline-block;
    margin: 0 2px 28px 8px;
}

.share-div p,
.sharePage-div p {
    display: inline-block;
    margin: 6px;
    padding: 12px 20px;
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-lg);
    background: var(--bg-main);
    line-height: 24px;
    text-align: left;
    word-break: break-all;
}

.sharing-part {
    display: none; /* Shown in media query */
}

/* Embed Page */
.link-div {
    display: block;
    width: auto;
    max-width: 800px;
    margin: 2px 2%;
    padding: 0; /* Added */
    border: 2px solid var(--border-color-medium);
    border-radius: var(--radius-xl);
    background: var(--bg-main-alt);
    cursor: pointer;
}

.link-div span {
    display: block;
    margin: 8px;
    padding: 16px 20px;
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-lg); /* 1em, using var(--radius-lg) which is 1.2em */
    background: var(--bg-main);
    word-break: break-all;
}

.link-div textarea {
    width: 100%;
    /* height: auto; set by content or rows attribute */
    margin: 0; /* Added */
    padding: 0; /* Added */
    border: none;
    background: transparent; /* Added for clarity */
    line-height: 40px; /* Quite large, verify */
    overflow: hidden;
    resize: none;
    text-align: center;
    word-break: break-all;
    cursor: pointer;
}

.link-div textarea:focus {
    border: none;
    outline: none;
}

#im-set {
    padding: 6px 2%;
}

.content-but { /* Consider .content-button */
    display: inline-block;
    width: 82px;
    height: 82px;
    margin: 2px;
    cursor: pointer;
}

/* ==========================================================================
   Mobile Navigation Buttons
   ========================================================================== */

.port-nav {
    display: block; /* Shown in media query */
    margin: 4px 0;
    text-align: center;
}

.port-nav a {
    display: inline-block;
    width: 120px;
    height: 120px;
    margin: 8px;
    border: 4px solid var(--border-color-white);
    border-radius: var(--radius-xxxl);
    background-color: var(--bg-port-nav);
    color: var(--color-text-base);
    text-align: center;
    text-decoration: none;
    outline: none;
    box-shadow: 0px 0px 0px 1px var(--border-color-dark), inset 0 0 0 1px var(--border-color-medium); /* #bbb */
}
/* .port-nav a:link already covered by .port-nav a */

.port-nav a svg {
    margin: 8px 20px 2px;
}

.port-nav a p {
    margin: 0;
}

/* ==========================================================================
   Game Thumbs & Titles (Sprites)
   ========================================================================== */

.front-page-par {
    display: none;
    color: var(--color-text-subtle);
    line-height: 1.4em;
    text-align: center;

    width: 40%;
    margin: 15px 16px 20px 8px;
    text-align: left;
}

.game-thumb-base {
    display: none;
    width: 150px;
    height: 150px;
    margin: 10px 8px 18px 8px;
    padding: 0; /* Added */
    vertical-align: top;
    border: 3px solid var(--border-color-white);
    border-radius: var(--radius-xxl);
    box-shadow: var(--shadow-thumb);
    box-sizing: content-box;
}

.game-title-base {
    display: block;
    width: 300px;
    height: 135px;
    margin: 12px auto 12px;
    padding: 0; /* Added */
}

.game-title-0 { background: url('https://www.gamestolearnenglish.com/ims/front-page-ims/small-titles-0.0.2.png'); }
.game-title-1 { background: url('https://www.gamestolearnenglish.com/ims/front-page-ims/small-titles-1.0.1.png'); }
.game-title-2 { background: url('https://www.gamestolearnenglish.com/ims/front-page-ims/small-titles-2.0.0.png'); }
.game-title-3 { background: url('https://www.gamestolearnenglish.com/ims/front-page-ims/small-titles-3.0.0.png'); }
.game-title-4 { background: url('https://www.gamestolearnenglish.com/ims/front-page-ims/small-titles-4.0.0.png'); }


#clothesPane .game-title-0 { background-position: 0px 0px; }
#comparePane .game-title-0 { background-position: -304px 0px; }
#fastEnglishPane .game-title-0 { background-position: -608px 0px; }
#fastPhrasePane .game-title-0 { background-position: -912px 0px; }
#fastVocabPane .game-title-0 { background-position: -1216px 0px; }
#pastPane .game-title-0 { background-position: 0px -135px; }
#prepositionsPane .game-title-0 { background-position: -304px -135px; }
#vocabGamePane .game-title-0 { background-position: -608px -135px; }
#perfectPane .game-title-0 { background-position: -912px -135px; }
#futurePane .game-title-0 { background-position: -1216px -135px; }

#anMyPane .game-title-1 { background-position: 0px 0px; }
#dailyRoutinesPane .game-title-1 { background-position: -304px 0px; }
#concenPane .game-title-1 { background-position: -608px 0px; }
#condsPane .game-title-1 { background-position: -912px 0px; }
#bigDescPane .game-title-1 { background-position: -1216px 0px; }
#hangPane .game-title-1 { background-position: 0px -135px; }
#numbersPane .game-title-1 { background-position: -304px -135px; }
#phrasalVerbsPane .game-title-1 { background-position: -608px -135px; }
#bodyPartsPane .game-title-1 { background-position: -912px -135px; }
#speePane .game-title-1 { background-position: -1216px -135px; }

#weatherPane .game-title-2 { background-position: 0px 0px; }
#questionsPane .game-title-2 { background-position: -304px 0px; }
#speakEasyPane .game-title-2 { background-position: -608px 0px; }
#speakingPhrasesPane .game-title-2 { background-position: -912px 0px; }
#monsterPhrasesPane .game-title-2 { background-position: -1216px 0px; }
#foodPane .game-title-2 { background-position: 0px -135px; }
#presentSimplePane .game-title-2 { background-position: -304px -135px; }
#jobsPane .game-title-2 { background-position: -608px -135px; }
#fallingPane .game-title-2 { background-position: -912px -135px; }
#timePane .game-title-2 { background-position: -1216px -135px; }

#monsterVocabPane .game-title-3 { background-position: 0px 0px; }
#wordsearchPane .game-title-3 { background-position: -304px 0px; }
#revealPane .game-title-3 { background-position: -608px 0px; }
#daysPane .game-title-3 { background-position: -912px 0px; }
#grammarBubblesPane .game-title-3 { background-position: -1216px 0px; }
#monthsPane .game-title-3 { background-position: 0px -135px; }
#familyPane .game-title-3 { background-position: -304px -135px; }
#adverbsPane .game-title-3 { background-position: -608px -135px; }
#adverbsOfFreqPane .game-title-3 { background-position: -912px -135px; }
#anagramsPane .game-title-3 { background-position: -1216px -135px; }

#adjectivesPane .game-title-4 { background-position: 0px 0px; }
#fastQuizPane .game-title-4 { background-position: -304px 0px; }
#halloweenPane .game-title-4 { background-position: -608px 0px; }
#christmasPane .game-title-4 { background-position: -912px 0px; }
#idiomsPane .game-title-4 { background-position: -1216px 0px; }
#similesPane .game-title-4 { background-position: 0px -135px; }


/* Initially hidden items, shown in media queries or JS */
#speakEasyPane,
#speakingPhrasesPane {
    display: none;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media screen and (min-width: 28em) { /* Approx 448px */
    #main-div{
        width: 97%;
        border-radius: 4em;
    }

    .adslot_2 {
        display: none;
    }
}

@media screen and (min-width: 35.5em) { /* Approx 568px */

.game-title-0 { background: url('https://www.gamestolearnenglish.com/ims/front-page-ims/game-titles-0.1.6.png'); } 
.game-title-1 { background: url('https://www.gamestolearnenglish.com/ims/front-page-ims/game-titles-1.1.2.png'); } 
.game-title-2 { background: url('https://www.gamestolearnenglish.com/ims/front-page-ims/game-titles-2.1.2.png'); } 
.game-title-3 { background: url('https://www.gamestolearnenglish.com/ims/front-page-ims/game-titles-3.1.2.png'); } 
.game-title-4 { background: url('https://www.gamestolearnenglish.com/ims/front-page-ims/game-titles-4.1.2.png'); }

.game-thumb-0 { background: url('https://www.gamestolearnenglish.com/ims/front-page-ims/game-thumbs-0.0.2.png'); }
.game-thumb-1 { background: url('https://www.gamestolearnenglish.com/ims/front-page-ims/game-thumbs-1.0.2.png'); }
.game-thumb-2 { background: url('https://www.gamestolearnenglish.com/ims/front-page-ims/game-thumbs-2.0.1.png'); }
.game-thumb-3 { background: url('https://www.gamestolearnenglish.com/ims/front-page-ims/game-thumbs-3.0.4.png'); }
.game-thumb-4 { background: url('https://www.gamestolearnenglish.com/ims/front-page-ims/game-thumbs-4.0.2.png'); }

#clothesPane .game-title-0 { background-position: 0px 0px; }
#clothesPane .game-thumb-0 { background-position: -0px 0px; }
#comparePane .game-title-0 { background-position: -200px 0px; }
#comparePane .game-thumb-0 { background-position: -150px 0px; }
#fastEnglishPane .game-title-0 { background-position: -400px 0px; }
#fastEnglishPane .game-thumb-0 { background-position: -300px 0px; }
#fastPhrasePane .game-title-0 { background-position: -600px 0px; }
#fastPhrasePane .game-thumb-0 { background-position: -450px 0px; }
#fastVocabPane .game-title-0 { background-position: -800px 0px; }
#fastVocabPane .game-thumb-0 { background-position: -600px 0px; }
#pastPane .game-title-0 { background-position: 0px -67px; }
#pastPane .game-thumb-0 { background-position: 0px -150px; }
#prepositionsPane .game-title-0 { background-position: -200px -67px; }
#prepositionsPane .game-thumb-0 { background-position: -150px -150px; }
#vocabGamePane .game-title-0 { background-position: -400px -67px; }
#vocabGamePane .game-thumb-0 { background-position: -300px -150px; }
#perfectPane .game-title-0 { background-position: -600px -67px; }
#perfectPane .game-thumb-0 { background-position: -450px -150px; }
#futurePane .game-title-0 { background-position: -800px -67px; }
#futurePane .game-thumb-0 { background-position: -600px -150px; }

#anMyPane .game-title-1 { background-position: 0px 0px; }
#anMyPane .game-thumb-1 { background-position: 0px 0px; }
#dailyRoutinesPane .game-title-1 { background-position: -200px 0px; }
#dailyRoutinesPane .game-thumb-1 { background-position: -150px 0px; }
#concenPane .game-title-1 { background-position: -400px 0px; }
#concenPane .game-thumb-1 { background-position: -300px 0px; }
#condsPane .game-title-1 { background-position: -600px 0px; }
#condsPane .game-thumb-1 { background-position: -450px 0px; }
#bigDescPane .game-title-1 { background-position: -800px 0px; }
#bigDescPane .game-thumb-1 { background-position: -600px 0px; }
#hangPane .game-title-1 { background-position: 0px -67px; }
#hangPane .game-thumb-1 { background-position: 0px -150px; }
#numbersPane .game-title-1 { background-position: -200px -67px; }
#numbersPane .game-thumb-1 { background-position: -150px -150px; }
#phrasalVerbsPane .game-title-1 { background-position: -400px -67px; }
#phrasalVerbsPane .game-thumb-1 { background-position: -300px -150px; }
#bodyPartsPane .game-title-1 { background-position: -600px -67px; }
#bodyPartsPane .game-thumb-1 { background-position: -450px -150px; }
#speePane .game-title-1 { background-position: -800px -67px; }
#speePane .game-thumb-1 { background-position: -600px -150px; }

#weatherPane .game-title-2 { background-position: 0px 0px; }
#weatherPane .game-thumb-2 { background-position: 0px 0px; }
#questionsPane .game-title-2 { background-position: -200px 0px; }
#questionsPane .game-thumb-2 { background-position: -150px 0px; }
#speakEasyPane .game-title-2 { background-position: -400px 0px; }
#speakEasyPane .game-thumb-2 { background-position: -300px 0px; }
#speakingPhrasesPane .game-title-2 { background-position: -600px 0px; }
#speakingPhrasesPane .game-thumb-2 { background-position: -450px 0px; }
#monsterPhrasesPane .game-title-2 { background-position: -800px 0px; }
#monsterPhrasesPane .game-thumb-2 { background-position: -600px 0px; }
#foodPane .game-title-2 { background-position: 0px -67px; }
#foodPane .game-thumb-2 { background-position: 0px -150px; }
#presentSimplePane .game-title-2 { background-position: -200px -67px; }
#presentSimplePane .game-thumb-2 { background-position: -150px -150px; }
#jobsPane .game-title-2 { background-position: -400px -67px; }
#jobsPane .game-thumb-2 { background-position: -300px -150px; }
#fallingPane .game-title-2 { background-position: -600px -67px; }
#fallingPane .game-thumb-2 { background-position: -450px -150px; }
#timePane .game-title-2 { background-position: -800px -67px; }
#timePane .game-thumb-2 { background-position: -600px -150px; }

#monsterVocabPane .game-title-3 { background-position: 0px 0px; }
#monsterVocabPane .game-thumb-3 { background-position: 0px 0px; }
#wordsearchPane .game-title-3 { background-position: -200px 0px; }
#wordsearchPane .game-thumb-3 { background-position: -150px 0px; }
#revealPane .game-title-3 { background-position: -400px 0px; }
#revealPane .game-thumb-3 { background-position: -300px 0px; }
#daysPane .game-title-3 { background-position: -600px 0px; }
#daysPane .game-thumb-3 { background-position: -450px 0px; }
#grammarBubblesPane .game-title-3 { background-position: -800px 0px; }
#grammarBubblesPane .game-thumb-3 { background-position: -600px 0px; }
#monthsPane .game-title-3 { background-position: 0px -67px; }
#monthsPane .game-thumb-3 { background-position: 0px -150px; }
#familyPane .game-title-3 { background-position: -200px -67px; }
#familyPane .game-thumb-3 { background-position: -150px -150px; }
#adverbsPane .game-title-3 { background-position: -400px -67px; }
#adverbsPane .game-thumb-3 { background-position: -300px -150px; }
#adverbsOfFreqPane .game-title-3 { background-position: -600px -67px; }
#adverbsOfFreqPane .game-thumb-3 { background-position: -600px -150px; }
#anagramsPane .game-title-3 { background-position: -800px -67px; }
#anagramsPane .game-thumb-3 { background-position: -450px -150px; }

#adjectivesPane .game-title-4 { background-position: 0px 0px; }
#adjectivesPane .game-thumb-4 { background-position: 0px 0px; }
#fastQuizPane .game-title-4 { background-position: -200px 0px; }
#fastQuizPane .game-thumb-4 { background-position: -150px 0px; }
#halloweenPane .game-title-4 { background-position: -400px 0px; }
#halloweenPane .game-thumb-4 { background-position: -300px 0px; }
#christmasPane .game-title-4 { background-position: -600px 0px; }
#christmasPane .game-thumb-4 { background-position: -450px 0px; }
#idiomsPane .game-title-4 { background-position: -800px 0px; }
#idiomsPane .game-thumb-4 { background-position: -600px 0px; }
#similesPane .game-title-4 { background-position: 0px -67px; }
#similesPane .game-thumb-4 { background-position: 0px -150px; }


    body {
        background: var(--bg-body);
    }

    #body-default {
        background-size: 120% 750px;
    }
    #main-div {
        width: 90%;
        border-width: 8px; 
        box-shadow: var(--shadow-main-md);
    }

    .front-page-bar { 
        padding: 0;
    }

    .front-page-pane {
        display: inline-block;
        max-width:none;
        border: 10px solid var(--bg-port-nav); /* E9E9E9 */
        width: 80%;
        margin: 14px 2%;
        border-radius: 4em;
    }

    .front-page-par {
        display: inline-block;
    }

    .game-thumb-base {
        display: inline-block;
    }

    .game-title-base {
        width: 200px;
        height: 67px;
        margin: 16px auto 6px;
    }

    .my-text,
    .my-text-game {
        margin: 10px 24px 40px;
    }

    .my-comments {
        margin: 50px 20px 10px;
    }
    #my-comments-left,
    #my-comments-right {
        display: inline-block;
        width: auto;
        margin: 0 4px;
    }
    #my-comment-form input { /* Applies to all inputs in #my-comment-form */
        width: auto; /* Reverts from 70% */
    }
    #my-comment-form input#form-name { /* If you have specific ID for name input */
        margin-right: 12px;
    }
    #my-form input { /* Applies to all inputs in #my-form */
        width: auto; /* Reverts from 70% */
    }
    #my-comments-left-alt {
        display: none;
    }
    #my-comments-fix {
        display: inline-block;
    }
    .article-im {
        display: block;
        text-align: center;
    }
}

@media screen and (min-width: 48em) { /* Approx 768px */
    #body-game { /* Define this ID if used for game-specific body class */
        background-image: url('https://www.gamestolearnenglish.com/ims/mainBack.1.4.svg');
        background-repeat: no-repeat;
        background-position: top;
        background-size: 120% 750px;
    }
    .adslot_2 {
        display: block;
    }
    .break-hidden-onmobile {
        display: block;
    }
    .port-nav {
        display: none;
    }
    .front-page-pane {
        width: 60%;
    }
    #top-logo,
    #top-logo-game {
        position: absolute;
        margin-top: -42px;
        margin-left: 7%;
        padding-right: 0;
    }
    #top-logo-game {
        display: block;
    }
    #main-div-game { /* Define this ID if used for game-specific main div */
        position: relative;
        z-index: 99;
        display: block;
        width: 88%;
        margin: 8px auto -30px;
        border: 8px solid var(--border-color-light);
        border-radius: var(--radius-jumbo);
        background-color: var(--bg-main);
        box-shadow: var(--shadow-main-md);
        text-align: center;
    }
    #top-menu {
        display: block;
    }
    #my-footer-game {
        display: block;
    }
    #my-footer-left {
        margin-top: 0;
        padding-bottom: 0;
        border-bottom: none;
        text-align: right;
    }
    #my-footer-left p {
        margin: 16px 40px 16px 0;
    }
    #my-footer-right {
        margin-top: 0;
        border-left: 1px solid var(--border-color-white);
        text-align: left;
    }
    #my-footer-right a {
        margin: 16px 0 16px 40px;
    }
    .my-game {
        margin: 20px 0 0;
        padding: 3% 3% 0%;
    }
    #my-form {
        padding: 10px 50px 0;
    }
    .my-text,
    .my-text-game {
        margin: 10px 36px 40px;
    }
    .my-text-game {
        display: block;
    }
    .my-comments {
        display: block;
    }
    .my-comments-list,
    #my-comment-form {
        padding: 0 40px;
    }
    #my-form textarea {
        width: 70%;
    }
    .my-footer-part {
        display: inline-block;
        width: 40%;
    }
    .article-im {
        float: right;
    }
    #share-buts {
        float: left;
    }
    .share-div {
        display: inline-block;
    }
    .sharing-part {
        display: block;
    }
    #speakEasyPane,
    #speakingPhrasesPane {
        display: inline-block; /* Or block, depending on desired layout */
    }
}

@media screen and (min-width: 64em) { /* Approx 1024px */
    #body-default,
    #body-game { /* Assuming #body-game exists */
        background-size: 100% 800px;
    }
    #main-div,
    #main-div-game { /* Assuming #main-div-game exists */
        width: 86%;
    }
    .front-page-pane {
        width: 42%;
        /* width: 40%; */
        /* max-width: 400px; */
    }
    #menu-item-3 {
        display: inline-block;
    }
    .my-game {
        margin: 0; /* Reset from previous MQ */
    }
    .game-thumb-base { /* Affects all game thumbs */
        margin: 10px 2px 18px 14px;
    }
}

@media screen and (min-width: 80em) { /* Approx 1280px */
    #body-default,
    #body-game {
        background-size: 100% auto;
    }
    #main-div,
    #main-div-game {
        width: 78%;
    }
    #menu-item-4 {
        display: inline-block;
    }
    #top-menu {
        margin: 112px 6% 64px 6%;
    }
    .game-thumb-base { /* Reset to original sprite margins */
        margin: 10px 8px 18px 8px;
    }
}

@media screen and (min-width: 100em) { /* Approx 1600px */
    #top-menu {
        margin: 7% 6% 4% 6%;
    }
}

@media screen and (min-width: 140em) { /* Approx 2240px */
    #top-menu {
        margin: 6% 6% 3% 6%;
    }
}