/* Édition 28 — équilibrage des seuls panneaux de liaison.
   Les quatre familles restent distinctes : jaune solaire, crème douce,
   sombre sculpté et verre émeraude. QR scannables et caméras sont hors portée. */

/* Tokens privés aux trois panneaux : aucune surface globale ni écran de jeu n’est redéfini. */
#link-panel,
#team-link24-lobby,
#covered-link26-lobby {
  --paper: #fffef8;
  --cream: #f6f3e9;
  --ink: #163d31;
  --muted: #536559;
  --green: #174e3c;
  --gold: #174e3c;
  --ui22-edge: #174e3c;
  --ui22-shadow: #163d31;
  --a28-soft: #f6f3e9;
  --a28-accent: #174e3c;
  --a28-on-accent: #fff;
  --a28-edge: #174e3c;
  --a28-shadow: #163d31;
}

/* Sombre sculpté : surfaces charbon, accent vert profond et texte blanc. */
html[data-appearance="dark"] #link-panel,
html[data-appearance="dark"] #team-link24-lobby,
html[data-appearance="dark"] #covered-link26-lobby {
  --paper: #151515;
  --cream: #0d0d0d;
  --ink: #ededed;
  --muted: #c2c9c4;
  --green: #004d40;
  --gold: #81c784;
  --ui22-edge: #81c784;
  --ui22-shadow: #000;
  --a28-soft: #2a2a2a;
  --a28-accent: #004d40;
  --a28-on-accent: #fff;
  --a28-edge: #81c784;
  --a28-shadow: #000;
}

/* Verre émeraude : bleus pétrole, surfaces froides et accent menthe lisible. */
html[data-appearance="glass"] #link-panel,
html[data-appearance="glass"] #team-link24-lobby,
html[data-appearance="glass"] #covered-link26-lobby {
  --paper: #0b426f;
  --cream: #087e9b;
  --ink: #fff;
  --muted: #e4f3f5;
  --green: #a9f5d8;
  --gold: #a9f5d8;
  --ui22-edge: #fff;
  --ui22-shadow: #041853;
  --a28-soft: #12567a;
  --a28-accent: #a9f5d8;
  --a28-on-accent: #062e45;
  --a28-edge: #fff;
  --a28-shadow: #041853;
}

/* Jaune solaire : fond crème solaire et commandes jaune franc, encre très sombre. */
html[data-appearance="brutal"] #link-panel,
html[data-appearance="brutal"] #team-link24-lobby,
html[data-appearance="brutal"] #covered-link26-lobby {
  --paper: #fff;
  --cream: #fff8dc;
  --ink: #111;
  --muted: #3c3420;
  --green: #ffd000;
  --gold: #111;
  --ui22-edge: #111;
  --ui22-shadow: #111;
  --a28-soft: #fff8dc;
  --a28-accent: #ffd000;
  --a28-on-accent: #111;
  --a28-edge: #111;
  --a28-shadow: #111;
}

/* GameLink : cadre sculpté net, surfaces calmes et accent réservé aux commandes fortes. */
#link-panel .link-card {
  box-sizing: border-box;
  width: min(100%, 600px);
  min-width: 0;
  border: 3px solid var(--a28-edge);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--a28-shadow);
  overflow-wrap: anywhere;
}
#link-panel .link-card :is(h2, h3, label, summary):not(.link-diagnostic *) {
  color: var(--ink);
  line-height: 1.35;
}
#link-panel .link-card :is(.link-note, .link-pane p, .link-pane small, .qr-intro, .qr-advanced p, .link-advanced > p, .security-key > small) {
  color: var(--muted);
}
#link-panel .qr-card {
  border: 2px solid var(--a28-edge);
  border-radius: 8px;
  background: var(--a28-soft);
  color: var(--ink);
  box-shadow: 3px 4px 0 var(--a28-shadow);
}
#link-panel :is(.qr-primary, .qr-actions button, .qr-nav button, .qr-guidance button, .link-tabs button[aria-selected="true"]),
#link-panel .link-actions button:not(.link-diagnostic *) {
  border: 2px solid var(--a28-edge);
  border-radius: 7px;
  background: var(--a28-accent);
  color: var(--a28-on-accent);
  box-shadow: 3px 4px 0 var(--a28-shadow);
}
#link-panel .qr-roles .qr-primary small {
  color: inherit;
  opacity: 1;
}
#link-panel :is(.link-tabs, .qr-guidance, #qr-status, #link-panel-status, .security-key) {
  border-color: var(--a28-edge);
  background-color: var(--a28-soft);
  color: var(--ink);
}
#link-panel :is(.qr-warning, .link-unavailable) {
  border-color: var(--a28-edge);
  background: var(--a28-soft);
  color: var(--ink) !important;
}
#link-panel :is(.link-advanced, .qr-advanced) {
  border-color: var(--a28-edge);
  color: var(--ink);
}
#link-panel :is(.link-pane input:not([type="checkbox"]), .link-pane textarea, .qr-card textarea, .qr-card select, .link-tabs button:not([aria-selected="true"]), .link-device) {
  min-width: 0;
  border: 2px solid var(--a28-edge);
  background: var(--paper);
  color: var(--ink);
}
#link-panel .link-card :not(.link-diagnostic) > .link-actions {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
}
#link-panel .link-card :not(.link-diagnostic) > .link-actions > button {
  flex: 1 1 140px;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
}
#link-panel .link-card :not(.link-diagnostic) > .link-actions > input {
  flex: 2 1 190px;
  min-width: 0;
}
#link-panel #link-disconnect {
  border-color: var(--a28-edge);
  background: var(--paper);
  color: var(--ink);
}
#link-panel #link-panel-status {
  color: var(--ink) !important;
}
#link-panel #link-panel-status[data-connected="true"] {
  border: 2px solid var(--a28-edge);
  background: var(--a28-accent);
  color: var(--a28-on-accent) !important;
}
#link-panel :focus-visible,
#team-link24-lobby :focus-visible,
#covered-link26-lobby :focus-visible {
  outline-offset: 4px;
}

/* TeamLink24 / CoveredLink26 : cadrages centrés, surfaces homogènes, boutons différenciés. */
:is(#team-link24-lobby, #covered-link26-lobby) {
  box-sizing: border-box;
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}
:is(.tl24-card, .cl26-card) {
  box-sizing: border-box;
  width: min(100%, 640px);
  min-width: 0;
  max-height: min(94dvh, 900px);
  border: 3px solid var(--a28-edge);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--a28-shadow);
  overflow-wrap: anywhere;
}
:is(.tl24-card, .cl26-card) :is(h2, label, summary) {
  color: var(--ink);
  line-height: 1.4;
}
:is(.tl24-card, .cl26-card) :is(.tl24-kicker, .tl24-intro, .tl24-note, .cl26-kicker, .cl26-intro, .cl26-note, details p) {
  color: var(--muted);
}
:is(.tl24-card, .cl26-card) select,
:is(.tl24-card, .cl26-card) textarea,
:is(.tl24-card, .cl26-card) .tl24-peers,
:is(.tl24-card, .cl26-card) .cl26-peers,
:is(.tl24-card, .cl26-card) details {
  border-color: var(--a28-edge);
  background: var(--paper);
  color: var(--ink);
}
:is(.tl24-card, .cl26-card) button {
  box-sizing: border-box;
  max-width: 100%;
  border-color: var(--a28-edge);
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
#team-link24-lobby .tl24-card .tl24-primary,
#covered-link26-lobby .cl26-card .cl26-primary {
  border: 2px solid var(--a28-edge);
  border-radius: 7px;
  background: var(--a28-accent);
  color: var(--a28-on-accent);
  box-shadow: 3px 4px 0 var(--a28-shadow);
}
:is(.tl24-roles, .tl24-actions, .cl26-roles, .cl26-actions) {
  align-items: stretch;
  gap: 12px;
}
:is(.tl24-roles, .cl26-roles) > button {
  min-width: 0;
  line-height: 1.35;
}
:is(.tl24-actions, .cl26-actions) > button {
  flex: 1 1 145px;
  min-width: 0;
}
#tl24-status,
#cl26-status {
  color: var(--ink);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
#tl24-status[data-error="true"],
#cl26-status[data-error="true"] {
  border-left-color: var(--a28-edge);
}

@media (max-width: 380px) {
  #link-panel .link-card {
    padding-left: 14px;
    padding-right: 14px;
  }
  :is(.tl24-card, .cl26-card) {
    padding-left: 14px;
    padding-right: 14px;
  }
  :is(.tl24-roles, .tl24-actions, .cl26-roles, .cl26-actions) {
    gap: 9px;
  }
}

/* Couche globale Appearance 28 : tokens dérivés des quatre thèmes approuvés.
   Elle harmonise surfaces et textes sans toucher aux gabarits, règles ni médias. */
:root {
  --a28-global-paper: #fffef8;
  --a28-global-soft: #f6f3e9;
  --a28-global-ink: #163d31;
  --a28-global-muted: #536559;
  --a28-global-edge: #174e3c;
  --a28-global-focus: #174e3c;
}
html[data-appearance="brutal"] {
  --a28-global-paper: #fff;
  --a28-global-soft: #fff8dc;
  --a28-global-ink: #111;
  --a28-global-muted: #3c3420;
  --a28-global-edge: #111;
  --a28-global-focus: #111;
}
html[data-appearance="dark"] {
  --a28-global-paper: #151515;
  --a28-global-soft: #2a2a2a;
  --a28-global-ink: #ededed;
  --a28-global-muted: #c2c9c4;
  --a28-global-edge: #81c784;
  --a28-global-focus: #81c784;
}
html[data-appearance="glass"] {
  --a28-global-paper: #0b426f;
  --a28-global-soft: #12567a;
  --a28-global-ink: #fff;
  --a28-global-muted: #e4f3f5;
  --a28-global-edge: #fff;
  --a28-global-focus: #fff;
}

/* Surfaces ordinaires et panneaux de réglage : mêmes couleurs calmes par thème.
   Les modes featured (06/08) gardent leur accent; AMC reste une carte distincte. */
html .app :is(#home, #two-choice, #three-choice, #four-choice, #game, #timesup)
  :is(.panel, .mode-card:not(.featured):not(#mode-covered26), .universe:not(.civil), .score-item:not(.active), .sound-controls, #taboo-paused, #relay-wait),
html .app :is(.settings-dialog, .audio-settings-panel, .appearance-dialog, #bank-panel) {
  color: var(--a28-global-ink);
  background-color: var(--a28-global-paper);
}
html .app :is(.panel, .mode-card:not(.featured):not(#mode-covered26), .universe:not(.civil), .settings-dialog, .settings-field, .settings-motion-row, .settings-theme-option, #bank-panel) {
  border-color: var(--a28-global-edge);
}
html .app :is(.panel, .settings-dialog, .audio-settings-panel, .appearance-dialog, #bank-panel)
  :is(p, .help, .settings-description, .settings-hint, small),
html .app :is(.mode-card:not(.featured):not(#mode-covered26), .universe:not(.civil)) small,
html .app :is(.version, .section-title > span, .viewer-help, .app-footer) {
  color: var(--a28-global-muted);
}
html .app :is(input:not([type="checkbox"]):not([type="range"]), select, textarea) {
  color: var(--a28-global-ink);
  background-color: var(--a28-global-soft);
  border-color: var(--a28-global-edge);
  line-height: 1.4;
}
html .app :is(button, summary, input, select, textarea):focus-visible {
  outline-color: var(--a28-global-focus);
}
html .app :is(.mode-card, .panel, .universe, .settings-dialog, #bank-panel) {
  overflow-wrap: anywhere;
}
html .app .mode-card .mode-number {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}