/* Лише компонування. Усі матеріали належать skins/ та --ui-* tokens. */
.social-page{margin:0;min-height:100dvh;background-color:var(--ui-bg);background-image:var(--ui-page-background);background-size:var(--ui-page-grid-size);color:var(--ui-text);font-family:var(--ui-body-font);font-size:var(--ui-control-font-size)}
.social-landing{position:relative;max-width:760px;margin:auto;padding:clamp(16px,4vw,40px);text-align:center}
.social-brand{font-family:var(--ui-heading-font);font-size:var(--ui-brand-font-size);font-weight:var(--ui-control-font-weight);letter-spacing:var(--ui-brand-tracking)}
.social-page h1{font-family:var(--ui-heading-font);font-size:var(--ui-page-heading-size);overflow-wrap:anywhere}
.social-preview{display:block;width:100%;height:auto;max-height:40dvh;object-fit:contain;border-radius:var(--ui-radius)}
.social-page button,.social-page a,.social-dialog .game-button,.social-entry{box-sizing:border-box;min-height:44px;padding:10px 14px}
.social-page a,.social-dialog a{display:inline-block;padding:14px}
.social-dialog{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(1000px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);overflow:auto;padding:var(--ui-surface-padding);background:var(--ui-paper);color:var(--ui-text);border:var(--ui-control-border);border-radius:var(--ui-radius);outline:var(--ui-panel-outline);outline-offset:-7px;box-shadow:var(--ui-shadow);font-family:var(--ui-body-font);font-size:var(--ui-control-font-size)}
.social-dialog::backdrop{background:var(--ui-backdrop)}
.social-dialog h2{margin:0 0 12px;font-family:var(--ui-heading-font);font-size:var(--ui-dialog-heading-size);line-height:var(--ui-heading-line-height)}
.social-dialog label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin:8px 0}
.social-dialog input{box-sizing:border-box;width:100%;min-height:44px;padding:8px 12px;color:var(--ui-text);background:var(--ui-input-bg);border:var(--ui-control-border);border-radius:var(--ui-radius);font:inherit}
.social-providers{display:grid;margin-top:8px;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.social-providers [data-provider="native"]{grid-column:1/-1}
.social-close{width:100%}
.social-dialog input:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}
.social-status{color:var(--ui-muted);overflow-wrap:anywhere}
.social-status[data-state="error"],.social-landing[data-social-status="invalid"] h1,.social-landing[data-social-status="expired"] h1,.social-landing[data-social-status="consumed"] h1,.social-landing[data-social-status="cancelled"] h1{color:var(--ui-error)}
.result-actions:has(.social-entry){flex-wrap:wrap}
.result-actions .social-entry{flex:1 1 42%}


/* Єдине намальоване затемнення — чинний #result-modal, native focus trap лишається. */
.social-dialog[data-result-subview]::backdrop{opacity:0}
.social-dialog .social-content{min-height:0}
.social-dialog .social-status{margin:8px 0;min-height:0}
.social-dialog .social-status:empty{margin:0}
.social-dialog .social-retry[hidden]{display:none}
.social-dialog .social-retry{width:100%;margin-bottom:8px}

.social-dialog .victory-corners{display:none}
.social-dialog .social-preview{max-height:calc(100dvh - 340px)}
.social-dialog .game-button{display:flex;align-items:center;justify-content:center;gap:7px;line-height:1.05;text-align:center;text-decoration:none;padding:6px 10px}
.social-dialog .game-button .ui-icon{flex:0 0 22px;width:22px;height:22px}
.social-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:10px}
.social-footer>.social-close:only-child{grid-column:1/-1}
@media(max-width:900px){.social-providers{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){
 .social-dialog{width:calc(100vw - 12px);padding:18px}
 .social-dialog h2{margin-bottom:6px}
 .social-dialog .social-preview{max-height:32dvh}
 .social-providers{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .social-providers [data-provider="copy"]{grid-column:1/-1}
 .social-dialog label{gap:6px;margin:6px 0}
 .social-dialog .game-button{padding:4px 6px;gap:4px}
 .social-footer{gap:8px;margin-top:8px}
}
@media(max-height:650px) and (max-width:650px){
 .social-dialog{padding:16px}
 .social-dialog .social-preview{max-height:max(78px,calc(100dvh - 460px))}
 .social-dialog .social-status{margin:4px 0}
}
@media(max-height:450px) and (min-width:550px){
 .social-dialog{width:calc(100vw - 16px);padding:16px}
 .social-dialog h2{margin-bottom:4px}
 .social-content{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:4px 12px;align-items:center}
 .social-dialog .social-preview{grid-column:1;grid-row:1;max-height:52dvh}
 .social-dialog .social-providers{grid-column:2;margin-top:0}
 .social-copy-manual{grid-column:1/-1}
 .social-dialog label{margin:0;grid-template-columns:minmax(0,1fr);gap:0}
 .social-providers{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 .social-providers [data-provider="copy"]{grid-column:1/-1}
 .social-dialog .game-button{padding:3px 5px;gap:4px}
 .social-footer{margin-top:6px}
 .social-dialog .social-status{margin:2px 0}
}

@media(max-width:360px){.social-footer{grid-template-columns:minmax(0,1fr)}}

/* Feedback накладається на сталу кнопку; її початковий вміст зберігає геометрію. */
.social-providers [data-provider="copy"]{position:relative}
.social-copy-feedback{position:absolute;inset:6px 10px;display:flex;align-items:center;justify-content:center;pointer-events:none;visibility:hidden}
.social-providers [data-copied="true"]>.ui-icon,.social-providers [data-copied="true"]>span:not(.social-copy-feedback){visibility:hidden}
.social-providers [data-copied="true"]>.social-copy-feedback{visibility:visible}
.social-copy-manual{margin-top:8px}
.social-copy-manual p{margin:0;line-height:1.15}
.social-copy-manual label{margin:4px 0 0}

/* Поле відмови має власний резерв висоти; готовий PNG зберігає пропорції. */
.social-dialog:has(.social-copy-manual) .social-preview{max-height:max(64px,calc(100dvh - 460px))}
@media(max-width:650px){.social-dialog:has(.social-copy-manual) .social-preview{max-height:min(28dvh,max(48px,calc(100dvh - 530px)))}}
@media(max-height:450px) and (min-width:550px){
 .social-dialog:has(.social-copy-manual) .social-preview{max-height:max(64px,calc(100dvh - 290px))}
 .social-dialog .social-copy-manual{margin-top:2px}
 .social-copy-manual label{grid-template-columns:auto minmax(0,1fr);gap:6px}
}