html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  background: linear-gradient(
    180deg, 
    rgba(2, 0, 36, 1) 10%, 
    rgba(9, 66, 8, 1) 50%, 
    rgba(112, 182, 123, 1) 99%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover; /* ca să nu repete gradientul */
}
A:hover, A:link, A:visited, body {
	color: #272727;
}


.subarea_text a:link, A:active, A:link, A:visited {
	text-decoration: none;
}

a img, h1, p {
	border: 0;
}
img {
  max-width: 100%;
  height: auto;
}

body, h1, li, p, ul {
	padding: 0;
	margin: 0;
}

h1 {
	position: relative;
	text-align: center;
}

.header, img, nav.responsive {
	display: inline-block;
	text-align: center;
}

.resp-container {
	overflow: hidden;
	position: relative;
	text-align: center;
}

.resp-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.center {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;    /* Center vertically */
}

#bodyarea {
	clear: both;
}

.bot {
	width: 100%;
	margin-top: 12px;
	margin-bottom: 12px;
	display: inline-block;
}

h2 {
	color: #117636;
	text-align: center;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	font-size: 20px;
	padding-top: 2px;
	margin-top: 2px;
}

h3, h4 , h5 {
	color: #117636;
	text-align: center;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	font-size: 20px;
	padding-top: 2px;
	margin-top: 2px;
}

.sidebar {
    width: 200px;
    position: fixed;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar.left {
    left: 0;
}

.sidebar.right {
    right: 0;
}

.ad {
    width: 160px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    color: #333;
}

A:hover {
	text-decoration: underline;
	cursor: pointer;
}

A:active {
	color: #558412;
}

li, ul {
	list-style: none;
}

p {
	color: #f9f6f5;
	font-weight: 200;
	text-align: center;
	font-size: 16px;
}

#wrapper {
	width: 996px;
	margin-left: auto;
	margin-right: auto;
}

.top_logo {
    max-width: 100%; /* Ensure the container resizes */
    margin: 0 auto; /* Center the container */
}

.top_logo img {
    max-width: 100%; /* Ensure the image resizes proportionally */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below the image */
    margin: 0 auto; /* Center the image horizontally */
}

.howto-table{
  width: calc(100% - 20px);   /* 10px stanga + 10px dreapta */
  margin: 0 10px 10px 10px;  /* jos 10px fata de urmatorul element */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.howto-left{
  vertical-align: top;
  padding: 14px 16px;
  width: 55%;                /* mai restrans */
  background: rgb(236, 233, 220); /* bej cald armonizat cu site-ul */
  border-radius: 10px;
}

.howto-right{
  vertical-align: top;
  width: 45%;
  padding-left: 20px;        /* spatiu egal intre coloane */
}

.howto-img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.howto-caption{
  font-size: 12px;
  opacity: .85;
  margin-top: 6px;
}

.howto-title{
  margin: 0 0 8px;
  font-size: 18px;
}

.howto-step{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0;   /* mai compact pe inaltime */
  line-height: 1.3;
}

.howto-ico{
  width: 24px;
  height: 24px;
  font-size: 16px;
  flex: 0 0 24px;
}
.version-buttons,
.utility-buttons{
  display:flex;
  align-items:center;
  gap:8px;
}

.vbtn,
.ubtn{
  height:34px;                 /* înălțime fixă */
  padding:0 12px;              /* eliminăm padding vertical */
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid #ccc;
  background:#fff;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  box-sizing:border-box;
}

/* active state păstrat */
.version-switch .vbtn.active{
  border-color:#7a3cff;
  background:#f3edff;
}

/* hover uniform */
.vbtn:hover,
.ubtn:hover{
  background:#f3edff;
  border-color:#7a3cff;
}
/* Responsive: stack columns on small screens */
@media (max-width: 860px){
  .howto-table, .howto-table tr, .howto-table td{
    display:block;
    width:100%;
  }
  .howto-right{
    padding:12px 0 0;
  }
}
nav2 {
	font-weight: 700;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	position: center;
	text-align: center;
	padding-top: 15px;
	float: left;
	border-bottom: 13px;
	display: block;
	border-bottom: 2px solid #99905a;
	width: 996px;
	font-size: 12px;
	background-color: #c0ba94;
	-webkit-appearance: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	overflow-wrap: break-word;
    word-break: break-word;
	box-sizing: border-box;
	padding: 10px;
}
.mv-leaderboard {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 996px;
	min-height: 90px;
    max-width: 100%;     /* ca să NU depășească wrapper-ul / ecranul */
	height: auto !important;
    box-sizing: border-box;
    background-color: #c0ba94;
    border-radius: 4px;
    border-bottom: 2px solid #99905a;
    margin-top: 12px;
    float: left;
}
.game-area,
.mv-leaderboard,
.horizontal,
.content-block {
  margin-top: 12px;
}

.mv-leaderboard:empty {
  display: none;
}

.horizontal {
  margin-top: 12px;
  margin-bottom: 12px;
  clear: both;
  max-width: 996px;
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  background-color: #c0ba94;
  border-radius: 4px;
  border-bottom: 2px solid #99905a;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 16px;
  float: left;      /* important */
}
.horizontal ul {
  display: block;
  list-style: disc;
  padding-left: 20px;
  margin: 12px 0;
  width: 100%;
}

.horizontal li {
  display: list-item;
  margin-bottom: 6px;
}
.horizontal .game {
  float: none !important;
  margin: 0 !important;
  width: auto !important;
  flex: 1 1 220px;
  max-width: 300px;
  box-sizing: border-box;
}

@media (max-width: 991px) {
  .horizontal { justify-content: center; }
  .horizontal .game { flex: 1 1 45%; max-width: 100%; }
}
@media (max-width: 480px) {
  .horizontal { padding: 10px; }
  .horizontal .game { flex: 1 1 100%; }
}
.content-block {
  margin-top: 12px;
  clear: both;
  max-width: 996px;
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  background-color: #c0ba94;
  border-radius: 4px;
  border-bottom: 2px solid #99905a;
  display: block;
}



.leftarea, horizontal {
	float: left;
	border-bottom: 13px;
}

nav {
	width: auto;
	background-color: #7f6805;
	font-size: 16px;
	color: #f7f5f4;
	border-radius: 4px;
	border-bottom: 3px solid #534403;
	display: block;
}

.menu, horizontal {
	display: block;
	border-bottom: 2px solid #99905a;
}


.introduction, .menu {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-appearance: none;
}

#bodyarea {
	margin-bottom: 12px;
}

.leftarea {
	width: 214px;
	margin-right: 13px;
}

.menu {
	position: relative;
	width: 214px;
	margin-bottom: 0px;
	background-color: #c0ba94;
	border-radius: 4px;
	margin-top: 13px;
}

.menu_corner {
	position: absolute;
	left: 7px;
	top: 7px;
}

.menu_content {
	z-index: 100;
	position: relative;
	padding-left: 31px;
	padding-top: 24px;

	padding-bottom: 12px;
	line-height: 24px;
}

.menu_content_title {
	font-weight: 800;
}

.menu_content_180 {
	margin-top: 12px;
	margin-left: 17px;
	margin-bottom: 13px;
	display: inline-block;
}

.menu_content_160 {
	width: 160px;
	height: 600px;
	margin-top: 27px;
	margin-left: 27px;
	margin-bottom: 27px;
	background-color: #fff;
	display: inline-block;
}

.rightarea {
	margin-top: 13px;
	float: right;
	width: 769px;
}

.introduction {
	float: left;
	position: relative;
	width: 420px;
	height: 278px;
	background-color: #70b67b;
	border-radius: 4px;
	border-bottom: 2px solid #446c4a;
}

.adarea1, .indexarea, .gamesarea {
	background-color: #c0ba94;
}

.gamesarea, .indexarea, .subarea {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

.introduction_text {
	color: #f1f7f0;
	line-height: 22px;
	padding-left: 12px;
	padding-right: 8px;
	padding-top: 7px;
	font-size: 16px;
}

.gametext1, .gametext3, .text {
	padding-left: 1px;
}

.gametext1, .gametext2, .text {
	padding-top: 4px;
}

.adarea1 {
	float: right;
	width: 336px;
	height: 280px;
}

.square {
	float: right;
	width: 336px;
	height: 278px;
	background-color: #c0ba94;
	filter: brightness(111%);
	-webkit-filter: brightness(111%);
	-moz-filter: brightness(111%);
	-o-filter: brightness(111%);
	-ms-filter: brightness(111%);
	border-radius: 4px;
	border-bottom: 2px solid #99905a;
}

.adarea1:hover {
	filter: brightness(111%);
	-webkit-filter: brightness(111%);
	-moz-filter: brightness(111%);
	-o-filter: brightness(111%);
	-ms-filter: brightness(111%);
	border-radius: 4px;
	border-bottom: 2px solid #99905a;
}

.gamesarea {
	float: left;
	width: 95%;
	height: auto;
	-webkit-appearance: none;
	border-radius: 4px;
	border-bottom: 2px solid #99905a;
	padding-bottom: 20px;
	text-align: center;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 12px;
}

.indexarea {
	float: left;
	width: 100%;
	margin-bottom: 13px;
	-webkit-appearance: none;
	border-radius: 4px;
	border-bottom: 2px solid #99905a;
	padding-bottom: 10px;
	text-align: center;
	padding-top: 20px;
}

.gamewrapper {
	margin-left: 19px;
	float: left;
	width: 225px;
	padding-bottom: 5px;
	margin-bottom: 12px;
	border: solid 2px rgba(112, 182, 123, 1.00);
}

.bottomwrapper {
	margin-left: 16px;
	float: left;
	width: 225px;
	margin-bottom: 12px;
	border: solid 2px rgba(112, 182, 123, 1.00);
}

.textwrapper {
	width: auto;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 12px;
	padding: 15px;
	margin-bottom: 12px;
	border: 1px solid #ddd;
    border-radius: 5px;
	text-align: center;
}

.gametext1 {
	font-size: 16px;
	color: #2f2f2f;
	font-weight: 700;
}

.gametext1 A:active, .gametext1 A:link, .gametext1 A:visited {
	color: #2f2f2f;
	TEXT-DECORATION: none;
}

.gametext1 A:hover {
	color: #2f2f2f;
	TEXT-DECORATION: underline;
}

.gametext2 {
	padding-bottom: 2px;
	display: block;
	color: #f8f3f3;
	font-weight: 400;
	font-size: 14px;
}

.gametext3 {
	color: #2f2f2f;
	line-height: 22px;
}

.text {
	font-size: 16px;
	color: #2f2f2f;
	font-weight: 500;
	padding-left: 10px;
	padding-right: 10px;
}

.subarea {
	width: 100%;
	-webkit-appearance: none;
	border-bottom: 2px solid #dacba1;
	float: left;
}
.game {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px;
    width: calc(27% - 40px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
    padding-bottom: 0px;
	float: left;
}

.game img {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.game h2 {
    font-size: 1.2em;
    margin: 10px 0;
}

.game p {
    color: #555;
}

.game:hover {
    transform: scale(1.05);
}

.subarea {
	padding-bottom: 2px;
	background-color: #fcf5d8;
	border-radius: 4px;
}

.subarea_heading1 {
	font-weight: 700;
	font-size: 20px;
	color: #d96b12;
	padding: 12px 8px 6px 16px;
}

.subarea_text a:active, .subarea_text a:link, .subarea_text a:visited {
	color: #0254eb;
}

.subarea_heading2 {
	font-weight: 700;
	font-size: 20px;
	padding-left: 16px;
	padding-right: 8px;
	padding-bottom: 12px;
}

.subarea_form, .subarea_text {
	padding-left: 16px;
	padding-right: 16px;
}

.subarea_text {
	line-height: 22px;
	padding-bottom: 10px;
}

.subarea_text a:hover {
	color: #0254eb;
	text-decoration: underline;
}

.subarea_img {
	margin-top: 2px;
	margin-bottom: 8px;
	width: 100%;
}

@media (max-width: 991px) {
	.top_b {
		padding-top: 0;
		text-align: center;
	}
	.game {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px;
    width: calc(27% - 40px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
    padding-bottom: 0px;
	float: left;
}

.game img {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.game h2 {
    font-size: 1.2em;
    margin: 10px 0;
}

.game p {
    color: #555;
}

.game:hover {
    transform: scale(1.05);
}

	.img-responsive {
		max-width: 100%;
		height: 100%;
		text-align: center;
	}

	#wrapper {
		width: 768px;
	}

	.fixed {
		display: block;
	}

	.leftarea {
		display: none;
	}

	#bodyarea {
		margin-top: 12px;
	}

	.gamesarea {
		margin-bottom: 15px;
	}

	.rightarea {
		margin-top: 13px;
		width: 100%;
	}

	.gamewrapper {
		margin-left: 12px;
		width: 239px;
	}

	.bottomwrapper {
		margin-left: 12px;
		width: 239px;
	}

	.top_b {
		display: block;
	}
}

@media (max-width: 767px) {
	.img-responsive {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	#wrapper {
		width: 631px;
	}
	.game {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px;
    width: calc(36% - 40px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
    padding-bottom: 0px;
	float: left;
}

.game img {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.game h2 {
    font-size: 1.2em;
    margin: 10px 0;
}

.game p {
    color: #555;
}

.game:hover {
    transform: scale(1.05);
}

	.top_logo {
		padding-top: 0;
		padding-bottom: 14px;
	}

	.img-responsive {
		max-width: 100%;
		height: auto;
		position: center;
	}

	.gamesarea {
		max-width: 590px;
		height: auto;
		position: center;
	}

	.adarea1 {
		display: none;
	}

	.square {
		display: none;
	}

	.introduction {
		height: auto;
		width: 100%;
	}

	.introduction_text {
		padding-bottom: 12px;
	}

	.gamewrapper {
		width: 296px;
		margin-left: 13px;
	}
}
@media (max-width: 991px) {
    .mv-leaderboard {
        width: 100%;
        max-width: 100% !important;
        margin-left: auto;
		margin-right: auto;
		text-align: center;
		box-sizing: border-box;
		min-height: 90px;
   		max-width: 100%;     /* ca să NU depășească wrapper-ul / ecranul */
		height: auto !important;
		background-color: #c0ba94;
		border-radius: 4px;
		border-bottom: 2px solid #99905a;
		margin-top: 12px;
		float: left;
    }
}
@media (max-width: 767px) {
    .mv-leaderboard {
        width: 100%;
        max-width: 100% !important;
        margin-left: auto;
		margin-right: auto;
		text-align: center;
		box-sizing: border-box;
		min-height: 90px;
   		max-width: 100%;     /* ca să NU depășească wrapper-ul / ecranul */
		height: auto !important;
		background-color: #c0ba94;
		border-radius: 4px;
		border-bottom: 2px solid #99905a;
		margin-top: 12px;
		float: left;
    }
}

@media (max-width: 480px) {
    .mv-leaderboard {
        width: 100%;
        max-width: 100% !important;
        margin-left: auto;
		margin-right: auto;
		text-align: center;
		box-sizing: border-box;
		min-height: 90px;
   		max-width: 100%;     /* ca să NU depășească wrapper-ul / ecranul */
		height: auto !important;
		background-color: #c0ba94;
		border-radius: 4px;
		border-bottom: 2px solid #99905a;
		margin-top: 12px;
		float: left;
    }
}
@media (max-width: 640px) {
	#wrapper {
		width: 503px;
	}

	.gamewrapper {
		width: 239px;
		margin-left: 132px;
	}
	.game {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px;
    width: calc(37% - 40px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
    padding-bottom: 0px;
	float: left;
}

.game img {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.game h2 {
    font-size: 1.2em;
    margin: 10px 0;
}

.game p {
    color: #555;
}

.game:hover {
    transform: scale(1.05);
}

	.bottomwrapper {
		width: 239px;
		margin-left: 132px;
	}

	.gamesarea {
		max-width: 462px;
		height: auto;
		position: center;
	}
}

@media (max-width: 525px) {
	#wrapper {
		width: 435px;
	}
	.game {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px;
    width: calc(54% - 40px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
    padding-bottom: 0px;
	float: left;
}

.game img {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.game h2 {
    font-size: 1.2em;
    margin: 10px 0;
}

.game p {
    color: #555;
}

.game:hover {
    transform: scale(1.05);
}

	.gamewrapper {
		margin-left: 98px;
	}

	.bottomwrapper {
		margin-left: 98px;
	}

	.gamesarea {
		max-width: 396px;
		height: auto;
		position: center;
	}
}

nav2 {
    margin-top: 12px;
    padding-top: 12px;
    border-bottom-width: medium;
    font-size: 18px;
    color: #117636;
}

@media (max-width: 480px) {
	#wrapper {
		width: 320px;
	}
.game {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px;
	margin-left: 19px;
    width: calc(100% - 40px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
    padding-bottom: 0px;
	float: left;
}

.game img {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.game h2 {
    font-size: 1.2em;
    margin: 10px 0;
}

.game p {
    color: #555;
}

.game:hover {
    transform: scale(1.05);
}
	.gamewrapper {
		width: 240px;
		margin-left: 37px;
	}

	.bottomwrapper {
		margin-left: 40px;
	}

	#TEXTAREA_ID {
		width: 260px;
	}

	.gamesarea {
		max-width: 280px;
		height: auto;
		position: center;
	}
}
/* =====================================================
   DEVICE OPTIMIZATION (TABLET + MOBILE ONLY)
   Nu afectează desktop (>= 992px)
   ===================================================== */
@media (max-width: 991px) {

  /* === LAYOUT === */
  .leftarea {
    display: none !important;
  }

  .rightarea {
    width: 100% !important;
    float: none;
  }

  /* === GAME IFRAME === */
  #iframehtml5,
  .iframe-default {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    margin: 0 auto;
  }

  /* === MOBILE ADS CLEANUP (non-sticky) === */
  .mv-leaderboard,
  .mv_slot_target_desktop,
  .square,
  .adarea1,
  .menu_content_160,
  .menu_content_180 {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
  }

  /* === GAME UX === */
  #iframehtml5 {
    height: 72vh;
    position: relative;
    z-index: 10;
  }

  /* === CARD GRID === */
  .game {
    width: calc(50% - 40px);
  }

  /* === iOS PERFORMANCE === */
  body {
    background-attachment: scroll;
  }
}

/* Extra small phones */
@media (max-width: 480px) {

  .game {
    width: calc(100% - 40px) !important;
    margin-left: 20px;
    margin-right: 20px;
  }

  #iframehtml5 {
    height: 75vh;
  }

}
.game-area {
 width: 100%;
 height: auto;
 position: relative;
 z-index: 50;
 margin-left: auto;
 margin-right: auto;
 padding: 15px;
 text-align: center;
 box-sizing: border-box;
 background-color: #c0ba94;
 border-radius: 4px;
 border-bottom: 2px solid #99905a;
 margin-top: 12px;
 float: left;
}

.game-frame {
  position: relative;
  z-index: 9999; /* prioritar: jocul peste orice container normal */
  background: transparent;
  border-radius: 6px;
  overflow: hidden;
}

.long {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 800px;
  border: 0;
  background: transparent;
  position: relative;
  z-index: 9999;
}
#scrabble,
.scrabble {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 750px;
  border: 0;
  background: transparent;
  position: relative;
  z-index: 9999;
}
#iframehtml5,
.iframe-default {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 620px;
  border: 0;
  background: transparent;
  position: relative;
  z-index: 9999;
}

@media (max-width: 1200px) {
  #iframehtml5,
  .iframe-default { height: 72vh; min-height: 520px; }
}

.ws-card{
  box-sizing: border-box;
  width: 100%;
  max-width: 860px;      
  margin: 14px auto;
  padding: 16px 16px 14px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.10);
  background: #c0ba94;
}

.ws-top{ margin-bottom: 12px; }

.ws-h{
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: .2px;
}

.ws-sub{
  margin: 6px 0 0 0;
  font-size: 13px;
  line-height: 1.45;
  opacity: .85;
}

.ws-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.ws-label{
  display: block;
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 800;
}

.ws-input{
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  background: #fff;
}

.ws-input:focus{
  border-color: rgba(0,0,0,.35);
}

.ws-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ws-btn{
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;
}

.ws-btn-primary{
  background: #B04A28;
  color: #fff;
}

.ws-btn-ghost{
  background: rgba(0,0,0,.08);
}

.ws-btn:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.ws-tip{
  margin: 10px 0 0 0;
  font-size: 12px;
  opacity: .85;
}

.ws-out-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.ws-count{
  font-size: 12px;
  font-weight: 800;
  opacity: .75;
}

.ws-output{
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 11px 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.35;
  background: #fff;

  resize: none; 
  overflow: hidden; 
  min-height: 140px;
}

/* Mobile */
@media (max-width: 860px){
  .ws-card{ max-width: 100%; }
  .ws-grid{ grid-template-columns: 1fr; }
}
.ws-section{
  clear: both;
  width: 100%;
  margin: 16px 0;
}.ws-break{
  clear: both; 
  width: 100%;
  display: block;
  margin-top: 16px;
}

.ws-card{
  box-sizing: border-box;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}
.ws-card{ margin: 0; max-width: 100%; }
.version-switch{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin: 5px 0 8px;
  flex-wrap: wrap;
}

.version-switch .vbtn{
  padding: 4px 5px;
  border: 1px solid #ccc;
  background: #fff;
  color: #222;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.version-switch .vbtn.active{
  border-color: #7a3cff;
  background: #f3edff;
}

@media (min-width: 992px){
  .ubtn-theme{
    background: #2b2b2b;
    border-color: #1f1f1f;
    color: #f2f2f2;
    font-weight: 700;
    padding: 0 14px;
  }

  .ubtn-theme:hover{
    background: #1f1f1f;
    border-color: #121212;
  }
}

@media (max-width: 991px){
  #btnTheme{ display: none !important; }
}
/* =========================
   DARK MODE (DESKTOP ONLY)
   ========================= */
@media (min-width: 992px){

  body.dark-mode{
    background: #0f1013;
    color: #e7e7e7;
  }

  body.dark-mode h1,
  body.dark-mode h2,
  body.dark-mode h3{
    color: #f3f3f3;
  }

  body.dark-mode p,
  body.dark-mode li{
    color: #d9d9d9;
  }

  body.dark-mode a{
    color: #8ab4f8;
  }

  body.dark-mode a:hover{
    color: #b7d1ff;
  }

  body.dark-mode .horizontal,
  body.dark-mode .content-box,
  body.dark-mode article.content-box,
  body.dark-mode section.content-box{
    background-color: #16181d !important;
    border-color: #2a2d35 !important;
    color: #e7e7e7;
  }

  body.dark-mode #wrapper,
  body.dark-mode #bodyarea{
    background: transparent;
  }

  body.dark-mode .leftarea,
  body.dark-mode .menu{
    background-color: #14161b !important;
    border-color: #2a2d35 !important;
    color: #e7e7e7;
  }

  body.dark-mode nav.fixed,
  body.dark-mode .nav2{
    background-color: #12141a !important;
    border-color: #2a2d35 !important;
    color: #e7e7e7;
  }

  /* butoanele tale mici (⭐, 🔗) sa se potriveasca */
  body.dark-mode .ubtn{
    background: #20232b;
    border-color: #2a2d35;
    color: #f1f1f1;
  }

  body.dark-mode .ubtn:hover{
    background: #171a20;
    border-color: #3a3f4b;
  }

  body.dark-mode .ubtn-theme{
    background: #e9e9ea;
    border-color: #cfcfd4;
    color: #111;
  }

  body.dark-mode .ubtn-theme:hover{
    background: #d9d9db;
    border-color: #bdbdc4;
  }

  body.dark-mode iframe{
    background: transparent !important;
  }
}
/* =========================
   DARK MODE PATCHES (DESKTOP)
   ========================= */
@media (min-width: 992px){

  body.dark-mode .content-block,
  body.dark-mode .contentblock,
  body.dark-mode .content,
  body.dark-mode .block,
  body.dark-mode .box{
    background-color: #16181d !important;
    border-color: #2a2d35 !important;
    color: #e7e7e7 !important;
  }

  body.dark-mode .game-area,
  body.dark-mode .gamearea,
  body.dark-mode .gamewrapper,
  body.dark-mode .rightarea{
    background-color: #0f1013 !important;
    border-color: #2a2d35 !important;
    color: #e7e7e7 !important;
  }

  body.dark-mode .square{
    background-color: #0f1013 !important;
    border-color: #2a2d35 !important;
  }

  body.dark-mode .square,
  body.dark-mode .square *{
    color: #cfcfcf !important;
  }

  body.dark-mode .card,
  body.dark-mode .panel,
  body.dark-mode .widget{
    background-color: #16181d !important;
    border-color: #2a2d35 !important;
    color: #e7e7e7 !important;
  }
}
@media (min-width: 992px){

  body.dark-mode .howto-table{
    background-color: #16181d !important;
    border-color: #2a2d35 !important;
  }

  body.dark-mode .howto-table td{
    background-color: #16181d !important;
    border-color: #2a2d35 !important;
    color: #e7e7e7 !important;
  }

  body.dark-mode .howto-table th{
    background-color: #1b1e24 !important;
    color: #f3f3f3 !important;
    border-color: #2a2d35 !important;
  }

  body.dark-mode .howto-table *{
    color: inherit;
  }
}
/* =========================================================
   PHONE ONLY (<= 600px) - GAME FIRST + CLEAN LAYOUT
   Necesita: <body class="game-page"> pe paginile de joc
   Nu afecteaza tablete sau desktop
   ========================================================= */
@media (max-width: 600px){

  /* 0) Anti overflow (gap dreapta) */
  html, body{
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 1) Wrapper full width (nu latimi fixe) */
  #wrapper{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* 2) Sticky MV space doar pe pagini de joc */
  body.game-page{
    --mv-sticky-h: 90px; /* ajusteaza 80-120px dupa sticky-ul real */
    padding-bottom: calc(var(--mv-sticky-h) + env(safe-area-inset-bottom, 0px));
  }

  /* 3) REORDER: jocul devine primul element pe mobil */
  body.game-page #bodyarea{
    display: flex !important;
    flex-direction: column !important;
  }

  body.game-page .game-area{ order: 1 !important; }
  body.game-page nav.fixed{ order: 2 !important; } /* H1 ramane (SEO consistent) */
  body.game-page nav2{ order: 3 !important; }      /* text/continut ramane dupa joc */
  body.game-page .content-block{ order: 4 !important; }
  body.game-page .horizontal{ order: 5 !important; }
  body.game-page .bot{ order: 6 !important; }

  /* 4) Ascunde elementele care imping jocul in jos */
  body.game-page .leftarea,
  body.game-page .rightarea,
  body.game-page .introduction,
  body.game-page .square,
  body.game-page .mv-leaderboard,
  body.game-page .mv_slot_target_desktop,
  body.game-page .adarea1,
  body.game-page .menu_content_160,
  body.game-page .menu_content_180{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
  }

  /* 5) Ascunde cardurile .game (ex: nav2 cu jocuri inainte de iframe) */
  body.game-page .game{
    display: none !important;
  }

  /* 6) Butoane peste joc: ascunde pe telefon */
  body.game-page .version-switch{
    display: none !important;
  }

  /* 7) Zona jocului */
  body.game-page .game-area{
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-sizing: border-box;
  }

  body.game-page .game-frame{
    width: 100% !important;
    box-sizing: border-box;
  }

  /* universal: orice iframe din game-area */
  body.game-page .game-area iframe{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    background: transparent !important;

    height: calc(100vh - var(--mv-sticky-h)) !important;
    min-height: 520px;
  }

  /* 8) nav2 (containerul tau) sa fie full width pe mobil */
  body.game-page nav2{
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
    margin: 12px 0 0 !important;
  }

  /* 9) FIX howto-table (gap dreapta) */
  body.game-page .howto-table{
    width: 100% !important;
    margin: 0 !important;
    table-layout: auto !important;
    box-sizing: border-box !important;
  }

  body.game-page .howto-table,
  body.game-page .howto-table tr,
  body.game-page .howto-table td,
  body.game-page .howto-left,
  body.game-page .howto-right{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.game-page .howto-left,
  body.game-page .howto-right{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.game-page .howto-img{
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
  .mv_slot_target_desktop,
  .mv-leaderboard{
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* ================================
   FIX: cut-off tiles at 1024x768
   + stronger phone (<=600px) sizing
   ================================ */

/* 1024x768 and similar small laptops: give the iframe more vertical room */
@media (max-width: 1024px) and (max-height: 800px){
  .game-frame{
    overflow: visible !important; /* avoid clipping the game bottom */
  }

  #iframehtml5,
  .iframe-default{
    height: 86vh !important;      /* was ~72vh via earlier rules */
    min-height: 680px !important; /* keeps rack visible */
  }
}

/* Phones: make sure sticky ads do not steal too much height */
@media (max-width: 600px){
  body.game-page{
    --mv-sticky-h: 120px; /* safer default than 90px */
  }

  body.game-page .game-frame{
    overflow: visible !important;
  }

  body.game-page .game-area iframe{
    height: calc(100vh - var(--mv-sticky-h)) !important;
    min-height: 560px !important; /* a bit safer for rack */
  }
}
@media (max-width: 976px) {

  body {
    background-attachment: fixed !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #70b67b; /* fallback ca sa nu mai apara alb */
  }

  .leftarea,
  .rightarea,
  .horizontal {
    display: none !important;
  }
  .game-frame {
    overflow: visible;
  }

  #iframehtml5,
  .iframe-default {
    height: 900px !important;
    min-height: 900px !important;
  }

  .version-switch {
    flex-wrap: wrap;
  }

  .utility-buttons {
    flex-wrap: wrap;
  }
}