/* Спільні поверхні використовують палітру активного skin. */
:root {
 --ui-backdrop:color-mix(in srgb,var(--ui-bg) 72%,var(--ui-text));
 --ui-page-background:linear-gradient(var(--ui-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ui-grid) 1px,transparent 1px);
 --ui-page-grid-size:24px 24px;
 --ui-control-border:3px var(--ui-line) var(--ui-border);
 --ui-control-font-size:18px;
 --ui-control-font-weight:700;
 --ui-brand-font-size:40px;
 --ui-brand-tracking:.08em;
 --ui-page-heading-size:clamp(28px,5vw,42px);
 --ui-dialog-heading-size:clamp(28px,3vw,36px);
 --ui-heading-line-height:1.15;
 --ui-panel-outline:1px solid var(--ui-border);
 --ui-disabled-opacity:.6;
 --ui-surface-padding:clamp(16px,3vw,24px);
}
[data-skin="illustrated-fleet"] {--ui-control-font-size:22px}
/* Toast спільний для гри й social; геометрія та lifecycle лишаються у style.css. */
[data-skin] #toast {background:var(--ui-paper);color:var(--ui-text);border:var(--ui-control-border);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow);font-family:var(--ui-body-font)}

/* Native button API: компонент визначає компонування, skin — матеріали та стани.
   Illustrated-fleet доповнює цей consumer чинним lobby artwork primitive в ink-ui.css. */
:where(.game-button,.social-page button,.social-page a){
 border:var(--ui-control-border);border-radius:var(--ui-radius);
 background:var(--ui-button-bg);color:var(--ui-button-text);box-shadow:var(--ui-shadow);
 font-family:var(--ui-body-font);font-size:var(--ui-control-font-size);font-weight:var(--ui-control-font-weight);
 cursor:pointer;text-decoration:none;
}
:where(.game-button,.social-page button,.social-page a):focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}
:where(.game-button,.social-page button):disabled{opacity:var(--ui-disabled-opacity);cursor:default}