@font-face {
   font-family: 'Roboto';
   src: url('fonts/Roboto-Black.eot');
   src: url('fonts/Roboto-Black.eot?#iefix') format('embedded-opentype'), url('fonts/Roboto-Black.woff2') format('woff2'), url('fonts/Roboto-Black.woff') format('woff'), url('fonts/Roboto-Black.ttf') format('truetype');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
 }

 @font-face {
   font-family: 'Roboto';
   src: url('fonts/Roboto-Bold.eot');
   src: url('fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/Roboto-Bold.woff2') format('woff2'), url('fonts/Roboto-Bold.woff') format('woff'), url('fonts/Roboto-Bold.ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
 }

 @font-face {
   font-family: 'Roboto';
   src: url('fonts/Roboto-Thin.eot');
   src: url('fonts/Roboto-Thin.eot?#iefix') format('embedded-opentype'), url('fonts/Roboto-Thin.woff2') format('woff2'), url('fonts/Roboto-Thin.woff') format('woff'), url('fonts/Roboto-Thin.ttf') format('truetype');
   font-weight: 100;
   font-style: normal;
   font-display: swap;
 }

 @font-face {
   font-family: 'Roboto';
   src: url('fonts/Roboto-Regular.eot');
   src: url('fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Roboto-Regular.woff2') format('woff2'), url('fonts/Roboto-Regular.woff') format('woff'), url('fonts/Roboto-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
 }

 @font-face {
   font-family: 'Roboto';
   src: url('fonts/Roboto-Medium.eot');
   src: url('fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/Roboto-Medium.woff2') format('woff2'), url('fonts/Roboto-Medium.woff') format('woff'), url('fonts/Roboto-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }

 @font-face {
   font-family: 'Roboto';
   src: url('fonts/Roboto-Light.eot');
   src: url('fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'), url('fonts/Roboto-Light.woff2') format('woff2'), url('fonts/Roboto-Light.woff') format('woff'), url('fonts/Roboto-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
 }

 /* ========== RESET & BASE ========== */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 :root {
   --dell-blue: #0076CE;
   --dell-dark: #00447C;
   --dell-light: #ffffff;
   --dell-accent: #ffffff;
   --gradient-bg: linear-gradient(135deg, #0a0e27 0%, #1a1f4e 40%, #0d2137 100%);
   --card-bg: rgba(255, 255, 255, 0.05);
   --card-border: rgba(255, 255, 255, 0.1);
   --text-primary: #ffffff;
   --text-secondary: rgba(255, 255, 255, 0.7);
   --correct-green: #00d26a;
   --incorrect-red: #f44336;
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 html {
   font-size: 16px;
   scroll-behavior: smooth;
   font-family: 'Roboto', sans-serif;
 }

 body {
   font-family: 'Roboto', sans-serif;
   background: var(--gradient-bg);
   color: var(--text-primary);
   min-height: 100vh;
   overflow-x: hidden;
   line-height: 1.6;
 }

 #dellLogo {
   width: 200px;
   height: auto;
   position: absolute;
   top: 5%;
   right: 3%;
   z-index: 2;
 }

 .topleft {
   width: 100px;
   height: auto;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
   display: block;
 }

 .topright {
   width: 150px;
   height: auto;
   position: absolute;
   bottom: 0;
   right: 0;
   z-index: 2;
   display: block;
 }

 .copyright {
   position: absolute;
   bottom: 3%;
   left: 2.5%;
   width: 100%;
   text-align: left;
   font-size: 0.9rem;
   color: #ffffff;
   z-index: 2;
 }

 .cloud-icon {
   width: 80%;
   height: auto;
   /* margin-bottom: 20px; */
 }

 /* ========== PARTICLES BACKGROUND ========== */
 .particles {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 0;
   overflow: hidden;
 }

 .particle {
   position: absolute;
   width: 4px;
   height: 4px;
   background: rgba(0, 118, 206, 0.4);
   border-radius: 50%;
   animation: float linear infinite;
 }

 @keyframes float {
   0% {
     transform: translateY(100vh) rotate(0deg);
     opacity: 0;
   }

   10% {
     opacity: 1;
   }

   90% {
     opacity: 1;
   }

   100% {
     transform: translateY(-100vh) rotate(720deg);
     opacity: 0;
   }
 }

 /* ========== CONTAINER ========== */
 .container {
   position: relative;
   z-index: 1;
   max-width: 960px;
   margin: 0 auto;
   padding: 20px;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

 /* ========== DELL LOGO ========== */
 .dell-logo {
   width: 120px;
   margin-bottom: 20px;
   filter: brightness(0) invert(1);
 }

 /* ========== VIDEO BACKGROUND ========== */
 .video-bg {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   overflow: hidden;
 }

 .video-bg video {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .video-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(145deg, rgba(0, 0, 0, 0) 0%, rgba(10, 14, 39, 0.20) 40%, rgba(10, 14, 39, 0.70) 100%);
 }

 .home-page {
   position: relative;
   z-index: 1;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .home-content {
   width: 60%;
   padding: 40px 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
 }

 /* ========== HOME PAGE ========== */
 .home-wrapper {
   text-align: center;
   animation: fadeInUp 0.8s ease-out;
   height: 85vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   position: relative;
 }

 .home-wrapper h1.title {
   font-size: 7rem;
   font-weight: 600;
   line-height: 1.3;
 }

 .home-wrapper .subtitle {
   font-size: 2.5rem;
   line-height: 1.2;
   color: #ffffff;
   margin: 30px 0 20px 0;
   text-shadow: 6px 6px 19px rgba(0, 0, 0, 0.8);
 }

 .home-wrapper h2.tagline {
   font-size: 3rem;
   font-weight: 300;
   line-height: 1.2;
   color: #ffffff;
   margin: 0 0 20px 0;
   text-shadow: 6px 6px 19px rgba(0, 0, 0, 0.8);
 }

 .play-button img {
   width: 300px;
 }

 .vs-badge {
   display: inline-flex;
   align-items: center;
   gap: 15px;
   margin-bottom: 40px;
   padding: 15px 30px;
   background: var(--card-bg);
   border: 1px solid var(--card-border);
   border-radius: 50px;
   font-size: 1.1rem;
 }

 .vs-badge .option {
   padding: 8px 20px;
   border-radius: 25px;
   font-weight: 600;
 }

 .vs-badge .option.default {
   background: rgba(244, 67, 54, 0.2);
   color: #ff6b6b;
 }

 .vs-badge .option.design {
   background: rgba(0, 191, 165, 0.2);
   color: #00BFA5;
 }

 .vs-badge .vs {
   color: var(--text-secondary);
   font-weight: 400;
 }

 /* ========== BUTTONS ========== */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 16px 48px;
   border: none;
   border-radius: 50px;
   font-size: 1.2rem;
   font-weight: 700;
   cursor: pointer;
   transition: var(--transition);
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 .btn-primary {
   background: linear-gradient(135deg, var(--dell-blue), var(--dell-accent));
   color: white;
   box-shadow: 0 4px 20px rgba(0, 118, 206, 0.4);
 }

 .btn-primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 30px rgba(0, 118, 206, 0.6);
 }

 .btn-secondary {
   background: transparent;
   color: var(--dell-accent);
   border: 2px solid var(--dell-accent);
 }

 .btn-secondary:hover {
   background: rgba(0, 191, 165, 0.1);
   transform: translateY(-2px);
 }

 .btn-small {
   padding: 10px 24px;
   font-size: 0.9rem;
 }

 .btn:active {
   transform: translateY(0);
 }

 /* ========== REGISTRATION PAGE ========== */
 .register-page {
   background: url('../images/bg2.png') no-repeat center center;
   background-size: cover;
 }

 .register-wrapper {
   width: 100%;
   max-width: 80%;
   /* animation: fadeInUp 0.8s ease-out; */
 }

 .register-wrapper h2 {
   font-weight: 500;
   text-align: center;
   font-size: 3.5rem;
   line-height: 1;
   margin-bottom: 30px;
   /* background: linear-gradient(135deg, #ffffff, #00BFA5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; */
 }

 .form-card {
   /* background: var(--card-bg);
    backdrop-filter: blur(20px); 
    border: 1px solid var(--card-border); */
   border-radius: 20px;
   padding: 0;
 }

 .form-group {
   position: relative;
   margin-bottom: 30px;
   background: url('../images/field-bg1.png') no-repeat left center;
   background-size: contain;
   /* margin: 40px 10px; */
   /* height: 80px; */
 }

 .form-group:nth-child(even) {
   background-image: url('../images/field-bg2.png');
 }

 .form-group::after {}

 .form-group label {
   display: block;
   font-size: 0.85rem;
   color: var(--text-secondary);
   margin-bottom: 6px;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .form-group input {
   width: 100%;
   padding: 14px 18px;
   margin: 5px;
   background: transparent;
   border: none;
   border-radius: 0;
   font-size: 1rem;
   letter-spacing: 2px;
   transition: var(--transition);
   outline: none;
   color: #ffffff;
 }

 .form-group input:focus {
   border-color: var(--dell-blue);
   background: rgba(255, 255, 255, 0.1);
   box-shadow: 0 0 0 3px rgba(0, 118, 206, 0.2);
 }

 .form-group input::placeholder {
   color: rgba(255, 255, 255, 0.5);
 }

 /* .form-group input.error {
    border-color: var(--incorrect-red);
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2);
} */
 .checkbox-group {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: start;
   gap: 10px;
   width: 93%;
   margin: 0 auto;
   padding-top: 20px;
 }

 .checkbox-group input[type="checkbox"] {
   width: 20px;
   height: 20px;
   accent-color: var(--dell-blue);
   cursor: pointer;
 }

 .checkbox-group label {
   font-size: 0.9rem;

   cursor: pointer;
 }

 .checkbox-group .tc-link {
   cursor: pointer;
   background: none;
   border: none;
   font-size: 1rem;
   letter-spacing: 0;
   padding: 0;
 }

 .checkbox-group .tc-link:hover {
   color: white;
 }

 .form-error {
   position: absolute;
   bottom: -20px;
   color: var(--incorrect-red);
   font-size: 0.8rem;
   margin-top: 5px;
   display: none;
 }

 .form-card .btn {
   width: auto;
   margin: 0 auto 30px;
   text-align: center;
 }

 #submitBtn {
   background: url('../images/submit.png') no-repeat center center;
   background-size: contain;
   color: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 70px;
   min-width: 250px;
   padding: 0;
   border: none;
   transition: var(--transition);
   margin: 0 auto;
   text-align: center;
   cursor: pointer;
 }

 /* ========== GAME PAGE ========== */
 .game-page {
   background: url('../images/bg2.png') no-repeat center center;
   background-size: cover;
 }

 .game-wrapper,
 .result-wrapper {
   background: url('../images/modal-bg.png') no-repeat center center;
   background-size: contain;
   width: 100%;
   max-width: 100%;
   height: 550px;
   /* animation: fadeInUp 0.8s ease-out; */
   position: relative;
 }

 .game-header {
   display: none;
   /* display: flex; */
   justify-content: space-between;
   align-items: center;
   margin-bottom: 30px;
   padding: 15px 25px;
   background: var(--card-bg);
   border: 1px solid var(--card-border);
   border-radius: 15px;
 }

 .game-header .progress-info {
   font-size: 1rem;
   color: var(--text-secondary);
 }

 .game-header .progress-info span {
   color: var(--dell-accent);
   font-weight: 700;
 }

 .game-header .score-info {
   font-size: 1rem;
   color: var(--text-secondary);
 }

 .game-header .score-info span {
   color: var(--correct-green);
   font-weight: 700;
 }

 .progress-bar-container {
   display: none;
   width: 100%;
   height: 6px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 3px;
   margin-bottom: 30px;
   overflow: hidden;
 }

 .progress-bar {
   height: 100%;
   background: linear-gradient(90deg, var(--dell-blue), var(--dell-accent));
   border-radius: 3px;
   transition: width 0.5s ease;
   width: 0%;
 }

 .head-img {
   width: 500px;
   height: auto;
 }

 .question-card {
   padding: 50px 60px 0 60px;
   margin-bottom: 0;
   text-align: left;
 }

 .question-label {
   display: inline-block;
   padding: 6px 16px;
   /* background: rgba(0, 118, 206, 0.2); */
   color: #ffffff;
   border-radius: 20px;
   font-size: 3rem;
   line-height: 1;
   font-weight: 600;
   letter-spacing: 1px;
   margin-bottom: 20px;
 }

 .question-text {
   font-size: 2rem;
   line-height: 1.2;
   color: var(--text-primary);
   margin-bottom: 30px;
   font-weight: 400;
   padding: 0 40px;
 }

 .options-container {
   display: flex;
   justify-content: space-between;
   width: 80%;
   position: absolute;
   bottom: 90px;
   margin: 0 auto;
   left: 0;
   right: 0;
 }

 .options-container img {
   width: 220px;
   height: auto;
   cursor: pointer;
   transition: var(--transition);
 }

 .option-btn {
   flex: 1;
   min-width: 200px;
   padding: 18px 30px;
   border: 2px solid var(--card-border);
   border-radius: 15px;
   background: var(--card-bg);
   color: var(--text-primary);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: var(--transition);
 }

 .option-btn:hover {
   border-color: var(--dell-blue);
   background: rgba(0, 118, 206, 0.1);
   transform: translateY(-2px);
 }

 .option-btn.correct {
   border-color: var(--correct-green);
   background: rgba(0, 210, 106, 0.15);
   color: var(--correct-green);
 }

 .option-btn.incorrect {
   border-color: var(--incorrect-red);
   background: rgba(244, 67, 54, 0.15);
   color: var(--incorrect-red);
 }

 .option-btn:disabled {
   cursor: not-allowed;
   opacity: 0.7;
 }

 /* ========== MODAL / POPUP ========== */
 .modal-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(5px);
   z-index: 1000;
   justify-content: center;
   align-items: center;
   padding: 20px;
 }

 .modal-overlay.active {
   display: flex;
 }

 .modal {
   background: url(../images/modal-bg.png) no-repeat center center;
   background-size: contain;
   padding: 50px 20px 100px 50px;
   max-width: 950px;
   width: 950px;
   position: relative;
   max-height: 80vh;
   overflow: hidden;
   /* animation: modalIn 0.3s ease-out; */
   text-align: left;
 }

 .modal .modal-header {
   width: 55%;
 }

 @keyframes modalIn {
   from {
     transform: scale(0.8);
     opacity: 0;
   }

   to {
     transform: scale(1);
     opacity: 1;
   }
 }

 .modal h3 {
   font-size: 1.8rem;
   margin-bottom: 20px;
   color: var(--dell-accent);
   font-weight: 300;
 }

 .modal p,
 .modal li {
   color: var(--text-secondary);
   font-size: 0.95rem;
   line-height: 1.7;
   margin-bottom: 10px;
 }

 .modal ul {
   text-align: left;
   padding-left: 20px;
   margin-bottom: 20px;
 }

 .modal .btn {
   margin-top: 20px;
 }

 /* Trivia modal specific */
 .trivia-result-icon {
   font-size: 2rem;
   line-height: 1;
   margin-bottom: 0;
   /* display: none; */
 }

 .trivia-result-icon.correct {
   color: var(--correct-green);
 }

 .trivia-result-icon.incorrect {
   color: var(--incorrect-red);
 }

 .trivia-text {
   text-align: center;
   color: var(--text-primary);
   font-size: 1.3rem;
   font-weight: 300;
   line-height: 1.5;
   padding: 15px;
   padding-bottom: 0;
   width: 80%;
   margin: 0 auto;
 }

 .correct .answer-bar {
   width: 290px;
   height: 2px;
   margin: 0 auto;
   background: #29DA5B;
   background: linear-gradient(90deg, rgba(41, 218, 91, 0) 0%, rgba(41, 218, 91, 1) 50%, rgba(41, 218, 91, 0) 100%);
   margin-bottom: 20px;
 }

 .incorrect .answer-bar {
   width: 290px;
   height: 2px;
   margin: 0 auto;
   background: #ff0000;
   background: linear-gradient(90deg, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, 0) 100%);
   margin-bottom: 20px;
 }

 #nextBtn {
   background: url(../images/btn.png) no-repeat;
   background-size: contain;
   background-position: center;
   width: 220px;
   height: 52px;
   box-shadow: none;
   font-size: 1.4rem;
   position: absolute;
   left: 0px;
   right: 0px;
   bottom: 0;
   /* transform: translateY(10px); */
   margin: 0 auto;
 }

 /* Terms modal */
 .terms-content {
   text-align: left;
   width: 95%;
   max-height: 30vh;
   overflow-y: auto;
   padding: 0 30px 10px 30px;
 }

 .terms-content h4 {
   color: var(--text-primary);
   /* margin: 15px 0 8px; */
   margin-bottom: 12px;
   font-size: 0.9rem;
   line-height: 1.2;
   font-weight: 400;
 }

 .terms-content h4 span {
   color: #3fd3e1;
 }

 .terms-content p {
   font-size: 0.9rem;
   margin-bottom: 8px;
 }

 .popup-btn {
   position: absolute;
   bottom: 0px;
   right: 90px;
   width: auto;
   height: 70px;
   cursor: pointer;
 }

 /* RULES MODAL */
 .rules-content {
   text-align: left;
   width: 100%;
   margin: 0 auto;
   max-height: 50vh;
   overflow-y: auto;
   padding: 0 30px 10px 15px;
 }

 .rules-content .row {
   display: flex;
   justify-content: center;
   gap: 30px;
   margin-bottom: 20px;
 }

 .rules-content .row .left-col {
   width: 90%;
   padding-right: 10px;
 }

 .rules-content .row .left-col ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }

 .rules-content .row .left-col ul li {
   background: url("../images/ellipse.png") no-repeat left top 5px;
   padding-left: 30px;
   background-size: 12px 12px;
   font-size: 1.3rem;
   line-height: 1.2;
   color: #ffffff;
   margin-bottom: 20px;
 }

 .rules-content .row .right-col {
   width: 40%;
   margin: 0 auto;
   padding: 0 0 0 40px;
   border-left: 1px solid rgba(255, 255, 255, 0.7);
 }

 .rules-content .row .right-col ul {
   list-style: none;
   padding: 0;
 }

 .rules-content .row .right-col ul li {
   font-size: 1.2rem;
   line-height: 1.2;
   margin-bottom: 30px;
   color: #ffffff;
   background: url("../images/tick.png") no-repeat left top 3px;
   padding-left: 30px;
   background-size: 17px 17px;
 }

 .rules-content .row .right-col p {
   font-size: 1.15rem;
   line-height: 1.2;
   color: #4ec3d2;
   margin-bottom: 0;
   padding-bottom: 0;
 }

 .pill {
   display: inline-flex;
   align-items: center;
   width: 90%;
   gap: 10px;
   padding: 0;
   background: #4ec3d2;
   color: #0d2155;
   border-radius: 50px;
   font-size: 1.3rem;
   letter-spacing: 1px;
   margin-bottom: 10px;
 }

 .pill:last-of-type {
   margin-bottom: 20px;
 }

 /* ========== RESULT / LEADERBOARD ========== */
 .leaderboard-page {
   background: url('../images/bg2.png') no-repeat center center;
   background-size: cover;
 }

 .result-wrapper {
   width: 100%;
   position: relative;
   text-align: left;
   padding: 50px 70px;
   /* animation: fadeInUp 0.8s ease-out; */
 }

 .result-wrapper img.result-image {
   width: 500px;
 }

 .result-wrapper h2 {
   font-size: 2.5rem;
   margin-bottom: 10px;
 }

 .score-display {
   /* font-size: 5rem;

   font-weight: 800; */
   /* background: linear-gradient(135deg, var(--dell-accent), var(--dell-blue));

   -webkit-background-clip: text;

   -webkit-text-fill-color: transparent;

   background-clip: text;

   margin: 20px 0; */
 }

 .result-wrapper ul {
   margin-left: 30px;
 }

 .result-wrapper ul li {
   display: flex;
   align-items: center;
   font-size: 2rem;
   line-height: 1.2;
   margin-bottom: 10px;
   font-weight: 100;
 }

 .result-wrapper ul li div {
   padding-left: 20px;
   font-weight: 400;
 }

 .result-wrapper ul li span {
   width: 10px;
   height: 10px;
   margin-right: 10px;
   border-radius: 50%;
   background: #54C6D6;
 }

 /* .score-label {

   color: var(--text-secondary);

   font-size: 1.1rem;

 } */
 .btn-Leaderboard {
   position: absolute;
   bottom: -15px;
   right: 80px;
   width: 260px;
   height: auto;
 }

 .btn-Leaderboard img {
   width: 100%;
 }

 /* ========== LEADERBOARD PUBLIC PAGE ========== */
 .leaderboard-page .container {}

 .leaderboard-wrapper {
   /* background: url('../images/leaderboard-bg.png') no-repeat center center;

   background-size: contain; */
   width: 100%;
   max-width: 960px;
   /* height: 70vh; */
   padding: 80px;
   position: relative;
   text-align: center;
 }

 .leaderboard-wrapper h1 {
   font-size: 4rem;
 }

 .leaderboard-wrapper h2 {
   text-align: center;
   font-size: 2.5rem;
   line-height: 1.2;
   font-weight: 300;
 }

 .w-100 {
   max-width: 100%;
 }

 .refresh-btn {
   display: block;
   margin: 0 auto 20px;
 }

 /* Leaderboard table */
 .leaderboard-card {
   /* background: var(--card-bg);

   backdrop-filter: blur(20px);

   border: 1px solid var(--card-border);

   border-radius: 20px;

   padding: 30px;

   margin: 30px 0; */
   width: 100%;
 }

 .leaderboard-card h3 {
   font-size: 1.4rem;
   margin-bottom: 20px;
   color: var(--dell-accent);
 }

 .leaderboard-table {
   width: 100%;
   border-collapse: collapse;
 }

 .leaderboard-table thead th {
   padding: 15px;
   text-align: left;
   color: var(--text-secondary);
   font-size: 1.2rem;
   text-transform: uppercase;
   letter-spacing: 2px;
   border: 1px solid var(--card-border);
   background: #0d2155;
   font-weight: 200;
 }

 .leaderboard-table tbody td {
   padding: 15px;
   text-align: left;
   color: var(--text-secondary);
   font-size: 1.2rem;
   text-transform: uppercase;
   letter-spacing: 2px;
   border: 1px solid var(--card-border);
   background: #0d2155;
   font-weight: 200;
 }

 .leaderboard-table tbody tr:hover {
   background: rgba(255, 255, 255, 0.03);
 }

 .leaderboard-table .rank-col {
   width: 60px;
   text-align: center;
 }

 .rank-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   font-weight: 700;
   font-size: 0.85rem;
 }

 .rank-1 {
   background: linear-gradient(135deg, #FFD700, #FFA000);
   color: #000;
 }

 .rank-2 {
   background: linear-gradient(135deg, #C0C0C0, #9E9E9E);
   color: #000;
 }

 .rank-3 {
   background: linear-gradient(135deg, #CD7F32, #A0522D);
   color: #fff;
 }

 .score-col {
   font-weight: 700;
   color: var(--dell-accent);
 }

 .highlight-row {
   background: rgba(0, 118, 206, 0.1) !important;
 }

 .highlight-row td {
   color: var(--dell-accent) !important;
   font-weight: 600;
 }

 .end-btn {
   display: block;
   margin: 30px auto 0;
   /* width: 220px;

    height: 52px;

    background: url('../images/btn.png') no-repeat center center;

    background-size: contain; */
   color: transparent;
   font-size: 1.4rem;
   text-align: center;
   line-height: 52px;
   border: none;
   cursor: pointer;
   position: absolute;
   right: 6%;
   bottom: 2%;
   z-index: 22;
 }

 /* QR Section */
 .qr-section {
   position: absolute;
   left: 0;
   bottom: 0;
   margin-top: 30px;
   padding: 50px;
   border-radius: 20px;
   text-align: left;
 }

 .qr-section p {
   font-size: 0.95rem;
   line-height: 1.2;
 }

 .qr-code {
   width: 180px;
   height: 180px;
   border-radius: 15px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 10px 0;
 }

 .qr-code img {
   width: 100%;
   height: 100%;
 }

 /* ========== ANIMATIONS ========== */
 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes pulse {

   0%,
   100% {
     transform: scale(1);
   }

   50% {
     transform: scale(1.05);
   }
 }

 @keyframes shake {

   0%,
   100% {
     transform: translateX(0);
   }

   20% {
     transform: translateX(-8px);
   }

   40% {
     transform: translateX(8px);
   }

   60% {
     transform: translateX(-6px);
   }

   80% {
     transform: translateX(6px);
   }
 }

 .pulse {
   animation: pulse 2s infinite;
 }

 /* ========== SCROLLBAR ========== */
 ::-webkit-scrollbar {
   width: 6px;
 }

 ::-webkit-scrollbar-track {
   background: transparent;
 }

 ::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.2);
   border-radius: 3px;
 }

 ::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.3);
 }

 /* ========== RESPONSIVE ========== */
 @media (max-width: 768px) {
   .home-page {
     justify-content: center;
   }

   .home-content {
     width: 100%;
     padding: 30px 20px;
   }

   .video-overlay {
     background: rgba(10, 14, 39, 0.8);
   }

   .home-wrapper h1 {
     font-size: 2rem;
   }

   .vs-badge {
     flex-direction: column;
     gap: 8px;
     padding: 15px 20px;
   }

   .form-card {
     padding: 25px;
   }

   .question-card {
     padding: 25px;
   }

   .options-container {
     flex-direction: column;
   }

   .option-btn {
     min-width: auto;
   }

   .score-display {
     font-size: 3.5rem;
   }

   .game-header {
     flex-direction: column;
     gap: 10px;
     text-align: center;
     display: none;
   }

   .leaderboard-table {
     font-size: 0.85rem;
   }

   .leaderboard-table thead th,
   .leaderboard-table tbody td {
     padding: 8px 10px;
   }

   .modal {
     padding: 25px;
   }
 }

 @media (max-width: 480px) {
   .home-wrapper h1 {
     font-size: 1.6rem;
   }

   .btn {
     padding: 14px 32px;
     font-size: 1rem;
   }

   .container {
     padding: 15px;
   }
 }

 /* ========== LOADER ========== */
 .loader {
   display: inline-block;
   width: 20px;
   height: 20px;
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-top: 2px solid white;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }

 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }

 .btn-hover {
   transition: all 0.5s ease;
 }

 .btn-hover:hover {
   transform: translateY(-8px);
   transition: all 0.5s ease;
 }

 .btn-hover-left {
   transition: all 0.5s ease;
 }

 .btn-hover-left:hover {
   transform: translateX(-15px);
   transition: all 0.5s ease;
 }

 .btn-hover-right {
   transition: all 0.5s ease;
 }

 .btn-hover-right:hover {
   transform: translateX(15px);
   transition: all 0.5s ease;
 }

 @media (max-width: 1600px) {
   .home-wrapper h1.title {
     font-size: 4.6rem;
   }

   .home-wrapper .subtitle {
     font-size: 1.5rem;
   }

   .home-wrapper h2.tagline {
     font-size: 2rem;
   }

   .play-button img {
     width: 200px;
   }

   .home-content {
     width: 55%;
   }

   .cloud-icon {
     width: 65%;
   }

   #dellLogo {
     width: 160px;
   }

   .home-wrapper .subtitle {
     margin: 20px 0 20px 0;
   }

   .form-group {
     margin-bottom: 15px;
   }

   .register-page .container {
     padding-bottom: 0;
   }

   .form-error {
     bottom: -17px;
   }

   .register-page .modal {
     max-width: 800px;
   }

   .pill {
     font-size: 1.1rem;
   }

   .rules-content .row .right-col {
     padding: 0 0 0 20px;
   }

   .rules-content .row .right-col ul li {
     font-size: 1rem;
     margin-bottom: 20px;
   }

   .leaderboard-wrapper {
     padding-top: 40px;
   }

   img.w-100 {
     max-width: 60%;
   }

   .popup-btn {
     right: 75px;
     height: 60px;
   }

   .leaderboard-wrapper h1 {
     font-size: 3.7rem;
   }

   .leaderboard-wrapper h2 {
     font-size: 2rem;
     line-height: 1.1;
   }

   .qr-section {
     padding: 30px;
   }

   .qr-code {
     justify-content: start;
     align-items: end;
   }

   .qr-code img {
     width: 150px;
     height: auto;
   }

   .end-btn {
     right: 8%;
   }

   .end-btn img {
     width: 220px;
   }
 }

 /* ========== RESPONSIVE - LARGE SCREENS (4K/55") ========== */
 @media (min-width: 3840px) {
   #dellLogo {
     width: 400px;
   }

   .topleft {
     width: 370px;
   }

   .topright {
     width: 370px;
   }

   .copyright {
     font-size: 2rem;
   }

   .cloud-icon {
     width: 100%;
     height: auto;
     margin-bottom: 20px;
   }

   .home-wrapper {
     width: 90%;
   }

   .home-wrapper h1.title {
     font-size: 14rem;
   }

   .home-wrapper h2.tagline {
     font-size: 5.8rem;
   }

   .home-wrapper .subtitle {
     font-size: 5rem;
     padding-bottom: 10px;
   }

   .home-wrapper a img {
     width: 600px;
   }

   .register-wrapper {
     transform: scale(2.3);
   }

   .modal {
     transform: scale(2.5);
   }

   .game-wrapper,
   .result-wrapper {
     transform: scale(2.5);
   }

   .terms-content {
     max-height: 320px;
     padding: 0 30px 10px 20px
   }

   #rulesModal .modal {
     padding: 50px 20px 100px 90px;
   }

   .leaderboard-wrapper {
     transform: scale(2.3);
   }

   .qr-section {
     transform: scale(2.3);
     left: 5%;
     bottom: 9%;
     padding: 0;
   }

   .qr-code {
     justify-content: start;
     align-items: end;
   }

   .qr-code img {
     width: 150px;
     height: auto;
   }

   .end-btn {
     right: 8%;
   }

   .end-btn img {
     width: 450px;
   }
 }