:root{--navy:#071d2b;--green:#0a5d46;--green2:#0c7a59;--lime:#b8d532;--yellow:#f4c928;--cream:#f7f8f2;--ink:#102531;--muted:#64747b;--white:#fff;--danger:#c7473d;--shadow:0 22px 60px rgba(2,27,25,.17)}
*{box-sizing:border-box}html{min-height:100%;background:#062d2b}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(135deg,rgba(3,40,42,.94),rgba(8,88,63,.86)),url('assets/silica-bg.png') center/cover fixed}.app-shell,.leaderboard-page{min-height:100vh;display:flex;flex-direction:column}.topbar{height:82px;padding:14px clamp(18px,4vw,56px);display:flex;align-items:center;justify-content:space-between;background:rgba(4,35,38,.78);backdrop-filter:blur(15px);border-bottom:1px solid rgba(255,255,255,.12)}.brand-logo{height:48px;max-width:250px;object-fit:contain}.event-chip,.back-link{color:#fff;border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:8px 13px;font-size:12px;font-weight:800;letter-spacing:.08em;text-decoration:none}.screen{display:none;max-width:880px;width:calc(100% - 32px);margin:auto;padding:38px 0}.screen.active{display:block;animation:fade .35s ease}@keyframes fade{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}.hero-card,.question-card,.result-card,.leaderboard-card{background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.55);border-radius:28px;box-shadow:var(--shadow)}.hero-card{padding:clamp(30px,6vw,60px);position:relative;overflow:hidden}.hero-card:before{content:"";position:absolute;inset:0 0 auto;height:7px;background:linear-gradient(90deg,var(--yellow),var(--lime),var(--green2))}.eyebrow{margin:0 0 12px;color:var(--green2);font-size:12px;font-weight:900;letter-spacing:.18em}.hero-card h1,.leaderboard-card h1{font-size:clamp(34px,6vw,58px);line-height:1.02;letter-spacing:-.04em;margin:0;max-width:740px;color:var(--navy)}.lead{font-size:clamp(17px,2.6vw,21px);line-height:1.55;color:#40545b;max-width:700px}.rules{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}.rules span{background:#eaf4e6;color:#165f45;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:800}.join-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}.join-form label{font-size:13px;font-weight:800;color:#294049}.join-form input[type=text],.join-form input:not([type]){width:100%}.join-form input{font:inherit}.join-form label:not(.consent) input{display:block;width:100%;margin-top:7px;border:1px solid #c9d5d4;border-radius:12px;padding:13px 14px;outline:none;background:#fff}.join-form label:not(.consent) input:focus{border-color:var(--green2);box-shadow:0 0 0 3px rgba(12,122,89,.12)}.consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:9px;font-weight:500!important;line-height:1.4}.consent input{margin-top:3px}.primary-button,.secondary-button{appearance:none;border:0;border-radius:14px;padding:14px 22px;font:800 15px/1 Inter,system-ui;cursor:pointer}.primary-button{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;box-shadow:0 10px 22px rgba(7,106,76,.24)}.join-form .primary-button{grid-column:1/-1}.secondary-button{background:#e9efec;color:var(--green)}.privacy-note{color:#748285;font-size:12px;margin-bottom:0}.quiz-head{display:flex;align-items:center;justify-content:space-between;color:#fff;margin-bottom:12px}.quiz-head>div:first-child{display:flex;flex-direction:column;gap:4px}.quiz-head span{font-size:14px}.quiz-head strong{font-size:18px;color:#dbe879}.timer{position:relative;width:66px;height:66px}.timer svg{width:66px;height:66px;transform:rotate(-90deg)}.timer circle{fill:none;stroke-width:4}.timer-bg{stroke:rgba(255,255,255,.2)}.timer-ring{stroke:var(--yellow);stroke-dasharray:100.53;stroke-dashoffset:0;stroke-linecap:round;transition:stroke-dashoffset .3s}.timer-ring.urgent{stroke:#ff7167}.timer b{position:absolute;inset:0;display:grid;place-items:center;font-size:20px}.progress{height:8px;background:rgba(255,255,255,.18);border-radius:999px;margin-bottom:16px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--yellow),var(--lime));transition:width .3s}.question-card{padding:clamp(24px,5vw,46px)}.question-card h2{font-size:clamp(25px,4vw,38px);line-height:1.2;margin:0 0 28px;color:var(--navy)}.answer-list{display:grid;grid-template-columns:1fr 1fr;gap:13px}.answer-button{border:1px solid #d1ddda;background:#fff;border-radius:16px;padding:14px;display:flex;gap:13px;align-items:center;text-align:left;cursor:pointer;color:var(--ink);min-height:70px;transition:.18s}.answer-button:hover:not(:disabled){border-color:var(--green2);transform:translateY(-2px);box-shadow:0 8px 18px rgba(5,61,48,.1)}.answer-button span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#eaf2ed;color:var(--green);font-weight:900;flex:0 0 auto}.answer-button b{font-size:15px;line-height:1.35}.answer-button.correct{background:#e4f5e9;border-color:#31a866}.answer-button.correct span{background:#31a866;color:#fff}.answer-button.wrong{background:#ffebe8;border-color:#d95b50}.answer-button.wrong span{background:#d95b50;color:#fff}.explanation{display:none;margin-top:20px;border-radius:14px;padding:15px 17px;line-height:1.5;font-size:14px}.explanation.show{display:block}.explanation.good{background:#e7f5e9;color:#17633c}.explanation.bad{background:#fff0e8;color:#8b3d28}.question-card>.primary-button{margin-top:18px;width:100%}.hidden{display:none!important}.score-line{text-align:right;color:#fff;padding:13px 6px;font-size:15px}.score-line strong{color:var(--yellow);font-size:22px}.result-card{text-align:center;padding:clamp(30px,6vw,58px)}.result-badge{display:inline-block;background:#e7f5e9;color:var(--green);border-radius:999px;padding:8px 15px;font-weight:900}.result-card h2{font-size:clamp(27px,5vw,42px);margin:18px 0 8px}.score-big{font-size:clamp(58px,11vw,92px);font-weight:950;letter-spacing:-.06em;color:var(--green);line-height:1}.result-card>p{color:#5a6d72}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:520px;margin:28px auto}.result-grid div{background:#f0f4f1;border-radius:14px;padding:18px 10px}.result-grid strong{display:block;font-size:24px;color:var(--navy)}.result-grid span{font-size:12px;color:var(--muted)}.sync-status{font-size:12px;color:var(--muted);margin:18px}.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.link-button{text-decoration:none;display:inline-flex;align-items:center}.leaderboard-page{padding-bottom:40px}.leaderboard-card{width:min(1120px,calc(100% - 32px));margin:36px auto;padding:clamp(26px,4vw,48px)}.leaderboard-card h1{font-size:clamp(32px,5vw,52px)}.leaderboard-status{color:var(--muted)}.podium{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin:32px 0}.podium-item{width:180px;min-height:118px;border-radius:18px 18px 8px 8px;background:#e8f2ec;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:15px;text-align:center}.podium-item.p1{order:2;min-height:160px;background:linear-gradient(160deg,#fff0a8,#f1c82b)}.podium-item.p2{order:1}.podium-item.p3{order:3}.podium-item span{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:#fff;font-weight:900}.podium-item b{margin-top:10px}.podium-item small{margin-top:5px}.leaderboard-table-wrap{overflow:auto;border:1px solid #dce4e0;border-radius:16px}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;padding:14px 16px;border-bottom:1px solid #e7ece9}th{background:var(--navy);color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.05em}tbody tr:nth-child(even){background:#f7f9f7}.leaderboard-note{font-size:12px;color:var(--muted)}footer{margin-top:auto;text-align:center;color:rgba(255,255,255,.72);font-size:12px;padding:20px}
@media(max-width:680px){.topbar{height:70px;padding:12px 16px}.brand-logo{height:38px;max-width:190px}.event-chip{font-size:10px;padding:7px 9px}.screen{width:calc(100% - 20px);padding:20px 0}.hero-card,.question-card,.result-card{border-radius:20px}.join-form,.answer-list{grid-template-columns:1fr}.question-card{padding:22px}.answer-button{min-height:62px}.podium{gap:6px}.podium-item{width:31%;padding:9px;font-size:12px}.result-grid{gap:6px}.result-grid div{padding:15px 4px}.leaderboard-card{width:calc(100% - 20px);margin:20px auto}}