:root {
    --ink:#202020;
    --muted:#626262;
    --paper:#f6f6f6;
    --card:#fff;
    --line:#d6d6d6;
    --green:#20664e;
    --accent:#dcedae;
    --danger:#9b3636;
    --radius:22px;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:var(--paper);
    font-synthesis:none
}

* {
    box-sizing:border-box
}

body {
    margin:0
}

a {
    color:var(--green);
    text-underline-offset:4px
}

button,input,select {
    font:inherit
}

button,a,select,input {
    touch-action:manipulation
}

button {
    cursor:pointer
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
    outline:3px solid var(--focus);
    outline-offset:5px
}

.site-header,.site-footer {
    max-width:1060px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:28px 30px
}

.site-header {
    border-bottom:1px solid var(--line);
    flex-wrap:wrap;
    gap:18px
}

.main-nav {
    display:flex;
    gap:18px;
    align-items:center
}

.account-logout {display:flex;align-items:center;flex-wrap:wrap;gap:12px;max-width:100%}
.account-logout span {overflow-wrap:anywhere;min-width:0}
.account-logout button {min-height:44px;border:0;background:transparent;color:var(--green);text-decoration:underline}
.site-footer {flex-wrap:wrap;gap:12px}

.main-nav a {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    font-size:14px
}

.main-nav a[aria-current="page"] {
    color:var(--ink);
    font-weight:700;
    text-decoration:none
}

.reference-list {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:12px;
    list-style:none;
    padding:0;
    margin:0 0 32px
}

.country-link {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:18px 22px;
    min-height:64px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    text-decoration:none;
    font-weight:650
}

.country-link:hover {
    border-color:var(--green)
}

.reference-detail>section {
    border-top:1px solid var(--line);
    padding-top:26px;
    margin-top:30px
}

.reference-detail p,.reference-facts {
    line-height:1.7
}

.reference-facts {
    padding-left:22px
}

.reference-facts li+li {
    margin-top:16px
}

.fact-category {
    display:block;
    color:var(--muted);
    font-size:14px
}

.reference-flag {
    margin:24px 0 16px
}

.reference-flag img {
    display:block;
    max-width:100%;
    height:auto;
    border:1px solid var(--line);
    margin-bottom:16px
}

.reference-provenance {
    border:1px solid var(--line);
    padding:16px 20px;
    border-radius:14px
}

.reference-provenance summary {
    cursor:pointer;
    min-height:28px
}

.reference-provenance dt {
    font-weight:650;
    margin-top:14px
}

.reference-provenance dd {
    margin:6px 0 0;
    line-height:1.7;
    overflow-wrap:anywhere
}

.reference-actions {
    margin:30px 0 0
}

.brand {
    display:inline-flex;
    flex-shrink:0;
    align-items:center;
    min-height:44px;
    text-decoration:none
}

.brand-logo {
    display:block;
    width:auto;
    height:40px;
    max-width:100%
}

.header-note,.site-footer,.form-note {
    color:var(--muted);
    font-size:13px
}

.container {
    max-width:920px;
    margin:0 auto;
    padding:54px 30px 60px;
    min-height:75vh
}

.hero {
    text-align:center;
    margin-bottom:42px
}

.eyebrow {
    font-size:11px;
    font-weight:750;
    letter-spacing:2px;
    color:var(--green);
    margin:0 0 16px
}

h1 {
    font-size:clamp(36px,5.5vw,58px);
    letter-spacing:-2px;
    line-height:1.08;
    font-weight:750;
    margin:0 0 23px
}

h2 {
    font-size:25px;
    letter-spacing:-.7px;
    margin:0
}

h3 {
    font-size:19px;
    margin:0
}

.lead {
    color:var(--muted);
    font-size:17px;
    line-height:1.7;
    max-width:520px;
    margin:0 auto
}

.hero-badges {
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:23px;
    font-size:12px;
    color:var(--muted)
}

.hero-badges span:before {
    content:"•";
    color:var(--green);
    margin-right:7px
}

.setup-card,.question-card,.review-card {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:34px;
    box-shadow:0 8px 25px #183b3010
}

.section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:26px
}

.section-heading .eyebrow {
    margin-bottom:8px
}

.pill {
    padding:8px 13px;
    border-radius:30px;
    background:var(--surface-soft);
    font-size:12px;
    font-weight:650;
    white-space:nowrap
}

.topic-picker {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px
}

.topic-link {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:10px 16px;
    border:1px solid var(--line);
    border-radius:12px;
    text-decoration:none;
    font-weight:600
}

.topic-link[aria-current="page"] {
    border-color:var(--green);
    background:var(--surface-raised)
}

.topic-description {
    margin-bottom:8px
}

.topic-scope {
    font-size:13px;
    line-height:1.6;
    margin-bottom:26px
}

.game-picker {
    border:0;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:start;
    gap:14px
}

.game-picker legend {
    font-size:13px;
    font-weight:600;
    margin-bottom:12px
}

.game-card {
    border:1px solid var(--line);
    border-radius:15px;
    padding:20px 16px;
    display:flex;
    align-items:center;
    gap:11px;
    cursor:pointer;
    position:relative
}

.game-card:has(input:checked) {
    border-color:var(--green);
    background:var(--surface-raised);
    box-shadow:0 0 0 1px var(--green)
}

.game-card:not(:has(input:checked)) .game-description {
    display:none
}

.game-card:only-of-type {
    grid-column:1 / -1
}

.game-card input {
    accent-color:var(--green);
    width:16px;
    height:16px;
    margin:0
}

.game-symbol {
    font-size:27px
}

.game-copy {
    display:flex;
    flex-direction:column;
    gap:7px
}

.game-copy strong {
    font-size:15px
}

.game-copy>span {
    font-size:12px;
    line-height:1.5;
    color:var(--muted)
}

.settings-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:26px
}

.settings-row label {
    font-size:13px;
    font-weight:600;
    display:flex;
    flex-direction:column;
    gap:9px
}

.mode-picker {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    border:0;
    padding:0;
    margin:26px 0 0
}

.mode-picker legend {
    margin-bottom:12px;
    font-size:13px;
    font-weight:600
}

.mode-card {
    display:flex;
    align-items:flex-start;
    gap:10px;
    min-width:0;
    min-height:44px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:13px;
    cursor:pointer
}

.mode-card:has(input:checked) {
    border-color:var(--green);
    background:var(--surface-raised);
    box-shadow:0 0 0 1px var(--green)
}

.mode-card input {
    accent-color:var(--green);
    width:16px;
    height:16px;
    margin:2px 0 0;
    flex-shrink:0
}

.settings-row--simple {
    grid-template-columns:minmax(0,1fr)
}

select {
    color:var(--ink);
    background:var(--card);
    padding:13px;
    border:1px solid var(--line);
    border-radius:10px;
    min-height:48px
}

.primary-button {
    background:var(--primary-bg);
    color:var(--primary-ink);
    border:0;
    border-radius:11px;
    display:inline-flex;
    justify-content:center;
    gap:15px;
    align-items:center;
    padding:16px 23px;
    font-size:14px;
    font-weight:650;
    text-decoration:none;
    min-height:50px
}

.primary-button:hover {
    background:var(--primary-hover-bg)
}

.start-button {
    width:100%;
    margin-top:27px;
    justify-content:space-between;
    padding-inline:22px
}

.settings-refresh {
    background:transparent;
    color:var(--green);
    border:1px solid var(--line);
    border-radius:11px;
    padding:10px 16px;
    margin-top:16px;
    min-height:44px
}

.form-note {
    text-align:center;
    margin-bottom:0;
    line-height:1.6
}

.site-footer {
    border-top:1px solid var(--line)
}

.site-footer a {
    color:var(--muted)
}

.skip-link {
    position:absolute;
    left:12px;
    top:-100px;
    padding:12px;
    background:var(--card);
    z-index:10
}

.skip-link:focus {
    top:12px
}

.round-heading,.progress-copy {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px
}

.round-heading {
    margin-bottom:34px
}

.back-link {
    text-decoration:none;
    font-size:13px;
    font-weight:600
}

.muted {
    color:var(--muted)
}

.progress-copy {
    font-size:13px;
    margin-bottom:12px
}

progress {
    appearance:none;
    width:100%;
    height:7px;
    border:0;
    display:block;
    margin-bottom:29px;
    border-radius:20px;
    overflow:hidden
}

progress::-webkit-progress-bar {
    background:var(--line)
}

progress::-webkit-progress-value {
    background:var(--green)
}

progress::-moz-progress-bar {
    background:var(--green)
}

.question-card {
    padding:40px
}

.question-title {
    font-size:clamp(28px,4vw,38px);
    line-height:1.3;
    letter-spacing:-1px;
    margin-bottom:10px
}

.question-hint {
    font-size:14px;
    color:var(--muted);
    margin:0 0 30px
}

.answer-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px
}

.answer-option {
    background:var(--card);
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:13px;
    min-height:72px;
    padding:15px 17px;
    display:flex;
    gap:14px;
    align-items:center;
    text-align:left;
    font-size:16px;
    position:relative;
    flex-wrap:wrap
}

.answer-option:has(.flag-image) {
    justify-content:center;
    min-height:185px;
    flex-direction:column
}

.answer-option:has(.flag-image) .option-letter {
    position:absolute;
    top:12px;
    left:12px
}

.answer-option:hover:is(button) {
    border-color:var(--green);
    background:var(--surface-hover);
    transform:translateY(-1px)
}

.option-letter {
    width:28px;
    height:28px;
    background:var(--surface-muted);
    border-radius:7px;
    display:grid;
    place-items:center;
    font-size:12px;
    font-weight:650;
    color:var(--muted);
    flex-shrink:0
}

.flag-image {
    object-fit:contain;
    max-width:100%;
    width:150px;
    height:100px;
    filter:drop-shadow(0 1px 2px #0002)
}

.question-media {
    margin:24px 0;
    padding:12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface-muted)
}

.prompt-image {
    display:block;
    width:100%;
    height:clamp(240px,45vh,420px);
    object-fit:contain;
    border-radius:7px
}

.review-heading:has(.prompt-image) {
    align-items:flex-start;
    flex-wrap:wrap
}

.review-heading h3:has(.prompt-image) {
    flex-basis:100%
}

.review-heading .prompt-image {
    width:min(100%,420px);
    height:240px
}

.answer-status {
    font-size:11px;
    font-weight:700;
    flex-basis:100%;
    padding-left:42px
}

.answer-option:has(.flag-image) .answer-status {
    padding-left:0;
    text-align:center
}

.is-correct {
    border:2px solid var(--success-ink);
    background:var(--correct-bg)
}

.is-wrong {
    border:2px solid var(--danger-border);
    background:var(--danger-soft)
}

.is-muted {
    opacity:.65
}

.feedback {
    padding:20px 23px;
    margin-top:27px;
    border-radius:12px;
    font-size:14px;
    line-height:1.7
}

.positive {
    color:var(--success-ink);
    background:var(--success-bg)
}

.negative {
    color:var(--danger-ink);
    background:var(--danger-bg)
}

.feedback p {
    margin:5px 0 0
}

.sources {
    font-size:12px;
    color:var(--muted);
    margin-top:19px;
    line-height:1.8
}

.sources summary {
    cursor:pointer
}

.sources ul {
    padding-left:20px
}

.next-form {
    text-align:right;
    margin-top:25px
}

.error-message {
    background:var(--danger-bg);
    color:var(--danger);
    padding:16px;
    border-radius:10px;
    line-height:1.6
}

.results-header {
    text-align:center;
    margin-bottom:50px
}

.results-header h1 {
    font-size:42px
}

.score {
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:12px;
    margin:25px 0 12px
}

.score strong {
    font-size:82px;
    line-height:1;
    font-weight:750;
    letter-spacing:-4px
}

.score span {
    font-size:27px;
    color:var(--muted)
}

.results-header .primary-button {
    margin-top:25px
}

.review-list {
    display:grid;
    gap:17px
}

.review-card {
    padding:27px
}

.review-heading {
    display:flex;
    gap:13px;
    align-items:center
}

.review-heading h3 {
    flex:1;
    line-height:1.4
}

.review-number {
    font-size:12px;
    color:var(--muted)
}

.result-tag {
    font-size:11px;
    font-weight:650;
    padding:6px 10px;
    border-radius:20px
}

.review-card>p {
    font-size:14px;
    line-height:1.7;
    color:var(--muted)
}

.review-answers {
    display:flex;
    gap:35px;
    flex-wrap:wrap
}

.review-answers>div {
    display:flex;
    flex-direction:column;
    gap:7px
}

.review-answers .muted {
    font-size:11px
}

.review-answers .flag-image {
    width:105px;
    height:70px
}

.prose h1 {
    font-size:37px
}

.prose h2 {
    margin-top:32px;
    font-size:22px
}

.prose p {
    line-height:1.8;
    color:var(--muted)
}

.prose .back-link {
    display:inline-block;
    margin-top:20px
}

.prose .lead {
    margin:0 0 24px
}

@media(max-width:600px) {
    .site-header,.site-footer {
        padding:22px
    }

    .header-note {
        display:none
    }

    .container {
        padding:35px 20px 40px
    }

    .hero {
        margin-bottom:32px
    }

    .hero-badges {
        gap:10px
    }

    .setup-card,.question-card {
        padding:23px
    }

    .game-picker {
        grid-template-columns:1fr
    }

    .mode-picker {
        grid-template-columns:minmax(0,1fr)
    }

    .game-card {
        padding:17px
    }

    .settings-row {
        gap:12px
    }

    .answer-grid {
        grid-template-columns:1fr
    }

    .answer-grid:has(.flag-image) {
        grid-template-columns:1fr 1fr
    }

    .answer-option:has(.flag-image) {
        min-height:155px;
        padding:40px 10px 12px
    }

    .flag-image {
        width:125px;
        height:84px
    }

    .results-header h1 {
        font-size:34px
    }

    .review-card {
        padding:21px
    }

    .review-heading {
        flex-wrap:wrap
    }

    .review-heading h3 {
        font-size:16px
    }

    .site-footer {
        font-size:11px
    }

    .question-title {
        font-size:29px
    }

    .next-form .primary-button {
        width:100%
    }

}

.fabrics-hero {
    display:grid;
    grid-template-columns:minmax(0,1fr) 208px;
    align-items:center;
    gap:42px;
    margin:38px 0 30px
}

.fabrics-intro .lead {
    max-width:540px;
    margin:0
}

.fabrics-total {
    display:inline-block;
    margin:20px 0 0;
    padding:8px 13px;
    border:1px solid var(--line);
    border-radius:30px;
    color:var(--green);
    font-size:13px;
    font-weight:650
}

.fabrics-weave {
    margin:0
}

.fabrics-weave svg {
    display:block;
    max-width:100%;
    height:auto
}

.fabrics-weave figcaption {
    margin-top:10px;
    text-align:center;
    font-size:12px;
    line-height:1.6;
    color:var(--muted)
}

.fabrics-guide {
    background:var(--surface-soft);
    border-radius:16px;
    padding:24px 28px;
    margin-bottom:28px
}

.fabrics-guide h2 {
    font-size:19px;
    letter-spacing:-.3px
}

.fabrics-guide p {
    font-size:14px;
    line-height:1.7;
    margin:12px 0 0
}

.fabrics-filters {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    padding:24px;
    margin-bottom:32px
}

.fabrics-filter-fields {
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    gap:18px
}

.fabrics-filter-fields label {
    display:flex;
    flex-direction:column;
    gap:9px;
    min-width:0;
    font-size:13px;
    font-weight:650
}

.fabrics-filter-fields input,.fabrics-filter-fields select {
    width:100%;
    min-width:0;
    min-height:48px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--card);
    color:var(--ink);
    font-weight:400
}

.fabrics-filter-fields input::placeholder {
    color:var(--muted);
    opacity:1
}

.fabrics-filter-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px 22px;
    margin-top:18px
}

.fabrics-filter-actions>a {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    font-size:13px
}

.fabrics-filter-error {
    color:var(--danger);
    line-height:1.6;
    margin:0 0 20px
}

.fabrics-results-heading {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:10px 20px;
    margin-bottom:20px
}

.fabrics-results-heading p {
    margin:0;
    font-size:13px;
    color:var(--muted)
}

.fabrics-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    list-style:none;
    padding:0;
    margin:0
}

.fabric-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:25px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--card)
}

.fabric-construction {
    display:inline-block;
    align-self:flex-start;
    padding:6px 10px;
    border-radius:7px;
    background:var(--surface-soft);
    color:var(--green);
    font-size:12px;
    font-weight:600;
    line-height:1.5
}

.fabric-card-photo {
    display:block;
    width:100%;
    height:190px;
    object-fit:cover;
    border-radius:10px;
    margin-bottom:20px
}

.fabric-photo {
    margin:30px 0 0;
    padding:18px;
    background:var(--surface-muted);
    border:1px solid var(--line);
    border-radius:18px
}

.fabric-photo>img {
    display:block;
    width:100%;
    height:auto;
    max-height:560px;
    object-fit:contain;
    border-radius:8px
}

.fabric-photo figcaption {
    font-size:13px;
    line-height:1.7
}

.fabric-photo figcaption p {
    margin:12px 0 0
}

.fabric-photo-credits {
    margin:15px 0 30px;
    font-size:13px;
    line-height:1.7;
    overflow-wrap:anywhere
}

.fabric-photo-credits summary {
    cursor:pointer;
    color:var(--green)
}

.fabric-photo-credits dl {
    display:grid;
    grid-template-columns:max-content minmax(0,1fr);
    gap:10px 20px
}

.fabric-photo-credits dd {
    margin:0
}

.fabric-card-knitted .fabric-construction {
    color:var(--badge-blue-ink);
    background:var(--badge-blue-bg)
}

.fabric-card-nonwoven .fabric-construction {
    color:var(--badge-amber-ink);
    background:var(--badge-amber-bg)
}

.fabric-card-openwork .fabric-construction {
    color:var(--badge-rose-ink);
    background:var(--badge-rose-bg)
}

.fabric-card h3 {
    margin:17px 0 11px;
    font-size:24px;
    letter-spacing:-.5px
}

.fabric-card h3 a {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:14px;
    min-height:36px;
    text-decoration:none
}

.fabric-card h3 a:hover {
    text-decoration:underline
}

.fabric-card h3 a>span:first-child {
    overflow-wrap:anywhere
}

.fabric-card h3 a>span[aria-hidden] {
    font-size:18px;
    font-weight:400
}

.fabric-card-description {
    font-size:14px;
    line-height:1.7;
    margin:0 0 20px
}

.fabric-card-facts {
    padding-top:16px;
    margin:auto 0 0;
    border-top:1px solid var(--line);
    font-size:13px;
    line-height:1.7
}

.fabric-card-facts dt {
    font-weight:650;
    margin-bottom:5px
}

.fabric-card-facts dd {
    margin:0;
    color:var(--muted)
}

.fabrics-empty {
    grid-column:1 / -1;
    padding:40px 25px;
    text-align:center;
    border:1px dashed var(--line-strong);
    border-radius:18px
}

.fabrics-empty p {
    color:var(--muted);
    line-height:1.7
}

.fabric-detail {
    margin-top:28px
}

.fabric-detail-header {
    margin-bottom:30px
}

.fabric-aliases {
    margin:-5px 0 20px;
    font-size:14px;
    line-height:1.7;
    color:var(--muted)
}

.fabric-detail-header>a.fabric-construction {
    padding:9px 13px;
    min-height:36px;
    text-underline-offset:3px
}

.fabric-description {
    max-width:720px;
    font-size:19px;
    line-height:1.8;
    margin:22px 0 0
}

.fabric-summary,.fabric-detail-body {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px
}

.fabric-summary {
    padding:30px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px
}

.fabric-detail-body {
    padding:32px 0
}

.fabric-summary h2,.fabric-detail-body h2,.fabric-care h2,.fabric-sources h2 {
    font-size:22px;
    letter-spacing:-.4px;
    overflow-wrap:anywhere
}

.fabric-summary p,.fabric-detail-body p,.fabric-care p {
    font-size:15px;
    line-height:1.8;
    margin:15px 0 0
}

.fabric-care {
    background:var(--surface-soft);
    padding:28px 30px;
    border-radius:18px
}

.fabric-care .fabric-care-note {
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid var(--line-soft);
    font-size:13px
}

.fabric-sources {
    margin-top:34px;
    padding-top:28px;
    border-top:1px solid var(--line)
}

.fabric-sources ul {
    display:grid;
    gap:12px;
    padding-left:22px;
    font-size:14px;
    line-height:1.7;
    overflow-wrap:anywhere
}

.fabric-reference-date {
    margin:24px 0 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.7
}

@media (max-width:600px) {
    .fabrics-hero {
        grid-template-columns:minmax(0,1fr);
        gap:24px;
        margin-top:30px
    }

    .fabrics-weave {
        display:flex;
        align-items:center;
        gap:18px
    }

    .fabric-photo-credits dl {
        grid-template-columns:minmax(0,1fr);
        gap:5px
    }

    .fabric-photo-credits dd {
        margin-bottom:10px
    }

    .fabrics-weave svg {
        width:104px;
        flex-shrink:0
    }

    .fabrics-weave figcaption {
        margin:0;
        max-width:180px;
        text-align:left
    }

    .fabrics-guide,.fabrics-filters,.fabric-summary,.fabric-care {
        padding:22px
    }

    .fabrics-filter-fields,.fabrics-grid,.fabric-summary,.fabric-detail-body {
        grid-template-columns:minmax(0,1fr)
    }

    .fabrics-filter-actions {
        gap:12px
    }

    .fabric-card {
        padding:23px
    }

    .fabric-description {
        font-size:17px
    }

    .fabric-detail-header h1 {
        overflow-wrap:anywhere
    }
}

.visually-hidden {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0
}

/* Playing has its own compact toolbar so the question keeps the available screen. */
.quiz-playing {
    --play-width:clamp(1120px,76vw,1840px);
    --play-gutter:clamp(8px,1.1vw,16px);
    --play-card-padding:clamp(12px,1.2vw,32px);
    --play-gap:clamp(10px,1.5dvh,24px);
    --play-option-gap:clamp(6px,.7dvh,10px);
    --play-option-height:clamp(48px,4.5dvh,64px);
    --play-dock-height:60px;
    --play-dock-bottom:8px;
    --play-dock-space:80px
}

.quiz-playing .site-header,.quiz-playing .site-footer {
    display:none
}

.quiz-playing .container {
    max-width:var(--play-width);
    height:100dvh;
    padding:10px var(--play-gutter) calc(var(--play-dock-space) + env(safe-area-inset-bottom));
    min-height:100dvh;
    display:flex
}

.quiz-round {
    display:flex;
    flex:1;
    flex-direction:column;
    gap:8px;
    min-width:0;
    min-height:0
}

.quiz-round .round-heading {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:clamp(12px,3vw,48px);
    min-height:44px;
    margin:0
}

.quiz-round .back-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:44px;
    min-height:44px;
    font-size:14px;
    white-space:nowrap
}

.quiz-round .back-link:focus-visible {
    outline-offset:1px
}

.quiz-round .round-language-note {
    margin:0;
    font-size:12px;
    line-height:1.4
}

.round-progress {
    width:100%;
    max-width:560px;
    justify-self:center;
    min-width:0
}

.quiz-round .pill {
    padding:6px 10px;
    font-size:clamp(12px,.65vw,14px);
    white-space:nowrap
}

.score-compact {
    display:none
}

.quiz-round .progress-copy {
    margin:0;
    font-size:clamp(12px,.65vw,14px);
    line-height:18px
}

.quiz-round progress {
    height:4px;
    margin:6px 0 0
}

.quiz-round .question-card {
    display:flex;
    flex:1;
    flex-direction:column;
    gap:clamp(8px,1dvh,16px);
    min-width:0;
    min-height:0;
    padding:var(--play-card-padding)
}

.quiz-round .eyebrow {
    margin:0;
    font-size:clamp(10px,.55vw,12px);
    line-height:1.4;
    letter-spacing:1px
}

.question-stage {
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    justify-content:safe center;
    min-height:0;
    gap:var(--play-gap)
}

.question-evidence {
    width:100%;
    max-width:1000px;
    flex-shrink:0;
    margin-inline:auto
}

.question-evidence[role="button"] {
    cursor:pointer;
    border-radius:10px
}

.question-evidence[role="button"]:focus-visible,.quiz-round .question-media:focus-visible {
    outline:3px solid var(--focus);
    outline-offset:5px
}

.quiz-round .question-title {
    font-size:clamp(28px,calc(18px + 1.1vw + 1dvh),60px);
    line-height:1.25;
    letter-spacing:-.6px;
    margin:0;
    text-align:center;
    overflow-wrap:anywhere
}

.quiz-round .question-card--description .question-title {
    max-width:65ch;
    margin-inline:auto;
    font-size:clamp(16px,calc(10px + .5vw + .5dvh),30px);
    font-weight:550;
    line-height:1.4;
    letter-spacing:-.2px;
    text-align:left
}

.quiz-round .question-title--image {
    font-size:20px;
    margin-bottom:10px
}

.question-card--image .question-stage {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(80px,1fr) auto;
    justify-content:stretch
}

.question-card--image .question-evidence {
    display:flex;
    flex-direction:column;
    max-width:none;
    min-height:0
}

.quiz-round .question-media {
    flex:1;
    min-height:0;
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    border:0;
    background:transparent
}

.quiz-round .prompt-image {
    height:100%;
    min-height:0
}

.quiz-round .prompt-image[src$=".svg"] {
    filter:drop-shadow(0 1px 3px #173d3533)
}

/* Keep the control row reserved while the clue floats inside the photo's corner. */
.question-evidence:has(.prompt-hint) {
    position:relative
}

.prompt-hint-slot {
    flex:0 0 44px;
    width:100%;
    height:44px;
    margin-inline:auto
}

.prompt-hint {
    width:min(100%,640px);
    margin-inline:auto;
    font-size:14px;
    line-height:1.4;
    text-align:center
}

.prompt-hint>summary {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    width:max-content;
    max-width:100%;
    margin-inline:auto;
    padding:4px 12px;
    cursor:pointer;
    color:var(--green);
    border-radius:8px;
    list-style:none
}

.prompt-hint>summary::-webkit-details-marker {
    display:none
}

.prompt-hint>summary::before {
    content:"+";
    font-size:18px;
    font-weight:650
}

.prompt-hint[open]>summary::before {
    content:"−"
}

.prompt-hint-content {
    position:absolute;
    z-index:5;
    left:calc(var(--prompt-photo-left,0px) + 12px);
    bottom:calc(var(--prompt-photo-bottom,44px) + 12px);
    width:max-content;
    max-width:min(640px,calc(var(--prompt-photo-width,100%) - 24px));
    padding:12px 16px;
    border:1px solid rgb(255 255 255 / .25);
    border-radius:12px;
    background:rgb(15 30 25 / .7);
    color:#fff;
    font-size:clamp(16px,1.2vw,22px);
    font-weight:600;
    text-align:left;
    text-shadow:0 1px 2px rgb(0 0 0 / .5);
    box-shadow:0 4px 18px rgb(0 0 0 / .15);
    overflow-wrap:anywhere
}

.quiz-round .answer-area {
    position:relative;
    width:100%;
    max-width:1360px;
    margin-inline:auto;
    flex-shrink:0
}

/* Keep the last choice clear of the dock when enlarged content needs scrolling. */
.quiz-round .answer-area::after {
    content:"";
    position:absolute;
    top:100%;
    left:0;
    width:1px;
    height:calc(var(--play-dock-space) + env(safe-area-inset-bottom));
    pointer-events:none
}

.quiz-round:is([data-option-count="2"],[data-option-count="3"],[data-option-count="4"]) .answer-area {
    max-width:1040px
}

.quiz-round .answer-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--play-option-gap)
}

.quiz-round .answer-option {
    scroll-margin-bottom:calc(var(--play-dock-space) + env(safe-area-inset-bottom));
    min-width:0;
    min-height:var(--play-option-height);
    padding:6px 26px 6px clamp(8px,.8vw,14px);
    gap:clamp(6px,.5vw,10px);
    border-width:2px;
    font-size:clamp(15px,calc(12px + .35vw),20px);
    line-height:1.2;
    flex-wrap:nowrap;
    transform:none
}

.quiz-round .answer-option>span[lang] {
    min-width:0;
    overflow-wrap:anywhere
}

.quiz-round .answer-option:is(.is-correct,.is-wrong) {
    padding-right:26px
}

.quiz-round .option-letter {
    width:clamp(24px,1.2vw,28px);
    height:clamp(24px,1.2vw,28px)
}

.quiz-round .answer-option:has(.flag-image) {
    min-height:var(--play-option-height);
    padding:6px 26px 6px 10px;
    flex-direction:row;
    justify-content:center
}

.quiz-round .answer-option:has(.flag-image) .option-letter {
    position:static
}

.quiz-round .flag-image {
    width:clamp(76px,5vw,100px);
    height:clamp(42px,4dvh,54px)
}

.answer-mark {
    position:absolute;
    top:6px;
    right:7px;
    font-size:16px;
    font-weight:750
}

.round-actions {
    position:fixed;
    z-index:5;
    bottom:calc(var(--play-dock-bottom) + env(safe-area-inset-bottom));
    left:50%;
    transform:translateX(-50%);
    width:min(calc(100% - 2 * var(--play-gutter)),calc(var(--play-width) - 2 * var(--play-gutter)));
    display:flex;
    align-items:center;
    gap:12px;
    height:var(--play-dock-height);
    padding:6px 8px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--card);
    box-shadow:0 3px 22px #183b301a
}

.quiz-round .question-hint {
    flex:1;
    margin:0;
    font-size:13px
}

.quiz-round .feedback {
    display:flex;
    align-items:center;
    gap:8px;
    flex:1;
    min-width:0;
    min-height:46px;
    margin:0;
    padding:0 10px;
    font-size:14px;
    line-height:1.4
}

.feedback-copy {
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0
}

.prompt-advance-hint {
    font-size:11px;
    color:var(--muted);
    line-height:1.3
}

.answer-explanation>summary {
    display:flex;
    align-items:center;
    min-height:44px;
    width:fit-content;
    font-size:13px;
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:3px
}

.answer-explanation>summary::before {
    content:"+";
    margin-right:5px;
    font-weight:700
}

.answer-explanation[open]>summary::before {
    content:"−"
}

.explanation-panel {
    position:absolute;
    bottom:calc(100% + 8px);
    left:auto;
    right:0;
    width:100%;
    max-width:900px;
    max-height:min(50dvh,400px);
    overflow:auto;
    overscroll-behavior:contain;
    padding:18px 20px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--card);
    color:var(--ink);
    box-shadow:0 8px 28px #183b3026
}

.explanation-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px
}

.explanation-heading h2 {
    font-size:18px;
    letter-spacing:0
}

.explanation-close {
    min-height:44px;
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--paper);
    color:var(--ink)
}

.quiz-round .feedback p {
    margin:12px 0 0;
    font-size:14px;
    line-height:1.65
}

.quiz-round .next-form {
    flex-shrink:0;
    margin:0
}

.quiz-round .next-form .primary-button,.quiz-round .next-placeholder {
    width:112px;
    height:44px;
    min-height:44px;
    white-space:nowrap;
    padding:10px 16px;
    font-size:14px
}

.quiz-round .next-placeholder {
    cursor:default;
    opacity:.45
}

.quiz-round[aria-busy="true"] button {
    cursor:wait
}

.quiz-round[aria-busy="true"] .answer-option {
    opacity:.6
}

.quiz-recovery {
    scroll-margin-bottom:calc(var(--play-dock-space) + env(safe-area-inset-bottom));
    padding:14px;
    border:1px solid var(--danger-border);
    border-radius:12px;
    background:var(--danger-bg);
    color:var(--danger);
    font-size:14px;
    line-height:1.6
}

.quiz-recovery p {
    margin:0 0 8px
}

/* Match columns to the number of choices without enlarging individual cards. */
@media (min-width:600px) {
    .quiz-round:is([data-option-count="3"],[data-option-count="5"],[data-option-count="6"]) .answer-grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }

    .quiz-round:is([data-option-count="7"],[data-option-count="8"],[data-option-count="9"],[data-option-count="10"]) .answer-grid {
        grid-template-columns:repeat(4,minmax(0,1fr))
    }
}

@media (min-width:1100px) {
    .quiz-round:is([data-option-count="9"],[data-option-count="10"]) .answer-grid {
        grid-template-columns:repeat(5,minmax(0,1fr))
    }
}

@media (max-width:759px) {
    .quiz-playing {
        --play-gutter:8px;
        --play-card-padding:12px;
        --play-gap:12px;
        --play-option-gap:6px;
        --play-dock-height:56px;
        --play-dock-bottom:6px;
        --play-dock-space:72px
    }

    .quiz-round {
        gap:6px
    }

    .quiz-round .question-card {
        border-radius:16px
    }

    .quiz-round .option-letter {
        display:none
    }

    .round-actions {
        gap:8px;
        padding:4px 6px
    }

    .quiz-round .feedback {
        gap:6px;
        padding:0 6px;
        min-height:44px
    }

    .quiz-round .next-form .primary-button,.quiz-round .next-placeholder {
        width:88px;
        padding:10px 12px;
        font-size:13px
    }

    .answer-explanation>summary {
        font-size:12px
    }

    .prompt-advance-hint {
        font-size:10px
    }

    .explanation-panel {
        padding:12px 14px
    }
}

@media (max-width:600px) {
    .quiz-round .round-heading {
        gap:8px
    }

    .quiz-round .back-link {
        font-size:20px
    }

    .back-link-label,.score-full,.quiz-round .progress-copy .muted {
        display:none
    }

    .score-compact {
        display:inline
    }

    .round-progress {
        max-width:none
    }
}

/* Short windows save space in chrome and gaps, keeping text and targets readable. */
@media (max-height:640px) {
    .quiz-playing {
        --play-card-padding:8px;
        --play-gap:8px;
        --play-option-gap:4px;
        --play-option-height:44px;
        --play-dock-height:54px;
        --play-dock-bottom:4px;
        --play-dock-space:64px
    }

    .quiz-playing .container {
        padding-top:6px
    }

    .quiz-round {
        gap:6px
    }

    .quiz-round .question-card {
        gap:6px
    }

    .quiz-round .progress-copy .muted,.quiz-round .option-letter {
        display:none
    }

    .quiz-round .question-card--description .question-title {
        font-size:16px;
        line-height:1.25
    }

    .quiz-round .answer-option {
        padding:4px 22px 4px 6px;
        font-size:14px;
        line-height:1.2
    }

    .quiz-round .answer-option:is(.is-correct,.is-wrong) {
        padding-right:22px
    }

    .quiz-round .answer-option:has(.flag-image) {
        padding:3px 22px 3px 6px
    }

    .quiz-round .flag-image {
        width:64px;
        height:32px
    }

    .round-actions {
        padding:4px 6px
    }

    .quiz-round .feedback {
        min-height:44px
    }
}

@media (max-width:359px) {
    .quiz-playing {
        --play-gutter:6px;
        --play-card-padding:8px
    }

    .prompt-advance-hint {
        display:none
    }
}

@media (max-height:500px) and (min-width:700px) {
    .quiz-round:is([data-option-count="5"],[data-option-count="9"],[data-option-count="10"]) .answer-grid {
        grid-template-columns:repeat(5,minmax(0,1fr))
    }
}

@media (max-height:420px) {
    .quiz-playing {
        --play-card-padding:6px;
        --play-gap:6px
    }

    .quiz-playing .container {
        padding-top:4px
    }

    .quiz-round {
        gap:4px
    }

    .quiz-round .question-card {
        gap:4px
    }

    .question-card--image .question-stage {
        grid-template-rows:minmax(48px,1fr) auto
    }
}

.answer-mark-inline {
    display:none
}

/* Leave breathing room around city names, including space for feedback marks. */
.quiz-round[data-topic="architecture"][data-variant="image_to_city"] .answer-option {
    padding:clamp(8px,1dvh,12px) 32px clamp(8px,1dvh,12px) clamp(12px,1.2vw,20px)
}

/* Artwork titles and joint artist credits use width before taking image height. */
.quiz-round[data-topic="paintings"]:is([data-option-count="5"],[data-option-count="6"],[data-option-count="7"],[data-option-count="8"],[data-option-count="9"],[data-option-count="10"]) .answer-area {
    max-width:none
}

.quiz-round[data-topic="paintings"] .answer-option {
    font-size:clamp(14px,calc(12px + .25vw),18px)
}

/* Long book titles remain compact while retaining the complete visible text. */
.quiz-round[data-topic="literature"][data-variant="plot_to_book"] .answer-option {
    font-size:clamp(14px,calc(12px + .25vw),18px)
}

/* Chemical symbols stay upright, correctly cased, and distinct from numbering. */
.quiz-round[data-topic="chemical_elements"][data-variant="element_to_symbol"] .answer-option {
    justify-content:center;
    padding:6px 26px;
    font-size:clamp(22px,calc(18px + .35vw),28px);
    font-weight:650;
    font-style:normal;
    text-transform:none
}

.quiz-round[data-topic="chemical_elements"][data-variant="element_to_symbol"] .option-letter {
    display:none
}

@media (max-width:600px) {
    .quiz-round[data-topic="paintings"][data-variant="image_to_title"] .answer-option,
    .quiz-round[data-topic="paintings"][data-variant="image_to_title"] .answer-option:is(.is-correct,.is-wrong) {
        padding:3px 6px;
        line-height:1.12
    }

    .quiz-round[data-topic="paintings"][data-variant="image_to_title"] :is(.option-letter,.answer-mark) {
        display:none
    }

    .quiz-round[data-topic="paintings"][data-variant="image_to_title"] .answer-mark-inline {
        display:inline-block;
        width:1.2em;
        margin-left:.25em;
        text-align:center;
        font-weight:800
    }
}

@media (max-width:359px) and (max-height:640px) {
    .quiz-round[data-topic="paintings"][data-variant="image_to_title"]:is([data-option-count="7"],[data-option-count="8"],[data-option-count="9"],[data-option-count="10"]) .eyebrow {
        display:none
    }

    .quiz-round[data-topic="paintings"][data-variant="image_to_title"] .answer-option,
    .quiz-round[data-topic="paintings"][data-variant="image_to_title"] .answer-option:is(.is-correct,.is-wrong) {
        padding-block:2px
    }
}

/* Self-check keeps the question and its controls together as one recall card. */
.quiz-round[data-mode="self_check"] {
    /* Reserve both hint rows before any answer content reaches the browser. */
    --self-check-response-space:max(160px,calc(2 * var(--play-option-height) + var(--play-option-gap) + 26px));
    --self-check-actions-padding:12px
}

.quiz-round[data-mode="self_check"][data-topic="paintings"] {
    /* Leave room for wrapped artwork titles and complete joint artist credits. */
    --self-check-response-space:192px
}

.quiz-playing:has(.quiz-round[data-mode="self_check"]) {
    --play-dock-space:0px
}

.quiz-playing:has(.quiz-round[data-mode="self_check"]) .container {
    padding-bottom:calc(var(--play-gutter) + env(safe-area-inset-bottom))
}

.quiz-round[data-mode="self_check"] .question-card {
    position:relative
}

.quiz-round[data-mode="self_check"] .question-card:not(.question-card--image) {
    flex:0 0 auto;
    width:min(100%,1040px);
    align-self:center;
    margin-block:auto
}

.quiz-round[data-mode="self_check"] .question-card:not(.question-card--image) .question-stage {
    flex:0 0 auto;
    padding-block:clamp(8px,1.5dvh,20px)
}

.quiz-round[data-mode="self_check"] .question-stage[role="button"] {
    cursor:pointer;
    border-radius:12px
}

.quiz-round[data-mode="self_check"] .question-stage[role="button"]:focus-visible {
    outline:3px solid var(--focus);
    outline-offset:3px
}

.quiz-round[data-mode="self_check"] .answer-area::after {
    content:none
}

.self-check-response {
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100%;
    min-height:var(--self-check-response-space);
    flex-shrink:0
}

.quiz-round[data-mode="self_check"] .round-actions {
    position:static;
    transform:none;
    width:100%;
    max-width:1040px;
    height:auto;
    min-height:calc(var(--self-check-actions-padding) + 68px);
    flex-shrink:0;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px 10px;
    margin-inline:auto;
    padding:var(--self-check-actions-padding) 0 0;
    border:0;
    border-top:1px solid var(--line);
    border-radius:0;
    background:transparent;
    box-shadow:none
}

.quiz-round[data-mode="self_check"] .hints-form {
    flex:0 1 auto
}

.quiz-round[data-mode="self_check"] .hints-form .secondary-button {
    width:auto;
    min-width:148px
}

.quiz-round[data-mode="self_check"] .self-check-feedback {
    flex:0 1 auto;
    padding:0;
    min-height:44px
}

.quiz-round[data-mode="self_check"] .self-check-feedback .feedback-copy {
    display:flex;
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0
}

.quiz-round[data-mode="self_check"] .answer-explanation>summary::before {
    display:inline-flex;
    flex:0 0 1em;
    justify-content:center
}

.quiz-round[data-mode="self_check"] .self-check-gesture-hint {
    flex-basis:100%;
    margin:0;
    color:var(--muted);
    font-size:12px;
    line-height:1.4;
    text-align:center
}

.quiz-round[data-mode="self_check"] .explanation-panel {
    top:auto;
    bottom:calc(var(--play-card-padding) + 44px + 1.4em + 22px);
    left:var(--play-card-padding);
    right:var(--play-card-padding);
    width:auto;
    max-width:900px;
    max-height:min(50dvh,400px,calc(100% - 2 * var(--play-card-padding) - 44px - 1.4em - 22px));
    margin-inline:auto;
    padding:12px 14px;
    z-index:1
}

.quiz-round[data-mode="self_check"] .explanation-heading {
    position:sticky;
    top:-12px;
    padding-bottom:8px;
    background:var(--card)
}

.self-check-hints .answer-grid {
    list-style:none;
    margin:0;
    padding:0
}

.self-check-hints-title {
    margin:0 0 8px;
    color:var(--muted);
    font-size:13px;
    font-weight:500;
    letter-spacing:0
}

.self-check-hints:focus {
    outline:none
}

.self-check-answer {
    padding:12px 16px;
    border:1px solid var(--line);
    border-radius:13px;
    background:var(--paper);
    text-align:center
}

.self-check-answer h2 {
    margin:0 0 5px;
    color:var(--muted);
    font-size:12px;
    font-weight:500;
    line-height:1.4;
    letter-spacing:0
}

.revealed-answer-content {
    font-size:clamp(20px,calc(16px + .6vw),32px);
    font-weight:650;
    line-height:1.25;
    overflow-wrap:anywhere
}

.answer-caption {
    margin:6px 0 0;
    color:var(--muted);
    font-size:clamp(14px,calc(10px + .4vw),18px);
    font-weight:400;
    line-height:1.4;
    overflow-wrap:anywhere
}

.answer-caption-slot {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:2.8em;
    margin-top:6px;
    font-size:clamp(12px,calc(8px + .4vw),14px);
    line-height:1.4;
    text-align:center
}

.answer-caption-slot .answer-caption {
    margin:0;
    font-size:inherit
}

.review-answers .answer-caption {
    font-size:13px
}

.quiz-round[data-topic="chemical_elements"][data-variant="element_to_symbol"] .revealed-answer-content {
    font-size:clamp(28px,calc(22px + .6vw),40px);
    font-style:normal;
    text-transform:none
}

.self-check-feedback {
    color:var(--ink);
    background:transparent
}

.hints-form {
    flex:1;
    min-width:0;
    margin:0
}

.secondary-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:8px 14px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--card);
    color:var(--green);
    font-size:13px;
    font-weight:600;
    line-height:1.2
}

.secondary-button:hover {
    border-color:var(--green);
    background:var(--paper)
}

.reveal-form {
    flex-shrink:0;
    margin:0
}

.quiz-round[data-mode="self_check"] :is(.reveal-form,.next-form) .primary-button {
    width:148px;
    height:44px;
    min-height:44px;
    padding:8px 12px;
    font-size:14px;
    line-height:1.2;
    white-space:nowrap
}

@media (max-width:600px) {
    .quiz-round[data-mode="self_check"] :is(.reveal-form,.next-form) .primary-button {
        width:132px;
        font-size:13px
    }

    .hints-form .secondary-button {
        width:100%;
        padding-inline:5px;
        font-size:12px
    }

    .quiz-round[data-mode="self_check"] .hints-form .secondary-button {
        min-width:132px
    }

    .quiz-round[data-mode="self_check"] .question-hint {
        font-size:12px
    }

    .self-check-answer {
        padding:8px 10px
    }

    .self-check-hints-title {
        font-size:12px;
        margin-bottom:6px
    }
}

@media (max-height:640px) {
    .quiz-round[data-mode="self_check"] {
        --self-check-actions-padding:8px
    }
}

@media (max-height:420px) and (min-width:600px) {
    .quiz-round[data-mode="self_check"],.quiz-round[data-mode="self_check"][data-topic="paintings"] {
        --self-check-response-space:120px
    }

    .quiz-round[data-mode="self_check"] .answer-grid {
        grid-template-columns:repeat(4,minmax(0,1fr))
    }
}

/* Use the whole phone screen; keep reading and touch insets inside the surface. */
@media (max-width:767px), (max-width:959px) and (max-height:500px) {
    :root {
        --page-inset-left:max(16px,env(safe-area-inset-left));
        --page-inset-right:max(16px,env(safe-area-inset-right));
        background:var(--card)
    }

    .site-header,.site-footer {
        padding:14px var(--page-inset-right) 14px var(--page-inset-left)
    }

    .site-header {
        padding-top:max(14px,env(safe-area-inset-top))
    }

    .site-footer {
        padding-bottom:max(14px,env(safe-area-inset-bottom))
    }

    .header-note {
        display:none
    }

    .container {
        max-width:none;
        padding:24px var(--page-inset-right) 32px var(--page-inset-left)
    }

    .hero {
        margin-bottom:24px
    }

    .setup-card,.review-card {
        margin-left:calc(-1 * var(--page-inset-left));
        margin-right:calc(-1 * var(--page-inset-right));
        padding:24px var(--page-inset-right) 24px var(--page-inset-left);
        border:0;
        border-radius:0;
        box-shadow:none
    }

    .review-card+.review-card {
        border-top:1px solid var(--line)
    }

    .section-heading {
        flex-wrap:wrap
    }

    .fabrics-guide,.fabrics-filters,.fabric-summary,.fabric-care {
        margin-left:calc(-1 * var(--page-inset-left));
        margin-right:calc(-1 * var(--page-inset-right));
        padding-left:var(--page-inset-left);
        padding-right:var(--page-inset-right);
        border-inline:0;
        border-radius:0
    }

    .quiz-playing {
        --play-gutter:0px;
        --play-dock-bottom:0px
    }

    .quiz-playing .container {
        padding-top:env(safe-area-inset-top);
        padding-inline:0
    }

    .quiz-round .round-heading {
        margin-left:max(12px,env(safe-area-inset-left));
        margin-right:max(12px,env(safe-area-inset-right))
    }

    .quiz-round .question-card {
        padding-left:max(var(--play-card-padding),env(safe-area-inset-left));
        padding-right:max(var(--play-card-padding),env(safe-area-inset-right));
        border:0;
        border-radius:0;
        box-shadow:none
    }

    .quiz-round[data-mode="single_choice"] .round-actions {
        bottom:0;
        height:calc(var(--play-dock-height) + env(safe-area-inset-bottom));
        padding:4px max(12px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
        border-width:1px 0 0;
        border-radius:0;
        box-shadow:none
    }
}