/* =========================
HINT BELAJAR
========================= */

.hint-text {

	margin-top: -15px;

	margin-bottom: 30px;

	font-size: 28px;

	font-weight: bold;

	color: #ffffff;

	background: rgba(0, 0, 0, 0.15);

	padding: 12px 18px;

	border-radius: 18px;

	min-height: 40px;

	display: flex;

	align-items: center;

	justify-content: center;
}

/* MOBILE */

@media (max-width: 480px) {

	.hint-text {

		font-size: 20px;

		padding: 10px 14px;

		margin-bottom: 25px;
	}

	.learning-toggle {

		font-size: 16px;
	}
}

/* =========================
MODE BELAJAR
========================= */

.learning-toggle {

	display: flex;

	align-items: center;

	gap: 12px;

	margin-top: 15px;

	font-size: 20px;

	font-weight: bold;
}

/* SWITCH */

.switch {

	position: relative;

	display: inline-block;

	width: 58px;

	height: 32px;
}

.switch input {

	opacity: 0;

	width: 0;

	height: 0;
}

.slider {

	position: absolute;

	cursor: pointer;

	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background-color: #ddd;

	transition: .3s;

	border-radius: 50px;
}

.slider:before {

	position: absolute;

	content: "";

	height: 24px;

	width: 24px;

	left: 4px;

	bottom: 4px;

	background-color: white;

	transition: .3s;

	border-radius: 50%;
}

.switch input:checked+.slider {

	background-color: #ffe44d;
}

.switch input:checked+.slider:before {

	transform: translateX(26px);
}

/* LOGO LOGIN */

.login-logo {

	width: 70px;

	max-width: 20vw;

	height: auto;

	display: block;

	filter:
		drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));

	margin: 0 auto 10px auto;
}


/* LOGO */

.logo {

	width: 90px;

	max-width: 25vw;

	height: auto;

	display: block;

	margin: 0 auto 12px auto;
}

/* LOGOUT BUTTON */

.logout-btn {
	display: block;

	width: 100%;

	margin-top: 20px;

	padding: 15px;

	background: white;

	color: #20c997;

	text-align: center;

	text-decoration: none;

	border-radius: 14px;

	font-weight: bold;

	box-sizing: border-box;

	transition: 0.2s;
}

.logout-btn:hover {
	transform: translateY(-2px);
}

/* WELCOME SCREEN */

.welcome-screen {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  height: 100vh;

  overflow-y: auto;

  background: #20c997;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: center;

  z-index: 999;

  color: white;

  text-align: center;

  padding: 40px 20px 120px 20px;

  box-sizing: border-box;
}

/* GRID TOMBOL MODE */

.mode-grid {
	width: 100%;

	max-width: 420px;

	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 12px;

	margin-top: 25px;
}

/* TOMBOL MODE */

.mode-btn {
	padding: 18px 10px;

	border: none;

	border-radius: 18px;

	background: white;

	color: #20c997;

	font-size: 18px;

	font-weight: bold;

	cursor: pointer;

	box-shadow: 0 4px #ddd;

	transition: 0.2s;
}

.mode-btn:active {
	transform: translateY(2px);
}

/* LOGOUT */

.logout-btn {
	grid-column: 2;

	margin-top: 5px;

	padding: 18px 10px;

	background: #ffffff;

	color: #ff4d4d;

	text-align: center;

	text-decoration: none;

	border-radius: 18px;

	font-weight: bold;

	box-shadow: 0 4px #ddd;

	transition: 0.2s;
}

.logout-btn:active {
	transform: translateY(2px);
}

/* MOBILE */

@media (max-width: 480px) {
	.mode-grid {
		gap: 10px;
	}

	.mode-btn {
		font-size: 16px;

		padding: 16px 8px;
	}

	.logout-btn {
		font-size: 16px;

		padding: 16px 8px;
	}

	.welcome-screen h1 {
		font-size: 36px;
	}

	.welcome-screen p {
		font-size: 18px;
	}
}

.welcome-screen h1 {
	font-size: 48px;
	margin-bottom: 20px;
}

.welcome-screen p {
	font-size: 22px;
	max-width: 300px;
	line-height: 1.5;
}

.start-btn {
	margin-top: 30px;
	padding: 18px 40px;
	font-size: 28px;
	border: none;
	border-radius: 20px;
	background: white;
	color: #20c997;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 5px #ddd;
}

.start-btn:active {
	transform: translateY(2px);
}

body {
	margin: 0;
	font-family: Arial, sans-serif;
	background: #20c997;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.container {

	width: 100%;

	max-width: 520px;

	padding: 20px;

	text-align: center;

	color: white;

	box-sizing: border-box;
}

.timer {
	background: #f4d97c;
	color: #555;
	width: 140px;
	margin: auto;
	padding: 15px;
	border-radius: 0 0 20px 20px;
	font-size: 28px;
	font-weight: bold;
}

/* =========================
KARTU GAME
========================= */

.question-card {

	width: 100%;

	max-width: 500px;

	margin: 35px auto 0 auto;

	background: #f5df8b;

	border: 8px solid #fff3c2;

	border-radius: 45px;

	padding: 25px 25px 40px 25px;

	box-sizing: border-box;

	display: flex;

	flex-direction: column;

	align-items: center;

	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.15);
}

/* =========================
SOAL
========================= */

.numbers {

	font-size: 100px;

	font-weight: bold;

	color: #20c997;

	text-align: center;

	margin-bottom: 50px;

	line-height: 1;
}

.multiply-symbol {

	margin: 0 15px;
}

/* =========================
WRAPPER JAWABAN
========================= */

.answer-wrapper {

	width: 100%;

	display: flex;

	justify-content: center;
}

/* =========================
INPUT JAWABAN
========================= */

.answer-box {

	width: 260px;

	height: 150px;

	border-radius: 35px;

	border: 6px solid #e6e6e6;

	background: white;

	font-size: 75px;

	font-weight: bold;

	text-align: center;

	color: #20c997;

	box-shadow:
		inset 0 3px 10px rgba(0, 0, 0, 0.08);
}

.keypad {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}

button {

	height: 90px;

	border: none;

	border-radius: 22px;

	background: #f3f3f3;

	font-size: 42px;

	font-weight: bold;

	cursor: pointer;

	box-shadow:
		0 5px #d6d6d6;

	transition: 0.1s;
}

button:active {
	transform: translateY(2px);
}

.zero {
	grid-column: 2;
}

.info {
	margin-top: 20px;
	font-size: 22px;
	font-weight: bold;
}

/* =========================
FOOTER INFO
========================= */

.footer-info {

	margin-top: 30px;

	width: 100%;

	display: flex;

	justify-content: space-between;

	align-items: center;

	color: white;

	font-size: 22px;

	font-weight: bold;

	box-sizing: border-box;
}

/* KIRI */

.footer-left {

	text-align: left;
}

/* KANAN */

.footer-right {

	text-align: right;
}

/* WARNA ANGKA */

#score {

	color: #ffe44d;
}

#correctCount {

	color: #d4ff00;
}

#wrongCount {

	color: #ff5c5c;
}

.correct {
	color: #d4ff00;
}

.wrong {
	color: #ffdddd;
}

/* BUTTON MULAI LAGI */

.play-again-btn {
	width: 100%;

	max-width: 400px;

	margin: 30px auto 0 auto;

	display: block;

	padding: 18px;

	border: none;

	border-radius: 18px;

	background: white;

	color: #20c997;

	font-size: 22px;

	font-weight: bold;

	cursor: pointer;

	box-shadow: 0 4px #d6d6d6;

	transition: 0.2s;
}

.play-again-btn:active {
	transform: translateY(2px);
}

/* MOBILE */

@media (max-width: 480px) {

	.footer-info {

		font-size: 18px;

		margin-top: 25px;
	}

	.numbers {

		font-size: 72px;

		margin-bottom: 15px;
	}

	.question-card {

		border-radius: 35px;

		padding: 15px 20px;
	}

	.answer-box {

		width: 210px;

		height: 80px;

		font-size: 55px;

		border-radius: 25px;
	}

	button {

		height: 75px;

		font-size: 34px;

		border-radius: 18px;
	}

	.keypad {

		gap: 12px;
	}
}

/* =========================
LAYOUT KHUSUS LAPTOP
========================= */

@media (min-width: 900px) {

	body {

		overflow-y: auto;

		align-items: stretch;
	}

	.container {

		width: 100%;

		max-width: 1300px;

		min-height: 100vh;

		display: flex;

		flex-direction: column;

		justify-content: space-between;

		padding: 20px 40px;
	}

	/* WRAPPER UTAMA */

	.game-layout {

		flex: 1;

		display: grid;

		grid-template-columns: 1fr 420px;

		align-items: center;

		gap: 60px;

		width: 100%;
	}

	/* TIMER */

	.timer {

		position: fixed;

		top: 0;

		left: 50%;

		transform: translateX(-50%);

		z-index: 10;
	}

	/* KARTU SOAL */

	.question-card {

		margin: 0;

		width: 100%;

		max-width: 600px;

		justify-self: center;
	}

	/* KEYPAD */

	.keypad {

		margin-top: 0;

		align-self: center;
	}

	button {

		height: 85px;

		font-size: 38px;
	}

	/* FOOTER */

	.footer-info {

		margin-top: 20px;

		padding-bottom: 10px;
	}
}

/* =========================
WELCOME PLAN COMPARISON
========================= */

.plan-compare {
  width: 100%;
  max-width: 760px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 18px;
  margin: 28px auto 0 auto;
}

.plan-card {
  position: relative;
  background: white;
  color: #333;
  border-radius: 28px;
  padding: 26px;
  text-align: left;
  box-shadow: 0 12px 30px rgba(0,0,0,0.16);
}

.basic-plan {
  opacity: 0.95;
}

.premium-plan {
  border: 4px solid #ffe44d;
  transform: translateY(-6px);
}

.plan-badge {
  position: absolute;
  top: -15px;
  right: 22px;
  background: #ffe44d;
  color: #333;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
}

.plan-title {
  font-size: 30px;
  font-weight: bold;
  color: #20c997;
  margin-bottom: 4px;
}

.plan-subtitle {
  font-size: 15px;
  color: #777;
  margin-bottom: 18px;
}

.plan-card ul {
  margin: 0;
  padding-left: 20px;
}

.plan-card li {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: bold;
}

.plan-card .muted {
  color: #777;
  font-weight: normal;
}

@media (max-width: 700px) {
  .plan-compare {
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: 16px;
  }

  .premium-plan {
    transform: none;
  }

  .plan-card {
    padding: 22px;
  }

  .plan-title {
    font-size: 26px;
  }

  .plan-card li {
    font-size: 15px;
  }
}

.student-dashboard-btn{
  width:100%;
  max-width:400px;
  margin:15px auto 0 auto;
  display:block;
  padding:18px;
  border-radius:18px;
  background:#ffe44d;
  color:#333;
  text-align:center;
  text-decoration:none;
  font-size:22px;
  font-weight:bold;
  box-shadow:0 4px #d6c13f;
  box-sizing:border-box;
}

@media(max-width:480px){
  .student-dashboard-btn{
    font-size:18px;
    padding:16px;
  }
}