/* Squad Surge — styles de l'interface. 1em = 20 px logiques (la taille suit l'échelle du jeu via --u). */
:root {
  --u: 1;
  --uz: 1;
  --oy: 0px;
  --colw: 540px;
  --ink: #0b1530;
  --yellow: #ffd23f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #3e9b4f;
  color: #fff;
  font-family: LilitaOne, 'Arial Black', 'Segoe UI', sans-serif;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#stage { position: fixed; inset: 0; }
#game { position: absolute; inset: 0; display: block; }
#hud { position: absolute; inset: 0; display: block; pointer-events: none; }
#ui { position: absolute; inset: 0; pointer-events: none; font-size: calc(var(--uz) * 20px); }
#ui .col { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--colw); max-width: 100%; transform: translateX(-50%); }

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  padding: 1em 0.8em calc(1.2em + env(safe-area-inset-bottom));
  animation: fade-in 0.25s ease-out;
}
.screen button, .screen .panel { pointer-events: auto; }
.screen.dim { background: rgba(6, 10, 24, 0.62); pointer-events: auto; }
.screen.center { justify-content: center; }
.screen.hud { padding: 0; animation: none; }
.spacer { flex: 1; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Boutons ---------- */
.btn {
  font: inherit;
  font-size: 1.25em;
  color: #fff;
  border: 0;
  border-radius: 0.75em;
  padding: 0.55em 1.1em;
  margin: 0.32em 0;
  background: linear-gradient(#ffd54a, #ff9f1a);
  box-shadow: 0 0.22em 0 #b45f00, 0 0.45em 0.9em rgba(0, 0, 0, 0.35);
  text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  transition: transform 0.06s, filter 0.15s;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(0.16em); box-shadow: 0 0.06em 0 #b45f00, 0 0.2em 0.5em rgba(0, 0, 0, 0.3); }
.btn.green { background: linear-gradient(#72f095, #23b04e); box-shadow: 0 0.22em 0 #137a33, 0 0.45em 0.9em rgba(0, 0, 0, 0.35); }
.btn.blue { background: linear-gradient(#63b6ff, #2a6fe6); box-shadow: 0 0.22em 0 #18439a, 0 0.45em 0.9em rgba(0, 0, 0, 0.35); }
.btn.grey { background: linear-gradient(#7d8aa6, #4e5a75); box-shadow: 0 0.22em 0 #2c344a, 0 0.45em 0.9em rgba(0, 0, 0, 0.35); }
.btn.red { background: linear-gradient(#ff7b7b, #e23b3b); box-shadow: 0 0.22em 0 #8f1b1b, 0 0.45em 0.9em rgba(0, 0, 0, 0.35); }
.btn.big { font-size: 1.55em; }
.btn.wide { width: 100%; }
.btn[disabled] { filter: grayscale(0.85) brightness(0.75); cursor: default; }
.btn.off { filter: grayscale(0.6) brightness(0.8); }

.icon-btn {
  font: inherit;
  width: 2.3em;
  height: 2.3em;
  border: 0;
  border-radius: 0.7em;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(10, 18, 40, 0.6);
  box-shadow: inset 0 0 0 0.12em rgba(255, 255, 255, 0.25);
  cursor: pointer;
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn.lang { font-size: 1em; letter-spacing: 0.04em; }
svg.i { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.icon-btn svg.i { width: 1.3em; height: 1.3em; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 1em;
  padding: 0.12em 0.55em 0.12em 0.3em;
  font-size: 0.85em;
  color: #ffe28a;
}
.pill.big { font-size: 1.1em; background: rgba(0, 0, 0, 0.45); }

/* ---------- Accueil ---------- */
.top-right { position: absolute; top: 0.8em; right: 0.8em; display: flex; gap: 0.5em; }
.ready .logo { margin-top: 3.2em; display: flex; flex-direction: column; align-items: center; line-height: 0.92; transform: rotate(-4deg); animation: logo-bob 3s ease-in-out infinite; }
.ready .logo span {
  font-size: 4.2em;
  color: var(--yellow);
  text-shadow:
    0 0.06em 0 #b45f00,
    0.05em 0.05em 0 var(--ink), -0.05em 0.05em 0 var(--ink), 0.05em -0.05em 0 var(--ink), -0.05em -0.05em 0 var(--ink),
    0 0.07em 0 var(--ink), 0 -0.07em 0 var(--ink), 0.07em 0 0 var(--ink), -0.07em 0 0 var(--ink),
    0 0.16em 0.2em rgba(0, 0, 0, 0.45);
}
.ready .logo .l2 { color: #7ff3ff; font-size: 4.6em; }
@keyframes logo-bob { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-0.25em); } }
.tagline { margin-top: 0.9em; font-size: 1.05em; text-shadow: 0 0.1em 0 var(--ink), 0 0 0.4em rgba(0, 0, 0, 0.6); text-align: center; }
.best-pill { margin-top: 0.7em; background: rgba(8, 14, 28, 0.65); border-radius: 1em; padding: 0.3em 0.9em; font-size: 1em; color: #ffe28a; }
.swipe { position: absolute; left: 0; right: 0; top: calc(var(--oy) + var(--u) * 834px); display: flex; flex-direction: column; align-items: center; }
.swipe .track { position: relative; width: 9em; height: 2.6em; }
.swipe .track::before { content: ''; position: absolute; left: 0.6em; right: 0.6em; top: 50%; height: 0.32em; border-radius: 1em; background: rgba(255, 255, 255, 0.35); transform: translateY(-50%); }
.swipe .finger {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.6em;
  height: 2.6em;
  margin-left: -1.3em;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffffff, #dfe8ff 60%, #b9c9f0);
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.35), 0 0 0 0.2em rgba(255, 255, 255, 0.35);
  animation: swipe 1.6s ease-in-out infinite;
}
@keyframes swipe { 0%, 100% { transform: translateX(-3.2em); } 50% { transform: translateX(3.2em); } }
.swipe-label { margin-top: 0.1em; font-size: 1.4em; text-shadow: 0 0.1em 0 var(--ink), 0 0 0.5em rgba(0, 0, 0, 0.6); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.55; } }
.bottom { width: 100%; display: flex; justify-content: center; }
.ready .shop-cta { position: absolute; left: 0; right: 0; top: calc(var(--oy) + var(--u) * 560px); }

/* ---------- En jeu ---------- */
.pause-btn { position: absolute; top: 0.7em; left: 0.7em; pointer-events: auto; }

/* ---------- Panneaux ---------- */
.panel {
  width: min(21em, 92%);
  background: linear-gradient(#26365f, #172242);
  border-radius: 1.2em;
  padding: 1.2em 1.1em 1em;
  box-shadow: 0 0 0 0.18em rgba(255, 255, 255, 0.16), 0 0.6em 0 #0b1023, 0 1.2em 2em rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: pop-in 0.25s ease-out;
}
.title { font-size: 1.9em; text-align: center; margin-bottom: 0.4em; text-shadow: 0 0.08em 0 var(--ink); }
.title.red { color: #ff7b7b; font-size: 1.55em; }
.title.glow { font-size: 2.1em; color: var(--yellow); text-shadow: 0 0.08em 0 #b45f00, 0 0 0.6em rgba(255, 210, 63, 0.6); }
.subtitle { font-size: 1.3em; margin: 0.3em 0 0.5em; }

/* Bonus */
.perk-screen .cards { display: flex; gap: 0.6em; justify-content: center; width: 100%; padding: 0 0.2em; }
.card {
  font: inherit;
  color: #fff;
  flex: 1;
  max-width: 8.2em;
  min-height: 12em;
  border: 0;
  border-radius: 1em;
  padding: 0.9em 0.45em 0.8em;
  background: linear-gradient(#34477a, #1d2850);
  box-shadow: 0 0 0 0.15em rgba(255, 255, 255, 0.22), 0 0.4em 0 #0b1023, 0 0.8em 1.4em rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  cursor: pointer;
  animation: pop-in 0.3s ease-out backwards;
  transition: transform 0.1s;
}
.card:nth-child(2) { animation-delay: 0.07s; }
.card:nth-child(3) { animation-delay: 0.14s; }
.card:hover { transform: translateY(-0.25em); box-shadow: 0 0 0 0.18em var(--yellow), 0 0.4em 0 #0b1023, 0 0.8em 1.4em rgba(0, 0, 0, 0.4); }
.card:active { transform: scale(0.97); }
.card-ic { width: 3.4em; height: 3.4em; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: block; }
.card-name { font-size: 1.05em; text-align: center; line-height: 1.1; }
.card-desc { font-size: 0.78em; text-align: center; color: #c9d6ff; line-height: 1.2; font-family: 'Segoe UI', system-ui, sans-serif; font-weight: 700; }
.ic-canvas { width: 100%; height: 100%; display: block; }

/* Reprise */
.ring { position: relative; width: 5.4em; height: 5.4em; margin: 0.2em 0 0.1em; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.15); stroke-width: 8; }
.ring-fg { fill: none; stroke: var(--yellow); stroke-width: 8; stroke-linecap: round; }
.ring-n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.2em; }

/* Fin de partie */
.go .reached-label { font-size: 1em; color: #c9d6ff; margin-top: 0.1em; }
.go .reached { font-size: 4.4em; line-height: 1; color: var(--yellow); text-shadow: 0 0.06em 0 #b45f00, 0 0.12em 0.3em rgba(0, 0, 0, 0.4); }
.new-best { margin: 0.2em 0 0.3em; background: linear-gradient(#ff7b7b, #e23b3b); padding: 0.2em 0.8em; border-radius: 1em; font-size: 1.05em; animation: pop-in 0.4s ease-out, blink 1.2s 0.4s ease-in-out infinite; }
.best-small { margin: 0.2em 0 0.3em; color: #c9d6ff; font-size: 0.95em; }
.stats { width: 100%; display: flex; gap: 0.5em; margin: 0.3em 0 0.4em; }
.stats div { flex: 1; background: rgba(0, 0, 0, 0.22); border-radius: 0.7em; padding: 0.35em 0.4em; display: flex; flex-direction: column; align-items: center; }
.stats span { font-size: 0.72em; color: #c9d6ff; font-family: 'Segoe UI', system-ui, sans-serif; font-weight: 700; }
.stats b { font-size: 1.3em; font-weight: normal; }
.earned { display: flex; align-items: center; gap: 0.3em; font-size: 2em; color: #ffe28a; margin: 0.1em 0; }
.earned svg.i { width: 1em; height: 1em; }
.dbl-slot { min-height: 3em; display: flex; align-items: center; }
.doubled { color: #72f095; font-size: 1.2em; }

/* Boutique */
.shop-screen { padding-top: 0.8em; }
.shop-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.shop-head .title { margin: 0; font-size: 1.7em; }
.shop-sub { margin: 0.35em 0 0.5em; font-size: 0.82em; color: #c9d6ff; font-family: 'Segoe UI', system-ui, sans-serif; font-weight: 700; text-align: center; }
.shop-list { width: 100%; flex: 1; overflow-y: auto; pointer-events: auto; touch-action: pan-y; padding: 0 0.1em; }
.shop-item {
  display: flex;
  align-items: center;
  gap: 0.6em;
  background: linear-gradient(#2a3b66, #1b2648);
  border-radius: 0.9em;
  padding: 0.55em 0.6em;
  margin: 0 0 0.55em;
  box-shadow: 0 0 0 0.12em rgba(255, 255, 255, 0.14), 0 0.25em 0 #0b1023;
}
.shop-ic { width: 2.8em; height: 2.8em; flex: none; border-radius: 0.7em; background: rgba(255, 255, 255, 0.08); display: block; }
.shop-txt { flex: 1; min-width: 0; }
.shop-name { font-size: 1.1em; }
.shop-name .lvl { font-size: 0.75em; color: #9fb3e8; margin-left: 0.25em; }
.shop-desc { font-size: 0.78em; color: #c9d6ff; font-family: 'Segoe UI', system-ui, sans-serif; font-weight: 700; }
.shop-desc b { color: #fff; }
.shop-desc .next { color: #72f095; }
.btn.buy { font-size: 1em; margin: 0; padding: 0.5em 0.7em; min-width: 5.2em; }
.btn.buy svg.i { width: 1em; height: 1em; }


/* Messages */
.toast {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  background: rgba(8, 14, 28, 0.92);
  color: #fff;
  padding: 0.6em 1em;
  border-radius: 0.8em;
  font-size: 1em;
  box-shadow: 0 0 0 0.12em rgba(255, 255, 255, 0.2);
  z-index: 60;
  transition: opacity 0.4s;
  white-space: nowrap;
}
.toast.out { opacity: 0; }

.debug { position: fixed; left: 4px; bottom: 4px; z-index: 99; font: 12px/1.3 monospace; color: #0f0; background: rgba(0, 0, 0, 0.7); padding: 3px 6px; border-radius: 4px; pointer-events: none; }

/* Écran de chargement : voir index.html (styles en ligne, affichés avant ce fichier) */

/* Mode vidéo : pas de bouton ni d'information de débogage à l'image */
body.video .pause-btn, body.video .debug { display: none !important; }

/* ---------- Pubs récompensées : jamais vertes, icône 🎬, toujours à côté d'un bouton normal de même taille ---------- */
.btn.ad { background: linear-gradient(#b98bff, #7440e8); box-shadow: 0 0.22em 0 #45209c, 0 0.45em 0.9em rgba(0, 0, 0, 0.35); }
.btn .clap { font-size: 1.1em; line-height: 1; filter: drop-shadow(0 0.06em 0 rgba(0, 0, 0, 0.4)); }
.pair { width: 100%; display: flex; gap: 0.5em; margin: 0.32em 0; }
.pair > .btn { flex: 1 1 0; min-width: 0; margin: 0; padding-left: 0.4em; padding-right: 0.4em; }
.btn.small { font-size: 0.95em; padding: 0.45em 0.8em; margin: 0; }
.btn.small svg.i { width: 1.1em; height: 1.1em; }
.btn .lock { font-size: 0.8em; opacity: 0.9; }

/* ---------- Écran de niveau ---------- */
.coins-tl { position: absolute; top: 0.8em; left: 0.8em; }
.lv-head { margin-top: 4.2em; display: flex; flex-direction: column; align-items: center; }
.lv-kicker { font-size: 1.05em; color: #ffe28a; text-shadow: 0 0.08em 0 var(--ink), 0 0 0.4em rgba(0, 0, 0, 0.6); }
.lv-kicker.hot { color: #ff7b7b; animation: blink 1.2s ease-in-out infinite; }
.lv-title { font-size: 3.6em; line-height: 1.05; text-shadow: 0 0.08em 0 var(--ink), 0 0 0.45em rgba(0, 0, 0, 0.55); animation: pop-in 0.3s ease-out; }
.lv-path { display: flex; gap: 0.55em; margin-top: 0.45em; align-items: center; }
.lv-path i { width: 0.85em; height: 0.85em; border-radius: 50%; background: rgba(255, 255, 255, 0.35); box-shadow: 0 0.08em 0 var(--ink); }
.lv-path i.done { background: #72f095; }
.lv-path i.boss { border-radius: 0.2em; background: #ff7b7b; transform: rotate(45deg); }
.lv-path i.cur { background: var(--yellow); transform: scale(1.4); }
.lv-path i.boss.cur { transform: rotate(45deg) scale(1.4); }
.upg-row { position: absolute; left: 0.7em; right: 0.7em; top: calc(var(--oy) + var(--u) * 360px); display: flex; gap: 0.5em; }
.upg {
  flex: 1 1 0; min-width: 0; font: inherit; color: #fff; border: 0; border-radius: 0.9em; padding: 0.55em 0.25em 0.6em;
  background: linear-gradient(#2c3d6b, #1a2547); box-shadow: 0 0 0 0.14em rgba(255, 255, 255, 0.16), 0 0.3em 0 #0b1023, 0 0.6em 1em rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column; align-items: center; gap: 0.18em; pointer-events: auto; cursor: pointer; transition: transform 0.06s;
}
.upg:active { transform: translateY(0.12em); }
.upg.can { box-shadow: 0 0 0 0.16em rgba(255, 210, 63, 0.75), 0 0.3em 0 #0b1023, 0 0.6em 1em rgba(0, 0, 0, 0.35); }
.upg-ic { width: 2.5em; height: 2.5em; display: block; }
.upg-name { font-size: 1em; }
.upg-lvl { font-size: 0.68em; color: #9fb3e8; font-family: 'Segoe UI', system-ui, sans-serif; font-weight: 700; white-space: nowrap; }
.upg-cost { display: inline-flex; align-items: center; gap: 0.2em; margin-top: 0.15em; background: linear-gradient(#ffd54a, #ff9f1a); border-radius: 0.6em; padding: 0.15em 0.55em; font-size: 0.95em; box-shadow: 0 0.15em 0 #b45f00; }
.upg.off .upg-cost, .tip.off .upg-cost { filter: grayscale(0.7) brightness(0.8); }
.upg svg.i, .tip svg.i, .won-rows svg.i { width: 1em; height: 1em; }
.lv-links { position: absolute; left: 0; right: 0; top: calc(var(--oy) + var(--u) * 545px); display: flex; justify-content: center; gap: 0.5em; }

/* ---------- Fin de niveau ---------- */
.won-rows { width: 100%; display: flex; flex-direction: column; gap: 0.3em; margin: 0.1em 0 0.3em; }
.won-rows div { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.22); border-radius: 0.6em; padding: 0.35em 0.7em; }
.won-rows span { font-size: 0.9em; color: #c9d6ff; }
.won-rows b { font-weight: normal; display: inline-flex; align-items: center; gap: 0.25em; color: #ffe28a; }
.unlock { margin: 0.1em 0 0.3em; background: linear-gradient(#63b6ff, #2a6fe6); padding: 0.2em 0.8em; border-radius: 1em; font-size: 0.95em; animation: pop-in 0.4s ease-out; }
.lv-prog { width: 100%; margin: 0.2em 0 0.3em; display: flex; flex-direction: column; align-items: center; gap: 0.3em; }
.lv-prog .bar { width: 100%; height: 0.9em; border-radius: 0.5em; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.lv-prog .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd54a, #ff7b3a); }
.lv-prog span { font-size: 0.95em; color: #c9d6ff; }
.kept { font-size: 0.8em; color: #c9d6ff; margin-bottom: 0.3em; font-family: 'Segoe UI', system-ui, sans-serif; font-weight: 700; }
.tip {
  width: 100%; font: inherit; color: #fff; border: 0; border-radius: 0.8em; padding: 0.5em 0.7em; margin: 0.15em 0 0.35em;
  background: rgba(114, 240, 149, 0.13); box-shadow: 0 0 0 0.12em rgba(114, 240, 149, 0.5); display: flex; align-items: center; gap: 0.5em; cursor: pointer; pointer-events: auto;
}
.tip-k { font-size: 0.72em; color: #72f095; text-transform: uppercase; }
.tip-name { flex: 1; text-align: left; font-size: 0.95em; }
.tip-name .next { color: #72f095; font-size: 0.85em; }

/* ---------- Missions, défi du jour, collection ---------- */
.missions-pill {
  position: absolute; top: 3.3em; left: 0.8em; font: inherit; font-size: 1em; color: #fff; border: 0; cursor: pointer; pointer-events: auto;
  background: rgba(8, 14, 28, 0.6); border-radius: 1em; padding: 0.25em 0.75em; box-shadow: 0 0 0 0.1em rgba(255, 255, 255, 0.15);
}
.missions-pill.hot { box-shadow: 0 0 0 0.14em rgba(255, 210, 63, 0.85); }
.missions-pill i { position: absolute; top: -0.15em; right: -0.15em; width: 0.7em; height: 0.7em; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0.12em #0b1530; }
.daily {
  margin-top: 0.7em; font: inherit; color: #fff; border: 0; cursor: pointer; pointer-events: auto; display: flex; align-items: center; gap: 0.5em;
  background: linear-gradient(#ff8a3a, #d4401f); border-radius: 0.9em; padding: 0.4em 0.7em; box-shadow: 0 0.22em 0 #8a2410, 0 0.45em 0.9em rgba(0, 0, 0, 0.35);
  animation: pop-in 0.3s ease-out;
}
.daily .fire { font-size: 1.5em; line-height: 1; }
.daily .d-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.daily .d-txt b { font-weight: normal; font-size: 1.05em; }
.daily .d-txt span { font-size: 0.7em; color: #ffe1c8; font-family: 'Segoe UI', system-ui, sans-serif; font-weight: 700; }
.daily.done { cursor: default; background: rgba(8, 14, 28, 0.6); box-shadow: 0 0 0 0.1em rgba(114, 240, 149, 0.5); color: #9ff0b6; font-size: 0.9em; padding: 0.35em 0.8em; }
.trial-pill { margin-top: 0.5em; background: rgba(116, 64, 232, 0.85); border-radius: 1em; padding: 0.2em 0.8em; font-size: 0.85em; }
.col-head { margin: 0.6em 0 0.3em; font-size: 1.05em; color: #ffe28a; }
.col-item { display: flex; align-items: center; gap: 0.6em; background: rgba(255, 255, 255, 0.07); border-radius: 0.8em; padding: 0.55em 0.7em; margin-bottom: 0.45em; }
.col-item.on { box-shadow: 0 0 0 0.12em rgba(255, 210, 63, 0.7); }
.col-txt { flex: 1; min-width: 0; }
.col-name { font-size: 1.02em; }
.col-name .lock, .col-item > .col-act .lock { font-size: 0.75em; color: #9fb3e8; }
.col-desc { font-size: 0.75em; color: #c9d6ff; font-family: 'Segoe UI', system-ui, sans-serif; font-weight: 700; display: flex; align-items: center; gap: 0.25em; }
.col-desc svg.i { width: 1em; height: 1em; }
.col-act { display: flex; gap: 0.35em; align-items: center; flex: none; }
.col-act .btn.small { font-size: 0.85em; padding: 0.4em 0.6em; }
.col-act .btn svg.i { width: 1em; height: 1em; }
.tag { font-size: 0.8em; color: #c9d6ff; padding: 0.2em 0.5em; border-radius: 0.6em; background: rgba(0, 0, 0, 0.25); }
.tag.on { color: #72f095; }
.swatch { width: 1.6em; height: 1.6em; border-radius: 50%; flex: none; box-shadow: 0 0 0 0.12em rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; font-size: 0.85em; }
.swatch.auto { background: linear-gradient(135deg, #3f8f45, #c4302b, #2f5fb8, #e0b030); }
.m-bar { width: 100%; height: 0.55em; border-radius: 0.4em; background: rgba(0, 0, 0, 0.35); overflow: hidden; margin: 0.25em 0; }
.m-bar i { display: block; height: 100%; background: linear-gradient(90deg, #72f095, #2fb36a); }
.m-n { font-size: 0.85em; color: #c9d6ff; }

/* ---------- Paysage (ordinateur, portails en 16:9) ----------
   Les textes sont plus grands (--uz) et l'écran de niveau se répartit de part et d'autre de la route. */
body.landscape .lv .lv-head { position: absolute; right: calc(100% + 0.6em); top: 22%; margin: 0; width: min(15em, calc((100vw - var(--colw)) / 2 - 1.4em)); }
body.landscape .lv .lv-title { font-size: 3em; }
body.landscape .lv .daily { max-width: 100%; }
body.landscape .lv .daily .d-txt span { font-size: 0.62em; }
body.landscape .lv .upg-row { left: calc(100% + 0.6em); right: auto; top: 15%; width: min(12em, calc((100vw - var(--colw)) / 2 - 1.4em)); flex-direction: column; gap: 0.45em; }
body.landscape .lv .upg { display: grid; grid-template-columns: 2.4em 1fr auto; align-items: center; text-align: left; padding: 0.45em 0.6em; gap: 0 0.5em; }
body.landscape .lv .upg-ic { grid-row: 1 / span 2; width: 2.3em; height: 2.3em; }
body.landscape .lv .upg-name { grid-column: 2; }
body.landscape .lv .upg-lvl { grid-column: 2; grid-row: 2; white-space: normal; }
body.landscape .lv .upg-cost { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
body.landscape .lv .lv-links { left: calc(100% + 0.6em); right: auto; top: auto; bottom: 9%; width: min(12em, calc((100vw - var(--colw)) / 2 - 1.4em)); flex-direction: column; align-items: stretch; gap: 0.35em; }
body.landscape .lv .coins-tl { left: auto; right: calc(100% + 0.8em); top: 0.6em; }
body.landscape .lv .missions-pill { left: auto; right: calc(100% + 0.8em); top: 2.9em; }
body.landscape .lv .top-right { right: auto; left: calc(100% + 0.8em); top: 0.6em; }
.missions-pill { white-space: nowrap; }
/* écran d'accueil de la survie : les deux boutons passent à la ligne sur les petits écrans */
.ready .shop-cta { flex-wrap: wrap; gap: 0 0.5em; padding: 0 0.6em; }
.lv-kicker.gold { color: #ffd23f; }