/* Progress UI is intentionally scoped so it can live beside the existing quiz theme. */
.retention-home-entry{
    width: 100%; min-height: 54px; display: grid; grid-template-columns: 38px minmax(0,1fr) 22px;
    align-items: center; gap: 12px; padding: 9px 14px; text-align: left; border: 1px solid var(--line);
    border-radius: 17px; background: linear-gradient(105deg,var(--surface),var(--tint)); box-shadow: var(--shadow);
}
.retention-home-glyph{ display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--accent-fill); color: var(--accent-contrast); font-size: 23px; line-height: 1; font-weight: 600; }
.retention-home-copy{ min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.retention-home-copy strong{ color: var(--text); font-size: 13px; }
.retention-home-copy small{ overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.retention-home-chevron{ color: var(--accent); font-size: 27px; line-height: 1; }

.retention-result-inline{ margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--soft); opacity: 1; transform: translateY(0); transition: opacity .3s,transform .3s,border-color .3s; }
.retention-result-inline.is-revealed{ border-color: color-mix(in srgb,var(--success) 40%,var(--line)); }
.retention-result-row,.retention-result-pending{ display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; }
.retention-result-art{ width: 48px; height: 48px; }
.retention-result-check,.retention-result-failed{ display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--success-bg); color: var(--success); font-size: 19px; font-weight: 800; }
.retention-result-failed{ background: var(--error-bg); color: var(--error); }
.retention-result-row strong,.retention-result-pending strong{ font-size: 11px; }
.retention-result-row p,.retention-result-pending p{ margin-top: 3px; font-size: 10px!important; }
.retention-small-action{ display: inline-flex; justify-content: center; align-items: center; min-height: 36px!important; padding: 7px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--accent); font-size: 10px; font-weight: 750; white-space: nowrap; }
.retention-action-error{ margin: 8px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb,var(--error) 28%,var(--line)); border-radius: 12px; background: var(--error-bg); color: var(--error); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.retention-inline-status{ margin-top: 14px; padding: 10px; border-radius: 12px; background: var(--error-bg); color: var(--error); font-size: 10px; }
.retention-action-status{ margin: 8px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--soft); color: var(--muted); font-size: 10px; line-height: 1.4; }
.retention-result-pending{ grid-template-columns: 34px minmax(0,1fr) auto; }
.retention-result-pending small{ display: block; margin-top: 5px; color: var(--error); font-size: 9px; line-height: 1.4; overflow-wrap: anywhere; }
.retention-result-spinner{ width: 23px; height: 23px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: retention-spin .9s linear infinite; }
@keyframes retention-spin{ to { transform: rotate(360deg); } }

@media(max-width:760px){

    .retention-result-row,.retention-result-pending{ grid-template-columns: 40px minmax(0,1fr); gap: 8px; padding: 9px; }
    .retention-result-art{ width: 39px; height: 39px; }
    .retention-result-row>.retention-small-action,.retention-result-pending>.retention-small-action{ grid-column: 2; justify-self: start; }

}
@media(max-width:360px){

    .retention-home-entry{ grid-template-columns: 33px minmax(0,1fr) 18px; gap: 8px; padding: 8px 10px; }
    .retention-home-glyph{ width: 32px; height: 32px; }
    .retention-home-copy{ flex-direction: column; align-items: flex-start; gap: 0; }
    .retention-home-copy small{ max-width: 100%; font-size: 9px; }

}
@media(prefers-reduced-motion:reduce){

    .retention-result-inline,.retention-home-entry{ animation-duration: .01ms!important; animation-iteration-count: 1!important; scroll-behavior: auto!important; transition-duration: .01ms!important; }

}

/* Keep result controls in view while score and recovery details remain reachable. */
.retention-result-scroll-region{ min-width:0; min-height:0; scrollbar-width:thin; scrollbar-color:var(--accent) var(--soft); }
.retention-result-scroll-region:focus-visible{ outline:2px solid color-mix(in srgb,var(--accent) 70%,transparent); outline-offset:-2px; }
.retention-result-scroll-hint{ display:none; }
.retention-result-scroll-hint[hidden]{ display:none!important; }
.retention-result-scroll-region.is-scrollable .retention-result-scroll-hint:not([hidden]){ display:block; margin:0 0 5px; padding:4px 8px; border-radius:8px; background:var(--soft); color:var(--muted); font-size:9px; line-height:1.25; text-align:center; }
.retention-result-error-details{ margin-top:5px; text-align:left; }
.retention-result-error-details summary{ color:var(--error); cursor:pointer; font-size:9px; font-weight:700; }
.retention-result-error-details small{ display:block; max-height:86px; overflow:auto; margin-top:4px; padding:5px 7px; border-radius:7px; background:var(--error-bg); color:var(--error); font-size:9px; line-height:1.35; overflow-wrap:anywhere; }
.retention-result-error-details pre{ max-height:48px; overflow:auto; margin:5px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.retention-result-inline.is-action-rail{ grid-column:1/-1; width:100%; min-width:0; margin:0; }
#thankyou-screen-buttons .retention-result-inline{ grid-column:1/-1; }

/* Bound the result screen at every viewport while keeping its action rail independent. */
#thankyou-screen{
    display:flex; flex-direction:column; align-items:stretch; gap:6px;
    width:100%; height:auto; max-height:100%; min-height:0; box-sizing:border-box; overflow:hidden;
}
#thankyou-screen .result-celebration{ flex:0 0 auto; }
#thankyou-screen .retention-result-scroll-region{
    flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
    padding:2px 5px 5px 0; border-radius:9px; scroll-behavior:smooth;
}
#thankyou-screen-buttons{
    flex:0 0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start; gap:6px; margin:0; min-width:0;
}
#thankyou-screen-buttons[hidden]{ display:none; }
#thankyou-screen-buttons button{ min-width:0; }
#thankyou-screen-buttons .next-test-btn,#thankyou-screen-buttons .our-games-btn{ grid-column:1/-1; }
.rank-up-banner{ margin-top:0; padding:6px; font-size:11px; line-height:1.2; }
#game-results > .rank-up-banner + .result-title{ display:none; }

@media(max-width:420px) and (max-height:580px){

    .welcome-actions{ gap:6px; }
    .retention-home-entry{ min-height:46px; padding-top:6px; padding-bottom:6px; }

}

@media(max-width:700px) and (max-height:800px){

    #welcome-screen .hero-art{ display:none; }

}
@media(max-width:420px) and (max-height:460px){

    #welcome-screen{ grid-template-columns:minmax(0,1fr); align-content:center; gap:6px; }
    #welcome-screen > .welcome-hero{ display:none; }
    .welcome-actions{ gap:7px; }
    .start-card{ padding:12px; }
    .daily-card{ padding:9px; }

}
@media(max-height:580px) and (orientation:landscape){

    #welcome-screen{ gap:12px; }
    .welcome-actions{ gap:7px; }
    .start-card{ padding:12px; }
    .daily-card{ min-height:0; padding:7px 9px; }
    .daily-description{ font-size:9px; line-height:1.2; }
    .daily-action{ min-height:30px; padding:4px 6px; }
    .retention-home-entry{ min-height:39px; padding:5px 8px; }
    .welcome-rating:not([hidden]){ font-size:9px; line-height:1.2; }

}

@media(max-height:800px) and (orientation:portrait){

    #thankyou-screen{
        display:flex; flex-direction:column; align-items:stretch; gap:6px;
        width:100%; height:auto; max-height:100%; min-height:0; box-sizing:border-box; overflow:hidden;
    }
    #thankyou-screen .result-celebration{ flex:0 0 auto; }
    #thankyou-screen .retention-result-scroll-region{
        min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
        padding:2px 5px 5px 0; border-radius:9px; scroll-behavior:smooth;
    }
    #thankyou-screen-buttons{
        flex:0 0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
        align-content:start; gap:6px; margin:0;
    }
    #thankyou-screen-buttons button{ min-width:0; min-height:38px; padding:8px 6px; }
    #thankyou-screen-buttons .our-games-btn{ min-height:36px!important; }
    #thankyou-screen-buttons .next-test-btn,#thankyou-screen-buttons .our-games-btn{ grid-column:1/-1; }
    #thankyou-screen-buttons .retention-result-inline{ grid-column:1/-1; }
    .retention-result-inline.is-action-rail{ border-radius:12px; }
    .retention-result-inline.is-action-rail .retention-result-row,.retention-result-inline.is-action-rail .retention-result-pending{ grid-template-columns:34px minmax(0,1fr) auto; gap:6px; padding:6px 7px; }
    .retention-result-inline.is-action-rail .retention-result-art{ width:32px; height:32px; }
    .retention-result-inline.is-action-rail .retention-result-check,.retention-result-inline.is-action-rail .retention-result-failed{ width:30px; height:30px; }
    .retention-result-inline.is-action-rail .retention-result-row strong,.retention-result-inline.is-action-rail .retention-result-pending strong{ font-size:10px; line-height:1.25; }
    .retention-result-inline.is-action-rail .retention-result-row p,.retention-result-inline.is-action-rail .retention-result-pending p{ font-size:9px!important; line-height:1.3; }
    .retention-result-inline.is-action-rail .retention-small-action{ min-height:34px!important; padding:6px 7px; font-size:9px; white-space:normal; }

}

@media(max-height:580px) and (orientation:landscape){

    #thankyou-screen{
        display:grid; grid-template-columns:minmax(0,1fr) minmax(196px,.78fr);
        grid-template-rows:auto minmax(0,1fr); align-items:stretch; column-gap:14px; row-gap:3px;
        width:100%; height:100%; max-height:100%; min-height:0; box-sizing:border-box; overflow:hidden;
    }
    #thankyou-screen .result-celebration{ display:none!important; }
    #thankyou-screen .thankyou-h2{ grid-column:1; grid-row:1; align-self:end; margin:0 0 2px; }
    #thankyou-screen .retention-result-scroll-region{
        grid-column:1; grid-row:2; min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden;
        overscroll-behavior:contain; padding:2px 5px 5px 0; border-radius:9px; scroll-behavior:smooth;
    }
    #thankyou-screen-buttons{
        grid-column:2; grid-row:1/3; align-self:center; display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr)); align-content:center; gap:7px; min-width:0; margin:0!important;
    }
    #thankyou-screen-buttons button{ min-width:0; min-height:36px; padding:8px 6px; font-size:10px; }
    #thankyou-screen-buttons .next-test-btn,#thankyou-screen-buttons .our-games-btn{ grid-column:1/-1; }
    #thankyou-screen-buttons .retention-result-inline{ grid-column:1/-1; }
    .retention-result-inline.is-action-rail .retention-result-row,.retention-result-inline.is-action-rail .retention-result-pending{ grid-template-columns:34px minmax(0,1fr) auto; gap:7px; padding:7px; }
    .retention-result-inline.is-action-rail .retention-result-art{ width:32px; height:32px; }
    .retention-result-inline.is-action-rail .retention-result-check,.retention-result-inline.is-action-rail .retention-result-failed{ width:30px; height:30px; }
    .retention-result-inline.is-action-rail .retention-result-row strong,.retention-result-inline.is-action-rail .retention-result-pending strong{ font-size:10px; line-height:1.25; }
    .retention-result-inline.is-action-rail .retention-result-row p,.retention-result-inline.is-action-rail .retention-result-pending p{ font-size:9px!important; line-height:1.3; }
    .retention-result-inline.is-action-rail .retention-small-action{ min-height:34px!important; padding:6px 7px; font-size:9px; white-space:normal; }

}

@media(max-width:420px) and (max-height:580px) and (orientation:portrait){

    .retention-result-inline.is-action-rail{ border-radius:10px; }
    .retention-result-inline.is-action-rail .retention-result-row,.retention-result-inline.is-action-rail .retention-result-pending{
        grid-template-columns:28px minmax(0,1fr) 68px; gap:5px; padding:4px 6px;
    }
    .retention-result-inline.is-action-rail .retention-result-art{ width:26px; height:26px; }
    .retention-result-inline.is-action-rail .retention-result-check{ width:24px; height:24px; }
    .retention-result-inline.is-action-rail .retention-result-failed,.retention-result-inline.is-action-rail .retention-result-spinner{ width:22px; height:22px; }
    .retention-result-inline.is-action-rail .retention-result-row strong,.retention-result-inline.is-action-rail .retention-result-pending strong{ font-size:9px; line-height:1.2; }
    .retention-result-inline.is-action-rail .retention-result-row p,.retention-result-inline.is-action-rail .retention-result-pending p{ margin:2px 0 0; font-size:9px!important; line-height:1.2; }
    .retention-result-inline.is-action-rail .retention-small-action{ min-height:34px!important; padding:5px 4px; font-size:8px; line-height:1.15; white-space:normal; }
    .retention-result-inline.is-action-rail .retention-result-row>.retention-small-action{
        grid-column:3; grid-row:1; justify-self:stretch; align-self:center; min-width:0;
    }
    .retention-result-inline.is-action-rail .retention-result-pending{ grid-template-columns:minmax(0,1fr) 68px; }
    .retention-result-inline.is-action-rail .retention-result-pending > .retention-result-failed,.retention-result-inline.is-action-rail .retention-result-pending > .retention-result-spinner{ display:none; }
    .retention-result-inline.is-action-rail .retention-result-error-details{ margin-top:3px; }
    .retention-result-inline.is-action-rail .retention-result-error-details summary{ font-size:8px; }
    #thankyou-screen .thankyou-h2{ display:none!important; }

}

@media(max-height:360px) and (orientation:landscape){

    #thankyou-screen-buttons{ gap:4px; }
    #thankyou-screen-buttons button{ min-height:36px; padding:5px 4px; line-height:1.15; }
    #thankyou-screen-buttons .next-test-btn{ min-height:38px; }

}

body.state-thankyou #ui-notice:not([hidden]){
    top:max(8px,env(safe-area-inset-top)); bottom:auto; max-height:62px; overflow:auto;
    padding:8px 12px; font-size:10px; line-height:1.35; border-radius:12px;
}
body.state-thankyou:has(#ui-notice:not([hidden])) #thankyou-screen .retention-result-scroll-region{ padding-top:68px; }