/* Drapeaux : le style de table (d'après Chromo), chargé après table.css. Préfixe drx-.
   Un tapis d'ardoise bleu-vert, comme une carte de géographie au mur de la classe ; le drapeau hissé au mât
   au milieu, qui flotte, sous une barre de temps jaune signal ; les quatre pays dans le plateau de verre.
   La table reste sombre en thème clair : c'est l'objet du jeu.
   Les sélecteurs passent par html[data-game] : la tuile .gcard[data-game="drapeaux"] du salon n'est pas touchée. */
html[data-game="drapeaux"], html[data-theme="light"][data-game="drapeaux"] {
  --bg: oklch(0.19 0.03 225); --surface: oklch(0.25 0.035 222); --surface-2: oklch(0.3 0.04 220); --line: oklch(0.42 0.04 215 / .6);
  --ink: oklch(0.97 0.01 95); --ink-2: oklch(0.87 0.025 200); --mute: oklch(0.79 0.03 205);
  --acc: oklch(0.88 0.16 96); --acc-soft: oklch(0.92 0.1 96); --on-acc: oklch(0.26 0.06 90); --neg: oklch(0.66 0.2 27); --pos: oklch(0.8 0.15 152);
  --glass-tint: oklch(0.21 0.03 225 / .5); --glass-tint-thick: oklch(0.18 0.03 228 / .82);
  --glass-hi: rgba(255, 255, 255, .3); --glass-rim: rgba(255, 255, 255, .14); --glass-edge: rgba(0, 0, 0, .35);
  --glass-ink: var(--ink); --glass-ink-2: var(--ink-2); --glass-field: rgba(255, 255, 255, .1);
  --felt-hi: oklch(0.44 0.06 205); --felt-mid: oklch(0.29 0.05 215); --felt-lo: oklch(0.14 0.03 230);
}
/* les couleurs du mât et des réponses valent partout : la carte du salon et les règles les dessinent aussi */
:root { --drx-pole: oklch(0.82 0.05 85); --drx-pole-2: oklch(0.55 0.05 70); --drx-good: oklch(0.72 0.16 150); --drx-bad: oklch(0.6 0.2 27); }
#s-drapeaux { padding-bottom: 0; }
#s-drapeaux button.tb-chip { min-height: 44px; }
#s-drapeaux .tb-chip b { color: var(--acc); }
[data-game="drapeaux"] #tb-sheet :is(.tb-rows, .tb-log) { padding-left: 0; margin: 0; }

/* la table : sur téléphone elle prend la place libre, le drapeau reste au milieu */
.drx-table { position: relative; display: flex; flex-direction: column; }
@media (max-width: 1099px) { #dr-main > .drx-table { flex: 1; } #dr-main > .drx-table > .drx-slot { flex: 1; display: flex; align-items: center; justify-content: center; } }
.drx-table .tb-opps { height: 112px; }
.tb-opp.drx-out .tb-av { opacity: .5; filter: grayscale(.8); }
.tb-opp.drx-win .tb-av { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 3px var(--acc), 0 0 24px 3px color-mix(in oklab, var(--acc) 60%, transparent), 0 8px 18px rgba(0, 0, 0, .4); }
.tb-opp.drx-win .tb-timer { display: none; }

/* le drapeau au mât : un tissu qui flotte, un voile pendant le compte à rebours, la barre de temps dessous */
.drx-stage { --w: min(76vw, 318px); position: relative; display: grid; grid-template-columns: auto var(--w); grid-template-rows: auto auto; column-gap: 0; row-gap: 14px; justify-content: center; padding: 4px 14px 2px 0; }
.drx-pole { grid-row: 1 / 3; position: relative; width: 14px; }
.drx-pole::before { content: ""; position: absolute; left: 4px; top: -8px; width: 6px; bottom: -6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--drx-pole-2), var(--drx-pole) 45%, oklch(0.95 0.03 85) 55%, var(--drx-pole-2)); box-shadow: 2px 4px 8px rgba(0, 0, 0, .35); }
.drx-pole i { position: absolute; left: 0; top: -16px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, oklch(0.97 0.05 90), var(--acc) 50%, oklch(0.6 0.12 80)); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.drx-flag { position: relative; margin: 0; width: var(--w); aspect-ratio: 4 / 3; border-radius: 3px 8px 8px 3px; overflow: hidden; transform-origin: 0 50%;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 18px 34px -10px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .3); background: oklch(0.32 0.03 220); }
.drx-flag img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
/* les plis du tissu, par-dessus l'image */
.drx-flag::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .22) 18%, rgba(0, 0, 0, .14) 38%, rgba(255, 255, 255, .28) 58%, rgba(0, 0, 0, .18) 80%, rgba(255, 255, 255, .12)); }
.ph-play .drx-flag, .ph-reveal .drx-flag { animation: drx-wave 3.6s ease-in-out infinite; }
@keyframes drx-wave { 0%, 100% { transform: perspective(700px) rotateY(0deg) skewY(0deg); } 50% { transform: perspective(700px) rotateY(-7deg) skewY(-1.2deg); } }
.drx-veil { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  background: radial-gradient(70% 70% at 50% 45%, oklch(0.36 0.04 220), oklch(0.2 0.03 225)); transition: opacity .18s ease-out; }
.drx-veil b { font: 800 84px/1 var(--font); letter-spacing: -.04em; color: var(--acc); font-variant-numeric: tabular-nums; text-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
.drx-stage:not(.ph-ready) .drx-veil { opacity: 0; pointer-events: none; }
.drx-time { grid-column: 2; display: flex; align-items: center; gap: 10px; }
.drx-track { position: relative; flex: 1; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.drx-bar { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; background: linear-gradient(90deg, oklch(0.8 0.15 90), var(--acc)); }
.drx-stage.late .drx-bar { background: var(--neg); }
.drx-sec { min-width: 44px; text-align: right; font: 750 22px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.drx-stage.late .drx-sec { color: oklch(0.8 0.14 30); }
.drx-stage.ph-reveal .drx-bar, .drx-stage.ph-over .drx-bar { opacity: .35; }
.drx-stage.won .drx-sec { color: var(--acc); }
#dr-main:has(.drx-rank:not([hidden])) .drx-slot { display: none !important; }

/* les quatre pays : de grands boutons, deux par deux */
.drx-optslot { margin-top: 8px; }
.drx-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drx-opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 8px 12px; border: 0; border-radius: 18px; cursor: pointer;
  font: 650 16px/1.2 var(--font); color: var(--ink); text-align: center; text-wrap: balance;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 .5px var(--tb-rim); transition: opacity .15s ease-out, background-color .15s ease-out; }
.drx-opt small { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.drx-opts:not(.on) .drx-opt { background: rgba(255, 255, 255, .05); }
.drx-opt:disabled { cursor: default; opacity: .55; }
.drx-opts.wait .drx-opt:not(.mine) { opacity: .45; }
.drx-opt.mine { box-shadow: inset 0 0 0 2px var(--acc); }
.drx-opt.good { opacity: 1; background: color-mix(in oklab, var(--drx-good) 78%, black); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 2px var(--drx-good), 0 0 22px -2px color-mix(in oklab, var(--drx-good) 70%, transparent); }
.drx-opt.good small { color: oklch(0.95 0.04 150); }
.drx-opt.bad { opacity: 1; background: color-mix(in oklab, var(--drx-bad) 45%, oklch(0.2 0.03 225)); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--drx-bad) 80%, white 10%); }
.drx-opt.bad small { color: oklch(0.9 0.05 30); }
.drx-mark { position: absolute; top: 6px; right: 10px; font: 800 15px/1 var(--font); font-style: normal; }
.drx-tray .tb-tray-top span:last-child { text-align: right; }
.drx-tray .tb-acts[hidden] { display: none; }

/* fin de partie, colonne de droite, drapeaux passés */
#dr-main > .drx-side { display: none; }
.drx-rank { padding: 12px 16px 14px; border-radius: 22px; background: var(--tb-glass); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--tb-hi), inset 0 0 0 .5px var(--tb-rim), 0 10px 30px rgba(0, 0, 0, .25); }
.drx-rank[hidden] { display: none; }
.drx-rank .mj-side-title { margin: 0 0 2px; }
.drx-rank .tb-acts { margin-top: 10px; }
.drx-rank .note { margin: 6px 0 0; color: var(--ink-2); }
.mj-side-title.drx-sub { margin-top: 14px; }
.drx-past { list-style: none; margin: 0; padding: 0; }
.drx-past li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 5px 2px; border-top: .5px solid rgba(255, 255, 255, .1); }
.drx-past li:first-child { border-top: 0; }
.drx-past img { width: 40px; height: 30px; flex: none; border-radius: 4px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 0 0 .5px rgba(255, 255, 255, .2); }
.drx-past span { min-width: 0; }
.drx-past b { display: block; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drx-past small { display: block; font-size: 13px; color: var(--ink-2); }

@media (max-width: 360px) { .drx-opt { min-height: 58px; font-size: 15px; } .drx-veil b { font-size: 68px; } }
/* petits écrans en hauteur : le drapeau rétrécit pour que les quatre pays restent visibles */
@media (max-width: 1099px) and (max-height: 760px) { .drx-stage { --w: min(66vw, 260px); } .drx-table .tb-opps { height: 100px; } }

/* PC : le drapeau en grand au centre, les scores et les drapeaux passés à droite */
@media (min-width: 1100px) {
  #dr-main.desk-split > .desk-side > .drx-side { display: block; }
  #s-drapeaux .drx-stage { --w: clamp(260px, calc((100dvh / var(--z, 1) - 560px) * 4 / 3), 440px); margin: 4px auto 0; }
  #s-drapeaux .drx-table .tb-opps { height: 104px; }
  #s-drapeaux .tb-tray { max-width: 640px; width: 100%; margin: auto auto 0; border-radius: 30px 30px 0 0; }
  #s-drapeaux .drx-opt { min-height: 68px; font-size: 17px; }
  #s-drapeaux .drx-rank { max-width: 640px; width: 100%; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .ph-play .drx-flag, .ph-reveal .drx-flag { animation: none; } .drx-veil, .drx-opt { transition: none; } }

/* le dessin de la carte du salon (si l'icône 3D manque) : un fanion au mât */
.drx-art { position: relative; display: block; width: 54px; height: 54px; }
.drx-art::before { content: ""; position: absolute; left: 10px; top: 5px; bottom: 4px; width: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--drx-pole-2), var(--drx-pole)); }
.drx-art i { position: absolute; left: 14px; top: 8px; width: 32px; height: 24px; border-radius: 2px 4px 4px 2px; overflow: hidden; transform: skewY(-6deg); transform-origin: 0 50%;
  background: linear-gradient(90deg, oklch(0.5 0.16 255) 0 33.3%, oklch(0.96 0.01 95) 33.3% 66.6%, oklch(0.6 0.21 27) 66.6%); box-shadow: 0 3px 6px rgba(0, 0, 0, .3); }
.drx-art i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(255, 255, 255, .25) 40%, rgba(0, 0, 0, .15) 75%); }
.drx-art b { position: absolute; left: 7px; top: 1px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, oklch(0.97 0.05 90), oklch(0.85 0.15 92) 50%, oklch(0.6 0.12 80)); }