.ss h2 { font-size: 1.3rem; margin: 1.2rem 0 .45rem; }
.ss-prompt, .ss-rules { color: var(--bh-muted); line-height: 1.55; margin: .5rem 0; }
.ss-rules { font-size: .9rem; }
.ss-axis-labels { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin: 1.2rem 0 .65rem; }
.ss-axis-labels strong { font-size: 1.35rem; line-height: 1.3; overflow-wrap: break-word; }
.ss-axis-labels strong:last-child { text-align: right; }
.ss-axis-labels span { color: var(--bh-muted); font-size: .85rem; }
.ss-current { text-align: center; margin: 1.4rem 0 1rem; }
.ss-current > span { font-size: .85rem; color: var(--bh-muted); font-variant-numeric: tabular-nums; }
.ss-current h3 { font-size: 2.25rem; line-height: 1.2; font-weight: 720; margin: .4rem 0 0; overflow-wrap: break-word; }
.ss legend { font-size: .9rem; margin-bottom: .7rem; }
.ss-positions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.ss-position { position: relative; display: flex; align-items: center; justify-content: center; border: 1px solid var(--bh-line); background: #fff; border-radius: 8px; min-height: 62px; font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.ss-position input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.ss-position:has(input:checked) { color: #085c55; border-color: var(--bh-accent); background: var(--bh-selected); }
.ss-position:has(input:focus-visible), .ss-link:focus-visible { outline: 3px solid var(--bh-accent); outline-offset: 3px; }
.ss-position:has(input:disabled) { cursor: default; }
.ss-choice-note { color: var(--bh-muted); text-align: center; font-size: .9rem; min-height: 1.5em; margin: .7rem 0 1rem; }
.ss-play-actions { display: flex; align-items: stretch; gap: .65rem; }
.ss-play-actions .bh-primary { flex: 1; }
.ss-role-note { color: var(--bh-muted); margin: 1rem 0 .5rem; font-size: .9rem; }
.ss-error { color: #933a26; background: #fff2ed; border: 1px solid #ebc4b8; border-radius: 8px; padding: .8rem; line-height: 1.6; }
.ss-link-note { color: var(--bh-muted); font-size: .9rem; line-height: 1.6; }
.ss label:not(.ss-position) { display: block; font-weight: 650; margin: .8rem 0 .4rem; }
.ss-link { width: 100%; resize: vertical; min-height: 6rem; border: 1px solid var(--bh-line); border-radius: 8px; padding: .8rem; color: var(--bh-ink); background: #fff; font-size: .85rem; margin-bottom: .65rem; caret-color: var(--bh-accent); }
.ss-link::placeholder { color: #626e6a; }
.ss-paste { font-size: 1rem; }
.ss-manual { margin: .4rem 0 .7rem; font-size: .85rem; }
.ss-manual summary { min-height: 44px; padding: .6rem 0; color: var(--bh-accent); font-weight: 400; cursor: pointer; }
.ss-disclosure { border-top: 1px solid var(--bh-line); margin: 1rem 0; padding-top: .7rem; }
.ss-disclosure > summary { min-height: 44px; padding: .3rem 0; font-weight: 650; cursor: pointer; }
.ss-disclosure p { color: var(--bh-muted); font-size: .9rem; line-height: 1.6; }
.ss .ss-map-title { margin: 1.4rem 0 .35rem; font-size: 1rem; }
.ss-map-ends, .ss-comparison-ends { color: var(--bh-muted); font-size: .9rem; }
.ss-map { list-style: none; padding: 0; margin: .7rem 0 0; }
.ss-map-row { display: grid; grid-template-columns: 135px minmax(0, 1fr); align-items: center; gap: .5rem 1rem; border-top: 1px solid var(--bh-line); padding: .7rem 0; }
.ss-map-word { font-weight: 650; line-height: 1.4; overflow-wrap: break-word; }
.ss-map-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; min-height: 26px; }
.ss-map-point { display: grid; place-items: center; position: relative; }
.ss-map-point::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #a1b0a9; }
.ss-map-point.is-host::before { width: 14px; height: 14px; background: var(--bh-accent); }
.ss-map-point.is-friend::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid #98502a; border-radius: 50%; }
.ss-map-value { grid-column: 2; font-size: .8rem; color: var(--bh-muted); margin: -.2rem 0 0; line-height: 1.5; }
.ss-comparison-stats p { margin: .5rem 0; font-variant-numeric: tabular-nums; }
.ss-largest { color: var(--bh-accent); font-weight: 650; line-height: 1.6; margin: .8rem 0 1rem; }
.ss-map-legend { display: flex; gap: 1.25rem; margin: 1.2rem 0 .5rem; color: var(--bh-muted); font-size: .85rem; }
.ss-map-legend span { display: flex; align-items: center; gap: .4rem; }
.ss-host-key::before { content: ""; width: 12px; height: 12px; background: var(--bh-accent); border-radius: 50%; }
.ss-friend-key::before { content: ""; width: 15px; height: 15px; border: 2px solid #98502a; border-radius: 50%; }
.ss-comparison-map { margin: .7rem 0 1rem; }
.ss-comparison-map .ss-map-value { font-size: .85rem; }
.ss-comparison-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; }
@media (hover: hover) { .ss-position:not(:has(input:disabled)):hover { border-color: var(--bh-accent); background: #f4f9f7; } }
@media (max-width: 540px) { .ss-axis-labels { gap: .6rem; } .ss-axis-labels strong { font-size: 1.15rem; } .ss-positions { gap: .35rem; } .ss-position { min-height: 54px; } .ss-current h3 { font-size: 1.8rem; } .ss-map-row { grid-template-columns: 110px minmax(0, 1fr); gap: .4rem .6rem; } .ss-map-word { font-size: .9rem; } }
@media (max-width: 380px) { .ss-map-row { grid-template-columns: minmax(0, 1fr); } .ss-map-value { grid-column: 1 / -1; margin: 0; } .ss-play-actions .bh-primary { padding-inline: .7rem; } .ss-comparison-actions { flex-direction: column; } }

.ss-position { flex-direction: column; gap: .25rem; padding: .6rem .35rem; }
.ss-position small { font-size: .78rem; font-weight: 450; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.ss-exchange-guide { max-width: 70ch; margin: .8rem 0 1rem; padding-block: .7rem; border-block: 1px solid var(--bh-line); color: var(--bh-muted); font-size: .9rem; line-height: 1.6; }
.ss ::selection { color: #fff; background: #176f65; }

html[lang="de"] .ss-position small { hyphens:auto; }
@media(max-width:540px){html[lang="de"] .ss-positions{grid-template-columns:minmax(0,1fr);}html[lang="de"] .ss-position{flex-direction:row;justify-content:flex-start;gap:1rem;padding:.65rem 1rem;min-height:52px;}html[lang="de"] .ss-position small{font-size:.9rem;line-height:1.4;text-align:left;}}

html[lang="de"] .ss-map-word { hyphens:auto; }
@media(min-width:381px) and (max-width:540px){html[lang="de"] .ss-map-row{grid-template-columns:140px minmax(0,1fr);}}

/* Keep the live announcement while showing the copy outcome beside its control. */
#ss-exchange-feedback.copy-at-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ss-return-note{font-size:14px;line-height:1.6;margin-block:20px;color:var(--bh-muted,#465b69)}

#ss-saved-exchanges select { display: block; width: 100%; max-width: 100%; min-height: 44px; margin: .4rem 0 .7rem; }
#ss-saved-exchanges li { margin: .65rem 0; overflow-wrap: anywhere; }
#ss-saved-exchanges button { min-height: 44px; max-width: 100%; white-space: normal; }