html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.display-mode-panel {
  width: 100%;
  max-width: 460px;
  margin: 0 auto 22px;
  text-align: center;
}

.display-mode-title {
  margin: 0 0 9px;
  color: #1e3a8a;
  font-size: 1rem;
}

.display-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.display-mode-option {
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid #4a90d9;
  border-radius: 12px;
  background-color: #fff;
  color: #1e3a8a;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 800;
}

.display-mode-option[aria-pressed="true"] {
  background-color: #4a90d9;
  color: #fff;
}

.display-mode-status {
  min-height: 20px;
  margin: 7px 0 0;
  color: #52677b;
  font-size: .82rem;
  line-height: 1.4;
}

html.mode-noir,
html.mode-noir body {
  background-color: #fff !important;
  color: #000 !important;
  color-scheme: light;
}

html.mode-noir body * {
  background-color: #fff !important;
  border-color: #000 !important;
  box-shadow: none !important;
  color: #000 !important;
  text-shadow: none !important;
}

html.mode-noir img,
html.mode-noir .booklet-hand-image,
html.mode-noir .ten-hand-image,
html.mode-noir .five-hand-image {
  filter: grayscale(1) contrast(1.35);
}

html.mode-noir :where(
  button,
  .btn,
  .base-choice,
  .action-btn,
  .primary-link,
  .strategy-card,
  .number-key,
  .nkey,
  .answer-key,
  .replay-btn,
  .voice-button,
  .install-btn,
  .site-home-link
) {
  border: 2px solid #000 !important;
  background-color: #fff8e7 !important;
  color: #000 !important;
  opacity: 1;
  border-radius: 14px !important;
}

/* En mode noir et blanc, les commandes gardent toutes le même repère visuel :
   fond blanc crème, contour noir et texte noir. */
html.mode-noir body :where(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  .btn,
  .base-choice,
  .action-btn,
  .primary-link,
  .strategy-card,
  .number-key,
  .nkey,
  .answer-key,
  .answer-value,
  .replay-btn,
  .voice-button,
  .install-btn,
  .site-home-link
) {
  border: 2px solid #000 !important;
  border-radius: 14px !important;
  background: #fff8e7 !important;
  color: #000 !important;
}

html.mode-noir :where(button, a):focus-visible {
  outline: 4px solid #000 !important;
  outline-offset: 3px !important;
}

html.mode-noir :where(button, a):hover {
  text-decoration: underline;
  transform: none !important;
}

html.mode-noir :where(button, .number-key, .nkey, .answer-key):disabled {
  border-style: dotted !important;
  opacity: .65;
}

html.mode-noir .display-mode-option[aria-pressed="true"] {
  border: 4px double #000 !important;
  font-weight: 900;
  text-decoration: underline;
}

html.mode-noir .voice-button[aria-pressed="true"] {
  border: 4px double #000 !important;
  font-weight: 900;
  text-decoration: underline;
}

html.mode-noir :where(.progress-dot, .progress-segment) {
  border: 1px solid #000 !important;
  background: #fff !important;
}

html.mode-noir :where(.progress-dot.correct, .progress-segment.correct) {
  background: #000 !important;
}

html.mode-noir :where(.progress-dot.wrong, .progress-segment.wrong) {
  background: repeating-linear-gradient(135deg, #fff 0 3px, #000 3px 5px) !important;
}

html.mode-noir :where(.tile.t-fast, .tile.t-medium, .tile.t-slow) {
  background: #fff !important;
  color: #000 !important;
}

html.mode-noir .tile.t-fast { border: 3px solid #000 !important; }
html.mode-noir .tile.t-medium { border: 4px double #000 !important; }
html.mode-noir .tile.t-slow { border: 3px dashed #000 !important; }
html.mode-noir .tile.had-wrong { outline: 3px dotted #000 !important; }

html.mode-noir :where(.answer-value.active, .nkey.selected) {
  border: 4px double #000 !important;
  font-weight: 900;
}

html.mode-noir .die.wrong { border-style: dashed !important; }
html.mode-noir .die.correct { border-width: 6px !important; border-style: solid !important; }

html.mode-noir .pip {
  background: radial-gradient(circle, #fff 0 10px, #000 11px 12px, transparent 13px) !important;
}

html.mode-noir :where(.pip.active, .die.fixed .pip.active) {
  background: radial-gradient(circle, #000 0 12px, transparent 13px) !important;
}

html.mode-noir .die.fixed .pip:not(.active) { background: transparent !important; }
html.mode-noir .mini-die .pip { background: transparent !important; }
html.mode-noir .mini-die .pip.active {
  background: radial-gradient(circle, #000 0 5px, transparent 6px) !important;
}

html.mode-noir :where(#install-banner, #offline-bar) {
  border: 3px solid #000 !important;
  background: #fff !important;
  color: #000 !important;
}

@media (max-width: 340px) {
  .display-mode-options { grid-template-columns: 1fr; }
}