html, body { margin: 0; height: 100%; background: #07040f; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
  body { display: flex; align-items: center; justify-content: center; font-family: system-ui, sans-serif; }
  #wrap { position: relative; height: min(100vh, 150vw); height: min(100dvh, 150vw); aspect-ratio: 3 / 4; }
  canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; outline: none; box-shadow: 0 0 40px #3a1a6e66; }
  .btn { position: absolute; top: 8px; background: #0b0a10aa; color: #fff; border: 1px solid #ffffff22; border-radius: 8px; font-size: 15px; width: 30px; height: 24px; cursor: pointer; padding: 0; z-index: 2; top: auto; bottom: 4px; font-size: 13px; }
  #mute { right: 6px; } #pause { right: 42px; }
  #start { position: absolute; left: 50%; top: 81%; transform: translate(-50%, -50%); z-index: 3; font: 700 clamp(18px, 4.5vh, 30px) ui-monospace, Menlo, monospace; letter-spacing: 3px; color: #2a1405; background: linear-gradient(#fff4bc, #f5b92c); border: 3px solid #0b0a10; border-radius: 10px; padding: 0.45em 1.4em; box-shadow: 0 4px 0 #9a5a0e, 0 0 24px #ffde5e88; cursor: pointer; animation: pulse 1.1s ease-in-out infinite; touch-action: manipulation; }
  #start:active { transform: translate(-50%, -46%); box-shadow: 0 1px 0 #9a5a0e; }
  @keyframes pulse { 50% { filter: brightness(1.15); } }
  .credit { position: fixed; bottom: 4px; left: 0; right: 0; text-align: center; color: #5e5878; font-size: 10px; pointer-events: none; }
  .credit a { color: #8a84a4; pointer-events: auto; }
  .credit a.retour { margin-right: 10px; }
  @media (max-aspect-ratio: 3/4) { .credit { display: none; } }