@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500;700;800;900&display=swap");

* { box-sizing: border-box; }

html { min-height: 100%; }

body { min-height: 100vh; margin: 0; color: #fff; font-family: "Noto Sans", Arial, sans-serif; font-size: 16px; font-weight: 800; background: #02030b url("../img/bg.jpg") top center / cover no-repeat; }

button { padding: 0; border: 0; color: inherit; font: inherit; background: transparent; cursor: pointer; }

img { display: block; max-width: 100%; }

.page-shell { width: min(100%, 1365px); min-height: 100vh; margin: 0 auto; padding: 0 18px 34px; text-align: center; }

.hero-section { position: relative; z-index: 2; }

.hero-title { width: min(100%, 1080px); margin: 0 auto; }

.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0, 0, 28px); width: min(68%, 760px); margin: auto; }

.tab-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 92px); align-items: center; width: min(73%, 820px); margin: auto; }

.event-tab { transition: filter .2s ease, transform .2s ease; }

.event-tab:not(.active) { filter: brightness(.45) saturate(.8); }

.event-tab:hover, .event-tab.active { filter: brightness(1.05); transform: translateY(-2px); }

.token-bar { position: relative; width: min(34%, 270px); margin: clamp(4px, .9vw, 10px) auto clamp(8px, 1vw, 14px); }

.token-bar span { position: absolute; top: 46%; right: 13%; transform: translateY(-50%); color: #713000; font-size: clamp(22px, 3.1vw, 42px); font-weight: 900; line-height: 1; }

.event-panel { display: none; }

.event-panel.active { display: block; }

.event-panel[data-panel="best"].active { margin-top: 0; }

.match-list { display: grid; gap: clamp(14px, 3vw, 36px); width: min(72%, 760px); margin: 0 auto;  max-height: 60vh; overflow-y: auto; overflow-x: hidden;

              /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.4) transparent;
}


/* Chrome / Edge / Safari */
.match-list::-webkit-scrollbar {
    width: 8px;
}

.match-list::-webkit-scrollbar-track {
    background: transparent;
}

.match-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.35);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.match-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.55);
}

.match-card { position: relative; padding: clamp(44px, 6vw, 78px) clamp(34px, 5vw, 74px) clamp(12px, 2vw, 26px); background: url("../img/p_base.png") center top / 100% auto no-repeat; }

.match-date { position: absolute; top: clamp(7px, 1.4vw, 14px); left: 50%; min-width: 260px; padding: 10px 32px; border: 3px solid #00e77a; border-radius: 999px; background: #203327; box-shadow: 0 0 18px rgba(0, 255, 143, .65); transform: translateX(-50%); font-size: clamp(18px, 2.3vw, 30px); line-height: 1; }

.match-date span { padding: 0 14px; }

.match-inner { display: grid; grid-template-columns: 1fr minmax(110px, .8fr) 1fr; align-items: center; gap: clamp(12px, 3vw, 36px); }

.team-card { position: relative; display: grid; justify-items: center; gap: 8px; padding: clamp(8px, 1.8vw, 14px); border: 3px solid transparent; border-radius: 8px; background: rgba(1, 7, 10, .72); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }

.team-card img { width: min(100%, 160px); border-radius: 50%; }

.team-card span { font-size: clamp(14px, 1.7vw, 19px); font-weight: 700; }

.team-card:hover, .team-card.selected { border-color: #ffd51c; box-shadow: 0 0 20px rgba(255, 219, 40, .8); transform: translateY(-2px); }

.versus { display: grid; justify-items: center; align-self: end; padding-bottom: clamp(2px, 1vw, 14px); color: #fff; font-style: italic; text-shadow: 0 2px 4px #000; }

.versus img { width: min(82%, 142px); margin-bottom: 4px; }

.versus p { margin: 0; font-size: clamp(12px, 1.35vw, 16px); line-height: 1.25; }

.versus b, .quiz-reward b { color: #fff24c; }

.submit-btn { display: block; width: min(42%, 244px); margin: clamp(2px, 1vw, 8px) auto 0; transition: filter .2s ease, transform .2s ease; }

.submit-btn:hover { filter: brightness(1.18) drop-shadow(0 0 16px rgba(0, 255, 147, .8)); transform: scale(1.03); }

.quiz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2px, .7vw, 8px) clamp(4px, .7vw, 9px); width: min(100%, 1160px); margin: 0 auto; }

.quiz-card { position: relative; aspect-ratio: 682 / 551; min-height: 0; padding: 0; background: url("../img/q_base.png") center top / 100% 100% no-repeat; }

.quiz-card::before { content: ""; position: absolute; inset: 6.5% 2.2% 41%; z-index: 1; border-radius: 6px; background: linear-gradient(180deg, rgba(255, 210, 54, .38), rgba(179, 124, 0, .34)); pointer-events: none; }

.quiz-icon { position: absolute; top: -2%; left: 2%; z-index: 8; width: 14%; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .55)); }

.quiz-card h2 { position: absolute; top: 8.4%; left: 9.7%; right: 4%; z-index: 5; display: flex; align-items: center; justify-content: center; height: 9.8%; margin: 0 0 12px; padding: 0 22px 0 46px; border: 3px solid #ffd400; border-radius: 999px; overflow: hidden; color: #fff; background: linear-gradient(180deg, rgb(129, 70, 9), rgba(3, 3, 3, .98)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 0 9px rgba(255, 204, 0, .35); font-size: clamp(14px, 1.18vw, 18px); font-weight: 900; line-height: 1.1; white-space: nowrap; text-shadow: 0 3px 5px #000; }

.answer-grid { position: absolute; top: 22%; left: 4.9%; right: 5%; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5%; height: 36%; }

.answer-card { position: relative; display: grid; min-width: 0; min-height: 0; justify-items: center; grid-template-rows: 24% 1fr; padding: 6% 7% 15%; border: 2px solid rgba(255, 255, 255, .22); border-radius: 7px; background: linear-gradient(180deg, rgba(88, 88, 88, .94), rgba(46, 46, 46, .94)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 5px 9px rgba(0, 0, 0, .55); }

.answer-card span { width: 100%; min-height: 0; overflow: hidden; font-size: clamp(9px, 1vw, 14px); line-height: 1.15; text-shadow: 0 2px 3px #000; }

.answer-card > img:not(.letter):not(.result-icon) { align-self: start; width: min(82%, 88px); margin-top: 3px; border: 3px solid #fff; border-radius: 50%; filter: grayscale(1) brightness(1.08); }

.answer-card .letter { position: absolute; left: 50%; bottom: -8%; width: min(45%, 50px); transform: translateX(-50%); }

.answer-card.correct { border-color: #00fa75; background: linear-gradient(rgba(0, 235, 79, .9), rgba(0, 174, 55, .86)), url("../img/q_box.png") center / 100% 100% no-repeat; box-shadow: 0 0 15px rgba(0, 255, 122, .8), inset 0 1px 0 rgba(255, 255, 255, .24); }

.answer-card.selected { border-color: #0f64ff; background: linear-gradient(rgba(21, 40, 255, .92), rgba(0, 98, 255, .9)), url("../img/q_box.png") center / 100% 100% no-repeat; box-shadow: 0 0 15px rgba(30, 120, 255, .82), inset 0 1px 0 rgba(255, 255, 255, .24); }

.answer-card:not(.selected):not(.correct):not(.wrong) .letter { filter: grayscale(1) brightness(1.22); }

.answer-card.correct > img:not(.letter):not(.result-icon), .answer-card.selected > img:not(.letter):not(.result-icon), .answer-card.wrong > img:not(.letter):not(.result-icon) { filter: grayscale(0); }

.answer-card.wrong { border-color: #ff003c; background: linear-gradient(rgba(230, 0, 25, .9), rgba(255, 0, 77, .86)), url("../img/q_box.png") center / 100% 100% no-repeat; }

.answer-card .result-icon { position: absolute; left: 50%; bottom: -13%; width: clamp(38px, 4.5vw, 55px); transform: translateX(-50%); }

.quiz-reward { position: absolute; top: 66.6%; z-index: 3; left: 50%; width: 42%; margin-top: 0; transform: translateX(-50%); color: #fff; font-size: clamp(12px, 1.35vw, 16px); font-style: italic; line-height: 1.25; text-shadow: 0 2px 4px #000; }

.quiz-card .submit-btn { position: absolute; left: 50%; bottom: 2%; z-index: 4; width: min(45%, 230px); margin: 0; transform: translateX(-50%); }

.quiz-card .submit-btn:hover { transform: translateX(-50%) scale(1.03); }

.quiz-card.is-locked .answer-card { pointer-events: none; }

.quiz-card.can-submit .answer-card { pointer-events: auto; }

.bottom-actions { display: flex; justify-content: center; gap: clamp(10px, 2.4vw, 30px); margin-top: clamp(8px, 1.5vw, 18px); }

.bottom-actions button { width: min(30%, 210px); }

body.best-active .bottom-actions .open-modal[data-modal="history"] { display: none; }

.site-modal { position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; padding: 70px 16px; overflow-y: auto; }

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

.popup-backdrop { position: fixed; inset: 0; z-index: 0; background: rgba(0, 0, 0, .78); }

.modal-card { position: relative; z-index: 2; width: min(92vw, 680px); max-height: calc(100vh - 140px); }

.modal-close { position: absolute; top: -18px; right: -12px; z-index: 3; width: 38px; height: 38px; border: 2px solid #fff; border-radius: 50%; background: #050505; font-size: 28px; line-height: 30px; }

.terms-box, .history-card { position: relative; margin: 0 auto; padding: 78px 46px 32px; border: 3px solid #00c966; border-radius: 12px; background: rgba(0, 0, 0, .88); box-shadow: 0 0 28px rgba(0, 255, 120, .35); text-align: left; }

.terms-box.gold { border-color: #ffe100; box-shadow: 0 0 28px rgba(255, 228, 0, .32); }

.modal-heading { position: absolute; top: -42px; left: 50%; width: min(76%, 430px); transform: translateX(-50%); }

.terms-box ul { margin: 0; padding-left: 24px; }

.terms-box li { margin-bottom: 8px; font-size: clamp(12px, 1.6vw, 15px); line-height: 1.45; }

.history-card { width: min(92vw, 680px); min-height: min(540px, calc(100vh - 140px)); }

.history-table-wrap { overflow-x: auto; }

.history-card table { width: 100%; min-width: 560px; border-collapse: collapse; }

.history-card th { color: #00ff63; font-size: clamp(13px, 1.8vw, 17px); padding: 12px 10px 18px; }

.history-card td { padding: 9px 10px; color: #fff; font-size: clamp(12px, 1.7vw, 16px); white-space: nowrap; }

.confirm-card { position: relative; z-index: 2; width: min(90vw, 520px); padding: 54px 38px 30px; border: 3px solid #00f082; border-radius: 12px; background: linear-gradient(180deg, rgba(0, 29, 20, .96), rgba(0, 0, 0, .96)), radial-gradient(circle at 50% 0%, rgba(0, 255, 148, .28), transparent 58%); box-shadow: 0 0 30px rgba(0, 255, 136, .45); text-align: center; }

.confirm-title { position: absolute; top: -32px; left: 50%; width: min(82%, 370px); padding: 14px 18px; border: 3px solid #00ff8c; border-radius: 999px; background: linear-gradient(180deg, #0cf286, #008d4b); box-shadow: 0 0 18px rgba(0, 255, 140, .65); transform: translateX(-50%); font-size: clamp(18px, 3vw, 28px); font-weight: 900; line-height: 1; text-shadow: 0 3px 4px #00301e; }

.confirm-card p { margin: 8px 0 24px; font-size: clamp(15px, 2vw, 20px); line-height: 1.35; text-align: center; }

.confirm-actions { display: flex; justify-content: center; gap: 16px; }

.confirm-actions button { min-width: 138px; padding: 12px 18px; border: 2px solid #fff; border-radius: 999px; color: #fff; font-weight: 900; text-shadow: 0 2px 3px #000; }

.confirm-no { background: linear-gradient(180deg, #555, #1c1c1c); }

.confirm-yes { border-color: #00ff8b !important; background: linear-gradient(180deg, #18ff96, #008f4c); box-shadow: 0 0 16px rgba(0, 255, 140, .55); }

.match-card.submitted .submit-btn {opacity: 0.4; filter: grayscale(100%); cursor: not-allowed; pointer-events: none;}

.prediction-locked .submit-btn {filter: grayscale(1);}

@media (max-width: 980px) {
    .page-shell { padding-inline: 12px; }

    .how-grid, .tab-row, .match-list { width: min(96%, 760px); }

    .quiz-grid { width: min(100%, 900px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

    .quiz-card { width: 100%; margin: 0 auto; }
}

@media (max-width: 680px) {
    body { background-attachment: scroll; }

    .page-shell { padding-inline: 8px; padding-bottom: 24px; }

    .how-grid { width: min(94%, 480px); gap: 0; margin-top: -10px; }

    .tab-row { width: min(100%, 520px); gap: 2px; margin-top: 4px; }

    .token-bar { width: min(48%, 210px); margin-top: 2px; margin-bottom: 8px; }

    .match-list { width: min(100%, 520px); }

    .match-card { padding: 58px 20px 22px; background-size: 100% 100%; border-radius: 0; overflow: visible; }

    .match-date { min-width: min(82%, 360px); padding: 8px 16px; white-space: nowrap; font-size: clamp(16px, 4.6vw, 21px); }

    .match-inner { grid-template-columns: 1fr .62fr 1fr; gap: 8px; }

    .team-card { width: 100%; margin: 0 auto; gap: 4px; padding: 9px 5px 8px; }

    .team-card img { width: min(100%, 72px); }

    .team-card span { font-size: clamp(10px, 3vw, 14px); }

    .versus { order: 0; align-self: center; padding-bottom: 0; }

    .versus img { width: min(100%, 66px); }

    .versus p { font-size: clamp(9px, 2.4vw, 12px); }

    .submit-btn { width: min(50%, 172px); margin-top: -2px; }

    .quiz-card { background-size: 100% 100%; }

    .quiz-card h2 { padding-inline: 10px; border-width: 2px; font-size: clamp(8px, 2.15vw, 13px); }

    .answer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.1%; }

    .answer-card { padding-inline: 5%; }

    .answer-card span { font-size: clamp(6px, 1.7vw, 10px); }

    .answer-card > img:not(.letter):not(.result-icon) { width: 86%; border-width: 2px; }

    .answer-card .result-icon { width: clamp(24px, 6vw, 42px); }

    .quiz-reward { font-size: clamp(8px, 2vw, 12px); }

    .bottom-actions button { width: min(46%, 180px); }

    .terms-box, .history-card { padding: 62px 20px 24px; }

    .modal-heading { top: -30px; width: min(86%, 360px); }
}


@media (max-width: 480px) {
    .match-list { max-height:40vh; }
}


@media (max-width: 420px) {
    .page-shell { padding-inline: 8px; }

    .how-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 0; }

    .tab-row { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }

    .token-bar { width: min(62%, 210px); }

    .quiz-grid { grid-template-columns: 1fr; gap: 6px; }

    .quiz-card { width: min(100%, 390px); }

    .answer-grid { gap: 1.8%; }

    .answer-card { padding-inline: 4%; }

    .answer-card span { font-size: clamp(8px, 2.8vw, 12px); }

    .quiz-card h2 { font-size: clamp(12px, 3.7vw, 16px); }

    .quiz-reward { font-size: clamp(10px, 3vw, 13px); }

    .confirm-actions { flex-direction: column; gap: 10px; }

    .confirm-actions button { width: 100%; }
}