#tycoon-root {
  --bg: #12151b;
  --panel: #1a1f28;
  --panel-2: #222835;
  --border: #2e3645;
  --text: #e6e9ef;
  --muted: #8b95a7;
  --accent: #fbbf24;
  --green: #4ade80;
  --red: #f87171;
}

#tycoon-root * {
  box-sizing: border-box;
}

/* La page elle-même ne scrolle pas : tout tient dans la fenêtre, seul le
   plateau de jeu (canvas + caméra interne) gère son propre défilement. */
body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Barre commune (css/games.css) au-dessus du cadre du jeu, aux couleurs de l'atelier */
.tycoon-jeu {
  --mg-jeu-largeur: 1204px;
  --mgb-fond: radial-gradient(120% 160% at 0% 0%, rgba(251, 191, 36, 0.18), transparent 55%),
    linear-gradient(120deg, #12151b, #222835);
  --mgb-texte: #e6e9ef;
  --mgb-doux: #8b95a7;
  --mgb-accent: #fbbf24;
  --mgb-titre: linear-gradient(100deg, #fde68a, #fbbf24 50%, #f59e0b);
  --mg-fs-fond: #12151b;
  --mg-bulle-fond: #1a1f28;
  flex: 1;
  min-height: 0;
  margin: 12px auto;
}

/* Cases de largeur fixe : les montants grandissent vite (k €, M €) */
.tycoon-jeu {
  --mg-stat-largeur: 8em;
}

.tycoon-jeu .ty-camions {
  min-width: 11em; /* deux camions (bois et métal) côte à côte */
}

.mg-stat b.money {
  color: #fbbf24;
}

#tycoon-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  width: 100%;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
}

/* ---------- Barre du haut ---------- */

/* largeur fixe : les cadres ne bougent pas quand les valeurs changent */

/* deux camions (bois + métal) côte à côte */

/* ---------- Mise en page ---------- */
.layout {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  max-width: 1180px;
  margin: 0 auto;
}

.board {
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas-wrap {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  /* hauteur donnée par le canvas (1080 × 600) : un aspect-ratio ici compterait
     la marge et la bordure, et le canvas déborderait sur le bord arrondi */
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
}

#game {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  outline: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Boutons de la barre du haut ---------- */

/* ---------- Plein écran ---------- */
/* Le jeu occupe toute la fenêtre ; la largeur du plateau est calculée en JS
   pour qu'il tienne en entier sous la barre du haut. */
.tycoon-jeu.mg-fs #tycoon-root {
  border-radius: 12px;
}
.tycoon-jeu.mg-fs .layout {
  width: 100%;
  max-width: none;
}

/* ---------- Aide ---------- */
/* Préfixées "tycoon-dialog" : "help"/"win" seuls entrent en collision avec
   des classes déjà définies dans le CSS partagé du site (games.css). */
.tycoon-dialog {
  /* Le reset global du site (margin: 0 sur *) écrase le centrage par défaut
     des <dialog> (margin: auto) : on le restaure explicitement ici. */
  margin: auto;
  max-width: 520px;
  width: calc(100% - 32px);
  padding: 20px 22px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.tycoon-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.tycoon-dialog h2 {
  margin: 0 0 12px;
  font-size: 1.1rem;
}
.tycoon-dialog ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.55;
}
.tycoon-dialog strong {
  color: var(--text);
}
.tycoon-dialog-win {
  text-align: center;
}
.tycoon-dialog-win h2 {
  font-size: 1.4rem;
}
.tycoon-dialog-win p {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.55;
}
.btn-close {
  margin-top: 16px;
  padding: 8px 18px;
  font: inherit;
  font-weight: 700;
  color: #0b1a10;
  background: var(--green);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

/* ---------- Mobile ---------- */
@media (max-width: 1000px) {
  .layout {
    padding: 12px;
  }
  
  
}

/* ---------- Débit des lignes ---------- */
.mg-stat .sub {
  font-size: 0.68rem;
  line-height: 1.2;
  min-height: 1.2em; /* ligne « dernier camion » réservée : la barre ne change pas de hauteur */
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.impact {
  font-size: 0.85rem;
}
.impact.up {
  color: var(--green);
  font-weight: 700;
}
.impact.muted {
  color: #fca5a5;
}
.impact.warn {
  color: var(--accent);
  font-weight: 700;
}

/* ---------- Infobulle des pastilles ---------- */
.tooltip {
  position: absolute;
  z-index: 5;
  width: 270px;
  padding: 10px 12px;
  background: rgba(17, 21, 28, 0.97);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-size: 0.82rem;
  line-height: 1.4;
  pointer-events: none;
}
.tooltip[hidden] {
  display: none;
}
.tip-title {
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 6px;
}
.tip-level {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 6px;
}
.tip-level i {
  width: 16px;
  height: 5px;
  border-radius: 3px;
  background: #2a3140;
}
.tip-level i.on {
  background: var(--accent);
}
.tip-level i.next {
  background: var(--green);
  opacity: 0.55;
}
.tip-level span {
  margin-left: 6px;
  font-size: 0.72rem;
  color: var(--muted);
}
.tip-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  font-variant-numeric: tabular-nums;
}
.tip-row span:first-child {
  color: var(--muted);
}
.tip-row b {
  color: var(--green);
}
.tip-text {
  margin-top: 6px;
  color: var(--muted);
}
.tip-note {
  margin-top: 6px;
}
.tip-cost {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-weight: 700;
  color: var(--red);
}
.tip-cost.ok {
  color: var(--green);
}

/* ---------- Tutoriel ---------- */
/* bulle jaune pointant vers l'objet à utiliser (ne bloque pas les clics,
   sauf sur le bouton « Passer le tuto ») */
.tuto {
  position: absolute;
  z-index: 4;
  width: 250px;
  padding: 9px 12px;
  color: #1c1917;
  background: var(--accent);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-size: 0.82rem;
  line-height: 1.4;
  pointer-events: none;
}
.tuto[hidden] {
  display: none;
}
.tuto::after {
  content: "";
  position: absolute;
  left: var(--ax, 50%);
  width: 12px;
  height: 12px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.tuto.below::after {
  top: -6px;
}
.tuto.above::after {
  bottom: -6px;
}
.tuto-step {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.tuto-title {
  margin: 1px 0 3px;
  font-size: 0.92rem;
  font-weight: 800;
}
.tuto-skip {
  display: block;
  margin: 6px 0 0 auto;
  padding: 2px 8px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1c1917;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  cursor: pointer;
  pointer-events: auto;
}
.tuto-skip:hover {
  background: rgba(0, 0, 0, 0.2);
}