/* Édition 22 — formes brutalistes appliquées seulement aux thèmes crème, sombre et verre.
   Les surfaces et couleurs restent celles de chaque thème. Charger après ui21.css. */

/* Couleurs de contours et d'ombres reprises des palettes déjà en place. */
:is(html:not([data-appearance]), html[data-appearance="cream"]) {
  --ui22-edge: #174e3c;
  --ui22-shadow: #163d31;
  --ui22-highlight: #fff;
}
html[data-appearance="dark"] {
  --ui22-edge: #81c784;
  --ui22-shadow: #000;
  --ui22-highlight: #fff;
}
html[data-appearance="glass"] {
  --ui22-edge: #fff;
  --ui22-shadow: #041853;
  --ui22-highlight: #fff;
}

/* Cartes réellement cadrées dans le modèle brutal : plateaux 3/10/6. */
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"])
: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) {
  border: 3px solid var(--ui22-edge);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--ui22-shadow);
}
/* La règle historique #home #mode-6 a deux ID : la forme doit tenir face à elle. */
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) #home #mode-6 {
  border: 3px solid var(--ui22-edge);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--ui22-shadow);
}

/* Tuile d'univers et choix de préparation : plaques 2/8/4, distinctes des mode-cards. */
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"])
:is(#timesup, #universe-public) :is(.universe-tile, .tu-level-choice, .tu-category-choice) {
  border: 2px solid var(--ui22-edge);
  border-radius: 8px;
  box-shadow: 4px 5px 0 var(--ui22-shadow);
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"])
:is(#timesup, #universe-public) :is(.universe-tile, .tu-level-choice, .tu-category-choice):is(:active, .ui20-pressed) {
  transform: translateY(4px);
  box-shadow: 1px 1px 0 var(--ui22-shadow);
}

/* Boutons de jeu : 3/7/5 ; les retours gardent leur forme de commande légère 2/6/3-4. */
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"])
:is(#home, #two-choice, #three-choice, #four-choice, #game, #timesup)
:is(.primary, .secondary, .file-label, .responses button, .taboo-buttons button, #taboo-pass, #taboo-pause, .tu-round-announcement button) {
  border: 3px solid var(--ui22-edge);
  border-radius: 7px;
  box-shadow: 5px 5px 0 var(--ui22-shadow);
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"])
:is(#home, #two-choice, #three-choice, #four-choice, #game, #timesup) button.text-button {
  border: 2px solid var(--ui22-edge);
  border-radius: 6px;
  box-shadow: 3px 4px 0 var(--ui22-shadow);
}

/* Le bouton d'en-tête n'est pas dans #home ; reprendre son cercle brutal réel. */
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) #settings-trigger.settings-trigger {
  border: 2px solid var(--ui22-edge);
  border-radius: 50%;
  box-shadow: 4px 5px 0 var(--ui22-shadow), inset 0 1px 0 var(--ui22-highlight);
}

/* Ombre de bouton universelle du modèle ; les mode-cards restent des cartes animées. */
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"])
button:not(.mode-card):not(.universe):not(.universe-tile):not(.tu-level-choice):not(.tu-category-choice):not(:disabled) {
  box-shadow: 4px 5px 0 var(--ui22-shadow), inset 0 1px 0 var(--ui22-highlight);
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"])
button:not(.mode-card):not(.universe):not(.universe-tile):not(.tu-level-choice):not(.tu-category-choice):not(:disabled):is(:active, .ui20-pressed) {
  transform: translateY(4px);
  box-shadow: 1px 1px 0 var(--ui22-shadow);
}

/* Contrôles AppUI : garder leur contour propre, renforcer seulement leur relief. */
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) :is(.appui-button, .appui-select-trigger, .appui-option, .appui-close) {
  box-shadow: 4px 5px 0 var(--ui22-shadow), inset 0 1px 0 var(--ui22-highlight);
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) .appui-select-trigger {
  border: 2px solid var(--ui22-edge);
  border-radius: 6px;
}
/* Ce descendant a une ancienne règle #timesup plus spécifique : la géométrie est explicite. */
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) #timesup .appui-select-wrap > .appui-select-trigger {
  border: 2px solid var(--ui22-edge);
  border-radius: 6px;
  box-shadow: inset 0 2px 0 var(--ui22-shadow), 3px 4px 0 var(--ui22-shadow);
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) #timesup .panel > select {
  border: 2px solid var(--ui22-edge);
  border-radius: 6px;
  box-shadow: 3px 4px 0 var(--ui22-shadow);
}

/* Dialogues : brutal cadre le tiroir Réglages ; les dialogues AppUI gardent leur silhouette. */
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) .settings-dialog {
  border: 3px solid var(--ui22-edge);
  border-radius: 10px;
  box-shadow: 7px 8px 0 var(--ui22-shadow);
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) :is(.appui-dialog, .appui-picker, .appearance-dialog) {
  box-shadow: 7px 8px 0 var(--ui22-shadow);
}

/* Réglages : seul le champ/ligne, pas son label, est une plaque 2/7/3. */
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) :is(.settings-field, .settings-motion-row) {
  border: 2px solid var(--ui22-edge);
  border-radius: 7px;
  box-shadow: 3px 3px 0 var(--ui22-shadow);
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) :is(.settings-close, .settings-done) {
  border: 2px solid var(--ui22-edge);
  border-radius: 7px;
  box-shadow: 4px 5px 0 var(--ui22-shadow), inset 0 1px 0 var(--ui22-highlight);
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) .settings-theme-option {
  border: 3px solid var(--ui22-edge);
  border-radius: 6px;
  box-shadow: 4px 5px 0 var(--ui22-shadow), inset 0 1px 0 var(--ui22-highlight);
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) .settings-theme-option[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--ui22-edge), 4px 5px 0 var(--ui22-shadow);
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) :is(.settings-header, .settings-section) {
  border-color: var(--ui22-edge);
}

/* Champs ordinaires : pas de relief ajouté ; exclure les toggles et sliders. */
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"])
:is(.panel, .settings-dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  border: 2px solid var(--ui22-edge);
  border-radius: 6px;
  box-shadow: none;
}

/* Un actif garde le relief intérieur prévu par le score brutal, sans cadre aux badges. */
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"])
:is(#game, #timesup) :is(.score-item.active, .tu-scores .score-item.active) {
  box-shadow: inset 0 0 0 2px var(--ui22-edge), 5px 5px 0 var(--ui22-shadow);
}

/* Les sections gardent leur bordure existante ; labels, numéros et pastilles restent nus. */
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"])
:is(#home, #two-choice, #three-choice, #four-choice, #game, #timesup, .appui-shade, .settings-shade, #link-panel) :focus-visible {
  outline-offset: 4px;
}

/* Le thème sombre cible déjà ces contrôles : ce préfixe précis rétablit la même géométrie. */
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) #settings-dialog :is(.settings-field, .settings-motion-row) {
  border: 2px solid var(--ui22-edge);
  border-radius: 7px;
  box-shadow: 3px 3px 0 var(--ui22-shadow);
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) #settings-dialog :is(.settings-close, .settings-done) {
  border: 2px solid var(--ui22-edge);
  border-radius: 7px;
  box-shadow: 4px 5px 0 var(--ui22-shadow), inset 0 1px 0 var(--ui22-highlight);
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) #settings-dialog .settings-theme-option {
  border: 3px solid var(--ui22-edge);
  border-radius: 6px;
  box-shadow: 4px 5px 0 var(--ui22-shadow), inset 0 1px 0 var(--ui22-highlight);
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) #settings-dialog .settings-theme-option[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--ui22-edge), 4px 5px 0 var(--ui22-shadow);
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) #settings-dialog .settings-field select {
  border: 2px solid var(--ui22-edge);
  border-radius: 6px;
  box-shadow: none;
}

/* Exceptions de composant relevées dans le modèle solaire, sans changer les fonds. */
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) :is(#game, #timesup) .word-card {
  border-radius: 8px !important;
  box-shadow: 5px 5px 0 var(--ui22-shadow) !important;
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) #settings-dialog #audio-settings-panel .appui-select-trigger {
  border: 2px solid var(--ui22-edge);
  border-radius: 6px;
}
:is(html:not([data-appearance]), html[data-appearance="cream"], html[data-appearance="dark"], html[data-appearance="glass"]) .appui-picker .appui-option {
  border: 1px solid var(--ui22-edge);
  border-radius: 17px;
}