body {
	margin: 0;
	text-align: center;
	background-color: #ccffff;
}

.OutImage img {
	display: block;
	margin: 0 auto;
	width: 60%;
	height: auto;
}

.Page2Button {
	display: inline-block;
	text-decoration: none;
	background: rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(0.3vh);
	color: white;
	font-weight: 500;
	padding: 1.2vh 3%;
	border-radius: 2vw;
	transition: all 0.2s ease;
	border: 0.1vh solid rgba(255,255,255,0.2);
	font-size: 1.5vw;
}

.Page2Button:hover {
	background: rgba(0, 0, 0, 0.45);
	transform: scale(1.02);
	border-color: rgba(255,255,255,0.4);
}

.Page2Button:active {
	transform: scale(0.98)
}

h1{
	font-size: 2.5vw;
}

p{
	font-size: 1.5vw;
}

.seatSelection {
	width: 92%;
	margin: 0 auto 6vh auto;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 2%;
}

.room-panel {
	position: relative;
	width: 31%;
}

.room-panel img{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2%;
}

.seat-zone {
	position: absolute;
	border: none;
	cursor: pointer;
	/* transition: background-color 0.3s ease, transform 0.3s ease;
	background-color: rgba(90, 130, 110, 0.35); */
	background-color: transparent;
}

.seat-zone:hover {
	/* background-color: rgba(90, 130, 110, 0.6); */
	background-color: transparent;
	/* transform: scale(1.03); */
	transform: none;
}

.room-panel img {
	transition: transform 0.3s ease;
}

.room-panel:hover img {
	transform: scale(1.02);
}

.zone-front-left {
	top: 38%;
	left: 19%;
	width: 44%;
	height: 12%;
}

.zone-front-right {
	top: 50%;
	right: 28%;
	width: 42%;
	height: 25%;
}

.zone-back-left {
	top: 28%;
	left: 40%;
	width: 20%;
	height: 10%;
}

.zone-back-right {
	top: 37%;
	right: 35%;
	width: 30%;
	height: 12%;
}

.zone-front-middle {
	top: 42%;
	left: 20%;
	width: 68%;
	height: 8%;
}

.zone-front-middle2 {
	top: 38%;
	left: 74%;
	width: 25%;
	height: 12%;
}

.zone-front-middle3 {
	top: 46%;
	right: 77%;
	width: 23%;
	height: 10%;
}

.zone-back-middle {
	top: 30%;
	left: 20%;
	width: 68%;
	height: 12%;
}

.zone-back-middle2 {
	top: 28%;
	left: 74%;
	width: 25%;
	height: 10%;
}

.zone-back-middle3 {
	top: 38%;
	right: 74%;
	width: 25%;
	height: 7%;
}

.zone-front-front {
	top: 59%;
	right: 1%;
	width: 65%;
	height: 39%;
}

.quiz-header {
	width: 80%;
	margin: 0 auto;
	padding-top: 5vh;
	padding-bottom: 3vh;
}

.quiz-header h1 {
  font-size: 3vw;
  margin-bottom: 2vh;
}

.quiz-header p {
	font-size: 1.5vw;
	line-height: 150%;
}

.quiz-container {
	width: 75%;
	margin: 0 auto 6vh auto;
}

.questionBox {
	background-color: rgba(255, 255, 255, 0.75);
	width: 80%;
	margin: 0 auto 3vh auto;
	padding: 3vh 4%;
	border-radius: 2%;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	pointer-events: none;
}

.questionsGrid {
	display: grid;
	width: 80%;
	margin: 0 auto;
	position: relative;
}

.questionBox, .questionsGrid .button-area {
	grid-area: 1 / 1 / 1 / 1;
	box-sizing: border-box;
}

.questionsGrid .button-area {
	background-color: rgba(255, 255, 255, 0.75);
	width: 80%;
	padding: 3vh 4%;
	border-radius: 2%;
	text-align: center;
	margin: 0 auto 3vh auto;
	display: none;
}

.questionsGrid.complete .questionBox {
	display: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.questionsGrid.complete .button-area {
	display: flex;
	justify-content: center;
	align-items: center;
}

.questionBox h2 {
	font-size: 1.8vw;
	margin-bottom: 2vh;
}

.questionBox label {
	display: block;
	font-size: 1.3vw;
	margin-bottom: 1.5vh;
	cursor: pointer;
}

.questionBox input[type = "radio"] {
	margin-right: 1%;
}

.questionBox.active {
	opacity: 1;
	position: relative;
	visibility: visible;
	pointer-events: auto;
}

.button-area {
	margin-top: 4vh;
	margin-bottom: 6vh;
}

.quiz-button {
	border: none;
	background: linear-gradient(90deg, #009933, #00cc99);
	color: white;
	font-size: 1.5vw;
	font-weight: bold;
	padding: 2vh 4%;
	border-radius: 999%;
	cursor: pointer;
	transition: transform 0.3s ease, background 0.3s ease;
}

.quiz-button:hover {
	transform: scale(1.05);
	background: linear-gradient(90deg, #007a29, #009973);
}

.quiz-button:active {
	transform: scale(0.98);
}

.nav-buttons {
	display: flex;
	gap: 2vw;
	margin-top: 3vh;
}

.back, .next {
	background: linear-gradient(135deg, #16a34a, #22c55e);
	color: white;
	border: none;
	padding: 1.5vh 4%;
	font-size: 1.5vw;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.25s ease;
}

.back:hover, .next:hover {
	transform: translateY(-0.3vh);
	box-shadow: 0 0.6vh 1.5vh rgba(0, 0, 0, 0.15);
}

.next:active {
	transform: translateY(0);
	box-shadow: none;
}

.timerContainer {
	background-color: rgba(255, 255, 255, 0.85);
	width: 80%;
	margin: 5vh auto;
	padding: 4vh 4%;
	border-radius: 2%;
	text-align: center;
}

.timer-display {
	font-size: 8vw;
	margin: 3vh 0;
	font-weight: bold;
	color: #004d1a;
}

.timer-buttons {
	display: flex;
	gap: 2vw;
	justify-content: center;
	margin-top: 2vh;
}

.timer-btn {
	background: linear-gradient(135deg, #16a34a, #22c55e);
	border: none;
	padding: 1.5vh 4%;
	font-size: 1.5vw;
	border-radius: 999px;
	color: white;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.timer-btn:hover {
	transform: scale(1.05);
}

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

.session-label {
	font-size: 2vw;
	font-weight: bold;
	margin-bottom: 1vh;
	color: #006622;
}

.starter-container {
	background-color: rgba(255, 255, 255, 0.85);
	width: 80%;
	margin: 5vh auto;
	padding: 4vh 4%;
	border-radius: 2%;
	text-align: center;
}

.starter-question {
	font-size: 2.5vw;
	line-height: 1.4;
	margin: 4vh 0;
	font-weight: bold;
	color: #004d1a;
	min-height: 15vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.starter-buttons {
	display: flex;
	gap: 2vw;
	justify-content: center;
	margin-top: 2vh;
}

.starter-btn {
	background: linear-gradient(135deg, #16a34a, #22c55e);
	border: none;
	padding: 1.5vh 4%;
	font-size: 1.5vw;
	border-radius: 999px;
	color: white;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.starter-btn:hover {
	transform: scale(1.05);
}

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

.coin-container {
	background-color: rgba(255, 255, 255, 0.85);
	width: 70%;
	margin: 3vh auto;
	padding: 2vh 3%;
	border-radius: 2%;
	text-align: center;
}

.coin-result {
	font-size: 5vw;
	font-weight: bold;
	margin: 2vh 0;
	padding: 1.5vh;
	background-color: #f0f0f0;
	border-radius: 50%;
	display: inline-block;
	width: 15vw;
	height: 15vw;
	line-height: 15vw;
	text-align: center;
	box-shadow: 0 0.6vh 1.5vh rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease;
}

.coin-result.flipping {
	transform: rotateY(720deg);
}

.coin-history {
	margin-top: 2vh;
	font-size: 1.3vw;
	color: #004d1a;
}

.coin-history span {
	display: inline-block;
	background-color: rgba(0, 100, 0, 0.1);
	padding: 0.3vh 1.2vw;
	margin: 0 0.4vw;
}

.flip-btn {
	background: linear-gradient(135deg, #16a34a, #22c55e);
	border: none;
	padding: 1vh 3%;
	font-size: 1.5vw;
	border-radius: 999px;
	color: white;
	cursor: pointer;
	transition: transform 0.2s ease;
	margin-top: 0.5vh;
}

.flip-btn:hover {
	transform: scale(1.05);
}

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

.video-container {
	background-color: rgba(255, 255, 255, 0.85);
	width: 80%;
	margin: 5vh auto;
	padding: 4vh 4%;
	border-radius: 2%;
	text-align: center;
}

.random-btn {
	background: linear-gradient(135deg, #16a34a, #22c55e);
	border: none;
	padding: 1.5vh 5%;
	font-size: 1.8vw;
	border-radius: 1.8vw;
	color: white;
	cursor: pointer;
	transition: transform 0.2s ease;
	margin: 2vh 0;
}

.random-btn:hover {
	transform: scale(1.05);
}

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

.info-text {
	font-size: 1.5vw;
	color: #004d1a;
	margin-top: 2vh;
}

.game-container {
	background-color: rgba(255, 255, 255, 0.85);
	width: 80%;
	margin: 5vh auto;
	padding: 4vh 4%;
	border-radius: 2%;
	text-align: center;
}

.game-suggestion {
	font-size: 2.5vw;
	font-weight: bold;
	margin: 3vh 0;
	color: #004d1a;
	min-height: 10vh;
}

.game-description {
	font-size: 1.5vw;
	color: #006622;
	margin-bottom: 2vh;
}

.game-btn {
	background: linear-gradient(135deg, #16a34a, #22c55e);
	border: none;
	padding: 1.5vh 5%;
	font-size: 1.8vw;
	border-radius: 999px;
	color: white;
	cursor: pointer;
	transition: transform 0.2s ease;
}

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


body.page-homework .timerContainer {
	background: #fff9e8;
	background-image: linear-gradient(#e0e0e0 0.1vh, transparent 0.1vh), repeating-linear-gradient(90deg, #ffcccc 0vw, #ffcccc 0.2vw, transparent 0.2vw, transparent 3vw);
	background-size: 100% 3vh, auto;
	border-left: 0.5vh solid #ff6666;
	border-radius: 0 1.2vh 1.2vh 0;
	box-shadow: 0.5vh 0.5vh 1.2vh rgba(0, 0, 0, 0.1);
	font-family: 'Courier New', monospace;
}

body.page-homework .timerContainer::before, 
body.page-homework .timerContainer::after {
	content: "";
	position: absolute;
	width: 1.2vh;
	height: 1.2vh;
	background: #ccffff;
	border-radius: 50%;
	top: 3vh;
	left: -0.6vh;
}

body.page-homework .timerContainer::after {
	top: 8vh;
}

body.page-socializing .starter-container {
	background: #fff8e7;
	border-radius: 4vh 4vh 4vh 1.5vh;
	position: relative;
	box-shadow: 0.6vh 0.6vh 0 rgba(0, 0, 0, 0.05);
}

body.page-socializing .starter-container::after {
	content: "";
	position: absolute;
	bottom: -2vh;
	left: 4vw;
	width: 0;
	height: 0;
	border-left: 2vh solid transparent;
	border-right: 0 solid transparent;
	border-top: 2vh solid #fff8e7;
	filter: drop-shadow(0.2vh 0.2vh 0.2vh rgba(0, 0, 0, 0.5));
}

body.page-socializing .starter-btn {
	background: linear-gradient(135deg, #e67e22, #f39c12);
}

body.page-socializing .starter-btn:hover {
	background: linear-gradient(135deg, #d35400, #e67e22);
}

body.page-pcgame .game-container {
	background: #1a1a2e;
	border: 0.4vh solid #4ade80;
	box-shadow: 0.8vh 0.8vh 0 #0f0f1a;
	font-family: 'Courier New', monospace;
	color: #e0e0e0;
}

body.page-pcgame .game-suggestion {
	color: #4ade80;
	text-shadow: 0.2vh 0.2vh 0 #0f0f1a;
	letter-spacing: 0.2vw;
}

body.page-pcgame .game-description {
	color: #ccc;
}

body.page-pcgame .game-btn {
	background: #4ade80;
	color: #0a0a0a;
	font-weight: bold;
	box-shadow: 0.3vh 0.3vh 0 #0f0f1a;
}

body.page-projector .video-container {
	background: #111;
	color: #f5f5f5;
	border-top: 1.2vh solid #2c2c2c;
	border-bottom: 1.2vh solid #2c2c2c;
	background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0vw, rgba(255, 255, 255, 0.05) 3vw, transparent 3vw, transparent 6vw);
	box-shadow: 0 0 0 0.4vh #555, 0 0 0 0.8vh #222;
	border-radius: 0.8vh;
	padding: 3vh 2%;
}

body.page-projector .random-btn {
	background: #facc15;
	color: #222;
	font-weight: bold;
	box-shadow: 0 0 0 0.2vh #222, 0 0.4vh 0 #a16207;
	transition: 0.07s linear;
}

body.page-projector .random-btn:active {
	transform: translateY(0.4vh);
	box-shadow: 0 0 0 0.2vh #222;
}

body.page-projector .info-text {
	color: #aaa;
}

body.quiz-page {
	background: #e6f2ff;
}

body.quiz-page .questionsGrid {
	perspective: 100vh;
}

body.quiz-page .questionBox.active {
	background: rgba(255, 248, 225, 0.95);
	border-radius: 2vh 2vh 2vh 0;
	box-shadow: 0 2vh 2vh -1vh rgba(0, 0, 0, 0.2);
	transform: rotateX(1deg);
	transition: all 0.3s ease;
}

body.quiz-page .quiz-button {
	background: linear-gradient(90deg, #ff8c42, #ffb347);
	box-shadow: 0 0.8vh 1.2vh rgba(0, 0, 0, 0.1);
}

body.quiz-page .quiz-button:hover {
	background: linear-gradient(90deg, #e07c32, #e09d32);
	transform: scale(1.02);
}

body.quiz-page .next, body.quiz-page .back {
	background: linear-gradient(135deg, #1e88e5, #42a5f5);
}

body.quiz-page .next:hover, body.quiz-page .back:hover {
	background: linear-gradient(135deg, #1565c0, #1e88e5);
}

body.quiz-page::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.02) 0vw, rgba(0, 0, 0, 0.02) 1vw, transparent 1vw, transparent 3vw);
	pointer-events: none;
	z-index: 0;
}

body.quiz-page .quiz {
	position: relative;
	z-index: 1;
}

body.quiz-page input[type = "radio"] {
	accent-color: #ff8c42;
}

body.page-seat {
	background: radial-gradient(circle at 10% 20%, #cce7ff, #99ccff);
	position: relative;
}

body.page-seat::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(rgba(255, 255, 255, 0.1) 0.1vh, transparent 0.1vh), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0.1vh, transparent 0.1vh);
	background-size: 2vw 2vh;
	pointer-events: none;
	z-index: 0;
}

body.page-seat header, body.page-seat .seatSelection, body.page-seat
.NextPage1 {
	position: relative;
	z-index: 1;
}

body.page-seat .page2Header p {
	font-size: 1.8vw;
}

.seat-zone:hover {
	background-color: rgba(255, 215, 0, 0.6);
	transform: scale(1.03);
	box-shadow: 0 0 1.5vh gold;
}

.seat-zone:hover::after {
	content: "Choose";
	position: absolute;
	top: -3vh;
	left: 50%;
	transform: translateX(-50%);
	font-size: 2.5vh;
	background: rgba(0, 0, 0, 0.6);
	color: white;
	padding: 0.3vh 1vw;
	border-radius: 2vh;
	white-space: nowrap;
	pointer-events: none;
	z-index: 10;
}

.room-panel {
	box-shadow: 0 1vh 2vh rgba(0, 0, 0, 0.2);
	border-radius: 1.5vh;
	overflow: hidden;
	transition: transform 0.2s;
	background: #000;
}

.room-panel:hover {
	transform: translateY(-0.5vh);
}

.room-panel img {
	display: block;
	width: 100%;
	height: auto;
	transition: filter 0.2s;
}

.room-panel:hover img {
	filter: brightness(1.05) contrast(1.05);
}

body.page-seat .Page2Button {
	background: linear-gradient(90deg, #ff8c42, #ffb347);
	box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.2);
	font-size: 1.8vw;
}

body.page-seat .Page2Button:hover {
	transform: scale(1.05) translateY(-0.3vh);
}

body.page-boardgame {
	background: radial-gradient(circle at 20% 30%, #0a3b2f, #05261d);
	color: white;
}

body.page-boardgame .coin-container {
	background: #1a5d4c;
	background-image: repeating-linear-gradient(45deg, rgba(255, 215, 0, 0.1) 0px, rgba(255, 215, 0, 0.1) 2vw, transparent 2vw, transparent 4vw);
	border-radius: 4vh;
	box-shadow: 0 1vh 2vh rgba(0, 0, 0, 0.5), inset 0 0.2vh 0.5vh rgba(255, 255, 200, 0.3);
	border: 0.3vh solid #c9a03d;
}

body.page-boardgame .coin-result {
	background: #f5e6c4;
	box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.3), inset 0 0.1vh 0.2vh rgba(255, 255, 200, 0.8);
	color: #2c5a3b;
	font-family: monospace;
}

body.page-boardgame .flip-btn {
	background: linear-gradient(135deg, #c9a03d, #ccaa55);
	color: #1a2e1f;
	font-weight: bold;
	font-size: 2vw;
	padding: 1.8vh 8%;
	box-shadow: 0 0.5vh 0 #7a5a1a;
	border-radius: 3vh;
}

body.page-boardgame .flip-btn:hover {
	transform: translateY(-0.2vh);
	box-shadow: 0 0.7vh 0 #7a5a1a;
}

body.page-boardgame .flip-btn:active {
	transform: translateY(0.4vh);
	box-shadow: 0 0.1vh 0 #7a5a1a;
}

body.page-boardgame .coin-history {
	color: #ffd966;
	background: rgba(0, 0, 0, 0.4);
	padding: 1vh 2vw;
	border-radius: 2vw;
	display: inline-block;
	margin-top: 2vh;
}

body.page-boardgame .coin-history span {
	background: #2c2c1c;
	color: #ffd966;
	font-weight: bold;
}

body.page-boardgame .Page2Button {
	background: linear-gradient(90deg, #c9a03d, #ccaa55);
	color: #1a2e1f;
	font-weight: bold;
}

body.page-socializing {
	background: radial-gradient(circle at 30% 10%, #ffe5b4, #ffcc99);
	position: relative;
}

body.page-socializing::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(circlat at 30% 40%, rgba(255, 255, 200, 0.15) 1.5vh, transparent 1.5vh);
	background-size: 6vw 6vh;
	pointer-events: none;
	z-index: 0;
}

body.page-socializing header, body.page-socializing .starter-container, body.page-socializing .NextPage1 {
	position: relative;
	z-index: 1;
}

body.page-socializing .quiz-header h1 {
	color: #b45f1b;
	text-shadow: 0.2vh 0.2vh 0.4vh rgba(0, 0, 0, 0.1);
}

body.page-socializing .quiz-header p {
	background: rgba(255, 248, 225, 0.8);
	display: inline-block;
	padding: 1vh 2vw;
	border-radius: 3vw;
	backdrop-filter: blur(0.2vh);
}

body.page-projector  {
	background: radial-gradient(circle at 30% 20%, #1a1a2e, #0a0a15);
	position: relative;
	color: white;
}

body.page-projector::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0vw, rgba(255, 255, 255, 0.02) 0.2vw, transparent 0.2vw, transparent 0.6vw);
	pointer-events: none;
	z-index: 0
}

body.page-pcgame {
	background: radial-gradient(circle at 30% 10%, #0f0f1a, #05050a);
	position: relative;
	color: white;
}

body.page-pcgame::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(rgba(74, 222, 128, 0.08) 0.1vh, transparent 0.1vh), linear-gradient(90deg, rgba(74, 222, 128, 0.08) 0.1vh, transparent 0.1vh);
	background-size: 2vw 2vh;
	pointer-events: none;
	z-index: 0;
}

body.page-homework {
	background: linear-gradient(135deg, #f5f0e0, #e8e0c8);
	position: relative;
}

body.page-homework::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: repeating-linear-gradient(90deg, 
    rgba(0,0,0,0.03) 0vw, 
    rgba(0,0,0,0.03) 0.1vw,
    transparent 0.1vw, 
    transparent 3vw);
	pointer-events: none;
	z-index: 0;
}

body.page-home {
	background: linear-gradient(135deg, #d4e6f1, #b0d4e8);
	position: relative;
}

body.page-home::before {
	content: "";
	position: fixed; 
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 200, 0.1) 1vh, transparent 1vh);
	background-size: 4vw 4vh;
	pointer-events; none;
	z-index: 0;
}

body.page-home header, body.page-home .OutImage, boody.page-home .NextPage1 {
	position: relative;
	z-index: 1;
}

body.page-home h1 {
	color: #2c5a6e;
	text-shadow: 0.2vh 0.2vh 0.4vh rgba(0, 0, 0, 0.1);
}

body.page-home p {
	color: #2c5a6e;
	text-shadow: 0.2vh 0.2vh 0.4vh rgba(0, 0, 0, 0.1);
}

body.page-home .OutImage img {
	border-radius: 2vh;
	box-shadow: 0 1vh 2vh rgba(0, 0, 0, 0.15);
	max-width: 80%;
	transition: transform 0.3s;
}

body.page-home .OutImage img:hover {
	transform: scale(1.01);
}

.OutImage img {
  max-width: 40vw;
  max-height: 40vh;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}