:root { --ink:#142a3a; --muted:#617080; --cream:#fffdf9; --sand:#f7eee0; --sun:#f7af32; --orange:#df7044; --leaf:#166a58; --sky:#d8eef1; --line:#d9e2e4; --white:#fff; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:linear-gradient(145deg,#d7eff0,#f9ecd8 60%,#f3d7a2); }
button { font:inherit; } button:focus-visible,a:focus-visible { outline:3px solid #0f8ca1; outline-offset:3px; } .site-shell { min-height:100vh; display:grid; place-items:center; padding:28px 16px; }.game-card { width:min(100%,980px); overflow:hidden; border:1px solid rgba(255,255,255,.8); border-radius:30px; background:rgba(255,253,249,.97); box-shadow:0 25px 70px rgba(31,60,67,.18); }.site-footer { grid-column:1;margin:14px 0 0;color:#506675;font-size:.75rem;text-align:center; }.site-footer a { color:inherit;font-weight:700; }.screen { animation:appear .25s ease-out; }.is-hidden { display:none!important; }
.hero { height:350px; position:relative; overflow:hidden; color:#fff; }.hero img { width:100%;height:100%;object-fit:cover; }.hero-overlay { position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,30,39,.83),rgba(9,38,46,.44) 65%,rgba(9,38,46,.18)); }.hero-content { position:absolute;inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:32px clamp(24px,5vw,52px); }.hero-badges { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:auto; }.hero-badges span { padding:6px 10px;border:1px solid #ffffff66;border-radius:999px;background:#102b3299;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em; }.eyebrow { margin:0 0 7px;color:var(--orange);font-size:.75rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase; }.hero-eyebrow { color:#ffd279; }.hero h1 { margin:0;font-size:clamp(2.35rem,7vw,4.35rem);line-height:.98;letter-spacing:-.065em; }.hero p:not(.eyebrow) { max-width:620px;margin:13px 0 0;font-size:clamp(.95rem,2vw,1.08rem);line-height:1.55; }
.welcome-grid { display:grid;grid-template-columns:1.25fr .9fr;gap:22px;padding:clamp(24px,5vw,44px); }.mission h2,.points-card h2,.screen h2 { margin:0;font-size:clamp(1.5rem,4vw,2rem);letter-spacing:-.04em; }.mission > p:not(.eyebrow),.points-card > p:not(.eyebrow),.result-message,.hint { color:var(--muted);line-height:1.55; }.category-cards { display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:22px 0 0;list-style:none; }.category-cards li { padding:8px 10px;border:1px solid #d8e7e5;border-radius:11px;background:#f1f9f7;color:#275e55;font-size:.85rem;font-weight:700; }.points-card { align-self:start;padding:24px;border:1px solid #f1ddbf;border-radius:20px;background:linear-gradient(145deg,#fff9ec,#f8ebd4);box-shadow:0 10px 25px #67431613; }.points-card > p { margin:9px 0;font-size:.92rem; }.points-card strong { color:var(--orange); }.button { border:0;border-radius:12px;padding:14px 20px;font-weight:800;cursor:pointer;transition:transform .15s,box-shadow .15s; }.button:hover { transform:translateY(-2px); }.button:disabled { cursor:wait;opacity:.72;transform:none; }.button-primary { width:100%;margin-top:16px;color:#fff;background:var(--leaf);box-shadow:0 8px 14px #166a5833; }.connection-message { margin:12px 0 0;color:#9b3c32;font-size:.9rem;line-height:1.45; }
#game-screen,#result-screen { padding:clamp(24px,5vw,48px); }.stats { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-bottom:14px; }.stats div { padding:10px;border-radius:12px;background:#f5f8f8;text-align:center; }.stat-label { display:block;color:var(--muted);font-size:.7rem;font-weight:700;text-transform:uppercase; }.stats strong { font-size:1.05rem; }.progress-track { height:8px;margin-bottom:25px;overflow:hidden;border-radius:99px;background:#e5ecee; }.progress-bar { width:0;height:100%;background:linear-gradient(90deg,var(--sun),var(--orange));border-radius:inherit;transition:width .25s; }.category { display:inline-block;margin:0 0 10px;padding:5px 10px;border-radius:99px;background:#fff0ce;color:#915f14;font-size:.8rem;font-weight:800; }.question { margin-bottom:9px!important; }.hint { margin:0 0 17px;font-size:.92rem;font-style:italic; }.question-media { margin:0 0 18px;border-radius:15px;overflow:hidden;background:#edf3f3; }.question-media img { display:block;width:100%;height:190px;object-fit:cover; }.answers { display:grid;gap:10px; }.answer { display:flex;align-items:center;gap:12px;width:100%;padding:13px;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-align:left;cursor:pointer;background:#fff;transition:border-color .15s,background .15s,transform .15s; }.answer:hover:not(:disabled) { border-color:#78abb9;background:#f5fbfc;transform:translateX(3px); }.answer:disabled { cursor:default; }.answer-letter { display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:8px;color:#506675;background:#eef4f5;font-size:.8rem;font-weight:800; }.answer.is-correct { border-color:#56a27b;background:#eaf7ef; }.answer.is-correct .answer-letter { color:#fff;background:#3b9167; }.answer.is-wrong { border-color:#d66f65;background:#fff0ee; }.answer.is-wrong .answer-letter { color:#fff;background:#c85851; }.feedback { margin:18px 0 14px;padding:15px;border-left:4px solid;border-radius:8px;line-height:1.45; }.feedback p { margin:6px 0 0;font-size:.92rem; }.feedback-correct { border-color:#3b9167;background:#edf9f1; }.feedback-wrong { border-color:#c85851;background:#fff2f0; }.result-badge { display:grid;place-items:center;width:64px;height:64px;margin:0 auto 8px;border-radius:18px;background:var(--sun);color:#fff;font-size:35px;box-shadow:0 8px 18px #f5a62355; }.result-level { color:var(--orange)!important;font-size:1.2rem;font-weight:800; }.result-message { max-width:440px;margin:0 auto 24px!important; }.result-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0; }.result-stats div { padding:16px 7px;border-radius:14px;background:#f7f3e8; }.result-stats strong { display:block;color:var(--orange);font-size:1.35rem; }.result-stats span { display:block;margin-top:3px;color:var(--muted);font-size:.75rem;font-weight:700; }.screen#result-screen { text-align:center; } @keyframes appear { from { opacity:0;transform:translateY(6px); } to { opacity:1;transform:none; } }
@media (max-width:680px) { .site-shell { padding:0;place-items:stretch; }.game-card { border-radius:0;min-height:100vh; }.hero { height:410px; }.hero-content { padding:22px; }.welcome-grid { grid-template-columns:1fr;padding:25px 20px 34px; }.points-card { padding:21px; }.stats { gap:6px; }.stats div { padding:8px 3px; }.stats strong { font-size:.95rem; }.question-media img { height:165px; }.result-stats { gap:6px; } }