/* Commandes de partie : trois boutons ronds en bas — Construire (gauche), Citadelle (centre, anneau de paie), Attaquer (droite) — et leurs roues.
   Remplace l'ancien dock (gros panneau). Unité `--gu` : cf. css/hud.css. Logique : ui/BuildWheel.js, ui/SendWheel.js, ui/Wheel.js (géométrie).
   Les cadres ronds viennent de la planche d'interface (assets/ui/rd-blank.webp, fabriqué par tools/slice-ui.mjs). */

/* zone transparente réservée en bas (Viewport l'observe : elle borne le terrain, le bouton du centre ne couvre jamais la Citadelle de l'île) */
.bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; height: calc(var(--gu) * 92 + var(--safe-bottom)); pointer-events: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- boutons principaux ---- */
.wheel { position: absolute; bottom: calc(var(--gu) * 6 + var(--safe-bottom)); width: calc(var(--gu) * 84); height: calc(var(--gu) * 84); --dir: 1; }
.wheel[data-side="left"] { left: calc(var(--gu) * 8); }
.wheel[data-side="right"] { right: calc(var(--gu) * 8); --dir: -1; }
.cit-wrap { position: absolute; left: 50%; bottom: calc(var(--gu) * 6 + var(--safe-bottom)); width: calc(var(--gu) * 66); height: calc(var(--gu) * 66); transform: translateX(-50%); }

.wheel-main {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; padding: 0; border: 0; border-radius: 50%; cursor: pointer; touch-action: manipulation; pointer-events: auto;
  background: url("../assets/ui/rd-blank.webp") center / 100% 100% no-repeat; color: #e8dcc0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--gu) * 1);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)); transition: transform 0.1s, filter 0.15s;
}
.wheel-main svg { width: calc(var(--gu) * 29); height: calc(var(--gu) * 29); fill: currentColor; filter: drop-shadow(0 1px 1px #000); }
.wm-label { font: 800 calc(var(--gu) * 9) / 1 var(--pn-serif, Georgia, serif); letter-spacing: 0.02em; color: #ffe9b0; text-shadow: 0 1px 2px #000; }
.wheel-main:active { transform: scale(0.94); }
.wheel-main:focus-visible { outline: 2px solid #ffd25e; outline-offset: 3px; }
@media (hover: hover) { .wheel-main:hover { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)) brightness(1.15); } }
.wheel.open .wheel-main { filter: drop-shadow(0 0 7px rgba(255, 170, 40, 0.95)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)) brightness(1.15); }
.wheel.open .wheel-main svg { color: #ffc23d; }

/* rappel de la tour choisie (pastille sur le bouton Construire) et compte à rebours d'ouverture (bouton Attaquer) */
.wm-chip { position: absolute; right: calc(var(--gu) * -4); top: calc(var(--gu) * -4); width: calc(var(--gu) * 24); height: calc(var(--gu) * 24); border-radius: 50%; border: calc(var(--gu) * 1.5) solid #ffd25e; background: #121a28 center / 82% no-repeat; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
.wm-chip[hidden], .wm-lock[hidden] { display: none; }
.wm-lock { position: absolute; right: calc(var(--gu) * -4); top: calc(var(--gu) * -4); min-width: calc(var(--gu) * 22); padding: calc(var(--gu) * 2) calc(var(--gu) * 4); border-radius: 99px; border: calc(var(--gu) * 1.5) solid #9a7a45; background: rgba(8, 12, 22, 0.95); color: #fff; font: 800 calc(var(--gu) * 9) / 1 system-ui, sans-serif; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- pastilles de l'éventail : posées sur le centre du bouton, projetées sur --x / --y (gu, vers l'intérieur / vers le haut) ---- */
.wheel-items, .wheel-tiers { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1; }
.wb, .wt {
  position: absolute; left: 0; top: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; touch-action: manipulation; -webkit-touch-callout: none;
  background: url("../assets/ui/rd-blank.webp") center / 100% 100% no-repeat; color: #f3ead2;
  transform: translate(-50%, -50%) scale(0.2); opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55));
  transition: transform 0.2s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.14s, filter 0.15s; transition-delay: 0s;
}
.wb { width: calc(var(--gu) * 50); height: calc(var(--gu) * 50); }
.wt { width: calc(var(--gu) * 36); height: calc(var(--gu) * 36); font: 900 calc(var(--gu) * 13) / 1 var(--pn-serif, Georgia, serif); color: #ffe9b0; text-shadow: 0 1px 2px #000; }
.wb[hidden], .wt[hidden] { display: none; }
.wheel.open .wb, .wheel.open .wt {
  transform: translate(calc(-50% + var(--x) * var(--dir) * var(--gu)), calc(-50% - var(--y) * var(--gu))) scale(1); opacity: 1; pointer-events: auto;
  transition-delay: calc(var(--i, 0) * 28ms);
}
.wb:focus-visible, .wt:focus-visible { outline: 2px solid #ffd25e; outline-offset: 2px; }
@media (hover: hover) { .wheel.open .wb:hover, .wheel.open .wt:hover { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)) brightness(1.2); } }
.wb img { position: absolute; left: 50%; top: 46%; width: 76%; height: 76%; object-fit: contain; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.wb:active { filter: drop-shadow(0 0 6px rgba(255, 190, 70, 1)) brightness(1.25); }
.wb.selected { filter: drop-shadow(0 0 6px rgba(255, 165, 40, 1)) brightness(1.25) saturate(1.3); }
.wb.poor { opacity: 0.6 !important; }
.wb.poor .wb-cost { color: #ff7b7b; }
.wb.boss { box-shadow: 0 0 0 calc(var(--gu) * 1.5) rgba(255, 210, 94, 0.55); }
.wheel.locked .wb { filter: grayscale(0.8) brightness(0.8); }

.wb-cost {
  position: absolute; left: 50%; bottom: calc(var(--gu) * -6); transform: translateX(-50%); display: inline-flex; align-items: center; gap: calc(var(--gu) * 2); padding: 0 calc(var(--gu) * 5);
  height: calc(var(--gu) * 13); border-radius: 99px; border: 1px solid #9a7a45; background: rgba(8, 12, 22, 0.94); color: #ffd25e; font: 800 calc(var(--gu) * 9.5) / 1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}
.wb-cost svg { width: calc(var(--gu) * 8.5); height: calc(var(--gu) * 8.5); color: #ffc93d; }
.wb-free { color: #9ad7ff; }
.wb-lock { display: none; position: absolute; inset: calc(var(--gu) * 3); border-radius: 50%; background: rgba(6, 10, 18, 0.92); place-items: center; align-content: center; gap: 1px; color: #d8cfae; pointer-events: none; }
.wb-lock svg { width: calc(var(--gu) * 15); height: calc(var(--gu) * 15); color: #ffd25e; }
.wb-lock i { font: 800 calc(var(--gu) * 7.5) / 1 system-ui, sans-serif; font-style: normal; }
.wb.locked { cursor: help; }
.wb.locked .wb-lock { display: grid; }
.wb.locked .wb-cost, .wb.locked img { visibility: hidden; }
.wt.on { filter: drop-shadow(0 0 6px rgba(80, 170, 255, 0.95)) brightness(1.25); color: #fff; }
.wheel:not([data-tier="1"]) { /* réservé : style propre aux lots 2 et 3 si besoin */ }

/* ---- bouton Citadelle (centre) : anneau de paie + pastille de secondes ---- */
.cit-main { gap: 0; }
.cit-main .cm-icon { width: calc(var(--gu) * 28); height: calc(var(--gu) * 28); }
#btnCitadel { --p: 0; }
.pay-ring { position: absolute; inset: calc(var(--gu) * -6); width: calc(100% + var(--gu) * 12); height: calc(100% + var(--gu) * 12); transform: rotate(-90deg); pointer-events: none; fill: none; filter: none; }
.pr-track { stroke: rgba(6, 10, 18, 0.7); stroke-width: 5; }
.pr-fill { stroke: #52bdff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); filter: drop-shadow(0 0 3px rgba(80, 180, 255, 0.9)); }
.pay-badge { position: absolute; right: calc(var(--gu) * -10); top: calc(var(--gu) * -8); min-width: calc(var(--gu) * 24); padding: calc(var(--gu) * 2.5) calc(var(--gu) * 5); border-radius: 99px; border: calc(var(--gu) * 1.5) solid #9a7a45; background: rgba(8, 12, 22, 0.95); color: #cfe9ff; font: 800 calc(var(--gu) * 9) / 1 system-ui, sans-serif; text-align: center; pointer-events: none; font-variant-numeric: tabular-nums; }
.pay-badge b { color: #fff; }
.cit-main.can { animation: cit-ready 1.4s ease-in-out infinite; }
.cit-main.can .cm-icon { color: #ffd25e; }
@keyframes cit-ready { 50% { filter: drop-shadow(0 0 9px rgba(255, 200, 70, 1)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)) brightness(1.25); } }

/* ---- cartes d'informations : au-dessus de la roue, du MÊME côté (tour à gauche, unité à droite) ---- */
.info-card, .cit-card {
  position: absolute; z-index: 3; pointer-events: none; color: #fff4d6;
  border: 3px solid #9a7a45; border-radius: calc(var(--gu) * 12);
  background: linear-gradient(rgba(10, 16, 30, 0.45), rgba(10, 16, 30, 0.62)), url("../assets/menu/stone.webp") center / 200px;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.3), 0 8px 22px rgba(0, 0, 0, 0.6);
}
.info-card[hidden], .cit-card[hidden] { display: none; }
.info-card { width: calc(var(--gu) * 156); padding: calc(var(--gu) * 8) calc(var(--gu) * 10) calc(var(--gu) * 9); animation: card-up 0.16s ease-out; }
@keyframes card-up { from { opacity: 0; transform: translateY(8px); } }
.info-build { left: 0; }
.info-send { right: 0; }
/* ouvertes : au-dessus de l'éventail ; refermées (tour choisie) : compacte, juste au-dessus du bouton */
.wheel .info-card { bottom: calc(100% + var(--gu) * 8); }
.wheel.open .info-card { bottom: calc(100% + var(--gu) * 170); }
.wheel:not(.open) .info-card .ic-blurb, .wheel:not(.open) .info-card .ic-role, .wheel:not(.open) .info-card .ic-tags { display: none; }
.info-card header { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--gu) * 6); margin-bottom: calc(var(--gu) * 3); }
.info-card header b { font: 800 calc(var(--gu) * 14) / 1.1 var(--pn-serif, Georgia, serif); color: #ffd25e; text-shadow: 0 2px 0 #4a3000; }
.ic-cost { display: inline-flex; align-items: center; gap: calc(var(--gu) * 2.5); font: 800 calc(var(--gu) * 11.5) / 1 system-ui, sans-serif; color: #ffd25e; white-space: nowrap; }
.ic-cost svg { width: calc(var(--gu) * 11); height: calc(var(--gu) * 11); color: #ffc93d; }
.ic-free { color: #9ad7ff; }
.ic-role { margin: 0 0 calc(var(--gu) * 3); font-size: calc(var(--gu) * 9); font-weight: 700; color: #c9bd9c; text-transform: uppercase; letter-spacing: 0.05em; }
.ic-rows { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--gu) * 1.5) calc(var(--gu) * 8); margin: 0; font-size: calc(var(--gu) * 10.5); font-variant-numeric: tabular-nums; }
.ic-rows dt { color: #c9bd9c; }
.ic-rows dd { margin: 0; text-align: right; font-weight: 800; }
.ic-rows .up { color: #7fe39a; }
.ic-tags { display: flex; flex-wrap: wrap; gap: calc(var(--gu) * 3); margin: calc(var(--gu) * 4) 0 0; }
.ic-tags .tag { font-style: normal; font-size: calc(var(--gu) * 8.5); font-weight: 800; line-height: 1; padding: calc(var(--gu) * 2) calc(var(--gu) * 4); border-radius: 99px; background: rgba(0, 0, 0, 0.5); }
.ic-tags .tag.weak { background: rgba(255, 90, 90, 0.5); }
.ic-tags .tag.res { background: rgba(110, 220, 140, 0.4); }
.ic-blurb { margin: calc(var(--gu) * 5) 0 0; font-size: calc(var(--gu) * 9); line-height: 1.3; color: #d8ccaa; }

/* ---- carte Citadelle : au-dessus du bouton du centre ---- */
.cit-card {
  left: 50%; bottom: calc(var(--gu) * 80 + var(--safe-bottom)); transform: translateX(-50%); width: min(calc(var(--gu) * 330), calc(100% - var(--gu) * 16)); pointer-events: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--gu) * 104); gap: calc(var(--gu) * 8); align-items: center; padding: calc(var(--gu) * 10) calc(var(--gu) * 12); animation: card-up 0.16s ease-out;
}
.cit-info { display: grid; gap: calc(var(--gu) * 4); min-width: 0; align-content: start; }
.cit-head { display: flex; align-items: baseline; gap: calc(var(--gu) * 8); flex-wrap: wrap; }
.cit-title { font: 900 calc(var(--gu) * 15) / 1 var(--pn-serif, Georgia, serif); color: #ffd25e; text-shadow: 0 2px 0 #4a3000; }
.cit-level { color: #ffe9b0; font-size: calc(var(--gu) * 10); font-weight: 800; }
.cit-note { margin: 0; color: #d8ccaa; font-size: calc(var(--gu) * 10.5); line-height: 1.3; }
.cit-row { display: flex; flex-wrap: wrap; gap: calc(var(--gu) * 3) calc(var(--gu) * 5); align-items: center; }
.cit-label { flex: 0 0 100%; font-size: calc(var(--gu) * 8); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #c9bd9c; }
.cit-chip { position: relative; display: inline-grid; place-items: center; width: calc(var(--gu) * 30); height: calc(var(--gu) * 30); border-radius: calc(var(--gu) * 8); background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(154, 122, 69, 0.7); }
.cit-chip img { width: calc(var(--gu) * 24); height: calc(var(--gu) * 24); object-fit: contain; }
.cit-chip i { position: absolute; right: -3px; bottom: -3px; padding: 0 4px; border-radius: 6px; background: #1f6b3a; color: #dff8e6; font-size: calc(var(--gu) * 8.5); font-style: normal; font-weight: 800; line-height: 1.4; }
.cit-up {
  position: relative; align-self: center; height: calc(var(--gu) * 54); padding: 0 calc(var(--gu) * 8); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(var(--gu) * 2);
  border: 0; background: url("../assets/ui/panel-green.webp") center / 100% 100% no-repeat; color: #fff; font: 800 calc(var(--gu) * 12) / 1.15 var(--pn-serif, Georgia, serif); text-shadow: 0 1px 0 #0d3a14, 0 0 3px #0d3a14;
  cursor: pointer; touch-action: manipulation; transition: transform 0.08s, filter 0.15s; min-height: 0;
}
.cit-up:active { transform: scale(0.96); }
.cit-up .l1, .cit-up .l2 { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--gu) * 4); }
.cit-up .l1 svg { width: calc(var(--gu) * 13); height: calc(var(--gu) * 13); }
.cit-up .l2 { font-size: calc(var(--gu) * 13); color: #ffe08a; }
.cit-up .l2 svg { width: calc(var(--gu) * 12); height: calc(var(--gu) * 12); }
.cit-up.poor { filter: grayscale(0.55) brightness(0.8); }
.cit-up:disabled { filter: grayscale(0.8) brightness(0.6); cursor: default; }

/* ---- menu de partie (toucher le chrono) ---- */
.clock { cursor: pointer; touch-action: manipulation; }
.pause-list { display: grid; gap: 8px; }
.pause-list .dlg-btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .wb, .wt, .info-card, .cit-card { transition: none; animation: none; }
  .cit-main.can { animation: none; }
}

/* spécificité : l'anneau de paie ne doit pas hériter des règles des pictogrammes du bouton */
.wheel-main .pay-ring { position: absolute; left: calc(var(--gu) * -6); top: calc(var(--gu) * -6); width: calc(100% + var(--gu) * 12); height: calc(100% + var(--gu) * 12); fill: none; filter: none; }
.wheel-main .cm-icon { width: calc(var(--gu) * 28); height: calc(var(--gu) * 28); }
.pr-fill { stroke-linecap: butt; }

/* secondes de la paie : DANS le bouton, sous le château (rien ne déborde sur l'éventail du côté opposé) */
.cit-main { gap: calc(var(--gu) * 1); }
.cit-main .cm-icon { width: calc(var(--gu) * 27); height: calc(var(--gu) * 27); }
.pay-badge { position: static; min-width: 0; padding: 0; border: 0; background: none; font-size: calc(var(--gu) * 11); color: #cfe9ff; text-shadow: 0 1px 2px #000; }
.pay-badge b { color: #fff; }
.wheel-main .cm-icon { width: calc(var(--gu) * 27); height: calc(var(--gu) * 27); }

/* mode construction : le bouton devient une croix rouge « Annuler » (éventail replié, un bâtiment est choisi) */
.wm-x { display: none; }
.wheel.cancel .wm-ico { display: none; }
.wheel.cancel .wm-x { display: block; color: #ff4a42; filter: drop-shadow(0 0 4px rgba(255, 60, 50, 0.8)) drop-shadow(0 1px 1px #000); }
.wheel.cancel .wm-label { color: #ffb0a8; }
.wheel.cancel.open .wheel-main { filter: drop-shadow(0 0 7px rgba(255, 70, 55, 0.9)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)); } /* éventail rouvert après une pose : la croix reste rouge (pas la lueur dorée) */
.wheel.cancel.open .wheel-main .wm-x { color: #ff4a42; }
.wheel.cancel .wheel-main { background-image: radial-gradient(circle at 50% 38%, rgba(190, 40, 34, 0.55), rgba(90, 14, 14, 0.55) 70%), url("../assets/ui/rd-blank.webp"); background-size: 78% 78%, 100% 100%; background-position: center, center; background-repeat: no-repeat; }
.wheel.cancel .wm-chip { display: none; }

.wheel-build:not(.open) .info-card { display: none; } /* éventail replié : pas de carte */

/* le bouton Citadelle garde sa taille (28 gu d'icône) : seuls Construire / Attaquer grandissent */
.wheel-main.cit-main svg.cm-icon, .wheel-main .cm-icon { width: calc(var(--gu) * 27); height: calc(var(--gu) * 27); }

/* revenu gagné (unités) : pastille verte en haut à droite de la bulle */
.wb-inc { position: absolute; right: calc(var(--gu) * -7); top: calc(var(--gu) * -3); display: inline-flex; align-items: center; gap: calc(var(--gu) * 1.5); height: calc(var(--gu) * 13); padding: 0 calc(var(--gu) * 4); border-radius: 99px; border: 1px solid #3f8f5a; background: rgba(8, 18, 14, 0.94); color: #7fe39a; font: 800 calc(var(--gu) * 9) / 1 system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.wb-inc svg { width: calc(var(--gu) * 8); height: calc(var(--gu) * 8); }
.wb-inc b { font-weight: 800; }
.wb.poor .wb-inc { opacity: 0.8; }

/* libellés « Construire » / « Attaquer » / « Annuler » : plus petits, entièrement DANS le disque du bouton */
.wheel-main:not(.cit-main) .wm-label { font-size: calc(var(--gu) * 9); letter-spacing: 0; max-width: 78%; white-space: nowrap; }
.wheel-main:not(.cit-main) svg { width: calc(var(--gu) * 34); height: calc(var(--gu) * 34); }