.fctq-app {
    --fctq-ink: #17233c;
    --fctq-navy: #10264a;
    --fctq-sapphire: #2466a8;
    --fctq-turquoise: #28b7b1;
    --fctq-purple: #704db9;
    --fctq-gold: #f2c45c;
    --fctq-coral: #e87587;
    --fctq-paper: #fff7e8;
    --fctq-cloud: #f7fafc;
    --fctq-green: #347a56;
    --fctq-focus: #0b6d7a;
    --fctq-control-border: #68788f;
    --fctq-berry: #9e3f57;
    --fctq-line: rgba(16, 38, 74, 0.18);
    box-sizing: border-box;
    width: 100%;
    margin: 1rem 0;
    color: var(--fctq-ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fctq-app *,
.fctq-app *::before,
.fctq-app *::after {
    box-sizing: inherit;
}

.fctq-coordinate-shell {
    display: grid;
    gap: 1rem;
    width: min(100%, 58rem);
    margin-inline: auto;
    padding: clamp(0.85rem, 3vw, 1.35rem);
    border: 1px solid var(--fctq-line);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(40, 183, 177, 0.10), transparent 22rem),
        linear-gradient(135deg, var(--fctq-paper) 0%, var(--fctq-cloud) 100%);
    box-shadow: 0 0.8rem 2.25rem rgba(16, 38, 74, 0.08);
}

.fctq-coordinate-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.fctq-foundation-mark {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 50%;
    background: var(--fctq-navy);
    color: var(--fctq-gold);
    font-size: 1.15rem;
}

.fctq-foundation-copy {
    min-width: 0;
}

.fctq-eyebrow,
.fctq-map-kicker {
    margin: 0 0 0.22rem;
    color: var(--fctq-sapphire);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fctq-foundation-copy h2,
.fctq-map-toolbar h3 {
    margin: 0;
    color: var(--fctq-navy);
    line-height: 1.15;
}

.fctq-foundation-copy h2 {
    font-size: clamp(1.25rem, 4.5vw, 1.85rem);
}

.fctq-map-toolbar h3 {
    font-size: clamp(1.05rem, 4vw, 1.35rem);
}

.fctq-foundation-message,
.fctq-foundation-status,
.fctq-grid-instruction,
.fctq-stage-note {
    margin: 0.55rem 0 0;
    line-height: 1.5;
}

.fctq-foundation-message {
    max-width: 48rem;
    font-size: 0.96rem;
}

.fctq-map-lab {
    display: grid;
    gap: 0.75rem;
    padding: clamp(0.75rem, 2.5vw, 1rem);
    border: 1px solid var(--fctq-line);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
}

.fctq-map-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.7rem;
    align-items: end;
}

.fctq-compact-field {
    display: grid;
    gap: 0.25rem;
    min-width: 5.4rem;
    color: var(--fctq-navy);
    font-size: 0.75rem;
    font-weight: 750;
}

.fctq-compact-field select,
.fctq-coordinate-entry input {
    min-height: 2.75rem;
    border: 1px solid rgba(16, 38, 74, 0.34);
    border-radius: 0.7rem;
    background: #fff;
    color: var(--fctq-ink);
    font: inherit;
}

.fctq-compact-field select {
    padding: 0.48rem 1.7rem 0.48rem 0.6rem;
}

.fctq-grid-instruction {
    margin-top: 0;
    font-size: 0.9rem;
}

.fctq-grid-host {
    position: relative;
    width: 100%;
    min-height: 260px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid rgba(16, 38, 74, 0.24);
    border-radius: 0.9rem;
    background:
        radial-gradient(circle at 25% 20%, rgba(40, 183, 177, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(255, 247, 232, 0.94), rgba(247, 250, 252, 0.98));
}

.fctq-grid-svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    touch-action: manipulation;
    user-select: none;
    outline: none;
}

.fctq-grid-svg:focus-visible {
    outline: 4px solid var(--fctq-focus);
    outline-offset: -4px;
    border-radius: 0.8rem;
}

.fctq-grid-svg[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.7;
}

.fctq-grid-svg[aria-disabled="false"] {
    cursor: crosshair;
}

.fctq-grid-line {
    stroke: rgba(36, 102, 168, 0.20);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.fctq-grid-line-axis {
    stroke: var(--fctq-navy);
    stroke-width: 2.35;
}

.fctq-grid-tick-label,
.fctq-grid-axis-label {
    fill: var(--fctq-ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    paint-order: stroke;
    stroke: rgba(255, 247, 232, 0.96);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.fctq-grid-tick-label {
    font-size: 12px;
    font-weight: 700;
}

.fctq-grid-axis-label {
    fill: var(--fctq-navy);
    font-size: 15px;
    font-weight: 900;
}

.fctq-grid-origin-ring {
    fill: rgba(242, 196, 92, 0.20);
    stroke: var(--fctq-navy);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.fctq-grid-focus-ring,
.fctq-grid-focus-notch {
    fill: none;
    stroke: var(--fctq-purple);
    stroke-width: 2.4;
    vector-effect: non-scaling-stroke;
}

.fctq-grid-focus-ring {
    stroke-dasharray: 3 2;
}

.fctq-grid-candidate-ring {
    fill: rgba(40, 183, 177, 0.20);
    stroke: var(--fctq-navy);
    stroke-width: 2.6;
    vector-effect: non-scaling-stroke;
}

.fctq-grid-candidate-dot {
    fill: var(--fctq-gold);
    stroke: var(--fctq-navy);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

.fctq-grid-marker {
    fill: var(--fctq-sapphire);
    stroke: #fff;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.fctq-grid-marker-target {
    fill: var(--fctq-gold);
    stroke: var(--fctq-navy);
}

.fctq-grid-marker-correct,
.fctq-grid-marker-visited {
    fill: var(--fctq-green);
}

.fctq-grid-marker-incorrect {
    fill: var(--fctq-berry);
}

.fctq-coordinate-readout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.fctq-coordinate-readout > div {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--fctq-line);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.78);
}

.fctq-coordinate-readout span {
    color: var(--fctq-sapphire);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.fctq-coordinate-readout strong {
    overflow-wrap: anywhere;
    font-size: 0.95rem;
}

.fctq-coordinate-entry {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: end;
    padding: 0.7rem;
    border: 1px solid var(--fctq-line);
    border-radius: 0.8rem;
    background: rgba(16, 38, 74, 0.035);
}

.fctq-coordinate-entry > p {
    flex: 1 1 100%;
    margin: 0;
    color: var(--fctq-navy);
    font-weight: 800;
}

.fctq-coordinate-entry label {
    display: grid;
    grid-template-columns: auto 4.4rem;
    gap: 0.35rem;
    align-items: center;
    color: var(--fctq-navy);
    font-weight: 850;
}

.fctq-coordinate-entry input {
    width: 4.4rem;
    padding: 0.45rem 0.55rem;
}

.fctq-engine-button {
    min-height: 2.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--fctq-navy);
    border-radius: 0.72rem;
    background: #fff;
    color: var(--fctq-navy);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.fctq-primary-button {
    background: var(--fctq-navy);
    color: #fff;
}

.fctq-engine-button:hover:not(:disabled),
.fctq-engine-button:focus-visible:not(:disabled) {
    background: var(--fctq-sapphire);
    color: #fff;
}

.fctq-engine-button:focus-visible,
.fctq-app input:focus-visible,
.fctq-app select:focus-visible,
.fctq-dev-diagnostics summary:focus-visible {
    outline: 3px solid var(--fctq-focus);
    outline-offset: 2px;
}

.fctq-engine-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.fctq-foundation-status {
    margin-top: 0;
    padding: 0.65rem 0.75rem;
    border-left: 4px solid var(--fctq-turquoise);
    border-radius: 0.45rem;
    background: rgba(40, 183, 177, 0.08);
    font-weight: 750;
}

.fctq-dev-diagnostics {
    border: 1px solid var(--fctq-line);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.55);
}

.fctq-dev-diagnostics summary {
    min-height: 2.75rem;
    padding: 0.75rem 0.9rem;
    color: var(--fctq-navy);
    font-weight: 800;
    cursor: pointer;
}

.fctq-engine-panel {
    display: grid;
    gap: 0.9rem;
    padding: 0 0.9rem 0.9rem;
}

.fctq-engine-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 0.8rem;
    border: 1px solid var(--fctq-line);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.72);
}

.fctq-engine-meta > div {
    min-width: 0;
}

.fctq-engine-meta dt {
    color: var(--fctq-sapphire);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.fctq-engine-meta dd {
    overflow-wrap: anywhere;
    margin: 0.15rem 0 0;
    font-size: 0.86rem;
}

.fctq-engine-actions,
.fctq-audio-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.fctq-audio-controls {
    padding-top: 0.25rem;
    border-top: 1px solid var(--fctq-line);
}

.fctq-audio-controls label {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    min-height: 2.75rem;
}

.fctq-audio-controls input[type="range"] {
    width: min(11rem, 42vw);
}

.fctq-stage-note {
    margin: 0;
    font-size: 0.84rem;
}

.fctq-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 520px) {
    .fctq-coordinate-shell {
        padding: 0.75rem;
        border-radius: 1rem;
    }

    .fctq-coordinate-header {
        gap: 0.65rem;
    }

    .fctq-foundation-mark {
        width: 2.35rem;
        height: 2.35rem;
    }

    .fctq-foundation-message {
        font-size: 0.9rem;
    }

    .fctq-map-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .fctq-map-toolbar > div:first-child {
        grid-column: 1 / -1;
    }

    .fctq-coordinate-readout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fctq-coordinate-readout > div:last-child {
        grid-column: 1 / -1;
    }

    .fctq-coordinate-entry .fctq-engine-button {
        flex: 1 1 calc(50% - 0.3rem);
    }

    .fctq-engine-meta {
        grid-template-columns: 1fr;
    }

    .fctq-engine-actions .fctq-engine-button {
        flex: 1 1 calc(50% - 0.3rem);
    }

    .fctq-audio-controls {
        align-items: stretch;
    }

    .fctq-audio-controls label {
        flex: 1 1 100%;
        justify-content: space-between;
    }
}

@media (max-width: 370px) {
    .fctq-grid-instruction {
        font-size: 0.85rem;
    }

    .fctq-grid-host,
    .fctq-grid-svg {
        min-height: 245px;
    }

    .fctq-coordinate-entry {
        align-items: stretch;
    }

    .fctq-coordinate-entry label {
        flex: 1 1 calc(50% - 0.3rem);
        grid-template-columns: auto minmax(0, 1fr);
    }

    .fctq-coordinate-entry input {
        width: 100%;
    }

    .fctq-coordinate-entry .fctq-engine-button {
        flex-basis: 100%;
    }
}

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

/* Stage 9 — core Plot/Read mission shell */
.fctq-core-modes {
    display: grid;
    gap: 0.8rem;
    padding: clamp(0.75rem, 2.5vw, 1rem);
    border: 1px solid var(--fctq-line);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.76);
}

.fctq-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.fctq-mode-button {
    min-height: 2.8rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(16, 38, 74, 0.32);
    border-radius: 999px;
    background: #fff;
    color: var(--fctq-navy);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.fctq-mode-button.is-active,
.fctq-mode-button[aria-pressed="true"] {
    border-color: var(--fctq-navy);
    background: var(--fctq-navy);
    color: #fff;
}

.fctq-mode-button:focus-visible {
    outline: 3px solid var(--fctq-focus);
    outline-offset: 2px;
}

.fctq-mission-head {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    justify-content: space-between;
}

.fctq-mission-head h3 {
    margin: 0;
    color: var(--fctq-navy);
    font-size: clamp(1.05rem, 4vw, 1.4rem);
    line-height: 1.15;
}

.fctq-mission-progress {
    flex: 0 0 auto;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: rgba(36, 102, 168, 0.09);
    color: var(--fctq-sapphire);
    font-size: 0.78rem;
}

.fctq-mission-clue {
    margin: 0;
    padding: 0.72rem 0.8rem;
    border-left: 4px solid var(--fctq-gold);
    border-radius: 0.55rem;
    background: rgba(242, 196, 92, 0.12);
    color: var(--fctq-navy);
    font-size: clamp(1rem, 3.7vw, 1.15rem);
    font-weight: 850;
    line-height: 1.4;
}

.fctq-core-modes .fctq-coordinate-readout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fctq-mission-actions,
.fctq-next-wrap {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    justify-content: flex-end;
}

.fctq-mission-actions .fctq-engine-button {
    min-width: 7rem;
}

.fctq-hint-panel {
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(112, 77, 185, 0.2);
    border-radius: 0.72rem;
    background: rgba(112, 77, 185, 0.055);
}

.fctq-hint-label {
    color: var(--fctq-purple);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.fctq-hint-panel p {
    margin: 0.25rem 0 0;
    line-height: 1.45;
}

.fctq-feedback {
    margin: 0;
    padding: 0.7rem 0.8rem;
    border-left: 4px solid var(--fctq-turquoise);
    border-radius: 0.5rem;
    background: rgba(40, 183, 177, 0.08);
    color: var(--fctq-ink);
    font-weight: 780;
    line-height: 1.45;
}

.fctq-read-entry input:invalid {
    box-shadow: none;
}

.fctq-grid-guide {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: 0.82;
    stroke-dasharray: 7 5;
}

.fctq-grid-guide-hint-x {
    stroke: var(--fctq-sapphire);
}

.fctq-grid-guide-hint-y {
    stroke: var(--fctq-purple);
}

.fctq-grid-marker-target {
    fill: var(--fctq-gold);
    stroke: var(--fctq-navy);
    stroke-width: 2.5;
}

.fctq-grid-marker-correct {
    fill: var(--fctq-green);
    stroke: var(--fctq-navy);
}

.fctq-grid-marker-incorrect {
    fill: var(--fctq-berry);
    stroke: var(--fctq-navy);
    stroke-dasharray: 2 1;
}

@media (max-width: 520px) {
    .fctq-mission-head {
        align-items: start;
    }

    .fctq-mission-progress {
        margin-top: 0.1rem;
    }

    .fctq-mission-actions .fctq-engine-button,
    .fctq-next-wrap .fctq-engine-button {
        flex: 1 1 0;
    }
}

@media (max-width: 370px) {
    .fctq-mode-switch {
        grid-template-columns: 1fr;
    }

    .fctq-mission-head {
        display: grid;
    }

    .fctq-mission-progress {
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fctq-grid-guide {
        stroke-dasharray: none;
    }
}

/* Stage 10 — route, pattern, and Connect-the-Clues systems */
.fctq-mode-switch {
    grid-template-columns: repeat(auto-fit, minmax(8.8rem, 1fr));
}

.fctq-route-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: center;
    min-height: 1.5rem;
    color: var(--fctq-sapphire);
    font-size: 0.82rem;
}

.fctq-route-status [data-fctq-shape-reveal]:not(:empty) {
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: rgba(112, 77, 185, 0.09);
    color: var(--fctq-purple);
    font-weight: 850;
}

.fctq-route-tools {
    display: flex;
    justify-content: flex-start;
}

.fctq-route-tools[hidden],
.fctq-coordinate-entry[hidden] {
    display: none !important;
}

.fctq-grid-route {
    fill: none;
    stroke: var(--fctq-sapphire);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: 0.8;
}

.fctq-grid-route-pattern-known {
    stroke: var(--fctq-purple);
    stroke-dasharray: 7 5;
    opacity: 0.62;
}

.fctq-grid-route-visited {
    stroke: var(--fctq-sapphire);
}

.fctq-grid-route-complete {
    stroke: var(--fctq-green);
    stroke-width: 6;
    opacity: 0.92;
}

.fctq-grid-marker-visited {
    fill: #fff;
    stroke: var(--fctq-sapphire);
    stroke-width: 3;
}

.fctq-grid-marker-known {
    fill: #fff;
    stroke: var(--fctq-purple);
    stroke-width: 3;
}

.fctq-missing-entry {
    justify-content: flex-start;
}

.fctq-missing-entry label {
    min-width: 9rem;
}

@media (max-width: 520px) {
    .fctq-mode-switch {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fctq-route-tools .fctq-engine-button {
        width: 100%;
    }
}

@media (max-width: 370px) {
    .fctq-mode-switch {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fctq-grid-route-pattern-known {
        stroke-dasharray: none;
    }
}

/* Stage 12 — Expedition Missions and Coordinate Detective */
.fctq-expedition-status,
.fctq-detective-panel {
    border: 1px solid rgba(36, 102, 168, 0.22);
    border-radius: 16px;
    background: rgba(255, 247, 232, 0.72);
    padding: 0.75rem;
}

.fctq-expedition-status[hidden],
.fctq-detective-panel[hidden] {
    display: none !important;
}

.fctq-expedition-status-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.65rem;
    align-items: baseline;
    margin-bottom: 0.45rem;
}

.fctq-expedition-status-head strong {
    color: var(--fctq-sapphire);
}

.fctq-expedition-status-head span {
    color: var(--fctq-ink);
    font-size: 0.88rem;
}

.fctq-expedition-steps {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.86rem;
}

.fctq-expedition-steps li[data-fctq-step-state="complete"] {
    font-weight: 700;
}

.fctq-expedition-steps li[data-fctq-step-state="current"] {
    font-weight: 850;
    color: var(--fctq-sapphire);
}

.fctq-expedition-steps li[data-fctq-step-state="upcoming"] {
    opacity: 0.72;
}

.fctq-detective-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.fctq-detective-summary > div {
    display: grid;
    gap: 0.15rem;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.fctq-detective-summary span {
    font-size: 0.74rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fctq-detective-summary strong {
    font-size: 1.05rem;
    color: var(--fctq-navy);
}

.fctq-detective-phase {
    margin: 0.65rem 0 0.4rem;
    font-weight: 850;
    color: var(--fctq-purple);
}

.fctq-detective-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.fctq-detective-choice {
    min-height: 44px;
    border: 1px solid rgba(36, 102, 168, 0.35);
    border-radius: 12px;
    background: #fff;
    color: var(--fctq-ink);
    padding: 0.55rem 0.65rem;
    font: inherit;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}

.fctq-detective-choice:hover,
.fctq-detective-choice:focus-visible {
    border-color: var(--fctq-sapphire);
    outline: 3px solid rgba(36, 102, 168, 0.2);
    outline-offset: 2px;
}

.fctq-detective-choice:disabled {
    cursor: default;
    opacity: 0.72;
}

@media (max-width: 520px) {
    .fctq-detective-choices,
    .fctq-detective-summary {
        grid-template-columns: 1fr;
    }

    .fctq-expedition-status,
    .fctq-detective-panel {
        padding: 0.65rem;
    }
}

/* Stage 13 — local profiles, mastery, Practice Bay, rewards, and Grown-Up Dock */
.fctq-profile-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, auto);
    gap: 0.65rem 1rem;
    align-items: end;
    margin: 0 0 0.65rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(36, 102, 168, 0.2);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
}

.fctq-profile-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.65rem;
    align-items: baseline;
}

.fctq-profile-label,
.fctq-profile-select-wrap > span,
.fctq-grownup-summary-grid span,
.fctq-grownup-field > span {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    color: var(--fctq-navy);
}

.fctq-profile-storage {
    font-size: 0.78rem;
    color: var(--fctq-ink);
}

.fctq-profile-select-wrap,
.fctq-grownup-field {
    display: grid;
    gap: 0.3rem;
}

.fctq-profile-select-wrap select,
.fctq-grownup-field input,
.fctq-grownup-field textarea {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid rgba(36, 102, 168, 0.32);
    border-radius: 10px;
    background: #fff;
    color: var(--fctq-ink);
    font: inherit;
    padding: 0.55rem 0.65rem;
}

.fctq-grownup-field textarea {
    min-height: 7rem;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
}

.fctq-profile-select-wrap select:focus-visible,
.fctq-grownup-field input:focus-visible,
.fctq-grownup-field textarea:focus-visible {
    outline: 3px solid rgba(36, 102, 168, 0.25);
    outline-offset: 2px;
    border-color: var(--fctq-sapphire);
}

.fctq-profile-status {
    grid-column: 1 / -1;
    min-height: 1.2em;
    margin: 0;
    font-size: 0.82rem;
}

.fctq-support-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.7rem;
}

.fctq-grownup-entry {
    font-weight: 700;
}

.fctq-support-panel {
    margin: 0 0 0.75rem;
    padding: 0.85rem;
    border: 1px solid rgba(112, 77, 185, 0.22);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 247, 232, 0.94), rgba(247, 250, 252, 0.96));
}

.fctq-support-panel[hidden] {
    display: none !important;
}

.fctq-support-panel-head {
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.6rem;
}

.fctq-support-panel-head h3,
.fctq-support-panel h4 {
    margin-top: 0;
}

.fctq-practice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.fctq-reward-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.fctq-reward-card {
    display: grid;
    gap: 0.18rem;
    padding: 0.7rem;
    border: 1px solid rgba(242, 196, 92, 0.46);
    border-radius: 14px;
    background: #fff;
}

.fctq-reward-card strong {
    color: var(--fctq-purple);
}

.fctq-reward-card span,
.fctq-empty-note {
    font-size: 0.84rem;
}

.fctq-grownup-privacy {
    margin-top: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    background: rgba(40, 183, 177, 0.09);
    font-size: 0.86rem;
}

.fctq-grownup-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0.75rem 0 1rem;
}

.fctq-grownup-summary-grid > div {
    display: grid;
    gap: 0.18rem;
    padding: 0.65rem;
    border: 1px solid rgba(36, 102, 168, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
}

.fctq-grownup-summary-grid strong {
    font-size: 0.9rem;
}

.fctq-mastery-list {
    display: grid;
    gap: 0.45rem;
}

.fctq-mastery-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8.5rem, auto);
    gap: 0.65rem;
    align-items: center;
    padding: 0.6rem 0.65rem;
    border: 1px solid rgba(36, 102, 168, 0.15);
    border-radius: 12px;
    background: #fff;
}

.fctq-mastery-skill,
.fctq-mastery-state {
    display: grid;
    gap: 0.1rem;
}

.fctq-mastery-skill span,
.fctq-mastery-state span {
    font-size: 0.78rem;
}

.fctq-mastery-state {
    text-align: right;
}

.fctq-level::before {
    content: "◇ ";
}

.fctq-level-steady::before {
    content: "◆ ";
}

.fctq-level-strong::before {
    content: "★ ";
}

.fctq-level-building { color: var(--fctq-sapphire); }
.fctq-level-steady { color: var(--fctq-purple); }
.fctq-level-strong { color: var(--fctq-green); }

.fctq-recent-sessions {
    margin-top: 0.4rem;
    padding-left: 1.2rem;
    font-size: 0.84rem;
}

.fctq-grownup-tools {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(36, 102, 168, 0.17);
}

.fctq-grownup-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.55rem 0 0.75rem;
}

@media (max-width: 620px) {
    .fctq-profile-bar,
    .fctq-grownup-summary-grid,
    .fctq-reward-list {
        grid-template-columns: 1fr;
    }

    .fctq-practice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fctq-mastery-row {
        grid-template-columns: 1fr;
    }

    .fctq-mastery-state {
        text-align: left;
    }
}

@media (max-width: 390px) {
    .fctq-support-nav,
    .fctq-practice-grid {
        grid-template-columns: 1fr;
    }

    .fctq-support-panel-head {
        align-items: stretch;
        flex-direction: column;
    }

    .fctq-grownup-action-row .fctq-engine-button {
        width: 100%;
    }
}

@media print {
    .fctq-app .fctq-coordinate-header,
    .fctq-app .fctq-profile-bar,
    .fctq-app .fctq-support-nav,
    .fctq-app .fctq-core-modes,
    .fctq-app .fctq-dev-diagnostics,
    .fctq-app [data-fctq-practice-panel],
    .fctq-app [data-fctq-my-expedition-panel],
    .fctq-app .fctq-support-panel-head .fctq-engine-button,
    .fctq-app .fctq-grownup-action-row,
    .fctq-app [data-fctq-profile-import],
    .fctq-app [data-fctq-profile-export] {
        display: none !important;
    }

    .fctq-app [data-fctq-grownup-panel] {
        display: block !important;
        border: 0;
        background: #fff;
        padding: 0;
    }

    .fctq-app .fctq-grownup-tools {
        display: none;
    }
}

/* Stage 14 — accessibility, mobile, zoom, contrast and reduced motion */
.fctq-app,
.fctq-app * {
    max-width: 100%;
}

.fctq-app :where(button, input, select, textarea, summary) {
    font-size: max(1rem, 16px);
}

.fctq-app :where(.fctq-engine-button, .fctq-mode-button, summary, select, input:not([type="checkbox"]):not([type="range"])) {
    min-height: 44px;
}

.fctq-app :where(input, select, textarea) {
    border-color: var(--fctq-control-border);
}

.fctq-accessibility-settings {
    border: 1px solid var(--fctq-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.74);
}

.fctq-accessibility-settings > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.65rem 0.8rem;
    color: var(--fctq-navy);
    font-weight: 850;
    cursor: pointer;
}

.fctq-accessibility-settings > summary:focus-visible,
.fctq-support-panel:focus-visible,
[data-fctq-mode-title]:focus-visible {
    outline: 3px solid var(--fctq-focus);
    outline-offset: 3px;
}

.fctq-accessibility-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    padding: 0.75rem 0.8rem 0.25rem;
}

.fctq-settings-field,
.fctq-settings-check {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
    color: var(--fctq-navy);
    font-weight: 750;
}

.fctq-settings-field > span,
.fctq-settings-check > span {
    font-size: 0.82rem;
}

.fctq-settings-field select,
.fctq-settings-field input[type="range"] {
    width: 100%;
}

.fctq-settings-field select {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--fctq-control-border);
    border-radius: 10px;
    background: #fff;
    color: var(--fctq-ink);
    font: inherit;
}

.fctq-settings-check {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-height: 44px;
    padding-inline: 0.2rem;
}

.fctq-settings-check input[type="checkbox"] {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
}

.fctq-settings-note,
.fctq-preference-status {
    margin: 0;
    padding: 0.35rem 0.8rem 0.7rem;
    line-height: 1.4;
    font-size: 0.84rem;
}

.fctq-preference-status {
    min-height: 1.4em;
    color: var(--fctq-sapphire);
    font-weight: 750;
}

.fctq-grid-tick-label {
    font-size: 13px;
}

.fctq-grid-axis-label {
    font-size: 16px;
}

.fctq-grid-marker-correct {
    stroke: var(--fctq-navy);
    stroke-width: 4;
}

.fctq-grid-marker-incorrect {
    stroke: var(--fctq-navy);
    stroke-width: 3;
    stroke-dasharray: 3 2;
}

.fctq-app[data-fctq-grid-clarity="high"] .fctq-coordinate-shell,
.fctq-app[data-fctq-grid-clarity="high"] .fctq-grid-host,
.fctq-app[data-fctq-grid-clarity="high"] .fctq-map-lab,
.fctq-app[data-fctq-grid-clarity="high"] .fctq-core-modes {
    background-image: none;
    background-color: #fff;
    box-shadow: none;
}

.fctq-app[data-fctq-grid-clarity="high"] .fctq-grid-line {
    stroke: rgba(16, 38, 74, 0.34);
    stroke-width: 1.35;
}

.fctq-app[data-fctq-grid-clarity="high"] .fctq-grid-line-axis {
    stroke: var(--fctq-navy);
    stroke-width: 3;
}

.fctq-app[data-fctq-grid-clarity="high"] .fctq-grid-tick-label,
.fctq-app[data-fctq-grid-clarity="high"] .fctq-grid-axis-label {
    stroke: #fff;
    stroke-width: 4px;
}

.fctq-app[data-fctq-grid-clarity="high"] .fctq-grid-guide,
.fctq-app[data-fctq-grid-clarity="high"] .fctq-grid-route {
    opacity: 1;
}

.fctq-app[data-fctq-effective-motion="reduce"] *,
.fctq-app[data-fctq-effective-motion="reduce"] *::before,
.fctq-app[data-fctq-effective-motion="reduce"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}

.fctq-app[data-fctq-effective-motion="reduce"] .fctq-grid-guide,
.fctq-app[data-fctq-effective-motion="reduce"] .fctq-grid-route-pattern-known,
.fctq-app[data-fctq-effective-motion="reduce"] .fctq-grid-focus-ring {
    stroke-dasharray: none;
}

@media (prefers-contrast: more) {
    .fctq-app {
        --fctq-line: rgba(16, 38, 74, 0.46);
        --fctq-control-border: #10264a;
    }

    .fctq-grid-line {
        stroke: rgba(16, 38, 74, 0.38);
    }

    .fctq-grid-line-axis {
        stroke-width: 3;
    }
}

@media (forced-colors: active) {
    .fctq-app {
        --fctq-ink: CanvasText;
        --fctq-navy: CanvasText;
        --fctq-sapphire: LinkText;
        --fctq-purple: LinkText;
        --fctq-green: CanvasText;
        --fctq-berry: CanvasText;
        --fctq-focus: Highlight;
        --fctq-control-border: CanvasText;
        --fctq-paper: Canvas;
        --fctq-cloud: Canvas;
        --fctq-line: CanvasText;
        forced-color-adjust: auto;
    }

    .fctq-coordinate-shell,
    .fctq-map-lab,
    .fctq-core-modes,
    .fctq-support-panel,
    .fctq-accessibility-settings,
    .fctq-grid-host,
    .fctq-reward-card,
    .fctq-mastery-row {
        background: Canvas;
        border-color: CanvasText;
        box-shadow: none;
    }

    .fctq-grid-line {
        stroke: GrayText;
    }

    .fctq-grid-line-axis,
    .fctq-grid-focus-ring,
    .fctq-grid-focus-notch,
    .fctq-grid-candidate-ring,
    .fctq-grid-marker,
    .fctq-grid-route,
    .fctq-grid-guide {
        stroke: CanvasText;
    }

    .fctq-grid-candidate-dot,
    .fctq-grid-marker-target,
    .fctq-grid-marker-correct,
    .fctq-grid-marker-incorrect,
    .fctq-grid-marker-visited,
    .fctq-grid-marker-known {
        fill: Canvas;
        stroke: CanvasText;
    }

    .fctq-mode-button[aria-pressed="true"],
    .fctq-primary-button {
        background: Highlight;
        color: HighlightText;
        border-color: Highlight;
    }

    .fctq-engine-button:focus-visible,
    .fctq-mode-button:focus-visible,
    .fctq-grid-svg:focus-visible,
    .fctq-app input:focus-visible,
    .fctq-app select:focus-visible,
    .fctq-app textarea:focus-visible,
    .fctq-app summary:focus-visible {
        outline: 3px solid Highlight;
    }
}

@media (max-width: 520px) {
    .fctq-accessibility-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fctq-volume-field,
    .fctq-settings-note,
    .fctq-preference-status {
        grid-column: 1 / -1;
    }

    .fctq-mission-actions,
    .fctq-next-wrap,
    .fctq-grownup-action-row {
        flex-wrap: wrap;
    }
}

@media (max-width: 412px) {
    .fctq-coordinate-shell {
        gap: 0.75rem;
        padding: 0.65rem;
        border-radius: 0.9rem;
    }

    .fctq-coordinate-header {
        grid-template-columns: 2.35rem minmax(0, 1fr);
    }

    .fctq-profile-bar,
    .fctq-core-modes,
    .fctq-map-lab,
    .fctq-support-panel {
        padding: 0.65rem;
    }

    .fctq-mode-switch {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fctq-mode-button {
        padding-inline: 0.5rem;
    }

    .fctq-grid-host,
    .fctq-grid-svg {
        min-height: 250px;
    }

    .fctq-coordinate-entry {
        gap: 0.45rem;
    }

    .fctq-coordinate-entry label {
        grid-template-columns: auto minmax(0, 1fr);
        flex: 1 1 calc(50% - 0.25rem);
    }

    .fctq-coordinate-entry input {
        width: 100%;
    }
}

@media (max-width: 390px) {
    .fctq-accessibility-controls,
    .fctq-mode-switch,
    .fctq-support-nav,
    .fctq-practice-grid {
        grid-template-columns: 1fr;
    }

    .fctq-coordinate-readout {
        grid-template-columns: 1fr;
    }

    .fctq-coordinate-readout > div:last-child {
        grid-column: auto;
    }
}

@media (max-width: 360px) {
    .fctq-coordinate-shell {
        padding: 0.55rem;
    }

    .fctq-grid-host,
    .fctq-grid-svg {
        min-height: 240px;
    }

    .fctq-mission-actions .fctq-engine-button,
    .fctq-next-wrap .fctq-engine-button,
    .fctq-route-tools .fctq-engine-button {
        width: 100%;
        flex-basis: 100%;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .fctq-coordinate-header .fctq-foundation-message {
        display: none;
    }

    .fctq-coordinate-shell {
        gap: 0.65rem;
    }
}

@media print {
    .fctq-app .fctq-accessibility-settings {
        display: none !important;
    }
}

/* Stage 14 touch target for the volume slider itself; checkbox labels already own a 44px label target. */
.fctq-accessibility-settings input[type="range"] {
    min-height: 44px;
}

/* Stage 16 — QA hardening, Free Map Lab, and compact adventure chooser */
.fctq-adventure-picker {
    border: 1px solid rgba(36, 102, 168, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    padding: 0.15rem;
}

.fctq-adventure-picker > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    font-weight: 850;
    color: var(--fctq-navy);
}

.fctq-adventure-picker[open] > summary {
    border-bottom: 1px solid rgba(36, 102, 168, 0.16);
}

.fctq-adventure-picker .fctq-mode-switch {
    padding: 0.65rem;
}

.fctq-free-map-panel {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid rgba(36, 102, 168, 0.22);
    border-radius: 16px;
    background: rgba(255, 247, 232, 0.66);
}

.fctq-free-map-panel[hidden],
.fctq-app:not([data-fctq-active-controller="lab"]) .fctq-free-map-panel {
    display: none !important;
}

.fctq-free-map-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 0.75rem;
}

.fctq-free-map-head > div:first-child {
    display: grid;
    gap: 0.2rem;
}

.fctq-free-map-head > div:first-child span,
.fctq-free-map-summary,
.fctq-free-map-status {
    color: var(--fctq-ink);
}

.fctq-free-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fctq-free-map-summary {
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.fctq-free-map-summary p,
.fctq-free-map-summary ul {
    margin: 0;
}

.fctq-free-map-summary ul {
    padding-inline-start: 1.25rem;
}

.fctq-free-map-status {
    min-height: 1.4em;
    margin: 0;
    font-weight: 700;
}

.fctq-grid-marker-lab-marker {
    fill: #fff;
    stroke: var(--fctq-purple);
    stroke-width: 3;
}

.fctq-grid-route-lab {
    stroke: var(--fctq-purple);
    stroke-width: 5;
    stroke-dasharray: 9 4;
}

.fctq-app[data-fctq-grid-guidance="hidden"] .fctq-grid-lines .fctq-grid-line:not(.fctq-grid-line-axis) {
    opacity: 0;
}

@media (max-width: 412px) {
    .fctq-free-map-head {
        align-items: stretch;
        flex-direction: column;
    }

    .fctq-free-map-actions .fctq-engine-button,
    .fctq-free-map-head .fctq-settings-field {
        width: 100%;
    }
}

@media (forced-colors: active) {
    .fctq-grid-marker-lab-marker,
    .fctq-grid-route-lab {
        fill: Canvas;
        stroke: CanvasText;
    }
}

@media print {
    .fctq-app[data-fctq-print-mode="lab"] [data-fctq-grownup-panel],
    .fctq-app[data-fctq-print-mode="lab"] .fctq-profile-bar,
    .fctq-app[data-fctq-print-mode="lab"] .fctq-support-nav,
    .fctq-app[data-fctq-print-mode="lab"] .fctq-accessibility-settings,
    .fctq-app[data-fctq-print-mode="lab"] .fctq-adventure-picker,
    .fctq-app[data-fctq-print-mode="lab"] .fctq-mission-actions,
    .fctq-app[data-fctq-print-mode="lab"] .fctq-hint-panel,
    .fctq-app[data-fctq-print-mode="lab"] .fctq-dev-diagnostics,
    .fctq-app[data-fctq-print-mode="lab"] [data-fctq-plot-answer],
    .fctq-app[data-fctq-print-mode="lab"] .fctq-free-map-actions {
        display: none !important;
    }

    .fctq-app[data-fctq-print-mode="lab"] .fctq-coordinate-header,
    .fctq-app[data-fctq-print-mode="lab"] .fctq-core-modes,
    .fctq-app[data-fctq-print-mode="lab"] [data-fctq-free-map-panel] {
        display: block !important;
    }

    .fctq-app[data-fctq-print-mode="lab"] .fctq-grid-host {
        break-inside: avoid;
    }
}

/* 1.0.0-rc.2 — Fantasticamos family character integration.
 * Character art is decorative/supportive only; gameplay remains fully functional if images fail.
 */
.fctq-character-art,
.fctq-family-crew img {
    display: block;
    max-width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.fctq-coordinate-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
}

.fctq-family-crew {
    display: grid;
    gap: 0.3rem;
    justify-items: end;
    min-width: 10.5rem;
}

.fctq-family-crew-label,
.fctq-guide-label {
    color: var(--fctq-purple);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fctq-family-crew-portraits {
    display: flex;
    justify-content: flex-end;
    padding-right: 0.15rem;
}

.fctq-family-crew-portraits img {
    width: 2.65rem;
    height: 2.65rem;
    margin-left: -0.45rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--fctq-paper);
    object-fit: cover;
    box-shadow: 0 0.18rem 0.5rem rgba(16, 38, 74, 0.13);
}

.fctq-family-crew-portraits img:first-child {
    margin-left: 0;
}

.fctq-guide-clue {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.72rem;
    align-items: center;
    padding: 0.45rem;
    border: 1px solid rgba(242, 196, 92, 0.34);
    border-radius: 0.85rem;
    background: linear-gradient(105deg, rgba(255, 247, 232, 0.92), rgba(247, 250, 252, 0.78));
}

.fctq-ariel-guide-art {
    width: 5.5rem;
    height: 5rem;
    border-radius: 0.72rem;
    object-fit: cover;
    object-position: 45% center;
}

.fctq-guide-clue .fctq-mission-clue {
    margin-top: 0.2rem;
}

.fctq-family-support-card,
.fctq-grownup-family-card {
    display: grid;
    grid-template-columns: 5.2rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    margin: 0.15rem 0 0.7rem;
    padding: 0.55rem;
    border: 1px solid rgba(36, 102, 168, 0.18);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.68);
}

.fctq-family-support-card .fctq-character-art {
    width: 5.2rem;
    height: 4.55rem;
    border-radius: 0.7rem;
    object-fit: cover;
}

.fctq-family-support-card p,
.fctq-grownup-family-card p {
    margin: 0;
    line-height: 1.42;
}

.fctq-family-support-card strong {
    color: var(--fctq-purple);
}

.fctq-hint-panel {
    display: grid;
    grid-template-columns: 3.9rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: center;
}

.fctq-fluff-hint-art {
    width: 3.9rem;
    height: 3.6rem;
    border-radius: 0.65rem;
    object-fit: cover;
}

.fctq-family-celebration {
    display: flex;
    justify-content: center;
    align-items: end;
    min-height: 4.75rem;
    margin: -0.2rem 0 0.35rem;
    overflow: hidden;
    border-radius: 0.85rem;
    background: radial-gradient(circle at 50% 100%, rgba(242, 196, 92, 0.2), transparent 62%);
}

.fctq-family-celebration .fctq-character-art {
    width: 5.3rem;
    height: 5.3rem;
    margin: 0 -0.2rem;
    object-fit: contain;
}

.fctq-grownup-family-card {
    grid-template-columns: 9rem minmax(0, 1fr);
    background: linear-gradient(110deg, rgba(255, 247, 232, 0.9), rgba(40, 183, 177, 0.06));
}

.fctq-grownup-family-art {
    display: flex;
    align-items: end;
    justify-content: center;
    min-width: 0;
}

.fctq-grownup-family-art .fctq-character-art {
    width: 5rem;
    height: 5.2rem;
    margin: 0 -0.6rem;
    border-radius: 0.7rem;
    object-fit: cover;
    object-position: center top;
}

.fctq-grownup-family-card p {
    color: var(--fctq-navy);
    font-weight: 750;
}

@media (max-width: 640px) {
    .fctq-coordinate-header {
        grid-template-columns: 2.75rem minmax(0, 1fr);
        align-items: start;
    }

    .fctq-family-crew {
        grid-column: 1 / -1;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        width: 100%;
        min-width: 0;
        padding: 0.35rem 0.45rem;
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.56);
    }

    .fctq-family-crew-portraits {
        justify-self: end;
    }
}

@media (max-width: 520px) {
    .fctq-guide-clue {
        grid-template-columns: 4.2rem minmax(0, 1fr);
        gap: 0.5rem;
    }

    .fctq-ariel-guide-art {
        width: 4.2rem;
        height: 4rem;
    }

    .fctq-family-support-card {
        grid-template-columns: 4.4rem minmax(0, 1fr);
    }

    .fctq-family-support-card .fctq-character-art {
        width: 4.4rem;
        height: 4rem;
    }

    .fctq-grownup-family-card {
        grid-template-columns: 7rem minmax(0, 1fr);
    }

    .fctq-grownup-family-art .fctq-character-art {
        width: 4.1rem;
        height: 4.4rem;
    }
}

@media (max-width: 412px) {
    .fctq-coordinate-header {
        grid-template-columns: 2.35rem minmax(0, 1fr);
    }

    .fctq-family-crew-label {
        font-size: 0.64rem;
    }

    .fctq-family-crew-portraits img {
        width: 2.25rem;
        height: 2.25rem;
        margin-left: -0.35rem;
    }
}

@media (max-width: 390px) {
    .fctq-guide-clue {
        grid-template-columns: 3.6rem minmax(0, 1fr);
    }

    .fctq-ariel-guide-art {
        width: 3.6rem;
        height: 3.45rem;
    }

    .fctq-family-support-card,
    .fctq-grownup-family-card {
        grid-template-columns: 1fr;
    }

    .fctq-family-support-card .fctq-character-art {
        width: 4.4rem;
        height: 4rem;
    }

    .fctq-grownup-family-art {
        justify-content: flex-start;
        padding-left: 0.5rem;
    }

    .fctq-family-celebration {
        min-height: 4.15rem;
    }

    .fctq-family-celebration .fctq-character-art {
        width: 4.6rem;
        height: 4.6rem;
    }
}

@media (forced-colors: active) {
    .fctq-family-crew,
    .fctq-character-art,
    .fctq-family-celebration {
        display: none !important;
    }
}

@media print {
    .fctq-family-crew,
    .fctq-character-art,
    .fctq-family-celebration {
        display: none !important;
    }
}