.ssmc {
    --ssmc-bg: #151d28;
    --ssmc-surface: #253244;
    --ssmc-border: #48576b;
    --ssmc-text: #f5f7fb;
    --ssmc-accent: #f2cf82;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--ssmc-border);
    border-radius: 10px;
    background: var(--ssmc-bg);
    color: var(--ssmc-text);
    font: 13px/1.25 system-ui, sans-serif;
    color-scheme: dark;
}
.ssmc .ssmc-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 5px;
    padding: 5px;
}
.ssmc .ssmc-brand { white-space: nowrap; padding-inline: 3px; }
.ssmc .ssmc-brand span { color: var(--ssmc-accent); }
.ssmc .ssmc-strip select,
.ssmc .ssmc-strip button {
    box-sizing: border-box;
    min-width: 0;
    min-height: 34px;
    max-width: 100%;
    margin: 0;
    padding: 4px 6px;
    border: 1px solid var(--ssmc-border);
    border-radius: 6px;
    background: var(--ssmc-surface);
    color: var(--ssmc-text);
    font: inherit;
}
.ssmc .ssmc-strip [data-game] { width: 100%; text-overflow: ellipsis; }
.ssmc .ssmc-strip button {
    cursor: pointer;
    border-color: var(--ssmc-accent);
    background: var(--ssmc-accent);
    color: #241d12;
    font-weight: 700;
}
.ssmc .ssmc-strip :is(select,button):focus-visible {
    outline: 2px solid var(--ssmc-accent);
    outline-offset: 2px;
}
.ssmc [data-panel][hidden] { display: none !important; }
.ssmc [data-panel] { border-top: 1px solid var(--ssmc-border); padding: 4px; }
.ssmc iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 580px;
    height: clamp(360px, 68vh, 660px);
    margin: 0;
    border: 0;
    border-radius: 6px;
    background: #fff;
}
@media (pointer: coarse) {
    .ssmc .ssmc-strip :is(select,button) { min-height: 44px; }
    .ssmc .ssmc-strip select { font-size: 16px; }
}