/* F4IOZ — Jeux: the games' list, their panels (tabs, choices, rounds, the end), the badges, the toasts.
   The locator game sits on Grid's scene (grid.css); only .jeu…, .jeux…, .badge… classes here. */

/* ------------------------------------------------------------ the games' list */
.jeux-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-bottom: 18px; }
.jeux-carte { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden;
  transition: transform var(--anim), border-color var(--anim), box-shadow var(--anim); }
.jeux-carte:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-pop); }
.jeux-illus { display: block; line-height: 0; }
.jeux-illus svg { width: 100%; height: auto; display: block; }
.jeux-carte-txt { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.jeux-carte-txt h2 { margin: 0; font-size: 20px; }
.jeux-carte-txt p { margin: 0; color: var(--text-dim); font-size: 14px; }
.jeux-carte-txt p:last-child { margin-top: auto; padding-top: 4px; }
.jeux-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.jeux-perso { font-size: 13px !important; color: var(--amber) !important; }
.jeux-bientot { justify-content: center; align-items: center; min-height: 160px; border-style: dashed; box-shadow: none; background: transparent; }
.jeux-bientot:hover { transform: none; border-color: var(--border-strong); box-shadow: none; }
.jeux-bientot p { margin: 0; color: var(--text-muted); font-size: 14px; }
.jeux-tous-badges .card-body { padding: 14px 16px; }
.jeux-memoire { margin: 10px 0 0; font-size: 12px; }

/* The cards' pictures. */
.il-fond { fill: var(--espace); }
.il-terre { fill: var(--g-terre); }
.il-grille path { stroke: var(--g-grille); stroke-width: 1; }
.il-cible { fill: color-mix(in srgb, var(--amber) 35%, transparent); stroke: var(--amber); stroke-width: 2; }
.il-pulse { fill: none; stroke: var(--amber); stroke-width: 2; transform-origin: 150px 50px; animation: il-pulse 2.2s ease-out infinite; }
.il-trait { stroke: var(--amber); stroke-width: 2; stroke-dasharray: 5 5; fill: none; }
.il-clic { fill: var(--accent); }
.il-loc { font: 700 15px var(--font-mono); fill: var(--amber); }
.il-indicatif { font: 700 24px var(--font-mono); fill: var(--text); letter-spacing: .06em; }
.il-cartes rect { fill: var(--panel-2); stroke: var(--border-strong); }
.il-cartes .il-bonne { fill: color-mix(in srgb, var(--green) 25%, var(--panel-2)); stroke: var(--green); stroke-width: 2; }
.il-drapeaux rect { fill: var(--border-strong); }
.il-coche { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.il-combo { font: 800 20px var(--font-mono); fill: var(--amber); }
@keyframes il-pulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ------------------------------------------------------------ badges */
.badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.badge { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-m); border: 1px solid var(--border); background: var(--panel-2); min-width: 0; }
.badge-svg { flex: none; width: 44px; height: 44px; }
.badge-txt { display: flex; flex-direction: column; min-width: 0; }
.badge-nom { font-size: 13.5px; }
.badge-cond { font-size: 12px; color: var(--text-dim); line-height: 1.3; }
.badge-date { font-size: 11px; color: var(--accent); }
.badge-date:empty { display: none; }
.badge { --b: var(--amber); }
.badge.rang-2 { --b: var(--info); }
.badge.rang-3 { --b: var(--sat); }
.b-fond { fill: color-mix(in srgb, var(--b) 22%, var(--panel)); stroke: var(--b); stroke-width: 2; }
.b-bord { fill: none; stroke: color-mix(in srgb, var(--b) 45%, transparent); stroke-width: 1; }
.b-glyphe { fill: none; stroke: var(--b); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.badge.obtenu { border-color: color-mix(in srgb, var(--b) 55%, var(--border)); background: color-mix(in srgb, var(--b) 8%, var(--panel-2)); }
.badge.obtenu .badge-svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--b) 45%, transparent)); }
.badge.verrouille .badge-svg { filter: grayscale(1); opacity: .38; }
.badge.verrouille .badge-nom { color: var(--text-dim); }
/* In a game's narrow panel: smaller, two to a row. */
.jeu-panneau .badges { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 6px; }
.jeu-panneau .badge { flex-direction: column; text-align: center; gap: 4px; padding: 8px 6px; }
.jeu-panneau .badge-cond { font-size: 11px; }
.jeu-compte { font-weight: 600; color: var(--accent); letter-spacing: 0; text-transform: none; margin-left: 4px; }

/* ------------------------------------------------------------ a game's page */
body.jeu-page .grid-app { grid-template-columns: minmax(0, 1fr) 360px; }
.jeu-tete p a { white-space: nowrap; }
.jeu-onglets { display: flex; gap: 2px; padding: 3px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-l); box-shadow: var(--shadow); flex: none; }
.jeu-onglets button { flex: 1; min-height: 36px; border: 0; border-radius: var(--r-m); background: none; color: var(--text-dim); font: 600 13px var(--font-sans); cursor: pointer; padding: 0 6px; }
.jeu-onglets button:hover { color: var(--accent); }
.jeu-onglets button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.jeu-onglets button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.jeu-panneau-onglet { display: flex; flex-direction: column; gap: 10px; }
.jeu-panneau-onglet[hidden] { display: none; }
.jeu-panneau h3 { margin: 0 0 6px; font: 700 11px/1.2 var(--font-sans); letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-dim); }

/* The new game's choices. */
.jeu-choix { border: 0; margin: 0 0 10px; padding: 0; min-width: 0; }
.jeu-choix legend { padding: 0; margin-bottom: 6px; font: 700 11px/1.2 var(--font-sans); letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-dim); }
.jeu-niveaux { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.jeu-niveaux legend { grid-column: 1 / -1; }
.jeu-option, .jeu-puce { position: relative; cursor: pointer; }
.jeu-option { display: block; min-width: 0; }
.jeu-option input, .jeu-puce input { position: absolute; opacity: 0; pointer-events: none; }
.jeu-option span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-m); background: var(--well);
  transition: border-color var(--anim), background var(--anim), transform var(--anim); }
.jeu-option b { font-size: 14px; }
.jeu-option small { font-size: 11.5px; font-weight: 400; line-height: 1.3; color: var(--text-dim); }
.jeu-option:hover span, .jeu-puce:hover span { border-color: var(--accent); }
.jeu-option input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.jeu-option input:focus-visible + span, .jeu-puce input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.jeu-zones { display: flex; flex-wrap: wrap; gap: 6px; }
.jeu-zones legend { width: 100%; }
.jeu-puce span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--well); font-size: 13px;
  transition: border-color var(--anim), background var(--anim); }
.jeu-puce input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.jeu-puce.jeu-off { cursor: not-allowed; }
.jeu-puce.jeu-off span { opacity: .4; text-decoration: line-through; }
.jeu-case { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; cursor: pointer; margin-bottom: 8px; }
.jeu-case input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.jeu-case small { color: var(--text-dim); font-weight: 400; }
.jeu-go { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jeu-go .btn.solid { min-width: 120px; }
.jeu-zone-etat { margin: 0 0 8px; font-size: 12.5px; color: var(--warn) !important; }

/* A round. */
.jeu-partie p, .jeu-resume p { margin: 0 0 8px; font-size: 13.5px; }
.jeu-cible { font-size: 18px !important; }
.jeu-cible b { font-size: 34px; color: var(--amber); letter-spacing: .08em; display: inline-block; animation: jeu-apparait .45s cubic-bezier(.2,1.4,.4,1); }
.jeu-consigne { font-size: 12.5px !important; }
.jeu-serie { color: var(--amber); font-weight: 700; }
.jeu-serie::after { content: ' 🔥'; }
.jeu-aides { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.jeu-aide { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--r-m); border: 1px dashed var(--border-strong);
  background: var(--well); color: var(--text); font: 600 13.5px var(--font-sans); cursor: pointer; text-align: left; }
.jeu-aide small { font: 600 12px var(--font-mono); color: var(--amber); }
.jeu-aide:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.jeu-aide:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.jeu-aide:disabled { opacity: .45; cursor: default; }
.jeu-aide.pris { opacity: .75; border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.jeu-aide.arme { border-style: solid; border-color: var(--amber); animation: jeu-arme 1s ease-in-out infinite alternate; }
.jeu-sonde { min-height: 1.4em; }
.jeu-sonde:empty { display: none; }
.jeu-chaleur { padding: 1px 8px; border-radius: 999px; font-size: 12.5px; color: #fff; }
.jeu-chaleur.brulant { background: #D7372A; } .jeu-chaleur.chaud { background: #E8702A; } .jeu-chaleur.tiede { background: #B8860B; }
.jeu-chaleur.frais { background: #3C7DD9; } .jeu-chaleur.froid { background: #3451C8; }
.jeu-res { font-size: 15px !important; font-weight: 600; }
.jeu-res.bravo { color: var(--green); }
.jeu-gain { font: 800 34px/1 var(--font-mono) !important; color: var(--accent); margin: 2px 0 8px !important; animation: jeu-pop .6s cubic-bezier(.2,1.6,.4,1); transform-origin: left center; }
.jeu-gain.bravo { color: var(--green); }
.jeu-detail { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 10px; font-size: 13px; }
.jeu-detail dt { color: var(--text-muted); }
.jeu-detail dd { margin: 0; }

/* The game's end. */
.jeu-resume h2 { font-size: 13px !important; }
.jeu-score { font-size: 16px !important; }
.jeu-score b { font-size: 40px; color: var(--accent); }
.jeu-record { color: var(--amber); font-weight: 700; animation: jeu-pop .7s cubic-bezier(.2,1.6,.4,1) .3s both; }
.jeu-stats { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.jeu-stats li { display: flex; flex-direction: column; padding: 6px 8px; border-radius: var(--r-m); background: var(--panel-2); min-width: 0; }
.jeu-stats b { font-size: 16px; color: var(--text); white-space: nowrap; }
.jeu-stats span { font-size: 11px; color: var(--text-muted); }
.jeu-manches { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; counter-reset: m; }
.jeu-manches li { counter-increment: m; }
.jeu-manches button { width: 100%; display: grid; grid-template-columns: 1.4em 1fr auto auto; gap: 6px; align-items: center; min-height: 32px; padding: 0 8px; border-radius: var(--r-s);
  border: 1px solid var(--border); background: var(--well); color: var(--text); font: 12.5px var(--font-sans); cursor: pointer; text-align: left; }
.jeu-manches button::before { content: counter(m); font: 700 11px var(--font-sans); color: var(--text-muted); }
.jeu-manches .ok button { border-color: color-mix(in srgb, var(--green) 50%, var(--border)); }
.jeu-manches .ok .mono:first-child { color: var(--green); }
.jeu-manches .non .mono:first-child { color: var(--amber); }
.jeu-manches button:hover { border-color: var(--accent); }
.jeu-manches button span { white-space: nowrap; }
.jeu-manches button .dim { justify-self: end; }
.jeu-manches button span:nth-child(2) { justify-self: end; }

/* The history. */
.jeu-records, .jeu-sessions { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
.jeu-records li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.jeu-records b { color: var(--amber); }
.jeu-sessions li { padding: 3px 0; }
.jeu-barres { width: 100%; height: 56px; display: block; margin: 0 0 12px; }
.jeu-barres rect { fill: color-mix(in srgb, var(--accent) 55%, transparent); }
.jeu-barres rect.rec { fill: var(--amber); }

/* « Apprendre ». */
.jeu-apprendre p, .jeu-apprendre li { font-size: 13.5px; line-height: 1.5; }
.jeu-schema { width: 100%; height: auto; margin: 4px 0 8px; }
.sc-grille rect { fill: color-mix(in srgb, var(--accent) 6%, transparent); stroke: var(--text-dim); stroke-width: 1; }
.sc-grille path { stroke: var(--border-strong); stroke-width: .6; }
.sc-grille.fin path { stroke-width: .35; }
.sc-on { fill: var(--amber); }
.sc-fleche { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.jeu-schema text { font: 700 10px var(--font-mono); fill: var(--text-dim); }
.jeu-schema .sc-gros { font-size: 17px; fill: var(--amber); }
.jeu-etapes { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.jeu-etapes b { color: var(--amber); }
.jeu-astuce { padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--r-s) var(--r-s) 0; }

/* The banner on the map: the clock. */
.jb-temps { font-size: 13px; color: var(--text-dim); min-width: 3.2em; }
.jb-temps.urgent { color: var(--red); font-weight: 700; animation: jeu-arme .5s ease-in-out infinite alternate; }

/* ------------------------------------------------------------ toasts and confetti */
.jeux-toasts { position: fixed; z-index: 60; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.jeux-toast { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: var(--r-l); background: var(--panel); border: 1px solid var(--amber); box-shadow: var(--shadow-pop);
  animation: jeu-toast .55s cubic-bezier(.2,1.4,.4,1); max-width: min(340px, calc(100vw - 32px)); }
.jeux-toast.part { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.jeux-toast small { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); }
.jeux-toast b { font-size: 15px; }
.jt-medaille { --b: var(--amber); line-height: 0; }
.jt-medaille.rang-2 { --b: var(--info); } .jt-medaille.rang-3 { --b: var(--sat); }
.jt-medaille svg { width: 48px; height: 48px; animation: jeu-medaille 1s ease-out; }
.jeux-confettis { position: fixed; inset: 0; z-index: 59; pointer-events: none; }

@keyframes jeu-apparait { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes jeu-pop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes jeu-arme { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 40%, transparent); } to { box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 15%, transparent); } }
@keyframes jeu-toast { from { transform: translateY(24px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes jeu-medaille { 0% { transform: rotate(-30deg) scale(.4); } 60% { transform: rotate(10deg) scale(1.15); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .jeux-carte, .jeu-option span, .jeu-puce span { transition: none; }
  .jeux-carte:hover { transform: none; }
  .il-pulse, .jeu-cible b, .jeu-gain, .jeu-record, .jeu-aide.arme, .jb-temps.urgent, .jeux-toast, .jt-medaille svg { animation: none; }
}

/* ------------------------------------------------------------ « Quel DXCC ? » */
.dx-app { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.dx-arene { position: relative; min-height: 460px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-l); box-shadow: var(--shadow);
  background-image: radial-gradient(ellipse at 50% 0%, var(--accent-soft), transparent 60%); overflow: hidden; }
.dx-accueil { text-align: center; padding: 10px 0; }
.dx-accueil h2 { margin: 6px 0; font-size: 24px; }
.dx-accueil p { color: var(--text-dim); max-width: 520px; margin: 0 auto 12px; }
.dx-accueil .jeu-go { justify-content: center; }
.dx-illus { width: min(100%, 420px); height: auto; }
.dx-ondes path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; animation: dx-onde 1.6s ease-in-out infinite alternate; }
.btn.dx-gros { min-height: 48px; padding: 0 34px; font-size: 17px; }
.dx-hud { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.dx-score { font-size: 14px; color: var(--text-dim); }
.dx-score b { font-size: 26px; color: var(--accent); }
.dx-combo { font: 800 18px var(--font-mono); padding: 2px 10px; border-radius: 999px; background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--border-strong); }
.dx-combo.m2 { color: var(--info); border-color: var(--info); }
.dx-combo.m3 { color: var(--amber); border-color: var(--amber); }
.dx-combo.m4 { color: var(--on-accent); background: var(--amber); border-color: var(--amber); box-shadow: 0 0 14px color-mix(in srgb, var(--amber) 55%, transparent); }
.dx-combo.monte { animation: jeu-pop .55s cubic-bezier(.2,1.6,.4,1); }
.dx-combo.casse { animation: dx-secoue .4s; }
.dx-flammes { font-size: 18px; letter-spacing: -2px; }
.dx-etat { margin-left: auto; font-size: 13px; color: var(--text-dim); }
.dx-coeur { font-size: 20px; color: var(--red); margin-left: 2px; display: inline-block; }
.dx-coeur.perdu { color: var(--border-strong); }
.dx-coeur.casse { animation: dx-coeur .6s ease-out; }
.dx-barre { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; margin-bottom: 14px; }
.dx-barre span { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--info)); transition: width .1s linear; }
.dx-barre.urgent span { background: linear-gradient(90deg, var(--red), var(--amber)); }
.dx-question { text-align: center; }
.dx-question.secoue { animation: dx-secoue .45s; }
.dx-consigne { margin: 0 0 4px; color: var(--text-dim); font-size: 14px; }
.dx-indicatif { margin: 0 0 16px; font-size: clamp(32px, 6vw, 54px); font-weight: 800; letter-spacing: .08em; color: var(--text); animation: jeu-apparait .4s cubic-bezier(.2,1.4,.4,1); }
.dx-entite { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 16px; animation: jeu-apparait .4s cubic-bezier(.2,1.4,.4,1); }
.dx-entite b { font-size: clamp(24px, 4vw, 34px); }
.dx-drapeau.dr-pays { margin: 0; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.25); }
.dx-sans { display: inline-grid; place-items: center; border-radius: 4px; font-family: var(--font-mono); font-weight: 800; color: var(--on-accent);
  background: repeating-linear-gradient(135deg, var(--accent) 0 8px, color-mix(in srgb, var(--accent) 75%, var(--panel)) 8px 16px); }
.dx-choix { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dx-choix.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dx-carte { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 12px 10px;
  border-radius: var(--r-l); border: 2px solid var(--border-strong); background: var(--well); color: var(--text); font: 600 15px var(--font-sans); cursor: pointer;
  transition: transform var(--anim), border-color var(--anim), background var(--anim); }
.dx-carte:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--accent); }
.dx-carte:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dx-carte:disabled { cursor: default; opacity: .55; }
.dx-carte kbd { position: absolute; top: 6px; left: 8px; font: 700 11px var(--font-mono); color: var(--text-muted); }
.dx-carte .dx-nom.mono { font-size: 20px; letter-spacing: .05em; }
.dx-carte.bon { opacity: 1; border-color: var(--green); background: color-mix(in srgb, var(--green) 16%, var(--well)); animation: jeu-pop .45s cubic-bezier(.2,1.6,.4,1); }
.dx-carte.faux { opacity: 1; border-color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--well)); animation: dx-secoue .45s; }
.dx-gain { position: absolute; top: -6px; right: 8px; font: 800 18px var(--font-mono); color: var(--green); pointer-events: none; animation: dx-monte 1.1s ease-out forwards; }
.dx-retour { min-height: 2.8em; margin: 14px 0 6px; font-size: 15px; }
.dx-retour.bravo b { color: var(--green); }
.dx-retour.rate b { color: var(--red); }
.dx-actions { margin: 0; display: flex; justify-content: center; gap: 8px; }
.dx-revue { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 3px; font-size: 13px; max-height: 320px; overflow: auto; }
.dx-revue li { display: grid; grid-template-columns: minmax(7em, auto) 1fr auto; gap: 8px; padding: 3px 8px; border-radius: var(--r-s); background: var(--well); border-left: 3px solid var(--amber); }
.dx-revue li.ok { border-left-color: var(--green); }
.dx-page .jeu-resume { border: 0; box-shadow: none; padding: 0; background: none; }
/* The CQ zones' buttons, by region; the typed answer. */
.dx-cq { display: flex; flex-direction: column; gap: 6px; }
.dx-cq[hidden] { display: none; }
.dx-cq > .jeu-puce { align-self: flex-start; }
.dx-cq-groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dx-cq-nom { flex: 0 0 100%; font-size: 11.5px; color: var(--text-muted); }
.dx-cq-num span { min-width: 36px; min-height: 32px; justify-content: center; padding: 0 6px; font-family: var(--font-mono); }
.dx-tape { position: relative; display: flex; gap: 8px; max-width: 520px; margin: 0 auto; }
.dx-tape input { flex: 1; min-width: 0; height: 52px; padding: 0 14px; border-radius: var(--r-l); border: 2px solid var(--border-strong); background: var(--well); color: var(--text);
  font: 600 20px var(--font-sans); text-align: center; }
.dx-tape input.mono { font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.dx-tape input.mono::placeholder { text-transform: none; letter-spacing: 0; font: 400 15px var(--font-sans); }
.dx-tape input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--input-glow); }
.dx-tape .btn { min-height: 52px; }
.dx-tape.bon input { border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--well)); }
.dx-tape.faux input { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--well)); }
.dx-tape.bon { animation: jeu-pop .45s cubic-bezier(.2,1.6,.4,1); }
.dx-tape.faux { animation: dx-secoue .45s; }
.dx-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px auto 0; max-width: 520px; }
.dx-suggestions[hidden] { display: none; }
.dx-sug { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); font: 13.5px var(--font-sans); cursor: pointer; }
.dx-sug:hover, .dx-sug:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.dx-lu { color: var(--text-dim); display: block; }
@media (prefers-reduced-motion: reduce) { .dx-tape.bon, .dx-tape.faux { animation: none; } }
@keyframes dx-secoue { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes dx-monte { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-34px); opacity: 0; } }
@keyframes dx-coeur { 0% { transform: scale(1); } 30% { transform: scale(1.5) rotate(-12deg); color: var(--red); } 100% { transform: scale(1); } }
@keyframes dx-onde { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dx-ondes path, .dx-combo.monte, .dx-combo.casse, .dx-coeur.casse, .dx-question.secoue, .dx-indicatif, .dx-entite, .dx-carte.bon, .dx-carte.faux, .dx-gain { animation: none; }
  .dx-carte { transition: none; } .dx-carte:hover:not(:disabled) { transform: none; }
  .dx-gain { opacity: 0; }
}
@media (max-width: 1099px) { .dx-app { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 859px) { .dx-app { grid-template-columns: minmax(0, 1fr); } .dx-arene { min-height: 0; } }
@media (max-width: 560px) {
  .dx-arene { padding: 14px 12px; }
  .dx-choix.n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-carte { min-height: 84px; font-size: 14px; }
  .dx-carte .dx-nom.mono { font-size: 16px; }
  .dx-revue li { grid-template-columns: 1fr auto; } .dx-revue li span:nth-child(2) { grid-column: 1; grid-row: 2; }
}

/* ------------------------------------------------------------ smaller screens */
@media (max-width: 1099px) { body.jeu-page .grid-app { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 859px) {
  body.jeu-page .grid-app { grid-template-columns: minmax(0, 1fr); }
  body.jeu-page .grid-scene { height: 58vh; }
  .jeu-panneau .badges { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
}
@media (max-width: 600px) {
  /* The banner under the map's tools, at the scene's foot; the level's line gives way. */
  body.jeu-page .grid-niveau { display: none; }
  body.jeu-page .grid-jeu-bandeau { top: auto; bottom: 10px; left: 10px; right: 10px; transform: none; max-width: none; border-radius: var(--r-l); gap: 6px 10px; padding: 6px 10px; font-size: 14px; }
  body.jeu-page .grid-jeu-bandeau b.mono { font-size: 18px; }
}
@media (max-width: 480px) {
  .jeu-stats { grid-template-columns: repeat(2, 1fr); }
  .jeu-onglets button { font-size: 12.5px; min-height: 42px; }
  .jeu-aide { min-height: 44px; }
  .jeux-toasts { left: 16px; right: 16px; align-items: stretch; }
}
@media (forced-colors: active) { .jeu-option input:checked + span, .jeu-puce input:checked + span, .jeu-onglets button[aria-selected="true"] { outline: 2px solid CanvasText; } }

/* ------------------------------------------------------------ the quiz games (jeux-quiz.js): their arena on « Quel DXCC ? »'s */
.qz-page .jeu-resume { border: 0; box-shadow: none; padding: 0; background: none; }
.qz-arene { isolation: isolate;
  background-image: radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--info) 22%, transparent), transparent 55%),
    radial-gradient(ellipse at 88% 4%, color-mix(in srgb, var(--sat) 18%, transparent), transparent 50%),
    radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%); }
.qz-arene::before { content: ''; position: absolute; inset: -40%; z-index: -1; pointer-events: none; opacity: .5;
  background: conic-gradient(from 0deg at 50% 50%, transparent, color-mix(in srgb, var(--info) 10%, transparent), transparent 30%, color-mix(in srgb, var(--sat) 9%, transparent), transparent 60%,
    color-mix(in srgb, var(--accent) 10%, transparent), transparent); animation: qz-tourne 28s linear infinite; }
/* ×4: the arena glows. */
.qz-arene.qz-fievre { border-color: var(--amber); box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 45%, transparent), 0 0 32px color-mix(in srgb, var(--amber) 35%, transparent);
  animation: qz-fievre 1.2s ease-in-out infinite alternate; }
.qz-banniere { position: absolute; left: 50%; top: 38%; z-index: 5; pointer-events: none; transform: translate(-50%, -50%); white-space: nowrap;
  font: 900 clamp(30px, 7vw, 58px)/1 var(--font-sans); letter-spacing: .02em; color: var(--amber);
  text-shadow: 0 0 18px color-mix(in srgb, var(--amber) 55%, transparent), 0 3px 0 color-mix(in srgb, var(--red) 60%, transparent);
  animation: qz-banniere 1.25s cubic-bezier(.2,1.4,.4,1) forwards; }
.qz-banniere.m2 { color: var(--info); text-shadow: 0 0 18px color-mix(in srgb, var(--info) 55%, transparent); }
.qz-banniere.m4 { background: linear-gradient(90deg, var(--red), var(--amber), var(--sat), var(--green), var(--info)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qz-scene { margin: 0 0 14px; }
.qz-code { margin: 0; font-size: clamp(44px, 9vw, 76px); background: linear-gradient(100deg, var(--accent), var(--info) 55%, var(--sat)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qz-sens { margin: 6px auto 0; max-width: 560px; font-size: clamp(19px, 3.4vw, 26px); font-weight: 700; line-height: 1.3; animation: jeu-apparait .4s cubic-bezier(.2,1.4,.4,1); }
.qz-carte .qz-texte { font-size: 14.5px; line-height: 1.3; }
.qz-choix .dx-carte { min-height: 84px; }
.qz-choix .dx-carte:nth-child(6n+1):hover:not(:disabled) { border-color: var(--accent); }
.qz-choix .dx-carte:nth-child(6n+2):hover:not(:disabled) { border-color: var(--info); }
.qz-choix .dx-carte:nth-child(6n+3):hover:not(:disabled) { border-color: var(--sat); }
.qz-choix .dx-carte:nth-child(6n+4):hover:not(:disabled) { border-color: var(--amber); }
.qz-choix .dx-carte:nth-child(6n+5):hover:not(:disabled) { border-color: var(--green); }
.qz-choix .dx-carte:nth-child(6n+6):hover:not(:disabled) { border-color: var(--red); }
.qz-saisie.bon { animation: jeu-pop .45s cubic-bezier(.2,1.6,.4,1); }
.qz-saisie.faux { animation: dx-secoue .45s; }
.qz-revue li { grid-template-columns: minmax(5em, auto) 1fr auto; }
.qz-lexique { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px 10px; grid-template-columns: 1fr; font-size: 12.5px; }
.qz-lexique b { display: inline-block; min-width: 3.4em; color: var(--accent); }
/* The pictures. */
.qz-bulles rect, .qz-bulles path { fill: var(--panel-2); stroke: var(--info); stroke-width: 2; stroke-linejoin: round; }
.qz-bulles rect:nth-of-type(2), .qz-bulles path:nth-of-type(2) { stroke: var(--sat); }
.qz-il-code { font: 800 24px var(--font-mono); fill: var(--info); }
.qz-il-code.b { fill: var(--sat); }
.qz-il-morse rect { fill: var(--accent); animation: dx-onde .9s ease-in-out infinite alternate; }
.qz-il-morse rect:nth-child(2) { animation-delay: .2s; } .qz-il-morse rect:nth-child(3) { animation-delay: .4s; } .qz-il-morse rect:nth-child(4) { animation-delay: .6s; }
@keyframes qz-tourne { to { transform: rotate(360deg); } }
@keyframes qz-fievre { from { box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 45%, transparent), 0 0 18px color-mix(in srgb, var(--amber) 25%, transparent); }
  to { box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 50%, transparent), 0 0 40px color-mix(in srgb, var(--sat) 40%, transparent); } }
@keyframes qz-banniere { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-8deg); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.12) rotate(2deg); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -80%) scale(.96); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .qz-arene::before, .qz-arene.qz-fievre, .qz-sens, .qz-saisie.bon, .qz-saisie.faux, .qz-il-morse rect { animation: none; }
  .qz-banniere { display: none; }
}
@media (max-width: 560px) {
  .qz-choix .dx-carte { min-height: 72px; }
  .qz-carte .qz-texte { font-size: 13.5px; }
}
.qz-forme { display: inline-block; margin: 2px 4px; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border-strong); }
.qz-forme .mono { font-weight: 800; color: var(--accent); }

/* « Alphabet phonétique ». */
.ph-ind { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.ph-car { display: inline-grid; place-items: center; min-width: 1.05em; padding: 0 .08em; border-radius: 10px; border-bottom: 4px solid transparent; transition: color var(--anim), border-color var(--anim); }
.ph-car.fait { color: var(--green); border-bottom-color: var(--green); }
.ph-car.ici { color: var(--sat); border-bottom-color: var(--sat); animation: ph-ici 1s ease-in-out infinite alternate; }
.ph-epele, .ph-mots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 34px; margin: 0 0 10px; }
.ph-mot { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--text);
  background: color-mix(in srgb, var(--info) 16%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--info) 45%, transparent); animation: jeu-apparait .35s cubic-bezier(.2,1.4,.4,1) both; }
.ph-mot:nth-child(4n+2) { background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ph-mot:nth-child(4n+3) { background: color-mix(in srgb, var(--sat) 16%, var(--panel-2)); border-color: color-mix(in srgb, var(--sat) 45%, transparent); }
.ph-mot:nth-child(4n+4) { background: color-mix(in srgb, var(--green) 16%, var(--panel-2)); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.ph-mot.faux { background: color-mix(in srgb, var(--red) 20%, var(--panel-2)); border-color: var(--red); }
.dx-retour .ph-mots { margin: 6px 0 0; min-height: 0; }
.ph-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 620px; margin: 0 auto; }
.ph-tuile { position: relative; min-height: 64px; padding: 8px; border-radius: var(--r-l); border: 2px solid var(--border-strong); background: var(--well); color: var(--text);
  font: 800 19px var(--font-sans); cursor: pointer; transition: transform var(--anim), border-color var(--anim); animation: jeu-apparait .3s cubic-bezier(.2,1.4,.4,1) both; }
.ph-tuile:nth-child(2) { animation-delay: .05s; } .ph-tuile:nth-child(3) { animation-delay: .1s; }
.ph-tuile:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--sat); }
.ph-tuile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ph-tuile kbd { position: absolute; top: 5px; left: 8px; font: 700 11px var(--font-mono); color: var(--text-muted); }
.ph-tuile.faux { border-color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--well)); }
.ph-ecoute { margin: 4px 0 6px; }
.ph-haut-parleur { width: 104px; height: 104px; border-radius: 50%; border: 3px solid var(--accent); cursor: pointer; display: inline-grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 35%, var(--panel)), var(--panel-2)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent); }
.ph-haut-parleur:focus-visible { outline: 3px solid var(--sat); outline-offset: 3px; }
.ph-haut-parleur.parle { animation: ph-pouls 1s ease-in-out infinite; }
.ph-eq { display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.ph-eq i { display: block; width: 7px; height: 10px; border-radius: 3px; background: linear-gradient(var(--sat), var(--accent)); }
.ph-haut-parleur.parle .ph-eq i { animation: ph-eq .5s ease-in-out infinite alternate; }
.ph-eq i:nth-child(2) { animation-delay: -.2s !important; } .ph-eq i:nth-child(3) { animation-delay: -.35s !important; } .ph-eq i:nth-child(4) { animation-delay: -.1s !important; } .ph-eq i:nth-child(5) { animation-delay: -.42s !important; }
.ph-defile { min-height: 1.6em; margin: 4px 0 0; font-size: 28px; font-weight: 800; color: var(--sat); }
.ph-defile.vu { animation: jeu-pop .45s cubic-bezier(.2,1.6,.4,1); }
.ph-voix { font-size: 12px; margin: 4px 0 0; }
.ph-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0 0 10px; }
.ph-table th { text-align: left; font-size: 11px; color: var(--text-muted); font-weight: 600; }
.ph-table td, .ph-table th { padding: 2px 6px; border-bottom: 1px solid var(--border); }
.ph-table td.mono { color: var(--accent); font-weight: 700; }
.ph-il-tuiles rect { fill: var(--panel-2); stroke: var(--sat); stroke-width: 2; }
.ph-il-tuiles rect:nth-child(2) { stroke: var(--info); } .ph-il-tuiles rect:nth-child(3) { stroke: var(--accent); }
.ph-il-mot { font: 700 14px var(--font-sans); fill: var(--text); }
.ph-il-ondes path { fill: none; stroke: var(--sat); stroke-width: 2.4; stroke-linecap: round; animation: dx-onde 1.3s ease-in-out infinite alternate; }
@keyframes ph-ici { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes ph-eq { from { height: 6px; } to { height: 38px; } }
@keyframes ph-pouls { 0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent); } 50% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent) 4%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .ph-car.ici, .ph-mot, .ph-tuile, .ph-haut-parleur.parle, .ph-haut-parleur.parle .ph-eq i, .ph-defile.vu, .ph-il-ondes path { animation: none; }
  .ph-haut-parleur.parle .ph-eq i { height: 24px; }
  .ph-tuile { transition: none; } .ph-tuile:hover:not(:disabled) { transform: none; }
}
@media (max-width: 560px) { .ph-tuile { min-height: 56px; font-size: 16px; } .ph-tuiles { gap: 6px; } }

/* « Quelle bande ? »: the dial, the VFO, the band's plan. */
.bd-scene { --c0: var(--accent); --c1: var(--info); --c2: var(--sat); --c3: var(--green); --c4: var(--amber); --c5: var(--red); }
.bd-cadran { display: block; width: min(100%, 460px); height: auto; margin: 0 auto -6px; }
.bd-fond { fill: color-mix(in srgb, var(--well) 85%, transparent); stroke: var(--border-strong); stroke-width: 1.5; }
.bd-echelle { fill: none; stroke: var(--text-dim); stroke-width: 1.5; }
.bd-trait { stroke: var(--text-muted); stroke-width: 1; }
.bd-grad { stroke: var(--text); stroke-width: 2; }
.bd-txt { font: 700 12px var(--font-mono); fill: var(--text-dim); }
.bd-mhz { font: 700 11px var(--font-sans); fill: var(--text-muted); letter-spacing: .1em; }
.bd-arc { fill: none; stroke-width: 9; stroke-linecap: butt; opacity: 0; transition: opacity .5s; }
.bd-arc.c0 { stroke: var(--c0); } .bd-arc.c1 { stroke: var(--c1); } .bd-arc.c2 { stroke: var(--c2); } .bd-arc.c3 { stroke: var(--c3); } .bd-arc.c4 { stroke: var(--c4); } .bd-arc.c5 { stroke: var(--c5); }
.bd-scene.revele .bd-arc { opacity: .45; }
.bd-scene.revele .bd-arc.ici { opacity: 1; stroke-width: 14; filter: drop-shadow(0 0 5px currentColor); }
.bd-aiguille { transform-origin: 200px 214px; transition: transform 1.1s cubic-bezier(.3,1.45,.5,1); }
.bd-aiguille path { stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--red) 60%, transparent)); }
.bd-aiguille circle { fill: var(--red); }
.bd-axe { fill: var(--panel-2); stroke: var(--text-dim); stroke-width: 2; }
.bd-vfo { display: inline-flex; align-items: baseline; gap: 6px; margin: 0 auto 4px; padding: 4px 16px; border-radius: var(--r-m); background: #061512; border: 1px solid color-mix(in srgb, var(--accent) 45%, #000);
  box-shadow: inset 0 0 14px rgba(0,0,0,.6), 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent); }
.bd-vfo span { font-size: clamp(28px, 6vw, 44px); font-weight: 800; letter-spacing: .04em; color: #59F5D6; text-shadow: 0 0 10px rgba(89,245,214,.6); font-variant-numeric: tabular-nums; }
.bd-vfo small { color: #59F5D6; opacity: .75; font-size: 14px; }
.bd-scene.revele.bon .bd-vfo { border-color: var(--green); }
.bd-scene.revele.faux .bd-vfo { border-color: var(--red); }
.bd-bande-donnee { display: table; margin: 4px auto 0; padding: 2px 14px; border-radius: 999px; font: 800 17px var(--font-sans); color: var(--on-accent); background: linear-gradient(90deg, var(--info), var(--accent)); }
.bd-plan { max-width: 560px; margin: 10px auto 0; text-align: left; animation: jeu-apparait .4s cubic-bezier(.2,1.4,.4,1); }
.bd-plan-barre { position: relative; height: 22px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border-strong); overflow: hidden; }
.bd-seg { position: absolute; top: 0; bottom: 0; min-width: 2px; }
.bd-plan-ici { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1.5px; background: var(--text); box-shadow: 0 0 0 2px var(--panel), 0 0 10px var(--text); }
.bd-plan-bornes { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.bd-plan-bornes b { color: var(--text); }
.bd-plan-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; margin-top: 4px; color: var(--text-dim); }
.bd-plan-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.bd-t-cw { --t: var(--info); } .bd-t-num { --t: var(--accent); } .bd-t-tous { --t: var(--amber); } .bd-t-ssb { --t: var(--sat); }
.bd-t-balises { --t: var(--red); } .bd-t-fm { --t: var(--green); } .bd-t-sat { --t: #B07CFF; }
.bd-seg, .bd-plan-legende i { background: color-mix(in srgb, var(--t) 70%, transparent); }
.bd-liste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; font-size: 12.5px; }
.bd-liste li { padding: 4px 8px; border-radius: var(--r-s); background: var(--panel-2); }
.bd-liste .mono { color: var(--text-dim); font-size: 12px; }
.bd-segs { display: block; color: var(--text-dim); font-size: 11.5px; }
.bd-segs span { border-bottom: 2px solid var(--t); }
.bd-il-arc { fill: none; stroke: var(--text-dim); stroke-width: 3; }
.bd-il-bandes path { fill: none; stroke-width: 7; }
.bd-il-bandes path:nth-child(1) { stroke: var(--info); } .bd-il-bandes path:nth-child(2) { stroke: var(--accent); }
.bd-il-bandes path:nth-child(3) { stroke: var(--sat); } .bd-il-bandes path:nth-child(4) { stroke: var(--red); }
.bd-il-aiguille { stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; transform-origin: 160px 108px; animation: bd-balaie 3s ease-in-out infinite alternate; }
.jeux-illus .bd-il-aiguille { transform-origin: 120px 120px; }
.bd-il-axe { fill: var(--text-dim); }
.bd-il-vfo { font: 800 20px var(--font-mono); fill: #59F5D6; }
:root[data-theme="light"] .bd-vfo { background: #0B2622; }
@keyframes bd-balaie { from { transform: rotate(-38deg); } to { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .bd-aiguille, .bd-arc { transition: none; } .bd-il-aiguille, .bd-plan { animation: none; } }
@media (max-width: 560px) { .bd-cadran { width: 100%; } .bd-vfo { padding: 4px 10px; } }

/* « Quel mode ? »: the waterfall. */
.md-scene { max-width: 640px; margin: 0 auto; }
.md-chute { display: block; width: 100%; height: auto; aspect-ratio: 640 / 200; border-radius: var(--r-m); background: rgb(4, 6, 20); border: 1px solid var(--border-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 18%, transparent), 0 10px 30px rgba(0,0,0,.35); image-rendering: pixelated; }
.md-hz { position: relative; height: 16px; margin: 2px 0 6px; font-size: 10.5px; color: var(--text-muted); }
.md-hz span { position: absolute; transform: translateX(-50%); }
.md-hz span:first-child { transform: none; }
.md-hz b { position: absolute; right: 0; font-weight: 600; }
.md-actions { margin: 0; }
.md-hp { gap: 10px; }
.md-ondes { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.md-ondes i { display: block; width: 4px; height: 6px; border-radius: 2px; background: var(--accent); }
.md-hp.joue .md-ondes i { animation: ph-eq .45s ease-in-out infinite alternate; }
.md-hp.joue .md-ondes i:nth-child(2) { animation-delay: -.2s; } .md-hp.joue .md-ondes i:nth-child(3) { animation-delay: -.35s; }
.md-hp.joue { border-color: var(--accent); color: var(--accent); }
.md-liste { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.45; }
.md-liste b { color: var(--accent); }
.md-il-chute { fill: rgb(4, 6, 20); stroke: var(--border-strong); }
.md-il-traces path { fill: none; stroke-width: 4; stroke-linecap: round; }
.md-il-traces path:nth-child(1) { stroke: #FAE63C; } .md-il-traces path:nth-child(2) { stroke: #3CE6C8; }
.md-il-traces path:nth-child(3) { stroke: #FA5A1E; stroke-width: 3; } .md-il-traces path:nth-child(4) { stroke: #0A8CD2; }
.md-il-onde { fill: none; stroke: var(--sat); stroke-width: 2.4; stroke-linecap: round; animation: dx-onde 1.1s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .md-hp.joue .md-ondes i, .md-il-onde { animation: none; } .md-hp.joue .md-ondes i { height: 12px; } }
/* ------------------------------------------------------------ the satellite games (JeuxSatellites): what they share */
.jsat-app .dx-arene { padding: 14px 16px; }
.jsat-sans { color: var(--warn) !important; }
.jsat-partie { display: flex; flex-direction: column; gap: 10px; }
.jsat-page .jeu-resume { border: 0; box-shadow: none; padding: 0; background: none; }
/* The big word over a scene: « PARFAIT ! », its line under it. */
.jsat-banniere { position: absolute; left: 50%; top: 22%; z-index: 4; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: none; text-align: center; animation: jsat-banniere 1.3s cubic-bezier(.2,1.4,.4,1) forwards; --c: var(--accent); }
.jsat-banniere b { font: 900 clamp(30px, 7vw, 58px)/1 var(--font-sans); letter-spacing: .04em; color: var(--c); white-space: nowrap;
  text-shadow: 0 0 22px color-mix(in srgb, var(--c) 60%, transparent), 0 3px 0 color-mix(in srgb, var(--c) 35%, #000); -webkit-text-stroke: 1px color-mix(in srgb, var(--c) 60%, #000); }
.jsat-banniere small { font: 700 14px var(--font-mono); color: var(--text); background: color-mix(in srgb, var(--panel) 80%, transparent); padding: 2px 10px; border-radius: 999px; }
.jsat-banniere.parfait { --c: var(--sat); }
.jsat-banniere.parfait b { background: linear-gradient(90deg, var(--sat), var(--amber), var(--red), var(--info), var(--accent), var(--sat)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; animation: jsat-arcenciel 1s linear infinite; }
.jsat-banniere.super { --c: var(--green); } .jsat-banniere.bien { --c: var(--accent); } .jsat-banniere.ok, .jsat-banniere.juste { --c: var(--info); } .jsat-banniere.rate { --c: var(--red); }
@keyframes jsat-banniere { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-8deg); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.18) rotate(2deg); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -80%) scale(.96); opacity: 0; } }
@keyframes jsat-arcenciel { to { background-position: 200% 0; } }
@keyframes jsat-secoue { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(2px, 0); } }
/* The cards' pictures of the satellite games. */
.il-globe { fill: var(--g-ocean-2); opacity: .55; }
.il-cercle { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
.il-station { fill: var(--accent); }
.il-orbite { fill: none; stroke: var(--amber); stroke-width: 2; stroke-dasharray: 3 5; }
.il-sat { fill: var(--amber); }
.il-anneau { fill: none; stroke: var(--sat); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: il-pulse 1.6s ease-out infinite; }
.il-mot { font: 900 22px var(--font-sans); fill: var(--sat); }

/* ------------------------------------------------------------ « Attrape le passage » */
.pa-hud { margin-bottom: 0; }
.pa-cible { font-size: 14px; color: var(--text-dim); }
.pa-cible b { color: var(--amber); font-size: 16px; }
.pa-scene.ciel-globe { position: relative; height: clamp(320px, 58vh, 620px); min-height: 0; border: 1px solid var(--border); border-radius: var(--r-l); }
.pa-scene canvas { cursor: crosshair; }
.pa-scene.secoue { animation: jsat-secoue .4s; }
.pa-horloge { position: absolute; left: 12px; top: 10px; margin: 0; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; color: var(--text-dim); background: color-mix(in srgb, var(--panel) 70%, transparent); }
.pa-horloge:empty { display: none; }
.pa-phase { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; padding: 5px 14px; border-radius: 999px; max-width: calc(100% - 24px); text-align: center;
  font-size: 14px; font-weight: 600; background: color-mix(in srgb, var(--panel) 82%, transparent); border: 1px solid var(--border-strong); }
.pa-phase:empty { display: none; }
.pa-phase.aos { border-color: var(--amber); color: var(--amber); }
.pa-phase.los { border-color: var(--accent); color: var(--accent); }
.pa-bas { display: flex; gap: 10px; align-items: stretch; }
.btn.pa-top { flex: 1; min-height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 0; font-size: 24px; font-weight: 900; letter-spacing: .08em;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; background: linear-gradient(135deg, var(--accent), var(--info)); border: 0; }
.btn.pa-top small { font-size: 11.5px; font-weight: 600; letter-spacing: 0; opacity: .8; }
.btn.pa-top:active { transform: scale(.97); }
.pa-manches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.pa-manches li { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--r-m); background: var(--well); border: 1px solid var(--border); font-size: 12.5px; }
.pa-manches li > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pa-note { display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 999px; font: 800 10.5px/1.7 var(--font-sans); text-align: center; color: var(--on-accent); background: var(--border-strong); }
.pa-note.parfait { background: var(--sat); color: #241a00; } .pa-note.super { background: var(--green); color: #04200f; } .pa-note.bien { background: var(--accent); }
.pa-note.ok, .pa-note.juste { background: var(--info); color: #fff; } .pa-note.rate { background: var(--red); color: #fff; } .pa-note.vide { background: none; color: var(--text-muted); }
.pa-revue li { grid-template-columns: 1fr auto auto; align-items: center; }
@media (max-width: 560px) {
  .pa-scene.ciel-globe { height: 62vh; min-height: 300px; }
  .pa-revue li { grid-template-columns: 1fr; }
  .jsat-banniere { top: 26%; }
}
@media (prefers-reduced-motion: reduce) {
  .jsat-banniere, .jsat-banniere.parfait b, .il-anneau, .pa-scene.secoue { animation: none; }
  .btn.pa-top:active { transform: none; }
}

/* ------------------------------------------------------------ « Doppler » */
.il-s { fill: none; stroke: var(--amber); stroke-width: 3; stroke-dasharray: 7 5; }
.il-trace { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.il-centre { stroke: var(--border-strong); stroke-width: 1.5; }
.il-arc { fill: none; stroke: var(--green); stroke-width: 6; }
.il-tige { stroke: var(--sat); stroke-width: 3; stroke-linecap: round; transform-origin: 186px 128px; animation: il-tige 2.4s ease-in-out infinite alternate; }
@keyframes il-tige { from { transform: rotate(-38deg); } to { transform: rotate(14deg); } }
.dp-accroche { font: 800 14px var(--font-mono); color: var(--green); }
.dp-scene { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 12px; border-radius: var(--r-l); border: 1px solid var(--border);
  background: radial-gradient(120% 120% at 30% 0%, color-mix(in srgb, var(--info) 12%, transparent), transparent 60%), var(--well); transition: box-shadow var(--anim), border-color var(--anim); }
.dp-scene.dans { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset, 0 0 26px color-mix(in srgb, var(--green) 22%, transparent); }
.dp-cadran { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.dp-aiguille { width: 100%; max-width: 340px; height: auto; overflow: visible; }
.dp-arc { fill: none; stroke: color-mix(in srgb, var(--red) 55%, var(--border-strong)); stroke-width: 9; }
.dp-arc-orange { fill: none; stroke: var(--amber); stroke-width: 9; }
.dp-arc-vert { fill: none; stroke: var(--green); stroke-width: 11; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--green) 60%, transparent)); }
.dp-gr { stroke: var(--text-muted); stroke-width: 1.2; }
.dp-lib { font: 600 9px var(--font-mono); fill: var(--text-muted); }
.dp-zero { font-size: 10px; fill: var(--green); }
.dp-tige { fill: var(--sat); stroke: color-mix(in srgb, var(--sat) 50%, #000); stroke-width: .8; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sat) 70%, transparent)); }
.dp-axe { fill: var(--panel); stroke: var(--sat); stroke-width: 3; }
.dp-ecart { margin: 2px 0 0; font-size: clamp(22px, 4vw, 34px); font-weight: 800; transition: color var(--anim); }
.dp-ecart.bon { color: var(--green); } .dp-ecart.moyen { color: var(--amber); } .dp-ecart.loin { color: var(--red); }
.dp-chute { position: relative; min-height: 200px; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--border-strong); background: var(--espace); }
.dp-chute canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.dp-f1, .dp-f2 { position: absolute; top: 0; bottom: 18px; pointer-events: none; }
.dp-f2 { background: color-mix(in srgb, var(--amber) 10%, transparent); border-left: 1px dashed color-mix(in srgb, var(--amber) 60%, transparent); border-right: 1px dashed color-mix(in srgb, var(--amber) 60%, transparent); }
.dp-f1 { background: color-mix(in srgb, var(--green) 14%, transparent); border-left: 1px solid var(--green); border-right: 1px solid var(--green); }
.dp-centre { position: absolute; left: 50%; top: 0; bottom: 18px; width: 0; border-left: 1px dashed var(--text); opacity: .5; pointer-events: none; }
.dp-chute-l, .dp-chute-c, .dp-chute-r { position: absolute; bottom: 2px; font-size: 10.5px; color: var(--text-dim); background: color-mix(in srgb, var(--panel) 70%, transparent); padding: 0 4px; border-radius: 4px; }
.dp-chute-l { left: 4px; } .dp-chute-r { right: 4px; } .dp-chute-c { left: 50%; transform: translateX(-50%); }
.dp-courbe { border-radius: var(--r-m); border: 1px solid var(--border); background: var(--well); padding: 6px 8px 4px; }
.dp-courbe canvas { display: block; width: 100%; height: 96px; }
.dp-infos { margin: 4px 0 0; font-size: 12.5px; color: var(--text-dim); min-height: 1.4em; }
.dp-commandes { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.dp-bouton { width: 132px; height: 132px; border-radius: 50%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.dp-bouton:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.dp-bouton.tourne { cursor: grabbing; }
.dp-bouton svg { width: 100%; height: 100%; display: block; }
.dp-b-fond { fill: var(--panel-2); stroke: var(--border-strong); stroke-width: 2; }
.dp-b-face { fill: color-mix(in srgb, var(--accent) 14%, var(--panel)); stroke: var(--accent); stroke-width: 2.5; filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.dp-b-cran { stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; }
.dp-b-doigt { fill: var(--amber); }
.dp-reglage { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dp-lab { font-size: 13px; color: var(--text-dim); }
.dp-lab b { font-size: 18px; color: var(--text); margin-left: 6px; }
.dp-reglage input[type="range"] { width: 100%; height: 32px; accent-color: var(--accent); }
.dp-pas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.dp-pas .btn { min-height: 44px; min-width: 52px; font-family: var(--font-mono); touch-action: manipulation; }
.dp-aide { margin: 0; font-size: 12px; }
.dp-revue { margin: 0 0 10px; }
.dp-revue img { width: 100%; height: auto; display: block; border-radius: var(--r-m); border: 1px solid var(--border); background: var(--well); }
.dp-revue figcaption { font-size: 12px; margin-top: 4px; }
@media (max-width: 700px) {
  .dp-scene { grid-template-columns: 1fr; }
  .dp-chute { min-height: 150px; }
  .dp-commandes { grid-template-columns: 1fr; justify-items: center; }
  .dp-reglage { width: 100%; }
  .dp-bouton { width: 150px; height: 150px; }
}
@media (prefers-reduced-motion: reduce) { .il-tige { animation: none; } .dp-scene, .dp-ecart { transition: none; } }

/* ------------------------------------------------------------ « Pointe l'antenne » */
.il-ciel { fill: var(--cc-zenith); stroke: var(--border-strong); stroke-width: 1.5; }
.il-ciel2 { fill: none; stroke: var(--border-strong); stroke-dasharray: 3 4; }
.il-lobe { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: var(--accent); stroke-width: 1.5; }
.il-yagi path { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.an-scene { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.an-scene.secoue { animation: jsat-secoue .4s; }
.an-ciel { border-radius: var(--r-l); border: 1px solid var(--border); background: radial-gradient(90% 90% at 50% 50%, color-mix(in srgb, var(--info) 12%, transparent), transparent 70%), var(--well); padding: 8px; }
.an-ciel .ciel-cadran { max-height: none; width: 100%; height: auto; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.an-lobe { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 1.2; stroke-linejoin: round; }
.an-lobe.dedans { fill: color-mix(in srgb, var(--green) 30%, transparent); stroke: var(--green); }
.an-boom-ciel { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.an-visee { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; filter: drop-shadow(0 0 4px var(--accent)); }
.an-ordre { fill: none; stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 2 2; opacity: .8; }
.an-ecart-l { stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 3 2; }
.an-ecart-t { font: 700 9px var(--font-mono); fill: var(--red); paint-order: stroke; stroke: var(--cc-horizon); stroke-width: 3px; }
.ciel-cadran .cc-sat.flash circle { animation: an-flash .5s ease-in-out infinite alternate; }
@keyframes an-flash { from { r: 4; opacity: 1; } to { r: 8; opacity: .5; } }
.an-cote { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.an-indice { min-height: 58px; padding: 8px 12px; border-radius: var(--r-m); border: 1px dashed var(--border-strong); background: var(--well); display: flex; align-items: center; }
.an-indice p { margin: 0; font-size: 14px; }
.an-gros { font-size: clamp(18px, 3vw, 26px) !important; font-weight: 800; color: var(--amber); letter-spacing: .02em; }
.an-globe.ciel-globe { position: relative; height: 220px; min-height: 0; border: 1px solid var(--border); border-radius: var(--r-m); }
.an-globe canvas { cursor: default; }
.an-rotor { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.an-vue { margin: 0; text-align: center; padding: 6px; border-radius: var(--r-m); background: var(--well); border: 1px solid var(--border); }
.an-vue figcaption { font-size: 12.5px; color: var(--text-dim); }
.an-vue figcaption b { font-size: 16px; color: var(--text); margin-left: 4px; }
.an-yagi { width: 100%; max-width: 170px; height: auto; display: block; margin: 0 auto; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; overflow: visible; }
.an-yagi:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
.an-rose { fill: var(--cc-zenith); stroke: var(--border-strong); stroke-width: 1.5; }
.an-quart { fill: color-mix(in srgb, var(--info) 10%, var(--cc-zenith)); stroke: var(--border-strong); stroke-width: 1; }
.an-gr { stroke: var(--text-muted); stroke-width: 1; }
.an-cap { font: 700 8px var(--font-sans); fill: var(--text-dim); text-anchor: middle; }
.an-faisceau { fill: color-mix(in srgb, var(--accent) 20%, transparent); }
.an-boom { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.an-elem { stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; }
.an-pivot { fill: var(--accent); }
.an-sol { stroke: var(--green); stroke-width: 2; }
.an-mat { stroke: var(--text-dim); stroke-width: 3; }
.an-smetre { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-m); background: var(--well); border: 1px solid var(--border); }
.an-s-l { font: 800 13px var(--font-mono); color: var(--text-dim); }
.an-s-barre { flex: 1; height: 12px; border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(90deg, var(--panel-2) 0 9%, var(--border) 9% 10%); }
.an-s-barre span { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .12s linear; background: linear-gradient(90deg, var(--green), var(--amber) 75%, var(--red)); }
.an-s-barre span.faible { opacity: .6; }
.an-smetre b { min-width: 3.2em; text-align: right; color: var(--green); }
.btn.an-valide { background: linear-gradient(135deg, var(--amber), var(--red)); color: #fff; }
.an-revue li { grid-template-columns: 1fr auto auto; align-items: center; }
@media (max-width: 760px) {
  .an-scene { grid-template-columns: 1fr; }
  .an-yagi { max-width: 150px; }
}
@media (max-width: 560px) { .an-revue li { grid-template-columns: 1fr auto; } .an-revue li > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .ciel-cadran .cc-sat.flash circle, .an-scene.secoue { animation: none; } .an-s-barre span { transition: none; } }
/* ------------------------------------------------------------ « Chasse aux QSL » (/jeux/qsl, jeu-qsl.js) */
.il-qsl rect { stroke: rgba(0, 0, 0, .25); stroke-width: 1; }
.il-qsl path { stroke: rgba(255, 255, 255, .55); stroke-width: 6; }
.il-qsl text { font: 800 17px var(--font-mono); fill: #fff; }
.il-qsl-1 rect { fill: #FF5F6D; } .il-qsl-2 rect { fill: #4776E6; } .il-qsl-3 rect { fill: #11998E; }
.il-qsl-1 { transform-origin: 78px 65px; transform: rotate(-8deg); } .il-qsl-3 { transform-origin: 170px 70px; transform: rotate(7deg); }
.il-qsl-2 { animation: il-qsl 3s ease-in-out infinite; }
.il-etoile { fill: var(--sat); animation: il-scintille 1.6s ease-in-out infinite alternate; transform-origin: 206px 31px; }
@keyframes il-qsl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px) rotate(-1.5deg); } }
@keyframes il-scintille { from { transform: scale(.75); opacity: .6; } to { transform: scale(1.15); opacity: 1; } }

/* The toast of a card earned, in any game. */
.jt-qsl { line-height: 0; }
.jt-qsl svg { animation: jeu-medaille 1s ease-out; }
.jt-qsl rect { fill: #FF5F6D; stroke: #FFD166; stroke-width: 2; }
.jt-qsl path { stroke: rgba(255, 255, 255, .6); stroke-width: 3; }
.jt-qsl text { font: 800 11px var(--font-mono); fill: #fff; }
@media (prefers-reduced-motion: reduce) { .jt-qsl svg { animation: none; } }

.qsl-app { display: flex; flex-direction: column; gap: 16px; }
.qsl-tableau { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 10px; }
.qsl-chiffre { --c: var(--accent); display: flex; flex-direction: column; justify-content: center; padding: 12px 14px; border-radius: var(--r-l); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 20%, var(--panel)), var(--panel) 70%); box-shadow: var(--shadow); min-width: 0; }
.qsl-chiffre b { font-size: 34px; line-height: 1.05; color: var(--c); }
.qsl-chiffre span { font-size: 12.5px; color: var(--text-dim); }
.qsl-chiffre[data-qsl-chiffre="locators"] { --c: var(--green); } .qsl-chiffre[data-qsl-chiffre="doubles"] { --c: var(--info); } .qsl-chiffre[data-qsl-chiffre="diplomes"] { --c: var(--sat); }
.qsl-chiffre.bouge b { animation: jeu-pop .6s cubic-bezier(.2,1.6,.4,1); display: inline-block; }
.qsl-pochettes { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-l); border: 1px dashed var(--border-strong); background: var(--panel); min-width: 0; }
.qsl-pochettes > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.qsl-pochettes small { font-size: 12px; color: var(--text-dim); }
.qsl-pochettes .btn { min-height: 44px; }
.qsl-pochettes.pleine { border-style: solid; border-color: var(--amber); background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 16%, var(--panel)), var(--panel)); }
.qsl-pochettes.pleine .qsl-enveloppe { animation: qsl-tremble 2.4s ease-in-out infinite; }
.qsl-enveloppe { width: 64px; height: 44px; flex: none; }
.qe-fond { fill: #F4E6C4; stroke: #B08A4A; stroke-width: 1.5; }
.qe-rabat { fill: none; stroke: #B08A4A; stroke-width: 1.5; stroke-linejoin: round; transform-origin: 32px 9px; transition: transform .45s; }
.qe-timbre { fill: #E5484D; stroke: #fff; stroke-width: 1; stroke-dasharray: 1.5 1; }
.qe-cachet { fill: none; stroke: #3451C8; stroke-width: 1.2; stroke-dasharray: 2 1.5; }
.qsl-nouveau { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 16px; border-radius: var(--r-l); color: #2A1B00;
  background: linear-gradient(110deg, #FFD166, #FFB454 40%, #FFE29A 55%, #FFB454 70%); background-size: 250% 100%; animation: qsl-reflet 3s linear infinite; box-shadow: var(--shadow-pop); }
.qsl-nouveau .qsl-nouveau-ico { font-size: 22px; }
.qsl-nouveau .btn { margin-left: auto; }

/* The world map. */
.qsl-carte-monde { aspect-ratio: 2 / 1; border-radius: var(--r-m); overflow: hidden; background: var(--m-ocean); }
.qsl-monde-svg { width: 100%; height: 100%; display: block; }
.qm-ocean { fill: var(--m-ocean); }
.qm-grille { stroke: var(--m-grille); stroke-width: .4; }
.qm-terre { fill: var(--m-terre); stroke: var(--m-cote); stroke-width: .35; stroke-linejoin: round; }
.qm-loc { fill: color-mix(in srgb, var(--amber) 55%, transparent); stroke: var(--amber); stroke-width: .3; }
.qm-point { stroke: var(--panel); stroke-width: .5; }
.qm-point.manque { fill: var(--text-muted); opacity: .5; stroke: none; }
.qm-point.r1 { fill: var(--green); } .qm-point.r2 { fill: var(--info); } .qm-point.r3 { fill: var(--sat); }
.qm-point[data-qsl-vers] { cursor: pointer; filter: drop-shadow(0 0 1.6px currentColor); }
.qm-point.neuf { animation: qsl-point 1.4s ease-in-out 4; transform-box: fill-box; transform-origin: center; }
.qsl-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; font-size: 12.5px; }
.ql { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: -6px; vertical-align: -1px; }
.ql.r1 { background: var(--green); } .ql.r2 { background: var(--info); } .ql.r3 { background: var(--sat); } .ql.manque { background: var(--text-muted); opacity: .5; }
.ql.loc { border-radius: 2px; background: color-mix(in srgb, var(--amber) 55%, transparent); border: 1px solid var(--amber); }

/* The diplomas. */
.qsl-diplomes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.qsl-dip-bouton { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-l); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); text-align: left; font: inherit; }
.qsl-dip-bouton:disabled { cursor: default; }
.qsl-diplome.obtenu .qsl-dip-bouton { cursor: pointer; border-color: color-mix(in srgb, var(--sat) 60%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--sat) 18%, var(--panel-2)), var(--panel-2)); }
.qsl-diplome.obtenu .qsl-dip-bouton:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.qsl-dip-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qsl-sceau { width: 48px; height: 48px; flex: none; }
.qs-ruban { fill: color-mix(in srgb, var(--text-muted) 50%, transparent); }
.qs-disque { fill: var(--well); stroke: var(--border-strong); stroke-width: 2; }
.qs-bord { fill: none; stroke: var(--border-strong); stroke-dasharray: 2 2; }
.qs-etoile { fill: var(--text-muted); }
.qsl-diplome.obtenu .qs-ruban { fill: #E5484D; } .qsl-diplome.obtenu .qs-disque { fill: #FFD166; stroke: #B8860B; }
.qsl-diplome.obtenu .qs-bord { stroke: #B8860B; } .qsl-diplome.obtenu .qs-etoile { fill: #B8860B; }
.qsl-diplome.obtenu .qsl-sceau { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sat) 55%, transparent)); }
.qsl-dip-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.qsl-dip-txt b { font-size: 15px; } .qsl-dip-txt small { font-size: 12px; color: var(--text-dim); }
.qsl-dip-barre { display: block; height: 6px; border-radius: 3px; background: var(--well); overflow: hidden; margin-top: 4px; }
.qsl-dip-barre i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--sat)); transition: width .8s cubic-bezier(.2,1,.3,1); }
.qsl-dip-etat { font-size: 11.5px; color: var(--text-muted); }
.qsl-zones { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; }
.qsl-zone { display: grid; place-items: center; min-height: 24px; border-radius: 4px; font: 600 10.5px var(--font-mono); color: var(--text-muted); background: var(--well); border: 1px solid var(--border); }
.qsl-zone.on { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

/* The album: the cards, their flip. */
.qsl-filtres { margin-bottom: 4px; }
.qsl-aide { font-size: 12.5px; margin: 0 0 6px; }
.qsl-continent { margin: 14px 0 8px; font-size: 15px; }
.qsl-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 10px; }
.qsl-tuile { position: relative; display: block; width: 100%; aspect-ratio: 280 / 180; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; border-radius: 10px; color: var(--text); font: inherit; }
.qsl-tuile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.qsl-flip { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,1.3,.5,1); }
.qsl-tuile.retournee .qsl-flip { transform: rotateY(180deg); }
.qsl-tuile:not(.manque):hover .qsl-flip { box-shadow: var(--shadow-pop); }
.qsl-face { position: absolute; inset: 0; display: block; border-radius: 10px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); }
.qsl-verso { transform: rotateY(180deg); background: #FBF7EC; color: #2B2B2B; }
.qsl-svg { display: block; width: 100%; height: 100%; }
.qsl-tuile.r2 .qsl-recto { box-shadow: 0 0 0 2px #6F8CFF, 0 2px 10px rgba(111, 140, 255, .45); }
.qsl-tuile.r3 .qsl-recto { box-shadow: 0 0 0 2px #FFD166, 0 2px 14px rgba(255, 209, 102, .6); }
.qsl-tuile.r3 .qsl-recto::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, rgba(255, 120, 220, .35) 50%, transparent 62%); background-size: 260% 100%; animation: qsl-reflet 3.6s linear infinite; }
.qc-ind { font: 800 34px var(--font-mono); letter-spacing: .02em; }
.qc-nom { font: 700 15px var(--font-sans); }
.qc-petit { font: 600 10px var(--font-sans); letter-spacing: .06em; }
.qc-etoiles { font: 14px var(--font-sans); letter-spacing: 2px; }
.qc-loc { font: 800 54px var(--font-mono); letter-spacing: .08em; }
.qc-tampon text { font: 800 13px var(--font-mono); letter-spacing: .06em; }
.qc-cadre { fill: none; stroke: rgba(0, 0, 0, .35); stroke-width: 1; }
.qc-sans { fill: rgba(255, 255, 255, .28); }
.qc-sans-t { font: 800 14px var(--font-mono); fill: #fff; }
.qc-holo { fill: none; stroke: #FFD166; stroke-width: 4; }
.qsl-dos { display: flex; flex-direction: column; height: 100%; padding: 8px 10px; box-sizing: border-box; text-align: left;
  background: repeating-linear-gradient(0deg, transparent 0 15px, rgba(52, 81, 200, .1) 15px 16px), #FBF7EC; }
.qsl-dos-titre { margin: 0 0 4px; font: 800 11px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: #B42318; }
.qsl-dos dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; font-size: 11px; line-height: 1.35; }
.qsl-dos dt { color: #6B6B6B; } .qsl-dos dd { margin: 0; font-family: var(--font-mono); font-weight: 700; color: #1E2A44; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qsl-dos-73 { margin: auto 0 0; font: italic 700 12px var(--font-sans); color: #3451C8; text-align: right; }
.qsl-nombre { position: absolute; top: -7px; right: -7px; z-index: 2; min-width: 26px; padding: 2px 6px; border-radius: 999px; background: var(--info); color: #fff; font-size: 12px; font-weight: 800; box-shadow: var(--shadow); }
.qsl-neuf { position: absolute; top: -8px; left: -6px; z-index: 2; padding: 2px 8px; border-radius: 999px; background: #E5484D; color: #fff; font: 800 11px var(--font-sans); transform: rotate(-6deg);
  animation: jeu-pop .6s cubic-bezier(.2,1.6,.4,1); }
.qsl-tuile.montre .qsl-flip { animation: qsl-montre 1.2s ease-out; }
.qsl-tuile.manque { cursor: pointer; }
.qsl-vide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; border-radius: 10px; text-align: center;
  border: 2px dashed var(--border-strong); background: repeating-linear-gradient(135deg, var(--well) 0 10px, color-mix(in srgb, var(--well) 70%, var(--panel)) 10px 20px); }
.qsl-tuile.manque:hover .qsl-vide { border-color: var(--accent); }
.qsl-tuile.manque.r3 .qsl-vide { border-color: color-mix(in srgb, var(--sat) 60%, var(--border-strong)); }
.qsl-vide-p { font-size: 22px; font-weight: 800; color: var(--text-muted); }
.qsl-vide-n { font-size: 12.5px; color: var(--text-dim); line-height: 1.2; }
.qsl-vide-r { font-size: 11px; color: var(--text-muted); }

/* The scene: an envelope, a trade, a diploma. */
.qsl-scene { position: fixed; inset: 0; z-index: 58; display: grid; place-items: center; padding: 16px; }
.qsl-scene[hidden] { display: none; }
.qsl-scene-fond { position: absolute; inset: 0; background: rgba(4, 10, 20, .72); backdrop-filter: blur(3px); animation: qsl-fond .3s ease-out; }
.qsl-scene-boite { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px; border-radius: var(--r-l); background: var(--panel); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-pop); text-align: center; animation: jeu-toast .45s cubic-bezier(.2,1.4,.4,1); }
.qsl-scene-boite h2 { margin: 0 0 12px; font-size: 22px; }
.qsl-scene-actions { margin: 14px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.qsl-scene-actions .btn { min-height: 44px; min-width: 120px; }
body.qsl-scene-ouverte { overflow: hidden; }
.qsl-pochette-grande .qsl-enveloppe { width: min(260px, 70vw); height: auto; animation: qsl-tremble 1.6s ease-in-out infinite; }
.qsl-pochette-grande.ouverte .qsl-enveloppe { animation: qsl-saute .6s ease-out forwards; }
.qsl-pochette-grande.ouverte .qe-rabat { transform: scaleY(-1); }
.qsl-revele { position: relative; padding: 8px 0; }
.qsl-eclat { position: absolute; left: 50%; top: 45%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 35%, transparent) 0 10deg, transparent 10deg 20deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); }
.qsl-revele.r2 .qsl-eclat { opacity: 1; background: repeating-conic-gradient(from 0deg, rgba(111, 140, 255, .45) 0 10deg, transparent 10deg 20deg); animation: qsl-tourne 8s linear infinite; }
.qsl-revele.r3 .qsl-eclat { opacity: 1; background: repeating-conic-gradient(from 0deg, rgba(255, 209, 102, .6) 0 8deg, transparent 8deg 16deg); animation: qsl-tourne 5s linear infinite; }
.qsl-revele-carte { position: relative; width: min(340px, 100%); aspect-ratio: 280 / 180; margin: 0 auto; perspective: 900px; animation: qsl-monte .55s cubic-bezier(.2,1.3,.4,1); }
.qsl-revele-carte .qsl-flip { animation: qsl-retourne .9s cubic-bezier(.3,1.3,.5,1) .35s both; }
.qsl-dos-pochette { background: repeating-linear-gradient(45deg, #E5484D 0 12px, #FBF7EC 12px 24px, #3451C8 24px 36px, #FBF7EC 36px 48px); }
.qsl-revele-txt { position: relative; margin: 14px 0 0; font-size: 16px; }
.qsl-rarete { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.qsl-rarete.r1 { color: var(--green); } .qsl-rarete.r2 { color: var(--info); } .qsl-rarete.r3 { color: var(--sat); }
.qsl-troc .qsl-tuile { width: min(240px, 100%); margin: 0 auto 10px; cursor: default; }
.qsl-parchemin { width: 100%; height: auto; display: block; }
.qsl-diplome-scene.fete .qsl-parchemin { animation: qsl-diplome .9s cubic-bezier(.2,1.4,.4,1); }
.qp-fond { fill: #FBF3DD; stroke: #B8860B; stroke-width: 2; }
.qp-bord { fill: none; stroke: #B8860B; stroke-width: 3; } .qp-bord2 { fill: none; stroke: #B8860B; stroke-width: 1; stroke-dasharray: 4 3; }
.qp-orne { fill: none; stroke: #B8860B; stroke-width: 2; }
.qp-titre { font: 700 15px var(--font-sans); letter-spacing: .4em; text-transform: uppercase; fill: #7A5A12; }
.qp-nom { font: 800 44px var(--font-sans); fill: #4A3410; }
.qp-txt { font: italic 13px var(--font-sans); fill: #5C4520; }
.qp-desc { font: 600 14px var(--font-sans); fill: #7A5A12; }
.qp-ruban { fill: #E5484D; } .qp-sceau { fill: #FFD166; stroke: #B8860B; stroke-width: 2; } .qp-sceau2 { fill: none; stroke: #B8860B; stroke-dasharray: 2 2; } .qp-etoile { fill: #B8860B; }
.qp-signe { fill: none; stroke: #3451C8; stroke-width: 1.6; stroke-linecap: round; }

@keyframes qsl-tremble { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-6deg); } 88% { transform: rotate(5deg); } 92% { transform: rotate(-3deg); } 96% { transform: rotate(2deg); } }
@keyframes qsl-saute { 0% { transform: none; } 40% { transform: translateY(-14px) scale(1.06); } 100% { transform: translateY(30px) scale(.9); opacity: 0; } }
@keyframes qsl-reflet { from { background-position: 100% 0; } to { background-position: -160% 0; } }
@keyframes qsl-point { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.7); } }
@keyframes qsl-montre { 0%, 100% { transform: none; } 30% { transform: translateY(-8px) scale(1.06); } 60% { transform: rotate(-3deg); } }
@keyframes qsl-monte { from { transform: translateY(80px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qsl-retourne { from { transform: rotateY(180deg); } to { transform: rotateY(0); } }
@keyframes qsl-tourne { to { transform: rotate(360deg); } }
@keyframes qsl-fond { from { opacity: 0; } to { opacity: 1; } }
@keyframes qsl-diplome { from { transform: scale(.3) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .il-qsl-2, .il-etoile, .qsl-pochettes.pleine .qsl-enveloppe, .qsl-chiffre.bouge b, .qsl-nouveau, .qm-point.neuf, .qsl-tuile.r3 .qsl-recto::after, .qsl-neuf, .qsl-tuile.montre .qsl-flip,
  .qsl-scene-fond, .qsl-scene-boite, .qsl-pochette-grande .qsl-enveloppe, .qsl-pochette-grande.ouverte .qsl-enveloppe, .qsl-eclat, .qsl-revele-carte, .qsl-revele-carte .qsl-flip,
  .qsl-diplome-scene.fete .qsl-parchemin { animation: none !important; }
  .qsl-flip, .qsl-dip-barre i, .qe-rabat { transition: none; }
  .qsl-tuile.r3 .qsl-recto::after { display: none; }
}
@media (max-width: 859px) { .qsl-tableau { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qsl-pochettes { grid-column: 1 / -1; } .qsl-zones { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .qsl-chiffre b { font-size: 28px; }
  .qsl-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .qsl-vide-p { font-size: 17px; } .qsl-vide-n { font-size: 11.5px; }
  .qsl-pochettes { flex-wrap: wrap; } .qsl-pochettes .btn { width: 100%; }
}

/* ------------------------------------------------------------ « Lecture au son » (/jeux/morse, jeu-morse.js; its layout « Quel DXCC ? »'s) */
.il-cw rect { fill: var(--accent); animation: il-cw 2.4s steps(1) infinite; }
.il-cw rect:nth-child(2) { animation-delay: .2s; } .il-cw rect:nth-child(3) { animation-delay: .5s; } .il-cw rect:nth-child(4) { animation-delay: .7s; } .il-cw rect:nth-child(5) { animation-delay: .9s; }
.il-tuiles rect { fill: color-mix(in srgb, var(--green) 22%, var(--panel-2)); stroke: var(--green); stroke-width: 2; }
.il-tuiles .il-rouge { fill: color-mix(in srgb, var(--red) 22%, var(--panel-2)); stroke: var(--red); }
.il-lettres text { font: 800 22px var(--font-mono); fill: var(--text); }
@keyframes il-cw { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
.cw-illus .cw-il-socle { fill: var(--panel-2); stroke: var(--border-strong); stroke-width: 2; }
.cw-illus .cw-il-levier { stroke: var(--text-dim); stroke-width: 6; stroke-linecap: round; }
.cw-illus .cw-il-bouton { fill: var(--red); stroke: color-mix(in srgb, var(--red) 60%, #000); stroke-width: 2; animation: cw-tape 1.2s ease-in-out infinite; transform-origin: 170px 68px; }
.cw-illus .cw-il-code rect { fill: var(--amber); }
@keyframes cw-tape { 0%, 100% { transform: none; } 10%, 30% { transform: translateY(4px); } 20% { transform: none; } }
.cw-son { font-size: 12.5px; }

.cw-wpm { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 10px; border-radius: 999px; font: 700 13px var(--font-sans); color: var(--text-dim);
  background: linear-gradient(135deg, color-mix(in srgb, var(--info) 18%, var(--panel-2)), var(--panel-2)); border: 1px solid color-mix(in srgb, var(--info) 50%, var(--border)); }
.cw-wpm b { font-size: 20px; color: var(--info); text-shadow: 0 0 10px color-mix(in srgb, var(--info) 45%, transparent); }
.cw-wpm i { font-style: normal; font-size: 12px; font-weight: 800; }
.cw-wpm i.monte { color: var(--green); } .cw-wpm i.baisse { color: var(--red); }
.cw-wpm.saute { animation: jeu-pop .55s cubic-bezier(.2,1.6,.4,1); }
.cw-progres span { transition: width .5s ease-out; }
.cw-ecran { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 0 auto 14px; max-width: 520px; padding: 18px 16px 12px; border-radius: var(--r-l);
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--well); border: 1px solid var(--border-strong); }
.cw-genre { position: absolute; top: 8px; left: 10px; padding: 1px 9px; border-radius: 999px; font: 700 11px var(--font-sans); letter-spacing: .04em; color: #fff; background: var(--info); }
.cw-genre.g-ind { background: #8E54E9; } .cw-genre.g-mot { background: #11998E; } .cw-genre.g-q { background: #E65C00; } .cw-genre.g-nb { background: #3451C8; } .cw-genre.g-koch { background: #C33764; }
.cw-lampe { width: 46px; height: 46px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #6b2a2a, #2a0d0d); border: 3px solid var(--border-strong);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .5); transition: background .08s, box-shadow .08s; }
.cw-lampe.on { background: radial-gradient(circle at 35% 30%, #fff3c4, #ff5a4a 45%, #c4141a); box-shadow: 0 0 22px 6px rgba(255, 80, 70, .55), inset 0 -3px 6px rgba(0, 0, 0, .25); }
.cw-barres { display: flex; align-items: flex-end; gap: 4px; height: 44px; }
.cw-barres i { width: 7px; height: 6px; border-radius: 3px; background: linear-gradient(0deg, var(--accent), var(--info)); opacity: .35; }
.cw-barres.on i { opacity: 1; animation: cw-barre .5s ease-in-out infinite alternate; }
.cw-barres.on i:nth-child(3n) { animation-duration: .38s; } .cw-barres.on i:nth-child(3n+1) { animation-duration: .62s; } .cw-barres.on i:nth-child(4n) { animation-delay: .15s; }
@keyframes cw-barre { from { height: 6px; } to { height: 42px; } }
.cw-consigne { flex: 0 0 100%; margin: 0; text-align: center; font-size: 13px; color: var(--text-dim); }
.cw-tape input { font-size: 24px; }
.cw-tape { animation: none; }
.cw-tape.secoue { animation: dx-secoue .45s; }
.cw-tape .dx-gain { right: 120px; }
.cw-tuiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 16px auto 0; max-width: 640px; min-height: 0; }
.cw-tuile { position: relative; display: inline-flex; flex-direction: column; align-items: center; min-width: 40px; padding: 6px 6px 4px; border-radius: var(--r-m); border: 2px solid var(--border-strong);
  background: var(--well); animation: cw-tuile .5s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i) * 70ms); }
.cw-tuile b { font-size: 26px; line-height: 1.1; }
.cw-tuile small { font-size: 12px; letter-spacing: 1px; color: var(--text-muted); }
.cw-tuile s { position: absolute; top: -9px; right: -7px; padding: 0 4px; border-radius: 6px; font-size: 12px; background: var(--red); color: #fff; text-decoration: line-through; }
.cw-tuile.ok { border-color: var(--green); background: color-mix(in srgb, var(--green) 18%, var(--well)); }
.cw-tuile.ok b { color: var(--green); }
.cw-tuile.faux, .cw-tuile.manque { border-color: var(--red); background: color-mix(in srgb, var(--red) 15%, var(--well)); }
.cw-tuile.faux b, .cw-tuile.manque b { color: var(--red); }
.cw-tuile.manque { border-style: dashed; }
.cw-tuile.trop { min-width: 28px; opacity: .75; border-style: dotted; border-color: var(--amber); }
.cw-tuile.trop b { font-size: 18px; color: var(--amber); text-decoration: line-through; }
.cw-espace { width: 14px; }
@keyframes cw-tuile { from { transform: rotateX(90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.cw-intro { text-align: center; }
.cw-intro-lettre { margin: 0; font-size: 88px; font-weight: 800; line-height: 1; color: var(--amber); animation: jeu-apparait .5s cubic-bezier(.2,1.4,.4,1); }
.cw-intro-code { margin: 4px 0 14px; font-size: 28px; letter-spacing: 6px; color: var(--text-dim); }
.cw-vitesse { display: block; margin: 0 0 12px; }
.cw-vitesse-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-size: 13.5px; }
.cw-vitesse output { font-size: 18px; font-weight: 800; color: var(--info); }
.cw-vitesse input { width: 100%; height: 32px; accent-color: var(--accent); }
.cw-effets { display: block; }
.cw-koch { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.cw-lettre { width: 100%; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--r-s); border: 1px solid var(--border);
  background: var(--well); color: var(--text-muted); font-size: 16px; font-weight: 800; cursor: pointer; padding: 2px 0; }
.cw-lettre small { font-size: 9px; letter-spacing: 0; font-weight: 400; white-space: nowrap; }
.cw-koch li.on .cw-lettre { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.cw-koch li.neuve .cw-lettre { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 10px color-mix(in srgb, var(--amber) 55%, transparent); }
.cw-lettre:hover { border-color: var(--accent); }
.cw-lettre:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cw-koch-etat { font-size: 13.5px; }
.cw-codesq { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
.cw-codesq dt { color: var(--amber); font-weight: 700; } .cw-codesq dd { margin: 0; color: var(--text-dim); }
@media (prefers-reduced-motion: reduce) {
  .il-cw rect, .cw-illus .cw-il-bouton, .cw-wpm.saute, .cw-barres.on i, .cw-tuile, .cw-tape.secoue, .cw-intro-lettre { animation: none; }
  .cw-barres.on i { height: 24px; }
  .cw-lampe { transition: none; }
}
@media (max-width: 560px) {
  .cw-tuile { min-width: 34px; } .cw-tuile b { font-size: 21px; }
  .cw-tape .dx-gain { right: 90px; }
}

/* ------------------------------------------------------------ « Pile-up » (/jeux/pileup, jeu-pileup.js; its layout « Quel DXCC ? »'s) */
.il-chute rect { fill: color-mix(in srgb, var(--accent) 30%, transparent); }
.il-chute rect:nth-child(2) { fill: color-mix(in srgb, var(--amber) 35%, transparent); } .il-chute rect:nth-child(3) { fill: color-mix(in srgb, var(--info) 35%, transparent); }
.il-bulles rect { stroke-width: 1.5; }
.il-bulles text { font: 700 11px var(--font-mono); fill: #fff; }
.ib1 rect { fill: #E8702A; stroke: #FFB454; } .ib2 rect { fill: #3C7DD9; stroke: #6F8CFF; } .ib3 rect { fill: #D7372A; stroke: #FF8A80; }
.ib4 rect { fill: #11998E; stroke: #38EF7D; } .ib5 rect { fill: #8E54E9; stroke: #C9A7FF; }
.il-bulles g { animation: il-bulle 2.8s ease-in-out infinite; } .il-bulles .ib2 { animation-delay: .5s; } .il-bulles .ib3 { animation-delay: 1s; } .il-bulles .ib4 { animation-delay: 1.5s; } .il-bulles .ib5 { animation-delay: 2s; }
@keyframes il-bulle { 0%, 100% { opacity: .55; } 15%, 40% { opacity: 1; } }
.pu-illus .pu-il-bulles rect { fill: var(--panel-2); stroke: var(--accent); stroke-width: 1.5; animation: il-bulle 2.4s ease-in-out infinite; }
.pu-illus .pu-il-bulles rect:nth-child(2n) { stroke: var(--amber); animation-delay: .6s; } .pu-illus .pu-il-bulles rect:nth-child(3n) { stroke: var(--info); animation-delay: 1.2s; }
.pu-illus .pu-il-txt text { font: 700 12px var(--font-mono); fill: var(--text); }
.pu-illus .pu-il-onde { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .6; }

.pu-hud { margin-bottom: 6px; }
.pu-qso { font-size: 13px; color: var(--text-dim); } .pu-qso b { font-size: 20px; color: var(--green); }
.pu-taux { padding: 2px 10px; border-radius: 999px; font-size: 12px; color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--border-strong); }
.pu-taux b { font-size: 17px; color: var(--text); }
.pu-taux.tiede { border-color: var(--amber); } .pu-taux.tiede b { color: var(--amber); }
.pu-taux.chaud { border-color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--panel-2)); } .pu-taux.chaud b { color: var(--red); }
.pu-ether { position: relative; height: clamp(240px, 42vh, 380px); border-radius: var(--r-l); overflow: hidden; background: var(--m-ocean); border: 1px solid var(--border-strong);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .35); touch-action: manipulation; }
.pu-ether.split { cursor: crosshair; }
.pu-ether.secoue { animation: dx-secoue .4s; }
.pu-chute { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pu-bulles { position: absolute; inset: 0 0 18px; }
.pu-bulle { --h: 200; position: absolute; transform: translate(-50%, -50%) scale(var(--t, 1)); display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 3px 6px 3px 12px;
  border-radius: 999px; border: 2px solid hsl(var(--h) 90% 62%); background: hsl(var(--h) 70% 22% / .82); color: #fff; font: inherit; cursor: pointer; white-space: nowrap;
  opacity: .62; transition: opacity .25s, box-shadow .25s; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.pu-bulle .pu-ind { font-size: 16px; font-weight: 800; letter-spacing: .04em; }
.pu-bulle .pu-s { padding: 1px 6px; border-radius: 999px; font: 800 10.5px var(--font-mono); background: hsl(var(--h) 90% 62%); color: #0B1622; }
.pu-bulle.s3 { --h: 205; } .pu-bulle.s4 { --h: 190; } .pu-bulle.s5 { --h: 170; } .pu-bulle.s6 { --h: 140; } .pu-bulle.s7 { --h: 95; }
.pu-bulle.s8 { --h: 55; } .pu-bulle.s9 { --h: 35; } .pu-bulle.s10 { --h: 12; } .pu-bulle.s11 { --h: 330; }
.pu-bulle.parle { opacity: 1; z-index: 2; box-shadow: 0 0 16px hsl(var(--h) 90% 60% / .75); }
.pu-bulle.parle .pu-ind { animation: pu-parle .35s ease-out; }
.pu-bulle.arrive { animation: pu-arrive .45s cubic-bezier(.2,1.6,.4,1); }
.pu-bulle.repond { border-color: #fff; border-style: dashed; }
.pu-bulle.hors { filter: blur(2.5px); opacity: .35; }
.pu-bulle.bon { opacity: 1; border-color: var(--green); background: color-mix(in srgb, var(--green) 55%, #000); }
.pu-bulle.faux { opacity: 1; border-color: var(--red); background: color-mix(in srgb, var(--red) 55%, #000); }
.pu-bulle.doublon { opacity: 1; border-color: var(--amber); background: color-mix(in srgb, var(--amber) 50%, #000); }
.pu-bulle.fait, .pu-bulle.part { pointer-events: none; animation: pu-part .9s ease-in forwards; }
.pu-bulle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pu-gain { position: absolute; z-index: 3; transform: translate(-50%, -120%); font: 800 20px var(--font-mono); pointer-events: none; animation: pu-gain 1.2s ease-out forwards;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.pu-gain.plus { color: #7CFFB0; } .pu-gain.moins { color: #FF8A80; }
.pu-vague { position: absolute; left: 50%; top: 42%; margin: 0; transform: translate(-50%, -50%); font: 900 clamp(26px, 5vw, 44px) var(--font-sans); color: #fff; opacity: 0; pointer-events: none;
  text-shadow: 0 0 18px var(--accent), 0 2px 6px rgba(0, 0, 0, .6); }
.pu-vague.montre { animation: pu-vague 1.4s ease-out; }
.pu-echelle { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 0 8px; height: 18px; align-items: center;
  font: 10.5px var(--font-mono); color: rgba(200, 220, 240, .75); background: rgba(0, 0, 0, .35); pointer-events: none; }
.pu-rx { position: absolute; top: 0; bottom: 18px; border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  pointer-events: none; transition: left .2s; }
.pu-rx span, .pu-tx-marque span { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 4px; font: 800 10.5px var(--font-mono); background: var(--accent); color: var(--on-accent); }
.pu-tx-marque { position: absolute; top: 0; bottom: 18px; left: 5%; width: 0; border-left: 2px dashed var(--amber); pointer-events: none; }
.pu-tx-marque span { background: var(--amber); }
.pu-split { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; font-size: 13.5px; }
.pu-split .btn { min-width: 48px; min-height: 40px; }
.pu-tx { display: flex; justify-content: center; align-items: baseline; gap: 8px; margin: 10px 0 6px; font-size: 13px; }
.pu-tx b { font-size: 18px; color: var(--amber); letter-spacing: .05em; }
.pu-tx.emet b { animation: pu-emet .5s steps(6); }
.pu-saisie input { font-size: 22px; }
.pu-retour { min-height: 1.6em; margin: 10px 0 6px; text-align: center; }
.pu-bas { display: flex; flex-direction: column; gap: 8px; }
.pu-journal { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; max-height: 172px; overflow: auto; font-size: 13px; }
.pu-journal li { display: grid; grid-template-columns: 3em auto minmax(6.5em, auto) 1fr auto auto; gap: 8px; align-items: center; padding: 4px 8px; border-radius: var(--r-s);
  background: var(--well); border-left: 3px solid var(--green); animation: pu-log .45s cubic-bezier(.2,1.4,.4,1); }
.pu-journal li .dr-pays { margin: 0; }
.pu-journal li b { font-size: 14px; }
.pu-journal .pu-h, .pu-journal .pu-rst { color: var(--text-muted); font-size: 12px; }
.pu-journal .pu-e { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-journal li.ok .pu-etat { color: var(--green); }
.pu-journal li.casse { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--well)); } .pu-journal li.casse b { text-decoration: line-through; color: var(--red); }
.pu-journal li.casse .pu-etat { color: var(--red); }
.pu-journal li.doublon { border-left-color: var(--amber); } .pu-journal li.doublon .pu-etat { color: var(--amber); }
.pu-revue .dr-pays { margin-right: 6px; }
@keyframes pu-arrive { from { transform: translate(-50%, -50%) scale(0); opacity: 0; } to { transform: translate(-50%, -50%) scale(var(--t, 1)); opacity: .62; } }
@keyframes pu-parle { 0% { letter-spacing: .3em; } 100% { letter-spacing: .04em; } }
@keyframes pu-part { to { transform: translate(-50%, -150%) scale(.6); opacity: 0; } }
@keyframes pu-gain { from { transform: translate(-50%, -100%); opacity: 1; } to { transform: translate(-50%, -260%); opacity: 0; } }
@keyframes pu-vague { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes pu-emet { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pu-log { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .il-bulles g, .pu-illus .pu-il-bulles rect, .pu-bulle.parle .pu-ind, .pu-bulle.arrive, .pu-ether.secoue, .pu-tx.emet b, .pu-journal li { animation: none; }
  .pu-bulle.fait, .pu-bulle.part { animation: none; opacity: 0; }
  .pu-gain { animation: none; opacity: 0; }
  .pu-vague.montre { animation: none; }
  .pu-bulle, .pu-rx { transition: none; }
}
@media (max-width: 560px) {
  .pu-bulle { min-height: 30px; padding: 2px 4px 2px 9px; gap: 4px; }
  .pu-bulle .pu-ind { font-size: 13.5px; } .pu-bulle .pu-s { font-size: 9.5px; padding: 1px 4px; }
  .pu-journal li { grid-template-columns: 2.6em auto auto 1fr auto; } .pu-journal .pu-rst { display: none; }
}