body{ font-size: 15px; overflow-x: hidden;  font-family: 'Lina-Round'; direction: rtl; color: var(--font-colour); background: var(--body-bg); background-size: contain;}
a, a:link, a:visited, a:hover, a:active, button, button:hover, i, i:hover, h6, h6:hover, :hover, img{ text-decoration:none; outline:none; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
img{ max-width:100%;} input, textarea, button, input:focus, textarea:focus, button:focus, select:focus{outline: none;}
a, a:hover, a:focus{color:inherit;}
p:last-child{margin-bottom: 0px;}
html { scroll-behavior: smooth;}
.btn-primary{ height: 50px; border-radius: 30px; min-width: 120px; background: var(--gradiant-blue); color: var(--white);
font-size: var(--font-size-20); font-weight: var(--font-600); border: none; flex-shrink: 0; display: flex; align-items: center; justify-content: center;}
.header-section {display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.header-section .logo img { max-width: 170px; }
.login-nav-actions { display: flex; align-items: center; gap: 24px;}
.login-contact-link { font-weight: var(--font-900); font-size: var(--font-size-18); color: var(--font-colour);}
.login-contact-link:hover { color: var(--primary); }
header{padding: 30px 0px;}
.login-flag, .login-contact-link{flex-shrink: 0;}
.login-flag img{height: 40px;}
.login-hero-grid {display: flex; align-items: center; gap: 50px;}
.login-illustration { text-align: center; flex: 1; } 
.login-illustration img { width: 100%; max-width: 500px; margin: 0 auto; }
.login-card { flex: 1; background: var(--bg-white); border: var(--stroke-primary); border-radius: 20px; box-shadow: 0 24px 60px -30px rgba(13, 175, 175, .35);
padding:40px; max-width: 560px; width: 100%; display: flex; flex-direction: column; gap: var(--gap-20);}
h1{ font-size: var(--font-size-48); font-weight: var(--font-900); line-height: 1.2; color: var(--primary);}
h1 span{color: var(--secondary);}
p{margin: 0px;}
.subtitle { color: var(--font-colour); font-size: var(--font-size-20); line-height: 1.9;}
.login-label { display: block; font-weight: var(--font-900); font-size: var(--font-size-20);
color: var(--font-colour); margin-bottom: 12px;}
.login-flag-sm img{max-width: 24px; max-height: 24px;}
.login-phone-row { display: flex; gap: 14px; margin-bottom: 24px;}
.login-country { display: inline-flex; align-items: center; gap: 10px; flex: none;
 height: 60px; padding: 0 16px; border: var(--stroke-primary); border-radius: 16px; background: var(--bg-white);
 color: var(--font-colour); font-weight: var(--font-900);}
.login-country:hover { border-color: var(--primary); }
.login-dial { font-size: var(--font-size-18);  }
.login-country i { color: var(--font-secondary); font-size: 14px; }
.login-input { flex: 1 1 auto; min-width: 0; height: 60px; padding: 0 20px; border: var(--stroke-primary); text-align: right; width: 100%;
border-radius: 16px; background: var(--bg-white); color: var(--font-colour); font-family: inherit; font-size: var(--font-size-18);}
.login-input::placeholder { color: var(--font-secondary); opacity: .8; }
.login-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-opacity-11);}
.team-row { display: flex; gap: 20px;}
.team-input-group { flex: 1; min-width: 0; display: flex; flex-direction: column;}
.team-input-row { display: flex; align-items: center; gap: 10px;}
.team-input-row .login-input { min-width: 0;}
.team-avatar { flex-shrink: 0; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.team-avatar img { width: 100%; height: 100%; object-fit: contain;}
.avatar-grid { display: flex; flex-wrap: wrap; gap: 12px;}
.avatar-option { width: calc(25% - 9px); border: var(--stroke-primary); border-radius: 14px; padding: 10px;
cursor: pointer; background: var(--bg-white);}
.avatar-option img { width: 100%; display: block;}
.btn-outline { height: 50px; border-radius: 30px; min-width: 120px; background: var(--bg-white);
border: var(--stroke-primary); color: var(--font-secondary); font-size: var(--font-size-20); font-weight: var(--font-600);}
#avatarPicker .modal-footer { gap: 12px;}
#avatarPicker .modal-footer .btn { width: auto; flex: 1;}
#exitConfirm .modal-footer { gap: 12px;}
#exitConfirm .modal-footer .btn { width: auto; flex: 1;}
.terms-check { display: flex; align-items: center; gap: 10px; }
.terms-check input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; flex-shrink: 0;
border: var(--stroke-primary); border-radius: 6px; background: var(--bg-white); cursor: pointer; position: relative;}
.terms-check input[type="checkbox"]:checked { border-color: var(--primary); background: var(--gradiant-blue);}
.terms-check input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%;
width: 6px; height: 10px; border: solid var(--white); border-width: 0 2px 2px 0; transform: translate(-50%, -60%) rotate(45deg);}
.terms-check label { font-size: var(--font-size-18); color: var(--font-colour); margin: 0; cursor: pointer;}
.terms-check .terms-link { color: var(--primary); font-weight: var(--font-900); text-decoration: underline;}
.login-submit { width: 100%; height: 56px; font-size: var(--font-size-20); font-weight: var(--font-900);
border-radius: 30px; background: var(--gradiant-blue); border: none;}
.login-submit:hover { filter: brightness(1.04); background: var(--gradiant-blue); }
.login-form{display: flex; flex-direction: column; gap: var(--gap-20);}
footer{background: var(--bg-light); padding: 60px 0px 30px; min-height: 100px; position: relative;}
footer::before{content: ''; background: var(--footer-bg); background-size: cover; width: 100%;
height: 130px; position: absolute; top: -70px;}
main{padding-bottom: 100px;}
.login-footer-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;}
.login-footer-brand .logo img { max-width: 190px;  }
.login-contact{display: flex; flex-direction: column; gap: 15px; list-style: none; padding: 0; align-items: end;}
.login-contact a{display: flex; align-items: center; gap: 10px; color: var(--font-secondary); font-size: var(--font-size-16);}
.login-contact a:hover{color: var(--primary);}
.login-contact i{color: var(--primary); font-size: var(--font-size-16); width: 18px; text-align: center;}
.login-social { display: flex; gap: 16px; justify-content: end; }
.login-social a { width: 40px; height: 40px;border-radius: 50%; display: inline-flex;  align-items: center;
justify-content: center; color: var(--white); font-size: var(--font-size-18); background: var(--gradiant-blue);
box-shadow: 0 10px 24px -14px rgba(13, 175, 175, .7);}
.login-social a:hover { transform: translateY(-3px); color: var(--white); }
.login-footer-links { display: flex; flex-direction: column; gap: 16px; min-width: 160px;}
.login-footer-links h4 { font-size: var(--font-size-20); }
.login-footer-links a { color: var(--font-secondary); font-size: var(--font-size-18); }
.login-footer-links a:hover { color: var(--primary); }
.login-copyright { text-align: center; color: var(--font-secondary); font-size: var(--font-size-16); margin-top: 30px;}
.basic-modal { z-index: 22222; background: var(--bg-white-70);  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}
.basic-modal .modal-content { border: var(--stroke-primary); background: var(--bg-white); border-radius: var(--border-radius); padding: var(--pad-20);}
.basic-modal .modal-header { justify-content: center; border: none; padding: 0px; margin-bottom: 20px;}
.basic-modal .modal-body {display: flex; flex-direction: column; gap: 16px;}
.basic-modal .modal-footer { justify-content: center;  border: none; padding-bottom: 0px;}
.modal-backdrop { background: var(--bg-white-90);}
.basic-modal .btn-primary { width: 100%;}
.modal-close-ico { cursor: pointer; position: absolute; right: 20px; top: 20px; width: 40px;
height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg-light); border-radius: 50%; z-index: 1;}
.country-select { display: flex; justify-content: space-between; align-items: center; width: 100%;
cursor: pointer; border-bottom: var(--stroke-primary); padding-bottom: 16px;}
.country-name { font-size: var(--font-size-20); display: flex; gap: 16px; align-items: center; color: var(--font-secondary);}
.country-select-icon { width: 36px; height: 36px;  border-radius: 50%; border: var(--stroke-primary);
display: flex; justify-content: center; align-items: center; color: var(--white); flex-shrink: 0;}
.country-select-icon i { display: none;}
.country-select.select .country-name { color: var(--font-colour);}
.country-select.select .country-select-icon { background: var(--primary);}
.country-select.select .country-select-icon i { display: block;}
.country-name img {  width: 30px; height: 30px;}
.curriculum-select { padding: 40px 0; display: flex; flex-direction: column; gap: 30px;}
.curriculum-title { font-size: 36px; font-weight: var(--font-900); color: var(--font-colour); display: flex; gap: var(--gap-20); align-items: center;}
.curriculum-countries { display: flex; flex-wrap: wrap; gap: 16px;}
.curriculum-countries .country-select { width: auto; border: var(--stroke-primary); border-radius: 999px;
padding: 14px 24px; background: var(--bg-white);}
.curriculum-actions { display: flex; width: 100%; gap: 16px;}
.curriculum-actions > .btn { flex: 1;}
.curriculum-next { min-width: 160px;}
.curriculum-stages { display: flex; flex-wrap: wrap; gap: 16px;}
.stage-select { padding: 24px 20px; border: var(--stroke-primary); border-radius: 20px; background: var(--bg-white);
cursor: pointer; text-align: center; font-weight: var(--font-900); color: var(--font-colour); font-size: var(--font-size-18);}
.stage-select.select, .curriculum-countries .country-select.select, .grade-select.select, .grade-select-solo.select, .subject-select.select, .unit-select.select, .avatar-option.select { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-opacity-11);}
.curriculum-grades { display: flex; flex-wrap: wrap; gap: 16px;}
.grade-select, .grade-select-solo { min-width: 120px; padding: 20px; border: var(--stroke-primary); border-radius: 16px; background: var(--bg-white);
cursor: pointer; text-align: center; font-weight: var(--font-900); color: var(--font-colour); font-size: var(--font-size-18);}
.round-count-select { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;}
.round-count-select .grade-select-solo { min-width: 0; padding: 16px 8px;}
.curriculum-subjects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;}
.subject-select { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
padding: 24px 16px; border: var(--stroke-primary); border-radius: 20px; background: var(--bg-white); cursor: pointer;
font-weight: var(--font-900); color: var(--font-colour); font-size: var(--font-size-24);}
.subject-select img { width: 140px; height: 150px; object-fit: contain; position: relative;}
.subject-summary { cursor: default;}
.subject-select span{position: relative;}
.resend-link{font-size: var(--font-size-20); color: var(--secondary); font-weight: 600;}
.verify-code{ margin-bottom: 24px;}
.otp-inputs{ display: flex; gap: 16px;}
.otp-inputs .otp-box{ flex: 0 0 auto; width: 64px; height: 64px; text-align: center;
 border: var(--stroke-primary); border-radius: 14px; background: var(--bg-white); color: var(--font-colour);
 font-family: inherit; font-size: var(--font-size-24); font-weight: var(--font-900); caret-color: var(--primary);
 -moz-appearance: textfield; appearance: textfield;}
.otp-inputs .otp-box::-webkit-outer-spin-button,
.otp-inputs .otp-box::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0;}
.otp-inputs .otp-box::placeholder{ color: var(--font-secondary); opacity: .55; font-weight: var(--font-600);}
.otp-inputs .otp-box:focus{ border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-opacity-11);}
.otp-inputs .otp-box.filled{ border-color: var(--primary); color: var(--primary);}
.success-pop{position: relative; display: flex; flex-direction: column; gap: var(--gap-20); align-items: center;}
.success-pop img{max-width: 200px; position: relative;}
.success-pop h6{font-size: var(--font-size-20);}
.circle-blur { background: var(--gradiant-circle); width: 150px; height: 150px; position: absolute;
transform: translate(-50%, -50%); left: 40%; border-radius: 50%; filter: blur(30px); top: 60%;}
.success-img{position: relative;}
.curriculum-countries .country-name{ color: var(--font-colour); font-weight: 700;}
.subject-img{position: relative;}
.subject-img .circle-blur{ width: 100px; height: 100px;}
.back-arrow{width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: var(--bg-white); border: var(--stroke-primary); cursor: pointer;}
.unit-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px 30px; align-items: start;}
.subject-panel { display: flex; flex-direction: column; gap: 24px; grid-column: 1; grid-row: 1;}
.units-panel { min-width: 0; display: flex; flex-direction: column; gap: 24px; grid-column: 2; grid-row: 1 / span 2;}
.unit-layout > .curriculum-actions { grid-column: 1; grid-row: 2;}
.curriculum-units { display: flex; flex-wrap: wrap; gap: 16px;}
.unit-select { flex: 1 1 calc(25% - 12px); min-width: 160px; min-height: 120px; padding: 24px 16px; border: var(--stroke-primary); border-radius: 16px;
background: var(--bg-white); cursor: pointer; text-align: center; display: flex; justify-content: center; align-items: center;
font-weight: var(--font-900); color: var(--font-colour); font-size: var(--font-size-20); position: relative;
}
.unit-icon{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.unit-remove-icon{display: none;}
.selected-units { display: flex; flex-direction: column; gap: 10px;}
.selected-unit-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 14px; border: var(--stroke-primary); border-radius: 12px; background: var(--bg-white);
font-size: var(--font-size-16); color: var(--font-colour);}
.selected-unit-item .remove-unit { flex-shrink: 0; width: 22px; height: 22px; border: none; background: none;
color: var(--font-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center;}
.selected-unit-item .remove-unit:hover { color: var(--primary);}

.game-subject { display: flex; align-items: center;  gap: 14px; margin-bottom: 20px;}
.game-subject h2 { font-size: var(--font-size-28); font-weight: var(--font-900); color: var(--font-colour); margin: 0;}
.game-subject img { width: 80px; height: 80px; object-fit: contain; position: relative;}

.game-rounds { display: flex; gap: var(--gap-20);  flex-wrap: wrap;}
.round-column { flex: 1; min-width: 180px; display: flex; flex-direction: column; align-items: center; gap: 10px;
background: var(--bg-white); border: var(--stroke-primary); border-radius: 16px; padding: 16px; position: relative;}
.round-badge { width: 40px; height: 40px; border-radius: 50%; background: var(--gradiant-blue); color: var(--white);
display: flex; align-items: center; justify-content: center; font-weight: var(--font-900); font-size: var(--font-size-20);}
.round-label { font-weight: var(--font-900); color: var(--font-colour); font-size: var(--font-size-20);}
.question-pill { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
border-radius: 999px; color: var(--white); font-weight: var(--font-900); padding: 1px;}
.question-pill span { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-20);}
.question-pill.value-200{ background: var(--secondary);}
.question-pill.value-400 { background: var(--primary);}
.question-pill.value-600 { background: var(--orange);}
.question-pill.done{ opacity: .6; background: var(--grey); color: var(--font-colour);}
.question-pill.correct { opacity: 1;}
.question-pill.done i, .question-pill.correct .fa-check-circle { color: var(--green);}

.game-level-divider { text-align: center; margin: 15px 0;}
.level-badge { display: inline-block; padding: 8px 20px; border-radius: 999px; border: var(--stroke-primary);
background: var(--bg-white); font-weight: var(--font-900); color: var(--font-colour); font-size: var(--font-size-16);}

.turn-heading { text-align: center; font-size: var(--font-size-24); font-weight: var(--font-900); margin-bottom: 20px;}

.teams-versus { display: flex; align-items: center; justify-content: center; gap: 30px;}
.team-score-card { position: relative; background: var(--bg-white); border: var(--stroke-primary); border-radius: 20px;
padding: 10px; min-width: 260px; display: flex; align-items: center; gap: var(--gap-10); cursor: pointer;}
.team-score-card.active { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-opacity-11);}
.team-info { display: flex; flex-direction: column; }
.team-name { font-size: var(--font-size-20); font-weight: var(--font-900); color: var(--font-colour);}
.team-score { font-size: var(--font-size-28); font-weight: var(--font-900); color: var(--primary); display: flex; align-items: center; gap: 8px;}
.score-controls { display: flex; align-items: center; gap: 10px; margin-top: 4px;}
.score-btn { width: 36px; height: 36px; border-radius: 50%; border: var(--stroke-primary); background: var(--bg-white);
font-weight: var(--font-900); cursor: pointer; font-size: var(--font-size-18);}
.score-controls span { padding: 4px 14px; border-radius: 999px; background: var(--bg-light); font-weight: var(--font-900); font-size: var(--font-size-18);
border: var(--stroke-primary); min-width: 60px; text-align: center;}
.team-avatar-lg { height: 70px; position: relative;}
.versus-icon { font-size: 28px;}
.game-bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-white);
border-top: var(--stroke-primary); padding: 20px 0 20px; z-index: 100; box-shadow: 0 -10px 30px -20px rgba(13, 175, 175, 0.30);
display: flex; align-items: center; justify-content: space-evenly;}
.game-dashboard {  padding-top: 20px;}
.team-score img{max-width: 40px;}
.game-subject-img, .team-img{position: relative;}
.game-subject-img .circle-blur{width: 80px; height: 80px; filter: blur(20px);}
.team-img .circle-blur{width: 60px; height: 60px; filter: blur(15px);}
.circle-blur2 { background: var(--gradiant-circle); width: 300px; height: 300px; position: absolute;
transform: translate(-50%, -50%); left: 50%; border-radius: 50%; filter: blur(80px); top: 50%;}
.line-1{width: 100%; height: 1px; border: var(--stroke-primary);}
.question-pill img{width: 30px;}
.points-action{width: 40px; height: 40px; background: var(--bg-white); border-radius: 50%; display: flex;
align-items: center; justify-content: center; cursor: pointer;}
.points-action img{width: 24px;}

.game-play { padding-top: 20px;}

.game-play-topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 70px; margin-bottom: 30px;}
.game-play-title { font-size: var(--font-size-28); font-weight: var(--font-900);
color: var(--font-colour); display: flex; gap: var(--gap-20); align-items: center; margin: 0;}
.game-play-badges { display: flex; align-items: center; gap: var(--gap-10); flex-wrap: wrap;}

.round-pill { display: inline-block; padding: 8px 20px; border-radius: 999px;
border: var(--stroke-primary); background: var(--bg-white); font-weight: var(--font-900);
color: var(--font-colour); font-size: var(--font-size-16);}
.turn-pill { display: inline-block; padding: 8px 20px; border-radius: 999px; border: none;
background: var(--primary-opacity-11); color: var(--font-colour); font-weight: var(--font-900);
font-size: var(--font-size-16);}

.game-play-layout { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: var(--gap-20);
align-items: start; position: relative;}

.game-play-sidebar { display: flex; flex-direction: column; gap: var(--gap-20); position: relative;}
.game-play-teams { display: flex; flex-direction: column; gap: var(--gap-20); align-items: center;}
.game-play-teams .team-score-card { width: 100%; min-width: 0;}

.no-winner-card { background: var(--bg-white); border: var(--stroke-primary);
border-radius: var(--border-radius); padding: 10px; text-align: center;
display: flex; align-items: center; gap: 10px; cursor: pointer;}
.no-winner-card.active { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-opacity-11);}
.no-winner-card img {  height: 70px; object-fit: contain;}
.no-winner-card span { font-weight: var(--font-900); color: var(--font-colour); font-size: var(--font-size-18);}

.game-play-center { min-width: 0; position: relative;}
.answer-card { background: var(--bg-white); border: var(--stroke-primary);
border-radius: var(--border-radius); padding: var(--pad-20); cursor: pointer; text-align: center;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--gap-20);}
.answer-card .answer-label { font-weight: var(--font-900); font-size: var(--font-size-24); color: var(--font-colour);}
.answer-card .answer-value { display: flex; flex-direction: column; align-items: center; gap: var(--gap-20);
font-weight: var(--font-900); font-size: var(--font-size-28); color: var(--primary); line-height: 1.6;
filter: blur(8px); user-select: none; transition: filter .3s ease-in-out;}
.answer-card .answer-value p, .answer-card .answer-value h3, .answer-card .answer-value h4,
.answer-card .answer-value h5, .answer-card .answer-value h6 { font-size: inherit; font-weight: inherit;
color: inherit; line-height: inherit; margin: 0;}
.answer-card.revealed .answer-value { filter: blur(0); user-select: text;}
.answer-card .answer-hint { font-size: var(--font-size-16); color: var(--font-secondary);}
.answer-card.revealed .answer-hint { display: none;}

.question-card { background: var(--bg-white); border: var(--stroke-primary); position: relative;
border-radius: var(--border-radius); padding: var(--pad-20); display: flex;
flex-direction: column; gap: 16px;}
.question-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.timer-controls { display: flex; align-items: center; gap: 5px; padding-right: 10px;}
.timer-readout { font-size: var(--font-size-28); font-weight: var(--font-900);
color: var(--font-colour); min-width: 90px; text-align: center; font-variant-numeric: tabular-nums;}

.icon-circle-btn { width: 50px; height: 50px; border-radius: 50%; display: flex;
align-items: center; justify-content: center; background: var(--gradiant-blue);
border: var(--border-primary); cursor: pointer; font-size: var(--font-size-18);
color: var(--white); flex-shrink: 0;}
.icon-circle-btn.active-timer { background: var(--gradiant-blue); color: var(--white); border-color: transparent;}
.icon-circle-btn.reset-btn { width: 36px; height: 36px; font-size: var(--font-size-16); border: none; background: none;}

.points-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px;
border-radius: 999px; background: var(--secondary); color: var(--white);
font-weight: var(--font-900); font-size: var(--font-size-18);}
.points-pill img { width: 24px;}

.question-card-label { font-weight: var(--font-900); font-size: var(--font-size-20); color: var(--font-secondary);}
.question-card-text { display: flex; flex-direction: column; align-items: center; gap: var(--gap-20);
font-size: var(--font-size-24); font-weight: var(--font-600);
color: var(--font-colour); line-height: 1.6; margin: 0; text-align: center;}
.question-card-text p, .question-card-text h3, .question-card-text h4,
.question-card-text h5, .question-card-text h6 { font-size: inherit; font-weight: inherit;
color: inherit; line-height: inherit; margin: 0;}
.game-play-tile{display: flex; align-items: center; gap: var(--gap-20);}
.breadcrumbs{transform: scale(-1);}
.question-card-time{display: flex; align-items: center; border: 1px solid var(--primary); border-radius: 30px;}
.question-card-area, .answer-card-area{display: flex; flex-direction: column; gap: var(--gap-20); align-items: center; justify-content: center;
min-height: 320px;}
.answer-card-header{min-height: 48px; display: flex; align-items: center;}
.question-card-area img, .answer-card-area img{max-height: 180px;}
.game-play-teams .team-avatar-lg{height: 100px;}

.winner-popup-overlay { display: none; position: fixed; inset: 0; z-index: 9999;
background: var(--bg-white-70); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
align-items: center; justify-content: center;}
.winner-popup-overlay.show { display: flex; animation: winner-pop-fade .25s ease; }

@keyframes winner-pop-fade { from { opacity: 0; } to { opacity: 1; } }

.winner-popup-card { position: relative; background: var(--bg-white); border-radius: var(--border-radius);
padding: var(--pad-20); max-width: 340px; width: 90%; display: flex; flex-direction: column;
align-items: center; gap: var(--gap-10); text-align: center; overflow: visible;
animation: winner-pop-in .35s ease;}
.winner-popup-card::before { content: ""; position: absolute; inset: -8px; border-radius: calc(var(--border-radius) + 6px);
border: 4px dashed var(--secondary); pointer-events: none;}

@keyframes winner-pop-in { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.winner-popup-decor { position: absolute; inset: 0; pointer-events: none;}
.winner-popup-decor span { position: absolute; font-size: 26px; animation: winner-decor-twinkle 1.6s ease-in-out infinite;}
.decor-coin-1 { top: -18px; left: -14px; }
.decor-coin-2 { bottom: -16px; right: -10px; animation-delay: .3s;}
.decor-sparkle-1 { top: -10px; right: 10%; animation-delay: .5s;}
.decor-sparkle-2 { bottom: 30%; left: -20px; animation-delay: .2s;}
.decor-sparkle-3 { top: 40%; right: -18px; animation-delay: .8s;}

@keyframes winner-decor-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .6; } }

.confetti-container { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 1;}
.confetti-piece { position: absolute; top: -20px; width: 8px; height: 8px; background: var(--primary);
animation-name: confetti-fall; animation-timing-function: ease-in; animation-fill-mode: forwards;}
.confetti-piece.round { border-radius: 50%;}
.confetti-piece.coin { width: 14px; height: 14px; background: none; background-image: url(../images/points.png);
background-size: contain; background-repeat: no-repeat;}

@keyframes confetti-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1;}
100% { transform: translateY(320px) rotate(540deg); opacity: 0;} }

.coin-fly-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9998;}
.flying-coin { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px;
animation: coin-fly .8s cubic-bezier(.25, .46, .45, .94) forwards;}

@keyframes coin-fly {
   0% { transform: translate(0, 0) scale(1); opacity: 1;}
   70% { opacity: 1;}
   100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0;}
}

.winner-popup-mascot { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;}
.winner-popup-mascot .circle-blur { width: 100px; height: 100px;}
.winner-popup-avatar { position: relative; max-width: 100%; max-height: 100%;}

.winner-popup-heading { margin: 0; font-size: var(--font-size-28); font-weight: var(--font-900); color: var(--font-colour);}
.winner-popup-team-name { color: var(--primary);}

.winner-popup-points { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 84px;}
.winner-popup-points-value { font-size: var(--font-size-48); font-weight: var(--font-900); color: var(--primary);}
.winner-popup-points-label { font-size: var(--font-size-18); color: var(--font-secondary); font-weight: var(--font-600);}

.winner-popup-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px;
border-radius: 999px; background: var(--green-opacity-11); color: var(--green);
font-weight: var(--font-900); font-size: var(--font-size-16);}

.winner-popup-bonus-stepper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px;}
.winner-popup-bonus-label { font-size: var(--font-size-16); font-weight: var(--font-600); color: var(--font-secondary);}
.score-btn:disabled { opacity: .4; cursor: default;}

.winner-popup-actions { display: flex; flex-direction: column; gap: 10px; width: 100%;}
.winner-popup-continue-btn { display: inline-flex; align-items: center; justify-content: center;
height: 44px; border-radius: 999px; border: none; background: var(--gradiant-blue); color: var(--white);
font-weight: var(--font-600); font-size: var(--font-size-16); cursor: pointer; width: 100%;}

.header-section.header-center { justify-content: center;}

.winner-announce-wrap { display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 30px;  position: relative;}

.winner-confetti-burst { position: fixed; top: 0; left: 0; right: 0; height: 0; overflow: visible;
pointer-events: none; z-index: 50;}

.winner-hero-card { position: relative; background: var(--bg-white); border: var(--stroke-primary);
border-radius: var(--border-radius); box-shadow: 0 24px 60px -30px rgba(13, 175, 175, .35);
padding: 30px 40px 30px; max-width: 480px; width: 100%; display: flex; flex-direction: column;
align-items: center; gap: var(--gap-10); animation: winner-pop-in .5s ease-out both;}

@keyframes winner-reveal-up { from { transform: translateY(16px); opacity: 0;} to { transform: translateY(0); opacity: 1;} }

.winner-hero-label { font-size: var(--font-size-24); font-weight: var(--font-900); margin-bottom: 20px;
color: var(--font-secondary); animation: winner-reveal-up .5s ease-out .15s both;}

.winner-hero-mascot-row { display: flex; align-items: center; justify-content: center; gap: 10px;
animation: winner-reveal-up .5s ease-out .3s both;}

.winner-hero-mascot { position: relative; width: 170px; height: 200px; display: flex;
align-items: center; justify-content: center;}
.winner-hero-mascot .circle-blur { width: 170px; height: 170px; filter: blur(35px); z-index: 0;}
.winner-hero-avatar { position: relative; max-width: 150px; max-height: 150px; object-fit: contain; z-index: 2;}

.winner-ring-dashed { position: absolute; top: 50%; left: 50%; width: 210px; height: 210px;
margin: -105px 0 0 -105px; border: 3px dashed var(--secondary); border-radius: 50%;
pointer-events: none; opacity: .6; z-index: 1; animation: winner-ring-spin 14s linear infinite;}

@keyframes winner-ring-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }

.winner-ring-pulse { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px;
margin: -60px 0 0 -60px; border: 2px solid var(--primary); border-radius: 50%;
pointer-events: none; opacity: 0; z-index: 0; animation: winner-ring-ping 3s ease-out infinite;}
.winner-ring-pulse-2 { animation-delay: 1s;}
.winner-ring-pulse-3 { animation-delay: 2s;}

@keyframes winner-ring-ping { 0% { transform: scale(.8); opacity: .55;} 100% { transform: scale(1.9); opacity: 0;} }

.winner-crown { position: absolute; top: -20px; left: 50%; width: 70px; z-index: 3;
animation: winner-crown-drop .5s ease-out .55s both;}
.winner-crown img { display: block; width: 100%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.15));
animation: winner-crown-float 2.6s ease-in-out .9s infinite;}

@keyframes winner-crown-drop {
from { transform: translateX(-50%) translateY(-20px) scale(.6); opacity: 0;}
to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1;} }

@keyframes winner-crown-float {
0%, 100% { transform: translateY(0) rotate(-4deg);}
50% { transform: translateY(-6px) rotate(4deg);} }

.winner-ribbon { position: relative; width: 70px; height: 70px; flex-shrink: 0;
animation: winner-reveal-scale .5s ease-out .35s both;}
@keyframes winner-reveal-scale { from { transform: scale(.4); opacity: 0;} to { transform: scale(1); opacity: 1;} }

.winner-ribbon .ribbon-strip { position: absolute; top: 50%; width: 56px; height: 14px; margin-top: -7px;
background: var(--gradiant-blue); border-radius: 999px 999px 999px 2px;
clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%); opacity: .85;
animation: winner-ribbon-sway 2.6s ease-in-out infinite;}

.winner-ribbon-left .ribbon-strip { right: 0; transform-origin: right center;}
.winner-ribbon-left .ribbon-strip:nth-child(1) { --base-angle: -30deg; animation-duration: 2.4s;}
.winner-ribbon-left .ribbon-strip:nth-child(2) { --base-angle: 0deg; opacity: 1; animation-duration: 2.8s;}
.winner-ribbon-left .ribbon-strip:nth-child(3) { --base-angle: 30deg; animation-duration: 3.2s;}

.winner-ribbon-right .ribbon-strip { left: 0; transform-origin: left center; animation-delay: .4s;}
.winner-ribbon-right .ribbon-strip:nth-child(1) { --base-angle: 30deg; animation-duration: 2.4s;}
.winner-ribbon-right .ribbon-strip:nth-child(2) { --base-angle: 0deg; opacity: 1; animation-duration: 2.8s;}
.winner-ribbon-right .ribbon-strip:nth-child(3) { --base-angle: -30deg; animation-duration: 3.2s;}

@keyframes winner-ribbon-sway {
0%, 100% { transform: rotate(var(--base-angle));}
50% { transform: rotate(calc(var(--base-angle) + 4deg));} }

.winner-hero-team-name { font-size: calc(var(--font-size-48) + 10px); font-weight: var(--font-900);
color: var(--primary); margin: 0; line-height: 1.1; animation: winner-reveal-up .5s ease-out .5s both;}

.winner-hero-margin { font-size: var(--font-size-20); color: var(--font-colour); font-weight: var(--font-600);
animation: winner-reveal-up .5s ease-out .65s both;}
.winner-hero-margin span { color: var(--green); font-weight: var(--font-900);}

.winner-compare-row { animation: winner-reveal-up .5s ease-out .8s both;}

.team-mini-card { position: relative; background: var(--bg-white); border: var(--stroke-primary);
border-radius: 14px; padding: 10px 18px; min-width: 150px; display: flex; align-items: center; gap: 10px;}
.team-mini-card.winner { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-opacity-11);}
.team-avatar-sm { height: 100px; object-fit: contain; position: relative;}
.team-mini-card .team-name { font-size: var(--font-size-24);}
.team-mini-card .team-score { font-size: var(--font-size-24);}

.winner-new-game-btn { animation: winner-reveal-up .5s ease-out .95s both; min-width: 180px;}

.winner-fireworks-burst { position: fixed; inset: 0; overflow: visible; pointer-events: none; z-index: 51;}
.firework-burst { position: absolute;}

.draw-hero-card { position: relative; background: var(--bg-white); border: var(--stroke-primary);
border-radius: var(--border-radius); box-shadow: 0 24px 60px -30px rgba(13, 175, 175, .35);
padding: 30px 40px 30px; max-width: 480px; width: 100%; display: flex; flex-direction: column;
align-items: center; gap: var(--gap-10);}

.draw-hero-mascot { position: relative; width: 170px; height: 200px; display: flex;
align-items: center; justify-content: center;}
.draw-hero-mascot .circle-blur { width: 170px; height: 170px; filter: blur(35px); z-index: 0;}

.draw-hero-image { position: relative; max-width: 160px; max-height: 160px; object-fit: contain; z-index: 2;}

.draw-hero-title { font-size: calc(var(--font-size-48) + 10px); font-weight: var(--font-900);
color: var(--primary); margin: 0; line-height: 1.1;}

.draw-hero-desc { font-size: var(--font-size-20); color: var(--font-colour); font-weight: var(--font-600);}

.draw-new-game-btn { min-width: 180px;}

.firework-flash { position: absolute; top: 0; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px;
border-radius: 50%; animation: firework-flash .4s ease-out forwards;}
@keyframes firework-flash { 0% { transform: scale(.2); opacity: .9;} 100% { transform: scale(2.6); opacity: 0;} }

.firework-particle { position: absolute; top: 0; left: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px;
border-radius: 50%; animation: firework-explode 1.1s ease-out forwards;}
@keyframes firework-explode {
0% { transform: translate(0, 0) scale(1); opacity: 1;}
100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0;} }

.my-games-nav { flex-wrap: wrap; row-gap: 10px; justify-content: flex-end;}

.user-chip { display: flex; align-items: center; gap: 10px; background: var(--bg-light); padding-left: 20px;
border: var(--stroke-primary); border-radius: 999px;}
.user-chip img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: var(--stroke-primary);}
.user-chip span { font-weight: var(--font-900); font-size: var(--font-size-16); color: var(--font-colour);}
.user-chip { cursor: pointer;}
.user-chip-caret { font-size: 12px; color: var(--font-secondary); margin-inline-start: 2px; transition: transform .2s ease-in-out;}
.user-chip[aria-expanded="true"] .user-chip-caret { transform: rotate(180deg);}

.user-chip-menu { border: var(--stroke-primary); border-radius: var(--border-radius); background: var(--bg-white);
padding: 10px; min-width: 200px; box-shadow: 0 24px 60px -30px rgba(13, 175, 175, .35); margin-top: 10px !important;}
.user-chip-menu .dropdown-item { display: flex; align-items: center; gap: 10px; color: var(--font-colour);
font-weight: var(--font-600); font-size: var(--font-size-16); border-radius: 10px; padding: 10px 12px;}
.user-chip-menu .dropdown-item i { width: 18px; text-align: center; color: var(--font-secondary);}
.user-chip-menu .dropdown-item:hover, .user-chip-menu .dropdown-item:focus { background: var(--bg-light); color: var(--primary);}
.user-chip-menu .dropdown-item:hover i, .user-chip-menu .dropdown-item:focus i { color: var(--primary);}
.user-chip-menu .dropdown-item.active { color: var(--primary); font-weight: var(--font-900); background: none;}
.user-chip-menu-nav { display: none;}

.login-contact-link.active { color: var(--primary);}

.my-games-banner { position: relative; width: 100%; background: var(--inner-bg) bottom; background-size: cover;
padding: 60px 0 100px; margin-bottom: 40px;}
.my-games-banner-title { text-align: center; color: var(--white); font-size: var(--font-size-48);
font-weight: var(--font-900); margin: 0;}

.my-games-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-20); padding: 0 0 60px;}

.my-games-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
max-width: 560px; margin: 0 auto; padding: 40px 0 110px;}

.my-games-empty-media { position: relative; display: flex; align-items: center; justify-content: center;
margin-bottom: 10px;}
.my-games-empty-media .circle-blur { width: 220px; height: 220px; filter: blur(45px); opacity: .7;}
.my-games-empty-img { position: relative; z-index: 1; max-width: 350px; width: 100%;
animation: hero-shape-float 6s ease-in-out infinite;}

.my-games-empty-title { font-size: var(--font-size-32); font-weight: var(--font-900);
color: var(--font-colour); margin: 0 0 16px;}
.my-games-empty-desc { font-size: var(--font-size-18); color: var(--font-secondary);
line-height: 1.8; margin: 0 0 30px;}

.my-games-empty-cta { padding: 0 36px; gap: 8px;}
.my-games-empty-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(13, 175, 175, .55); color: var(--white);}

.my-game-card { background: var(--bg-white); border: var(--stroke-primary); border-radius: var(--border-radius);
padding: var(--pad-20); display: flex; flex-direction: column; gap: var(--gap-20);}

.game-progress { display: flex; align-items: center; gap: 10px;}
.game-progress-count, .game-progress-percent { font-size: var(--font-size-20); color: var(--font-colour);
font-weight: var(--font-600); white-space: nowrap;}
.game-progress-track { flex: 1; height: 16px; background: var(--bg-light-blue); border-radius: 999px; overflow: hidden;}
.game-progress-fill { height: 100%; background: var(--gradiant-blue); border-radius: 999px;}

.my-game-title { font-size: var(--font-size-28); font-weight: var(--font-900); color: var(--font-colour); text-align: center;}

.my-game-subject { display: flex; align-items: center; gap: 10px;}
.my-game-subject-info { display: flex; flex-direction: column; gap: 4px;}
.my-game-subject-name { font-size: var(--font-size-24); font-weight: var(--font-900); color: var(--font-colour);}
.my-game-subject-stage { font-size: var(--font-size-20); color: var(--font-secondary);}
.my-game-subject-icon { position: relative; width: 100px; height: 100px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;}
.my-game-subject-icon .circle-blur { width: 56px; height: 56px; filter: blur(14px);}
.my-game-subject-icon img { position: relative; width: 100px; height: 100px; object-fit: contain;}

.mini-round-row { display: flex; align-items: center; justify-content: space-evenly; gap: 8px;}
.mini-round { display: flex; flex-direction: column; align-items: center; gap: 6px;}
.mini-round-badge { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--brd-colour2);
background: var(--bg-white); color: var(--font-colour); display: flex; align-items: center; justify-content: center;
font-weight: var(--font-900); font-size: var(--font-size-18);}
.mini-round-badge.active { background: var(--gradiant-blue); color: var(--white); border-color: transparent;}
.mini-round-label { font-size: var(--font-size-18); color: var(--font-colour);}

.my-game-btn { width: 100%; margin-top: auto;}

.my-game-winner { display: flex; align-items: center; gap: 40px; margin-top: auto;}
.my-game-winner-mascot { position: relative; width: 90px; height: 110px; display: flex;
align-items: center; justify-content: center;}
.my-game-winner-mascot .circle-blur { width: 90px; height: 90px; filter: blur(18px);}
.my-game-crown { width: 50px; top: -26px;}
.my-game-winner-avatar { position: relative; max-width: 100px; max-height: 100px; object-fit: contain; z-index: 2;}
.my-game-winner-label { font-size: var(--font-size-20); color: var(--font-colour); font-weight: var(--font-900);}
.my-game-winner-name { font-size: var(--font-size-36); font-weight: var(--font-900); color: var(--primary);}
.my-game-winner-info{display: flex; flex-direction: column;}
.my-game-no-winner { display: flex; align-items: center; gap: 40px; margin-top: auto;}
.my-game-no-winner-desc { font-size: var(--font-size-16); color: var(--font-colour); font-weight: var(--font-600);}
.dp-tabs { border-bottom: 3px solid var(--brd-colour2);  position: relative; margin-bottom: 30px;}
.dp-tabs .nav-link { font-size: var(--font-size-28); color: var(--font-secondary); padding: 0px 30px 20px 30px; border: none; border-bottom: 3px solid var(--brd-colour2);}
.dp-tabs .nav-link.active { background: none; color: var(--primary); font-weight: var(--font-900); border-color: var(--primary);}

.my-games-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding-top: 20px;}
.my-games-page-btn { width: 40px; height: 40px; border-radius: 50%; border: var(--stroke-primary);
background: var(--bg-white); color: var(--font-colour); display: flex; align-items: center; justify-content: center;
font-weight: var(--font-900); font-size: var(--font-size-18); cursor: pointer; padding: 0;}
.my-games-page-btn.active { background: var(--gradiant-blue); color: var(--white); border-color: transparent;}
.my-games-page-btn:disabled { opacity: .4; cursor: default; pointer-events: none;}

.profile-card { background: var(--bg-white); border: var(--stroke-primary); border-radius: var(--border-radius);
box-shadow: 0 24px 60px -30px rgba(13, 175, 175, .35); padding: 40px; max-width: 1000px; width: 100%;
display: flex; flex-direction: column; align-items: center; gap: var(--gap-20); position: relative;}

.profile-avatar-wrap { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;}
.profile-avatar-wrap .circle-blur { width: 110px; height: 110px;}
.profile-avatar { position: relative; width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
border: 4px solid var(--bg-white); box-shadow: 0 10px 24px -10px rgba(13, 175, 175, .5); z-index: 2;}

.profile-name { font-size: var(--font-size-24); font-weight: var(--font-900); color: var(--font-colour); margin: 0;}

.profile-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-20); width: 100%;}
.profile-info-item { border: var(--stroke-primary); border-radius: 16px; padding: 16px 20px; background: var(--bg-white);
display: flex; gap: var(--gap-20); align-items: center; text-align: right;}
.profile-info-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.profile-info-label { font-size: var(--font-size-16); color: var(--font-secondary); font-weight: var(--font-600);}
.profile-info-icon { flex-shrink: 0;}
.profile-info-icon img{max-width: 60px;}
.profile-info-value { font-size: var(--font-size-18); color: var(--font-colour);
text-align: right; word-break: break-word;}
.profile-info-content{display: flex; flex-direction: column; gap: var(--gap-10);}

.profile-games-banner { width: 100%; border-radius: var(--border-radius); background: var(--gradiant-blue);
display: flex; align-items: center; gap: var(--gap-20); padding: 0 24px;}
.profile-games-banner span { color: var(--white); font-size: var(--font-size-28); font-weight: var(--font-900);}
.profile-games-banner img { width: 80px; height: 80px; object-fit: contain;}

.profile-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-20); width: 100%;}
.profile-edit-btn, .profile-logout-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 20px;}
.profile-flex{display: flex; justify-content: center;}
.baloo-font{direction: ltr; font-family: "Baloo 2", sans-serif;}
.btn-primary-outline { height: 50px; border-radius: 30px; min-width: 120px; background: var(--bg-white);
border: var(--border-primary); color: var(--primary); font-size: var(--font-size-20); font-weight: var(--font-600);}

.profile-avatar-edit-btn { position: absolute; bottom: 0; right: 0; width: 40px; height: 40px; border-radius: 50%;
background: var(--gradiant-blue); color: var(--white); display: flex; align-items: center; justify-content: center; z-index: 3; cursor: pointer;}
.profile-edit-form { width: 100%;}
.team-row .form-group { flex: 1; min-width: 0;}
.profile-avatar-edit-btn img{width: 24px; height: 24px;}
.profile-edit-form .login-phone-row{margin: 0px;}

.profile-select-trigger { display: flex; align-items: center; justify-content: space-between; cursor: pointer;}
.profile-select-trigger i { color: var(--font-secondary); font-size: 14px;}

#subjectPicker .curriculum-subjects { display: flex; flex-wrap: wrap; gap: 16px;}
#subjectPicker .subject-select { min-width: 120px; padding: 20px; font-size: var(--font-size-18);}
#subjectPicker.basic-modal .btn-primary, #gradePicker.basic-modal .btn-primary{ width: inherit;}
.basic-modal .curriculum-grades, .basic-modal .curriculum-subjects{justify-content: center;}
.dgrid{ gap: var(--gap-20); flex-wrap: wrap; width: 100%;  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));}
.start-subject-panel{flex: 1; display: flex; flex-direction: column; gap: 24px;}
.start-dflex{display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; width: 100%; 
max-width: 800px; margin: 0 auto;}

.app-toast { position: fixed; top: 30px; left: 50%; z-index: 99999; display: flex; align-items: center; gap: 12px;
padding: 16px 24px; border-radius: var(--border-radius); background: var(--bg-white); box-shadow: 0 24px 60px -30px rgba(13, 175, 175, .35);
font-weight: var(--font-900); font-size: var(--font-size-18); opacity: 0; pointer-events: none;
transform: translate(-50%, -16px); transition: opacity .25s ease, transform .25s ease;}
.app-toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0);}
.app-toast-icon { font-size: 20px;}
.app-toast.success { background: var(--green-opacity-11); color: var(--green);}
.hero-section { padding: 30px 0px;}
.hero-grid { display: flex; align-items: center; flex-direction: column; text-align: center;}
.hero-content { flex: 1; display: flex; flex-direction: column; gap: var(--gap-20); align-items: center;}
.hero-title { color: var(--primary); margin: 0;}
.hero-title span { display: block;}
.hero-title-accent { color: var(--primary) !important;}
.type-line { display: inline-block; min-height: 1.2em;}
.type-line.typing::after { content: ''; display: inline-block; width: 3px; height: .9em; margin-inline-start: 4px;
vertical-align: -0.1em; background: currentColor; animation: hero-caret-blink .8s step-end infinite;}
@keyframes hero-caret-blink { 0%, 100% { opacity: 1;} 50% { opacity: 0;} }
@media (prefers-reduced-motion: reduce) {
   .type-line.typing::after { animation: none; opacity: 0;}
}
.hero-subtitle { font-size: var(--font-size-24); color: var(--font-colour); line-height: 1.7; max-width: 560px;}
.hero-actions { margin: 0 auto;}
.hero-cta { padding: 0 60px; font-size: var(--font-size-24); height: 60px;}
.hero-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(13, 175, 175, .55);}
.hero-trust-note { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-20);  padding: 12px 40px; font-size: var(--font-size-20); 
color: var(--font-secondary); background: var(--bg-white); border: var(--stroke-primary); border-radius: 12px;}
.hero-trust-note li { display: flex; align-items: center; gap: 8px;}
.hero-trust-note li i { color: var(--secondary); font-size: 13px;}
.hero-illustration { position: relative; flex: 1; text-align: center;}
.hero-illustration img { width: 100%; margin: 0 auto; position: relative; z-index: 1;}
.hero-shape { position: absolute; border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%; z-index: 0; animation: hero-shape-float 6s ease-in-out infinite;}
.hero-shape-1 { width: 320px; height: 320px; top: 10%; right: 0%; background: var(--primary-opacity-11);}
.hero-shape-2 { width: 220px; height: 220px; bottom: 20%; left: 0%; background: var(--shape-secondary); animation-delay: -2s;}
.hero-shape-3 { width: 150px; height: 150px; top: -2%; left: 20%; background: var(--secondary-opacity-11); animation-delay: -4s;}
@keyframes hero-shape-float { 0%, 100% { transform: translateY(0);} 50% { transform: translateY(-16px);} }

.reveal-up { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease;}
.reveal-up.in-view { opacity: 1; transform: translateY(0);}
.hero-illustration.reveal-up { transition-delay: .15s;}

.scroll-top { position: fixed; bottom: 26px; left: 26px; width: 46px; height: 46px; border-radius: 50%; background: var(--gradiant-blue);
display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 999; box-shadow: 0 14px 30px -14px rgba(13, 175, 175, .55);
opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease, visibility .3s;}
.scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0);}
.scroll-top:hover { transform: translateY(-4px);}
.app-toast.error { background: var(--red-opacity-11); color: var(--red);}
.start-grade-panel{flex: 1; display: flex; flex-direction: column; gap: 24px;}
.trust-bar{display: flex; align-items: center; gap: var(--gap-20); justify-content: center; padding: 20px 0px; flex-wrap: wrap;}
.trustbar-tile{display: flex; gap: var(--gap-10); align-items: center;}
.divider{width: 1px; height: 40px; border: var(--stroke-primary);}
.testing-platform-box{display: flex; justify-content: center; text-align: center;}
.testing-platform-bg{position: relative; border-radius: 12px; border: 1px solid rgba(255,255,255,.35);
background: var(--gradiant-blue); color: var(--white); padding: 20px; width: 100%; max-width: 900px;}
.stats-highlight-bar{display: flex; align-items: center; justify-content: center; gap: var(--gap-20);
background: var(--bg-white); border: var(--stroke-primary); border-radius: var(--border-radius); padding: var(--pad-20) 30px; margin-top: 20px;}
.stats-tile{display: flex; justify-content: center; align-items: center; gap: var(--gap-20); text-align: center; flex: 1;}
.stats-tile-value{display: flex; align-items: center; gap: 8px; font-size: var(--font-size-32); font-weight: var(--font-900); color: var(--font-colour);
flex-direction: column;}
.stats-tile-value img{width: 22px; height: 22px;}
.stats-tile-label{font-size: var(--font-size-24); color: var(--font-secondary); margin: 0; font-weight: 100;}
.stats-divider{width: 1px; align-self: stretch; background: var(--brd-colour2);}
.stats-tile-trust{ font-size: var(--font-size-36); font-weight: var(--font-900); color: var(--primary);}
.stats-tile-trust img{width: 22px; height: 22px;}

.why-choose-section{padding: 30px 0;}
.why-choose-heading{display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 40px;}
.why-choose-title{font-size: var(--font-size-42); font-weight: var(--font-900); color: var(--font-colour); margin: 0;}
.why-choose-title span{color: var(--primary);}
.why-choose-shapes{display: flex; align-items: center; justify-content: center; gap: 14px;}
.why-shape{display: inline-block;}

.why-shape-circle{width: 14px; height: 14px; background: var(--primary); border-radius: 50%;
animation: why-shape-float-fade 3s ease-in-out infinite;}

.why-shape-triangle{width: 16px; height: 16px; background: var(--secondary);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
animation: why-triangle-spin 3s linear infinite;}
@keyframes why-triangle-spin{ from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.why-shape-square{width: 14px; height: 14px; background: var(--orange); border-radius: 3px;
animation: why-shape-float-fade 3s ease-in-out infinite;}

@keyframes why-shape-float-fade{
   0%, 100% { transform: translateY(0); opacity: .7; }
   50% { transform: translateY(-4px); opacity: 1; }
}

.why-choose-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-20);}
.why-choose-card{background: var(--bg-white); border: var(--stroke-primary); border-radius: var(--border-radius);
padding: var(--pad-20); display: flex; gap: var(--gap-20); align-items: center; text-align: right;}
.why-choose-card img{width: 100px; height: 100px;}
.why-choose-card h5{font-size: var(--font-size-24); font-weight: var(--font-900); color: var(--font-colour); margin: 0;}
.why-choose-card p{font-size: var(--font-size-18); color: var(--font-secondary); line-height: 1.7; margin: 0;}
.why-choose-content{display: flex; flex-direction: column; gap: var(--gap-10);}

.how-it-works-section{padding: 30px 0 60px; position: relative;}
.how-it-works-grid{display: flex; align-items: center; gap: 50px;}
.how-it-works-media{flex: 1; text-align: center; position: relative;}
.how-it-works-illustration-img{width: 100%; max-width: 480px; margin: 0 auto;}

.how-it-works-star{position: absolute; max-width: none; height: auto; animation: how-it-works-star-pulse 2s ease-in-out infinite;}
.how-it-works-star-1{top: 5%; left: 31%; width: 60px; animation-delay: 0s;}
.how-it-works-star-2{top: 20%; left: 13%; width: 40px; animation-delay: .4s;}
.how-it-works-star-3{top: 25%; right: 12%; width: 40px; animation-delay: .8s;}

@keyframes how-it-works-star-pulse{
   0%, 100% { transform: scale(1); opacity: .85; }
   50% { transform: scale(1.25); opacity: 1; }
}
.how-it-works-steps{flex: 1; display: flex; flex-direction: column; gap: 40px; position: relative;}
.how-it-works-steps::before{content: ''; position: absolute; top: 20px; bottom: 20px; right: 30px;
width: 2px; background: var(--brd-colour2); z-index: 0;}

.step-item{display: flex; align-items: flex-start; gap: 25px;}
.step-number{width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
color: var(--white); font-weight: var(--font-900); font-size: var(--font-size-24); background: var(--font-secondary);
position: relative; z-index: 1; animation: step-number-activate 12.5s ease-in-out infinite;}

.step-item:nth-child(1) .step-number{animation-delay: 0s;}
.step-item:nth-child(2) .step-number{animation-delay: 2.5s;}
.step-item:nth-child(3) .step-number{animation-delay: 5s;}
.step-item:nth-child(4) .step-number{animation-delay: 7.5s;}
.step-item:nth-child(5) .step-number{animation-delay: 10s;}

@keyframes step-number-activate{
   0% { background: var(--font-secondary); transform: scale(1); }
   2% { background: var(--gradiant-blue); transform: scale(1.12); }
   18% { background: var(--gradiant-blue); transform: scale(1.12); }
   20% { background: var(--font-secondary); transform: scale(1); }
   100% { background: var(--font-secondary); transform: scale(1); }
}

.step-content h5{font-size: var(--font-size-24); font-weight: var(--font-900); color: var(--font-colour); margin-bottom: 10px;}
.step-content p{font-size: var(--font-size-18); color: var(--font-secondary); margin: 0;}
.border-beam{position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;}
.border-beam rect{fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round;
stroke-dasharray: 18 82; filter: drop-shadow(0 0 4px var(--secondary)) drop-shadow(0 0 7px var(--primary));
animation: border-beam-travel 3.5s linear infinite;}
@keyframes border-beam-travel { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) {
   .border-beam rect { animation: none; }
}
.hud1{position: absolute; right: 0; max-width: 1200px; top: 20%; width: 100%;}
.hud2{position: absolute; left: 0; max-width: 600px; bottom: 0; width: 100%;}
.teacher-writing{position: absolute; max-width: 700px; top: 20%; right: 5%; width: 100%;}

.metrics-section{padding: 30px 0px;}
.metrics-card{position: relative; border-radius: 20px; padding: 40px; overflow: hidden; 
max-width: 900px; margin: 0 auto; border: 4px solid transparent;
background:
   linear-gradient(var(--bg-white), var(--bg-white)) padding-box,
   linear-gradient(90deg, #14B8A6, #06B6D4, #3B82F6, #06B6D4, #14B8A6) border-box;
background-size: 100% 100%, 300% 100%; animation: metrics-border-flow 6s linear infinite;}

@keyframes metrics-border-flow{
   to { background-position: 0 0, -300% 0; }
}
.metrics-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-20);}
.metrics-tile{display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;}
.metrics-tile img{width: 120px; height: 120px;}
.metrics-number{font-size: var(--font-size-36); font-weight: var(--font-900); color: var(--font-colour);}
.metrics-label{font-size: var(--font-size-18); color: var(--font-secondary); margin: 0;}

.platform-preview-section{padding: 30px 0px;}
.platform-slide img{width: 100%; border-radius: 12px; cursor: zoom-in;}
.platform-carousel .owl-nav{display: none !important;}
.platform-slide-caption{ padding: 14px 10px 4px;}
.platform-slide-caption h5{font-size: var(--font-size-20); font-weight: var(--font-600); color: var(--font-colour); margin: 0 0 4px;}
.platform-slide-caption p{font-size: var(--font-size-18); color: var(--font-secondary); margin: 0; line-height: 1.5;}

/* Platform screenshot gallery popup */
.platform-gallery{position: fixed; inset: 0; z-index: 9999; background: var(--bg-white-70);  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px; text-align: center;}
.platform-gallery.is-open{display: flex;}
body.platform-gallery-open{overflow: hidden;}
.platform-gallery #platformGalleryImage{max-width: 90vw; max-height: 70vh; width: auto; object-fit: contain; border-radius: 12px;}
.platform-gallery #platformGalleryTitle{ font-size: var(--font-size-20); font-weight: var(--font-600); margin: 6px 0 0;}
.platform-gallery #platformGalleryDesc{color: var(--font-secondary); font-size: var(--font-size-16); margin: 0; max-width: 560px;}
.platform-gallery-close{position: absolute; top: 24px; inset-inline-end: 24px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--primary); color: var(--white); font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;}
.platform-gallery-close:hover{filter: brightness(0.9);}
.platform-gallery-nav{position: absolute; top: 45%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--font-secondary); color: var(--white); font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; backdrop-filter: blur(4px);}
.platform-gallery-nav:hover{background: var(--primary);}
.platform-gallery-prev{inset-inline-end: 24px;}
.platform-gallery-next{inset-inline-start: 24px;}
.platform-gallery-count{position: absolute; bottom: 24px; inset-inline-start: 0; inset-inline-end: 0; text-align: center; color: rgba(255,255,255,0.7); font-size: var(--font-size-16);}
@media (max-width: 575px){
   .platform-gallery #platformGalleryDesc{max-width: 90vw;}
}

/* Platform first-quiz CTA section */
.platform-cta-section{padding: 30px 0px; position: relative;}
.platform-cta-card{display: flex; align-items: center; justify-content: space-between; gap: var(--gap-20);
padding: var(--pad-20) 50px;}
.platform-cta-content{flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-20); text-align: right;}
.platform-cta-content h3{font-size: var(--font-size-32); font-weight: var(--font-900); color: var(--font-colour); margin: 0;}
.platform-cta-list{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-20);}
.platform-cta-list li{display: flex; align-items: center; gap: 10px; font-size: var(--font-size-18); color: var(--font-colour);}
.platform-cta-list li img{width: 22px; height: 22px;}
.platform-cta-media{flex: 1; position: relative; display: flex; align-items: center; justify-content: center;}
.platform-cta-media img{width: 100%; max-width: 400px; position: relative; z-index: 1; animation: hero-shape-float 6s ease-in-out infinite;}
.hud3{position: absolute; left: 0px; top: -100px; max-width: 900px; width: 100%;}
.platform-cta-content .btn-primary:hover{transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(13, 175, 175, .55);}
.school-benefits-content .btn-primary:hover{transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(13, 175, 175, .55);}
.winTrophy{position: absolute; max-width: 170px; left: 10%;}

/* School benefits section */
.school-benefits-section{padding: 30px 0px;}
.school-benefits-card{display: flex; align-items: center; justify-content: space-between; gap: var(--gap-20);}
.school-benefits-content{flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 30px; text-align: right;}
.school-benefits-media{flex: 1; display: flex; align-items: center; justify-content: center; position: relative;}
.school-benefits-media img{width: 100%; max-width: 500px; position: relative; z-index: 1; animation: hero-shape-float 6s ease-in-out infinite;}
.school-benefits-list{list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;}
.school-benefits-item{display: flex; align-items: center; gap: 10px; font-size: var(--font-size-18); color: var(--font-colour);
border: var(--stroke-primary); border-radius: 0; padding: var(--pad-20);}
.school-benefits-icon{width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;}

/* Testimonials section */
.testimonial-section{padding: 30px 0;}
.testimonial-heading{text-align: center; display: flex; flex-direction: column; gap: 8px; margin-bottom: 30px;}
.testimonial-heading h2{font-size: var(--font-size-32); font-weight: var(--font-900); color: var(--font-colour); margin: 0;}
.testimonial-star{display: inline-block; animation: how-it-works-star-pulse 2s ease-in-out infinite;}
.testimonial-heading p{font-size: var(--font-size-18); color: var(--font-secondary); margin: 0;}
.testimonial-carousel{position: relative; padding: 0 70px;}
.testimonial-carousel .owl-nav{position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none;}
.testimonial-carousel .owl-nav button{pointer-events: auto;}
.testimonial-carousel .owl-nav .disabled{opacity: .35; cursor: default; pointer-events: none;}
.testimonial-card{background: var(--bg-white); border: var(--stroke-primary); border-radius: var(--border-radius); padding: 30px 40px; 
height: 100%; display: flex; flex-direction: column; gap: 14px; position: relative; min-height: 334px;}
.testimonial-stars{color: var(--orange); font-size: 14px; display: flex; gap: 4px;}
.testimonial-card h4{font-size: var(--font-size-20); font-weight: var(--font-900); color: var(--font-colour); margin: 0;}
.testimonial-card > p{font-size: var(--font-size-18); color: var(--font-secondary); line-height: 1.7; margin: 0; flex: 1;}
.testimonial-author{display: flex; align-items: center; gap: 15px;}
.testimonial-avatar{width: 70px; height: 70px; border-radius: 50%; background: var(--primary-opacity-11); display: flex; align-items: center; justify-content: center; 
flex-shrink: 0; overflow: hidden; border: var(--stroke-primary);}
.testimonial-avatar img{object-fit: contain;}
.testimonial-author h6{font-size: var(--font-size-18); font-weight: var(--font-900); color: var(--font-colour); margin: 0;}
.testimonial-author span{font-size: var(--font-size-16); color: var(--font-secondary);}
.testimonial-author-name{display: flex; flex-direction: column; gap: 4px;}
.testimonial-author p{font-size: var(--font-size-16);}
.testimonial-quote{position: absolute; left:0px; top: 0px;}

/* FAQ accordion section */
.faq-section{padding: 30px 0px; position: relative;}
.faq-accordion{display: flex; flex-direction: column; gap: var(--gap-20); max-width: 900px; margin: 0 auto;}
.faq-item{background: var(--bg-white); border: var(--stroke-primary); border-radius: var(--border-radius);}
.faq-toggle{width: 100%; display: flex; align-items: center; gap: 16px; background: none; border: 0; padding: var(--pad-20); text-align: right; cursor: pointer; justify-content: space-between;}
.faq-icon{width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--secondary); transition: transform .3s ease;}
.faq-toggle[aria-expanded="true"] .faq-icon{transform: rotate(180deg); }
.faq-question{font-size: var(--font-size-20); font-weight: var(--font-600); color: var(--font-colour);}
.faq-answer-wrap{border-top: var(--stroke-primary);}
.faq-answer{margin: 0; padding: var(--pad-20) var(--pad-20) var(--pad-20) calc(32px + 16px + var(--pad-20)); font-size: var(--font-size-18); color: var(--font-secondary); line-height: 1.7;}
.hud4{position: absolute; right: 0px; max-width: 1200px; top: -20%; width: 100%;}
.login-footer-brand{display: flex; flex-direction: column; gap: var(--gap-20); align-items: end;}
.login-footer-brand p{font-size: var(--font-size-18);}

/* Web-only: mockup uses non-interactive demo divs for these; the real app
   needs real clickable elements, so these reset button chrome to match. */
.award-btn { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; display: block;}
.game-play-teams .award-btn { width: 100%;}
/* .no-winner-card is itself a real bordered card in the design (background,
   border, padding, flex row) — .award-btn's reset above (same specificity,
   later in file) strips all of that when the two classes combine on the same
   <button>. Re-apply the card look with one extra selector weight so it wins
   regardless of source order. */
button.no-winner-card { background: var(--bg-white); border: var(--stroke-primary); border-radius: var(--border-radius);
padding: 10px; display: flex; align-items: center; gap: 10px; text-align: center;}
/* Resend OTP is an <a> in the mockup but a POST <button> here — strip the
   native button chrome so it renders as the same underlined inline link. */
.resend-link { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; text-decoration: underline;}
.resend-link:disabled { opacity: .5; cursor: not-allowed; text-decoration: none;}