/* Maki Communication — mode jeu 3D */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8FD3FF; }
body {
  font-family: 'League Spartan', system-ui, -apple-system, sans-serif;
  color: #1D3E82;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}
.game { position: fixed; inset: 0; overflow: hidden; }
.stage { position: absolute; inset: 0; }
.stage canvas { display: block; width: 100% !important; height: 100% !important; }
.game.is-shaking .stage { animation: g-shake .35s linear; }
@keyframes g-shake {
  20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -5px); }
  60% { transform: translate(-5px, 3px); } 80% { transform: translate(3px, -2px); }
}

/* ---------- HUD ---------- */
.hud {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hud[hidden] { display: none; }
.hud-round {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0; border-radius: 14px;
  background: #3D63D8;
  background: linear-gradient(180deg, #5B80F0 0%, #2F52C4 100%);
  color: #fff;
  box-shadow: 0 4px 0 #1D3E82, 0 10px 20px rgba(29,62,130,.3);
  cursor: pointer;
}
.hud-round:active { transform: translateY(2px); box-shadow: 0 2px 0 #1D3E82; }
.hud-progress {
  position: relative;
  flex: 1;
  height: 14px;
  border-radius: 999px;
  background: rgba(29,62,130,.35);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.2);
}
.hud-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #FFE15B, #F48F30); }
.hud-mark { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 3px solid #1D3E82; transition: background .3s, transform .3s; }
.hud-mark.is-done { background: #F48F30; transform: scale(1.2); }
.hud-flag { position: absolute; right: -8px; top: 50%; transform: translateY(-58%); font-size: 20px; }
.hud-score {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px 0 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, #2B4FA8 0%, #1D3E82 100%);
  box-shadow: 0 4px 0 #122B5E, 0 10px 20px rgba(29,62,130,.3);
  color: #fff;
  font-weight: 900;
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.hud-score img { width: 32px; height: auto; }
.hud-score.bump { animation: g-bump .22s ease; }
@keyframes g-bump { 50% { transform: scale(1.14); } }

/* ---------- Bulle service ---------- */
.zone-card {
  position: absolute;
  z-index: 4;
  top: calc(max(12px, env(safe-area-inset-top)) + 64px);
  left: 50%;
  width: min(420px, calc(100% - 24px));
  transform: translateX(-50%);
  padding: 16px 20px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 6px 0 rgba(29,62,130,.18), 0 20px 50px rgba(29,62,130,.25);
  animation: g-pop .4s cubic-bezier(.2,.8,.2,1.25);
}
.zone-card[hidden] { display: none; }
.zone-kicker { display: block; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #F48F30; margin-bottom: 4px; }
.zone-card strong { display: block; font-size: 1.55rem; line-height: 1.05; margin-bottom: 6px; font-weight: 900; }
.zone-card p { margin: 0 0 8px; color: #4C5568; line-height: 1.4; font-weight: 500; }
.zone-link { font-weight: 800; color: #1D3E82; }
@keyframes g-pop { from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.94); } }

/* ---------- Compte à rebours ---------- */
.countdown { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; }
.countdown[hidden] { display: none; }
.countdown span {
  font-size: clamp(6rem, 24vw, 11rem);
  font-weight: 900;
  line-height: 1;
  color: #FFE15B;
  -webkit-text-stroke: 6px #1D3E82;
  paint-order: stroke fill;
  text-shadow: 0 10px 0 #1D3E82, 0 20px 40px rgba(0,0,0,.3);
  transform: rotate(-6deg);
}
.countdown span.tick { animation: g-count .9s cubic-bezier(.2,.9,.3,1.3); }
@keyframes g-count { 0% { transform: scale(2.2) rotate(-6deg); opacity: 0; } 25% { transform: scale(1) rotate(-6deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.85) rotate(-6deg); opacity: 0; } }

/* ---------- Indication ---------- */
.hint {
  position: absolute; z-index: 4; left: 50%; bottom: max(28px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 10px 18px; border-radius: 999px;
  background: rgba(29,62,130,.85); color: #fff; font-weight: 800; font-size: 1rem; white-space: nowrap;
  animation: g-fade .4s ease;
  pointer-events: none;
}
.hint[hidden] { display: none; }
@keyframes g-fade { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------- Écrans ---------- */
.screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(20,40,95,.45);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  touch-action: auto;
}
.screen[hidden] { display: none; }
.screen-card {
  width: min(520px, 100%);
  max-height: calc(100% - 20px);
  overflow: auto;
  padding: 28px 26px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 8px 0 rgba(29,62,130,.2), 0 30px 70px rgba(10,25,70,.35);
  text-align: center;
  user-select: text;
  -webkit-user-select: text;
  animation: g-card .35s cubic-bezier(.2,.8,.2,1.2);
}
.screen-card-sm { width: min(420px, 100%); }
@keyframes g-card { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.screen-logo { width: 150px; height: auto; margin: 0 auto 8px; display: block; }
.screen-card h1, .screen-card h2 { margin: 0 0 10px; font-size: clamp(2rem, 6vw, 2.7rem); line-height: 1; letter-spacing: -.03em; font-weight: 900; }
.screen-card p { margin: 0 0 14px; color: #4C5568; line-height: 1.5; font-size: 1.05rem; }
.screen-kicker { display: block; color: #F48F30; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.screen-pitch { font-weight: 600; color: #1D3E82 !important; }
.screen-best { font-weight: 800; color: #1D3E82 !important; margin-top: -4px !important; }
.screen-best[hidden] { display: none; }

.controls { display: grid; gap: 8px; margin: 0 0 18px; text-align: left; }
.control { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #F4F7FF; }
.control-ico { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #1D3E82; color: #FFE15B; font-size: 1.3rem; font-weight: 900; }
.control strong { display: block; font-weight: 800; line-height: 1.1; }
.control em { display: block; font-style: normal; color: #4C5568; font-weight: 600; font-size: .95rem; }
.only-touch { display: none !important; }
@media (hover: none) and (pointer: coarse) {
  .only-touch { display: block !important; }
  .only-desk { display: none !important; }
}

.stats { display: flex; gap: 10px; justify-content: center; margin: 4px 0 18px; }
.stat { flex: 1; max-width: 160px; display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: 16px; background: #F4F7FF; }
.stat img { width: 34px; height: auto; }
.stat-ico { font-size: 26px; line-height: 34px; }
.stat strong { font-size: 1.6rem; font-weight: 900; line-height: 1; }
.stat span:last-child { color: #4C5568; font-weight: 700; font-size: .9rem; }

.crash-img { width: 110px; height: auto; display: block; margin: -4px auto 6px; transform: rotate(-14deg); filter: drop-shadow(0 8px 10px rgba(29,62,130,.25)); }

.screen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 32px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFE15B 0%, #FFB547 100%);
  color: #26314A;
  font: inherit;
  font-weight: 900;
  font-size: 1.2rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 0 #D9822B, 0 14px 28px rgba(255,170,57,.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.screen-btn:hover { transform: translateY(-2px); }
.screen-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #D9822B; }
.screen-btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.screen-btn:focus-visible, .screen-link-btn:focus-visible, .hud-round:focus-visible { outline: 3px solid #1D3E82; outline-offset: 3px; }
.screen-btn-alt { background: linear-gradient(180deg, #2B4FA8 0%, #1D3E82 100%); color: #fff; box-shadow: 0 5px 0 #122B5E; }
.screen-btn-alt:active { box-shadow: 0 2px 0 #122B5E; }
.screen-link { display: inline-block; margin-top: 14px; color: #4C5568; font-weight: 700; }
.screen-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.screen-actions-small { margin-top: 14px; gap: 4px; }
.screen-link-btn { border: 0; background: none; padding: 8px 12px; font: inherit; font-weight: 800; color: #1D3E82; text-decoration: underline; cursor: pointer; }

@media (max-width: 600px) {
  .hud { gap: 8px; }
  .hud-round { width: 44px; height: 44px; }
  .hud-score { font-size: 1.2rem; min-height: 44px; padding-right: 14px; }
  .hud-score img { width: 26px; }
  .screen-card { padding: 22px 18px; }
  .screen-btn { width: 100%; }
  .controls { margin-bottom: 14px; }
  .control { padding: 8px 10px; }
}
@media (max-height: 640px) {
  .screen-logo { width: 110px; }
  .controls { gap: 6px; }
}