/* v48 préproduction — finition légère au-dessus du style v46. */
#home .special-mode-heading48 {
  margin: 30px 0 14px;
}
#home .special-mode-grid48 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
  margin: 0 0 28px;
}
#home .special-mode-card48 {
  box-sizing: border-box;
  width: 100%;
  min-height: 116px;
  margin: 0;
  padding: 18px 20px;
  gap: 15px;
  align-items: center;
}
#home .mode-logo48 {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  color: var(--mode-accent48, #28664b);
  background: color-mix(in srgb, var(--mode-accent48, #28664b) 11%, var(--paper));
  opacity: 1;
  font-size: 0;
}
#home .mode-logo48 svg {
  display: block;
  width: 29px;
  height: 29px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#mode-duo46 { --mode-accent48: #28664b; }
#mode-solo46 { --mode-accent48: #a86822; }
#mode-teams46 { --mode-accent48: #3a6470; }
#mode-timesup46 { --mode-accent48: #a94e39; }
#mode-relay46 { --mode-accent48: #426846; }
#mode-duel46 { --mode-accent48: #65528a; }
#mode-covered26 { --mode-accent48: #dceca1; }
#home #mode-covered26 .mode-logo48 {
  color: #e4f5a8;
  background: #194836;
}
#home .special-mode-card48 > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
#home .special-mode-card48 small {
  margin: 0;
  line-height: 1.5;
}
#home .special-mode-card48 .mode-status48 {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  margin-top: 1px;
  padding: 3px 9px;
  border: 1px solid rgba(40, 102, 75, .18);
  border-radius: 999px;
  color: #28664b;
  background: rgba(40, 102, 75, .07);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .45px;
  line-height: 1.25;
  white-space: nowrap;
}
#home .special-mode-card48:disabled {
  cursor: not-allowed;
  opacity: 1;
}
#home .special-mode-card48:disabled:hover,
#home .special-mode-card48:disabled:active {
  transform: none;
  box-shadow: 0 5px 0 rgba(214, 222, 203, .88), 0 12px 28px rgba(24, 57, 45, .055);
}
#home .pending-mode48 {
  border-style: dashed;
  background: color-mix(in srgb, var(--paper) 90%, #e8eadf);
  box-shadow: 0 3px 0 rgba(214, 222, 203, .55);
}
#home .pending-mode48 .pending-logo48 {
  --mode-accent48: #65528a;
}
#home .pending-mode48 .mode-status48 {
  color: #65528a;
  border-color: rgba(101, 82, 138, .2);
  background: rgba(101, 82, 138, .07);
}
/* Micro-mouvement bref, uniquement sur les commandes actives. */
#home .mode-grid46 > .mode-card:not(:disabled),
#home .special-mode-grid48 > .mode-card:not(:disabled) {
  transition: transform 150ms cubic-bezier(.2, .7, .25, 1), box-shadow 150ms ease, border-color 150ms ease !important;
}
@media (hover: hover) and (pointer: fine) {
  #home .mode-grid46 > .mode-card:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 rgba(214, 222, 203, .78), 0 16px 28px rgba(24, 57, 45, .09);
  }
}
#home .mode-grid46 > .mode-card:not(:disabled):active {
  transform: translateY(1px);
}
@media (max-width: 700px) {
  #home .special-mode-heading48 { margin-top: 24px; }
  #home .special-mode-card48 { min-height: 108px; padding: 16px 15px; gap: 12px; }
}
@media (max-width: 350px) {
  #home .special-mode-card48 { padding: 14px 11px; gap: 10px; }
  #home .special-mode-card48 .mode-logo48 { flex-basis: 46px; width: 46px; height: 46px; border-radius: 15px; }
  #home .special-mode-card48 .mode-logo48 svg { width: 25px; height: 25px; }
  #home .mode-grid46 > .mode-card .mode-logo48 { flex-basis: 46px; width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  #home .mode-grid46 > .mode-card:not(:disabled),
  #home .special-mode-grid48 > .mode-card:not(:disabled) {
    transition: none !important;
  }
  #home .mode-grid46 > .mode-card:not(:disabled):hover,
  #home .mode-grid46 > .mode-card:not(:disabled):active {
    transform: none;
  }
}
html[data-appearance="dark"] #home .special-mode-card48 .mode-status48 {
  color: #b6d69d;
  border-color: rgba(182, 214, 157, .24);
  background: rgba(182, 214, 157, .08);
}
html[data-appearance="dark"] #home .pending-mode48 .mode-status48 {
  color: #d0bdf0;
  border-color: rgba(208, 189, 240, .24);
  background: rgba(208, 189, 240, .08);
}

@media (max-width: 350px) {
  #home ~ .version,
  .topbar .version { display: none; }
}


/* Annonce de bienvenue v48 : modale accessible, sobre et adaptée aux thèmes existants. */
#release-announcement48 {
  position: fixed;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: min(520px, calc(100vw - 28px));
  max-height: min(88dvh, 720px);
  margin: 0;
  padding: clamp(22px, 5vw, 34px);
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 3px solid #111;
  border-radius: 12px;
  color: var(--ink, #163d31);
  background: var(--paper, #fff8dc);
  box-shadow: 8px 8px 0 #111, 0 24px 64px rgba(0, 0, 0, .28);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
#release-announcement48::backdrop {
  background: rgba(11, 20, 16, .66);
}
#release-announcement48 h2 {
  margin: 2px 0 12px;
  font-size: clamp(25px, 6vw, 32px);
  line-height: 1.12;
  letter-spacing: -.035em;
}
#release-announcement48 .announcement48-kicker {
  margin: 0;
  color: #28664b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}
#release-announcement48 .announcement48-thanks {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.55;
}
#release-announcement48 .announcement48-list {
  display: grid;
  gap: 11px;
  margin: 18px 0 0;
  padding-left: 21px;
  font-size: 14px;
  line-height: 1.5;
}
#release-announcement48 .announcement48-list li::marker {
  color: #28664b;
}
#release-announcement-continue48 {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 22px;
  padding: 12px 18px;
  border: 3px solid #111;
  border-radius: 9px;
  color: #111;
  background: #f3d86d;
  box-shadow: 4px 4px 0 #111;
  font: 800 15px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
}
#release-announcement-continue48:focus-visible {
  outline: 3px solid #28664b;
  outline-offset: 4px;
}
#release-announcement-continue48:active {
  transform: translateY(1px);
  box-shadow: 2px 2px 0 #111;
}
html[data-appearance="dark"] #release-announcement48 {
  border-color: #d7ddd9;
  color: rgba(255, 255, 255, .9);
  background: #151918;
  box-shadow: 6px 6px 0 #d7ddd9, 0 24px 64px rgba(0, 0, 0, .55);
}
html[data-appearance="dark"] #release-announcement48 .announcement48-kicker,
html[data-appearance="dark"] #release-announcement48 .announcement48-list li::marker {
  color: #b6d69d;
}
html[data-appearance="dark"] #release-announcement48 .announcement48-thanks {
  color: rgba(255, 255, 255, .82);
}
html[data-appearance="glass"] #release-announcement48 {
  border-color: rgba(255, 255, 255, .72);
  color: #fff;
  background: linear-gradient(145deg, #125b91, #272576);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
}
html[data-appearance="glass"] #release-announcement48 .announcement48-kicker,
html[data-appearance="glass"] #release-announcement48 .announcement48-list li::marker {
  color: #c4ffe5;
}
@media (max-width: 420px) {
  #release-announcement48 {
    width: calc(100vw - 24px);
    max-height: 90dvh;
    padding: 22px 18px;
  }
  #release-announcement48 .announcement48-list {
    gap: 9px;
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #release-announcement-continue48 { transition: none !important; }
}