/* fonts */

@font-face {
  font-family: 'RobotoFlex-Extended';
  src: url('../fonts/RobotoFlex-SuperExtendedBlack.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'RobotoFlex-Extended';
  src: url('../fonts/RobotoFlex-SuperExtendedBlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: 'ProximaNova-Regular';
  src: url('../fonts/ProximaNova-Regular.ttf')  format('truetype'); /* IE9 Compat Modes */
}

@font-face {
  font-family: 'ProximaNova-Bold';
  src: url('../fonts/ProximaNova-Bold.ttf')  format('truetype'); /* IE9 Compat Modes */
}

@font-face {
  font-family: 'ProximaNova-Medium';
  src: url('../fonts/ProximaNova-Medium.ttf')  format('truetype'); /* IE9 Compat Modes */
}

@font-face {
  font-family: 'ProximaNovaCond-Black';
  src: url('../fonts/ProximaNovaCond-Black.ttf')  format('truetype'); /* IE9 Compat Modes */
}

/* <label class="custom-checkbox"><input type="checkbox" id="acord1"><span class="checkmark"></span> <span class="checkbox-label">Am citit și sunt de acord cu regulamentul campaniei.</span></label> */

html,body {
	margin: 0;
	padding: 0;
	font-family: 'RobotoFlex-Extended', sans-serif;
}

h1,h2,h3 {
	color:#eff098;
	font-family: 'RobotoFlex-Extended', sans-serif;
	font-size:54px;
}

.cursor-pointer {cursor:pointer;}

h2 {
	font-size:42px
}

h3 {
	font-size:32px;
}

p {
	font-size:18px;
}

img {
	max-width: 100%;
}

* {
	box-sizing: border-box;
}

.container {
	max-width:1400px;
}

#nav-icon3 {
  width: 50px;
  height: 45px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  position: absolute;
  /*top:25px;*/
  left:0px;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 8px;
  width: 100%;
  background: #1e2d7c;
  border-radius: 7px;
  border:0px solid white;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  
}

#nav-icon3 span:nth-child(1) {
  top: 0px;
  -webkit-box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.2);
	-moz-box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.2);
	box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.2);
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 14px;
}

#nav-icon3 span:nth-child(3) {  
  -webkit-box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.2);
	-moz-box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.2);
	box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.2);
}

#nav-icon3 span:nth-child(4) {
  top: 28px;
  -webkit-box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.2);
	-moz-box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.2);
	box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.2);
}

#nav-icon3.open span {
	background:#1e2d7c;
	box-shadow:none;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
    border:none;
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
    border:none;
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
  border:none;
}

/* Customize the checkbox appearance */
.custom-checkbox {
  display: inline-block;
  position: relative;
  padding-left: 40px;
  margin-bottom: 15px;
  margin-top:15px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.5;
}

/* Style the checkbox input */
.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.custom-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 3px solid #fff;
  border-radius: 5px;
  margin-right:10px;
  background-color:#fff;
}

/* Style the checkmark icon */
.custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 9px;
  top: 5px;
  width: 6px;
  height: 13px;
  border: solid #000;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Style the checked state */
.custom-checkbox input[type="checkbox"]:checked + .checkmark:after {
  display: block;
}

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

}	

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

/* code screen */

html.code-screen-root,
body.code-screen {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	touch-action: manipulation;
}

body.code-screen {
	position: fixed;
	inset: 0;
	background: #2a0a1a url('../images/napoleon-code-game-keypad-screen.jpg') center center / cover no-repeat;
}

.screen-logos {
	position: absolute;
	top: 2.5vh;
	right: 2.5vw;
	z-index: 10;
	width: auto;
	height: 10vh;
	max-height: 100px;
	object-fit: contain;
	pointer-events: none;
}

.screen-layout {
	display: flex;
	align-items: stretch;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.screen-keypad {
	position: relative;
	flex: 0 0 55%;
	width: 55%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2vh 1vw 2vh 2vw;
}

.screen-keypad img {
	display: block;
	height: 80%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: center center;
}

.screen-insert {
	flex: 0 0 45%;
	width: 45%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2vh 3vw 2vh 1vw;
}

.screen-insert img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 85%;
	object-fit: contain;
	object-position: center center;
}

#your-code {
	letter-spacing: 0.08em;
	-webkit-user-select: none;
	user-select: none;
}

#your-code .code-char,
#your-code .code-placeholder {
	display: inline-block;
	min-width: 0.55em;
	text-align: center;
}

#your-code .code-placeholder {
	opacity: 0.45;
}

@keyframes code-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(4px); }
}

#your-code.code-shake {
	animation: code-shake 0.4s ease-in-out;
}

.result-screen {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8vh 8vw;
	text-align: center;
}

.result-screen.is-hidden {
	display: none;
}

.result-screen-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5vh;
	max-width: 92vw;
}

.result-message {
	margin: 0;
	color: #fff;
	font-size: clamp(28px, 4.2vw, 64px);
	line-height: 1.2;
	max-width: 92vw;
	text-transform: uppercase;
}

.result-message .typewriter-cursor {
	display: inline-block;
	margin-left: 0.05em;
	animation: cursor-blink 0.75s step-end infinite;
}

.app-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 280px;
	padding: 1.4vh 4vw;
	border: 2px solid #fff;
	border-radius: 999px;
	background: #260e24;
	color: #fff;
	font-family: 'RobotoFlex-Extended', sans-serif;
	font-size: clamp(22px, 3vw, 42px);
	font-style: italic;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	-webkit-tap-highlight-color: transparent;
}

.app-btn:active {
	transform: scale(0.98);
}

.prize-screen {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8vh 5vw;
}

.prize-screen.is-hidden {
	display: none;
}

.prize-screen.prize-screen--ready {
	cursor: pointer;
}

.prize-screen-layout {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex: 1;
	gap: 4vw;
}

.prize-screen-text {
	flex: 0 0 50%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 4vw;
}

.prize-screen-text p {
	margin: 0;
	color: #fff;
	font-size: clamp(32px, 5vw, 82px);
	line-height: 1.05;
	text-transform: uppercase;
	text-align: left;
}

.prize-screen-image {
	flex: 0 0 45%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.prize-dots-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(42vw, 480px);
	height: min(65vh, 520px);
}

.prize-dots-line {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.25s ease;
}

.prize-dots-line.is-hidden {
	opacity: 0;
	visibility: hidden;
}

.prize-dots,
.prize-dots-line .typewriter-cursor {
	color: #fff;
	font-family: 'RobotoFlex-Extended', sans-serif;
	font-size: clamp(56px, 9vw, 140px);
	font-weight: 900;
	line-height: 1;
}

.prize-dots {
	letter-spacing: 0.08em;
}

.prize-dots-line .typewriter-cursor {
	display: inline-block;
	margin-left: 0.05em;
	animation: cursor-blink 0.75s step-end infinite;
}

.prize-image-reveal {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: auto;
	display: block;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	opacity: 0;
	transform: scale(0.88);
	pointer-events: none;
}

.prize-image-reveal.is-visible {
	animation: prize-pop-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes prize-pop-in {
	0% {
		opacity: 0;
		transform: scale(0.88);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.typewriter-cursor.is-hidden {
	display: none;
}

@keyframes cursor-blink {
	50% {
		opacity: 0;
	}
}

.prize-screen-back {
	margin-top: 4vh;
}

@media only screen and (orientation: portrait) {
	.prize-screen-layout {
		flex-direction: column;
		gap: 4vh;
	}

	.prize-screen-text,
	.prize-screen-image {
		flex: 0 0 auto;
		width: 100%;
		padding-left: 0;
		justify-content: center;
	}

	.prize-screen-text p {
		text-align: center;
		font-size: clamp(28px, 7vw, 52px);
	}

	.prize-screen-image img {
		max-height: 40vh;
	}

	.prize-dots-wrap {
		width: min(70vw, 420px);
		height: min(40vh, 360px);
	}

	.prize-dots,
	.prize-dots-line .typewriter-cursor {
		font-size: clamp(40px, 12vw, 88px);
	}
}

@media only screen and (orientation: portrait) {
	.screen-layout {
		flex-direction: column;
	}

	.screen-keypad,
	.screen-insert {
		flex: 1 1 50%;
		width: 100%;
		padding: 1vh 4vw;
	}

	.screen-keypad img {
		height: 80%;
		width: auto;
	}

	.screen-insert img {
		width: 80%;
		max-height: 90%;
	}

	.screen-logos {
		height: 7vh;
		max-height: 64px;
	}
}