/* Édition30 — retouches demandées par PasKing le 24/10 à 14:43 UTC.
   Sombre : typographie commune, relief net, fin des anciens halos.
   Émeraude : plaques opaques, sans givre ni reflets de vitre.
   Aucune règle ne cible Crème douce, Jaune solaire, QR, caméras ou icônes. */

html[data-appearance="dark"] {
  font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  --ui22-highlight: #2a2a2a;
  --shadow-raised: 6px 6px 0 #000;
  --shadow-inset: inset 0 0 0 1px #2a2a2a, 1px 1px 0 #000;
}
html[data-appearance="dark"] .app .mode-card .mode-number {
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: normal;
}
html[data-appearance="dark"] .app .mode-card:not(#mode-covered26) .mode-number {
  font-size: 38px;
  line-height: 1;
}
html[data-appearance="dark"] .app #four-choice .mode-number {
  font-family: system-ui, sans-serif;
}
/* Ce lien conservait seul l'ancienne grosse capsule avec halo. */
html[data-appearance="dark"] .app footer summary {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-appearance="dark"] #settings-dialog .sound-controls label,
html[data-appearance="dark"] #settings-dialog input:is([type="range"], [type="checkbox"]) {
  box-shadow: none !important;
}
html[data-appearance="dark"] #settings-dialog .sound-controls label {
  background: transparent;
}
html[data-appearance="dark"] #settings-dialog :is(#test-sound, #audio-settings-panel summary) {
  border: 2px solid #81c784;
  border-radius: 7px;
  background: #151515;
  color: #ededed;
  box-shadow: 3px 4px 0 #000;
}

html[data-appearance="glass"] {
  --ui22-highlight: #12567a;
  --a30-matte: #0b426f;
  --a30-matte-soft: #12567a;
}
/* La palette du fond général n'est pas changée. Les surfaces deviennent
   simplement peintes et stables, au lieu de laisser le fond les traverser. */
html[data-appearance="glass"] .app
:is(#home, #two-choice, #three-choice, #four-choice, #game, #timesup, #universe-public)
:is(.mode-card, .universe, .panel, .score-item, .secret-card, .mini-card,
    .word-card, .lock-art, .sound-controls, #taboo-paused, #relay-wait,
    .tu-round-results, .tu-round-announcement) {
  background-image: none;
  background-color: var(--a30-matte);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-appearance="glass"] .app :is(#game, #timesup) .score-item.active,
html[data-appearance="glass"] .app :is(#home, #universe-public, #timesup) .universe.civil {
  background-color: var(--a30-matte-soft);
}
html[data-appearance="glass"]
:is(.settings-dialog, .appui-dialog, .appui-picker, .appearance-dialog,
    .audio-settings-panel, .link-card, .tl24-card, .cl26-card) {
  background-image: none;
  background-color: var(--a30-matte);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-appearance="glass"] #settings-dialog
:is(.settings-field, .settings-motion-row, .settings-theme-option,
    .sound-controls, #test-sound, #audio-settings-panel summary,
    .appui-select-trigger) {
  background-image: none;
  background-color: var(--a30-matte-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-appearance="glass"] #settings-trigger,
html[data-appearance="glass"] .app #quit {
  background-image: none;
  background-color: var(--a30-matte);
}
/* Le duo 06/08 reste rigoureusement de même couleur. AMC garde son accent
   bleu pétrole spécifique, pris dans son dégradé déjà approuvé. */
html[data-appearance="glass"] .app #home :is(#mode-6, #mode-8),
html[data-appearance="glass"] .app #home :is(#mode-6, #mode-8):is(:hover, :focus-visible) {
  background: #12567a;
}
html[data-appearance="glass"] .app #home #mode-covered26,
html[data-appearance="glass"] .app #home #mode-covered26:is(:hover, :focus-visible) {
  background: #052f4b;
}
/* Les réponses et actions existantes gardent leur hiérarchie : les couleurs
   d'alerte ne sont pas remplacées. On enlève seulement les reflets vitrés. */
html[data-appearance="glass"] .app
:is(#home, #two-choice, #three-choice, #four-choice, #game, #timesup)
:is(.primary, .secondary, .text-button, .responses button):not(.danger) {
  background-image: none;
}
html[data-appearance="glass"] .app
:is(#home, #two-choice, #three-choice, #four-choice, #game, #timesup)
:is(.secondary, .text-button):not(.danger) {
  background-color: var(--a30-matte);
}
/* Une même pression courte et franche, plutôt qu'un changement de matière.
   Aucune durée d'animation, dimension, règle de jeu ou couche n'est modifiée. */
html:is([data-appearance="dark"], [data-appearance="glass"]) .app
:is(.mode-card, .universe):is(:active, .ui20-pressed) {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--ui22-shadow);
}