#hud-top {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-left: calc(env(safe-area-inset-left) + 14px);
}

.hud-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(160deg, rgba(40, 26, 18, 0.85), rgba(20, 13, 10, 0.7));
  border: 1px solid rgba(255, 200, 36, 0.35);
  border-radius: clamp(12px, 3vmin, 20px);
  padding: clamp(5px, 1.4vmin, 10px) clamp(10px, 2.4vmin, 16px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease-out;
}

.hud-chip.bump {
  transform: scale(1.08);
}

#wallet-amount {
  min-width: 2ch;
  font-size: clamp(18px, 4.6vmin, 28px);
  font-weight: 800;
  color: #ffc824;
  text-shadow: 0 0 10px rgba(255, 140, 26, 0.6), 0 2px 2px rgba(0, 0, 0, 0.6);
  font-variant-numeric: tabular-nums;
}

#quota {
  flex: 0 1 auto;
  min-width: 0;
}

#quota-bar {
  position: relative;
  width: clamp(70px, 26vw, 180px);
  height: clamp(10px, 2.2vmin, 14px);
  border-radius: 999px;
  background: rgba(30, 26, 36, 0.9);
  border: 1px solid rgba(243, 234, 216, 0.55);
  overflow: hidden;
}

#quota-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #ff8c1a, #ffb319 60%, #ffe68a);
  box-shadow: 0 0 10px rgba(255, 179, 25, 0.7);
  transition: width 0.18s ease-out;
}

#quota-text {
  font-size: clamp(12px, 3vmin, 16px);
  font-weight: 800;
  color: #f3ead8;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
}

                           

#end-screen {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(90% 70% at 50% 45%, rgba(60, 36, 12, 0.55), rgba(10, 6, 4, 0.8));
  animation: end-in 0.35s ease-out;
}

#end-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vmin, 14px);
  padding: clamp(20px, 5vmin, 34px) clamp(26px, 7vmin, 48px);
  border-radius: clamp(20px, 5vmin, 30px);
  background: linear-gradient(165deg, rgba(56, 34, 20, 0.92), rgba(20, 13, 10, 0.94));
  border: 1px solid rgba(255, 200, 36, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

#end-coin {
  width: clamp(44px, 12vmin, 72px);
  height: clamp(44px, 12vmin, 72px);
  border-width: 3px;
}

#end-title {
  margin: 0;
  font-size: clamp(26px, 8vmin, 44px);
  font-weight: 900;
  color: #ffc824;
  text-shadow: 0 0 18px rgba(255, 140, 26, 0.55);
}

#end-time {
  margin: 0;
  font-size: clamp(18px, 5vmin, 28px);
  font-weight: 800;
  color: #f3ead8;
  font-variant-numeric: tabular-nums;
}

@keyframes end-in {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

                                            

#debug-panel {
  position: fixed;
  left: calc(env(safe-area-inset-left) + 8px);
  bottom: calc(env(safe-area-inset-bottom) + 8px);
  z-index: 50;
  max-width: min(92vw, 360px);
  padding: 8px;
  border-radius: 10px;
  background: rgba(10, 8, 12, 0.82);
  border: 1px solid rgba(243, 234, 216, 0.3);
  color: #f3ead8;
  font: 11px/1.35 ui-monospace, Consolas, monospace;
  pointer-events: auto;
}

#debug-text {
  margin: 0 0 6px;
  white-space: pre-wrap;
}

#debug-actions {
  display: flex;
  gap: 6px;
}

#debug-actions button {
  flex: 1;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid rgba(243, 234, 216, 0.4);
  background: #2a2626;
  color: #f3ead8;
  font: inherit;
}

#debug-export {
  width: 100%;
  margin-bottom: 6px;
  font: 10px/1.3 ui-monospace, Consolas, monospace;
  background: #141016;
  color: #f3ead8;
  border: 1px solid rgba(243, 234, 216, 0.3);
}

                                                           

.fly-coin {
  position: fixed;
  left: -13px;
  top: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #ffc824 45%, #d97a00 100%);
  border: 2px solid rgba(90, 50, 8, 0.85);
  box-shadow: 0 0 10px rgba(255, 170, 40, 0.8);
  pointer-events: none;
  will-change: transform;
  z-index: 12;
}

                                                                                                              
#hint-hand {
  position: fixed;
  left: 50%;
  top: 72%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 11;
}
.hint-finger {
  position: absolute;
  left: -26px;
  top: -26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 38%, rgba(255, 255, 255, 0.25) 40% 70%, rgba(255, 255, 255, 0) 72%);
  box-shadow: 0 0 18px rgba(255, 220, 140, 0.8);
  animation: hint-swipe 1.25s ease-in-out infinite;
}
@keyframes hint-swipe {
  0% { transform: translate(0, 0) scale(1.15); opacity: 0; }
  15% { transform: translate(0, 0) scale(1); opacity: 1; }
  75% { transform: translate(var(--hint-dx, 0px), var(--hint-dy, -90px)) scale(0.9); opacity: 1; }
  100% { transform: translate(var(--hint-dx, 0px), var(--hint-dy, -90px)) scale(0.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hint-finger { animation-duration: 2.4s; }
}

                                                                                
                                                                                  
                                                                                  
                                                                                  
                                                                                 
                                                                                   
                                                                                

                                                                            
                                                                                              
                                                                                                    
:root {
  --ad-safe-top: env(safe-area-inset-top, 0px);
  --ad-safe-right: env(safe-area-inset-right, 0px);
  --ad-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ad-safe-left: env(safe-area-inset-left, 0px);
  --ad-target: 44px;
  --ad-gutter: 10px;
  --ad-chip-height: 36px;
}

#ad-hud[hidden],
#ad-wallet[hidden],
#ad-notice[hidden],
#ad-result[hidden],
#ad-next[hidden],
#ad-next-note[hidden],
#ad-error[hidden] {
  display: none !important;
}

                                                                                                   
html:not(.mode-tranche-a) #title-screen {
  display: none !important;
}

                                                                                      
.mode-ad #title-screen,
.mode-ad #hud,
.mode-ad #end-screen,
.mode-ad #debug-panel {
  display: none !important;
}

.mode-ad body,
.mode-ad #game {
  background: #202634;
}

#ad-hud {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
  display: flex;
                                                                                         
                                                                                              
                                                                      
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  padding: calc(var(--ad-safe-top) + 8px) calc(var(--ad-safe-right) + var(--ad-gutter)) 0 calc(var(--ad-safe-left) + var(--ad-gutter));
  pointer-events: none;
  color: #f6f5f1;
}

.ad-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ad-chip-height);
  padding: 6px 12px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(43, 52, 71, 0.96), rgba(22, 27, 39, 0.94));
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.42);
}

#ad-goal {
  flex: 0 1 230px;
  min-width: 0;
  max-width: 250px;
  gap: 7px;
}

.ad-goal-gem { flex: 0 0 29px; width: 29px; height: 29px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.36)); }
.ad-goal-gem svg { width: 100%; height: 100%; fill: #ffc52e; stroke: #fff2b5; stroke-width: 1.35; stroke-linejoin: round; }
.ad-goal-copy { display: grid; min-width: 47px; line-height: 1; }
#ad-goal-label { margin-bottom: 3px; color: #c9d1df; font-size: 9px; font-weight: 900; letter-spacing: .1em; }

#ad-goal-bar {
  position: relative;
  flex: 1 1 auto;
  min-width: 60px;
  height: 8px;
  border-radius: 999px;
  background: rgba(6, 10, 18, 0.62);
  border: 1px solid rgba(246, 245, 241, 0.25);
  overflow: hidden;
}

#ad-goal-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #ff9f1f, #ffe15a);
  box-shadow: inset 0 1px rgba(255,255,255,.44);
  transition: width 0.15s ease-out;
}

#ad-goal-text,
#ad-wallet-amount {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#ad-wallet-amount {
  color: #ffc52e;
}

#ad-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

                                                                                                  
                                                                                                   
#ad-side:has(> #ad-wallet[hidden]) {
  justify-content: center;
}

#ad-timer {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(246, 245, 241, 0.85);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.ad-chip.bump {
  transform: scale(1.06);
  transition: transform 0.1s ease-out;
}

                                                                                            
#ad-hud.ad-paused #ad-timer::before {
  content: "Pause · ";
  color: #ffc52e;
}

                                                                                                
@media (orientation: landscape) and (max-height: 500px) {
                                                                                               
                                                                               
  #ad-hud {
    padding-top: calc(var(--ad-safe-top) + 2px);
  }
  #ad-side {
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
  }
}

.ad-button {
  min-width: 132px;
  min-height: max(48px, var(--ad-target));
  padding: 10px 22px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #bda1ff, #8464d5);
  box-shadow: inset 0 2px rgba(255,255,255,.38), inset 0 -3px rgba(42,25,87,.4), 0 5px 12px rgba(0,0,0,.4);
  color: #171226;
  font: 900 18px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ad-button:hover { filter: brightness(1.08); }
.ad-button:active { transform: translateY(2px); box-shadow: inset 0 1px rgba(255,255,255,.28), inset 0 -1px rgba(42,25,87,.4), 0 2px 5px rgba(0,0,0,.35); }
#ad-next { background: linear-gradient(180deg, #75e864, #28a842); box-shadow: inset 0 2px rgba(255,255,255,.4), inset 0 -3px rgba(12,93,35,.42), 0 5px 12px rgba(0,0,0,.4); }

.ad-button:focus-visible {
  outline: 3px solid #ffc52e;
  outline-offset: 3px;
}

                                                                                       
#ad-notice {
  position: fixed;
  left: 50%;
  top: calc(var(--ad-safe-top) + 13vh);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(92vw, 420px);
  padding: 10px 12px 10px 16px;
  transform: translateX(-50%);
  border-radius: 16px;
  background: rgba(32, 38, 52, 0.94);
  border: 2px solid #f34b32;
  color: #f6f5f1;
}

#ad-notice-text {
  flex: 1 1 auto;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

#ad-notice .ad-button {
  min-width: 96px;
  font-size: 15px;
}

                                                                                      
#ad-result {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: flex;
  justify-content: center;
  padding: 0 calc(var(--ad-safe-right) + 12px) calc(var(--ad-safe-bottom) + 16px) calc(var(--ad-safe-left) + 12px);
  pointer-events: none;
}

#ad-result-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: min(100%, 420px);
  padding: 14px 18px 16px;
  max-height: calc(100dvh - var(--ad-safe-top) - var(--ad-safe-bottom) - 86px);
  overflow-y: auto;
  border-radius: 20px 20px 16px 16px;
  background: linear-gradient(155deg, rgba(55, 65, 88, 0.98), rgba(25, 31, 45, 0.98));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.62);
  color: #f6f5f1;
  pointer-events: auto;
  touch-action: manipulation;
}

#ad-result-title {
  margin: 0;
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  color: #ffc52e;
}

#ad-result-level-title { margin: -7px 0 0; color: #d5dce8; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-align: center; }

#ad-stars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ad-star {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}

.ad-star-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: rgba(246, 245, 241, 0.18);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.ad-star.earned .ad-star-icon {
  background: linear-gradient(145deg, #fff28a, #ffae14);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}

.ad-star:not(.earned) .ad-star-label {
  color: rgba(246, 245, 241, 0.6);
}

                                                                         
.ad-star::after {
  content: "à tenter";
  margin-left: auto;
  padding-left: 6px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: rgba(246, 245, 241, 0.6);
}

.ad-star.earned::after {
  content: "obtenue";
  color: #ffc52e;
}

#ad-result-stats {
  margin: 0;
  text-align: center;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

#ad-next-preview { margin: -2px 0 0; color: #dce4f2; font-size: 13px; font-weight: 700; text-align: center; }

#ad-result-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

                                                                                
#ad-result-actions .ad-button {
  flex: 1 1 0;
  min-width: 0;
  max-width: 190px;
  padding: 10px 12px;
}

                                                                             
#ad-next-note {
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: #f6f5f1;
}

#ad-error {
  position: fixed;
  inset: 0;
  z-index: 60;
  padding: calc(var(--ad-safe-top) + 20px) calc(var(--ad-safe-right) + 16px) calc(var(--ad-safe-bottom) + 16px) calc(var(--ad-safe-left) + 16px);
  overflow: auto;
  background: #202634;
  color: #f6f5f1;
  font: 14px/1.4 system-ui, sans-serif;
}

#ad-error-text {
  white-space: pre-wrap;
  font: 12px/1.35 ui-monospace, Consolas, monospace;
}

                                                                                               
@media (max-height: 420px) {
  #ad-result {
    padding-bottom: calc(var(--ad-safe-bottom) + 8px);
  }
  #ad-result-card {
    gap: 6px;
    padding: 10px 16px 12px;
  }
  #ad-result-title { font-size: 20px; }
  #ad-stars { gap: 2px; }
  .ad-star-icon { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-chip.bump { transform: none; transition: none; }
  #ad-goal-fill { transition: none; }
                                                                                           
  .mode-ad .hint-finger {
    animation: ad-hint-steps 2.4s linear infinite;
  }
}

@keyframes ad-hint-steps {
  0% { transform: translate(0, 0); opacity: 0; }
  10%, 40% { transform: translate(0, 0); opacity: 1; }
  49.9% { transform: translate(0, 0); opacity: 0; }
  50% { transform: translate(var(--hint-dx, 0px), var(--hint-dy, -90px)); opacity: 0; }
  60%, 90% { transform: translate(var(--hint-dx, 0px), var(--hint-dy, -90px)); opacity: 1; }
  100% { transform: translate(var(--hint-dx, 0px), var(--hint-dy, -90px)); opacity: 0; }
}
#ad-objective-direction {
  position: fixed; z-index: 7; pointer-events: none;
  transform: translate(-50%, -50%); display: flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 8px; background: #202634ed; color: #fff2cf;
  font-size: 12px; font-weight: 750; box-shadow: 0 3px 9px #100c1640;
}
#ad-objective-direction[hidden] { display: none; }
#ad-objective-direction svg { width: 17px; height: 17px; }