/*
 * Quiz Time landing page (layout: quiz_time). Matches the game's Play Store art:
 * Classic theme colors, Nunito, white rounded cards, yellow highlight on the key words.
 * Everything is scoped under .qt.
 */

@font-face { font-family: Nunito; font-weight: 400; font-display: swap; src: url(../fonts/Nunito-Regular.ttf) format("truetype"); }
@font-face { font-family: Nunito; font-weight: 700; font-display: swap; src: url(../fonts/Nunito-Bold.ttf) format("truetype"); }

.layout-quiz_time { overflow-x: hidden; background: #F4FBF7; }

.qt {
    --qt-mint: #8FE3B9;
    --qt-primary: #00A893;
    --qt-deep: #025F68;
    --qt-alt: #E3F7EE;
    --qt-lav: #6E67A8;
    --qt-correct: #2EB872;
    --qt-wrong: #E55F5F;
    --qt-amber: #F2A633;
    --qt-yellow: #FFD66B;
    --qt-shadow: 0 24px 50px rgba(2, 95, 104, .18);
    --qt-grad: linear-gradient(180deg, #00A893 0%, #2DBE9F 38%, #8FE3B9 78%, #C9F3B4 100%);

    font-family: Nunito, system-ui, sans-serif;
    color: var(--qt-deep);
    padding-bottom: 6rem; /* room for the fixed navigation bar */
}

.qt *, .qt *::before, .qt *::after { box-sizing: border-box; }
.qt ::selection { color: #AAF683; background: #00B49D; }
.qt h1, .qt h2, .qt h3 { font-family: inherit; font-weight: 700; color: inherit; letter-spacing: -.02em; text-transform: none; margin: 0; }
.qt p { margin: 0; }
.qt ul { list-style: none; margin: 0; padding: 0; }
.qt svg { width: 1em; height: 1em; flex: none; }

.qt-wrap { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; }
.qt-bleed { position: relative; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; }
.qt-section { padding-top: 6rem; }

/* Faint icon wallpaper (filled by the layout's script) */
.qt-pattern {
    position: absolute; inset: -60px; display: grid; grid-template-columns: repeat(auto-fill, 64px); gap: 56px 48px;
    padding: 30px; opacity: .13; transform: rotate(-8deg); pointer-events: none;
}
.qt-pattern i { width: 64px; height: 64px; background: center / contain no-repeat; }

/* Highlight, chips, buttons */
.qt-hl {
    display: inline-block; color: var(--qt-deep); background: var(--qt-yellow); padding: 0 .28em .06em;
    border-radius: .3em; transform: rotate(-2deg); text-shadow: none;
}
.qt-ico { display: inline-block; width: 1.25em; height: 1.25em; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.qt-chip {
    display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border-radius: 999px;
    background: var(--qt-alt); color: var(--qt-primary); font-weight: 700; font-size: .9rem; white-space: nowrap;
}
.qt-chip-amber { background: #FFF1D6; color: #C7811A; }
.qt-muted { color: var(--qt-lav); font-weight: 700; font-size: .9rem; }
.qt-small { font-size: .95rem; color: var(--qt-lav); margin-top: 1.25rem !important; }

.qt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 1.6rem; border-radius: 999px;
    font: 700 1.05rem/1 Nunito, sans-serif; text-decoration: none; border: 0; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.qt-btn:hover { transform: translateY(-2px); }
.qt-btn:focus-visible, .qt-ans:focus-visible { outline: 3px solid var(--qt-yellow); outline-offset: 3px; }
.qt-btn-play { background: var(--qt-deep); color: #fff; box-shadow: 0 14px 30px rgba(2, 95, 104, .35); }
.qt-btn-play:hover { color: #fff; box-shadow: 0 18px 36px rgba(2, 95, 104, .45); }
.qt-btn-ghost { background: rgba(255, 255, 255, .9); color: var(--qt-deep); }
.qt-btn-ghost:hover { color: var(--qt-deep); background: #fff; }
.qt-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Cards and answers (same as in the game) */
.qt-card { background: #fff; border-radius: 28px; box-shadow: var(--qt-shadow); padding: 1.75rem; position: relative; }
.qt-quiz-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.qt-bar { height: 8px; border-radius: 8px; background: var(--qt-alt); overflow: hidden; margin-bottom: 1.5rem; }
.qt-bar b { display: block; height: 100%; background: var(--qt-primary); border-radius: 8px; transition: width .4s ease; }
.qt-q { font-size: 1.6rem; font-weight: 700; line-height: 1.25; text-align: center; margin-bottom: 1.4rem !important; }
.qt-answers { display: grid; gap: .7rem; }
.qt-answers.two { grid-template-columns: 1fr 1fr; }
.qt-ans {
    position: relative; display: flex; align-items: center; justify-content: center; min-height: 3.4rem; padding: .5rem 2.2rem;
    border: 0; border-radius: 18px; background: var(--qt-alt); color: var(--qt-deep); font: 400 1.1rem/1.2 Nunito, sans-serif; text-align: center;
}
button.qt-ans { cursor: pointer; transition: transform .12s ease, background .12s ease; }
button.qt-ans:not(:disabled):hover { background: #cdf0df; transform: translateY(-2px); }
.qt-ans.ok { background: var(--qt-correct); color: #fff; font-weight: 700; }
.qt-ans.bad { background: var(--qt-wrong); color: #fff; font-weight: 700; animation: qt-shake .35s ease; }
.qt-ans.dim { opacity: .5; }
.qt-ans svg { position: absolute; right: .9rem; width: 1.2rem; height: 1.2rem; }
.qt-verdict { text-align: center; color: var(--qt-correct); font-size: 1.6rem; font-weight: 700; margin: 1.2rem 0 .8rem !important; }
.qt-verdict.no { color: var(--qt-wrong); }
.qt-explain { display: flex; gap: .9rem; align-items: flex-start; background: var(--qt-alt); border-radius: 18px; padding: 1rem 1.1rem; }
.qt-explain svg { width: 1.6rem; height: 1.6rem; color: var(--qt-amber); }
.qt-explain p { font-size: .98rem; line-height: 1.5; }

/* ---- Hero ------------------------------------------------------------- */

.qt-hero { background: var(--qt-grad); border-radius: 0 0 48px 48px; padding: 2rem 0 5rem; color: #fff; }
.qt-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.qt-crumbs { font-size: .85rem; opacity: .85; margin-bottom: 2.2rem; }
.qt-crumbs a { color: inherit; text-decoration: none; }
.qt-crumbs a:hover { text-decoration: underline; color: inherit; }
.qt-crumbs span { margin: 0 .45rem; opacity: .7; }
.qt-brand { display: flex; align-items: center; gap: .9rem; font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.qt-brand img { width: 88px; height: 88px; border-radius: 24px; box-shadow: 0 10px 24px rgba(2, 95, 104, .3); transform: rotate(-4deg); }
.qt-hero h1 { font-size: clamp(2.8rem, 6.4vw, 5rem); line-height: 1.04; text-shadow: 0 6px 24px rgba(2, 95, 104, .25); }
.qt-lead { font-size: 1.3rem; line-height: 1.45; max-width: 32rem; margin: 1.5rem 0 2rem !important; opacity: .95; }
.qt-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem !important; }
.qt-chips li {
    display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: var(--qt-deep); font-weight: 700; font-size: .92rem;
}
.qt-chips svg { width: 1.1rem; height: 1.1rem; color: var(--qt-primary); }

.qt-hero-demo { position: relative; }
.qt-quiz { color: var(--qt-deep); transform: rotate(1.5deg); }
.qt-quiz.qt-pop { animation: qt-pop .35s ease; }
.qt-flag { display: block; width: 170px; margin: -.5rem auto 0; filter: drop-shadow(0 10px 16px rgba(2, 95, 104, .25)); }
.qt-after:empty { display: none; }
.qt-btn-next { width: 100%; margin-top: 1rem; background: var(--qt-primary); color: #fff; }
.qt-btn-next:hover { color: #fff; }
.qt-bubble {
    position: absolute; z-index: 2; left: -28px; top: -34px; width: 84px; height: 84px; border-radius: 50%;
    background: var(--qt-amber); color: #fff; font-size: 3.2rem; font-weight: 700; display: grid; place-items: center;
    transform: rotate(-14deg); box-shadow: 0 12px 24px rgba(2, 95, 104, .3); animation: qt-float 4s ease-in-out infinite;
}
.qt-demo-hint { text-align: center; margin-top: 1.4rem !important; font-weight: 700; opacity: .95; }

.qt-result { text-align: center; padding: 1rem 0; }
.qt-result-stars { display: flex; justify-content: center; gap: .5rem; color: var(--qt-alt); margin-bottom: .5rem; }
.qt-result-stars svg { width: 3.6rem; height: 3.6rem; }
.qt-result-stars svg:nth-child(2) { width: 4.6rem; height: 4.6rem; margin-top: -.6rem; }
.qt-result-stars svg.on { color: var(--qt-amber); animation: qt-pop .5s ease both; }
.qt-result-score { font-size: 3rem; font-weight: 700; }
.qt-result-line { font-size: 1.25rem; font-weight: 700; margin: .3rem 0 .8rem !important; }
.qt-result .qt-actions { justify-content: center; margin-top: 1.5rem; }
.qt-result .qt-btn-ghost { background: var(--qt-alt); }

/* ---- Section headers ---------------------------------------------------- */

.qt-head { text-align: center; max-width: 46rem; margin: 0 auto 3rem; }
.qt-head h2, .qt-copy h2, .qt-cta h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.1; }
.qt-head p, .qt-copy p { font-size: 1.2rem; line-height: 1.5; margin-top: 1rem !important; color: #2f6f75; }
.qt-head-light { color: #fff; }
.qt-head-light p { color: #fff; opacity: .95; }

/* ---- Topics ------------------------------------------------------------- */

.qt-topics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }
.qt-tile {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
    padding: 1.5rem .5rem; background: #fff; border-radius: 24px; box-shadow: 0 14px 30px rgba(2, 95, 104, .1);
    font-weight: 700; font-size: 1.05rem; text-align: center; transition: transform .2s ease, box-shadow .2s ease;
}
.qt-tile:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 20px 40px rgba(2, 95, 104, .16); }
.qt-tile-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--qt-alt); color: var(--qt-primary); display: grid; place-items: center; }
.qt-tile-ico .qt-ico { width: 36px; height: 36px; }
.qt-new {
    position: absolute; top: -10px; right: -6px; background: var(--qt-amber); color: #fff; font-size: .75rem;
    padding: .2rem .6rem; border-radius: 999px; transform: rotate(8deg);
}

/* ---- Split sections (sagas, learn) ------------------------------------- */

.qt-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: center; }
.qt-flip .qt-copy { order: 2; }
.qt-stack { display: flex; flex-direction: column; gap: 1.4rem; }
.qt-mini { padding: 1.3rem 1.4rem; transform: rotate(var(--r, 0)) translateX(var(--x, 0)); }
.qt-mini .qt-q { font-size: 1.15rem; margin-bottom: .9rem !important; }
.qt-mini .qt-ans { min-height: 2.6rem; font-size: .98rem; border-radius: 14px; }
.qt-learn { position: relative; }
.qt-learn .qt-card { transform: rotate(-1.5deg); }
.qt-points {
    position: absolute; right: -18px; top: -22px; background: var(--qt-amber); color: #fff; font-size: 1.6rem; font-weight: 700;
    padding: .4rem 1rem; border-radius: 999px; transform: rotate(10deg); box-shadow: 0 12px 24px rgba(2, 95, 104, .3);
    animation: qt-float 4s ease-in-out infinite;
}
.qt-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; }
.qt-pills > * {
    display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px;
    background: var(--qt-alt); color: var(--qt-primary); font-weight: 700; font-size: .9rem;
}
.qt-pills .on { background: var(--qt-primary); color: #fff; }
.qt-pills .amber { background: #FFF1D6; color: #C7811A; }
.qt-pills .red { background: #FDE7E7; color: var(--qt-wrong); }

/* ---- Modes -------------------------------------------------------------- */

.qt-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.qt-mode { padding: 2rem; transition: transform .2s ease; }
.qt-mode:nth-child(2) { transform: translateY(1.5rem); }
.qt-mode-ico { width: 72px; height: 72px; border-radius: 22px; color: #fff; display: grid; place-items: center; margin-bottom: 1.3rem; }
.qt-mode-ico svg { width: 40px; height: 40px; }
.qt-mode h3, .qt-perk h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.qt-mode p, .qt-perk p { color: var(--qt-lav); font-size: 1.05rem; line-height: 1.5; }

/* ---- Screenshots -------------------------------------------------------- */

.qt-gallery { background: var(--qt-grad); margin-top: 7rem; padding: 5rem 0 4rem; border-radius: 48px; }
.qt-gallery .qt-head { position: relative; margin-bottom: 2.5rem; }
.qt-shots {
    position: relative; display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 1rem max(1.25rem, calc((100vw - 1160px) / 2 + 1.25rem)) 2rem; scrollbar-width: thin;
}
.qt-shots a { flex: none; scroll-snap-align: center; }
.qt-shots img {
    display: block; width: 240px; height: auto; border-radius: 26px; box-shadow: 0 20px 40px rgba(2, 95, 104, .3);
    transition: transform .2s ease;
}
.qt-shots a:nth-child(odd) img { transform: rotate(-1.5deg); }
.qt-shots a:nth-child(even) img { transform: rotate(1.5deg) translateY(14px); }
.qt-shots a:hover img { transform: rotate(0) translateY(-6px) scale(1.03); }

/* ---- Perks -------------------------------------------------------------- */

.qt-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.qt-perk { padding: 1.7rem; }
.qt-perk-ico { width: 60px; height: 60px; border-radius: 50%; background: var(--qt-alt); color: var(--qt-primary); display: grid; place-items: center; margin-bottom: 1.1rem; }
.qt-perk-ico svg { width: 30px; height: 30px; }
.qt-stars { display: flex; width: auto; height: 60px; border-radius: 999px; padding: 0 .9rem; gap: .2rem; background: #FFF1D6; color: var(--qt-amber); }
.qt-stars svg { width: 26px; height: 26px; }
.qt-stars svg:nth-child(2) { width: 32px; height: 32px; }
.qt-langs { display: flex; flex-wrap: wrap; gap: .4rem; }
.qt-langs li { padding: .25rem .65rem; border-radius: 999px; background: var(--qt-alt); font-weight: 700; font-size: .85rem; }
.qt-themes { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.qt-themes li { display: flex; align-items: center; gap: .55rem; font-weight: 700; }
.qt-themes i { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 2px rgba(2, 95, 104, .12); }

/* ---- Final call to action ---------------------------------------------- */

.qt-cta {
    position: relative; overflow: hidden; text-align: center; color: #fff; background: var(--qt-grad);
    border-radius: 40px; padding: 4rem 1.5rem; box-shadow: var(--qt-shadow);
}
.qt-cta > *:not(.qt-pattern) { position: relative; }
.qt-cta img { width: 96px; height: 96px; border-radius: 26px; box-shadow: 0 14px 30px rgba(2, 95, 104, .3); margin-bottom: 1.5rem; }
.qt-cta h2 { text-shadow: 0 6px 24px rgba(2, 95, 104, .25); }
.qt-cta > p { font-size: 1.25rem; margin: 1rem 0 2rem !important; }
.qt-cta-links { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1.8rem !important; font-size: .95rem; }
.qt-cta-links a { color: #fff; opacity: .9; }
.qt-cta-links a:hover { color: #fff; opacity: 1; }

/* ---- Motion ------------------------------------------------------------- */

.qt-anim .qt-reveal { opacity: 0; translate: 0 28px; transition: opacity .6s ease, translate .6s ease; transition-delay: calc(var(--d, 0) * 80ms); }
.qt-anim .qt-reveal.in { opacity: 1; translate: 0 0; }
@keyframes qt-float { 50% { translate: 0 -8px; } }
@keyframes qt-pop { from { transform: scale(.94) rotate(1.5deg); opacity: .4; } }
@keyframes qt-shake { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
@media (prefers-reduced-motion: reduce) {
    .qt *, .qt *::before { animation: none !important; transition: none !important; }
}

/* ---- Small screens ------------------------------------------------------ */

@media (max-width: 991px) {
    .qt-hero-grid, .qt-split { grid-template-columns: 1fr; gap: 3rem; }
    .qt-flip .qt-copy { order: 0; }
    .qt-copy { text-align: center; }
    .qt-copy .qt-pills { justify-content: center; }
    .qt-topics { grid-template-columns: repeat(3, 1fr); }
    .qt-modes, .qt-perks { grid-template-columns: 1fr 1fr; }
    .qt-mode:nth-child(2) { transform: none; }
}
@media (max-width: 600px) {
    .qt-section { padding-top: 4.5rem; }
    .qt-hero { border-radius: 0 0 32px 32px; }
    .qt-quiz { transform: none; }
    .qt-q { font-size: 1.35rem; }
    .qt-ans { padding: .5rem 1.8rem; font-size: 1rem; }
    .qt-topics { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
    .qt-modes, .qt-perks { grid-template-columns: 1fr; }
    .qt-mini { transform: none; }
    .qt-points { right: 0; top: -18px; }
    .qt-shots img { width: 200px; }
    .qt-gallery { border-radius: 32px; }
}