:root{color-scheme:light;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f0f7ff;color:#102a43}body{margin:0;min-height:100vh;background:radial-gradient(circle at top left,#e5f4ff,#c2e5ff 35%,#eff8ff)}button,input{font:inherit}.app-shell{position:relative;padding:2rem;max-width:960px;margin:0 auto}.hero{text-align:center;margin-bottom:1.5rem}.hero h1{margin:0;font-size:clamp(2.5rem,6vw,4rem);letter-spacing:-.06em}.hero p{margin:.5rem auto 0;max-width:36rem;color:#334e68}.card{background:#fffffff2;border:1px solid rgba(16,42,67,.08);border-radius:1.25rem;box-shadow:0 22px 60px #102a4314;padding:1.75rem;margin-bottom:1.75rem}.primary,.secondary,.choice{border:none;border-radius:999px;padding:.95rem 1.25rem;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.primary{background:#0e6cff;color:#fff;box-shadow:0 16px 32px #0e6cff47}.secondary{background:#fff6d9;color:#1f4e88;box-shadow:0 10px 20px #ffbe462e}.primary:hover,.secondary:hover,.choice:hover{transform:translateY(-2px)}.quiz-card{position:relative}.quiz-card h2,.card h2{margin-top:0}.input-row{display:grid;gap:.5rem;margin-bottom:1rem}.input-row input{padding:.95rem 1rem;border-radius:.85rem;border:1px solid rgba(16,42,67,.12);width:100%}.choices-grid{display:grid;gap:.9rem;margin:1rem 0 1.25rem}.choice{background:linear-gradient(135deg,#fff6c8,#fef1d3);text-align:left;color:#1f3f6f;box-shadow:0 10px 20px #7d77ff14}.choice.selected{background:linear-gradient(135deg,#cfe8ff,#dceeff);box-shadow:inset 0 0 0 1px #0e6cff}.status-message{background:#f6fff6;color:#0f5f34;padding:.95rem 1rem;border-radius:.85rem;margin-top:1rem;border:1px solid rgba(56,161,105,.16)}.feedback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;padding:1.25rem 2rem;border-radius:1.5rem;color:#fff;font-size:1.4rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 24px 64px #0f172a40;animation:feedback-pop .9s ease forwards;pointer-events:none;min-width:14rem;text-align:center}.feedback.correct{background:linear-gradient(135deg,#34d399,#10b981)}.feedback.failed{background:linear-gradient(135deg,#fb7185,#ef4444)}@keyframes feedback-pop{0%{opacity:0;transform:translate(-50%) scale(.6)}20%{opacity:1;transform:translate(-50%) scale(1.1)}60%{opacity:1;transform:translate(-50%) scale(1.05)}to{opacity:0;transform:translate(-50%) scale(.8)}}.quiz-header{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}.leaderboard-header-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.leaderboard-sort-select{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:#0f4c75}.leaderboard-sort-select select{padding:.5rem .75rem;border-radius:.85rem;border:1px solid rgba(16,42,67,.16);background:#fff;color:#102a43}.leaderboard-list{display:grid;gap:1rem}.leaderboard-card-item{background:#fffffff2;border-radius:1.25rem;box-shadow:0 18px 40px #102a4314;padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}.leaderboard-card-primary{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.leaderboard-rank-name{display:flex;align-items:center;gap:.85rem;min-width:0;flex-wrap:wrap}.leaderboard-rank{font-size:1.05rem;font-weight:900;color:#0e6cff}.leaderboard-name{font-size:1.1rem;font-weight:700;color:#102a43}.leaderboard-main-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem;min-width:0}.leaderboard-name{font-size:1.15rem;font-weight:700;color:#102a43}.leaderboard-score{font-size:1rem;font-weight:700;color:#0e6cff}.leaderboard-card-secondary{display:flex;flex-wrap:wrap;gap:1rem;color:#334e68;font-size:.95rem}.leaderboard-card-secondary span{background:#1f7aec0f;padding:.55rem .85rem;border-radius:999px}.leaderboard-grid{display:grid;grid-template-columns:auto minmax(12rem,1fr) auto auto auto auto;gap:.75rem 1.5rem;align-items:center;width:100%}.leaderboard-header,.leaderboard-cell{padding:.85rem 1rem}.leaderboard-header{font-weight:700;text-transform:uppercase;color:#0f4c75;border-bottom:2px solid rgba(14,108,255,.16)}.leaderboard-header.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.leaderboard-header.sortable:hover{color:#0b3d6e}.leaderboard-header.active{color:#0e6cff}.leaderboard-row{display:contents}.leaderboard-cell{background:#ffffffe6;border-radius:.85rem}.leaderboard-cell.rank{text-align:left;min-width:4rem}.leaderboard-cell.name{min-width:12rem}.leaderboard-cell.points,.leaderboard-cell.time,.leaderboard-cell.attempts,.leaderboard-cell.total-time{text-align:right}.leaderboard-card p{margin:0}
