:root {
    --smurdy-blue: #0077cc;
    --smurdy-blue-dark: #005fa3;
    --smurdy-action-blue: #005fa3;
    --smurdy-action-blue-hover: #004b82;
    --smurdy-text: #161616;
    --smurdy-muted: #555;
    --smurdy-line: rgba(0, 0, 0, 0.12);
    --smurdy-surface: rgba(255, 255, 255, 0.96);
    --smurdy-surface-soft: #f5f7f8;
    --smurdy-radius-sm: 4px;
    --smurdy-radius-md: 5px;
    --smurdy-radius-lg: 8px;
    --smurdy-radius: var(--smurdy-radius-md);
    --smurdy-panel-border: 1px solid rgba(0, 0, 0, 0.09);
    --smurdy-shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.09);
    --smurdy-space-1: 4px;
    --smurdy-space-2: 8px;
    --smurdy-space-3: 12px;
    --smurdy-space-4: 16px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--smurdy-text);
    font-family: Arial, Helvetica, sans-serif;
}

button, input { font: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(0, 119, 204, 0.35);
    outline-offset: 3px;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

#map {
    width: 100%;
    height: 100%;
}

#quiz-panel {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1000;
    display: inline-block;
    width: auto;
    min-width: 240px;
    max-width: min(420px, 92vw);
    padding: 12px 16px;
    background: var(--smurdy-surface);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--smurdy-radius);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.panel-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    color: inherit;
    text-decoration: none;
}

.panel-brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.panel-brand-name {
    color: #000;
    font-size: 17px;
    font-weight: 750;
    line-height: 1;
}

#quiz-target {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.25;
}

html:not(.smurdy-quiz-active) #quiz-target {
    font-weight: 700;
}

.about-header {
    margin: 16px 0 4px;
    color: var(--smurdy-muted);
    font-size: 18px;
    line-height: 1.3;
}

#quiz-desc {
    margin-top: 8px;
    color: #333;
    font-size: 15px;
    line-height: 1.5;
}

#quiz-desc p { margin: 5px 0; }

#quiz-desc a {
    color: #075f9e;
    text-underline-offset: 3px;
}

#quiz-progress,
#quiz-accuracy,
#quiz-result {
    margin-top: 6px;
    font-size: 15px;
}

#quiz-result { min-height: 20px; }

#quiz-timer {
    margin-top: 6px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

#quiz-stats { display: none; }

#quiz-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

#quiz-buttons .qb-btn,
#quiz-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--smurdy-line);
    border-radius: 8px;
    background: #f5f5f5;
    color: #111;
    cursor: pointer;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

#quiz-buttons .qb-btn:hover,
#quiz-buttons button:hover { background: #eaeaea; }

#quiz-buttons .qb-btn.primary {
    border-color: var(--smurdy-blue);
    background: var(--smurdy-blue);
    color: #fff;
}

#quiz-buttons .qb-btn.primary:hover { background: var(--smurdy-blue-dark); }

#quiz-restart[style*="display:none"],
#quiz-back[style*="display:none"] { display: none !important; }

#qb-directory-fallback {
    padding: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px !important;
    background: var(--smurdy-surface) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16) !important;
    font-family: inherit !important;
}

#qb-directory-fallback strong {
    display: block;
    margin-bottom: 9px;
    font-size: 18px;
}

#qb-directory-fallback > a {
    display: inline-flex;
    min-height: 42px;
    margin: 0 6px 9px 0;
    padding: 10px 14px;
    align-items: center;
    border-radius: 8px;
    background: var(--smurdy-action-blue);
    color: #fff;
    font-weight: 750;
    text-decoration: none;
}

#qb-directory-fallback > a:hover,
#qb-directory-fallback > a:focus-visible {
    background: var(--smurdy-action-blue-hover);
}

#qb-directory-fallback > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#qb-directory-fallback > div a {
    color: #075f9e;
    text-underline-offset: 3px;
}

#mobile-map-attrib { display: none; }

@media (max-width: 700px) {
    :root {
        --mobile-panel-h-gap: 24px;
        --mobile-panel-max: min(860px, 92vw);
    }

    #quiz-panel {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        left: 50%;
        z-index: 2200;
        display: flex;
        width: calc(100% - var(--mobile-panel-h-gap));
        max-width: var(--mobile-panel-max);
        padding: 10px 12px;
        transform: translateX(-50%);
        flex-direction: column;
        align-items: center;
        background: var(--smurdy-surface);
        border-radius: var(--smurdy-radius);
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
    }

    #quiz-target {
        margin: 0;
        padding: 4px 42px;
        font-size: 18px;
        text-align: center;
    }

    #quiz-panel[data-quiz-target-kind="instruction"] #quiz-target {
        font-size: 17px;
        font-weight: 650;
        letter-spacing: 0;
    }

    #quiz-panel[data-quiz-target-kind="place"] #quiz-target {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.005em;
    }

    #quiz-progress,
    #quiz-accuracy,
    #quiz-timer { display: none !important; }

    #quiz-stats {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 6px;
        color: rgba(0, 0, 0, 0.85);
        font-size: 16px;
        font-weight: 650;
        line-height: 1;
    }

    #quiz-stats span {
        display: inline-block;
        min-width: 48px;
        text-align: center;
    }

    #quiz-bottom {
        position: fixed;
        bottom: max(12px, env(safe-area-inset-bottom));
        left: 50%;
        z-index: 2200;
        display: flex;
        width: calc(100% - var(--mobile-panel-h-gap));
        max-width: var(--mobile-panel-max);
        min-height: 80px;
        padding: 14px 12px;
        transform: translateX(-50%);
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 10px;
        background: var(--smurdy-surface);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: var(--smurdy-radius);
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
    }

    #type-quiz-controls {
        display: flex !important;
        width: 100%;
        gap: 8px !important;
    }

    #type-quiz-controls input {
        min-width: 0;
        padding: 12px 14px;
        flex: 1;
        border-radius: 9px;
        font-size: 18px;
    }

    #type-quiz-controls button {
        min-height: 46px;
        padding: 12px 14px;
        border-radius: 9px;
        font-size: 18px;
        white-space: nowrap;
    }

    #quiz-buttons {
        width: 100%;
        gap: 10px;
    }

    #quiz-buttons .qb-btn,
    #quiz-buttons button,
    #quiz-buttons .qb-btn.primary {
        min-width: 0;
        min-height: 50px;
        margin-right: 0;
        padding: 13px 14px;
        flex: 1 1 0;
        border-radius: 9px;
        font-size: 17px;
    }

    #mobile-map-attrib.mobile-attrib {
        position: absolute;
        top: 8px;
        right: 10px;
        z-index: 2600;
        display: block;
    }

    #mobile-map-attrib .mobile-attrib-btn {
        display: inline-flex;
        width: 38px;
        height: 38px;
        padding: 0;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.06);
        color: #111;
        cursor: pointer;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
    }

    #mobile-map-attrib .mobile-attrib-content {
        position: absolute;
        top: 44px;
        right: 0;
        display: none;
        width: min(260px, 78vw);
        padding: 9px 11px;
        border: 1px solid var(--smurdy-line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
        color: rgba(0, 0, 0, 0.85);
        font-size: 12px;
        line-height: 1.35;
    }

    #mobile-map-attrib.open .mobile-attrib-content { display: block; }

    #mobile-map-attrib .mobile-attrib-content a {
        color: inherit;
        text-decoration: underline;
    }
}

@media (min-width: 701px) {
    #mobile-map-attrib { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Weak Spots and post-quiz review */
.weak-spots-menu-button{display:inline-flex;min-height:42px;margin-top:12px;padding:9px 13px;align-items:center;gap:8px;border:1px solid var(--smurdy-line);border-radius:8px;background:#f5f5f5;color:#111;cursor:pointer;font-size:14px;font-weight:700}
.weak-spots-menu-button:hover{background:#eaeaea}
.weak-spots-count{min-width:22px;padding:2px 6px;border-radius:4px;background:var(--smurdy-blue);color:#fff;font-size:12px;line-height:18px;text-align:center}
#weak-spots-dialog{width:min(560px,calc(100vw - 28px));max-height:min(680px,calc(100dvh - 28px));padding:0;overflow:hidden;border:1px solid rgba(0,0,0,.14);border-radius:12px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.26);color:var(--smurdy-text)}
#weak-spots-dialog::backdrop{background:rgba(0,0,0,.42)}
.weak-spots-dialog-card{display:flex;max-height:min(680px,calc(100dvh - 28px));flex-direction:column}
.weak-spots-dialog-header{display:flex;padding:20px 20px 14px;align-items:flex-start;justify-content:space-between;gap:18px;border-bottom:1px solid var(--smurdy-line)}
.weak-spots-dialog-header h2{margin:0 0 4px;font-size:22px;line-height:1.2}
.weak-spots-dialog-header p{margin:0;color:var(--smurdy-muted);font-size:14px;line-height:1.4}
#weak-spots-close{width:38px;height:38px;flex:0 0 auto;border:0;border-radius:50%;background:#f1f1f1;color:#222;cursor:pointer;font-size:26px;line-height:1}
.weak-spots-list{margin:0;padding:8px 20px;overflow:auto;list-style:none}
.weak-spot-item{padding:12px 0;border-bottom:1px solid var(--smurdy-line)}
.weak-spot-item:last-child{border-bottom:0}
.weak-spot-main{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.weak-spot-name{font-weight:700;line-height:1.3}
.weak-spot-group,.weak-spot-mode{display:inline-flex;min-height:24px;padding:3px 8px;align-items:center;border-radius:6px;font-size:12px;font-weight:650;line-height:1.2}
.weak-spot-group{background:#f1f3f5;color:#4c5157}
.weak-spot-mode{border:1px solid rgba(0,119,204,.22);background:rgba(0,119,204,.07);color:#075f9e}
.weak-spot-meta{margin-top:4px;color:var(--smurdy-muted);font-size:13px;line-height:1.4}
.weak-spots-empty{display:flex;min-height:150px;align-items:center;justify-content:center;flex-direction:column;gap:5px;color:var(--smurdy-muted);text-align:center}
.weak-spots-empty strong{color:var(--smurdy-text)}
.weak-spots-dialog-footer{display:flex;padding:13px 20px;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--smurdy-line);color:var(--smurdy-muted);font-size:12px}
.weak-spots-dialog-actions{display:flex;align-items:center;gap:8px}
#weak-spots-clear,#weak-spots-retry{min-height:36px;padding:7px 10px;border:1px solid var(--smurdy-line);border-radius:7px;background:#fff;cursor:pointer;font-size:12px;font-weight:700}
#weak-spots-clear{color:#8a1e1e}
#weak-spots-retry{border-color:var(--smurdy-blue);background:var(--smurdy-blue);color:#fff}
#weak-spots-retry:hover{background:var(--smurdy-blue-dark)}
#quiz-review{margin-top:12px;padding-top:12px;border-top:1px solid var(--smurdy-line)}
.quiz-review-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.quiz-review-heading{display:block;font-size:15px;font-weight:700;line-height:1.3}
.quiz-review-summary{display:block;margin-top:2px;color:var(--smurdy-muted);font-size:12px;line-height:1.35}
#quiz-review-retry{min-height:38px;padding:8px 11px;flex:0 0 auto;border:1px solid var(--smurdy-blue);border-radius:8px;background:var(--smurdy-blue);color:#fff;cursor:pointer;font-size:13px;font-weight:700}
#quiz-review-retry:hover{background:var(--smurdy-blue-dark)}
.quiz-review-list{display:grid;max-height:170px;margin:10px 0 0;padding:0;overflow:auto;gap:6px;list-style:none}
.quiz-review-country{display:block;width:100%;padding:8px 10px;border:1px solid var(--smurdy-line);border-radius:7px;background:#fafafa;color:#111;cursor:pointer;text-align:left}
.quiz-review-country:hover{background:#f0f0f0}
.quiz-review-country-name{display:block;font-size:13px;font-weight:700;line-height:1.3}
.quiz-review-country-detail{display:block;margin-top:2px;color:var(--smurdy-muted);font-size:11px;line-height:1.35}
@media(max-width:700px){
 #quiz-panel:has(#quiz-review:not([hidden])){max-height:min(48dvh,430px);overflow:auto;align-items:stretch}
 #quiz-panel:has(#quiz-review:not([hidden])) .panel-brand,#quiz-panel:has(#quiz-review:not([hidden])) #quiz-target,#quiz-panel:has(#quiz-review:not([hidden])) #quiz-stats{align-self:center}
 .quiz-review-list{max-height:120px}
 .weak-spots-dialog-header,.weak-spots-dialog-footer{padding-left:16px;padding-right:16px}
 .weak-spots-dialog-footer{align-items:flex-start;flex-direction:column}
 .weak-spots-dialog-actions{width:100%}
 #weak-spots-clear,#weak-spots-retry{flex:1}
 .weak-spots-list{padding-left:16px;padding-right:16px}
}

#weak-spots-practice-next{
    display:flex;
    margin-top:12px;
    padding:12px;
    align-items:center;
    gap:10px;
    border:1px solid var(--smurdy-line);
    border-radius:8px;
    background:#f7f8fa;
}
#weak-spots-practice-next[hidden]{display:none}
#weak-spots-practice-next strong{font-size:13px}
#weak-spots-practice-next span{margin-right:auto;color:var(--smurdy-muted);font-size:12px}
#weak-spots-practice-next button{
    min-height:36px;
    padding:7px 10px;
    border:1px solid var(--smurdy-blue);
    border-radius:7px;
    background:var(--smurdy-blue);
    color:#fff;
    cursor:pointer;
    font-size:12px;
    font-weight:700;
}
@media(max-width:700px){
    #weak-spots-practice-next{align-items:stretch;flex-direction:column}
    #weak-spots-practice-next span{margin-right:0}
}


/* smurdy-ui-coherence-v1 */
#quiz-panel,
#quiz-bottom,
#qb-directory-fallback {
    border: var(--smurdy-panel-border);
    border-radius: var(--smurdy-radius-lg);
    box-shadow: var(--smurdy-shadow-panel);
}

.home-summary {
    max-width: 34ch;
}

.home-about-details {
    margin-top: var(--smurdy-space-3);
    border-top: 1px solid var(--smurdy-line);
    padding-top: 10px;
}

.home-about-details summary {
    color: #333;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}

.home-about-details-body {
    padding: 5px 0 1px;
    color: var(--smurdy-muted);
    font-size: 13px;
}

#quiz-giveup {
    border-color: rgba(138, 48, 48, 0.28);
    background: #fff7f7;
    color: #833030;
}

#quiz-giveup:hover {
    background: #fbecec;
}

.weak-spot-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--smurdy-space-3);
}

.weak-spot-name {
    min-width: 0;
}

.weak-spot-meta {
    min-width: 62px;
    margin-top: 0;
    padding: 3px 8px;
    flex: 0 0 auto;
    border-radius: 4px;
    background: #edf6fc;
    color: #075f9e;
    font-size: 12px;
    font-weight: 750;
    text-align: center;
}

@media (min-width: 701px) {
    #quiz-target {
        font-size: 24px;
        font-weight: 800;
        letter-spacing: -0.015em;
    }

    #quiz-panel[data-quiz-target-kind="instruction"] #quiz-target {
        font-size: 20px;
        font-weight: 650;
        letter-spacing: 0;
    }

    #quiz-panel[data-quiz-target-kind="place"] #quiz-target {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    #quiz-timer {
        color: #444;
        font-size: 22px;
        font-weight: 650;
    }
}

@media (max-width: 700px) {
    #type-quiz-controls {
        margin-top: 0 !important;
        padding-bottom: 10px;
    }

    #type-quiz-controls ~ #quiz-buttons {
        margin-top: 0;
        padding-top: 10px;
        border-top: 1px solid var(--smurdy-line);
    }
}


/* Weak Spots visual hierarchy */
#weak-spots-dialog .weak-spot-item{display:block}
#weak-spots-dialog .weak-spot-main{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
#weak-spots-dialog .weak-spot-name{min-width:0;font-weight:700;line-height:1.3}
#weak-spots-dialog .weak-spot-group,#weak-spots-dialog .weak-spot-mode{display:inline-flex;min-height:24px;padding:3px 8px;align-items:center;border-radius:6px;font-size:12px;font-weight:650;line-height:1.2;white-space:nowrap}
#weak-spots-dialog .weak-spot-group{background:#f1f3f5;color:#4c5157}
#weak-spots-dialog .weak-spot-mode{border:1px solid rgba(0,119,204,.22);background:rgba(0,119,204,.07);color:#075f9e}
#weak-spots-dialog .weak-spot-meta{min-width:0;margin-top:4px;padding:0;background:transparent;color:var(--smurdy-muted);font-size:13px;font-weight:400;line-height:1.4;text-align:left}
#weak-spots-dialog .weak-spots-dialog-header h2{margin-bottom:0}


/* 1.14.2 interface refinement */
#quiz-panel {
    border-radius: var(--smurdy-radius-lg);
    box-shadow: 0 2px 7px rgba(0,0,0,.10);
}
#quiz-buttons .qb-btn,
#quiz-buttons button {
    border-radius: var(--smurdy-radius-md);
    background: #efefef;
}
#quiz-buttons .qb-btn:hover,
#quiz-buttons button:hover { background: #e5e5e5; }

.home-summary { max-width: 34ch; }
.home-site-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 13px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--smurdy-line);
    font-size: 13px;
}
.home-site-links a { color: #075f9e; text-underline-offset: 3px; }
.home-about-details,
.about-header { display: none !important; }

.weak-spots-count {
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}
#weak-spots-dialog {
    border-radius: 8px;
    box-shadow: 0 5px 18px rgba(0,0,0,.18);
}
#weak-spots-close {
    width: auto;
    height: auto;
    padding: 6px 8px;
    border: 1px solid var(--smurdy-line);
    border-radius: 4px;
    background: #f1f1f1;
    font-size: 13px;
    font-weight: 600;
}
#weak-spots-dialog .weak-spot-main {
    display: block;
}
#weak-spots-dialog .weak-spot-group,
#weak-spots-dialog .weak-spot-mode {
    display: none;
}
#weak-spots-dialog .weak-spot-context {
    display: block;
    margin-top: 2px;
    color: var(--smurdy-muted);
    font-size: 12px;
    font-weight: 400;
}
#weak-spots-dialog .weak-spot-meta {
    margin-top: 2px;
}
.quiz-review-country {
    padding: 8px 2px;
    border: 0;
    border-bottom: 1px solid var(--smurdy-line);
    border-radius: 0;
    background: #fff;
}
.quiz-review-country:hover { background: #f6f6f6; }
#weak-spots-practice-next {
    border-radius: 5px;
    background: #f3f3f3;
}

@media (max-width: 700px) {
    #quiz-panel,
    #quiz-bottom {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,.09);
    }
    #type-quiz-controls input,
    #type-quiz-controls button,
    #quiz-buttons .qb-btn,
    #quiz-buttons button,
    #quiz-buttons .qb-btn.primary { border-radius: 5px; }
}

/* 1.14.6 meaningful surfaces: a little depth where floating actually means something. */
#quiz-panel {
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
}

#weak-spots-dialog {
    border-radius: 10px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .20);
}

/* Counts are one of the places where a badge has real semantic value. */
.weak-spots-count {
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--smurdy-blue);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

@media (max-width: 700px) {
    #quiz-panel,
    #quiz-bottom {
        border-radius: 9px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, .11);
    }
}