/* F4IOZ — Jeux: the « atelier » games (jeux-atelier.js and its five games), on « Quel DXCC ? »'s arena (jeux.css).
   A round sits in the arena's height on a desktop (the arena scrolls in itself should it be taller); on a phone
   everything stacks, and every control is at least 44 px. */

/* ------------------------------------------------------------ what they share */
.at-partie { display: flex; flex-direction: column; gap: 8px; }
.at-partie .dx-hud { margin-bottom: 0; }
.at-partie .dx-barre { margin-bottom: 4px; }
.at-hud-n { font-size: 14px; color: var(--text-dim); }
.at-hud-n b { color: var(--text); }
.at-aide-btn { min-height: 32px; padding: 0 12px; font-size: 13px; }
.at-partie .dx-hud .at-aide-btn { margin-left: 4px; }
.at-simule { font-size: 12px !important; margin: 8px 0 0 !important; }
.at-retour { margin: 0; min-height: 0; font-size: 14px; line-height: 1.45; }
.at-retour:empty { display: none; }
.at-retour.moyen b { color: var(--amber); }
.at-pts { color: var(--accent); font-weight: 700; white-space: nowrap; }
.at-actions { justify-content: flex-start; flex-wrap: wrap; }
.at-note { font-size: 12px !important; }
.at-liste { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.at-touches, .at-bareme { font-size: 13px; }
.at-touches b, .at-bareme b { color: var(--amber); margin-right: 4px; }
.at-revue li { grid-template-columns: minmax(6em, auto) 1fr auto; }
.at-banniere { pointer-events: none; }

/* The help over the arena. */
.at-aide { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: center; padding: 14px; overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(2px); }
.at-aide[hidden] { display: none; }
.at-aide-boite { max-width: 620px; width: 100%; padding: 16px 18px; border-radius: var(--r-l); background: var(--panel); border: 1px solid var(--accent); box-shadow: var(--shadow-pop); }
.at-aide-boite h2 { margin: 0 0 8px; font-size: 18px; }
.at-aide-boite li, .at-aide-boite p { font-size: 14px; line-height: 1.5; }
.at-aide-pied { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; }
.at-aide-pied .dim { font-size: 12px; }

/* The end: the score's parts. */
.at-parts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.at-parts li { display: grid; grid-template-columns: 9em 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.at-part-barre { height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.at-part-barre span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--info)); border-radius: 4px; }
.at-resume h3 { font-size: 13px; margin: 6px 0; }

/* ------------------------------------------------------------ « Accorde ton antenne » */
.ac-scene { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ac-charge { margin: 0 0 6px; font-size: 14px; }
.ac-charge b { font-size: 15px; }
.ac-topo { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.ac-topo .btn { min-height: 34px; font-size: 13px; padding: 0 10px; }
.ac-topo .btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ac-topo .btn:disabled { opacity: .55; cursor: default; }
.ac-topo .btn[aria-pressed="true"]:disabled { opacity: 1; }
.ac-schema { width: 100%; max-width: 340px; height: auto; display: block; margin: 2px 0 6px; }
.ac-sc-boite { fill: var(--panel-2); stroke: var(--border-strong); }
.ac-sc-fil, .ac-sc-self { fill: none; stroke: var(--text-dim); stroke-width: 2.2; stroke-linecap: round; }
.ac-sc-self { stroke: var(--amber); }
.ac-sc-mot { font: 700 11px var(--font-mono); fill: var(--text-dim); }
.ac-sc-l { fill: var(--amber); } .ac-sc-c { fill: var(--info); }
.ac-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ac-bouton { padding: 8px 10px; border-radius: var(--r-m); background: var(--well); border: 1px solid var(--border); }
.ac-b-tete { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; font-size: 13px; color: var(--text-dim); }
.ac-b-tete b { color: var(--text); font-size: 17px; }
.ac-conseil { margin-left: auto; font: 800 18px var(--font-mono); color: var(--amber); }
.ac-b-pas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0 0 6px; }
.ac-pas { min-height: 38px; padding: 0; font: 700 16px var(--font-mono); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ac-curseur { width: 100%; min-height: 24px; padding: 0; border: 0; background: none; accent-color: var(--accent); }
.ac-droite { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ac-mesures { display: flex; flex-direction: column; gap: 4px; align-items: center; width: 100%; }
.ac-ros { width: 100%; max-width: 220px; height: auto; flex: none; }
.ac-ros-arc { fill: none; stroke: var(--border-strong); stroke-width: 2; }
.ac-ros-vert, .ac-ros-orange, .ac-ros-rouge { fill: none; stroke-width: 8; }
.ac-ros-vert { stroke: color-mix(in srgb, var(--green) 70%, transparent); }
.ac-ros-orange { stroke: color-mix(in srgb, var(--amber) 70%, transparent); }
.ac-ros-rouge { stroke: color-mix(in srgb, var(--red) 65%, transparent); }
.ac-ros-gr { stroke: var(--text-dim); stroke-width: 1.5; }
.ac-ros-lib { font: 700 11px var(--font-mono); fill: var(--text-dim); }
.ac-ros-tige { fill: var(--text); }
.ac-ros-axe { fill: var(--panel-2); stroke: var(--text-dim); }
[data-ac-aiguille] { transition: transform .12s ease-out; }
.ac-lect { display: grid; grid-template-columns: auto auto auto auto; gap: 2px 10px; margin: 0; font-size: 13px; align-items: baseline; }
.ac-lect dt { color: var(--text-muted); }
.ac-lect dd { margin: 0; text-align: right; white-space: nowrap; }
.ac-gros { font-size: 22px; font-weight: 800; }
.ac-gros.bon { color: var(--green); } .ac-gros.moyen { color: var(--amber); } .ac-gros.mauvais { color: var(--red); }
.ac-smith { width: 100%; max-width: 210px; height: auto; }
.ac-sm-fond { fill: var(--well); stroke: var(--border-strong); stroke-width: .012; }
.ac-sm-r, .ac-sm-x { fill: none; stroke: var(--border-strong); stroke-width: .006; }
.ac-sm-r.un { stroke: var(--text-dim); stroke-width: .01; }
.ac-sm-cible { fill: color-mix(in srgb, var(--green) 14%, transparent); stroke: var(--green); stroke-width: .008; stroke-dasharray: .03 .02; }
.ac-sm-centre { fill: var(--green); }
.ac-sm-charge { fill: none; stroke: var(--red); stroke-width: .014; }
.ac-sm-trace { fill: none; stroke: var(--amber); stroke-width: .01; opacity: .7; }
.ac-sm-point { fill: var(--amber); stroke: var(--panel); stroke-width: .012; }
.ac-scene.sans-aide .ac-detail { display: none; }

/* ------------------------------------------------------------ « Construis ta station » */
.st-consigne { margin: 0; font-size: 14px; }
.st-scene { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 10px; align-items: start; }
.st-banc { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; padding-bottom: 26px; align-items: start; }
.st-cables { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.st-cable { fill: none; stroke-width: 3.5; stroke-linecap: round; opacity: .85; }
.st-cable.adapt { stroke-dasharray: 7 4; }
.st-app { position: relative; padding: 8px; border-radius: var(--r-m); background: var(--well); border: 1px solid var(--border); min-width: 0; }
.st-app h4 { margin: 0; font-size: 13px; line-height: 1.25; }
.st-app-txt { margin: 1px 0 6px; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-prises { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px; }
.st-prise { position: relative; z-index: 3; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 34px; min-width: 0; padding: 2px 4px 2px 6px; overflow-wrap: anywhere;
  border-radius: var(--r-s); border: 1px solid var(--border-strong); border-left: 4px solid var(--fam, var(--border-strong)); background: var(--panel-2); color: var(--text);
  font: 600 11.5px var(--font-sans); cursor: pointer; text-align: left; line-height: 1.15; touch-action: manipulation; }
.st-p-conn { font: 400 10.5px var(--font-mono); color: var(--text-muted); }
.st-prise:hover:not(:disabled) { border-color: var(--accent); }
.st-prise:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-prise.reliee { background: color-mix(in srgb, var(--fam) 16%, var(--panel-2)); }
.st-prise.choisie { outline: 3px solid var(--accent); outline-offset: 1px; background: var(--accent-soft); }
.st-prise.possible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); animation: st-possible 1s ease-in-out infinite alternate; }
.st-prise:disabled { cursor: default; }
.st-prise.secoue { animation: dx-secoue .45s; }
@keyframes st-possible { from { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); } to { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 65%, transparent); } }
.f-dc { --fam: #E5484D; } .f-rf { --fam: #FFB454; } .f-usb { --fam: #6F8CFF; } .f-ptt { --fam: #5BD68A; } .f-rot { --fam: #C77DFF; } .f-terre { --fam: #9BBF3B; } .f-secteur { --fam: #8E9AA6; }
.st-cable.f-dc { stroke: #E5484D; } .st-cable.f-rf { stroke: #FFB454; } .st-cable.f-usb { stroke: #6F8CFF; } .st-cable.f-ptt { stroke: #5BD68A; } .st-cable.f-rot { stroke: #C77DFF; }
.st-cable.f-terre { stroke: #9BBF3B; } .st-cable.f-secteur { stroke: #8E9AA6; }
.st-cote { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st-cote h3 { margin: 4px 0 0; font: 700 11px/1.2 var(--font-sans); letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-dim); }
.st-message { margin: 0; min-height: 3.2em; font-size: 13px; padding: 6px 8px; border-radius: var(--r-s); background: var(--well); border: 1px solid var(--border); }
.st-message.bravo { border-color: color-mix(in srgb, var(--green) 50%, var(--border)); }
.st-message.rate { border-color: color-mix(in srgb, var(--red) 50%, var(--border)); }
.st-boutons { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.st-boutons .btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
.st-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; max-height: 190px; overflow-y: auto; font-size: 12px; }
.st-liens li { display: flex; align-items: center; gap: 6px; padding: 2px 4px 2px 8px; border-radius: var(--r-s); background: var(--well); border-left: 3px solid var(--fam, var(--border)); }
.st-liens li > span { flex: 1; min-width: 0; }
.st-retire { min-height: 30px; min-width: 30px; padding: 0; font-size: 12px; }
.st-adapt { color: var(--amber); font-size: 11px; }
.st-diag { font-size: 12.5px; }
.st-diag p { margin: 0 0 4px; }
.st-ok b { color: var(--green); } .st-ko b { color: var(--red); }
.st-explique { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; line-height: 1.4; }
.st-explique .faux { color: var(--red); } .st-explique .faux b { color: var(--text); }
.st-explique .manque { color: var(--text-dim); } .st-explique .adapt { color: var(--amber); }
@media (prefers-reduced-motion: reduce) { .st-prise.possible, .st-prise.secoue { animation: none; } }

/* ------------------------------------------------------------ « Chasse au renard » */
.rn-scene { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; align-items: start; }
.rn-carte-cadre { border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--border); background: var(--well); }
.rn-carte { display: block; width: 100%; height: auto; max-height: calc(100dvh - 300px); min-height: 220px; cursor: crosshair; touch-action: manipulation; }
.rn-carte.placer { cursor: copy; }
.rn-foret { fill: color-mix(in srgb, var(--green) 20%, var(--panel)); }
.rn-clairiere { fill: color-mix(in srgb, var(--sat) 14%, var(--panel)); }
.rn-lac { fill: color-mix(in srgb, var(--info) 45%, var(--panel)); stroke: color-mix(in srgb, var(--info) 70%, var(--panel)); stroke-width: 6; }
.rn-colline { fill: none; stroke: color-mix(in srgb, #B5651D 70%, var(--panel)); stroke-width: 5; }
.rn-falaise { stroke: var(--text); stroke-width: 10; stroke-linecap: round; }
.rn-falaise-t { stroke: var(--text); stroke-width: 5; }
.rn-chemin { fill: none; stroke: var(--text-dim); stroke-width: 6; stroke-dasharray: 22 14; opacity: .6; }
.rn-grille { stroke: var(--text-muted); stroke-width: 2; opacity: .35; }
.rn-depart { fill: none; stroke: #C77DFF; stroke-width: 9; }
.rn-echelle path { stroke: var(--text); stroke-width: 6; }
.rn-echelle text, .rn-nord text { font: 700 40px var(--font-mono); fill: var(--text); }
.rn-nord path { fill: none; stroke: var(--text); stroke-width: 6; }
.rn-trace { fill: none; stroke: var(--text); stroke-width: 5; stroke-dasharray: 10 10; opacity: .6; }
.rn-releve { stroke-width: 7; opacity: .9; }
.rn-releve-pt { stroke: var(--panel); stroke-width: 4; }
.rn-num { font: 800 40px var(--font-mono); fill: var(--text); paint-order: stroke; stroke: var(--panel); stroke-width: 8px; }
.rn-indice { fill: none; stroke-width: 6; stroke-dasharray: 16 10; }
.rn-indice.fin { stroke: var(--text); }
.rn-place path { fill: currentColor; stroke: var(--panel); stroke-width: 4; }
.rn-place circle { fill: currentColor; stroke: var(--panel); stroke-width: 4; }
.rn-place text { font: 800 38px var(--font-mono); fill: var(--text); paint-order: stroke; stroke: var(--panel); stroke-width: 8px; }
.rn-vrai circle { fill: none; stroke: var(--red); stroke-width: 9; }
.rn-vrai path { stroke: var(--red); stroke-width: 7; }
.rn-vrai text { font: 800 40px var(--font-mono); fill: var(--red); paint-order: stroke; stroke: var(--panel); stroke-width: 8px; }
.rn-curseur { fill: none; stroke: var(--accent); stroke-width: 7; stroke-dasharray: 12 8; }
.rn-moi circle { fill: var(--accent); stroke: var(--panel); stroke-width: 6; }
.rn-moi line { stroke: var(--accent); stroke-width: 8; stroke-linecap: round; }
.rn-cote { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rn-boussole { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rn-cadran { width: 150px; height: 150px; touch-action: none; cursor: grab; border-radius: 50%; }
.rn-cadran:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rn-c-fond { fill: var(--well); stroke: var(--border-strong); stroke-width: 1.5; }
.rn-c-gr { stroke: var(--text-dim); stroke-width: 1; }
.rn-c-cap { font: 700 10px var(--font-mono); fill: var(--text-dim); }
.rn-c-lobe { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.rn-c-boom { stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; }
.rn-c-el { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.rn-c-axe { fill: var(--text); }
.rn-tourne { display: flex; align-items: center; gap: 3px; margin: 0; flex-wrap: wrap; justify-content: center; }
.rn-tourne .btn { min-height: 34px; padding: 0 7px; font-size: 12px; }
.rn-tourne b { min-width: 3.4em; text-align: center; font-size: 15px; }
.rn-smetre { display: flex; align-items: center; gap: 8px; }
.rn-s-barre { flex: 1; height: 12px; border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.rn-s-barre span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--amber), var(--red)); transition: width .2s; }
.rn-smetre b { font-size: 12px; white-space: nowrap; }
.rn-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.rn-actions .btn { min-height: 36px; padding: 0 10px; font-size: 13px; }
.rn-modes, .rn-quel { display: flex; gap: 4px; flex-wrap: wrap; }
.rn-modes .btn, .rn-quel .btn { min-height: 34px; padding: 0 10px; font-size: 13px; }
.rn-modes .btn[aria-pressed="true"], .rn-quel .btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rn-quel i, .rn-releves i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.rn-releves { list-style: none; margin: 0; padding: 0; max-height: 120px; overflow-y: auto; font-size: 12px; display: grid; gap: 2px; }
.rn-actif { font-size: 13px; color: var(--text-dim); }
.rn-course { font-size: 12px; color: var(--text-dim); margin-left: auto; }
.rn-message { font-size: 13.5px; }
.rn-message .btn { margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .rn-s-barre span, [data-ac-aiguille] { transition: none; } }

/* ------------------------------------------------------------ « Décode la télémétrie » */
.tm-entete { margin: 0; font-size: 12.5px; color: var(--text-dim); }
.tm-entete .pill { font-family: var(--font-sans); font-size: 11px; }
.tm-trame { columns: 3 196px; column-gap: 10px; }
.tm-groupe { break-inside: avoid; margin: 0 0 8px; padding: 6px 8px; border-radius: var(--r-m); background: var(--well); border: 1px solid var(--border); }
.tm-groupe h4 { margin: 0 0 3px; font: 700 10.5px/1.2 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.tm-ligne { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "nom val courbe"; align-items: center; gap: 0 6px;
  min-height: 28px; padding: 1px 6px; margin: 1px 0; border: 1px solid transparent; border-radius: var(--r-s); background: none; color: var(--text); font: 13px var(--font-sans); text-align: left; cursor: pointer; }
.tm-ligne:hover:not(:disabled) { border-color: var(--border-strong); }
.tm-ligne:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tm-ligne[aria-pressed="true"] { background: color-mix(in srgb, var(--amber) 16%, transparent); border-color: var(--amber); }
.tm-ligne[aria-pressed="true"] .tm-nom::before { content: '⚑ '; color: var(--amber); }
.tm-ligne.cle { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.tm-ligne.faux { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.tm-ligne:disabled { cursor: default; }
.tm-nom { grid-area: nom; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-val { grid-area: val; font-size: 14px; white-space: nowrap; }
.tm-val small { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.tm-courbe { grid-area: courbe; width: 44px; height: 14px; }
.tm-courbe polyline { fill: none; stroke: var(--info); stroke-width: 1.6; stroke-linejoin: round; }
.tm-repere { display: block; font-size: 10px; line-height: 1.1; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.tm-consigne { margin: 0; font-size: 13px; color: var(--text-dim); }
.tm-choix .dx-carte { min-height: 46px; font-size: 14px; padding: 10px 10px 8px 26px; }
.tm-choix .dx-carte kbd { top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------------ « Sauve le QSO ! » */
.sq-ctx { margin: 0; font-size: 13px; color: var(--text-dim); }
.sq-ctx b { color: var(--text); }
.sq-ctx .pill { font-size: 11px; }
.sq-scene { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; align-items: stretch; }
.sq-journal { list-style: none; margin: 0; padding: 8px 10px; border-radius: var(--r-m); background: var(--well); border: 1px solid var(--border); height: 168px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.sq-journal li { padding: 3px 8px; border-radius: 10px; max-width: 92%; line-height: 1.35; animation: jeu-apparait .3s ease-out; }
.sq-journal .sq-moi { align-self: flex-end; background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.sq-journal .sq-lui { align-self: flex-start; background: var(--panel-2); }
.sq-journal li > b { font-size: 11.5px; color: var(--text-muted); margin-right: 4px; }
.sq-journal .sq-evt { align-self: center; max-width: 100%; font-size: 12.5px; color: var(--text-dim); background: none; text-align: center; }
.sq-journal .sq-evt.ok b { color: var(--green); } .sq-journal .sq-evt.non b { color: var(--red); }
.sq-tableau { display: grid; gap: 6px; align-content: start; padding: 8px 10px; border-radius: var(--r-m); background: var(--well); border: 1px solid var(--border); font-size: 12.5px; }
.sq-j { display: grid; grid-template-columns: 6.5em 1fr auto; align-items: center; gap: 6px; }
.sq-j > span:first-child { color: var(--text-muted); }
.sq-smetre { display: flex; gap: 2px; height: 14px; align-items: flex-end; }
.sq-smetre i { flex: 1; height: 100%; background: var(--panel-2); border-radius: 1px; }
.sq-smetre i.on { background: var(--green); }
.sq-smetre i.s9.on, .sq-smetre i.s10.on { background: var(--red); }
.sq-barre { height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.sq-barre span { display: block; height: 100%; width: 0; background: var(--info); transition: width .4s; }
.sq-barre.mauvais span { background: var(--red); } .sq-barre.moyen span { background: var(--amber); } .sq-barre.bon span { background: var(--green); }
.sq-gros { font-size: 16px; font-weight: 800; }
.bon.mono { color: var(--green); } .moyen.mono { color: var(--amber); } .mauvais.mono { color: var(--red); }
.sq-qualite { padding-top: 4px; border-top: 1px solid var(--border); }
.sq-incident { display: flex; flex-direction: column; gap: 8px; }
.sq-incident[hidden] { display: none; }
.sq-alerte { margin: 0; padding: 8px 10px; border-radius: var(--r-m); border: 1px solid var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); font-size: 14.5px; }
.sq-alerte b { color: var(--amber); }
.sq-choix .dx-carte { min-height: 48px; font-size: 13.5px; padding: 8px 10px 8px 26px; text-align: left; align-items: flex-start; }
.sq-choix .dx-carte kbd { top: 50%; transform: translateY(-50%); }
.sq-option.moyen { opacity: 1; border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--well)); }
.sq-lecon { display: block; margin-top: 4px; color: var(--text-dim); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .sq-journal li { animation: none; } .sq-barre span { transition: none; } }

/* ------------------------------------------------------------ one screen on a desktop: the rounds kept compact */
@media (min-width: 1100px) and (min-height: 640px) {
  body.at-page .dx-arene { padding: 12px 16px; }
  body.at-page .dx-accueil { padding: 4px 0; }
  body.at-page .dx-accueil .dx-illus { max-height: 150px; }
  body.at-page .tm-ligne { min-height: 26px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  body.at-page .sq-journal { height: 130px; }
  body.at-page .ac-ros, body.at-page .ac-smith { max-width: 190px; }
  body.at-page .tm-ligne { min-height: 24px; font-size: 12.5px; }
  body.at-page .tm-groupe { padding: 4px 8px; margin-bottom: 6px; }
  body.at-page .st-app-txt { display: none; }
}

/* ------------------------------------------------------------ narrower: stacked */
@media (max-width: 1280px) { .rn-scene, .sq-scene { grid-template-columns: minmax(0, 1fr) 230px; } .st-scene { grid-template-columns: minmax(0, 1fr) 210px; } }
@media (max-width: 760px) {
  .ac-scene, .st-scene, .rn-scene, .sq-scene { grid-template-columns: minmax(0, 1fr); }
  .rn-carte { max-height: none; }
  .rn-cote { display: grid; grid-template-columns: 1fr; }
  .sq-journal { height: 150px; }
  .tm-trame { columns: 2 160px; }
}
@media (max-width: 480px) {
  .ac-boutons { grid-template-columns: 1fr; }
  .ac-mesures { flex-direction: column; }
  .ac-ros { width: 100%; }
  .st-banc { grid-template-columns: 1fr 1fr; gap: 6px; }
  .at-parts li { grid-template-columns: 7em 1fr auto; }
  .dx-choix.sq-choix, .dx-choix.tm-choix { grid-template-columns: 1fr; }
}
/* Touch screens and phones: every control 44 px at least. */
@media (pointer: coarse), (max-width: 760px) {
  .at-partie .btn, .at-aide .btn, .at-accueil .btn, .ac-topo .btn, .ac-pas, .st-prise, .st-boutons .btn, .st-retire, .rn-tourne .btn, .rn-actions .btn, .rn-modes .btn, .rn-quel .btn,
  .tm-ligne, .at-aide-btn, .at-resume .btn { min-height: 44px; }
  .st-retire, .rn-tourne .btn { min-width: 44px; }
  .ac-curseur { min-height: 44px; }
}