.tricky-quiz-page {
    --quiz-ink: #173144;
    --quiz-muted: #526776;
    --quiz-blue: #1676c5;
    --quiz-green: #207346;
    --quiz-red: #a22532;
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 227, 138, .42), transparent 28rem),
        linear-gradient(160deg, #f8fbff 0%, #edf7ff 58%, #fff8df 100%);
    color: var(--quiz-ink);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.tricky-site-header {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px clamp(16px, 4vw, 48px);
    border-bottom: 1px solid rgba(23, 49, 68, .1);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 2px 12px rgba(27, 49, 65, .08);
}
.tricky-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #0b3a8c;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.04em;
    text-decoration: none;
}
.tricky-brand img { display: block; width: 20px; height: 20px; object-fit: contain; }
.tricky-all-games {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #c9d7e2;
    border-radius: 999px;
    background: #fff;
    color: var(--quiz-ink);
    font-weight: 700;
    text-decoration: none;
}
.tricky-all-games:hover { background: #edf7ff; }

.tricky-quiz-main {
    width: min(100% - 32px, 1240px);
    flex: 1 0 auto;
    margin: 0 auto;
    padding: clamp(24px, 5vh, 52px) 0 40px;
}
.tricky-intro {
    max-width: 700px;
    margin: 0 auto;
    padding: clamp(26px, 5vw, 48px);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 28px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 18px 50px rgba(44, 75, 96, .14);
    text-align: center;
}
.tricky-eyebrow,
.tricky-card-eyebrow {
    margin: 0 0 10px;
    color: #ae6315;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.tricky-intro h1 {
    margin: 0;
    color: #173144;
    font-size: clamp(2.2rem, 7vw, 4rem);
    font-weight: 850;
    letter-spacing: -.055em;
    line-height: 1.02;
}
.tricky-intro-copy {
    margin: 16px 0 8px;
    font-size: clamp(1.05rem, 2.4vw, 1.28rem);
    font-weight: 700;
}
.tricky-instructions {
    max-width: 560px;
    margin: 0 auto 24px;
    color: var(--quiz-muted);
    line-height: 1.6;
}
.tricky-primary-button {
    min-width: 190px;
    min-height: 54px;
    padding: 12px 24px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #f57a28, #e7472e);
    box-shadow: 0 8px 18px rgba(201, 70, 38, .25);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.tricky-primary-button:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 11px 22px rgba(201, 70, 38, .3);
    filter: brightness(1.04);
}
.tricky-primary-button:focus-visible,
.tricky-answer:focus-visible,
.tricky-all-games:focus-visible {
    outline: 3px solid #153f7a;
    outline-offset: 3px;
}
.tricky-primary-button:disabled { cursor: wait; opacity: .75; }
.tricky-road-status { min-height: 1.2em; margin: 14px 0 0; color: var(--quiz-muted); font-size: .88rem; }

.tricky-game-layout {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: start;
    gap: clamp(22px, 4vw, 48px);
}
.tricky-question-card {
    display: flex;
    min-height: 500px;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 217, 96, .4), transparent 38%),
        linear-gradient(145deg, #fff 0%, #fffdf5 100%);
    box-shadow: 0 18px 45px rgba(32, 68, 87, .14);
}
.tricky-card-eyebrow { color: #137b72; }
.tricky-question {
    margin: 0;
    color: #173144;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: 800;
    line-height: 1.28;
    overflow-wrap: anywhere;
}
.tricky-answers { display: grid; gap: 12px; }
.tricky-answer {
    display: grid;
    width: 100%;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 13px 15px;
    border: 2px solid #d6e1e8;
    border-radius: 16px;
    background: #fff;
    color: var(--quiz-ink);
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.45;
    text-align: left;
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.tricky-answer:not(:disabled):hover {
    transform: translateY(-1px);
    border-color: #75b5df;
    background: #f2faff;
}
.tricky-answer-letter {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: #e8f4fb;
    color: #165c92;
    font-weight: 850;
}
.tricky-answer.is-correct {
    border-color: #2f8d57;
    background: #e6f7ec;
    color: #145a32;
}
.tricky-answer.is-wrong {
    border-color: #c84a51;
    background: #fff0ef;
    color: #83232a;
}
.tricky-answer:disabled { cursor: default; }
.tricky-feedback {
    min-height: 1.5em;
    margin: 0;
    color: var(--quiz-muted);
    font-weight: 750;
    line-height: 1.45;
}
.tricky-feedback.is-correct { color: var(--quiz-green); }
.tricky-feedback.is-wrong { color: var(--quiz-red); }

.tricky-road-panel { min-width: 0; }
.tricky-scoreboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.tricky-score {
    display: flex;
    min-height: 72px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(32, 68, 87, .1);
}
.tricky-score span { color: var(--quiz-muted); font-size: .78rem; font-weight: 750; }
.tricky-score strong,
.tricky-score time { color: #173144; font-size: 1.25rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.tricky-time-score time { color: #a74618; }
.tricky-road-board {
    position: relative;
    width: min(100%, 520px);
    aspect-ratio: 700 / 740;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 24px;
    background: #bfe8a6;
    box-shadow: 0 16px 36px rgba(38, 72, 42, .2);
}
.tricky-road-svg {
    display: block;
    width: 100%;
    height: 100%;
}
.tricky-road-loading {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    margin: 0;
    color: #385344;
    font-weight: 750;
    transform: translate(-50%, -50%);
}
.tricky-road-loading[hidden] { display: none; }
.tricky-bug-wiggle { transform-box: fill-box; transform-origin: center; }
.tricky-bug-marker.is-walking .tricky-bug-wiggle { animation: tricky-bug-walk .17s ease-in-out infinite alternate; }
.tricky-bug-marker.is-walking .tricky-leg-a { animation: tricky-leg-a .18s ease-in-out infinite alternate; }
.tricky-bug-marker.is-walking .tricky-leg-b { animation: tricky-leg-b .18s ease-in-out infinite alternate; }
@keyframes tricky-bug-walk {
    from { transform: translateY(-.8px) rotate(-1.5deg); }
    to { transform: translateY(1px) rotate(1.5deg); }
}
@keyframes tricky-leg-a { to { transform: rotate(12deg); } }
@keyframes tricky-leg-b { to { transform: rotate(-12deg); } }
.tricky-road-caption { margin: 12px 4px 0; color: var(--quiz-muted); font-size: .88rem; text-align: center; }

.tricky-result {
    max-width: 700px;
    margin: clamp(20px, 4vw, 42px) auto;
    padding: clamp(28px, 6vw, 52px);
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(32, 68, 87, .18);
    text-align: center;
}
.tricky-result[hidden] { display: none; }
.tricky-result.is-win { animation: tricky-win-pop .55s cubic-bezier(.2, .8, .25, 1.2) both; }
.tricky-result-icon { margin: 0 0 8px; font-size: 2.6rem; }
.tricky-result h2 { margin: 0; color: #17653b; font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 900; }
.tricky-result p:not(.tricky-result-icon) { max-width: 540px; margin: 12px auto 24px; color: var(--quiz-muted); font-size: 1.05rem; line-height: 1.6; }
.tricky-result:not(.is-win) h2 { color: #a74618; }
@keyframes tricky-win-pop {
    0% { opacity: 0; transform: scale(.88) translateY(12px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.tricky-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    background: #17212a;
    color: #e2e8eb;
    text-align: center;
}
.tricky-footer-links {
    display: flex;
    width: min(100%, 1050px);
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 18px;
}
.tricky-footer .tricky-footer-links a {
    color: #e2e8eb;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}
.tricky-footer-links a:hover {
    color: #f2ca72;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.tricky-footer a { color: inherit; font-weight: 700; }

[hidden] { display: none !important; }

@media (max-width: 860px) {
    .tricky-game-layout { grid-template-columns: 1fr; }
    .tricky-question-card { min-height: 0; }
    .tricky-road-board { width: min(100%, 500px); }
    .tricky-road-panel { width: min(100%, 580px); margin-inline: auto; }
}
@media (max-width: 480px) {
    .tricky-site-header { min-height: 60px; padding-inline: 14px; }
    .tricky-brand { gap: 7px; font-size: 1.02rem; }
    .tricky-brand img { width: 17px; height: 17px; }
    .tricky-all-games { padding: 8px 10px; font-size: .84rem; }
    .tricky-quiz-main { width: min(100% - 24px, 1240px); padding-top: 20px; }
    .tricky-intro { padding: 27px 19px; border-radius: 22px; }
    .tricky-question-card { gap: 18px; padding: 21px 17px; border-radius: 22px; }
    .tricky-answer { grid-template-columns: 32px minmax(0, 1fr); gap: 9px; padding: 12px; font-size: .94rem; }
    .tricky-answer-letter { width: 31px; height: 31px; }
    .tricky-scoreboard { gap: 8px; }
    .tricky-score { min-height: 66px; padding: 9px 11px; }
    .tricky-score strong, .tricky-score time { font-size: 1.1rem; }
    .tricky-road-board { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .tricky-primary-button,
    .tricky-answer,
    .tricky-result.is-win { transition: none; animation-duration: .01ms; }
    .tricky-bug-marker.is-walking .tricky-bug-wiggle,
    .tricky-bug-marker.is-walking .tricky-leg-a,
    .tricky-bug-marker.is-walking .tricky-leg-b { animation: none; }
}